Develop webpages in HTML5: Include the following: Menu, tables , images, image m
ID: 3536029 • Letter: D
Question
Develop webpages in HTML5:
Include the following:
Menu, tables , images, image maps, rollover button or image (make a image and use some image editing software, e.g. mspaint in very PC). Rollover image is usually the same size as the original image, with different background colors), links, animation in Canvas and other new features in HTML 5 and CSS 3. You can use dreamweaver or other tools to help.
http://jbridges95904.zxq.net/Website 5.html is what has been developed so far. Tab 2 should be dedicated to music, similar to the other tab. Links to iTunes, Youtube, etc would be acceptable.
Explanation / Answer
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin: 0;
padding: 0;
text-align: left;
font-family:"Adobe Garamond Pro Bold", Georgia, "Times New Roman", Times, serif;
font-size: 13px;
color: #061C37;
background: #014D5D url(background.png);
background-repeat:repeat-x;
}
*
{
margin: 0 auto 0 auto;
text-align:left;}
#page
{
display: block;
height:auto;
position: relative;
overflow: hidden;
width: 670px;
}
.topNaviagationLink
{
text-align:center;
position:relative;
margin-top:30px;
font-size:16px;
margin-left:-10px;
width:121px;
height: 35px;
line-height: 35px;
float:left;
color:#CEEAEE;
font-family:"Adobe Garamond Pro Bold", Georgia, "Times New Roman", Times, serif;
}
.topNaviagationLink a
{
text-decoration:none;
color:#CDE2FC;
}
.topNaviagationLink a:hover
{
text-align:center;
border-bottom:none;
color:#0C61C9;
display: block;
width:121px;
height: 35px;
line-height: 35px;
background-image:url(tab.png);
}
#mainPicture
{
width:670px;
height:345px;
background-color:#FFFFFF;
}
#mainPicture
{
width:670px;
height:345px;
background-color:#FFFFFF;
}
#mainPicture .picture
{
position:relative;
width:650px;
height:325px;
top:10px;
background-image:url(anoceanofsky.jpg);
background-repeat:no-repeat;
margin-left:10px;
}
#headerTitle
{
position:relative;
top:30px;
left:40px;
font-size:25px;
color:#FFFFFF;
font-family:"Adobe Garamond Pro Bold", Georgia, "Times New Roman", Times, serif;
}
#headerSubtext
{
position:relative;
top:30px;
left:50px;
font-size:14px;
color:#A9C8FA;
font-family:"Adobe Garamond Pro Bold", Georgia, "Times New Roman", Times, serif;
}
.contentBox
{
width:670px;
height:auto;
background-color:#FFFFFF;
margin-top:10px;
}
.contentBox .innerBox
{
position:relative;
width:650px;
height:auto;
top:10px;
margin-left:10px;
background-image:url(content_back.png);
background-repeat:repeat-x;
padding-bottom:35px;
}
.contentTitle
{
font-size:19px;
margin-bottom:0px;
padding-top:18px;
margin-left:15px;
margin-top:15px;
}
.contentText
{
font-size:13px;
line-height:24px;
margin-left:13px;
margin-right:13px;
}
#footer {
width: 670px;
height:16px;
background: url(footer.png) no-repeat;
text-align:center;
font-size:9px;
font-family:Arial, Helvetica, sans-serif;
color:#386172;
padding-top:5px;
}
#footer a
{
text-decoration:none;
font-size:9px;
color:#386172;
}
html, body {
text-align: center;
}
p {text-align: left;}
</style>
<title>Music</title>
</head>
<body>
<div id="page">
<div class="topNaviagationLink"><a href="index.html">Home</a></div>
<div class="topNaviagationLink"><a href="https://www.apple.com/in/itunes/">iTunes</a></div>
<div class="topNaviagationLink"><a href="https://www.youtube.com">Youtube</a></div>
<div class="topNaviagationLink"><a href="index.html">Contact</a></div>
</div>
<div id="mainPicture">
<div class="picture">
<div id="headerTitle">An Ocean of Sky</div>
<div id="headerSubtext">An XHTML 1.0 Strict Template by Bryant Smith</div>
</div>
</div>
<div class="contentBox">
<div class="innerBox">
<div class="contentTitle">The Title of an Article</div>
<div class="contentText"><p>You can add any text over here.</p></div>
</div>
<div id="mainPicture">
<div class="picture">
<div id="headerTitle">An Ocean of Sky</div>
<div id="headerSubtext">An XHTML 1.0 Strict Template by Bryant Smith</div>
</div>
</div>
<div class="contentBox">
<div class="innerBox">
<div class="contentTitle">The Title of an Article</div>
<div class="contentText"><p>You can add any text over here.</p></div>
</div>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.