chp09_final - Mastering the Internet, XHTML, and JavaScript...

Info iconThis preview shows page 1. Sign up to view the full content.

View Full Document Right Arrow Icon
This is the end of the preview. Sign up to access the rest of the document.

Unformatted text preview: Mastering the Internet, XHTML, and JavaScript Chapter 9 XHTML Essentials Outline Goals and Objectives Chapter Headlines Introduction Web sites and pages Content of web pages Authoring of web pages XHTML Syntax XHTML Document Structure Authoring tools Text formatting Special characters Hyperlinks Lists Meta Data Colors Audio and Video Summary 2 Chapter 9 - XHTML Essentials Goals and Objectives Goals Understand the difference between HTML and XHTML, master the authoring of Web pages with content as hyperlinks, and use text and HTML editors to generate XHTML code Objectives Three views of Web pages: URL, Display, and Document Web sites and web pages Text formatting HTML and XHTML Text and HTML Editors XHTML document structure Content of web pages Special characters Chapter 9 - XHTML Essentials 3 Chapter Headlines 9.1 Introduction Web surfers and developers view web pages differently 9.2 Web sites and pages Web sites use structures like web pages 9.3 Content of web pages Some web pages must change their content often to stay current 9.4 Authoring of web pages Use XHTML to write web page code 9.5 XHTML Syntax Find out the difference between elements, tags, and much more Chapter 9 - XHTML Essentials 4 Chapter Headlines 9.6 XHTML document structure Why should you learn the structure and rules of XHTML documents 9.7 Authoring tools Start with and XHTML editor and a web browser to develop web pages 9.8 Text formatting Find out how easy it is to format text in XHTML 9.9 Special characters Get your web pages to support more than just the English alphabet 9.10 Hyperlinks Connect a web site to other web pages on the internet Chapter 9 - XHTML Essentials 5 Chapter Headlines 9.11 Lists Text can be organized in different ways than just paragraphs 9.12 Meta Data Optimize web page coding for search engines and highest hit rate 9.13 Colors Jazz up web pages by adding foreground and background colors 9.14 Audio and Video Are you interested in adding MP3 music and movies to your web pages Chapter 9 - XHTML Essentials 6 A web surfer views a web page as a URL and a display in a browser A web developer views a web page as a document that must be created according to authoring and development guidelines Web developers use HTML (HyperText Markup Language) or XHTML (eXtensible HTML) to write web page code Web browsers have a built-in interpreter to render the results of a code in its window Introduction Chapter 9 - XHTML Essentials 7 Web sites and pages A web site is a collection of web pages A web author begins with a home page which includes hyperlinks to other web pages The home page of a web site is the first web page that is loaded when a surfer visits the web site The file name of the home page is usually “index.html” Chapter 9 - XHTML Essentials 8 Content of web pages There is a finite set of elements that make up the content of a web page The content of a web page can be classified as: Static Content Dynamic content Combination of static and dynamic Static content does not change regularly Dynamic content changes often Content of a web page must be updated to stay current Chapter 9 - XHTML Essentials 9 Authoring of web pages After a web page is designed one needs to use HTML or XHTML code to author a web page HTML is platform independent and easy to use XHTML 1.0 is a rewrite of HTML 4.01 in XML format XML enhances HTML and does not replace it XHTML syntax is stricter than HTML syntax World Wide Consortium (W3C) organization is responsible for developing web standards Chapter 9 - XHTML Essentials 10 XHTML Syntax XHTML uses tags that are enclosed in brackets (<, >) The XHTML content is enclosed between the tags The tags and content form an XHTML element The generic form is: <start-tag>content<end-tag> The detailed form is: <tag-name [att1=“val1” att2=“val2” …]>content</tag-name> Start and end tags have same name with a forward slash ‘/’ before the end tag; <b>This is BOLD</b> The tag attributes enclosed in ‘[’ and ‘]’ are optional and can be assigned values for more control over formatting Chapter 9 - XHTML Essentials 11 XHTML tags can be nested according to the “first open, last closed” rule; <b><i>Bold and Italic</i></b> XHTML rules: 1. 2. 3. 4. 5. 6. 7. 8. XHTML Syntax Tags must be closed Empty tags must be closed Use lower case tags Whitespace matters Attributes must be enclosed in quotes Tags must not overlap (be careful when nesting) Comments can be used XHTML uses escaped characters Do not use Deprecated or obsolete tags Browsers ignore misspelled tags so author must be careful Chapter 9 - XHTML Essentials 12 XHTML Document Structure HTML <html> <head> <meta name=“author” content=“Zeid”> <title>HTML document structure</title> </head> <body> Web page content goes here </body> </html> Chapter 9 - XHTML Essentials 13 XHTML XHTML Document Structure <?xml version=“1.0” encoding=“iso-8859-1”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “”> <html xmlns=“”> <head> <meta name=“author” content=“Zeid” /> <title>HTML document structure</title> </head> <body> Web page content goes here </body> </html> Chapter 9 - XHTML Essentials 14 Authoring Tools To develop web sites one needs a set of tools such as, editor, graphics program, digital cameras, scanners, audio and video software The two types of editors are: Text – type in the code and view results later HTML – view results as you develop the web page Bottom up – HTML file is generated first and the web page is viewed later (text editor) Top down – Web page is developed first and then the HTML file is generated (HTML editor) The two approaches of code development are: Web Author must be familiar with both the approaches and must be able to use both types of editors Chapter 9 - XHTML Essentials 15 Text is one of the main elements of a web page Text is organized as headings and paragraphs XHTML provides: Text Formatting Heading tags: <h1> to <h6> - <h1> being the largest, attributes: align <p> - creates a line space ahead of text, attributes: align <b> - bold <i> - italic <br> - line break <div> - acts like a line break <hr> - line in a web page, attributes: align, color, noshade, size, width Chapter 9 - XHTML Essentials 16 Paragraphs tags: Word/Character tags: Example 9.7: Use words and character tags We use the text formatting tags to see how a browser renders formatted text Text Formatting Chapter 9 - XHTML Essentials 17 These are required because some characters are reserved for XHTML use, such as ‘<’, ‘>’, etc. Special characters are represented by a character entity or a numeric code The character entity begins with & and ends with ; &copy; © The numeric code begins with &# and ends with ; &#169; © Three distinct character sets are Special Characters ISO 8859-1 (Latin – 1) Symbols, mathematical symbols, and Greek letters Markup-significant and internationalization characters Chapter 9 - XHTML Essentials 18 Hyperlinks Hyperlink is an important concept behind XHTML that links web pages to each other Hyperlinks create hypertext and is the driving force of the web Hyperlinks can be used as: Links (interdocument links) Anchors (intradocument links) Links start at the source/visible part and point to destination/invisible part Link source may be text or an image, and the destination may be a file, a web page, program, image, video/audio file, etc. It is created by using the <a> tag Chapter 9 - XHTML Essentials 19 Hyperlinks The general structure of a link is: <a invisible part>visible part</a> The important attributes of the <a> tag are; href, title, name, charset, type, rel, rev, accesskey, shape, coords The visible part of the link may have 3 states: Link Active link Visited link Example: <a href=“”>Northeastern Unversity</a> Chapter 9 - XHTML Essentials 20 Example 9.8: Using the Hyperlink tag Create a web page with various links. The href attribute uses both files and websites. Observe the link colors depending on state of the link Hyperlinks Chapter 9 - XHTML Essentials 21 Anchors use <a> tag to link different sections of the same web page Two uses of anchors are for table of contents and eliminating scrolling The creation of anchor requires two <a> tags <a name=“sale”> and <a href=“#sale”> Note the “#” in the href attribute with the same value “sale” Example <a href=“#section1”>Section 1</a> …. …. <a name=“section1”>Content</a> Chapter 9 - XHTML Essentials Hyperlinks 22 Example 9.9: Using intradocument links Create a table of contents and link the topics to their descriptions in the same page Hyperlinks Chapter 9 - XHTML Essentials 23 XHTML supports three types of lists Lists Unordered lists: Unordered - <ul> tag Ordered - <ol> tag Definition - <dl> tag Created using the <ul> tag The items of the list are created using the <li> tag Created using the <ol> tag and has a type attribute The items of the list are created using the <li> tag Created using the <dl> tag It consists of term/definition pairs created using <dt>, <dd> tags Chapter 9 - XHTML Essentials 24 Ordered lists: Definition lists: Lists may be nested to obtain multiple hierarchy levels Lists Example 9.10: Using unordered lists Develop a web page that illustrates the use of unordered lists Chapter 9 - XHTML Essentials 25 Example 9.11: Using ordered lists Develop a web page that illustrates the use of ordered lists Lists Chapter 9 - XHTML Essentials 26 Example 9.12: Using definition lists Develop a web page that illustrates the use of definition lists Lists Chapter 9 - XHTML Essentials 27 Example 9.13: Using Nested lists Develop a web page that illustrates the nesting of lists Lists Chapter 9 - XHTML Essentials 28 Meta Data Web pages are designed for surfers and search engines The <meta> tag increases the chances of page indexing Meta Data refers to data about XHTML document rather than the document content Browsers do not render meta data Search engines use it for indexing and ranking the page hits in a given search Some attributes of this tag are name, content, httpequiv, scheme Chapter 9 - XHTML Essentials 29 Color is an essential element and it greatly improves visualization A web author can set colors for background and text Tags have a color attribute that enables web authors to set colors for different XHTML elements Colors are specified using names or hexadecimal codes Colors Black #000000 Red #FF0000 Blue #0000FF Silver #C0C0C0 Colors can be set globally or locally Chapter 9 - XHTML Essentials 30 Example 9.15: Using colors in web pages Use a gray background and yellow text and change the colors of links Colors Chapter 9 - XHTML Essentials 31 XHTML allows an author to incorporate digital audio and video in a web page Various audio formats include AU, WAV, MIDI, AIFF, and MP3 Video formats include AVI, QuickTime, MPEG, and MJPEG A surfer must have the right hardware and software to be able to play multimedia content of the web page <embed> tag is used to incorporate audio and video files in a web page Attributes used are src, width and height, volume, autostart, loop, and hidden Chapter 9 - XHTML Essentials 32 Audio and Video Example 9.16 & 9.17: Listen to music and Watch movies in web pages Audio and Video Chapter 9 - XHTML Essentials 33 Summary • • • • • • • • • • • • • A web developer designs and creates a web page for a web surfer A web site is a collection of web pages Web page content can be static or dynamic HTML, XML, and XHTML are used to author web pages One must follow the rules of coding to create HTML documents Various tools and approaches exist to author web pages Text formatting is and important tool XHTML also offers special characters Hyperlinks connect web pages and its sections Lists indent lines of text and provide symbols Meta data enables search engines to find pages and index them Colors enhance web page visualization A web page can embed digital audio and video Chapter 9 - XHTML Essentials 34 ...
View Full Document

This note was uploaded on 07/01/2011 for the course COMP 103 taught by Professor Mulhimaldoori during the Spring '11 term at American Dubai.

Ask a homework question - tutors are online