1 / 21

HTML/XHTML Structure

HTML/XHTML Structure. Building a basic web page using notepad. Document Structure. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang = "EN" xml:lang = "EN" dir = "ltr"> <head> <title>Enter The Title Here</title>

jonathanlcarter
Download Presentation

HTML/XHTML Structure

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. HTML/XHTML Structure Building a basic web page using notepad.

  2. Document Structure <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang = "EN" xml:lang = "EN" dir = "ltr"> <head> <title>Enter The Title Here</title> </head> <body> </body> </html>

  3. Change the Title Tag • When using the template, remember to change the title tag content.

  4. The cat jumped over the fence. The cat jumped over the fence. <> and </> Case sensitive Open and closed Empty elements must be closed Multiple tags must be properly nested The cat jumped <b>over</b> the fence. The cat jumped <b><i> over</i></b>the fence. Tags

  5. Bob fell over the chicken.[H1] Bob fell over the chicken. [H6] There are six heading sizes H1-H6 <h1>Bob fell over the chicken. [H1]</h1> <h6>Bob fell over the chicken. [H6]</h6> Headings

  6. Changing Colors This is a H1 heading with color. Example: <h1><font color=#ff0000>This is a H1 heading with color.</font></h1> • Color codes are available at http://www.w3schools.com/html/html_colors.asp

  7. <head> <style type="text/css"> body {background-color: #aa1133} </style> </head> Enter style type tag between the head tags “Try it” editors http://www.w3schools.com/css/css_background.asp Background Color

  8. Used for a block of text. It can be for one sentence or 1000. I don’t recommend a block of text of a thousand sentences. This is BOLD. This is italics. Bob and Tom are funny. <p>Used for a block of text. It can be for one sentence or 1000. I don’t recommend a block of text of a thousand sentences.</p> This is <b>BOLD</b>. This is <i>italics</i>. <font size=-1>Bob</font> and <font size=+3>Tom</font> are funny. Paragraph and Formatting

  9. ___________________ ___________________ ______ ______________ ______________ <hr /> <hr size=7 /> <hr width=50 /> <hr width=70% /> <hr size=7 width=70% /> Horizontal Rule

  10. First sentence. Second sentence. Third sentence. Fourth sentence. First sentence. Second sentence. Third sentence. Fourth sentence. HTML will word wrap unless you use line breaks. No closing Tag First sentence. Second sentence. Third sentence. Fourth sentence. First sentence.<br /> Second sentence.<br /> Third sentence.<br /> Fourth sentence.<br /> Line Breaks

  11. Align left Align center Align right Go Colts! align=left align=center align=right Example: <H1 align=right>Go Colts!</H1> Align Attribute

  12. This is centered. <center>This is centered </center> The center tag can be used for one item or for a whole section. Center

  13. Monitor Keyboard CPU Speakers Mouse <ul> <li>Monitor <li>Keyboard <li>CPU <li>Speakers <li>Mouse </ul> Unordered List

  14. Monitor Keyboard CPU Speakers Mouse <ol> <li>Monitor <li>Keyboard <li>CPU <li>Speakers <li>Mouse </ol> Ordered list

  15. Use .jpeg Make sure image is saved in your .html folder. <img src=“filename“ /> <img src=“german shepherd.jpeg“ /> Pictures

  16. Yahoo <a href="http://www.yahoo.com/">Yahoo</a> Hyperlinks

  17. Getting Started • Create a folder called your_name website • Start notepad (Start →Accessories→Notepad) • Click File → Save As • Rename it your_name.html • Save it in the your_name website folder • Save your image in your_name website folder • Open your browser • File → Open → your_name.html → Open • Keep your browser open as you work on your web page • When you edit your .html, save it then go to your browser and click refresh. You will see the changes you made.

  18. Final Project • Create a REAL Family holiday recipe webpage (any holiday you like). • Your website should include the minimum following format and structural elements (you may need to add more for aesthetic purposes): • Title • Two different heading sizes • A horizontal rule and a line break • Formatting to include bold, italics, and two different font sizes • Web link to a website related to your primary ingredient • A picture of the finished product • One ordered and one unordered list • A short description using <p></p> tags • Colored background and some colored text.

  19. Final Project • The following criteria will influence the grading of your project. • Your project: • must contain all required format and structural elements plus content. • must be done in notepad saved as an html. If you use a web editor like FrontPage or Word you will get a ZERO. • should be visually pleasing and organized. • should work. Your web link should go to a real working website. Your image should appear on your website.

  20. Submitting your work. • When complete, zip the contents of website folder and place the zip file into the drop box. • To zip your work (in XP) • Highlight folder contents • Right click • Send to • Compressed folder • The zipped file will be created in your website folder. Submit your zipped file to the drop box.

  21. Helpful Links • http://www.htmlgoodies.com/ • http://www.htmlhelp.com/reference/html40/olist.html • http://werbach.com/barebones/barebones.html • http://www.w3schools.com/html/default.asp • http://www.w3schools.com/html/html_colors.asp

More Related