(MEERA) Dapodi Call Girls Just Call 7001035870 [ Cash on Delivery ] Pune Escorts
basic knowledge abot html
1. 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)
2. 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
3. - 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 :
4. 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
5. 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:
6. 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
7. 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 : <!-- some text →
:E x a m p le :E x a m p le <html><body>
<!--It will not be displayed-->
<h3>Plant Trees </h3>
</body></html>
Plant Trees
/ :O P/ :O P
8. 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)
9. 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
10. 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 :
11. 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
12. 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
13. 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.
14. :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
15. 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.
16. :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
17. 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
18. 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 :
19. 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.
20. <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.
21. 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
22. 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>
