Web Site Design Development

1
Web Site Design Development

• SNL 262
• Lists and Links In HTML
• Instructor David A. Lash

2
What We Covered Last Week

• 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
First A few items

• Although either upper case or lower case works,
  standard prefers lower case.
• (E.g., lthtmlgtltheadgtlttitlegtMy title lt/titlegt )
• You can find html validator and ws_ftp at
  download.com (search for html validator lite
  and ws_ftp)
• A few warnings worth repeating
• Dont save filenames with spaces (myfile.html NOT
  my file.html)
• Dont use capitals in filenames (myfile.html NOT
  MyFile.HTML).
• Always publish files to webserver inside
  public_html directory.

4
A Little More On FTP First review
Dont worry profile name
Enter your machine name. students.depaul.edu
Uncheck anonymous
Enter your email handle and password
Click OK when everything is filled in
5
A Little more on FTP
After connecting you can use these buttons
Use to make a directory on web server. For
example may need to make a public_html folder.
Use to rename a file. It is a way to get rid of
capital letters or spaces in filenames right on
webserver
Use to rename a file. It is a way to get rid of
capital letters or spaces in filenames right on
webserver
Remember to check this area for status on
transfers or other operations you do.
If hit mkdir, then can enter the name of new
folder on fileserver
6
What we will cover today

• More on aligning text right, center and left
• Creating ordered, bullet and definition lists
• Creating hyperlinks
• Creating regular links
• Using relative addresses
• Linking email addresses

7
Using ltDIVgt To Align Text

• 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

8
Using ltDIVgt To Align Text

• For example,
• ltdiv aligncentergt My Home Page
• lt/divgt
• 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
This text will be aligned left by default
http//condor.depaul.edu/dlash/extra/Webpage/exam
ples/divtag.html
http//24hourHTMLcafe.com/hour5/bohemia.htm
9
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

10
Ordered Lists

• 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.

How do you remember these? OL stands for
ordered list LI stands for List Item
11
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
12
Attributes For Ordered Lists

• 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)
  
• For Example, see this Roman Numeral Example, see
  also this http//condor.depaul.edu/dlash/extra/We
  bpage/examples/ABCExample.html

13
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.

14
Unordered Lists

• 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 item has start ltLIgt lt/LIgt
List is contained in ltULgt lt/ULgt
15
Unordered Lists Use An Attribute TYPE

• E.g., ltUL TYPEDISCgt ......... Creates a small
  disc list ltUL TYPECIRCLEgt ........ Solid
  circles ltUL TYPESQUAREgt ......... Solid Squares
  
• For Example, See this Unordered List Example.

16
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
• See (http//www.depaul.edu/dlash/website/stuff.ht
  ml) http//www.depaul.edu/dlash/website/DD_list
  s_wi_lists_B.html

17
Lists Within Lists

• 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.
18
Lists Within Lists

• This can get confusing quick
• 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
  prefessional)lt/ilgt
• lt/olgt

It helps to indent when using lists within lists
19
More Lists Within Lists

• Corresponding HTML Code
• 1http//www.depaul.edu/dlash/extra/Webpage/exampl
  es/05sampleError.html
• 2http//www.depaul.edu/dlash/extra/Webpage/exampl
  es/05sampleError2.html
• 3http//www.depaul.edu/dlash/extra/Webpage/exampl
  es/05sample.html

20
What we will cover

• More on aligning text right, center and left
• Creating ordered, bullet and definition lists
• Creating hyperlinks
• Creating regular links
• Using relative addresses
• Linking email addresses

21
What Are Links In HTML?

• 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.

22
What Are Links In HTML?

• Hyperlinks are used to link to
• Another web page, excel file, power point, gif
  image
• Or even a link to preaddressed letter (mailto
  dlash_at_condor.depaul.edu)

23
General Link Format

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

The clickable text
Internet address of file to link to
Anchor tag can be used for links
24
Link Examples

• 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
• Example from book

http//www.24hourhtmlcafe.com/hour3/cams.htm
25
Link Examples

• If you like to goto to my favorite page then
• ltA HREF"http//www.disney.com"gt
• Here is Disney Fun
• lt/Agt
• Otherwise you need to
• ltA HREF"http//www.depaul.edugt
• Click here
• lt/Agt

Page to load when link is clicked
What is display on Web Page (as link)
http//www.depaul.edu/dlash/extra/Webpage/example
s/03SAMPLE.html
26
Linking to non-HTML Files

• Linking to non-html files if no different than
  linking to HTML files
• ltHTMLgtltHEADgtltTITLEgtDePaul Link lt/TITLEgtlt/HEADgt
• ltBODYgt
• ltA HREF" http//www.depaul.edu/dlash/website/dep
  aul.gif "gt
• DePaul Logo
• lt/Agt
• lt/BODYgt
• lt/HTMLgt
• (http//www.depaul.edu/dlash/website/depaul.gif)
• http//www.depaul.edu/dlash/extra/Webpage/example
  s/03links.html

27
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
28
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.
29
So use relative 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 href file.htmlgt The file is herelt/Agt
• So for example .Can now move directories w/o
  link changes

Note leave off http// and domain name
30
So Use Relative Addresses

• So for example .Can use relative addresses AND
  move directories w/o link 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.
31
Using Relative Links

• So relative links work well when file to connect
  to are in the same directories
• For example, assume your create a directory
  called homework under public_html
• public_html
• index.html \
• myfile.html \
• \
• homework
• hw.html
• Link from index.html to myfile.html
• lta hrefmyfile.htmlgt my personal filelt/agt
• But how to link from myfile.html to hw.html?

index.html and myfile.html is in public_html
hw.html is in homework
32
Using Relative Links

• How link from myfile.html to hw.html?
• public_html
• index.html \
• myfile.html \
• \
• homework
• hw.html
• Just include the directory name in the URL. So
  inside my.file.html can link to hw.html by the
  following
• lta hrefhomework/hw.htmlgt my homework lt/agt

index.html and myfile.html is in public_html
hw.html is in homework
Get this file
Goto this directory
33
Ummm but how link back up?

• Suppose you want to access a in a directory above
  your current directory
• Use .. To access the parent directory.
• For example,
• 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 hw.html
Get this file in parent directory
Go up one level
34
Relative Specification of Sub-Folder

• OK 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
students.depaul.edu/jsmith/homework/hw2.html
lta href../labs/lab1.htmlgt Lab1 lt/agt
lta href../index.htmlgt Lab1 lt/agt
35
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_condor.depaul.edu"gt
• email me! lt/Agt

Email address
Text to display
36
Some Miscellaneous Points

• 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

37
What this section was about ...

• Creating HTML links
• Creating absolute links
• ltA hrefhttp//www.depaul.edu/dlash/myfile.htm
  lgt my home page lt/Agt
• Creating relative links
• ltA hrefmyfaq.htmlgt my FAQ Page lt/Agt
• Creating email links
• ltA hrefmailtodlash_at_condor.depaul.edu"gt Mail
  me please lt/Agt

38
Quick review of publishing

• Review using FTP
• Review creating public_html
• Review making home page
• By default on our webserver (students.depaul.edu)
  your home page is whatever is in the file
  index.html).
• So http//students.depaul.edu/jsmith IS THE SAME
  THING AS http//student.depaul.edu/jsmith/index.h
  tml
• So put homepage stuff into index.html.

39
Review of homework

• Look at homework file at
• http//condor.depaul.edu/dlash/website/Lab2.html
• It is asking you create a homepage and link in
  your homeworks.