04 Basic HTML Programming

7/26/2019 04 Basic HTML Programming

1/44

Basic HTML Programming

Internet ApplicationsAINT001-3-1-IA
http://www.apiit.edu.my/


2/44


Internet Applications Slide 2 of 1

Topic ! Str"ct"re of t#e lesson

Web Page Structure

HTML Tag

Background

Text Links

Images

Basic Tables

Basic Forms
http://www.apiit.edu.my/http://www.apiit.edu.my/


3/44



Learning $"tcomes

At t#e end of t#is lesson% &$' (ill )e a)le to*

List down some important HTML Tags

reate a simple Web page b! using

HTML code


4/44


Internet Applications Slide + of 1

,e Terms o" m"st )e a)le to "se

Source : webopedia.com

I" !ou #a$e mastered t#is topic% !ou s#ould be able to use t#e "ollowing

terms correctl! in !our assignments and exams&

HTML H!pertext Markup Language Form Properties& 'ction and Met#od


5/44


Internet Applications Slide . of 1

HTML

Webpages are written in HTML

( a simple scripting language

HTML is s#ort "or H!perText MarkupLanguage

) Hperte/tis simpl! a piece o" text t#at works

as a link

) Mar"p Lang"ageis a wa! o" writing la!out

in"ormation wit#in documents


6/44


Internet Applications Slide of 1

Page Str"ct"re

'll normal webpages consist o" a #eadand abod!*

T#e #ead is used "or text and tags t#at do nots#ow directl!on t#e page* T#e bod! is used "or text and tags t#at are

s#own directl!on t#e page*

Head

Bod!


7/44



Page Str"ct"re

+#tml,+#ead, +-(( T#is section is "or t#e title and tec#nical

in"o o" t#e page* ((,+.#ead,+bod!, +-(( T#is section is "or all t#at !ou want to

s#ow on t#e page* ((,+.bod!,

+.#tml,


8/44



Basic HTML oc"ment Str"ct"re

+#tml,

+#ead,

+title,T#e Historical Societ!

o" /ourTown% Mic#igan+.title,

+.#ead,

+bod!,

T#is is an HTML documentabout our #istorical societ!*

+.bod!,

+.#tml,

00

T#e 4H5A6 tag marsT#e 4H5A6 tag mars

7front matter8 s"c# as t#e7front matter8 s"c# as t#e

doc"ment 9page: title;doc"ment 9page: title;

T#e 4B$&6 #olds t#eT#e 4B$&6 #olds t#e

te/t of t#e pagete/t of t#e page


9/44


Internet Applications Slide < of 1

Notes A)o"t HTML Tags

1ase2 doesn3t matter

) +title,and +Title,and +TITL4,and +tiTLe,

are all t#e same Spacing in !our source document doesn3t

matter

)Include as man! carriage returns and extraspaces in !our source document as !ou wis#

) Web browser looks onl! at tags to determine

la!out on screen


10/44



Tag

Is a markup "or telling t#e browser

are enclosed in 4and6

start tag + ,and end tag +. , basic tags &

) +b,bold+.b,

) +i,italic+.i,) +u,underline+.u,


11/44



Tag 9Paragrap#s 4P6:

4#264#26Paragrap#s inParagrap#s inHTMLHTML4=#264=#26

4p64p6

T#is is paragrap# 1;T#is is paragrap# 1;

4=p64=p6

4p64p6T#is is paragrap# 2;T#is is paragrap# 2;

4=p64=p6


12/44



Tag 9Headings 4H1;;;H6:

+H5,Hig# Sc#ool+.H5,

+H6,Middle Sc#ool+.H6,

+H7,4lementar! Sc#ools+.H7,

+H8,Pre(Sc#ools+.H8,

+H9,Librar! Stor!times+.H9,

+H:,;t#er 4ducation

;rgani


13/44



Tag 94>5NT5?6 Tag:

4>5NT5?64>5NT5?64H16@elcome to T#e Historical Societ of &o"rTo(n%4H16@elcome to T#e Historical Societ of &o"rTo(n%

Mic#igan4=H16Mic#igan4=H164=>5NT5?64=>5NT5?6


14/44


Internet Applications Slide 1+ of 1

+H=,

+H7,ontact

In"ormation+.H7,

+B,T#e Historical

Societ!+.B,+B=,

5656 Main Street+B=,

/ourTown% MI 8>5?9+B=,

Tag 94H?6 - Horiontal ?"le:

! 4B?6 9Brea:

4ac#+

+br,

causes

local carriage

return% no

line "eed


15/44


Internet Applications Slide 1. of 1

Placing an Image into an HTML oc"ment

+IM@ S=A!a#oo*gi"2

'LTA1/a#oo Logo2,

+p,

+IM@ S=A!a#oo*gi"2 'LTA1/a#oo Logo2,

+' H=4FA1#ttp&..www*!a#oo*com,/a#oo+.',

+.p,

+p,

+' H=4FA#ttp&..www*!a#oo*com2

'LTA1/a#oo Logo2,

+IM@ S=A!a#oo*gi",

+.', /a#oo

+.p,


16/44



Bacgro"nd

olor

)'dd a bgcolor propert! to t#e bod! tag

+bod! bgcolorA1CFFDDDD2,

Image

'dd a background propert! to t#e bod! tag

+bod! backgroundA1"lower*gi"2,


17/44



Bacgro"nd >olors

+HTML,

+H4'E,

+TITL4,Backgrounds+.TITL4,

+.H4'E,

+B;E/ B@;L;=ACDDDDFF,

T#is page #as a blue background*

+P,

+.B;E/,+.HTML,


18/44



Bacgro"nd Images

+HTML,

+H4'E,

+TITL4,Background

Images+.TITL4,

+.H4'E,

+B;E/ B'@=;GEAmi*gi",

T#is page #as t#e state o" Mic#igan

as a background*

+.B;E/,

+.HTML,


19/44


Internet Applications Slide 1< of 1

Lins

Tags & +a, and +.a,

Gsage &) Speci"! t#e target in t#e +a #re"A1 1,

)'dd t#e text t#at s#ould work as a link

)'dd an +.a, tag to indicate w#ere t#e linkends*

4xample lick +a #re"A#ttp&..www*!a#oo*com, #ere +.a,

to go to !a#oo*
http://www.yahoo.com/http://www.apiit.edu.my/http://www.apiit.edu.my/http://www.yahoo.com/


20/44



+' H=4FAname and location o" document,

Text t#at appears as a link+.',

T#e text or imagesJ

t#at t#e user would

click on

T#e 4nd'nc#or TagT#e Beginning

'nc#or Tag

All Anchor Tags have three parts...

Lins


21/44



Images

ormal images

) +img srcA1"lower*gi"2,

) +img srcA#ttp&..www*!a#oo*com."lower*gi",

Image Link

) +a #re"A1m!"ile*#tml2,+img srcA1rainbow*gi"2,+.a,

) +a #re"A1m!"ile*#tml2,+img srcA1rainbow*gi"2

altA1Link to t#is page2,+.a,
http://www.yahoo.com/flower.gifhttp://www.apiit.edu.my/http://www.apiit.edu.my/http://www.yahoo.com/flower.gif


22/44



Basic Ta)le

're de"ined wit# t#e +table, tag

To insert a table) +table,

+.table,

=ows +table,

+tr, +.tr, +tr, +.tr,

+.table,


23/44



olumns) Ei$ide rows into columns wit# +td, and +.td,+table,

+tr, +td,T#is is row one% le"t side+.td,

+td,T#is is row one% rig#t side+.td,

+.tr,

+tr,

+td,T#is is row two% le"t side+.td, +td,T#is is row two% rig#t side+.td,

+.tr,

+.table,

Basic Ta)le Str"ct"re


24/44



Ta)les Sample

4TABL564TABL56

4T?64T?6

4T64T6AA4=T64=T6

4T64T6BB4=T64=T64T64T6>>4=T64=T6

4=T?64=T?6

4T?64T?6

4T64T64=T64=T64T64T6554=T64=T6

4T64T64=T64=T6

4=T?64=T?6

4=TABL564=TABL56


25/44



Tables provide Web designers with controlover layout.

$t#er "se of Ta)les Tag


26/44



' "ormis a web page t#at cause t#e browser

to s#ow "ields t#at t#e user can "ill in* T#e "orm must pass t#e $ariables onto a

*.asp"ile to process t#e "orm*

Basic orm


27/44



S!ntax&

+"orm,

Form elements and la!out tags+."orm,

In t#e "orm% +"orm,KK+."orm, pro$ides

users wit# in"ormation about t#e input elementspurpose

Forgetting to include a label element "or eac#"orm element is a design error

Basic orm


28/44



Input box& ' single(line box into w#ic# t#e user can enter text ornumbers

T#e s!ntax&

+input nameAtext,

ontrolling t#e si


29/44



S!ntax&

+input t!peA 1c#eckbox2nameA1democrat2 c#ecked A 1c#ecked2,

H44E propert! automaticall! selecta c#eck box

Basic orm* >reating >#ec

Bo/


30/44



+ input t!peA 1radio2 nameA1democrat2$alueA2!es2 c#ecked A 1c#ecked2,

Basic orm* >reating ?adio B"ttons


31/44



Basic orm* >reating a Selection List


32/44



S!ntax&

+textarea rowsA172 nameA1comments2,

4nter comments #ere+.textarea,

Basic orm* >reating a Te/t Area


33/44



S!ntax&

+input t!peA 1submit2,

+input t!peA 1radio2,

Basic orm* >reating B"ttons


34/44



Two common "orm properties&

5* 'ction6* Met#od

Basic orm* orm Properties

+"orm actionA1main*asp met#odAget,

****

+input t!peAsubmit, +input t!peAreset,

+."orm,


35/44



A>TI$N*5* To speci"! w#ere to send t#e "orm data and #ow to sendit to speci"! G=LJ

6* T#e program to w#ic# t#e data gat#ered b! t#e "orm is

sent7* 4xample&

actionA 1cgiexample*pl2

action A 1.cgi(bin.cgiexample*pl2

action A2#ttp&..www*example*com.cgi(bin. cgiexample*pl2

actionA2cgi(bin."orm*pl2 directs t#e ser$er to execute t#e"orm*pl Perl script*

T#is identi"ies t#e @I script t#at will process our "orm*



36/44



M5TH$*

Met#od directs t#e browser to send t#ein"ormation to t#e ser$er

'lso speci"ies w#ic# met#od sends t#edata to t#e Web ser$er and #ow t#e Webser$er send us back t#e "orm output

Two met#ods% @4T and P;ST

+"orm met#od A 1post2 action A2.cgi(bin."ormail2,



37/44



P;ST&5* Gsed w#en our "orm will cause c#anges in ser$er(sidedata% e*g* w#en updating a database% or send data to t#e

ser$er to be processed 'ddress&6* Form in"ormation are sent in a separate data stream%allowing t#e Web ser$er to recei$e t#e data t#roug#w#at is called 1standard input2

7* Sa"er because some Web ser$ers limit t#e amount o"

data sent $ia t#e @4T met#od and will truncate t#eG=L% cutting o"" $aluable in"ormation

+"orm met#od A 1get2 actionA2.cgi(bin."ormail2,



38/44



@4T&5* Gsed simpl! to reuest a document "rom t#eWeb ser$er

6* Gsed w#en our "orm will not cause an! c#angesin ser$er(side data% e*g* w#en making a databasereuest

'ddress&T#e "orm data is appended to t#e end o" t#e G=LFor example& .cgi(bin."ormailNnameAbobOorderA9J

T#e data is limited to standard c#aracter% not specialc#aracter



39/44



Submitting Forms ia 4mail&

' met#od to send "orm in"ormation t#roug# e(mail wit#out using @I script 'ccess t#e users own mail program

T#e s!ntax o" t#e mailto action&+"orm action A1mailto&e(mailQaddress2met#osA1post2 ,



40/44


Internet Applications

$rganiing &o"r HTML iles on t#e SerCer

Web Server

=#ome=(e)data==#ome=(e)data=

inde/;#tmlinde/;#tml

pict"re1;gifpict"re1;gif

=topic1==topic1= inde/;#tmlinde/;#tml

pict"re1;gifpict"re1;gif

topic1a;#tmltopic1a;#tml

topic1a;giftopic1a;gif

=topic2==topic2= ;;;;;;

(((;smallCille;mi;"s(((;smallCille;mi;"s

? l ti d A) l t ? f


41/44



?elatiCe and A)sol"te ?eferences

to Same ile;;;

/home/webdata/

/topic1/ ... topic1a.html

topic1a.gif

#ttp*==(((;smallCille;mi;"s=topic1a;#tml

includes this absolutereference to topic1a.gif im4img srcDE#ttp*==(((;smallCille;mi;"s=topic1a;gifE6

#ttp*==(((;smallCille;mi;"s=topic1a;#tml

includes this relative reference to topic1a.gif image:4img srcDEtopic1a;gifE6

SerCer ile Lao"t etermines 5ac#


42/44



SerCer ile Lao"t etermines 5ac#

PageFs '?L

Protocol

www*small$ille*mi*us#ttp&..

Ser$er

'ddress

Pat# to

File

.e$ents.ma!*#tml


43/44


Internet Applications Slide +3 of 1

G"ic ?eCie( G"estions

Mention some o" HTML tags and

explain brie"l! and clearl! t#eirpurposes

Write t#e tags to create bot# Text

link and Image link


44/44


R O '

G"estion and Ans(er Session

04 Basic HTML Programming

Documents

Transcript of 04 Basic HTML Programming