🌐

Introduction to HTML for Beginners

Mar 19, 2025

Draft CAD: Introduction to HTML

Course Overview

  • Instructor: Mike
  • Focus on learning HTML (Hypertext Markup Language) to create web pages.
  • Understanding HTML tags to define layout and design of a website.
  • Aimed at beginners; will cover from basics to building a custom website.

Importance of HTML

  • Nearly every webpage on the internet is built using HTML.
  • HTML is a valuable skill to add to your resume.
  • Learning HTML can be straightforward with practice.

Choosing a Text Editor

  • HTML Files: Created with a .html extension.
  • Recommended Editors:
    • Simple text editors (Notepad for Windows, TextEdit for Mac) for beginners.
    • More complex editors (Atom, Sublime Text, etc.) for after gaining confidence.
  • Focus on simplicity to grasp fundamentals initially.

Creating Your First HTML File

  • Steps to create an HTML file:
    1. Create a project folder.
    2. Create a file named index.html. This will be the homepage.
    3. Use a basic HTML skeleton:
      • <!DOCTYPE html>
      • <html>
      • <head>
      • <body>

Basic HTML Structure

  • The Head section includes:
    • Title of the webpage using <title> tag.
    • Metadata (optional) using <meta> tags.
  • The Body section includes actual content to be displayed on the webpage.

Common HTML Tags

Head Tags

  • Title Tag: Sets the title displayed in the browser tab.
  • Meta Tag: Used for metadata like character encoding and descriptions.

Body Tags

  • Paragraph Tag (<p>): Defines a paragraph.
  • Header Tags (<h1> - <h6>): Define headings of various importance.
  • Break Tag (<br>): Creates a line break.
  • Horizontal Rule (<hr>): Adds a horizontal line to separate content.

Formatting Text

  • Bold (<b> or <strong>) and Italic (<i> or <em>) tags for text styling.
  • Lists: Unordered (<ul>) and ordered (<ol>) lists for grouping items.

Comments in HTML

  • HTML comments start with <!-- and end with -->.
  • Useful for leaving notes in code without affecting the webpage.

Using Links

  • Anchor Tag (<a>): Creates links to other webpages or URLs.
    • Use href attribute to define the link destination.
    • Targeting a new tab with target="_blank"._

Working with Images

  • Image Tag (<img>): Used to embed images.
    • Use src attribute for the image path and alt for alternate text.

Tables in HTML

  • Table Tag (<table>): Displays tabular data.
  • Row Tag (<tr>): Creates rows within the table.
  • Header Tag (<th>): Defines header cells.
  • Data Tag (<td>): Displays standard cells.
  • Use colspan to make a cell span across multiple columns.

Forms and Input Tags

  • Form Tag (<form>): Wraps around input elements for user data submission.
  • Different Input Types include text, password, checkbox, radio buttons, etc.

Iframes

  • Used to embed another webpage inside your HTML using <iframe>.
    • Can specify width and height attributes.

Meta Tags

  • Provide metadata about the HTML document.
  • Common types include description, author, keywords, and viewport settings.

Conclusion

  • HTML is fundamental for web development.
  • Understanding tags and structure is crucial for creating effective websites.
  • Further learning may involve CSS for styling and JavaScript for functionality.

Full transcript