Unit 2

E- Comm Subject Unit 2
UNIT 2
HTML
HTML Elements
An HTML element usually consists of a start tag and end tag, with the content inserted in
between:
<tagname>Content goes here...</tagname>

The HTML element is everything from the start tag to the end tag:
<p>My first paragraph.</p>

The <html> element defines the whole document.
It has a start tag <html> and an end tag </html>.
The element content is another HTML element (the <body> element).
HTML Attributes
 All HTML elements can have attributes
 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"
Basic Structure:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
All HTML documents must start with a document type declaration: <!DOCTYPE html>.
1
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
CODE:
<html>
<body>
<h1>This is heading 1</h1>
</body>
</html>
OUTPUT:
2
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
CODE:
<html>
<body>
<p>This is another paragraph.</p>
</body>
</html>
OUTPUT:
HTML Links
HTML links are defined with the <a> tag:
CODE:
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
3
<a href="https://www.w3schools.com">This is a link</a>

</body>
</html>
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements
OUTPUT:
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:
CODE:
<html>
<body>
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
4
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

</body>
</html>
OUTPUT:
HTML Buttons
HTML buttons are defined with the <button> tag:
CODE:
<html>
<body>
<h2>HTML Buttons</h2>
<p>HTML buttons are defined with the button tag:</p>
<button>Click me</button>
</body>
</html>
OUTPUT:
5
HTML Lists
HTML lists are defined with the <ul> (unordered/bullet list) or the <ol> (ordered/numbered list)
tag, followed by <li> tags (list items):
CODE:
<html>
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
6
OUTPUT:
An Unordered HTML List

 Coffee
 Tea
 Milk
An Ordered HTML List

1. Coffee
2. Tea
3. Milk
HTML Quotation and Citation Elements
HTML <q> for Short Quotations

The HTML <q> element defines a short quotation.
Browsers usually insert quotation marks around the <q> element.
CODE:
<html>
<body>
<p>Browsers usually insert quotation marks around the q element.</p>
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
</body>
</html>
OUTPUT:
Browsers usually insert quotation marks around the q element.
WWF's goal is to:” Build a future where people live in harmony with nature”.
HTML <blockquote> for Quotations

The HTML <blockquote> element defines a section that is quoted from another source.
Browsers usually indent <blockquote> elements.
7
CODE:
<html>
<body>
<p>Browsers usually indent blockquote elements.</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
million members in the United
States andclose to 5 million globally.
</blockquote>
</body>
</html>
OUTPUT:
Browsers usually indent blockquote elements.
For 50 years, WWF has been protecting the future of nature. The world's leading conservation
organization, WWF works in 100 countries and is supported by 1.2 million members in the
United States and close to 5 million globally.
HTML Comment Tags

You can add comments to your HTML source by using the following syntax:

CODE:
<html>
<body>

8

</body>
</html>
OUTPUT:
This is a paragraph.
HTML Colors
HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
In HTML, a color can be specified by using a color name:
Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
9
LightGray
CODE:
<html>
<body>
<h1 style="border: 2px solid Tomato;">Hello World</h1>
<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>
<h1 style="border: 2px solid Violet;">Hello World</h1>
</body>
</html>
OUTPUT:
Hello World
Hello World
Hello World
HEXA DECIMAL VALUE #ff6347
HTML Links - Hyperlinks

HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
HTML Links - Syntax

In HTML, links are defined with the <a> tag:
CODE:
<html>
10
<body>
<h2>HTML Links</h2>
<p><a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
</body>
</html>
OUTPUT:
HTML Links
Visit our HTML tutorial
The href attribute specifies the destination address (https://www.w3schools.com/html/) of the

link.
The link text is the visible part (Visit our HTML tutorial).
Clicking on the link text will send you to the specified address.
CODE:
<html>
<body>
<h2>Local Links</h2>
<p><a href="html_images.asp">HTML Images</a> is a link to a page on this website.</p>
<p><a href="https://www.w3.org/">W3C</a> is a link to a website on the World Wide Web.</p>

</body>
</html>
OUTPUT:
Local Links
HTML Images is a link to a page on this website.
W3C is a link to a website on the World Wide Web.
HTML Link Colors

By default, a link will appear like this (in all browsers):
 An unvisited link is underlined and blue

 A visited link is underlined and purple
 An active link is underlined and red
11
You can change the default colors, by using CSS:

CODE:
<html>
<head>
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: yellow;
text-decoration: underline;
}
</style>
</head>
<body>
OUTPUT:
Link Colors
You can change the default colors of links
HTML Images
HTML Images Syntax

In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute specifies the URL (web address) of the image:
12
The alt Attribute

The alt attribute provides an alternate text for an image, if the user for some reason cannot view
it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
The value of the alt attribute should describe the image:
CODE:
<html>
<body>
<h2>Alternative text</h2>
<p>The alt attribute should reflect the image content, so users who cannot see the image gets an
understanding of what the image contains:</p>
<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">
</body>
</html>
OUTPUT:
Alternative text
The alt attribute should reflect the image content, so users who cannot see the image gets an
understanding of what the image contains:
Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.
CODE:
<html>
<body>
<h2>Image Size</h2>
13
<p>Use the style attribute to specify the width and height of an image:</p>
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
</body>
</html>
OUTPUT:
Image Size
Use the style attribute to specify the width and height of an image:
Alternatively, you can use the width and height attributes:

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Image as a Link
To use an image as a link, put the <img> tag inside the <a> tag:
CODE:
<html>
<body>
<h2>Image as a Link</h2>
<p>The image is a link. You can click on it.</p>
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
<p>Add "border:0;" to prevent IE9 (and earlier) from displaying a border around the image.</p>
</body>
</html>
OUTPUT:
Image as a Link
The image is a link. You can click on it.
14
E- Comm Subject Unit 2 CHITRA NASA
Add "border:0;" to prevent IE9 (and earlier) from displaying a border around the image.
Image Floating
Use the CSS float property to let the image float to the right or to the left of a text:
CODE:
<html>
<body>
<h2>Floating Images</h2>
<p><strong>Float the image to the right:</strong></p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a
floating image.
</p>
<p><strong>Float the image to the left:</strong></p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
floating image.
</p>
</body>
</html>
OUTPUT:
Floating Images
Float the image to the right:
floating image.
Float the image to the left:
15
floating image.
Image Maps
The <map> tag defines an image-map.
map. An image
image-map is an image with clickable areas.
In the image below, click on the computer, the phone, or the cup of coffee:
The name attribute of the <map> tag is associated with the <img>'s usemap attribute and creates a
relationship between the image and the map.
The <map> element contains a number of <area> tags, that define the clickable areas in the
image-map.
CODE:
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more
about the topic:</p>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
</body>
</html>
OUTPUT:
Image Maps
Click on the computer, the phone, or the cup of coffee to go to a new page and read more about
the topic:
16
HTML Lists
Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
Unordered HTML List - Choose List Item Marker

The CSS list-style-type property is used to define the style of the list item marker:
Value Description
Disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked
CODE:
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Disc Bullets</h2>
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
17
<li>Milk</li>
</ul>
</body>
</html>
OUTPUT:
Unordered List with Disc Bullets

 Coffee
 Tea
 Milk
CODE:
<h2>Unordered List with Circle Bullets</h2>

<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
OUTPUT:
Unordered List with Circle Bullets

o Coffee
o Tea
o Milk
Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
Ordered HTML List - The Type Attribute

The type attribute of the <ol> tag, defines the type of the list item marker:
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
18
type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
CODE:
<html>
<body>
<h2>Ordered List with Letters</h2>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
OUTPUT:
Ordered List with Letters

A. Coffee
B. Tea
C. Milk
Defining an HTML Table

An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By
default, table headings are bold and centered. A table data/cell is defined with the <td> tag.
CODE:
<html>
<body>
<h2>Basic HTML Table</h2>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
19
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
OUTPUT:
Basic HTML Table

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80
HTML Table - Adding a Border

If you do not specify a border for the table, it will be displayed without borders.
A border is set using the CSS border property:
HTML Table - Adding a Caption

To add a caption to a table, use the <caption> tag:
CODE:
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
20
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Table Caption</h2>
<p>To add a caption to a table, use the caption tag.</p>
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
OUTPUT:
Table Caption
To add a caption to a table, use the caption tag.
Monthly savings
Month Savings
January $100
February $50
NEW CODE:
<table border="1">
<tr>
<th>Month</th>
21
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
OUTPUT:
Month Savings
January $100
February $80
Note: The border attribute is not supported in HTML5. Use CSS instead.
IMPORTANT CONCEPT:
CELLSPACING controls the space between table cells. Although there is no

official default, browsers usually use a default of 2.
CELLPADDING sets the amount of space between the contents of the cell and
the cell wall. The default is 1. CELLPADDING is usually more effective than
CELLSPACING for spreading out the contents of the table.
22
CODE:
<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>
This will produce the following result –
Name Salary
23
Ramesh Raman 5000
Shabbir Hussein 7000
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>
Column 1 Column 2 Column 3
Row 1 Cell 2 Row 1 Cell 3
Row 1 Cell 1
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1
<table border = "1" bordercolor = "green" bgcolor = "yellow">
24
The <form> Element

The HTML <form> element defines a form that is used to collect user input:
<form>
.
form elements
.
</form>
An HTML form contains form elements.
Form elements are different types of input elements, like text

fields, checkboxes,
radio buttons, submit buttons, and more.
The <input> Element
The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on the type attribute.
Here are some examples:
Type Description
<input type="text"> Defines a one-line text input field
<input type="radio"> Defines a radio button (for selecting one of many choices)
<input type="submit"> Defines a submit button (for submitting the form)
Text Input
<input type="text"> defines a one-line input field for text input:
Source Code:
<html>
<body>
<h2>Text Input</h2>
<form>
25
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of a text input field is 20 characters.</p>
</body>
</html>
Output:
This is how it will look like in a browser:
First name:
Last name:
Radio Button Input

<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices:
Source Code:
<html>
<body>
<h2>Radio Buttons</h2>
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
</body>
</html>
Output:
26
Radio Buttons
Male
Female
Other
The Submit Button

<input type="submit"> defines a button for submitting the form data to a form-handler.
form
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:
Source Code:
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".</p>
</body>
</html>
Output:
HTML Forms
First name:
Mickey
27
Last name:
Mouse
If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".
The Action Attribute

The action attribute defines the action to be performed when the form is submitted.
Normally, the form data is sent to a web page on the server when the user clicks on the submit
button.
In the example above, the form data is sent to a page on the server called "/action_page.php".
This page contains a server-side script that handles the form data:
If the action attribute is omitted, the action is set to the current page.
The Target Attribute

The target attribute specifies if the submitted result will open in a new browser tab, a frame, or
in the current window.
The default value is "_self" which means the form will be submitted in the current window.
To make the form result open in a new browser tab, use the value " _blank":
Example
<form action="/action_page.php" target="_blank">
Source Code:
<html>
<body>
<h2>The target Attribute</h2>
<p>When submitting this form, the result will be opened in a new browser tab:</p>
<form action="/action_page.php" target="_blank">
First name:<br>
<br>
Last name:<br>
28
<br><br>
</form>
</body>
</html>
The Method Attribute

The method attribute specifies the HTTP method (GET or POST) to be used when submitting
the form data:
1. Get Method
<html>
<body>
<h2>The method Attribute</h2>
<p>This form will be submitted using the GET method:</p>
<form action="/action_page.php" target="_blank" method="GET">
First name:<br>
<br>
Last name:<br>
<br><br>
</form>
<p>After you submit, notice that the form values is visible in the address bar of the new browser
tab.</p>
</body>
</html>
However, when GET is used, the submitted form data will be visible in the page
address field:
2. Post Method
<html>
<body>
<h2>The method Attribute</h2>
<p>This form will be submitted using the POST method:</p>
<form action="/action_page.php" target="_blank" method="POST">
First name:<br>
29

<br>
Last name:<br>
<br><br>
</form>
<p>After you submit, notice that, unlike the GET method, the form values is NOT visible in the
address bar of the new browser tab.</p>
</body>
</html>
Always use POST if the form data contains sensitive or personal information. The
POST method does not display the submitted form data in the page address field.
The Name Attribute

Each input field must have a name attribute to be submitted.
If the name attribute is omitted, the data of that input field will not be sent at all.
This example will only submit the "Last name" input field:
<html>
<body>
<h2>The name Attribute</h2>
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<br><br>
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".</p>
30
<p>Notice that the value of the "First name" field will not be submitted, because
the input element does not have a name attribute.</p>
</body>
</html>
Grouping Form Data with <fieldset>

The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.
<html>
<body>
<h2>Grouping Form Data with Fieldset</h2>

<p>The fieldset element is used to group related data in a form, and the legend
element defines a caption for the fieldset element.</p>
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<br>
Last name:<br>
<br><br>
</fieldset>
</form>
</body>
</html>
Grouping Form Data with Fieldset

The fieldset element is used to group related data in a form, and the legend element
defines a caption for the fieldset element.
31
Personal information: First name:

Mickey
Last name:
Mouse
HTML Input Attributes
The value Attribute

The value attribute specifies the initial value for an input field:
<html>
<body>
<h2>The value Attribute</h2>
<p>The value attribute specifies the initial value for an input field:</p>
<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
<br>
Last name:<br>
</form>
</body>
</html>
The readonly Attribute

The readonly attribute specifies that the input field is read only (cannot be changed):
<html>
<body>
<h2>The readonly Attribute</h2>
32
<p>The readonly attribute specifies that the input field is read only (cannot be
changed):</p>
<form action="">
First name:<br>
<input type="text" name="firstname" value ="John" readonly>
<br>
Last name:<br>
</form>
</body>
</html>
The disabled Attribute

The disabled attribute specifies that the input field is disabled.
A disabled input field is unusable and un-clickable, and its value will not be sent when
submitting the form:
<html>
<body>
<h2>The disabled Attribute</h2>

<p>The disabled attribute specifies that the input field is disabled:</p>
<form action="">
First name:<br>
<input type="text" name="firstname" value ="John" disabled>
<br>
33
Last name:<br>
</form>
</body>
</html>
The size Attribute

The size attribute specifies the size (in characters) for the input field:
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
</form>
The maxlength Attribute

The maxlength attribute specifies the maximum allowed length for the input field:
<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
</form>
The autocomplete Attribute
The autocomplete attribute specifies whether a form or input field should have
autocomplete on or off.
When autocomplete is on, the browser automatically completes the input values
based on values that the user has entered before.
Tip: It is possible to have autocomplete "on" for the form, and "off" for specific
input fields, or vice versa.
34
The autocomplete attribute works with <form> and the following <input> types:
text, search, url, tel, email, password, datepickers, range, and color.
For eg:
<form action="/action_page.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
Source Code:
<html>
<body>
<h2>The autocomplete Attribute</h2>
<form action="/action_page.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
</form>
<p>Fill in and submit the form, then reload the page to see how autocomplete
works.</p>
<p>Notice that autocomplete is "on" for the form, but "off" for the e-mail
field.</p>
</body>
</html>
The autofocus Attribute

The autofocus attribute specifies that the input field should automatically get focus when the
page loads.
<html>
<body>
<h2>The autofocus Attribute</h2>
35
<p>The autofocus attribute specifies that the input field should automatically get
focus when the page loads.</p>
First name:<input type="text" name="fname" autofocus><br>
</form>
<p><strong>Note:</strong> The autofocus attribute of the input tag is not
supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
36

Unit 2

Uploaded by

Document Information

Original Description:

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

Unit 2

Uploaded by

Copyright:

Available Formats

E- Comm Subject Unit 2

<tagname>Content goes here...</tagname>

<p>My first paragraph.</p>

It has a start tag <html> and an end tag </html>.

The element content is another HTML element (the <body> element).

<a href="https://www.w3schools.com">This is a link</a>

The link's destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

An Unordered HTML List

An Ordered HTML List

HTML Quotation and Citation Elements

HTML <q> for Short Quotations

Browsers usually insert quotation marks around the <q> element.

Browsers usually insert quotation marks around the q element.

HTML <blockquote> for Quotations

Browsers usually indent <blockquote> elements.

<p>Browsers usually indent blockquote elements.</p>

For 50 years, WWF has been protecting the future of nature.

The world's leading conservation organization,

WWF works in 100 countries and is supported by

million members in the United

States andclose to 5 million globally.

Browsers usually indent blockquote elements.

HTML Comment Tags

In HTML, a color can be specified by using a color name:

HEXA DECIMAL VALUE #ff6347

HTML Links - Hyperlinks

You can click on a link and jump to another document.

HTML Links - Syntax

The href attribute specifies the destination address (https://www.w3schools.com/html/) of the

<p><a href="https://www.w3.org/">W3C</a> is a link to a website on the World Wide Web.</p>

W3C is a link to a website on the World Wide Web.

HTML Link Colors

 An unvisited link is underlined and blue

You can change the default colors, by using CSS:

HTML Images Syntax

The alt Attribute

The value of the alt attribute should describe the image:

Image Size - Width and Height

Alternatively, you can use the width and height attributes:

Float the image to the left:

Unordered HTML List

Unordered HTML List - Choose List Item Marker

Unordered List with Disc Bullets

<h2>Unordered List with Circle Bullets</h2>

Unordered List with Circle Bullets

Ordered HTML List

Ordered HTML List - The Type Attribute

type="a" The list items will be numbered with lowercase letters

Ordered List with Letters

Defining an HTML Table

Basic HTML Table

HTML Table - Adding a Border

A border is set using the CSS border property:

HTML Table - Adding a Caption

CELLSPACING controls the space between table cells. Although there is no

This will produce the following result –

Ramesh Raman 5000

Shabbir Hussein 7000

Colspan and Rowspan Attributes