- Weekh Tutorial Pdf Bcnglish Love Songs Search X File C Users Pokha Onedrive Desktop Sp Week6 20tutorial Pdf To 1 Q I 1 (148 KiB) Viewed 26 times
1. apply 06 has this html code in question:
<!DOCTYPE html>
<!-- Sujan Pokharel, 18/08/2001 -->
<html lang="en">
<head>
<link rel="stylesheet"
href="css/applystyles06.css">
<title>Melbourne</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
</head>
<body>
<div id="container">
<!-- Use the header area for the website
name or logo -->
<header>
<h1>Amazing
Melbourne</h1>
</header>
<!-- Use the main area to
add the main content of the webpage -->
<main>
<img src="images/sj1.jpg"
alt="National Historic Site 1">
<img src="images/sj2.jpg"
alt="National Historic Site 2">
<img src="images/sj3.jpg"
alt="Downtown Melbourne">
<img src="images/sj4.jpg"
alt="Melbourne Restaurant">
<img src="images/sj5.jpg"
alt="Melbourne Buildings">
<img src="images/sj6.jpg"
alt="Melbourne View">
</main>
<!-- Use the footer area to add webpage
footer content -->
<footer>
<p>Designed by:
Student's Name</p>
</footer>
</div>
</body>
</html>
2. applystyles06.css has thsi code;
/* Style sheet created by: Sujan Pokharel, 18/08/2001
*/
/* Style for body specifies a background color */
body {
background-color: #007fe0;
}
/* Style to create a fluid image */
img {
max-width: 100%;
margin: 1%;
border: double 0.3em #000014;
width: 100%;
}
/* Style for the container centers the page and
specifies the width */
#container {
width: 100%;
margin-left: auto;
margin-right: auto;
}
/* Style for the header specifies top margin, background
color, rounded corners, and center align content */
header {
font-family: Verdana, Arial, sans-serif;
margin-top: 0.2em;
text-align: center;
}
/* Style for the main specifies a block display, text
properties, margins, padding, rounded corners, and borders
*/
main {
display: block;
margin-top: 0.5em;
padding: 1em;
border-radius: 1em;
background-color: #FFFFFF;
box-shadow: .5em .5em .5em #404040;
}
/* Style for the footer specifies font size, text
alignment, and top margin */
footer {
font-size: .70em;
text-align: center;
margin-top: 2em;
}
Weekh Tutorial.pdf bcnglish love songs - Search x + File C/Users/pokha/OneDrive/Desktop/SP/Week6%20Tutorial.pdf To 1 Q ID Page view A Read aloud Add text Y Draw Highlight Erase lo 2 03 Week 6 Tutorial This tutorial contains Exercise6+Lab6. This tutorial is part of your assessment task 1. Please submit your completed work in ZIP format onto moodle. Note: Submit your ZIP file in your respective lecturer's tutorial submission link for marking and feedback Exercise6: Creating Media Queries Instructions: In this exercise, you will use your text editor to add tablet and desktop media queries to a style sheet. You will create style rules for a tablet viewport and a desktop viewport. You then add a style rule for an image element to style the pictures in two columns for a tablet viewport and three columns for a desktop viewport. The completed webpage is shown in Figure 6.1 for a tablet viewport and Figure 6.2 for a desktop viewport. You will also use professional web development practices to indent, space, comment, and validate your code. Amazing Melbourne Figure 6.1
Dead by: Stade Figure 6.1 → Cers/Syed/Desktop/20723.202020/WPD/Tutoria20W/ Wk. Amazing Melbourne Figure 6.2 Web Design with HTML & CSS3: Comprehensive, 8th Edition Jessica Minnick; Lisa Friedrichsen ISBN-10: 1305578163 ISBN-13: 9781305578166 © 2017 Cengage Learning Australia Perform the following tasks: 1. Open apply06.html in your browser to view the webpage. You can find this file in Week6 Tutorial Material folder in moodle. 2. Open apply06.html in your text editor, review the page, and modify the comment at the top of the page to include your name and today's date. 3. Open the applystyles06.css file from the Week6 tutorial folder in your moodle. Modify the comment at the top of the style sheet to include your name and today's date. 4. In the applystyles06.css file, add a media query to target a tablet viewport. Use min-width:
4. In the applystyles06.css file, add a media query to target a tablet viewport. Use min-width: 481px and include the following comment, Styles for tablet layout. 5. Create a new style rule for the img element to set the width to 45% within the tablet media query. 6. In the applystyles06.css file, add a media query to target a desktop viewport. Use min-width: 769px and include the following comment, Styles for desktop layout. 7. Create a new style rule for the img element to set the width to 30% within the desktop media query. 8. Save all of your changes and open the apply06.html in Google Chrome. 9. Use the developer tools in Google Chrome to view each viewport's dimensions and determine a better viewport size for the desktop viewport. 10. Modify the desktop media query with the new value in the applystyles06.css file. 11. Validate your HTML document using the W3C validator found at validator.w3.org and fix any errors that are identified. 12. Validate your CSS file using the W3C validator found at http://jigsaw.w3.org/css-validator/ and fix any errors that are identified. 13. Submit the files in a format specified by your lecturer.