CIS 252 Advance Web Page Design HTML Review
Download
Report
Transcript CIS 252 Advance Web Page Design HTML Review
EE103 Web Technology
Lecturer: Dr. M Rajarajan
Email: [email protected]
Web: http://www.staff.city.ac.uk/~raj
Books
Course Text Book
‘Sams Teach Yourself HTML and XHTML in 24
Hours’, Dick Oliver, ISBN 0-672-32076-2, 2002.
Recommended Reading
‘Internetworking with TCP/IP Principles, Protocols
and Architectures’, Douglas E. Comer, ISBN 0-13018380-6, 2000
‘Computer Networks and Internets with Internet
Applications’, Douglas E. Comer, ISBN 0-13091449-5, 2001
Syllabus
Week 1
Understanding HTML and XHTML
A simple Web page
Linking to other Web pages
Publishing your HTML pages
Week 2
Text alignments, lists, and special
characters
Advanced text formatting and links
Creating HTML forms
Creating your own web page graphics
Week 3
Putting graphics on a Web page
Custom backgrounds and colours
Creating animated graphics
Page design and layout
Week 4
Graphics links and imagemaps
Advanced layout with tables
Using style sheets
Embedding multimedia in Web pages
Week 5
Interactive pages with Applets and ActiveX
Web page scripting for non-programmers
Setting pages in motion with Dynamic
HTML
Multipage layout with frames
Week 6
Organizing and managing a web site
Helping people find your web pages
Using XML to describe data
Planning for the future of HTML
Week 7
Email
FTP
Telnet
Search Engines and Agents
Week 8
Internet Structure
Layers
Week 9
Multimedia Technology
Video streaming and casting
Week 10
Internet Security
Fire walls, Proxy servers
Cookies, Web Tracking
Digital certificates and parental control
What is HTML?
HyperText Markup Language is a tag based
language that describes how documents are
viewed and formatted through hypertext
transfer protocol (http).
Documents can be designed to link to other
documents, images, multimedia, etc. HTML is
not a programming language, however, it is a
structured document layout language. Hence,
there is no logic being processed.
Early History?
1989 CERN - WWW project proposal
1992 - Laying the foundations
Early browsers were cumbersome to install
1993 NCSA Mosaic released, Web takes off
What can html do?
Provides document layout
Links files
Links images
Links to multimedia (sound and video)
Provides presentation to the viewer
What you need to create and
launch your web page?
A Computer
A text editor
A browser (IE/Netscape)
An Internet connection
You the web designer
HTML Specification
HTML standards are upheld by the World
Wide Web Consortium (W3C).
Set standards based on current technologies
that best suite the language. Ensures that
software developers create similar software
implementations to achieve similar
functionality
HTML is in version 4.01
More information can be found at
http://www.w3.org.
W3C also sets standards for XML, CSS, to
mention a few.
HTML in its basic form
<html>
<head>
<title>MY HOME PAGE</title>
</head>
<body>This is the body that will appear in the
viewer’s browser.
</body>
</html>
XML
XML – eXtensible Markup Language
Allows user defined tag names ( HTML
uses predefined tags)
XML is used to explain how the data is
organized
XHTML
XHTML – eXtensible Hypertext Markup Langauge
This is an application of the XML
HTML is the set of codes (that's the "markup
language") that a writer puts into a document to
make it displayable on the World Wide Web.
XML is a structured set of rules for how one might
define any kind of data to be shared on the Web
It's called an "extensible" markup language because
anyone can invent a particular set of markup for a
particular purpose and as long as everyone uses it
(the writer and an application program at the
receiver's end)
XHTML
XHTML requires strict adherence to coding rules.
Notably, it requires that you use closing as well as
opening elements (this is known as well-formed
syntax) and that all elements be in lower case.
HTML was much less rigorous about notation and
browsers tended to be even more forgiving.
This means that XHTML files will tend to be "busier"
than HTML. However, they won't necessarily be
harder to read because rigor may force more order in
coding. In addition, the major editing and file creation
tools will probably lay out pages for easier readability.
XHTML
XHTML would seem to encourage a more structured
and conceptual way of thinking about content and,
combined with the style sheet, a more creative way
of displaying it.
XHTML will make it easier for people to dream up
and add new elements (and develop browsers or
other applications that support them).
How Web Pages Work
The user types the page they are interested
and the page appears on the screen
The advantage of the web pages over paper
pages is that web pages are interactive.
Web pages also have animations and sound
Web Browsers
A web browser is a computer program that
interprets the components of an HTML file to
collect, arrange, and display the parts of a
web page
HTML file contains HTML commands, dynamic
contents such as small scripts, Java Applets,
and ActiveX controls
Browsers can also use ‘plug-ins’ to interpret
audio and video
Example Web Pages
<html>
<head><title>The Toyologist</title></head>
<body background="toyback3.gif" bgcolor="magenta"
text="blue" link="purple" vlink="white" alink="magenta">
<img src="ologist4b.gif" align="right" />
<img src="toyolog7.gif" align="top" />
<ul>
<li>FREE
<a href="remind.htm">Birthday Remind-O-Matic</a></li>
<li>INSTANT
<a href="commend.htm">Toy Recommendation</a></li>
<li>CUSTOM
<a href="report.htm">E-Mail Toyology Report</a></li>
<li>CONSULT
<a href="consult.htm">with the Toyologist</a></li>
<li>BUY A TOY
<a href="order.htm">Online Order Form</a></b></li>
</ul>
<div align="center">
Brought to you by Once Upon a Time Toys in Stowe, Vermont, USA
</div></body></html>
HTML structure
<html>
<head>
<title>Example
HTML
</title>
</head>
<body>Document
Content
</body>
</html>
Being the document
Document head
Document head
element
Document Body
End document
ALL HTML documents contain this basic structure.
What Happens When You Surf
the Web ?
When the user types an address such as
http://www.city.ac.uk in the address window of the
browser he/she acts as a client
The requested web address is sent to the directory
server
The server translates the address into a machine
readable form of addresses that can be used by the
computers connected on the web.
The request is then routed to the computer that hosts
the site
HTML tags
HTML coded commands are called ‘tags’ because
they “tag” pieces of text and tell the Web browser
what kind of text it is.
HTML contains, in most situations, an opening tag
and a closing tag.
<html> - beginning tag
</html> - ending tag
Tags are defined by reserved names (<a>, <html>,
<p>, <br>, etc.
Tags also contain attributes that defines the display
of text that is enclosed by the tags.
URL
An address on the Web is known as a URL
e.g: http://www.w3.org
URL – Uniform Resource Locator
HTML Attributes
<p align=“left”> This text is aligned left</p>
<body bgcolor=“black” text=“white”>This text
will appear white with a black
background.</body>
<a href=http://www.city.ac.uk>City
University</a>
align, bgcolor, text, and href are all attributes of
their tags. They describe layout or positioning of
text.
Editing web pages
Type the text with any word processor or text
editor and save as an html file (with
extension .html)
To insert graphics, animations, video, or
interactive scripts on the page you need to
type HTML commands that will point to the
source destination
The media files stay separate from the text
files even though they appear as if they are
part of the same document
HTML Creaters
Microsoft FrontPage
Microsoft Visual InterDev
Macromedia Dreamweaver
Adobe GoLive
Many Faces of HTML
Most web pages will look the same on
Netscape Navigator and IE
They will look the same on PC’s , UNIX and
Macintoshes
Users of the same version of the same
browser can alter the font size and
background
Web browsers usually change the background
to white when sending pages to a printer
How to view the source code
of a web page ?
Click with the right mouse button
Select View Source from the pop-up
menu. This is a great way to get an
intuitive idea how HTML works and
learn by other's examples.
HTML Content
HTML can be written in any text editor
or WYSIWYG (What you see is what
you get) editor.
HTML is simply text that contains tags.
HTML pages are static, they don’t
change unless the designer alters the
page.
Must have HTML tags
<html> - indicates that this is a web page
</html> - indicates that the end of the web
<title> and </title> - Browser will display
page
any text within the tags at the very top of the
browser window
<body> and </body> - Used to define the
contents of the web page
“HTml” tags are not case sensitive
XHTML standard require that all tag names
be in lower case
Paragraphs and Line Breaks
Browsers pays no attention to line
endings or the number of spaces
between words
When the text reaches the edge of the
browser window, it automatically wraps
down to the next line, no matter where
the line breaks were in the original
HTML file
Paragraphs and Line Breaks
(cont..)
XHTML defines white spaces as a space
character, tab character, carriage return
or as a line feed character
<p> and </p> - Used to skip a line
between paragraphs
<br> - Forces a line break within a
paragraph ( does not need a closing
tag) – in XHTML standard <br />
Comments
You can use any text editor or word processor to
create HTML Web pages. Though you may
eventually want to use an editor especially
designed for HTML, for now I recommend you
use the editor or word processor you're most
familiar with. That way you won't have to learn
a new software program at the same time
you're starting to learn HTML.
Even a simple text editor like Windows
Notepad will work just fine
Linking to other web pages
The main tag to define links is called the anchor
tag - <a>
Define the address of the page to link to in
quotes after “href=“
<a href=http://www.google.com>Click Me!</a>
href – ‘hypertext reference’ and is called an
attribute of the <a> tag.
<html>
<head><title>You Aren't There</title></head>
<body>
<h1>Wonders of the World</h1>
Vacations aren't cheap. But who needs them anymore, with so
many live cameras connected to the World Wide Web? Pack a
picnic, and you can visit spacious pastures (complete with
scenic cows) in
<a href="http://www.accsyst.com/cow.html">Alloway, New
Jersey</a> or, for the more scientifically minded, at
<a
href="http://www.almaden.ibm.com/almaden/cattle/home_cow.htm"
>IBM
Almaden Research Center</a>. Or if it's scenery you're
after, adventure to <a href="http://www.inwap.com/backyard/">a
half-paved backyard in Fremont, California.</a></p>
</body>
</html>
Example web page with links
web page with links cont ..
To create a link from one page to another page
on the same computer does not need any
internet address
e.g < a href=“coursenotes.htm”>Click here to
view the course notes. </a>
web page with links cont ..
Relative Addresses
A relative address describes the path from one
Web page to another, instead of a full (or
absolute) internet address
e.g <a href=“lions/african.html”>Learn About
African Lions </a>
Note: The forward slash (/) is always used to
separate directory folders in HTML
Summary
When you create a link from one page to another page on
the same computer, it isn't necessary to specify a complete
Internet address. If the two pages are in the same
directory folder, you can simply use the name of the HTML
file. Using just filenames instead of a complete Internet
addresses saves you a lot of typing. And more importantly,
the links between your pages will work properly no matter
where the pages are located. You can test the links while
the files are still right on your computer's hard drive. Then
you can move them to a computer on the Internet, or to a
CD-ROM or DVD disk, and all the links will still work
correctly
Questions ??
Define the terms Internet, Web page and WWW.
The Internet is the “network of networks” that connects
millions of computers around the world
Can you create Web pages with Microsoft Word or
Wordperfect ?
Yes
How many files would you need to store on your computer
to make a Web page with some text and two images ?
Three files. One for the text, and one for each graphics
image
Questions??
What is HTML ?
HyperText Markup Language is a tag based
language that describes how documents are
viewed and formatted through hypertext
transfer protocol (http).
What you need to create and launch your
web page ?
A computer
A text editor
A browser
An Internet Connection
Questions??
Who defines the HTML standards ?
W3C
What is the current version of HTML ?
4.01
What are the basic tags you need to create a
simple Web page?
html
head
title
body
Questions ?
Define XML ?
eXtensible Markup Language
Why XML more advanced ?
Allows user defined tag names
XHTML requires opening and closing tags
True / False
XHTML will make harder for people to add
new elements
True / False
Questions ?
What does a HTML file contains ?
HTML commands
Scripts
Java Applets
ActiveX
What is the <a> tag used for ?
To link to another destination
What tag is defined within the <head> and </head>
tag
<title>
Questions ?
When you type a Web address on the
browser window you act as a server
True / False
What does the server do ?
Translates the address into a machine
readable form of addresses
What is the name for the HTML coded
commands ?
tags
Questions ?
What is an ‘attribute’ ?
Defines the display of text that is enclosed
by the tags
Define URL ?
Uniform Resource Locator
Check the syntax of the code below:
<body bgcolor=blue text=“red” </body>
How to save a HTML file ?
Use .html extension
Questions ?
How to view the source code of a Web page ?
Click the right mouse
Select view source
Simple HTML pages are dynamic – True/False
HTML is case sensitive –
True/False
How to skip a line between paragraphs ?
<p> and </p>
How to force a line break
<br>
Questions ?
What is a relative address ?
It describes the path from one Web
page to another, instead of a full
Internet address
Setting up an Internet Web Site
To make the web page publicly accessible you need to
put it on a web server
It is common practice to use web servers from internet
service providers (ISP) to host your pages
You can use one company to host your web site and
another separate company to access the Internet
Transferring pages to a web
server
Web server computer sends web pages to people
using the Hypertext Transfer Protocol (HTTP)
information exchange standard
To upload a page to your web site an older
communication standard called the File Transfer Protocol
(FTP) is used
Transferring pages to a web server
cont… (using FTP program)
ftp to the City University web server (e.g city.ac.uk)
Give your ‘username’ and ‘password’’
Select the ‘public_html’ directory on the right side
highlight the files on the left side of the screen and
transfer them using the ‘----->’ to the right side
Exit from the ftp window
rlogin to ‘paddington’ or ‘euston’ and give your
‘username’ and ‘password’
Type ‘websetup’ on the UNIX command prompt
Publishing web pages on the server
From the Public Access Windows PCs, choose Start ,
Programs, Internet Utilities, then Telnet to City
From a normal Windows build (with an internet connection),
choose Start, then Run and type telnet unix.city.ac.uk
1.Login in to the Unix server using your Computing Services login
name and password.
2.If you get a menu of options, type H for Publish HTML
documents, then say Y (yes) to all the questions
or
If you get a prompt, type websetup, then say Y (yes) to all the
questions
HTML Common Tags
<html>
<body>
<a> - <a href=“”> <a name=“”>
<p>
<ul>
<li>
<table>
<frameset>
<frame>
<I>
<b>
Images
<html>
<head>
<title>Image Example</title>
</head>
<body>
<img src=“imageFile.gif”>
</body>
</html>
Images are added with the img tag. Common
image file types are *.gif and *.jpg
Text Alignment, Lists, and
Special Characters
To align a paragraph to the right
margin, you use the align= “right”
inside the <p> tag
If an attribute is left out then the
system uses the default attribute
The word ‘align’ is called the ‘attribute’
Attributes control the functionality of
the tag
Text Alignment, Lists, and
Special Characters
The attributes can be in lowercase or upper
case. But for compatibility with XHTML uses
use lowercase. The new standard will also
require quotation marks around attribute
values
To set the alignment of more than one
paragraph or heading at a time use the align
attribute with the <div> or division tag
Special characters
Special characters can be inserted using the look
up table . These can be found online at
http://www.w3.org/tr/rechtml40/sgml/entities.html
For example the word café would look like this:
café or café
Most of the characters found in the world’s
languages have been assigned numeric values in a
coding system known as Unicode
e.g. first six lowercase characters of the Greek
alphabet are assigned the numbers 945-950
Entities
An entity is a sequence of characters that tells a
browser to substitute a character for the sequence
They always contain an ampersand as a prefix and a
semicolon as the suffix
The XHTML defining documents include the definitions
of many entities. These defintions are found in
documents that are known as Document Type Definition
or DTD documents
For more details
http://www.w3.org/TR/xhtml1/DTD/xhtml-symbol.ent
Types of HTML Lists
The bulleted list is called an unordered list - <ul>
Bullets appear at each <li> instead of numbers
The numbered list at the top is called an ordered list
<ol>
-
Numbers and line breaks appear automatically at each
<li>, and the entire list is intended
The list of terms and their meaning is called a definition
list - <dl>
The <dt> tag goes in front of each term to be defined, with
a <dd> tag in front of each definition
Types of HTML Lists
Advanced Text Formatting and
Links
For boldface text, use the <b> at the
beginning and the </b> at the end sis the text
For italic use the <I> tag and the </I> tag
To make something bold and italic use the
<b><i> and </i></b> tags
Can use italics in headings but boldface
won’t show in headings as they are already
bold
Example of <div> tag
Typeface
The latest version of Netscape and IE font control
The <font face> attribute enables you to specify the
actual typeface that should be used to display text
e.g: <font face = “lucida sans unicode, arial,
helvetical”>
It starts with a bang. Then everything
industrialists revolt this time. Japan gets nuked and
takes over the world economy, the Berlin wall and
Soviets fall, and the United States all sue Microsoft
over the Internet. The end.
Linking your email address
into a web page
Using the <a> tag you can link to your email address
Using this method the readers of your web page can
talk back to you
E.g:
<a href=mailto:[email protected]> Send any
comments</a>
When someone clicks ‘send any comments’ a mail
window will appear in which the message can be typed
and sent
Linking your email address
into a web page examples
Emmanuel Kant, President
[email protected]
Martin Heidegger, Secretary
[email protected]
Georg Wilhelm Friedrick Hegel, Senior Officer
[email protected]
The email address from the link is entered
automatically, and the user can simply click the mail
button to send the message
Font size and colour
The font ‘size’ and ‘colour’ attributes give control
over the appearance of the text
e.g: <font size=5 colour=“red”>This text will be
big and red.</font>
The ‘size’ attribute can take any value from 1 to 7 (
3 being the default)
The colour attribute can take any of the following
colours: Black, white, red, green, blue, yellow, aqua,
fuchsia, gray, lime, maroon. Purple, navy, olive,
silver, or teal
HTML tags that add special
formatting to text
<small> - Small text
<big> - Big small text
<sup> - Superscript small
<sub> Subscript small
<strike> - Strikethrough Small
<u> - Undeline small
<strong> - Strong text
<pre> - Monospaced smallfont; preserves spaces and
line breaks
Using named anchors
<html><head><title>AlphabeticalShakespeare</title></head>
<body>
<a name="top"></a>
<h2>First Lines of Every Shakespearean Sonnet</h2>
<p><a href="#top">Return to Index.</a></p>
<hr />
</body></html>
Note: The # symbol means that the word top refers to a
named anchor point within the current document, rather than to
a separate page
Sample code for Forms
<html><head><title>FREE!</title></head>
<body>
<h1>Free Electronic Junk Mail!</h1>
enter your e-mail address below and click on the <i>SignUP!</i> button.
<form method="post" action="/cgibin/cgiemail/mail2.txt">
<input name="success" type="hidden"
value="http://24hourHTMLcafe.com/hour8/thanks.htm" />
<input type="text" name="anotherone" size="25" />
<input type="image" src="signup.gif" border="0" align="top" />
</form>
</body></html>
HTML Help
View the lecture slides@
http://www.staff.city.ac.uk/~raj
For complete spec, http://www.w3c.org
Assignment 1
Create a simple web page with a standard text editor
(Notepad/WordPad)
Remember to save in .htm or .html format
Post page on the university server.
If you are stuck check my links @:
http://www.staff.city.ac.uk/~raj/webtec.html
**
Check the WebTec coursework at :
http://www.staff.city.ac.uk/~raj/ee301CW.htm
**10% of the Course Work mark is for
attendance