Session 6:
HTML 2 - Content Design
J0394 – Perancangan Situs Web
Program Studi Manajemen
Universitas Bina Nusantara
Writing for the Web
Guidelines for writing for the Web
Be succinct. Write no more than 50 percent of
the text you would have used to cover the same
material in a print publication
Write for scanability
Use hypertext to split up ong information into
multiple pages
BWD
Bina Nusantara University
2
Writing for the Web
• Hire a Web editor
• Coherent page chunking: users don't like to
scroll - so place most important links above
the fold
BWD
Bina Nusantara University
3
Web Images
IMG tag:
– ALIGN="left | right | top | texttop | middle |
bsmiddle | baseline | bottom | absbottom“
– ALT=”alternate_text”
– ISMAP
– SRC=”URL_of_image”
– WIDTH=”value”
– HEIGHT=”value”
– BORDER=”value”
– VSPACE=”value”
– HSPACE=”value”
– LOWSRC
BWD
Bina Nusantara University
4
Tables
BWD
Tables might seem a bit daunting at first,
especially when used for layout. However,
if you carefully map out your page before
start in on the HTML code, you will be a
lot easier. The second most important step
is to specify the width of the whole table
as well as of the individual cells.
Setting the width keeps the table’s size
constant (instead of letting the browser
figure it out in its own indomitable way)
and keeps your elements the way you
intended.
Bina Nusantara University
5
Tables (2)
If table really make you miserable,
you can cheat. You can use PageMill
or FrontPage or some other web
page program, create the table in
that program and then tweak the
HTML code by hand afterwards as
necessary,
BWD
Bina Nusantara University
6
Tables (3)
The Table HTML elemets :
– <TABLE> : The table delimiter
– <TR> : Use to specify number of rows
in a table
– <TD> : Specifies table data cells
– <TH> : Table header cells
– <CAPTION> : Specifies the table
caption
BWD
Bina Nusantara University
7
Tables (4)
TABLE Tag
–
–
–
–
–
–
–
–
–
–
BWD
BORDER=”value”
CELLPADDING=”value”
CELLSPACING=”value”
COLS=”number of columns”
WIDTH=”value or percent”
HEIGHT=”value or percent”
ALIGN=”left | right”
VALIGN=”top | bottom | center”
BGCOLOR=”#rrggbb | color name”
BACKGROUND=”URL of image
Bina Nusantara University
8
Tables (5)
TD Tag
–
–
–
–
–
–
–
–
–
BWD
ALIGN=”left | right”
VALIGN=”top | bottom | center”
WIDTH=”value or percent”
HEIGHT=”value or percent”
NOWRAP
COLSPAN=”value”
ROWSPAN=”value”
BGCOLOR=”#rrggbb | color name”
BACKGROUND=”URL of image”
Bina Nusantara University
9
Frame’s
Frames can be the key to organizing the
site and making it easy to navigate
By dividing a page, called a frameset, into
frames, you allow the visitor to see more
than one page at a time, without
completely cluttering up their screen. Each
frame contains its own Web page and
theoritically could be viewed independenly
in a separate windows.
BWD
Bina Nusantara University
10
Frame’s (2)
The beauty of having several webpages
open on a screen at a time, however, lies
in the ability to interrelate the information
I each of the pages.
Meanwhile, a dynamic frame on the left
side of window can include a table of
contents.
Finally, the main area of the window will
be devoted to the contents frame, whose
data changes each time your visitor clicks
on a new topic in the table of contents.
BWD
Bina Nusantara University
11
Frame’s (3)
FRAMESET tag
– ROWS=”row_height_value_list”
– COLS=”column_width_list”
BWD
Bina Nusantara University
12
Frame’s (4)
FRAME tag
– SRC=”URL”
– NAME=”frame_name”
– MARGINWIDTH=”value”
– MARGINHEIGHT=”value”
– SCROLLING=”yes | no | auto”
– NORESIZE
BWD
Bina Nusantara University
13