Skip to main content

Design and create webpage for your Wish List

Description​

The HTML code creates a webpage describing a wish list. It includes a title, a marked and underlined heading, ordered and unordered lists of wishes, an image, and a table showcasing challenges and opportunities.

Code​

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

<head>
    <title>Wish List</title>
</head>

<body style="background-color: lightyellow;">
    <font size="6">

        <p><u><mark> MY WISH LIST </mark></u></p>

        <p><b><u> ORDERED LIST </u></b></p>
        <ol type="a">
            <li> I wish to travel to abroad</li>
            <li> I wish to have a wonderful graduate ceremony with my family</li>
            <li> I wish to dance with Prabhu Deva</li>
            <li> i wish to be a speaker in front of 400 people</li>
            <li> I wish to play cricket with Virat Kohli</li>
        </ol>

        <p><b><u> UNORDERED LIST </u></b></p>
        <ul type="circle">
            <li> I wish to dance under the rain with loving people</li>
            <li> I wish to go to the wonderful resort with my family</li>
            <li> I wish to learn new Programming Language </li>
            <li> I wishto Join the big corporate company </li>
            <li> I wish to swim in ocean </li>
        </ul>


        <p><b><u>IMAGE</u></b></p>
        <img src="https://media1.tenor.com/images/a862d2cb92bfbe6213e298871b1e8a9a/tenor.gif?itemid=15805236"
            width="300" height="300">

        <p><b><u> TABLE </u></b></p>
        <table border=2 bordercolor="red" cellpadding="8">
            <tr bgcolor="lightgreen">
                <th>CHALLENGES</th>
                <th>OPPORTUNITIES</th></b>
            </tr>
            <tr>
                <td> Confusion about career choices. </td>
                <td> To recoup with career decision.</td>
            </tr>
            <tr>
                <td> Failures related to exam.</td>
                <td> Responding to Globalization.</td>
            </tr>
            <tr>
                <td> Time management</td>
                <td> Empowering People.</td>
            </tr>
            <tr>
                <td> Competition pressure</td>
                <td> Improving Ethical Behavior. </td>
            </tr>
            <tr>
                <td> Communicating issues to parents</td>
                <td> Getting recognition at early stage. </td>
            </tr>
        </table>
    </font>
</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.'
  • Starting the Main Content: Once we've set up the structure, we start the main part where all the content goes, like the body of a letter.
  • Making Things Look Nice: The <font> tag helps in styling the text, making it visually appealing. In this case, it's used to make the text larger for emphasis.
  • Writing the Heading: The heading is like the title of a story or book, grabbing attention. The <u> and <mark> tags underline and highlight the heading to make it stand out.
  • Creating Lists: Lists help organize information. The ordered list <ol> has items with numbers (a, b, c...), and the unordered list <ul> has items with bullet points.
  • Adding List Items: Each <li> (list item) is a wish on our wish list. It's like writing down each item on a list, like items you need to buy at a store.
  • Displaying an Image: Just like putting a picture in your storybook, the <img> tag displays an image. It helps convey an idea or a feeling related to the content.
  • Creating a Table: The <table> tag is like creating a chart or a table in a document. It's a neat way to organize information, like listing challenges and opportunities side by side.
  • Closing HTML: Just like how you say 'The end' at the end of a story, we close the HTML file. It's like putting a period at the end of a sentence. It tells the computer we're done.

Learn more​

Reference​