Scribd
Upload
2 views

html_tutorial_for_beginners (1) (1)

The document provides a comprehensive guide to HTML, detailing its structure, essential tags, and their functions for web design. It covers various HTML elements such as head, body, title, and different formatting tags, along with examples of their usage. Additionally, it explains how to create links, images, and tables within HTML documents.

Uploaded by

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

html_tutorial_for_beginners (1) (1)

The document provides a comprehensive guide to HTML, detailing its structure, essential tags, and their functions for web design. It covers various HTML elements such as head, body, title, and different formatting tags, along with examples of their usage. Additionally, it explains how to create links, images, and tables within HTML documents.

Uploaded by

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

WEB

DESIGNING

HTML
Hyper text markup
language
Learn coding fast
Written by
Rocky Sah
www.techlivly.com
Page 1 of 57
www.techlivly.com HTML

Hyper text markup language


• The full form of HTML is hyper text markup language .
• It is the language which is use to create web pages.
• < > are use in HTML , so it is called markup language.
• Hyper text or hyper link means two or more page are linked together.
• Always need to close the open tag.
<…> : open tag
</…> : close tag

Structure of HTML
<html>
<head>

</head>

<body>

</body>
</html>

For example

Code
<html>
<head>
this is my heading
</head>
<body>
this is my first passage
</body>
Page 2 of 57
www.techlivly.com HTML

</html>
Output

• The HTML file must be save with .html extension.


• Html code not affected by two or more space , it always take only one space

Tags which use to create HTML file

1) Head tag <head>

Head tag are use to contain all the head element in the html file. It contain the
title , style , meta ,….. etc.
In this what ever we written will not show in website.

For example

Code
<html>
<head>
this is my heading
</head>
<body>
Page 3 of 57
www.techlivly.com HTML

</body>
</html>
Output

2) Body tag <body>

It use to define the body of html document . it contain image ,tables, list, …..
etc.

For example

code
<html>
<head>
</head>
<body>
hi my name is sumit sarkar.there we can add image, table, list ... etc
</body>
</html>
Page 4 of 57
www.techlivly.com HTML

Ouput
3) Title tag <title>

It is use to change the name of path into tag.


it must be written in head tag.

For example

code
<html>
<head>
<title>sumit sarkar technology </title>
</head>

<body>

</body>
</html>

Output
Page 5 of 57
www.techlivly.com HTML

4) Heading tag <h1> <h2> <h3> <h4> <h5> <h6>

• It is use to change the size of text.


• There are six heading tag, each heading tag have different text size.
• it is use in body tag.

For example

code
<html>
<head>
</head>

<body>
<h1> statement.... </h1>
<h1> statement.... </h1>
<h2> statement.... </h2>
<h3> statement.... </h3>
<h4> statement.... </h4>
<h5> statement.... </h5>
<h6> statement.... </h6>
</body>
</html>
Page 6 of 57
www.techlivly.com HTML

Output

5) Paragraph tag <P>

It is use to define paragraph content in html document.

For example

code
<html>
<head>
<title> sumit sarkar technology </title>
</head>
<body>
hi i am sumit sarkar from india .<p> i study in dcrust university with
btechstream. </p>

</body>
Page 7 of 57
www.techlivly.com HTML

</html>
Output

6) Line breack tag <br>

It is use to change the line.


This tag not need close tag.

For example

code
<html>
<head>
<title> sumit sarkar technology </title>
</head>

<body>
hi i am sumit sarkar from india .<br> i study in dcrust university with btech
stream.

</body>
</html>
Page 8 of 57
www.techlivly.com HTML

Output

7) Bold tag <b>

It is use to bold content in html file .

For example

code
<html>
<head>
<title> sumit sarkar technology </title>
</head>

<body>
hi i am sumit sarkar from india . <b> i study in dcrust university with btech
stream. </b>

</body>
</html>

Output
Page 9 of 57
www.techlivly.com HTML

8) Emphasis or italic tag <i>

It is use to write the content in italic format.

For example

code
<html>
<head>
<title> sumit sarkar technology </title>
</head>

<body>
<i>hi i am sumit sarkar from india .</i><em>i study in dcrust university with
btech stream.</em>

</body>
</html>

Output
Page 10 of 57
www.techlivly.com HTML

9) under line tag <u>

it is use to under line any text .

for example

code
<html>
<head>
<title> sumit sarkar technology </title>
</head>

<body>

<u> hi i am sumit sarkar from india .</u> i study in dcrust university with btech
stream.

</body>
</html>

Output
Page 11 of 57
www.techlivly.com HTML

10) Super script tag <sup>

It is use to add power in any word or number like this X2.

For example

code
<html>
<head>
<title> sumit sarkar technology </title>
</head>

<body>

we can also write 16 in the form of 4<sup>2</sup>

</body>
</html>

Output
Page 12 of 57
www.techlivly.com HTML

11) Sub script tag <sub>

It is use to add base in any number like X2 .

for example

Code
<html>
<head>
<title> sumit sarkar technology </title>
</head>

<body>

base of 4 is 2 and it is mathemeticallywriten in the form of 4<sub>2</sub>

</body>
</html>

Output
Page 13 of 57
www.techlivly.com HTML

12) Horizontal line tag <hr>

It is use to add a horizontal line.

For example

code
<html>
<head>
<title> sumit sarkar technology </title>
<hr></hr>
</head>
<body>
<hr></hr>
<hr></hr>
base of 4 is 2 and it is mathematically writen in the form of 4<sub>2</sub>
<hr></hr>

<hr></hr>
</body>
</html>

Output
Page 14 of 57
www.techlivly.com HTML

13) Small tag <small>

It is use to reduce size of texts.


it not small the size of text too much.

For example

code
<html>
<head>
<title> sumit sarkar technology </title>
<hr></hr>
</head>

<body>
hi my name is sumit sarkar ( without small tag).<br>

<small> hi my name is sumit sarkar (with small tag).</small>


</body>
</html>

Output
Page 15 of 57
www.techlivly.com HTML

14) Pre tag <pre>

It is use to print same text which havetwo or more space or written in other line.

For example

code
<html>
<head>
<title> sumit sarkar technology </title>
</head>
<body>

<pre> int x,y;.


here int means integer type
x and y is a variable
thank you
</pre>

</body>
</html>

Outpu
Page 16 of 57
www.techlivly.com HTML

15) Mark tag <mark>

It is use to highlight any text.

For example

code
<html>
<head>
<title> sumit sarkar technology </title>
</head>

<body>
my name is <mark>sumit sarkar</mark> .i am from gaya ,bihar
</body>
</html>

Output

16) Center tag <center>

It is use to move anything like text image,video ,table etc at the middle.
Page 17 of 57
www.techlivly.com HTML

For example

Code
<html>
<head>
<title> sumit sarkar technology </title>
</head>
<body>
<center>
<pre> center tag is use to
move any thing like image,text, table etc
in middle of the screen </pre>
</center>
</body>
</html>

Output

17) Delete text <del>

It is use to delete text without deleting the text that means one horizontal line is
drawn on the text .
Page 18 of 57
www.techlivly.com HTML

For example

code
<html>
<head>
<title> sumit sarkar technology </title>

</head>

<body>
my name is sumit sarkar.<del>i am from gaya ,bihar.</del> i doing engineering
from drcust University,delhi-->
</body>
</html>

Output

18) Comment tag <!-- . . . . . . . . . . . -->

It is use to set the comment in html document .


It not visible on the browser.

For example
Page 19 of 57
www.techlivly.com HTML

code
<html>
<head>

<title> sumit sarkar technology </title>


</head>
<body>
<!--my name is sumit sarkar.i am from gaya ,bihar. i doing engineering from
drcust University,delhi -->
</body>
</html>

Output

HTML LINKS
1) Ancor tag <a href= “ link” > name of icon </a>

2) This tag is use to link one page to another page


3) The link written must be proper
4) Name of the icon is totally yours choice
5) When use this tag , a underline is drawn at bottom of icon name by default
and we can remove it by a tag .

For example

code
Page 20 of 57
www.techlivly.com HTML

<html>
<head>
<title> sumit sarkar technology </title>
</head>
<body>
<a href="https://wordpress.com/view/technologygyan.tech.blog">
TECHNICAL SUMIT </a>
</body>
</html>

Output

2) Remove Underline tag <a href= “ link” style =”text-decoration :


………………………… …………. none ” > name of icon </a>

This tag is use to remove underline from name of icon where we can click for
go to next page.

For example

code
<html>
<head>

<title> sumit sarkar technology </title>

</head>

<body>
<a href="https://wordpress.com/view/technologygyan.tech.blog" style="text-
decoration : none"> TECHNICAL SUMIT </a>
Page 21 of 57
www.techlivly.com HTML

</body>
</html>

Output

3) Open link in new tab tag < a href= “ link” target= “_blank ”
……………………………………………….> name of icon </a>

This tag is use for open one page to another page in another tab.

For example

code
<html>
<head>

<title> sumit sarkar technology </title>

</head>

<body>
<a href="https://worprss.com/view/technologygyan.tech.blog"target="_blank">
TECHNICAL SUMIT </a>
</body>
</html>

Output
Page 22 of 57
www.techlivly.com HTML

4) Link instruction tag < a href= “ link” title= “sentence which we


……………………………… want to show”.> name of icon </a>

It is use to show instruction when we move mouse pointer on the other page
link button.
For example

code
<html>
<head>

<title> sumit sarkar technology </title>

</head>

<body>
<a href="https://wordress.com/view/technologygyan.tech.blog"target="_blank "
title="click here for access website" > TECHNICAL SUMIT </a>
</body>
</html>
Page 23 of 57
www.techlivly.com HTML

Output

5) Button tag <button> </button>

It is use to create a button .

We can use it any where when we need button like structure .


For example

Code
<html>
<head>
<title> sumit sarkar technology </title>

</head>

<body>
<button>

<a href="https://wordress.com/view/technologygyan.tech.blog"target="_blank "


title="click here for access website" > TECHNICAL SUMIT </a>
</button>

</body>
Page 24 of 57
www.techlivly.com HTML

</html>
Output

HTML IMAGE
1) Image tag <img src= “image foldername / image file name “>

• It is use to add image.


• You must have enter full address of image path.

For example

Code

<html>

<head>

<title> sumit sarkar technology </title>

</head>
Page 25 of 57
www.techlivly.com HTML

<img src="D:/web designing/welcome msg jpg.jpg">

</body>

</html>

Output

2) Ssize of image tag folder name / image file name”


<img src= “image
………………………….width=”size” height= “size” >

It is use to resize any image by its width and height.


For example

code

<html>

<head>
Page 26 of 57
www.techlivly.com HTML

<title> sumit sarkar technology </title>

</head>

<body>

<img src="D:/web designing/welcome msg jpg.jpg " width="700'


height="300">

</body>

</html>
Output

3) Alt tag folder name / image file name”


<img src= “image
………………………….alt=”enter any thing as your choice” >

It is use to show what type of image is there if the image source file is removed
or you entered wrong image file source,actually it help to know the type of
image by manually entering hint.
For example
Page 27 of 57
www.techlivly.com HTML

Code
<html>
<head>
<title> sumit sarkar technology </title>

</head>

<body>

<img src="D:/web designing/welcome msg jpg.jpg " alt="welcome pic is


there">

</body>

</html>
Output

HTML TABLES
1) Table tag <table>
• It is use to create table .
• By using this table we can’t create table like structure but adding some more
tag we can create table.
For example
Page 28 of 57
www.techlivly.com HTML

Code<html>
<head>
<title> sumit sarkar technology </title>
</head>
<body>
<table>
roll
student name
class
marks
</table>
</body>
</html>
Output

2) Row of table tag <tr>

• It is use to create row .


• If you need one row then we have to write one row tag or we have need
many row then we need namy number of row tag as number of row need.
For example
Page 29 of 57
www.techlivly.com HTML

Code
<html>
<head>
<title> sumit sarkar technology </title>
</head>
<body>
<table>
<tr>
roll
student name
class
marks
</tr>
</table>
</body>
</html>
Output

3) Heading of table tag <th>

• It is use to write heading of the table which show in bold word..


• We can also call it as a column tag because number of heading tag are
specify the number of column in a table.
Page 30 of 57
www.techlivly.com HTML

• It has one more tag that called table data tag which specify the data of table.
(we see it in next tag)
For example

Code
<html>
<head>
<title> sumit sarkar technology </title>
</head>
<body>
<table>
<tr>
<th> roll </th>
<th> student name </th>
<th> class </th>
<th> marks</th>
</tr>
</table>
</body>
</html>
Output

4) Data of table <td>

• It is use to write data in the table.


Page 31 of 57
www.techlivly.com HTML

• Data written in this tag are not in bold.

For example

Code
<html>
<head>
<title> sumit sarkar technology </title>
</head>
<body>
<table>
<tr>
<th> roll </th>
<th> student name </th>
<th> class </th>
<th> marks</th>
</tr>
<td> 23 </td>
<td> sumit sarkar </td>
<td>12<sup>th</sup> </td>
<td> 340 </td>
</table>
</body>
</html>
Page 32 of 57
www.techlivly.com HTML

Output

5) Border of table < table border=”outer border thikness start from 1” >

It is use to add border in table.

For example

Code
<html>
<head>
<title> sumit sarkar technology </title>
</head>
Page 33 of 57
www.techlivly.com HTML

<body>
<table border="1">
<tr>
<th> roll </th>
<th> student name </th>
<th> class </th>
<th> marks</th>
</tr>
<td> 23 </td>
<td> sumit sarkar </td>
<td>12<sup>th</sup> </td>
<td> 340 </td>
</table>

</body>
</html>

Output

6) Cellspacing cellspacing=” cellspacing size start from 0”

It is use reduce the thikness of border.


Page 34 of 57
www.techlivly.com HTML

For example

Code
<html>
<head>
<title> sumit sarkar technology </title>
</head>
<body>
<table border="1" cellspacing="0">
<tr>
<th> roll </th>
<th> student name </th>
<th> class </th>
<th> marks</th>
</tr>
<td> 23 </td>
<td> sumit sarkar </td>
<td>12<sup>th</sup> </td>
<td> 340 </td>
</table>
Page 35 of 57
www.techlivly.com HTML

</body>
</html>
Output

7) Cellpadding cellpadding=” size of each box start from 1”

It is use to increase or decrease the size of each box.

For example

Code
<html>
<head>
<title> sumit sarkar technology </title>
</head>
<body>
Page 36 of 57
www.techlivly.com HTML

<table border="1" cellspacing="0" cellpadding="7">


<tr>
<th> roll </th>
<th> student name </th>
<th> class </th>
<th> marks</th>
</tr>
<td> 23 </td>
<td> sumit sarkar </td>
<td>12<sup>th</sup> </td>
<td> 340 </td>
</table>

</body>
</html>

Output

Note: if data or heading of table are not in middle of the box then use center tag
in table tag for middle the all data in table. if we use center tag before table tag
then all the data will be in middle but table is also move to middle.

8) Colspan colspan=”2”

It is use to take two column as a one column.


Its range is start from 2 because one column is already taken so, we have to
enter range from 2 to more.
Page 37 of 57
www.techlivly.com HTML

For example

Code
<html>
<head>
<title> sumit sarkar technology </title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="7">
<tr>
<th colspan="2"> roll </th>
<th> student name </th>
<th> class </th>
<th> marks</th>
</tr>
<td> 23 </td>
<td> sumit sarkar </td>
Page 38 of 57
www.techlivly.com HTML

<td>12<sup>th</sup> </td>
<td> 340 </td>
</table>

</body>
</html>
Output

Note- we can use it in table heading tag (th) and table data tag (td) both according to need.

9) Rowspan colspan=”2”

It is use to take two row as a one column.


Its range is start from 2 because one row is already taken so, we have to enter
range from 2 to more.

For example
Page 39 of 57
www.techlivly.com HTML

Code
<html>
<head>
<title> sumit sarkar technology </title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="7">
<tr>
<th rowspan="2"> roll </th>
<th> student name </th>
<th> class </th>
<th> marks</th>
</tr>
<td> 23 </td>
<td> sumit sarkar </td>
<td>12<sup>th</sup> </td>
<td> 340 </td>
</table>
</body>
</html>

Output
Page 40 of 57
www.techlivly.com HTML

Note- we can use it in table heading tag (th) and table data tag (td) both according to need.

HTML LIST
There are two type of list in html.
1) Unordered list
2) Order list
1) Unordered list <ul>
• It is use to create a unordered list which have no numbering .
• Its means in unordered list there is no numbering like 1,2,3…… or abcd etc.
• In this unordered list circle , black dot , square etc are shown in place of
1,2,3….. or abcd…..
• After written unordered list tag we must have to write <li> tag to write any
element in the list.
• We can also use a attribute to change the shape which is by default (desc
shape) to circle , square by using type=”square” , type=”circle” attributes.
For example

Code
<html>
<head>
Page 41 of 57
www.techlivly.com HTML

</head>

<body>
<ul>
<li>laptop</li>
<li>mouse</li>
<li>pen drive</li>
<li>keyboard</li>
</ul>
</body>
</html>

output

2) ordered list <ol>

• It is use to create a ordered list which have numbering .


• Its means in ordered list there is numbering like 1,2,3…… or abcd etc.
• In this ordered list 123 or abcd are shown in place of circle , black dot ,
square.
• After written ordered list tag we must have to write <list> tag to write any
element in the list.
• We can also use a attribute to change the numbering which is by default
1,2,3,… by using type=”a” , type=”A” attributes.
Page 42 of 57
www.techlivly.com HTML

For example

Code
<html>
<head>

</head>

<body>
<ol>
<li>laptop</li>
<li>mouse</li>
<li>pen drive</li>
<li>keyboard</li>
</ol>
</body>
</html>

Output

Note- we can use start=” enter number from where to start for example 4 Or
or N ” attribute to start number from any where.
Page 43 of 57
www.techlivly.com HTML

HTML FORM

It is use to create a form .

Form tag <form>

It is use to create a form.


What needs inside the form that tag must be written inside form tag .

For example

Code
<html>
<head>
</head>
<body>
<form>

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

Label tag <label> custom label name that’s show what need to type in
box </label>
Page 44 of 57
www.techlivly.com HTML

It is use to show that what need to type in the box which is creating by input
type tag.

For example

Code
<html>
<head>
</head>
<body>
<form>
<label> first name </label>
</form>
</body>
</html>

Output

Input tag <input>

• It is one of the most used form element that can be displayed in several
ways, depending on the type attribute.
• In this we can use many types attribute like text ,password, radio and many
more which is entered by user in a box which created by input tag.

For example
Page 45 of 57
www.techlivly.com HTML

Code
<html>
<head>

</head>
<body>
<form>
<input>
</form>
</body>
</html>

Output

1) Input Type attributes (text) type=”text”

• It is use to enter text in the box .


• All the ‘type’ attributes must be written inside the input tag and due to create
form so form tag is always must.

For example
Page 46 of 57
www.techlivly.com HTML

Code
<html>
<head>

</head>

<body>
<form>
<input type="text">
</form>
</body>
</html>

Output

2) Input Type attributes (password) type=”password”

• It is use to enter passwork in the box , which is not visible.


• All the ‘type’ attributes must be written inside the input tag and due to create
form so form tag is always must.
Page 47 of 57
www.techlivly.com HTML

For example

Code
<html>
<head>

</head>

<body>
<form>
<input type="password">
</form>
</body>
</html>

Output

3) Input Type attributes (email) type=”email ”

• It is use to enter email in the box.


• Note that it is use in HTML 5 because in other version of html it is working
so we use text type in place of email.
• All the ‘type’ attributes must be written inside the input tag and due to create
form so form tag is always must.
Page 48 of 57
www.techlivly.com HTML

For example

Code
<html>
<head>

</head>

<body>
<form>
<input type="email">
</form>
</body>
</html>

Output

4) Input Type attributes (place holder) <place holder>

It is use to show suggestion inside the box where user can enter any thing.

For example
Page 49 of 57
www.techlivly.com HTML

Code
<html>
<head>

</head>

<body>
<form>
<input type="password" placeholder=”enter your password”>
</form>
</body>
</html>

Output

5) Input Type attributes (radio) type=”radio ”

• It is use to create option from which one option is selected by user.


• Note that in this one option is selected when we use a attribute ‘name’. if
we does not use ‘name’ attribute than all the option will select at a time.
• We will discuss about ‘name’ attribute later
Page 50 of 57
www.techlivly.com HTML

For example

Code
<html>
<head>
</head>
<body>
<form>
<input type="radio" name="gender(same word in both)">male
<input type="radio" name="gender(same word in both)">female
</form>
</body>
</html>

Output

6) Input Type attributes (check box) type=”checkbox”

It is use to create check box for user to agree to there term and condition or any
thing else.

For example
Page 51 of 57
www.techlivly.com HTML

Code
<html>
<head>
</head>
<body>
<form>

<input type="checkbox"> yes, to agree

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

Output

7) Input Type attributes (submit) type=”submit”

It is use to create submit button for user to submit forms.

For example
Page 52 of 57
www.techlivly.com HTML

Code
<html>
<head>

</head>

<body>
<form>
<input type="submit" value=click>
</form>
</body>
</html>

Output

8) Input Name attribute name=” . . . . “


• It is basically not important for html but it is use in radio tag due to select
one option, if we does not use it in radio type than when we select one
option to another option then all t he option will selected.
• Now most important thing is that , this attribute is must to use in form
because when we use any server like php then there need to show this name
for storing data.

Select tag <select>


Page 53 of 57
www.techlivly.com HTML

It use to select option from a list.

For example

Code
<html>
<head>
</head>
<body>
<form>

<select>

</select>

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

Output
Page 54 of 57
www.techlivly.com HTML

Option tag <option>

• It is use to create a selection list.


• This tag is use inside the select tag.
• Here value attribute is use to show data in database.

For example

Code
<html>
<head>

</head>

<body>
<form>
<select>
<!-- value attribute use to show sata in database-->
<option> select your plan </option>
<option value="personal"> personal </option>
<option value="premium"> premium </option>
<option value="business"> business </option>
</select>
</form>
Page 55 of 57
www.techlivly.com HTML

</body>
</html>

Output

Text area <textarea>


• It is use to create a space where user can write anything or comments
• In this tag we can use attribute to adjust the length and breath of text area.
• This tag can be use inside form tag or any where.

For example

Code
<html>
<head>

</head>
Page 56 of 57
www.techlivly.com HTML

<body>

<textarea> </textarea>

</body>
</html>

Output

Download option
Download attribute download=”file name”

• It is use to directly download any type file by clicking .


• It always work with ancor tag.

For example

Code
<html>
<head>
<title> sumit sarkar technology </title>
Page 57 of 57
www.techlivly.com HTML

</head>
<body>
<button>
<a href="E:/web designing/Html.docx" download="html" title="click here for
download" > download </a>
</button>
</body>
</html>
Output

You might also like