1 / 29

HTML Structure

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

india-keith
Download Presentation

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

  2. 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

  3. 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> <style type="text/css"> body {color: yellow ; background: blue} </style> </head> <body> </body> </html>

  4. Change the Template • When using the template, remember to change the title and the colors to match with your webpage.

  5. Change the Tag Content Rename title <!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> <style type="text/css"> body {color: yellow ; background: blue} </style> </head> <body> </body> </html> Change the color of the text and background to match your recipe http://www.w3schools.com/html/html_colornames.asp

  6. Body Tags <!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> <style type="text/css"> body {color: yellow ; background: blue} </style> </head> <body> </body> </html> Enter your tags between the body tags

  7. 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

  8. 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

  9. 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

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

  11. First sentence. Second sentence. Third sentence. Fourth sentence. First sentence. Second sentence. Third sentence. Fourth sentence. Start on next line 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

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

  13. This is centered. <center>This is centered </center> Center

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

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

  16. Use .jpg Make sure image is saved in your .html folder. <img src=“filename“ /> <img src=“gs.jpg“ /> Pictures

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

  18. Sample <!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> <style type="text/css"> body {color: yellow ; background: blue} </style> </head> <body> <h1>This is an example of how several tags are used</h1> <p> I recommend using one tag per line. There are exceptions, such as <b>bold</b> and <i>italics</i> to highlight specific words or phrases. The paragraph tag can span one or several lines. For large blocks of text use the paragraph tag multiple times, this way it is easier for the user to read.</p> <br /> <h3>Here is a list of my top 3 games</h3> <ul> <li>COD2 <li>Half-Life <li>SH III </ul> </body> </html>

  19. Getting Started • Create a folder called your_name website • Both your html file and your jpg file will need to be in the same folder together in order to work.

  20. Getting Started • Download the project.txt template from the syllabus website in your folder • Open project.txt • Select File→Save As and change project.txt to “your_name.html” • Include quotes and when changing name of file • Use underscore to separate your first and last name

  21. Delete project.txt file

  22. Editing Your Webpage • Double click your_name.html to open it as a webpage in your browser • Then Right-click your_name.html → select open with → notepad

  23. Editing Your Webpage • Notepad and your web browser should both be open • You will use Notepad to edit and your browser to view what you edited • Edit your .html file incrementally and save it • Then go to your browser and click refresh. You will see the changes you made • By saving and viewing your work incrementally you can limit any mistakes to the changes you just made • Switch back and forth (editing and viewing) as you write your html.

  24. Final Project • Create a family tradition recipe webpage. • Your website should include the minimum 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 and italics • 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 of the recipe using <p></p> tags • Colored background and some colored text.

  25. 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 with an html extension . If you use a web editor like FrontPage, Word, or Dreamweaver 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.

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

  27. 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