Scribd
Upload
20 views6 pages

Ui/ux HTML Basics Ca

The document contains 10 practice problems on HTML coding. The problems cover basic HTML tags and attributes like headings, paragraphs, images, tables, lists, hyperlinks etc. and how to style them using colors and fonts. The last problem demonstrates generating a web page output with different styled elements.

Uploaded by

PRINCE HENRY VICTOR D A
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
20 views6 pages

Ui/ux HTML Basics Ca

The document contains 10 practice problems on HTML coding. The problems cover basic HTML tags and attributes like headings, paragraphs, images, tables, lists, hyperlinks etc. and how to style them using colors and fonts. The last problem demonstrates generating a web page output with different styled elements.

Uploaded by

PRINCE HENRY VICTOR D A
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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