Unit 2

HTML BASICS
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.
WWW
World Wide Web, which is also known as a Web, is a collection of websites or web pages
stored in web servers and connected to local computers through the internet. These
websites contain text pages, digital images, audios, videos, etc. Users can access the
content of these sites from any part of the world over the internet using their devices such
as computers, laptops, cell phones, etc. The WWW, along with internet, enables the
retrieval and display of text and media to your device.
The building blocks of the Web are web pages which are formatted in HTML and
connected by links called "hypertext" or hyperlinks and accessed by HTTP. These links
are electronic connections that link related pieces of information so that users can access
the desired information quickly. Hypertext offers the advantage to select a word or phrase
from text and thus to access other pages that provide additional information related to that
word or phrase.

A web page is given an online address called a Uniform Resource Locator (URL). A
particular collection of web pages that belong to a specific URL is called a website,
e.g., [Link], [Link], etc. So, the World Wide Web is like a huge
electronic book whose pages are stored on multiple servers across the world.

Small websites store all of their WebPages on a single server, but big websites or
organizations place their WebPages on different servers in different countries so that when
users of a country search their site they could get the information quickly from the nearest
server.

So, the web provides a communication platform for users to retrieve and exchange
information over the internet. Unlike a book, where we move from one page to another in
a sequence, on World Wide Web we follow a web of hypertext links to visit a web page
and from that web page to move to other web pages. You need a browser, which is installed
on your computer, to access the Web.
W3C
W3C stands for World Wide Web Consortium. It is basically the main international
establishment for the WWW(World Wide Web). The main motive behind the World
Wide Web Consortium is to lead the web to its full potential and to ensure regular
development of the web. It serves the purpose of developing various protocols in order to
ensure the growth of the web. It consists of organizations that provide full time working
for staff in order to ensure the development of the web. Currently, the W3C is being led
by Tim Berners-Lee and has a staff of 443 members. The main headquarters of W3C is
located in Cambridge, Massachusetts, United States.
Characteristics of W3C
 It is responsible for creating and publishing web standards.
 It also ensures the growth and development of web.
 It also develops the standards for web scripting, web applications and other dynamic
contents.
 It is an organization which helps in the promotion of interoperability by the
promotion and designing of open protocols.
 W3C uses the principles of modularity, simplicity and extensibility while designing
web protocols
Web Publishing
Web publishing is the process of publishing original content on the Internet.
The process includes building and uploading websites, updating the associated
webpages, and posting content to these webpages online. Web publishing comprises of
personal, business, and community websites in addition to e-books and blogs.
The content meant for web publishing can include text, videos, digital images, artwork,
and other forms of media.
Publishers must possess a web server, a web publishing software, and an Internet
connection to carry out web publishing.
Web publishing is also known as online publishing.
Components of web Publishing
Web publishing involves several components that work together to make content
available on the internet. Here are a few key components:
Content: The content is the information or media that is being published on the website.
This can include text, images, videos, audio, and other types of multimedia.
Web server: A web server is a computer that runs software that allows it to host and
serve web pages to users. It stores all the files and data of the website.
Domain name: A domain name is the address that users type into their web browser to
access a website (e.g. [Link])
HTML and CSS: HTML and CSS are the languages used to create the structure and
design of a website.
Web design: The design of a website is important for user experience and accessibility.
Optimization: Optimizing a website for search engines and user experience is
important for better visibility on the web.
Maintenance: Regular maintenance and updates are required to keep the website
running smoothly and to ensure that the content remains relevant.
 Security: Website security measures should be implemented to protect against hacking
and other security threats.
Analytics: Website analytics should be used to track user behavior and website
performance, which can help inform future updates and improvements.
 Introduction to 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.
 Html Document structure
Html used predefined tags and attributes to tell the browser how to display content, means
in which format, style, font size, and images to display. Html is a case insensitive language.
Case insensitive means there is no difference in upper case and lower case ( capital and
small letters) both treated as the same, for r example ‘D’ and ‘d’ both are the same here.
There are generally two types of tags in HTML:

Paired Tags: These tags come in pairs. That is they have both opening(< >) and closing(</
>) tags.
Empty Tags: These tags do not require to be closed.
Below is an example of a (<b>) tag in HTML, which tells the browser to bold the text
inside it.

Below is an example of a (<b>) tag in HTML, which tells the browser to bold the text
inside it.
Tags and attributes: Tags are individuals of html structure, we have to open and close
any tag with a forward slash like this <h1> </h1>. There are some variations with the tag
some of them are self-closing tag which isn’t required to close and some are empty tag
where we can add any attributes in it. Attributes are additional properties of html tags that
define the property of any html tags. i.e. width, height, controls, loops, input, and autoplay.
These attributes also help us to store information in meta tags by using name, content, and
type attributes. Html documents structured mentioned below:

Structure of an HTML Document

An HTML Document is mainly divided into two parts:

HEAD: This contains the information about the HTML document. For Example, the Title
of the page, version of HTML, Meta Data, etc.
BODY: This contains everything you want to display on the Web Page.

 Physical and Logical Tags

 HTML Tags: Tags are the starting and ending parts of an HTML element. They
begin with < symbol and end with > symbol. Whatever written inside < and >
are called tags.
 Example:
 <b> </b>
 HTML elements: Elements enclose the contents in between the tags. They
consist of some kind of structure or expression. It generally consists of a start
tag, content and an end tag.
  Example:


 Where, <b> is the starting tag and </b> is the ending tag.

 HTML Attributes: It is used to define the character of an HTML element. It
always placed in the opening tag of an element. It generally provides additional
styling (attribute) to the element.

Physical and Logical tags are used in HTML for better visibility and understanding of
the text by the user on the web page. However, both tags differ from each other as
suggested by their names.
 Logical Tags :
Logical Tags are used in HTML to display the text according to the logical
styles. Following are the Logical tags commonly used in HTML.
 Logical Tags
Tag Description

<abbr> Defines an abbreviation

<acronym> Defines an acronym

 Tag Description

<address> Defines an address element

<cite> Defines citation

<code> Defines computer code text

<blockquote> Defines a long quotation

<del> Defines text

<dfn> Defines a definition term

<ins> Defines inserted text

<kbd> Defines keyboard text

<pre> Defines preformatted text

<q> Defines short quotation

<samp> Defines sample computer code

<strong> Defines strong text

<var> Defines a variable

 Physical Tags
Physical Tags are used in HTML to provide actual physical formatting to the text.
Following are the Physical tags commonly used in HTML.
Physical Tags
Tag Description

<b> Defines bold text

<big> Defines big text

<i> Defines italic text

 Tag Description

<small> Defines small text

<sup> Defines superscripted text

<sub> Defines subscripted text

<tt> Defines teletype text

<u> Deprecated. Use styles instead

Basic HTML Tags
Head Tag
The head tag <head> contains all the elements describing the document.

Title Tag
The title tag <title> specifies the HTML page title, which is shown in the browser’s title
bar.

Body Tag
The body tag <body> is where you insert your web page’s content.

Paragraph Tag
A paragraph tag <p> is used to define a paragraph on a web page.

Heading Tag
The HTML heading tag is used to define the heading of the HTML document. The <h1>
tag defines the most important tag, and <h6> defines the least.
HTML <a> Tag
The <a> tag (anchor tag) in HTML is used to create a hyperlink on the webpage. This
hyperlink is used to link the webpage to other web pages or some section of the same web
page. It’s either used to provide an absolute reference or a relative reference as its “href”
value.

Syntax:

<a href = "link"> Link Name </a>

<!DOCTYPE html>
<html>

<body>
<h2>
Welcome to GeeksforGeeks
 HTML Tutorial
</h2>

<a href=
" [Link]
Sandip University Homepage
</a>
</body>

</html>
 Image tag
HTML img tag is used to display image on the web page. HTML img tag is an empty tag
that contains attributes only, closing tags are not used in HTML image element.

Let's see an example of HTML image.

<h2>HTML Image Example</h2>

<img src="good_morning.jpg" alt="Good Morning Friends"/>

Output:

Attributes of HTML img tag

The src and alt are important attributes of HTML img tag. All attributes of HTML image
tag are given below.

1) src
It is a necessary attribute that describes the source or path of the image. It instructs the
browser where to look for the image on the server.

The location of image may be on the same directory or another server.

2) alt
The alt attribute defines an alternate text for the image, if it can't be displayed. The value
of the alt attribute describe the image in words. The alt attribute is considered good for
SEO prospective.

3) width
It is an optional attribute which is used to specify the width to display the image. It is not
recommended now. You should apply CSS in place of width attribute.

4) height
It h3 the height of the image. The HTML height attribute also supports iframe, image and
object elements. It is not recommended now. You should apply CSS in place of height
attribute.
Use of height and width attribute with img tag
You have learnt about how to insert an image in your web page, now if we want to give
some height and width to display image according to our requirement, then we can set it
with height and width attributes of image.

Example:
<img src="[Link]" height="180" width="300" alt="animal image">
<!DOCTYPE html>
<html>
<head>
<title>Image tag</title>
</head>
<body>
<h2>HTML image example with height and width</h2>
<img src="[Link] height="180"
width="300" alt="animal image">
</body>
</html>

Use of alt attribute

We can use alt attribute with tag. It will display an alternative text in case if image
cannot be displayed on browser. Following is the example for alt attribute:

<img src="[Link]" height="180" width="300" alt="animal image">

In above statement we have put image in local disk E------>images folder------
>[Link].

Use <img> tag as a link

We can also link an image with other page or we can use an image as a link. To do this,
put <img> tag inside the <a> tag.

Example:
<a href="[Link] src="[Link]"
height="100" width="100"></a>

How to get image from another directory/folder?

To insert an image in your web, that image must be present in your same folder where
you have put the HTML file. But if in some case image is available in some other
directory then you can access the image like this:

<img src="E:/images/[Link]" height="180" width="300" alt="animal image">

In above statement we have put image in local disk E------>images folder------
>[Link].
Use <img> tag as a link
We can also link an image with other page or we can use an image as a link. To do this,
put <img> tag inside the <a> tag.
<!DOCTYPE html>
<html>
<head>
<title>Image tag</title>
</head>
<body>
<h2>Use image as a link</h2>
<p>Click on the image to know about robotics</p>
<a href="[Link]
src="[Link] height="100"
width="100"></a>
</body>
</html>
  List tag
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:

Ordered List or Numbered List (ol)

Unordered List or Bulleted List (ul)
Description List or Definition List (dl)
HTML Ordered List or Numbered List
<ol>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ol>
HTML Unordered List or Bulleted List
<ul>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ul>
HTML Description List or Definition List
<dl> tag defines the start of the list.
<dt> tag defines a term.
<dd> tag defines the term definition (description)

FORMATTING TEXT FONTS

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 −

Start Tag Content End Tag

 <p> This is paragraph content. </p>
<h1> This is heading content. </h1>
<div> This is division content. </div>
<br />

So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML element. There

are some HTML elements which don't need to be closed, such as <img.../>, <hr /> and
<br /> elements. These are known as void elements.

 Text Elements
HTML also defines special elements for defining text with a special meaning.

Formatting elements were designed to display special types of text:

 <b> - Bold text

 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Small text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

HTML <b> and <strong> Elements

The HTML <b> element defines bold text, without any extra importance.

Example
<b>This text is bold</b>

The HTML <strong> element defines strong text, with added semantic "strong"
importance.

Example
<strong>This text is strong</strong>

HTML <i> and <em> Elements

The HTML <i> element defines italic text, without any extra importance.

Example
<i>This text is italic</i>

The HTML <em> element defines emphasized text, with added semantic importance.
Example
<em>This text is emphasized</em>

HTML <small> Element

The HTML <small> element defines smaller text:

Example
<h2>HTML <small>Small</small> Formatting</h2>

HTML <mark> Element

The HTML <mark> element defines marked or highlighted text:

Example
<h2>HTML <mark>Marked</mark> Formatting</h2>

HTML <del> Element

The HTML <del> element defines deleted (removed) text.

Example
<p>My favorite color is <del>blue</del> red.</p>

HTML <ins> Element

The HTML <ins> element defines inserted (added) text.

Example
<p>My favorite <ins>color</ins> is red.</p>

HTML <sub> Element

The HTML <sub> element defines subscripted text.

Example
<p>This is _subscripted text.</p>

HTML <sup> Element

The HTML <sup> element defines superscripted text.

Example
<p>this is ^{superscripted} text. </p>

 Background color
By default, your webpage background is white in color. You may not like it, but no
worries. HTML provides you following two good ways to decorate your webpage
background.

 HTML Background with Colors

 HTML Background with Images

HTML Background with Colors

 The bgcolor attribute is used to control the background of an HTML element,

specifically page body and table backgrounds.
Following is the syntax to use bgcolor attribute with any HTML tag.

<body bgcolor="color_name|hex_number|rgb_number">

Example:

<!DOCTYPE html>
<html>

<head>
<title>HTML Background Colors</title>
</head>

<body>
<!-- Format 1 - Use color name -->
<table bgcolor = "yellow" width = "100%">
<tr>
<td>
This background is yellow
</td>
</tr>
</table>

<!-- Format 2 - Use hex value -->

<table bgcolor = "#6666FF" width = "100%">
<tr>
<td>
This background is sky blue
</td>
</tr>
</table>

<!-- Format 3 - Use color value in RGB terms -->

<table bgcolor = "rgb(255,0,255)" width = "100%">
<tr>
<td>
This background is green
 </td>
</tr>
</table>
</body>

</html>

OUTPUT:

 HTML <a> Tag

The <a> tag (anchor tag) in HTML is used to create a hyperlink on the webpage. This
hyperlink is used to link the webpage to other web pages or some section of the same web
page. It’s either used to provide an absolute reference or a relative reference as its “href”
value.

Syntax:

<a href = "link"> Link Name </a>

<!DOCTYPE html>
<html>

<body>
<h2>
Welcome to Sandip University
HTML Tutorial
</h2>

<a href=
" [Link]
Sandip University Homepage
</a>
</body>

</html>
HTML Links - Use an Image as a Link

To use an image as a link, just put the <img> tag inside the <a> tag:
Example
<a href="[Link]">
<img src="[Link]" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

Output:

 Image Maps

With HTML image maps, you can create clickable areas on an image.

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.

How Does it Work?

The idea behind an image map is that you should be able to perform different actions
depending on where in the image you click.
To create an image map you need an image, and some HTML code that describes the
clickable areas.
Check the below link for the complete topic…

[Link]

 Module-2
 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

Tag Description
<table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.

<colgroup> It specifies a group of one or more columns in a table for formatting.

<col> It is used with <colgroup> element to specify column properties for each column.

<tbody> It is used to group the body content in a table.

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.

<!DOCTYPE>
<html>
<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>Swa </td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
</body>
</html>

1) HTML Border attribute

 2) CSS Border property
3) HTML Table with cell padding
4) HTML Table width
5) HTML Table with colspan/ rowspan
6) HTML table with caption

 HTML forms - Input type, Text area, Select, Button, Images

TML Forms are used to send data across the web, like login, signup, search etc. Forms are
often used as contact form to convert information input by a user into leads. Forms
includes many inputs controls like text, password, file, radio, checkbox etc.

The elements used in HTML form are form tag as parent, input, textarea,, select, button
and label.
HTML Form Tag
Form Tag defines the form and within this tag, there is action attribute which tells the form
where its contents will be sent when it is submitted.

An HTML form can have input elements, checkbox, radio buttons, submit button and
more.A form can also contain select dropdown, textarea, fieldset, legend, and label
elements.

Create HTML Form

form is build inside <form> tag. See the code below:

<form action="" method="get" name="enquiry">

/* Content */
</form>

Form tag Attributes

HTML Form Attributes

Attribute Values Use

method get or http get method submit form data but is visible in url.
post post includes data in body. more secure as data is not visible to user in
url
action path the backend file collecting form data

name any name name of form control

Input Element
The most important form element is the input element. The input element is used to get
user information. An input element can be of type text, password, checkbox, radio
button, submit button and more.

The default input type is text.

Attributes in Input element

Attribute Name values Use

type text, password, file, radio, type defines type of input control.
checkbox, button, submit, and
reset

size default value is 20 change size of input control

tabindex any numeric value used to define a sequence followed by

user when he navigate using Tab key

value any possible value set a default value of input control

maxlength n digits set maximum characters limit

disabled disabled input control, or fieldset tag

checked Check checkbox or radio button

multiple Used in input type file for multiple files

upload

Input Type Text

Input type text <input type="text"> is the common input element for name, surname,
country, numbers and symbols in single line. Default input type is always text. But still it
is recommended to define type attribute in input element.
Inputs are always used inside label.
HTML Input type text
First Name: Last Name:
<label>First Name: <input type="text"></label>
<label>Last Name: <input type="text"></label>
Label
Label tag is used to write the content just before text field. To Specify particular label,
place input inside label or the value of for attribute inside label should match the id of
input control.
Input in Label
First Name:
<label>First Name: <input type="text"></label>
value attribute
value attribute can also be used inside input or textarea. Usually we ask user to fill
values, but if value is fixed, use value attribute.

First Name: First Name

Last Name: Last Name
Example:
<form>
<label for="fname">First Name:</label>
<input type="text" value="First Name" id="fname" >

<label for="lname">Last Name:</label>

<input type="text" value="Last Name" id="lname" >
</form>
Maxlength
maxlength attribute is used to restrict no of characters in a text field. maxlength value is
a number. Maxlength attribute is useful for form validations.

Input with maxlength

First Name:
Age:
Example:
<form>
<label for="fname">First Name:</label>
<input type="text" id="fname" maxlength="10">

<label for="age">Age:</label>
<input type="text" id="age" maxlength="3">
</form>
Size
Size attribute is used to set the size of input or textarea. The default size is 20. To
increase or decrease input size, change value of size.
size attribute example
Age:
<label>Age: <input type="text" size="3"> </label>

Pincode:
<label>Pincode: <input type="text" size="6" maxlength="6"></label>
Input type Password
The input type password is used to write passwords. The password value is written in
encrypt form. i.e. a user cannot see, copy or cut password data from input type password.
Input type password example
Password:

<form>
 <label for="pwd">Password:</label>
<input type="password" id="pwd" >
</form>
Input type File
Input type file let user to choose file from his system. This can be used to upload a
picture, upload resume, upload a video or audio etc.
Default value of input type file is "No file chosen". Once the file is uploaded, the file
name replace this text followed by extension.

Resume: No file chosen

<form>
<label for="resume">Resume:</label>
<input type="file" id="resume">
</form>
Input type file with multiple

Upload pictures : No file chosen

<form>
<label for="pics">Upload pictures : </label>
<input type="file" id="pics" multiple>
</form>
 Radio Buttons
Radio Buttons are used to choose a single element among a group.
To allow window to choose a single radio, use name attribute with same value on both
radio inputs.
 Radio Button For Multiple Questions

Checkbox
Checkbox are used to select multiple selections unlike radio button. They can be checked
and unchecked. We can use checkbox for hobbies, interests, terms & conditions, etc.
Form Checkbox

<label> <input type="checkbox"> :Bike</label>

<label> <input type="checkbox"> :Car</label>
Checkbox with disabled
Checbox can also have disabled attribute. A disabled checkbox can't be checked, means
checked will remain checked, and unchecked will remain unchecked. See example
Checkbox with checked
Default checkbox state is unchecked. But we can change default state to checked by
using checked attribute in input type checkbox. See example

Assignment -2
1. Explain w3C with its characteristics. (7/8)
2. Explain HTML with structure. (7/8)
3. Describe the components of Web Publishing. (7/8)
4. Explain HTML Tags, Logical and Physical Tags. (7/8)
5. Explain the image tag in html with syntax. (7/8)
6. Write html code to generate following output. (7/8)
• Coffee
• Tea
o Black Tea
o Green Tea
• Milk
7. Give Syntax with example for any 6 tags used for formatting text fonts. (7/8)
8. Explain the HTML Table tag with its attributes. (7/8)
9. Give the syntax for Label in Forms. (2)
[Link] Radio Button (2)
[Link] the term Hyper Text. (2)
[Link] the types of List Tags. (2)