Lect6 - Personal.kent.edu
Download
Report
Transcript 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> </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/