Advanced HTML and CSS

New HTML5 tags, CSS positioning, Designing for different screen sizes, Graphic file formats

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 In Lab Exercise 1

  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/
  2. Convert it from HTML4 div tags to HTML5 semantic elements
    1. Change the <div class="header"> into a header
    2. Change the <div class="footer"> into a footer
    3. Change the <div class="content"> into a section
    4. Change the <div class="left"> into an aside
  3. Make appropriate changes to the internal style sheet

CSS Positioning

A more advanced application of style sheets involves positioning HTML elements on the page using position, top, bottom, left and 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

The float attribute: http://www.w3schools.com/css/css_float.asp

In lab Exercise In Lab Exercise 2

  1. 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:

  1. Setting the viewport:
    https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/set-the-viewport.html
  2. Sizing content to the viewport:
    https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/size-content-to-the-viewport.html
  3. Using media queries for responsiveness:
    https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries.html
  4. Choosing breakpoints:
    https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/how-to-choose-breakpoints.html

For more concepts and guidelines on implementing responsive web design, refer to the following links:

  1. Home page and navigation principals: https://developers.google.com/web/fundamentals/layouts/principles/
  2. Responsive web design patterns: https://developers.google.com/web/fundamentals/layouts/rwd-patterns/
  3. 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, large-devices.css,
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/

In Class Exercise Lab Assignment

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:

  1. Add the HTML5 semantic elements: header, footer, and section to your "index.html" file
  2. Modify/add to the CSS to attractively arrange these elements.
  3. 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.
  4. Ensure that your home page ("index.html") displays in a desirable format for both smartphone/tablet and desktop computers.
  5. Here is a sample page