🌐

Introduction to HTML Language Essentials

Aug 6, 2024

HTML Basics Lecture Notes

Introduction to HTML

  • HTML stands for Hypertext Markup Language.
  • It is the most basic building block of the web and is mandatory for web developers.
  • Useful for software developers, marketers, business owners, and freelancers.
  • Learning HTML is essential and easy (takes about 1 hour).

Importance of Learning HTML

  • Building a website is like building a house; HTML is the foundation.
  • After HTML, CSS (Cascading Style Sheets) is used for styling, and JavaScript for functionality.

Required Tools

  • Web Browser: Any browser is fine, avoid Internet Explorer.
  • Text Editor: Recommended to use VS Code, but options include Sublime Text or Notepad.
    • Installation steps for VS Code:
      1. Download from code.visualstudio.com.
      2. Install it, create a desktop icon, and add to PATH.
      3. Install the Live Server extension for live previewing HTML changes.

Creating an HTML Document

  1. Create a new folder (e.g., "website").
  2. Create an index.html file (home page).
  3. Start the document with <!DOCTYPE html> to define the document type.
  4. Create the HTML structure:
    • <html> (start and end tags)
    • <head> (meta information about the page)
      • <title> to name the webpage.
    • <body> (content displayed to users).
  5. Save and open with Live Server.

HTML Tags and Elements

  • Tags: Keywords in angle brackets (e.g., <h1>).
  • Elements: Composed of opening tag, content, and closing tag (e.g., <h1>Hello</h1>).
  • Header Tags: <h1> to <h6> for headings of different sizes.
  • Paragraph Tags: <p> for paragraphs.
  • Line Breaks: Use <br> for line breaks (self-closing).
  • Horizontal Rule: <hr> to create horizontal lines (self-closing).

Comments in HTML

  • Use <!-- Comment here --> to add comments that won't display on the webpage.

Hyperlinks

  • Use <a> tags to create hyperlinks:
    • href attribute for the URL.
    • target attribute to open in a new tab with _blank.
    • Titles can be added for hover messages._

Adding Images

  • Use <img> tags to insert images:
    • src for the image source.
    • Alternative text with alt attribute for accessibility.
    • Set dimensions with width and height attributes.
    • Images can also be hyperlinks by surrounding <img> with <a> tags.

Adding Audio and Video

  • Audio: Use <audio> tags with controls, autoplay, muted, and loop attributes.
  • Video: Use <video> tags similarly, with nested <source> tags for backups.

Text Formatting Tags

  • Bold: <b>
  • Italic: <i>
  • Subscript: <sub>
  • Superscript: <sup>
  • Deleted text: <del>
  • Inserted text: <ins>
  • Marked text: <mark>

Creating Lists

  1. Unordered List: Use <ul> for bullet points.
    • Items marked with <li>.
  2. Ordered List: Use <ol> for numbered lists.
  3. Description List: Use <dl> with <dt> for terms and <dd> for definitions.

Creating Tables

  • Use <table> with <tr> for rows, <th> for headers, and <td> for data cells.

Adding Color to Webpages

  • Use the style attribute within tags to set CSS properties (e.g., background-color, color).

Span and Div Tags

  • Span: Adds markup to a section of text.
  • Div: Groups block-level elements together for styling.

Meta Tags

  • Used to provide metadata about a webpage (e.g., description, keywords).
  • Should be placed within the <head> section and are self-closing.

Iframes

  • Used to embed another webpage within your page.
  • Set src to the URL or file path.
  • Beware of security issues regarding iframe usage.

Creating Buttons

  • Use <button> tags to create buttons.
  • Can be made as hyperlinks or include JavaScript functions for interactivity.

HTML Forms

  • Forms are created with <form> tags.
  • Input types include text, password, email, radio buttons, checkboxes, and dropdowns.
  • Common attributes include action, method, and required.

Full transcript