Chapter 4 : - HTML
What is HTML?
HTML is a markup language for describing web documents (web pages).
HTML stands for Hyper Text Markup Language
A markup language is a set of markup tags
HTML documents are described by HTML tags
Each HTML tag describes different document content
HTML Example
A small HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
The DOCTYPE declaration defines the document type to be HTML
The text between <html> and </html> describes an HTML document
The text between <head> and </head> provides information about the document
The text between <title> and </title> provides a title for the document
The text between <body> and </body> describes the visible page content
The text between <h1> and </h1> describes a heading
The text between <p> and </p> describes a paragraph
Using this description, a web browser can display a document with a heading and a paragraph.
1
HTML Tags
HTML tags are keywords (tag names) surrounded by angle brackets:
<tagname>content</tagname>
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, but with a slash before the tag name
The start tag is often called the opening tag. The end tag is often called the closing tag.
Web Browsers
The purpose of a web browser (Chrome, IE, Firefox) is to read HTML documents and display
them.
The browser does not display the HTML tags, but uses them to determine how to display the
document:
2
HTML Page Structure
Below is a visualization of an HTML page structure:
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
HTML Headings
HTML headings are defined with the <h1> to <h6> tags:
Example
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Example
3
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
HTML links are defined with the <a> ie anchor tag:
Example
<a href="http://www.google.com">This is a link</a>
The link address is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), and size (width and height) are provided as
attributes:
Example
<img src="winter.jpg" alt="google.com" width="104" height="142">
HTML Tables
4
HTML Table Example
First Name Last Name Points
1 Eve Jackson 94
2 John Doe 80
3 Adam Johnson 67
4 Jill Smith 50
Defining HTML Tables
Example
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Example explained:
5
Tables are defined with the <table> tag.
Tables are divided into table rows with the <tr> tag.
Table rows are divided into table data with the <td> tag.
A table row can also be divided into table headings with the <th> tag.
Table data <td> are the data containers of the table.
They can contain all sorts of HTML elements like text, images, lists, other tables, etc.
An HTML Table with a Border Attribute
If you do not specify a border for the table, it will be displayed without borders.
A border can be added using the border attribute:
Example
<table border="1" style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
HTML Table Tags
Tag Description
6
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
HTML Text Formatting Elements
Text Formatting
This text is bold
This text is italic
This text is italic
This is superscript
HTML Formatting Elements
In the previous chapter, you learned about HTML styling, using the HTML style attribute.
HTML also defines special elements, for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
Formatting elements were designed to display special types of text:
Bold text
Underline text
Italic text
Emphasized text
Marked text
Small text
Deleted text
7
Inserted text
Subscripts
Superscripts
HTML Bold and Strong Formatting
The HTML <b> element defines bold text, without any extra importance.
Example
<p>This text is normal.</p>
<p><b>This text is bold</b>.</p>
The HTML <strong> element defines strong text, with added semantic "strong" importance.
Example
<p>This text is normal.</p>
<p><strong>This text is strong</strong>.</p>
HTML Italic and Emphasized Formatting
The HTML <i> element defines italic text, without any extra importance.
Example
<p>This text is normal.</p>
<p><i>This text is italic</i>.</p>
8
The HTML <em> element defines emphasized text, with added semantic importance.
Example
<p>This text is normal.</p>
<p><em>This text is emphasized</em>.</p>
Browsers display <strong> as <b>, and <em> as <i>.
However, there is a difference in the meaning of these tags: <b> and <i> defines bold and italic
text,
but <strong> and <em> means that the text is "important".
HTML Small Formatting
The HTML <small> element defines small text:
Example
<h2>HTML <small>Small</small> Formatting</h2>
HTML Marked Formatting
The HTML <mark> element defines marked or highlighted text:
Example
<h2>HTML <mark>Marked</mark> Formatting</h2>
HTML Deleted Formatting
The HTML <del> element defines deleted (removed) of text.
9
Example
<p>My favorite color is <del>blue</del> red.</p>
HTML Inserted Formatting
The HTML <ins> element defines inserted (added) text.
Example
<p>My favorite <ins>color</ins> is red.</p>
HTML Subscript Formatting
The HTML <sub> element defines subscripted text.
Example
<p>This is <sub>subscripted</sub> text.</p>
HTML Superscript Formatting
The HTML <sup> element defines superscripted text.
Example
<p>This is <sup>superscripted</sup> text.</p>
10
Definition and Usage
The <font> tag specifies the font face, font size, and color of text.
<font size="3" color="red">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>
11
