View
218
Download
0
Embed Size (px)
Citation preview
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.
Fall 2002Computer Networks
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.
Fall 2002Computer Networks
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.
Fall 2002Computer Networks
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>
Fall 2002Computer Networks
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.
Fall 2002Computer Networks
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.
Fall 2002Computer Networks
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.
Fall 2002Computer Networks
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
Fall 2002Computer Networks
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;
Fall 2002Computer Networks
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>.
Fall 2002Computer Networks
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;
Fall 2002Computer Networks
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)
Fall 2002Computer Networks
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.
Fall 2002Computer Networks
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)
Fall 2002Computer Networks
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.
Fall 2002Computer Networks
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
Fall 2002Computer Networks
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
Fall 2002Computer Networks
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,..)
Fall 2002Computer Networks
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;
Fall 2002Computer Networks
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.
Fall 2002Computer Networks
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
Fall 2002Computer Networks
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;
Fall 2002Computer Networks
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;
Fall 2002Computer Networks
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
Fall 2002Computer Networks
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)
Fall 2002Computer Networks
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
Fall 2002Computer Networks
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.
Fall 2002Computer Networks
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
Fall 2002Computer Networks
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