Ask Question, Ask an Expert


Ask Programming Language Expert

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
• 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><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> <div class="innercanteenouter_inner_center6_center2"> <a href="">Order Now to Get Expert's Answer</a> </div> </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>  <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" width="100%"> <tr> <td> <div class="innerquestionsgtr"> <h3> <span id="dlReviewList_lblTitle_0"><b><a href='' target='_balnk' class='que_link' >Your problem is as followswrite a program that will ask the</a></b></span></h3> <p> <span id="dlReviewList_lblContent_0">Your problem is as follows: Write a program that will ask the user to enter 4 quiz scores for 3 students.  You will need to fine the lowest quiz grade and drop it out when you calculate the average. You will need to disp ...</span> </p> </div> </td> </tr><tr> <td> <div class="innerquestionsgtr"> <h3> <span id="dlReviewList_lblTitle_1"><b><a href='' target='_balnk' class='que_link' >Programming lab assignment set awhat to submitcomplete</a></b></span></h3> <p> <span id="dlReviewList_lblContent_1">Programming Lab Assignment (Set A) What to Submit Complete Problem Solving Steps 1 - 3 (check plan, data analysis, initial algorithm, and refinement algorithm) for the following programs. 1. (Name: lab1a-1.cpp) Write a p ...</span> </p> </div> </td> </tr><tr> <td> <div class="innerquestionsgtr"> <h3> <span id="dlReviewList_lblTitle_2"><b><a href='' target='_balnk' class='que_link' >Assignmentcase problem1 - online trivia found on pages</a></b></span></h3> <p> <span id="dlReviewList_lblContent_2">Assignment: Case Problem1 - Online Trivia found on pages 794-795 of your textbook. Complete the web pages and upload them to your 000WebHost account. After uploading the files make sure to update your index.html page to ...</span> </p> </div> </td> </tr><tr> <td> <div class="innerquestionsgtr"> <h3> <span id="dlReviewList_lblTitle_3"><b><a href='' target='_balnk' class='que_link' >Write a program to test for the case of a math equation</a></b></span></h3> <p> <span id="dlReviewList_lblContent_3">Write a program to test for the case of a math equation entered via the keyboard using the SWITCH-CASE operator. Types of equations to test for: x + y  x / y   x * y and x - y. The program is to ask for the following: 1. ...</span> </p> </div> </td> </tr><tr> <td> <div class="innerquestionsgtr"> <h3> <span id="dlReviewList_lblTitle_4"><b><a href='' target='_balnk' class='que_link' >Write a program that calculates several possible tips to</a></b></span></h3> <p> <span id="dlReviewList_lblContent_4">Write a program that calculates several possible tips to give to a waiter at a restaurant. Ask the user to enter the total cost of the meal and then calculate a tip at 10%, 12.5%, 15%, 17.5%, and 20%. Write the original ...</span> </p> </div> </td> </tr><tr> <td> <div class="innerquestionsgtr"> <h3> <span id="dlReviewList_lblTitle_5"><b><a href='' target='_balnk' class='que_link' >Object oriented system analysis and design1non-functional</a></b></span></h3> <p> <span id="dlReviewList_lblContent_5">Object Oriented System Analysis and Design 1. Non-Functional Requirements a) Analysis of NFRs Analyse the Case Study documents and determine the non-functional requirements (NFRs) or system quality attributes necessary t ...</span> </p> </div> </td> </tr><tr> <td> <div class="innerquestionsgtr"> <h3> <span id="dlReviewList_lblTitle_6"><b><a href='' target='_balnk' class='que_link' >Programming assignment- implement a udp client and udp</a></b></span></h3> <p> <span id="dlReviewList_lblContent_6">PROGRAMMING ASSIGNMENT- Implement a UDP client and UDP server that support simple timeout-based retransmission with AIMD congestion control: -The client should send as many packets as are in its CURWIN (current window) a ...</span> </p> </div> </td> </tr><tr> <td> <div class="innerquestionsgtr"> <h3> <span id="dlReviewList_lblTitle_7"><b><a href='' target='_balnk' class='que_link' >Integrative programmingassignment- managing a user account</a></b></span></h3> <p> <span id="dlReviewList_lblContent_7">Integrative Programming Assignment- Managing a User Account List Objective: To manage a user list that can be modified and saved to a text file. Inputs: • Input text file consisting of pairs of usernames and passwords, s ...</span> </p> </div> </td> </tr><tr> <td> <div class="innerquestionsgtr"> <h3> <span id="dlReviewList_lblTitle_8"><b><a href='' target='_balnk' class='que_link' >You must do this assignment correctly as described</a></b></span></h3> <p> <span id="dlReviewList_lblContent_8">You must do this assignment correctly as described below.  If you do not follow the directions or break the rules you will receive a 0 score. Simulation of checking tic-tac-toe board for wins by counting X and O in rows, ...</span> </p> </div> </td> </tr><tr> <td> <div class="innerquestionsgtr"> <h3> <span id="dlReviewList_lblTitle_9"><b><a href='' target='_balnk' class='que_link' >Pair programming phase 1talent agency user stories1 user</a></b></span></h3> <p> <span id="dlReviewList_lblContent_9">Pair Programming Phase 1 Talent Agency User Stories 1. User Story 1 As a head office administrator I want to be able to produce formatted output of all the information about our talent agencies so that I can easily incor ...</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="">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" width="100%"> <tr> <td> <div class="innertranspoitation2"> <h3><span id="LeftSideControl1_RecentQuestion1_dlReviewList_lblTitle_0"><b><a href='' target='_balnk' class='que_link' >A cola-dispensing machine is set to dispense 9 ounces of</a></b></span></h3> <p> <span id="LeftSideControl1_RecentQuestion1_dlReviewList_lblContent_0">A cola-dispensing machine is set to dispense 9 ounces of cola per cup, with a standard deviation of 1.0 ounce. The manuf</span> </p> </div> </td> </tr><tr> <td> <div class="innertranspoitation2"> <h3><span id="LeftSideControl1_RecentQuestion1_dlReviewList_lblTitle_1"><b><a href='' target='_balnk' class='que_link' >What is marketingbullwhat is marketing think back to your</a></b></span></h3> <p> <span id="LeftSideControl1_RecentQuestion1_dlReviewList_lblContent_1">What is Marketing? • "What is marketing"? Think back to your impressions before you started this class versus how you</span> </p> </div> </td> </tr><tr> <td> <div class="innertranspoitation2"> <h3><span id="LeftSideControl1_RecentQuestion1_dlReviewList_lblTitle_2"><b><a href='' target='_balnk' class='que_link' >Question -your client david smith runs a small it</a></b></span></h3> <p> <span id="LeftSideControl1_RecentQuestion1_dlReviewList_lblContent_2">QUESTION - Your client, David Smith runs a small IT consulting business specialising in computer software and techno</span> </p> </div> </td> </tr><tr> <td> <div class="innertranspoitation2"> <h3><span id="LeftSideControl1_RecentQuestion1_dlReviewList_lblTitle_3"><b><a href='' target='_balnk' class='que_link' >Inspection of a random sample of 22 aircraft showed that 15</a></b></span></h3> <p> <span id="LeftSideControl1_RecentQuestion1_dlReviewList_lblContent_3">Inspection of a random sample of 22 aircraft showed that 15 needed repairs to fix a wiring problem that might compromise</span> </p> </div> </td> </tr><tr> <td> <div class="innertranspoitation2"> <h3><span id="LeftSideControl1_RecentQuestion1_dlReviewList_lblTitle_4"><b><a href='' target='_balnk' class='que_link' >Effective hrmquestionhow can an effective hrm system help</a></b></span></h3> <p> <span id="LeftSideControl1_RecentQuestion1_dlReviewList_lblContent_4">Effective HRM Question How can an effective HRM system help facilitate the achievement of an organization's strate</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="">DBMS</a></li> <li><a href="">C/C++</a></li> <li><a href="">Java</a></li> <li><a href="">Dot Net</a></li> <li><a href="">Python</a></li> <li><a href="">CSS/HTML</a></li> <li><a href="">PHP/Joomla </a></li> <li><a href="">Assembly</a></li> <li><a href="">Visual Basic</a></li> <li><a href="">Programming</a></li> </ul> </div> </li> <li> <div class="footerouter_left1"> <ul> <li><a href="">Algorithms Design</a></li> <li><a href="">Automata & Computation</a></li> <li><a href="">Computer Network & Security</a></li> <li><a href="">Operating System</a></li> <li><a href="">Software Engineering</a></li> <li><a href="">Cryptography</a></li> <li><a href="">Data Structure</a></li> <li><a href="">Computer Graphics</a></li> <li><a href="">Data Communication</a></li> <li><a href="">Computer Science</a></li> </ul> </div> </li> <li> <div class="footerouter_left1"> <ul> <li><a href="">Accounting</a></li> <li><a href="">Finance</a></li> <li><a href="">Economics</a></li> <li><a href="">Statistics</a></li> <li><a href="">Management</a></li> <li><a href="">Academics</a></li> <li><a href="">Medical Courses</a></li> <li><a href="">Science</a></li> <li><a href="">Engineering</a></li> <li><a href="">MATLAB</a></li> </ul> </div> </li> <li> <div class="footerouter_left1"> <ul> <li><a href="">Essay Writing</a></li> <li><a href="">Term Papers</a></li> <li><a href="">Thesis/Research</a></li> <li><a href="">Case Studies</a></li> <li><a href="">Dissertation</a></li> <li><a href="">Other Writing</a></li> <li><a href="">Homework Help</a></li> <li><a href="">Humanities</a></li> <li><a href="">Social Studies</a></li> <li><a href="">Exam Preparation</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="" rel="nofollow" target="_blank"></a></li> <li class="twt"><a href="" 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="">Home</a></li> <li><a href="">About Us</a></li> <li><a href="">Blog</a></li> <li><a href="">FAQs</a></li> <li><a href="">Assignment Help</a></li> <li><a href="">Contact Us</a></li> <li><a href="">Q&A</a></li> <li><a href="">Refund Policy</a></li> <li><a href="">Privacy Policy</a></li> <li><a href="">T & C </a></li> <li><a href="">Disclaimer Policy</a></li> <li><a href="">Copyright Notice</a></li> </ul> <div class="clear"></div> <p>© Copyright 2013-14 <span></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') + ''; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> <!--Start of 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=''; s1.charset='UTF-8'; s1.setAttribute('crossorigin','*'); s0.parentNode.insertBefore(s1,s0); })(); </script> <!--End of Script--> </div> </div> </div></form> </body> </html>