HTML NOTES FOR BASIC TO
ADVANCED
Created by: Debare Aarti
HTML
HTMI BASICS:
HTML stand for Hyper Text Markup Language.
It is used to create a webpage.
We can use html for define the structure/layout of the website.
The hypertext means text within a text.
Html also tells the browser how to display content on the web page.
In html we can use some elements and attributes:
The elements have main two types:
1. block elements. The block elements display in Line-by-line.
2. inline elements. The inline elements display in single line from right to left.
The attributes in html are define in the opening tags, they are in a key-value pair, it tells the
additional information about the element content.
In an opening tag we can use attributes, properties and values.
HTML STRUCTURE:
<Opening Tags> Content <Closing Tags>
<!DOCTYPE
html>
<html>
<head>
<title>
welcome in
visual
studio code
</title>
</head>
<body>
<h1
style”color:r
ed”> it is a
html </h1>
<p>
content </p>
</body>
</html>
HTML TAGS:
The components which are used to design the structure of website are called html tags.
Types of tags in html:
1. Heading tags: they are always in bold format, in the descending order, they are block
elements.
Here are 6 heading tags are as follow:
<h1> content</h1>
<h2> content</h2>
<h3> content</h3>
<h4> content</h4>
<h5> content</h5>
<h6> content</h6>
Example:
<!DOCTYPE html>
<html>
<head>
<title> welcome in visual studio code
</title>
</head>
<body>
<h1> it is a html </h1>
<h2> it is a html </h2>
<h3> it is a html </h3>
<h4> it is a html </h4>
<h5> it is a html </h5>
<h6> it is a html </h6>
</body>
</html>
Output:
2. Text formatting tags: All text formatting tags are normal text. They are inline
elements. Each element content display in inline.
a. Bold tag: The bold tag is used for bold the content. It is called logical tag.
Syntax: <b> content </b>
b. Strong tag: The strong tag is used for extra bolt the content. It is called physical
tag.
Syntax: <strong> content </strong>
c. Italic tag: Italic tag is used for changing the style of the content.
Syntax: <i> content </i>
d. Emphasized tag: It is also used for changing style of the content.
Syntax: <em> content </em>
e. Underline tag: This is used for underline the content.
Syntax: <u> content </u>
f. Interested tag: Interested tag are also used for underlining the content.
Syntax: <ins> content </ins>
g. Delete tag: Delete tag is used for delete the content.
Syntax: <del> content </del>
h. Small tag: The small tag is used for making content small from the normal size.
Syntax: <small> content </small>
i. Mark tag: It is used for highlight the content.
Syntax: <mark> content </mark>
j. Superscripted tag: It is used for writing mathematical expression.
Syntax: X <sup> 2 </sup>
k. Subscripted tag: It is used for writing scientific formula. Syntax: H <sub> 2 </sub>
O
l. Pre tag: It is used for specify the pre format ot the text and also fixed width and
display courier font and maintain space and break the lines.
Syntax: <pre> content </pre>
3. Abbreviation tags: The abbreviation tag show the additional information about the
content. Syntax: <abbr title=”hypertext markup language”> <h1>html</h1> </abbr>
4. Marquee tags: The marquee tag is used for moving content from right-left, left-right,
updown, down-up.
Syntax: <marquee direction=”left”> <h1>HTML CODE</h1> </marquee>
5. Paragraph tags: It is used for display paragraph on your webpage. Syntax: <p> content
</p>
6. Button tags: Button tag is used for adding buttons on your web page. Syntax:
<button> button name </button>
7. Break tag: Break tag is used for break the lines in web page. It is singular tag or non-
closing tag.
Syntax: <br>
Example:
<body>
<b> it is html code</b> <br>
<strong> it is html code</strong> <br>
<i> this is html code</i> <br>
<em> this is html code </em> <br>
<u> html is hypertext markup lang </u> <br>
<ins> html is hypertext markup lang </ins> <br>
<p> html is hypertext markup <del> lang </del> </p> <br>
<small> html is lang </small> <br>
<p> html is markup <mark> lang </mark> </p>
<br> x<sup> 2 </sup> <br> X<sub> 2 </sub>
<br>
<abbr title="hypertext markup language"> <h1> html </h1> </abbr> <br>
<marquee direction="left"> <h1> HTML CODE </h1> </marquee> <br>
<p> this is paragraph </p> <br>
<button> reset password </button> </body>
Output:
8. Anchor tag: Anchor tag is used for add the links in your website.in opening tag we can
use attributes and their values.
We can use target attribute for open your page on new tab have blank value.
Syntax:<a href=”link” target=”blank” >content</a>
9. Image tag: The image tag is used for insert the image in your webpage. In an image
tag we can use two types of URL:
1. Absolute Url: The URL of image which is insert from internet that is called absolute
URL.
2. Relative Url: The URL of image which is insert from our folder/album that is called
absolute URL.
Syntax:<img src=”link” height=” ” width=”” > </img>
10. iframe tag: The iframe tag is used for add the links in our webpage. Syntax:<iframe
src=”link”>content</iframe>
11. Audio tag: The audio tag is used for add the audio in our webpage. The source tag is a
child tag of audio tag.
Syntax: <audio controls>
<source src=”path of audio”>
</audio>
12. Video tag: The video tag is used for add the video in our webpage. The source tag is a
child tag of video tag.
Syntax: <video controls>
<source src=”path of video”>
</video>
Example:
<!DOCTYPE
html>
<html>
<head>
<title>
hello
welcone in
html
</title>
</head>
<body>
<a href="https://www.youtube.com/watch?v=HcOc7P5BMi4&t=1147s"> this
is link for learn html for basic level </a> <br>
<img
src="https://res.klook.com/images/fl_lossy.progressive,q_65/c_fill,w_1920,h_
10
80,f_auto/w_80,x_15,y_15,g_south_west,l_Klook_water_br_trans_yhcmh3/activiti
es
/ygokchnwrcv9cr4dw4qi/GardensbytheBayTickets(SingaporeCloudForestFlowerDome)
-
KlookIndia.jpg" height="200px"width="250px"> <br>
<img src="image\god.jpeg" height="200px"width="250px"> <br>
<iframe src="http://www.nebula-technology.com/"> Nebula technology
</iframe> <br>
<audio controls>
<source src="audio\Akull_-
_Laal_Bindi__Official_Video____New_Song___VYRL_Originals(128k).m4a">
</audio>
<br>
<video controls height="200px"width="250px">
<source src="audio\video\WhatsApp Video 2024-01-18 at 11.46.56
PM.mp4">
</video>
</body>
</html>
LISTS IN HTML:
The lists are the collection of items.
The list has main three types:
1. Ordered lists:
In an order list we can see the collection of items in
sequence format. (1,A,a,I,i) Syntax: <ol>
<li>A</li>
</ol>
2. Unordered lists:
In an unorder list we can see the collection of items in
bullet format.
Syntax: <ul>
<li>.</li>
</ul> 3.
Description
lists:
In a descripted list we can see the title and
data/description about that title.
Syntax: <dl>
<dt></dt>
<dd></dd>
</dl>
Example:
<body>
<h1>List</h1>
<h2>Order list</h2>
<ol type="I">
<li>milk</li>
<li>Water</li>
<li>Sugar</li>
<li>Tea</li>
</ol>
<h2>Unorder list</h2>
<ul style="list-style: circle;">
<li>tea
<ol type="a">
<li>Black Tea</li>
<li>Leman Tea</li>
</ol>
</li>
<li>Sugar</li>
<li>Water</li>
<li>milk</li>
</ul>
<h2>Description list</h2>
<dl>
<dt>Nebula Technology</dt>
<dd>It is a software company.</dd>
</dl> </body>
Output:
TABLES IN HTML:
The tables in html are used for making table in your webpage.
The table make for collection of number of rows and columns.
In the table tag for marge the rows you can use row span
attributes.
In the table tag for marge the columns you can use col span
attributes.
In table you can create table and marge the table.
Syntax:<table>
<tr> <th></th> </tr>
<tr> <td></td> <td>
</table>
Example:
<body>
<h1>Create table</h1>
<table border="1">
<tr>
<th colspan="3">U.I Developer</th>
<!-- <th>U.I Developer</th>
<th>U.I Developer</th> -->
</tr>
<tr>
<th>Sr.No</th>
<th>Name</th>
<th>Address</th>
</tr>
<tr>
<td>1</td>
<td>Madhu</td>
<td>hadpsar</td>
</tr>
<tr>
<td>2</td>
<td>Sakshi</td>
<td rowspan="2">Kothrud</td>
</tr>
<tr>
<td>3</td>
<td>Pradip</td>
<!-- <td>Kothrud</td> -->
</tr>
</table> </body>
Output:
Create table
U.I Developer
Sr.No Name Address
1 Madhu hadpsar
2 Sakshi
Kothrud
3 Pradip
NAVIGATION BAR IN HTML:
A navigation bar is also called Navbar. It is used for display the
different webpages in home page.
Syntax: <nav>
<a href=”aboutus.html”> About us </a>
<a href=”contactus.html”> Contact us </a>
<a href=”careerus.html”> Career
us </a> </nav> Example:
<!DOCTYPE html>
<html>
<head>
<title>nav</title>
<style>
nav{
background-color: rgb(122, 99, 99);
}
a{ margin-left:
20px;
}
</style>
</head>
<body>
<nav>
<a href="about.html">AboutUS</a>
<a href="carrier.html">CarrierUS</a>
<a
href="contac
t.html">Cont
actUS</a>
</nav>
</body>
</html>
Output:
FORMS IN HTML:
In HTML we design various types of forms in your webpage.
We can use input tag for create button in the forms.
In form you can find following tags: <form> <div> <label> <input
type=”____”>
For drop down list: <select>
<option> For address: text area.
Input type=”text”
“password”, “file”, “range”, “Date”, “Date and time local”,
“week”, “month”, “submit”, “reset”, “radio”, “checkbox”, “email”,
“number”.
Syntax:
<form>
<div>
<label> </label> <input>
</div>
</form>
Example:
<!DOCTYPE
html>
<html>
<head>
<title>Login form</title>
<style> form{
border: 3px solid green;
background-color:aquamarine;
height: 200px; width:
300px;
/* margin-left: 500px; */
}
div{
margin: 10px;
} body{
background-color: rgb(157, 98, 98);
}
</style>
</head>
<body>
<center>
<form>
<h2>Login form</h2>
<div>
<!-- <label>Username:</label> -->
<input type="text" name="uname" placeholder="Enter
Usename">
</div>
<div>
<!-- <label>Password:</label> -->
<input type="password" name="pass" placeholder="Enter
Password">
</div>
<input type="submit">
<input type="reset">
</form>
</center>
</body>
</html>
Output:
EXAMPLES FOR PRACTICE:
1. Take any one content in all heading tags and show
the output.
2. Take various contents and apply all text formatting
tags (from bold tag to subscripted tag) on them.
(Hint: one text formatting tag on one content)
3. In webpage used the abbreviation tag.
4. Take the text “welcome into ATM service” and
move it from right to left.
5. Create a button of “submit all files”.
6. Give anyone example of anchor tag on your choice.
7. Give anyone example of iframe tag on your choice.
8. Insert the two images in your webpage by using
relative path and absolute path. (Hint: Each path
use for each image)
9. Insert one music on your choice in your webpage.
Insert one music on your choice in your webpage.
10. Insert one video on your choice in your webpage.
11. Create the following list:
• Software Development
1. ERP Domain
2. Health Care Domain
3. Website
▪ Static
▪ Dynamic
• HR Solution
Nebula technology is all type of manpower provided company.
• Training and Placement
I.java platform
a. core java
b. Advance java
c. spring framework
• core spring
• spring move
• spring mvc
• spring boot
II.U.I. Development
A. HTML
B. css
C. javascript
D. react js.
III.testing
o manual testing
o automation testing
1. frontend
2. database
3. API
12. Create the following table:
13. By using navigation bar create web pages in
webpage.
14. Create a registration form of Nebula Tech by using
forms in html.
Important Questions for practice
1. What is the element and their
types.
2. What is attributes.
3. Draw html structure.
4. What is relative URL and absolute URL.
6. Tell the non-closing/singular tag in html and
which?
7. What is the working of controls keyword.
8. What are the types of lists.
9. which tags used in list.
10. Which attribute is used in ordered and
unordered list.
11. How to create table and how to marge table.
12. What is the purpose of rowspan and colspan.
13. which is the main tag for create any table.
14. Where we can use rowspan and colspan.
15. What is the purpose of navigation bar and how
can it display. (we can create website)
16. Which tag is used for block/container if form.
17. How many tags used in form and which that.
18. What is the purpose of text area, option, select.
19. What is the purpose of input tag.