Fundamentals of HTML for Beginners

Aug 24, 2024

HTML Basics Lecture Notes

Introduction to HTML

  • HTML: Hypertext Markup Language
  • Basic building block of the web
  • Mandatory for web developers
  • Useful for software developers, marketing, sales, freelancers, and business owners.

Why Learn HTML?

  • Essential for web development and creating websites.
  • Can improve job prospects by adding to your resume.
  • Learning HTML is easy and can be done in a short time.

Fundamental Structure of HTML

  • Analogy: Building a house requires a foundation; similarly, building a website starts with HTML.
  • Other technologies:
    • CSS (Cascading Style Sheets): Styles the appearance of web pages.
    • JavaScript: Adds functionality to web pages.

Getting Started with HTML

  1. Requirements:
    • Web browser (avoid Internet Explorer).
    • Text editor (e.g., VS Code, Sublime Text, Notepad).
  2. Setting up VS Code:
    • Download from code.visualstudio.com.
    • Install and set up the Live Server extension.
  3. Creating the HTML file:
    • Make a new folder (e.g., "website").
    • Create an index.html file.

Basic HTML Document Structure

  • Start with the declaration: <!DOCTYPE html>
  • Create HTML tags:
    • <html> (opening and closing)
    • <head> (information about the web page)
    • <body> (content displayed to users)
  • Add a title using <title> tags.

Adding Content to HTML

  • Use header tags (e.g., <h1>, <h2>, etc.) for titles.
  • Use <p> tags for paragraphs.
  • Line breaks can be added with <br> tags.
  • Use <hr> for horizontal rules to divide sections.

HTML Elements and Tags

  • Elements: Comprise opening tag, content, and closing tag.
  • Tags: Keywords in angle brackets.
    • Example: <title>My First Website</title> is an element made up of tags.

Comments in HTML

  • Comments are not displayed in the browser.
  • Create comments using <!-- comment here -->.

Hyperlinks in HTML

  • Hyperlinks can be created using <a> tags.
    • Use href attribute for URLs.
    • Use target attribute to open links in new tabs (e.g., target="_blank").
  • Example: 
    <a href="http://www.google.com" target="_blank">Go to Google</a>

Adding Images

  • Use <img> tags for images.
    • Set the src attribute to the image file.
    • Use alt for alternative text.
    • Optional: Use title for a tooltip on hover.

Audio and Video Elements

  • Audio: Use <audio> element with controls attribute for playback.
    • Example:
    <audio controls src="audiofile.mp3"></audio>
  • Video: Use <video> element, similar to audio.
    • Example:
    <video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Text Formatting Tags

  • Bold: <b>
  • Italic: <i>
  • Subscript: <sub>
  • Superscript: <sup>
  • Underline: <ins>
  • Strikethrough: <del>
  • Highlight: <mark>

Creating Lists

  • Unordered List: Use <ul> and <li> tags.
  • Ordered List: Use <ol> and <li> tags.
  • Description List: Use <dl>, <dt>, and <dd> tags.

Creating Tables

  • Use <table> for tables, <tr> for rows, <th> for headers, and <td> for data cells.
  • Example: 
    <table>
    <tr>
        <th>Day</th>
        <th>Hours</th>
    </tr>
    <tr>
        <td>Monday</td>
        <td>9am - 5pm</td>
    </tr>
</table>

Adding CSS for Colors

  • Add color with the style attribute.
    • Example: style="background-color: black; color: white;"
  • Use color names, RGB values, or hexadecimal values.

Span and Div Tags

  • Span: Inline, adds markup to a section of text.
  • Div: Block-level, used to group sections of content.

Meta Tags

  • Used for metadata in the <head> section.
  • Examples:
    • Description: <meta name="description" content="...">
    • Keywords: <meta name="keywords" content="...">
    • Author: <meta name="author" content="...">

Using Iframes

  • Embed other web pages with <iframe> tags.
  • Example: <iframe src="https://www.bing.com" width="750" height="250"></iframe>

Creating Buttons

  • Use <button> tags for buttons.
  • Example: 
    <button>Click Me</button>
  • Buttons can also execute JavaScript functions.

Forms in HTML

  • Use <form> tags to create forms.
    • Use <input> for user input, specify type and other attributes.
    • Example:
    <form>
    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="fname" placeholder="Enter your first name">
</form>
  • Common Input Types: text, password, email, date, number, radio, checkbox, dropdown.
  • Methods: get and post.
  • Include required attribute for mandatory fields.

Conclusion

  • HTML provides the structure for web pages.
  • Essential to learn as a foundation before moving onto CSS and JavaScript.