Scribd
Upload
4 views

Lab Assignment 1

Uploaded by

hrishijuiit
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
4 views

Lab Assignment 1

Uploaded by

hrishijuiit
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/ 17

Assignment No.

01
Course Code: ICT - 2106
Course Name: Internet and Web Technology Lab

Submitted to:
Mehrin Anannya
Assistant Professor

Institute of Information Technology


Jahangirnagar University

Submitted By:
Hrishikesh Kanu Bintu
ID: 2060
Institute of Information Technology
Jahangirnagar University

Submission Date: May 15, 2024


Project Name: Creating an website for Football Updates and along
with this we can do Affiliate Marketing or Sale our products through our
second website.

Project Overview:

First Webpage:
This HTML code creates an webpage where users can get football
updates, informations, fixtures and can buy football related things like
jerseys, boots, socks etc. Our platforms name is “We Make Footballers”.

The webpage begins with a header section, displaying the platform’s


name. The nav section provides navigation links to the Home page,
News, Teams, Matches and Contact, allowing users to explore different
parts of the site easily.

In the Section , We described about our websites and also we


hyperlinked our second website.

There is a Form. Where there are two input fields. In the first one it
inputs users name, and in the second one it inputs users favorite club.
And there is also a selection field, where user can mark his favorite
player among three.

There is also an image attached. Which visually helps users attention.

In the bottom we can see there is a Table. Where there is a comparison


between three footballers, Messi, Neymar and Ronaldo. In the
achievement column few achievements are Hyperlinked with
Wikipedia directly.
The footer ensures a cohesive ending to the page with contact info of
the owner of the platform. At last there is a statement of ownership and
reservation.

The CSS styles provide a clean, professional look, with consistent


margins, padding, and background colors that enhance readability and
user experience.

Our Second Webpage:


Our second webpage is of our commercial products. We sell and affiliate
products related to our niche Football in this webpage. Its structure is
quite different from the first one. In this webpage there is no form, table,
image. But it has an Amazing look because of its layout and color sense.

HTML code for Main:

file name: index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>We Make Footballers</title>
<link rel="icon" type="image/x-icon" href="Images/footballod.png" />
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #444;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav a {
color: #fff;
text-decoration: none;
padding: 0 10px;
}
nav a:hover {
text-decoration: underline;
}
.form-col {
background-color: aqua;

padding: 20px;
width: 300px;
float: left;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;

bottom: 0;
width: 100%;
}
.content {
text-align: center;
margin-top: 20px;
height: 600px;
}
img {
width: 700px;
}
.left {
width: 500px;
float: left;
}
.right {
width: 600px;
float: right;
margin-top: 130px;
margin-left: 300px;
}
</style>
</head>
<body>
<header>
<h1>We Make Footballers</h1>
</header>

<nav>
<a href="#">Home</a>
<a href="#">News</a>
<a href="#">Teams</a>
<a href="#">Matches</a>
<a href="#">Contact</a>
</nav>
<main>
<div class="content">
<!-- <div class="left"> -->
<h2>Welcome to our Football Website!</h2>
<p>
Here you can find the latest news, updates, and information
about your
favorite football teams and matches. To verify our provided
information's accuracy you may go to
<a href="https://www.wikipedia.org/"
target="_blank">Wikipedia</a>.
</p>
<p>
Must <a href="second.html" target="_blank">Click</a> This.{Our
Second
Website}
</p>
<div class="left">
<img src="Images/football.jpg" alt="Football" /><br />
</div>

<!-- </div> -->


<div class="right">
<form class="form-col">
<label for="yname">Your Name:</label>
<input type="text" id="yname" name="yname" /><br /><br />
<label for="cname">Your Club:</label>
<input type="text" id="cname" name="cname" /><br />
</form>
<form action="second.html" target="_blank" class="form-col">
<input type="radio" id="messi" name="fvrt_player"
value="MESSI" />
<label for="messi">MESSI</label><br />
<input type="radio" id="cr7" name="fvrt_player"
value="Ronaldo" />
<label for="cr7">Ronaldo</label><br />
<input type="radio" id="neymar" name="fvrt_player"
value="Neymar" />
<label for="Neymar">Neymar</label><br /><br />
<input type="submit" value="SUBMIT" />
</form>
</div>
<br /><br />
<table border="2" align="right" float="center">
<tr align="center">
<th>Achievements</th>
<th>Leo Messi</th>
<th>Ronaldo</th>
<th>Neymar</th>
</tr>
<tr align="center">
<td>
<a
href="https://en.wikipedia.org/wiki/Ballon_d%27Or"
target="_blank"
>Ballon D'Or</a
>
</td>
<td><b>8</b></td>
<td>5</td>
<td>0</td>
</tr>
<tr align="center">
<td>
<a
href="https://en.wikipedia.org/wiki/FIFA_World_Cup"
target="_blank"
><b>World Cup</b></a
>
</td>
<td><b>1</b></td>
<td>0</td>
<td>0</td>
</tr>
<tr align="center">
<td>UCL</td>
<td>4</td>
<td><b>5</b></td>
<td>1</td>
</tr>
<tr align="center">
<td>Golden Boot</td>
<td><b>6</b></td>
<td>4</td>
<td>0</td>
</tr>
<tr align="center">
<td>WC Golden Ball</td>
<td><b>2</b></td>
<td>0</td>
<td>0</td>
</tr>
</table>
</div>
</main>

<footer>
<p>Contact Us</p>
<p>
On
<a
href="https://www.facebook.com/this.is.messi.fan.Hrishi"
target="_blank"
>FaceBook</a
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;On
<a href="https://www.instagram.com/hrishikesh_kanu/"
target="_blank"
>Instagram</a
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;On
<a
href="https://www.youtube.com/@RevitalizeUh_with_Hrishi"
target="_blank"
>YouTube</a
>
</p>
<p>Cell Phone-+8801754-990111{WhatsApp}</p>
<p>
&copy; 2024 Football Website. Always Remember <b>Leo Messi</b> is
the
best. All Rights Reserved.
</p>
</footer>
</body>
</html>

file name: second.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>We Make Footballers</title>
<link rel="icon" type="image/x-icon" href="Images/footballod.png" />
<style>
* {
box-sizing: border-box;
}

header {
background-color: rgb(167, 196, 193);
padding: 5px;
text-align: center;
font-size: 30px;
color: rgb(38, 38, 38);
}

body {
font-family: Arial, Helvetica, sans-serif;
}

nav {
float: left;
width: 25%;
height: 500px;
background-color: gray;
padding: 20px;
}

nav ul {
list-style-type: none;
padding: 0px;
}

article {
float: left;
padding: 20px;
width: 75%;
background-color: #f1f1f1;
height: 500px;
}

section::after {
content: "";
display: table;
clear: both;
text-align: center;
}

/* Style the footer */


footer {
background-color: #2c1105;
padding: 20px;
text-align: center;
color: white;
position: bottom;
}

/* Responsive layout - makes the two columns/boxes stack on top of


each other instead of next to each other, on small screens */
@media (max-width: 600px) {
nav,
article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<header>
<h3>Welcome To Our Commercial Website.</h3>
<h3>
From here you can buy football related products. You can enhance
you
football skills.
</h3>
</header>

<section>
<nav>
<ul>
<li>
<a
href="https://www.daraz.com.bd/products/assassin14high-top-
soccer-shoes-mens-and-womens-broken-nailstfspikeagchildrens-non-slip-
grass-training-brush-shoe-i323114964-
s1535365940.html?spm=a2a0e.searchlist.sku.1.43ff3f40tLFVxg&search=1"
target="_blank"
>Football Shoes</a
>
</li>
<br />
<li><a href="#">Football Socks</a></li>
<br />
<li><a href="#">Football Jerseys</a></li>
<br />
<li><a href="#">Football Training Cones</a></li>
<br />
<li><a href="#">Our Different Products related to
Football</a></li>
</ul>
</nav>

<article>
<h1>Football</h1>
<p>
Football is the game which is mostly played all over the world.
Its
not just a game, its an emotion.
</p>
<p>
Now we believe, to be one of the best players, you must need
instruments which best players used. And training is a must in
this
case. So you can get the official boots, socks, training or
drilling
cones which Professional players like <b>Messi</b>,Ronaldo
usually
used in their ages. And we are working on our website. Soon we
will
launch another program where you can learn basic skills &
techniques
which great players use in their daily matches. You can learn
skills
like Neymar from us.
</p>
<p>
Always remember, <b>To be the best, you must learn from the
Best</b>.
Keeping it on mind we will hire professional players to teach
you
Football. So stay with us.
</p>
<p>
You can go back to our first webpage
<a href="index.html" target="_blank">clicking this</a>.
</p>
</article>
</section>
<footer>
<p>Contact Us</p>
<p>
On
<a
href="https://www.facebook.com/this.is.messi.fan.Hrishi"
target="_blank"
>FaceBook</a
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;On
<a href="https://www.instagram.com/hrishikesh_kanu/"
target="_blank"
>Instagram</a
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;On
<a
href="https://www.youtube.com/@RevitalizeUh_with_Hrishi"
target="_blank"
>YouTube</a
>
</p>
<p>Cell Phone-+8801754-990111{WhatsApp}</p>
<p>
&copy; 2024 Football Website. Always Remember <b>Leo Messi</b> is
the
best. All Rights Reserved.
</p>
</footer>
</body>
</html>
First Webpages Outlook:
After Submission 2nd Page Outlook:
Folder and Files:
Learning Outcomes:

1. HTML Fundamentals: I’ve gain a solid understanding of HTML


basics, including structuring a webpage using elements .
2. Semantic HTML: By using semantic elements (<header>,
<nav>, <footer>, etc.), I understand the importance of writing
clean and semantically meaningful HTML code, which enhances
accessibility.
3. CSS Styling: I learn how to apply basic CSS styles to my HTML
elements, such as setting background colors, text colors, font
styles, padding, and margins.
4. Image Handling: I understand how to include images in my
webpage using the <img> element and how to control their size
and appearance using CSS.
5. Navigation: Implementing a navigation bar (<nav>) introduces
me to creating links (<a>) and organizing them for easy
navigation within your website.
6. Project Organization: I’ve gain experience in organizing my
project files and assets, such as images, in a structured manner,
which is essential for maintaining and scaling project in the future.
7. Project Planning and Execution: Developing a project from start
to finish taught me how to plan, execute, and iterate on my ideas,
which are crucial skills in web development and beyond.
8. Problem Solving: As I encountered challenges while building this
project, I learned how to troubleshoot issues, search for solutions
online, and apply problem-solving skills to overcome obstacles.
9. Creativity and Design Thinking: Designing a football-themed
webpage allows me to express my creativity and practice design
thinking by considering layout, color schemes, typography, and
other design elements to create an engaging user experience.

Overall, building an HTML project provides a hands-on learning


experience that combines technical skills with creativity and problem-
solving, setting a strong foundation for further exploration in web
development.

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