Download Web Design

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project

Document related concepts

Cascading Style Sheets wikipedia , lookup

URL redirection wikipedia , lookup

Transcript
Web Design
Web Design Using HTML
Web Design-Lecture1-QN-2003
Introduction
Qonita MS, S.Kom
room 1228 (building A)
[email protected]
Course homepage:
http://www.cs.ui.ac.id/kuliah/webdesign/
Web Design-Lecture1-QN-2003
Course Outline
HTML Introduction
Microsoft FrontPage /
Netscape Composer
Enhancing a Website
Project: building a website
Web Design-Lecture1-QN-2003
First Lecture
Create web pages as simple as possible
Use Notepad to create HTML files
Use HTML codes
Web Design-Lecture1-QN-2003
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
Web Design-Lecture1-QN-2003
HTML Tags (1)
All HTML codes are written using tags
Tags: surrounded by angular brackets
“<“ and “>”
Generally: opening & closing tags
E.g. <tag> some text </tag>
“/” tells the code to stop tagging
Unrecognisable tags are ignored
Web Design-Lecture1-QN-2003
HTML Tags: example (1)
<html>
<head>
<title> My first web page </title> </head>
<body>
<center> <h1> My first web page </h1> </center>
<p>
This is as simple as a web page can get.
</p>
</body>
</html>
Web Design-Lecture1-QN-2003
HTML Tags: example (2)
Web Design-Lecture1-QN-2003
HTML Tags (2)
A web browser does not care if you use
upper or lower case.
E.g. <H3> text </H3> is no different
from <h3> text </h3>
Web Design-Lecture1-QN-2003
Experiment
Open Notepad
Write HTML codes
Save as .htm or .html
Double-click file to display in browser
Web Design-Lecture1-QN-2003
More Tags (1)
<html>
<head>
<title> Web Page Basic </title>
</head>
<body bgcolor ="white" text = "blue">
<center>
<!show the different height tags>
<h1>Basic Web Page Design</h1>
<h3>Basic Web Page Design</h3>
<h5>Basic Web Page Design</h5>
</center>
Web Design-Lecture1-QN-2003
More Tags (2)
<!show the type of text tags>
<hr>
<p>
This is an example of a very simple web page.
<i> This is an example of a very simple web page.
</i>
<b> This is an example of a very simple web page.
</b>
<em> This is an example of a very simple web
page.
</em>
This is an example of a very simple web page.
Another line
</body>
Web Design-Lecture1-QN-2003
</html>
More Tags (3)
Web Design-Lecture1-QN-2003
Tags to Watch (1)
<html> ... </html> to show that the code
inside it is HTML
<title> tag located in the <head> ...
</head> portion of the code  not visible in
browser
<body> (after <head>) is the part that is
visible in browser
bgcolor & text (inside <body>)  indicating
colour of background and text
Web Design-Lecture1-QN-2003
Tags to Watch (2)
<h1>, <h3>, <h5>  heading types (size)
<center>
<hr>  horizontal rule
<p>  paragraph
<i>
<b>
<em> (bold/italics depending on your
browser)
Web Design-Lecture1-QN-2003
Special Characters
ISO characters, such as: ü é, < or >
Some already defined to create HTML
codes
Should write them in different way, e.g.
< becomes &lt; (less than)
Try putting a lot of space (press space
bar), what happening?  needs nonbreaking space character, i.e. &nbsp;
Web Design-Lecture1-QN-2003
Why Learning HTML?
Those who say that it’s not needed:
there are many WYSIWYG tools for
HTML
Why you need to learn it?
It’s 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
Web Design-Lecture1-QN-2003
Read more...
List of HTML tags:
http://www.cs.ui.ac.id/kuliah/webdesign/htmltags.html
List of HTML special characters:
http://www.cs.ui.ac.id/kuliah/webdesign/special-char.html
Web Design-Lecture1-QN-2003