Ch 13 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.

Slides:



Advertisements
Similar presentations
HTML Basics Customizing your site using the basics of HTML.
Advertisements

Hyper Text Markup Language.  HTML is a language for describing web pages.  HTML stands for Hyper Text Markup Language  HTML is not a programming language,
A really fairly simple guide to: mobile browser-based application development (part 1) Chris Greenhalgh G54UBI / Chris Greenhalgh
Creating and Editing a Web Page Using Inline Styles
Chapter 5 Creating an Image Map
COMP101 – Exploring Multimedia and Internet Computing LA2 (Thur 14:00 – 16:50) TA: Jackie Lo.
Macromedia Dreamweaver MX 2004 Design Professional Web Page DEVELOPING A.
Explore the Dreamweaver Workspace View a Web page and use Help Plan and Define a Web site Add a Folder and Pages, and set the Home page Create and View.
IS 360 Web Promotion. Slide 2 Overview How to attract visitors.
CM143 - Web Week 2 Basic HTML. Links and Image Tags.
Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
Meta Tags What are Meta Tags And How Are They Best Used?
Remember, HTML is all about the meaning of your content Most HTML tags have built-in formatting that apply “meaning” to them and format their content.
TUTORIAL 8: Enhancing a Web Site with Advanced CSS
Adding metadata to web pages Please note: this is a temporary test document for use in internal testing only.
ECA 228 Internet/Intranet Design I Meta Tags & Directories.
Creating a Simple Page: HTML Overview
Define html document byusing Example : Title of the document The content of the document......
Online Chapter 1 4 th Edition.  Review elements  Whitespace handling  Rule structure  Linking to an external style sheet  Alternate Style Sheets.
 ult.htm ult.htm  This website illustrates the use of CCS (style sheets)
Headings, Paragraphs, Formatting, Links, Head, CSS, Images
Getting Started with Expression Web 3
Alternative Views of the Web Jon Gunderson, Ph.D. Division of Rehabilitation-Education Services University of Illinois at Urbana/Champaign.
Eat Your Words! Creating webpage Layout. CONTENT The Layout of a Webpage HEADER FOOTER Each of these sections represents a ‘div’ (or divider). By linking.
HTML (HyperText Markup Language)
Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: –The head content –The body Creating Head Content and Setting Page Properties.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
HTML and Style. Session overview Leveling-off on the basic concepts of HTML and Styles Discuss Web authoring options.
Week 8 – Part 3 More on Links, Layout, and Mobile Key Concepts 1.
Learning Web Design: Chapter 4. HTML  Hypertext Markup Language (HTML)  Uses tags to tell the browser the start and end of a certain kind of formatting.
Introduction. Document Structure Overview  XML declaration (prolog)  Document type declaration  Root element (namespace)  Document header  Document.
All Web pages are written with some form of HTML (HyperText Markup Language). HTML documents are saved as Text Only files so virtually any computer can.
>> Introduction to HTML: Tags. Hyper - is the opposite of linear Text – words / sentences / paragraphs Mark-up – Marking the text Language – It is a language.
Title, meta, link, script.  The title looks like:  The tag defines the title of the document in the browser toolbar.  It also: ◦ Provides a title for.
Copyright © 2013 MyGraphicsLab / Pearson Education STRUCTURE AND HTML TAGS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication.
INTRODUCTION. What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language,
Copyright 2007, Information Builders. Slide 1 Understanding Basic HTML Amanda Regan Technical Director June, 2008.
INTRODUCTORY Tutorial 1 Using HTML Tags to Create Web Pages.
SMRs, Users and the Web Kate Fernie HEIRNET. SMRs on the Web Finding your site Search engines Using your site.
HTML: Hyptertext Markup Language Doman’s Sections.
The Internet Using the Internet Web addresses Searching Favourites Saving / Printing web pages.
1 Web Application Programming Presented by: Mehwish Shafiq.
15.1 Fundamentals of HTML DeKalb County School System.
CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor
HTML Basic. What is HTML HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it.
Macromedia Dreamweaver 8 Revealed WEB PAGE DEVELOPING A.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.
INTRODUCTORY Tutorial 5 Using CSS for Layout and Printing.
Cascading Style Sheets
Introduction to HTML UWWD. Agenda What do you need? What do you need? What are HTML, CSS, and tags? What are HTML, CSS, and tags? html, head, and body.
WEEK -1 ACM 262 ACM 262 Course Notes. HTML What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML.
Web Technology (NCS-504) Prepared By Mr. Abhishek Kesharwani Assistant Professor,UCER Naini,Allahabad.
© ExplorNet’s Centers for Quality Teaching and Learning 1 Objective % Understand advanced production methods for web-based digital media.
Creating Web Pages with Links, Images, and Embedded Style Sheets
Tutorial #1 Using HTML to Create Web Pages. HTML, XHTML, and CSS HTML – HyperText Markup Language The tags the browser uses to define the content of the.
HTML Tutorial. What is HTML HTML is a markup language for describing web documents (web pages) HTML documents are described by HTML tags Each HTML tag.
COMP 143 Web Development with Adobe Dreamweaver CC.
Basic HTML Page 1. First Open Windows Notepad to type your HTML code 2.
Source of website: “Text/css rel=“styles heet” This is an external style sheet link. This means that the.
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 1 Using HTML to Create Web Pages.
Week-12 (Lecture-1) Cascading Style Sheets (CSS): describe how documents are presented on screens. Types of Style Sheets: External Style Sheet - Define.
Web Basics: HTML/CSS/JavaScript What are they?
Web Page Elements Writing For the Web
WEBSITE DESIGN Chp 1
Digital Design – Copyright Law
Introduction to HTML- Basics
SEO Hand Book.
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
Common Page Design Elements
Creating your website and learning HTML
Presentation transcript:

Ch 13 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach

 There are a number of key elements that can be found in most head sections of html pages.

 meta  title  link  style  script

 The use of tags  Metadata is data that describes other data  Choosing the right description meta data is important for search engines

 Projects such as the Dublin Core MetaData Initiative are dedicated to creating standard conventions

 There are four types of attributes to the meta element:  http-equiv  name  author  keywords  copyright  Robots  content  scheme.

 What happens if you don’t include the character set information for words like: Iñtërnâtiônàlizætiøn?

 Separating the XHTML content from the CSS presentation can be fully and consistently exploited when external style sheets are used. InternalExternal linked.css

 Media types for style sheets  Screen  Print

 Screen

 Print

 It is well documented how many browsers do not conform to the standards and certain versions of Internet Explorer require conditional comments that can be used to try and implement your CSS in a different way to get the same result on screen. /* target versions of IE less than or equal to version 6 */

 Targeting specific versions of Internet Explorer /* target versions of IE */ /* target versions of IE less than 6 */ /* target versions of IE greater than or equal to 5.5 */

 Targeting specific versions of Internet Explorer /* target versions of IE less than 6 */ screen.css #header { background-image: url(images/transparent_background.png); } iehacks.css #header /* IE 6 does not support transparency in png images */ { background-image: url(images/transparent_background.gif); }

 Manually checking compatibility with all browsers would be time consuming and difficult.  Source:

 Adding a favourite icon to the address bar  Can be seen in:  Tab  Bookmarks  History  Toolbars  Only 16 x 16 pixels

 There are a number of ways to create the 16 x 16 pixel image  Creating the image using Photoshop: n.html n.html  