Basic Web Development
Module

Department of ICT
Centre for Foundation Studies
International Islamic University Malaysia

Page 1

Table of Contents
1.0

HTML Codes............................................................................................................... 4

1.1

Introduction to HTML ............................................................................................. 4

1.2

Basic HTML Document Code Structure ................................................................. 4

1.3

HTML Tags ............................................................................................................. 5

1.4

Table Tags ............................................................................................................... 8

1.4.1

Table Borders ....................................................................................................... 8

1.4.2

Background and Border Colors ........................................................................... 8

1.4.3

Cell Spacing and Cell Padding ............................................................................ 8

1.4.4

Table Width ......................................................................................................... 9

1.4.5

Column Widths .................................................................................................... 9

1.4.6

Table Height....................................................................................................... 10

1.5

Form Tags .............................................................................................................. 10

1.5.1

Text Box............................................................................................................. 10

1.5.2

Radio Button ...................................................................................................... 11

1.5.3

Checkbox ........................................................................................................... 11

1.5.4

Drop Down List ................................................................................................. 11

1.5.5

Submit Button .................................................................................................... 11

1.6
2.0

HTML Background Music Code ........................................................................... 11 Microsoft Frontpage 2003 ......................................................................................... 13

2.1

Getting Started ....................................................................................................... 13

2.1.1

FrontPage Preview ............................................................................................. 14

2.1.2

Local Web Browser File .................................................................................... 14

2.1.3

Browser Versions and Screen Resolution .......................................................... 14

2.2

Creating a Web Page Title ..................................................................................... 15

2.3

Adding a Theme .................................................................................................... 16

2.4

Setting Page Colors ............................................................................................... 16

2.4.1

Color Palette....................................................................................................... 17

2.5

Adding Wallpaper .................................................................................................. 18

2.6

Adding and Formatting Text ................................................................................. 18

2.6.1

Style ................................................................................................................... 18

2.6.2

Font Face ............................................................................................................ 19

2.6.3

Font Size ............................................................................................................ 19

2.6.4

Font Attributes ................................................................................................... 19

2.6.5

Alignment .......................................................................................................... 19

2.6.6

Numbers & Bullets ............................................................................................ 19

2.6.7

More Indent/Less Indent .................................................................................... 20

Page 2

2.6.8
2.7

Font Color .......................................................................................................... 20 Using Hyperlinks ................................................................................................... 20

2.7.1

Inserting a Hyperlink ......................................................................................... 20

2.7.2

Removing a Hyperlink ....................................................................................... 22

2.7.3

Editing a Hyperlink ............................................................................................ 22

2.8

Using Bookmarks .................................................................................................. 22

2.8.1

Creating a Bookmark ......................................................................................... 22

2.8.2

Inserting a Hyperlink to a Bookmarked Destination ......................................... 23

2.9

Using Images ......................................................................................................... 24

2.9.1

Image Types ....................................................................................................... 24

2.9.2

Inserting Clip Art ............................................................................................... 24

2.9.3

Converting Clip Art ........................................................................................... 25

2.9.4

Sizing and Placing Images ................................................................................. 26

2.10

Using Bulleted and Numbered Lists .................................................................. 27

2.11

Using Tables ...................................................................................................... 30

2.11.1

Creating a Table ................................................................................................. 30

2.11.2

Working with Tables.......................................................................................... 30

2.11.3

Table Toolbar ..................................................................................................... 32

2.11.4

Table & Cell Properties ..................................................................................... 32

2.12

Saving Your Work ............................................................................................. 35

3.0

Hosting Server ........................................................................................................... 36

Page 3

1.0

HTML Codes

1.1

Introduction to HTML

A web page is created using a language called Hypertext Markup Language (HTML). You can write HTML codes with a plain text editor (Notepad, Word, WordPad, etc), or use a HTML editor (Frontpage, Dreamweaver, etc), which will write the codes for you. HTML codes, also referred to as HTML tags, are enclosed within pointed brackets () and may be written in capital or lower case letters. The opening bracket is ().

< font size = “2” >
element

attribute

value

An element may also be followed by attributes, which are words describing the properties of the element, and further instruct the browser. Attributes are only contained in the opening HTML tags to the right of the element and are separated by a space and followed by an equal (=) sign. The value follows the equal sign and is enclosed in double quotes “ ”. 1.2

Basic HTML Document Code Structure

Begin writing your HTML tags by creating your document's basic layout. Write this code into your text or HTML editor.

Your page title

This area will contain everything that will be visible through a web browser, such as text and graphics. All of the information will be html coded. For a complete list of html codes, tags and examples, see the HTML table below.

The blank lines/spaces are not necessary; browsers ignore blank spaces in HTML documents. However, this makes your HTML documents easier to read.

Page 4

1.3

HTML Tags

The one-sided tag is an empty tag that has opening tag but NO ending tag Tags

Description




Onesided

to indicate that the file is an HTML document
heading of HTML documents
includes general information about the document (keywords for search engines)

Twosided





OR
Example:





identifies the title of the Web page
wi...

-1 /train/home.html). 0 1 1.0 1.1 1.2 1.3 1.4 1.4.1 1.4.2 1.4.3 1.4.4 1.4.5 1.4.6 1.5 1.5.1 1.5.2 1.5.3 1.5.4 1.5.5 1.6 10 100 11 12 13 14 15 16 17 173.192.183.247 18 19 2 2.0 2.1 2.1.1 2.1.2 2.1.3 2.10 2.11 2.11.1 2.11.2 2.11.3 2.11.4 2.12 2.2 2.3 2.4 2.4.1 2.5 2.6 2.6.1 2.6.2 2.6.3 2.6.4 2.6.5 2.6.6 2.6.7 2.6.8 2.7 2.7.1 2.7.2 2.7.3 2.8 2.8.1 2.8.2 2.9 2.9.1 2.9.2 2.9.3 2.9.4 20 2003 2012 21 21.270.267.242 22 23 24 25 26 27 28 29 3 3.0 30 300 31 31.170.163.241 31.170.164.249 31.170.166.14 31.170.167.142 32 33 34 35 36 37 38 3owl 4 48 5 54 6 64.191.115.234 7 70 8 9 abil abl above-identifi abstract abu accept access accident accommod accord account accur activ actual ad add addit address adjust advantag affect ahead aid alert ali ali.3owl.com [email protected] align all-text allow along alp alphabet alreadi also alt alter altern although alway amount anchor anoth anyth anytim anyway anywher appear appli applic appropri approxim arab area around arrang arrow art asid aspect assign attribut audienc audio author auto automat autostart avail avoid azimah b back background ball band bar basic beat begin behind beneath benefici benefit besid best better bgcolor big bike bin bit blank block bmp bodi bold bookmark border bordercolor bottom box bracket break breakdown brows browser buffer/margin bullet button c call capabl capit car care case caus caution cell cellpad cellspac center centr ch chang charact check checkbox checkmark choic choos chur church circl click click-abl client clip clipart close code color column command complet compon compress comput consid contain content control convert copi corner correct correl correspond could cpanel.3owl.com creat creation cube current cursor danger data date dear decid decreas default defin definit delet denot depart depend describ descript design desir destin detail determin develop diagram dialog differ dimens direct directory/folder disc display distribut document doesn domain done dot doubl download drag drastic draw dreamweav drop drop-down dropdown due e e-mail e.g eas easi easier easili edg edit editor effect effici either element email emb embed empti enabl enclos end engin enter entir equal eras especi etc even eventu everyth exact exampl excess exist expert explor express extrem eye face fact fals far fast featur femal fend field figur file filezilla fill find firefox first fit fix flag flash flexibl float flow follow font forc form format forth fortun foundat four four-head free frequent frontpag frustrat ftp ftp.ali.3owl.com full full-width function general get gif give given glitch go good googl graini graphic group guess guidanc hand handl handout hands-on happen haven head header height hello help hexadecim hidden hide hierarchi highlight hint hold honda hop horizont horizontal/vertical host hostnam hour howev html hyperlink hypertext i.e icon ict id idea identifi ignor illustr imag immedi import includ increas indent indent/less indic individu info inform insert insid instal instanc instant instead instruct interchang intern internet introduct involv ip islam isn ital item joint jpg [email protected] juli jump justifi keep kept key keyboard keyword kind know lack languag larger last layout learn leav left left-align let letter level level-on level-six like limit line lines/spaces link list littl ll load local locat log login long look loop loss lost lot lower mail mainten major make malaysia male manag mani manner manual margin markup may mean meltdown mention menu menus merg messag microsoft might million mind miniatur modul monitor mous move much multi multi-column multimedia multipl music must name nameserv navig navigator/communicator naza necessari need nervous netscap never new next non non-arab nonetheless nonstop normal note notepad noth notic ns1.3owl.com ns2.3owl.com ns3.3owl.com ns4.3owl.com number numer ny o object offer often ok older one one-sid onesid onlin open option order organ origin other otherwis outlook overal packag pad page paint palett pane panel paragraph part particular password past pencil peopl percentag perform photograph phrase physic pict pictur pixel place plain play player pleas pm png point pop pop-up posit possibl pre pre-fil precis preformat preselect present press pretti preview previous probabl process processor profession program prompt propag properti proport provid purpos put qualiti quit quot radio rather re re-siz read readabl reader recogn red refer regist registr regular relat releas remain remaind rememb remov repres request requir resiz resolut respect result return retyp revert right right-align right-click roman row rule run sampl save say screen scroll scrollamount search section see seen seldom select send sensit sentenc separ sequenti server server12.3owl.com set setup sever share shouldn show shown side sign sign-up simpl simpli sinc singl single-spac site six size slowli small smaller smallest snap solid someth sometim soon sound sourc space special specif specifi speed split spot spotti squar standard start status step stick still store straight strip structur studi style stylist subject submit subscript super support sure switch system tab tabl table/column/row/cell tag take taken task tedious tell temporari term test text thank theme therefor thick think though three time tip titl ton tool toolbar toolset top toyota tri triplet troubl tuesday turn twice two two-head twosid type u907755430 unabl underlin univers unless unord unsav updat upload upon upper ure url us use user usernam util valu vari various ve version vertic video view viewabl visibl visit visitor visual wall wallpap want way web web-read websit welcom well whatev whenev wherev whether whichev white wide wider width window wish within wmf word wordpad work world would wouldn wrap write written www.3owl.com www.iium.edu.my www.iium.edu.my/train/home.html). wysiwyg x y youtube.com z