1. Use NotePad (PC), or TextWrangler (Mac), or Adobe Brackets (PC and Mac) to ma
ID: 3745933 • Letter: 1
Question
1. Use NotePad (PC), or TextWrangler (Mac), or Adobe Brackets (PC and Mac) to make a Web page in HTML 5
Your webpage should consist of two files: hw2.html and an image file with any appropriate name, ending in .gif, .png, or .jpg, and must contain the following Required Elements:
Appropriate DOCTYPE for html 5 <!DOCTYPE html>
Opening and Closing <html> and </html> tags, properly enclosing the entire HTML document - remember the lang attribute!
Opening and Closing <head> and </head> tags, properly enclosing the entire head section.
Opening and Closing <body> and </body> tags, properly enclosing the entire body of the webpage. You should include the inline CSS in the body tag to make the background color of the whole page be any light color you choose.
A character encoding declaration of UTF-8
A comment in the head section stating the purpose, author, and date of page creation <!-- xxxx -->
An appropriate title that appears in the title bar of the browser, properly placed in the head section of the HTML document between <title> </title> tags.
An appropriate meta tag description based on what is the main topic of your web page
The body section must include the html 5 header, section, article (at least 2), and footer tags. All of these are 2-sided tags and must have a closing tag such as </header>, </section>, etc. Remember that it's advisable to have a heading every time you open a section or an article element
Inside the header element, you should include 2 different headings: a h1 and a h2.
One of the headings should be centralized and italicized using inline CSS. The other heading should be centralized, bold and with a different color other than the default black (again, using CSS)
Inside each article you should have at least 2 paragraphs and one of the paragraphs you should demonstrate the use of line break (the br element)
You should have content in an Ordered List <ol>or Unordered List <ul> with the appropriate closing tag. Your List must contain at least two list Items with <li>...</li>tags. The list can contain and any readable text you choose.
You should include at least one image and below the image you should include a description of the image and where you got the image (even if you were the creator of the image) - the image should be downloaded to your computer and saved inside the same folder where you are saving the hw2.html file
You should write in the footer the text: "Copyright xx Your Name" where xx will be the copyright symbol (using special characters) and Your Name is going to be your name.
You should include, between the articles a line separator using the horizontal ruler element
You should include in your content a link to the City College website - it is an external website that will be opened in another window or tab.
Make sure your code is valid by using the W3C validator that is mentioned in the lecture - validator.w3.org
Save both the .html file and the image in one single folder in your computer and zip that folder.
Explanation / Answer
here is the code:
image is taken from web kindly downoad an image and paste the location and description there
<!DOCTYPE html>
<html>
<title>My info</title>
<style type="text/css">
.db1{
padding: 8px;
margin: 10px;
border:2px solid grey;
}
div{
font-family: Comic Sans, Comic Sans MS, cursive;
}
table, th, td {
border: 2px dashed black;
border-collapse: collapse;
}
ul{
list-style:square;
}
th, td {
padding: 5px;
text-align: left;
}
h1{
font-style: italic;
text-align: center;
}
.outer{
margin: 10px;
border:solid 1px green;
}
img{
border:1px solid black;
max-width: 200px;
max-height: 200px;
margin-left: 50%;
}
</style>
<body>
<header>
<h1>My page</h1>
<p>This website is for educational info.lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo laborum.</p>
</header>
<div class="outer">
<div class="db1">
<p> <strong>Name</strong> : <em>HA</em></p>
<hr>
<p> <strong>Major</strong> : Computer Science</p>
<br>
<p> <strong>Department</strong> : Computer Science</p>
<br>
<p> <strong>College</strong> : College of Engineering</p>
<br>
<p> <strong>University</strong> : Tennessee State University</p>
<br>
<p> <strong>Grade Level</strong> : Senior</p>
</div>
<hr>
<a href="city_college.html" target="_blank" > Link to city_college.html </a>
<hr>
<h3>Imgae [Link :https://hbculifestyle.com/wp-content/uploads/2011/05/TSU_seal.jpg]</h3>
<img src="https://hbculifestyle.com/wp-content/uploads/2011/05/TSU_seal.jpg" widht="400px" height="400px"/>
<hr>
<h3>Favorite Movies</h3>
<ol>
<li>Kung Fu Panda</li>
<li>Finding Dory</li>
<li>Beauty and the Beast</li>
</ol>
<hr>
<h3>Favorite books</h3>
<ul>
<li>The Help</li>
<li>The Name of the Wind</li>
<li>Death Note</li>
</ul>
<hr>
<table>
<caption>My Schedule Fall 2018</caption>
<tr>
<th>Course Number</th>
<th>Course Name</th>
<th>Day</th>
<th>Time</th>
<th>Room</th>
<th>Instructor</th>
</tr>
<tr>
<td>COMP 4500</td>
<td>Senior Project 1</td>
<td>M</td>
<td>8:00-8:55</td>
<td>MH6</td>
<td>Dr.A</td>
</tr>
<tr>
<td>COMP 3150</td>
<td>Cobol Programming</td>
<td>MW</td>
<td>11:10-12:35</td>
<td>MH13</td>
<td>Dr. Ab</td>
</tr>
<tr>
<td>COMP 4700</td>
<td>Algorithms</td>
<td>TR</td>
<td>12:45-2:10</td>
<td>MH13</td>
<td>Dr. E</td>
</tr>
<tr>
<td>COMP 4280</td>
<td>Web based Appl Development</td>
<td>TR</td>
<td>2:20-3:45</td>
<td>MH10</td>
<td>Dr. Gu</td>
</tr>
</table>
</div>
<footer>
<p>Name:HA © 2018 all rights reserved</p>
</footer>
</body>
</html>
city_college.html
<!DOCTYPE html>
<html>
<head>
<title>city college</title>
</head>
<body>
<h1>This is city college page</h1>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.