Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
94 views

An Introduction To HTML

The document provides an introduction to the World Wide Web and HTML. It describes how the Web consists of servers and clients that communicate using HTTP. HTML pages contain tags that specify logical structure and formatting separately. Key HTML tags include headings, paragraphs, lists, links, images, and comments. Links can point to other locations within the same page or other pages/sites using URLs.

Uploaded by

feezy1
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
94 views

An Introduction To HTML

The document provides an introduction to the World Wide Web and HTML. It describes how the Web consists of servers and clients that communicate using HTTP. HTML pages contain tags that specify logical structure and formatting separately. Key HTML tags include headings, paragraphs, lists, links, images, and comments. Links can point to other locations within the same page or other pages/sites using URLs.

Uploaded by

feezy1
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 19

An Introduction to Web Design

The World Wide Web


The World Wide Web (the Web, for short) is
Hypertext spanning the Internet.
Hypertext is a special kind of computer
document in which certain words act as links (or
hyperlinks) that take you from one part of the
document to another.
The World Wide Web is like an extended kind
of hypertext because when you click on a
hyperlink, it may take you
(a) to another point in the same document or
file; (b) to another document/file on the same

computer; or (c) to a document on another


computer!
The WWW consists of machines on the
Internet called servers and clients. Special
workstations on the Internet called Web servers
provide information to any machine on the
Internet that requests it (this machine is known
as the client).
The requested information is returned by the
server (to the client) in a format known as
HTML.
The clients browser is the software that makes
the request to the server, and the browser on the
client machine displays the HTML that is
returned.

The Hypertext Transfer Protocol


The protocol (or language) used by Web servers
to communicate is called the HyperText
Transfer Protocol (HTTP).
HTTP is the way in which two machines on the
Internet can communicate in sending Web pages
back and forth.
Another way of looking at a Web server and a
Web client is that both are special machines
running the HTTP software.

The HTTP protocol incorporates in it the ability


to understand and run applications based on
other protocols:

telnet (Access to other machines on the

Internet)
ftp

(File transfer)

nntp

(Usenet news)

smtp

(Email)

gopher

(Gopher servers

Web browsers
Browsers are software that are used to
view

web

content,

Many

different

browsers can be used to access the


Web.

Uniform Resource Locators


A Uniform Resource Locator (URL) is a way of
specifying some information that is to be loaded
into a web browser.
It can be thought of as an extension to the notion
of a filename, in that you can specify a file not
just on a particular machine, but on any machine
in a network.
To

quote the URL primer: If its out there, we

can point at it.

Each time you start up a web browser, you

need to specify a URL which gives you your


home page.

What is HTML?
HTML stands for HyperText Markup
Language.
HTML is a specific instance of a
markup language based on a standard
known

as

Standard

Generalized

Markup Language (SGML).


HTML documents are ASCII text files
that

can

be

edited

using

simple

editors such as notepad and textpad.


HTML allows you to specify the document
specification separate from the formatting rules.

HTML is used for the document specification,


that is, it is used to specify the logical structure
of the document.
For example, we can mark some text as being a
section header without any specification of what
the header looks like.
Format

information is provided separately.

For example, we can provide a format

specification for a section header, specifying


that it should appear as a 14 pt. font in boldface,
left-justified.
The basic idea is that a presentation program
(Netscape is an example of such a program)
takes the HTML specification and a format
specification and creates the actual document.

HTML Rules
An HTML document is built upon ASCII text
that has been marked up with tags looking like:
<TAGNAME>

and
</TAGNAME>

The purpose of these tags is to specify an


device-free .For example, first level headers
would be marked as:
<H1>ThisisaFirstLevelHeader</H1>

Overall structure of an HTML file

The overall structure of an HTML file is shown


below.
It

consists of a header part and a body part.

<HTML>
<HEAD>
<TITLE>AbasicHTMLfile</TITLE>
</HEAD>
<BODY>
<P>Thisisasampleparagraph.</P>
</BODY>
</HTML>
Note the indentation: each beginning tag is indented the
same number of spaces as the corresponding ending tag.
This is not required, but helps the reader of the HTML.

HTML tags

Most HTML tags come in pairs, an opening tag


and a closing tag.
For example, <H1> and </H1> are used to
enclose text that is tagged as heading level one.
Some HTML tags appear by themselves.
For example, <BR> is a break tag; it indicates
that a line break should occur at that point.
Some HTML tags can be written either way.
For example, a paragraph tag <P> can be used
by itself or in opening and closing fashion:
<P>...</P>The

most basic structure of a simple

HTML file is a series of section headers of


varying levels with paragraphs in
between.

Headings are denoted as <H1>, <H2>, up to

<H6>.

The are followed by sequences of paragraphs

(denoted by <P>and </P>.

Italicized words are created using surround it

by <I> and </I>; boldface by using <B> and


</B>.

Here are some standard HTML tags:


<UL>foranunnumberedlist.
<LI>foraniteminalist.
<OL>fornumberedlists.
<PRE> for preformatted text (fixed

widthfontsareused).
<TT>typewritertext(fixedwidth).

Hypertext

The HTML commands that we have seen so far


do nothing more that allow for media-indepent
formatting of text. We want to add links into our
HTML document that will allow us to turn the
document into a hypertext document.

A simple hypertext document is one where

clicking on a special highlighted word (called a


hypertext link) will take us to another part of the
document).

An example of simple hypertext is the on-line

help that you get with Microsoft Windows or


Microsoft Office.
HTML extends hypertext so that it spans the
Internet

HTML hypertext links are implemented through


anchor tags: <A...>and </A>.

Anchor tags are an example of a new kind of

tag that
we have not seen: tags wit Anchors are special
tags that create a hypertext link, for example:
<AHREF=OtherDoc.html>Subject<A/>

The HREF specification is used to give another


URL.

HTML hypertext
There are three kinds of targets for an anchor
HREF.
Another

location within the same HTML file.

Another

HTML file on the current machine.

A URL link

to:

An

HTTP server

A FTP server
A Gopher

server

Links
The most basic facility of HTML (and Web
browsing) is the ability to cause words, images,
icons, etc. to become links to other locations;
these locations can be:
Other locations within the same HTML
document.
Other locations within the same http server
as the one on which the Web page for the
current link appears.

Other locations on the Web (other Web


servers).

Linking to another location in a


document
To link to another point in the same document
do:
...
<body>
...
<ul>
<li><ahref="#Intro">Introduction.</a>
<li><ahref="#Staff">Thestaff.</a>
<li><ahref="#Public">Public</a>
</ul>
...

<aname=Intro>Introduction</a>
...
</body>

Linking to another file


To link to another file do:
...
<body>
...
<ahref=file.html>Pressheretogo.</a>
...
</body>

Linking to another site

To create a link that takes you to any other Web


server, you give a complete URL:
...
<body>
...
<ahref=http://hoohoo.ncsa.uiuc.edu>
PressheretogotohoohooatNCSA.
</a>
...
</body>

Other HTML tags


Other tags include:
Definition

lists: (<DL>, <DT>and <DD>)

Blockquote: (<BLOCKQUOTE>)
Citation: (<CITE>)
Program

code: (<CODE>)

Horizontal

rule (produces thin line): <HR>

Comments: <!putanythinghere>

Working with images


Images can, of course, be loaded into a Web
page using HTML commands; there are several
uses for images.

Pictures: the image is there only as a piece of

art with no other functionality.

Buttons: when the image is clicked on, some

action occurs (it may be a link to another site).

Image maps: image maps are images that are

broken up in logical areas each of which acts


like a seperate button (anchor).
You can include images into your HTML
documents using the <IMG>tag.
In

your Web page do a:

<IMGSRC=file.gif>

A standard source for some basic icons is in:


ServerRoot/icons
Note

that many different graphics files formats

are understood: gif, tiff, jpeg, etc.

You might also like