Web Technologies Tutorial

What is HTML?

HTML, or HyperText Markup Language, is the standard markup language used to create web pages. HTML elements are the building blocks of HTML, which structure content for display in a web browser. HTML elements are represented by tags, and each tag tells the browser how to display the content enclosed within it.

Basic Structure of an HTML Document

An HTML document starts with a doctype declaration, followed by the <html> element, which contains the <head> and <body> sections.

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>

    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>

</body>
</html>

Explanation:

<!DOCTYPE html>: Declares the document type and version (HTML5).
<html>: The root element of the HTML document.
<head>: Contains metadata, links to CSS files, and the page title.
<body>: Contains all the content displayed on the webpage, such as headings, paragraphs, images, and links.

Common HTML Elements

Headings

HTML headings are defined with the <h1> to <h6> tags, with <h1> as the highest (most important) level and <h6> as the lowest.

<h1>This is an H1 Heading</h1>
<h2>This is an H2 Heading</h2>
<h3>This is an H3 Heading</h3>

Paragraphs

Paragraphs are defined using the <p> tag, which is used for blocks of text.

<p>This is a paragraph of text.</p>

Links

Links are defined with the <a> tag, which requires an href attribute to specify the URL.

<a href="https://www.example.com">Visit Example</a>

Images

Images are embedded using the <img> tag, which has src (source) and alt (alternative text) attributes.

<img src="image.jpg" alt="Description of the image" width="500" height="300">

HTML Attributes

Attributes provide additional information about HTML elements. They are always included in the opening tag and usually consist of a name and a value.

Common HTML Attributes

href: Specifies the URL in the <a> (anchor) tag.
src: Specifies the file path for images in the <img> tag.
alt: Provides alternative text for images if they cannot be displayed.
title: Adds additional information as a tooltip when you hover over the element.
style: Allows for inline CSS styling.
id: Specifies a unique identifier for an element, which can be targeted by CSS or JavaScript.
class: Specifies a class name for an element, which can be targeted by CSS or JavaScript to apply specific styles or behavior.

Example Using Attributes:

<a href="https://www.example.com" title="Example Site">Visit Example</a>
<img src="logo.png" alt="Site Logo" class="site-logo">

HTML Lists

HTML provides two main types of lists: ordered lists and unordered lists. Lists are used to group related items together.

Unordered List

An unordered list is created with the <ul> tag, and list items are added with the <li> tag.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Ordered List

An ordered list is created with the <ol> tag, and list items are also added with the <li> tag.

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

HTML Tables

Tables are used to organize data in rows and columns. Tables are created with the <table> tag, with rows added using <tr>, and data cells using <td> for standard cells and <th> for header cells.

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

HTML Forms

Forms in HTML are used to collect user input. The <form> element contains form controls like <input>, <textarea>, <select>, and <button>.

Form Example:

<form action="/submit_form" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

  <button type="submit">Submit</button>
</form>

In this example, the form data is sent to the /submit_form URL with a POST request when the user clicks Submit.

Fundamentals of HTML