LAB 3 CSE 3, Spring 2018 In this lab you will learn and implement some basic html.

Transcription

1 LAB 3 CSE 3, Spring 2018 In this lab you will learn and implement some basic html. Enabling file extensions in Windows Explorer Always remember to enable file extensions like we ve done in the first lab. In case you forgot, follow these directions. Windows will hide file extensions that are known by default. It is meant to be a convenience, but it is actually confusing and dangerous. It is dangerous because you may receive a file "essay.doc", but if you are unaware your extensions are hidden, it could really be an "essay.doc.exe" file that contains a computer virus. We will now fix that. Step 1: From the Desktop, click on the Windows Explorer icon in the bottom left hand corner of the screen (next to the Start button). In the window that pops up, click on Organize in the upper left. Organize Folder and search options Step 2: Click the "View" tab. Step 3: Look for "Hide extensions for known file types" and make sure the box is UNCHECKED. Then click "Apply". Then click "OK". A. Absolute vs. Relative Addressing A file s pathname is a set of directions to its location. An example of the pathname notation of a file is: Documents/CSE3/Lab2/CodingBenefits.pdf From Homework Due Today: Absolute Address: Just like a house, every file has a "permanent address". The permanent address of the file is its ABSOLUTE ADDRESS. The absolute address of a file on the computer in front of you starts with: o file://///acsnfs... The absolute address of a file on the internet starts with: o 1

2 This is just like the address where you live. It locates you in the absolute framework of the USA. (Or like GPS coordinates in a more extreme example.) No matter where you are currently, if I give you the absolute address you will know how to get there. It is the complete set of directions. Relative Address: Another way to describe where you live to a friend is by using relative directions. You could say "Go one block south from your current location, then turn east and " For these directions to work you must start in the correct place. If you start in a different place, these directions will lead to you a different place. We can also do this with files. This is called a file s RELATIVE ADDRESS. The relative address of a file on the computer in front of you is something like: o./cse3/lab2/codingbenefits.docx or CSE3/Lab2/CodingBenefits.pdf If you are starting inside your Documents folder o../lab2/ CodingBenefits.pdf If you are starting inside another folder within CSE3 The./ or../ are just directions from your present location. Just like when you tell a friend to take a left or a right, to go north or south, these tell the computer where to look for a file. The./ says "starting from the current directory " and is optional in most cases. The../ says "starting from the current directory, go up one level and then " and is not optional (this is equivalent to going back one folder). File structures can also be displayed visually so you can see what it means to go up or down a level. Your visual file structure for this class could be displayed as: Documents CSE3 Lab2 MyResume.docx CodingBenefits.docx CodingBenefits.pdf In your html documents for this class and in general: ALWAYS use ABSOLUTE addressing to reference a webpage o For example, use o If you try to use relative addressing for a webpage, it will try to find that file on your home computer! Do YOU have a file called " On your computer??? ALWAYS use RELATIVE addressing to reference a file on your computer 2

3 o NEVER, EVER should ANY of your html files reference other files on your machine with file://///acsnfs... Examples: What type of addressing do the following pathnames use (the <a> tag (or anchor tag) creates a link and the href attribute specifies where the content is located)? <a href=../yahoo/index.html >Yahoo</a> <a href= file://///acsnfs4.ucsd.edu/ucsd/index.html >UCSD ACS</a> <a href= >UCSD</a> B. Sample Webpage We are going to create a page to practice html. Some of these tags are in the process of being "deprecated" which means that they are not "officially" supported. However these are all so common and so many web pages use them, that it will be a long time, if ever, before they stop actually being accepted. Since they are much simpler than the "official" way of doing it, we are sticking with them for now. Later in the course you will see the more modern way of doing it. Step 0: Follow along with the FORMAT that your TA uses on the overhead. YOU WILL NOT BE HELPED IF YOU DO NOT INDENT PROPERLY! Step 1: Open your CSE3 folder and create a new folder in there called Lab3. Step 2: Open Notepad++ and save your document as "Sample.html" inside the Lab3 folder. Step 3: We will be using the following tags to create the webpage on the left: 3

4 <h1></h1> <h2></h2> <h3></h3> <b></b> <u></u> <i></i> <center></center> <font></font> <br /> <hr /> <ol></ol> <ul></ul> <li></li> <table> </table> <caption></caption> <tr></tr> <th></th> <td></td> Here is a refresher of all the tags: <hr /> (horizontal rule creates horizontal line) <ul></ul> (unordered list bulleted list) <ol></ol> (ordered list) <li></li> (list item) <caption></caption> (table caption table title) <tr></tr> (table row) <th></th> (table header - bolds any text within its tags) <td></td> (table data - a table cell) Specifically for lists (both unordered <ul> and ordered <ol> ), we add list items within their tags. Here is the basic format: 4

5 Remember to use the following attributes to modify the specified tag attributes: bgcolor = SeaShell for the <body> tag. color = Khaki for the <hr/> tag. color = "plum", size= 8, and style="font-family:impact" for the <font> tag. bgcolor="darkkhaki" and border="2" for the <table> tag. For a list of all 140 of the color names HTML recognizes, visit Notice that your table code looks something like this: Notice that to change the width of every column you would have to add the attribute width = 100 to every <td> tag and <td> tag; however, there is an easier way to change the attribute of all the <td> tag and <td> tag and that is with the help of CSS. Similar to Hw2, use CSS to change the width and height of the table cells. Remember to add CSS for tables, you add the following code within the <head> tags 5

6 Do you notice how much easier it is to just add CSS code to modify all the <td> and <td> tags instead of having to add width= 100 and height = 100 to every <td> and <td> tag? Basically CSS is a stylesheet that helps change the way your HTML page looks. It s like a dictionary where you define a tag and have the HTML page look up in your dictionary what attributes the page should have. Recall the Frankenstein metaphor from Hw2. In the CSS code above, we defined two definitions for the tag <th> and <td>. We defined that the only <th> tag should have olive background color while the <td> tag and <td> tag should have a width of 100px, height of 100px, and that it should have the attribute vertical align set to top. Notice that <td> elements are bold and centered while it is aligned at top. Step 4: Now let s create a header for our links. Underneath your table, using the <h2> tag, type in Learning HTML Now let s add in an image with a link. To begin, open a browser and go to the CSE3 Lab page Under Lab3 Files right click on logo and hover and click Save Link As Save the image as logo.png and hover.png in your Lab3 folder. Because we re going to be linking to a webpage, don t forget to use ABSOLUTE addressing!!! And watch your spelling, capitalization, and spacing. Step 5: Add the anchor <a> tag to the bottom of your Sample.html <a href = " 6

7 To add an image to the link we can use CSS to add a background image to a specific anchor. First we need to add an ID to the anchor tag to know which anchor we want to add the image to. Add the attribute to the anchor tag: <a href = id = anchor1 ></a> Then we need to define in the CSS code what to do to this specific anchor. In the style tag, after the CSS code used to modify the table, add the following code: The # symbol looks for an id attribute, so #anchor1 looks for an id named anchor1. Step 6: Suppose we want the image to change every time we hover over it. We can add more to the CSS code in the <style> tag to change what happens when our mouse hovers over the link. Add this code below the code in Step 5. Hopefully you can see that CSS helps define different attributes of the tag you specify. 7

8 When you finish adding your CSS code, your CSS should look like the left image. The right image is what your page should look like. Your final result should do this: The Learning HTML image changes when you hover over it. Clicking on the image will bring you to the W3 HTML tutorial website. 8

9 C. Creating your CSE3Page We re going to use lists to create a page that will be an index for all the files we create in CSE3. Step 1: Open up a new page in Notepad++ and save it as "CSE3Page.html" in your CSE3 folder NOT your Lab3 folder. We will be modifying this page every lab. Note capitalization and spacing! Step 2: Use table and unordered lists to organize and link to the labs you ve done so far in Labs 1 and 2. Remember to use RELATIVE addressing when you are linking to files that you ve created! Where is the CSE3Page.html located? What does that mean about using relative addressing to link to your other files? Would you use./ or../? Creating links is where spelling, capitalization, and spacing REALLY MATTERS! Here is a screenshot of the first row in the table: Step 3: Now that you ve linked to Labs 1 and 2, it s your turn to link to the files we ve created today. Create a link to: o Sample.html Notice how the anchor text you choose does NOT have to be the same as the file name! 9

10 Step 4: To make it easier later, let's add rows for all nine labs that you will do this quarter. To add width in the second column, you can add the following to the HEAD: You can also center the table, add background colors, and add descriptions if you wish. Use what we learned to make this page look how YOU want it to look. Your finished file can look something like this. Have fun with it!!!! E. Linking from your homepage Now that we ve created this wonderful CSE3Page.html to store all the information we learn in CSE3, let s add a link from our homepage so that we can find it again. Step 1: Open up Notepad++ File Open Find and open index.html in Documents. 10

11 Step 2: Modify your course information to include a link to your CSE3Page.html file. On your index.html, find the code for Fall 2017 Courses. Around the text CSE 3, add anchor tags: Then use the href attribute to make this text into a link to your CSE3Page.html. F. Putting it all online Transfer the files to your web server. See Lab1/Homework1 if you don t remember how to do this: Double click on public_html on the right side of the window. Move the entire CSE3 folder and index.html into your public_html folder REMEMBER to move it into the WHITESPACE inside public_html Select Yes to All to complete the transfer. Step 1: If your links work on the desktop, but NOT online, you need to check that your addressing and naming are correct. Go back through your code and make sure you capitalize all your files the same as your anchor tags. Your file structure should look like this on your server. public_html CSE3 CSE3Page.html Lab2 CodingBenefits.pdf Lab3 Sample.html index.html If you were following the lab manuals correctly, you only have to worry about clicking and dragging the CSE3 folder into the whitespace on the right window of SSH. 11

12 Lab Checkoff: Go to your homepage and demonstrate to the person checking you off that you can: Link to your CSE3Page from your index.html Link to your Sample.html from your CSE3Page o The HTML image changes when you hover over it. o Clicking on the image will bring you to the W3 Schools HTML Tutorial. Verify that the links for Lab1, 2, and 3 link correctly. Show your grader your code to verify that you are using proper style. Do not leave until you have received TWO s (Lab and Last Week s Homework) from autograder. 12