Scribd
Upload
19 views19 pages

k224818 We Lab 2

The document contains multiple HTML tasks showcasing various web design elements, including text formatting, tables, quotations, and layout structures. Each task demonstrates different HTML and CSS features, such as bold and italic text, table creation, blockquotes, and flexbox layouts. The tasks are structured as individual HTML documents with specific styling and content examples.

Uploaded by

k224818
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
19 views19 pages

k224818 We Lab 2

The document contains multiple HTML tasks showcasing various web design elements, including text formatting, tables, quotations, and layout structures. Each task demonstrates different HTML and CSS features, such as bold and italic text, table creation, blockquotes, and flexbox layouts. The tasks are structured as individual HTML documents with specific styling and content examples.

Uploaded by

k224818
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 19

WE-LAB-2

22K-4818

1)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Task 1</title>
<link rel="stylesheet" href="task1.html">
</head>
<body>
<p>This is the example of bold display it like: <p style="font-
weight: bold;">Test Text</p></p>
<p>This is the example of italic display it like: <p style="font-
style: italic;">Test Text</p></p>
<p>This is the example of bold display it like: <p style="font-
weight: bold;">Test Text</p></p>
<p>This is the example of italic display it like: <p style="font-
style: italic;">Test Text</p></p>
<p>This is the example of smaller display it like: <p style="font-
size: smaller;">Test Text</p></p>
<p>This is the example of monospace display it like: <p
style="font-family: monospace">Test Text</p></p>
<p>This is the example of monospace display it like: <p
style="font-family: monospace">Test Text</p></p>
<p>This is the example of monospace display it like: <p
style="font-family: monospace">Test Text</p></p>
<p>This is the example of monospace display it like: <p
style="text-decoration: line-through; ;">Test Text</p></p>
<p>This is the example of display it like: <p style="text-
decoration-line: underline;">Test Text</p></p>
<p>This is the example of display it like: <p style="text-
decoration-line: underline;">Test Text</p></p>
<p>This is the example of display it like: <p><span
style="background-color: #FFFF00;">Test Text</span></p></p>
</body>
</html>
2)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Task 2</title>
</head>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<table style="width:50%">
<tr>
<th rowspan="3">Day</th>
<th colspan="3">Seminar</th>
</tr>
<tr>
<th colspan="2">Schedule</th>
<th colspan="2" rowspan="2">Topic</th>
</tr>
<tr>
<th>Begin</th>
<th>End</th>
</tr>
<tr>
<td rowspan="2">Monday</td>
<td rowspan="2">8:00 a.m.</td>
<td rowspan="2">5:00 p.m.</td>
<td >Introduction to XML</td>
</tr>
<tr>
<td >Validity: DTD and Relax NG</td>
</tr>

<tr>
<td rowspan="3">Tuesday</td>
<td rowspan="">8:00 a.m.</td>
<td rowspan="">11:00 p.m.</td>
<td>XPath</td>
<tr>
<td rowspan="">11:00 a.m.</td>
<td rowspan="">2:00 p.m.</td>
<td rowspan="2">XSL Transformations</td>
</tr>
<tr>
<td rowspan="">2:00 p.m.</td>
<td rowspan="">5:00 p.m.</td>
</tr>

<tr>
<td rowspan="2">Monday</td>
<td rowspan="2">8:00 a.m.</td>
<td rowspan="2">12:00 p.m.</td>
<td >XSL Formatting Objects</td>
</tr>
</table>
</body>
</html>

3)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Task 3</title>
</head>
<style>
*{
background-color: #d9d9d9;
}

</style>
<body>
<div>Quotation <b>q</b> tag</div>
<br>
<div><q>Success demands singleness of purpose.</q></div> <br>
<div><q>Choosing a goal and sticking to it changes
everything.</q></div> <br>
<div><q>Choosing a job you love and, you will never have to work a
day in your life</q></div> <br>
<q>The most important thing about motivation is goal setting. You
should always have a goal</q>
<br><br><br><br>
<div>quotation <b>blockquote</b> tag for Block</div>
<dl>
<dt>
<div><p><b>Big data is advance Telemedicine</b></p>
<blockquote>Big data is making impact in every field
now a day. By using latest technology in telemedicine field, one can
get more information about their diseases, so they can take more care
using telemedicine.</blockquote></div>
</dt>
</dl>
</body>
</html>

4)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Task 4</title>
</head>
<style>
.h-1{
background-color:#fb5656;
width: 100%;
font-size: 24px;
margin-bottom: 10px;
padding-left: 2px;
border-radius: 5px;
border-width: 2px;
border-color: black;
}
.nav-1 {
padding-left: 30px;
}
.nav-2{
background-color: #a2f3fa;

width: 100%;
padding-left: 2px;
margin-bottom: 10px;
border: 2px solid black;
border-radius: 5px;
font-size: 24px;
}

.main{
background-color:#d9d9d9;
font-size: 24px;
margin: 2px;
margin-bottom: 10px;
padding-left: 2px;
border-radius: 5px;
border: 2px solid black;
border-color: black;
width: 70%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

#m-1{
text-align: center;
justify-content: center;
align-items: center;
}

.main-aside{
display: flex;
}

.aside {
width: 30%;
font-size: 24px;
margin: 2px;
margin-bottom: 10px;
padding-left: 5px;
border-radius: 5px;
border: 2px solid black;
border-color: black;
background-color: #f6fa08;

.a-1, .a-2, .a-3 {


background-color: #faa2a2;
margin: 10px;
padding: 10px;
border-radius: 5px;
border: 2px solid black;
border-color: black;
width: 50%;
text-align: center;
}

.nav-3{
background-color: #a2f3fa;
margin: 10px;
padding: 10px;
border-radius: 5px;
border: 2px solid black;
border-color: black;
width: 50%;
text-align: center;
}

.footer {
width: 100%;
background-color: #39b54a;
padding-bottom: 30px;
border-radius: 5px;
border: 2px solid black;
border-color: black;
text-align: center;
font-size: 24px;
}

</style>
<body>
<header class="h-1">
<div>&lt;header&gt;</div>
<nav class="nav-1">&lt;nav&gt;</nav>
</header>
<nav class="nav-2">&lt;nav&gt;</nav>
<div class="main-aside">
<main class="main">
<div id="m-1">&lt;main&gt;</div>
<article class="a-1">
<div>&lt;article&gt;</div>
<header>
<div>&lt;header&gt;</div>
</header>
<div>continedo</div>
<footer>
<div>&lt;footer&gt;</div>
</footer>
</article>

<article class="a-2">
<div>&lt;article&gt;</div>
<header>
<div>&lt;header&gt;</div>
</header>
<div>continedo</div>
<footer>
<div>&lt;footer&gt;</div>
</footer>
</article>

<article class="a-3">
<div>&lt;article&gt;</div>
<header>
<div>&lt;header&gt;</div>
</header>
<div>continedo</div>
<footer>
<div>&lt;footer&gt;</div>
</footer>
</article>
<nav class="nav-3">
<div><div>&lt;nav&gt;</div></div>
</nav>
</main>

<aside class="aside">
<div>&lt;aside&gt;</div>
<nav class="nav-1">
<div>&lt;nav&gt;</div>
</nav>
</aside>
</div>
<footer class="footer">
<div>&lt;footer&gt;</div>
</footer>
</body>
</html>

5)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Task 5</title>
</head>
<style>
.mapouter{position:relative;text-
align:left;width:300px;height:200px;}.gmap_canvas
{overflow:hidden;background:none!
important;width:300px;height:200px;}.gmap_iframe {width:300px!
important;height:200px!important;}
</style>
<body>
<h1>The Art Book Shop</h1>
<ul>
<li><a href="">home</a></li>
<li><a href="">new publication</a></li>
<li><a href="">contact</a></li>
</ul>
<div>Charing Cross Road, London, WC2, UK</div>
<br>
<div>Telephone 0207 946 0946</div>
<br>
<div>Email <a href=
"mailto:books@example.com">books@example.com</a></div>
<div class="mapouter">
<div class="gmap_canvas">
<iframe class="gmap_iframe" frameborder="0" scrolling="no"
marginheight="0" marginwidth="0" src="https://maps.google.com/maps?
width=300&amp;height=200&amp;hl=en&amp;q=&amp;t=&amp;z=14&amp;ie=UTF8&a
mp;iwloc=B&amp;output=embed"></iframe>
</div>
</div>
<br>
<div>&copy The Art Bookshop</div>
</body>
</html>
6)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Task 6</title>
</head>
<style>
*{
font-weight: bold;
}

.html{
border: 1px solid black;
}

.head, .body{
border: 1px solid black;
width: 75%;
margin: auto;
}

.title{
border: 1px solid black;
width: 75%;
margin: auto;
text-align: center;
}

.h1-p{
border: 1px solid black;
width: 75%;
height: 300px;
margin: auto;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}

</style>
<body>
<div class="html">
&lt;html&gt;
<div class="head">
&lt;head&gt;
<div class="title">
&lt;title&gt; <span style="font-weight: 100;">This is
your title </span>&lt;/title&gt;
</div>
&lt;/head&gt;
</div>
<br>
<div class="body">
&lt;body&gt;
<div class="h1-p">
<div class="h1">
&lt;h1&gt; <span style="font-weight: 100;">This is your
Header </span>&lt;/h1&gt;
</div>
<div class="p">
&lt;p&gt; <span style="font-weight: 100;">This is your
paragraph</span> &lt;/p&gt;
</div>
</div>
&lt;/body&gt;
</div>
&lt;/html&gt;
</div>
</body>
</html>

7)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Task 7</title>
</head>
<style>

*{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial,
sans-serif;
}

.con{
width: 100%;
background-color: purple;
color: white;
font-weight: bold;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}

.flex-cont{
display: flex;
margin-top: 10px;
gap: 10px;
}

#a1, #a2, #a3 {


background-color: aqua;
padding: 6px;
}

.flex-2 {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}

.flex-2 button:last-child{
flex: 100%;
}
</style>
<body>
<div class="con"><h1>Complete Flex Box Example</h1></div>
<div class="flex-cont">
<div id="a1">
<h3>First Article</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Est asperiores numquam soluta. Ipsum sapiente excepturi iure nostrum
sint perspiciatis error! Vero nostrum esse animi velit possimus, totam
minus at amet.</p>
</div>
<div id="a2">
<h3>Second Article</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Est asperiores numquam soluta. Ipsum sapiente excepturi iure nostrum
sint perspiciatis error! Vero nostrum esse animi velit possimus, totam
minus at amet.</p>
</div>
<div id="a3">
<div class="flex-2">
<button>Smile</button>
<button>Laugh</button>
<button>Wink</button>
<button>Shrug</button>
<button class="blush">Blush</button>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptas eveniet id dolorem! Dolor at totam, ipsum cum laboriosam
ratione reprehenderit, tempore quos ullam itaque quis vitae minus
dolorum veniam dolore.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Labore expedita minus, libero quos id nemo sint autem vero explicabo
at, eius, nostrum sunt nulla atque. Tempora nisi vitae pariatur
architecto.</p>
</div>
</div>
</body>
</html>

8)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Task 8</title>
</head>
<style>
.head{
background-color: #d9d9d9;

}
.nav-bar{

display: flex;
background-color: violet;
align-items: center;
justify-content: space-between;
padding: 15px;
margin-bottom: 10px;
}

.nav-bar ul {
display: flex;

.go-btn {
background-color: black;
color: white;
width: 60px;
}

.main-text {
width: 75%;
margin: auto;
height: 600px;
}

.main-body {
display: flex;
gap: 10px;

.art{
width: 75%;
background-color: white;
padding: 10px;
}

.rel{
width: 25%;
text-align: center;
background-color: violet;
}

.rel ul {
display: flex;
flex-direction: column;
gap: 20px;
margin: 6px;
}

.foot{
width: 98%;
margin-top: 6px;
background-color: white;
padding: 12px 12px;
}

</style>
<body>
<header class="head">
<h1 style="text-align: center;">Header</h1>
<div class="main-text">
<nav class="nav-bar">
<div>HOME</div>
<div>OUR TEAM</div>
<div>PROJECTS</div>
<div>CONTACT</div>
<div class="right">
<input class="s-btn" type="text" placeholder="Search query">
<button class="go-btn">Go!</button>
</nav>

<div class="main-body">
<section class="art">
<h1 style="text-align: center;">Article Heading</h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Laudantium eligendi vitae reiciendis explicabo qui hic sint harum
dolores ab. Ducimus, neque repellat dignissimos facere voluptatem
provident sint eaque consequuntur officiis.
<article class="subs">
<h2>subsection</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nulla enim assumenda in! Voluptatibus dolores, nulla pariatur tempora
eum odio fugit rerum distinctio quos autem incidunt ipsum nemo facere
nesciunt libero?
<br> <br>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Explicabo aliquam est labore, animi eligendi laborum dolorum aspernatur
nostrum cumque illum quas dolor, fuga et, ratione minus ad laboriosam
eum quis.
</article>

<article class="subs-2">
<h2>Another subsection</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Optio hic excepturi aspernatur aut dolores eaque ipsa dolorum, labore,
quas quis laudantium reprehenderit blanditiis dolore repellat minima,
velit fugit quibusdam id.
<br><br>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Molestiae cumque odit fugiat, blanditiis iste magnam est consequuntur
perferendis eveniet, velit commodi quisquam optio! Iste corrupti atque
dignissimos dolorem culpa iure.
</article>

</section>
<aside class="rel">
<h1>Related</h1>
<ul>
<li><a href="">Oh i do like to be beside the
seaside</a></li>
<li><a href="">Oh i do like to be beside the sea</a></li>
<li><a href="">Although in the north of England</a></li>
<li><a href="">it never stops raining</a></li>
<li><a href="">Oh well...</a></li>
</ul>
</aside>
</div>
<footer class="foot">
<div>
&copy Copyright 2050 by nobody. All rights reserved
</div>
</footer>
</div>
</header>
</body>
</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy