Scribd Logo
Upload

Welcome to Scribd!

  • Ui/ux HTML Basics Ca

    Uploaded by

    PRINCE HENRY VICTOR D A
    7 views6 pages
    ANTONIO ROGER P AVV CBE

    Original Title

    UI/UX HTML BASICS CA

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    ANTONIO ROGER P AVV CBE

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    7 views6 pages

    Ui/ux HTML Basics Ca

    Uploaded by

    PRINCE HENRY VICTOR D A
    ANTONIO ROGER P AVV CBE

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 6

    CB.SC.

    U4AIE23104

    Prac%ce Problems 4
    1. Program to see difference between paragraphs and line breaks.
    <html>
    <body>
    <title> Paragraph and Normal lines </title>
    This is a tale of two cities, where dreams intertwined with reality.
    <br>
    <p>In the bustling streets of London, amidst the cacophony of car
    horns and hurried footsteps, lived a young artist named Emily. Her
    days were spent in a whirlwind of colors and shapes, as she painted
    the world as she saw it - vibrant and full of life.</p>
    <p>Meanwhile, across the channel, in the romantic alleys of Paris, a
    struggling writer named Antoine sought solace in the words he penned.
    Each sentence was a piece of his soul, laid bare for the world to
    see.</p>
    </body>
    </html

    2. Write a program to create a web – page with your city name in red.

    <html>
    <body>
    <p style="color:red;"> My City is COIMBATORE</p>
    </body>
    </html>

    3. Write a program to print a paragraph with different color and font.

    <html>
    <body>
    <p style="color:red;font-family:Courier New">Once upon a time, in a
    lush green forest, there lived a wise old tortoise named Terrance.</p>
    <p style="color:green;font-family:Calibri">Terrance was a creature of
    habit, spending his days wandering through the dense foliage,
    pondering the mysteries of the world around him.</p>
    <p style="color:blue;font-family:Times New Roman">One fine day, as
    Terrance was basking in the warm sunlight, he stumbled upon a group of
    young hares racing through the meadow.</p>
    <p style="color:yellow;font-family:Consolas">Intrigued by their speed
    and agility, Terrance decided to challenge them to a race, believing
    his wisdom would surely outweigh their youthful vigor.</p>
    </body>
    </html>
    CB.SC.U4AIE23104

    4. Write a code for basic html webpage with heading, paragraph and an image.

    <html>
    <head>
    <center>
    <h1><B>Amrita Vishwa Vidhyapeetham</B></h1> <img
    src="https://www.amrita.edu.in/images/logo.png"
    style="width:300px;height:200px;">
    </a>
    </center>
    </head>
    <body>
    <center>
    <p style="font-family:Calibri;"> Established in 2003, Amrita Vishwa
    Vidyapeetham stands tall as a beacon of educational excellence in
    India. Boasting multiple campuses and a diverse array of disciplines,
    it has solidified its reputation as a premier research university. At
    its core lies a dedication to delivering top-tier education and
    pushing the boundaries of knowledge through pioneering research
    endeavors. By cultivating an atmosphere that champions innovation and
    forward thinking, the university strives to nurture individuals who
    can navigate the complexities of our modern world with integrity and
    efficacy. Through its holistic approach, Amrita Vishwa Vidyapeetham
    endeavors to shape leaders who are not only proficient in their fields
    but also deeply committed to addressing the pressing issues of our
    time</p>
    </center>
    </body>
    </html>

    5. Create a HTML page having a table with 3 rows and 3 columns.

    <html>
    <body>
    <center>
    <table border=1.5>
    <caption align="top"><font size="+2" color="red">CGPA</font>
    </caption>
    <tr>
    <th>Roll Number</th>
    <th>Name</th>
    <th>SGPA</th>
    </tr>
    <tr>
    <td>AIE23111</td>
    <td>JOHN</td>
    <td>9.9</td>
    CB.SC.U4AIE23104

    </tr>
    <tr>
    <td>AIE23104</td>
    <td>RAJ</td>
    <td>9</td>
    </tr>
    <tr>
    <td>AIE23123</td>
    <td>LOKESH</td>
    <td>8.25</td>
    </tr>
    </table>
    </body>
    </html>

    6. Write a code for a hyperlink that opens a new tab when clicked.

    <!DOCTYPE html>
    <html>
    <body>
    <a href="https://www.youtube.com/watch?v=kJQP7kiw5Fk"
    target="_blank">Watch cute puppies playing</a>
    </body>
    </html>

    7. Write a html code to generate the following output:

    <html>
    <body>
    <b><ul type="square">
    <li>Maharashtra</li>
    <ul>
    <li>Pune</li>
    <ol type="I">
    <li>Dighi</li>
    <li>Moshi</li>
    <li>Shivajinagar</li>
    </ol>
    <li>Mumbai</li>
    <ol type="I">
    <li>Santakruiz</li>
    <li>Vikroli</li>
    <li>Mumbra</li>
    </ol>
    </ul>
    CB.SC.U4AIE23104

    </ul></b>
    </body>
    </html>

    8. Create a html page with 7 separate lines in different colors. State the color of each line in its text

    <!DOCTYPE html>
    <html>
    <body>
    <p style="color:red;">This line is in red color.</p>
    <p style="color:orange;">This line is in orange color.</p>
    <p style="color:yellow;">This line is in yellow color.</p>
    <p style="color:green;">This line is in green color.</p>
    <p style="color:blue;">This line is in blue color.</p>
    <p style="color:indigo;">This line is in indigo color.</p>
    <p style="color:violet;">This line is in violet color.</p>
    </body>
    </html>

    9. Write a HTML code to generate the following table.

    <html>
    <body> <style>
    table{
    border:Black 1px solid;
    border-collapse:collapse;
    width:50%; } th,td{
    border:black 1px solid;
    }
    </style>
    <table>
    <tr>
    <th>Country</th>
    <th colspan="2">Population(in crores)</th>
    </tr>
    <tr>
    <td rowspan="3">INDIA</td>
    <td>1998</td>
    <td>85</td>
    </tr>
    <tr>
    <td>1999</td>
    CB.SC.U4AIE23104

    <td>90</td>
    </tr><tr>
    <td>2000</td>
    <td>100</td>
    </tr><tr>
    <td rowspan="3">USA</td>
    <td>1998</td>
    <td>30</td>
    </tr><tr>
    <td>1999</td>
    <td>35</td>
    </tr><tr>
    <td>2000</td>
    <td>40</td>
    </tr><tr>
    <td rowspan=3>UK</td>
    <td>1998</td>
    <td>25</td>
    </tr>
    <tr>
    <td>1999</td>
    <td>30</td>
    </tr>
    <tr>
    <td>2000</td>
    <td>35</td>
    </body>>
    </html>

    10. Write a html code to generate the given output:

    <!DOCTYPE html>
    <html>
    <head>
    <center>
    <title>Amrita Vishwa Vidhyapeetham</title>
    </center> <style>
    body { background-
    image:
    url('https://images.shiksha.com/mediadata/images/articles/158799
    4716phpmjYKDq.jpeg');
    color: white;
    } .course1 {
    color: red; font-
    style: italic;
    font-family: Arial, sans-serif;
    CB.SC.U4AIE23104

    } .course2 {
    color: blue; font-
    style: normal;
    font-family: 'Courier New', monospace;
    } .course3 {
    color: green; font-
    style: bold;
    font-family: 'Calibri', monospace;
    } .course4 {
    color: pink; font-
    style: normal;
    font-family: 'Aptos', monospace;
    } .course6 {
    color: yellow; font-
    style: italic;
    font-family: 'Comic sans', monospace;
    } .course5 {
    color: orange; font-
    style: normal;
    font-family: 'Times New Roman', monospace;
    }
    </style>
    </head>
    <body>
    <h1>Amrita Nagar</h1>
    <h2 style="color:yellow;">123 College Street<br>Coimbatore ,
    Tamil Nadu - 641112</h2>
    <h2> </h2>
    <h3 class="course1">Computer Science Engineering</h3>
    <h3 class="course2">Computer Scinece with AI</h3>
    <h3 class="course3">EEE</h3>
    <h3 class="course4">Mechanical Engineering</h3>
    <h3 class="course5">Bachelors in Science</h3>
    <marquee class="course6">Welcome to Amrita Vishwa Vidhyapeetham!
    We offer a great courses with great college life.</marquee>
    </body>
    </html>

    You might also like