Embed Size (px)
Citation preview
CS1046 – Lab 2Timing: This lab should take you 1 ½ to 2 hours.
Objectives:
By the end of this lab you should be able to:
Create an external cascading style sheet and attach it to an HTML webpage Change the font size and colour of an element or group of elements referred to by the same tag Identify the syntax used to create style sheets including curly brackets, colons, semicolons and
spacing Add a comment to a style sheet Properly indent a style sheet Use a Google Font to mark up the text in your webpage Identify a single element in order to style it using the id attribute Identify a group of elements that need to be styled using the class attribute Use the <div> tag and the float declaration to lay out a webpage Use the <span> tag to markup a few words in a document
Exercise 1 – Styling your first webpage
1. Using the Chrome browser, go to this webpage: http://www.csd.uwo.ca/~lreid/cs1046/labs/lab2/lab2ex1a.html Right click and view the source for this page. Notice the simplicity of the structure of the body section. It only has three kinds of tags. It has paragraph tags (<p>), line break tags near the end (<br/>) and some header tags <h1> and <h2>). The formatting is kind of boring also, so let’s make it look a bit nicer. Let us create a duplicate of this page
2. Create a new folder called lab2.Open Notepad, create a new file and then immediately save the file (in the lab2 folder) as yourwesternuseridlab2ex1a.html (eg. jsmith2lab2ex1a.html). It is important to save the file as an .html and not .txt file. Consult Lab 1 Exercise 5 if you have trouble.
3. Return to the “view source“ of the webpage from Step 1, copy the entire markup (the tags and content) and paste it into the open Notepad window and resave the file. At this point, you should have a copy of original webpage. Test it in your browser to view the poem.
4. We are now going to make the poem look a bit nicer. We will do this by adding style rules. A style rule might say that we want all paragraphs to have a red font that is 16 pixels high. So we would put a style rule on all <p> tags. There are multiple ways of styling HTML. We can put the style rules right inside the HTML file but that makes the file look messy, so we are going to keep the style rules in a separate file. Another benefit of separating styling from markup is that you can use the same style file on other HTML webpages. Now let us make our first styles rule file (otherwise known as style
1
sheet). The separate file should always have the file extension .css. For example, you might call your style sheet: mystylesheet.css
5. Open another Notepad window, and in the same directory (the lab2 directory), do File>Save As and create another file called myfirststylesheet.css. (Similarly to when you create HTML pages with Notepad, make sure that the Save as type: is set to All Files)
6. Go back to your HTML file in Notepad, find the line with </head>, then before that line, add a new line that looks like this:
<link rel="stylesheet" type="text/css" href="myfirststylesheet.css">Thus your HTML file should now look like this:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>A Dr. Suess Poem</title><link rel="stylesheet" type="text/css" href="myfirststylesheet.css"></head><body><h1>Oh, the Places You'll Go!</h1>…
7. This new line tells the browser to open the myfirststylesheet.css and see if any formatting needs to be applied to the current webpage. Make sure you save your HTML file after adding the above line.
8. Now we need to put some style rules in the myfirststylesheet.css file. A style rule has 2 parts: a selector and a declaration. It looks like this: body { font-size: small; }The selector tells which tag to apply the style rule to and the declaration (which is surrounded by curly braces) lists the property (such as font-size), then a colon (:) and the new value for the property (such as 14px) followed by a semicolon. Be very careful when writing style rules. Remember that computers are extremely picky about syntax (how you type the style rule). Something even as minor as forgetting the semicolon can mess up the rule and it will not work. Here is a sample rule:p { font-size: 14px;}Notice the layout for the rule. You could put it all on the same line but we have guidelines for how to write them. Some guidelines are:
a. Put the opening { brace on the same line as the selectorb. Put the rule on next line and indent the rule a bit
2
Selector
declaration
/* paragraph style */p { color:blue; font-size: 14px; font-style: italics;}
p { color: lightblue; font-size: 14px;}
c. If you have another rule for this selector, put it on the next line, and indent it to the same position as the previous rule
d. Put the closing } brace on the next linee. Put comments (i.e., post-it notes to yourself or anyone else who might read the style sheet)
as needed. Comments between /* and */ are ignored by the browser but can be helpful when debugging, etc. We will explain more about comments in JavaScript, but for now, just think of comments as “sticky notes“ that you surround with /* and */ to help you remember why you did something (but the person viewing your page will not see this note).
You could write your style rule like this: p {color:blue;font-size: 14px;font-style: italics;}
But we recommend you do this:
9. Let’s add some rules now to our myfirststylesheet.css. Go to that blank file in notepad and add the following lines:
10. Save your style sheet file but do not close the Notepad window for it or the Notepad window for your HTML file. Go back to the browser and reload/refresh your .html file (or if you have closed the browser click on the .html file while in the lab2 folder). It should look similar to this:
11. NOTE: If your webpage looks exactly the same (without any color) return to your HTML file (using Notepad) and delete the double quotes where we define the link parameters (i.e., <link
rel="stylesheet" type="text/css" href="myfirststylesheet.css" >) and then type them in again (use the double quotes " on the
3
same key on the keyboard as over the apostrophe). This is a common formatting issue with copying symbols from Microsoft word. Notice that now the font is lightblue for all the text that was contained between paragraph tags. We had to spell that colour name EXACTLY the way that HTML was expecting it to be spelled or this would not have worked. You can get a list of all the possible colours names from here: https://www.w3schools.com/colors/colors_names.asp There are other ways to tell which color you want but for now, to keep things simple, let us just use the colour names.
12. Change the .css file so that when it is applied to your HTML file the paragraph font is even bigger and pick a new colour to display the font in. Save your .css file and reload your HTML file in the browser to make sure that your rule change worked.
13. Now let’s do some more styling. Right after the closing } brace in your .css file, add another rule so that you css file looks like the box below, then save your .css file and reload your HTML file in the browser and notice the change.
p { color: lightblue; font-size: 50px;}body { color: green; font-size: 8px;}
14. Notice that the <p> style change takes precedence over the <body> tag. The paragraphs have larger text and are colored light blue, while the rest of the body, which in this case are the headers, are green and have the smaller font of 8 pixels. Even if we switched the order of the style rules (put the <body> first before the <p> rule) the <p> rule would still take precedence. This is because the <p> </p>tags are nested INSIDE (between) the <body> and </body> tag. So the style sheet applies the rules for the outer most tag (everything between <body> and </body>) FIRST and then it applies the next inner tag (everything between the <p> and </p> next) and so on, until it comes to another inner tag, if the next inner tag has a rule for it, it will apply that rule. If the tag has no rule associated it will just take the rule from the body.
Congratulations, you now can:
a. Create a style sheet in a separate fileb. Use the <link> tag to point at the new style sheet file from your HTML filec. Change the font colour and font size of a paragraph tag and the body tagd. Add a comment (description that you can see but the browser ignores) to your style sheete. Properly indent a style rulef. Write a style rule with the correct syntax (remembering to include parts such as the selector,
the curly braces, the colon, the semi-colon)
4
Exercise 2 – Change the background, write your own style rule and use Google Fonts
1. Continuing with the same HTML file and style sheet file you used for Exercise 1 , let’s change the background colour by updating the body rule as shown below (don’t forget to save the .css file and reload the HTML file in the browser to check it):
p { color: lightblue; font-size: 20px;}body { background-color: darkblue;}
2. Now the headings look a bit dark. See if you can figure out how to change a <h1> tag to be white with a font size of 30 pixels by adding a new rule below the body rule (after the } brace) for a h1 tag (Hint: do NOT put a space between 30 and px, it needs to be 30px;).
3. Next, we will use an image for the background. Remove the background-color rule. The image that we will use is saved at http://www.csd.uwo.ca/~lreid/cs1046/labs/lab2/littleboy.jpg The way you make it a background image is by adding the rule:body { background-image: url("http://www.csd.uwo.ca/~lreid/cs1046/labs/lab2/littleboy.jpg");}Update the body rule so that it looks like it does above, save your .css file, and then reload your HTML file. Notice the image repeats, to remove the repetition add this rule to the body tag: background-repeat: no-repeat;
4. Now our heading h1 is not very visible, to fix the heading you should pick a colour that can be read over the white background.
5. Sometimes you may want to use newer and exciting fonts that exist on your computer, but unfortunately these is no guarantee that the font is available on someone else’s computer. Google developed Google Fonts to address this issue. Google Fonts provides online access to a wide variety of fonts. To view available Google Fonts, visit https://www.google.com/fonts. Next, we are going to try out the Google font called Tangerine: http://www.google.com/fonts/specimen/Tangerine
6. First, we have to instruct our HTML file to look at Google fonts for more style sheets that describe the new font. To do this, use Notepad to edit your HTML file. Add the line:<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> just below the statement
5
you added to include your myfirststylesheet.css file. So you HTML should now look like this:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>A Dr. Suess Poem</title><link rel=“stylesheet” type=“text/css” href=“myfirststylesheet.css”><link rel=“stylesheet” type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
7. Now go to your .css file and add the following rule to the body tagfont-family: 'Tangerine', serif;Thus your .css file should look similar to this:
p { color: lightblue; font-size: 20px;}body { background-image: url("http://www.csd.uwo.ca/~lreid/cs1046/labs/lab2/littleboy.jpg"); background-repeat: no-repeat; font-family: 'Tangerine', serif;}h1 { color: darkblue; font-size: 30px;}<body>8. Save both the .css and HTML file and then reload your
HTML file in the browser again and observe the changes, it should look similar to this:
Congratulations, you now can:
a. Change the background colour of a webpageb. Use an image as the background of a webpagec. Insert the fonts style sheet into your HTML file in
order to use Google Fontsd. Apply the new font to the webpage by adding a
new font-family rule to the style sheet file.
6
div#header { background-color: aquamarine;}
Exercise 3 – Layout your webpage using the Div tag
1. To layout your page into sections we will make use of the <DIV> tag. Going back to the cheesecake recipe from last week: http://www.csd.uwo.ca/~lreid/cs1046/labs/lab2/lab2ex3a.html If you were asked to break the recipe into sections or divisions, which sections would you identify? You might include the following 4 sections/divisions:
a. The top part of the recipe which includes the heading, the introductory sentence, and the picture of the cheesecake
b. The ingredients for the recipe,c. The instructions for the recipe,d. The author of the recipe, something like “Recipe by YOUR NAME“
2. Open and copy the source code for the cheesecake recipe webpage (use the link in step 1 above to access the webpage) into Notepad and save the file in your lab2 folder as: youruseridlab2ex3a.html
3. Next, we will use the <div> tag to separate the recipe into sections or divisions and use the id attribute with the tag to uniquely identify each division.
a. For the first section, immediately after the <body> tag but before the <h1> Cheesecake…. tag, add the following tag: <div id="header"> to indicate the start of a new division. The id attribute can be given any value you like as long as it had no spaces between the quotes and it is at least 1 character long). Here we use id="header", which identifies this division as the header division. Right before the ingredients <h2> put the following tag to indicate the end of this division: </div>
b. To indicate the Ingredients division, right before the <h2>Ingredie… tag but right after the </div> tag you just added, add the following tag: <div id="ingred"> This specifies that this is the start of the ingred division and put the </div> tag at the end of the list of ingredients, AFTER the </ul> tag.
c. For the third section, put the <div id="instruct"> and the </div> tags around the Instructions (try to figure out where to place those tags based on steps a and b above.
d. For the final section, add the following lines after the </div> you just added but before the </body> tag:<div id="footer"><p>Recipe by YOUR NAME</p></div>
4. Save your file and reload it into a browser. Notice that at this point there is no change in the way it is displayed.
5. In Notepad, add the required tags (remember to put this just after the <head> tag) to point the above HTML file to an external style sheet called recipe.css
6. Open another blank Notepad window and save this empty file to your lab2 folder as recipe.cssIn this exercise we are going to change the styling of each section by adding style rules to the recipe.css file like this one:
7
<div id="section1"><p>Paragraph 1</p></div><div id="section1"><p>Paragraph 3</p></div><div id="section1"><p>Paragraph 3</p></div>
<div id="sectiona"><p>Paragraph 1</p></div><div id="sectionb"><p>Paragraph 2</p></div><div id="sectionc"><p>Paragraph 3</p></div>
div#header { background-color: aquamarine;}div#ingred { background-color: lightskyblue;}div#instruct { background-color: lightseagreen;}
div#ingred { background-color: lightskyblue; height: 500px; width: 300px; float: left;}
7. Add the above style rule to the recipe.css file to change the background color for the header division. Reload your page again in a browser and notice the background color of the header division of the page.
8. The div#header says only do this background-color on the division indicated with the id called header. The # in div#header indicates to look a division that has an id with the name header. NOTE: within one HTML webpage, the id should always be unique, that is how we know which division we are referring to, thus each id should have a unique name. Consider the two snippets of HTML below and see if you figure out which one is valid:
9. Now add the following 2 rules to the style sheet:
10. Try to figure out what you would add to make the footer division have the background color of powderblue.
8
div#instruct { background-color: lightseagreen; height: 500px; width: 300px; float: right;}
div#wholerecipe { width: 600px;}
div#header { background-color: aquamarine; text-align: center;}div#ingred { background-color: lightskyblue; height: 500px; width: 300px; float: left; padding: 20px;}div#instruct { background-color: lightseagreen; height: 500px; width: 300px; float: left; padding: 20px;}div#footer { background-color: powderblue; clear: both; text-align: center;}div#wholerecipe { width: 680px;}
div#footer{ background-color: powderblue; clear: both;}
11. Now let’s move things around a bit. Change the div#ingred style rule to the following:
12. Reload your webpage for the recipe and notice that the ingredients have floated over to the left and the division has the specified width and height. Change the div#instruct rule as depicted, save your file, and reload your webpage. This is not quite what we wanted. We want that footer to be below the bottom of the ingredients and the bottom of the instructions.
13. Now change the div#footer to this: (to clear both the left floating item and the right floating item):
14. Reload the webpage. Hmmm, closer but not quite perfect as it leaves a blank area in the middle. Change the instructions to float to the left (tight up again the ingredients) rather than having them float to the right. Save your recipe.css file and reload.
15. While this is better, the header and footer seem a bit too long unless our browser is the perfect size. To address this issue, let us put a wrapper around the whole recipe to keep it to a standard width. To do this, we will add one more <div> tag to the html file. Immediately below the <body> tag add the following <div> tag: <div id="wholerecipe"> and just above the </body> add the following tag: </div>
16. Now go into your recipe.css file and add the following rule:
17. Finally, add the last little bits to the recipe.css file to clean the webpage up a bit (the bolded red lines should be the new ones you need to add): Watch how the padding declaration puts some space around the content in each division. Each HTML element can be considered a box that you can surround with padding (or other divisors around your elements, see here for more details)
Congratulations, you now can:
a. Use a <div> tag to separate your webpage into divisions
b. Use an id attribute to identify a section of a webpage
c. Use the hashtag to select an id to markup in the style sheet file
d. Use style sheets to change the layout of your page
9
e. Use the padding rule to put padding around your text
10
p#myfav { border:5px solid red;}
span#turnblue { color: cornflowerblue;}
Exercise 4 – Using the ID and Class attributes to identify sections of your webpage
We can use the ID attribute and the class attribute (which will be introduced in this exercise) with various tags. This ability is crucial and will play an important role when we start writing JavaScript code, so let us do a little more practice with it.
1. Open the webpage: http://www.csd.uwo.ca/~lreid/cs1046/labs/lab2/lab2ex4a.html and look at the song lyrics for the 2011 Adele song. We are going to use the ID attribute to highlight our favourite verse in that song. Read over the song and decide which verse is your favourite.
2. Open the source and copy it into a blank Notepad window and save the HTML as yourwesternuseridex4a.html in the lab2 folder. Find the <p> and </p> tags that are wrapped around your favourite verse and change the <p> tag for that verse to <p id="myfav">
3. Add the following line:<link rel="stylesheet" type="text/css" href="songlyrics.css"> somewhere within the <head> section of your HTML in order to point to a style sheet file.
4. In Notepad, open a new blank file, select File>Save As and save the blank file to your lab2 folder with the file name: songlyrics.css
5. In the songlyrics.css file add the following:
6. Save the .css file, reload/refresh your HTML page in a browser and notice the line around your favourite verse.
7. You can even use the ID attribute on particular words or phrases. For example, if you wanted to make the lyrics “out of the blue“ to be the colour blue, you could use the <span> tag with the id attribute. Find those words, then put this tag around them: <span id="turnblue"> out of the blue </span> NOTE: Usually you would use the <span> tag to identify or select some words within a line of text on your page.
8. Now go back to your songlyrics.css file and add the following:
9. Resave both files (html and css) and reload/refresh the webpage and notice those words are now blue. If you ever want to add styling to a single line or some word(s) on a line, use the <span> tag.
10. The ID attribute is ideal for uniquely identifying a section of the markup (i.e. if there is only ONE element we wish to select) but what if there are groups of things we want to identify. For example, in the Adele song, we might want to identify the chorus every time it appears. We could just put <p id=“chorus1“> and then later on <p id=“chorus2“> and then write the same rule for chorus1, chorus2, and …. But a faster way to do this is to use the class attribute. If we have a group of things that we want to identify/markup, we can associate or link each element in the group with or to the class attribute.
11
p.chorus { background-color: black; color: white;}
11. Let’s make it so that the chorus for the song always has a black background with white font. The chorus always starts with the line: Never mind, …. And it always ends with the line: but sometimes it hurts instead.“ Go to your HTML file which contains the Adele song and find every <p> tag that surrounds a chorus and change it to:<p class="chorus">
12. To reference a class in a style sheet file, you put a period . before the class name. Similar to the id name, the class name can be anything, as long as it is surrounded by quotes and doesn’t have spaces. Now go to your songlyrics.css page and add the following style rule:
13. Save your HTML and css files and reload your HTML page in a browser to make sure it worked.
Things to remember when using the class and id attributes:
With the class attribute, in the style sheet file, always put a period . before the class name e.g. p.chorus
With the id attribute, in the style sheet file, always put a hashtag # before the id name e.g. p#myfav
A unique id name should only be used ONCE in an HTML file. A class name can be used more than once in an HTML file.
Congratulations, you now can:
a. Use the id attribute to uniquely identify an element and then use the id to mark up the element
b. Use the <span> tag to select some text on your webpage. c. Use the class attribute to identify one or more areas of your webpage and then use that class
attribute to mark up those areas.
12
Exercise 5 – More practice
1. Open this page: http://www.csd.uwo.ca/~lreid/cs1046/labs/lab2/lab2ex5a.html in your browser, do View Source, and copy the HTML into a blank Notepad window. Save the file as yourwesternuseridex5a.html in your lab2 folder.
2. Look at the HTML tags, notice we have put all the <div> and <span> tags in and the id and class attribute tags. Open a new blank Notepad window and save it as sillyjokes.css
3. DO NOT CHANGE THE HTML FILE, but write the style sheet rules to make you page look similar to this one below. Use different colours (pick your favourite colours: https://www.w3schools.com/colors/colors_names.asp) but keep the layout similar to below.Hint: if you float the 3 joke sections to the left, they should line up correctly.
Congratulations, you now can:
a. Style an HTML file created by another individual.
HAND THIS WORK INTO OWL IN ORDER TO GET YOUR LAB MARK.
1. Go into Owl and for Lab 2, submit the style sheet file you created for Exercise 5. It should be called sillyjokes.css
13
![[ASM] Lab2](https://img.pdfslide.us/doc/110x75/588121881a28abb9388b7069/asm-lab2.jpg)
