Web Designing Gec

8/8/2019 Web Designing Gec

1/29

Malay Mehta Presents:


2/29

INTRODUCTION

What is web-designing?y Web-designing = website + designingWhat is website?y Website means an advertise given in

electronic media which shows theinformation or importance about a company,an institute or an organization.

y A website requiresy Web-space from a server y Domain name from registrarsy Appropriate plan and coding by designer


3/29

BAS IC TERMINOLOGY

HTML: HYPER TEXT M ARKUP L ANG U AG Ey HTML is not a programming language but it is a M ARK -

UP language using which the coding of website is done.

WEB ADDRESS: it is the address of website usingwhich we call the website.y For ex. If we want to call website google.com than we

write : http :// www.google.comy http stand for HYPER TEXT TR AN S FER PROTOCOLy www stands for W ORL D WID E WEB

y Google is a domain name which is converted into webaddress and call the website www.google.com

y .com is an extension. there are many other extension like.net, .org, .biz, .edu.


4/29

BAS IC TERMINOLOGY

WEB BRO WSER: the software used for browse and open the website is known asweb-browser. For ex.

y Internet explorer y M ozilla Firefoxy O peray Google chrome

A web browser consist of different bars.y T itle bar y M enu bar y Tool bar y Address bar y S tatus bar


5/29

W E B B RO W S ER T he bar which shows the name of browser & website is known as T ITLE bar

T he bar which shows differentmenus like, File, E dit is known as

ME NU bar

T he bar which shows identicalcommands in terms of picture or

icon is known as TOOL bar

T he bar in which we write thename of website is known as

ADD RESS bar

T he bar which shows the status or current condition of website is known as

ST ATUS bar.


6/29

BAS IC TERMINOLOGY

HTML editor :y T he software used for making websites

using languages like HTML is known asHTML editor.

y For example :y Notepady P ublisher

y Front pagey Dream waver

7/29

BAS IC FORM A T OF HTML

< html>< head>

< /title>

< /head>< /body>

< /html>

T he T AGs written between< HTML > and < /HTML >defines webpage.

8/29

BAS IC FORM A T OF HTML

T he text written between < and> is known as T AG.T AG can be of two types :y O pening tag : < TEXT >y C losing tag : < /TEXT >HE AD T AGs : the T AGs defined between < head>and < /head> known as HE AD T AGs.y T AGs related to the identities of website like, its name,

description or keywords are included into HE AD T AGs.BO

DY

T AGs

:the

T AGs defined between

and < /body> is known as BO DY T AGs.y T AGs related to appearance of website and color inside

the website are included into BO DY T AGs.

9/29

HTML T A Gs

< title> : T itle T AG.y It is used to give title to our webpage.y It is defined in HE AD part.y We specify the title between < title> and < /title>.

For ex.< title> G OVT . E NGIN EER ING COLL AG E , BH AV NAGAR < /title>

 : P aragraph T AG.y It is used to write a paragraph in webpage.y It is defined in BO DY part.y We write the paragraph between and .

10/29

HTML T A Gs

< hn>(n= 1,26) : H eading T AG.y It is used to give headings of different size.y It is the only element which is given by numbers.y h1 is max. size and h6 is min. size for heading.y T his T AG is used in BO DY part only.y We write heading between < hn> and < /hn> : L ine breaky It is used to break the current line and start a

new line.y It is a singular T AG, is not used.

11/29

HTML T A Gs

< hr> : H orizontal rule.y It is used draw a horizontal line and break the

page.y

hr T AG has attributes unlike br

T AG.y It has three properties :

y H eight : used to set the thickness.y Width : used to set its length.y C olor : used to set lines color.

y It is defined in BO DY part.y It is a singular T AG, < /hr> is not used. For ex.< hr height=10 width=100% color=blue>


12/29

EX A MPLE 1

WELCOME TO GOVT. ENGINEERING COLLAGE,BHAVNAGAR.

WEB DESIGNING

Web designing is very interesting.
All students are enjoying the session of web designing.


13/29

EX A MPLE 1

14/29

HTML formatting T A Gs

In HTML , the T AGs which are used to change way of writing the text are known as formatting TAGs.

 / : bold /strong T AGy T his T AG is /are used to make the write-up BOL D. : underline T AGy T his T AG is used to write underlined text.: italic T AGy T his tag is used to make text italic.To use any of these three T AGs we have to giveour content between opening and closing T AGs.For ex. internet will give

output : internet

15/29


 : font T AGy T his T AG is used to present the text in our

content more attractively.y It has three properties :

C olor :y It is used to change the color of texty To specify the color either we use name of color or

we use the code for that color y T he code for any color is of 7 characters :

#_ _ _ _ _ _

R ed Green B lueP ercentage of


16/29


S ize :y T his property is used to increase or decrease the

size of text.y To increase the size we have to use + sign and to

decrease the size we have to use - sign.

Face : T his property is used to write the text in differenttypes of fonts. For ex.

ArialVerdanaT imes new romanC ourier new

17/29

EX A MPLE 2

< titl e > WELCOME TO GOVT. ENGINEERING COLLAGE,

BHAVNAGAR. india is my contry i lov e my india


18/29

EX A MPLE 2


19/29

EX A MPLE 2

20/29


 : S uperscript Tag.y It is used to display text with superscript. For

example, todays date : 16 th O ctober.y Date : 16 th O ctober : S ubscript Tag.y It is used to display text with superscript. For

example, chemical formula for water : H

2O

y C hemical formula of water : H 2 O


21/29

LI S T

T here are three types of lists frequentlyused in HTMLy O rdered list

In this type of list we give numbering to theelements of list. For ex. 1,2,3 A, B ,C a,b,c

y U nordered listIn this type of list we give symbols instead of

numbers to the element of list. For ex. , , y Definition list

In this type of list we specify a word as T ITLE andit is defined in the D E FINIT IO N part.


22/29

EX A MPLE 3

E xample_list.txtlist.html

23/29

IN S ERT IM A GE IN W E B P A GE

< image> : Image Tagy It is used to show image in webpage.y Attributes :

- S rc : source- Align : alignment : left, right, top, bottom, middle.- Width- H eight- B order : thickness of border in pixel- Alt : Alternate name /Information to be displayed while

loading the page.

For ex.y < image src=image /rose.jpg align=center

width=400 height=350 border=3 alt=rose>y < body background=image /t2.jpg>

24/29

CRE A TE T AB LE

< table> : Table Tagy It is used to create table in the webpage.y It is distributed in three parts

- Table header < th> < /th>- Table row < tr> < /tr>- Table data < td> < /td>

y Attributes of table tag :- Align : alignment : left, right, center - B order : thickness in pixels- C ell padding : in pixels- C ell spacing : in pixels- Width


25/29

EX A MPLE 4

T ABLE 1.htmlT ABLE .html


26/29

CRE A T A HYPERLINK

To create a website containing morethan one pages we have to useH yperlink to interconnect them.T here are two types of links :y Internal links : the hyperlink is within the

webpage.

y E xternal links : the hyperlink is outside thewebpage.L ink is also known as Anchor.

27/29

CRE A T A HYPERLINK

< a> : Anchor TagS yntax for E xternal link :

y < a href= Location Address> C aller < /a>S yntax for internal link :

y < a name= Lname> Target < /a>y < a href= Location Address# Lname> C aller

< /a>


28/29

EX A MPLE 5

link.htmlS ummery E xample :y my first website


29/29

SPEC IAL TH AN KS TO :

MR . H AL AK R AV AL(MY TE ACHER )

PREP ARE D BY:MR . M AL AY MEHT A

Documents

Web Designing Gec