~ 1 ~

Introduction to

Name: _______________________ Class: __________________

~ 2 ~

Contents

Introduction ............................................................................................ 4

Internet protocols ................................................................................... 5

Web servers ........................................................................................... 6

Software installed in a web server ...................................................... 6

Internet protocols and client/server software ..................................... 7

Files in a web server ........................................................................... 7

When a resource is requested from an HTTP server ........................ 8

Design of a web site ................................................................................ 9

The inside of an HTML file ................................................................... 9

Directory structure of a web site ....................................................... 10

Navigation mechanism of a web site ................................................. 11

Layout of the web site ........................................................................ 12

Some Dreamweaver and HTML basics .................................................. 13

Simple formatting .............................................................................. 13

Headings and paragraphs ................................................................. 13

Hyperlinks ......................................................................................... 14

Images .............................................................................................. 14

Videos ............................................................................................... 14

Audio ................................................................................................. 14

HTML basics (not required in S3 examination) .................................. 15

Implementing a web site ...................................................................... 16

Using framesets ................................................................................. 16

The frameset document ................................................................. 17

Navigation ..................................................................................... 18

Other files ...................................................................................... 18

~ 3 ~

Previewing the web site................................................................. 18

Using Dreamweaver templates ......................................................... 19

Setting up a Dreamweaver site ...................................................... 19

Creating a template ....................................................................... 20

Creating other files ........................................................................ 21

Navigation and layout .................................................................... 22

Applying the layout ....................................................................... 23

Previewing the web site................................................................. 23

~ 4 ~

Introduction

After reading this set of notes, you will learn

(1) how files are uploaded to and downloaded from the internet; and

(2) how to prepare a web site.

~ 5 ~

Internet protocols

To communicate with other networking devices, networking devices

need to use the same methods (called protocols) for communications.

A lot of protocols are involved in network communications. According

to the Internet Protocol Suite, the protocols are divided into 4 layers.1

Protocols in the upper layer need one or more protocol in the lower layer

to function properly.

Internet protocols closely related to web sites are listed below:

Protocol Layer in the Internet

Protocol Suite

Use

IP (Internet

Protocol) 2 (Internet) Deliver network packets

based on the IP addresses

TCP (Transmission

Control Protocol) 3 (Transport) Provides reliable, ordered

and error-checked delivery

of data.

HTTP (Hypertext

transfer protocol) 4 (Application) The protocol browsers

communicate with web

servers.

FTP (File transfer

protocol) 4 (Application) Transfer files between

computers, often used to

upload web sites.

DNS (Domain

name system) 4 (Application) Translate domain names

(e.g. www.tanghin.edu.hk)

into IP addresses (e.g.

210.0.142.247).

1 Another classification is the OSI model, which divide the protocols into 7 layers.

Layer 4 (Application)

Layer 3 (Transport)

Layer 2 (Internet)

Layer 1 (Link)

~ 6 ~

Web servers

Web servers deliver web content that can be accessed through the

Internet. The most common use is to serve web sites.

Software installed in a web server

Communications between browsers and web servers takes place using

HTTP, and therefore a HTTP server is installed in the web servers. In

addition, there should be some way (e.g. FTP) to let web site authors to

upload contents to the server. Below are a set of typical software installed

with a web server.

Type of software Name of software

Operating System (OS) Linux (centOS, Ubuntu)

HTTP server Apache

Web site administration vsftpd (a FTP server)

Samba (CIFS)

Programming language

(server-side scripting) Php

Database server

(used by programming languages) MySQL

Usually, a programming language and a database server are installed

to enable serving of dynamic web pages. The use of these types of

software is out of the scope of the notes.

~ 7 ~

Internet protocols and client/server software

To access files in web servers, we need to use client software that

implements the internet protocols. Similarly, server software is also

needed in servers to allow clients to connect to the server. Here is a list of

protocols and their corresponding software:

Protocol Client software Server software

HTTP Google Chrome

Mozilla Firefox

Internet Explorer

Apache

FTP FileZilla

WinSCP

Windows Explorer

browsers (read only)

vsftpd

CIFS Windows Explorer (as network

drives, like P drive in Tang Hin)

Samba

Files in a web server

The same file in the server can be accessed using different protocols.

The server software of each protocol implements a different file structures.

Protocol Typical path of a file named [file]

(Internal storage in web server) /home/S123456/public_html/[file]

HTTP http://[domain]/~S123456/[file]

FTP /public_html/[file]

CIFS P:\public_html\[file]

Note: The “\” symbol is used in Windows instead of “/”.

Web site administrators normally use FTP to upload files to a web

server.

If possible, CIFS is also used to allow easy access of the files in

Windows Explorer. However, CIFS can be used in intranets only (e.g.

inside the school campus).

Users of a web site access the uploaded files with a web browser, such

as Google Chrome and Mozilla Firefox. Browsers communicate with web

servers mainly using HTTP.

~ 8 ~

When a resource is requested from an HTTP server

The table below shows the typical results when an HTTP server is

queried. (Note: these are based on the configuration of the server

student.tanghin.edu.hk . Exact configurations of individual web servers can

be different.)

Requested resource Return

A file The requested file

A directory index.html

If “index.html” is not present, the list of

files in the directory is shown.

A resource (file/directory)

which is NOT present The error message “Not Found (404)”.

~ 9 ~

Design of a web site

When you are starting a new web site, you need to consider the

following first:

How to manage the contents of the web site? (In you first web site, a

set of static HTML files are used, i.e. no management is done. In the

future, you may use a CMS, a static site generator, or a wiki.)

How the content is organized. Put them into a good structure of

directories. You should also decide where to store images and other

non-text files.

The navigation mechanism.

The layout of the web site.

Typography, i.e. the fonts and the paragraph style. There are a lot of

good fonts in English, but choices are few in Chinese.

The inside of an HTML file

Even if we are not required to recite the details of an HTML file, we

should know a few basic concepts by looking at a simple HTML file.

<!DOCTYPE html>

<html>

<head>

<title>This is a title</title>

</head>

<body>

<p>Hello world!</p>

<p><a href="http://www.google.com/">A Link to Google!</a></p>

<img src="images/sunset.jpg" />

</body>

</html>

The HTML at the top is a document titled “This is a title”, with the

message “Hello world!”, a link to www.google.com with text “A link to

Google!”, and shows an image with a relative file name

“image/sunset.jpg”. There are a few notable points:

An HTML file can contain hyperlinks to different pages and web

sites. Instead of listing everything in a single page, you can separate

the information into many pages.

Formatting in an HTML file is controlled by tags, such as <p>, <img>,

and others.

An HTML file is a text file. It is not possible (or at least not practical)

to include non-textual information such as images, videos and

~ 10 ~

sounds. We link to the non-textual files instead. (Like

“images/sunset.jpg” in the example above.)

As a conclusion, web pages behave very differently from files

produced by a word processor. Instead of a single DOC file, we have a lot

of HTML files, images, videos, sounds, and possibly other types of files.

Therefore, we need to implement a good directory structure in order to

manage the files systematically.

Directory structure of a web site

Usually we put files with the same type together. Here is a guideline

below. Note that all directories are relative to the root of the website (i.e.

“/index.html”)

Directory (relative) Files to be placed

/ HTML files

/images Images (JPG and PNG)

/styles CSS style sheets (if any)

/media Videos and sounds

/scripts JavaScript files

/fonts Web fonts (if any)

Note that it is NOT advisable to put HTML files in separate directories,

because it is difficult to handle the relative paths unless you are using some

kind of automation. If necessary, use name prefixes instead.

~ 11 ~

Navigation mechanism of a web site

For beginners, it is easiest to organise the web site into a hierarchical

structure, like the picture below. Of course, in your first web site, there

should be only a few pages, so the navigation tree is likely to have one

level only.

(Source: http://fcit.usf.edu/websites/chap4/chap4.htm)

As stated before, it is not a good idea to put HTML files into different

directories. Instead, use the same prefix for the files in the same group. For

example:

Item Filename (all inside “/”)

Sunny Skies Elementary School

Web Site index.html

School Information schoolinfo.html

- Principal’s Message schoolinfo_principal.html

- Mission Statement schoolinfo_mission.html

School Policies schoolpolicies.html

- Dress Code schoolpolicies_dresscode.html

~ 12 ~

Layout of the web site

There are countless ways to design the layout of the web site. However,

there are something common in general:

Layout Item Uses

Site title This can be made with or without pictures or a logo.

Content area Every page must have some content. Show the content

in the same place in every page.

Navigation There should be a way to navigate in the web site.

Use of colours Black text on white background is too crude for a web

site. So there should be some change. Note that

headings can have different colours.

Use of fonts If your website is in Chinese, you are stuck with just a

few fonts. (Three for Windows, one for mobile phone.)

However, if your website is in English, you can choose

from a huge list of fonts. (Google Fonts provides more

than 600 free fonts.) To ensure consistent view over

different computer systems, you can even put the fonts

into the web site.

Typography Besides the font, you can also use different font size,

font styles, effects, etc.

~ 13 ~

Some Dreamweaver and HTML basics

Dreamweaver is a WYSIWYG web site editor. It is easy to edit your

page in Dreamweaver because you can edit the text with a GUI, instead of

manipulating the underlying HTML code. You can see the interface of

Dreamweaver CS 4 below.

Simple formatting

You can simply type the text in the “Design view”, and see the HTML

code appear at the “Code View” at the same time. A few styling are

available as toolbar buttons, such as bold, italic, unordered list (bulleted

list) and ordered list (numbered list).

Headings and paragraphs

You can apply 6 different levels of headings (“Heading 1” to “Heading

6”) in your document. Headings have a larger font size and a different font

style. Always use “Heading 1” for the top level headings, and you may

format the style of “Heading 1” later.

Simple formatting

Browse for File

(Insert hyperlink)

Headings

~ 14 ~

Hyperlinks

After you have saved a few files (remember to save them in the same

directory), you can create hyperlinks. Just select the required text, and

press the “Browse for File” button, and finally open the required file.

After you have created the hyperlink, you can still edit the text in the

hyperlink.

You can also link to non-HTML files (such as a Word Document). Just

remember to add the file into the site directory before creating the link.

Files outside the site directory are not uploaded to the server, and hence

not accessible by readers.

Images

You can add images into the HTML file using the “Insert → Image”

command. Note that the command only adds a reference to the image file.

It means that you should only add the files inside the site directory

(preferably inside “/images”).

Image file formats supported by browsers are JPG, PNG and BMP. You

should prepare the image file by an image processing software, and resize

the image correctly before putting it in the site directory.

Videos

Dreamweaver does NOT provide a modern interface to insert video. (Its

interface is outdated.) You should simply upload your video to a hosting

service (e.g. Youtube, THTV, etc.), and copy the HTML code provided by

these servers into your HTML files.

Audio

Similar to a video, an audio should not be added using the GUI in

Dreamweaver. You can add an “audio” tag to link to the file by yourself.

Below is an example of the <audio> tag:

<audio src="audio/file1.mp3" autoplay="autoplay" controls="controls" loop="loop">

Your browser does not support the <code>audio</code> element.

</audio>

~ 15 ~

The table below shows the use of some of the attributes:

Attribute Use

src The file to be linked to

Autoplay (autoplay="autoplay")

If present, the file plays automatically without user

interaction. (Remove the attribute if not needed.)

Controls (controls="controls")

If present, shows an interface that let the user to

control playback. (Remove if not needed.)

Loop (loop="loop")

If present, the audio replays after reaching the end.

(Remove if not needed.)

Note that only MP3 files are supported by all modern browsers.

You may go to the following URL for more information of the <audio>

tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio

HTML basics (not required in S3 examination)

As seen above, the format of web documents are in HTML. So it is

important to recognise a few HTML tags:

Tag Use

<html>…</html> Mark the beginning and the end of the HTML

document.

<head>…</head> Mark the head section, which includes the title,

text encoding, <base> tag, CSS files and scripts.

<base> Set the base path and target. Very useful for

frameset web sites.

<title>…</title> The title of the web site.

<body>…</body> The body section. This include all the text shown

in the web page.

<h1>…</h1> to

<h6>…</h6>

Heading 1 to heading 6.

<b>…</b> Bold

<i>…</i> Italic

<p>…</p> Paragraph

<img> Image

<a> Anchor (including hyperlinks in “href” attribute)

In the tags, attributes can be added to convey extra information. For

example, in <a href="http://www.google.com">Google</a> , the “href”

attribute includes the URL to be linked to.

~ 16 ~

Implementing a web site

In this set of notes, we construct the web site using Dreamweaver.

There are a few ways to implement the web site. Or more specifically,

methods to create the navigation in the web site effectively.

You should read the following section briefly, and select one of the

methods to create your project. This whole section is not required in

examinations.

All of the designs below use the following layout:

Using framesets

A web site with frameset is an obsolete design (being obsolete starting

from the early 2000s). It is obsolete because we cannot show a page inside

the website by typing its URL. However, it is the easiest kind of web site to

set up.

Since the design is obsolete, it is quite difficult to set up a new frameset

website in Dreamweaver. Instead, we normally use Microsoft FrontPage

(up to 2003) to create a frameset website with ease.

Since we don’t have a working installation of FrontPage, the files

needed are simply provided to you.

Header

Navi-

gation

Content

~ 17 ~

The frameset document

First of all, we should set up the frameset HTML. You should create a

text file called “index.html”, and copy the following HTML code inside.

(If the file is not empty, just remove all contents from that file.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Title of the Web Site</title>

</head>

<frameset rows="80,*" cols="*" frameborder="no" border="0" framespacing="0">

<frame src="header.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />

<frameset rows="*" cols="120,*" framespacing="0" frameborder="no" border="0">

<frame src="nav.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />

<frame src="main.html" name="mainFrame" id="mainFrame" title="mainFrame" />

</frameset>

</frameset>

<noframes><body>

</body></noframes>

</html>

When you copy the contents, you should change the double underlined

parts of the document.

Change From Change To

Title of the Web Site The title of your web site

80 The height of your website header

120 The width of your navigation area. (Note: an

English web site needs a wider navigation than

a Chinese web site.)

In the frameset document above, some words are dotted. Those are the

HTML files are referenced. You can create all these documents as “Blank

Page → HTML → <none>” in Dreamweaver. Here is the use of each file:

Filename Use

header.html The header of your web site. Contains the site title. In most

web sites, a logo and a background image are also added.

nav.html The navigation of the web site. (Refer to the section

“Navigation” below.)

main.html The main content of the front page. (Also called the home

page or the landing page).

~ 18 ~

Navigation

The navigation in a frameset website is done entirely in the left frame,

which shows the file “nav.html”. You may copy the HTML code below to

the file directly. (It is simply an empty HTML file with the tag <base>

added.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<base target="mainFrame" />

<title>Untitled Document</title>

</head>

<body>

</body>

</html>

Other files

All other files, including “header.html”, “main.html”, can be created as

“Blank Page → HTML → <none>” in Dreamweaver.

Previewing the web site

To preview a frameset web site, we simply open “index.html”, and

click a link that opens the required file. If there is no such link, you should

create one in “nav.html”.

~ 19 ~

Using Dreamweaver templates

If you want to create a modern web site, you should include the

navigation in every HTML file. In order to make the contents in all the files

the same, we need to Dreamweaver templates (or another method of your

choice) to synchronize the common parts of the HTML files.

Setting up a Dreamweaver site

The first step to use Dreamweaver templates is to set up a new site. In the

pull-down menu, select “Site → New Site…” to see the dialog box below.

Then simply enter a site name, and set the correct “Local root folder” and

“Default images folder”. (Create these folders/directories before the “New

Site…” command. Remember that the images folder MUST be inside the

root folder.)

You may skip the rest of the configurations until you think that it is

necessary.

~ 20 ~

Creating a template

The next action is to create a template. Now select “New Document”,

and choose the setting shown in the picture below, and press “Create”.

Then select everything (Ctrl + A) inside the box with the words “Main

Content”. Select “Insert → Template Objects → Editable Region”, or press

the shortcut key Ctrl + Alt + V. You should name the region “Content”.

After that, you can save the file and edit its contents later.

Warning: Do not rename the file in Windows Explorer. If you want to

rename the template, do it in Dreamweaver.

~ 21 ~

Creating other files

After creating the template, you can create HTML files using that

template. You may refer to the screen shot below.

Only the editable regions in the HTML file can be edited. The other

parts are pulled from the template. Remember to set the page title in

every page inside “Page Properties…”.

You should also note that readers of your web site always go to

“index.html” first, so make that file your front page.

~ 22 ~

Navigation and layout

Navigation is entered in the template. Once you have entered the

template, all the edits in the template is synchronized to all HTML files in

your web site.

You can edit the layout of the site in the same manner. In “Page

Properties…”, you can change the style of headings and also the

background colour of the web site.

For other parts of the layout, select

from the pull-down menu “Window →

CSS Styles” to open the style pane.

Experiment with all the rules,

especially those with a “#” character.

Double-click on a rule to edit the layout.

By modifying the background colours of

each rule, you will soon find out what

parts of the web page they link to.

CSS layout is very powerful. If you

are willing to learn CSS, you can be able

to apply styles not available in

Dreamweaver (such as text shadows,

transformations, animations).

Try every of these rules

~ 23 ~

Applying the layout

If the content of your page is not updated automatically, you can apply

the update manually by selecting “Modify → Templates → Update Pages…”

in the pull-down menu.

Just select “Entire Site” and then “Start”. Now all your HTML files are

updated.

Previewing the web site

To preview a non-frameset web site, just open the corresponding HTML

file, or you can use the “Preview in Browser” function in Dreamweaver.