HTML - Binus Repository
Download
Report
Transcript HTML - Binus Repository
Matakuliah
Tahun
: L0182 / Web & Animation Design
: 2008
Project
Pertemuan 13
Learning Outcomes
Pada akhir pertemuan ini, diharapkan mahasiswa akan
mampu :
• Membuat dan mempresentasikan web yang sudah dibuat
sesuai dengan prinsip-prinsip yang telah diajarkan
Bina Nusantara
Outline Materi
•
•
•
•
•
•
•
•
•
•
Eight Golden Rules
Top Ten Mistakes in Web Design
HTML
Text Formatting Tags
HTML Images
Table
Hyperlink
CSS
Formatting Text with Styles
Layout with Styles
Bina Nusantara
Eight Golden Rules
• Ben Shneiderman's "Eight Golden Rules of Interface
Design" :
–
–
–
–
–
–
–
–
Bina Nusantara
Strive for consistency
Enable frequent users to use shortcuts
Offer informative feedback
Design dialog to yield closure
Offer simple error handling
Permit easy reversal of actions
Support internal locus of control
Reduce short-term memory load
Top Ten Mistakes in Web Design
• Jakob Nielsen's Top Ten Mistakes in Web Design :
–
–
–
–
–
–
–
–
–
–
Bina Nusantara
Using Frames
Gratuitous Use of Bleeding-Edge Technology
Scrolling Text, Marquees, and Constantly Running Animations
Complex URLs
Orphan Pages
Long Scrolling Pages
Lack of Navigation Support
Non-Standard Link Colors
Outdated Information
Overly Long Download Times
HTML
• HyperText Markup Language (HTML) is a markup language used
to structure text and multimedia documents and to set up hypertext
links between documents, used extensively on the World Wide
Web.
• Basic HTML Tags :
Tag
Bina Nusantara
Description
<html> </html>
Defines an HTML document
<body> </body>
Defines the document's body
<h1> </h1> to <h6> </h6>
Defines header 1 to header 6
<p> </p>
Defines a paragraph
<br>
Inserts a single line break
<hr>
Defines a horizontal rule
<!-- -->
Defines a comment
Text Formatting Tags
Tag
Description
<b> </b>
Defines bold text
<big> </big>
Defines big text
<em> </em>
Defines emphasized text
<i> </i>
Defines italic text
<small> </small>
Defines small text
<strong> </strong>
Defines strong text
<sub> </sub>
Defines subscripted text
<sup> </sup>
Defines superscripted text
Bina Nusantara
HTML Images
• In HTML, images are defined with the <img> tag.
• To display an image on a page, you need to use the src
attribute. The value of the src attribute is the URL of the
image you want to display on your page.
• The “alt” attribute is used to define an "alternate text" for
an image. The "alt" attribute tells the reader what he or
she is missing on a page if the browser can't load
images.
Bina Nusantara
Table
• Tables are defined with the <table> tag. A table is divided
into rows (with the <tr> tag), and each row is divided into
data cells (with the <td> tag).
• A data cell can contain text, images, lists, paragraphs,
forms, horizontal rules, tables, etc.
Bina Nusantara
Hyperlink
• HTML uses the <a> (anchor) tag to create a link to
another document.
• An anchor can point to any resource on the Web : an
HTML page, an image, a sound file, a movie, etc.
• The <a> tag is used to create an anchor to link from, the
href attribute is used to address the document to link to,
and the words between the open and close of the anchor
tag will be displayed as a hyperlink.
Bina Nusantara
CSS
– Example :
Body element will be displayed in
black text color
If the value is multiple words, put
quotes around the value
If you wish to specify more than one
property, you must separate each
property with a semicolon.
You can group selectors. All header
elements will be displayed in green
text color
Bina Nusantara
Formatting Text with Styles
Property
Description
font-family: familyname
To set the font family
font-style: italic/oblique/normal
To create italics/oblique/normal text
font-weight: bold/normal
To apply bold/normal formatting
font-size: sizept, e.g., 12pt
To set the font size
line-height: sizept, e.g., 12pt
To set the line height
color: #rrggbb
To set the text color
background: #rrggbb
To set the text background
text-align: left/right/center/justify
To align text
text-decoration:
underline/overline/linethrough/blink/none
To underline/overline/linethrough/blink text
Bina Nusantara
Layout with Styles
Property
Description
height: size, e.g., 200
Setting the element’s height
width: size, e.g., 200
Setting the element’s width
border-top/bottom/left/right:
thin/medium/thick or sizepx
Setting the border
padding-top/bottom/left/right:
size, e.g., 10
Adding padding around the element
margin-top/bottom/left/right: size, Setting the margins around an
e.g., 10
element
Vertical-align:
baseline/middle/sub/super/texttop/text-bottom/top/bottom
Bina Nusantara
Aligning elements vertically