🌐

Basics of HTML Document Structure

Oct 28, 2024

Introduction to HTML Tutorial Notes

Opening Comments

  • Objective: Create the first web page using HTML.
  • Tools: Notepad (or any text editor).

Understanding the Browser and File Types

  • Browsers can display various document types (HTML, SVG, XML).
  • Begin with a doctype declaration to specify the type of document.
    • Use <!DOCTYPE html> to declare an HTML document.
    • This declaration ensures compatibility with future HTML versions.

HTML Document Structure

HTML Element

  • Purpose: Acts as a wrapper for all HTML content.
  • Tags:
    • Opening tag: <html>
    • Closing tag: </html>

Head Section

  • Contains: Information about the page.
  • Not critical at this stage but includes important metadata later.
  • Only visible element: Title
    • Tags:
      • Opening tag: <head>
      • Closing tag: </head>
    • Title tag example:
      • In <title>My Web Page</title>, "My Web Page" will appear in the browser tab.

Body Section

  • Significance: Core part of the webpage.
  • Tags:
    • Opening tag: <body>
    • Closing tag: </body>
  • Contains visible content on the webpage.

Adding Content

Headings and Paragraphs

  • Headings formatted using <h1>, <h2>, etc.
    • Example: <h1>Fish Website</h1> creates a large bold headline.
  • Paragraphs: Use <p> tag for blocks of text.
    • Example: <p>Welcome to the Fish website...</p>

Example Structure

  • Header 1: Fish Website
  • Paragraph: Description of the website.
  • Header 2: Bass Fish
  • Paragraph: Information about bass fish.

Creating and Viewing the HTML File

  • Save the file as test.html on desktop.
  • Double-click to open in a web browser.
  • Observe differences in text size and boldness due to header tags.

Additional Notes

  • Testing: Simple webpage testing by double-clicking the HTML file locally.
  • Future Topics:
    • Uploading to a web server to make the page live.
    • Exploring more HTML tags.

Conclusion

  • Understanding the basic structure of an HTML document is crucial.
  • More HTML functionalities will be explored in future tutorials.

Full transcript