Lesson 1 | Lesson 2 | Lesson 3 | Lesson 4 | Lesson 5
History and development: see http://en.wikipedia.org/wiki/Internet for reference.
Basic Protocols
IP (Internet Protocol): defines the packets that carry blocks of data
from one node to another. Current version: IPv4. IPv6 is also standardized,
but exists only within "islands" of connectivity.
TCP (Transmission Control Protocol): the standard protocol by which data
is transmitted. TCP makes a virtual "connection", which gives some
level of guarantee of reliability.
Standard Internet Services (Application Protocols)
HTTP (Hyper Text Transfer Protocol) for the World Wide Web service (requires
a WWW server)
FTP (File Transfer Protocol) for uploading/downloading files (requires
a FTP server)
SMTP (Simple Mail Transfer Protocol) for sending email (requires a SMTP
and a POP3 server).
URL (Uniform Resource Locator): an Internet address, made of scheme
(= protocol type, like http:// or ftp://
) + address name + directory name (optional) + file name (optional)
For example http://www.apple.com or ftp://ftp.apple.com/macosx/utilities/
IP Numbers: a unique identification system, 4 Bytes long (each
Byte = 8-bit, from 0 to 255). Syntax: from 0.0.0.0
to 255.255.255.255, therefore a total of 4 228 250
625 possible addresses - many, but unfortunately not enough.
Normally each computer in a network (and also on the Internet) is identified
by a single IP number, but web servers can also use several different IP numbers,
one for each website hosted (the so called "virtual server" function).
Certain "areas" of the IP space are reserved for Local Area Networks
(LAN).
Computers really refer only to the IP numbers when exchanging information and
not to the domain names we use (like www.apple.com)
Domain Names: top level (*.com, *.net, *.org, *.de, *.at, etc.), second level (for example xenoplanet.com), third level (for example mozmedia.xenoplanet.com). Each level is separated by a dot ( . ).
DNS (Domain Name System) Servers: a special category of servers that "translates" plain text domain names in the "real" IP numbers. They are distributed all around the globe and use a complex system of intercommunication to remain synchronized with each other. It takes up to 48 h for update DNS information to propagate all around the Internet. This is why a newly registered domain might be reachable only through its IP number for up to 48 hours after registration. One all DNS servers have been updated, it can be reached using the domain name from all around the globe.
Exercise 1.1: find out the IP number of some standard server and use the IP number to connect
Exercise 1.2: connect to a public FTP server using Internet Explorer (ftp.apple.com, ftp.microsoft.com)
Exercise 1.3: connect to a specific FTP account (the ULG server)
Exercise 1.4: setting up a new site in Dreamweaver and connecting with the integrated FTP function
"Dynamic website" does NOT mean that it is using an animation (like a Flash movie or a Java Applet)! Both static and dynamic websites can use animated or interactive elements.
Static websites are based on simple HTML files linked to additional files (images, Flash movies, media, etc.). Their content is "static" in the sense that it cannot change depending on immediate parameters chosen by the user. There is a finite number of HTML files linked together, and they must be changed manually to update the information on the website.
Dynamic websites use a combination of script language (like CGI-Perl,
PHP, Microsoft's ASP.NET, MIVA, etc.), a database containing information (Microsoft
SQL, MySQL), visual templates for the graphic layout and additional files (images,
Flash movies, media, etc.). The HTML-like code displayed by the browser is created
"on the fly" by the server, putting together bits of information taken
from the database (text) according to the layout and design defined in the visual
templates.
A typical example of dynamic websites are online stores like http://www.amazon.com:
there you can search for specific information (for example a book or DVD with
a certain title) and the page that will be displayed (the search result) is
created "on the fly" for you, with just the information matching your
search criteria. Also search engines like Google or Altavista and large corporate
websites with hundreds of subpages for product information are database based
(it would be madness to create all those similar pages by hand) and can display
dynamic information created "on demand".
A Dynamic website can display an infinite number of "virtual" web
pages and to actualize the information (for example: adding a new product in
a online shop) it is enough to update the database and ev. upload an additional
image.
The Hyper Text Markup Language is a coding system that formats documents so they can be viewed in the World Wide Web. Even Dynamic websites deliver "HTML-like" code to the user browser, so that it can be displayed like a normal HTML page. The most important characteristic of HTML are the Hyperlinks, which make it possible to "jump" from one document to another, other between different parts of the same documents. It is possible to write HTML using a simple text editor (like Windows Notepad, or MacOS X Text Editor).
At the basis of HTML are the so called "HTML-tags". The structure
of HTML code is similar to that of programming languages, but easier to understand.
There are paired tags, which must be opened and closed again (for example:
<title>This is a page title</title>),
and unpaired ones (like <img> or <br>).
Some can be used both as paired and unpaired (for example: <p>
can be used alone, or in the form <p>this
is paragraph text</p>).
Some tags are used to define the main areas of an HTML document: for example
<html>, <head>,
<body>.
Some tags are used to format titles, paragraphs and bulleted lists: for example
<h1>, <h2>,
<h3>, <p>,
<br>, <ul>
and <li>
To format the text fonts: <font face="Font Type"
color="#FF0000" size="2">this is formatted text</font>
To display an image file: <img src="name_of_image.jpg">
A Hyperlink: <a href="http://www.apple.com>Apple
Website</a>
A mail link: <a href="mailto:contact@yourdomain.com">send
eMail</a>
A table with one row and two cells: <table><tr><td>some
text</td><td>more text</td></tr></table>
For a complete list and description of HTML tags visit:
When a browser access a folder or the root directory on a server and no HTML file is specified (for example, typing simply http://www.xenoplanet.com), the server first looks if there is a file called index.html , home.html or default.html (other possible termination: *.htm. With dynamic websites: *.cgi, *.pl, *.php, *.asp, *.mv etc.). So the first page we want to be displayed when accessing a site or directory should use one of these standard names. Typically this is called the "homepage" and has a menu and links to all other pages and sections within the website.
Links can be to other parts of the same documents (called Anchors),
to other documents on the same server or to documents located on a different
server (external links).
The syntax is <a href="http://www.apple.com>Apple
Website</a>
Local links can use one of the following path systems:
For example: if you are in the "main" folder and you want to link the file "contact.html", which is located one level up and then inside the "contact" folder, you would have to use the following syntax:
The advantage of using relative path links is that they work not only when the site is uploaded on the server but also locally (on the client hard disk). They also remain valid when moving all site files to a different folder, provided the folder structure within does not change. This means you can save the local site also on a CD-R and the links will still work, because they are relative to each other.
Root-based path links are the preferred method for pages that are only to be viewed online (on a server), as they have the advantage that even moving a HTML file to a different location, the links defined inside it (to images or other HTML files) do not require updating. However, links to the HTML file you moved must be updated in any case. Root-based paths do not work if you save the local site on a CD-R.
Whatever system you choose, make sure the complete website is following the same principle: use either relative or root-based links, do not mix them up.
External links always require the absolute path (the full URL ev. including folder and document name). Example of syntax:
<a href="http://www.mozmedia.xenoplanet.com/kontakte/">MozMedia</a>.
Target parameter: For external links, it is recommended to set
the optional link paramter target="_blank".
This forces the externally linked pages to open in a new browser window. In
this way you can avoid confusion between the content of your site, and the externally
linked sites.
Example of syntax:
<a href="http://www.mozmedia.xenoplanet.com/kontakte/" target="_blank">MozMedia</a>
There are additional target options, which are mostly used when working with frames:
Exercise 2.1: create a simple HTML document in a simple text editor and view it in a browser
Refer to the HTML tags above and to the example HTML file (editor.htm) for details.
To keep order in each website project, you should use a consistent structure and naming policy:
\src_docs\ for all document source files (MS-Word documents, etc.) \src_graphics\ for all graphic source files (for example, large formate pictures from scans, pictures from CD-ROM, etc.) \src_media\ for all media source files (WAV or AIFF uncompressed audio, large format MPEG or DV movies, etc.) \web\ for all the "final" website files that will be later uploaded on the web server - in this folder, you also create all subfolders later defined in "Filesystem structure of HTML documents"
Typical structures of HTML documents linked together are:
| A | > | B | > | C | > | D | > | E |
| A1 | — | B1 | — | C1 | — | D1 | — | E1 |
| | | | | | | | | | | ||||
| A2 | — | B2 | — | C2 | — | D2 | — | E2 |
| | | | | | | | | | | ||||
| A3 | — | B3 | — | C3 | — | D3 | — | E3 |
| Homepage | ||||||||||||||
| | | | | | | | | | | ||||||||||
| Group A | Group B | Group C | Group D | Group E | ||||||||||
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| A1 | A2 | A3 | B1 | B2 | B3 | C1 | C2 | C3 | D1 | D2 | D3 | E1 | E2 | E3 |
To organize large amounts of data it is usually best to use a hierarchical
structure (main menu, sub menus, etc.). But within a section (for example, to
explain how a shopping system works or to describe a product/service) a linear
structure might be more convenient (with just "continue" or "next
page" / "previous page" links).
A network structure can be very flexible, but it it possible to lose the orientation
if it is not also using some hierarchical organization.
You can also combine different structures together: for example hierarchical as basic structure for the navigation, with additional hyperlinks within the text paragraphcs that create a network-like connection between documents.
Website Folder Structure
To maintain a good overview of both HTML documents and Assets (= images, media, documents and files for download, etc.) that are part of a website it is a good idea to organize them in sub-folders, for example:
/ root directory (index.html and other main HTML documents) /img/ image files /docs/ document downloads (PDF, MS-Word, etc.) /media/ audio and video files (MP3, MPEG, Quick Time, etc.) /css/ Cascading Style Sheets /templates/ template files
All names used for folders, HTML and graphic files etc. within a website (= within the \web\ folder of your project folder) it is necessary to use some policy that avoid possible confusion and also the possible risk of "broken links". Just follow these simple guidelines:
Exercise 3.1: create a new site in Dreamweaver with subfolders
It is important to always keep the latest version of the files on both the Local Folder and the Remote Folder. Dreamweaver has an integrated file synchronisation utility (menu "Site > Synchronize") to make this easier. You can choose to upload the latest file versions on the server, or to download them from the server in case the local files are not up to date, or both upload and download the latest file versions.
When uploading/downloading a single HTML file, Dreamweaver always asks if you want to also transfer the "dependent files". These are usually images and CSS-styles linked to the main HTML document. It is usually convenient to answer with "yes" unless you are sure that all the dependent files are already up to date. Dreamweaver will not consider other HTML documents as "dependent" unless if they are part of a frameset (see Lesson 4 "Page Layout using Frames").
Lesson 1 | Lesson 2 | Lesson 3 | Lesson 4 | Lesson 5
© 2003-2004 Michele Gaggia - all rights reserved