Download Computer Science 101 - Washington and Lee University

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project

Document related concepts

URL shortening wikipedia , lookup

URL redirection wikipedia , lookup

Transcript
Computer Science 101
HTML
World Wide Web

Invented by Tim Berners-Lee at CERN, the
European Laboratory for Particle Physics in
Geneva, Switzerland (roughly 1989)

Wanted researchers to be able to “link” or
cross-reference each others research
papers

By mid 1980s we had DNS – domain name
service to map domain names to IP
address
WWW (cont.)

Berners-Lee developed a simple protocol,
HTTP – HyperText Transfer Protocol for
exchanging information via hypertext links

The documents themselves were to be
marked up using HTML – HyperText
Markup Language

HTML based on SGML - Standard
Generalized Mark-up Language which was
widely used in publishing industry
WWW (cont.)

Early 1990s World Wide Web ramped up

1993 – NCSA - National Center for
Supercomputers (University of Illinois)
released Mosaic browser

1994 – Netscape was formed
Important Web Programs

Web Server: This is a program that manages
web sites on server computers. The web server
accepts requests from other programs (clients)
asking for pages from the web sites.

Browsers: Programs like Internet Explorer and
Firefox that act as clients for web servers
requesting pages for the user and displaying the
returned pages.
HTML

HyperText Markup Language – HTML is used
to mark up a document to tell browser how it
should be displayed, nothing about content

Allows us to markup up text with special tags
that inform the web browsers how the
content should be displayed

For the most part HTML tags are placed in
“angle brackets” like <b> and occur in pairs
like
<b> Here is some text </b>
Some HTML tags

html – this tag together with its end tag enclose the
entire document

head – there are two sections to the document, the
head and the body. For the most part the head
section contains the title of the document

title – encloses the page title shown in title bar at
the top

body – enclose the body of the document,
essentially all of the displayed content
A Minimal HTML document
<html>
<head>
<title> Title of your page
</title>
</head>
<body>
All the good stuff goes here
</body>
</html>
More tags

h1 – There are six levels of headings in HTML,
numbered h1 through h6 with h1 being the
largest and boldest

p – Marks the beginning of a new paragraph.

ul – enclose an unordered list – bullet list

ol – enclose an ordered or numbered list

li – enclose an item in a list
Unordered Lists
Ordered Lists
Example HTML page
And in the browser
More tags

br – Causes a line break to occur. Does not use
an end tag
(Recommend: <br/>

hr – Causes a horizontal line to be drawn across
the page. No end tag.
(Recommend: <hr/>)

b – enclosed text is bold

i – enclosed text is in italics
The anchor tag

The anchor tags, <a> and </a>, are used
with links.
– To specify a link from a location in your page
to a location in current page or another page
on the web.
– To specify a location in your page that can be
linked to from another location in the current
page or from another page.
Making links – HREF Attribute

General form is
<a href = “URL”> link-phrase</a>
– URL (Uniform Resource Locator) is the web
address to link to
– link-phrase is the phrase to appear on your page
for the user to click in order to execute the link.
Linking to other places:
HREF attribute

Suppose we want to have a link on our
page to link to W&L’s home page. The
following markup will achieve this:
<a href=“http://www.wlu.edu”> My University
</a>
Locations that can be linked to:
Name attribute

In order to link to specific locations within a
page, these locations must first be given
names that are recognized by HTML.

To do this we use the anchor tag again, but
now using the NAME attribute rather than
the HREF attribute.
Linking to locations in same
page

General form is
<a name = “location-name”> Location-title</a>
where location-name is the name that will be
used in anchors that link to this location, and
Location-title will appear at the position
where the Name anchor is placed.
Linking to named locations in
same page

Example:
<a name=“Ch2”>Chapter 2 – Tree Algorithms</a>

Suppose we put the above tag at the
beginning of the Chapter 2 section of our
page. Then to link from another location to
Chapter 2, we could use any of the following:
<a href= “#Ch2”> Chapter 2</a>
<a href = “#Ch2”> Tree Algorithms</a>
<a href = “#Ch2”> Chapter 2 – Tree Algorithms</a>

Here the # indicates that we are linking to
an anchor location within the page.
Linking to named locations in
another page

Example:
<a name=“Ch2”>Chapter 2 – Tree Algorithms</a>

Suppose the named location above occurs in
“MyReport.html” and that we would like to place a link
to that location in “MyWork.html”. At the place where
we want the link, we could have
<a href = “MyWork.html#Ch2”> See Chapter 2 </a>
assuming these files are in same location. Otherwise,
use the full web address to MyWork.html.
Images

Here is an example for having
an image in the file
<img src =“TractorRide.jpg”>
Background Color

We can add a background color to our
web page by adding a bgcolor attribute to
the Body tag:
<body bgcolor = “value”>
 The value can be either a “known” color
or a color specified with the 6 hex digit
system.
Background Color (cont.)

There is a long list of “known” colors, but
only 16 that are guaranteed to validate
with all browsers:
aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white, and yellow

To specify a background color with hex
digits use the form
<body bgcolor = “#D454C8”>
for example