HTML
Introduction:
HTML stands for Hyper Text Markup Language. It is the standard markup
language for creating Web pages. It describes the structure of a Web page. It
consists of a series of [Link] elements tell the browser how to display
the [Link]’s elements label pieces of content such as this is a heading, this
is a paragraph, this is a link, etc.
HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first
standard HTML specification which was published in 1995. HTML 4.01 was a
major version of HTML and it was published in late 1999. Though HTML 4.01
version is widely used but currently we are having HTML-5 version which is an
extension to HTML 4.01, and this version was published in 2012.
Sample Example:
<!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 html> declaration defines that this document is an
HTML5 document.
The <html> element is the root element of an HTML page.
The <head> element contains meta information about the HTML page.
The <title> element specifies a title for the HTML page (which is shown
in the browser's title bar or in the page's tab).
The <body> element defines the document's body, and is a container for
all the visible contents, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.
The <h1> element defines a large heading.
The <p> element defines a paragraph.
HTML Element:
An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Start Tag Element Content End Tag
<h1> My First Heading </h1>
<p> My First Paragraph </p>
<br> Break Line nill
Note: Some HTML elements have no content (like the <br> element). These
elements are called empty elements. Empty elements do not have an end tag.
Web Browser:
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML
documents and display them correctly.A browser does not display the HTML
tags, but uses them to determine how to display the document.
HTML History:
Since the early days of the World Wide Web, there have been many versions of
HTML:
Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
2017 W3C Recommendation: HTML5.2
This tutorial follows the latest HTML5 standard.
HTML Basics
HTML Documents:
All HTML documents must start with a document type declaration: <!DOCTYPE
html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body
The <!DOCTYPE> declaration represents the document type, and helps
browsers to display web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>
HTML Heading:
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important
heading:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
HTML Paragraph:
The tag offers a way to structure your text into different paragraphs. Each paragraph of text
should go in between an opening and a closing tag.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of
text.</p>
<p>Here is a second paragraph of
text.</p>
<p>Here is a third paragraph of
text.</p>
</body>
</html>
Line Break Tag:
Whenever you use the element, anything following it starts from the next line.
This tag is an example of an empty element, where you do not need opening
and closing tags, as there is nothing to go in between them. The tag has a space
between the characters br and the forward slash. If you omit this space, older
browsers will have trouble rendering the line break, while if you miss the
forward slash character and just use it is not valid in XHTML.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment on
time.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>
Centering Content:
You can use tag to put any content in the center of the page or any table cell.
<!DOCTYPE html>
<html>
<head>
<title>Centring Content
Example</title>
</head>
<body>
<p>This text is not in the
center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
HTML Tag vs. Element:
An HTML element is defined by a starting tag. If the element contains other
content, it ends with a closing tag. For example,
<p>is starting tag of a paragraph and </p> is closing tag of the same paragraph
but <p>This is paragraph</p> is a paragraph element.
HTML Links:
HTML links are defined with the <a> tag:
Example:
<a href="[Link] is a link</a>
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
You will learn more about attributes in a later chapter.
HTML Images:
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as
attributes:
Examples:
<img src="[Link]" alt="[Link]" width="104" height="142">
HTML is not Case Sensitive:
HTML tags are not case sensitive: <P> means the same as <p>.
The HTML standard does not require lowercase tags, but
W3C recommends lowercase in HTML, and demands lowercase for stricter
document types like XHTML.
Grouping Content:
The <div> and <span> elements allow you to group together several elements to create
sections or subsections of a page.
For example:
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id="menu" align="middle" >
<a href="/[Link]">HOME</a> |
<a
href="/about/contact_us.htm">CONTACT</
a> |
<a href="/about/[Link]">ABOUT</a>
</div>
<div id="content" align="left"
bgcolor="white">
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>
Formating Tags
Bold:
Text Anything that appears within <b>-------</b> element, is displayed in bold
as shown.
Italic:
Anything that appears within <i>.....</i> element is displayed in italicized as
shown.
Underline:
Anything that appears within <u>……..</u> element, is displayed with
underline as shown.
Strike:
Text Anything that appears within <strike>…….</strike> element is displayed
with strikethrough, which is a thin line through the text as shown.
Monospaced Font:
The content of a <tt>....</tt> element is written in monospaced font. Most of
the fonts are known as variable-width fonts because different letters are of
different widths (for example, the letter 'm' is wider than the letter 'i'). In a
monospaced font, however, each letter has the same width.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Formatting Tag
Example</title>
</head>
<body>
<p>The following word uses a
<b>bold</b> typeface.</p>
<p>The following word uses a
<i>italic</i> typeface.</p>
<p>The following word uses a
<u>underline</u> typeface.</p>
<p>The following word uses a
<Strike>strike</Strike>
typeface.</p>
<p>The following word uses a
<tt>Monospaced</tt> typeface.</p>
</body>
</html>
HTML LISTS
An HTML List allows you to organize data on web pages into an ordered or
unordered format to make the information easier to read and visually
appealing. HTML Lists are very helpful for creating structured, accessible
content in web development.
Types of HTML Lists
There are three main types of lists in HTML:
1. Unordered Lists (<ul>): These lists are used for items that do not need to
be in any specific order. The list items are typically marked with bullets.
2. Ordered Lists (<ol>): These lists are used when the order of the items is
important. Each item in an ordered list is typically marked with numbers
or letters.
3. Description Lists (<dl>): These lists are used to contain terms and their
corresponding descriptions.
HTML List Tags
Tag Description
<ul> Defines an unordered list.
<ol> Defines an ordered list.
<li> Defines a list item.
<dl> Defines a description list.
<dt> Defines a term in a description list.
<dd> Details the term in a description list.
1. Unordered List and Bullet List:
Unordered lists are ideal for scenarios where the sequence of the items
is not important.
The unordered list items are marked with bullets, also known as bulleted
lists. An unordered list starts with the <ul> tag, and each list item begins
with the <li> tag.
Syntax:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Grocery list</h2>
<ul>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>
</body>
</html>
2. Ordered List:
Ordered lists are used when the items need to follow a specific
sequence.
In an ordered list, all list items are marked with numbers by default. An
ordered list starts with the <ol> tag, and each list item begins with the
<li> tag.
Syntax:
<ol>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>
Attributes:
compact:
It defines the list should be compacted (compact attribute is not
supported in HTML5. Use CSS instead.).
reversed:
It defines that the order will be descending.
start:
It defines from which number or alphabet the order will start.
type:
It defines which type(1, A, a, I, and i) of the order you want in your list of
numeric, alphabetic, or roman numbers.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
</head>
<body>
<h1 style="color:
green">Langauges We
Learn</h1>
<h3>HTML ol tag</h3>
<p>reversed attribute</p>
<ol reversed>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<p>start attribute</p>
<ol start="1">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<p>type attribute</p>
<ol type="i">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
</body>
</html>
3. Description List:
A description list is a list of terms, with a description of each term.
Description lists are less common but very useful for definitions,
glossaries, or any other key-value pairs of items.
The <dl> tag defines the description list, the <dt> tag defines the term
name, and the <dd> tag describes each term.
Syntax:
<dl>
<dt>Item 1</dt>
<dd>Description of Item 1 </dd>
<dt>Item 2</dt>
<dd>Description of Item 2</dd>
</dl>
Here, <dt> (description term) is used for the term being defined, and
<dd> (description details) is used for the description.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
</head>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- 500 gms</dd>
<dt>Milk</dt>
<dd>- 1 ltr Tetra
Pack</dd>
</dl>
</body>
</html>
HTML Tables
Basic HTML Table Structure
An HTML table is created using the <table> tag. Inside the table, we use:
<tr>: Table Row
<th>: Table Header
<td>: Table Data
Each <tr> represents a row, and within each row, <th> and <td> tags
represent the cells in that row, which can contain text, images, lists, or even
another table.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Adil</td>
<td>Khan</td>
<td>22</td>
</tr>
<tr>
<td>Ali</td>
<td>Kazmi</td>
<td>19</td>
</tr>
<tr>
<td>Noman</td>
<td>Fareed</td>
<td>20</td>
</tr>
</table>
</body>
</html>
In this Example:
<table>: This tag starts the table. Everything between the opening <table>
and closing </table> tags makes up the table.
<tr>: Stands for "table row". Each <tr> tag defines a row in the table.
<th>: Stands for "table header". It's used for the headers of the columns.
In this case, "Firstname", "Lastname", and "Age" are headers. Text in <th>
tags is usually bold and centered by default.
<td>: Stands for "table data". This tag is used for actual data cells under
each column. For instance, "Priya" is the data under the "Firstname"
header, "Sharma" under the "Lastname", and "24" under the "Age".
The first <tr> has three <th> elements, setting up the column titles.
The subsequent <tr> tags contain three <td> elements, representing the
data for each person listed in the table.
When this HTML code is rendered in a web browser, it will display a table
with four rows (one header row plus three data rows) and three columns
(Firstname, Lastname, and Age), showing the names and ages of Priya, Arun,
and Sam.
HTML Tables Tags
Here, is the list of all the tags that we used in table formation in html.
Tag Description
<table> Defines the structure for organizing
data in rows and columns within a
web page.
<tr> Represents a row within an HTML
table containing individual cells.
<th> Shows a table header cell that
typically holds titles or headings.
<td> Represents a standard data cell,
holding content or data.
<caption> Provides a title or description for the
entire table.
<thead> Defines the header section of a table,
often containing column labels.
<tbody> Represents the main content area of
a table, separating it from the header
or footer.
<tfoot> Specifies the footer section of a table,
typically holding summaries or totals.
<col> Defines attributes for
table columns that can be applied to
multiple columns simultaneously.
<colgroup> Groups together a set of columns in a
table to which you can apply
formatting or properties collectively.
Another Example of an border spacing HTML Table:
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
</head>
<body>
<table>
<tr>
<th>Book
Name</th>
<th>Author
Name</th>
<th>Genre</th>
</tr>
<tr>
<td>Kahf</td>
<td>Hashim
Nadeem</td>
<td>Islamic
Fiction</td>
</tr>
<tr>
<td>Tinderbox</
td>
<td>M J
Akbar</td>
<td>Past/Future
of Pakistan</td>
</tr>
<tr>
<td>Mushaf</td>
<td>Nemrah
Ahmed</td>
<td>Islamic
Fiction</td>
</tr>
</table>
</body>
</html>
</body>
</html>
(THE END)
Best Of Luck
