Embed Size (px)
DESCRIPTION
Citation preview
Laying out an HTML document
Good HTML has four elements
� DOCTYPE � html � head � body
The DOCTYPE declaration
� This DOCTYPE says to draw the page normally <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">!
� Here's the one for HTML5 <!DOCTYPE html>!
The <html> tag wraps the entire page
The <head> tag contains the metadata for the page � <script> � <style> � <title> � <meta>
The <body> tag
Contains all of the markup that is displayed on the page.
Altogether it may look like this <!DOCTYPE html>!<html>! <head>! …! </head>! <body>! …! </body>!</html>!
There are several basic, must-know tags
� <!-- --> � <p> � <br /> � <a> � <img>
Commenting your HTML
<!-- This is a comment -->!
The <p> tag is for text only
� <p> … </p> � Creates a line break before and after
<br /> creates a line break
� It is a singleton tag <p>!
Kreese: Sweep the leg.<br />!
[Johnny stares at him in shock]<br />!
Kreese: Do you have a problem with that?<br />!
Johnny Lawrence: No, Sensei. <br />!
Kreese: No mercy. !
</p>!
The anchor tag allows hyperlinking � Allows linking from section to section and
page to page. � Link to another page: <a href=http://www.othersite.com/>Go to other site</a>!
� Link to someplace on this page: <a href="#aParagraph">Go to another paragraph.</a>!
� … and … <a name="aParagraph"></a>!
� Email link: <a href=mailto:[email protected]>Email Rap</a>!
Add images with <img>
� Inserts an image. <img src="logo.jpg" />!
� Formats allowed: jpg, gif, png � Can specify sizes and alternate texts: <img src="logo.jpg" alt="Company logo" height="52px" width="100px" />!
� alt text for missing/jank images and vision-impaired surfers
� Can make it a link, too: <a href="tic.com"><img src="logo.jpg" /></a>!
Hands-on HTML layout
There are many other tags for layouts
� We'll get to these in a few chapters. � div � span � nav � article � aside � header � footer � hgroup � time � mark
Conclusion
� The basic layout of a page contains exactly one each of a DOCTYPE declaration, a html tag, a head tag, and a body tag
� You'll also need paragraph tags to wrap text, line breaks, and probably anchor tags
Further study
