Practical 1: HTML Headings Practice

Instructions:
Create a new HTML file named headings_practice.html using a text editor or integrated development environment (IDE).
Begin with the basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Headings Practice</title>
</head>
<body>
    <!-- Your content will go here -->
</body>
</html>

Inside the <body> element, create the following sections and use appropriate headings for each:
1. Introduction:
- Include an <h1> heading with the text “Welcome to HTML Headings Practice.”
- Write a brief paragraph introducing the purpose of the webpage.
1. Heading Levels:
- Create an <h2> heading with the text “Heading Level 2.”
- Create an <h3> heading with the text “Heading Level 3.”
- Create an <h4> heading with the text “Heading Level 4.”
- Create an <h5> heading with the text “Heading Level 5.”
- Create an <h6> heading with the text “Heading Level 6.”
- Under each heading, include a short description.
1. Examples:
- Create an <h2> heading with the text “Examples.”
- Under this heading, include at least two examples where you use different headings. For instance:
  - An <h2> heading followed by an <h3> heading.
  - An <h3> heading followed by an <h4> heading.
Save the HTML file.
Create a folder named “images” in the same directory as your HTML file. You can leave it empty for now.
Include some sample text and content between the headings to make the webpage visually appealing. You can use “Introduction to HTML” for this purpose.
Add a footer to your webpage. Use an <footer> tag and include your name and the current year.
Apply some basic CSS styling to make your headings visually appealing. You can add a <style> section in the <head> of your HTML file or link to an external CSS file.
Test your webpage in a web browser to ensure that all headings are displayed correctly and the content is structured logically.

Practical 2: HTML Paragraphs Practice

Instructions:

Create a new HTML file named paragraphs_practice.html using a text editor or integrated development environment (IDE).

Begin with the basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Paragraphs and Basic CSS Practice</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <!-- Your content will go here -->
</body>
</html>

Create a folder named “images” in the same directory as your HTML file. You can leave it empty for now.

Inside the <body> element, create the following sections:

Introduction:

Include an <h1> heading with the text “Welcome to Paragraphs Practice.”
Write a brief paragraph introducing the purpose of the webpage.

Paragraph Styling:

Create an <h2> heading with the text “Paragraph Styling.”
Below the heading, add a series of paragraphs (<p>) with different text content.
Apply the following basic CSS properties to the paragraphs using inline CSS or an internal <style> section:
- Set the font size of one paragraph to be larger than the default.
- Change the font color of another paragraph.
- Set the background color of one paragraph.
- Add italic and bold styles to another paragraph.
- Adjust the text alignment for a paragraph.

Image and Caption:

Create an <h2> heading with the text “Image and Caption.”
Include an image (you can use a placeholder image) and provide a caption for it using a <figcaption> element.
Use CSS to center the image and style the caption text.

Summary:

Create an <h2> heading with the text “Summary.”
Write a brief summary of what you learned in this practice assignment.

Save the HTML file.

Create an external CSS file named styles.css to style your HTML content. Apply CSS styles to enhance the visual appeal of your paragraphs, such as adjusting fonts, colors, and margins.

Test your webpage in a web browser to ensure that the paragraphs are styled according to your CSS rules and the content is displayed correctly.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Paragraphs and Basic CSS Practice</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>Welcome to Paragraphs Practice</h1>
    <p>This is a practice assignment to work with paragraphs in HTML and apply basic CSS styling.</p>

    <h2>Paragraph Styling</h2>
    <p style="font-size: 20px;">This paragraph has a larger font size.</p>
    <p style="color: blue;">This paragraph has a different font color.</p>
    <p style="background-color: lightgray;">This paragraph has a light gray background.</p>
    <p style="font-style: italic; font-weight: bold;">This paragraph is italicized and bold.</p>
    <p style="text-align: center;">This paragraph is centered.</p>

    <h2>Image and Caption</h2>
    <figure>
        <img src="images/placeholder.jpg" alt="Placeholder Image">
        <figcaption>This is a placeholder image with a caption.</figcaption>
    </figure>

    <h2>Summary</h2>
    <p>In this practice assignment, we learned how to create paragraphs in HTML and apply basic CSS styles to them. We also included an image with a caption and centered it using CSS.</p>
</body>
</html>

/* Add CSS styles here to enhance the visual appeal of the webpage */

/* Example CSS styles for the paragraphs */
p {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    font-family: Arial, sans-serif;
}

/* Style for the caption */
figcaption {
    text-align: center;
    font-style: italic;
    color: #777;
}

practical - Week 1

Practical 1: HTML Headings Practice

Practical 2: HTML Paragraphs Practice