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.
CSS
5 Likes
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
Answered By
3 Likes
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 ?