Scribd
Upload
59 views11 pages

Chapter 4: - HTML

HTML is a markup language used to define the structure and layout of web pages. HTML uses tags like <h1> for headings and <p> for paragraphs that are ignored by browsers but help display and structure content. A basic HTML page includes <html>, <head>, and <body> tags and provides document structure, title, and visible content. Common text styles are defined with tags like <b> for bold, <i> for italic, and <strong> for important text. Tables are defined with <table>, <tr>, and <td> tags to organize data in rows and cells.

Uploaded by

Maitri Shah
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
59 views11 pages

Chapter 4: - HTML

HTML is a markup language used to define the structure and layout of web pages. HTML uses tags like <h1> for headings and <p> for paragraphs that are ignored by browsers but help display and structure content. A basic HTML page includes <html>, <head>, and <body> tags and provides document structure, title, and visible content. Common text styles are defined with tags like <b> for bold, <i> for italic, and <strong> for important text. Tables are defined with <table>, <tr>, and <td> tags to organize data in rows and cells.

Uploaded by

Maitri Shah
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 11

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

You might also like