Homework SourseOn page 121 in your textbook complete HandsOn Exercise 8 Pra
On page 121 in your textbook complete ‘Hands-On Exercise’ #8, ‘Practice with the Cascade’, but skipping section \'d\'.Create a web page and save it as advantage.html
The page should contain an unordered list with at least three advantages of using CSS
The text “CSS Advantages” should be contained within <h1> tags
This page should contain a link to the W3C site
Write the HTML code so that one of the advantages is configured to be a class called news
Place an email link to yourself on the web page
The web page should be associated with an external style sheet called ex8.css
Create an external style sheet and save it as ex8.css and format it as follows:
Document background color of white
Document text color of #000099
Document font-family of Arial, Helvetica or sans-serif
Hyperlinks should have a background color of gray (#CCCCCC)
<h1> element should have Times New Roman font with black text color
The news class should use red italic text
Launch a browser and test your work. Modify the web page or the CSS file until it displays correctly.
Copy the advantage.html file and save it as advantage2.html
Modify advantage2.html by adding an inline style to the <h1> tag making it have red text
See section 3.3 on pp. 87-88, ‘Inline CSS with the Style Attribute’ for information regarding creating inline styles with the style tag.
See section 3.6 on pp. 100-102 ‘Class, id, and Descendant Selectors’ for information regarding creating a class selector.
Use the W3Schools and HTML Dog sites listed in the Resources for reference and to assist you with creating the external and inline styles.
Make sure that you add your name and the exercise information in comments in the head of your both of your web documents.
Put the HTML files and the CSS file into a zip file.
When you have completed your assignment, save a copy for yourself and submit your zip file to your instructor using the Dropbox by the end of the workshop.
Solution
HTML CODE:
<html>
<head>
<meta charset=\"utf-8\"> <meta name=\"viewport\" content=\"width=device-width\">
<title>JS Bin</title>
<link rel=\"stylesheet\" type=\"text/css\" href=\"ex8.css\">
</head>
</html>
<html lang=\"en\">
<head>
<meta charset=\"utf-8\">
<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Happiness</title>
<!-- Bootstrap -->
<link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css\" integrity=\"sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7\" crossorigin=\"anonymous\">
<link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css\" integrity=\"sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r\" crossorigin=\"anonymous\">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn\'t work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src=\"https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js\"></script>
<script src=\"https://oss.maxcdn.com/respond/1.4.2/respond.min.js\"></script>
<![endif]-->
<style> .dashboard {margin-top: 1.5em; } </style>
</head>
<body>
<div class=\"container\">
<div class=\"row\">
<div class=\"page-header\">
<h1>Happiness <small> tracking team happiness</small></h1>
</div>
</div>
<div class=\"row\">
<div class=\"col-xs-2\"> <ul class=\"nav nav-pills nav-stacked\">
<li role=\"presentation\"><a href=\"{% url \'home\' %}\">Home</a></li>{% for u in all_users %} <li role=\"presentation\" {% if user.pk == u.pk %}class=\"active\"{% endif %}>
<a href=\"{% url \'individual\' u.id %}\">{{ u.first_name }}</a>
</li>
{% endfor %}
</ul>
</div>
<div class=\"col-xs-10\">
{% block content %}
{% endblock content %}
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap\'s JavaScript plugins) -->
<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js\"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js\" integrity=\"sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS\" crossorigin=\"anonymous\"></script>
</body>
</html>
