Introduction to HTML Fundamentals

Aug 11, 2024

HTML Basics Lecture Notes

Introduction to HTML

  • HTML: Stands for Hypertext Markup Language.
  • Purpose: Basic building block of the web. It structures content that a web server sends to a browser.

Building a Simple HTML Page

  • No installations needed; tools are already available on your computer.
  • Focused on HTML only; CSS and JavaScript are not covered.

Creating an HTML File

  1. Create a Folder:
    • Right-click on desktop > New > Folder.
    • Name it "Kevin Cookie Company website".
  2. Create an HTML File:
    • Inside the folder, right-click > New > Text Document.
    • Rename it to index.html (change extension to .html).

Opening HTML File

  • Open the index.html file in a web browser (e.g., Microsoft Edge, Google Chrome).

Editing HTML File

  • Use Notepad (pre-installed application) to add content to the HTML file:
    • Add simple text (e.g., "Kevin Cookie Company").
    • Save changes and refresh browser to see updates.

HTML Structure

  • Elements and Tags:
    • HTML uses tags to define elements:
      • Opening tag: <tagname>
      • Closing tag: </tagname>
    • Example: <h1>Header</h1> defines a header element.

Header Elements

  • Different Header Levels:
    • <h1>: Main title
    • <h2>: Subheader
    • Use appropriate headers for content hierarchy.

Paragraphs and Text Formatting

  • Use <p> tag for paragraphs:
    • Example: <p>This is a paragraph.</p>
  • Text Formatting Tags:
    • <em> or <i> for emphasis (italics).
    • <strong> or <b> for strong emphasis (bold).
    • <u> for underline.

Declaring Sections

  • Use <section> tag to group related content:
    • Indent for readability.

Lists in HTML

  • Unordered List: Use <ul> and <li> for bullet points.
  • Ordered List: Use <ol> and <li> for numbered items.

Line Breaks and Comments

  • Use <br> for line breaks (self-closing tag).
  • Add comments using <!-- comment here -->.

Creating Additional Pages

  • Recipe Page:
    • Create a new file called recipe.html.
    • Use links to navigate between pages with <a> tag.

Including Images

  • Use <img> tag to add images:
    • Example: <img src="image.png" width="400" height="122" alt="Description">.
  • Importance of alt attribute for accessibility.

Audio and Video Elements

  • Use <audio> and <video> tags for media content.

Forms and Tables

  • Table: Use <table>, <tr>, <th>, and <td> for displaying tabular data.
  • Form: Use <form> to create interactive forms for user input.

Structuring a Proper HTML Document

  • Use <!DOCTYPE html> at the top.
  • Organize content into <head> (metadata) and <body> (visible content).
    • Example of head elements: <title> and <meta> description.

Conclusion

  • HTML is a markup language, not a programming language.
  • Many more elements and attributes to explore beyond this introduction.
  • Resources for further learning provided in the video description.