WEB DESIGN

Dr. Asan Baker Kanbar

Component of web application
What Does Static Web Page
Mean?
• A static Web page is a page that is built using HTML code
and features the same presentation and content,
regardless of user identity or other factors.
• Static Web pages are easier to code and assemble than
dynamic Web pages, which may feature customizable
content according to a user's identity or other factors.
• A static web page is sometimes called a flat page.
• Web browser delivers web page exactly as it is
Diagram
Advantages of Static Website
Following are the key advantages of a static website:
• Improve security
• Enhance performance
• Independent on system
• Cost-effective
• Easy to set up
Features of Static Web Page
• Following are some features of the static web page that make it viable
to use:

• It is not interactive to the user.

• The content of web pages will always remain the same for every visitor until
the developer changes it.
• HTML and CSS are fundamental languages to create a static web page
• The short loading time makes visitors feel good
• It provides security to the content present in your web pages. Hackers are
unable to attack your content and change it.
• All visitors will see the same content no matter how much time they visit
your pages.
• The cost you spend on such a website is less than a dynamic web page.
Getting your Website Online
• If you have completed the initial steps of coding, your
website is ready to publish online. Following important
things matter while publishing your site on the internet:
• 1) Buy a Domain:
First, you buy a domain to look more professional. There are
various options to get your domain.
• 2) Deploy Your Site:
There are various cheap and free hosting options available online,
for example, GitHub Pages, Netlify, and Amazon13. You can also
use free Google web hosting.
Static Web Page VS Dynamic Web
Page
• The word static refers to remaining the same and does
not change. The content will remain the same for all the
visitors. On the other hand, dynamic refers to anything
that is continuously functional.
• The static web page requires HTML and CSS to code the
website. The dynamic web needs HTML along
with server-side language. Managing events and
controlling activities are the responsibility of the
server-side language.
• Static pages are simple, while dynamic sites are complex.
• The information changes in static pages are rare, while
dynamic pages change frequently.
• Pages take less time to load in static pages. Dynamic
pages take more time to load.
• Static sites use HTML, CSS, and JavaScript. Dynamic
pages use CGI, AJAX, ASP.NET, and ASP.
Web Browsers

• The purpose of a web browser (Chrome, Edge, Firefox, Safari)

is to read HTML documents and display them correctly.
• A browser does not display the HTML tags, but uses them to
determine how to display the document:
What is HTML
• HTML is an acronym which stands for Hyper Text Markup
Language which is used for creating web pages and web
applications. Let's see what is meant by Hypertext Markup
Language, and Web page.
• Hyper Text: HyperText simply means "Text within Text." A text has
a link within it, is a hypertext. Whenever you click on a link which
brings you to a new webpage, you have clicked on a hypertext.
HyperText is a way to link two or more web pages (HTML
documents) with each other.
• Markup language: A markup language is a computer language that
is used to apply layout and formatting conventions to a text
document. Markup language makes text more interactive and
dynamic. It can turn text into images, tables, links, etc.
• Web Page: A web page is a document which is commonly written in
HTML and translated by a web browser. A web page can be
identified by entering an URL. A Web page can be of the static or
dynamic type.
• With the help of HTML only, we can create static web pages.
• Hence, HTML is a markup language which is used for
creating attractive web pages with the help of styling, and
which looks in a nice format on a web browser. An HTML
document is made of many HTML tags and each HTML
tag contains different content.
Features of HTML
1) It is a very easy and simple language. It can be easily
understood and modified.
2) It is very easy to make an effective presentation with HTML
because it has a lot of formatting tags.
3) It is a markup language, so it provides a flexible way to design
web
pages along with the text.
4) It facilitates programmers to add a link on the web pages (by html
anchor tag), so it enhances the interest of browsing of the user.
5) It is platform-independent because it can be displayed on any
platform like Windows, Linux, and Macintosh, etc.
6) It facilitates the programmer to add Graphics, Videos, and
Sound to the web pages which makes it more attractive and
interactive.
7) HTML is a case-insensitive language, which means we can use
tags
either in lower-case or upper-case.
HTML Page Structure
A Simple HTML Document
• <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
• <!DOCTYPE>
• <html>
• <head>
• <title>Web page title</title>
• </head>
• <body>
• <h1>Write Your First Heading</h1>
• <p>Write Your First Paragraph.</p>
• </body>
• </html>
Example Explained
• <!DOCTYPE>: It defines the document type or it instruct the browser about the
version of HTML.

• <html > :This tag informs the browser that it is an HTML document. Text between
html tag describes the web document. It is a container for all other elements of
HTML except <!DOCTYPE>

• <head>: It should be the first element inside the <html> element, which contains
the metadata(information about the document). It must be closed before the body
tag opens.

• <title>: As its name suggested, it is used to add title of that HTML page which
appears at the top of the browser window. It must be placed inside the head tag
and should close immediately. (Optional)

• <body> : Text between body tag describes the body content of the page that is
visible to the end user. This tag contains the main content of the HTML document.

• <h1> : Text between <h1> tag describes the first level heading of the webpage.

• <p> : Text between <p> tag describes the paragraph of the webpage.
NOTE:

•It is recommended to write all tags in

lower-case for consistency, readability,
etc.
HTML text Editors
• HTML text Editors
• An HTML file is a text file, so to create an HTML file we
can use any text editors.
• Text editors are the programs which allow editing in a
written text, hence to create a web page we need to write
our code in some text editor.
• There are various types of text editors available which you
can directly download, but for a beginner, the best text
editor is Notepad (Windows) or TextEdit (Mac).
• After learning the basics, you can easily use other
professional text editors which are, Notepad++, Sublime
Text, Vim, etc.
HTML code with Notepad.
(Recommended for Beginners)
• Notepad is a simple text editor and suitable for beginners to learn
HTML. It is available in all versions of Windows, from where you
easily access it.
• Step 1: Open Notepad (Windows)
• Step 2: Write code in HTML
• Step 3: Save the HTML file with .htm or .html
extension.
• Step 4: Open the HTML page in your web browser.
• To run the HTML page, you need to open the file location,
where you have saved the file and then either double-click
on file or click on open with option
Building blocks of HTML
• HTML document consist of its basic building blocks which
are:
• Tags: An HTML tag surrounds the content and apply
meaning to it. It is written between < and > brackets.
• Attribute: An attribute in HTML provides extra information
about the element, and it is applied within the start tag. An
HTML attribute contains two fields: name & value.
Syntax
<tag name attribute_name= " attr_value"> content </ tag n
ame>
<h1 style="color:red" > hello </h1>
What is an HTML Element?
• Elements: An HTML element is an individual component of an HTML file. In an
HTML file, everything written within tags are termed as HTML elements.
In other word
An HTML element is defined by a start tag, some content, and an end tag:
• <tagname> Content goes here... </tagname>
• The HTML element is everything from the start tag to the end tag:
• <h1>My First Heading</h1>
• <p>My first paragraph.</p>
HTML Tags
• HTML tags are like keywords which defines that how web browser
will format and display the content. With the help of tags, a web
browser can distinguish between an HTML content and a simple
content. HTML tags contain three main parts:
• opening tag,
• content
• and closing tag. But some HTML tags are unclosed tags.

• When a web browser reads an HTML document, browser reads it

from top to bottom and left to right. HTML tags are used to create
HTML documents and render their properties. Each HTML tags have
different properties.

• An HTML file must have some essential tags so that web browser
can differentiate between a simple text and HTML text. You can use
as many tags you want as per your code requirement.
• All HTML tags must enclosed within < > these brackets.
• Every tag in HTML perform different tasks.
• If you have used an open tag <tag>, then you must use a
close tag </tag> (except some tags)
Syntax:
<tag> content </tag>
<!DOCTYPE>
<html>
<body>
<p> Paragraph Tag </p>
<h2> Heading Tag </h2>
<b> Bold Tag </b>
<i> Italic Tag </i>
<u> Underline Tag</u>
</body>
</html>
• Unclosed HTML Tags
• Some HTML tags are not closed, for example br and hr.

• <br> Tag: br stands for break line, it breaks the line of the
code.
• <hr> Tag: hr stands for Horizontal Rule. This tag is used
to put a line across the webpage.
• HTML Meta Tags
• DOCTYPE, title, link, meta and style

• HTML Text Tags

• <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>,
<em>, <abbr>, <acronym>, <address>, <bdo>,
<blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>,
<kbd>, <pre>, <samp>, <var> and <br>

• HTML Link Tags

• <a> and <base>
• HTML Image and Object Tags
• <img>, <area>, <map>, <param> and <object>

• HTML List Tags

• <ul>, <ol>, <li>, <dl>, <dt> and <dd>
• HTML Table Tags
• table, tr, td, th, tbody, thead, tfoot, col, colgroup and
caption.

• HTML Form Tags

• form, input, textarea, select, option, optgroup, button,
label, fieldset and legend

• HTML Scripting Tags

• script and noscript

Note: we will see examples using these tags next lectures

HTML Attribute
HTML attributes are special words which provide additional
information about the elements or attributes are the
modifier of the HTML element.
• Each element or tag can have attributes, which defines
the behavior of that element.
• Attributes should always be applied with start tag.
• The Attribute should always be applied with its name and
value pair.
• You can add multiple attributes in one HTML element, but
need to give space between two attributes.
• Syntax
• <element attribute_name="value">content</elem
ent>
• Example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> This is Style attribute</h1>
<p style="height: 50px; color: blue">It will add style property in
element</p>
<p style="color: red">It will change the color of content</p>
</body>
</html>
Explanation of above example:
<p style="height: 50px; color: blue">It will add style propert
y in element</p>
• In the above statement, we have used paragraph tags in
which we have applied style attribute. This attribute is
used for applying CSS property on any HTML element. It
provides height to paragraph element of 50px and turns it
colour to blue.

<p style="color: red">It will change the color of content</p>

• In the above statement we have again used style attribute
in paragraph tag, which turns its colour red.
The title attribute in HTML
• Description: The title attribute is used as text tooltip in
most of the browsers. It display its text when user move
the cursor over a link or any text. You can use it with any
text or link to show the description about that link or text.
In our example, we are taking this with paragraph tag and
heading tag.
Example
• With <h1> tag:
<h1 title="This is heading tag">Example of title attribute</h1>
• With <p> tag:

<p title="This is paragraph tag">Move the cursor over the

heading and paragraph, and you will see a description as a
tooltip</p>
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1 title="This is heading tag">Example

of title attribute</h1>
<p title="This is paragraph tag">Move
the cursor over the heading and
paragraph, and you will see a description
as a tooltip</p>

</body>
</html>
• The href attribute in HTML
• Description: The href attribute is the main attribute of
<a> anchor tag. This attribute gives the link address which
is specified in that link. The href attribute provides the
hyperlink, and if it is blank, then it will remain in same
page.
• Example
• With link address:
<a href="https://www.sulicihan.edu.krd">This is a link</a>
Example
With link address:
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>Display of href attribute</h1>

<p>Below is the link of anchor tag, click the link and see the
next page</p>
<a href="https://www.sulicihan.edu.krd">This is a link</a>

</body>
</html>
Without link address:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Display of href attribute</h1>
<a href="">This is a link</a>
</body>
</html>
The src Attribute
• The src attribute is one of the important and required
attribute of <img> element. It is source for the image
which is required to display on browser. This attribute can
contain image in same directory or another directory. The
image name or source should be correct else browser will
not display the image.
• Example
<img src="whitepeacock.jpg" height="400" width="600">
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>Example of src attribute</h1>

<p>HTML images can be diplayed with the help of image tag
and its attribute src gives the source for that image</p>
<img
src="https://www.nature.com/htmlpages/images/whitepeacock.jp
g" height="400" width="600">

</body>
</html>
Note: The above example also have height and width attribute, which
define the height and width of image on web page.
output
The alt Attribute
• The required alt attribute for the <img> tag specifies an
alternate text for an image, if the image for some reason
cannot be displayed. This can be due to a slow
connection, or an error in the src attribute, or if the user
uses a screen reader.
• Example
<img src="img_flower.jpg" alt=“red flower">
 Quotes: single quotes or double
quotes?
• we have used attribute with double quotes, but some
people might use single quotes in HTML. So use of single
quotes with HTML attribute, is also allowed. The following
both statements are absolutely fine.

<a href="https://www.sulicihan.edu.krd">A link to HTML.</a>

<a href='https://www.sulicihan.edu.krd'>A link to HTML.</a>

• IN HTML5, you can also omit use of quotes around
attribute values.
<a href= https://www.google.com >This is Google link</a>
The lang Attribute
• You should always include the lang attribute inside
the <html> tag, to declare the language of the Web page.
This is meant to assist search engines and browsers.
• The following example specifies English as the language:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
• Country codes can also be added to the language code in
the lang attribute. So, the first two characters define the
language of the HTML page, and the last two characters
define the country.
• The following example specifies English as the language
and United States as the country:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
HTML Elements(review)
• An HTML file is made of elements. These elements are
responsible for creating web pages and define content in
that webpage. An element in HTML usually consist of a
start tag <tag name>, close tag </tag name> and content
inserted between them. Technically, an element is a
collection of start tag, attributes, end tag, content
between them.
• Such as:
<p> Hello Everyone!!! </p>

Note: Some elements does not have end tag and content,
these elements are termed as empty elements or
self-closing element or void elements.
Example
<!DOCTYPE html>
<html>
<head>
<title>WebPage</title>
</head>
<body>
<h1>This is my first web page</h1>
<h2> How it looks?</h2>
<p>It looks Nice!!!!!</p>
</body>
</html>
• All the content written between body elements are visible
on web page.
• Void element: All the elements in HTML do not require to
have start tag and end tag, some elements does not have
content and end tag such elements are known as Void
elements or empty elements. These elements are also
called as unpaired tag.
• Some Void elements are <br> (represents a line
break) , <hr>(represents a horizontal line), etc.
• Nested HTML Elements: HTML can be nested, which
means an element can contain another element.
Block-level and Inline HTML elements
• For the default display and styling purpose in HTML, all
the elements are divided into two categories:
• Block-level element
• Inline element
• Block-level element:
• These are the elements, which structure main part of web
page, by dividing a page into coherent blocks.
• A block-level element always start with new line and takes
the full width of web page, from left to right.
• These elements can contain block-level as well as inline
elements.
• Following are the block-level elements in HTML.
• <address>, <article>, <aside>, <blockquote>, <canvas>,
<dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>,
<footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>,
<main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>,
<section>, <table>, <tfoot>, <ul> and <video>.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color: lightblue">This is first div</div>
<div style="background-color: lightgreen">This is second
div</div>
<p style="background-color: pink">This is a block level
element</p>
</body>
</html>
Output

In the above example we have used :

tag, which defines a section in a web page, and takes full width of page.

We have used style attribute which is used to styling the HTML content, and
the background color are showing that it's a block level element.
• Inline elements:
• Inline elements are those elements, which differentiate the
part of a given text and provide it a particular function.
• These elements does not start with new line and take
width as per requirement.

• The Inline elements are mostly used with other elements.

• <a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>,
<button>, <cite>, <code>, <dfn>, <em>, <i>, <img>,
<input>, <kbd>, <label>, <map>, <object>, <q>, <samp>,
<script>, <select>, <small>, <span>, <strong>, <sub>,
<sup>, <textarea>, <time>, <tt>, <var>.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="https://www.google.com">Click on link</a>
<span style="background-color: lightblue">this is inline
element</span>
<p>This will take width of text only</p>
</body>
</html>
Output
HTML Formatting
• HTML Formatting is a process of formatting text for
better look and feel. HTML provides us ability to format
text without using CSS. There are many formatting tags in
HTML. These tags are used to make text bold, italicized,
or underlined. There are almost 14 options available that
how text appears in HTML.
In HTML the formatting tags are divided into two
categories:
• Physical tag: These tags are used to provide the visual
appearance to the text.
• Logical tag: These tags are used to add some logical or
semantic value to the text.
• NOTE: There are some physical and logical tags
which may give same visual appearance, but they
will be different in semantics.
• 1) Bold Text
• HTML<b> and <strong> formatting elements
• The HTML <b> element is a physical tag which display
text in bold font, without any logical importance. If you
write anything within <b>............</b> element, is shown in
bold letters.
See this example:
<p> <b>Write Your First Paragraph in bold text.</b></p>
example
<!DOCTYPE>
<html>
<body>
<p> <b>Write Your First Paragraph in bold text.</b></p>
</body>
</html>
• The HTML <strong> tag is a logical tag, which displays
the content in bold font and informs the browser about its
logical importance. If you write anything between
<strong>???????. </strong>, is shown important text.
• See this example:

• <p><strong>This is an important content</strong>, and

this is normal content</p>
Example
<!DOCTYPE html>
<html>
<head>
<title>formatting elements</title>
</head>
<body>
<h1>Explanation of formatting element</h1>
<p><strong>This is an important content</strong>, and this
is normal content</p>
</body>
</html>
Output
2) Italic Text
• HTML <i> and <em> formatting elements
• The HTML <i> element is physical element, which display
the enclosed content in italic font, without any added
importance. If you write anything within <i>............</i>
element, is shown in italic letters.

See this example:

<p> <i>Write Your First Paragraph in italic text.</i></p>
<!DOCTYPE>
<html>
<body>
<p> <i>Write Your First Paragraph in italic text.</i></p>
</body>
</html>
• The HTML <em> tag is a logical element, which will
display the enclosed content in italic font, with added
semantics importance.

• See this example:

<p><em>This is an important content</em>, which display
ed in italic font.</p>
Example
<!DOCTYPE html>
<html>
<head>
<title>formatting elements</title>
</head>
<body>
<h1>Explanation of italic formatting element</h1>
<p><em>This is an important content</em>, which
displayed in italic font.</p>
</body>
</html>
Output
3) HTML Marked formatting
• If you want to mark or highlight a text, you should write the
content within <mark>.........</mark>.

• See this example:

<h2> I want to put a <mark> Mark</mark> on your face</h2>
Example
• <!DOCTYPE>
• <html>
• <body>
• <h2> I want to put a <mark> Mark</mark> on your
face</h2>
• </body>
• </html>
• 4) Underlined Text
• If you write anything within <u>.........</u> element, is
shown in underlined text.

See this example:

<p> <u>Write Your First Paragraph in underlined text.</u></p>
Example
<!DOCTYPE>
<html>
<body>
<p> <u>Write Your First Paragraph in underlined
text.</u></p>
</body>
</html>
5) Strike Text
• Anything written within <strike>.......................</strike>
element is displayed with strikethrough. It is a thin line
which cross the statement.

• See this example:

<p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>
Example
<!DOCTYPE>
<html>
<body>
<p> <strike>Write Your First Paragraph with
strikethrough</strike>.</p>
</body>
</html>
6) Monospaced Font
• If you want that each letter has the same width then you
should write the content within <tt>.............</tt> element.
• Note: We know that most of the fonts are known as
variable-width fonts because different letters have
different width. (for example: 'w' is wider than 'i').
Monospaced Font provides similar space among every
letter.

• See this example:

<p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>
Example
<!DOCTYPE>
<html>
<body>
<p>Hello <tt>Write Your First Paragraph in monospaced
font.</tt></p>
</body>
</html>
7) Superscript Text
• If you put the content within ^{..............}
element, is shown in superscript; means it is displayed
half a character's height above the other characters.

See this example:

<p>Hello ^{Write Your First Paragraph in superscript.}</p>
Example
<!DOCTYPE>
<html>
<body>
<p>Hello ^{Write Your First Paragraph in
superscript.}</p>
</body>
</html>
8) Subscript Text
• If you put the content within _{..............}
element, is shown in subscript ; means it is displayed half
a character's height below the other characters.

See this example:

<p>Hello _{Write Your First Paragraph in subscript.}</p>
Example
<!DOCTYPE>
<html>
<body>
<p>Hello _{Write Your First Paragraph in
subscript.}</p>
</body>
</html>
9) Deleted Text
• Anything that puts within <del>..........</del> is displayed
as deleted text.

• See this example:

<p>Hello <del>Delete your first paragraph.</del></p>
Example
<!DOCTYPE>
<html>
<body>
<p>Hello <del>Delete your first paragraph.</del></p>
</body>
</html>
10) Inserted Text
• Anything that puts within <ins>..........</ins> is displayed
as inserted text.

See this example:

<p> <del>Delete your first paragraph.</del><ins>Write an
other paragraph.</ins></p>
Example
• <!DOCTYPE>
• <html>
• <body>
• <p> <del>Delete your first paragraph.</del><ins>Write
another paragraph.</ins></p>
• </body>
• </html>
• 11) Larger Text
• If you want to put your font size larger than the rest of the
text then put the content within <big>.........</big>. It
increase one font size larger than the previous one.

See this example:

<p>Hello <big>Write the paragraph in larger font.</big></p>
Example
<!DOCTYPE>
<html>
<body>
<p>Hello <big>Write the paragraph in larger
font.</big></p>
</body>
</html>
• 12) Smaller Text
• If you want to put your font size smaller than the rest of
the text then put the content within
<small>.........</small>tag. It reduces one font size than
the previous one.

• See this example:

<p>Hello <small>Write the paragraph in smaller font.</small></p>
<!DOCTYPE>
<html>
<body>
<p>Hello <small>Write the paragraph in smaller
font.</small></p>
</body>
</html>
HTML Heading
• A HTML heading or HTML h tag can be defined as a title
or a subtitle which you want to display on the webpage.
When you place the text within the heading tags
<h1>.........</h1>, it is displayed on the browser in the bold
format and size of the text depends on the number of
heading.
• There are six different HTML headings which are defined
with the <h1> to <h6> tags, from highest level h1 (main
heading) to the least level h6 (least important heading).
• h1 is the largest heading tag and h6 is the smallest one.
So h1 is used for most important heading and h6 is used
for least important.
• Headings in HTML helps the search engine to
understand and index the structure of web page.

• Note: The main keyword of the whole content of a

webpage should be display by h1 heading tag.
Example
<!DOCTYPE html>
<html>
<body>
<h1>Heading no. 1</h1>
<h2>Heading no. 2</h2>
<h3>Heading no. 3</h3>
<h4>Heading no. 4</h4>
<h5>Heading no. 5</h5>
<h6>Heading no. 6</h6>
</body>
</html>
Note: Heading elements (h1....h6) should be used for
headings only. They should not be used just to make text
bold or big.
HTML headings can also be used with nested
elements. Following are different codes to display the
way to use heading elements.
Example
<!DOCTYPE html>
<html>
<head>
<title>Heading elements</title>
</head>
<body>
<h1>This is main heading of page. </h1>
<p>h1 is the most important heading, which is used to display the keyword of pag
e </p>
<h2>This is first sub-heading</h2>
<p>h2 describes the first sub heading of page. </p>
<h3>This is Second sub-heading</h3>
<p>h3 describes the second sub heading of page.</p>
<p>We can use h1 to h6 tag to use the different sub-heading with their paragraph
s if
required.
</p>
</body>
</html>
HTML Paragraph
• HTML paragraph or HTML p tag is used to define a
paragraph in a webpage. Let's take a simple example to
see how it work. It is a notable point that a browser itself
add an empty line before and after a paragraph. An HTML
<p> tag indicates starting of new paragraph.

• Note: If we are using various <p> tags in one HTML file

then browser automatically adds a single blank line
between the two paragraphs.
Example
<!DOCTYPE html>
<html>
<body>
<p>This is first paragraph.</p>
<p>This is second paragraph.</p>
<p>This is third paragraph.</p>
</body>
</html>
Space inside HTML Paragraph
• If you put a lot of spaces inside the HTML p tag, browser
removes extra spaces and extra line while displaying the
page. The browser counts number of spaces and lines as
a single one.
 Example
<!DOCTYPE html>
<html>
<body>
<p>
I am
going to provide
you a tutorial on HTML
and hope that it will
be very beneficial for you.
</p>
<p>
Look, I put here a lot
of spaces but I know, Browser will ignore it.
</p>
<p>
You cannot determine the display of HTML</p>
<p>because resized windows may create different result.
</p>
</body>
</html>

As you can see, all the extra lines and unnecessary spaces are removed by the browser.
How to Use <br> and <hr> tag with
paragraph?
• An HTML <br> tag is used for line break and it can be
used with paragraph elements. Following is the example
to show how to use <br> with <p> element.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2> Use of line break with pragraph tag</h2>
<p><br>Papa and mama, and baby and Dot,
<br>Willie and me-the whole of the lot
<br>Of us all went over in Bimberlie's sleigh,
<br>To grandmama's house on Christmas day.
</p>
</body>
</html>
• An HTML <hr> tag is used to apply a horizontal line
between two statements or two paragraphs. Following is
the example which is showing use of <hr> tag with
paragraph.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2> Example to show a horizontal line with paragraphs</h2>
<p> An HTML hr tag draw a horizontal line and separate two
paragraphs with that line.<hr> it will start a new paragraph.
</p>
</body>
</html>
Output
HTML Phrase tag
The HTML phrase tags are special purpose tags, which defines
the structural meaning of a block of text or semantics of text.
Following is the list of phrase tags, some of which we have
already discussed in HTML formatting.
Abbreviation tag : <abbr>
Marked tag: <mark>
Strong tag: <strong>
Emphasized tag : <em>
Definition tag: <dfn>
Quoting tag: <blockquote>
Short quote tag : <q>
Code tag: <code>
Keyboard tag: <kbd>
Address tag: <address>
1. Text Abbreviation tag
• This tag is used to abbreviate a text. To abbreviate a text,
write text between <abbr> and </abbr> tag.

<p>An <abbr title = "Hypertext Markup language">HTML </abbr>langu

age is used to create web pages. </p>
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2> Hypertext Markup language </h2>
<p>An <abbr title = "Hypertext Markup
language">HTML </abbr>language is used to create web
pages.
</p>
</body>
</html>
Output
2. Marked tag:
• The content written between <mark> and </mark> tag will
show as yellow mark on browser. This tag is used to
highlight a particular text.

<p>This tag will <mark>highlight</mark> the text.</p>

Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Example of mark tag</h2>
<p>This tag will <mark>highlight</mark> the text.</p>
</body>
</html>
Output
• 3. Strong text:
• This tag is used to display the important text of the
content. The text written between <strong> and </strong>
will be displayed as important text.

Example
<p>In HTML it is recommended to use <strong>lower-cas
e</strong>, while writing a code. </p>
output
4. Emphasized text
• This tag is used to emphasize the text, and displayed the
text in italic form. The text written between <em> and
</em> tag will italicized the text.

• Example
<p>HTML is an <em>easy </em>to learn language.</p>
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Example of emphasized tag</h2>
<p>HTML is an <em>easy </em>to learn
language.</p>
</body>
</html>
Output
• 5. Definition tag:
• When you use the <dfn> and </dfn> tags, it allow to
specify the keyword of the content. Following is the
example to show how to definition element.

• Example
<p><dfn>HTML </dfn> is a markup language. </p>
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Example of definition element</h2>
<p><dfn>HTML </dfn> is a markup language. </p>
</body>
</html>
Output
• 6. Quoting text:
• The HTML <blockquote> element shows that the
enclosed content is quoted from another source. The
Source URL can be given using the cite attribute, and text
representation of source can display using <cite> .....
</cite>element.
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Example of blockquote element</h2>
<blockquote
cite="https://www.keepinspiring.me/famous-quotes/"><p>"The
first step toward success is taken when you refuse to be a
captive of the environment in which you first find
yourself."</p></blockquote>
<cite>-Mark Caine</cite>
</body>
</html>
Output
• 7. Short Quotations:
• An HTML <q> ....... </q> element defines a short
quotation. If you will put any content between <q> .......
</q>, then it will enclose the text in double quotes.

• Example:
<p>Steve Jobs said: <q>If You Are Working On Something
That You Really Care About, You Don?t Have To Be Push
ed. The Vision Pulls You.</q>?</p>
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Great Motivational quote</p>
<p>Steve Jobs said: <q>If You Are Working On
Something That You Really Care About, You Don’t Have
To Be Pushed. The Vision Pulls You.</q>?</p>

</body>
</html>
Output
8. Code tags
• The HTML <code> </code> element is used to display the
part of computer code. It will display the content in
monospaced font.

<p>First Java program</p>

<p><code>class Simple{ public static void main(String
args[]){
System.out.println("Hello world"); }} </code>
</p>
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>First Java program</p>
<p><code>class Simple{ public static void main(String
args[]){
System.out.println("Hello Java"); }} </code>
</p>

</body>
</html>
Output
• 9. Keyboard Tag
• In HTML the keyboard tag, <kbd>, indicates that a section
of content is a user input from keyboard.

<p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> +

<kbd>t</kbd> to restore page on chrome.</p>
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Keyboard input. </p>
<p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> +
<kbd>t</kbd> to restore page on chrome.</p>

</body>
</html>
Output
10. Address tag
• An HTML <address> tag defines the contact information
about the author of the content. The content written
between <address> and </address> tag, then it will be
displayed in italic font.
<address> You can ask your queries by contact us on <a h
ref="">[email protected]</a>
<br> You can also visit at: <br>58 S. Garfield Street. Villa
Rica, GA 30187.
</address>
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Address Tag</p>
<address> You can ask your queries by contact us on <a
href=" ">[email protected]</a>
<br> You can also visit at: <br>58 S. Garfield Street. Villa
Rica, GA 30187.
</address>
</body>
</html>
Output
HTML Anchor
• The HTML anchor tag defines a hyperlink that links one
page to another page. It can create hyperlink to other web
page as well as files, location, or any URL. The "href"
attribute is the most important attribute of the HTML a tag.
and which links to destination page or URL.
• The href attribute is used to define the address of the file
to be linked. In other words, it points out the destination
page.
• The syntax of HTML anchor tag is given below.
<a href = "..........."> Link Text </a>
Specify a location for Link using target
attribute
• If we want to open that link to another page then we can use
target attribute of <a> tag. With the help of this link will be open
in next page.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>Click on <a href="https://www.sulicihan.edu.krd/"
target="_blank"> this-link </a>to go on home page of Cihan
University.</p>
</body>
</html>
Output

Note:
The target attribute can only use with href attribute in anchor tag.
If we will not use target attribute then link will open in same page.
HTML Table
• HTML table tag is used to display data in tabular form
(row * column). There can be many columns in a row.
• We can create a table to display data in tabular form,
using <table> element, with the help of <tr> , <td>, and
<th> elements.
• In Each table, table row is defined by <tr> tag, table
header is defined by <th>, and table data is defined by
<td> tags.
• HTML tables are used to manage the layout of the page
e.g. header section, navigation bar, body content, footer
section etc. But it is recommended to use div tag over
table to manage the layout of the page .
HTML Table Tags
HTML Table Example
<!DOCTYPE>
<html>
<body>
<table>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></
tr>
<tr><td>Ahmed </td><td>ALi</td><td>60</td></tr>
<tr><td> sara</td><td>Kareem</td><td>80</td></tr>
<tr><td>Sarmad</td><td>Sabir</td><td>82</td></tr>
<tr><td>zanap</td><td>Ferhad</td><td>72</td></tr>
</table>
</body>
</html>
Output
 HTML Table with Border
• If you do not specify a border attribute, the table will be
displayed without borders. Sometimes this can be useful,
but most of the time, we want the borders to show.

• There are two ways to specify border for HTML tables.

1. By border attribute of table in HTML
2. By border property in CSS
1. HTML Border attribute
You can use border attribute of table tag in HTML to specify border.
But it is not recommended now.

<!DOCTYPE>
<html>
<body>
<table border="1">
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
</body>
</html>
Output
2) CSS Border property
• It is now recommended to use border property of CSS to
specify border in table.

<style>
table, th, td {
border: 1px solid black;
}
</style>
Example
<!DOCTYPE>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
</body>
</html>
Output
HTML Form
• An HTML form is a section of a document which contains
controls such as text fields, password fields, checkboxes,
radio buttons, submit button, menus etc.

• An HTML form facilitates the user to enter data that is to

be sent to the server for processing such as name, email
address, password, phone number, etc.
Why use HTML Form

• HTML forms are required if you want to collect some data

from of the site visitor.
• For example: If a user want to purchase some items on
internet, he/she must fill the form such as shipping
address and credit/debit card details so that item can be
sent to the given address.
HTML Form Syntax

• <form action="server url" method="get|post">

• //input controls e.g. textfield, textarea, radiobutton, button

• </form>
HTML Form Tags
HTML <form> element
• The HTML <form> element provide a document section to
take input from user. It provides various interactive
controls for submitting information to web server such as
text field, text area, password field, etc.
Note: The <form> element does not itself create a form but it is container
to contain all required form elements, such as <input>, <label>, etc.

Syntax:
<form>
//Form elements
</form>
HTML <input> element
The HTML <input> element is fundamental form element. It
is used to create form fields, to take input from user. We
can apply different input filed to gather different information
form user. Following is the example to show the simple text
input.
<body>
<form>
Enter your name <br>
<input type="text" name="username">
</form>
</body>
Output
HTML TextField Control
• The type="text" attribute of input tag creates textfield
control also known as single line textfield control. The
name attribute is optional, but it is required for the server
side component such as JSP, ASP, PHP etc.

<form>
First Name: <input type="text" name="firstname"/> <br/>
Last Name: <input type="text" name="lastname"/> <br/>
</form>

Note: If you will omit 'name' attribute then the text filed input will not
be submitted to server.
Output
HTML <textarea> tag in form
• The <textarea> tag in HTML is used to insert multiple-line text in a form.
The size of <textarea> can be specify either using "rows" or "cols" attribute
or by CSS.

Example:
<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<form>
Enter your address:<br>
<textarea rows="2" cols="20"></textarea>
</form>
</body>
</html>
Output
 Label Tag in Form
• It is considered better to have label in form. As it makes
the code parser/browser/user friendly.
• If you click on the label tag, it will focus on the text control.
To do so, you need to have for attribute in label tag that
must be same as id attribute of input tag.

NOTE: It is good to use <label> tag with form, although it is optional but
if you will use it, then it will provide a focus when you tap or click on label tag.
It is more worthy with touchscreens.
example
<!DOCTYPE html>
<html>
<body>
<h2> label </h2>
<p>We can add label for each input</p>
<form>
<label for="firstname">First Name: </label>
<input type="text" id="firstname" name="firstname"/> <br/><br/>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname" name="lastname"/> <br/>
</form>

</body>
</html>
Output
HTML Password Field Control

• The password is not visible to the user in password field

control.

<!DOCTYPE html>
<html>
<body>
<h2> Password </h2>
<p>We can add Password input</p>
<form>
<label for="password">Password: </label>
<input type="password" id="password" name="password"/>
<br/>
</form>

</body>
</html>
Output
HTML 5 Email Field Control
• The email field in new in HTML 5. It validates the text for
correct email address. You must use @ and . in this field.
<form>
<label for="email">Email: </label>
<input type="email" id="email" name="email"/> <br/>
</form>
• It will display in browser like below:
• Note: If we will not enter the correct email, it will display
error like:
Example2
<!DOCTYPE html>
<html>

<body>
<h3>Input "email" type</h3>
<form>
<label><b>Enter your Email-address</b></label>
<input type="email" name="email" required>
<input type="submit">
<p><strong>Note:</strong>User can also enter multiple email addresses
separating by comma or whitespace as following: </p>
<label><b>Enter multiple Email-addresses</b></label>
<input type="email" name="email" multiple>
<input type="submit">
</form>

</body>
</html>
Output
Radio Button Control
• The radio button is used to select one option from multiple
options. It is used for selection of gender, quiz questions
etc.
• If you use one name for all the radio buttons, only one
radio button can be selected at a time.
• Using radio buttons for multiple options, you can only
choose a single option at a time.
Example
<form>
<label for="gender">Gender: </label>
<input type="radio" id="gender" name="gender" value="male"/>Male
<input type="radio" id="gender" name="gender" value="female"/>Fem
ale <br/>
</form>
Example
<!DOCTYPE html>
<html>
<body>
<h3>Input "radio" type</h3>
<form>
<p>Kindly Select your favorite color</p>
<input type="radio" name="color" value="red"> Red <br>
<input type="radio" name="color" value="blue"> blue <br>
<input type="radio" name="color" value="green">green <br>
<input type="radio" name="color" value="pink">pink <br>
<input type="submit" value="submit">
</form>
</body>
</html>
Output
Checkbox Control
The checkbox control is used to check multiple options from
given checkboxes.
<form>
Hobby:<br>
<input type="checkbox" id="cricket" name="cricket" val
ue="cricket"/>
<label for="cricket">Cricket</label> <br>
<input type="checkbox" id="football" name="football" v
alue="football"/>
<label for="football">Football</label> <br>
<input type="checkbox" id="hockey" name="hockey" v
alue="hockey"/>
<label for="hockey">Hockey</label>
</form>
Output

• Note: These are similar to radio button except it can

choose multiple options at a time and radio button can
select one button at a time, and its display.
Example
<!DOCTYPE html>
<html>
<body>
<h2>Input "checkbox" type</h2><br>
<h3>Registration Form</h3>
<form>
<label>Enter your Name:</label>
<input type="text" name="name">
<p>Kindly Select your favorite sports</p>
<input type="checkbox" name="sport1" value="cricket">Cricket<br>
<input type="checkbox" name="sport2" value="tennis">Tennis<br>
<input type="checkbox" name="sport3" value="football">Football<br>
<input type="checkbox" name="sport4" value="baseball">Baseball<br>
<input type="checkbox" name="sport5" value="badminton">Badminton<br><br>
<input type="submit" value="submit">
</form>
</body>
</html>
Output
<input type="button">
• The <input> type "button" defines a simple push button,
which can be programmed to control a functionally on any
event such as, click event.

<form>
<input type="button" value="Clcik me " onclick="alert('you are learni
ng HTML')">
</form>

Note: It mainly works with JavaScript.

Example
<!DOCTYPE html>
<html>
<body>
<h2>Input "button" type.</h2>
<p>Click the button to see the result: </p>
<form>
<input type="button" value="Click me" onclick="alert('you are
learning HTML')">
</form>
</body>
</html>
Output
Submit button control
• HTML <input type="submit"> are used to add a submit
button on web page. When user clicks on submit button,
then form get submit to the server.
• Syntax:
<input type="submit" value="submit">
• The type = submit , specifying that it is a submit button
• The value attribute can be anything which we write on
button on web page.
• The name attribute can be omit here.
Example:

<form>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</form>
Output
<input type="reset">:
• The <input> type "reset" is also defined as a button but
when the user performs a click event, it by default reset
the all inputted values.
<form>
<label>User id: </label>
<input type="text" name="user-id" value="user">
<label>Password: </label>
<input type="password" name="pass" value="pass"><br><br>
<input type="submit" value="login">
<input type="reset" value="Reset">
</form>
Example
<!DOCTYPE html>
<html>
<body>
<h3>Input "reset" type:</h3>
<form>
<label>User id: </label>
<input type="text" name="user-id" value=" ">
<label>Password: </label>
<input type="password" name="pass" value=""><br><br>
<input type="submit" value="login">
<input type="reset" value="Reset">
</form>
<p>Try to change the input values of user id and password, then when you
click on reset, it will reset input fields with default values. </p>
</body>
</html>
Output
<input type="file">
• The <input> element with type "file" is used to select one
or more files from user device storage. Once you select
the file, and after submission, this file can be uploaded to
the server with the help of JS code and file API.

<form>
<label>Select file to upload:</label>
<input type="file" name="newfile">
<input type="submit" value="submit">
</form>
Example
<!DOCTYPE html>
<html>
<body>
<h2>Input "file" type.</h2>
<p>We can choose any type of file until we do not specify it! The
selected file will appear at next to "choose file" option</p>
<form>
<label>Select file to upload:</label>
<input type="file" name="newfile">
<input type="submit" value="submit">
</form>
</body>
</html>
Output
<input type="image">
• The <input> type "image" is used to represent a submit button in the
form of image.

<!DOCTYPE html>
<html>
<body>
<h2>Input "image" type.</h2>
<p>We can create an image as submit button</p>
<form>
<label>User id:</label><br>
<input type="text" name="name"><br><br>
<input type="image" alt="Submit" src="login.png" width="100px">

</form>

</body>
</html>
<input type="color">
• The <input> type "color" is used to define an input field
which contains a colour. It allows a user to specify the
colour by the visual colour interface on a browser.

Note: The "color" type only supports color value in

hexadecimal format, and the default value is #000000 (black).
Example
<!DOCTYPE html>
<html>
<body>
<h3>Input "color" types:</h3>
<form>
Pick your Favorite color: <br><br>
<input type="color" name="upclick" value="#a52a2a"> Up-click<br><br>
<input type="color" name="downclick" value="#f5f5dc"> Down-click
</form>
<p><strong>Note:</strong>The default value of "color" type is #000000
(black). It only supports color value in hexadecimal format.</p>
</body>
</html>
Output
<input type="date">
• The <input> element of type "date" generates an input
field, which allows a user to input the date in a given
format. A user can enter the date by text field or by date
picker interface.
<form>
Select Start and End Date: <br><br>
<input type="date" name="Startdate"> Start date:<br><br>
<input type="date" name="Enddate"> End date:<br><br>
<input type="submit">
</form>
Example
<!DOCTYPE html>
<html>
<body>
<h3>Input "date" type</h3>
<form>
Select Start and End Date: <br><br>
<input type="date" name="Startdate"> Start date:<br><br>
<input type="date" name="Enddate"> End date:<br><br>
<input type="submit">
</form>
</body>
</html>
Output
<input type="month">
• The <input> type "month" creates an input field which
allows a user to easily enter month and year in the format
of "MM, YYYY" where MM defines month value, and
YYYY defines the year value.

<form>
<label>Enter your Birth Month-year: </label>
<input type="month" name="newMonth">
<input type="submit">
</form>
Example
<!DOCTYPE html>
<html>

<body>
<h3>Input "month" type:</h3>
<form>
<label>Enter your Birth Month-year: </label>
<input type="month" name="newMonth">
<input type="submit">
</form>
</body>
</html>
Output
<input type="number">:
• The <input> element type number creates input filed
which allows a user to enter the numeric value. You can
also restrict to enter a minimum and maximum value
using min and max attribute.
<form>
<label>Enter your age: </label>
<input type="number" name="num" min="50" max="80">
<input type="submit">
</form>
Example
<!DOCTYPE html>
<html>
<body>
<h3>Input "number" type</h3>
<form>
<label>Enter your age: </label>
<input type="number" name="num" min="50" max="80">
<input type="submit">
</form>
<p><strong>Note:</strong>It will allow to enter number in range of
50-80. If you want to enter number other than range, it will show an
error.</p>
</body>
</html>
Output
<input type="search">
• The <input> type "search" creates an input filed which
allows a user to enter a search string. These are
functionally symmetrical to the text input type, but may be
styled differently.

<form>
<label>Search here:</label>
<input type="search" name="q">
<input type="submit" value="search">
</form>
Example
<!DOCTYPE html>
<html>

<body>
<h2>Input "search" type</h2>
<form>
<label>Search here:</label>
<input type="search" name="q">
<input type="submit" value="search">
</form>
</body>
</html>
Output
HTML <fieldset> element:
• The <fieldset> element in HTML is used to group the
related information of a form. This element is used with
<legend> element which provide caption for the grouped
elements.
<fieldset>
<legend>User Information:</legend>
.
.
.
.
.
</fieldset>
Example
<HTML>
<HEAD>
<TITLE>A Complete HTML Frameset Exmaple | TutorialsClass.com</TITLE>
</HEAD>
<body >
<form>
<fieldset>
<legend>User Information:</legend>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</fieldset>
</form>
</body>
</HTML>
Output