-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathLab 1.html
73 lines (73 loc) · 6.79 KB
/
Lab 1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html><head>
</head>
<body>
<p><strong></strong><strong>Part 1 - Favorites Website</strong></p>
<div><span>Continue working on your favorites website that you started as you watched the lecture videos. </span></div>
<div></div>
<div>The title of your page should be "My Favorite Things".</div>
<div></div>
<div>Add the following elements, with the given IDs and class attributes, to the page. The sections should be in this order.</div>
<div>
<ul>
<li>A <strong>h1</strong> element with the text "Some of my favorite things" with the <strong>id=page-title</strong></li>
<li>A <strong>h1</strong> element with the text "By <your name>"</li>
<li>A <strong>div</strong> element for your favorite movie (or YouTube channel or TV series or similar.). The div should have the class <strong>favorite-section.</strong> Inside the div:</li>
<ul>
<li>Add a <strong>h2</strong> element with the text "Favorite Movie"</li>
<li>Write a short <strong>p</strong> paragraph description of one of your favorite movies</li>
<li>Surround the movie name with a <strong>span</strong> tag, with an id attribute <strong>id="favorite-movie-title".</strong> </li>
<li>Add <strong>a</strong> link to a website about that movie. </li>
</ul>
<li><span>Create another <strong>div</strong> for your favorite band/music artist. </span>The div should have the class <strong>favorite-section. </strong><span>Inside this div:</span></li>
<ul>
<li><span>Add a <strong>h2</strong> element with the text "My Favorite Band/Artist"</span></li>
<li><span>Describe your </span>favorite band/artist in a <strong>p</strong> paragraph. Surround the band/artist name with a <strong>span</strong> tag, with an id attribute <strong>id="favorite-music-name"</strong>. </li>
<li>Add <strong>a</strong> link to their website.</li>
</ul>
<li>Create another <strong>div</strong> for your favorite food. The div should have the class <strong>favorite-section. </strong>Inside this div:</li>
<ul>
<li>Add a <strong>h2</strong> element with text "My Favorite Food". </li>
<li>Add a <strong>ul</strong> unordered list of your 3 favorite foods</li>
<li>Give the <strong>li</strong> element containing your most favorite food the <strong>id = "most-favorite-food"</strong></li>
</ul>
<li><span>Create another <strong>div</strong> for some favorite images. </span>The div should have the class <strong>favorite-section. </strong><span>Inside this div:</span></li>
<ul>
<li>Add a <strong>h2</strong> with the text "Some Favorite Images"</li>
<li>Download two images of your choice from <a href="https://unsplash.com/">https://unsplash.com/</a> or <a href="https://pixabay.com/">https://pixabay.com</a><a href="https://pixabay.com/">/</a> or <a href="https://commons.wikimedia.org/wiki/Main_Page">https://commons.wikimedia.org/wiki/</a><a href="https://commons.wikimedia.org/wiki/Main_Page">Main_Page</a>, and save in the same directory as your favorites.html file</li>
<li>Add two <strong>img</strong> elements, one for each image</li>
<li>Give both img elements the <strong>class = "favorite-image"</strong></li>
<li>Give both img elements an <strong>alt</strong> attribute with descriptive text.</li>
</ul>
<li>Create another <strong>div</strong> for your favorite books (or comics or magazines or blogs or websites or similar) The div should have the class <strong>favorite-section. </strong>Inside this div:</li>
<ul>
<li>Add a <strong>h2</strong> element with the text "My Favorite Books"</li>
<li>Create a <strong>table</strong> about your two favorite books.</li>
<li>Organize this information into a table with <strong>tr</strong>, <strong>th</strong> and <strong>td</strong> elements to create a header row, and three columns: the book's name, author, and <strong>a</strong> link to a web page about that book, for example, a page on Amazon. </li>
</ul>
</ul>
Practice CSS by adding styles of your choice to your web page. Create a file called<strong> style.css</strong> in the same directory as favorites.html, and use a <strong>link</strong> in favorites.html to include your styles.</div>
<div>
<ul>
<li>Apply style(s) of your choice to the <strong>page-title</strong> h1. Make sure these styles are not applied to the other h1 element. </li>
<li>Make sure all of your section <strong>div</strong> elements have the same class <strong>"favorite-section".</strong> Use margins, padding, and borders to arrange and space these sections.</li>
<li>Add the class attribute <strong>"section-header"</strong> to each of your section <strong>h2</strong> headers. Write CSS selector and styles to apply a style of your choice to the section headers.</li>
<li>Make the background your favorite color. Hint: apply the style to the <strong>body</strong> element. If desired, change the color and font of the body text too. </li>
<li>Use CSS to select your <strong>favorite-movie-title</strong> span to by the ID. Use attributes to display the name of the movie in italic text, and a different color to the paragraph text.</li>
<li>Use CSS to select your <strong>favorite-music-name</strong> span by the ID. Display the name of the band in bold text and a different color to the paragraph text.</li>
<li>Use CSS to select your<strong> most-favorite-food</strong> li element. Add a style of your choice to this element. </li>
<li>Use CSS to select your images by the class <strong>favorite-image</strong>. Add one (or more) of these styles (rounded corners, filters, centering, responsive to page size, apply style on hover) to your images <a href="https://www.w3schools.com/css/css3_images.asp">https://www.w3schools.com/css/css3_images.asp</a></li>
<li>Apply styles to your table - display the header <th> elements in one color text, and the body <td> elements in a different color. Add a border. </li>
</ul>
</div>
<div><em><strong>Optional: </strong>add any other styles you like, add more HTML elements and data.</em></div>
<p></p>
<div>
<div><em><strong>To submit:</strong> Create a zip file containing all of your files created for this lab, including your favorites.html file, your style.css file, and the image resources you used. Upload this to the dropbox. Please give your files descriptive names.</em></div>
<div><em></em></div>
<div><em>How to zip files on Windows <a href="https://www.laptopmag.com/articles/how-to-zip-files-windows-10">https://www.laptopmag.com/articles/how-to-zip-files-windows-10</a></em></div>
<div><em>How to zip files on Mac <a href="http://osxdaily.com/2012/01/10/how-to-zip-files-in-mac-os-x/">http://osxdaily.com/2012/01/10/how-to-zip-files-in-mac-os-x/</a></em></div>
<div><em></em></div>
<div><em>OR, if you've used GitHub already - push everything to GitHub and submit a link to your GitHub repository.</em></div>
</div>
</body></html>