Basic HTMLHypertext Markup Language (HTML)XHTMLStructure of XHTML pagePage Title <title>Paragraph <p>Headings <h1>, <h2>, … <h6>Horizontal rule <hr />Block and Inline StatementsBlock and Inline Statements (cont.)More HTML tagsMore HTML tagsLinks <a>More about anchorsNesting tagsImages <img>More about imagesLine Break <br>Comments <!-- … -- >Phrase elements <em>, <strong>Unordered list: <ul>, <li>More about unordered listsMore about unordered lists (cont.)Ordered list <ol>Common error: Not closing a listCommon Error: Improper nested list placementDefinition list <dl>, <dt>, <dd>Tables <table>, <tr>, <td>Table headers, captions: <th>, <caption>Quotations <blockquote>Inline quotations <q>HTML Character EntitiesInline quotations <q>Computer code <code>Preformatted text <pre>Preformatted text <pre>Web StandardsW3C XHTML ValidatorWeb page metadata <meta>meta element to aid browser / web servermeta element to describe the pagemeta element to aid search enginesHTML vs XHTMLHTML5Basic HTMLCS6314-Web Programming Languages1Hypertext Markup Language (HTML)Describes the content and structure of information on a web pageNot the same as the presentation (appearance on screen)Surrounds text content with opening and closing tagsEach tag's name is called an elementsyntax: <element> content </element>example: <p>This is a paragraph</p>CS6314-WPL2XHTMLUses a markup format called XML XML + HTML = XHTMLStandardized in 2000A strict XHTML page uses some different syntax and tags than HTMLCS6314-WPL3Structure of XHTML pageHTML is saved with extension .htmlBasic structure: tags that enclose content, i.e., elementsHeader describes the pageBody contains the page’s contents4<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>information about the page</head><body>page contents</body></html> HTMLPage Title <title>Placed within the head of the pageDisplayed in web browser’s title mark and when bookmarking the pageCS6314-WPL5…<head><title> Harry Potter </title></head>… HTMLParagraph <p>Placed within the body of the pageCS6314-WPL6…<body><p> Harry Potter and the Deathly Hallows, the last book in the series, begins directly after the events of the sixth book.Voldemort has completed his ascension to power and gains control of the Ministry of Magic</p></body>… HTMLHarry Potter and the Deathly Hallows, the last book in the series, begins directly after the events of the sixth book. Voldemort has completed his ascension to power and gains control of the Ministry of Magic outputHeadings <h1>, <h2>, … <h6>CS6314-WPL7<h1> Harry Potter </h1><h2> Books </h2><h3> Harry Potter and the Philosopher’s Stone </h3> HTMLHarry PotterBooksHarry Potter and the Philosopher’s Stone outputHorizontal rule <hr />Should be immediately closed with />CS6314-WPL8<p> First paragraph </p><hr /><p> Second Paragraph </p> HTMLFirst ParagraphSecond Paragraph outputBlock and Inline StatementsBlock elements contain an entire large region of contentexamples: paragraphs, lists, table cellsthe browser places a margin of whitespace between block elements for separationCS6314-WPL9Block and Inline Statements (cont.)Inline elements affect a small amount of contentexamples: bold text, code fragments, imagesthe browser allows many inline elements to appear on the same linemust be nested inside a block elementCS6314-WPL10More HTML tagsSome tags can contain additional information called attributessyntax: <element attribute="value" attribute="value"> content </element>example: <a href="page2.html">Next page</a>CS6314-WPL11More HTML tagsSome tags don't contain content; can be opened and closed in one tagsyntax: <element attribute="value" attribute="value" />example: <hr />example: <img src=“Harry.jpg" alt="pic of Harry Potter" />CS6314-WPL12Links <a>The href attribute specifies the destination URLLinks or anchors are inline elements, so they must be placed inside a block element such as a p or h1CS6314-WPL13<p>Search<a href="http://www.google.com/">Google</a>now!</p> HTMLSearch Google now! outputMore about anchorsTypes of URLs that can appear in anchors:Absolute: to another web siteRelative: to another page on this web siteCS6314-WPL14<p><a href=“deathlyHallows-book.html">Harry Potter and the Deathly Hallows Book</a></p><p><a href="http://en.wikipedia.org”title="Search">Wikipedia</a></p> HTMLHarry Potter and the Deathly HallowsWikipedia outputNesting tagsTags must be correctly nested: a closing tag must match the most recently opened tagThe browser may render it correctly anyway, but it is invalid XHTMLCS6314-WPL15<p><a href=" deathlyHallows-book.html"> Harry Potter and the Deathly Hallows Book </p><p>This text also links to Harry Potter Book</a></p> HTMLBadImages <img>The src attribute specifies source of the image URLXHTML also requires an alt attribute describing the imageCS6314-WPL16<img src="images/harrypotter.jpg" alt=“Harry Potter Series" /> HTMLMore about imagesIf placed inside an a anchor, the image will become a linkThe title attribute specifies an optional tooltip17<a href="http://harrypotter.com/"><img src="images/dumbledore.jpg" alt=“Dumbledore from Harry Potter"title="Alas! Ear wax!"/> <!--move over--></a> HTMLLine Break <br>br should be immediately closed with />br should not be used to separate paragraphs or used multiple times in a row to create spacingCS6314-WPL18<p>One Ring to rule them all, One Ring to find them, <br /> One Ring to bring them all and in the darkness bind them.</p><p> In the Land of Mordor where the Shadows lie. </p> HTMLOne Ring to rule them all, One Ring to find them,One Ring to bring them all and in the darkness bind themIn the Land of Mordor where the Shadows lie. outputComments <!-- … -- >Comments are useful for disabling sections of a pageComments cannot be nested and cannot contain a --CS6314-WPL19<!-- My web page, by Bob StudentCSE 380, Fall 2048 --><p>CS courses are <!-- NOT --> a lot of fun!</p> HTMLCS courses are a lot of fun!
View Full Document
Unlocking...