Download Lect6 - Personal.kent.edu

Web Page Creation
Part II
ST: Introduction to Web Interface Design
Prof. Angela Guercio
Using HTML editors

There are several user-friendly HTML editors.


WYSIWYG editor (What You See Is What You Get)

WYSIWYG editors are usually easier to use and don't
require a knowledge of HTML

use WYSIWYG editors when pressed.
TEXT editor.

Text editors are usually faster to edit HTML changes,

they don't add in unexpected tags

they can easily support new formats like XML.
Attention: Web pages that work well with one
browser, do not necessarily work well
another browser!
Review: URL

A URL (Uniform Resource Locator) is
the global address of documents and
other resources that are on the Web.

It is formed by a IP address or the
domain name and the protocol (ex. http)
that should be used to access the page
Ex:


http://www.cnn.com
ftp://cs.kent.edu/~aguercio/index.html
Hyperlinks


Absolute URL

connects a local web server with a remote
web server

http://www.cs.kent.edu
Relative URL


Connects one page to another page in the
same Web server
Named Anchor

Connects 2 locations on the same Web Page
Absolute URL

The URL is the destination link

A link is created by using the tags
<A> … </A>


The destination link is added with the
attribute HREF inside <A>
Example:
<A HREF=“http://www.cs.kent.edu”>
Department of Computer Science </A>
Relative URL

You need only the file’s name and its
location relative to the current
directory where your page is stored.

Absolute URL


HREF=http://www.personal.kent.edu/Do
cuments/booklist.html
Relative URL (if my current folder is
Documents)

HREF=“booklist.html”
Advantages of Relative URL

Choose either absolute or relative URL but….

Relative URL is best because it makes your page
portable.

Page Portability: the ability to relocate a page on a
new server

Moving a page to a new server:

If your links were absolute URLs, any link that uses the
old server full address needs to be reedited with the new
domain server address

If your links were relative URLs, they will work on the
new server, unless you change the directory structure.
Named Anchors

Anchors are very useful to reach parts of the same web
page. in long pages that do not fit the screen.


Ex. Titles of sections can be anchors that can be reached from an index
of content at the top of the web page.
Anchor Syntax: A tag <A> with the attribute NAME=“name”

To reach the anchor, a tag <A> with the link’s name is used
Example: The index of content and the anchors
<UL>
<LI> <A HREF=“#First”> First Thing</A>
<LI> <A HREF=“#Second”> Second Thing</A>
</UL>
…
<H3> <A NAME=“First”> First Section</A></H3>
…
<H3> <A NAME=“Second”> Second Section</A></H3>
Important Rules
1.
Always check each link that
you add to a Web page to be
sure that it works!
2.
Maintain you page!

Pages that are out there today
might not be there tomorrow!
Tables



Tables contain rows and columns
<TR> table row
<TD> table data
Syntax:
<TABLE>
<TR>
<TD>
insert here the content of a table cell
</TD>
</TR>
</TABLE>

REMEMBER: Lynx, which is a fast text-only Web
browser, does not support tables or image or
graphics
Rows and Columns


Each <TR> … </TR> creates a row
Each <TD> … </TD> creates a cell (i.e. a column)

Many columns can be obtained by creating many cells in the
same row
<TABLE>
<TR>
<TD>
insert here the content of a table cell
</TD>
</TR>
<TR>
<TD>
insert here the content of a table cell
</TD>
</TR>
</TABLE>

The code creates a table with 2 rows and 1 column
Tables with images

Tables are great to organize images.
<TABLE>
<TR>
<TD>
<IMG SRC= "my_book.jpg" ALT= “a book”>
</TD>
</TR>
</TABLE>

The attribute ALT in IMG replaces the image
with the text in " " if the browser cannot
display the image
Add a border and resize images

Add the attribute BORDER=5 to the TABLE tag.


A frame is added to the cell
Add now WIDTH and HEIGHT

use percent. The table will dynamically adjust itself
according to the percent value whenever the browser
window is resized
Example:
<TABLE BORDER=5 WIDTH=100% HEIGHT=100%
BGCOLOR=yellow>


Be sure to have a nice background and look at the
effect!
Resizing an image does not change the memory
size or the bandwidth

Only compression reduces that amount!
More attributes for Tables

CELLPADDING: adds space between the item in the
cell and the cell frame

CELLSPACING: adds space between cells

BORDERCOLOR: change the color of the border
Try this table:
<table border="1" width="100%" cellpadding="20"
cellspacing="2" bordercolor=red>
<tr>
<td>
<img SRC= "my_book.jpg" ALT= "my book">
</td>
</tr>
</table>
What tables offer….
Feel free to add your creativity! Use
tables to:

Make the layout of a page more appealing

Add margins around your text

Create a small gallery of images that have
clickable regions

Create 2 columns display

Override busy background pattern with
regions of solid colors

Add 3-D frames around a picture

Center an image no matter how the browser
is resized.

Display table of numbers
Practice with Tables
1.
2.
3.
4.
5.
Make a table with two columns
Set the width to 40%
Add a thick border in green
Add additional space by
modifying the CELLPADDING
and CELLSPACING attributes
Observe the results
The div tag

The <div> tag defines a division or a
section in an HTML document.

The <div> tag is often used to group
block-elements to format them with
styles.

The div element is very often used with
CSS to layout a web page.
<div style="color:#F0F0F0">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
Use of class in <ul>
<html>
<head>
<title>My first styled page</title>
<link rel="stylesheet" href="tt.css">
</head><body>
<!-- Site navigation menu -->
<ul class="navbar">
<li><a href="www.google.con">Google</a>
</li><li><a href="www.yahoo.com">Yahoo</a>
</li><li><a href="www.ask.com">Ask</a>
</li><li><a href="http://www.dogpile.com/">Dogpile</a>
</li></ul>
<ul class="navbar1">
<li>Google
</li><li>Yahoo
</li><li>Ask
</li><li>Dogpile
</li></ul>
<!-- Main content -->
<h1>&nbsp;</h1>
</body></html>
Add style….
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman", serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, sans-serif }
</style>
</head>
<body>
A CSS file
@charset "utf-8";
/* CSS Document */
body {
padding-left: 11em;
font-family: Georgia,Times, serif;
color: purple;
background-color: #affeaf }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: realtive;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }

ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
ul.navbar1 li {
background: green;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
You can use
a different
style for
each class!
Where to learn more?
http://www.w3schools.com/