Using XHTML, produce the subsequent two lists sets on a single page:
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.
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.
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.
Also, add style to the span class “red” so that the text displays in red and is bold.
This is a DIV Container
DIVs are a powerful way to modularize presentation
Make a single page that demonstrates an XHTML form.
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:
• text input field
• select field
• radio or checkbox input fields
• textarea field
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).
Exercise 6 – Project
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.
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.
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.
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.
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.
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.
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.
Though this isn’t a functional requirement, your sites must always be well organized with appropriately named files and well defined directories.
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.