HTML Basics Lecture Notes

Jul 22, 2024

HTML Basics Lecture Notes

Introduction

  • Introduction to HTML basics for creating a simple website.
  • Overview of the session:
    1. What is HTML?
    2. Basic syntax of HTML
    3. Creating a local website

What is HTML?

  • HTML stands for Hypertext Markup Language.
  • It is used for displaying information on webpages in browsers.
  • Not a programming language, but a markup language.
  • HTML does not use logic or conditions like programming languages (e.g., PHP or Java).
  • You can create HTML files locally on your computer.

Creating a Local HTML File

  • Open your file explorer (File Explorer on Windows, Finder on Mac).
  • Create a new file named index.html on your desktop.
  • Make sure the file extension is visible and correct.
  • Open the file in a web browser and a code editor (e.g., Visual Studio Code).

HTML Tags

  • Tags are special text used to markup parts of a webpage.
  • Tags consist of an opening tag and a closing tag (e.g., <b>...</b> for bold text).
  • Tags surround content to be displayed in a specific manner (e.g., bold, italics).
  • The tags themselves are not displayed on the webpage.

Basic HTML Structure

  • <!DOCTYPE html>: Declares the document type and version (HTML5).
    • Doesn't require a closing tag.
  • <html>: Main HTML tag encasing all other elements.
  • <head>: Contains metadata, CSS, and JavaScript references.
  • <body>: Contains all the main content of the webpage.

Common HTML Tags

Head Section Tags

  • <meta charset="UTF-8">: Sets character encoding to UTF-8.
  • <meta name="viewport" content="width=device-width, initial-scale=1">: Ensures responsive design.
  • <title>...</title>: Sets the title of the webpage (visible in the browser tab).

Body Section Tags

  • Header Tags: Define headings, from <h1> (largest) to <h6> (smallest).
  • Paragraph Tags: <p> tags for blocks of text.
  • Line Breaks: <br> for line breaks (void element, no closing required).
  • Styling Tags:
    • <b>: Bold text
    • <i>: Italic text
    • <u>: Underlined text
    • <em>: Emphasized text (usually italic)
    • <strong>: Strong text (usually bold)
  • Horizontal Rules: <hr> for a horizontal line.

Creating Hyperlinks and Images

Links

  • <a href="...">...</a>: Anchor tag for links.
  • Hypertext Reference (href): URL of the destination.
  • target="_blank": Opens link in a new tab.

Images

  • <img src="..." alt="..." />: Image tag.
    • Source (src): URL or local path to the image.
    • Alternative Text (alt): Descriptive text for the image.
    • Optional: width, height, and border attributes.

Lists in HTML

Unordered and Ordered Lists

  • Unordered List: <ul> with items <li>.
    • Creates bulleted lists.
  • Ordered List: <ol> with items <li>.
    • Creates numbered lists.
  • Nesting Lists: Lists within lists for subcategories.

Tables in HTML

  • Table Structure:
    • <table>: Table tag.
    • <tr>: Table row.
    • <th>: Table header cell.
    • <td>: Table data cell.
  • Table Attributes:
    • border: Width of the table border.
    • cellpadding: Space inside each cell.
    • cellspacing: Space between cells.
  • Advanced Table Features:
    • colspan: Span a cell across multiple columns.
    • rowspan: Span a cell across multiple rows.

Conclusion

  • Overview of HTML basics and structure.
  • How to create a simple HTML file and display it locally.
  • Basic tags and attributes for content structuring.
  • Mention of additional resources (download site files, cheat sheet).
  • Encouragement to practice and subscribe for more content.