WebSite Design . . .

1
WebSite Design . . .

• David Lash
• Module 1
• Getting Started

2
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)

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
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
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
Unit Objectives

1. Understand what is the Internet, HTML, Web
   servers.
2. Can format a simple HTML page and view it with a
   browser.
3. Can validate html code (and understand its
   importance).

Competency Alert You need to know this!
Common Problem Area! People seem to forget
this
10
Todays 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

11
What is the Internet?
Competency Alert 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)
• 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
• 3. provides, uses or makes accessible, either
  publicly or privately, high level services
  layered on the communications and related
  infrastructure described herein.

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
/
TCP/IP protocol is the standard protocol for
moving Internet data!
Services such as web pages, email, chat, bulletin
boards
12
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
View pages under dlash user id.
The protocol to use to send the data. The http or
hypertext transfer protocol is most common for
WWW pages.
Domain name that maps to the address of a
specific computer (or set or computers).
13
More Web Address Examples
14
Accessing a WebPage A Greatly Simplified view

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..
15
How Pages Move Between Browser and Webserver
Client Machine
Web Server

1.
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.
16
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
• Hold down the shift button and then hit refresh
  (or reload)
• Delete all the caches file from browser cache.
• From IE goto tools-gttemporary internet files
  -gtDelete files
• From Netscape Edit-gtpreferences-gtAdvanced-gtCache-gt
  Clear Cache

Common Problem Area! People seem to forget
this
17
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

18
Ok So What Is HTML?

• Up until the late 1980s, Internets 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)

19
What Really Is HTML?
Competency Alert You need to 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,
• ltFONT COLORBLUEgt Hello lt/FONTgt
• ltBgt This Would be Bold lt/Bgt But not this.

HTML tags are enclosed in ltgt. 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

20
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 doesnt 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.

21
OK So What Is This HTML?

• HTML is based using tags. HTML tags
• Are Enclosed in ltgt
• (e.g., ltfontgt, ltbgt, ltimg src121gt )
• Usually have a start and end tag (e.g.,
• ltbgt hello lt/bgt world
• Are case insensitive, so the following are the
  same
• ltbgt My lt/bgt country ltigt tis lt/Igt of thee
• ltBgt My lt/bgt country ltigt tis lt/igt of thee
• ltBgt My lt/Bgt country ltIgt tis lt/Igt of thee

Makes hello bold but world is not
22
HTML Overview - II

• A set of TAGs are required of all documents
• ltHTMLgt ... lt/HTMLgt
• ltHEADgt ... lt/HEADgt
• ltBODYgt ... lt/BODYgt
• Store in a file with either htm or html suffix
• E.g., mypage.html or mypage.htm or homepage.html
  

Starts and ends your entire HTML document
Defines the header section for your HTML
document
Defines the main body section for your HTML
document
Common Problem Area! People seem to forget
this
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.
WARNING2 Be careful with capitals. Try to use
all lower case. For example mypage.html NOT
MyPage.html.
23
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)
24
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!
25
Start notepad and enter HTML tags.
Can use notepad as a simple editor
Start notepad by start-gtrun and enter notepad
26
Once done, goto file-gtsaveas
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
27
Open the file in Internet Explorer
Start IE and goto file-gtopen. 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 dont see the file, you either saved
it somewhere else or it doesnt have an html
suffix.
Click OK and view your file
28
Repeat until done with the file.
Repeat this process until your content and
display format is right.

• 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!)

29
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!
30
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

31
We already saw ...
The header section of document

• ltHTMLgt
• ltHEADgt
• ltTITLEgtMypage
• lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• Welcome to Website
• Design
• lt/BODYgt
• lt/HTMLgt

Indicates start and end of HTML 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).
32
HTML Only Responds To Tags

• Blank spaces without tags are ignored
• ltHTMLgt
• ltHEADgt
• ltTITLEgt Formatting a WWW Page lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• Welcome To Exploring The Internet
• Hopefully you will find this course to be
  informative and interesting. I
• hope that you have fun while learning
  about the Internet.
• ltHRgt
• But the class does have some work to do.
• lt/BODYgt
• lt/HTMLgt

These spaces are ignored.
33
HTML Comments

• The Tag lt!--- ---gt is used to
  indicate comment
• ltHTMLgt
• lt!--
• ! Example of a Basic HTML Program
• ! Written by Dave Lash For Web Page Design
• ! To demonstrate the use of comments.
• --gtltHEADgt
• ltTITLEgt THIS is a sample web Page lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• Welcome To Exploring The Internet
• lt/BODYgt
• lt/HTMLgt

These comments are ignored.
34
Paragraph and Break Tags

• Two of the most basic tags are
• ltPgt lt/Pgt -- Causes a new paragraphltbrgt
  ltbr /gt -- Causes a line break
• lthrgt lthr /gt -- Draws a solid horizontal line

Actually you can get away without ending these
tags. The browsers know what you mean.
35
Paragraph and Break Tags
Creates a line

• ltHTMLgtltHEADgtltTITLEgt Web Page With "P" Taglt/TITLEgt
• lt/HEADgt
• ltBODYgt
• Welcome To Exploring The Internet
• ltHRgt
• Hopefully you will find this course interesting.
• ltPgt
• In this course,
• you will develop
• a broad knowledge of the Internet
• lt/PgtltPgt
• This class meets at night.
• lt/PgtltPgt
• CLASS 1 - Introduction To The Internet
• ltBRgt
• CLASS 2 - Email
• ltBRgt
• CLASS 3 - HTMLltBRgt
• lt/BODYgtlt/HTMLgt

Create a new paragraph
Line Break
Note gt 1 tag per line
36
Using Attributes with Tags

• Many tags also have optional attributes
• ltPgt lt/Pgt -- Causes a new paragraph
• aligncenterrightleft
• aligns the text to the center, right or
  left.E.g., ltP alignleftgt
• lthrgt or lthr /gt --- Draws a solid horizontal line
• aligncenterleftright - sets horizontal
  alignment
• noshade - Display as a solid (noshaded) bar
• sizenumber - thickness of rule in pixels
• widthnumber or - Length of rule in pixels or
  of screen.
• E.g., ltHR noshade size12 width50gt

37
Paragraph and Break Tags

• ltHTMLgtltHEADgtltTITLEgt Web Page With "P" Tag
  lt/TITLEgt
• lt/HEADgtltBODYgt
• Welcome To Exploring The Internet
• ltHRgt
• Hopefully you will find this course interesting.
• ltP alignleftgt
• In this course, you will develop
• a broad knowledge of the internet
• lt/PgtltP alignrightgt
• This class meets at night.
• ltP aligncentergt
• CLASS 1 - Introduction To The Internet
• ltBR clearrightgt
• CLASS 2 - Email
• ltHR noshade width30 size10gt
• ltHR width30 size10 alignleftgt
• ltHR size12 WIDTH155 alignrightgt
• CLASS 3 - HTML
• lt/BODYgtlt/HTMLgt

Create a left justified paragraph
Center it
Solid HR thats 30 of screen 10 pixels
38
Paragraph and Break Tags

• Headers are used to create section titles
• - not the lttitlegt tag
• ltH1gt lt/H1gt -- First Level HeaderltH2gt .
  lt/H2gt -- Second Level
• ltH3gt .. lt/H3gt --- Third Level
• ltH4gt .. lt/H4gt --- Fourth Level
• ltH5gt .. lt/H5gt --- Fifth Level

39
Header Example

1. ltHTMLgtltHEADgtltTITLEgt THIS is a sample web Page
   lt/TITLEgt
2. lt/HEADgt
3. ltBODYgt
4. ltH1gt INTRODUCTION lt/H1gt
5. Welcome To Website Design.
6. Hopefully you will find this course to be
   informative and interesting.ltH1gt Overview lt/H1gtIn
   this course, you will develop a broad knowledge
   of the Internet technology.
7. ltH1gt Meeting Times lt/H1gt
8. The class will meet every other week on
   Thursday's (naperville) or
9. Saturday's (O'hare)
10. ltH2gt Dates and Times lt/H2gtltH3gtCLASS 1lt/H3gt
11. Introduction To The Internet
12. ltH3gtCLASS 2lt/H3gtEmailltH3gtCLASS 3 lt/H3gt
13. HTMLlt/BODYgtlt/HTMLgt

H1 is the largest header. It will cause line
break and be large and bold
H2 and H3 will be smaller
40
Header Error Example

1. ltHTMLgtltHEADgt ltTITLEgt THIS is a sample web Page
2. lt/TITLEgtlt/HEADgtltBODYgt
3. ltH1gt INTRODUCTION lt/H1gtWelcome 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.
   ltPgtltH1gt Overview lt/H1gt
4. 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.
5. ltPgt ltH1gt Meeting Times lt/H1gt
6. The class will meet every other week on
   Thursday's (naperville) or Saturday's (O'hare)
7. lt!-- Opps I forgot to close off the H2 tag!
8. --gt
9. ltH2gt Dates and Times
10. ltPgtCLASS 1 - Introduction To The InternetltBRgt
    CLASS 2 - Email
11. ltBRgtCLASS 3 - HTML
12. lt/BODYgtlt/HTMLgt

Accidentally left off the lt/H2gt tag
Note how browser continues H2 until end of
document
41
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

42
Using HTML Validators

• Why Bother to validate HTML code?
• 1. Browser do not fully enforce HTML standard
• E.g., Often are forgiving if forget to close a
  tag or omit something
• ltHTMLgtltHEADgtltTITLEgt This is a sample web Page
  lt/TITLEgt
• lt/HEADgt ltBODYgt
• ltH1gt INTRODUCTION lt/H1gt
• Yet another example web page. In this one I
  forgot to end the document.
• ltbrgt 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?
43
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-gtopen to open documents
Use tools-gt validate to show html errors
File save and undo works like notepad or word
Alphabetic index of HTML tags
Your errors are shown here are the bottom
44
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

45
A quick couple of questions

• What is HTML?
• What is the Internet? (3 attributes)
• What is a Web Server?

46
A quick couple of questions

• What is HTML?
• What is the Internet?
• What is a Web Server?

47
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?

48
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..
49
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.
50
One possible solution

1. ltHTMLgtltHEADgt
2. ltTITLEgt A first Web Page lt/TITLEgt lt/HEADgtltBODYgt
3. lth1gtA favorite Sayinglt/h1gt
4. One of my favorites quotes is "Steady plodding
   leads to success
5. but hasty speculation leads to poverty."
6. ltHRgt This page was designed by me.
7. lt/BODYgt
8. lt/HTMLgt

51
HW Hands-on assignment

• Change that webpage to look like the following

52
What to do with homework

• Do not hand in the homework yet.
• HW will be collected when you publish to the
  WWW.
• For now, complete the assignment, a save to your
  personal machine. I will ask you to publish it
  later.

53
One more item, remember

• In order to get space on the DePaul Web Server.
• You need to see the DePaul Lab Assistant
• Ask to activate your email account.
• Do this even if you have an email account. (Its
  routine practice, for them to suspend inactive
  accounts).