Learn HTML (Full Tutorial)

HTML Basics

What is HTML?

  • HTML = Hyper Text Markup Language

  • Standard language for creating web pages

  • Describes the structure of a web page using elements

  • Elements label content (e.g., heading, paragraph, link)

A Simple HTML Document

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Explained:

  • <!DOCTYPE html> → defines HTML5 document

  • <html> → root element

  • <head> → meta info

  • <title> → shown in browser tab

  • <body> → visible content

  • <h1> → heading

  • <p> → paragraph

HTML Elements

  • Structure: <tagname>Content</tagname>

  • Example: <h1>Heading</h1>

  • Some elements are empty (no end tag), e.g., <br>

Nested Elements: Elements can contain other elements:

<html>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
</body>
</html>

Web Browsers

  • Chrome, Edge, Firefox, Safari read HTML and display it correctly

  • Browsers ignore tags and use them to format content

HTML Headings & Paragraphs

<h1>Heading 1</h1> <!-- Most important -->
<h6>Heading 6</h6> <!-- Least important -->
<p>Paragraph text</p>

Links and Images

Links: <a href="https://example.com">Click here</a>
Images: <img src="img.jpg" alt="Description" width="100" height="150">

  • src → path to image (absolute or relative URL)

  • alt → alternative text

  • width & height → dimensions

HTML Attributes

  • Extra info for elements, always in start tag

  • Format: name="value"

Common Attributes:

  • href → link destination

  • src → image source

  • alt → alternate text for images

  • style → inline styles (color, font, size)

  • lang → language of page (<html lang="en-US">)

  • title → tooltip text

Creating a Web Page with Notepad/TextEdit

  1. Open editor: Notepad (Windows) / TextEdit (Mac, Plain Text mode)

  2. Write HTML (see example above)

  3. Save: index.html, encoding UTF-8

  4. Open in browser: double-click file

HTML Headings & Paragraphs

Headings (<h1> to <h6>)

  • <h1> → most important, <h6> → least important

  • Browsers add spacing automatically

  • Headings help SEO and readability

  • Use headings for structure, not just for bold/big text

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>

Paragraphs (<p>)

  • Starts on a new line, browser adds spacing automatically

  • Extra spaces/lines in HTML are ignored

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Line Breaks (<br>)

  • Forces a new line without starting a new paragraph

<p>This is<br>a line break<br>example.</p>

Preformatted Text (<pre>)

  • Preserves spaces and line breaks

  • Fixed-width font

<pre>
This text
keeps its formatting
</pre>

Horizontal Rule (<hr>)

  • Defines a thematic break, empty element (no end tag)

<h1>Heading</h1>
<p>Text</p>
<hr>

HTML Styles (style Attribute)

Syntax: <tag style="property:value;">

Examples:

<p style="color:red;">Red text</p>
<h1 style="font-size:60px;">Big Heading</h1>
<p style="text-align:center;">Centered text</p>
<h1 style="background-color:powderblue;">Colored background</h1>
<h1 style="font-family:verdana;">Verdana font</h1>

Common CSS properties:

  • color → text color

  • background-color → background color

  • font-family → font

  • font-size → text size

  • text-align → alignment

HTML Text Formatting

Bold & Italic

<b>Bold</b> <!-- visual bold -->
<strong>Important</strong> <!-- strong importance -->
<i>Italic</i> <!-- alternate voice/mood -->
<em>Emphasized</em> <!-- emphasis for screen readers -->

Other formatting

<small>Smaller text</small>
<mark>Highlighted text</mark>
<del>Deleted text</del>
<ins>Inserted text</ins>
<sub>Subscript (H2O)</sub>
<sup>Superscript (footnotes)</sup>

HTML Quotation & Citation Elements

<blockquote> – long quotes (indented by browser)

<blockquote cite="https://example.com">
This is a long quotation.
</blockquote>

<q> – short inline quotes (adds quotation marks)

<p>WWF's goal: <q>Live in harmony with nature.</q></p>

<abbr> – abbreviations with title tooltip

<p><abbr title="World Health Organization">WHO</abbr></p>

<address> – contact info, usually italicized

<address>
John Doe<br>
Example.com<br>
USA
</address>

<cite> – work titles (books, movies, paintings)

<p><cite>The Scream</cite> by Edvard Munch</p>

<bdo> – text direction override

<bdo dir="rtl">Right-to-left text</bdo>

HTML Comments

  • Not displayed in browser

  • Syntax: <!-- Comment here -->

  • Can hide content or debug code

<!-- This is a comment -->
<p>Visible paragraph</p>
<!-- <p>Hidden paragraph</p> -->

HTML Colors

  • Can use names, HEX, RGB, HSL, RGBA, HSLA

<h1 style="color:Tomato;">Text Color</h1>
<p style="background-color:#ff6347;">Background Color</p>

  • Border, padding, margin examples:

<p style="border:2px solid Tomato; padding:20px; margin:30px;">Text</p>

CSS Basics

CSS = Cascading Style Sheets – controls layout, colors, fonts, spacing, responsive design.

Ways to add CSS:

  1. Inline: <p style="color:red;">Red text</p>

  2. Internal:

<style>
h1 {color:blue;}
p {color:red;}
body {background-color:powderblue;}
</style>

  1. External:

<link rel="stylesheet" href="styles.css">

Common CSS Properties:

  • color → text color

  • background-color → background

  • font-family → font

  • font-size → size

  • text-align → alignment

  • border → element border

  • padding → inside spacing

  • margin → outside spacing

HTML Links

Basic link:

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

Target attribute:

  • _self → same tab (default)

  • _blank → new tab/window

<a href="https://example.com" target="_blank">Open in new tab</a>

Relative vs Absolute URLs:

<!-- Absolute -->
<a href="https://example.com/page.html">Link</a>
<!-- Relative -->
<a href="page.html">Link</a>
<a href="/folder/page.html">Link</a>

Image as link:

<a href="page.html"><img src="img.jpg" alt="Image link"></a>

Email link:

<a href="mailto:someone@example.com">Send Email</a>

Tooltip with title:

<a href="https://example.com" title="Go to Example">Example</a>

HTML Images

<img> – embeds images. Empty tag, must include:

  • src → image URL/path

  • alt → alternate text if image can’t load

<img src="img_chania.jpg" alt="Flowers in Chania">

Image Size

  • Using attributes: width="500" height="600"

  • Using CSS: style="width:500px;height:600px;" (recommended)

Images in folders / external URLs:

<img src="/images/html5.gif" alt="HTML5 Icon">
<img src="https://example.com/img.jpg" alt="External Image">

Animated GIFs:

<img src="animated.gif" alt="Animation">

Image as a link:

<a href="page.html">
<img src="smiley.gif" alt="HTML tutorial">
</a>

Floating images (left/right):

<img src="smiley.gif" style="float:right;width:42px;height:42px;">
<img src="smiley.gif" style="float:left;width:42px;height:42px;">

Common image formats: GIF, PNG, JPG/JPEG, SVG, ICO, APNG

Tips:

  • Always set width & height to prevent page flicker

  • Large images slow page loading

HTML Image Maps

Clickable areas on an image

Step 1: Add usemap to <img>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

Step 2: Define the map with <map> and a name matching usemap

<map name="workmap">
<area shape="rect" coords="34,44,270,350" href="computer.htm" alt="Computer">
<area shape="circle" coords="337,300,44" href="coffee.htm" alt="Coffee">
<area shape="poly" coords="140,121,181,116,204,160,..." href="croissant.htm" alt="Croissant">
</map>

Shapes for <area>:

  • rect → rectangle, coords="x1,y1,x2,y2"

  • circle → circle, coords="centerX,centerY,radius"

  • poly → polygon, coords="x1,y1,x2,y2,..."

  • default → entire image

Step 3: Optional JavaScript on click

<area shape="circle" coords="337,300,44" href="coffee.htm" onclick="alert('Clicked!')">

HTML Background Images

Add a background image using CSS:

  • Inline:

<p style="background-image: url('img_girl.jpg');">Text</p>

  • Internal CSS:

<style>
body { background-image: url('img_girl.jpg'); }
</style>

Prevent repeating:

background-repeat: no-repeat;

Cover entire element without stretching:

background-size: cover;
background-attachment: fixed;

Stretch to fill element:

background-size: 100% 100%;

HTML <picture> Element

Display different images for different devices/screen sizes:

<picture>
<source media="(min-width:650px)" srcset="img_food.jpg">
<source media="(min-width:465px)" srcset="img_car.jpg">
<img src="img_girl.jpg" alt="Girl">
</picture>

Use cases:

  1. Save bandwidth for small devices.

  2. Browser format support (choose supported image type).

Always include an <img> fallback as the last child.

HTML Favicon

Add a small icon in the browser tab:

<head>
<title>My Page</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>

Supported formats: ICO, PNG, GIF, JPEG, SVG (all modern browsers).
Tips: Simple, high-contrast, small image works best.

HTML Tables

Basic Table Structure:

<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
</table>

  • <tr> → table row

  • <td> → table cell

  • <th> → table header (bold & centered by default)

  • <caption> → table caption

Table Borders:

table, th, td {
border: 1px solid black;
border-collapse: collapse; /* merge double borders */
}

Border styles & color:

border-style: dotted; /* dotted, dashed, solid, double, etc. */
border-color: #96D4D4;
border-radius: 10px; /* rounded corners */

Table Size:

  • Table width: <table style="width:100%">

  • Column width: <th style="width:70%">

  • Row height: <tr style="height:200px">

Table Headers:

  • Vertical headers: first <th> in each row

  • Left-align headers: th { text-align:left; }

  • Header spanning multiple columns: colspan="2"

Example Caption:

<table style="width:100%">
<caption>Monthly Savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

 HTML Table Padding & Spacing

  • Cell Padding: space between cell content and cell edge.

th, td { padding: 15px; }
/* or individually */
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}

  • Cell Spacing: space between cells (border-spacing).

table { border-spacing: 30px; }

HTML Table Styling

  • Horizontal Zebra Stripes:

tr:nth-child(even) { background-color: #D6EEEE; }

  • Vertical Zebra Stripes:

td:nth-child(even), th:nth-child(even) { background-color: #D6EEEE; }

  • Combined Zebra (transparent):

tr:nth-child(even) { background-color: rgba(150,212,212,0.4); }
th:nth-child(even), td:nth-child(even) { background-color: rgba(150,212,212,0.4); }

  • Horizontal Dividers:

tr { border-bottom: 1px solid #ddd; }

  • Hoverable Table Rows:

tr:hover { background-color: #D6EEEE; }

HTML Lists

  • Unordered List (<ul>):

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

  • Ordered List (<ol>):

<ol type="A" start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Types: 1 (numbers), A (uppercase letters), a (lowercase letters), I (uppercase Roman), i (lowercase Roman).

  • Description List (<dl>):

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

  • Nested Lists: lists inside <li> items.

  • Horizontal List (CSS):

ul { list-style-type:none; overflow:hidden; background-color:#333; }
li { float:left; }
li a { display:block; color:white; text-align:center; padding:16px; text-decoration:none; }
li a:hover { background-color:#111; }

  • List Style Markers (list-style-type): disc, circle, square, none.

HTML Block and Inline Elements

  • Block-level: starts on new line, full width (<div>, <p>, <h1>–<h6>, <table>, <section>, etc.)

  • Inline: does not start on new line, only as wide as needed (<span>, <a>, <img>, <strong>, <em>, <input>, etc.)

  • Notes: Inline elements cannot contain block-level elements.

  • Example:

<div style="background:black; color:white; padding:20px;">
<h2>London</h2>
<p>Capital city of England</p>
</div>

<p>My mother has <span style="color:blue; font-weight:bold">blue</span> eyes.</p>

HTML Class Attribute

  • Assign a class to elements to style multiple elements the same way.

<div class="city">London</div>
<div class="city">Paris</div>

  • CSS:

.city { background-color: tomato; color:white; padding:20px; }

  • Multiple Classes: <div class="city main"> → applies styles from both classes.

  • JavaScript Access: document.getElementsByClassName("city")

HTML id Attribute

  • Unique identifier for a single element.

<h1 id="myHeader">My Header</h1>

  • CSS: #myHeader { background-color: lightblue; }

  • JavaScript Access: document.getElementById("myHeader")

  • Bookmarks: link to id: <a href="#myHeader">Go to Header</a>

  • Class vs ID: class = multiple elements, id = unique element.

HTML Iframes

  • Embed a page within a page:

<iframe src="demo.html" title="Demo" width="300" height="200" style="border:none;"></iframe>

  • Target a link to iframe:

<iframe name="frame1"></iframe>
<a href="page.html" target="frame1">Open in iframe</a>

HTML JavaScript

  • Add scripts with <script> tag:

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

  • Change styles dynamically:

document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.fontSize = "25px";

  • Change attributes:

document.getElementById("image").src = "picture.gif";

  • Fallback for browsers without JS:

<noscript>Sorry, your browser does not support JavaScript!</noscript>

HTML File Paths

  • Relative Paths: Relative to the current file/folder:

    • Same folder: <img src="picture.jpg">

    • Subfolder: <img src="images/picture.jpg">

    • Parent folder: <img src="../picture.jpg">

  • Absolute Paths: Full URL:

    • <img src="https://example.com/images/picture.jpg">

HTML <head> Element (#32)

  • Purpose: Contains metadata (not displayed).

  • Common Elements:

    • <title> – Page title (required, important for SEO)

    • <style> – Internal CSS

    • <link> – External CSS

    • <meta> – Charset, description, keywords, author, viewport

    • <script> – JavaScript

    • <base> – Default URL/target for relative links

  • Viewport: Essential for responsive design:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML Layout Elements

  • Semantic structure:

    • <header>, <nav>, <section>, <article>, <aside>, <footer>, <details>, <summary>

  • Layout techniques:

    • CSS frameworks

    • CSS float, flexbox, grid

Responsive Web Design

  • Adjust content for all devices.

  • Techniques:

    • Responsive images (max-width:100%; height:auto;)

    • <picture> element for different images

    • Responsive text using vw

    • Media queries for breakpoints

Computer Code Elements

  • <kbd> – Keyboard input

  • <samp> – Program output

  • <code> – Inline code

  • <pre> – Preformatted text

  • <var> – Variables

Semantic Elements

  • Semantic = meaningful to browser & developer

  • Examples: <article>, <section>, <header>, <footer>, <nav>, <aside>, <figure>, <figcaption>

HTML Style Guide

  • Always declare <!DOCTYPE html>

  • Use lowercase for tags & attributes

  • Close all elements

  • Quote attribute values

  • Specify alt, width, height for images

  • Indent & format for readability

  • Include <title> and <meta charset> early

  • Add lang attribute to <html>

HTML Entities

  • Reserved characters:

    • < → &lt; or &#60;

    • > → &gt; or &#62;

    • Non-breaking space: &nbsp;

  • Diacritics & other special characters can be represented with numeric entities.

HTML Symbols

  • Math symbols, Greek letters, and currency signs:

    • &Alpha; → Α

    • &copy; → ©

    • &euro; → €

Using Emojis in HTML

  • Emojis are UTF-8 characters, not images.

  • Use numeric entities:

    &#128512; <!-- 😀 -->

  • Emojis can be resized with CSS (font-size).

HTML Forms

<form> Element

  • Container for user input elements (text fields, checkboxes, radio buttons, buttons, etc.).

  • Syntax:

<form>
<!-- form elements -->
</form>

<input> Element

  • Most used form element.

  • Types:
    | Type | Description |
    |————|————-|
    | text | Single-line text input |
    | radio | Radio button (choose one) |
    | checkbox | Checkbox (choose zero or more) |
    | submit | Submit button |
    | button | Clickable button |

Example – Text Fields

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

<label> Element

  • Provides accessibility for screen readers.

  • Clicking the label toggles radio/checkbox input.

  • Use for attribute = input id.

Radio Buttons

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
</form>

Checkboxes

<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1">I have a bike</label>
</form>

Submit Button

  • Sends form data to server.

  • Example:

<form action="/action_page.php">
<input type="submit" value="Submit">
</form>

Name Attribute

  • Input must have name to submit data; otherwise value is ignored.

HTML Canvas Graphics

  • <canvas>: container for graphics; drawing done via JavaScript.

  • Syntax:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>

Examples

  • Draw line:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

  • Draw circle:

ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2*Math.PI);
ctx.stroke();

  • Stroke text:

ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

  • Linear & Circular Gradients:

var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);

  • Draw image:

var img = document.getElementById("scream");
ctx.drawImage(img,10,10);

HTML Video

  • <video> element displays video.

  • Example:

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

  • Attributes:

    • controls: show play/pause/volume

    • autoplay, muted

    • width & height recommended

  • Supported formats: MP4, WebM, Ogg

HTML Audio

  • <audio> element plays audio.

  • Example:

<audio controls autoplay muted>
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

  • Supported formats: MP3, WAV, OGG

HTML Plug-ins

  • <object> & <embed> elements embed external content (like PDFs, images, HTML files).

  • <object> example:

<object width="100%" height="500px" data="snippet.html"></object>

  • <embed> example:

<embed src="audi.jpeg">

  • Most old plug-ins (Java applets, Flash, ActiveX) are no longer supported.

HTML URLs

  • Uniform Resource Locator (URL): web address.

  • Syntax:

scheme://prefix.domain:port/path/filename

  • Example:

https://www.example.com:443/folder/file.html

  • Common schemes:

    • http, https, ftp, file

  • URL encoding:

    • Converts non-ASCII characters to % + hex digits

    • Spaces → %20 or +

    • Default charset in HTML5: UTF-8