general syntax for html:
<html>
<head>
</head>
<body>
</body>
</html>
sections:
1. head-for technical information about web page
2. body-for information visible to users
Head section:
It consists of five tags:
[Link]
[Link]
[Link]
[Link]
[Link]
Meta tags:
purpose: Search Engine Optimization(SEO)
e.g :
<meta contents=keyword
Contents=description>
Des:
To search the contents in accordance with keywords
title:
<title> the contents </title>
style:
cascade style sheets
links:
syntax:
<link/>
To embed one external file into web page
It is a self-closing tag
script:
java script-client side scripting language.
Body section:
Text
Images
Video
Icon
Search box
Links
Button
Login
Calendar , etc
Text
<body> text
</body>
It may be of paragraph with common attributes
Name
Id
Class
Value
Paragraph:
It consists of following tags:
Font
Bold, strong
Italics, embass
Marquee
Underline
Break
Division
Span
Strike
Blink
Insert
Delete
Super, sub script
Typewriter
syntax:
<p align= center, right, left >
Text
</p>
Font:
<font face= arial, times new roman size=1,2..,7>
</font>
Syntax:
<p> text
<u> underlined text </u>
<b> bold text </b>
<i> italics text </i>
break </br>
</p>
e.g 1.1
<p align=left >
Text appear in left</p>
<p align=right>
Text appear in right</p>
<p align=center >
Text appear in center </p>
Division tags
Division tag:
To separate one line of sentence from another.
It acts like a break tag(</br)
Attributes :
1. Align-centre, right, left
2. Style-red, green, blue, pink etc
Span tag:
There is no separation between lines
Attributes:
Style-to set color of the text
e.g
<div align=center style="color:red"> the division
</div>
<span style="color:green"> the span
</span>
Embass tag:
It displays the text in italics
<em>similar to i tag</em>
Strong tag:
It displays the text in bold format
<strong> similar to b tag</strong>
Strike tag:
<strike>strike</strike>
Blink tag:
To appear the text in blinking format
<blink> blink</blink>
Insert Tag:
To insert the text, it appears in underlined format
<ins> ad</ins>
Delete tag:
To delete the text,it works like strike tag
<del> a</del>
Subscript and superscript tag:
Mathematical representation of the expression
Sub denotes the value at base
Sup denotes the value at power
e.g
<sub> 2</sub>
<sup>10</sup>
Typewriter tag:
To display the text in typewriter format
<tt>typewriter text</tt>
Pre tag:
To represents the last text of the html.
It is placed after the closing of the html tag
e.g
</html>
<font face=arial color=green>
<pre>text appear at bottom of page</pre>
</face>
Marquee tag:
It appear text in scrolling manner depends on given direction.
Attribute
Direction- up, down, left, right
<marquee direction=right>
upcoming events</marquee>
Frame sets:
To divide the webpage into rows and columns
It doesn’t contain body section
Column wise frameset:
To divide the frameset into columns with 40% for html1,80% for html2
Attributes:
1. Src-name of the html to be embed
2. Name-order of the html to be appear
eg
<html>
<head>
<title>my framset</title>
</head>
<frameset cols=40%,80%>
<frame src=[Link] name=1>
<frame src=[Link] name=2>
</frameset>
</html>
To allocate 40% for html1 and remaining space for html2
<frameset cols=40%,*>
To display frame with no scrolling and no option for resize:
<frame src=[Link] name=1 scrolling=no noresize>
To display the 4 frames in rows and column wise
<html>
<head>
<title>my frameset</title>
</head>
<frameset rows=40%,60%>
<frameset cols=40%,60%>
<frame src=[Link] name=1 >
<frame src=[Link] name=2>
</frameset>
<frameset cols=50%,*>
<frame src=[Link] name=3>
<frame src=[Link] name=4>
</frameset>
</html>
To display 2 frames in column and one at row
<html>
<head>
<title>my frameset</title>
</head>
<frameset rows=40%,60%>
<frameset cols=40%,60%>
<frame src=[Link] name=1 >
<frame src=[Link] name=2>
</frameset>
<frameset cols=50%>
<frame src=[Link] name=3>
</frameset>
</html>
Images
To embed an image use tag
<img src=chennai_central_.jpg >
Img tags
Attributes
1. Alt-display the alternate text instead of images if the image is not avilable
2. Width-pixels
3. Height-pixels
<img src =[Link] alt=kolkaata width=200 height=400>
Usemap
To link to another page
It consists of
area
Map name
Href
e.g
<img src=chennai_central_.jpg usemap=#na>
<map name=na >
<area shape=rectangle coords=50,50,100,100>
Area shape:
Circle-it consists of 3 values for cords
Rectangle-four values for coords
e.g
Href: to link to specified web by clicking the coords area in image specified
<href=[Link]
Note:
Ensure the image file and html file are placed at same folder to avoid link problems
e.g for image tag
<html>
<head>
<title>images</title>
</head>
<body>
<img src=chennai_central_.jpg usemap=#na>
<map name=na >
<area shape=rectangle coords=50,50,100,100>
<href=[Link]>
<img src =[Link] width=200 height=400>
</body>
</html>