Session 6: HTML 2 - Content Design J0394 – Perancangan Situs Web Program Studi Manajemen Universitas Bina Nusantara

BWD Bina Nusantara University 2 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 scanability Use hypertext to split up ong information into multiple pages

BWD Bina Nusantara University 3 Writing for the Web Hire a Web editorHire a Web editor Coherent page chunking: users don't like to scroll - so place most important links above the foldCoherent page chunking: users don't like to scroll - so place most important links above the fold

BWD Bina Nusantara University 4 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 5 Tables 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.

BWD Bina Nusantara University 6 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 7 Tables (3) The Table HTML elemets : – : The table delimiter – : Use to specify number of rows in a table – : Specifies table data cells – : Table header cells – : Specifies the table caption

BWD Bina Nusantara University 8 Tables (4) TABLE Tag –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

BWD Bina Nusantara University 9 Tables (5) TD Tag –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”

BWD Bina Nusantara University 10 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 11 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 12 Frame’s (3) FRAMESET tag –ROWS=”row_height_value_list” –COLS=”column_width_list”

BWD Bina Nusantara University 13 Frame’s (4) FRAME tag –SRC=”URL” –NAME=”frame_name” –MARGINWIDTH=”value” –MARGINHEIGHT=”value” –SCROLLING=”yes | no | auto” –NORESIZE