Transcript HTML

IT 130 – Internet and the Web
Joseph (Yosef) Mendelsohn
Lecture #1:
* The World Wide Web
* HTML Basics
1
How Web Pages are “Served”
Learning Objectives
•
•
•
•
What is a web client?
What is a web server?
What is an HTTP request?
What is an HTTP response?
Requesting a page - Overview
1.
2.
3.
A web client (usually in the form of a web browser) makes an
HTTP request to a specific web server.
The web server receives the request and sends back the
requested document (usually – though not always) in the form
of an HTML page.
The web client parses the HTML response document and
interprets the information returned by the server and displays
it.
Understand these terms
• Be sure you review and become
comfortable with the following terms as
they are discussed over the next section:
– HTTP Client
– HTTP Server
– HTTP Request
– HTTP Response
HTTP
• Stands for “hypertext transfer protocol”
(You don’t need to memorize this!)
• In terms of networking, a protocol is a series of
rules and standards that are agreed to by a
committee or organization
• These rules standardize one way in which
computing devices can work and interact
• HTTP is the protocol used by devices that wish
to communicate with each other over the world
wide web
HTTP Client
• From Wikipedia:
An HTTP client uses HTTP to connect to a web server over the
Internet to transfer documents or other data. The most well known
types of HTTP Clients include web browsers.
• Software that is used to:
– generate HTTP requests
– send those requests to an HTTP server
– interpret the HTTP response that is provided by the
server
• The most famous type of http client by far is the
web browser - Internet Explorer, Firefox, Safari,
Chrome, etc
The Request/Response Process
Taken from ‘The Internet of Things’, p.30
HTTP Server
• A computer somewhere that is running http server
software
• Colloquially, simply called a web server
• This software “listens” for incoming requests from HTTP
clients
• When an http request comes in, the server parses
(reads & interprets) that request
• The server then sends out an http response
• Typically, this response includes sending a document
back to the web client (aka ‘http client’)
• Examples of http server software: Apache, Google Web
Server, Internet Information Services
The HTTP Request
• When you type a URL, say, for the syllabus of this
course, your HTTP client (browser) creates something
called an ‘HTTP request’
• This request is routed (via a mechanism we will ignore
for now) over the internet to an HTTP server that is
connected to the internet
– For the class web page, this server lives somewhere in
downtown Chicago
• The HTTP request contains all kinds of information that
the server may need to know:
–
–
–
–
–
The name of the document being requested
The time the request was made
The “return address” (the internet address of the http client)
The type/name of the http client (e.g. Pocket Safari for iPhone)
etc
The HTTP Response
• Once the server has received and parsed the
http request, it answers by generating an http
response. This response includes:
– a status line: e.g. ‘OK’ or ‘ERROR-404’
– a header with information such as the type of
document being returned (JPG, MPG, HTML, etc)
– This is also packaged with the actual document that
was requested. This document is commonly, but by
no means always an ‘html’ document.
• It can be other things such as an image, a PPT file, etc
‘Parsing’ the http response
• An http client such as a web browser specializes
in reading http responses
• Frequently included with this response is a
document such as a file written in a ‘language’
called html
• The client “parses” this document which contains
the information to be displayed (e.g. text,
pictures, etc) and the way in which it should be
displayed (size, colors, font, etc, etc)
Example of an http request and response
• If you look under week #1 of this course,
you will see a document called
‘first_template.htm’
• The URL (i.e. the web address) to this
document is:
http://condor.depaul.edu/ymendels/it130/first_template.htm
• Let’s see what happens when you type
this URL into a web client…
Example of an http request and response:
1. The HTTP Request
• When you type the URL and hit enter, an “http request”
is sent to the web server.
– The name of this web server is ‘condor.depaul.edu’
• Here is part of the http request:
Example of an http request and response:
2. The HTTP Response
Here is what comes back:
Overview - How to ‘serve’ web pages
1.
Have a computer to act as a ‘server’ with a big enough
hard-drive to store all the pages you want to make
available on the web.
2.
Ensure your computer is connected to the internet
3.
Install web server software (e.g. Apache web server)
–
Configure the web server (takes a little bit of know-how)
4.
Obtain and/or create the documents that you wish to
make available on the web.
5.
Copy those documents from your local computer to the
web server. This requires ‘FTP’ (later).
Serving web pages – The Server:
Have a computer to act as a ‘server’ to send pages along when
requested:
A server can be any computer capable of connecting to the internet and
running server-software.
-
-
The busier the site, the more powerful the computer. However the server
can be as simple as your Dell desktop, or as complex as a rack of highend dedicated computers.
Busy sites (e.g. Google, Microsoft) will have multiple redundant
computers to serve their web pages.
Serving web pages: Server Software
• A computer program called a web server listens
(constantly) for HTTP requests and responds by sending
back HTTP responses.
– An example of an http request is:
http://www.nytimes.com/index.html
– An example of an http response is (usually) the web page
document that is sent back to your computer
• Several software companies publish web server software
– Some of the better known server software programs include:
• Apache HTTP Server
• Microsoft IIS (Internet Information Services)
• Google’s GWS (Google Web Server)
Serving web pages – Creating and
uploading information
• See rest of the course.
Creating Content
• Your average web client (aka http client, aka
browser) can understand many languages
–
–
–
–
HTML (Hypertext markup language)
Javascript
CSS (cascading stylesheets)
PHP, Ajax, Ruby, others
• Each language has its particular uses
• In this course will cover the first three above
• We will begin with HTML
HTML
HTML = HyperText Markup Language
HyperText
 text containing navigable links to other texts
A Markup Language
 a method of adding information to the text indicating the logical
components of a document and instructions for layout of the text on
the page, which can be interpreted by some automatic system
You can see the HTML of most web pages by selecting View 
Source on your web browser.
20
HTML: The Language of the Web

Web pages are text files written in HTML.

HTML is easy to write and even nonprogrammers can learn to
use it.

HTML allows web page authors to create documents that can be
displayed across different operating systems.

HTML describes the format of web pages through the use of
tags.
– Web browsers read the HTML file, interpret the HTML
tags, and render (display) the web page accordingly
– Ideally, all browsers should display pages exactly the
same. However, different web browsers frequently
display pages differently!
21
Creating Web pages
In order to create your own web pages in this course you need:
– A text editor (not a web design application like FrontPage or
Dreamweaver)
(e.g. TextPad, TextWrangler, PSPad)
For reasons I’ll explain in class, do NOT use Windows Notepad
or TextEdit on the Mac
– A web browser for testing the pages
(e.g. Firefox, Internet Explorer, Safari, Opera, Chrome – or test
with ALL of them!)
– An account on a functioning web server to store your files and
make them available online (e.g. students.depaul.edu)
22
Basic process for creating web pages
Write HTML file
– text file (i.e. do not write in Word)
– name the file extension .html or .htm
– View on your local machine (File  Open)
Upload your file(s) to the server
– When you create a web document, you will be working ona
computer in home, ona laptop, etc. This means that the file is
NOT yet available on the internet. To make it visible on the web,
you must first copy that file to the web server.
– The protocol for copying files between computers on the internet
is called “FTP”
– Any additional files you wish to make available on the web such
as images or videos or PPTs, etc, etc, must also be uploaded
23
File extensions
HTML files must be saved with a .html or .htm extension.

HTML editors like TextPad do this automatically (when
you click on File  Save As and choose ‘Save as HTML’)
Important: Be sure that you can view the extensions of
your files. By default, Windows and Mac computers,
typically hide extensions.
Instructions for ensuring that extensions are visible in
Windows:
In Windows Explorer or in My Computer, click on
Organize  Folder and Search Options  View (tab) 
UN-check the box that says “Hide extensions for known
file types”.
24
** Respect Case ! **
• Case refers to capital as opposed to lower-case letters
• In the programming world, you should ALWAYS be respectful of
case. Though some situations are forgiving about it, others are not.
For thisr eason, if you are shown a tag in lower-case, always write it
in lower case and vice-versa.
– In other words, if a tag is listed as ‘img’, you should NOT write
IMG or Img etc.
Our first HTML…
• HTML tags are designed to tell the http client how the
text is organized
• The most common organization of document is into
headings, subheadings, sub-subheadings etc
• We also frequently use lists
• HTML is also used to tell the client when we are
“switching languages”
• HTML is also used to give the browser information about
the current document, such as the language being used
A very basic HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8“ />
<title>My first web page</title>
</head>
<body>
Hello world!
</body>
</html>
Notes:
•
Every page should have the document tags <!DOCTYPE>,<html>,
<head>, charset metatag, <title>, <body>  don’t forget this on your
assignments!
•
Every tag has a corresponding closing tag
•
Tags are properly nested
27
Anatomy of an HTML tag
• Example – the ‘h1’ tag:
<h1>This is a level 1 heading</h1>
• Tags are encased in ‘<‘ and ‘> brackets
– I usually call them “angled brackets”
• Every tag must be “closed”
• A closing tag has a forward slash ‘/’
– In the example above, the </h1> is the closing tag
Some key HTML Tags
<!DOCTYPE html>
 Tells the web client to operate in something called “standards” mode.
We will discuss this at a later point in the course.

This tag must be the very first line of your html file.
<html> … </html>
 Encases the entire HTML document – with the exception of the
DOCTYPE tag.
<head> … </head>
 Text in this part of the document is NOT displayed in the browser’s
window. It frequently contains tags such as <title>, <meta>, <script>
and others.
29
Some key HTML Tags contd
<title> … </title>
 Displayed in the browser’s title bar. It is also used as the default
bookmark description.
<meta charset=“utf-8”>
 Important for security purposes – will be discussed at a later point.
<body> … </body>
 The contents displayed in the browser’s window.
Everything that appears on the page is contained within these tags.
30
The “Heading” tag


An example of a ‘structure’ tag
Headings: <h1> … </h1>  boldest and largest
<h2> … </h2>
<h3> … </h3>
<h4> … </h4>
<h5> … </h5>
<h6> …. </h6>  lightest and smallest
31
Some other tags

Paragraph: <p> … </p>
A blank line is inserted before the paragraph.

Line Break: <br />

Horizontal rule: <hr />

Ordered lists: <ol> … </ol>

Unordered lists: <ul> … </ul>
32
An example – Note how white space is ignored…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title> IT 130: The Internet and the Web </title>
</head>
<body>
<h1>Important! (This is an H1)</h1>
<p>Notice that the ‘p’ tag places spaces before and after the paragraph.
</p>
<h3>Spacing test (this is an H3)</h3>
<p>Here I am
spacing
things widely.
Note how extra spaces do <em>not</em> make a difference.
I just left a blank line, but it doesn’t appear! (I need a ‘br’ tag!)
</p>
<p>Another paragraph!</p>
</body>
</html>
33
Styling Tags – what NOT to do
Visual syling should NOT be done using HTML. Instead, we will do our
styling using something called CSS.
So if you wish to underline, or change a color , or change a font, you
should not use HTML. While there are tags that let you do so, these
tags are being deprecated (phased out) and therefore should not be
used by a competent programmer. Some examples:
• Font
– <font> </font>
• Center
– <center> </center>
• Underline
– <u> </u>
To reiterate: Just because tags work, does NOT mean that it’s okay to use
them. Certain tags have been deprecated which means that they are being
phased out of the HTML standard. Later on in the course when we learn
about CSS, we will stop using deprecated tags.
35
Deprecated Tags
An HTML tag or attribute is said to be deprecated if it is the current
version of HTML but will be eliminated from future versions of
HTML.
There are numerous deprecated out there. So though they are still
technically part of HTML, their use is discouraged when writing new
web pages. In this course we are going to avoid using depracated
tags whenever possible.
The BEST way to find out which tag to use is via a reliable reference. A
great way to start is at: http://www.w3schools.com (Bookmark this
web page on your computer).
36
How to Ace this Course
• There is no magic formula.
• You do not have to be smart.
• You do have to do three things:
– Learn (lecture / read / study)
– Review
– PRACTICE what you have been learning
•
•
•
•
•
This is by FAR the most important of all
Even if you “think you got it”
Do lots of practice and you’ll do well.
Don’t practice and you will not do well.
Remember: There is no magic formula.
How to ace this course contd:
-
Watch the “yeah yeahs”
• The most dangerous thing you can do is to sit
there and think “yeah, yeah, I got this.”
• It is entirely possible you understand the
concepts – but you will quickly see that it is an
entirey different thing when you sit down to a
blank screen and try to make things happen –
particularly when the coding gets more involved.
Learning Web Design
The best way to learn HTML, CSS, and Javascript is by typing up files
yourself and modifying them, and experimenting as much as
possible.
Learning to program is like learning a foreign language. It’s not
enough to read the rules of the language.
There are no shortcuts or magic formulas. Believe me – if there were, I
would be the first one to tell you about them!
There is only one way – and that is:
PRACTICE!
39
Begin by working with your files locally:
• Create your HTML text and view it in your browser
before uploading them to your web account.
• Click on File  Open and navigate to your file. Or,
simply type the name of the file in the URL box.
Uploading your files to a web server using FTP



Once your files are ready to be published on the web, you will need to
copy (“upload”) them to the web server.
To move files between two computers on the internet, we will make
use of a protocol called “file transport protoco” or, ‘FTP’.
To use FTP:




The remote computer, (i.e. the web server) must be running FTP Server software’
The local (i.e. your) computer must be running ‘FTP Client software.
Just as there are many different kinds of http client software out there
(Safari, Firefox, etc), there are many different FTP clients out there aas
well.
The one I would recommend you download and use is FileZilla to
transfer the files to the students.depaul.edu server.
– See the ‘Resources’ page on the course web site for more
information.

THINK about what you are doing as you do this. There will be
questions on your exams to test your conceptual understanding of the
41
FTP process.
< / Lecture>