Paths Tables Meta-Tags

1. IT 130 – Internet and the Web Paths Tables Meta-Tags 1

2. New Topic: Addresses – relative vs fixedImportant to study and review! • A fixed address is the kind we have been using until now. It contains a full URL address beginning with ‘http’ and listing the full location and path to the desired file. • A relative address is the address of a file residing on the same server as the current page. • A relative address is like naming a house relative to a current location: “The third house on the right”. • A relative address does not start with http:// • Relative addresses are used whenever you create a link to a resource (web page, image, file, etc) on your own website. • Eg: On the IT-130 page, I create a link from the syllabus to a homework assignments. Only relative addresses are used.

3. Absolute addresses An absolute address is the address of a file in a website (usually) unrelated to the currently-viewed website. It is the type of address which end-users see and use most often. Contrast with relative addresses which are seen and used most often by web designers. An absolute address is a URL that starts with http:// and it should work from a browser anywhere on the Internet. An absolute address is like giving a full address to someone’s home: “The house at 123 Main Street”. More on this shortly…

4. Relative addresses • A relative address gives the location of the file relative to the location of the current web page. • In other words, a relative address is a “path” from the current file to the target file. • You have all seen paths before even if you didn’t understand them: • C:\My Documents\My Pictures\firetruck.jpg is a possible path on a Windows PC. It gives the path to the file ‘firetruck.jpg’. The path says to begin on a drive called C: then look inside for a folder called ‘My Documents’ then look for a subfolder called ‘My Pictures’ and then look inside that folder for firetruck.jpg • Since web servers like students.depaul.edu use the UNIX operating system, we need to learn a little about paths in UNIX.

5. A possible IT-130 directory structure your account (“root directory”) mail The term “root directory” is very important. 5

6. public_html it130 images hw More practice with relative paths This diagram means the folder public_html has the subfolder it130. The it130 folder, in turn, has two subfolders called ‘hw’ and ‘images’.

7. Pathnames in UNIX • <a href="filename.html"> • Refers to a file in the current folder. • That is, you are informing the server that filename.html is contained inside the same folder as the HTML document you are currently editing. • <a href="info/hw1.html"> • Informs the server that hw1.html is located within a folder called info, and that ‘info’ is a subfolder of the current folder (i..e. the folder containing the HTML page you are currently editing) • <a href="info/class/hw2.html"> • You are telling the server to look for a subfolder called ‘info’, then to look for a subfolder of info called ‘class’ in order to find hw2.html

8. Pathnames in UNIX contd *Unix is the operating system run by the students.depaul.edu web server. ‘ .. ’ means the parent folder (parent directory) of whatever folder (directory) you’re in. (Important) ../images/cat.jpg tells the server that in order to find cat.jpg it must: • Look up to the parent folder • From the parent folder, look for a folder called ‘images’ • cat.jpg will be found inside the images folder In other words, ../images/cat.jpg means “go up one level, down into images and find the file cat.jpg”. – don’t worry, more explanation coming… Notice that Unix* uses forward slashes ‘/’ as opposed to back slashes ‘\’

9. your account (“root directory”) mail random_file.htm While writing asst1.htm, how would you link to the image pic1.jpg ? <img src="../images/pic1.jpg"> 9

10. your account (“root directory”) mail random_file.htm While writing asst1.htm, how would you link to a file called random_file.htm ? <a href="../../random_file.htm"> 10

11. your account (“root directory”) mail random_file.htm While writing asst1.htm, how would you link to the file resume.html? <a href="../resume.html"> 11

12. Relative addresses contd. Suppose you are editing main.html and want to write a link to file1.html • <a href="file1.html"> if file1 is in the same folder as main • <a href="childfolder/file1.html"> if file1 is in a sub folder called childfolder • <a href="../file1.html"> if file1 is in the parent folder • Important! For this to work properly, as you are working on your local computer, the folder structure on your local machine must match the one on the web server. • In other words, create the same directory structure on your PC as you have on your website. • Create an it130 folder and go from there. That is, don’t worry about public_html.

13. public_html hw3.html main.html hw2.jpg file1.html IT130 Images HW You are editing main.html  Write a link to hw3.html: You are editing hw3.html  link to main.html: You are editing hw3.html  link to hw2.jpg: <a href="IT130/hw3.html"> <a href="../main.html"> <a href="../Images/HW/hw2.jpg">

14. public_html key.html main.html hw2.jpg file1.html hw3.html IT130 Images Exams HW Relative path quiz • Write the HTML tags to do the following. • In file1.html, add a hyperlink that takes you to hw2.jpg • In hw3.html, add a hyperlink that takes you to file1.html • In key.html, add a hyperlink that takes you to hw2.jpg Answers are on the next slide

15. Relative path quiz Answers: • <a href="Images/HW/ hw2.jpg"> text </a> • <a href="../ file1.html"> text </a> • <a href="../../Images/HW/hw2.jpg"> text </a>

16. Tables: <table>, <tr>, and <td> Tags Tables are enclosed within a pair of <table> tags that identifies the start and ending of the table structure. Each row of the table is indicated using a pair of <tr> tags (tr for table row). In each table row, a pair of <td> tags (td for table data) indicates each individual table cell.

17. two rows The General Table Syntax <table border=“1”> <tr> <td> First Cell </td> <td> Second Cell </td> </tr> <tr> <td> Third Cell </td> <td> Fourth Cell </td> </tr> </table> two columns * Compare the display of tables in IE v.s. Firefox

18. What can you put inside the cell of a table? Juts about anything! • Text (with formatting) • Images • Lists • Hyperlinks • Etc, etc

19. Inside a table: <table border=“1”> <tr> <td> <strong>Some text in bold </strong> </td> <td> <img src=“some_picture.jpg” /> </td> </tr> <tr> <td> <a href="http://www.nytimes.com">Hyperlinks</a> </td> <td> Fourth Cell </td> </tr> </table>

20. Table Columns HTML does not provide a tag for columns! The number of columns is determined by how many cells you place in each row. The number of columns will be determined by the row with the most cells in it. For example, even if all your rows have 3 cells, if there is any row in there with 4 cells, that is the number of columns that will be displayed by your table. For example, if you have four <td> tags in each table row, that table has four columns. Later versions of HTML provide increased support for controlling the appearance of table columns.

21. Defining the Table Structure Reccomendation: When creating a table, you may want to first outline the table structure: I.e. Begin by typing out the tags for the rows and cells. After the table structure is in place, you can start entering data into the table. HTML does not require you to indent the <td> tags or place them on separate lines, but you may find it easier to understand your HTML code if you do so. (i.e. Do it!!)

22. beginning of the table structure table cells first row of six in the table end of the table structure Example Table Structure Note: These tags should all be in lower case!!

23. <th> Tags Frequently when people create tables, they will want to emphasize the title of each column. The HTML standard provides the <th> tag for column headings. Text is formatted with the <th> tag is centered within the cell and displayed in boldface. The <th> tag is most often used for column headings, but you can use it for any cell that you want to contain text that is centered and bold. We will RARELY use this tag, but you’ll see it once in a while.

24. table headings Example 1 Why is there no border around this table?

25. Creating a Table Caption HTML allows you to specify a caption for a table. The syntax for creating a caption is: <caption align="top"> text </caption> • centers the caption above the table <caption align="bottom"> text </caption> • centers the caption below the table • As with the <th> tag, we will not use captions. But again, you may encounter it.

26. Table Captions <caption> works only with tables and the caption tags must be placed within the table structure (i.e. after the <table> tag). You may only use caption once per table. Captions are shown as normal text without special formatting. Captions can be formatted by embedding the caption text within other HTML tags. For example, placing the caption text within a pair of <strong> and <em> tags makes the browser display the caption in bold and italic.

27. caption text caption will be centered above the table Example 2

28. Modifying the Appearance of a Table You can modify the appearance of a table by setting: • borders • gridlines (known as “rules” in html jargon) • background color HTML also provides tags and attributes to control the placement and size of a entire table as a whole. We will investigate some (though by no means all) of these attributes here.

29. Setting the Table Border By default, browsers display tables without table borders. A border can be added using the borderattribute in the <table> tag. The syntax for creating a table border is: <table border="value"> where value is the width of the border in pixels.

30. Setting the Table Border If you include the border attribute and don’t specify a size, the browser creates a table border 1 pixel wide. <table border> <tr> <td> First Cell </td> <td> Second Cell </td> </tr> </table> Only the outside border is affected by the border attribute; the internal gridlines (“rules”) are not affected.

31. Tables with Different Border Values This shows the effect on a table’s border when the border size is varied.

32. Example 3

33. Cell Spacing The cellspacing attribute controls the amount of space inserted between the cells of a table. The syntax for specifying the cell space is: <table cellspacing=“value”> where value is the width of the interior borders in pixels. There is a default cell spacing value of 2 pixels.

34. Cell Padding To control the space between the text of a cell and the cell borders, add the cellpadding attribute to the table tag. The syntax for this attribute is: <table cellpadding=“value”> where value is the distance in pixels from the table text to the cell border. The default cell padding value is 1 pixel. The best way to remember the difference between cell padding vs cell spacing is to type them both out and look at the difference.

35. Tables with Different Spacing/Padding CELL SPACING: different cell spacing values CELL PADDING:

36. Tables contd: Two more attributes - Frame and Rules Two additional table attributes introduced in HTML 4.0 are the frame and rules attributes. With these two attributes you can control how borders and gridlines are applied to the table.

37. Frame Attribute The frame attribute has to do with the outer border of your table. It allows you to determine which sides of the table will display their borders. The frame attribute syntax is: <table frame=“value”> Possible attribute values include: “box” (the default), “above”, “below”, “hsides”, “vsides”, “lhs”, “rhs”, or “void”. Practice with it here.

38. Frame Attribute

39. Tables with Different Frame Values This shows the effect of the frame values on the table. What if you wanted to have a border above and below?

40. Tables contd: The ‘rules’ attribute “Rules” is a funny way that html refers to gridlines The rules attribute lets you control which table gridlines are displayed. The syntax of the rules attribute is: <table rules=“value"> where value is either “all”, “rows”, “cols”, or “none”

41. Tables with Different Rules Values This shows the effect of each of the rules values on the table.

42. Working with Table and Cell Size The size (e.g. width) of a table is determined by the text it contains in its cells. By default, HTML places text on a single line (i.e. it does not word-wrap). As you add text in a cell, the width of the column (and table) expands to the edge of the page. Once the page edge is reached, the browser reduces the size of the remaining columns to try to keep the text on a single line! Tables are quirky! You have to watch them closely as you are writing your code.

43. Tables contd: Controlling the display size of your table. Once the browser can no longer increase the size of the column and table, it wraps the text to a second line. Height: If a cell has more than one line of text in it, the height of the row expands to accommodate that additional text.

44. Establishing the size of your table: The way to specify a table’s width and/or height is: <table style="width:wsize; height:hsize"> wsize and hsize are the width and height of the table either in pixels or as a percentage of the browser window. You must specify one or the other. Note: ‘style’ is an example of a “standard attribute”. This is a type of attribute that can apply to nearly all tags. (See W3 schools explanation). The usage of the style attribute here is your first example of Cascading Style Sheets (CSS), specifically, this is an “inline style definition”. 44

45. Setting the Table Size contd. If you use percentage (of the browser window), the table size changes whenever the browser window size changes. <table style="width:50%; height:20%"> If you use pixels, the table size stays the same regardless of the browser or monitor settings. Be careful if you do this! <table style="width:1500px; height:500px"> If the browser window is smaller than the table, the table will scroll off to the side of the screen! Remember: You MUST specify one or the other (px or %)

46. Examples To create a table whose width is the entire width of the browser window, write: <table style="width:100%"> To create a table whose width is the half of the width of the display area and whose height is 200 pixels, write: <table style="width:50%; height:200px"> You can mix ‘n match % with px – but you probably shouldn’t.

47. Setting the Table Size contd. Content gets priority: If the text or other content in a table requires additional space than a table size you may have specified using the width or height attributes, the table WILL expand to accommodate your content– even though your attribute required that it be smaller. In other words, when you specify the table size you may get a table that’s larger than your specifications, but never a table that’s smaller than your specifications. 47

48. Example 4 <table border="5" cellspacing="0" cellpadding="4" style="width:500"> <caption align="top">Race results</caption> <tr> <th>Group</th> <th>Runner</th> <th>Time</th> <th>Origin</th> </tr> ... </table>

49. Setting the Cell Size The way to specify a cell’s width and/or height is: <td style="width:value; height:value"> In other words, you are using the same attributes, however you are applying them to a cell <td> rather than to the whole table. Again, the height and width must be specified (in either pixels (px) or percent (%) ). If you specify percent, the percentage refers to a percentage of the total width of the table (not the window). For example, a width value of 30% applied to a <td> tag produces a cell that is 30% of the total width of the table.

50. Setting the Cell Size If you include more content than can be displayed within the width or height value you specify, the cell expands to display the additional content. Again, as with the table itself, a cell will always expand to include all of your content regardless of your written size constraints. Like tables, a cell may increase in size beyond your specifications. Unlike tables which never shrink, it is possible for a cell to be smaller than your specification since it must fit inside its table. Moreover . . . Try it! Create a table of width 200px, then see what happens when you create a cell of 300 px.