Web Site Design Development

1
Web Site Design Development

• Lists and Links In HTML

2
What We Covered Last Time

• What we talked about
• 1. A little background on Internet, Web Browsers
• 2. Creating your first HTML Web Page
• - What is HTML
• - Basic HTML document
• - How to publish your basic document (FTP)
• 3. Understanding basics of HTML document
• 4. New paragraphs, Horizontal rule, and header.
• 5. Validator lite

3
Instructor Info

• David Lash
• Email dlash_at_condor.depaul.edu
• Phone [phone]
• Call if any questions. . .

4
The Course Requirements

• Homework - 30 - Lab exercises based on lecture
  material.
• E.g., create a web page that has an HTML table.
• Midterm Test - 20 - Multiple guess 25-30
  questions about the 6th week.
• Major project - 50 - Select a project topic
  early. Send email to dlash_at_condor.depaul.edu with
  topic (or approve during class).
• Page must have 5 sub-pages an be of reasonable
  size.
• Dont select anything too hard requiring
  databases, or advanced graphics
• Try to select something useful (e.g., a club
  site, church site or hobby)
• More details next week.

5
How to do well in this class

• Download and review class PowerPoint lectures.
  (They will be on class web site
  (http//condor.depaul.edu/dlash)
• Do homework on time (dont let it pile up)
• Ask questions when not understand.
• Use lab time when needed
• Immediately after lecture, will go to the lab,
  ask questions there is needed.

6
Using the course home page

• Course homepage http//condor.depaul.edu

Any announcements will be posted here. E.g., A
homework assignment problem/clarification.
On-line syllabus
Links to book websites
Links to get books on-line
Talk more about these next week
7
More on course web page
As material becomes ready will change status here
Click link to download power point slides
Home work assignments are at end of PowerPoint
slides.
8
One more item . . .

• In order to get space on the DePaul Web Server.
• Contact the DePaul Ohare Lab Assistant (outside
  of lab)
• Ask to activate your email account.
• Do this even if you have an email account (all
  students have depaul email accounts)
• (Note Its routine practice for them to suspend
  inactive accounts).

You will need to do this to publish your pages on
DePaul's web server. You wont need this for a
couple weeks BUT DONT DELAY. It can take up to a
week to set up!!!!
9
Details on Final Project . . .

• Can find details at http//condor.depaul.edu/dla
  sh/website/FinalWebDesignProj.htm

Talk to or email about what you are going to do.
10
What Was Covered Last Week

• What we will talk about
• 1. A little background on Internet, Web Browsers
• 2. Creating your first HTML Web Page
• - What is HTML
• - Basic HTML document
• - How to publish your basic document.
• 3. New paragraphs, Horizontal rule, and header.
• 4. Validating HTML code

11
Review - HTML Overview - Example
The header section of document

• lthtmlgt
• ltheadgt
• lttitlegt Mypage lt/titlegt
• lt/headgt
• ltbodygt
• Welcome to Website Design.
• Stuff
• you
• write
• here becomes your HTML document.
• lt/bodygt
• lt/htmlgt

This title appears in the upper left hand corner
of browser. Not in the body of the document
Indicates start and end of HTML document
Inside the ltbodygt lt/bodygt tags is the main
portion of your document.
Note how new lines in file are ignored in web
page display (because HTML did not indicate line
break)
12
Review - Steps To Create HTML Document Display

• 1. From your PC goto Start-gtrun enter notepad
• 2. Enter your tags and document
• 3. From notepad window, goto file-gtsaveas
• 4. Enter a filename with HTML suffix
• (SECOND WARNING!! No spaces or caps please!).
• 5. Start Netscape (or IE, or Firefox).
• 6. From Netscape, goto file-gtopen page -gt choose
  file. (Find the file you just saved and display
  it!)

Common Problem Area! People seem to forget
this
Competency Alert You need to know this!
13
Objectives

• A short section on aligning text
• right, center and left with ltdivgt
• Creating ordered, bullet and definition lists
• Creating Lists within lists
• Creating hyperlinks
• Creating regular links
• Using relative addresses
• Linking email addresses

14
Competency Objectives

• Can center text using the ltdivgt tag
• Lists - Can create a ltulgt and ltolgt list with
  attributes
• Links
• Can create a link to another page outside of
  current web page
• Can create a relative link to another page
  within current web page

Competency Alert You need to know this!
Common Problem Area! People seem to forget
this
15
Using ltDIVgt To Align Text
Competency Alert You need to know this!

• We have seen can use ltp alignrightgt to align
  text.
• Can also use ltDIVgt ... lt/DIVgt
• Stands for divide or division.
• Can create logical divisions of the text you are
  formatting and treat them as 1 group.
• It really does nothing unless you use arguments.
  
• Often use align attribute to with ltDIVgt to adjust
  text to left, right or center.

• Note a subtle different between using ltpgt VS
  ltdivgt to align text.
• ltp alignrightgt will give an extra line break.
• ltdiv alignrightgt will not

• Note2 We will see ltdivgt again.
• Will see div again in various places, e.g., CSS

16
Using ltDIVgt To Align Text

• For example,
• My Home Page
• ltdiv aligncentergt This is a test of center
  adjusted text. lt/divgt ltdiv alignrightgt Of
  Coarse, this is a Right sample lt/divgt ltbrgt By
  the way I can use a ltigtalignleftlt/igt but I don't
  need it because the default is to put the text to
  the extreme left anyway. ltP alignrightgt Still
  there is a difference
  between using ltigt paragraph lt/igt and
  ltigt div lt/igt tags. lt/pgt

This text will be centered
This text will be aligned right
Text will be aligned left by default
17
Objectives

• A short section on aligning text
• right, center and left with ltdivgt
• Creating ordered, bullet and definition lists
• Creating Lists within lists
• Creating hyperlinks
• Creating regular links
• Using relative addresses
• Linking email addresses

18
List Management 101

• HTML supports 3 different types
• Ordered lists - numbered,
• 1. Baseball
• 2. Hotdgs
• 3. Apple Pie
• Unordered lists - bullet lists,
• Baseball
• Hotdogs
• Apple Pie
• Definition Lists - indented lists without
  numbers or symbols
• Baseball
• A only played well in NY
• Hotdogs
• A substance resembling meat
• Apple Pie
• What Sara Lee now makes instead of Mom

19
Ordered Lists
Competency Alert You need to know this!

• This is an ordered list 1. This is the first
  element 2. This is the second line 3. This is
  the third line
• To format above use the ltOLgt, ltLIgt tagsltOLgt ...
  lt/OLgt --- Marks the start and end of the
  ordered list section ltLIgt ... lt/LIgt - Indicates
  start and end of each ordered list item.

Note How do you remember these? OL stands for
ordered list LI stands for List Item
20
Ordered Lists

• For example
• ltolgt ltligt This is the first element lt/ligt
  ltligt This is the second line lt/ligtltligt This is
  the third line lt/ligtlt/olgt
• Would look like
• 1. This is the first element
• 2. This is the second line
• 3. This is the third line

List item has start ltLIgt lt/LIgt
List is contained in ltOLgt lt/OLgt
21
An Ordered List Example . . .

• lthtmlgt
• ltheadgt lttitlegt An Ordered List Example lt/titlegt
• lt/headgt ltbodygt
• Some different endings for Lord of the Rings
• ltOLgt
• ltligt
• Gollum gets the ring and defeats Saron himself!
• lt/ligt ltligt
• Frodo jumps in the lava with the ring
• lt/ligt ltligt
• Sauron gets the ring and there is no more middle
  earth
• lt/lIgt
• lt/olgt lt/bodygt lt/htmlgt

22
Attributes For Ordered Lists
Competency Alert You need to know this!

• Using Type E.g.,
• ltOL TYPE1gt ......... For 1,2,3 Ordering
  ltOL TYPEAgt ..... For A,B,C Ordering ltOL
  TYPEagt ......... For a,b,c ordering ltOL
  TYPEIgt ........... For Roman Numeral (E.g,
  I, II, III, IV) ltOL TYPEigt ...........
  For small Roman Numerals (E.g., i, ii, iii,
  iv)

23
Unordered Lists

• Unordered Lists - These would be bullet lists,
  For example
• This is the first element
• This is the second line
• This is the third line
• To format above use the following tags
• ltULgt ... lt/ULgt Starts ends the ordered list
  section
• ltLIgt lt/LIgt - Starts ends each individual
  item.

24
Unordered Lists
Competency Alert You need to know this!
List item has start ltLIgt lt/LIgt

• For example,
• ltULgt ltLIgt This is the first element lt/LIgt
  ltLIgtThis is the second line lt/LIgtltLIgt This is
  the third line lt/LIgt lt/ULgt
• Would create the following
• This is the first element
• This is the second line
• This is the third line

List is contained in ltULgt lt/ULgt
25
Unordered Lists Use An Attribute TYPE

• E.g., ltUL TYPEDISCgt ......... Creates a small
  disc list ltUL TYPECIRCLEgt ........ Solid
  circles ltUL TYPESQUAREgt ......... Solid
  Squares

26
An Unordered List Example . . .

• lthtmlgt
• ltheadgt lttitlegt John Adams lt/titlegt
• lt/headgt ltbodygt
• Some information about John Adams
• ltul typesquaregt
• ltligt
• He was a moral man and was against slavery.
• lt/ligt ltligt
• He was friends with Tom Jefferson and then bitter
  political enemies and then friends again.
• lt/ligt ltligt
• He and Tomas Jeffereson died on the same day!
• lt/lIgt
• ltullgt lt/bodygt lt/htmlgt

27
Definition Lists

• Indented lists without any numbers or symbol in
  front of each item
• Baseball
• A only played well in NY
• Hotdogs
• A substance resembling meat
• Apple Pie
• What Sara Lee now makes instead of Mom
• ltDLgt ... lt/DLgt A definition list
• ltDTgt lt/DTgt A definition term as part of a
  definition list - Level 1 term
• ltDDgt ltDDgt - A Definition to definition term -
  level 2 term

28
An Unordered Example

• lthtmlgt
• ltheadgt lttitlegt An Ordered List Example lt/titlegt
• lt/headgt ltbodygt
• A few definitions
• ltdlgt
• ltdtgt
• Baseballlt/dtgt
• ltddgt A only played well in NY lt/ddgt
• ltdtgt
• Hotdogs lt/dtgt
• ltddgt A substance resembling meat lt/ddgt
• ltdtgtApple Pie lt/dtgt
• ltddgt What Sara Lee now makes instead of Mom lt/ddgt
• lt/dlgt
• lt/bodygt
• lt/htmlgt

29
Lists Within Lists
Competency Alert You need to know this!

• Lists Within Lists
• You can put lists within lists if you wish
  creating an outline feel for your text.
• 1. Baseball
• White Sox
• Cubs
• 2. Football
• Bears
• Corresponding HTML Code
• ltolgtltligtBaseballgtlt/ligt
• ltULgtltLIgtWhiteSoxlt/LIgt
• ltLIgtCubslt/LIgt
• lt/ULgt
• ltLIgt Footballlt/LIgt
• ltULgtltLIgtBearslt/LIgt
• lt/ULgt
• lt/olgt

1 Major Number list
Bullet list w/I numb list
Separate Bullet list
Note It greatly helps to indent to keep things
straight.
30
Lists Within Lists
Things can get confusing quickly

• lthtmlgt
• ltheadgt
• lttitlegt A Roman Numeral Example lt/titlegt lt/headgt
• ltbodygt
• Attention, attention, attention
• ltul typesquaregt
• ltligt Chicago Professional Sports Teamslt/ligt
• ltolgt
• ltligt Baseball lt/ligt
• ltol typeagt
• ltligt Cubs lt/ilgt
• ltligt White Sox lt/ilgt
• lt/olgt
• ltligt Footballlt/ilgt
• ltol typeagt
• ltligt Bears? (well sort-of
  professional)lt/ilgt
• lt/olgt
• ltligt basketballlt/ilgt

Again It helps to indent when using lists within
lists
Common Problem Area! People seem to forget
this
31
Objectives

• A short section on aligning text
• right, center and left with ltdivgt
• Creating ordered, bullet and definition lists
• Creating Lists within lists
• Creating hyperlinks
• Creating regular links
• Using relative addresses
• Linking email addresses

32
HTML Hyperlinks

• Hyperlinks are the means which HTML lets you
  branch from 1 file to another.
• You can link to any file, that includes but not
  limited to
• wav files,
• picture files (gif, jpg, etc),
• powerpoint files,
• xcl (excel files)
• html files.
• Or even a link to preaddressed letter (mailto
  dlash_at_indelible-learning.com)

33
Anatomy of a Hyperlink
Competency Alert You need to know this!

• HTML hyperlinks have the following format
• ltA HREFWeb Addressgt Click Here lt/Agt

The clickable text
HREF attribute specifies Internet address of
file to link to
Anchor tag can be used for links
lta href"http//www.depaul.edu/dlash/index.html"gt
Home Page lt/Agt
Clickable text displayed on page
Page to load when link is clicked
34
A Link Example . . .

• ltHTMLgtltHEADgtltTITLEgtDePaul Link lt/TITLEgtlt/HEADgt
• ltBODYgt
• You can visit this course at the lta
  href"http//indelible-learning.com"gt Indelible
  Website lt/agt
• YOu can also see lots of Disney Stuff at the lta
  href"http//disney.com"gt Disney lt/agt website.
• lt/BODYgt
• lt/HTMLgt

35
Note A common link problem

• Sometimes, people forget the http// in an
  absolute address. . .
• lta href"www.depaul.edu/dlash/index.html"gt Home
  Page lt/Agt
• DONT DO THIS. It will look for a file called
• www.depaul.edu/dlash/index.html in the current
  directory structure (which of coarse will not be
  there)

Common Problem Area! People seem to forget
this
36
Linking to non-HTML Files

• Linking to non-html files if no different than
  linking to HTML files
• ltHTMLgtltHEADgtltTITLEgtDePaul Link lt/TITLEgtlt/HEADgt
• ltBODYgt The picture can be found at
• ltA HREFlink.pnggt
• this link lt/Agt
• lt/BODYgt
• lt/HTMLgt

37
Specify links that are portable

• Specifying complete URL works well but what
  happens when
• You need to change domain names or userids?
• For example, move site from www.depaul.edu to
  www.aol.com?
• For example, suppose had a site with 3 files
  myhome.html, moreinfo.html, and faq.html)
• myhome.html has link to moreinfo.html and
  faq.html
• moreinfo.html and faq.html each link back to
  myhome.html

public_html
myhome.html moreinfo.html faq.html
38
Specify links that are portable

• If change domain name would have to change 2
  lines in myhome.html and 1 each in moreinfo.html
  and faq.html.

All 4 links in 3 different files must change if I
move my site.
moreinfo.html
This document contains more information. Here is
lots of stuff Go back home lta
hrefhttp//www.depaul.edu/dlash/myhome..htmlgt
click for home lt/agt.
myhome.html
lta hrefhttp//www.depaul.edu/dlash/moreinfo.html
gt more info lt/agt lta hrefhttp//www.depaul.edu/
dlash/faq.htmlgt Frequently Asked Questions lt/agt
faq.html
Frequently asked questions. . . Go back home
lta hrefhttp//www.depaul.edu/dlash/myhome..html
gt click for home lt/agt.
39
Soln Use relative Internet addresses

• Absolute addresses Specify the complete
  address of the file to link to
• E.g., ltA hrefhttp//www.depaul.edu/dlash/file.h
  tmlgt
• The file is herelt/Agt
• Relative Address Specify just file name
  (relative to current site.)
• E.g., lta hreffile.htmlgt The file is herelt/Agt
• So can now move directories w/o link changes

Note leave off http// and domain name
Competency Alert You need to know this!
40
So Use Relative Addresses

• So these pages can change directories or domains
  w/o changes

moreinfo.html
This document contains more information. Here is
lots of stuff Go back home lta
hrefmyhome..htmlgt click for home lt/agt.
myhome.html
lta hrefmoreinfo.htmlgt more info lt/agt lta
hreffaq.htmlgt Frequently Asked Questions lt/agt
faq.html
Frequently asked questions. . . Go back home
lta hrefmyhome..htmlgt click for home lt/agt.
41
Using Relative Links

• So relative links work well when file to connect
  to are in the same directories
• But how to link from myfile.html to hw.html?
• public_html
• index.html \
• myfile.html \
• \
• homework
• hw.html

index.html and myfile.html are in public_html
hw.html is in homework
Note Link from index.html to myfile.html lta
hrefmyfile.htmlgt my personal filelt/agt
42
Using Relative Links between directories . . .
Competency Alert You need to know this!

• How link from myfile.html to hw.html?
• public_html
• index.html \
• myfile.html \
• \
• homework
• hw.html
• Precede the file to link to by a forward slash
  (/) and directory name
• lta hrefhomework/hw.htmlgt my homework lt/agt

index.html and myfile.html are in public_html
hw.html is in homework
Link to this file that is in this directory
Note the forward slash is used on both UNIX a
MircoSoft web servers
43
Linking up to the parent directory

• To link to file in a parent directory (a
  directory above your current)
• Use .. to access the parent directory. E.g.,
• public_html
• index.html \
• \
• homework
• hw.html
• Link from hw.html to back index.html
• lta href../index.htmlgt my home page lt/agt

index.html is in public_html
hw.html is in homework
Get this file in parent directory
Go u p 1 level to parent
44
Relative Link Examples . . .
Competency Alert You need to know this!

• Assume the following file structure
• public_html
• index.html
• / \
• labs homework
• lab1.html hw1.html
• hw2.html
• What is the URL of hw2.html if web server
  students.depaul.edu
• How would you link from hw2.html to lab1.html?
• How would you link from hw2.html to index.html?

Lab1.html is in labs
hw1.html and hw2.html is in homework
http//students.depaul.edu/jsmith/homework/hw2.ht
ml
lta href../labs/lab1.htmlgt Lab1 lt/agt
lta href../index.htmlgt Lab1 lt/agt
45
Objectives

• A short section on aligning text
• right, center and left with ltdivgt
• Creating ordered, bullet and definition lists
• Creating Lists within lists
• Creating hyperlinks
• Creating regular links
• Using relative addresses
• Linking email addresses

46
Linking to a pre-addressed email

• A Link that when clicked, opens a page
  automatically to a pre-addressed mail form
• General Format
• ltA hrefmailtoemailaddress"gt
• Click here lt/Agt
• For example
• lta href"mailto dlash_at_indelible-learning.com"gt
• email me! lt/Agt

Email address
Text to display
Note This construct is not often used in on Web
sites. Why? It opens to a window using the users
defined default email client. If the users
definition is wrong, no email gets sent!
47
Summary

• A short section on aligning text
• right, center and left with ltdivgt
• Creating ordered, bullet and definition lists
• Creating Lists within lists
• Creating hyperlinks
• Creating regular links
• Using relative addresses
• Linking email addresses

48
A Hyperlink Review . . .

• What file does each of the following load?
• ltA hrefhttp//www.depaul.edu/dlash/pictures/sim
  ple.htmlgt Click Here lt/Agt
• ltA hrefhttp//www.depaul.edu/dlash/pictures/gt
  pick one of these out lt/Agt
• ltA hrefhttp//www.depaul.edu/dlashgt home.
  lt/Agt
• lta href../myfile.xlsgt Here are the results lt/agt
• lta hrefsamandfrodo.jpggt The boys lt/agt

49
Lab 2 - Hands-on Exercise
50
One Possible Solution

• lthtmlgt
• ltheadgt lttitlegt A few of my favorite things
  lt/titlegt
• lt/headgt ltbodygt
• Top three things Frodo should have done with the
  ring.
• ltol startIgt
• ltligt
• Not taken it from Bilbo lt/ligt
• ltligt
• Sold it on e-bay lt/ligt
• ltligt
• Bury it back in the lake
• ltulgt
• ltligt
• After all it was there for hundreds of years
• lt/ligt
• ltligt
• I don't think Sauron could swim since he was a
  fireball. lt/ligt lt/ulgt
• lt/ligt

51
Lab 2 b Create an HTML page that looks like
Put link to each homework And lab work for course.
When click link automatically open your completed
lab.
You will need to continue to add to this page to
link in each assignment as you finish it.