lemuel
Uploaded by
25 SLIDES
373 VUES
250LIKES

A Beginner's Guide to Designing Your Own Web Pages with HTML

DESCRIPTION

This guide introduces you to HTML (Hypertext Markup Language), the backbone of web page creation. Learn the basic structure of an HTML document, including the declaration of the ``, ``, and `` sections. Discover how to use headings, paragraphs, lists, and links effectively. You’ll also explore how to format your text and incorporate images and sound into your pages. With step-by-step examples, you'll be equipped to create your first web page and share your content with the world.

1 / 25

Télécharger la présentation

A Beginner's Guide to Designing Your Own Web Pages with 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. Starting a WWW page • Start a WWW page by declaring itself <html> • End a WWW page by terminating itself </html>

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

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

  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 GIF or JPEG format • 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 should be in MPEG format • 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 >

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

  24. The End

More Related