Exercise 3: Validation & Adding More Elements

exercise3.md

Exercise 3: Validation & Adding More Elements

Task 1: HTML Validation

Utilize the Markup Validation Services to validate the HTML code of your previously created pages: exercise1.html and exercise2.html. Examine the results for any warnings or errors and take the necessary steps to address them. After fixing the issues, re-run the validation to ensure compliance with HTML standards.

Note: You don't need to submit anything for this task. You will validate and fix your code.

Task 2: Inspect Element

Open exercise2.html page and utilize the Inspect Element feature in your browser. Please conduct the tasks below:

1. Open console to view the list of errors in the page.
2. In the Network tab, locate and provide details about any file with a 404 status (missing file).
3. Click on the Source tab to gain insights into the organization of the website's files
4. Inspect the page available at this link. Do the following temporary changes when inspecting elements of the page:
   1. Modify the title 'HTML5 & GitHub Page' to a second-level heading <h2>.
   2. Navigate to the 'Styles' section and change the background color of the body to yellow.
   3. Locate the <h2> element in the HTML code, click on it, and change the font color to red by typing 'color: red;' in the styles.
   4. Utilize the 'Toggle Device Toolbar' to preview the page's appearance on different devices such as iPhone SE, Samsung Galaxy S8+, and Surface Pro 7..

Note: You don't need to submit anything for this task. You will learn to use Inspect Element feature.

Task 3: More elements for formatting text

Open the exercise2.html file and include the following tasks into the existing content of the file.

1. Questions and Answers Section using <dl> Element:

   • Utilize the <dl> element to organize a question and answers section with a minimum of 3 questions and corresponding answers. You can use Lorem Ipsum text for both questions and answers.

2. Paragraph with Block-Level Quote:

   • Write a paragraph and incorporate it into a block-level quote (<blockquote>). Ensure to cite the source by including a link from where you obtained the text.

3. HTML Comment:

   • Add HTML comment "Exercise 3: Validation & Adding More Elements" in the following format: <!-- Exercise 3: Validation & Adding More Elements -->.

4. Downloadable Image Link:

   • Create a hyperlink labeled "Download File" that, when clicked, initiates the download of the image available at this link. Guide:Creating hyperlinks

5. Link to Another Part of the Same Document:

   • Generate random paragraphs with some titles for each paragraph. Create a hyperlink within the document that directs users to another section.

6. Abbreviation or Acronym for URL:

   • Use an abbreviation or acronym for the term "URL" (Uniform Resource Locator) within the content.

7. <address> Element for Address:

   • Employ the <address> element to present the following address:

     <address>
         Address: Siilitie 14<br>
         00980, Helsinki<br>
         Finland.
     </address>

Task 4: Multimedia in Web pages (Optional Task)

Mozilla Splash Page – Embedding Multimedia

1. Create a folder within your individual exercises directory and name it as exercise3.
2. Get the HTML code and required images from GitHub and place them inside the mozilla_splash directory (https://github.com/dipaish/splashpage.git )
3. You will conduct the following tasks from this page
   1. Preparing Images
   2. Adding a logo to the header
   3. Adding a video to the main article content
   4. Adding responsive images to the further info links