Prepared by: Assoc. Prof. Dr Bahaman Abu Samahpsm.upm.edu.my/3100/Bahan Pembelajaran/E3100 P7...
40
Prepared by: Assoc. Prof. Dr Bahaman Abu Samah Department of Professional Development and Continuing Education Faculty of Educational Studies Universiti Putra Malaysia Serdang
Transcript of Prepared by: Assoc. Prof. Dr Bahaman Abu Samahpsm.upm.edu.my/3100/Bahan Pembelajaran/E3100 P7...
Prepared by:
Assoc. Prof. Dr Bahaman Abu Samah Department of Professional Development and Continuing Education
Faculty of Educational Studies
Universiti Putra Malaysia
Serdang
HTML
- HTML refers to Hyper Text
Markup Language
- HTML documents comprise HTML
tags or commands
- The HTML tag dictates how the webpage will
be displayed in web browser
- Every HTML file will be in .htm or .html file
format
- HTML document can be prepared using text
editor program such as Notepad
HTML Tag
► Every web document contains HTML
commands or tag
► Each tag consists of < , command and >
and is written as <command>
► Generally HTML tag comes in pair:
Open tag <command> Close tag </command>
► Example: <B> Bold </B>
<HTML>
<TITLE>Title</TITLE>
<BODY>
</BODY>
</HTML>
Body text
Basic HTML Tag
<B> Bold
<I> Italic
<U> Underline
<CENTER> Centre
<BR> Line break
<P> Paragraph break
<HR> Horizontal line
Font and Line Tag
Choose among the six (6) title tags:
<H1> to <H6>
Title Tag
Choose from twelve (12) font size tags:
+6 to +1 dan -1 to -6
Font Size Tag
► Use Hexadecimal colouring codes
► Hexadecimal colouring code consists of the
following 10 numbers and 6 characters:
0 1 2 3 4 5 6 7 8 9 A B C D E F
► Different combination of the above number
and characters will produce different colour
► Example:
<font color="FF3366">Teks</font>
Colour Tag
Hex/RGB/MS Access
http://www.endprod.com/colors/
Carta warna Owens
http://owens4.com/colors.html
Hexadecimal Colouring Code
► Example of link document “pengenalan.htm”
<A HREF=“Pengenalan.htm">Pengenalan
</A>
► A = Anchor
► HREF = Hypertext REFerence
Document Link Tag
► Example of website UPM:
<A HREF="http://www.upm.edu.my">UPM</A>
► A = Anchor
► HREF = Hypertext REFerence
URL link Tag
► Example of e-Mail:
<A HREF="mailto:[email protected]">
Click here</A>
► A = Anchor
► HREF = Hypertext REFerence
e-Mail Link Tag
► Insert a graphic file “upmlogo_ani.gif”
<IMG SRC=“Graphic/upmlogo_ani.gif“>
► IMG = Image
► SRC = Source
Graphic Tag
1. Create the following folders:
− My Webs
− Graphic
− Music
Early Preparation
2. Download selected graphics from DCE 3001
website and save into Graphics folder
3. Download selected music files from DCE
3001 website and save into music folder
4. Use the following software:
− Notepad – prepare webpages
− Internet Explorer – preview webpage
5. Type the following HTML tag in the Notepad:
− Type in sequence
− Some can be typed anywhere
Document Folder
Graphic Folder
Music Folder
Software
Type the following HTML tag in Notepad
<HTML>
<TITLE>your name</TITLE>
<BODY>
</BODY>
</HTML>
L1: Prepare Basic Tag
L2: Save document as index.htm
► In Internet Explorer, click menu File | Open
► In the dialog box, click Browse button and open
index.htm
L3: Preview in IE
The result:
You will key in a set of command at one time:
L1: Enter additional element and command
in Notepad
L2: Save the command
L3: Preview the result in Internet Explorer
Next …
Tag HTML …
<B>
<FONT SIZE=6 COLOR=blue>
Bahaman Abu Samah
</FONT> <BR>
<I>
<FONT SIZE=5 COLOR=red>
Homepage
</FONT>
</B></I>
Text
<BODY BGCOLOR="#808080">
Background colour
<BODY BACKGROUND= “Graphic/
whitemar.jpg">
Background graphic
Tag HTML …
Background
Graphic
<IMG SRC=“Grafik/upmlogo.gif">
Marquee Text
<FONT SIZE=4 COLOR=green>
<MARQUEE>
W e b c o m e t o m y W e b s I t e
</FONT>
</MARQUEE>
<BGSOUND SRC=“Music/Berzanji.mp3"
loop="-1">
Continuous
<BGSOUND SRC=“Music/HotelCal.mid“
loop="1">
Repeated by no. of loop
Tag HTML …
Music
<A HREF=“Profile.htm“>Personal Profile</A>
Text as anchor
<A HREF=“Profile.htm">
<IMG SRC=“Graphic/earth2.gif“ BORDER=“0”>
</A>
Graphic as anchor
Tag HTML …
Links to Document
<A HREF= "http://www.upm.edu.my">
Universiti Putra Malaysia </A>
Text as anchor
<A HREF=“http://www.upm.edu.my"> <IMG
SRC=“Graphic/upmlogo.gif"> </A>
Graphic as anchor
Tag HTML …
Links to URL
<A HREF="mailto:[email protected]">
Webmaster</A>
Text as anchor
<A HREF="mailto:[email protected]">
<IMG SRC=“Graphic/email3.gif">
</A>
Graphic as anchor
Tag HTML …
Links to e-Mail
Result:
