Tutorial 1: Introduction to HTML

Introduction

HTML stands for HyperText Markup Language. It is the standard language used to create and design web pages. In this tutorial, we will learn the basics of HTML, including its structure, commonly used tags, and some advanced features.

This is the first tutorial in our series. Follow along and practice to build a solid foundation in web development.

Basic HTML Document Structure

Every HTML document starts with a declaration and is structured into two main parts: the <head> and <body>.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Your Page Title</title>
  </head>
  <body>
    Your content goes here...
  </body>
</html>

<!DOCTYPE html> declares that the document is HTML5.
<html> is the root element.
<head> contains metadata, links to stylesheets, and the title.
<body> contains all the content displayed in the browser.

Common HTML Tags

Text Formatting

<h1> to <h6>: Heading tags, with <h1> as the most important.
<p>: Paragraph tag.
<strong>: Bold text for strong emphasis.
<em>: Italic text for emphasis.

Links and Images

<a href="URL">Link text</a>: Creates a hyperlink.
<img src="image.jpg" alt="Description">: Embeds an image. Always include the alt attribute for accessibility.

Lists

<ul>: Unordered list (bullets).
<ol>: Ordered list (numbered).
<li>: List item.

Grouping and Comments

<div>: A block-level container for grouping content.
<span>: An inline container for styling text or parts of content.
: Comments that are not displayed in the browser.

Semantic HTML

Semantic elements give meaning to the web page structure and help with accessibility and SEO.

<header>: Contains introductory content or navigation.
<nav>: Contains navigation links.
<article>: Represents a self-contained piece of content.
<section>: A thematic grouping of content.
<aside>: Contains content tangentially related to the main content.
<footer>: Contains footer information for a document or section.

Advanced Topics

Tables

Tables are used to display tabular data:

<table border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

Forms

Forms allow users to input data:

<form action="submit_form.php" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="Submit">
</form>

This example shows a simple form with a text input and a submit button.

Homework Assignment

Create your own HTML page by including the following elements:

A complete HTML document with <!DOCTYPE html>, <html>, <head>, and <body> tags.
A title in the <title> tag.
At least one heading (<h1> or <h2>).
A paragraph (<p>) about your favorite hobby or interest.
An image using the <img> tag (use an online URL or a local image).
A link (<a>) to a website you enjoy.
A list (<ul> or <ol>) with at least three items.
Optional: Incorporate semantic elements like <header>, <nav>, <article>, or <footer>.

Save your file as index.html and submit it by the next class session.

Note: Experiment with different tags and attributes. Practice is key to mastering HTML!