Reference no: EM133301531
Before you do the exercises
If you haven't already done so, you should create a folder in your personal drive for all the exercises.
CSS is a W3C standard for describing the appearance of HTML elements. Another common way to describe CSS's function is to say that CSS is used to define the presentation of HTML documents. With CSS, we can assign font properties, colors, sizes, borders, background images, and even the position of elements. CSS is a language in that it has its own syntax rules. CSS can be added directly to any HTML element (via the style attribute), within the element, or, most commonly, in a separate text file that contains only CSS
Exercise 2-1 Adding Styles
1. Open, examine, and test lab2-exercise2-1.html in a browser.
2. Add the following internal style definition and test.
<header>
<h1 style="color: red;">Share Your Travels</h1>
Remember: these labs use the convention of red bolded text to indicate content to change/enter.
3. Modify the following and test.
<header>
<h1 style="color: red; background-color:gray;">Share Your Travels</h1>
Exercise 2-2 Embedded Style Sheets
4. Add the following embedded style to the <head> element from the previous exercise.
<head lang="en">
<meta charset="utf-8">
<title>Share Your Travels -- New York - Central Park</title>
<style> h1 {
color: blue; background-color: yellow;
}
</style>
</head>
5. Test. Why didn't it seem to work?
It didn't work because of cascade specificity rules. The internal style created in step 2 overrides the embedded style we just created. To fix it, we will have to remove the internal styles.
6. Remove the internal styles created in steps 2-3. Test.
The <h1> element should now have blue text against a yellow background.
7. Insert the following style rule to between the } and </style> of the above style group in step 4 and test.
h1, h2, h3 {
font-family: "Trebuchet MS", "Lucida Grande", Tahoma, sans- serif;
}
This is a grouped selector which selects all three headings.
8. Add the following style rule after the one created in previous step and test.
h1, h2, h3 {
font-family: "Trebuchet MS", "Lucida Grande", Tahoma, sans -
serif;
}
h1 {
font-family: Georgia, Cambria, "Times New Roman", serif;
}
Notice that the new style rule for h1 overrides the earlier one due to the cascade principle of location (i.e., when rules have the same specificity, then the latest are given more weight).
9. Change the previous style rule to the following. Before you test it, ask yourself whether this will affect the font-family of the headings.
h1, h2, h3 {
font-family: "Trebuchet MS", "Lucida Grande", Tahoma, sans- serif;
}
body {
font-family: Georgia, Cambria, "Times New Roman", serif;
}
Exercise 2-3 External Style Sheets
1. Create a new text document with the following content:
header, footer { color: white;
background-color: #213643;
}
nav {
background-color: #728B96;
}
h1, h2, h3 {
font-family: "Trebuchet MS", "Lucida Grande", Tahoma, sans- serif;
}
body {
font-family: Georgia, Cambria, "Times New Roman", serif;
}
Notice that this document contains no HTML. Also notice that the first style rule uses a grouped selector, meaning that both the header and footer elements will receive the same style.
2. Save your file as lab2-exercise2-3.css.
3. Open lab2-exercise2-3.html (which has the same content as the last exercise).
4. Add the following to the <head> element.
<head lang="en">
<meta charset="utf-8">
<title>Share Your Travels -- New York - Central Park</title>
<link rel="stylesheet" href="lab2-exercise2-3.css" />
</head>
5. Save and test lab2-exercise2-3.html in browser.
6. Test lab2-exercise2-3.css in browser.
At some point everyone will mistakenly load a css file into the browser rather than the HTML file. What will happen will vary depending upon the browser and one's computer setup.
Exercise 2-4 Element, Class, and ID Selectors
When defining CSS rules you will need to first need to use a selector to tell the browser which elements will be affected by the styles. CSS selector allow you to select individual or multiple HTML elements, elements that belong together in some way, or elements that are positioned in specific ways in the document hierarchy. The previous exercises used HTML selectors. The next exercises make use of other selectors.
1. Open lab2-exercise2-4.html.
2. Add the following to the markup.
<section>
<h3 id="reviews">Reviews</h3>
<div>
3. Open lab2-exercise2-4.css, add the following style, and test.
#reviews {
border-bottom: solid 3pt #213643; color: #ed8030;
}
4. Change the previous selector to the following and test.
h3#reviews
In this example the selector in step 3 and 4 are functionally equivalent. However, the one in step 4 is more specific, and slightly more self-documenting, so is preferable.
5. Switch to lab2-exercise2-4.html and add the following.
<section>
<h3 id="reviews">Reviews</h3>
<div>
<p class="first">By Ricardo on <time>September 15, 2012</time></p>
<p>Easy on the HDR buddy.</p>
</div>
<hr/>
<div>
<p class="first">By Susan on <time>October 1, 2012</time></p>
<p>I love Central Park.</p>
</div>
<hr/>
</section>
6. Switch to lab2-exercise2-4.css and add the following style.
.first {
color: #728B96; font-style: italic;
}
7. Test in browser.
Remember that whenever the lab says "test in browser," it means view the HTML file in a browser.
Exercise 2-5 Attribute Selectors
An attribute selector provides a way to select HTML elements either by the presence of an element attribute or by the value of an attribute. This can be a very powerful technique, but because of uneven support by some of the browsers, not all web authors have used them.
1. Open lab2-exercise2-5.html and view in browser.
2. Open lab2-exercise2-5.css, add the following style, and test.
[title] {
cursor: help; text-decoration: none; padding-bottom: 3px;
border-bottom: 2px dotted blue;
}
This will select every element that contains a title attribute. Examine the HTML to see which elements contain a title attribute.
3. Modify the attribute to the following and test.
[title="Calgary"] {
This selects only the one element whose title attribute is exactly Calgary.
4. Modify the attribute (add the asterisk) to the following and test. [title*="Calgary"] {
This selects all elements that contain the text Calgary within in.
5. Modify the attribute (add the caret) to the following and test. [title^="Calgary"] {
This selects all elements that begin with the text Calgary.
Hands-On Exercises #3 - JavaScript
Exercise 3-1 Adding a Form to JavaJam Coffee House
Continue from previous week, in this exercise you will cerate new Jobs page that contains a form. You have the following tasks:
Task 1: The Website Folder.
Create a folder called javajam3_1. Copy all of the files from the "javajam_this_week" folder into the javajam3_1.
Task 2: Configure the CSS.
Modify the external style sheet (javajam.css). Open javajam.css in a text editor. Review Figure 3.1 and the wireframe in Figure 3.2. Notice how the text labels for the form controls are on the left side of the content area but contain right-aligned text. Notice the empty vertical space between each form control. Configure CSS as indicated below:
1. Create a form element selector with a style declaration that sets 2em of padding. Configure a label element selector to float to the left with block display. Set the text alignment to right, assign a width of 8em, and set 1em of right padding.
2. Configure the input element and textarea element selectors with block display and 1em of bottom margin.
3. Configure a selector for an id named mySubmit that sets the left margin to 9.5em.
4. Configure a selector for an id named herojobs with 250px height. Set the background image to herojobs.jpg. Also configure background-size: 100% 100%.
Save the javajam.css file
Task 3: Create the Jobs Page.
Use the Menu page as the starting point for the Jobs page. Launch a text editor and open menu.html. Save the file as jobs.html. Modify your jobs.html file to look similar to the Jobs page (shown in Figure 3.1) as follows:
1. Change the page title to an appropriate phrase.
2. The Jobs page will contain an h2, a paragraph, and a form in the main element. Assign the div to an id named herojobs. Delete the table in the main element.
3. Edit the text within the h2 element to say "Jobs at JavaJam". Replace the text in the paragraph with the following: "Want to work at JavaJam? Fill out the form below to start your application."
4. Prepare to code the HTML for the form area. Begin with a form element that uses the post method and the action attribute to invoke server-side processing. Configure the action attribute to send the form data to https://webdevbasics.net/scripts/javajam8.php.
5. Configure the form control for the Name information. Create a label element that contains the text "Name:". Create a text box named myName. Use the for attribute to associate the label element with the form control.
6. Configure the form control for the E-mail information. Create a label element that contains the text "E-mail:". Create a text boxnamed myEmail. Use the for attribute to associate the label element with the form control.
7. Configure the Experience area on the form. Create a label element that contains the text "Experience:". Create a textarea element named myExperience with rows set to 2 and cols set to 20. Use the for attribute to associate the label element with the form control.
8. Configure the submit button. Code an input element with type="submit" and value="Apply Now". Assign the input element to an id named mySubmit.
9. Code an ending tag on a blank line after the submit button. Save your file and test your web page in a browser. It should look similar to the page shown in Figure 3.1. If you are connected to the Internet, submit the form. This will send your form information to the server-side script configured in the form tag. A confirmation page that lists the form information and their corresponding names will be displayed.
Task 4: Configure HTML5 Form Controls.
Get more practice with the new HTML5 elements by modifying the form on the Jobs page to use HTML5 attributes and values. Modify the jobs.html file in a text editor.
1. Add the following sentence to the paragraph above the form: "Required fields are marked with an asterisk (*)."
2. Use the required attribute to require the name, e-mail, and experience form controls to be entered. Add an asterisk at the beginning of each label text.
3. Configure the input element for the e-mail address with type="email".
Save your file and display your web page in a browser. Submit the form with missing information or only a partial e-mail address. Depending on the browser's level of HTML5 support, the browser may perform form validation and display an error message. Figure 3.3 shows the Jobs page rendered in the Firefox browser with an incorrectly formatted email address.
Exercise 3-2 Adding JavaScript to JavaJam Coffee House
Use the web pages indicated in this exercise from the Chapter 9 javajam9 folder. You have three tasks in this case study:
Task 1: The Website Folder.
Create a folder called javajam3_2. Copy all the files from the javajam3_1 folder into the javajam3_2 folder.
Task 2: Add a Date to the Home Page.
Launch a text editor and open the index.html file. You will add the date that the document was last modified to the bottom of the index.html page.
1. Using JavaScript. Modify the page as follows:
a. In the footer area after the e-mail link, add a script block contained within a div element that will write the following message to the document:
"This page was last modified on: date"
b. Use the document.lastModified property to print the date.
Save the index.html page and test it in the browser. You should see the new information in the footer area below the e-mail address.
Task 3: Display an Alert Message on the Menu Page.
Launch a text editor and open the menu.html file. You will add JavaScript to the menu.html page so that an alert message will pop up when the user places the mouse over the phrase "Mug Club". The alert message will indicate "JavaJam Mug Club Members get a 10% discount on each cup of coffee!"
1. Using Javascript. Modify the page as follows:
a. Add a hypertext link to the first paragraph with an onmouseover event handler as follows:
<a href="#" onmouseover="alert('JavaJam Mug Club Members get a 10% discount on each cup of coffee!');">Mug Club</a>
Save the menu.html page and test it in the browser. Figure 3.4 shows the alert message when users place their mouse pointer over the hyperlinked phrase.
Attachment:- Fundamentals of Web Development.rar