basic knowledge abot html

H TM LH TM L

HTML – Hyper Text Markup Language

HTML documents describe web pages (Static Web
Page)

HTML tags are keywords surrounded by angle
brackets like <html>

HTML tags normally come in pairs like <b> and </b>

The first tag in a pair is the start tag (opening tags),
the second tag is the end tag(closing tags)

IM P LE M E N TATIO NIM P LE M E N TATIO N
:W H E R E W E W R ITE C O D E :W H E R E W E W R ITE C O D E
1.Text Editor
1.Wordpad (In Windows OS)
2.Gedit Text Editor (Ubundu in LINUX)
2.FrontPage or Dreamweaver
W H E R E W E E X E C U TEW H E R E W E E X E C U TE :
1.Double Click that HTML File. (or)
2.Right click – Open With Internet Explorer

- 1S im p le C o d e - 1S im p le C o d e
First Planet
First Planet

<html> .... </html> describes the web page

<body> ..... </body> is the visible page content
<html>
<body>
<h1>First Planet</h1>
<h6>First Planet</h6>
</body>
</html>
O/P :O/P :

Lin k Ta gLin k Ta g
Html Links :Html Links :
Html links are defined with the <a> tag
Syntax :Syntax : <a href="http://www.gmil.com">Gmail</a>
ExampleExample :: <html>
<body>
<a href="http://www.gmail.com">Gmail</a>
</body>
</html>
GmailO/P :O/P :
If we click this link it goes to gmail
account

Im a g e Ta gIm a g e Ta g
:H TM L Im a g e s :H TM L Im a g e s
HTML images are defined with the <img> tag.
:S y n t a x :S y n t a x <img src "123.jpg" width="104" height="142" />
:E x a m p le :E x a m p le <html>
<body>
<img src="word.jpg" width="104" height="142" />
</body>
</html>
O/P:O/P:

H TM L R U LE S
( ) :H TM L R u le s Lin e s( ) :H TM L R u le s Lin e s
The <hr /> tag is used to create an horizontal
rule (line).
:E x a m p le :E x a m p le<html><body>
<h3>Exnora</h3>
<hr />
<h3>Safety Exnora</h3>
</body></html>
O/P :O/P :
Exnora
Safety Exnora

H TM L C O M M E N TSH TM L C O M M E N TS
:H TM L C o m m e n t s :H TM L C o m m e n t s
Comments can be inserted in the HTML code to make
more readable and understandable. Comments are ignored by the browser
and are not displayed.
S y n t a xS y n t a x : 
<h3>Plant Trees </h3>
</body></html>
Plant Trees
/ :O P/ :O P

H TM L TE X TH TM L TE X T
F O R M ATTIN GF O R M ATTIN G
<html><body>
<b>Confidence</b><br />
<big>Hardwork</big><br />
<i>Preseverance</i><br />
<code>Samsung CRT</code><br />
This is<sub> subscript</sub><br />
This is<sup> superscript</sup>
</body></html>
Some Formatting Tags are 1,b-B o ld , 2.i-Italic, 3.code-
Computer code,4.sub-Subscript & 5.sup-Superscript
Implement it as a Exercise
(Practical)

H TM L S TYLEH TM L S TYLE
ATTR IB U TE SATTR IB U TE S
Ta g sTa g s D e s c r ip t io nD e s c r ip t io n
<center> Defines centered content
<font> Defines HTML fonts
<s> and <strike> Defines strikeout text
<u> Defines underlined text
A t t r ib u t e sA t t r ib u t e s D e s c r ip t io nD e s c r ip t io n
Align Defines the alignment of text
Bgcolor Defines the background color

S TYLE E X A M P LES TYLE E X A M P LE
<html>
<h1 style="text-align:center">NATURE</h1>
<body style="background-color:yellow">
<p style="font-family:Purisa;color:red">Plant Tree</p>
<p style="font-family:times;color:red">Save Our Generation</p>
<p style="font-size:40">Value Our Environment</p>
</body> </html>
NATURE
Plant Tree
Save Our Generation
Value Our Environment
O/P :O/P :

H TM L TA B LE SH TM L TA B LE S

Tables are defined with the <table> tag.

A table is divided into rows (with the <tr> tag),

Each row is divided into data cells (with the <td> tag). The letters td
stands for "table data," which is the content of a data cell.

Headings in a table are defined with the <th> tag.
<table border="1">
<tr> <td>row 1, cell 1</td>
<td>row 1, cell 2</td> </tr>
<tr> <td>row 2, cell 1</td>
<td>row 2, cell 2</td></tr>
</table>
row1,cell1 row1,cell2
row2,cell1 row2,cell2

TA B LE F E ATU R E STA B LE F E ATU R E S
1 . :Ta b le w it h a c a p t io n
<caption>My Caption</caption>
2 .Ta b le c e lls t h a t s p a n m o r e t h a n o n e
/ :r o w c o lu m n
<th colspan="2">Telephone</th>
<th rowspan="2">Telephone:</th>
3 . :C e ll p a d d in g
<table border="1" cellpadding="10">
4 . :C e ll s p a c in g
<table border="1" cellspacing="10">
5 .A d d a b a c k g r o u n d c o lo r o r a b a c k g r o u n d

H TM L LIS TSH TM L LIS TS
HTML supports ordered, unordered and definition lists.
:O r d e r e d Lis t s :O r d e r e d Lis t s

An ordered list is also a list of items. The list items are marked with numbers.

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
:U n o r d e r e d Lis t s :U n o r d e r e d Lis t s

An unordered list is a list of items. The list items are marked with bullets
(typically small black circles).

An unordered list starts with the <ul> tag. Each list item starts with the <li>
tag.

:D e f in it io n Lis t s :D e f in it io n Lis t s

A definition list is not a list of single items. It is a list of items (terms),
with a description of each item (term).

A definition list starts with a <dl> tag (definition list).

Each term starts with a <dt> tag (definition term).

Each description starts with a <dd> tag (definition description).
U n o r d e r e dU n o r d e r e d
:Lis t :Lis t

ThinkPositve

Never Depressed

Keep Smiling
O r d e r e dO r d e r e d
:Lis t :Lis t
1.Fail
2.Work Hard
3.Win
4.Teach
D e f in it io nD e f in it io n
:Lis t :Lis t
Success
Fail First,
Happy
Smile Always

H TM L F O R M SH TM L F O R M S
HTML Forms are used to select different kinds of user input.

A form is an area that can contain form elements.

Form elements are elements that allow the user to enter information like,
1. text fields,
2. textarea fields,
3. drop-down menus,
4.radio buttons,
5. checkboxes,
6. Action Attribute and the Submit Button,etc.

:Te x t F ie ld s :Te x t F ie ld s
Text fields are used when you want the user to type letters,
numbers, etc. in a form.
:E x a m p le :E x a m p le
<form>
First name: <input type="text" name="firstname" /> <br />
Last name: <input type="text" name="lastname" />
</form>
First name :
Last name :
:O U TP U T :O U TP U T

R A D IO & C H E C K B O XR A D IO & C H E C K B O X
:R a d io B u t t o n s :R a d io B u t t o n s
<form>
<input type="radio" name="sex" value="male" /> Male <br />
<input type="radio" name="sex" value="female" /> Female
</form>
:C h e c k b o x e s :C h e c k b o x e s
<form>
Bike: <input type="checkbox" name="vehicle" value="Bike"/> <br />
Car: <input type="checkbox" name="vehicle" value="Car"/><br />
</form>
Male
Female
Bike
Car

Form Action AttributeForm Action Attribute
:A c t io n A t t r ib u t e a n d t h e S u b m it B u t t o n

When the user clicks on the "Submit" button, the content of the form is
sent to the server.

The form's action attribute defines the name of the file to send the
content to.

It depends on PHP File.
<form name="input" action="html_form_submit.asp" method="get">
Username:<input type="text" name="user"/>
<input type="submit" value="Submit" />
</form>
Submit
Username :

H TM L LAYO U TH TM L LAYO U T

A part of this page is formatted with two columns, like a newspaper page.

The trick is to use a table without borders, and maybe a little extra cell-
padding.

No matter how much text you add to this page, it will stay inside its
column borders.

<table border="0" width="100%" cellpadding="10">
<tr>
<td width="50%" valign="top">
This is the Time to save Our Earth to Our Future Generation.So
everybody shoud be a Volunteer.
</td>
<td width="50%" valign="top">
For smooth relationship between to us & nature We should do some
activities to Preserve our Earth.
</td>
</tr> </table>
This is the Time to save
Our Earth to Our Future
Generation.So
everybody shoud be a
Volunteer.
For smooth relationship
between to us & nature We
should do some
activities to Preserve our
Earth.

H TM L F R A M E SH TM L F R A M E S

With frames, you can display more than one HTML document in the
same browser window.

Each HTML document is called a frame, and each frame is independent of
the others.
The Frameset Tag
* The <frameset> tag defines how to divide the window into frames
* Each frameset defines a set of rows or columns
* The values of the rows/columns indicate the amount of screen area each
row/column will occupy

VE R TIC A L & H O R IZ O N TA LVE R TIC A L & H O R IZ O N TA L
F R A M E S E TF R A M E S E T<html>
<frameset cols="30%,40%,30%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>
<html>
<frameset rows="30%,40%,30>
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>

basic knowledge abot html

More Related Content

What's hot

Similar to basic knowledge abot html

More from Ankit Dubey

Recently uploaded

basic knowledge abot html