Computer Applications
Perform as instructed below.
(a) Create an HTML file namely index.html file with following guidelines :
x Make sure there are at least 2 paragraphs (<p>) in your HTML file
x Use h1, h2 and h3 headings
x Use a numbered and a bulleted list
x Use a table
x At least 4 hyperlinks
(b) Link to an external style sheet namely personal.css from your index.html file.
(c) Create a CSS document called personal.css (Make sure you save as type .css) with rules for the following :
x Have your h2 headings :
(a) Appear in a color of your choice
(b) Be centered on the page (text-align: center;)
(c) In the Serif font family of your choice
x Double the H1 headings size (relative font size)
x For paragraphs
(a) Specify a font family and font size.
(b) Give a background color with 5 px padding on each side
x For tables
(a) Specify a border of width 3px
(b) Table heading in bold
x Remove the underline in your links.
(d) View the html file in a browser
(e) Create another CSS file with different style rules for above mentioned elements and then link index.html to this CSS file. Now view index.html and see the change.
Answer
index.html
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "personal.css">
<title>HTML Introduction</title>
</head>
<body>
<h1>Introduction to HTML</h1>
<h2> What is HTML ? </h2>
<p>
HTML (Hypertext Markup Language) is the standard markup language used for creating and structuring web pages. HTML uses a system of tags and elements to define the different components and content of a web page.
</p>
<p>
HTML forms the foundation of web development and is often combined with CSS (Cascading Style Sheets) and JavaScript to create interactive and visually appealing websites.
</p>
<h3> Advantages of HTML </h3>
<ol>
<li>Universal support across web browsers.</li>
<li>Easy to learn and understand syntax.</li>
<li>Platform independence for broad device compatibility.</li>
<li>Seamless integration with CSS and JavaScript.</li>
</ol>
<h3>Limitations of HTML</h3>
<ul>
<li>Limited styling and layout control.</li>
<li>Lack of built-in interactivity.</li>
<li>Insufficient data handling capabilities.</li>
<li>Browser compatibility issues.</li>
</ul>
<table>
<caption>Some tags of HTML</caption>
<tr>
<th>Tag</th>
<th>Description</th>
</tr>
<tr>
<td>B tag</td>
<td>Used to make text bold</td>
</tr>
<tr>
<td>I tag</td>
<td>Used to make text italic</td>
</tr>
</table>
<p>Check out these links to learn more about HTML:</p>
<ul>
<li><a href="https://www.w3schools.com">W3 Schools</a></li>
<li><a href="https://en.wikipedia.org/wiki/HTML">HTML Wikipedia</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML MDN</a></li>
<li><a href="https://www.html.com">HTML Code Tutorial</a></li>
</ul>
</body>
</html>
personal.css
h2 {
color: red ;
text-align: center ;
font-family: Times New Roman ;
}
h1 {
font-size: 2em ;
}
p {
font-family: Arial ;
font-size: 10px ;
background-color: cyan ;
padding: 5px 5px 5px 5px ;
}
table {
border: 3px solid;
}
th {
border: 3px solid; font-weight: bold ;
}
td {
border: 3px solid;
}
a {
text-decoration: none ;
}
Output
new-personal.css
h2 {
color: blue ;
text-align: left ;
font-family: Verdana ;
}
h1 {
font-size: 3em ;
}
p {
font-family: Georgia ;
font-size: 14px ;
background-color: green ;
padding: 3px 8px 3px 8px ;
}
table {
border: 1px dashed;
}
th {
border: 1px dashed; font-weight: normal ;
}
td {
border: 1px dashed;
}
a {
text-decoration: overline ;
}
Output
Related Questions
Where do you place the code to associate a Web page with an external style sheet ?
How do you add a background color for all
<h1>elements?How do you display a border like this :
The top border = 10 pixels The bottom border = 5 pixels The left border = 20 pixels The right border = 1pixelHow do you make each word in a text start with a capital letter ?