1 / 30

HTML: the Anatomy of a Web Page

HTML: the Anatomy of a Web Page. Review. Learned about Site structure (Flow Charts) Navigation (Menus). HTML. What is HTML? HyperText Markup Language is a computer language used to create Web pages. Almost all documents viewed on the web are HTML documents. .HTML. Basic HTML.

jerica
Download Presentation

HTML: the Anatomy of a Web Page

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: the Anatomy of a Web Page

  2. Review • Learned about • Site structure (Flow Charts) • Navigation (Menus)

  3. HTML • What is HTML? • HyperText Markup Language is a computer language used to create Web pages. Almost all documents viewed on the web are HTML documents. .HTML

  4. Basic HTML • Consists of Two Things • Text • Tags

  5. Text • Just as in a word document, the main text is the writing on the page. TEXT IS THE WRITING ON THE PAGE!!

  6. DO THIS!! TEXT IS THE WRITING ON THE PAGE!! TAG Tags • Their job is to tell the text what to do. • You can tell tags from regular text by the angle brackets • <tag>

  7. View Source • You can see the HTML coding of almost any web site by viewing the source. • On the internet explorer menu go to • View. . . • Source

  8. Basic Types of HTML Tags • Text Formatting • <B> Bold </B> • <I> Italic</I> • <U> Underline</U>

  9. Basic Types of HTML Tags • Page Formatting • Frames <FRAMESET> • Tables <TD>, <TABLE>, etc Lorem Ipsum Dolor Foty Lorem Ipsum Dolor Foty Lorem Ipsum Dolor Foty Lorem Ipsum Dolor Foty Lorem Ipsum Dolor Foty Lorem Ipsum Dolor Foty Lorem Ipsum Dolor Foty Lorem Ipsum Dolor Foty Lorem Ipsum Dolor Foty Lorem Ipsum Dolor Foty Lorem Ipsum Dolor Foty Lorem Ipsum Dolor Foty Lorem Ipsum Dolor Foty Lorem Ipsum Dolor Foty Lorem Ipsum Dolor Foty Lorem Ipsum Dolor Foty Lorem Ipsum Dolor Foty Lorem Ipsum Dolor Foty Lorem Ipsum Dolor Foty Lorem Ipsum Dolor Foty Lorem Ipsum Dolor Foty Lorem Ipsum Dolor Foty Lorem Ipsum Dolor Foty Lorem Ipsum Dolor Foty

  10. Basic Types of HTML Tags • Links • <A HREF="index.html">back Home</A> • <A HREF="mailto:you@you.com?subject="hi!">mail me</A>

  11. Basic Types of HTML Tags • Image Tags • <img src="images/picturename.gif" width="245" height="98" alt="Grasp">

  12. Basic Types of HTML Tags • Programming Languages/Complicated Stuff • javascript • <script language="Javascript"> • <!-- • if (document.images). . .

  13. Summary • Web Pages are HTML Documents • Source Can Be Viewed • HTML is made up of Text and Tags • Different Types of Tags

  14. DAY TWO - Creating a Simple Web Page with HTML

  15. Sheet 9-2 • The minimal HTML document • Objective - today, we will make a simple web page. • Try to understand each step. • Difficult at first, but not so bad after a while!!

  16. Day 3 - HTML TAGS YOU CAN USE Bold LINKS Lists

  17. Formatting Tags • Bold • <B> Text </B> • Italic • <I> Text </I> • Underline • <U> text </U>

  18. Returns • Break • <BR> • Paragraphs • <p>

  19. Centering • Center Text or an image • <CENTER> Text </CENTER>

  20. Un-ordered (Bulleted) Lists • Add items to a page in a list format <ul> <li>Cheese <li>Pepperoni <li>Mushrooms<li>Sausage </ul>

  21. Ordered (numbered) Lists • Add items to a page in a numbered list format <ol> <li>Cheese <li>Pepperoni <li>Mushrooms <li>Sausage </ol>

  22. Tables <html> <head> <title>Hello World - with a table</title> </head> <body> <h1>Hello World!</h1> <table> <th>Food Prices</th> <tr><td>Item A</td><td>Item B</td></tr> <tr><td>$1.00</td><td>$2.00</td></tr> </table> </body> </html> • Anexample:

  23. Links • Three Types of Links • Links to the same page • Links to another page in the same site • Links to an external site

  24. Links to the same page • <a name=gohere> • then <a href="#gohere">

  25. Links to another page in the same site • <a href=”pagename.html"> • Click here to go to pagename! • </a>

  26. Links to an external site <A HREF=“http://www.yahoo.com”>Text you wanna link </a>

  27. E-Mail to: <a href=“mailto:jpatty98@yahoo.com"> E-mail Mr. Patty </a>

  28. Chaging Colors • <Body BGCOLOR=#FFFFFF TEXT=#00FFFF> • OR • <Body BGCOLOR=pink TEXT=purple>

More Related