The <code> tag in HTML is used to define the piece of computer code. During the creation of web pages sometimes there is a need to display computer programming code. It could be done by any basic heading tag of HTML but HTML provides a separated tag which is <code>.
The code tag is a specific type of text which represents computer output. HTML provides many methods for text-formatting but <code> tag is displayed with fixed letter size, font, and spacing.
Main components of tribute page
- You must include the following parts in your completed project:
- You must include a title or heading on the tribute page.
- You should include an image on the tribute page.
- You included image must have a caption.
- You should include a timeline of the life of the tribute in the form of a list.
The final project [tribute page in html] should look like this:
how to make a tribute page using html and css - Dr.A.P.J.Abdul Kalam
Most of the web development and design internships like oasis Infobye and etc were given the task of Tribute pages. You can Refer to my Source code and Demo Tribute page For your Task. If you are doing an internship I suggest you Don't copy-paste hole code otherwise your internship will terminate I hope u understand that below Dr.A.P.J.Abdul Kalam Tribute Page Source code Available.
You need to create 2 files.
- tribute page html
- style.css
Tribute page using html and css code
HTML CODE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A.P.J Abdul Kalam | Tribute Page</title>
<link rel="stylesheet" href="tribute_page.css">
</head>
<body>
<main id="main"></main>
<h2 id="title">Dr.A.P.J.Abdul Kalam</h2>
<div id="img-div">
<img src="apjabdulkalam.jpg" alt="Abdul kalam">
<h3>The missile man of India</h3>
<small id="img-caption">
A.P.J. Abdul Kalam, in full <b>Avul Pakir Jainulabdeen Abdul Kalam,</b>(born October 15, 1931, Rameswaram,
India—died July 27, 2015, Shillong),
Indian scientist and politician who played a leading role in the
development of India’s missile and nuclear weapons programs.
<b>He was president of India from 2002 to 2007.</b>
</small>
</div>
<div id="tribute-info">
<blockquote>
<p>"Dream is not that which you see while sleeping it is something that does not let you sleep." </p>
<cite> -- Abdul Kalam</cite>
</blockquote>
<p>
A very simple person who lived an unpretentious lifestyle. He had a keen interest in literature and wrote
poems.
He never married. He always faced media himself for his failures while let others address for the success.
He died while delivering a lecture at the IIM. </p>
<ul>
<li><b>1931:</b> Born in Rameswaram, Tamil Nadu.</li>
<li><b>1954:</b> Graduated in Physics from University of Madras.</li>
<li><b>1960: </b> Graduated in Aerospace Engineering from Madras Institute of Technology.</li>
<li><b>1961:</b> Joined DRDO as a scientist.</li>
<li><b>1969:</b> Joined Space Research at ISRO.</li>
<li><b>1980:</b> Became the project Director for India's First Indegenous Satellite Program.</li>
<li><b>1980: </b> Was involved in the development of several Indegenous Missiles for India like Agni,
Prithvi.</li>
<li><b>1981:</b> Awarded Padma Bhushan.</li>
<li><b>1990:</b> Awarded Padma Vibhushan.</li>
<li><b>1992:</b> Chief Advisor for the India's Nuclear Program.</li>
<li><b>1997:</b> Awarded Bharat Ratna.</li>
<li><b>2002:</b> Became 11th President of India.</li>
<li><b>2015:</b> The People's President passes away while doing what he loved the most, addressing students.
</li>
</ul>
<small> For more information, click Here <a id="tribute-link"
href="https://en.wikipedia.org/wiki/A._P._J._Abdul_Kalam" target="_blank"> Abdul Kalam</a> On
wikipedia</small>
</div>
</body>
</html>
CSS CODE :
body {
margin: 0 20%;
}
#title {
text-align: center;
font-size: 2cm;
font-family: Georgia, 'Times New Roman', Times, serif;
}
#img-div h3 {
text-align: center;
font-size: 30px;
color: brown;
font-family: monospace;
font-weight: 100;
}
#img-caption {
font-size: 20px;
font-style: italic;
}
img {
display: block;
margin: 0 10%;
width: 80%;
margin: 0 10%;
}
div#tribute-info {
padding: 5px 10px;
margin-top: 20px;
font-family: serif;
}
h1 {
font-size: 30px;
}
ul {
max-width: 550px;
margin: 0 auto 50px auto;
text-align: left;
line-height: 1.6;
}
li {
margin: 15px 0;
color: #1e1e1e;
}
#tribute-info h4 {
font-size: 20px;
text-align: center;
color: brown;
font-style: oblique;
}
#tribute-info h2 {
font-size: 20px;
color: black;
font-size: 30px;
font-style: italic;
}
#tribute-info p {
font-style: oblique;
padding: 5px 10px;
font-size: 20px;
}
small {
font-size: 20px;
padding-top: 100px;
font-style:italic;
}
#tribute-info h3 {
color: white;
font-size: 20px;
text-align: center;
font-style: oblique;
}
blockquote {
font-style: italic;
margin: 0 auto 50px auto;
color: #150a21;
text-align: center;
}
Also check