Using HTML and JavaScript to

Develop Website

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
» Client side scripting (as time permits)
» Server side scripting

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

3
 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. Understanding basics of HTML document
4. New paragraphs, Horizontal rule, and header.
5. Validating HTML code

4
 Competency
Alert:
You need to
What is the Internet?
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

5
 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.inventeron.edu/~dlash/mystuff.html

Get the file

mystuff.html

The protocol to use to send the View pages under

data. The http or hypertext dlash user id.
transfer protocol is most
common for WWW pages.

Domain name that maps to the

address of a specific computer
(or set or computers). 6
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:// www.depaul.edu /~dlash/website/website01.ppt
http:// www.depaul.edu /~dlash/depaul.jpg
http:// www.yahoo.com /movies/oz.mpg
ftp:// www.down.com /myfile.zip

7
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 A web server is a computer on the network that holds files
know this ! (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 8
machine, such as Apache, IIS, Tomcat..
 How Pages Move Between Browser and
Webserver
Client Web
Machine 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.
9
 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! 10
People seem to forget this
 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
- How to publish your basic document.
3. Understanding basics of HTML document
4. New paragraphs, Horizontal rule, and header.
5. Validator “lite”

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

12
 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,
HTML tags are enclosed in <>.
<FONT COLOR=BLUE> Hello </FONT> For almost all tags there is a
<B> This Would be Bold </B> But not this. 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

13
 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
» Learn HTML and you can figure out these tools.

14
 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

15
 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!!!! Common
For example DO NOT call your file “my page.html”. Problem
It might work on a PC but will NOT work on UNIX Web Server. Area!
People seem to forget this

WARNING2: Be careful with capitals. Try to use all lower case.

16
For example “mypage.html” NOT MyPage.html.
 HTML Overview - Example
The header
section of
document
<html>
<head>
<title> Mypage </title>
This title appears
</head>
in the upper left
<body> hand corner of
Indicates start Welcome to Website Design. browser. Not in
and end of the body of the
Stuff
HTML document document
you
write
here becomes your HTML document. Inside the <body> … </body> tags is
</body> the main portion of your document.
</html>

Note how new lines in file are ignored

in web page display (because HTML
did not indicate line break)
17
 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 Common
Problem
4. Enter a filename with HTML suffix 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
18
!
know this
Start notepad and enter HTML tags.
Can use notepad as a simple editor
Start notepad by: start-
>run and enter notepad

19
 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 20
(you can tell by the icon). Its actually roman.html.txt
Open the file in Internet Explorer

Start IE and goto

file->open. Use
Change this drop-down to
‘browse’ to find file. ‘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

21
 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 -> choose file. (Find the file you just saved and
display it!)

22
 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
- How to publish your basic document.
3. Understanding basics of HTML document
4. New paragraphs, Horizontal rule, and header.
5. Validator “lite”

23
 Eventually will publish on the Web

 Use FTP to copy files from your PC to the Web

server

Note: There are other ways to get your pages on a web

server. Many developers telnet or SSH/telnet directly into
the web server and develop there.
24
 Publishing On The Web - II

 Place the copied files into the public_html directory

Your pages must be in this directory

(or you won’t see them on the
Internet)!
Common
Problem
Area! 25
People seem to forget this
 Starting up FTP

Enter your webserver name:

students.depaul.edu

Enter your web server userid:

dlash

Enter your web server

password:
apb73a1ks

Click OK when your done

1. Start->Internet Applications->FTP
(Start->programs->depaul online->ftp from at home with DePaul Online)
2. Fill in:
Host Name: students.depaul.edu
User Id: your DePaul userid 26
Password: your DePaul password
 More on FTP Main Screen.
Current directory on PC Current directory on Web server

PC Files and directories Web server Files and directories

27
 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
- How to publish your basic document.
3. Understanding basics of HTML document
4. New paragraphs, Horizontal rule, and header.
5. Validator “lite”

28
 We already saw ...

The header section

<HTML>
of document
<HEAD>
<TITLE>Mypage
</TITLE>
</HEAD>
<BODY>
Indicates start Welcome to Website
and end of Appears in upper left
HTML document Design hand corner of
</BODY> browser window

</HTML>

This is where most of TAGS usually are and text your

displaying (w/i BODY tags).
29
 HTML Only Responds To Tags

 Blank spaces without tags are ignored: These

<HTML>
<HEAD> spaces are
<TITLE> Formatting a WWW Page </TITLE> ignored.
</HEAD>
<BODY>
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.

<HR>

But the class does have some work to do.

</BODY>
</HTML>

30
 HTML Comments

The Tag <!--- ---> is used to indicate comment :

<HTML> These
<!-- comments are
! Example of a Basic HTML Program ignored.
! 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>

31
 Paragraph and Break Tags

Two of the most basic tags are:

<P> …… </P> -- Causes a new paragraph

<br> …… <br /> -- Causes a line break
<hr> …… <hr /> -- Draws a solid horizontal line

Actually you can get away without ending these tags.

The browsers know what you mean.
32
 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>
Create a new
In this course, paragraph
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>
Line Break
CLASS 2 - Email
<BR>
CLASS 3 - HTML<BR> Note > 1 tag per
</BODY></HTML> line

33
 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%>

34
 Paragraph and Break Tags
1. <HTML><HEAD><TITLE> Web Page With "P" Tag </TITLE>
2. </HEAD><BODY> Create a left justified
3. Welcome To Exploring The Internet paragraph
4. <HR>
5. Hopefully you will find this course interesting.
6. <P align=left>
7. In this course, you will develop
8. a broad knowledge of the internet Center it
9. </P><P align=right>
10. This class meets at night.
11. <P align=center> Solid HR that’s 30%
12. CLASS 1 - Introduction To The Internet
13. <BR clear=right>
of screen & 10 pixels
14. CLASS 2 - Email
15. <HR noshade width=30% size=10>
16. <HR width=30% size=10 align=left>
17. <HR size=12 WIDTH=155 align=right>
18. CLASS 3 - HTML
19. </BODY></HTML>

35
 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

36
 Header Example
1. <HTML><HEAD><TITLE> THIS is a sample web Page </TITLE>
2. </HEAD>
3. <BODY>
4. <H1> INTRODUCTION </H1>
H1 is the largest header. It will cause
5. Welcome To Website Design. line break and be large and bold
6. 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.
7. <H1> Meeting Times </H1>
8. The class will meet every other week on Thursday's (naperville) or
9. Saturday's (O'hare)
10. <H2> Dates and Times </H2><H3>CLASS 1</H3>
H2 and H3 will be smaller
11. Introduction To The Internet
12. <H3>CLASS 2</H3>Email<H3>CLASS 3 </H3>
13. HTML</BODY></HTML>

37
 Header Error Example
1. <HTML><HEAD> <TITLE> THIS is a sample web Page
2. </TITLE></HEAD><BODY>
3. <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>
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. <P> <H1> Meeting Times </H1>
6. The class will meet every other week on Thursday's (naperville) or Saturday's (O'hare)
7. <!-- Opps I forgot to close off the H2 tag!
8. -->
9. <H2> Dates and Times
10. <P>CLASS 1 - Introduction To The Internet<BR> CLASS 2 - Email
11. <BR>CLASS 3 - HTML
12. </BODY></HTML>

Accidentally left off the </H2> tag

Note how browser continues H2

until end of document 38
 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
- How to publish your basic document.
3. Understanding basics of HTML document
4. New paragraphs, Horizontal rule, and header.
5. Validator “lite”

39
 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

1. <HTML><HEAD><TITLE> This is a sample web Page </TITLE>

2. </HEAD> <BODY>
3. <H1> INTRODUCTION </H1>
4. Yet another example web page. In this one I forgot to end the document.
5. <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? 40
 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 Use tools-> validate to show html errors

File save
and undo
works like
notepad or
word
Alphabetic
index of HTML
tags 41
Your errors are shown here are the bottom
 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”
42
 A quick couple of questions
 What is HTML?
 What is the Internet? (3 attributes)
 What is a Web Server?

43
 A quick couple of questions
 What is HTML?
 What is the Internet?
 What is a Web Server?

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

45
 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 46
machine, such as Apache, IIS, Tomcat..
 Module 1 Hands on Assignment
 Create an HTML page that looks like the
following:

Competencies required:
1. Create a script and execute it.
47
2. Manipulate arithmetic variable.
 One possible solution
1. <HTML><HEAD>
2. <TITLE> A first Web Page </TITLE>
</HEAD><BODY>
3. <h1>A favorite Saying</h1>
4. One of my favorites quotes is: "Steady
plodding leads to success
5. but hasty speculation leads to poverty."
6. <HR> This page was designed by me.
7. </BODY>
8. </HTML>

48
 HW Hands-on assignment
 Change that webpage to look like the
following:

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

50
 One more item . . .
 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).

51