Skip to main content

Design and create webpage for displaying your poem

Description​

The HTML code creates a webpage displaying a poem titled "JOHNY JOHNY YES PAPA" in a visually styled format using HTML tags for various font styles, sizes, colors, and alignments

Code​

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

<head>
    <title>MY POEM</title>
</head>

<body style="background-color: lightpink">
    <center>
        <h1>
            <mark><u>JOHNY JOHNY YES PAPA</mark></u>
        </h1>

        <p>
            <i>
                <font size="7" color="darkblue" face="Arial"> JOHNY JOHNY..<br> YES PAPA</font>
            </i>
        </p>

        <p><b>
                <font size="6" color="darkred" face=”Courier New”>
                    EATING SUGAR.? <br>NO PAPA</font>
            </b></p>

        <p><i><b>
                    <font size="5" color="darkgreen" face="Calibri"> TELLING A LIE.?<br> NO PAPA</font>
                </b></i></p>

        <p>
            <font size="5" color="darkvoilet" face=”Times New Roman”>
                OPEN YOUR MOUTH.?<br> HA HA..</font>
        </p>

        <p>
            <font size="4" color="black">
                Poem by: XYZ</font>
        </p>
    </center>
</body>

</html>
Output

Explanation of above code​

  • Starting HTML: Imagine HTML is like a language computers understand. When we start an HTML file, it's like saying to the computer, 'Hey, get ready, we're going to talk in HTML now.'
  • Setting Up the Document: It's like when you're writing a letter. You want to set up the basics first. The <head> part is where you put important information about your 'letter,' like a title. It's like writing the recipient's address on an envelope. The <title> is like giving your letter a title, so people know what it's about before they open it.
  • Starting the Main Content: Now, let's dive into the body of the letter. The <body> is where the main content of your letter goes, just like the main part of the letter you're writing.
  • Making Things Look Nice: Sometimes, you want your letter to look neat and organized. The <center> tag is like saying, 'Let's make everything nice and centered on the page, so it looks clean and tidy.'
  • Writing the Heading: When you write a letter, you often start with a big, important title. The <h1> tag is like that - it's saying, 'This is the big, important part.' And using <mark> and <u> is like highlighting and underlining the title to make it even more noticeable.
  • Styling the Text: You know how you use different styles when you write, like making words slanted or changing their size? The <i> tag is like saying, 'Let's slant this part, like we're whispering it.' And the <font> tag is like choosing how big, what color, and what font style you want for that part of the text.
  • Adding Emphasis: Sometimes, you want to say something extra loud or strong in your letter. The <b> tag is like using bold letters to make a point, saying, 'Pay attention to this!'
  • Writing the Poem: Now, let's get into the heart of the letter, where you tell your story. In this case, it's a poem. You use different styles to make it interesting, just like using different voices or expressions when you tell a story to make it more exciting.
  • Ending the Letter: Like ending a letter with your name, here we have a line that tells us who wrote the poem. It's like saying, 'This awesome poem was created by XYZ.'
  • Closing HTML: Finally, just like you finish a letter with 'Sincerely' or 'Best regards,' we end our HTML file by saying, 'Okay, we're done with the whole thing. The end!'

Learn more​

Reference​