Web Page Designing Using HTML
HTML
HTML stands for Hyper Text Markup Language. It is used to
create documents (webpage) for WWW. HTML was developed by Tim Berners Lee in
early 1990s. It is not the programming language like C, C++, Java, Basic, etc.
The HTML uses markup symbols or tags that describe the format and layout of
text, images, movie clips, etc in a web page.
Saving HTML Document
HTML document can be created using any text editing program.
After the completion of HTML document, we need to save a document with .HTM or
.HTML as an extension.
HTML tags are not case sensitive. There are two types of
html tags. They are:
i) Singular Tag (Empty Tag):
The HTML tag that has only opening tag or do not need to be
closed once started is called Singular Tag. <BR>, <IMG>, <HR>
etc are singular tags.
ii) Paired Tag (Container Tag):
The
HTML tags that have both opening and closing tag are called Paired Tag.
<html> </html>, <body> </body>, <table>
</table>, <marquee> </marquee> etc are paired tags.
Attribute: The attribute of element/tag describes additional
features of the element/tag. An element/tag may have one or more attributes.
For Eg: <body bgcolor = “blue”> Here bgcolor is one attribute of
<body> tag.
Structural Tags of HTML document
i) <html> ……….. </html>
All the elements and text should be kept in between starting
and ending tag of HTML tag.
ii) <head> …………. </head>
The head section contains the title of the webpage.
iii) <title> ………… </title>
The title section contains the text that will be displayed
at the top of the browser.
iv) <body> ………… </body>
The body section contains all the data elements that will
make up the webpage
Attributes:
a) bgcolor: defines the background color of the webpage.
b) background: defines the background image
c) text: defines the text color in the webpage
d) link: defines the link color
Example: <html>
<head>
<title>Class 8 </title>
</head>
<body bgcolor=“blue” / background= “tulips.jpeg” text=
“Yellow” link= “Green”>
This is the first webpage
</body>
</html>
Text Formatting Tags in HTML
Heading Tag <Hn>…………………………..</Hn>
Heading tags are used in order to format the size of the
text. There are six levels of headings.
<h1> Heading One </h1>, <h2> Heading
Two</h2>………………. <h6> Heading Six </h6>
Syntax and Attributes:
<Hn align=“left”/“right”/“center”> Text here
</Hn>
Line Break <br>
<br> tag is used to change the line. <br> is a
singular tag.
Font <font>……..</font>
<font> tag is used to format particular text in a
webpage.
Attributes:
face: defines the font style
color: defines the font color
size: defines the font size (1 to 7)
Example: <font face= “Monotype Corsiva” color = “Green”
size= “6”> This is the edited text </font>
Formatting styles of text:
i) Bold Tag <b>…….</b>
<b> tag is used to display the text in Bold format.
ii) Strong Tag <strong>…………..</strong>
<strong> tag is used to display the text in Bold
format.
iii) Italic Tag <i>……………..</i>
<i> tag is used to display the text in Italic format.
iv) Emphasized <em>…………………</em>
<em> tag is used to display the text in Italic format.
) Typewriter Text / Tele type <tt> ……………… </tt>
<tt> tag is used to display the text in Type Writer
Text format.
vi) Typewriter Text <samp>………….</samp>
<samp> tag is used to display the text in Type Writer
Text format.
vii) Underline Tag <u> …………… </u>
<u> tag is used to underline the text.
viii) Super Script <sup> ……….. </sup>
<sup> tag is used to display the text above the
baseline.
Example: a<sup>2</sup> = a2 //
(a+b)<sup>3</sup> =(a+b)3
ix) Sub Script <sub> ………….. </sub>
<sub> tag is used to display the text below the
baseline.
Example:
H<sub>2</sub>O = H2O
x) <small>…………</small>
Decreases the size of the text equivalent to font size 2.
xi) <big>……………..</big>
Increases the size of text equivalent to font size 4.
xii) Center Alignment <center> ………….. </center>
<center> tag is used to align the text to the center.
xiii) Marquee Tag <marquee> ……………….. </marquee>
<marquee> tag is used to move the text, images or any
objects in the webpage.
Syntax and Attributes:
<marquee behavior=“scroll”/“alternate”/“slide”
bgcolor=“color name” loop = “repeating number” direction=“left”/“right”/“up”/“down”
height=……..% width=………..%>
Example:
<marquee behavior=“scroll” bgcolor=“green” direction=“up”
height=15%> This text is moving up</marquee>
xiv) Paragraph Tag <p>……….. </p>
<p> tag is used to format the paragraph in the
webpage. <p> tag is a container tag. But the closing tag</p> is
optional.
Attributes: <p
align=“left”/“right”/“center”/“justify”> Paragraph here</p>
xv) Horizontal Rule <hr>
<hr> tag is used to add horizontal line in the
webpage.
Syntax and Attributes:
<hr align=“left”/“right”/“center” color=“color name”
size= “pixels” width=“pixels in %”>
Lists in HTML
i) Ordered Lists <OL>………. </OL>
<OL> tag is used to create ordered list in the
webpage.
Syntax and Attributes: <ol type=“a”/ “A”/“1”/“I”/“i”
start= “starting point”>
<lh> List heading </lh>
<li> List item 1 </li>
<li> List item 2 </li>
………………………….
</ol>
Example: <ol type= “a” start=“2”>
<lh> Types of Computer</lh>
<li> Analog Computer</li>
<li> Digital Computer </li>
<li> Hybrid Computer</li>
</ol>
ii) Unordered Lists <UL>………</UL>
<UL> tag is used to create unordered lists in the
webpage.
Syntax and Attributes: <ul type=“disc”/
“circle”/“square”>
<lh> List heading </lh>
<li> List item 1 </li>
<li> List item 2 </li>
………………………….
</ul>
Example: <ul type=”disc”>
<lh>Types Of Software</lh>
<li> System Software</li>
<li> Application Software </li>
<li> Utility Software</li>
</ul>
Inserting Images in HTML <IMG>
<IMG> tag is used to insert image in the webpage.
Syntax and Attributes:
<IMG src= “image name and location” align = “left”/
“right” / “top” / “middle” / “bottom” border= “border size of the image”
width=“pixels” height = “pixels” alt =
“Alternate text”>\
Example: <img src=”C:\Users\Public\Pictures\Sample
Pictures\Penguins.jpg” align=”top” border=”5″ height=”1500″ width=”1200″
alt=”Penguins”>
HTML Links
Hyperlinks are used to link pages in a webpage. Hyperlinks
are defined with the HTML <a> tag. There are two types of links in HTML.
They are:
i) Internal Links
HTML Internal Link is linked within the same web page.HTML
internal link name is followed by head sign (#).
Syntax: <a
name=”pagename”> </a> (name is used to set the bookmark)
<a href=”#pagename”>Button name</a> (href is used to set the button)
Example
<body><a href=”#Lesson.1″>Lesson.1</a>
<br><br> <a
name=”Lesson.1″>Introduction of Lession.1</a> <p>This is sub topic.1</p> <p>This is sub topic.2</p> <p>This is sub topic.3</p> <p>This is sub topic.4</p> <br><a href=#top> Go to
top</a></body>
ii) External Links
External HTML Links is used to link with external web page.
<a href=”url“>link text</a>
Example
<a href=”project1.html”>Click here for Project
1</a>
<a href=”https://www.w3schools.com/html/”>Visit our
HTML tutorial</a>
<a href=”https://www.facebook.com/bipinadh/”>Visit
on Facebook</a>
iii) HTML Mailto Link
HTML Link also used to create a Mailto link to a send an
email to a specific E-mail address. href attributes value is set mailto link
that followed to a e-mail address.
<a href=”mailto:emailaddress”>Message/Mail
me</a>
Tables in HTML
<table>….. </table>
<table> tag is used to define a table in html.
Syntax and Attributes
<table bgcolor= “color_name”
border= “0…..9”
align= “left” / “right”/ “center”
width= “………..%”
cellspacing= “0….9”
cellpadding = “0….9”>
……………………………….. </table>
TableHeading <TH> ……………….</TH>
Table heading <th> </th> tag is used to give
heading of the table.
Table Row <tr>…………….</tr>
<tr> tag is used to define a row in a table.
Syntax and Attributes:
<tr align=
“left”/ “right” / “center”
valign= “top” / “middle” / “bottom”
bgcolor= “color_name”> ………………………… </tr>
TableData <td>…………….</td>
<td>..</td> tag is used to add data in a cell of
table row.
<td align=
“left”/ “right” / “center”
valign= “top” / “middle” / “bottom”
bgcolor= “color_name”> ………………………… </td>
1 Comments
Done...
ReplyDelete