Intr to-html-xhtml-1233508169541646-3


Published on

Com Ed 7 Prelim

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Intr to-html-xhtml-1233508169541646-3

  1. 1. Introduction to HTML &Introduction to HTML &XHTMLXHTML
  2. 2. IntroductionIntroduction Web developers view web pages asdocuments that must be created according toauthoring and development guidelines Web developers use HTML or XHTML towrite code of a web page Web browsers have a built-in interpreter torender the results of the code in its window
  3. 3. The World Wide WebThe World Wide Web Definitions HTML The HyperText Markup Language The language used to structure text-based informationin a document by denoting certain text as headings, paragraphs, lists,etc — and to supplement that text with interactive forms,embedded images, and other multimedia objects XHTML The eXtensible HyperText Markup Language XHTML consists of all the elements in HTML 4.01combined with the syntax of XML. Allows users to define their own “tags” for definingstructure, layout, etc.
  4. 4. Content of Web PagesContent of Web Pages A web site may contain a combination of 13standard elements:Text SoundLists VideoHyperlinks TablesColour LayersGraphics FramesImages FormsImage Maps
  5. 5. Content of Web PagesContent of Web Pages The content of a web site can be classifiedas: Static content – does not change regularly e.g.personal and professional web sites Dynamic content – changes regularly e.g.,newspaper web sites, weather report sites…
  6. 6. Authoring of Web PagesAuthoring of Web Pages After a web page layout is designed, one needs to useHTML/XHTML code to implement the design Introduction to XHTML Syntax Document Tags Authoring tools Text formatting Special characters Hyperlinks Lists Meta Data Colours Audio & Video
  7. 7. XHTML SyntaxXHTML Syntax XHTML uses tags that are enclosed in brackets < > XHTML content is contained between tags Tags and content form an XHTML element Generic element form: <start-tag> content <end-tag> Start and end tags have the same name, end tag has a‘/’ before it: <b>This is BOLD</b> XHTML tags can be nested according to the “first open,last closed” rule: <b><i>bold and italic</i></b>
  8. 8. XHTML SyntaxXHTML Syntax XHTML rules Tags must be closed XHTML is case sensitive Use lower case tags and attribute names, e.g. width=“100%” All attribute values must be double quoted, e.g. “100%” Tags must not overlap (i.e., during nesting) Comments can be used <!-- This text is a comment --> Do not use obsolete (deprecated) tags Browsers ignore misspelled tags (and many other things!)
  9. 9. Document TagsDocument TagsThe tags that make up the framework of a typical XHTML documentinclude the following: Document type definition (DTD) tag – DOCTYPE<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"""> Describes (to web browsers) what type/version of (x)html is used Specifies rules that apply to the markup of documents Used for document syntax validation (e.g. strict) and for web browser toprocess document in proper “parsing” mode (impacts on consistencyand speed of display) An XHTML document is validated against a Document Type Definition. Top-level tag, generally <html> Tag indicates the beginning and /end of an XHTML document
  10. 10. Sample XHTML Document StructureSample XHTML Document Structure<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"""><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""></HEAD><BODY>webpage content goes here!</BODY></HTML>
  11. 11. Minimal XHTML DocumentMinimal XHTML Document<!DOCTYPE ….><html><head>…..</head><body><p>…….</p></body></html>HTMLelementHTMLelementHTMLelementHTMLelementHTMLelementHTMLelementHTMLelementHTMLelement
  12. 12. HTML Document StructureHTML Document Structure<html><head><title>HTML Document Structure</title><meta name=“author” content=“Andrea Curley” /></head><body>all web page content goes here</body></html>
  13. 13. Document Tags - HeaderDocument Tags - Header Header section, delimited by <head> tags Provides extra information about the document Serves as a container for styles, global scripts, etc. The main tags used in this section are: <title> - specifies the document title <meta> - provides information to search engines <style> - declares general & local styles for the document <script> - declares any scripting information
  14. 14. Meta TagsMeta Tags Web pages are designed for surfers and surf engines The <meta> tag increases the chances of page indexing Meta data refers to data about XHTML document ratherthan the document content Browsers do not render meta data Search engines use it for indexing and ranking the pagehits in a given search Some attributes of this tag are name, content, http-equiv,etc.
  15. 15. Meta TagsMeta Tags Most often the meta element is used to provide informationthat is relevant to browsers or search engines likedescribing the content of your document.<meta name=“keywords” content=“open, source, PHP,programming, code” /> When a search engine indexes the page, it includes theextra information -> open, source, etc. It provides these keywords to search agents requestingthem
  16. 16. Amazon’s Meta TagsAmazon’s Meta Tags<meta name="description" content="Low prices on digital cameras,MP3, LCD TVs, books, music, DVDs, video games, software, home &garden and much, much more. Free delivery on orders over £15." /><meta name="keywords" content="digital camera, LCD TV, books, DVD,low prices, video games, pc games, software, electronics, home,garden, video, amazon" />
  17. 17. Document Tags - BodyDocument Tags - Body Body section, delimited by <body> tags Section where visible content appears Content is a series of block tags containing inlinecontent
  18. 18. How can I write my first web page?How can I write my first web page?1. Open a text editor e.g., Notepad, Edit Plus2. Put in code from the HTML Document StructureSlide3. Save it as Example1.html4. In web browser (IE/Firefox/Netscape), Select File -> Open Select Example1.html Select OK
  19. 19. Authoring ToolsAuthoring Tools Tools needed to develop a web site: Editor Graphics program Digital cameras Scanners Audio & video software Types of editors Text: type in code and view results later -> Bottom-up development HTML: view results as you develop the web page -> top-downdevelopment Web author must be familiar with both approaches e.g. “EditPlus”, “MacroMedia Dreamweaver”
  20. 20. Text FormattingText Formatting Paragraphs Line breaks Headings Horizontal Rules Block divisions
  21. 21. ParagraphsParagraphs Main textual blocks, delimited by <p> tags<p>This is a paragraph of text in an XHTML document</p>This is a paragraph of text in an XHTML documentLine spacesLine spacesautomaticallyautomaticallyinsertedinserted
  22. 22. Line breaksLine breaks Used when you need to break a line prematurely(before the paragraph) The line break tag is <br /> Need space between “br” and “/” for Netscapebrowsers to interpret correctly
  23. 23. Lines - ExampleLines - Example<p>This is a paragraph of text in an XHTML document</p><p>This is a 2nd paragraph of text in an XHTML document</p>This is a paragraph of text in an XHTML documentThis is a 2nd paragraph of text in an XHTML document<p>This is a paragraph of text in an XHTML document</p><p>This is a 2nd paragraph of text <br /> in an XHTML document</p>This is a paragraph of text in an XHTML documentThis is a 2nd paragraph of textin an XHTML document
  24. 24. HeadingsHeadings There are 6 levels of headings <h1>…..<h6>, the higherthe heading number the smaller the text<h1> Heading 1</h1><h2> Heading 2</h2><h3> Heading 3</h3><h4> Heading 4</h4><h5> Heading 5</h5><h6> Heading 6</h6>Heading 1Heading 1Heading 2Heading 2Heading 3Heading 3Heading 4Heading 4Heading 5Heading 5Heading 6Heading 6
  25. 25. Horizontal RulesHorizontal Rules Horizontal rules appear as lines across the browser screen- <hr /> use space between “hr” and “/” so Netscapebrowsers can interpret correctly Used to separate information visuallyA line should be drawn under this text <hr />A line should be drawn under this text
  26. 26. Block Divisions (div)Block Divisions (div) Sometimes, there is a need to format a large block of textin a similar fashion but in a way that is different from otherblocks in the same document e.g. a quoted block of textcould appear in a different style than the text around it -<div><div align="center">Text formatted using div tag</div>Text formatted using div tag
  27. 27. Text FormattingText FormattingTextTextHeadingsHeadings ParagraphsParagraphs Word/CharactersWord/Characters<h1> largest<h1> largest....<h6> smallest<h6> smallest<p><p><b> bold<b> bold<i> italic<i> italic<br /> line break<br /> line break<div> acts like a line break<div> acts like a line break<hr /> line in a web page,<hr /> line in a web page,
  28. 28. HyperlinksHyperlinks Hyperlinks <a> link web pages to each other A link is a connection from one source to another Hyperlinks create hypertext and is the driving force of the web Hyperlinks can be used as: inter-document and intra-document links Links start at the source (visible part) and points to thedestination (invisible part)<a href=""> Visit W3Schools! </a>address of theaddress of thedocument to link todocument to link to(invisible)(invisible)Text to beText to be be displayed as a hyperlinkbe displayed as a hyperlink(visible)(visible)
  29. 29. HyperlinksHyperlinks The important attributes of the link <a> tag: href title name charset type rel rev accesskey shape coords
  30. 30. HyperlinksHyperlinks The visible part of the link may have 4 states Link – is not active and has not been visited Active – target of the link is active in another browser window Visited – target of the link has been previously visited Hover – mouse pointer is over the link Redirect Example<html><head><meta http-equiv="Refresh" content="5;url=" /></head><body><p>Sorry! We have moved! The new URL is: <ahref=""></a></p><p>You will be redirected to the new address in five seconds.</p><p>If you see this message for more than 5 seconds, please click on the link above!</p></body></html>
  31. 31. Hyperlinks - anchorsHyperlinks - anchorsfor “external” link<a href= target=“_blank”> This is the DIT website</a>…for “internal” link<a href=“#Section1”> jump to Section 1</a>.<a name=“Section1”>Section 1</a>… for “mail to” link<a href="">email</a>
  32. 32. ListsLists XHTML supports 3 types of lists: Ordered – <ol> Unordered – <ul> Definition – <dl> Lists may be nested to obtain multiple hierarchylevels
  33. 33. Ordered List - <ol>Ordered List - <ol> Lists whose elements must appear in a certainorder Such lists usually have their items prefixed with anumber or letter<ol><ol><li>Apples</li><li>Apples</li><li>Bananas</li><li>Bananas</li><li>Coconuts</li><li>Coconuts</li></ol></ol>1.1. ApplesApples2.2. BananasBananas3.3. CoconutsCoconuts
  34. 34. Ordered List - <ol>Ordered List - <ol> How can the numbering style be changed?? Some other style options: decimal lower-roman upper-roman upper-alpha<ol<ol style=“list-style-type: lower-alpha”style=“list-style-type: lower-alpha”>><li>Apples</li><li>Apples</li><li>Bananas</li><li>Bananas</li><li>Coconuts</li><li>Coconuts</li></ol></ol>a.a. ApplesApplesb.b. BananasBananasc.c. CoconutsCoconuts
  35. 35. Unordered List - <ul>Unordered List - <ul> Lists whose elements do not have to appear in anumbered order<ul><ul><li>Apples</li><li>Apples</li><li>Bananas</li><li>Bananas</li><li>Coconuts</li><li>Coconuts</li></ul></ul>• ApplesApples• BananasBananas• CoconutsCoconuts
  36. 36. Unordered List - <ul>Unordered List - <ul> How can the list item marker be changed?? Some other style options: disc circle none<ul<ul style=“list-style-type: square”style=“list-style-type: square”>><li>Apples</li><li>Apples</li><li>Bananas</li><li>Bananas</li><li>Coconuts</li><li>Coconuts</li></ul></ul>ApplesApplesBananasBananasCoconutsCoconuts
  37. 37. Definition List - <dl>Definition List - <dl> More complex than the other 2 lists due to theirhaving 2 elements per list item<dl><dl><dt>Internet Explorer</dt><dt>Internet Explorer</dt><dd>Developed by Microsoft</dd><dd>Developed by Microsoft</dd><dt>Netscape</dt><dt>Netscape</dt><dd>Developed by Netscape</dd><dd>Developed by Netscape</dd></dl></dl>Internet ExplorerInternet ExplorerDeveloped by MicrosoftDeveloped by MicrosoftNetscapeNetscapeDeveloped by NetscapeDeveloped by Netscape
  38. 38. Nesting ListsNesting Lists Lists can be nested of the same or different types<ul><ul><li>Send us a letter, including:</li><li>Send us a letter, including:</li><ol><ol><li>Your full name</li><li>Your full name</li><li>Your order number</li><li>Your order number</li><li>Your contact information</li><li>Your contact information</li></ol></ol><li> Use the web form to send an email </li><li> Use the web form to send an email </li></ul></ul>• Send us a letter, including:Send us a letter, including:1.1. Your full nameYour full name2.2. Your order numberYour order number3.3. You contact informationYou contact information• Use the web form to send an emailUse the web form to send an email
  39. 39. ColoursColours Colour is an essential element and greatly improvesvisualisation A web author can set colours for background and text Tags have a color attribute that enables web authors to setcolours for different XHTML elements Colours can be specified using hexadecimal codes formulti-browser consistency Black -> #000000 Red -> #FF0000 Blue -> #0000FF Colours can be set globally or locally
  40. 40. Audio & VideoAudio & Video XHTML allows authors to incorporate digital audio andvideos in a web page Audio formats – AU, WAV, MIDI, AIFF and MP3 Video formats – AVI, QuickTime, MPEG and MJPEG A surfer must have the right hardware and software to beable to play multimedia content of the web page <embed> tag causes a control panel to be displayed foraudio and video files in a web page Attributes used are src, width and height, volume,autostart, loop and hidden
  41. 41. Audio & VideoAudio & Video<embed src="music.mp3" width="145"height="60" volume="70"> </embed>
  42. 42. ReferenceReference Steven M. Schafer (2005), HTML, CSS, JavaScript, Perl, and PHPProgrammers Reference, Hungry Minds Inc,U.S. Dan Cederholm (2005), Bulletproof Web Design: Improving Flexibilityand Protecting Against Worst-Case Scenarios with XHTML and CSS,New Riders. Ibrahim Zeid (2004), Mastering the Internet, XHTML, and Javascript