Scribd
Upload
5 views

HTML

The document provides a comprehensive overview of HTML, including its definition, features, and structure, along with detailed explanations of various HTML elements and attributes. It covers topics such as headings, paragraphs, links, images, lists, tables, and multimedia, as well as HTML forms and SEO tags. Additionally, it includes code examples to illustrate the use of different HTML components.

Uploaded by

yennamvishal1883
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

HTML

The document provides a comprehensive overview of HTML, including its definition, features, and structure, along with detailed explanations of various HTML elements and attributes. It covers topics such as headings, paragraphs, links, images, lists, tables, and multimedia, as well as HTML forms and SEO tags. Additionally, it includes code examples to illustrate the use of different HTML components.

Uploaded by

yennamvishal1883
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

Notes

What is HTML?
HTML Features
HTML skeleton
Elements and Attributes
HTML indentation
HTML comments
HTML Heading
HTML Paragraph
HTML formatting
Quotation and citation
HTML Links
HTML Images
HTML Lists
HTML Table
HTML Div and Span
HTML audio
HTML video
HTML Embed
HTML Media
HTML Entities
HTML Image maps
Tags and their attributes and uses
HTML form and input types
HTML select
HTML Datalist
HTML label, fieldset, legends
HTML SEO Tags
HTML Favicon

What is HTML?
stands for Hyper Text Markup Language

Hyper Text: Link between web pages

Notes 1
Markup Language: Text between tags which defines structure.

HTML defines how the web page looks and how to display content with the help
of elements.

if forms or defines the structure of our web page.

need to save the file with .html extension.

HTML Features
the learning curve is very easy (easy to modify).

Create effective presentation

Add links wherein we can add references

can display documents on platforms like MAC, Window, Linux etc.

add video, graphics, and audios making it more attractive.

Case insensitive language.

HTML skeleton
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>

Elements and Attributes


elements are the tags in the html.

attributes are the additional info about the element or tag.

HTML indentation

Notes 2
HTML comments
comments are written to make the code understandable.

<!— here you will write comment —>

HTML Heading
there are 6 heading tags.

<!DOCTYPE html>
<html>
<head>
<title> Heading in HTML </title>
</head>
<body>
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>
</body>
</html>

HTML Paragraph
We need paragraph to write our content.

we use p tag for making paragraph in HTML.

paragraph element takes whole width of the line or block i.e. something written
after paragraph element will start at next line.

<!DOCTYPE html>
<html>
<head>
<title> Paragraph in HTML </title>
</head>
<body>
<p> This is a paragraph 1.</p>

Notes 3
<p> This is a paragraph 2.</p>
This is a normal text in HTML having no tag,no elemen
</body>
</html>

HTML formatting
bold

italic

underline

strong

emphasize

small

delete

inserted text

subscript

superscript

mark

marquee

<!DOCTYPE html>
<html>
<head>
<title> Formatting in HTML </title>
</head>
<body>
<pre> pre tag is used to show content as it is writte
as here it will start from next line
</pre>
<p> if you are writing poem you need to start a new li
<p> roses are red <br>
violets are blue <br>
whenever I close my eyes <br>
I see you

Notes 4
</p>
<p> <b> This is a text which is bold. </b> </p>
<p> <i> This is a text with Italic style.</i> </p>
<p> <u> This is a text which has underline.</u> </p>
<p> This is text which has <strong> strong tag </stro
<p> <em> This text has used Emphasis tag which gives
<p> The tag used here is inserted text which shows whi
<p> this is <del> deleted text </del> where del tag i
<p> Here we are using Subscript tag to write base 2. H
<p> Here we are using superscript tag to write power 2
<p><marquee> this is a marquee tag. mostly used in new
</body>
</html>

Quotation and citation


blockquote

cite

quote

address

abbreviation

<!DOCTYPE html>
<html>
<head>
<title> Quotation and Citation in HTML. </title>
</head>
<body>
<p> Quotation tag is used to write quotes.</p>
<p> <q> This is wholesome quote.</q></p>
<blockquote cite="google.com"> this is blockquote whic
<p> cite tag is used to write some author,book or any
<p> <address> address tag helps you to write your add
<p> abbr tag is for abbreviation for eg: <abbr title=
</body>
</html>

Notes 5
HTML Links
anchor

email link

<!DOCTYPE html>
<html>
<head>
<title> Links in HTML </title>
</head>
<body>
<p> Anchor tag is used to link pages. In anchor tag we
<a href="google.com">click here to go to google home
<a href="google.com" target="_blank">click this to goo
<p> we can also make email link with anchor tag.</p>
click on <a href="mailto:[email protected]?s

</body>
</html>

HTML Images
<!DOCTYPE html>
<html>
<head>
<title> Image in HTML. </title>
</head>
<body>
<img src="car.jpg" width="500" height="300" alt="Red c
<img src="cake.jpg" width="500" height="300" alt="Red
</body>
</html>

HTML Lists
ordered lists

Notes 6
<!DOCTYPE html>
<html>
<head>
<title> Ordered List in HTML </title>
</head>
<body>
<p> We are going to make ordered list. </p>

<ol>
<li> A to Z </li>
<li> 1 to 10 </li>
</ol>

<p> Above list is normal list. we can also change the

<ol type="A">
<li> A to Z </li>
<li> 1 to 10 </li>
</ol>

<ol type="a">
<li> A to Z </li>
<li> 1 to 10 </li>
</ol>

<ol type="I">
<li> A to Z </li>
<li> 1 to 10 </li>
</ol>

<ol type="i">
<li> A to Z </li>
<li> 1 to 10 </li>
</ol>

<p> we can also mention from where it should be start

<ol start="4">

Notes 7
<li> A to Z </li>
<li> 1 to 10 </li>
</ol>

<p> we can also make nested ordered list.</p>

<ol>
<li> A to Z </li>
<ol type="A">
<li> Apple </li>
<li> Ball </li>
<li> Cat </li> <br>
. <br>
. <br>
. <br>
. <br>
<li> Zebra </li>
</ol>
<li> 1 to 10 </li>
<ol type="i">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
. <br>
. <br>
. <br>
. <br>
<li> 10 </li>
</ol>
</ol>
</body>
</html>

unordered lists

<!DOCTYPE html>
<html>
<head>

Notes 8
<title> Unordered list in HTML.</title>
</head>
<body>
<p> We are going to make unordered list </p>
<ul>
<li> drinks </li>
<li> meals </li>
<li> Special </li>
<li> Chinese </li>
</ul>

<p> Above list is normal unordered list. We can also m

<ul>
<li> Drinks </li>
<ul>
<li> Coffee </li>
<li> Green tea </li>
<li> chocolate </li>
<ul>
<li> Hot chocolate drink </li>
<li> Chocolate milk shake</li>
</ul>
</ul>
<li> Meals </li>
<ul>
<li> Chicken legs </li>
<li> Chicken Biryani </li>
<li> Butten chicken </li>
</ul>
<li> Special </li>
<ul>
<li> Family special meal non veg </li>
<li> special veg meal </li>
<li> Handi </li>
</ul>
<li> Chinese </li>
<ul>

Notes 9
<li> Soup </li>
<li> Fried rice </li>
<ul>
<li> Non veg </li>
<li> Veg </li>
<li> Triple fried rice</li>
</ul>
<li> Noodles </li>
<ul>
<li> Hakka noodles </li>
<li> Normal noodles </li>
</ul>
<li> Manchurian</li>
</ul>
</ul>
</body>
</html>

nested lists

<!DOCTYPE html>
<html>
<head>
<title> Nested List in HTML </title>
</head>
<body>
<ol>
<li> IT </li>
<ul>
<li> Web development </li>
<ul>
<li> Front end developer </li>
<li> Back end developer </li>
<li> Full stack developer </li>
</ul>
<li> Software related </li>
<ol>
<li> Software Engineer </li>

Notes 10
<li> Software developer </li>
<li> Software designer </li>
<li> Software tester </li>
</ol>
<li> Database related </li>
<ul>
<li> Database administrator </li>
<li> Data Scientist </li>
<li> Data analyst </li>
<li> Database manager </li>
</ul>
<li> Techonolies </li>
<ol>
<li> Database </li>
<li> AI/ML </li>
<li> BlockChain </li>
<li> IoT </li>
<li> Programming Languages </li>
<li> Development </li>
<li> GIT and GitHub </li>
<li> Edge computing </li>
<li> Quantum computing </li>
<li> Robotics and Automation </li>
<li> Web 3.0 </li>
<li> CyberSecurity </li>
<li> Extended Reality </li>
<li> 5G / WIFI 6 </li>
<li> AI and AI as a service </li>
<li> Biotechnology </li>
</ol>
</ul>
</ol>
</body>
</html>

description

Notes 11
<!DOCTYPE html>
<html>
<head>
<title> Description in HTML </title>
</head>
<body>
<h2> Description Topic </h2>
<dl>
<dd>
<dd> This is a description 1. </dd>
<dd> This is a description 2.</dd>
<dd> This is a description 3.</dd>
<dd> This is a description 4.</dd>
</dd>
</dl>
</body>
</html>

HTML Table
row

column

heading

title

<!DOCTYPE html>
<html>
<head>
<title> Table in HTML </title>
</head>
<body>
<caption> A Table</caption>
<table border="3">
<tr>
<th> column 1 </th>
<th> column 2 </th>

Notes 12
<th> column 3 </th>
</tr>
<tr>

<td> one </td>


<td> four </td>
<td> seven </td>
</tr>
<tr>

<td> two </td>


<td> five </td>
<td> eight </td>
</tr>
<tr>

<td> three </td>


<td> six </td>
<td> nine</td>
</tr>
</table>
</body>
</html>

nested table

<!DOCTYPE html>
<html>
<head>
<title> Nested Table in HTML </title>
</head>
<body>
<caption> Nested Table </caption>
<table border="3">
<tr>
<th> Row 1 </th>
<td> one </td>

Notes 13
</tr>
<tr>
<th> Row 2 </th>
<td>
<table border="3">
<tr>
<td> two </td>
<td> three </td>
<td> four </td>
</tr>
<tr>
<td> six </td>
<td> seven </td>
<td> eight </td>
</tr>
</table>
</td>
</tr>
<tr>
<th> Row 3 </th>
<td> five </td>
</tr>
</table>
</body>
</html>

HTML Div and Span


div: block element that takes the whole width by default and starts in new line.

span: inline element that takes the width that is needed and starts from where
the previous element is ended.

<!DOCTYPE html>
<html>
<head>
<title> Div and Span in HTML </title>
</head>
<body>

Notes 14
<p> Div takes whole width of the block i.e. the conte
<div>
this is div element.
</div>
this is a normal text with no element.
<p> Span element takes width required to it. The next
<span> This is a span element. </span>
this is a normal text with no element.
</body>
</html>

HTML audio

HTML video

HTML Embed

HTML Media
<!DOCTYPE html>
<html>
<head>
<title> Media in HTML</title>
</head>
<body>
<p> Audio in HTML.</p>
<audio controls src="Audio.mp3" type="mp3"></audio>
<hr />
<p> Video in HTML. </p>
<video controls src="video.mp4" type="mpeg"></video>
<hr>
<p> We embed some websites or media for various reaso
<p> we can use embed tag or iframe tag.</p>
<iframe width="560" height="315" src="https://www.you
<embed src="sample.pdf" type="application/pdf" width=

Notes 15
</body>
</html>

HTML Entities

HTML Image maps


<!DOCTYPE html>
<html>
<head>
<title> Image maps in HTML </title>
</head>
<body>
<!-- Image Map Generated by http://www.image-map.net/
<img src="office.jpg" usemap="#image-map">

<map name="image-map">
<area target="_blank" alt="Oval Goggles" title="Ov
<area target="_blank" alt="Tea set" title="Tea se
<area target="_blank" alt="Mobile phones" title="M
<area target="_blank" alt="Laptop" title="Laptop"
<area target="_blank" alt="Laptop" title="Laptop"
</map>
</body>
</html>

Tags and their attributes and uses

HTML form and input types


<!DOCTYPE html>
<html>
<head>
<title> Form and Input types in HTML. </title>
</head>
<body>

Notes 16
<form action="" method="">
Enter Name: <input type="text" placeholder="Full
<hr>
Enter Age: <input type="number"> <br>
<hr>
Enter Date Of Birth: <input type="date"> <br>
<hr>
Enter Time: <input type="time" placeholder="Curre
<hr>
Enter Color: <input type="color" placeholder="Favo
<hr>
Enter Email: <input type="Email"> <br>
<hr>
Enter Range: <input type="range" > <br>
<hr>
Enter URL: <input type="url"> <br>
<hr>
Enter File: <input type="file"> <br>
<hr>
Enter Password: <input type="password">
<hr>
<input type="submit" value="Submit">
<input type="reset" name="" id="" value="Reset">

</form>
</body>
</html>

HTML select
<!DOCTYPE html>
<html>
<head>
<title> Select in HTML. </title>
</head>
<body>
<select name="cars and sports" id="">

Notes 17
<optgroup label="cars">
<option value="BMW">BMW</option>
<option value="Ferrari">Ferrari</option>
<option value="Porsche">Porsche</option>
<option value="Nissan">Nissan</option>
<option value="Toyota">Toyota</option>
<option value="Tata" selected>Tata</option>
</optgroup>
<optgroup label="Sports">
<option value="BMW">Cricket</option>
<option value="Ferrari">Football</option>
<option value="Porsche">Tennis</option>
<option value="Nissan">Hockey</option>
<option value="Toyota">Running</option>
<option value="Tata" selected>Baseball</optio
</optgroup>
</select>
</body>
</html>

HTML Datalist
<!DOCTYPE html>
<html>
<head>
<title> Datalist in HTML. </title>
</head>
<body>
Search <input type="text" name="" id="" list="List">
<datalist id="List">
<option value="Apple"> </option>
<option value="Mango"> </option>
<option value="Car"> </option>
<option value="Orange"> </option>
</datalist>
<input type="button" value="search">

Notes 18
</body>
</html>

HTML label, fieldset, legends

HTML SEO Tags


title

meta description

HTML Favicon

Tags Attributes Use

tells browser which type of


document it is, it also tells
<!DOCTYPE html>
version of HTML, it is written
for user.

tells browser that it is HTML


<html> </html> dir=””, lang=””
document.

it tells metadata, it is written


<head> </head>
for the browser to read.

it displays the title of the web


<title> </title>
page.

it is used to style the html


<style> </style>
document or write CSS.

it is the body of web page or


<body> </body> html where the content is
visible to the user.

<h1> </h1> first heading

<h2> </h2> second heading

<h3> </h3> third heading

<h4> </h4> fourth heading

<h5> </h5> fifth heading

<h6> </h16 sixth heading

<hr> displays horizontal line

Notes 19
Tags Attributes Use

<p> paragraph tag

<br> breaks line

preformatting tag, it displays


<pre> the content as it is written
inside the tag

<b> </b> bold tag

makes bold and gives more


<strong> </strong>
importance to the text.

<i> </i> italic tag

makes italic and gives more


<em> </em>
importance to the text.

<small> </small> makes text small

<mark> </mark> highlights the text

<del> </del> add line breakthrough the text

<ins> </ins> add line under the text.

<u> </u> underline tag

it displays power to the text or


<superscript> </superscript>
number

it displays base to the text or


<subscript> </subscript>
number

<q> </q> quotation tag

it is a block of quote and


<blockquote> </blockquote> cite=””
takes space from four sides.

<abbr> </abbr> title=”” abbreviation tag

<address> </address> address tag

used to write name of book or


<cite> </cite>
name of author.

href=”path”, target=”_blank”,
<a> </a> anchor tag
title=””, href=”mailto:”

src=”path”, alt=””, width=””,


<img> </img>
height=””

moves text in horizontal


<marquee> </marquee> direction=””
direction

<ol> </ol> start=””, type=”” ordered list

Notes 20
Tags Attributes Use

<li> </li> list item

<ul> </ul> style=”list-style-type: ” unordered list

<dl> </dl> description list

<dt> </dt> description

<dd> </dd> description data

<table> </table> border=””, table tag

<tr> </tr> create row

<td> </td> colspan=””, rowspan=”” table column

<th> </th> table heading

<caption> </caption> title of the table

<thead> </thead>

<tbody> </tbody>

<tfoot> </tfoot>

<div> </div> block element

<span> </span inline element

displays the source that we


<iframe> </iframe> src=””
need to show.

<audio> </audio>, <source> controls, src=””, type=”” audio tag

autplay, controls, width,


<video> </video>, <source> video tag
height, src=””, type=””

src=””, type=””, width=””,


<embed> embedded tag
height=””

data=””, type=””, width=””,


<object> used to embed
height=””

<map> </map> name=””,

<area> shape=””, coords=””, href=””

<form> </form> method=””, action=”” form tag

<input> type=”” (text, number, takes input from the user


password, submit, color, date,
time, email, range, hidden,
reset, url, file, image, radio,
checkbox) value=””, readonly,
disable, size=””,
placeholder=””, required,

Notes 21
Tags Attributes Use
step=””, autofocus,
autocomplete, name

rows=””, cols=””,
<textarea> </textarea> description box
placeholder=””

<select> </select> size=”” multiple

<option> </option> value=””, selected=””

<optgroup> </optgroup> label=”” op<

<datalist> </datalist>,
id=””, value=””, list=””
<option>

<label> </label> for=”” connect element

<fieldset> </fieldset>

<legend> </legend>

<meta /> name=””, content=””,

<link /> rel=””, href=””

<style> </style>

<script> </script>

Notes 22

You might also like