HTML Notes

HTML(HYPERTEXT MARKUP LANGUAGE)
HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to develop web pages.
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.
key advantages of learning HTML:

• Create Web site - You can create a website or customize an existing web template if you know HTML well.
• Become a web designer - If you want to start a carrer as a professional web designer, HTML and CSS designing is a
must skill.
• Understand web - If you want to optimize your website, to boost its speed and performance, it is good to know HTML
to yield best results.
• Learn other languages - Once you understands the basic of HTML then other related technologies like javascript,
php, or angular are become easier to understand.
HTML tags begin with the less-than (<) character and end with greater-than (>). These symbols are also called "angle
brackets."
HTML TAGS
An HTML comment: <!-->
The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers. You can use
comments to explain your code, which can help you when you edit the source code at a later date.
Heading Tags
Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings,
which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>
Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an
opening <p> and a closing </p> tag as shown below in the example −
<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 <br /> 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.
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>
Centering Content
You can use <center> 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>
Horizontal Lines
Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a line from the current position
in the document to the right margin and breaks the line accordingly.
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
Bold Text
Anything that appears within <b>...</b> element, is displayed in bold as shown below −
html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>
Italic Text
Anything that appears within <i>...</i> element is displayed in italicized as shown below.
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses an <i>italicized</i> typeface.</p>
</body>
</html>
Underlined Text
Anything that appears within <u>...</u> element, is displayed with underline as shown below −
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses an <u>underlined</u> typeface.</p>
</body>
</html>
Strike Text
Anything that appears within <strike>...</strike> element is displayed with strikethrough, which is a thin line through the
text as shown below −
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>
Superscript Text
The content of a <sup>...</sup> element is written in superscript; the font size used is the same size as the characters
surrounding it but is displayed half a character's height above the other characters.
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>
Inserted Text
Anything that appears within <ins>...</ins> element is displayed as inserted text.
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>
Deleted Text
Anything that appears within <del>...</del> element, is displayed as deleted text
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>
Larger Text
The content of the <big>...</big> element is displayed one font size larger than the rest of the text surrounding it as shown
below −
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>
Smaller Text
The content of the <small>...</small> element is displayed one font size smaller than the rest of the text surrounding it as
shown below −
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
Grouping Content
The <div> and <span> elements allow you to group together several elements to create sections or subsections of a
page.
Emphasized Text
Anything that appears within <em>...</em> element is displayed as emphasized text.

<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>The following word uses an <em>emphasized</em> typeface.</p>
</body>
</html>
Marked Text
Anything that appears with-in <mark>...</mark> element, is displayed as marked with yellow ink.
<html>
<head>
<title>Marked Text Example</title>
</head>
<body>
<p>The following word has been <mark>marked</mark> with yellow</p>
</body>
</html>
Strong Text
Anything that appears within <strong>...</strong> element is displayed as important text.
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
<p>The following word uses a <strong>strong</strong> typeface.</p>
</body>
</html>
Text Abbreviation
You can abbreviate a text by putting it inside opening <abbr> and closing </abbr> tags. If present, the title attribute must
contain this full description and nothing else.
<html>
<head>
<title>Text Abbreviation</title>
</head>
<body>
<p>My best friend's name is <abbr title = "Abhishek">Abhy</abbr>.</p>
</body>
</html>
Short Quotations
The <q>...</q> element is used when you want to add a double quote within a sentence.
The bgcolor attribute is used to control Text Citations.

If you are quoting a text, you can indicate the source placing it between an opening <cite> tag and closing </cite> tag
Html Background with Colors
the background of an HTML element, specifically page body and table backgrounds.
Colors are very important to give a good look and feel to your website. You can specify colors on page level using <body> tag
or you can set colors for individual tags using bgcolor attribute.
The <body> tag has following attributes which can be used to set different colors −
• bgcolor − sets a color for the background of the page.
• text − sets a color for the body text.
• alink − sets a color for active links or selected links.
• link − sets a color for linked text.
• vlink − sets a color for visited links − that is, for linked text that you have already clicked on.
• W3C Standard 16 Colors
• Here is the list of W3C Standard 16 Colors names and it is recommended to use them.
Font Size
You can set content font size using size attribute. The range of accepted values is from 1(smallest) to 7(largest). The default
size of a font is 3.
<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<font size = "1">Font size = "1"</font><br />
<font size = "7">Font size = "7"</font>
</body>
</html>
Setting Font Face
You can set font face using face attribute but be aware that if the user viewing the page doesn't have the font installed, they
will not be able to see it. Instead user will see the default font face applicable to the user's computer.
<html>
<head>
<title>Font Face</title>
</head>
<body>
<font face = "Times New Roman" size = "5">Times New Roman</font><br />
<font face = "Verdana" size = "5">Verdana</font><br />
<font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
<font face = "WildWest" size = "5">WildWest</font><br />
<font face = "Bedrock" size = "5">Bedrock</font><br />
</body>
</html>
Setting Font Color

You can set any font color you like using color attribute. You can specify the color that you want by either the color name or
hexadecimal code for that color.
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font color = "#FF00FF">This text is in pink</font><br />
<font color = "red">This text is red</font>
</body>
</html>
Insert Image
You can insert any image in your web page by using <img> tag. Following is the simple syntax to use this tag.
<img src = "Image URL" ... attributes-list/>
The <img> tag is an empty tag, which means that, it can contain only list of attributes and it has no closing tag.
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>
Set Image Location
<html>
<head>
</head>
<body>
</body>
</html>
Usually we keep all the images in a separate directory. So let's keep HTML file test.htm in our home directory and create a
subdirectory images inside the home directory where we will keep our image test.png.
html>
<head>
</head>
<body>
</body>
</html>
Set Image Width/Height

You can set image width and height based on your requirement using width and height attributes. You can specify width
and height of the image in terms of either pixels or percentage of its actual size.
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
</body>
</html
Set Image Border

By default, image will have a border around it, you can specify border thickness in terms of pixels using border attribute. A
thickness of 0 means, no border around the picture.
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
</body>
</html>
Set Image Alignment

By default, image will align at the left side of the page, but you can use align attribute to set it in the center or right.
<hTml>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
</body>
</html>
The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to
create data cells. The elements under <td> are regular and left aligned by default
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Here, the border is an attribute of <table> tag and it is used to put a border across all the cells. If you do not need a border,
then you can use border = "0".
Table Heading
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to represent actual data
cell. Normally you will put your top row as table heading as shown below, otherwise you can use <th> element in any row.
Headings, which are defined in <th> tag are centered and bold by default.
Cellpadding and Cellspacing Attributes

There are two attributes called cellpadding and cellspacing which you will use to adjust the white space in your table cells.
The cellspacing attribute defines space between table cells, while cellpadding represents the distance between cell borders
and the content within a cell.
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Colspan and Rowspan Attributes
You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will
use rowspan if you want to merge two or more rows.
html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Tables Backgrounds
You can set table background using one of the following two ways −
• bgcolor attribute − You can set background color for whole table or just for one cell.
• background attribute − You can set background image for whole table or just for one cell.
You can also set border color also using bordercolor attribute.
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
</tr>
<tr>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
Table Height and Width

You can set a table width and height using width and height attributes. You can specify table width or height in terms of
pixels or in terms of percentage of available screen area.
html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
Table Caption
The caption tag will serve as a title or explanation for the table and it shows up at the top of the table. This tag is deprecated
in newer version of HTML/XHTML.
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>
Table Header, Body, and Footer

Tables can be divided into three portions − a header, a body, and a foot. The head and foot are rather similar to headers and
footers in a word-processed document that remain the same for every page, while the body is the main content holder of the
table.
The three elements for separating the head, body, and foot of a table are −
• <thead> − to create a separate table header.
• <tbody> − to indicate the main body of the table.
• <tfoot> − to create a separate table footer.
A table may contain several <tbody> elements to indicate different pages or groups of data. But it is notable that <thead> and
<tfoot> tags should appear before <tbody>
HTML offers web authors three ways for specifying lists of information. All lists must contain one or more list elements. Lists
may contain −
• <ul> − An unordered list. This will list items using plain bullets.
• <ol> − An ordered list. This will use different schemes of numbers to list your items.
• <dl> − A definition list. This arranges your items in the same way as they are arranged in a dictionary.
HTML Unordered Lists
An unordered list is a collection of related items that have no special order or sequence. This list is created by using
HTML <ul> tag. Each item in the list is marked with a bullet.
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
The type Attribute

You can use type attribute for <ul> tag to specify the type of bullet you like. By default, it is a disc. Following are the possible
options −
<ul type = "square">
<ul type = "disc">
<ul type = "circle">
Following is an example where we used <ul type = "square">
<html>
<head>
<title>HTML Unordered List</title>
</head
<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
HTML Ordered Lists

If you are required to put your items in a numbered list instead of bulleted, then HTML ordered list will be used. This list is
created by using <ol> tag. The numbering starts at one and is incremented by one for each successive ordered list element
tagged with <li>.
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body></HTML>
The type Attribute

You can use type attribute for <ol> tag to specify the type of numbering you like. By default, it is a number. Following are the
possible options −
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.
<html>
<head>
</head>
<body>
<ol type = "1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
The start Attribute

You can use start attribute for <ol> tag to specify the starting point of numbering you need. Following are the possible
options −
<ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.
Following is an example where we used <ol type = "i" start = "4" >
<html
<head>
</head>
<body>
<ol type = "i" start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
HTML Definition Lists

HTML and XHTML supports a list style which is called definition lists where entries are listed like in a dictionary or
encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other name/value list.
Definition List makes use of following three tags.
• <dl> − Defines the start of the list

• <dt> − A term
• <dd> − Term definition
• </dl> − Defines the end of the list
• <html>
• <head>
• <title>HTML Definition List</title>
• </head>
• <body>
• <dl>
• <dt><b>HTML</b></dt>
• <dd>This stands for Hyper Text Markup Language</dd>
• <dt><b>HTTP</b></dt>
• <dd>This stands for Hyper Text Transfer Protocol</dd>
• </dl>
• </body>
• </html>
An HTML marquee is a scrolling piece of text displayed either horizontally across or vertically down your webpage
depending on the settings. This is created by using HTML <marquees> tag.
Syntax
A simple syntax to use HTML <marquee> tag is as follows −
<marquee attribute_name = "attribute_value"....more attributes>

One or more lines or text message or image
</marquee>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
</body>
</html>
HTML Email Tag

HTML <a> tag provides you option to specify an email address to send an email. While using <a> tag as an email tag, you will
use mailto: email address along with href attribute. Following is the syntax of using mailto instead of using http.
<a href = "mailto: [email protected]">Send Email</a>
Linking Documents
A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the opening <a> tag and the closing </a> tag
becomes part of the link and a user can click that part to reach to the linked document. Following is the simple syntax to use <a> tag.
<a href = "Document URL" ... attributes-list>Link Text</a>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://www.tutorialspoint.com" target = "_self">Tutorials Point</a>
</body>
</html>

HTML Notes

Uploaded by

Copyright:

Available Formats

HTML Notes

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Notes

Uploaded by

Copyright:

Available Formats

HTML(HYPERTEXT MARKUP LANGUAGE)

key advantages of learning HTML:

An HTML comment: <!-->

Line Break Tag

Anything that appears within <em>...</em> element is displayed as emphasized text.

The bgcolor attribute is used to control Text Citations.

Setting Font Color

Set Image Location

Set Image Width/Height

Set Image Border

Set Image Alignment

Cellpadding and Cellspacing Attributes

Colspan and Rowspan Attributes

Table Height and Width

Table Header, Body, and Footer

The type Attribute

HTML Ordered Lists

The type Attribute

The start Attribute

HTML Definition Lists

• <dl> − Defines the start of the list

A simple syntax to use HTML <marquee> tag is as follows −

<marquee attribute_name = "attribute_value"....more attributes>

HTML Email Tag

You might also like