Malay Mehta Presents:
WEB DESIGNING
INTRODUCTION
What is web-designing?
Web-designing = website + designing
What is website?
Website means an advertise given in electronic
media which shows the information or
importance about a company, an institute or an
organization.
A website requires
Web-space from a server
Domain name from registrars
Appropriate plan and coding by designer
BASIC TERMINOLOGY
HTML: HYPER TEXT MARKUP LANGUAGE
HTML is not a programming language but it is a MARK-UP
language using which the coding of website is done.
WEB ADDRESS: it is the address of website using
which we call the website.
For ex. If we want to call website google.com than we write:
http://www.google.com
http stand for HYPER TEXT TRANSFER PROTOCOL
www stands for WORLD WIDE WEB
Google is a domain name which is converted into web
address and call the website www.google.com
.com is an extension. there are many other extension like
.net, .org, .biz, .edu.
BASIC TERMINOLOGY
WEB BROWSER: the software used for browse
and open the website is known as web-browser.
For ex.
Internet explorer
Mozilla Firefox
Opera
Google chrome
A web browser consist of different bars.
Title bar
Menu bar
Tool bar
Address bar
Status bar
WEB BROWSER The bar which shows the name of browser
& website is known as TITLE bar
The bar which shows different
menus like, File, Edit is known as
MENU bar
The bar which shows identical
commands in terms of picture or
icon is known as TOOL bar
The bar in which we write the
name of website is known as
ADDRESS bar
The bar which shows the status or
current condition of website is known
as STATUS bar.
BASIC TERMINOLOGY
HTML editor:
The software used for making websites
using languages like HTML is known as
HTML editor.
For example:
Notepad
Publisher
Front page
Dream waver
BASIC FORMAT OF HTML
<html>
<head>
<title>
</title> The TAGs written between
<HTML> and </HTML>
</head> defines webpage.
<body>
</body>
</html>
BASIC FORMAT OF HTML
The text written between < and> is known as TAG.
TAG can be of two types:
Opening tag: <TEXT>
Closing tag: </TEXT>
HEAD TAGs: the TAGs defined between <head>
and </head> known as HEAD TAGs.
TAGs related to the identities of website like, its name,
description or keywords are included into HEAD TAGs.
BODY TAGs: the TAGs defined between <body>
and </body> is known as BODY TAGs.
TAGs related to appearance of website and color inside
the website are included into BODY TAGs.
HTML TAGs
<title>: Title TAG.
It is used to give title to our webpage.
It is defined in HEAD part.
We specify the title between <title> and </title>.
For ex.
<title> GOVT. ENGINEERING COLLAGE, BHAVNAGAR </title>
<p>: Paragraph TAG.
It is used to write a paragraph in webpage.
It is defined in BODY part.
We write the paragraph between <p> and </p>.
HTML TAGs
<hn>(n= 1,2…6): Heading TAG.
It is used to give headings of different size.
It is the only element which is given by numbers.
h1 is max. size and h6 is min. size for heading.
This TAG is used in BODY part only.
We write heading between <hn> and </hn>
<br>: Line break
It is used to break the current line and start a
new line.
It is a singular TAG, </br> is not used.
HTML TAGs
<hr>: Horizontal rule.
It is used draw a horizontal line and break the
page.
hr TAG has attributes unlike br TAG.
It has three properties:
Height: used to set the thickness.
Width: used to set its length.
Color: used to set line’s color.
It is defined in BODY part.
It is a singular TAG, </hr> is not used. For ex.
<hr height=“10” width=“100%” color=“blue”>
EXAMPLE 1
<html>
<head>
<title> WELCOME TO GOVT. ENGINEERING COLLAGE,
BHAVNAGAR. </title>
</head>
<body>
<hr>
<h1> WEB DESIGNING </h1>
<hr height=“10” width=“75%” color=“red”>
<p>
Web designing is very interesting. <br>
All students are enjoying the session of web designing. <br>
</p>
<hr>
</body>
</html>
EXAMPLE 1
HTML formatting TAGs
In HTML, the TAGs which are used to change way of
writing the text are known as formatting TAGs.
<b>/<strong>: bold/strong TAG
This TAG is/are used to make the write-up BOLD.
<u>: underline TAG
This TAG is used to write underlined text.
<i>: italic TAG
This tag is used to make text italic.
To use any of these three TAGs we have to give our
content between opening and closing TAGs. For ex.
<b> <u> <i> internet </i> </u> </b> will give output:
internet
HTML formatting TAGs
<font>: font TAG
This TAG is used to present the text in our
content more attractively.
It has three properties:
Color:
It is used to change the color of text
To specify the color either we use name of color or
we use the code for that color
The code for any color is of 7 characters:
#_ _ _ _ _ _
Percentage of Red Green Blue
HTML formatting TAGs
Size:
This property is used to increase or decrease the
size of text.
To increase the size we have to use ‘+’ sign and to
decrease the size we have to use ‘-’ sign.
Face:
This property is used to write the text in different
types of fonts. For ex.
Arial
Verdana
Times new roman
Courier new
EXAMPLE 2
<html>
<head>
<title> WELCOME TO GOVT. ENGINEERING COLLAGE,
BHAVNAGAR.</title>
</head>
<body bgcolor=“pink">
<hr color="orange">
<h1> <b> <u> <i> WEB DESIGNING </i> </u> </b> </h1>
<hr height="10" width="50%" color="white">
<p>
<font face="verdana" size="-1" color=“purple">
<strong> india </strong> is my contry <br> </font>
<font face="courier new" size="+5" color="orange"> i love </font>
<font face="courier new" size="+5" color="white"> my </font>
<font face="courier new" size="+5" color="green"> india </font>
</p>
<hr color="green">
</body>
</html>
EXAMPLE 2
EXAMPLE 2
HTML formatting TAGs
<sup>: Superscript Tag.
It is used to display text with superscript. For
example, today’s date: 16th October.
Date: 16<sup>th</sup> October
<sub>: Subscript Tag.
It is used to display text with superscript. For
example, chemical formula for water: H2O
Chemical formula of water:
H<sub>2</sub>O
LIST
There are three types of lists frequently
used in HTML
Ordered list
○ In this type of list we give numbering to the
elements of list. For ex. 1,2,3… A,B,C… a,b,c…
Unordered list
○ In this type of list we give symbols instead of
numbers to the element of list. For ex. ●,▪,○…
Definition list
○ In this type of list we specify a word as TITLE and
it is defined in the DEFINITION part.
EXAMPLE 3
Example_list.txt
list.html
INSERT IMAGE IN WEBPAGE
<image>: Image Tag
It is used to show image in webpage.
Attributes:
- Src : source
- Align : alignment: left, right, top, bottom, middle.
- Width
- Height
- Border : thickness of border in pixel
- Alt : Alternate name/Information to be displayed while loading the
page.
For ex.
<image src=“image/rose.jpg” align=“center” width=“400”
height=“350” border=“3” alt=“rose”>
<body background=“image/t2.jpg”>
CREATE TABLE
<table>: Table Tag
It is used to create table in the webpage.
It is distributed in three parts
- Table header <th> </th>
- Table row <tr> </tr>
- Table data <td> </td>
Attributes of table tag:
- Align: alignment: left, right, center
- Border : thickness in pixels
- Cell padding: in pixels
- Cell spacing: in pixels
- Width
EXAMPLE 4
TABLE1.html
TABLE.html
CREAT A HYPERLINK
To create a website containing more
than one pages we have to use
Hyperlink to interconnect them.
There are two types of links:
Internal links: the hyperlink is within the
webpage.
External links: the hyperlink is outside the
webpage.
Link is also known as Anchor.
CREAT A HYPERLINK
<a>: Anchor Tag
Syntax for External link:
<a href=“Location Address”> Caller </a>
Syntax for internal link:
<a name=“Lname”> Target </a>
<a href=“Location Address#Lname”> Caller
</a>
EXAMPLE 5
link.html
Summery Example:
my first website
SPECIAL THANKS TO :
MR. HALAK RAVAL
(MY TEACHER)
PREPARED BY:
MR. MALAY MEHTA
