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.

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

  1. Create an HTML page, namely, "test_2divs.html", containing two division tags, i.e., <div>...</div>.
  2. Use the float and the margin-left attributes to display these two division tags. One in the left column and the other in the right column.
  3. In the HTML page, add a third division tag after the previous two. If there is an overlap of division tags when displaying the page, try to solve the problem by using the clear attribute.

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 iPhone and personal computer, the CSS is provided in the links below:
small-devices.css, large-devices.css

In Class Exercise In Class Exercise 2

Based on Exercise 1, i.e., "test_2divs.html", design the CSS for two types of devices, one for the iPhone and the other for desktop computers.

  • Create two external CSS style sheets, i.e., "iphone.css" and "desktop.css".
    • The "iphone.css" should cause the content of the div tags to be displayed one by one, that is, from top to bottom.
    • The "desktop.css" should cause the content of the div tags to be displayed in two columns as in Exercise 1.

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

In this assignment, you will continue working on your personal website and the medical form. Use the basic knowledge learned in this lab to:

  1. Add the HTML5 semantic elements of nav, header, footer, and section to your "index.html" file
  2. Modify/add to the CSS to attractively arrange these elements
  3. Ensure that your home page ("index.html") and the medical form display in a desirable format for both iPhone and desktop computers