hyper text markup language ppt-100605011058-phpapp02.pdf

H TM L
H 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 N
IM 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 TE
W 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

- 1
S im p le C o d e - 1
S 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 g
Lin 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>
Example
Example :
: <html>
<body>
<a href="http://www.gmail.com">Gmail</a>
</body>
</html>
Gmail
O/P :
O/P :
If we click this link it goes to gmail
account

Im a g e Ta g
Im 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 TS
H 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 x
S y n t a x : 
<h3>Plant Trees </h3>
</body></html>
Plant Trees
/ :
O P
/ :
O P

H TM L TE X T
H TM L TE X T
F O R M ATTIN G
F 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 TYLE
H TM L S TYLE
ATTR IB U TE S
ATTR IB U TE S
Ta g s
Ta g s D e s c r ip t io n
D 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 s
A t t r ib u t e s D e s c r ip t io n
D 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 LE
S 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 S
H 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 S
TA 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 TS
H 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 d
U n o r d e r e d
:
Lis t :
Lis t

ThinkPositve

Never Depressed

Keep Smiling
O r d e r e d
O 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 n
D e f in it io n
:
Lis t :
Lis t
Success
Fail First,
Happy
Smile Always

H TM L F O R M S
H 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 X
R 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 Attribute
Form 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 T
H 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 S
H 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 L
VE R TIC A L & H O R IZ O N TA L
F R A M E S E T
F 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>

hyper text markup language ppt-100605011058-phpapp02.pdf

More Related Content

Similar to hyper text markup language ppt-100605011058-phpapp02.pdf

More from Jayaprasanna4

Recently uploaded

hyper text markup language ppt-100605011058-phpapp02.pdf