Content: XHTML and CSS
Coverage: basic tags for text, imagine, page layout, CSS
These exercises will aid you become more fluent in XHTML. Note that your files should be validated correctly in order to obtain full credit. XHTML 1.0 Strict is expected (unless otherwise specified by the exercises).
Exercise 1
Below is an ex of an invalid XHTML page. Your aim is to reprepare the code so that:
• No deprecated/obsolete tags are being used
• All elements are nested correctly (i.e. Hello)
• It validates as XHTML 1.0 Strict (See http://validator.w3.org/)
• Presentation is separated from content (All style must be specified in the head)
Correct the Errors!</head><br /><body bgcolor=red><br /> <center><u>XHTML is the way to go!</u></center><br /> <font size=14 face=Arial><br /> <a href=www.w3schools.com><b>Click here</a> for more information.</b><br /> </font><br /> <br><br><br /> <ul><br /> <li><P><STRIKE>Say no to HTML and its flaws!</STRIKE></P><br /> <li><P>Use XHTML instead!</P><br /> <ul><br /></body><br /></html></p>
<p style="text-align: justify;">Exercise 2</p>
<p style="text-align: justify;">Using XHTML, produce the subsequent two lists sets on a single page:<br /><br />Employ an embedded stylesheet to style each list. Your CSS should style the bullet points as above. Ensure that nesting is appropriate and that the page validates as XHTML 1.0 Strict.</p>
<p style="text-align: justify;">Exercise 3<br />Theory - Elucidate, in your own words, how web designers can deal with CSS conflict resolution. What is the order of precedence between the dissimilar types of CSS (inline, embedded and external)? describe in a short paragraph.<br />Exercise 4<br />On a single XHTML page, consist of the following two div container elements in the body. Using an external stylesheet, add style to the div elements such that one div has some overlap with the second div (Hint: Make use of relative or absolute positioning). Both divs must have a padding of 5px all around, a green 2px dotted border, a width and height of 200px and their text must be centered.</p>
<p style="text-align: justify;">Also, add style to the span class “red” so that the text displays in red and is bold.</p>
<p style="text-align: justify;"><div id=”first”><br /> <span class=”red”>This is a DIV Container</span><br /></div><br /><div id=”second”><br /> DIVs are a powerful way to modularize presentation<br /></div></p>
<p style="text-align: justify;">Exercise 5</p>
<p style="text-align: justify;">Make a single page that demonstrates an XHTML form.</p>
<p style="text-align: justify;">The form must consist of all the fields you feel are necessary for submitting an order of books and should consist of at least one of the following input types:</p>
<p style="text-align: justify;">• text input field<br />• select field <br />• radio or checkbox input fields <br />• textarea field</p>
<p style="text-align: justify;">The form doesn’t require to do anything when submitted, although, CSS must be used to make it visually appealing. All style should be embedded (added into the head section of the document).</p>
<p style="text-align: justify;">Exercise 6 – Project</p>
<p style="text-align: justify;">The last exercise of each assignment will be continuous from assignment to assignment and will have the objective of building an e-store website by the end of the course.<br />For the first part you will start creating the layout of the e-store. Using XHTML and CSS you will design the skeleton of the site. It will be broken down into 4 components.</p>
<p style="text-align: justify;">1) The top banner. You will have a banner that stretches across the top of the site. It should have a background color as well as some heading text. This banner will be present all through the pages of your site.</p>
<p style="text-align: justify;">2) The side menu. You will have a side menu on the left hand side (which will later be employed to navigate the site). Create a list of navigational options in the side menu (i.e. home, checkout, my cart…). These should be “dummy” links and don’t have to be active at this time.</p>
<p style="text-align: justify;">3) Inside content. Have some inside content to introduce the products you will be selling. For now, this can be decorated in any way. You can use this section to show your knowledge of various XHTML tags and CSS properties.</p>
<p style="text-align: justify;">4) The bottom banner. You will have a bottom banner that stretches across bottom of the site. Give it a background color, and add in some fake legal/contact us/about us text. This banner will be present throughout all the pages of your site.</p>
<p style="text-align: justify;">*Note:</p>
<p style="text-align: justify;">The website must react gracefully to a user’s actions. For ex, a user must be able to resize his/her browser window and the site must still look “normal”. Take this into account when designing your website. <br />Though this isn’t a functional requirement, your sites must always be well organized with appropriately named files and well defined directories.</p>
<p style="text-align: justify;">It can be very difficult to achieve the same look and feel across all browsers. Obviously it is preferable to have the site look good across all major browsers (ie: Internet Explorer, Firefox, Chrome, Safari…) however for the sake of this course just focus on building the website so that it is compatible best with Firefox.</p></span>
</div></div></div>
<div id="viewreadmore" class="que_link">
<a id="readmore" href="javascript:void(0);" style="font-size: 14px; color: #ff700c;" class="read-more-trigger mar_top10" onclick="changeheight(this)">View complete question</a>
</div>
<div class="innercanteenouter_inner_center3">
<p>Programming Language, <span>Programming</span> </p>
</div>
<div class="clear"></div>
</div>
</div>
<div class="innercanteenouter_inner_center6">
<div class="innercanteenouter_inner_center6_center7">
<div class="innercanteenouter_inner_center6_center">
<ul>
<li class="innercanteenouter1">
Category:- <span>Programming Language</span>
</li>
<li class="innercanteenouter2">
Reference No.:- <span>M91155 </span>
</li>
</ul>
<div class="clear"></div>
<input type="submit" name="btnASolution" value="Order Now to Get Expert's Answer" id="btnASolution" class="innercanteenouter_inner_center6_center2" />
</div>
<div class="innerjohnanswered1">
<div class="innerjohnanswered1ftti"><h2></h2>
<p></p>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="inneranswer">
<b>Have any Question?</b><span id="RequiredFieldValidator1" style="background-color:Yellow;visibility:hidden;">Write your Review or question?</span>
<br /><br />
<div class="inneranswerhgrows">
<textarea name="txtReview" id="txtReview" class="inneranswerhgrowss" ValidationGroup="Review" placeholder=" Write your message!!"></textarea>
</div>
<div class="inneranswerhgrowsddf">
<input type="submit" name="btnReview" value="Have Question" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("btnReview", "", true, "Review", "", false, false))" id="btnReview" class="planpageinnerrightcontleftcommetgetquotebt" />
</div>
</div>
<br />
<div class="innerquestions">
<h2>Related Questions in Programming Language</h2>
<table id="dlReviewList" cellspacing="0" style="width:100%;border-collapse:collapse;">
<tr>
<td>
<div class="innerquestionsgtr">
<h3>
<span id="dlReviewList_lblTitle_0"><b><a href='http://www.mywordsolution.com/question/assignment---haskell-program-for-regular-expression/93110187' target='_balnk' class='que_link' >Assignment - haskell program for regular expression</a></b></span></h3>
<p>
<span id="dlReviewList_lblContent_0">Assignment - Haskell Program for Regular Expression Matching Your assignment is to modify the slowgrep.hs Haskell program presented in class and the online notes, according to the instructions below. You may carry out th ...</span> </p>
</div>
</td>
</tr><tr>
<td>
<div class="innerquestionsgtr">
<h3>
<span id="dlReviewList_lblTitle_1"><b><a href='http://www.mywordsolution.com/question/assignment-task--q1-a-the-fibonacci-numbers-are-the-numbers/93111232' target='_balnk' class='que_link' >Assignment task -q1 a the fibonacci numbers are the numbers</a></b></span></h3>
<p>
<span id="dlReviewList_lblContent_1">Assignment Task - Q1. (a) The Fibonacci numbers are the numbers in the following integer sequence, called the Fibonacci sequence, and are characterised by the fact that every number after the first two is the sum of the ...</span> </p>
</div>
</td>
</tr><tr>
<td>
<div class="innerquestionsgtr">
<h3>
<span id="dlReviewList_lblTitle_2"><b><a href='http://www.mywordsolution.com/question/question---create-a-microsoft-word-macro-using-vba-visual/93114864' target='_balnk' class='que_link' >Question - create a microsoft word macro using vba visual</a></b></span></h3>
<p>
<span id="dlReviewList_lblContent_2">Question - Create a Microsoft Word macro using VBA (Visual Basic for Applications). Name the macro "highlight." The macro should highlight every third line of text in a document. (Imagine creating highlighting that will ...</span> </p>
</div>
</td>
</tr><tr>
<td>
<div class="innerquestionsgtr">
<h3>
<span id="dlReviewList_lblTitle_3"><b><a href='http://www.mywordsolution.com/question/assignmentquestion-onegiving-the-following-code-snippet/93116209' target='_balnk' class='que_link' >Assignmentquestion onegiving the following code snippet</a></b></span></h3>
<p>
<span id="dlReviewList_lblContent_3">Assignment Question One Giving the following code snippet. What kind of errors you will get and how can you correct it. A. public class HelloJava { public static void main(String args[]) { int x=10; int y=2; System.out.p ...</span> </p>
</div>
</td>
</tr><tr>
<td>
<div class="innerquestionsgtr">
<h3>
<span id="dlReviewList_lblTitle_4"><b><a href='http://www.mywordsolution.com/question/assignment---proposal-literature-review-research-method1/93116374' target='_balnk' class='que_link' >Assignment - proposal literature review research method1</a></b></span></h3>
<p>
<span id="dlReviewList_lblContent_4">Assignment - Proposal, Literature Review, Research Method 1. Abstract - Summary of the knowledge gap: problems of the existing research - Aim of the research, summary of what this project is to achieve - Summary of the a ...</span> </p>
</div>
</td>
</tr><tr>
<td>
<div class="innerquestionsgtr">
<h3>
<span id="dlReviewList_lblTitle_5"><b><a href='http://www.mywordsolution.com/question/1-write-a-function-named-check--that-has-three-parameters/93116383' target='_balnk' class='que_link' >1 write a function named check that has three parameters</a></b></span></h3>
<p>
<span id="dlReviewList_lblContent_5">1. Write a function named check () that has three parameters. The first parameter should accept an integer number, andthe second and third parameters should accept a double-precision number. The function body should just ...</span> </p>
</div>
</td>
</tr><tr>
<td>
<div class="innerquestionsgtr">
<h3>
<span id="dlReviewList_lblTitle_6"><b><a href='http://www.mywordsolution.com/question/assignment---horse-race-meetingthe-assignment-will-assess/93117975' target='_balnk' class='que_link' >Assignment - horse race meetingthe assignment will assess</a></b></span></h3>
<p>
<span id="dlReviewList_lblContent_6">Assignment - Horse Race Meeting The Assignment will assess competencies for ICTPRG524 Develop high level object-oriented class specifications. Summary The assignment is to design the classes that are necessary for the ad ...</span> </p>
</div>
</td>
</tr><tr>
<td>
<div class="innerquestionsgtr">
<h3>
<span id="dlReviewList_lblTitle_7"><b><a href='http://www.mywordsolution.com/question/task-silly-name-testeroverviewcontrol-flow-allows-us-to/93117987' target='_balnk' class='que_link' >Task silly name testeroverviewcontrol flow allows us to</a></b></span></h3>
<p>
<span id="dlReviewList_lblContent_7">Task: Silly Name Tester Overview Control flow allows us to alter the order in which our programs execute. Building on our knowledge of variables, we can now use control flow to create programs that perform more than just ...</span> </p>
</div>
</td>
</tr><tr>
<td>
<div class="innerquestionsgtr">
<h3>
<span id="dlReviewList_lblTitle_8"><b><a href='http://www.mywordsolution.com/question/structs-and-enumsoverviewin-this-task-you-will-create-a/93118005' target='_balnk' class='que_link' >Structs and enumsoverviewin this task you will create a</a></b></span></h3>
<p>
<span id="dlReviewList_lblContent_8">Structs and Enums Overview In this task you will create a knight database to help Camelot keep track of all of their knights. Instructions Lets get started. 1. What the topic 5 videos, these will guide you through buildi ...</span> </p>
</div>
</td>
</tr><tr>
<td>
<div class="innerquestionsgtr">
<h3>
<span id="dlReviewList_lblTitle_9"><b><a href='http://www.mywordsolution.com/question/task-working-with-arraysoverviewin-this-task-you-will/93118022' target='_balnk' class='que_link' >Task working with arraysoverviewin this task you will</a></b></span></h3>
<p>
<span id="dlReviewList_lblContent_9">Task: Working with Arrays Overview In this task you will create a simple program which will create and work with an array of strings. This array will then be populated with values, printed out to the console, and then, w ...</span> </p>
</div>
</td>
</tr><tr>
<td></td>
</tr>
</table>
</div>
<div class="innerlogo">
<ul>
<li><div class="innerlogoback1"></div></li>
<li><div class="innerlogoback2"></div></li>
<li><div class="innerlogoback3"></div></li>
</ul>
</div>
</div>
<div class="innercanteenouter_inner_right">
<div class="innercanteenouter_inner_right1">
<div class="innercanteenouter_inner_right1pou">
<ul>
<li class="red1">
<div class="counterDivTag">4,153,160 Questions Asked</div>
</li>
<li class="oring1"><div class="counterDivTag">13,132 Experts</div></li>
<li class="grine1"><div class="counterDivTag">2,558,936 Questions Answered</div></li>
</ul>
<div class="clear"></div>
<h2>Ask Experts for help!!</h2>
</div>
</div>
<div class="innerchoose">
<h2>Looking for Assignment Help?</h2>
<p>
<b>Start excelling in your Courses,
Get help with Assignment</b><br /><br />
Write us your full requirement for evaluation and you will receive response within 20 minutes turnaround time.
</p>
<a href="http://www.mywordsolution.com/free-quote-job-posting.aspx">Ask Now</a>
<span>Help with Problems, Get a Best Answer</span>
</div>
<div class="innertranspoitation">
<div class="innertranspoitation1">
<ul>
<li><a href="#">Recent Questions </a></li>
</ul>
<div class="clear"></div>
</div>
<table id="LeftSideControl1_RecentQuestion1_dlReviewList" cellspacing="0" style="width:100%;border-collapse:collapse;">
<tr>
<td>
<div class="innertranspoitation2">
<h3><span id="LeftSideControl1_RecentQuestion1_dlReviewList_lblTitle_0"><b><a href='http://www.mywordsolution.com/question/why-might-a-bank-avoid-the-use-of-interest-rate-swaps-even/93137978' target='_balnk' class='que_link' >Why might a bank avoid the use of interest rate swaps even</a></b></span></h3>
<p> <span id="LeftSideControl1_RecentQuestion1_dlReviewList_lblContent_0">Why might a bank avoid the use of interest rate swaps, even when the institution is exposed to significant interest rate</span> </p>
</div>
</td>
</tr><tr>
<td>
<div class="innertranspoitation2">
<h3><span id="LeftSideControl1_RecentQuestion1_dlReviewList_lblTitle_1"><b><a href='http://www.mywordsolution.com/question/describe-the-difference-between-zero-coupon-bonds-and/93137977' target='_balnk' class='que_link' >Describe the difference between zero coupon bonds and</a></b></span></h3>
<p> <span id="LeftSideControl1_RecentQuestion1_dlReviewList_lblContent_1">Describe the difference between zero coupon bonds and coupon bonds. Under what conditions will a coupon bond sell at a p</span> </p>
</div>
</td>
</tr><tr>
<td>
<div class="innertranspoitation2">
<h3><span id="LeftSideControl1_RecentQuestion1_dlReviewList_lblTitle_2"><b><a href='http://www.mywordsolution.com/question/compute-the-present-value-of-an-annuity-of--880-per-year/93137976' target='_balnk' class='que_link' >Compute the present value of an annuity of 880 per year</a></b></span></h3>
<p> <span id="LeftSideControl1_RecentQuestion1_dlReviewList_lblContent_2">Compute the present value of an annuity of $ 880 per year for 16 years, given a discount rate of 6 percent per annum. As</span> </p>
</div>
</td>
</tr><tr>
<td>
<div class="innertranspoitation2">
<h3><span id="LeftSideControl1_RecentQuestion1_dlReviewList_lblTitle_3"><b><a href='http://www.mywordsolution.com/question/compute-the-present-value-of-an-1150-payment-made-in-ten/93137975' target='_balnk' class='que_link' >Compute the present value of an 1150 payment made in ten</a></b></span></h3>
<p> <span id="LeftSideControl1_RecentQuestion1_dlReviewList_lblContent_3">Compute the present value of an $1,150 payment made in ten years when the discount rate is 12 percent. (Do not round int</span> </p>
</div>
</td>
</tr><tr>
<td>
<div class="innertranspoitation2">
<h3><span id="LeftSideControl1_RecentQuestion1_dlReviewList_lblTitle_4"><b><a href='http://www.mywordsolution.com/question/compute-the-present-value-of-an-annuity-of--699-per-year/93137974' target='_balnk' class='que_link' >Compute the present value of an annuity of 699 per year</a></b></span></h3>
<p> <span id="LeftSideControl1_RecentQuestion1_dlReviewList_lblContent_4">Compute the present value of an annuity of $ 699 per year for 19 years, given a discount rate of 6 percent per annum. As</span> </p>
</div>
</td>
</tr><tr>
<td></td>
</tr>
</table>
</div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="footer">
<div class="footerouter">
<div class="footerouter_inner">
<div class="footerouter_left">
<ul>
<li>
<div class="footerouter_left1">
<ul>
<li><a href="http://www.mywordsolution.com/homework-help/science/8">Science</a></li>
<li><a href="http://www.mywordsolution.com/homework-help/english/390">English</a></li>
<li><a href="http://www.mywordsolution.com/homework-help/biology/384">Biology</a></li>
<li><a href="http://www.mywordsolution.com/homework-help/humanities/388">Humanities</a></li>
</ul>
</div>
</li>
<li>
<div class="footerouter_left1">
<ul>
<li><a href="http://www.mywordsolution.com/homework-help/engineering/9">Engineering</a></li>
<li><a href="http://www.mywordsolution.com/homework-help/programming/10">Programming</a></li>
<li><a href="http://www.mywordsolution.com/homework-help/computer-science/11">Computers/IT Courses</a></li>
</ul>
</div>
</li>
<li>
<div class="footerouter_left1">
<ul>
<li><a href="http://www.mywordsolution.com/homework-help/accounting/1">Accounting</a></li>
<li><a href="http://www.mywordsolution.com/homework-help/finance/2">Finance</a></li>
<li><a href="http://www.mywordsolution.com/homework-help/management/7">Management</a></li>
<li><a href="http://www.mywordsolution.com/homework-help/statistics/6">Statistics</a></li>
<li><a href="http://www.mywordsolution.com/homework-help/economics/5">Economics</a></li>
<li><a href="http://www.mywordsolution.com/homework-help/taxation/4">Taxation</a></li>
<li><a href="http://www.mywordsolution.com/homework-help/law/3">LAW Assignment Help</a></li>
</ul>
</div>
</li>
<li>
<div class="footerouter_left1">
<ul>
<li><a href="http://www.mywordsolution.com/homework-help/essay/13">Essay Writing Help</a></li>
<li><a href="http://www.mywordsolution.com/homework-help/dissertation/12">Dissertation Help</a></li>
<li><a href="http://www.mywordsolution.com/homework-help/thesis-writing/117">Thesis Help</a></li>
<li><a href="http://www.mywordsolution.com/homework-help/literature-review/79">Literature Review</a></li>
<li><a href="http://www.mywordsolution.com/homework-help/research-paper/78">Research Paper</a></li>
<li><a href="http://www.mywordsolution.com/homework-help/solved-classroom-assignments/77">Solved Problems</a></li>
<li><a href="http://www.mywordsolution.com/homework-help/popular-courses-and-coursework-help/82 ">Coursework Help</a></li>
</ul>
</div>
</li>
<div class="clear"></div>
</li>
</ul>
</div>
<div class="footerouter_right">
<div class="footerouter_right0">
<div class="footerpayment">
<div class="footerpaymentscur"></div>
<div class="footerpaymentscard">
<ul>
<li class="footerpaymentscard1"></li>
<li class="footerpaymentscard2"></li>
<li class="footerpaymentscard3"></li>
<li class="footerpaymentscard4"></li>
</ul>
</div>
</div>
<div class="footerouter_right1">
<h2>Follow Us</h2>
<ul>
<li class="fb"><a href="http://www.facebook.com/Mywordsolution" rel="nofollow" target="_blank"></a></li>
<li class="twt"><a href="http://www.twitter.com/Mywordsolution" rel="nofollow" target="_blank"></a></li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="footerbottom">
<div class="footerbottom_inner">
<ul>
<li><a href="http://www.mywordsolution.com/">Home</a></li>
<li><a href="http://www.mywordsolution.com/about-us.aspx">About Us</a></li>
<li><a href="http://www.mywordsolution.com/blog/">Blog</a></li>
<li><a href="http://www.mywordsolution.com/faqs.aspx">FAQs</a></li>
<li><a href="http://www.mywordsolution.com/ask-question.aspx">Assignment Help</a></li>
<li><a href="http://www.mywordsolution.com/homework-help.aspx">Homework Help</a></li>
<li><a href="http://www.mywordsolution.com/contactus.aspx">Contact Us</a></li>
<li><a href="http://www.mywordsolution.com/questions/archive/">Q&A</a></li>
<li><a href="http://www.mywordsolution.com/directory.aspx">Directory</a></li>
<li><a href="http://www.mywordsolution.com/sitemap.aspx">Sitemap</a></li>
<li><a href="http://www.mywordsolution.com/refund-policy.aspx">Refund Policy</a></li>
<li><a href="http://www.mywordsolution.com/privacy-policy.aspx">Privacy Policy</a></li>
<li><a href="http://www.mywordsolution.com/terms-and-conditions.aspx">T & C </a></li>
<li><a href="http://www.mywordsolution.com/disclaimer-policy.aspx">Disclaimer Policy</a></li>
<li> <a href="http://www.mywordsolution.com/copyright-notice.aspx">Copyright Notice</a></li>
</ul>
<div class="clear"></div>
<p>© Copyright 2013-14 <span>mywordsolution.com</span> All rights reserved </p>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-38762144-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.mywordsolution.com/library/js/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var $_Tawk_API={},$_Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/5584638c0ed4869955a0dce2/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
</div>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
var Page_Validators = new Array(document.getElementById("RequiredFieldValidator1"));
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var RequiredFieldValidator1 = document.all ? document.all["RequiredFieldValidator1"] : document.getElementById("RequiredFieldValidator1");
RequiredFieldValidator1.controltovalidate = "txtReview";
RequiredFieldValidator1.errormessage = "Write your Review or question?";
RequiredFieldValidator1.validationGroup = "Review";
RequiredFieldValidator1.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
RequiredFieldValidator1.initialvalue = "";
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
ValidatorOnLoad();
}
function ValidatorOnSubmit() {
if (Page_ValidationActive) {
return ValidatorCommonOnSubmit();
}
else {
return true;
}
}
//]]>
</script>
</form>
</body>
</html>
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>