New version page

UTD CS 6314 - Basic HTML

This preview shows page 1-2-3-21-22-23-42-43-44 out of 44 pages.

View Full Document
View Full Document

End of preview. Want to read all 44 pages?

Upload your study docs or become a GradeBuddy member to access this document.

View Full Document
Unformatted text preview:

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 pageNot the same as the presentation (appearance on screen)Surrounds text content with opening and closing tagsEach tag's name is called an elementsyntax: <element> content </element>example: <p>This is a paragraph</p>CS6314-WPL2XHTMLUses a markup format called XML XML + HTML = XHTMLStandardized in 2000A strict XHTML page uses some different syntax and tags than HTMLCS6314-WPL3Structure of XHTML pageHTML is saved with extension .htmlBasic structure: tags that enclose content, i.e., elementsHeader describes the pageBody 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 pageDisplayed 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 StatementsBlock elements contain an entire large region of contentexamples: paragraphs, lists, table cellsthe browser places a margin of whitespace between block elements for separationCS6314-WPL9Block and Inline Statements (cont.)Inline elements affect a small amount of contentexamples: bold text, code fragments, imagesthe browser allows many inline elements to appear on the same linemust be nested inside a block elementCS6314-WPL10More HTML tagsSome tags can contain additional information called attributessyntax: <element attribute="value" attribute="value"> content </element>example: <a href="page2.html">Next page</a>CS6314-WPL11More HTML tagsSome tags don't contain content; can be opened and closed in one tagsyntax: <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 URLLinks 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 anchorsTypes of URLs that can appear in anchors:Absolute: to another web siteRelative: 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 tagsTags must be correctly nested: a closing tag must match the most recently opened tagThe 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 URLXHTML also requires an alt attribute describing the imageCS6314-WPL16<img src="images/harrypotter.jpg" alt=“Harry Potter Series" /> HTMLMore about imagesIf placed inside an a anchor, the image will become a linkThe 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 pageComments 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
Loading Unlocking...
Login

Join to view Basic HTML and access 3M+ class-specific study document.

or
We will never post anything without your permission.
Don't have an account?
Sign Up

Join to view Basic HTML and access 3M+ class-specific study document.

or

By creating an account you agree to our Privacy Policy and Terms Of Use

Already a member?