Transcript Web server - DePaul University

WebSite Design . . .
David Lash
Module 1
Getting Started
1
Introduction

What this course is about:
» Creating, designing, publishing web pages
– Web design basics with HTML:




Controlling text formatting
Controlling fonts & adding color
Creating links
Tables and frames
– Scripting
» Server side scripting (using PHP)
» Client side scripting (as time permits)
2
Instructor Info
David Lash
 Email: [email protected]
 Phone: 630.370.9313
 Call if any questions. . .

3
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 [email protected] with topic
(or approve during class).
» Page must have 5 sub-pages an be of ‘reasonable’ size.
– Don’t 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.
4
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 (don’t 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.
5
Use 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
6
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.
7
One more item . . .

In order to get space on the DePaul Web
Server.
1. Contact the DePaul O’hare Lab Assistant
(outside of lab)
2. Ask to activate your email account.
3. 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 won’t need this for a couple weeks BUT DON’T DELAY. It can
take up to a week to set up!!!!
8
Unit Objectives
1.
2.
3.
Understand what is the Internet, HTML,
Web servers.
Can format a simple HTML page and view
it with a browser.
Can validate html code (and understand
its importance).
Competency
Alert:
You need to
!
know this
Common
Problem
Area!
People seem to forget this
9
Today’s Agenda

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
10
Competency
Alert:
What is the Internet?
You need to
!
know this

The Federal Networking Council (FNC) agrees "Internet" refers
to the global information system that
1. is logically linked together by a globally unique address space based on
the Internet Protocol (IP)
All systems on Internet share a common addressing method (called IP addresses) For Example
135.14.12.22. E.g., condor.depaul.edu is really 140.192.1.6. Try http://140.192.1.6/~dlash/
2. supports communications using the Transmission Control
Protocol/Internet Protocol (TCP/IP) suite or its subsequent
extensions/follow-ons, and/or other IP-compatible protocols; and
TCP/IP protocol is the standard protocol for moving Internet data!
3. provides, uses or makes accessible, either publicly or privately, high level
services layered on the communications and related infrastructure described
herein.
Services such as web pages, email, chat, bulletin boards
11
Resolving Web Addresses
-
When type in address at top of browser, you provide a logical
Universal Resource Locator (URL) address.
- The URL maps to a specific web server address and file to access on
that web server
http://www.depaul.edu/~dlash/mystuff.html
Get the file
mystuff.html
The protocol to use to send the
data. The http or hypertext
transfer protocol is most
common for WWW pages.
View pages under
dlash user id.
Domain name that maps to the
address of a specific computer
(or set or computers).
12
More Web Address Examples
Protocol
Domain Name
Path to info
http://
www.depaul.edu
/~dlash/website/index.htm
https://
www.yahoo.com
/Orders/order.htm
http://
http://
www.depaul.edu
www.depaul.edu
/~dlash/website/website01.ppt
/~dlash/depaul.jpg
http://
www.yahoo.com
/movies/oz.mpg
ftp://
www.down.com
/myfile.zip
13
Accessing a WebPage A Greatly Simplified
view
www.mycompany.com/index.html
Browser
Web Server
My Page
Welcome ...
Client Machine
Company Server
Competency
Alert:
You need to
know this
!
A web server is a computer on the network that holds files
(often for more than 1 user). It listens for http file requests
(on the internet) and responds to them.
Web server also can refer to the software that controls the
machine, such as Apache, IIS, Tomcat..
14
How Pages Move Between Browser and
Webserver
Client
Machine
1.
Web
Server
Check Cache
2.
3.
1. Check the browser disk area (known as cache) to see if file has been recently viewed.
2. If file not in browser then translate the URL to a physical web (IP) address and request file from
Web Server.
3. Transfer file from Web Server back to client machine.
15
How Pages Move Between Browser and
Webserver


– (The bottom line)
If you visits a page now and revisit in 15 minutes (or
even tomorrow) your page might be coming from
cache (and not be the “freshest” content).
Two ways to ensure getting content from web server
and not from cache
1. Hold down the “shift” button and then hit refresh (or
reload)
2. Delete all the caches file from browser cache.
–
–
From IE goto tools->temporary internet files ->Delete files
From Netscape Edit->preferences->Advanced->Cache->Clear
Cache
Common
Problem
Area!
People seem to forget this
16
Outline

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
3. Understanding basics of HTML document
4. New paragraphs, Horizontal rule, and header.
5. Validator “lite”
17
Ok So What Is HTML?

Up until the late 1980s, Internet’s main use for email,
send/received files, and bulletin board services.
» Was difficult to advertise and access documents and data at a site.

Tim Berners-Lee created a simple language for display
documents and links
» Wrote a tool (early browser) for displaying the language
» This language called HyperText Markup Language (HTML).

HTML grew quickly especially with the development of the
Mosiac web browser
» Mosiac eventually became Netscape and was available for free
download.
» HTML eventually became standardized and is now controlled by the
world wide web consortium (http://www.w3.org)
18
Competency
Alert:
You need to
What Really Is HTML?
!
know this

HyperText Markup Language - Basically a set of TAGS that
you add to your text
» HTML tells browsers how to display and format your text
» For example,
<FONT COLOR=BLUE> Hello </FONT>
<B> This Would be Bold </B> But not this.

HTML tags are enclosed in <>.
For almost all tags there is a
start and ending tag.
Why is it used so extensively?
» It is simple to use and understand
» It provides ways to include lots of stuff (e.g., text, graphics, sounds,
links)
» It is the STANDARD
19
HTML? Why Not Just Use …

Front-page or Dreamweaver or Composer or …
» “HTML-editors” basically generate HTML
– Sometimes also generate javascript, and flash and a few other
things.
– Mainly provide a WYSIWYG (What You See Is What You Get) display
» However, tool knowledge doesn’t translate to HTML
knowledge
– Web professionals still need to dip into the HTML to get precise
design, or to get something to work
» Learning HTML makes learning these tools easier.
20
OK So What Is This HTML?

HTML is based using tags. HTML tags
» Are Enclosed in <>
– (e.g., <font>, <b>, <img src=121> )
» Usually have a start and end tag (e.g.,
<b> hello </b> world
Makes hello bold but world is not
» Are case insensitive, so the following are the same
<b> My </b> country <i> tis </I> of thee
<B> My </b> country <i> tis </i> of thee
<B> My </B> country <I> tis </I> of thee
21
HTML Overview - II

A set of TAGs are required of all documents
<HTML> ... </HTML>
Starts and ends your entire HTML
document
<HEAD> ... </HEAD>
Defines the “header” section for your
HTML document
<BODY> ... </BODY>

Defines the main body section for your
HTML document
Store in a file with either htm or html suffix
» E.g., mypage.html or mypage.htm or homepage.html
WARNING: DO NOT USE SPACES IN FILENAMES!!!!
For example DO NOT call your file “my page.html”.
It might work on a PC but will NOT work on UNIX Web Server.
Common
Problem
Area!
People seem to forget this
WARNING2: Be careful with capitals. Try to use all lower case.
For example “mypage.html” NOT MyPage.html.
22
HTML Overview - Example
Indicates start
and end of
HTML document
<html>
<head>
<title> Mypage </title>
</head>
<body>
Welcome to Website Design.
Stuff
you
write
here becomes your HTML document.
</body>
</html>
The header
section of
document
This title appears
in the upper left
hand corner of
browser. Not in
the body of the
document
Inside the <body> … </body> 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)
23
Steps To Create HTML Document & Display
1. From your PC goto Start->run enter notepad
2. Enter your tags and document
3. From notepad window, goto file->saveas
4. Enter a filename with HTML suffix
Common
Problem
Area!
People seem to forget this
(SECOND WARNING!! No spaces or caps please!).
5. Start Netscape (or IE, or Firefox).
6. From Netscape, goto file->open page -> choose file.
(Find the file you just saved and display it!)
Competency
Alert:
You need to
know this
!
24
Start notepad and enter HTML tags.
Can use notepad as a simple editor
Start notepad by: start->run
and enter notepad
25
Once done, goto file->saveas
Need to give file an html
suffix.
From notepad you need
to pull down the ‘Save as
type:” to All Files.
Note: On windows the icons are also usually different for files
of different suffixes. Here ‘roman.html’ is not really an html suffix
(you can tell by the icon). Its actually roman.html.txt
26
Open the file in Internet Explorer
Start IE and goto
file->open. Use
‘browse’ to find file.
Change this drop-down to
‘view all files’ if you suspect
the file has a different suffix.
Navigate to the directory
where you saved the file. If
you don’t see the file, you
either saved it somewhere else
or it doesn’t have an html
suffix.
Click OK and view your file
27
Repeat until done with the file.
Repeat this process until your content
and display format is right.
1. From your PC goto Start->run enter notepad
2. Enter your tags and document
3. From notepad window, goto file->saveas
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->open page
display it!)
->
choose file. (Find the file you just saved and
28
By the way … eventually will publish on the Web

Later will use FTP to copy files from your PC to
the Web server
For now, save on a floppy or local disk. Just make sure to
have a back up copy of your work!
29
Outline

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
3. Understanding basics of HTML document
4. New paragraphs, Horizontal rule, and header.
5. Validator “lite”
30
We already saw ...
Indicates start
and end of
HTML document
<HTML>
<HEAD>
<TITLE>Mypage
</TITLE>
</HEAD>
<BODY>
Welcome to Website
Design
</BODY>
</HTML>
The header section
of document
Appears in upper left
hand corner of
browser window
This is where most of TAGS usually are and text your
displaying (w/i BODY tags).
31
HTML Only Responds To Tags

Blank spaces without tags are ignored:
<HTML>
<HEAD>
<TITLE> Formatting a WWW Page </TITLE>
</HEAD>
<BODY>
Welcome To Exploring The Internet
These
spaces are
ignored.
Hopefully you will find this course to be informative and interesting. I
hope that
you have fun while learning about the Internet.
<HR>
But the class does have some work to do.
</BODY>
</HTML>
32
HTML Comments
The Tag <!---
--->
is used to indicate comment:
<HTML>
<!-! Example of a Basic HTML Program
! Written by Dave Lash For Web Page Design
! To demonstrate the use of comments.
--><HEAD>
<TITLE> THIS is a sample web Page </TITLE>
</HEAD>
<BODY>
Welcome To Exploring The Internet
</BODY>
</HTML>
These
comments are
ignored.
33
Paragraph and Break Tags
Two of the most basic tags are:
-- Causes a new paragraph
-- Causes a line break
/> -- Draws a solid horizontal line
<P> …… </P>
<br> …… <br />
<hr> …… <hr
Actually you can get away without ending these tags.
The browsers know what you mean.
34
Paragraph and Break Tags
Creates
a line
<HTML><HEAD><TITLE> Web Page With "P" Tag</TITLE>
</HEAD>
<BODY>
Welcome To Exploring The Internet
<HR>
Hopefully you will find this course interesting.
<P>
In this course,
you will develop
a broad knowledge of the Internet
</P><P>
This class meets at night.
</P><P>
CLASS 1 - Introduction To The Internet
<BR>
CLASS 2 - Email
<BR>
CLASS 3 - HTML<BR>
</BODY></HTML>
Create a new
paragraph
Line Break
Note > 1 tag per
line
35
Using Attributes with Tags
Many tags also have optional attributes :

<P> ……… </P> -- Causes a new paragraph
» align=center|right|left
» aligns the text to the center, right or left.
E.g., <P align=left>
 <hr> or <hr /> --- Draws a solid horizontal line
» align=center|left|right - sets horizontal alignment
» noshade - Display as a solid (noshaded) bar
» size=number - thickness of rule in pixels
» width=number or % - Length of rule in pixels or % of screen.
» E.g., <HR noshade size=12 width=50%>
36
Paragraph and Break Tags
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
<HTML><HEAD><TITLE> Web Page With "P" Tag </TITLE>
</HEAD><BODY>
Welcome To Exploring The Internet
<HR>
Hopefully you will find this course interesting.
<P align=left>
In this course, you will develop
a broad knowledge of the internet
</P><P align=right>
This class meets at night.
<P align=center>
CLASS 1 - Introduction To The Internet
<BR clear=right>
CLASS 2 - Email
<HR noshade width=30% size=10>
<HR width=30% size=10 align=left>
<HR size=12 WIDTH=155 align=right>
CLASS 3 - HTML
</BODY></HTML>
Create a left justified
paragraph
Center it
Solid HR that’s 30% of
screen & 10 pixels
37
Paragraph and Break Tags
Headers are used to create section titles
- not the <title> tag
<H1> ……… </H1> -- First Level Header
<H2> ……. </H2> -- Second Level
<H3> …….. </H3> --- Third Level
<H4> …….. </H4> --- Fourth Level
<H5> …….. </H5> --- Fifth Level
38
Header Example
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
<HTML><HEAD><TITLE> THIS is a sample web Page </TITLE>
</HEAD>
<BODY>
<H1> INTRODUCTION </H1>
Welcome To Website Design.
Hopefully you will find this course to be informative and interesting.<H1>
Overview </H1>In this course, you will develop a broad knowledge of the Internet
technology.
<H1> Meeting Times </H1>
The class will meet every other week on Thursday's (naperville) or
Saturday's (O'hare)
<H2> Dates and Times </H2><H3>CLASS 1</H3>
Introduction To The Internet
<H3>CLASS 2</H3>Email<H3>CLASS 3 </H3>
HTML</BODY></HTML>
H1 is the largest header. It will cause
line break and be large and bold
H2 and H3 will be smaller
39
Header Error Example
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
<HTML><HEAD> <TITLE> THIS is a sample web Page
</TITLE></HEAD><BODY>
<H1> INTRODUCTION </H1>Welcome To Exploring The InternetHopefully you will find this
course to be informative and interesting. I hope that you have fun while learning about
the Internet. <P><H1> Overview </H1>
In this course, you will develop a broad knowledge of the Internet technology and
understand how it can be useful to work personal and work life.
<P> <H1> Meeting Times </H1>
The class will meet every other week on Thursday's (naperville) or Saturday's (O'hare)
<!-- Opps I forgot to close off the H2 tag!
-->
<H2> Dates and Times
<P>CLASS 1 - Introduction To The Internet<BR> CLASS 2 - Email
<BR>CLASS 3 - HTML
</BODY></HTML>
Accidentally left off the </H2> tag
Note how browser continues H2
until end of document
40
Outline

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
3. Understanding basics of HTML document
4. New paragraphs, Horizontal rule, and header.
5. Validator “lite”
41
Using HTML Validators
Why Bother to validate HTML code?
1. Browser do not fully enforce HTML standard
–
1.
2.
3.
4.
5.
E.g., Often are ‘forgiving’ if forget to close a tag or omit something
<HTML><HEAD><TITLE> This is a sample web Page </TITLE>
</HEAD> <BODY>
<H1> INTRODUCTION </H1>
Yet another example web page. In this one I forgot to end the document.
<br> Yet I don't get an error.
Did not end document
but it displays OK.
BUT WHAT ABOUT ‘IE’ or
NETSCAPE OR A PREVIOUS
VERSION or NEXT VERSION?
42
Using HTML Validators
Soln: Use An HTML Validator.
»
»
Such as a Web Site (upload code)
Or HTML validator lite (for free) at: http://www.download.com
File->open to open documents
File save
and undo
works like
notepad or
word
Your errors are shown here are the bottom
Use tools-> validate to show html errors
Alphabetic
index of HTML
tags43
Summary
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”
44
A quick couple of questions
What is HTML?
 What is the Internet? (3 attributes)
 What is a Web Server?

45
A quick couple of questions
What is HTML?
 What is the Internet?
 What is a Web Server?

46
A quick couple of questions

What is HTML?
» HyperText Markup Language - Basically a
set of TAGS that you add to your text
– HTML tells browsers how to display and format
your text
What is the Internet?
 What is a Web Server?

47
A quick couple of questions


What is HTML
What is the Internet?
– is logically linked together by a globally unique address space
based on the Internet Protocol (IP)
– supports communications using the Transmission Control
Protocol/Internet Protocol (TCP/IP) suite or its subsequent
extensions/follow-ons, and/or other IP-compatible protocols; and
– provides, uses or makes accessible, either publicly or privately,
high level services layered on the communications and related
infrastructure described herein.

What is Web Server?
A web server is a computer on the network that holds files
(often for more than 1 user). It listens for http file requests
(on the internet) and responds to them.
Web server also can refer to the software that controls the
machine, such as Apache, IIS, Tomcat..
48
Module 1 Hands on Assignment

Create an HTML page that looks like the
following:
Competencies required:
1. Create a script and execute it.
2. Manipulate arithmetic variable.
49
One possible solution
1.
2.
3.
4.
5.
6.
7.
8.
<HTML><HEAD>
<TITLE> A first Web Page </TITLE>
</HEAD><BODY>
<h1>A favorite Saying</h1>
One of my favorites quotes is: "Steady
plodding leads to success
but hasty speculation leads to poverty."
<HR> This page was designed by me.
</BODY>
</HTML>
50
HW Hands-on assignment

Change that webpage to look like the
following:
51
What to do with homework
1. Do not hand in the homework yet.
2. HW will be ‘collected’ when you publish to the
WWW.
3. For now, complete the assignment, a save to
your personal machine. I will ask you to
publish it later.
52
One more item, remember

In order to get space on the DePaul Web
Server.
1. You need to see the DePaul Lab Assistant
2. Ask to activate your email account.
3. Do this even if you ‘have’ an email account.
(Its routine practice, for them to suspend
inactive accounts).
53