CSC 101: PreLab Reading for Lab #4 More HTML (some of this reading on Tables and Images are based on previous writings of Prof William Turkett)

Transcription

1 CSC 101: PreLab Reading for Lab #4 More HTML (some of this reading on Tables and Images are based on previous writings of Prof William Turkett) Purpose: The purpose of this pre-lab is to provide you with additional background material on the HTML language and the interaction of web browsers and web servers. You will work with additional HTML examples. Introduction: Last week you were introduced to some of the fundamental HTML tags, including tags that define the general structure of an HTML document, text formatting, paragraphs, lists, and, importantly, links. In this week s lab, images and tables will be introduced, as well as the idea of relative and absolute pathnames (paths). Although you already saw those last week, we did not use those terms. Further, we will look at how the computer stores colors and a way to create our own google maps. Helpful Hints: Type URLs instead of cut and pasting links from this PDF or from the browser address bar into your HTML source code. The quote ( ) symbols do not always get copied correctly and can cause problems. Make sure that when you set a value for any property (one example being setting href= SOMETHING ), you include quotes on both ends of the value you are assigning to the property. Images: As you are aware from your experiences in using the World Wide Web, it is possible to include images in web pages. The tag for images is a single, self-closing tags (similar to <hr /> from last week) inserted at the spot where an image is desired. The tag that is used to insert an image at a particular spot is: <img />. Notice that such a tag doesn t tell us much just that an image is going to be included. We need to add to this tag the source of the image. In HTML, the property is called src and the value given to it should be a URL where the desired image can be found. An example of setting the image src property is below: <img src= /> The size of digital images is defined in units of pixels (picture elements). For example, an image may be 480 pixels across (its width) and 640 pixels tall (its height). It is possible to change the displayed height and width of an image through HTML. Note this doesn t change the actual size of the image, but just how the browser displays the image. To vary the height and width of an image, within the img tag set two additional properties: height and width. As an example, to display a 480x640 image at half-width and half-height, use width= 240 and height= 320. <img src= width= 240 height= 320 />

2 The 480x640 size above was just a size pulled out of the air. If working with images in a webpage, it helps to know the size of the image being worked on. One quick way to determine the size of an image that is located on your hard drive is to drag it into an open Google Chrome or Mozilla Firefox web browser window. The size will appear on the title/tab bar. In the example at right, the image TryViolin.jpg is shown to be 420 pixels wide and 276 pixels tall. Putting all of the above information together, here is an example using image tags. First, using the image above, we see HTML code that shows the image at full size, and then with new width (200) and height (75). Note that the image has been stretched (in technical terms, the aspect ratio was not maintained) In order to have our images look nice, we should be careful to scale the width and height in the same proportions. Tables: Tabular information can be represented in HTML using three main sets of tags. The content that goes into a table should first be surrounded by <table> and </table> start and end tags. Tables are specified in row-column format, so within the <table></table> tags, first indicate you want a row, using <tr> and </tr> to mark the beginning and end of a row within the table. The tr stands for table row.

3 Finally, within a row, surround the data to go into each column with <td> and </td> tags. The td stands for table data. With these tags, one can build very simple tables. An example table and its corresponding HTML are shown on the next page. To improve the look of the table, use a few additional tags: The <caption> and </caption> tags allow for a title to be added above the top of the table. A row of table headings can be added in the first row of the table by using <th> and </th> tags instead of <td> and </td> tags in that row. Table headings will be formatted to stand out, with respect to formatting, relative to the rest of the table. In addition, three properties can have values assigned within the <table> tag: border Assigning this property a whole number (integer) value will put a border around the table. A value of 0 means no border, and the border size increases as the value increases. cellspacing Assigning this property an integer value sets space between individual table cells (betwen the <td></td> entries). You can think of this as the size of the cell wall. cellpadding Assigning this property an integer value sets the space between the content of the cell and the cell wall.

4 Here is the previous example table, but now built using the tags and properties specified above: Links: Absolute vs. Relative Paths: On your laptop s hard disk you have files stored in folders (folders are also called directories). Each file and folder can be specified by using a unique absolute path to the file. The absolute path to a folder or a file is the list of all of the parent folders followed by the name of the file or folder of interest. As an example, the file page1.html in the image below has an absolute path of: C:\Users\WFUT \Documents\CSC101Lab\lab2\page1.html (all of the parent folder names are highlighted in blue below, and then we attach the name of the file of interest). Notice that this absolute path starts all the way back at the C:\ folder, which is as far back as you can go when talking about files and where they can be saved. An absolute path could also start at D:\ (which is a different disk available on some computers).

5 Webservers also make use of absolute paths. Instead of just being a list of folders, web server absolute paths are as follows: Notice they include the additional and the name of the webserver. Using absolute paths is sometimes very important. What if we have two files named the same thing on our hard drive? Two files named the same is OK, given that they have unique absolute paths (which means, as long as they sit inside of different folders, as providing the list of folders will make them unique). It is often convenient to refer to a file or folder or webpage using a relative path that is, specifying the location of a file relative to your current location on a drive. In last week s lab, you created a hyperlink in your main.html file to your page1.html file. The hyperlink looked like this: <a href="page1.html">page 1</a>. Notice that the hyper-reference (the href) simply refers to page1.html instead of a long absolute path to page1.html. Using just the name page1.html essentially says: since main.html didn t give you any extra addressing information in its link to page1.html, just expect page1.html to be in the same folder as main.html. You might have considered using an absolute path instead to page1.html, using a link like this: <a href="c:\users\wfut \documents\csc101lab\lab2\page1.html">page 1</a> but that s not the best idea. The absolute path above is a very precise and complete description of how to get to page1.html, telling someone how to get to the file starting from the the C:\ drive folder. This absolute path probably would have worked OK while you were working on your laptop s copy of the files. However, when you copied your files and folders to the WFU webserver, this absolute path would have no longer have worked as it explicitly refers to your laptop s C:\ drive, which the web server computer doesn t know about. On webservers like wfu.edu it s always a good idea to use relative paths when you are linking to other files that are part of your own personal website and absolute paths when linking to another website.

6 Colors: The computer represents a particular color via something called RGB. This is short for Red, Green, and Blue values. In grade school, we learn that red, yellow, and blue are the primary colors (and hence the first three crayons in the box). However, what we learned applied to pigments (and hence the physical crayons). For light, the primary colors are red, green, and blue. Thus, to create other colors, we must mix them. Take a glance at what Wikipedia has to say about RGB. In particular, look at the following sections (available as of September 22): Opening section Additive Primary Colors Numeric Representations Colors in web-page design image copied from Wikipedia From the image above, we can see the metaphor of turning on three flashlights - one of red light, one of green light, and one of blue light. As two or more colors overlap, a different color is formed. Note from the picture that: all three colors overlapping creates white (viewed as all possible light) having no colored light produces black What the picture is unable to show is how to produce a wide variety of colors. Different colors than those shown are achieved by "turning up" or "turning down" the lights. If we have white, and then "turn down" all three lights (reduce the intensity of each), we will get off-white. The more we turn down the lights, the "dirtier" the white becomes. To see more about this, you can look at various websites, including (as of September 22): We will be experimenting with these colors in lab. Web servers generating content for you: (Batch geo-code example) There are many websites that allow you to upload data so that the website will generate web content for you. In this section, we will look at one example: batch geo-coding. Batch geo-coding is loosely defined as taking a set of geographic information, pulling it together in one map, and linking that information with other non-geographical content (eg. phone numbers, web sites, etc). We will be doing something like this in lab. The basic steps will be: - Type in the relevant information (geographic and otherwise) into a spreadsheet.

7 - Paste the data to a web site. - See the result. - Have the website you HTML code. - Copy that HTML into Notepad. - Publish your website.