Eswi HTML Unit 4_2 Notes
Eswi HTML Unit 4_2 Notes
HTML stands for Hypertext Markup Language, and it is the most widely used language to
write Web Pages.
Hypertext refers to the way in which Web pages (HTML documents) are linked
together. Thus, the link available on a webpage is called Hypertext.
As its name suggests, HTML is a Markup Language which means you use HTML to
simply "mark-up" a text document with tags that tell a Web browser how to structure
it to display.
Originally, HTML was developed with the intent of defining the structure of documents like
headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information
between researchers.
Now, HTML is being widely used to format web pages with the help of different tags available
in HTML language.
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here .... </p>
</body>
</html>
HTML
HTML Tags
As told earlier, HTML is a markup language and makes use of various tags to format the
content. These tags are enclosed within angle braces <Tag Name>. Except few tags, most
of the tags have their corresponding closing tags. For example, <html> has its closing
tag</html> and <body> tag has its closing tag </body> tag etc.
Tag Description
<!DOCTYPE...> This tag defines the document type and HTML version.
This tag encloses the complete HTML document and mainly comprises
<html> of document header which is represented by <head>...</head> and
document body which is represented by <body>...</body> tags.
This tag represents the document's header which can keep other HTML
<head>
tags like <title>, <link> etc.
The <title> tag is used inside the <head> tag to mention the
<title>
document title.
This tag represents the document's body which keeps other HTML tags
<body>
like <h1>, <div>, <p> etc.
<body>
Document body related tags
</body>
</html>
We will study all the header and body tags in subsequent chapters, but for now let's see what
is document declaration tag.
<!DOCTYPE html>
There are many other declaration types which can be used in HTML document depending on
what version of HTML is being used. We will see more details on this while discussing
<!DOCTYPE...> tag along with other HTML tags.
HTML
Heading Tags
Any document starts with a heading. You can use different sizes for your headings. HTML also
has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and
<h6>. While displaying any heading, browser adds one line before and one line after that
heading.
Example
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of
text should go in between an opening <p> and a closing </p> tag as shown below in the
example:
Example
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
The <br /> tag has a space between the characters br and the forward slash. If you omit this
space, older browsers will have trouble rendering the line break, while if you miss the forward
slash character and just use <br> it is not valid in XHTML.
Example
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment on time.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>
Hello
You delivered your assignment on time.
Thanks
Mahnaz
Centering Content
You can use <center> tag to put any content in the center of the page or any table cell.
Example
<!DOCTYPE html>
<html>
<head>
HTML
Horizontal Lines
Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates
a line from the current position in the document to the right margin and breaks the line
accordingly.
For example, you may want to give a line between two paragraphs as in the given example
below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
HTML
Again <hr /> tag is an example of the empty element, where you do not need opening and
closing tags, as there is nothing to go in between them.
The <hr /> element has a space between the characters hr and the forward slash. If you
omit this space, older browsers will have trouble rendering the horizontal line, while if you
miss the forward slash character and just use <hr> it is not valid in XHTML
Preserve Formatting
Sometimes, you want your text to follow the exact format of how it is written in the HTML
document. In these cases, you can use the preformatted tag <pre>.
Any text between the opening <pre> tag and the closing </pre> tag will preserve the
formatting of the source document.
Example
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>
HTML
An HTML element is defined by a starting tag. If the element contains other content, it ends
with a closing tag, where the element name is preceded by a forward slash as shown below
with few tags:
<br />
HTML documents consists of a tree of these elements and they specify how HTML documents
should be built, and what kind of content should be placed in what part of an HTML document.
For example, <p> is starting tag of a paragraph and </p> is closing tag of the same
paragraph but <p>This is paragraph</p> is a paragraph element.
Example
HTML
HTML
<head>
If you use a word processor, you must be familiar with the ability to make text bold, italicized,
or underlined; these are just three of the ten options available to indicate how text can appear
in HTML and XHTML.
Bold Text
Anything that appears within <b>...</b> element, is displayed in bold as shown below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>
Italic Text
Anything that appears within <i>...</i> element is displayed in italicized as shown below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
HTML
<body>
<p>The following word uses a <i>italicized</i> typeface.</p>
</body>
</html>
Underlined Text
Anything that appears within <u>...</u> element, is displayed with underline as shown
below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses a <u>underlined</u> typeface.</p>
</body>
</html>
Strike Text
Anything that appears within <strike>...</strike> element is displayed with strikethrough,
which is a thin line through the text as shown below:
Example
<!DOCTYPE html>
<html>
<head>
HTML
Monospaced Font
The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts are
known as variable-width fonts because different letters are of different widths (for example,
the letter 'm' is wider than the letter 'i'). In a monospaced font, however, each letter has the
same width.
Example
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>
Superscript Text
The content of a <sup>...</sup> element is written in superscript; the font size used is the
same size as the characters surrounding it but is displayed half a character's height above
the other characters.
HTML
Example
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>
Subscript Text
The content of a <sub>...</sub> element is written in subscript; the font size used is the
same as the characters surrounding it, but is displayed half a character's height beneath the
other characters.
Example
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>
Inserted Text
Anything that appears within <ins>...</ins> element is displayed as inserted text.
Example
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>
Deleted Text
Anything that appears within <del>...</del> element, is displayed as deleted text.
Example
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>
Larger Text
The content of the <big>...</big> element is displayed one font size larger than the rest of
the text surrounding it as shown below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>
Smaller Text
The content of the <small>...</small> element is displayed one font size smaller than the
rest of the text surrounding it as shown below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
HTML
</html>
Grouping Content
The <div> and <span> elements allow you to group together several elements to create
sections or subsections of a page.
For example, you might want to put all of the footnotes on a page within a <div> element to
indicate that all of the elements within that <div> element relate to the footnotes. You might
then attach a style to this <div> element so that they appear using a special set of style rules.
Example
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id="menu" align="middle" >
<a href="/index.htm">HOME</a> |
<a href="/about/contact_us.htm">CONTACT</a> |
<a href="/about/index.htm">ABOUT</a>
</div>
CONTENT ARTICLES
The <span> element, on the other hand, can be used to group inline elements only. So, if
you have a part of a sentence or paragraph which you want to group together, you could use
the <span> element as follows
Example
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style="color:green">span tag</span> and the <span
style="color:red">div tag</span> alongwith CSS</p>
</body>
</html>
This is the example of span tag and the div tag along with CSS
HTML lets you specify metadata - additional important information about a document in a
variety of ways. The META elements can be used to include name/value pairs describing
properties of the HTML document, such as author, expiry date, a list of keywords, document
author etc.
The <meta> tag is used to provide such additional information. This tag is an empty element
and so does not have a closing tag but it carries information within its attributes.
You can include one or more meta tags in your document based on what information you
want to keep in your document but in general, meta tags do not impact physical appearance
of the document so from appearance point of view, it does not matter if you include them or
not.
Attribute Description
Name Name for the property. Can be anything. Examples include, keywords,
description, author, revised, generator etc.
scheme Specifies a scheme to interpret the property's value (as declared in the
content attribute).
http- Used for http response message headers. For example, http-equiv can be
equiv used to refresh the page or to set a cookie. Values include content-type,
expires, refresh and set-cookie.
Specifying Keywords
You can use <meta> tag to specify important keywords related to the document and later
these keywords are used by the search engines while indexing your webpage for searching
purpose.
Example
Following is an example, where we are adding HTML, Meta Tags, Metadata as important
keywords about the document.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
Hello HTML5!
Document Description
You can use <meta> tag to give a short description about the document. This again can be
used by various search engines while indexing your webpage for searching purpose.
Example
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Learning about Meta Tags." />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
HTML LINKS AND NAVIGATION
<!DOCTYPE html>
<html>
<body>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>
</body>
</html>
Output:
Notice that NOT all links of a document should be inside a <nav> element.
The <nav> element is intended only for major blocks of navigation links.
Browsers, such as screen readers for disabled users, can use this element to
determine whether to omit the initial rendering of this content.
Image – Image maps
In this article, we will know the HTML Image, how to add the image in HTML, along with
knowing its implementation & usage through the examples. In earlier times, the web pages
only contains textual contents, which made them appear quite boring and uninteresti ng.
Fortunately, it wasn’t long enough that the ability to embed images on web pages was
added for users. In this article, we will know how to add images to the web page that will
make the website attractive & various methods to insert the images.
There are 2 ways to insert the images into a webpage:
By providing a full path or address (URL) to access an internet file.
By providing the file path relative to the location of the current web page file.
We will first discuss inserting the image to the webpage & simultaneously, we will
understand both the above approaches.
Adding images on a webpage: The <img> tag is used to add or embed the images to a
webpage/website. The “img” tag is an empty tag, which means it can contain only a list of
attributes and it has no closing tag. The addition of the images improves the quality along
with enhancing the design structure, appearance of the webpage. Nowadays, a website
does not directly add images to a web page, as the images are linked to web pages by
using the <img> tag which holds space for the image.
Syntax:
<img src="url" alt="some_text" width="" height="">
<!DOCTYPE html>
<html>
<body>
Output:
Image Maps:
The HTML <map> tag defines an image map. An image map is an image with
clickable areas. The areas are defined with one or more <area> tags.
<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page
and read more about the topic:</p>
<map name="workmap">
</map>
</body>
</html>
Output:
HTML Lists
HTML Lists are used to specify lists of information. All lists may contain one or more list elements.
There are three different types of HTML lists:
1. <ol>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
5. <li>Oracle</li>
6. </ol>
Output:
1. Aries
2. Bingo
3. Leo
4. Oracle
Output:
o Aries
o Bingo
o Leo
o Oracle
The definition list is very appropriate when you want to present glossary, list of terms or other
name-value list.
1. <dl>
2. <dt>Aries</dt>
3. <dd>-One of the 12 horoscope sign.</dd>
4. <dt>Bingo</dt>
5. <dd>-One of my evening snacks</dd>
6. <dt>Leo</dt>
7. <dd>-It is also an one of the 12 horoscope sign.</dd>
8. <dt>Oracle</dt>
9. <dd>-It is a multinational technology corporation.</dd>
10. </dl>
Output:
Aries
-One of the 12 horoscope sign.
Bingo
-One of my evening snacks
Leo
-It is also an one of the 12 horoscope sign.
Oracle
-It is a multinational technology corporation.
HTML - Tables
The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into
rows and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to create table
rows and <td> tag is used to create data cells. The elements under <td> are regular and left aligned
by default
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used
to represent actual data cell. Normally you will put your top row as table heading as shown below,
otherwise you can use <th> element in any row. Headings, which are defined in <th> tag are
centered and bold by default.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Cell padding and Cell spacing Attributes
There are two attributes called cellpadding and cellspacing which you will use to adjust the white
space in your table cells. The cellspacing attribute defines space between table cells, while
cellpadding represents the distance between cell borders and the content within a cell.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body></html>
Colspan and Rowspan Attributes
You will use colspan attribute if you want to merge two or more columns into a single column.
Similar way you will use rowspan if you want to merge two or more rows.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body></html>
Tables Backgrounds
You can set table background using one of the following two ways −
bgcolor attribute − You can set background color for whole table or just for one cell.
background attribute − You can set background image for whole table or just for one cell.
You can also set border color also using bordercolor attribute.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body></html>
HTML Forms
<form> is a HTML element to collect input data with containing interactive controls. It
provides facilities to input text, number, values, email, password, and control fields such
as checkboxes, radio buttons, submit buttons, etc., or in other words, form is a container
that contains input elements like text, email, number, radio buttons, checkboxes, submit
buttons, etc. Forms are generally used when you want to collect data from the user. For
example, a user wants to buy a bag online, so he/she has to first enter their shipping
address in the address form and then add their payment details in the payment form to
place an order.
Forms are created by placing input fields within paragraphs, preformatted text, lists and
tables. This gives considerable flexibility in designing the layout of forms.
Syntax:
<form>
<!--form elements-->
</form>
Form elements
In an HTML form, we use the <input> tag by assigning type attribute value to text to
input single line input. To define type attribute see the below syntax.
Tip: The default value of the type attribute is “text”.
Syntax:
<input />
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<form>
<p>
<label>Username : <input type="text" /></label>
</p>
<p>
<label>Password : <input type="password" /></label>
</p>
<p>
<button type="submit">Submit</button>
</p>
</form>
</body>
</html>
Radio Button in an HTML Form
To create a radio button, we use the <input> tag following by radio type to provide users
to choose a limited number of choices.
Syntax:
<input type="radio" name="radio_button_name" value="radio_button_value" />
Note: The radio button must have shared the same name to be treated as a group.
Note: The value attribute defines the unique value associated with each radio button.
The value is not shown to the user, but is the value that is sent to the server on “submit”
to identify which radio button that was selected.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form>
<label>Male<input type="radio" name="gender" value="male" /></label>
</form>
</body>
</html>
Output:
To create a checkbox in an HTML form, we use the <input> tag followed by the input
type checkbox. It is a square box to tick to activate this. It used to choose more options
at a time.
Syntax:
<input type="checkbox" name="select_box_name" value="select_box_value" />
Note: the “name” and “value” attributes are used to send the checkbox data to the
server.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Choose Language</h2>
<form>
<ul style="list-style-type:none;">
</ul>
</form>
</body>
</html>
Combobox is used to create a drop-down menu in your form which contains multiple
options. So, to create an Combobox in an HTML form, we use the <select> tag with
<option> tag. It is also known as a drop-down menu.
Syntax:
<select name="select_box_name">
<option value="value1">option1</option>
<option value="value2">option2</option>
<option value="value3">option3</option>
</select>
Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Select Your Nationality</h2>
<form>
<select name="language">
<option value="indian">Indian</option>
<option value="nepali">Nepali</option>
<option value="others">Others</option>
</select>
</form>
</body>
</html>
Submit button in an HTML Form
In the HTML form, submit button is used to submit the details of the form to the form
handler. A form handler is a file on the server with a script that is used to process input
data.
Syntax:
<button type="submit">submit</button>
In the HTML form, a text area is used to add comments or reviews, or addresses to the
form, in other words, the text area is a multi-line text input control. It contains an
unlimited number of characters, the text renders in a fixed-width font, and the size of the
text area is given by the <rows> and <cols> attributes. To create a text area in the form
use the <textarea> tag.
Syntax:
<textarea name="textarea_name">content</textarea>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Welcome CSE</h2>
<form>
<textarea name="welcomeMessage" rows="3" cols="40">Hi all</textarea>
</form>
</body>
</html>
HTML Semantic Elements
Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its
content.
In HTML there are some semantic elements that can be used to define different parts of
a web page:
<article>
<aside>
<footer>
<header>
<main>
<nav>
<section>
HTML <section> Element
The <section> element defines a section in a document.
Chapters
Introduction
News items
Contact information
An article should make sense on its own, and it should be possible to distribute it
independently from the rest of the web site.
Forum posts
Blog posts
User comments
Product cards
Newspaper articles
authorship information
copyright information
contact information
sitemap
back to top links
related documents
Syntax:
<audio>
<source src="file_name" type="audio_file_type">
</audio>
Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Click play button to play audio</h2>
<audio src="./test.mp3" controls></audio>
</body>
</html>
How to embed video in HTML?
To embed video in HTML, we use the <video> tag. It contains one or more video
sources at a time using <source> tag. It supports MP4, WebM, and Ogg in all modern
browsers. Only Ogg video format doesn’t support in Safari browser.
Syntax
<video>
<source src="file_name" type="video_file_type">
</video>
Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Click play button to play video</h2>
<video src="./test.mp4" controls></video>
</body>
</html>
What is HTML Web Storage?
With web storage, web applications can store data locally within the user's browser.
Before HTML5, application data had to be stored in cookies, included in every server
request. Web storage is more secure, and large amounts of data can be stored locally,
without affecting website performance.
Unlike cookies, the storage limit is far larger (at least 5MB) and information is never
transferred to the server.
Web storage is per origin (per domain and protocol). All pages, from one origin, can
store and access the same data.
Before using web storage, check browser support for localStorage and sessionStorage:
Example
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Try it Yourself »
The following example counts the number of times a user has clicked a button, in the
current session:
Example
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";