What Is HTML?: Hypertext Means That The Document Contains Links That Allow The Reader To Jump

HTML
What is HTML?
HTML is an acronym which stands for Hyper Text Markup Language which is used

for creating web pages and web applications.
Hypertext means that the document contains links that allow the reader to jump
to other places in the document or to another document altogether.
 Hypertext is a way to link two or more web pages (HTML documents) with
each other.
Markup Language means we use HTML to simply "mark-up" a text document with
tags that tell a Web browser how to structure it to display.
First Program
<!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>
Description of HTML Example

<!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.
Features of HTML
 It is a very easy and simple language. It can be easily understood and

modified.
 It is very easy to make an effective presentation with HTML because it has

a lot of formatting tags.
 It is platform-independent because it can be displayed on any platform like

Windows, Linux, and Macintosh, etc.
 HTML is a case-insensitive language, which means we can use tags either in

lower-case or upper-case.
Building Blocks
Tags: Tags are used to mark up the start of an HTML element and they are usually
enclosed in angle brackets. An example of a tag is: <h1>.
Attributes: Attributes contain additional pieces of information. Attributes take

the form of an opening tag and additional info is placed inside.
An example of an attribute is:
<img src="mydog.jpg" alt="A photo of my dog.">
In this instance, the image source (src) and the alt text (alt) are attributes of
the <img > tag.
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.
Comments: The syntax of the comments in html is as following

<! -- Write your comments here -->
Programs
We have to save html programs with the extension .htm or .html
Headings
<!DOCTYPE html>
<html>
<head>
<title> Web Page for Headings </title>
</head>
<body>
<h1 align="center">Heading-1</h1>
<h2>See the GNU General Public License for more details.</h2>
</body>
</html>
Paragraphs
<html>
<head>
<title>
web page for paragraph.
</title>
</head>
<body>
<pre>
<p align="right">

This program is free software;you<sup> can </sup>redistributeit
and/or modify it RANTY;
without even the implied warranty of MERCHANTABILITY or FITNESS
</br>FOR A PARTICULAR
PURPOSE. See the GNU General <sub>Public</sub> License for more
details.
This program is free <b>software</b>;you can

<i>redistribute</i>it and/or modify it RANTY;
without even the implied warranty of MERCHANTABILITY or
<strong>FITNESS</strong> FOR A PARTICULAR
PURPOSE.
</p>
</pre>
</body>
</html>
Marquee tag
<!DOCTYPE html>
<html>
<head>
<title> Web Page for Marquee Tag </title>
</head>
<body>
<marquee direction="left" behavior="slide" bgcolor="blue">V Sem Results
out</marquee>
<marquee direction="right" behavior="alternate" bgcolor="pink">VI Sem
Results out</marquee>
<marquee direction="right" behavior="scroll" bgcolor="red">VII Sem
Results out</marquee>

</body>
</html>
Link tag
<!DOCTYPE html>
<html>
<head>
<title> Web Page for Link Tag </title>
</head>
<body bgcolor="pink">
<p>Hello welcome to Hyperlink</p>
<p>This paragraph will not be affected.</p>
<a href="https://www.facebook.com">Login to Facebook</a>
</body>
</html>
Image tag
<html>
<head>
<title> web page for image </title>
</head>
<body>
<img src="E:\IMAGES\Wall papers\baby.jpg" height="200px" width="200px"
align="left"
alt="Baby Image here" border="5">

</body>
</html>
HTML List
HTML lists are used to present list of information in well-formed and semantic
way. There are three different types of list in HTML and each one has a specific
purpose and meaning.
1. Unordered list — used to create a list of related items, in no particular
order.
2. Ordered list — used to create a list of related items, in a specific order.
3. Definition list — used to create a list of terms and their descriptions.
Note: We can create a list inside another list, which will be termed as nested List.
HTML Unordered Lists
It is also called as bullet list. It is used to give bullets to the list items. The list items
in unordered lists are marked with bullets.
Example:
o Aries
o Bingo
o Leo
o Oracle
Syntax:
An unordered list created using the <ul> element, and each list item starts with
the <li> element. Both are paired tags.
<ul>
<li>……………</li>
<li>……………</li>
<li>……………</li>
<li>……………</li>
</ul>
Attributes used in unordered list
type---it takes the values disc, circle, square
By default list items type is disc.
Program:
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
Output:
o Beetroot
o Ginger
o Potato
o Radish
HTML Ordered Lists
It is also called as numbered list. It is used to give numbering to the list items.
 Ordered lists are used when the order of the list's items is important.
 The list items in an ordered list are marked with numbers.
Example:
1. Beetroot
2. Ginger
3. Potato
4. Radish
Syntax
An ordered list created using the <ol> element, and each list item starts with
the <li> element. Both are paired tags.
<ol>
<li>…………………..</li>
<li>…………………..</li>
<li>…………………..</li>
</ol>
Attributes used in unordered list

type---it takes the values I,i,a,A,1
start—it takes the values depend on type.
By default list items type is number.
Program:
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Output:
1. Beetroot
2. Ginger
3. Potato
4. Radish
HTML Definition List
A definition list is a list of items with a description or definition of each item.

It is also called as descriptive list.
Example:
HTML
This stands for Hyper Text Markup Language
HTTP
This stands for Hyper Text Transfer Protocol
Syntax:
The description list is created using <dl> element. The <dl> element is used in
conjunction with the <dt> element which specify a term, and the <dd> element
which specify the term's definition.
<dl>
<dt>……</dt>
<dd>………..</dd>
<dt>……</dt>
<dd>………..</dd>
</dl>
Program:
<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt>HTTP</dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>
Output:
HTML
This stands for Hyper Text Markup Language
HTTP
This stands for Hyper Text Transfer Protocol
Nested List:
A list within another list is called as nested list.

Example:
CSE Subjects
1. Computer Neworks
2. Programming subjects
o C
o Java
o C++
o Python
3. FLAT
Program:
<!DOCTYPE html>
<html>
<body>
<h2>CSE Subjects</h2>
<ol>
<li>Computer Neworks</li>
<li>Programming subjects
<ul>
<li>C</li>
<li>Java</li>
<li>C++</li>
<li>Python</li>
</ul>
</li>
<li>FLAT</li>
</ol>
</body>
</html>
Output:
CSE Subjects
1. Computer Neworks
2. Programming subjects
o C
o Java
o C++
o Python
4. FLAT
Tables in HTML
HTML table allows you to arrange data into rows and columns. They are
commonly used to display tabular data like product listings, customer's details,
financial reports, and so on.
You can create a table using the <table> element. Inside the <table> element, you
can use the <tr> elements to create rows, and to create columns inside a row you
can use the <td> elements.
You can also define a cell as a header for a group of table cells using
the <th> element.
The following example demonstrates the most basic structure of a table.
Id Name Branch
501 Ram CSE
502 Raghu CSE
Tags:
 <table> ----paired tag
 <tr>----paired tag
 <td>----paired tag
 <th>----paired tag
Syntax:
<table>
<tr>
<th>…….</th> <th>…….</th> <th>…….</th>
</tr>
<tr>
<td>…….</td> <td>…….</td> <td>…….</td>
</tr>
<tr>
<td>…….</td> <td>…….</td> <td>…….</td>
</tr>
</table>
Attributes
 border
 bgcolor
 cellspacing
 cellpadding
 align
 rowspan
 colspan
 valign
 align
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Creating Tables in HTML</title>
</head>
<body>
<h2>HTML Table (Default Style)</h2>
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Peter Parker</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>Clark Kent</td>
<td>34</td>
</tr>
<tr>
<td>3</td>
<td>Harry Potter</td>
<td>11</td>
</tr>
</table>
</body>
</html
Q: Create the following timetable.
Time Table
mon tues Wed Thrus Fri

Science Maths Science Maths Arts
Hours Science Maths Science Maths Arts
Lunch
Science Maths Science Maths
Project
Science Maths Science Maths
Forms in HTML
Program:
<html>
<head>
<title>Forms in HTML</title>
</head>
<body>
<form action="welcome.html" method="get">
<fieldset style="width:500px;">
<legend>Personal Details</legend>
<label>Enter your Name</label><input type="text" size="30" name="username"
placeholder="Enter user name"/></br></br>
Enter your Password<input type="password" size="30" name="pwd"
placeholder="Enter password"/></br></br>
Enter your mail<input type="mail" size="30" name="mailid" placeholder="Enter
mail"/></br></br>
<label>Enter your mobile number</label><input type="number" size="30"
name="phnno" placeholder="Enter phn number"/></br></br>
<label>Enter your gender</label><input type="radio" name="gender"/>Male
<input type="radio" name="gender"/>Female
<input type="radio" name="gender"/>Others</br></br>
<label>Enter your DOB</label><input type="date" name="dob"/></br></br>
<label>Enter your Address</label></br>
<textarea rows="5" cols="50"></textarea></br></br>
<label>Enter your City</label>
<select>
<option>VZM</option>
<option>VIZAG</option>
<option>SKLM</option>
</select></br></br>
<label>Enter your subject</label><input type="checkbox" name="Subjects"/>C
<input type="checkbox" name="Subjects"/>JAVA
<input type="checkbox" name="Subjects"/>WT</br></br>
<label>Upload file</label><input type="file"/></br></br>
<input type="submit" value="Register"/>
<input type="reset" value="Clear"/></br></br>
<input type="button" value="OK"/>
</fieldset>
</form>
</body>
</html>
Frames in HTML

What Is HTML?: Hypertext Means That The Document Contains Links That Allow The Reader To Jump

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

What Is HTML?: Hypertext Means That The Document Contains Links That Allow The Reader To Jump

Uploaded by

Copyright:

Available Formats

HTML

HTML is an acronym which stands for Hyper Text Markup Language which is used

Description of HTML Example

 It is a very easy and simple language. It can be easily understood and

 It is very easy to make an effective presentation with HTML because it has

 It is platform-independent because it can be displayed on any platform like

 HTML is a case-insensitive language, which means we can use tags either in

Attributes: Attributes contain additional pieces of information. Attributes take

An example of an attribute is:

<img src="mydog.jpg" alt="A photo of my dog.">

Elements: An HTML element is an individual component of an HTML file. In an

Comments: The syntax of the comments in html is as following

We have to save html programs with the extension .htm or .html

This program is free <b>software</b>;you can

HTML Unordered Lists

Attributes used in unordered list

type---it takes the values disc, circle, square

By default list items type is disc.

HTML Ordered Lists

Attributes used in unordered list

By default list items type is number.

HTML Definition List

A definition list is a list of items with a description or definition of each item.

A list within another list is called as nested list.

<th>…….</th> <th>…….</th> <th>…….</th>

<td>…….</td> <td>…….</td> <td>…….</td>

<td>…….</td> <td>…….</td> <td>…….</td>

mon tues Wed Thrus Fri

You might also like