HTML

Download Report

Transcript HTML 

Internet 1: The World Wide Web
* The World Wide Web
* HTML Basics
1
How we access web pages:
The web uses the client-server model of
networking:
A web client (e.g. Internet Explorer,
Firefox, Safari) makes an HTTP request
to a specific web server.
1.

2.
3.
Typically this is a request for a specific HTML file
The web server receives the request and
sends back the requested document
(which is usually an HTML page).
The web client interprets the information
returned by the server (e.g. the HTML
code) and displays it appropriately.
How to ‘serve’ web pages:
1.
Dedicate a computer to act as a ‘server’ to send
pages to web clients (browsers) when requested.
2.
Install server software that can respond to
requests for documents by ‘serving’ them to the
requesting computer.
3.
Create and upload the appropriate documents that
you wish to make available on the web.
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 web-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 – The Server Software:

A web server application (software) listens
(constantly) for HTTP requests and responds
by sending back HTTP responses.



This response is usually in the form of an HTML
document.
Other files may also be sent (e.g. PPT files, etc)
Several software companies publish web
server software

Some of the best known include: Apache,
Microsoft IIS (internet information services),
Tomcat
Web clients

Software that is capable of sending out
HTTP requests and interpreting HTTP
responses.

Recall that HTTP responses are usually (but not
always) sent in the form of HTML documents.

The most popular web-clients: Internet Explorer
(Microsoft), Firefox (Mozilla), Safari (Apple)
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.
7
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 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
8
Creating Web pages
In order to create your own web pages using your own HTML you
need:
 A text editor (e.g. Windows Notepad) – NOT a word processor!

An web browser for testing the pages
(e.g. Firefox, Internet Explorer, Safari, Opera, Chrome – or test
with ALL of them!)

A web server to store your files and make them available online
(students.depaul.edu)
9
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 to server
 Beyond the scope of this course
 See IT-130, HCI-201
Images: must also be uploaded
 All images should be in either .gif or .jpg formats
10
Basic HTML Terminology
Content
 the parts of the HTML file that the user reads and sees (text,
images, sounds, video, etc)
Tags
 HTML codes that control document appearance
 e.g. <p>,
<br>, <img src="picture.jpg">, etc
Attributes
 properties associated with a tag
 e.g. <img src="picture.jpg" width="50"
height="50">
Entities
 specially-coded characters
 e.g. &nbsp;
11
Our first HTML Tags:
Document tags




<html> … </html> Mark the beginning and end of the HTML file.
<head> … </head> Text in this part of the document is NOT
displayed in the browser’s window. It may include other tags like
<title> and <meta>.
<title> … </title> Displayed in the browser’s title bar. It is used as the
default bookmark description.
<body> … </body> The contents displayed in the browser’s window.
Everything that appears on the page is contained within these tags.
12
Outline of an HTML page:
<html>
<head>
<title>My first web page</title>
</head>
<body>
Hello world!
</body>
</html>
N.B.:
• Every web page should have the document tags <html>,
<head>, <title>, <body>
• Every tag has a corresponding closing tag
13
The “Heading” tag

Headings:
<h1> … </h1>  boldest and largest
<h2> … </h2>
<h3> … </h3>
<h4> … </h4>
<h5> … </h5>
<h6> …. </h6>  lightest and smallest
14
More tags

Line Break: <br />

Horizontal rule: <hr />

Ordered lists: <ol> … </ol>

Unordered lists: <ul> … </ul>
15
Example
<html>
<head>
<title> A Practice Web Page</title>
</head>
<body>
<h1>Important! (This is an H1)</h1>
<h3>Spacing test (this is an H3)</h3>
I just left a blank line, but it doesn’t appear!
</body>
</html>
16
A few ‘style’ tags

Emphasis



Strong





<em> </em>
rendered as italic
<strong> </strong>
rendered as bold
Center
 <center> </center>
Underlined
 <u> </u>
Many others…
17
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 path and name of the file in the URL
box.
Summary on uploading HTML files

Write the HTML file

View your resulting page in a web browser

Edit as needed

Transfer the HTML file to a web server.
19
Common elements seen in web pages:
Most HTML pages contain at least some of the following
types of tags:
–
–
–
–
–
Links (hyperlinks, email, etc.)
Images
Tables
Lists (bulleted, numbered, etc.)
Lines (horizontal rules)
20
Lists
Chicago Sports Teams
 Hawks
 Cubs
 Bears
 Bulls
 Fire
NL Standings
1. Cubs
2. Brewers
3. Cardinals
4. Astros
5. Reds
6. Pirates
21
Two types of lists
Unordered list <ul> </ul>
– Item 1
– Item 2
Ordered list: <ol> </ol>
1. Item 1
2. Item 2
22
Unordered lists
An unordered list (a.k.a. a bullet list) is created with the
tag pair <ul> … </ul>.
Each item in the list is created with the tag pair <li> … </li>.
This produces an indented list with a default character
(usually a small diamond) in front of each item.
23
Example
<html>
<head>
<title>Example Title</title>
</head>
<body>
<h1>Here is an example of a list</h1>
<ul>
<li>One item </li>
<li>Another item </li>
</ul>
<ul style="square">
<li>Another item </li>
<li>Another item </li>
</ul>
• First item
• Second item
• Third item
• Fourth item
</body>
</html>
24
Ordered lists
An ordered list is created with the tag pair <ol>… </ol>.
Each item in the list is created with the tag pair <li> …
</li>.
This also produces an indented list but the items are
numbered. The default is to number with 1, 2, 3, 4, . . .
25
Example
<html>
<head>
<title> Example Title</title>
</head>
<body>
<h1>Here is an example of a ordered list
</h1>
<ol>
<li>First item </li>
<li>Second item </li>
1. First item
2. Second item
</ol>
</body>
</hmtl>
26
The Anchor Tag:
Creating hyperlinks
One of the most important tags in HTML.
<a> … </a> tags are used to create hyperlinks to
– to external web sites
– other documents in the same web site
– to different locations in the same document (see
course web page – weekly schedule links)
** The attribute href indicates the destination of the link:
<a href="address">clickable text</a>
27
Some Anchor Tags
<a href="http://www.nytimes.com">New York
Times</a>
The text ‘New York Times’ is hyperlinked.
<a href="http://chicagocubs.com"><img
src="cubs_logo.jpg"></a>
The image of the Cubs logo is hyperlinked.
Don’t forget to close the hyperlink tag!
What would happen if you forget?
28
“URL” = Web Address
• URL: Uniform Resource Locator. It is an
address that specifies the location of a file
on the Internet.
• That is if someone says to you: “What is
the URL of that page?”, they are asking
you for the web address.
• E.g. http://www.nytimes.com
• http://students.depaul.edu/~login_name
Horizontal line
The tag for creating a horizontal line is <hr />.
You can use horizontal lines to improve the appearance of
your web page and to delineate sections.
30
Inserting images
An image is inserted using the img tag:
<img src="name of image file" />
Note the use of the end ‘/’
Be sure that your image has been copied to the SAME folder as your
HTML document.
e.g. <img src=“my_dog.jpg” />
–
–
The web page will display the image my_dog.jpg
The file my_dog.jpg must be in the same directory as your HTML page
31
Images: Bandwidth limitations
Image files consume more bandwidth than text files since
they can be considerably larger.
Users who access the Internet via slower connections
such as telephone lines will have to wait for image files
that are 100KB or larger
Try to minimize use of images over 100K.
32
Practice!!
• Be sure to play around with the various
tags we have covered in this lecture.
• While you do not have to memorize the
syntax of the tags, you will be responsible
for showing that you understand how to
use them.
< / Lecture>