Download the GamePortalSite.zip archive provided for this lab and unzip it on your H-drive. Use the file index.html found in that directory to complete the following steps. At the same time, prepare a Word docx that includes your answers to the questions. When you look up an answer, cite it with a footnote to the source you used. 1. In the list, add a new item and link: > Our Favourite Game Systems Save changes and test in browser. This will create a link to another file in the Website. You will create this file later in this lab. 2. Add the following near the top of the page and test: The \# sign simply indicates a link to the same page. This is a common technique for temporarily creating links whose destinations are not yet known or created. 3. Now, add id attributes to the appropriate headings such that these list items to the Top Story and Top Reviews headings. Update the anchor links as needed. When you click on Top Story it should jump into the Top Story paragraph. Test this by clicking on the bulleted list of links. Adding Images 1. Add the following image tag to your code: ch3istarcraft 2/h3 q= brutaltdoom. Use the cite element with this information and add a citation below the image. Hint: use to force a line break. 2. Right click on the image and choose Inspect. What are the image's dimensions? Modify the image tag by adding width and height, to make the image about half as tall. Be sure to keep the image's proportions! Based on your experiences with this image, OR after doing some research, What is the purpose of using title attribate in an image tag? What is the purpose of using alt attribute in an image tag? 3. Change the sre attribute to the following (i.e., add a slash before the folder name) and test. You will no longer see the central park image. What does the browser show? 4. Remove the slash added in step 3 . Why does a root reference not work for this sre attribute? Why are relative references better for web fage images? 5. Just after this line: ...StarCraft II the ultimate competitive real-time strategy game. and before the

Top Reviews

, add the following code and test it: p> Rating: = "full star" "/> = "full star" "/> =n full star /> /> Read More p h2> Top Reviews Notice the space between each star image. StarCraft II will present a cast of new heroes and familiar fas again offer unparalleled online play through Battle net, the co features to make StarCraft II the ultimate competitive real-tir 6. Now, remove the returns between each img> tag, as shown below, and then test. simg src="images/full-star.gif" title="full star" >-cimg src="images/full-star.gif" title="full star" > simg sre="images/full-star,gif" titlem"full star" > - img src="images/full-star.gif" title="full star" > "cimg src=" "images/empty-star, gif" title "empty star" > \begin{tabular}{l} StarCraft II will present a cast of new hee \\ again offer unparalleled online play throug \\ features to make StarCratt II the ultimate \\ Rating Fristill Read Mote \\ \hline \end{tabular} What changes do you see? Why removing the carriage returns changes the output? Adding HTML5 Semantic Elements HTML5 introduced a number of new semantic elements that can make your markup more understandable and thus easier to maintain. The next set of exercises introduces several of these elements. 1. Just where the body element is opened, add the following and test: Game Portal>

• Top Story
Top Reviews
er>
2. Add the following code to the end of the file, before the / body :

Copyright \ 2015 Game Portal

footer > Note the changes from these two elements. What is the purpose of each of these two semantic elements to a page? What symbol does the character entity \ create? (Make sure to check the full list of character entities in your course slides!) 3. Identify the logical parts of your document and add , and > elements to your Webpage. Note that there is no special browser formatting for most of HTML5 semantic elements. They are used purely to make our markup clearer. Later we will learn how to use Cascading Style Sheets to adjust the appearance. Add figure and caption elements for the starcraft.jpg image that you created previously. Figure element comes with formatting style, you should be able to see the change when you added the figure > element. What change do you see when you add these two elements around your image? Note that the element should be used only for images that are essential but whose position on the page could change. The star icons used for the rating are not essential; they should not be contained within a . More on next page Creating Table in HTML 1. At the end of Starcraft 2 section, create a table that looks like the following table. Table I-Review Scores Include the code for this table in your lab report. Validate your HTML file 1. Validate your file and if there is any error or warning fix them. Creating Table in HTML 1. At the end of Starcraft 2 section, create a table that looks like the following table. Table I-Review Scores Include the code for this table in your lab report. Validate your HTML file 1. Validate your file and if there is any error or warning fix them. 1. Create a new page named gameSystems.html file that uses appropriate HTML semantic elements: - header for the page: include h1 heading: Game Portal on Gaming Systems - nav: links to the two articles - Section: with a header: h2 heading: Our Favourites - Articles: for any two game systems you like include: A header with a h3 heading A Paragraph of content - You can use this site to generate filler paragraphs. A footer with a link to that system's official web site opened in a new tab - Figure and figcaption: An image of a game system - you will need to search for one: - Must have a creative commons license - proportionally sized to be 100 pixels tall - include a caption describing it and as needed - ideally URL's are links. - a footer for the page: use and include a copyright notice symbol, your name, the page's creation date and time The page will look something like the image on the next page. COMP 2511 - Lab activity 6 Game Portal on Gaming Systems Our Favourites PlayStation Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut urna eu dolor porta tempus eu at quam. Suspendisse ac aliquam odio. In a aliquam turpis, in efficitur nunc. Nulla facilisi. Donec sagittis dolor ut venenatis ultrices. Cras purus dolor, semper at quam quis, dapibus faucibus odio. Praesent viverra ultrices diam. Nunc nisl ante, blandit eu neque a, posuere scelerisque elit. Aliquam porttitor varius aliquam. Nunc vehicula consectetur ante. PlayStation.com Xbox Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut urna eu dolor porta tempus eu at quam. Suspendisse ac aliquam odio. In a aliquam turpis, in efficitur nunc. Nulla facilisi. Donec sagittis dolor ut venenatis ultrices. Cras purus dolor, semper at quam quis, dapibus faucibus odio. Praesent viverra ultrices diam. Nunc nisl ante, blandit eu neque a, posuere scelerisque elit. Aliquam porttitor varius aliquam. Nunc vehicula consectetur ante. Xbox com By C Raimond Spekking / CC BY-SA 4.0 (via Wikimedia Commons), CC BY-SA 4.0, hutzs //commons wikimedia orgdiv index php? curid=116140253 e PJ Perri Jan 13, 2023 at 8.44 2. Save this new page so that it is in the same directory as the earlier index.html file. Ensure that the link on the index.html file goes to this file. 3. Validate your file at the end. Submission Create a zip folder that contains your Web file and a Word document that contains your answers to the questions. Submit your files in your course website. COMP 2511 - Lab activity 7 HTML > Tag Example Define the title of a work with the tag: pcite The Scream by Edward Munch. Painted in 1893./p Definition and Usage The tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting