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.0Strict...
The <html> tagwraps the entirepage
The <head> tag contains the metadatafor the page—  <script>—  <style>—  <title>—  <meta>
The <body> tagContains all of the markupthat 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 yourHTML<!-- 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 ...
The anchor tag allows hyperlinking—  Allows  linking from section to section and    page to page.—  Link to another page...
Add images with <img>—  Inserts   an image.<img src="logo.jpg" />!—  Formats allowed: jpg, gif, png—  Can specify sizes...
Hands-on HTML layout
There are many other tags for layouts—  Well get   to these in a few chapters.—  div—  span—  nav—  article—  aside—...
Conclusion—  The  basic layout of a page contains exactly one    each of a DOCTYPE declaration, a html tag, a    head tag...
Further study
Upcoming SlideShare
Loading in …5
×

03 html layout

625 views
490 views

Published on

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
625
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

03 html layout

  1. 1. Laying out an HTML document
  2. 2. Good HTML has four elements—  DOCTYPE—  html—  head—  body
  3. 3. The DOCTYPE declaration—  This DOCTYPE says to draw the page normally<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">!—  Heres the one for HTML5<!DOCTYPE html>!
  4. 4. The <html> tagwraps the entirepage
  5. 5. The <head> tag contains the metadatafor the page—  <script>—  <style>—  <title>—  <meta>
  6. 6. The <body> tagContains all of the markupthat is displayed on the page.
  7. 7. Altogether it may look like this<!DOCTYPE html>!<html>! <head>! …! </head>! <body>! …! </body>!</html>!
  8. 8. There are several basic, must-know tags—  <!-- -->—  <p>—  <br />—  <a>—  <img>
  9. 9. Commenting yourHTML<!-- This is a comment -->!
  10. 10. The <p> tag is for text only—  <p> … </p>—  Creates a line break before and after
  11. 11. <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>!
  12. 12. 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 othersite</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:rap@creator.net>Email Rap</a>!
  13. 13. 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" />!—  alttext for missing/jank images and vision- impaired surfers—  Can make it a link, too:<a href="tic.com"><img src="logo.jpg" /></a>!
  14. 14. Hands-on HTML layout
  15. 15. There are many other tags for layouts—  Well get to these in a few chapters.—  div—  span—  nav—  article—  aside—  header—  footer—  hgroup—  time—  mark
  16. 16. 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—  Youll also need paragraph tags to wrap text, line breaks, and probably anchor tags
  17. 17. Further study

×