Web Design

1
Web Design

• Web Design Using HTML

2
Introduction

• Qonita MS, S.Kom
• room 1228 (building A)
• niet_at_cs.ui.ac.id
• Course homepage
• http//www.cs.ui.ac.id/kuliah/webdesign/

3
Course Outline

• HTML Introduction
• Microsoft FrontPage / Netscape
  Composer
• Enhancing a Website
• Project building a website

4
First Lecture

• Create web pages as simple as possible
• Use Notepad to create HTML files
• Use HTML codes

5
What is HTML?

• HyperText Markup Language
• How web browser displays its multimedia documents
• Documents contain plain text (ASCII characters)
  with special tags or codes
• Browser interprets tags/codes ? how to display on
  the screen

6
HTML Tags (1)

• All HTML codes are written using tags
• Tags surrounded by angular brackets lt and gt
• Generally opening closing tags
• E.g. lttaggt some text lt/taggt
• / tells the code to stop tagging
• Unrecognisable tags are ignored

7
HTML Tags example (1)

• lthtmlgt
• ltheadgt
• lttitlegt My first web page lt/titlegt lt/headgt
• ltbodygt
• ltcentergt lth1gt My first web page lt/h1gt lt/centergt
• ltpgt
• This is as simple as a web page can get.
• lt/pgt
• lt/bodygt
• lt/htmlgt

8
HTML Tags example (2)
9
HTML Tags (2)

• A web browser does not care if you use upper or
  lower case.
• E.g. ltH3gt text lt/H3gt is no different from lth3gt
  text lt/h3gt

10
Experiment

• Open Notepad
• Write HTML codes
• Save as .htm or .html
• Double-click file to display in browser

11
More Tags (1)
lthtmlgt ltheadgt lttitlegt Web Page Basic
lt/titlegt lt/headgt ltbody bgcolor "white" text
"blue"gt ltcentergt lt!show the different height
tagsgt lth1gtBasic Web Page Designlt/h1gt lth3gtBasic
Web Page Designlt/h3gt lth5gtBasic Web Page
Designlt/h5gt lt/centergt
12
More Tags (2)
lt!show the type of text tagsgt lthrgt ltpgt This is
an example of a very simple web page. ltigt This
is an example of a very simple web page.
lt/igt ltbgt This is an example of a very simple web
page. lt/bgt ltemgt This is an example of a very
simple web page. lt/emgt This is an example of a
very simple web page. Another line lt/bodygt
lt/htmlgt
13
More Tags (3)
14
Tags to Watch (1)

• lthtmlgt ... lt/htmlgt to show that the code inside
  it is HTML
• lttitlegt tag located in the ltheadgt ... lt/headgt
  portion of the code ? not visible in browser
• ltbodygt (after ltheadgt) is the part that is visible
  in browser
• bgcolor text (inside ltbodygt) ? indicating
  colour of background and text

15
Tags to Watch (2)

• lth1gt, lth3gt, lth5gt ? heading types (size)
• ltcentergt
• lthrgt ? horizontal rule
• ltpgt ? paragraph
• ltigt
• ltbgt
• ltemgt (bold/italics depending on your browser)

16
Special Characters

• ISO characters, such as ü é, lt or gt
• Some already defined to create HTML codes
• Should write them in different way, e.g. lt
  becomes lt (less than)
• Try putting a lot of space (press space bar),
  what happening? ? needs non-breaking space
  character, i.e. nbsp

17
Why Learning HTML?

• Those who say that its not needed there are
  many WYSIWYG tools for HTML
• Why you need to learn it?
• Its always useful to understand the basics
  before understanding the complexity of any
  language or codes
• Helps you to get used to the codes when you
  learn web programming

18
Read more...

• List of HTML tags http//www.cs.ui.ac.id/kuliah/w
  ebdesign/htmltags.html
• List of HTML special characters
  http//www.cs.ui.ac.id/kuliah/webdesign/special-ch
  ar.html