Skip to main content

Design and create webpage using HTML and CSS about an awesome animal (Use necessary CSS tags)

Description​

The HTML code defines a basic webpage structure with a title and content about tigers. It includes a styled heading, an image of a tiger, and three paragraphs with specific styles.

Code​

Prog7.html
<!-- /* Save HTML file as: Prog7.html* / -->
<!DOCTYPE HTML>
<html>

<head>
    <title>Cascading Style Sheet (CSS)</title>
    <style type="text/css">
        head_style {
            height: 400px;
            width: 50em;
            color: blue;
            background-color: lightpink;
            font-size: 50px;
            letter-spacing: 10;
            text-align: center;
            text-shadow: 3px 3px yellow;
            box-shadow: 2px 4px 4px blue;
            border: 4px solid red;
            padding: 20px;
        }

        p1_style {
            color: red;
            font-size: 25px;
            letter-spacing: 10;
            text-shadow: 2px 2px black;
        }

        p2_style {
            color: blue;
            font-size: 35px;
            letter-spacing: 10;
            text-shadow: 3px 3px yellow;
        }

        p3_style {
            color: green;
            font-size: 35px;
            letter-spacing: 10;
            text-shadow: 3.5px 1.5px brown;
        }
    </style>
</head>

<body bgcolor="lightyellow">

    <center>
        <br>
        <br><br>

        <head_style>MY AWESOME ANIMAL (TIGER)</head_style>
        <br><br>
        <br><br>

        <img src="https://th.bing.com/th/id/R.44911e11999fb4f7007ca88ebe5a8952?rik=RZTQYPK6Ge35bA&riu=http%3a%2f%2fwww.pbh2.com%2fwordpress%2fwp-content%2fuploads%2f2012%2f10%2fcutest-animal-gifs-tiger-cub-yawn.gif&ehk=G6CyfhCYAApjqm4PyDwsU2iF7cdBJnMBQ%2f6dhaiBrhs%3d&risl=&pid=ImgRaw&r=0" Height="200" Width="400"></img>

        <p>
            <p1_style>Tiger is the biggest and strongest animals of the jungle.<br> Tiger is a “Carnivorous” animal
                (flesh eater) </p1_style>
        </p>


        <p>
            <p2_style>Tigers live for about 25 years<br>
                Tigers love to swim and play in the water<p2_style>
        </p>


        <p>
            <p3_style>Tigers can sprint at over 60 km/hour<br>
                Tigers “Roaring” sound can reach 3km away</p3_style>
        </p>

    </center>

</body>

</html>
Output

Explanation of above code​

  • Starting HTML: HTML is like a language that computers understand. Starting HTML is like saying 'Hey, let's create a webpage using this language.'
  • Defining Document Type: <!doctype html> is the declaration that specifies the document type and version of HTML being used.
  • Starting HTML Structure: <html> is the root element that encapsulates the entire HTML content.
  • Defining Head: <head> contains meta-information about the document, including the title and links to external resources like stylesheets.
  • Setting Title: <title> sets the title of the webpage that appears in the browser's title bar or tab.
  • Defining Styles: <style> is used to embed CSS (Cascading Style Sheets) within the HTML file, defining styles for various elements.
  • Defining CSS Styles: CSS styles are defined for selectors like head_style, p1_style, p2_style, and p3_style, specifying properties like color, font-size, letter-spacing, text-shadow, etc.
  • Starting Body: <body> is the container for the visible content of the webpage.
  • Setting Body Background Color: bgcolor attribute of <body> sets the background color of the page to light yellow.
  • Centering Content: <center> is used to center the content within it.
  • Adding Line Breaks: <br> creates line breaks for spacing.
  • Displaying Heading: <head_style> defines a styled heading for the webpage.
  • Displaying Image: <img> displays an image sourced from a URL with specified height and width.
  • Displaying Paragraphs: <p> defines paragraphs of text.
  • Defining CSS Styles for head_style: Styles a heading with the class 'head_style'. It sets the height to 400 pixels, width to 50em, text color to blue, background color to light pink, font size to 50 pixels, letter spacing to 10 units, aligns text to center, adds a yellow text shadow, blue box shadow, a 4-pixel solid red border, and 20 pixels of padding.
  • Defining CSS Styles for p1_style: Styles for a paragraph. It sets the text color to red, font size to 25 pixels, letter spacing to 10 units, and adds a black text shadow.
  • Defining CSS Styles for p2_style: Styles for another paragraph. It sets the text color to blue, font size to 35 pixels, letter spacing to 10 units, and adds a yellow text shadow.
  • Defining CSS Styles for p3_style: Styles for yet another paragraph. It sets the text color to green, font size to 35 pixels, letter spacing to 10 units, and adds a brown text shadow.

Learn more​

Reference​