World Wide Web Documents (HTML)

World Wide Web Documents (HTML)

Fall 2002Computer Networks

Applications

Displaying Web documents The display hardware varies:

Color and black and white monitors Monitors may display text only, or text and

pictures; To cope with the heterogeneity:

Web pages are written in a dedicated language (HTML) that gives guidelines about the presentation;

A browser translates the specification into commands specific to a given display hardware;

Web pages may appear differently on different computers.


Applications

HTML Acronym for HyperText Markup Language; Contains instructions that tell a browser how to

display the information, like: Start a line, or a paragraph, or a list, or a table; Embed a link, or an image;

These instructions are included in tags, i.e. between “<“ and “>” symbols;

EX: <BR> instructs the browser to insert a new line; <HTML> marks the beginning of a HTML document; </HTML> marks the end of a HTML document.


Applications

HTML Tags Each HTML document is divided into two

parts: Heading:

starts with <HEAD> and ends with </HEAD>; Contains, for example, the title of the document; Heading info is displayed separately;

Body: Starts with <BODY> and ends with </BODY>; Contains the main part of the documents,

displayed in the browser window.


Applications

A first HTML example<HTML>

<HEAD><TITLE>

Some of my favorite things…</TITLE>

</HEAD><BODY>

Here are few of my favorite things:raindrops on roses and

whiskers on kittens;bright copper kettles and

worm woolen mittens</BODY>

</HTML>


Applications

Note The browser displays the previous example

differently: namely, spaces and new lines are not taken into consideration;

A browser has the freedom to choose an appropriate form the concept is called free format input.

Tags were written on separate lines with capital letters; Neither is required; But, it makes a HTML document easier to

understand.


Applications

Formatting tags <P> instructs the browser to start

a new paragraph (there is an empty line between paragraphs)

<BR> instructs the browser to start a new line;Here are few of my favorite things: <P> raindrops on roses and <BR>whiskers on kittens; <BR> bright copper kettles and <BR> worm woolen mittens.


Applications

Lists Ordered lists:

Tags <OL>, </OL> surround the list; and <LI> precedes an individual item.

Unordered lists: Tags <UL> and </UL> surround an

unordered list; and <LI> precedes an individual item.


Applications

Using FrontPage to make a List Try editing the example using

FrontPage; Notice the views (the tabs on the

bottom of the page): Normal, HTML, Preview


Applications

Backgrounds One can specify a color for the

background or an image. EX:

<BODY BGCOLOR=WHITE>

In FrontPage: Change the background color using: Format/Background;


Applications

Links To denote a link to another document a

word (or a group of words) is surrounded by the tags <A> and </A>.

To specify the page to which a given link points the <A> tag contains the keyword HREF followed by = and the URL of the page in quotes.

Ex: try adding the following line:The lyrics off “My favorite things” can be found

<A HREF=“http://www.niehs.nih.gov/kids/lyrics/favorite.htm”> here </A>.


Applications

Inserting a Link using FrontPage (Project 5) Add a link to a page residing on a different

computer: Select the text that you want to be a link; Click Hyperlink button; Type the URL of the page;

Add a Link to a page in the current Web: As before, but in he Hyperlink window, browse

for the file you want (using Window explorer) Note: The URL of the file is displayed on

the bottom left of FrontPage when the cursor is on the link;


Applications

Saving HTML documents using FrontPage File/Save As

You are asked to name the file ex: favorite;

The file will be saved with the name you provided and extension “htm” Ex: favorite.htm

You can also provide a title for your document (appears on the top of the browser window)


Applications

Images HTML pages can include digital images; Digital images: each point in a picture is

converted into a (binary) number encoding its color.

Digital images can be produced either by a digital camera or a digital scanner.

Image format: GIF: Graphics Image Format. JPEG: Joint Picture Encoding Group.


Applications

Including images Tag <IMG> followed by keyword SRC and the URL of the

picture is used to include an image. EX: Try the following:<P> Here is a

<IMG SRC=“http://www.cs.rutgers.edu/~ungurean/picture.jpg> picture from the movie.

One can control the position of the image with respect to text by giving a value to keyword ALIGN:

ALIGN=CENTER the text is aligned with the center of the image

ALIGN=TOP the text is aligned with the top of the image ALIGN=BOTTOM the text is aligned with the bottom of the

image (default)


Applications

Including images (cont.) Some browsers can also resize a

picture; the actual dimensions can be specified by specifying values for HEIGHT and WIDTH;

Try the following: <P> Here is a <IMG ALIGN=CENTER HEIGHT=200 WIDTH=200 SRC=“http://www.cs.rutgers.edu/~ungurean/picture.jpg> picture from the movie.


Applications

Using FrontPage to insert images (Project 6) From Clip Art

Insert/Picture/Clip Art Choose a picture Click Insert Clip

Note the time to download in the bottom right of the page before and after downloading the picture


Applications

Using FrontPage to insert images (cont.) Drag and Drop an Image from a

browser into a Web page Start Internet Explorer; Right click the windows task bar and

select Tile Vertical option; Click and Drag the image; Note: you can also drag and drop text


Applications

Using FrontPage to edit images Align and resize an image:

One can change the size by clicking on the picture and using the handles;

OR by right clicking the picture get Picture Properties; select Appearance (third tab) ; here one can specify size and other parameters (alignment, border,..)


Applications

Using FrontPage to edit images (cont.) Image toolbar appears when you

click on the picture; one can: Resample the image (after changing its

original size) to make it clearer---the button to the left of “select” button;

Flip the picture; Add text to a picture (text button: letter

A); Add a hotspot on a picture;


Applications

Using FrontPage to insert images (cont.) To make a hotspot:

Select a type of hotspot (circular, rectangle..)

Move the cursor (looks like a pencil) on the picture, and select a region on the picture

Release the mouse the hyperlink menu appears; choose a file.


Applications

Using FrontPage to edit images (cont.) Save the file:

Note that it asks you to save also the image files; after that they will appear in the same directory/Web


Applications

Tables The tags used to create a table in HTML

are: <TABLE> ---denotes the beginning of a

table; </TABLE> ---denotes the end of a table; <TR> ---denotes the beginning of a row; </TR> --- the end of a row; <TD> ---the beginning of a table cell; </TD> ---the end of a table cell;


Applications

Using FrontPage to create tables (Project 7) Table / Insert or Insert Table button;

Select the size of the table by clicking and dragging over the cells in the grid;

To change the properties of a table: right click on the table and; choose

Table Properties;


Applications

Using FrontPage to create tables (cont.) Using Table Properties one can:

Resize the table by changing the values of Width and Height;

Specify the table alignment on the page; Change the color and the size of borders; To make the borders of the table invisible:

make the size 0, OR make them the same color as the background of the page;

Change the color of the background of the table


Applications

Using FrontPage to create tables (cont.) Odds and Ends…

To make the caption: Table/Insert/Caption;

To merge cells: select the cells, click Table/ Merge Cells;

Use Cell Properties (Table/Properties) to Select the alignment of text in a cell; change the background of a cell.

Insert new Rows: Table/Insert/Rows (similar for columns)


Applications

Publishing HTML Documents

Transfer all the files to public_html using FTP

Sub folders, images, dependent files ... Your web page address

http://pegasus.rutgers.edu/~loginname/ filename

Ex: http://pegasus.rutgers.edu/~ungurean/ favorite.html


Applications

Publishing HTML documents using FrontPage (Project 12) To publish the content of a Web ( a collection

of related documents) use: File/Publish Web; Choose as remote server Pegasus:

Type ftp://pegasus.rutgers.edu/~login/public_html/ all the files created in this Web will be transferred

to pegasus in directory public_html; Note: Not all HTML files should be put directly in

“public_html”; One can also create a folder under “public_html” which may contain al files pertaining to the same subject.

To create a folder on Pegasus you can use either ftp or telnet.


Applications

Publishing HTML documents (cont.)

Your web page address http://pegasus.rutgers.edu/~loginname/

directory_name/filename Ex:

http://pegasus.rutgers.edu/~ungurean/ favorite/favorite.htm


Applications

Publishing HTML Documents (cont.)

Check the pages; if there is an error, the rights to browse the files and/ or directory might not be rightly set; in this case, you should “telnet” to the server (I.e. pegasus), and change the mode of the files/directories:

chmod 644 file_name Ex: chmod 644 favorite.html chmod 755 directory_name Ex: chmod 755 favorite_files

Note: you should be in the directory containing the file or the sub-directory to issue this commands; to navigate through directories do:

cd <directory_name> Ex: cd public_html