Download Lesson 3

Lesson 3
Instructions for display are
in the Web pages and
browsers interpret and
display the pages.
Web Page
These instructions are in
standard tags such as
HTML or XHTML tags.
Web Server
Internet Explorer
Netscape Com.
Web Client
Web Browser
HTTP (Hyper Text Transport Protocol)
The standard set of rules for sending text files across
the Internet. It requires an HTTP client program on the
one end, and an HTTP server program in the other end.
HTTP Client
A computer program that requests a service from a Web
Server.
HTTP Server
A computer program providing services from a Web
Server.
CGI Bin
The folder (or directory) on a Web Server that stores CGI Programs.
CGI Program
A small program that handles input and output from a Web Server. Often CGI
programs are used for handling forms input or database queries.
GIF (Graphics Interchange Format)
A compressed format for storing images developed by CompuServe. One of the
most common formats on the Internet.
Securing your Website
When you store something in your Web site that is not protected by
passwords it is visible to search engines. Therefore if you have files in
your Web directory such as HTML, Word Documents, Adobe Acrobat,
Excel Spreadsheets, etc. they are all visible.
To protect your files you may put them in a password protected directory
and use a server level password such as htaccess (this is the securest
protection) or use a JavaScript password (which is not very secure).
The .htaccess file affects the directory in which it is placed, so in this
example, any visitor requesting
<URL:http://somewhere.com/somepath/> would be presented with an
authentication request.
• W3C (World Wide Web Consortium ) is a a Member Organization
created in 1994 as a collaboration between the Massachusetts Institute
of Technology (MIT) and the European Organization for Nuclear
Research (CERN), with support from the U.S. Defense Advanced
Research Project Agency (DARPA) and the European Commission
• Tim Berners-Lee was instrumental in its creation. W3C is working to
Standardize the Web by creating and maintaining WWW Standards
(also referred to as W3C Recommendations)
• The most important work done by the W3C is the development of Web
specifications that describe communication protocols such as HTML,
XML, and XHTML.
• HTML is medium of communication between peoples of different
languages and cultures for publishing on the World Wide Web.
• The lastest version of HTML is XHTML.
• HTML versions from 2.0 (1996)
•
3.2 (1997)
•
4.0 (1997, 1998)
•
4.01 (1999) Last one
• XHTML 1.0 (2000) reformulates HTML 4.01 in XML
• XHTML 1.1 (Modular XHTML that supports mobile devices)
• XHTML is very similar to HTML 4.01,
• XHTML (eXtensible HyperText Markup Language)
• If you know HTML then pay attention to writing code in lowercase
letters, and do not skip end tags like the </p>  XHTML is stricter
• Else just focus on learning XHTML
A Good Web Site has:
• Useful information on every page. Unique and no step stones.
• Is nice to look at  Not Ugly
• Must be current. (Both information and links)
• Reliable information. No misspellings, check your sources
• Good links to other similar Topic/Subject sites
• Support at least both IE and NC
• Promote it.
Review/Basics
General Principles
• A browser has very specific rules about how
content is formatted and displayed to the user.
• We must understand these rules, and work with
them to present professional, attractive, readable
content.
• HTML/XHTML was intended to present basic
content, not for the level of creative design
expected of today’s web pages.
General Principles
• Content generally flows from left to right,
top to bottom.
• Leaving out a tag or using one incorrectly
will not cause a crash in HTML, but the
document may not display properly.
XHTML is stricter.
Coding Guidelines
• Following consistent procedures for writing
XHTML are essential
• They make code easier for you and others to
maintain
• Professional-quality code is a valuable asset for a
company
• Code samples and URLs of your previous work
are often requested by employers, and
professional-looking code is essential
Coding Guidelines
The two best ways to thoroughly learn HTML
and XHTML are;
1. Practice. Write lots of code, using only a simple
editor like Notepad. This will force you to learn
the tags more quickly.
2. Read the source code of websites that you like
and don’t like, and figure out how they did
things, but don’t cut and paste or copy them.
HTML/XHTML standards
• The current standard is 4.01
• It is the last HTML standard
• The next is XHTML. This is the standard
now.
HTML
HTML : Hyper Text Markup Language
An HTML file is a text file with a file extension of htm or html that has
markup tags. These tags tell the Web browser how to display the page and
can be created using a simple text editor.
<html>
<head>
<title> The Title Of My Web Page</title>
</head>
<body>
This is a test web page. <b>This text is bold</b>
</body>
</html>
1. Start End
HTML doc.
2. Header Info.
not displayed
3. Title
displayed in
browser
caption
Here text is <B>bold!</B>
Here text is <U>underlined</U>
Here text is <I>italicized.</I>
Here text is bold!
Here text is underlined
Here text is italicized
• Editors such as Adobe PageMill, FrontPage, etc. are available
• To learn HTML very well use a plain text editor to write your markup
tags
Vocabulary
<a href=“file.html”>file</a>
closing tag
contents of tag
value of attribute
attribute
opening tag
HTML rules
• All tags and attributes will be in lower case.
• All tags that have an end tag will use it,
even if it is optional.
• All attribute values will be in quotes
• Nesting order must be preserved
Browser target rules
• For the purpose of this course, your code
should function and appear the same in
IE 5.0 or higher and Netscape Navigator 4.7
or higher.
• Your pages should look correct and
complete when viewed at a resolution of
600x800 or higher.
Skeleton HTML document
<html>
<head><title>skeleton page</title>
</head>
<body>
……..
</body>
</html>
Body
• <body background=“___” bgcolor=“___”
text=“___”></body>
• background can be a relative or absolute URL of
an image to be loaded in the page. If the image is
not big enough, it will be tiled.
• bgcolor is the colour that will be the background
for the whole page.
• text sets the colour of the text for the page
Comments
• HTML comments are written with the
following syntax;
<!-- everything inside the tags will be
ignored, on one or more lines -->
Text effects
• <b></b>
• <i></i>
• <em></em> preferred to <i>
• <strong></strong> preferred to <b>
Note:
• <u></u>
– Don’t use since it looks like a hyperlink
Lists
• <ol type=“___”></ol>
– type can be A, a, I,1(default)
• <ul type=“___”></ul>
– type can be circle, square, disc(default)
• <li type=“___” value=“_”></li>
– type can be A, a, I, 1(default) if in <ol>
– type can be circle, square, disc(default) if in <ul>
– value = an integer, if in <ol>
Links
• <a href=“_____”></a>
– href is an absolute or relative URL.
Paragraph
• <p align=“___”></p>
– align can be left(default), right or center
• Leaves a space around paragraph
Line break
• <br> inserts a line break in text.
Horizontal rule
• <hr align=“___” width=“___” size=“___”>
– align can be left, center(default) or right
– width in pixels or percent of page or section
(e.g. table cell)
– size is height in pixels of the rule
Heading
• <h1 align=“___”></h1>
– align can be left (default), center or right
• Same for <h2> to <h6>
• <h1> is largest and <h6> is smallest
Indentation
• Use indentation to show nesting and pairing of
tags, and to make it easier to identify the end of
each block
• Tags such as <html>, <head>, <title> and <body>
do not need to be indented
• Use empty lines and comments to make the source
code easier to read
• The following example compares the readability
of un-indented and indented HTML
Indentation
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item
<strong>2</strong></li>
<ul>
<li>list item 2 - sub list item 1</li>
<li>list item 2 - sub list item 2</li>
</ul>
<li>list item 3</li>
</ul>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<!-- beginning of outer list -->
<ul>
<li>list item 1</li>
<li>list item <strong>2</strong></li>
<!-- beginning of inner list -->
<ul>
<li>list item 2 - sub list item 1</li>
<li>list item 2 - sub list item 2</li>
</ul>
<!-- end of inner list -->
<li>list item 3</li>
</ul>
<!-- end of outer list - ->
</body>
</html>
Indentation
The results of the previous code
Coding Guidelines
The two best ways to thoroughly learn
HTML/XHTML are;
1. Practice. Write lots of code, using only a simple
editor like Notepad. This will force you to learn
the tags more quickly.
2. Read the source code of websites that you like
and don’t like, and figure out how they did
things, but don’t cut and paste or copy them.
Review
•
Why is it important to follow consistent
coding guidelines?
•
What are the current HTML/XHTML
standards?
Review
•
•
•
Why is it not a good idea to use the <u>
tag?
Which heading is the largest, <h1> or
<h6>?
What does the <hr> tag do?
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
Aqua - Aqua
Red - Red
Green - Green
Blue - Blue
Violet - Violet
Fuchsia - Fuchsia
Gray - Gray
Lime - Lime
Maroon - Maroon
Navy - Navy
Olive - Olive
Purple - Purple
Silver - Silver
Teal - Teal
White - White
Yellow - Yellow