Session 5:
HTML
J 0394 – Perancangan Situs Web
Program Studi Manajemen
Universitas Bina Nusantara
HTML Building Blocks
HTML Tags
Contained
text
Opening tag
Closing tag
<B>BiNus</B> Bina Nusantara
Angle
brackets
Forward slash
SRC is an
attribute of IMG
Surrounding text
Value for SRC
<IMG SRC="image.gif" HSPACE=5>
HSPACE is
an attribute of
IMG
BWD
Bina Nusantara University
Value for
HSPACE
2
HTML Building Blocks (2)
Nesting Tags
Correct (no overlapping lines)
<H1>BiNus <I>Bina Nusantara</I></H1>
<H1>BiNus <I>Bina Nusantara</H1></I>
Incorrect (the sets of tags cross over each other)
BWD
Bina Nusantara University
3
HTML Building Blocks (3)
Spacing
Special Symbols
File Names
URLs
– Absolute URLs
– Relative URLs
BWD
Bina Nusantara University
4
Text Formatting
If you’re used to choosing your favorite
font, size, and color from a set of familiar
menus, formatting text in your web page
may seem a bit clumsy, even archaic.
There are 2 methods for formatting text:
(1) use a regular HTML tags and attributes
to format distinct pieces of text
individually, (2) use a style sheet, if the
format is complex of long and numerous
documents
BWD
Bina Nusantara University
5
Text Formatting (1)
Text Formatting Elements:
– <B> : boldface type
– <I> : italics
– <U> : underlined text
– <BLINK> : blinking text
– <FONT> : font setting
– <SUP> : superscript
– <SUB> : subscript
BWD
Bina Nusantara University
6
Text Formatting (2)
FONT tag
– COLOR=”#rrggbb | color_name”
– FACE=”name [,name] [,name]”
– SIZE=”value”
BWD
Bina Nusantara University
7
Lists
The list HTML elements :
– <DL> : Definition list
– <DIR> : Directory list
– <MENU> : Menu list
– <OL> : Ordered list
– <UL> : Unordered list
– <LI> : List items
BWD
Bina Nusantara University
8
List (2)
List type attributes :
–
–
–
–
–
–
–
BWD
TYPE=A : Capital letters, e.g., A, B, C, ...
TYPE=a : Small letters, e.g., a, b, c, ...
TYPE=i : Small roman numerals, e.g., i, ii, ...
TYPE=1 : Default numbers, e.g., 1, 2 , 3, ...
TYPE=disc (for unordered list)
TYPE=square (for unordered list)
TYPE=circle (for unordered list)
Bina Nusantara University
9
Page Layout
Background Color: [BGCOLOR]
Background Images:
[BACKGROUND=“ “]
Margin: [Left Margin=“x”], [Top
margin=“y”], [Marginwidth=“x”],
[Marginheight=“y”]
Line Break: [BR]
BWD
Bina Nusantara University
10
Links
The <A> (anchor) tag
– HREF
– NAME
– TARGET
Window name
_self
_parent
_top
_blank
BWD
Bina Nusantara University
11