HTML

Prepared by Salwa binti Abdul Kohar

Powerpoint Templates Pusat Latihan Kemahiran E-Access

Page 1

What is HTML?
HTML = Hyper Text Markup Language It is the standard format for documents on the World Wide Web !ust as Microsoft Word uses documents with the " doc" format and Word Perfect uses " wpd"# browsers read documents with the " htm" or " html" format HTML is the basic coding of building up web pages HTML digunakan untuk memaparkan informasi Powerpoint Templates dalam halaman web Page 2

What is HTML? (cont)

Hyper is the opposite of linear# or simply put "extremely acti$e% Text is what you create HTML with# &ust like a word processor without all the fancy formatting Mark up is the process of creating the HTML# you "mark it up" in a word processor This loosely means# "to write" Language is missleading It's not a cryptic computer language that you ha$e to learn an entirely new alphabet to understand It uses plain english It is a language that your browser understands# and one that you can learn to understand without much effort
Powerpoint Templates Page 3

HTML File Look Like

Powerpoint Templates

Page 4

HTML File Look Like (cont)

Powerpoint Templates

Page 5

Creating a HTML File

() *pen +otepad , Word pad -) .lick on File - !a"e as# /) In the 0ile name pull1down box# type in webpage$html 2) .lick on !a"e 3) Type in content for your file (() *nce you finished the content# click on File - !a"e
Powerpoint Templates Page 6

HTML Document Structure

4html5 4head5 4title5Page Title %oes Here&'title 4,head5 4body5 content goes here 4,body5 4html5

Powerpoint Templates

Page 7

Basic Concept o HTML Language

.omments
4811 0ig 2 (9 main html 115 4811 *ur first Web page 115 4html5 4head5 4,head5 4body5

Head section

6tart tag

7ody section
4,body5 4,html5

end tag

Powerpoint Templates

Page 8

HTML Tags
:xample : <b>, < !nt>, <t"t#e>, <p> and ect Tag usually goes with pair 9 an open tag <b> an end tag <$b> 6ingle tag 9 <%r>, <br> Tags are +*T case sensiti$e
Powerpoint Templates Page 9

Basic HTML !lement

Headings
There are ; common heading commands

The output 9

Powerpoint Templates

Page 1&

Basic HTML !lement (cont)

7ackground
'g(!#!r < 6pecifies a background1color for HTML page :xample 9 4body bgcolor=%=>>>>>>?5 4body bgcolor=rgb@>#>#>)?5 4body bgcolor=%black?5 'a(kgr!un) < 6pecifies a background1image for a HTML page :xample 9 4body background=%clouds gif5 4body background=http9,,www w/schools com,clouds gif5

Powerpoint Templates

Page 11

Basic HTML !lement (cont)

Text
Put text on a webpage :xample 9 4p5Welcome to my page Hope you en&oy it84,p5 The output 9 Welcome to my page Hope you en&oy it8 Put text in center of a page :xample 9 4center5Hello4,center5 The output 9 Hello Put text on the right of a page :xample 9 4p align=%right?5Hello4,p5 The output 9 Hello
Powerpoint Templates Page 12

Basic HTML !lement (cont)

0ormat text < tags for text formating
4b5A 4,b5 9 bold text 4i5 A 4,i5 9 italic text 4em5 A 4,em5 9 italic text 4u5 A 4,u5 9 underline text 4center5 A 4,center5 9 center document 4big5 A 4,big5 9 untuk ukuran yang lebih besar dari normal 4small5 A 4,small5 9 untuk ukuran yang lebih kecil dari normal 4strike5 A 4,strike5 9 untuk memberi garis di tengah text 4sup5 A 4,sup5 9 superscript text 4sub5 A 4,sub5 9 subscript text

Powerpoint Templates

Page 13

Basic HTML !lement (cont)

0ont
To change text siBe :xample 9 4font siBe=%C?5Hello4,font5 The output 9 Hello To change text color :xample 9 4font color=%red?5Hello4,font5 The output 9 Hello Dsing both :xample 9 4font siBe=%C? color=%red?5Hello4,font5 The output 9 Hello
Powerpoint Templates Page 14

Basic HTML !lement (cont)

List
Dnordered list :xample 9 4ul5 4li56unday4,li5 4li5Monday4,li5 E 6unday 4li5Tuesday4,li5 E Monday 4,ul5 E Tuesday The output 9 *rdered list :xample 9 4ol5 4li56unday4,li5 4li5Monday4,li5 ( 6unday 4li5Tuesday4,li5 - Monday 4,ol5 / Tuesday The output 9

Powerpoint Templates

Page 15

Basic HTML !lement (cont)

.reate Links
F Hypertext link :xample 9 4 a href=%http9,,www iusb edu?5ID67 Home4,a5 The output 9 ID67 Home F :mail link :xample 9 4 a href=%mailto9$kwongGiusb edu?5:mail me4,a5 The output 9 :mail me

Powerpoint Templates

Page 16

Basic HTML !lement (cont)

Table
4table border="("5 4tr5 4th5Heading4,th5 4th5Heading-4,th5 4,tr5 4tr5 4td5row (# cell (4,td5 4td5row (# cell -4,td5 4,tr5 4tr5 4td5row -# cell (4,td5 4td5row -# cell -4,td5 4,tr5 4tr5 4td5row /# cell (4,td5 4td5row /# cell -4,td5 4,tr5 4,table5

The output 9

Powerpoint Templates

Page 17

Basic HTML !lement (cont)

Image 0ormat
There are / kinds image format that often used 9 HI0 @Hraphical Interchange 0ormat) @ gif) !P:H @!oint Photographic :xpert Image) @ &pg) 7MP @7itmap) @ bmp) :xample 9

Powerpoint Templates

Page 18

Basic HTML !lement (cont)

Inserting Image
Place all images in the same directory , folder where your
web pages are 9 4img src5 is a single text :xample 9 4img src=?image gif?5 The output 9

Turn an image into a hyperlink :xample 9 4a href=%http9,,www iusb edu?54img src=?image gif?54,a5 *utput 9
Powerpoint Templates

Page 19

Basic HTML !lement (cont)

Image 6iBe
.omputer images are made up of %pixels?
4img height=?(>>? width=%(C>? src=%image gif?5

height width

Powerpoint Templates

Page 2&

Basic HTML !lement (cont)

0orms
F form is an area that can contain form elements
.ommonly used form elements includes 9 Text fields Iadio buttons .heckboxes 6ubmit buttons 6yntax :xample 9 4form5 AA 4,form5

Powerpoint Templates

Page 21

Basic HTML !lement (cont)

0orms < Text Input 0ields
Dse when you want the user to type letters# number# ect
:xample 9 4form5 0irst name 94input type=%text? name=%firstname?5 4br5 Last name 94input type=%text? name=%lastname?5 4,form5

The output 9

Powerpoint Templates

Page 22

Basic HTML !lement (cont)

0orms < 6ubmission 7utton

is sent to another file :xample 9 4form name=%input? action=%htmlLforLaction php? method=%get?5 0irst name 94input type=%text? name=%firstname?5 4br5 Last name 94input type=%text? name=%lastname?5 4br5 4input type=?submit? $alue=%6ubmit?5 4,form5 The output 9
Powerpoint Templates Page 23

When user clicks on the J6ubmitK button# the content of the form

Basic HTML !lement (cont)

0orms < .heckboxes
Dse when you want the user to select one or more option of a limited
number of choices :xample 9 4form5 4input type="checkbox" id="car" $alue="car",5Its my car 4br5 4input type="checkbox" id="$an" $alue="$an" ,5Its my $an 4,form5 The output 9

Powerpoint Templates

Page 24

Basic HTML !lement (cont)

0orms < Iadio 7uttons
Dse when you want the user to select one of a limited number of
choices :xample 9 4form5 4input type="radio" id="male" $alue="male",5Male4br5 4input type="radio" id="female" $alue="female",50emale 4,form5 The output 9

Powerpoint Templates

Page 25

Basic HTML !lement (cont)

0orms < Text 7ox
Dse when you want to get input from user
:xample 9 4form5 4p56ila masukkan komen anda4,p5 4textarea cols="C>" row="(>>" id="textMomen% name="komen"54,textarea5 4,form5 The output 9

Powerpoint Templates

Page 26

Basic HTML !lement (cont)

0orms < Nrop1down Menu
Dse when you want user to respond with one specific answer with
the choices you gi$en :xample 9 4p56elect your fa$ourite fruit4,p5 4select name="fruit" siBe="(" id="0ruit"5 4option selected51Please select14option5Fpples 4option57anana4option5*range 4,select5 The output 9

Powerpoint Templates

Page 27