1 / 24

BEGINNING HTML

BEGINNING HTML. DESIGNING YOUR OWN WWW PAGES. What is HTML?. Hypertext Markup Language Used to create documents for the WWW Structure is important. General Command Format. Not case sensitive Tabs and Returns are not recognized Commands start with a < and end with a >

aminia
Download Presentation

BEGINNING HTML

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. BEGINNING HTML DESIGNING YOUR OWN WWW PAGES

  2. What is HTML? • Hypertext Markup Language • Used to create documents for the WWW • Structure is important

  3. General Command Format • Not case sensitive • Tabs and Returns are not recognized • Commands start with a < and end with a > • There is a beginning and an ending to most command structures • The / symbol is used to terminate a command structure

  4. Starting a WWW page • Start a WWW page by declaring itself <html> • End a WWW page by terminating itself </html>

  5. Parts of a HTML document • <html> • Heading • Title • Body • </html>

  6. The Heading • <head> • <title> • Title of your WWW page • </title> • </head>

  7. The Body • Starts with: <body> • Heading Levels • Paragraphs • Lists • Links • Ends with: </body>

  8. The Body: Heading Levels • Six heading levels: h1 to h6 • General format • <hx> and </hx> where x is the heading level 1..6 • Level 1 is the largest font size and 6 the smallest • Example: <h1>My First Page </h1>

  9. The Body: Paragraphs • Used to separate paragraphs • General format • <p> • This is your paragraph • </p>

  10. The Body: Lists • Three kinds of lists • Ordered Numbered • Unordered Bullets • Definition Explanatory List

  11. Lists : Ordered • Numbered • General Format • Begins with <ol> and ends with </ol> • Individual items in the list are designated with a <li> in front of them. (NOTE: there is no </li>) • Example: <ol> <li> Chapter 1 <li> Chapter 2 </ol>

  12. Lists: Unordered • Bullets • General Format • Begins with <ul> and ends with </ul> • Individual items in the list are designated with a <li> in front of them. (NOTE: there is no </li>) • Example: <ul> <li> Chapter 1 <li> Chapter 2 </ul>

  13. Ordered My first WWW page This is your paragraph 1. Chapter 1 2. Chapter 2 Unordered My first WWW page This is your paragraph • Chapter 1 • Chapter 2 Examples

  14. Lists: Definition • Bullets • General Format • Begins with <dl> and ends with </dl> • Individual items in the list have two parts • Term <dt> (NOTE: there is no </dt>) • Definition <dd> (NOTE: there is no </dd>) • Example: <dl> <dt> Chapter 1 <dd> Keys to Success </dl>

  15. The Body: Links • Four types • Page • Images - still • Images - motion • Sound

  16. Links: Page • URL - Uniform Resource Locator • Internet protocol used to reach document or resource • Address of a document or resource • protocol://machine.name.directory/document • http://www.bps.k12.nd.us

  17. Links: Page • General Format • < a href = “URL” > text of link </a> • The text of link is the part that the users will click or select to activate the link • Example: • < a href = “http://www.bps.k12.nd.us”>Dakota RoughRider </a>

  18. Links: Images - Still • Image must be in same folder as your html file • General Format • < img src = “image name.gif”> optional caption • Example: • < img src = “parrot.gif”> This is a parrot

  19. Links: Images - Still • Options • Image alignment - top, middle or bottom • Aligns base of the image with the base line of the surrounding text • General Format: • <img align = “alignment” src = ““image name.gif”> optional caption • Example: • < img align= “middle” src = “parrot . gif”> parrot

  20. Links: Images - Motion • Image must be in same folder as you html file • General Format • < a href=“image name.mpeg”> text of link < /a > • Example: • < a href= “birds.mpeg” > Parrots in flight < /a >

  21. Links: Sound • Sound should be in AU format • Image must be in same folder as you html file • General Format • < a href=“sound name.au”> text of link < /a > • Example: • < a href= “brdsnd.au” > Sounds of parrots < /a >

  22. Extras • Bold < b > text < /b > • Italic < i > text < /i > • Center < center > text or image < /center > • Carriage Return <br>

  23. General Overview < html > < head > < title > Ostrich < /title > < /head > < body > text for your page < /body > < /html >

  24. The End

More Related