Lecture 1: Introduction

A network is a group of computers that are linking together in order to share information. A local area network (LAN) is a group of computers that are relatively close together; a wide area network (WAN) are further apart. The internet is the largest WAN.

Often there is a host or server that makes resources available to the other computers which are called clients.

The first WAN was called ARPANET and connected the computers at UCLA and Stanford by a phone line. Today many more computers (and phones and pdas etc) are connected in a wide variety of ways.

The World Wide Web (WWW) was initially conceived by researchers at CERN who wanted to be able to share information with other research facilities around the world.

Hypertext is a way of organizing the way information is presented. Hypertext allows they user to progress through a number of pages in the order the user wishes to, rather than a predetermined order.

The way this is done is with hyperlinks (links) which are the things that allow you to move through a variety of pages (or to different points within the same page).

An entire collection of linked documents is a web site and the hypertext documents are web pages.

Hypertext Markup Language (HTML) describes the structure and content of a document. It is not a programming language, although you can use some programming languages within it. It is also not a formatting language like desktop publishing uses. It also doesn't necessarily tell you how a particular browser will display a document.

The first versions of HTML were not standardized, which meant that anyone who wanted to add extensions or make changes to the language did. This then meant that not all pages displayed in all browsers.

Extensible Hypertext Markup Language (XHTML) is part of a family of XML languages and is an extended form of HTML.

Eventually, the World Wide Web Consortium (W3C) created standards that all browsers had to follow. The W3C has no enforcement powers, but standardization is in the best interests of everyone who uses the web. See "http://www.w3c.org".

URL means Uniform Resource Locator – it is the standard way to specify where a document or other resource is on the internet.

A few terms and an example.

An element is a distinct object in a document, ike a heading, a paragraph, a title, etc.

The basic item in HTML is the tag. A tag is used to mark each element in a document. Tags can be either two-sided or one-sided. A two-sided tag contains some document content. This looks like:

<element> content </element>

<p>This is a paragraph</p>

A two-sided tag is also called a container tag.

HTML can be any case (<p> or <P>), but XHTML requires lower case tags, and it is better to follow the convention of using lower case.

A one sided tag has no content, and is called an empty element. An example is a line break:

This would be a line break: <br> and we will insert one.

In older HTML, a one-sided tag may not have a slash at its end. That is, we might have <element> instead of <element/>. This should still work.

A third type of tag is a comment tag which allows you to add notes to your HTML code, but are not displayed in the browser:

All tags may be spread over multiple lines. The browser ignores white space, compressing multiple spaces wth one space, but you can use it to make your HTML source easier to read and understand.

Element attributes can be used to control the behavior and appearance of the the contents.

One sided tags:

Two sided tags:

<element attribute1=”value1” etc> content </ element>

Make certain you use the double quotes. Browsers are not all equally fussy, but we want our web pages to work everywhere.

General structure of an HTML file

< /html>

An html document is divided into two parts, the head and the body. The head element contains information about the document and is not displayed in the browser. The body element contains all of the content that is to be displayed in a browser, along with information on how that content is to be displayed.

<html>
<head>
<title> A first web page < /title>

< /head>

<body>

<-- content goes here -->

</body>

< /html>

You use a text editor, not a word processor to create an html document. The file should be saved with a .htm or .html extension.

<html> 
<head>
<title> First Demonstration Page</title>


</head>

<body>

<-- content goes here -->

</body>

</html>

A block-level element has content that is displayed in a separate section within the page, an inline element is part of the same block that surrounds it.

Paragraphs and headings are block-level elements.

A paragraph is set off by
<p> content </p>
And this will force a blank line to set off the paragraph.

HTML has 6 heading elements that are numbered h1 through h6 with h1 being the largest and h6 the smallest

<hn> content </hn> where n is 1-6

By default, headings (everything) is aligned left. You use styles to control the appearance of an element.

"text-align" is used to line up the contents of text horizontally. The options are "center", "left", "right", and "justify".

<h1 style=”text-align: center”> Title of my page </h1>

Lists

We create lists using tags including <ol> and <ul>

An ordered list is displayed with sequentially numbered items.

Ordered
<ol>
<li>content 1</li>
<li>content 2</li>
<li>etc</li>
</ol>

An unordered list is displayed without numbering the items.

Unordered

<ul>
<li>content 1</li>
<li>content 2</li
<li>etc</li>
</ul>

You can also nest one list inside of another.We can change the style of a list.

The default styles of lists are either numbers or bullets, but you can specify different styles by using the "type<" attribute in the list tag:

<ol style=”list-style-type: lower-alpha”>
<li>content 1</li>
<li>content 2</li>
<li>etc</li>
</ol>

<ul style=”list-style-type: circle”>
<li>content 1</li>
<li>content 2</li
<li>etc</li>
</ul>

See your text book page 26 for the other options.
You can also use a picture or graphic by using
list-style-image: url(file-name)

We can also create a definition list.

This list has a list of terms followed by a definition.

<dl>
<dt> first </dt>
<dd> definition of first </dd>
<dt> second </dt>
<dd> definition of second </dd>
</dl>

Some other block-level elements:

<address> This is italicized </address>
<div> This is a generic block-level item </div>
<pre> retains all white space and
any special characters like < or > in preformatted
text. </pre>

Inline elements allow us to format portions of text, like boldface or italics:

<b> boldface text </b>
<i> italic text </i>
<kbd> fixed width text </kbd>
<q> Quoted text </q>
<samp> fixed width text for sample computer code </samp>
<big> bigger text </big>
<small> smaller text </small>
<strong> boldface text </strong>
<sub> subscripted text </sub>
<sup> superscripted text </sup>
<var> italicized text to show computer code variables </var>

Some other elements

Many of the inline elements overlap: different elements that do what looks like the same thing. They can be thought of as Logical and Physical elements.

A logical element describes the nature of the enclosed content, but not necessarily how it should appear.

A physical element, though, describes how the content should appear, but does not describe its nature.

Use logical elements to describe content whenever possible and use physical elements for general text.

We can insert a graphic:

<img src=”file” alt=”text” />
where file is the name of an image file (usually a gif (graphics interchange format) or a jpg (joint photographic experts group))
and text is the alternative text that the browser will display in place of the image.

We can insert a horizontal line:

< hr >

For instance:

We can modify the color and size of the line with
color: color
background-color: color (can be either a recognized color name or an RGB color value)
width: value in pixels (or percent of page width, default is width of page)
height: value in pixels (default is usually 2 pixels)

Different browsers will display horizontal lines differently!

Meta elements are placed in a document's head and contain information about the document.
<meta name=”text” content=”text” scheme=”text” http-equiv=”text” />

where name attribute specifies the name of a property for the page and the content attribute provides a value. The scheme attribute provides the format of the property value and the http-equiv attribute takes the place of the name attribute for some web servers.

Special Characters

When you need to have special characters like < or > included in your web page, you can use

&code;

where code is a name or number (numbers are preceded by #), as in:

&copy - copyright symbol
&reg - registered trademark symbol
&lt, &gt - < >
&amp - ampersand (&)

Return to main