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 example of an invalid XHTML page. Your aim is to rewrite 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 https://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)? Explain 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 example, 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></p>
</div>
<div id="viewreadmore" class="link">
<a id="readmore" href="javascript:void(0);" class="read-more-trigger mar_top10" onclick="changeheight(this)">View Complete Question</a>
</div>
<div id="DivRequest">
<h4>
Request for Solution File </h4>
<div class="seprator">
</div>
<div class="downloadfiles">
<h5>
Ask an Expert for Answer!!</h5>
<h6>
Programming Languages: Rewrite the code of invalid xhtml page</h6>
<h5>
Reference No:- TGS01155</h5>
<input type="submit" name="btnGetQuote" value="Request for Solution File" id="btnGetQuote" class="btn btnexperts btn-lg btn-block-sm mar_btm20" />
<p>
Expected delivery within 24 Hours</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 reviewbox">
<div class="row ">
<div class="panel-group review" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Have a Question? (oR Write a Review)
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<div class="col-sm-12">
<div class="row search searchbg message">
<span id="RequiredFieldValidator1" style="visibility:hidden;">Write atleast 100 words!!</span>
<textarea name="txtcomments" id="txtcomments" maxlength="1000" ValidationGroup="Review" placeholder="Write your review" class="form-control" rows="6"></textarea>
<div class="pull-right mar_top20">
<input type="submit" name="btnReviewSubmit" value="Submit" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("btnReviewSubmit", "", true, "Review", "", false, false))" id="btnReviewSubmit" class="btn btn-primary pull-right" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="user-comments-area hidden-xs">
<h4 class="text-uppercase mar_btm20">
<i class="fa fa-question-circle"></i> Recent Questions Asked Programming Languages</h4>
<ul class="user-comments-list">
<table id="dlMaterials" cellspacing="0" style="width:100%;border-collapse:collapse;">
<tr>
<td>
<li>
<div class="comment-box">
<h5>
<span class="mar_lft5">Q :</span> <a id="dlMaterials_hypermaterial_0" class="studenthdname" href="https://www.tutorsglobe.com/question/different-coordinate-systems-51151.aspx">Different coordinate systems</a></h5>
<p class="answer">
<span id="dlMaterials_lblQuestion_0">Graph several solutions to dx/dt = y, dy/dt = -k2 sin x - γy, with k = 1, including at least the three solutions with the initial conditions (x(0),y(0)) = (0,1.5), (0,2), and (0,2.5), for0 ≤ t ≤ 8.</span></p>
</div>
<!-- /comment-box -->
</li>
</td>
</tr><tr>
<td>
<li>
<div class="comment-box">
<h5>
<span class="mar_lft5">Q :</span> <a id="dlMaterials_hypermaterial_1" class="studenthdname" href="https://www.tutorsglobe.com/question/calculating-the-npv-for-fairways-driving-range-51152.aspx">Calculating the npv for fairways driving range</a></h5>
<p class="answer">
<span id="dlMaterials_lblQuestion_1">The project will have an initial working capital requirement of $5,000 and this requirement will be 10% of all revenues after that. The company’s required rate of return for this project is 20%. Please complete the tables to calculate the NP</span></p>
</div>
<!-- /comment-box -->
</li>
</td>
</tr><tr>
<td>
<li>
<div class="comment-box">
<h5>
<span class="mar_lft5">Q :</span> <a id="dlMaterials_hypermaterial_2" class="studenthdname" href="https://www.tutorsglobe.com/question/explaining-north-west-corner-method-transportation-problem-51153.aspx">Explaining north west corner method-transportation problem</a></h5>
<p class="answer">
<span id="dlMaterials_lblQuestion_2">What is the history of North west corner method in transportation problem?</span></p>
</div>
<!-- /comment-box -->
</li>
</td>
</tr><tr>
<td>
<li>
<div class="comment-box">
<h5>
<span class="mar_lft5">Q :</span> <a id="dlMaterials_hypermaterial_3" class="studenthdname" href="https://www.tutorsglobe.com/question/calculating-degree-of-operating-combined-financial-leverage-51154.aspx">Calculating degree of operating-combined-financial leverage</a></h5>
<p class="answer">
<span id="dlMaterials_lblQuestion_3">Calculate the degree of operating leverage, financial leverage and combined leverage.</span></p>
</div>
<!-- /comment-box -->
</li>
</td>
</tr><tr>
<td>
<li>
<div class="comment-box">
<h5>
<span class="mar_lft5">Q :</span> <a id="dlMaterials_hypermaterial_4" class="studenthdname" href="https://www.tutorsglobe.com/question/rewrite-the-code-of-invalid-xhtml-page-51155.aspx">Rewrite the code of invalid xhtml page</a></h5>
<p class="answer">
<span id="dlMaterials_lblQuestion_4">These exercises will aid you become more fluent in XHTML. Note that your files should be validated correctly in order to obtain full credit.</span></p>
</div>
<!-- /comment-box -->
</li>
</td>
</tr><tr>
<td>
<li>
<div class="comment-box">
<h5>
<span class="mar_lft5">Q :</span> <a id="dlMaterials_hypermaterial_5" class="studenthdname" href="https://www.tutorsglobe.com/question/leading-the-way-in-the-global-car-industry-51156.aspx">Leading the way in the global car industry</a></h5>
<p class="answer">
<span id="dlMaterials_lblQuestion_5">What are the roles of comparative and competitive advantages in Hyundai’s success? Explain your answers by providing specific examples of natural and acquired advantages that Hyundai employs to succeed in global car industry.</span></p>
</div>
<!-- /comment-box -->
</li>
</td>
</tr><tr>
<td>
<li>
<div class="comment-box">
<h5>
<span class="mar_lft5">Q :</span> <a id="dlMaterials_hypermaterial_6" class="studenthdname" href="https://www.tutorsglobe.com/question/creating-a-admin-section-in-web-based-application-51157.aspx">Creating a admin section in web based application</a></h5>
<p class="answer">
<span id="dlMaterials_lblQuestion_6">It’s a modules monitoring system and its a web based application Needed a drop down menu list under bsc(hons) programmes with 3 more links and each link needs to have 1 more link like sideways.</span></p>
</div>
<!-- /comment-box -->
</li>
</td>
</tr><tr>
<td>
<li>
<div class="comment-box">
<h5>
<span class="mar_lft5">Q :</span> <a id="dlMaterials_hypermaterial_7" class="studenthdname" href="https://www.tutorsglobe.com/question/preparing-a-regular-income-tax-return-51158.aspx">Preparing a regular income tax return</a></h5>
<p class="answer">
<span id="dlMaterials_lblQuestion_7">Prepare a regular income tax return (form 1040 and all required forms and schedules) for James and Martha Williams (assume they are filing jointly).</span></p>
</div>
<!-- /comment-box -->
</li>
</td>
</tr><tr>
<td>
<li>
<div class="comment-box">
<h5>
<span class="mar_lft5">Q :</span> <a id="dlMaterials_hypermaterial_8" class="studenthdname" href="https://www.tutorsglobe.com/question/discontinued-operations-treatment-for-noncore-business-unit-51159.aspx">Discontinued operations treatment for noncore business unit</a></h5>
<p class="answer">
<span id="dlMaterials_lblQuestion_8">What criteria should be met to warrant reclassifying the non-core business units as discontinued operations effective with quarter ending September 30, 2010.</span></p>
</div>
<!-- /comment-box -->
</li>
</td>
</tr>
</table>
</ul>
<!-- /user-comments-list -->
</div>
</div>
<div class="col-md-4 col-xs-12 login-area innerpage">
<div class="row">
<div class="details col-md-12">
<div class="col-md-4">
<div class="circle orange">
<i class="fa fa-question"></i>
</div>
<p>
1937730
</p>
<p>
Questions<br />
Asked</p>
</div>
<div class="col-md-4">
<div class="circle yellow">
<i class="fa fa-user-secret"></i>
</div>
<p>
3,689</p>
<p>
Active Tutors</p>
</div>
<div class="col-md-4">
<div class="circle green">
<i class="fa fa-thumbs-o-up"></i>
</div>
<p>
1430964</p>
<p>
Questions<br />
Answered</p>
</div>
<p><b>
Start Excelling in your courses, Ask a tutor for help and get answers for your problems !! </b></p>
<a href="https://www.tutorsglobe.com/post-your-job-for-free.aspx" class="btn btn-primary btn-lg mar_top10">ask Question</a>
</div>
</div>
<div class="row">
<div class="user-comments-area hidden-xs">
<hr />
<h4 class="text-uppercase mar_btm20">
<i class="fa fa-question-circle"></i> Asked Questions</h4>
<hr />
<ul class="user-comments-list">
<table id="dlNewReviews" cellspacing="0" style="width:100%;border-collapse:collapse;">
<tr>
<td>
<li>
<div class="comment-box">
<h5>
<a id="dlNewReviews_hyperQues_0" class="studenthdname" href="https://www.tutorsglobe.com/question/problem-regarding-the-america-youth-and-social-media-53423598.aspx">Problem regarding the america youth and social media</a></h5>
<p>
<span id="dlNewReviews_lblReviews_0">Think about where you were the most and least engaged when reading a classmate's draft. Think about what captured your attention </span></p>
</div>
<!-- /comment-box -->
</li>
</td>
</tr><tr>
<td>
<li>
<div class="comment-box">
<h5>
<a id="dlNewReviews_hyperQues_1" class="studenthdname" href="https://www.tutorsglobe.com/question/discuss-three-ethical-guidelines-that-are-important-53423583.aspx">Discuss three ethical guidelines that are important</a></h5>
<p>
<span id="dlNewReviews_lblReviews_1"> Identify and discuss three ethical guidelines that are important to consider when designing an 8-week group for adolescents who are referred </span></p>
</div>
<!-- /comment-box -->
</li>
</td>
</tr><tr>
<td>
<li>
<div class="comment-box">
<h5>
<a id="dlNewReviews_hyperQues_2" class="studenthdname" href="https://www.tutorsglobe.com/question/how-do-you-define-being-an-adult-53423589.aspx">How do you define being an adult</a></h5>
<p>
<span id="dlNewReviews_lblReviews_2">Based on information provided in Ch. 11 & 12, how do you define "being an adult"? </span></p>
</div>
<!-- /comment-box -->
</li>
</td>
</tr><tr>
<td>
<li>
<div class="comment-box">
<h5>
<a id="dlNewReviews_hyperQues_3" class="studenthdname" href="https://www.tutorsglobe.com/question/problem-on-journal-articles-and-non-journal-materials-53423587.aspx">Problem on journal articles and non-journal materials</a></h5>
<p>
<span id="dlNewReviews_lblReviews_3">Amanda said? Excellent post, Chrystal. You provided great insight into the helpful resource ERIC digital library is. I appreciate how it states the information</span></p>
</div>
<!-- /comment-box -->
</li>
</td>
</tr><tr>
<td>
<li>
<div class="comment-box">
<h5>
<a id="dlNewReviews_hyperQues_4" class="studenthdname" href="https://www.tutorsglobe.com/question/problem-concerning-consensual-sexual-relationship-53423599.aspx">Problem concerning consensual sexual relationship</a></h5>
<p>
<span id="dlNewReviews_lblReviews_4">Question: Jena and Ben are employees of Big City Electronics. They began to have a consensual sexual relationship. </span></p>
</div>
<!-- /comment-box -->
</li>
</td>
</tr><tr>
<td>
<li>
<div class="comment-box">
<h5>
<a id="dlNewReviews_hyperQues_5" class="studenthdname" href="https://www.tutorsglobe.com/question/discuss-social-worker-working-with-foster-children-53423606.aspx">Discuss social worker working with foster children</a></h5>
<p>
<span id="dlNewReviews_lblReviews_5"> You are a social worker working with foster children. You are making a home visit to Katie, age nine, and her foster family. </span></p>
</div>
<!-- /comment-box -->
</li>
</td>
</tr><tr>
<td>
<li>
<div class="comment-box">
<h5>
<a id="dlNewReviews_hyperQues_6" class="studenthdname" href="https://www.tutorsglobe.com/question/identify-one-antecedent-one-behaviour-and-one-consequence-53423593.aspx">Identify one antecedent, one behaviour, and one consequence</a></h5>
<p>
<span id="dlNewReviews_lblReviews_6"> Sahir is the most active student in your kindergarten class. He tends to be very disruptive when the teacher you work with is teaching the class,</span></p>
</div>
<!-- /comment-box -->
</li>
</td>
</tr>
</table>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var url = 'https://www.tutorsglobe.com/include/javascript/watiWidget.js';
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = url;
var options = {
"enabled":true,
"chatButtonSetting":{
"backgroundColor":"#00e785",
"ctaText":"Whatsapp Support!!",
"borderRadius":"25",
"marginLeft": "0",
"marginRight": "20",
"marginBottom": "20",
"ctaIconWATI":false,
"position":"left"
},
"brandSetting":{
"brandName":"Tutorsglobe",
"brandSubTitle":"Trusted Since 2005",
"brandImg":"https://www.tutorsglobe.com/include/images/chat-logo.svg",
"welcomeText":"Hi there!\nDo you Need help?",
"messageText":"Hello, Tutorsglobe !! I have a question!",
"backgroundColor":"#00e785",
"ctaText":"Chat with Whatsapp",
"borderRadius":"25",
"autoShow":false,
"phoneNumber":"441416286080"
}
};
s.onload = function() {
CreateWhatsappChatWidget(options);
};
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
</script>
<footer class="site-footer">
<div class="container">
<div class="footerlinks">
<a href="https://www.tutorsglobe.com/">Home</a>
|
<a href="https://www.tutorsglobe.com/about-us.aspx">Company Overview</a>
|
<a href="https://www.tutorsglobe.com/services.aspx">Services</a>
|
<a href="https://www.tutorsglobe.com/library/">Discover Q&A</a>
|
<a href="https://www.tutorsglobe.com/sitemap.aspx">Sitemap</a>
|
<a href="https://www.tutorsglobe.com/contact-us.aspx">Contact Us</a>
|
<a href="https://www.tutorsglobe.com/terms-and-conditions.aspx">T & C</a>
|
<a href="https://www.tutorsglobe.com/refundcancelpolicy.aspx">Refund Policy</a>
|
<a href="https://www.tutorsglobe.com/copyright-infringement-policy.aspx">Copyright Policy</a>
|
<a href="https://www.tutorsglobe.com/blog/archive/">Blog</a>
|
<a href="https://www.tutorsglobe.com/library/archive.aspx">Q&A</a>
|
<a href="https://www.tutorsglobe.com/education-directory.aspx">Directory</a>
</div>
<p>©TutorsGlobe</a> All rights reserved 2022-2023. </p>
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "product",
"name": "Tutorsglobe",
"image": "https://www.tutorsglobe.com/IncludeLib/Images/logo.png",
"description": "elearning Platform - Tutor Service",
"brand": {
"@type": "elearning",
"name": "Tutorsglobe"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.9",
"ratingCount": "37128"
}
}
</script>
<a href="#" class="settings"><i class="fa fa-angle-up"></i></a>
<ul class="social-icons">
<li><a href="https://www.facebook.com/TutorsGlobe" rel="nofollow" target="_blank"><i class="fa fa-facebook-square"></i></a></li>
<li><a href="https://twitter.com/Tutorsglobe" rel="nofollow" target="_blank"><i class="fa fa-twitter-square"></i></a></li>
<li><a href="#" rel="nofollow"><i class="fa fa-youtube-square"></i></a></li>
<li><a href="https://www.linkedin.com/company/tutorsglobe" target="_blank" rel="nofollow"><i class="fa fa-linkedin-square"></i></a></li>
</ul>
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-32333066-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') + '.tutorsglobe.com/IncludeLib/js/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-5E9QFMFDJR"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-5E9QFMFDJR');
</script>
</footer>
</div>
<!-- /pageWrap -->
<div class="overlay">
</div>
<!-- JavaScript Files
================================================== -->
<script type="text/javascript" src="../IncludeLib/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../IncludeLib/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../IncludeLib/js/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript" src="../IncludeLib/js/script.js"></script>
<script type="text/javascript" src="../IncludeLib/js/ie10-viewport-bug-workaround.js"></script>
<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 = "txtcomments";
RequiredFieldValidator1.errormessage = "Write atleast 100 words!!";
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>