1 / 16

Introduction to Basic HTML Document Structure and Formatting Tags

This document serves as a comprehensive guide to understanding the basic structure of an HTML document, including essential tags such as <html>, <head>, and <body>. It covers various formatting options like paragraphs, line breaks, and font styles (bold, italic, underline). Additionally, it provides examples of lists (ordered and unordered), hyperlinks, images, and tables, along with navigation through bookmarks and framesets. Whether you're a beginner or looking to refresh your knowledge, this guide highlights the fundamental aspects of HTML.

zeph-shields
Télécharger la présentation

Introduction to Basic HTML Document Structure and Formatting Tags

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. Writing HTML Document • HTML Reference • http://www.w3.org • M:\Comp\HTML_Ref\Htmlref.hlp

  2. Basics • <html> • <head> • <title> … </title> • </head> • <body> • </body> • </html>

  3. Formatting Tag • Paragraph : <p align=left | right | center> … </p> • Line Break : <br> • Font : <font face=“name” color=“name”> … </font> • Bold : <b> … </b> • Italic : <i> … </i> • Underline : <u> … </u> • Indentation: <blockquote> … </blockquote> Example

  4. List Tag • Numbering : <ol> … </ol> • Bullet : <ul> … </ul> • List Item : <li> … </li>

  5. Image Tag • <img src=“filename” alt=“text”> Example

  6. Hyperlink Tag • <a name=“bookmarks” | href=“web_site_address” • target=“window_name”> … </a> Example

  7. Table Tag • Table : <table width=“percentage”> … </table> • Row : <tr> … </tr> • Cell : <td> … </td> Example

  8. Frame Tag • Defining Frame : <frameset> … </frameset> • Frame : <frame name=“frame_name” src=“filename”> Example

  9. Formatting Example • <p><font face=“Arial” color=“blue”>This is my first HTML document.</font></p> • <p><b><i><u>This sentence will be bold, italic and underlined.</u></i></b></p> • <blockquote> • <p>This sentence will be indented.</p> • </blockquote> Back

  10. List Example - Numbering • <ol> • <li>Item one.</li> • <li>Item two.</li> • <li>Item three.</li> • </ol> Back

  11. List Example - Bullet • <ul> • <li>Item one.</li> • <li>Item two.</li> • <li>Item three.</li> • </ul> Back

  12. Image Example • <p align=“center”> • <img src=“mcmug.gif” alt=“McMug”> • </p> Back

  13. Hyperlink Example • Setup a hyperlink • <a href=“http://www.hssc.edu.hk”> • Hang Seng School of Commerce • </a> • Setup a hyperlink in a new window • <a href=“http://www.hssc.edu.hk” target=“new”> • Hang Seng School of Commerce • </a>

  14. Hyperlink Example • Defining a bookmark • <a name=“top”> • Top of the Document • </a> • Setup a hyperlink to a bookmark • <a href=“#top”> • Back to Top • </a> Back

  15. Table Example • <table width=100%> • <tr> • <td>Column A</td><td>Column B</td> • </tr> • <tr> • <td>Item 1</td><td>Item 2</td> • </tr> • </table> Back

  16. Frame Example • Defining frame • <frameset cols=“25%,*”> • <frame name=“a” src=“menu.htm”> • <frame name=“b” src=“contents.htm”> • </frameset Back

More Related