1 / 22

XHTML Coding -- Tags

XHTML Coding -- Tags. Beginning Web Site Creation: Dreamweaver CS4 Noreen Brown. XHTML = Tags. They come in matching pairs (mostly). Like this. Open Close <html> </html> <head> </head> <body> </body> <title> </title> < br /> <hr /> . <html> <head>

oceana
Download Presentation

XHTML Coding -- Tags

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. XHTML Coding -- Tags Beginning Web Site Creation: Dreamweaver CS4 Noreen Brown

  2. XHTML = Tags They come in matching pairs (mostly) Like this • Open Close • <html> </html> • <head> </head> • <body> </body> • <title> </title> • <br /> • <hr /> <html> <head> Put header information here </head> <body> Put the contents of your web page here </body> </html>

  3. A few rules . . . XHTML • All lowercase • Most of them are “paired” • <p> </p> • Empty tags need a space and a / • Good = XHTML <br /> • Bad = html <br> • Attributes need “ “ • Good = XHTML <p alignment = “center”> • Bad = html <p alignment = center> • Doctype declaration

  4. Let’s get started Behind the scenes Center stage!

  5. Add more text Behind the scenes It all squishes together!

  6. Divide it up Behind the scenes Better <p> </p> Paragraph

  7. Better still Behind the scenes Better <br /> Line break

  8. Special Characters What if you want <body> or <p> to show up on your web page? &lt;body&gt; &lt;p&gt;

  9. Alignment? Behind the scenes Center stage! <p align=“right”> </p> alignment goes into the first <p> tag.

  10. One more thing Behind the scenes Better <hr /> Horizontal line

  11. Fun with Headings! Behind the scenes OK, this is annoying . . .

  12. Fun with Headings! Behind the scenes Much better! Ooops, no such thing as H7!

  13. Ordered lists Behind the scenes Center stage!

  14. Unordered lists Behind the scenes Center stage!

  15. Definition lists Behind the scenes Center stage!

  16. Format Text - Logical Behind the scenes Center stage! <strong> </strong> <em> </em>

  17. Format Text - Nested Behind the scenes Center stage!

  18. Format Text - Nested • Good • <strong><em>HELP!</em></strong> • Bad • <strong><em>HELP! </strong></em>

  19. Links - Absolute Behind the scenes Center stage! Anchor tag <a> </a> Anchor tag with a web address <a “href=http://www.pcc.edu”> </a>

  20. Links - Relative Behind the scenes Center stage! Anchor tag <a> </a> Anchor tag with a file name <a href="http://www.pcc.edu/"> pcc </a>

  21. Sort of like a relative link . . . Images Behind the scenes Center stage! Image tag <img /> Image tag with a file name <img src="coffee-art.jpg" />

  22. Alt Text Behind the scenes Center stage! Alt text <img src="coffee-art.jpg" alt="Lovely coffee!" />

More Related