Subject
Year
: L0182 / Web & Animation Design
: 2009
Project
Session 13
Learning Outcomes
At the end of this session, the students will be able to :
• Create and present the Website
Bina Nusantara
Course Outlines
•
•
•
•
•
•
•
•
HTML
Text Formatting Tags
HTML Images
Table
Hyperlink
CSS
Formatting Text with Styles
Layout with Styles
Bina Nusantara
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
0
