Upload
malay-mehta
View
219
Download
0
Embed Size (px)
Citation preview
8/8/2019 Web Designing Gec
1/29
Malay Mehta Presents:
8/8/2019 Web Designing Gec
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
8/8/2019 Web Designing Gec
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.
8/8/2019 Web Designing Gec
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
8/8/2019 Web Designing Gec
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.
8/8/2019 Web Designing Gec
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
8/8/2019 Web Designing Gec
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/8/2019 Web Designing Gec
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.
8/8/2019 Web Designing Gec
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> : 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 < p> and < /p>.
8/8/2019 Web Designing Gec
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>< br> : L ine breaky It is used to break the current line and start a
new line.y It is a singular T AG, < /br> is not used.
8/8/2019 Web Designing Gec
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>
8/8/2019 Web Designing Gec
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.
8/8/2019 Web Designing Gec
13/29
EX A MPLE 1
8/8/2019 Web Designing Gec
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.
< b> /< strong> : bold /strong T AGy T his T AG is /are used to make the write-up BOL D.< u> : underline T AGy T his T AG is used to write underlined text.< i>: 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.< b> < u> < i> internet < /i> < /u> < /b> will give
output : internet
8/8/2019 Web Designing Gec
15/29
HTML formatting T A Gs
< font> : 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
8/8/2019 Web Designing Gec
16/29
HTML formatting T A Gs
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
8/8/2019 Web Designing Gec
17/29
EX A MPLE 2
< titl e > WELCOME TO GOVT. ENGINEERING COLLAGE,
BHAVNAGAR. < strong> india is my contry < font fac e ="co u rie r n e w" siz e ="+5" color="orang e "> i lov e < font fac e ="co u rie r n e w" siz e ="+5" color="w h ite "> my < font fac e ="co u rie r n e w" siz e ="+5" color="gr ee n"> india
8/8/2019 Web Designing Gec
18/29
EX A MPLE 2
8/8/2019 Web Designing Gec
19/29
EX A MPLE 2
8/8/2019 Web Designing Gec
20/29
HTML formatting T A Gs
< sup> : S uperscript Tag.y It is used to display text with superscript. For
example, todays date : 16 th O ctober.y Date : 16 < sup>th < /sup> O ctober < sub> : 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 < sub>2 < /sub> O
8/8/2019 Web Designing Gec
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.
8/8/2019 Web Designing Gec
22/29
EX A MPLE 3
E xample_list.txtlist.html
8/8/2019 Web Designing Gec
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>
8/8/2019 Web Designing Gec
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
8/8/2019 Web Designing Gec
25/29
EX A MPLE 4
T ABLE 1.htmlT ABLE .html
8/8/2019 Web Designing Gec
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.
8/8/2019 Web Designing Gec
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>
8/8/2019 Web Designing Gec
28/29
EX A MPLE 5
link.htmlS ummery E xample :y my first website
8/8/2019 Web Designing Gec
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