HTML Tutorial - How to Make a Super Simple Website

Key Concepts

HTML (Hypertext Markup Language), tags (opening and closing), doctype declaration, HTML structure (head and body), meta tags (charset, viewport), title tag, heading tags (h1-h6), paragraph tag (p), line break tag (br), style tags (b, i, u, em, strong), horizontal rule (hr), link tag (a with href and target), image tag (img with src and border), lists (ul, ol, li), nesting, tables (table, tr, th, td, border, cellpadding, cellspacing, colspan, rowspan).

What is HTML?

HTML (Hypertext Markup Language) is a markup language used to display information on web pages. It is not a programming language like PHP or Java, which use logic and conditions. HTML uses tags to markup or distinguish parts of a webpage. An HTML file can be created and loaded locally in a browser.

Creating Your First HTML File

1. Open File Explorer (Windows) or Finder (Mac).
2. Create a new file named index.HTML on your desktop or desired location.
3. In Windows, enable "File name extensions" in the View tab if the extension is not visible.
4. Open the index.HTML file in a browser (double-click or right-click "Open with").
5. Open the same file in a code editor like Visual Studio Code (links to alternatives like Notepad++, Sublime, Atom, and Brackets are provided).
6. Keep both the browser and editor windows open side-by-side for immediate viewing of changes.

Basic HTML Syntax

HTML uses tags to markup text. Tags come in pairs: an opening tag and a closing tag. For example, <b>This text is bold</b> makes the text "This text is bold" appear in bold. The closing tag includes a forward slash (/). The browser doesn't display the tags themselves.

To create a valid HTML document, the following structure is needed:

1. <!DOCTYPE HTML>: This declaration tells the browser that the document is an HTML5 document. It doesn't require a closing tag.
2. <html>: The root element that contains all other HTML elements.
3. <head>: Contains metadata about the HTML document, such as character set, viewport settings, and title.
4. <body>: Contains the visible page content.

Example:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My first website</title>
</head>
<body>
  <b>This is my very first website. And I'm extremely excited!!!</b>
</body>
</html>

Head Tags

• <meta charset="UTF-8">: Specifies the character encoding for the document as UTF-8, which supports virtually all characters and symbols.
• <meta name="viewport" content="width=device-width, initial-scale=1.0">: Configures the viewport for responsive design, ensuring the website displays correctly on different devices. width=device-width sets the width of the page to the screen width of the device. initial-scale=1.0 sets the initial zoom level to 100%.
• <title>My first website</title>: Sets the title of the web page, which appears in the browser tab.

Body Tags

• Heading Tags (h1-h6): Used to create headings of different sizes and importance. <h1> is the most important and largest, while <h6> is the least important and smallest.
  • Example: <h1>My first website</h1>, <h2>HTML playground</h2>
• Paragraph Tag (p): Used to create paragraphs of text. Browsers automatically add space between paragraphs.
  • Example: <p>Lorem ipsum dolor sit amet...</p>
• Line Break Tag (br): Inserts a single line break. It is a void element and does not require a closing tag.
  • Example: This is the first line.<br>This is the second line.
• Style Tags (b, i, u, em, strong): Used to apply basic text formatting. CSS is now preferred for styling.
  • <b>: Bold text.
  • <i>: Italic text.
  • <u>: Underlined text.
  • <em>: Emphasized text (usually displayed as italics).
  • <strong>: Strong text (usually displayed as bold).
• Horizontal Rule (hr): Creates a horizontal line across the page. It is a void element.
  • Example: <hr>
• Link Tag (a): Creates a hyperlink to another web page or resource.
  • href attribute: Specifies the URL of the link.
  • target attribute: Specifies where to open the linked document (_blank opens in a new tab).
  • Example: <a href="https://www.google.com" target="_blank">Google Homepage</a>
• Image Tag (img): Embeds an image in the web page.
  • src attribute: Specifies the URL or file path of the image.
  • border attribute: Specifies the width of the border around the image (CSS is now preferred).
  • Example: <img src="600x300.png" border="10" />
  • Using local images is preferable to linking to external images.
• Lists (ul, ol, li): Creates unordered (bulleted) or ordered (numbered) lists.
  • <ul>: Unordered list.
  • <ol>: Ordered list.
  • <li>: List item.
  • Lists can be nested within each other.
  • Example:

<ul>
  <li>
    apples
    <ul>
      <li>Golden Delicious</li>
      <li>Granny Smith</li>
      <li>Gala</li>
    </ul>
  </li>
  <li>oranges</li>
</ul>

• Tables (table, tr, th, td): Creates tables to organize data into rows and columns.
  • <table>: Defines the table.
  • <tr>: Defines a table row.
  • <th>: Defines a table header cell.
  • <td>: Defines a table data cell.
  • border attribute: Specifies the width of the table border.
  • cellpadding attribute: Specifies the space between the cell content and the cell border.
  • cellspacing attribute: Specifies the space between cells.
  • colspan attribute: Specifies the number of columns a cell should span.
  • rowspan attribute: Specifies the number of rows a cell should span.
  • Example:

<table border="1" cellpadding="10" cellspacing="0">
  <tr>
    <th></th>
    <th>Month</th>
    <th colspan="2">Utilities</th>
    <th>Groceries</th>
    <th>Eating Out</th>
    <th>Entertainment</th>
  </tr>
  <tr>
    <td rowspan="3">Fall</td>
    <td>June</td>
    <td>100</td>
    <td>50</td>
    <td>350</td>
    <td>100</td>
    <td>50</td>
  </tr>
</table>

Nesting and Indentation

Nesting refers to placing HTML elements inside other HTML elements. The inner element is called the "child" and the outer element is called the "parent." Indentation is used to visually organize nested elements, making the code more readable. Consistent indentation is crucial for maintainability and collaboration.

Tables for Layout (Historical Context)

Historically, tables were used for website layout. While now largely replaced by CSS, tables are still used in HTML emails due to limited CSS support in some older email clients.

Conclusion

The video provides a comprehensive introduction to HTML basics, covering essential tags and syntax for creating a simple website. It emphasizes the importance of proper HTML structure, nesting, and indentation for readability and maintainability. While some of the older styling attributes are less relevant today due to CSS, understanding them provides a solid foundation for web development. The video concludes with a call to action to download the site files and a cheat sheet of the HTML tags covered.