A Brief Introduction
This lab introduces some advanced topics on HTML and CSS. You will learn some new HTML5 tags and more about using CSS to position elements on a page to create attractive layouts. You will also learn concepts to adapt your web page to different devices, i.e., different screen sizes.
New Tags Introduced by HTML5
The specifications on HTML5 include several new tags that did not exist in previous versions of HTML/XHTML. The new tags include: semantic elements, form elements, graphic elements and multimedia elements. This lab focuses on the new semantic elements that define the typical parts of a web page such as the header, the footer, the navigation bar, and sections and articles. The following links provide details.
HTML5 semantic elements: http://www.w3schools.com/html/html5_semantic_elements.asp
Information on how to migrate from HTML4 to HTML5: http://www.w3schools.com/html/html5_migration.asp
It should be pointed out that CSS rule sets are necessary to attractively arrange the HTML5 semantic elements on the page. The above link also provides information on how to convert CSS originally designed for HTML4
div tags to HTML5 semantic elements.
In Lab Exercise 1
- Copy the page,"sampleLayout.html", into your public_html directory using the following command:
cp -p /net/data/ftp/pub/class/215/advanced_html_css/sampleLayout.html ~/public_html/
- Convert it from HTML4
div tags to HTML5 semantic elements
- Change the
<div class="header"> into a
- Change the
<div class="footer"> into a
- Change the
<div class="content"> into a
- Change the
<div class="left"> into an
- Make appropriate changes to the internal style sheet
A more advanced application of style sheets involves positioning HTML elements on the page using
right attributes. In addition, the
float attribute can be used to push HTML elements to the left or right. The following links provide details.
CSS positioning: http://www.w3schools.com/css/css_positioning.asp
CSS position properties: http://www.w3schools.com/cssref/pr_class_position.asp
float attribute: http://www.w3schools.com/css/css_float.asp
In Lab Exercise 2
- The "sampleLayout.html" file that you copied in Exercise1 has something wrong with the layout. Fix it so that the
aside does not have the border going through it.
Designing for Different Screen Sizes (Devices)
In order to produce a web page that adapts to devices with various screen sizes, Ethan Marcotte introduced the notion of responsive web design. "Responsive Web design, originally defined by Ethan Marcotte in A List Apart responds to the needs of the users and the devices they are using. The layout changes based on the size and capabilities of the device. For example, on a phone, users would see content shown in a single column view; a tablet might show the same content in two columns." (taken from: https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/). The following links provide the original article on responsive web design written by Ethan Marcotte and some basic concepts for designing an adaptive web page for multiple devices.
Ethan Marcotte's original article on responsive web design: http://alistapart.com/article/responsive-web-design
Responsive web design basics: https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/
The second link provides a plethora of information, the most relevant and useful links within that site are:
- Setting the viewport:
- Sizing content to the viewport:
- Using media queries for responsiveness:
- Choosing breakpoints:
For more concepts and guidelines on implementing responsive web design, refer to the following links:
- Home page and navigation principals: https://developers.google.com/web/fundamentals/layouts/principles/
- Responsive web design patterns: https://developers.google.com/web/fundamentals/layouts/rwd-patterns/
- Navigation and action patterns: https://developers.google.com/web/fundamentals/layouts/navigation-patterns/
Try opening an example page using your smartphone/tablet
and personal computer, the CSS is provided in the links below:
small-devices.css in text format,
large-devices.css in text format
Graphics File Formats
When saving images for the web, you have to consider things like image size, quality, and file type. The following link provides a guide to saving images for the web.
A guide to saving images (using Photoshop): http://sixrevisions.com/web_design/comprehensive-guide-saving-images-for-web/
Zip index.html, small-device.css and large-device.css into username.zip
Upload zipped file to URcourses before 11:55 PM today.
In this assignment, you will continue working on your personal website. Use the basic knowledge
learned in this lab to:
- Add the HTML5 semantic elements:
section to your "index.html" file
- Modify/add to the CSS to attractively arrange these elements.
- Copy the two external CSS style sheets, i.e., "small-device.css" and "large-device.css" Add the two .css
files in the same directory where index.html is. Make sure the permission for .css files are set as 644.
- Ensure that your home page ("index.html") displays in a desirable format for
both smartphone/tablet and desktop computers.
- Here is a sample page