HTML

HTML
HTML Full Form - Hyper Text Markup

Language.
Version – HTML-5
HTML developed by “sir Tim Burner’s Lee”
in 1991.
Syllabus:
 HTML basic tags
 Character entity
 HTML Lists
 HTML Tables
 Hyper Links
 HTML Forms
 Media tags
Before you start the html code we should know about html basics that is :
 In html any thing you should write in between the tags .(<> </>)
 What is html tag?

An HTML tag is a piece of markup language used to indicate the beginning and end of an
HTML element in an HTML document.
 Types of tags:
1.paired tags: It contains both opening and closing tags.
<> -> opening tag
</> -> closing tag
2. un-paired tag: It contains only opening tag.
<> -> opening tag.
BASIC HTML STRUCTURE
Basic tags:
1.Heading tags: It is used to give the heading.

Types of heading tags: h1,h2,h3,h4,h5,h6
<html>
<head>
<title> Html Basic tags </title>
</head>
<body>
<h1>heading 1</h1> //larger in size
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
<h7>heading 1 </h7>
</body>
</html>
 Bold tag : Bold tag is used to get text in bold.(<b></b>)
 underline tag: Underline tag is used to get the text with underline
(<u></u>)
 Italian tag: Italian tag is used to get text in Italian(slant)
(<i></i>)
 break tag : break the line (<br>)
 Horizonatl line: horizontal line (<hr>)
 Superscript: superscript text is used to get the text above the
normal line(<sup></sup>)
 Sub script : subscript is used to get text in below the normal
line(<sub></sub>)
 Del tag : to get strike text (<del></del>)
HTML CODE FOR ABOVE SLIDE
<html>
<head>
</head>
<body>
<b>Bold tag </b>
<u> Underline </u>
<i> text is in Italian </i>
<br>
2<sup>7</sup>
<br>
<hr>
H<sub>2</sub>0
<del>Striking the text </del>
</body>
</html>
OUTPUT FOR THE ABOVE CODE
 paragraph(<p> </p>) : <p> tag is used to create a paragraphs.
 pre-formatted (<pre> </pre>) : it is same as the <p> but it shows the content in block
level.
 Text Abbreviation tag(<abbr></abbr>) : This tag is used to abbreviate a text.
 Blockquote(<blockquote></blockquote>):The blockquote tag in HTML is used to
display the long quotations.
 Quote(<q> </q>) : It shows the text in quoted format.
 bdo tag(<bdo></bdo>): The bdo stands for Bi-Directional Override. This tag is used to
specify the text direction or used to change the current direction.
 center tag (<center></center>): It display the content in centered.
 Marquee tag :Marquee tag is used to scroll the contents from one end to another
end.
<html>
<head>
</head>
<body>
<p>i am in p tag</p>
<pre>
I am in
preformatted tag
</pre>
The <abbr title="World Health Organization"> WHO</abbr> was founded in 1948.
<blockquote>The blockquote tag in HTML is used to display the long
quotations</blockquote>
<q>i am in quote tag</q>
<bdo dir="rtl">the beautiful day</bdo>
<center>centered text</center>
<marquee direction="right" >css</marquee>
</body>
</html>
Character Entity:
It is used to display the special characters in webpage. special characters means which is not
present in keyboard or present in keyboard by using ‘&’.
<html>
<head>
<title> Character Entity </title>
</head>
<body>
<h1>character entity</h1>
<h2>
α &ShortLeftArrow;
®
&approxeq;
©
<
(to get extra space)
&PlusMinus;
&emsp;
</h2>
<h1>📈</h1>
</body>
</html>
HTML LISTS :
 HTML lists is used to group a set of related items in lists.
 3 types of lists
1. Ordered List
2. Un ordered List
3. Definition list
1. Ordered list:
<ol> tag is used to create the ordered List
Using <li> tag we are inserting related data
syntax:
<ol>
<li>--------</li>
<li>--------</li>
</ol>
Attribute: It gives the additional information to the html tag.
->type attribute is used to change the type of ordered list
Ex: type="((default)/A/a/I/i)"
-> start attribute is used to start value of the first list item in an ordered list.
<html>
<head>
<title> Creation of lists</title>
</head>
<body>
<h1>creation of list</h1>
<h2>Ordered list</h2>
<ol>
<li>Lion</li>
<li>Tiger</li>
<li>Parrot</li>
</ol>
<ol type=“A”>
<li>Black</li>
<li>Red</li>
<li>blue</li>
</ol>
<ol type=“a”>
<li>sunday</li>
<li>monday</li>
<li>tuesday</li>
</ol>
<ol type=“I”>
<li>jan</li>
<li>feb</li>
<li>march</li>
</ol>
<ol type=“I”>
<li>birds</li>
<li>animals</li>
<li>trees</li>
</ol>
<ol type=“A” start="10">
<li>tcs</li>
<li>infosys</li>
<li>wipro</li>
</ol>
</body>
</html>
2. Un-ordered list:
-> <ul> tag is used to create the
un-ordered list
-> using <li> tag we are inserting
related data
syntax:
<ul>
<li>-------<li>
<li>-------<li>
-------------
</ul>
Attributes:
-> type attributes is used to change the tyoe of ordered list
Ex: type="(disc/circle/none/square)"
<html>
<head>
<title> HTML LISTS</title>
</head>
<body>
<ul type="square">
<li>Royal field</li>
<li>KTM</li>
<li>pulsar</li>
</ul>
<ul type="none"> <li>Royal field</li>
<li>KTM</li>
<li>pulsar</li>
<li>R15</li>
</ul>
<ul type="circle">
<li>KTM</li>
<li>pulsar</li>
</ul>
<ul type="disc">
<li>KTM</li>
<li>pulsar</li>
</ul>
</body>
</html>
3. Defination list:
-> <dl> tag is used to create definition list
-> <dt> tag is used to give data title
-> Using <dd> tag we are inserting the description for that title
syntax:
<dl>
<dt>----data title----</dt>
<dd>----data description---<dd>
</dl>
<html>
<head>
<title> HTML LISTS</title>
</head>
<body>
<h2>Definition list</h2>
<dl>
<dt>Title 1 </dt>
<dd>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Numquam obcaecati esse ex? Unde voluptatem, assumenda voluptas quibusdam
deserunt id corporis. Nam voluptas asperiores incid cumque, impedit deserunt
ut et laboriosam.
</dd>
</dl>
</body>
</html>
NESTED LIST
<html>
<head>
<title>Document</title>
</head>
<body>
<ul type="disc">
<li>coffe</li>
<li>tea</li>
<ul type="circle">
<li>black tea</li>
<li>green tea</li>
</ul>
</ul>
</body>
</html>
Try this??
HTML TABLES
Creation Of Table:
tags:
-> HTML tables is used to arrange data into rows and columns
-> <table> tag is used to create table on webpage
-> through rows we are inserting the data into table using <tr>(table row) tag.
-> <th> tag is used to insert table heading
-> <td> tag is used to insert table data
syntax:
<table>
<tr>
<th>---table heading----</th>
<td>---table data---</td>
</tr>
</table>
<html>
<head>
<title>HTML TABLES</title>
</head>
<body>
<table border="1" >
<tr>
<th>Row1 col1</th>
<th>Row1 col2</th>
<th>Row1 col3</th>
</tr>
<tr>
<th>Row2 col1</th>
<th>Row2 col2</th>
<th>Row2 co31</th>
</tr>
</table>
</body>
</html>
Attributes:
• which is present in <table> tag
• border attribute is used to set the border for table
• height & width attribute is used to set the size/length of the table
• align attribute is used to align the table on webpage
Ex: align= "(left/right/center/default)"
• cell spacing is used to give space b/w cells
• cell padding is used to give space b/w content and border
• colspan is used to merge the two or more columns
• rowspan is used to merge the two or more rows
<html>
<head>
</head>
<body>
<table border="1" height="20" width="500“ cellpadding="20" cellspacing="2000"
align=“center">
<tr>
<th style="text-align: end;">s.No</th>
<th>Roll.No</th>
<th>name</th>
<th>team</th>
</tr>
<tr>
<th>1</th>
<th>1001</th>
<th>john</th>
<th>red</th>
</tr>
</body>
</html>
<html>
<head>
</head>
<body>
<table border="5" width="500" height="200">
<tr>
<th colspan=4></th>
</tr>
<tr>
<th rowspan=3></th>
<th colspan=3></th>
</tr>
<tr>
<th rowspan=2></th>
<th></th>
<th></th>
</tr>
</table>
</body>
</html>
Try this??
HYPER LINKS:
 A webpage can contain various links that take you directly to other pages and even
specific parts of a given page. These links are known as hyperlinks.
 <a> (achor tag) is paired tag & In <a> tag we are writing clickable element
Ex: <a> clickable element </a>
note: without using the href attribute in <a> tag it is act like a <p> tag
Attributes:
 href(hyper reference) attribute is used to write URL/path
Ex: <a href="----URL/path----">--- clickable element-----</a>
Type of URL:
Absolute URL (complete URl)
ex: <a href="https://www.google.com">---click here---
</a>
Relative URL:
<a href="./----path---">----click here-----</a>
(./ means we can create n no of relative file in that path)
-> target attribute specifies where to open the linked
document
-> _blank opens the linked document in a new window
-> _parent open the linked document in same window
-> the title attribute is used to give title name
for the HTML element.
Media tags
• It is used to insert the media files like images, audios,
videos etc.., to the webpage
 Inserting of images:
• <img> tag is used to insert the image
• It is unpaired tag & in line level tag
syntax: <img src="---path---"
alt=" ---alternate msg--"
height="to set height"
width="to set width">
insertion of audios:
-> <audio> tag is used to insert the audios to web page
and it is paired tag
syntax: <audio src="---path--" controls></audio>
(or)
<audio controls>
<source src="--path--">
</audio>
Insertion Of Video:
-><video> tag is used to insert the video to web page and
it
is paired tag
syntax: <video src="---path--" controls></video>
or
<video controls>
<source src="--path--">
</video>
Attribute:
-> src attribute used to insert the path & media file
-> alt attribute used to insert the alternate message or
error message
-> (alt msg will display the message when we get some issue
like server error, wrong in path)
-> height & width attribute used to set proper length and
width for media files.
-> controls attribute is used to control the media files like
audio and video
CODE FOR INSERTING IMAGES AUDIO AND VEDIO
<html>
<head>
<title>Document</title>
</head>
<body text="red" bgcolor="yellow">
<img src="./images/img1.png" alt="error">
<img src="./images/img5.jfif" alt="">
<audio src="./Audios/audio1.mp3" controls></audio>
<video src="./videos/rain video.mp4“ controls width=250></video>
</body>
</html>
HTML FORMS:
 It is used to collect the data from the enduser directly from the webpage form tag
 Tags:
using <input> tag we are collecting the data by creating input field on
webpage
<label> tag is used to give label name for the input field
 Attributes:
 Type attribute are use to set type of input field

 name attribute is used to send the data to the backend
Note: without using the name attribute we cant send the data to
the backend
 placeholder attribute is used to set reference msg for the enduser
 required attribute is used set the input field is mandatory
 value attribute is used to change the value of inputfield
 min & max attribute is used in set minimum & maximum number in
number field
 checked attribute is used to select default option and is used in the
radio/checkbox field
 when we are using disabled attribute we cant do any operation on that field like
selecting etc.,
 selected attribute is used to select default option and it is used in the drop
down option
 <field set> tag is used group the related information in the form
 <legend> tag is used to give name for the fieldset/grouped data
Attributes present in form tag:

-> method attribute is used to send the data to the backend by using method =
"get/post"
-> when we are using method = "get" data is visible in URL(default)
-> when we using method = "post" data is not visible in URl
-> action attribute is used to write configured URL
DIFFERENCE BETWEEN SEMANTIC AND SEMANTIC TAGS
 Semantic tag:
These tags are tags which defines its content. Ex:
input,h1,ol etc..
 Non Semantic tag:
These tags are the tags not define its content. Ex:
div,span
Div and span
There are two tags that are particularly useful when using CSS:
<span> and <div>. They are both container tags that have
minimal formatting associated with them.
The <span> tag is an inline element that simply holds text without
doing anything special to it.
The <div> tag is a block element and causes the text it encloses to
start on a new line.
Using <span> and <div> tags in conjunction with classes and IDs
allows for great flexibility in creating pages.

HTML

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

HTML

Uploaded by

Copyright:

Available Formats

HTML

HTML Full Form - Hyper Text Markup

 What is html tag?

1.Heading tags: It is used to give the heading.

 Type attribute are use to set type of input field

Attributes present in form tag:

You might also like