HTML 101
Web Programming Course
SUT • Fall 2019
TOC
- History
- How?
- Basics
- DOCTYPE
- <html>, <head> & <body>
- Nesting Elements
- Empty Elements
- Block-level & Inline Elements
- Attributes
- Comments
- Whitespace
- Entities
- Elements (part I)
- Global Attributes
- Elements (part II)
- Validation
History
Image © CERN
Web technologies invented by
Sir Tim Berners-Lee at CERN
- HTML
- URI
- HTTP
(more)
How?
WHAT TOOLS DO YOU NEED?
- A text editor; a program that allows you to edit plain text files. (Notepad++, Sublime Text, VS Code, Brackets, etc.)
- A web browser; that’s the application you use to view web sites. (Chrome, Firefox, Safari, or Opera.)
Anatomy
Markup NOT a programming language
Image © MDN
Anatomy
Structure
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<p>My cat is <strong>very</strong> grumpy.</p>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html>
Online Demo
Basics
DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>
HTML5
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Transitional
More on Wikipedia
Basics
<html>
, <head>
and <body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<!-- visible content goes here... --->
<p>My cat is <strong>very</strong> grumpy.</p>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html>
Basics
<head> contains info and metadata of the page
More on MDN
- Page title <title>
- Internal Style <style>
- External Stylesheet <link>
- Character Set <meta charset>
- JavaScript <script>
- ...
Basics
Nesting elements
<!-- Valid HTML -->
<p>My cat is <strong>very</strong> grumpy.</p>
<!-- Invalid HTML -->
<p>My cat is <strong>very grumpy.</p></strong>
<img src="images/firefox-icon.png" alt="My test image">
<!-- horizontal line -->
<hr>
<!-- a line break in text -->
<p> The HTML <br> element produces a line break in text</p>
Empty elements
Basics
<!-- inline elements are placed on the baseline
beside each other -->
<a href="..."> link </a>
<strong> an important thing </strong>
<!-- block-level elements take their
parent horizontal space -->
<p> paragraphs are block-level elements </p>
Elements' Levels
Basics
Attributes
<!DOCTYPE html>
<html dir="ltr" lang="en">
<body>
<img src="images/firefox-icon.png" alt="My test image">
<!--
src: the image source
alt: an alternative text for the image
-->
<a href=https://www.google.com/ target=_blank>Google</a>
<!--
href: the link url address
target: where to display
-->
</body>
</html>
More on MDN
Basics
Comments
<!-- this is a comment -->
Online Demo
Whitespace
<p>Dogs are silly.</p>
<!-- IS equal to: -->
<p>Dogs are
silly.</p>
<!-- But not for the <pre> element -->
<pre>Dogs are
silly.</pre>
Basics
Entities
<p>
In HTML, you define a paragraph
using the <p> element.
</p>
More on Wikipedia
In HTML, the characters <
, >
,"
,'
and &
are special characters.
Character | Reference |
---|---|
< | < |
> | > |
" | " |
' | ' |
& | & |
|
In HTML, you define a paragraph using the <p> element.
Elements (part I)
Headings
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
More on MDN
Elements (part I)
Paragraphs
<h1>The Crushing Bore</h1>
<p>By Chris Mills</p>
<h2>Chapter 1: The dark night</h2>
<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p>
<h2>Chapter 2: The eternal silence</h2>
<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p>
<h3>The specter speaks</h3>
<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p>
More on MDN
Elements (part I)
Paragraphs - Live Demo
More on MDN
Elements (part I)
Text formatting
More on MDN
<!-- emphasis -->
<p>I am <em>glad</em> you weren't <em>late</em>.</p>
<!-- strong importance -->
<p>This liquid is <strong>highly toxic</strong>.</p>
<p>I am counting on you. <strong>Do not</strong> be late!</p>
<!-- HTML5 redefined <b>, <i> and <u> with new, somewhat confusing, semantic roles. -->
<!-- scientific names -->
<p>
The Ruby-throated Hummingbird (<i>Archilochus colubris</i>)
is the most common hummingbird in Eastern North America.
</p>
Elements (part I)
Lists - Unordered
More on MDN
<ul>
<li>milk</li>
<li>eggs</li>
<li>bread</li>
<li>hummus</li>
</ul>
- milk
- eggs
- bread
- hummus
Elements (part I)
Unordered List - Live Demo
More on MDN
Elements (part I)
Lists - Ordered
More on MDN
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ol>
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
Elements (part I)
Nested Lists
More on MDN
Online Demo
<ol>
<li>Main Item 1</li>
<li>Main Item 2</li>
<li>Main Item 3</li>
<li>Main Item 4
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
</ol>
- Main Item 1
- Main Item 2
- Main Item 3
- Main Item 4
- Sub Item 1
- Sub Item 2
Elements (part I)
Links
More on MDN
<p>
I'm creating a link to
<a href="https://www.mozilla.org/en-US/"
title="The best place to find
more information about Mozilla's
mission and how to contribute">the Mozilla homepage
</a>.
</p>
I'm creating a link to the Mozilla homepage.
Elements (part I)
Images
More on MDN
<img src="images/dinosaur.jpg"
alt="The head and torso of a dinosaur skeleton;
it has a large head with long sharp teeth"
width="400"
height="341"
title="A T-Rex on display in the Manchester University Museum">
Global Attributes
Global attributes may be specified on all HTML elements
More on MDN
<!-- dir specifies the direction of contents -->
<html dir="rtl"> ... </html>
<!-- id should be unique in the document -->
<table id="top-rated-products"> ... </table>
<!-- title contains information related to the element -->
<a href="..." title="more info on this link"> ... </a>
<!-- class attribute values are separated w/ whitespace -->
<p class="paragraph small gray"> ... </p>
<!-- style is used to set inline CSS -->
<p style="font-size: 14px; color: gray"> ... </p>
Elements (part II)
Tables
<table>
<thead>
<tr>
<th>Header content 1</th>
<th>Header content 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Body content 1</td>
<td>Body content 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer content 1</td>
<td>Footer content 2</td>
</tr>
</tfoot>
</table>
Header content 1 | Header content 2 |
---|---|
Body content 1 | Body content 2 |
Footer content 1 | Footer content 2 |
Elements (part II)
Forms
See Forms on MDN
<form action="/my-handling-form-page" method="post">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" name="user_mail">
</div>
<div>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message"></textarea>
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
HTML Validator
Try Online
HTML 101
By Behnam Hatami
HTML 101
HTML 101 / Web Programming Course @ SUT, Fall 2018
- 1,644