world wide web documents (html)
DESCRIPTION
World Wide Web Documents (HTML). 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: - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: World Wide Web Documents (HTML)](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56813c11550346895da58a39/html5/thumbnails/1.jpg)
World Wide Web Documents (HTML)
![Page 2: World Wide Web Documents (HTML)](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56813c11550346895da58a39/html5/thumbnails/2.jpg)
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.
![Page 3: World Wide Web Documents (HTML)](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56813c11550346895da58a39/html5/thumbnails/3.jpg)
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.
![Page 4: World Wide Web Documents (HTML)](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56813c11550346895da58a39/html5/thumbnails/4.jpg)
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.
![Page 5: World Wide Web Documents (HTML)](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56813c11550346895da58a39/html5/thumbnails/5.jpg)
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>
![Page 6: World Wide Web Documents (HTML)](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56813c11550346895da58a39/html5/thumbnails/6.jpg)
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.
![Page 7: World Wide Web Documents (HTML)](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56813c11550346895da58a39/html5/thumbnails/7.jpg)
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.
![Page 8: World Wide Web Documents (HTML)](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56813c11550346895da58a39/html5/thumbnails/8.jpg)
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.
![Page 9: World Wide Web Documents (HTML)](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56813c11550346895da58a39/html5/thumbnails/9.jpg)
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
![Page 10: World Wide Web Documents (HTML)](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56813c11550346895da58a39/html5/thumbnails/10.jpg)
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;
![Page 11: World Wide Web Documents (HTML)](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56813c11550346895da58a39/html5/thumbnails/11.jpg)
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>.
![Page 12: World Wide Web Documents (HTML)](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56813c11550346895da58a39/html5/thumbnails/12.jpg)
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;
![Page 13: World Wide Web Documents (HTML)](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56813c11550346895da58a39/html5/thumbnails/13.jpg)
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)
![Page 14: World Wide Web Documents (HTML)](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56813c11550346895da58a39/html5/thumbnails/14.jpg)
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.
![Page 15: World Wide Web Documents (HTML)](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56813c11550346895da58a39/html5/thumbnails/15.jpg)
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)
![Page 16: World Wide Web Documents (HTML)](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56813c11550346895da58a39/html5/thumbnails/16.jpg)
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.
![Page 17: World Wide Web Documents (HTML)](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56813c11550346895da58a39/html5/thumbnails/17.jpg)
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
![Page 18: World Wide Web Documents (HTML)](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56813c11550346895da58a39/html5/thumbnails/18.jpg)
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
![Page 19: World Wide Web Documents (HTML)](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56813c11550346895da58a39/html5/thumbnails/19.jpg)
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,..)
![Page 20: World Wide Web Documents (HTML)](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56813c11550346895da58a39/html5/thumbnails/20.jpg)
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;
![Page 21: World Wide Web Documents (HTML)](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56813c11550346895da58a39/html5/thumbnails/21.jpg)
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.
![Page 22: World Wide Web Documents (HTML)](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56813c11550346895da58a39/html5/thumbnails/22.jpg)
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
![Page 23: World Wide Web Documents (HTML)](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56813c11550346895da58a39/html5/thumbnails/23.jpg)
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;
![Page 24: World Wide Web Documents (HTML)](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56813c11550346895da58a39/html5/thumbnails/24.jpg)
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;
![Page 25: World Wide Web Documents (HTML)](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56813c11550346895da58a39/html5/thumbnails/25.jpg)
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
![Page 26: World Wide Web Documents (HTML)](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56813c11550346895da58a39/html5/thumbnails/26.jpg)
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)
![Page 27: World Wide Web Documents (HTML)](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56813c11550346895da58a39/html5/thumbnails/27.jpg)
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
![Page 28: World Wide Web Documents (HTML)](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56813c11550346895da58a39/html5/thumbnails/28.jpg)
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.
![Page 29: World Wide Web Documents (HTML)](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56813c11550346895da58a39/html5/thumbnails/29.jpg)
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
![Page 30: World Wide Web Documents (HTML)](https://reader036.vdocuments.mx/reader036/viewer/2022062408/56813c11550346895da58a39/html5/thumbnails/30.jpg)
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