david lash web site design development snl 262 lists and links in html instructor: david a. lash
Post on 21-Dec-2015
218 Views
Preview:
TRANSCRIPT
David Lash
Web Site Design Development
SNL 262
Lists and Links In HTML
Instructor: David A. Lash
2David Lash
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 document4. New paragraphs, Horizontal rule, and header. 5. Validator “lite”
3David Lash
First A few items …
Although either upper case or lower case works, standard prefers lower case.
(E.g., <html><head><title>My title </title> ) You can find html validator and ws_ftp at
download.com (search for “html validator lite” and “ws_ftp”)
A few “warnings” worth repeating … Don’t save filenames with spaces (myfile.html NOT
my file.html) Don’t use capitals in filenames (myfile.html NOT
MyFile.HTML). Always publish files to webserver inside public_html
directory.
4David Lash
A Little More On FTP … First review
Don’t 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
5David Lash
A Little more on FTP… After connectingyou 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
6David Lash
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
7David Lash
Using <DIV> To Align Text
We have seen can use <p align=right> to align text.
Can also use <DIV> ... </DIV> 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 <DIV> to adjust
text to left, right or center.
Note: a subtle different between using <p> VS <div> to align text. • <p align=right> will give an extra line break. •<div align=right> will not
8David Lash
Using <DIV> To Align Text For example,
<div align=“center”> My Home Page
</div>
<div align=center> This is a test of center adjusted text. </div> <div align=right> Of Coarse, this is a Right sample </div> <br> By the way I can use a <i>align=left</i> but I don't need it because the default is to put the text to the extreme left anyway. <P align=right> Still there is a difference between using <i> paragraph </i> and <i> div </i> tags. </p>
This text willbe aligned right
This text willbe centered
This text will be aligned left by default
http://condor.depaul.edu/~dlash/extra/Webpage/examples/divtag.html
http://24hourHTMLcafe.com/hour5/bohemia.htm
9David Lash
List Management 101 HTML supports 3 different types
Ordered lists - numbered, 1. Baseball2. Hotdgs3. Apple Pie
Unordered lists - bullet lists, – Baseball– Hotdogs– Apple Pie
Definition Lists - indented lists without numbers or symbolsBaseball
A only played well in NYHotdogs
A substance resembling meatApple Pie
What Sara Lee now makes instead of Mom
10David Lash
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 <OL>, <LI> tags<OL> ... </OL> --- Marks the start and end of the ordered list section <LI> ... </LI> - Indicates start and end of each ordered list item.
How do you remember these? OL – stands for ordered listLI – stands for List Item
11David Lash
Ordered ListsFor example: <ol>
<li> This is the first element </li> <li> This is the second line </li><li> This is the third line
</li></ol>
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 <LI> & </LI>
List is containedin <OL> & </OL>
12David Lash
Attributes For Ordered Lists
Using Type = E.g.,
<OL TYPE=1> ......... For 1,2,3 Ordering <OL TYPE=A> .....… For A,B,C Ordering <OL TYPE=a> ......... For a,b,c ordering <OL TYPE=I> ........... For Roman Numeral (E.g,
I, II, III, IV) <OL TYPE=i> ........... 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/Webpage/examples/ABCExample.html
13David Lash
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 <UL> ... </UL> Starts & ends the ordered list
section <LI> … </LI> - Starts & ends each individual item.
14David Lash
Unordered Lists
For example, <UL>
<LI> This is the first element </LI> <LI>This is the second line </LI><LI> This is the third line </LI> </UL>
Would create the following This is the first element This is the second line This is the third line
List is containedin <UL> & </UL>
List item has start <LI> & </LI>
15David Lash
Unordered Lists Use An Attribute TYPE=
E.g., <UL TYPE=DISC> ......... Creates a small disc list <UL TYPE=CIRCLE> ........ Solid circles <UL TYPE=SQUARE> ......... Solid Squares
For Example, See this Unordered List Example.
16David Lash
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 PieWhat Sara Lee now makes instead of Mom
<DL> ... </DL> A definition list <DT> … </DT> A definition term as part of a definition list - Level
1 term <DD> … <DD> - A Definition to definition term - level 2 term See (http://www.depaul.edu/~dlash/website/stuff.html) &
http://www.depaul.edu/~dlash/website/DD_lists_wi_lists_B.html
17David Lash
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:<ol><li>Baseball></li> <UL><LI>WhiteSox</LI> <LI>Cubs</LI> </UL><LI> Football</LI> <UL><LI>Bears</LI> </UL></ol>
Bullet list w/I numblist
Separate Bullet list
1 Major Numberlist
Note: It greatly helpsto indent to keep things straight.
18David Lash
Lists Within Lists This can get confusing quick … <html><head><title> A Roman Numeral Example </title> </head><body>Attention, attention, attention:<ul type=square><li> Chicago Professional Sports Teams</li><ol> <li> Baseball </li> <ol type=a> <li> Cubs </il> <li> White Sox </il> </ol> <li> Football</il> <ol type=a> <li> Bears? (well sort-of prefessional)</il> </ol> <li> basketball</il> <ol type=a> <li> Bulls? (Well that is a stretch) </li> </ol>
</ol> </ul> </body> (See example at http://condor.depaul.edu/~dlash/extra/Webpage/examples/listwithin.html)
It helps to indent when using lists within lists
19David Lash
More Lists Within Lists
Corresponding HTML Code: 1
http://www.depaul.edu/~dlash/extra/Webpage/examples/05sampleError.html
2http://www.depaul.edu/~dlash/extra/Webpage/examples/05sampleError2.html
3http://www.depaul.edu/~dlash/extra/Webpage/examples/05sample.html
20David Lash
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
21David Lash
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.
22David Lash
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@condor.depaul.edu)
23David Lash
General Link Format
HTML hyperlinks have the following format:
<A HREF=“Web Address”> Click Here </A>
Anchor tag can be used for links
Internet address of file to link to
The “clickable text”
24David Lash
Link Examples
<a href="http://www.depaul.edu/~dlash/index.html"> Home Page
</A>
Clickable text displayed on pagePage to load when link is clicked
Example from book
http://www.24hourhtmlcafe.com/hour3/cams.htm
25David Lash
Link Examples
If you like to goto to my favorite page then <A HREF="http://www.disney.com"> Here is Disney Fun</A> Otherwise you need to <A HREF="http://www.depaul.edu”> Click here</A>
What is display onWeb Page(as link)
Page to load when link is clicked
http://www.depaul.edu/~dlash/extra/Webpage/examples/03SAMPLE.html
26David Lash
Linking to non-HTML Files
Linking to non-html files if no different than linking to HTML files
<HTML><HEAD><TITLE>DePaul Link </TITLE></HEAD><BODY><A HREF=" http://www.depaul.edu/~dlash/website/depaul.gif "> DePaul Logo</A></BODY></HTML>
(http://www.depaul.edu/~dlash/website/depaul.gif)
http://www.depaul.edu/~dlash/extra/Webpage/examples/03links.html
27David Lash
Specify links that are portableSpecifying 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.htmlmoreinfo.html and faq.html each link back to myhome.html
[public_html]myhome.htmlmoreinfo.htmlfaq.html
28David Lash
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.
<a href=http://www.depaul.edu/~dlash/moreinfo.html> more info </a>
<a href=http://www.depaul.edu/~dlash/faq.html>Frequently Asked Questions </a>
This document contains more information. Here is lots of stuff …Go back home <a href=http://www.depaul.edu/~dlash/myhome..html>
click for home </a>.
Frequently asked questions. . . Go back home <a href=http://www.depaul.edu/~dlash/myhome..html> click for home
</a>.
faq.html
myhome.html
moreinfo.html
All 4 links in 3 different files must change if I move my site.
29David Lash
So use relative addresses Absolute addresses – Specify the complete address
of the file to link to: E.g., <A href=http://www.depaul.edu/~dlash/file.html> The file is here</A>
Relative Address – Specify just file name (relative to current site.) E.g., <a href=” file.html”> The file is here</A>
So for example ….Can now move directories w/o link changes …
Note leave off http:// and domain name
30David Lash
So Use Relative AddressesSo for example ….Can use relative
addresses AND move directories w/o link changes …
<a href=“moreinfo.html”> more info </a>
<a href=“faq.html”>Frequently Asked Questions </a>
This document contains more information. Here is lots of stuff …Go back home <a href=“myhome..html”>
click for home </a>.
Frequently asked questions. . . Go back home
<a href=“myhome..html”> click for home </a>.
faq.html
myhome.html
moreinfo.html
31David Lash
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:<a href=“myfile.html”> my personal file</a>
But how to link from myfile.html to hw.html?
index.html and myfile.html is in public_html
hw.html is in homework
32David Lash
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:
<a href=“homework/hw.html”> my homework </a>
index.html and myfile.html is in public_html
hw.html is in homework
Goto this directory
Get this file
33David Lash
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:
<a href=“../index.html”> my home page </a>
index.html is in public_html
hw.html is in hw.html
Go up one levelGet this file in parent directory
34David Lash
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
<a href=“../labs/lab1.html”> Lab1 </a>
<a href=“../index.html”> Lab1 </a>
35David Lash
Linking to a pre-addressed email
A Link that when clicked, opens a page automatically to a pre-addressed mail form
General Format:<A href=“mailto:emailaddress"> Click here </A>
For example:<a href="mailto: dlash@condor.depaul.edu"> email me! </A>
Email address
Text todisplay
36David Lash
Some Miscellaneous Points
What file does each of the following load?
<A href=“http://www.depaul.edu/~dlash/pictures/simple.html”> Click Here </A>
<A href=“http://www.depaul.edu/~dlash/pictures/”> pick one of these out </A>
<A href=“http://www.depaul.edu/~dlash”> home. </A>
37David Lash
What this section was about ...
Creating HTML links Creating absolute links
<A href=“http://www.depaul.edu/~dlash/myfile.html”> my home page </A>
Creating relative links <A href=“myfaq.html”> my FAQ Page </A>
Creating email links <A href=“mailto:dlash@condor.depaul.edu"> Mail me please </A>
38David Lash
Quick review of publishing
Review using FTP …Review creating public_htmlReview 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.html
So put homepage stuff into index.html.
39David Lash
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.
top related