1. World Wide Web Documents (HTML)

2. 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.

3. 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 “ ” symbols; EX: instructs the browser to insert a new line; marks the beginning of a HTML document; marks the end of a HTML document.

4. Fall 2002Computer Networks Applications HTML Tags Each HTML document is divided into two parts: Heading: starts with and ends with ; Contains, for example, the title of the document; Heading info is displayed separately; Body: Starts with and ends with ; Contains the main part of the documents, displayed in the browser window.

5. Fall 2002Computer Networks Applications A first HTML example Some of my favorite things… Here are few of my favorite things: raindrops on roses and whiskers on kittens; bright copper kettles and worm woolen mittens

6. 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.

7. Fall 2002Computer Networks Applications Formatting tags instructs the browser to start a new paragraph (there is an empty line between paragraphs) instructs the browser to start a new line; Here are few of my favorite things: raindrops on roses and whiskers on kittens; bright copper kettles and worm woolen mittens.

8. Fall 2002Computer Networks Applications Lists Ordered lists: Tags, surround the list; and precedes an individual item. Unordered lists: Tags and surround an unordered list; and precedes an individual item.

9. 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

10. Fall 2002Computer Networks Applications Backgrounds One can specify a color for the background or an image. EX: In FrontPage: Change the background color using: Format/Background ;

11. Fall 2002Computer Networks Applications Links To denote a link to another document a word (or a group of words) is surrounded by the tags and. To specify the page to which a given link points the 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 here.

12. 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;

13. 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)

14. 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.

15. Fall 2002Computer Networks Applications Including images Tag followed by keyword SRC and the URL of the picture is used to include an image. EX: Try the following: Here is a 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)

16. 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: Here is a picture from the movie.

17. 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

18. 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

19. 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,..)

20. 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;

21. 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.

22. 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

23. Fall 2002Computer Networks Applications Tables The tags used to create a table in HTML are: ---denotes the beginning of a table; ---denotes the end of a table; ---denotes the beginning of a row; --- the end of a row; ---the beginning of a table cell; ---the end of a table cell;

24. 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;

25. 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

26. 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)

27. 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

28. 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/ 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.

29. 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

30. 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 Ex: cd public_html