Introduction to HTML Basics and Structure

Aug 22, 2024

Notes on HTML Basics Lecture

Introduction to HTML

  • HTML stands for Hypertext Markup Language.
  • It is the basic building block of the web.
  • When a website address is typed, the web server sends an HTML file to the browser to display content.

Setting Up an HTML Page

  • No installation needed; tools are already available on your computer.
  • Focus on basic HTML structure without CSS or JavaScript.

Creating an HTML File

  1. Create a New Folder: Right-click on desktop -> New -> Folder (name it "Kevin Cookie Company Website").
  2. Enable Filename Extensions: Go to File Explorer -> View -> Show -> File name extensions.
  3. Create HTML File: Right-click in the folder -> New -> Text Document, rename it to index.html, confirm the file extension change.
  4. Open in Browser: Double-click index.html to view in your default web browser (Microsoft Edge or Google Chrome).

Editing HTML Content

  • Use Notepad (comes pre-installed) for editing.
  • Adding Content: Type "Kevin Cookie Company" in Notepad and save the file.
  • Refresh the browser to see changes.

HTML Structure: Elements and Tags

  • HTML is a declarative language; elements and tags define content meaning.
  • Example of Tag:
    • To create a header: <h1>Header</h1> (Opening and closing tags).
    • Different headers range from <h1> (largest) to <h6> (smallest).

Paragraphs and Emphasis

  • To create paragraphs: <p>Paragraph text</p>.
  • For emphasis: <em>Emphasized text</em> (italic) vs <i>Italicized text</i>.
  • Bold text can be created with <strong> vs <b>.
  • Underline text with <u>.

Grouping Content

  • Use <section> to group related content.
  • Indentation improves code readability.

Lists

  • Unordered List:
    • Use <ul> for bullet lists, with <li> for list items.
  • Ordered List:
    • Use <ol> for numbered lists, also with <li> for list items.

Line Breaks and Comments

  • Insert line breaks with <br> (self-closing tag).
  • Add comments using <!-- Comment text -->, will not be displayed in the browser.

Creating a Recipe Page

  1. Separate Recipe Page: Create recipe.html following the same method as index.html.
  2. Linking Pages:
    • Use <a href="recipe.html">Learn how to make our chocolate chip cookies</a> to link between pages.

Adding Images

  • Include images with the <img> tag:
    • <img src="KCC Logo.png" width="400" height="122" alt="Kevin Cookie Company logo">.
  • Always include alt description for accessibility.

Adding Multimedia

  • Include audio and video using <audio> and <video> tags.
  • Use attributes for additional functionality (e.g., controls, autoplay).

Creating an Order Form

  1. Create Order Form.html: Set up a table for cookies with <table>, <tr>, <th>, and <td>.
  2. Add a Basic Form: Use <form>, <input>, and specify types (e.g., type="date" for date pickers).

Structuring a Proper HTML Page

  1. HTML Document Type: Add <!DOCTYPE html> at the beginning.
  2. HTML, Head, and Body:
    • Enclose content in <html>, <head>, and <body> tags.
    • Include title and metadata in the head section.
  3. Importance of Structure:
    • Ensures the browser understands the content correctly.

Conclusion

  • HTML is a markup language, not a programming language.
  • More elements and attributes can be explored for advanced functionality.
  • Additional resources available for further learning.