In this lab, we'll start using Cascading Style Sheets (CSS) to modify our web pages' styling. We will also upload our saved work to the csci1210.com server, display the page in our browser and validate it using the W3C Validators
This lab is very similar to Lab 1.5. The difference is that we'll be creating an external CSS style sheet to modify how it displays. The starter file will prompt you what to enter. The important part is the external stylesheet
Essentials of Web Development
Create a folder named lab3 in your labs folder on your external drive
Download The Lab 3 starter file and save it to your lab3 folder. This file contains instructions as comments in the file for how to complete it. Replace the content in the paragraphs and lists with your own (feel free to make stuff up...this is a public-facing website, after all)
Open the file in Notepad++ (NPP)
In the <head> element, update the meta-information (<meta> elements and comments) as directed
Save the file as lab3.html in your external drive's labs\lab3 folder.
Follow the instructions included in the file to complete it.
Note: Once again, remember that this site is accessible to the world. DON'T put anything here that you wouldn't want to share with the everyone!
Create a new file in Notepad++
Save the file in your lab3 folder as lab3.css.
Enter the required comment block at the top of your lab3.css file file ( Hint: You can copy the meat of the text from between the <-- and --> tags in your HTML document into your CSS document in between the /* and */ tags. Then, make changes to the text to reflect that this is a CSS file)
NOTE: the 'Purpose line should be typed in all as one line. The screen shot shows it in separate lines because I had to shrink the window down to capture it all for these instructions
Create a rule for the <body> element that changes the document's background-color to #2E6E12, the font-family to Arial, Helvetica, sans-serif and color to #FFFC7C
Now, create a rule for the <div> element that sets its width to 800px, margin to 0 auto, background-color to #164900; padding-top and padding-bottom to 10px and padding-right and padding-left to 15px; and border to 4px double white. Finally, make the h2font-style oblique
Save your work and return to your lab3.html file
In the head element of your lab3.html file, add a link to lab3.css in the head element of your html document: ⇒ <linkrel="stylesheet"href="lab3.css">
Note that the content of the page is enclosed in a <div> (division) element. This is how we 'chunk' content in more complex web pages
This picture shows where the closing </div> tag should appear in the document
If it isn't already there, add the <script src="/js/w3c.js"></script> code to the end of your page's content, immediately before the </body> tag
Save the file and return to your browser. Refresh the page and take note of the changes that the newly added CSS code has created
Launch FileZilla and connect to the server. If you need a refresher on how to connect to FileZilla, click here, starting with #14
In the left pane ("Local site:") of FileZilla, navigate to your lab3 folder. Remember, when you click on a folder in the upper pane (left or right), FileZilla displays that folder's subfolders and/or files in the lower pane
In the right pane ("Remote site:"), navigate to your labs folder
On the remote (right) side of the display, right-click on your labs folder, select 'Create directory and enter it'. Name the new folder lab3. Then click OK. This will name the lab3 (sub)folder and then make it your current folder
Check the address bars on top of the left and right panes and ensure you're in the right location, both on your local computer and on the server
Select lab3.html and lab3.css in the lower left pane. Then drag and drop them into the lower right pane (on the server)
Once the files have successfully uploaded, return to your browser and enter the URL for your page. (It should be [your_etsuid].csci1210.com/labs/lab3/lab3.html. If it isn't, you didn't create your file/folder structure correctly, and you'll want to change that)
Tap Enter and inspect your new page. It should look more or less like the image below.
Note: the content on your display should be centered. It looks a little offset because I had to resize it to get the screen shot
Check your file's validity for HTML and CSS through W3C by Ctrl+clicking on the two links at the bottom
If all goes well, you should see a lot of green. If you see errors, look at the error messages and try to determine what went wrong. Each message will indicate a line number, corresponding to the location where the validator thinks the mistake is (it isn't always right). Look at your source file and see if you can determine where the error lies. If you still can't figure it out, raise your hand and one of us will help you
If you had errors, once you've corrected them, save your work and upload the new file to the server using the steps outlined above. You'll get a dialog box warning you the the file already exists on the server. Click "OK" to overwrite the old file
Keep this in mind: in this class, we always drag left to right (local to remote). If you make a bunch of changes to a file, then accidentally drag and drop in the other direction, you'll end up overwriting your changes and will have to do them all over again!
If you had to correct errors, go back to the validator page once you have finished. You don't have to click the icons again...just refresh the page. Hopefully, this will now display green. If not, repeat the steps above and refresh the validator page again to confirm that your page is now valid HTML and CSS
Return to Notepad++ and open a new file. In this file, paste a copy of the URL for your lab3.html page. For example, if I were submitting the assignment, I would type (or copy & paste) ramseyjw.csci1210.com/labs/lab3/lab3.html. Save the file as lab3.txt in your lab3 folder
Log in to D2L and click on "Evaluation" and "Dropbox"
Upload lab3.txt to your Lab 3 Dropbox folder
Upload the file lab3.txtONLY! Do NOT upload your source files!