UNIT – I

HTML: Introduction to web designing, difference between web applications

and desktop applications, introduction to HTML, HTML structure, elements,
attributes, headings, paragraphs, styles, colours, HTML formatting,
Quotations, Comments, images, tables, lists, blocks and classes, HTML CSS,
HTML frames, file paths, layout, symbols, HTML responsive.

1) Introduction to Web Design:

Web design is the planning and creation of websites. This includes a number of separate skills
that all fall under the umbrella of web design.

Web Design Has Many Different Roles

When you work as a web designer, you may be tasked with creating (or working on) entire sites or
just individual pages and there is a lot to learn to be a well-rounded designer, including the
following:

➢ HTML — This is the structure of web pages, creating the foundation of all websites
➢ CSS — This is how web pages are visually styled. CSS (Cascading Style Sheets) handles
the entire look of sites, including layout, typography, colours, and more
➢ JavaScript — This governs certain behaviours on websites and can be used for a variety
of interactions and features
➢ CGI programming — CGI, and the next few entries (PHP, ASP, etc.) are all different
flavours of programming languages. Many sites do not require any of these languages, but sites
that are more feature-rich will certainly need to be coded using some of these languages
➢ SEO — Search engine optimization ensures that websites are attractive to Google and
other search engines and that people looking for the products, services, or information features
on that site can find it once they look for it online
➢ Server management — All websites need to be hosted. The management of the servers
that host those sites is an important web design skill
➢ Design — Creating the visual look and feel of websites has always been an important
aspect of the industry
➢ Speed — A successful site is one that loads quickly on a wide variety of devices,
regardless of a visitor's connection speed. Being able to tune the performance of sites is a very
valuable skill

1
2) Differences between Web Application vs Desktop Application

Web Applications Desktop Applications

A web application is a computer program Desktop applications are stand-alone application

that utilizes web browsers and web which runs on system and laptops. These
technology to perform tasks over the applications are installed on the systems via
Internet.
downloading online or buying CDs online or from
the store. Desktop applications are high in
efficiency and can be customized by using new
technology in the market. Internet connection is
not required for accessing the applications, it
works on the local server present in the system.

Deployment and up-gradation for a web- Deployment and any up-gradation/patch are
based application require deployment on a done on individual client machines separately.
single set of server machines.

Web applications can be accessed from As desktop are confined to a standalone machine,
anywhere, so there is no location so they can be only accessed from the machines
constraint. they are deployed in.

Web applications are platform- Desktop applications need to be developed

independent, they can work in different separately for different platform machines.
types of platforms with the only
requirement of a web browser.

Web applications are at higher security Desktop applications, on the other hand, have
risks as they are inherently designed to better authorization and administrators have
increase accessibility. better control, hence more secure.

Web applications rely heavily on internet Desktop applications don’t require the internet
connectivity, for there operation. for their operations. Some applications just
require internet connectivity at the time of
updations.

Ex: online forms, shopping carts, word • Ex: Windows File Explorer ,Microsoft
processors, spreadsheets, video and photo Office applications,Adobe Photoshop
editing, file conversion, file scanning, and • Skype
email programs such as Gmail, Yahoo and
Popular applications include Google Apps
and Microsoft 365.

3) Introduction to HTML

Html stands for Hyper Text Mark-up Language. Html mainly use for design a client side web
pages, this is a static page it means we can only view Html page not give request and not get
response from server. Using Html pages browser get user information through form (This is

2
an Html element). Html provides so many elements (like <p>, <img>, <h1>) to design a web
page.
Hypertext: is text which contains links to other texts. The hypertext pages are interconnected
by hyperlinks, when mouse click on these link which brings you to a new webpage
Markup language: Any tag based language known as markup language, for example gml, sgml,
html, xml etc.
Tim Berners-Lee is known as father of Html. The first publicly available description of HTML was
a document called "HTML Tags", first described, on the Internet by Berners-Lee in late 1991.

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

Features for Html

• Html is a static page.

• Html is not a case sensitive.
• Html is an error free language.
• Html is simple and easy language.
• It provides facilities to add audio, video, image on web pages.
• Html is platform independent language, it can be run on any platform like window,
linux, Mac.
• Each and every elements of html should be enclosed within the angular brackets (<>).
• Html programs are executed by the interpreter of the browser software.
• Html program save with .htm or .html extension.
3
• The current version of Html is Html 5.2
The advantages of HTML:

➢ It allows embedding scripts, to generate dynamic content.

➢ It can incorporate images and sounds with the help of HTML tags.
➢ It facilitates Moving and layered text.
➢ It allows framed documents.
➢ It allows absolute positioning of text and image.
➢ Spreadsheets, video clips, pdf files can be embedded in HTML documents with the
support of third party plug-ins.

The disadvantages of HTML:

➢ HTML can produce only static content.

➢ It does not facilitate headers, footers, footnotes.
➢ Mathematical type setting is difficult.
➢ Browser Dependent.
➢ No tabs and other automatic character spacing

4) Structure of Html Program

<! DOCTYPE …> version information

The !DOCTYPE declaration:

Every well written HTML document begins with a basic declaration that defines what
type of document it is. This declaration is made using the !DOCTYPE tag and is to be written
at the beginning of the document. It tells the processing agent and HTML version. Sample is
shown below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML> tag:
The html tag acts as a container for the whole document. Every character in the
document should be in between the html start and end tags. The html tag can also be used to
define the language of the contained document through the "lang" attribute. The content of
the html tag is divided in two parts using the head (HTML head tag) and the body (HTML
body tag).
Every Html program contain two parts they are;.
• Head part

4
• Body part

Head part
By using head part you can provide following information related to that web page.
• Provide title of that page.
• Description about that page.
• What content inside that web page ?
• Who develop that page, (author name) ?
• Refresh that page after particular interval of time.
• When page will be expire ?
• Keyword for search that page by search engine.
Body part
Body part contains the actual information which is display on web page.
<html>
<head><title>My First Web page</title></head>
<body><p>Welcome to HTML</p></body></html>
HTML Editors
Step 1: Open Notepad (PC)

Windows 8 or later:

Open the Start Screen (the window symbol at the bottom left on your screen).
Type Notepad.

Windows 7 or earlier:

Open Start > Programs > Accessories > Notepad

Step 2: Write Some HTML

Step 3: Save the HTML Page

Save the file on your computer. Select File > Save as in the Notepad menu.
5
Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding
for HTML files).

We can use either .htm or .html as file extension. There is no difference, it is up to you.

Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the file, or right-click -
and choose "Open with").

The result will look much like this:

5) HTML Elements
• The HTML element is everything from the start tag to the end tag:
• <tagname>Content goes here...</tagname>
• Examples of some HTML elements:
• <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> none none

6
HTML elements can be nested (this means that elements can contain other elements).

All HTML documents consist of nested HTML elements.

Empty HTML Elements
HTML elements with no content are called empty elements.
The <br> tag defines a line break, and is an empty element without a closing tag:

HTML Attributes

• All HTML elements can have attributes

• Attributes provide additional information about elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value"
The src Attribute
The <img> tag is used to embed an image in an HTML page. The src attribute specifies the
path to the image to be displayed:
Example
<img src="img_girl.jpg">

6) Html Headings

The heading is a title at the head of a page or section of a book. It is very important to have
different types of headings to structure the content of the web page. Headings help search
engines to understand and index the structure of the web page. There are 6 levels of headings
in HTML: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.The <h1> - <h6> tags are used to mark
headings according to their importance. The <h1> tag stands for the most important heading
of the web page and the <h6> stands for the least important and smallest one.

<html>
<head>
<title>HEADINGS</title>
</head>
<body>
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>
</body>
</html>
HTML headings highlight important topics and the document structure, thus improving user
engagement.

Use only one <h1> tag on any web page. The tag must describe what your page is about and
also contain a keyword to improve rankings in Google.Search Engines use headings for
indexing the structure and content of the webpage.
7
7) HTML Paragraphs
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some white space
(a margin) before and after a paragraph.
<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
HTML Horizontal Rules
<hr> (Horizontal Rules) tag are used for to create a horizontal line on html page. <hr> are
used for separate the content on html page.
Attributes:
SIZE Height of the rule in pixels
WIDTH Width of the rule in pixels or percentage of screen width
ALIGN Aligns the line (Left, Center, Right)
COLOR Sets a color for the rule

<html>
<body>

<h1>This is heading 1</h1>

<p>This is some text.</p>
<hr>

<h2>This is heading 2</h2>

<p>This is some other text.</p>
<hr>

<h2>This is heading 2</h2>

<p>This is some other text.</p>

</body>
</html>

HTML Line Breaks

The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph:
<p>This is<br>a paragraph<br>with line breaks.</p>
HTML <pre> Element
The HTML <pre> element defines preformatted text.

8
The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it
preserves both spaces and line breaks:
<html>
<body>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</pre>
</body>
</html>

8) HTML Styles

The HTML style attribute is used to add styles to an element, such as color, font, size, and
more. Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

<tagname style="property:value;">

The property is a CSS property. The value is a CSS value.

The CSS background-color property defines the background color for an HTML element.
<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

The CSS color property defines the text color for an HTML element:
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

The CSS font-size property defines the text size for an HTML element:

<h1 style="font-size:300%;">This is a heading</h1>

<p style="font-size:160%;">This is a paragraph.</p>
9) HTML COLOURS:

HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or
HSLA values.

Color Names

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

Ex: Tomato, Orange, DodgerBlue,MediumSeaGreen ,Gray,SlateBlue ,Violet ,LightGray etc

Color Values

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA
values, and HSLA values.

RGB Color Values

In HTML, a color can be specified as an RGB value, using this formula:

Sy:- rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color with a value
between 0 and 255.

This means that there are 256 x 256 x 256 = 16777216 possible colors!

Ex:rgb(255, 99, 71)

RGBA Color Values

RGBA color values are an extension of RGB color values with an Alpha channel - which
specifies the opacity for a color.

An RGBA color value is specified with:

Sy:- rgba(red, green, blue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent
at all):

Ex: rgba(255, 99, 71, 0.5)

HEX Color Values

In HTML, a color can be specified using a hexadecimal value in the form:

Sy:- #rrggbb

Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as
decimal 0-255).

For example, #ff0000 is displayed as red, because red is set to its highest value (ff), and the
other two (green and blue) are set to 00.

Ex: #ff6347

10
HSL Color Values

In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the form:

Sy:- hsl(hue, saturation, lightness)

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.

Saturation is a percentage value. 0% means a shade of gray, and 100% is the full color.

Lightness is also a percentage value. 0% is black, and 100% is white.

Ex: hsl(0, 100%, 50%)

<html>
<body>
<p>Same as color name "Tomato":</p>
<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>
<p>Same as color name "Tomato", but 50% transparent:</p>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>
<p>In addition to the predefined color names, colors can be specified using RGB, HEX,
HSL, or even transparent colors using RGBA or HSLA color values.</p>
</body>
</html>
10) Html Formatting
In HTML, a number of elements are used to format text. The formatting tags are divided into
two groups: physical tags, that are used to style the text (visual appearance of the text)
and logical or semantic tags that add semantic value to the text parts (e. g., inform search
engines for which keywords a web page should be ranked).

<b> and <strong> :

The <b> tag is a physical tag that stands for bold text, whereas the <strong> tag being a
logical tag is used to emphasize the importance of the text.

<i> and <em> :

The <i> and <em> tags define italic text. The <i> tag is only responsible for visual
appearance of the enclosed text, without any extra importance. The <em> tag defines
emphasized text, with added semantic importance.

<pre> :

The <pre> tag is used to define preformatted text. The browsers render the enclosed text
with white spaces and line breaks.

11
<mark> :

The <mark> tag is used to present a part of text in one document as marked or highlighted
for reference purposes.

<small> :

The <small> tag decreases the text font size by one size smaller than a document's base font
size (from medium to small, or from x-large to large). The tag usually contains the items of
secondary importance such as copyright notices, side comments, or legal notices.

<big>

Defines bigger text.

<BIG> places text in a big font</BIG>

<del> and <s> :

The <del> tag specifies a part of the text that was deleted from the document. Browsers
display this text as a strikethrough.

The <s> tag defines text that is no longer correct, or relevant.

<ins> and <u> :

The <ins> tag defines the text that has been inserted (added) to the document. The content
of the tag is displayed as underlined.
The <u> tag specifies text that is stylistically different from normal text, i.e. words or
fragments of text that need to be presented differently. This could be misspelled words or
proper nouns in Chinese.

<sub> and <sup> :

The <sub> defines subscript texts. Subscript text is under the baseline of other symbols of
the line and has smaller font. The <sup> tag defines superscript, that is set slightly above the
normal line of type and is relatively smaller than the rest of the text. The baseline passes
through upper or lower edge of the symbols.

<dfn> :

The <dfn> tag is used to define the term, that is mentioned for the first time. The content of
the tag is displayed in italic.

<p>, <br> :

The <p> tag defines the paragraph. Browsers automatically add 1em margin before and
after each paragraph.

The <br> tag inserts a single line break. Unlike the <p> tag an empty indent is not added
before the line.

Monospaced Font:

12
If you want that each letter has the same width then you should write the content within
<tt>.............</tt> element.

EX-1

<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>We use the &lt;strong&gt; tag to highlight the importance <strong> of this part of the
text</strong>.</p>
<p>The &lt;b&gt; tag is a physical tag that stands for <b>bold text</b>.</p>
<p>The important part of the text is defined <em> in italic</em>.</p>
<p><i>Lorem ipsum</i>, or lipsum as it is sometimes known, is dummy text used in
laying out print, graphic or web designs. </p>
<pre>Spaces
and line breaks
within this element
are shown as typed.
</pre>
<p>Learn the HyperText Markup Language on <mark>W3Docs.com</mark>.</p>
<p>The interest rate is only 10%*</p>
<small>* per day</small> /
<p> She likes <del>violets</del> snowdrops․</p>
<p><s>I am studying in high school.</s></p>
<p>I am studying in a university.</p>
<p>She likes <del>violets</del> <ins>snowdrops</ins>․</p>
<p>Here we used <u>the &lt;u&gt; tag</u>.</p>
<p>The formula of water is H₂O, and the formula of alcohol is
C₂H₅ОН </p>
<p>E = mc², where E — kinetic energy, m — mass, c — the speed of light.
</p>
<p><dfn>HTML</dfn> (HyperText Markup Language ) — The standardized markup
language for documents on the World Wide Web. Most web pages contain a description of
the markup in the language HTML</p>
<h1>How to use the &lt;br&gt; tag</h1>
13
 <p> We can insert the &lt;br /&gt; tag inside the paragraph, <br /> to transfer a part of
the text to another line if necessary.</p>
</body>
</html>
EX-2

<html>
<head>
<title>HTML Formatting Tags</title>
</head>
<body bgcolor="cyan">
<big><h1 align="center">FORMATTING TAGS</h1></big>
<u>MATHEMATICS</u>
<p><i>It is king of all sciences</i></p>
<u><i>Fromulae:</i></u>
<br>
<small><i>FOLLOWING ARE FEW FORMULAS IN MATHEMATICS</i></small><br>
<ol type="1">
<li>(a+b)²=a²+b²
+2ab</li>
<li>log_ee^x=x</li>
</ol>
<hr size="4px" color="red" WIDTH="40%" align="left">
<u><big>STRIKE</big></u>
<p>In onlone shopping we can see the usage of the strike tag.</p>
example:Rs<strike>400</strike>
</body>
</html>

11) HTML Quotation and Citation Elements:

<blockquote>

The HTML <blockquote> element defines a section that is quoted from another source.

Browsers usually indent <blockquote> elements.

<q>

The HTML <q> tag defines a short quotation.

Browsers normally insert quotation marks around the quotation.

<abbr>

The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.",
"Dr.", "ASAP", "ATM".

14
Use the global title attribute to show the description for the abbreviation/acronym when
you mouse over the element.

<address>

The HTML <address> tag defines the contact information for the author/owner of a
document or an article.

The contact information can be an email address, URL, physical address, phone number,
social media handle, etc.

The text in the <address> element usually renders in italic, and browsers will always add a
line break before and after the <address> element.

<bdo>

BDO stands for Bi-Directional Override.

The HTML <bdo> tag is used to override the current text direction
dir ltr Required. Specifies the text direction of the text inside the <bdo> element
rtl

<html>
<body>
<p>Browsers usually indent blockquote elements.</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For nearly 60 years, WWF has been protecting the future of nature. The world's leading
conservation organization, WWF works in 100 countries and is supported by more than one
million members in the United States and close to five million globally.
</blockquote>
<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>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in
1948.</p>
<p>Marking up abbreviations can give useful information to browsers, translation systems
and search-engines.</p>
<p>The HTML address element defines contact information (author/owner) of a document
or article.</p>
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

15
<bdo dir="rtl">This line will be written from right to left</bdo>
</body>
</html>

Html Comment
Comment is nothing but it is a statement which is not display on browser window. It is
useful to understand the which code is written for what purpose. Comment tags <!-- and -
-> are use for comment on html page.
Syntax
<! Comments>

12) Html Image:

Html provide <img> tag to display image on web page or browser. Html <img> tag is an
empty tag that contains attributes only, closing tags are not used with <img> tag. <img>
have following attributes;
Image Attribute
• src: are used for specify the source file from where you want to display image.
• alt :attribute are used for specify alternate text to display in the place of image when
browser is unable to display image. This name is helpful for search engine to find the
image on web.
• title: attribute are used for specify a title for the image that will be displayed when
mouse is placed over the image for few seconds.
• height: are used for specify height of image.
• width: are used for specify width of image.
• Float : the CSS float property to let the image float to the left or to the right
<html>
<head>
<title>IMAGES</title>
</head>
<body>
<img src=”one.jpg” height=”200px” width=”250px” title=”Image”alt=”logo”
Border=”1”>
<img src="smiley.gif" alt="Smiley face"
style="float:left;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A
paragraph with a floating image.
</p>
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

</body>
</html>

16
 13) Table:
Using table we arrange data in the form of row and column. To create a table in html
use <table>tag. Complete table are design by using below tags.
• Table are divided into table row using <tr> tag.
• Table row are again dived into table data using <td> tag.
• Table row also divide into table heading using <th> tag.

The HTML <table> tag also supports the following additional attributes −

Attribute Value Description

align right Deprecated − Visual alignment.

left
center
justify
char

bgcolor rgb(x,x,x) Deprecated − Specifies the background color of the table.

#hexcode
colorname

border pixels Deprecated − Specifies the border width. A value of "0" means no
border.

cellpadding pixels or % Deprecated − Specifies the space between the cell borders and their
contents.

cellspacing pixels or % Deprecated − Specifies the space between cells.

width Specifies the width of the table

pixels or %

17
• colspan : This attribute defines the number of columns. It is used inside <td> tag.
• rowspan : This attribute defines the number of row. It is used inside <td> tag.
• id : This attribute are used for provide unique id for table
HTML Table Tags

<html>
<body>
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td> <td>row 1,
cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
18
</table>
<h4>Vertical headers:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 777 1854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 777 1855</td>
</tr>
</table> </body>
</html>
Output:

14) Html list:

Html list are used for arrange text in list format. Html provide three types of list.
Ordered List or Numbered List (ol)
Unordered List or Bulleted List (ul)
Description List or Definition List (dl)
The type attribute specifies the type of format to display.

OL: Ordered List.

The items in the ordered list are marked with numbers by default. If you want to create
ordered list with alphabet or Roman numbers, you just need to add type="a" or type="I" to
the <ol> tag.

Items in this list are numbered automatically by the browser.

TYPE
1 1,2,3, …… , a a, b, c, …… ,A A, B, C, …… , i, ii, iii, ……
I I, II, III, ……

<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h3>A numbered list:</h3>
<ol>
<li>Peach</li>

19
 <li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>An alphabetized list:</h3>
<ol type="A">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>An alphabetized list (lowercase letters):</h3>
<ol type="a">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>A numbered list (Roman numerals):</h3>
<ol type="I">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>A numbered list (lowercase Roman numerals):</h3>
<ol type="i">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
</body>
</html>

UL : Unordered List.
The items in unordered lists are marked with bullets (small black circles) by default.Items
in this list start with a list mark such as a bullet. Browsers will usually change the list mark
in nested lists.

▪ Html supports three bullet types: disc(default), circle, square.

<UL TYPE=“square”>
<LI> List item …</LI>
<LI> List item …</LI>
</UL>

20
<html>

<head>

<title>Title of the document</title>

</head>

<body>

<ul type="circle">

<li>List item </li>

<li>List item</li>

<li>List item</li>

</ul>

<ul type="square">

<li>List item</li>

<li>List item</li>

<li>List item</li>

</ul>

</body>

</html>

DL: Definition List.

This kind of list is different from the others. Each item in a DL consists of one or more
Definition Terms (DT elements), followed by one or more Definition Description
(DD elements).
HTML
Hyper Text Markup Language
DOG
A human’s best friend!

<html>

<head>

<title>Title of the document</title>

</head>

21
 <body>

<h1>Description Lists:</h1>

<dl>

<dt>Tea</dt>

<dd>- hot drink</dd>

<dt>Juice</dt>

<dd>- cold drink</dd>

</dl>

</body>

</html>

15 ) Block-level Elements

A block-level element is an HTML element that starts on a new line and takes up the full
available width of its parent element’s horizontal space. This kind of element creates blocks
of content (paragraphs, page divisions). The majority of HTML elements are block-level
elements.

Block-level elements are used within the body of an HTML document and can contain inline
elements, or other block-level elements.

Html div tag

<div> tag are used for group the large section of Html elements together. <div> tag is just
like a container which is used to wrap other Html page elements and divides the Html
documents into sections. Suppose our web page contains lot of Html elements like <p>,
<h2> and <img> and you want to separate these elements from others elements then
apply <div> tag.

Where use <div> tag

Mostly <div> are used for divide complete page into section like footer, header, left, right
section.

Example

<html>
<body>
<div style="background:#00FF99">
<h3>Heading inside a div</h3>
<p>Text inside a div element.</p>
</div>

22
 <div style="background:#FFCAFF">
<h3>Heading inside a div</h3>
<p>Text inside a div.</p>
</div>

<div style="background:#66FFFF">
<h3>Heading inside a div</h3>
<p>Text inside a div.</p>
</div>
</body>
</html>

Inline Elements
Unlike block-level elements, inline elements do not start on a new line. They begin within a
line and only take up as much width as it is necessary. Inline elements are included as a part
of the main text.
Inline elements commonly contain other inline elements, or they can be empty.

<span> Tag
The <span> tag is a generic inline container that groups elements primarily for styling
purposes. The <span> tag, as well as <div> tag are empty containers. The <div> tag groups
block level elements, whereas the <span> groups inline elements. The content hooked in the
<span> element, can be styled with CSS, or manipulated with JavaScript.
Here are some examples of the HTML <span> tag usage:
Highlight a part of a text with color, define a background color or background image for it.
Change the font of separate words or phrases.

• Apply scripts to certain parts of the text, e.g., highlight the code syntax.
The <span> tag comes in pairs. The content is written between the opening (<span>) and
closing (</span>) tags.
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>My cat has <span style="color:#8ebf42;">green</span> eyes.</p>
</body>
</html>

Marquee tag
Marquee tag are used for display the moving content on the web browser. Marquee tag
contain the following attribute.
• Direction: To specify direction of moving content like left, right, up, down.
• Scroll amount: To specify the speed of the content.
23
• Loop: To specify how many time that text has to move on the browser window.
• Behavior: To specify the style to the moving content. It have attribute scroll, alternate,
slide.
Example

<html>
<body>
<marquee direction="left" scrollamount="10" loop="5"
behavior="slide" >My first web page</marquee>
</body>
</html>

15) HTML Styles - CSS

Cascading Style Sheets (CSS) is used to format the layout of a webpage.

With CSS, you can control the color, font, the size of text, the spacing between elements,
how elements are positioned and laid out, what background images or background colors
are to be used, different displays for different devices and screen sizes, and much more

CSS can be added to HTML documents in 3 ways:

• Inline - by using the style attribute inside HTML elements

• Internal - by using a <style> element in the <head> section
• External - by using a <link> element to link to an external CSS file

Inline CSS

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.
The following example sets the text color of the <h1> element to blue, and the text color of the <p> element
to red:
<html>
<body>

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

</body>
</html>
Internal CSS
An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within a <style> element.

24
The following example sets the text color of ALL the <h1> elements (on that page) to blue,
and the text color of ALL the <p> elements to red. In addition, the page will be displayed with
a "powderblue" background color:

<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
External CSS
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> section of each HTML
page:
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
The external style sheet can be written in any text editor. The file must not contain
any HTML code, and must be saved with a .css extension.

styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}

SP ) Html Hyperlinks:
25
Websites contain different types of links that take you directly to other pages or allow to navigate to a
particular part of the page. The links in HTML are called hyperlinks. They are defined using
the <a> tag

Hyperlinks are used to create links that allow the users to navigate from one page to another.
Syntax

The <a> tag comes in pairs, the opening <a> tells where the link should start and the closing </a>
indicates where the link ends.

To create a hyperlink, you should use the <a> tag and href attribute, the value of which is the URL, or
location, where the link is pointing to.

href: href attribute specifies the destination address like www.tutorial4us.com/html/

• target: target attribute specifies where to open the linked document like open in new window,
open in same window.
• The target attribute specifies where exactly to open the linked page.
Example
<html>
<body>
Link open in same window<a href="#" target="_top">Click Here</a>
Link open in new window<a href="#" target="_blank">Click Here</a>
</body>
</html>

Target Attribute
Target Value Description

_blank Opens the linked document in new window

_top Opens the linked document in same window

Opens the linked document in same frame as it was clicked (this

_self
is default)

framename Opens the linked document in a given named frame

_parent Opens the linked document in the parent frame

Image as Link
In html you can give image as a link, when click on image linked page will be
open. In below example image link is provided.
Example

26
 <html>
<body>
<a href="/html/index" target="_top"><img src="files/sublogo.png"
target="_blank"></a>
</body>
</html>

Internal and External Links

There are two types of resources we can link to using the a element: internal and external. Internal
links are those that point to other pages of our website. External links point to web pages that aren’t
part of our website.
Building internal links is important for a few different reasons:
• Internal links are used to create navigation menus that help website visitors navigate our
website.
External links are also important for a few different reasons:
• External links may be recommended, required, or just best-practice to provide proper
attribution to the source of an idea or a resource.
<html>
<head>
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
</head>
<body>
<h2>HTML Links</h2>
<p><a href="#"target="_blank">HTML Hyper links</a></p>
27
 <p><a href="#C4">Jump to Chapter 4</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains HTML</p>
<h2>Chapter 2</h2>
<p>This chapter explains STYLE SHEETS</p>
<h2>Chapter 3</h2>
<p>This chapter explains JAVASCRIPT</p>
<h2 id="C4">Chapter 4</h2>
<p>This chapter explains DHTML</p>
<h2>Chapter 5</h2>
<p>This chapter explains XML</p>
<a href="#">
<img src="a.jpg" style="width:42px;height:42px;border:0">
</a> </body> </html

16) Frames
HTML frames are used to divide your browser window into multiple sections
where each section can load a separate HTML document. A collection of frames
in the browser window is known as a frameset. The window is divided into frames
in a similar way the tables are organized: into rows and columns.
The disadvantages of using frames are:

➢ The web developer must keep track of more HTML documents.

➢ It is difficult to print the entire page.
➢ Users often dislike them.
➢ It presents linking challenges.
➢ People often use frames to wrap their own ads and branding around other people's content.

Creating Frames
To use frames on a page we use <frameset> tag instead of <body> tag. The
<frameset> tag defines, how to divide the window into frames. The rows
attribute of <frameset> tag defines horizontal frames and cols attribute defines
vertical frames. Each frame is indicated by <frame> tag and it defines which
HTML document shall open into the frame.
<frameset> Tag Attributes
cols
Specifies how many columns are contained in the frameset and the size of each
column.
rows

28
This attribute works just like the cols attribute and takes the same values, but it
is used to specify the rows in the frameset. For example, to create two horizontal
frames, use rows = "10%, 90%".
<frame> Tag Attributes

Src
This attribute is used to give the file name that should be loaded in the frame.
Its value can be any URL. For example, src = "/html/top_frame.htm" will load
an HTML file available in html directory.

name
This attribute allows you to give a name to a frame. It is used to indicate which
frame a document should be loaded into.
Frame's name and target attributes
One of the most popular uses of frames is to place navigation bars in one frame
and then load main pages into a separate frame.
The targetattribute can also take one of the following values

_self
Loads the page into the current frame.

_blank
Loads a page into a new browser window. Opening a new window.

_parent
Loads the page into the parent window, which in the case of a single frameset
is the main browser window.
_top
Loads the page into the browser window, replacing any current frames.
targetframe
Loads the page into a named targetframe.

<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
29
 <frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>

17) HTML File Paths

A file path describes the location of a file in a web site's folder structure.
File paths are used when linking to external files, like:
• Web pages
• Images
• Style sheets
• JavaScripts
Absolute File Paths
An absolute file path is the full URL to a file:
<h2>Using a Full URL File Path</h2>
<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain"
style="width:300px">
Relative File Paths
A relative file path points to a file relative to the current page.
In the following example, the file path points to a file in the images folder located at the root
of the current web:
<h2>Using a Relative File Path</h2>
<img src="/images/picture.jpg" alt="Mountain" style="width:300px">
In the following example, the file path points to a file in the images folder located in the
current folder:
<h2>Using a Relative File Path</h2>
<img src="images/picture.jpg" alt="Mountain" style="width:300px">
In the following example, the file path points to a file in the images folder located in the folder one
level up from the current folder:
<h2>Using a Relative File Path</h2>
<img src="../images/picture.jpg" alt="Mountain" style="width:300px">

18) HTML Layout Elements

30
HTML has several semantic elements that define the different parts of a web page:

• <header> - Defines a header for a document or a

section
• <nav> - Defines a set of navigation links
• <section> - Defines a section in a document
• <article> - Defines an independent, self-
contained content
• <aside> - Defines content aside from the content
(like a sidebar)
• <footer> - Defines a footer for a document or a
section
• <details> - Defines additional details that the
user can open and close on demand
• <summary> - Defines a heading for
the <details> element

HTML Layout Techniques

There are four different techniques to create multicolumn layouts. Each technique has its
pros and cons:

• CSS framework
• CSS float property
• CSS flexbox
• CSS grid

CSS Frameworks

If you want to create your layout fast, you can use a CSS framework, like W3.CSS or Bootstrap.

CSS Float Layout

It is common to do entire web layouts using the CSS float property. Float is easy to learn -
you just need to remember how the float and clear properties
work. Disadvantages: Floating elements are tied to the document flow, which may harm
the flexibility.
CSS Flexbox Layout

Use of flexbox ensures that elements behave predictably when the page layout must
accommodate different screen sizes and different display devices.

CSS Grid Layout

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns,
making it easier to design web pages without having to use floats and positioning.

<!DOCTYPE html>

<html lang="en">
31
<head>

<title>CSS Template</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

*{

box-sizing: border-box;

body {

font-family: Arial, Helvetica, sans-serif;

/* Style the header */

header {

background-color: #666;

padding: 30px;

text-align: center;

font-size: 35px;

color: white;

/* Create two columns/boxes that floats next to each other */

nav {

float: left;

width: 30%;

height: 300px; /* only for demonstration, should be removed */

background: #ccc;

padding: 20px;

/* Style the list inside the menu */

32
nav ul {

list-style-type: none;

padding: 0;

article {

float: left;

padding: 20px;

width: 70%;

background-color: #f1f1f1;

height: 300px; /* only for demonstration, should be removed */

/* Clear floats after the columns */

section::after {

content: "";

display: table;

clear: both;

/* Style the footer */

footer {

background-color: #777;

padding: 10px;

text-align: center;

color: white;

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of
next to each other, on small screens */

@media (max-width: 600px) {

nav, article {

width: 100%;

33
 height: auto;

</style>

</head>

<body>

<h2>CSS Layout Float</h2>

<p>In this example, we have created a header, two columns/boxes and a footer. On smaller
screens, the columns will stack on top of each other.</p>

<p>Resize the browser window to see the responsive effect (you will learn more about this
in our next chapter - HTML Responsive.)</p>

<header>

<h2>Cities</h2>

</header>

<section>

<nav>

<ul>

<li><a href="#">London</a></li>

<li><a href="#">Paris</a></li>

<li><a href="#">Tokyo</a></li>

</ul>

</nav>

<article>

<h1>London</h1>

<p>London is the capital city of England. It is the most populous city in the United
Kingdom, with a metropolitan area of over 13 million inhabitants.</p>

<p>Standing on the River Thames, London has been a major settlement for two
millennia, its history going back to its founding by the Romans, who named it
Londinium.</p>

</article>

</section>
34
<footer>

<p>Footer</p>

</footer>

</body>

</html>

19) HTML Symbols

Symbols that are not present on your keyboard can also be added by using entities.
HTML Symbol Entities
Many mathematical, technical, and currency symbols, are not present on a normal keyboard.
To add such symbols to an HTML page, you can use the entity name or the entity number (a
decimal or a hexadecimal reference) for the symbol.
<html>
<body>

<h1>Greek Letter Example</h1>

<h2>The capital gamma letter: &Gamma;</h2>

</body>
</html>

20) HTML Responsive

35
Responsive web design is about creating web pages that look good on all devices!A responsive
web design will automatically adjust for different screen sizes and viewports. Responsive Web
Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a
website, to make it look good on all devices (desktops, tablets, and phones):

Setting The Viewport

To create a responsive website, add the following <meta> tag to all your web pages:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
This will set the viewport of your page, which will give the browser instructions on how to
control the page's dimensions and scaling.
Responsive Images
Responsive images are images that scale nicely to fit any browser size.
Using the width Property
If the CSS width property is set to 100%, the image will be responsive and scale up and
down:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Responsive Image</h2>
<p>When the CSS width property is set in a percentage value, the image will scale up and
down when resizing the browser window. Resize the browser window to see the effect.</p>
<img src="img_girl.jpg" style="width:100%;">
</body>
</html>

Using the max-width Property

If the max-width property is set to 100%, the image will scale down if it has to, but never scale
up to be larger than its original size:
<img src="img_girl.jpg" style="max-width:100%;height:auto;">
Show Different Images Depending on Browser Width:

The HTML <picture> element allows you to define different images for different browser
window sizes.
<body>
<h2>Show Different Images Depending on Browser Width</h2>
<p>Resize the browser width and the image will change at 600px and 1500px.</p>
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
</body>

36
Responsive Text Size
The text size can be set with a "vw" unit, which means the "viewport width".
That way the text size will follow the size of the browser window:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1 style="font-size:10vw;">Responsive Text</h1>
<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>
<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to
10% of the viewport width.</p>
<p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is
50cm wide, 1vw is 0.5cm.</p>
</body>
</html>

Bootstrap
Another popular CSS framework is Bootstrap. Bootstrap uses HTML, CSS and jQuery to
make responsive web pages.

37