Table of Contents

HTML..................................................................................................................................................2
Markup language.............................................................................................................................2
HyperText........................................................................................................................................2
Tags.................................................................................................................................................2
Types of tag-....................................................................................................................................2
Attributes of tag:-............................................................................................................................4
Heading in HTML................................................................................................................................4
List in HTML:-....................................................................................................................................5
Image in Html......................................................................................................................................7
Link in HTML......................................................................................................................................7
Iframe...................................................................................................................................................7
Frameset in HTML..............................................................................................................................8
Table in HTML....................................................................................................................................9
Marquee.............................................................................................................................................10
Form in HTML...................................................................................................................................11
HTML Form Controls........................................................................................................................11
<input> tag.........................................................................................................................................11
Text Input Control....................................................................................................................12
Checkbox Control.........................................................................................................................12
Radio Button Control....................................................................................................................12
Select Box Control........................................................................................................................12
File Upload Box............................................................................................................................12
Button Controls.............................................................................................................................13
Form Example..........................................................................................................................13
Some more important tag: -...............................................................................................................15
HTML
Hyper Text Markup Language (HTML) is a markup language for creating a web
page. Web pages are usually viewed in a web browser. They can include text, links,
pictures, and even sound and video.

Markup language
A markup language is a computer language that uses tags to define elements within a
document. It is human-readable, meaning markup files contain standard words, rather
than typical programming syntax.

HyperText
Hypertext is text which contains links to other texts. It can include graphics, video
and sound.

Tags
HTML tags are the hidden keywords within a web page that define how your web
browser must format and display the content. Most tags must have two parts, an
opening and a closing part. Note that the closing tag has the same text as the opening
tag, but has an additional forward-slash (/) character.

Types of tag-
1. Paired tags or container tag.
2. Singular tags or empty tag.

Some Important points regarding html:-

1. HTML was created by Sir Tim Berners-Lee in 1991.
2. HTML is a markup language.
3. HTML is tag based language.
4. HTML is a case-insensitive.
5. HTML is easy to learn.

Software needed to work in html:-

Web Browser:- A web browser is an application used to access and view websites.
Common web browsers include Microsoft Internet Explorer, Google Chrome,
Mozilla Firefox, and Safari etc.

Text editor:- Editors or text editors are software programs that enable the user to
create and edit text files.

Some Basic tags of Html:-

<html>:- All web pages start with the html element. It’s also called the root element
<head>:- The <head> tag is used to contain specific information about a web page.

<title>:- A title tag is an HTML element that specifies the title of a web page.

<body>:- The <body> tag defines the document's body. The <body> element
contains all the contents of an HTML document, such as text, hyperlinks, images,
tables, lists, etc.

<b>:- Used to bold the text.

Syntax:-
<b> Some Text </b>

<u>:- Used to underline the text.

Syntax:-
<u> Some Text </u>

<i>:- Used to italic the text.

Syntax:-
<i> Some Text </i>

<mark>:- Used to highlight/mark the text.

Syntax:-
<mark> Some Text </mark>

Basic Syntax of html:-

<html>
<head>
<title>Title of web page</title>
</head>
 <body>
----
-----
</body>
</html>

Attributes of tag:-
An attribute is used to define the characteristics of an HTML element and is placed
inside the element's opening tag. All attributes are made up of two parts − a name and
a value. The name is the property you want to set.

Attributes of <body>:-

1) bgcolor:- This property is used to set the background color.

2) background:- This property is used to set the background pictures.
3) text:- This property is used to change the color of the text.
4) leftmargin
5) topmargin
6) bottommargin
7) rightmargin

Syntax:-
<body bgcolor=”” background=”” text=”” leftmargin=”” topmargin=””>
</body>

<font>:- <font> tag defines the font size, color and face of text in the HTML
document.

Attributes of <font>:-
1. color
2. size
3. face

Heading in HTML
HTML defines six levels of headings. The heading elements are H1, H2, H3, H4, H5,
and H6 with H1 being the highest (or most important) level and H6 the least.

Syntax:
<h1> heading text </h1>

<p>:- The HTML <p> element represents a paragraph

<br>:- The HTML <br> element produces a line break in text.

<pre>:- The <pre> tag defines preformatted text. The text will be displayed exactly
as written in the HTML source code.

Syntax:-
<pre>
Some text...
</pre>

List in HTML:-

HTML lists allow web developers to group a set of related items in lists.
In HTML there are two types of list.
1. Order list
2. Unordered list

1) Order list:- In ordered list <ol> tag is used.

Attributes of <ol>:-

1) type
2) start
The type attribute of the <ol> tag, defines the type of the list item marker:

Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
The list items will be numbered with uppercase roman
type="I"
numbers
 The list items will be numbered with lowercase roman
type="i"
numbers

2) unordered list:- In Unordered list <ul> tag is used.

Attributes of <ul>:-

1) type
value of type attribute are -
1. disc
2. circle
3. square
type property is used to define the style of the list item marker.

Example:-
<html>
<head>
<title>List</title>
</head>
<body>
<ol type="1">
<li><h1>Name of fruits</h1></li>
<ol type="a" start="1">
<li>Mango</li>
<li>Apple</li>
<li>Orange</li>
<li>Guava</li>
</ol>
<li><h1>Name of vegetable</h1></li>
<ul type="disc">
<li>Carrot</li>
<li>Tomato</li>
<li>Potato</li>
</ul>
</ol>
</body>
</html>
Image in Html
<img>:- The <img> tag is used to embed an image in an HTML page.

Attributes of <img> tag:-

1) src
2) height
3) width
4) border
5) hspace
6) vspace
7) alt
8) title
9) align

Example:-
<html>
<head>
<title>Image tag</title>
</head>
<body bgcolor="pink">
<img src="html/pic.jpg" border="10" height="100" width="400"
align="left" hspace="200" vspace="200" alt="Error! Image not found..">
</body>
</html>

Link in HTML

<a>:- The <a> tag defines a hyperlink, which is used to link from one page to another. The
most important attribute of the <a> element is the href attribute, which indicates the link's
destination.

Syntax:-
<a href =”destination of link” target=”_blank/_self” />

Iframe
<iframe>:- The <iframe> tag specifies an inline frame. An inline frame is used to embed
another document within the current HTML document.
Attributes of <iframe> tag:-

1) height
2) width
3) src
4) scrolling -> (yes/no)
5) frameborder
6) name
7) id

Example:
<html>
<head>
<title>ifrmae example</title>
</head>
<body>
<center>
<h1>Iframe example</h1>
<a href="first.html" target="frm">First.html</a>/
<a href="image.html" target="frm">image.html</a><br>
<iframe height="500" width="700" scrolling="no" frameborder="1"
name="frm" id="frm"></iframe>
</center>
</body>
</html>

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

Example:

<html>
<head>
<title>Frameset</title>
</head>
<frameset rows="20%,*">
 <frame src="header.html"/>
<frameset cols="20%,*">
<frame src="left.html" />
<frame src="" name="right" id="right" />
</frameset>
</frameset>
</html>

Table in HTML
<table>:- The <table> tag defines an HTML table. An HTML table consists of one <table>
element and one or more <tr>, <th>, and <td> elements. The <tr> element defines a table
row, the <th> element defines a table header, and the <td> element defines a table cell.

Example:
<html>
<head>
<title>Table Example</title>
</head>
<body>
<table border="5" height="150" width="200" cellspacing="10"
cellpadding="1" bordercolor="red" bgcolor="yellow" align="center">
<tr align = "center">
<td colspan="2"> Title</td>
</tr>
<tr bgcolor="pink">
<th rowspan="2">1</th1>
<th>2</th>
</tr>
<tr align="center" bgcolor="green">
<td>2</td>
</tr>
<tr align="right" bgcolor="orange">
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
Marquee
<marquee>:- The HTML <marquee> tag is used for scrolling piece of text or image
displayed either horizontally across or vertically down your web site page depending on the
settings.
Attributes of <marquee>:-
1) bgcolor
2) direction
3) height
4) hspace
5) loop
6) scrolldelay
7) scrollamount
8) width
9) vspace

Example:-
<html>
<head>
<title>Marquee</title>
</head>
<body>
<marquee bgcolor="yellow" height="50" width="100%"
direction="left" behavior="scroll" scrollamount="5"
scrolldelay="10">
<font size="7" color="red">Hello World</font>
</marquee>

<marquee bgcolor="orange" height="50"

width="100%"direction="right"behavior="alternate" scrollamount="2">
<font size="7" color="green">Hello World</font>
</marquee>

<marquee bgcolor="pink" height="100%" width="200" direction="up"

behavior="slide" scrolldelay="200">
<font size="7" color="blue">Hello World</font>
</marquee>
 </body>
</html>

Form in HTML

<form> tag:- The HTML <form> tag is used for creating a form for user input. A form can
contain textfields, checkboxes, radio-buttons and more. Forms are used to pass user-data to
a specified URL.
Attributes of tag:-
1) action : The purpose of the HTML action attribute is to specify the URL of a form
processor (for example a PHP script which handles the form data).
2) method : get,post

3) name : Specify the name of form.

4) enctype : text/plain, multipart/form-data

HTML Form Controls

There are different types of form controls that you can use to collect data using HTML form
−
• Text Input Controls
• Checkboxes Controls
• Radio Box Controls
• Select Box Controls
• File Select boxes
• Hidden Controls
• Clickable Buttons
• Submit and Reset Button

<input> tag
The <input> tag specifies an input field where the user can enter data. The <input> element
is the most important form element. The <input> element can be displayed in several ways,
depending on the type attribute.
Attributes of Input tag:-
1) type
2) name
3) id
4) placeholder
5) size
6) maxlength
7) required
8) value

Text Input Control

There are three types of text input used on forms −
Single-line text input controls
Password input controls
Multi-line text input controls

Checkbox Control
Checkboxes are used when more than one option is required to be selected. They are also
created using HTML <input> tag but type attribute is set to checkbox.

Radio Button Control

Radio buttons are used when out of many options, just one option is required to be selected.
They are also created using HTML <input> tag but type attribute is set to radio.

Select Box Control

A select box, also called drop down box which provides option to list down various options
in the form of drop down list, from where a user can select one or more options.

File Upload Box

If you want to allow a user to upload a file to your web site, you will need to use a file
upload box, also known as a file select box. This is also created using the <input> element
but type attribute is set to file.
Button Controls
There are various ways in HTML to create clickable buttons. You can also create a clickable
button using <input>tag by setting its type attribute to button. The type attribute can take
the following values −
1) submit:- This creates a button that automatically submits a form.
2) reset:- This creates a button that automatically resets form controls to their initial values.
3) button:- This creates a button that is used to trigger a client-side script when the user
clicks that button.
4) image:-This creates a clickable button but we can use an image as background of the
button.

Form Example

<html>
<head>
<title>Student Registration form</title>
</head>
<body>
<form action="first.html" method="post">
<table border="1" height="400" width="100%">
<tr align="left">
<th colspan="2"><font color="darkred" size="5"><u>Student Registration Form</u></th>
</tr>
<tr>
<td>Student Name</td>
<td><input type="text" name="st_name" /></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="st_email" /></td>
</tr>
<tr>
<td>Select Gender</td>
<td><input type="radio" name="st_gen" value="Male" />Male
<input type="radio" name="st_gen" value="Female" />Female
</td>
</tr>
<tr>
<td>Select Subject</td>
<td><input type="checkbox" name="st_sub" value="JAVA" />JAVA
<input type="checkbox" name="st_sub" value="Internet" />Internet
<input type="checkbox" name="st_sub" value="Python" />Python
<input type="checkbox" name="st_sub" value="C++" />C++
<input type="checkbox" name="st_sub" value="Architecture" />Architecture
</td>
</tr>
<tr>
<td>Select City</td>
<td>
<select name="st_city">
<option>Allahabad</option>
<option>Kanur</option>
<option>Lucknow</option>
</select>
</td>
</tr>
<tr>
<td>Upload Photo</td>
<td><input type="file" name="st_photo" /></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="reset" value="Cancel" />
<input type="submit" value="Submit form">
</td>
</tr>
</table>
</form>
</body>
</html>
Some more important tag: -
<!Doctype>:- Doctype stands for Document Type Declaration. It informs the
web browser about the type and version of HTML used in building the web
document.

<link>:- The <link> tag defines the relationship between the current document
and an external resource. The <link> tag is most often used to link to external
style sheets.

Syntax:-
<link rel=”stylesheet” type=”text/css” href=”style.css” />

<meta> tag:- The <meta> tag defines metadata about an HTML

document. Metadata is data (information) about data. <meta> tags always go
inside the <head> element, and are typically used to specify character set,
page description, keywords, author of the document, and viewport settings.

<script> tag:- The <script> tag is used to embed a client-

side script (JavaScript). The <script> element either
contains scripting statements, or it points to an external script file through
the src attribute.

<style> tag:- The <style> tag is used to define style information (CSS) for a
document. Inside the <style> element you specify how HTML elements should
display in a browser.