Lecture Notes on HTML Basics

Jul 29, 2024

Draft CAD: Introduction to HTML

Course Overview

  • Instructor: Mike
  • Content: Learn to write HTML to create web pages.
  • Key Points:
    • HTML stands for Hypertext Markup Language.
    • HTML defines the structure of web pages with tags (e.g., html, head, body).

Importance of HTML

  • Essential for creating websites
  • Offers a practical skill to enhance a resume

Initial Setup

Choosing a Text Editor

  • Options for Beginners:
    • Simple text editors (Notepad for Windows, TextEdit for Mac).
    • More complex editors (Atom, Sublime Text, etc.) can be explored later.
  • Recommendation: Start with simple editors to focus on learning HTML.

Creating Your First HTML File

  1. Create a project folder (e.g., GA_site).
  2. Create an index.html file.

Basic HTML Structure

  • Skeleton of HTML: 
    <!DOCTYPE html>  
<html>  
  <head>  
    <title>Mike's Website</title>  
  </head>  
  <body>  
    Hello World  
  </body>  
</html>
  • Tags Explained:
    • <!DOCTYPE html>: Declares the document type.
    • <html>: Root container of the document.
    • <head>: Contains metadata about the document.
    • <body>: Contains the content of the document.

Essential HTML Tags

Header and Body Tags

  • Head Tags:
    • Used for document information (title, metadata).
  • Body Tags:
    • Where the main content of the web page is placed.

Indentation and Hierarchy

  • Indentation helps to visualize the structure of HTML.
  • Parent-Child Relationship:
    • The root tag (<html>) is the parent of <head> and <body>, which are siblings.

Common Tags

  • Title Tag: Defining the title shown on browser tabs.
  • Header Tags (<h1> to <h6>): Define section headings.
  • Paragraph Tag (<p>): For block text.
  • Break Tag (<br>): For line breaks.
  • Horizontal Rule (<hr>): For horizontal lines.

Using Comments and Structuring Tags

  • Comments with <!-- Comment here --> to leave developer notes.
  • Block vs Inline Elements:
    • Block Elements: Take full width (e.g., div, h1, p).
    • Inline Elements: Only take necessary space (e.g., span, links).

Links and Navigation

Creating Links

  • Use <a href="...">Link Text</a> for external or internal links.
  • Attributes:
    • target="_blank" for opening links in a new tab.

Using Images

  • Image Tag: 
    <img src="image.jpg" alt="description">
  • Attributes for width and height.

Videos Integration

  • Basic Video Tag: 
    <video src="video.mp4" controls></video>
  • Attributes like autoplay, loop, and poster.

Lists in HTML

Types of Lists

  • Unordered List: 
    <ul><li>Item</li></ul>
  • Ordered List: 
    <ol><li>Item</li></ol>
  • Description List: 
    <dl><dt>Term</dt><dd>Description</dd></dl>

Tables in HTML

Creating Tables

  • Use <table>, <tr> (table row), <th> (header), and <td> (data).
  • Example Table Structure: 
    <table>  
  <tr><th>Header</th></tr>  
  <tr><td>Data</td></tr>  
</table>
  • Use <caption> for table titles.

Containers in HTML

Common Containers

  • Div Tags: Block level containers.
  • Span Tags: Inline containers.

Input and Forms

Creating Input Fields

  • Types of input (text, checkbox, radio, submit, etc.):
<input type="text">  
<input type="password">  
<input type="checkbox">  
<input type="radio">

Forms Example:

  • Wrapping inputs in a form tag:
<form>  
  <input type="text">  
</form>

Using Iframes

Embedding Websites

  • Iframe example:
<iframe src="..." width="1000" height="800"></iframe>

Meta Tags

Purpose and Usage

  • Store additional information about the document.
  • Essential meta tags include charset, description, author, keywords.

Conclusion

  • Recommendation: Keep practicing and creating with HTML to solidify understanding.