1 / 30

World Wide Web Documents (HTML)

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:

isanne
Download Presentation

World Wide Web Documents (HTML)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. World Wide Web Documents (HTML)

  2. 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. Computer Networks Applications

  3. 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. Computer Networks Applications

  4. 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. Computer Networks Applications

  5. 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> Computer Networks Applications

  6. 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. Computer Networks Applications

  7. 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. Computer Networks Applications

  8. 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. Computer Networks Applications

  9. 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 Computer Networks Applications

  10. 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; Computer Networks Applications

  11. Links • To denote a link to another document a word (or a group of words) is surrounded by the tags <A> and </A>. • Tospecify 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>. Computer Networks Applications

  12. 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; Computer Networks Applications

  13. 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) Computer Networks Applications

  14. 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. Computer Networks Applications

  15. 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) Computer Networks Applications

  16. 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. Computer Networks Applications

  17. 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 Computer Networks Applications

  18. 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 Computer Networks Applications

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

  20. 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; Computer Networks Applications

  21. 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.  Computer Networks Applications

  22. 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 Computer Networks Applications

  23. 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; Computer Networks Applications

  24. 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; Computer Networks Applications

  25. 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 Computer Networks Applications

  26. 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) Computer Networks Applications

  27. 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 Computer Networks Applications

  28. 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. Computer Networks Applications

  29. 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 Computer Networks Applications

  30. 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 Computer Networks Applications

More Related