Advanced HTML and CSS

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

An Brief Introduction

This secion introduces advanced topics on HTML and CSS. In the former, you will learn new HTML5 tags with CSS. In the later, you will learn CSS positioning. A combination of these two is the design of HTML document with CSS for different devices, i.e., different screen sizes.

New Tags Introduced by HTML5

Existing HTML5 specifications introduce a set of new tags, including semantic elements, new form elements, new graphic elements and new multimedia elements. The lab focuses on new semantic elements. The following links provide the detail.

HTML5 Sementic Elements: http://www.w3schools.com/html/html5_semantic_elements.asp

HTML4 Division Tags and a migration to HTML5 Semantic Tags: http://www.w3schools.com/html/html5_migration.asp
It should be pointed out that you should add CSS for properly display HTML5 semantic elements. The CSS originally designed for division tags can be easily modified for HTML5 semantic elements.

CSS Positioning

In more advanced using of style sheets, you need to specify position of an HTML element by using position, top, bottom, left and right attributes. In addition, you can push an HTML element to left or right by using a float attribute. The following links provide the detail.

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 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 the two division tags. One in the left column and the other in the right column.
  3. Add a third division tag after previous two in the HTML page. If there is an overlap of division tags when displaying the page, try to solve the problem by using the clear attribute.

Design for Different Screen Sizes (Devices)

In order to producing a Web page that adapts to devices with various screen sizes, Ethan Marcotte introduces 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." The following links provides the original article on "responsive web design" written by Ethan Marcotte, and basic skills for desining an adaptive web page for multiple devices.

Responsive Web Design: http://alistapart.com/article/responsive-web-design

Responsive Web Design Basics: https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/

For the second link, lab instructor should use the following outline:

  1. Set the view point:
    https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/set-the-viewport.html
  2. Size content to the viewpoint:
    https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/size-content-to-the-viewport.html
  3. Use CSS media queries for responsiveness:
    https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries.html
  4. How to choose breakpoints:
    https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/how-to-choose-breakpoints.html

For more advanced topics on the reseponsive Web Design, you may find the following information:

  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 open an example page by iphone and personal computer, the CSS is provided as follows:
small-devices.css, large-devices.css

In Class Exercise In Class Exercise 2

  1. Based on Exercise 1, i.e., "test_2divs.html", desgin the CSS for two types of devices, one for iphone and the other for desktop computers..
  2. Try to use two external css style sheets, i.e., "iphone.css" and "desktop.css".
  3. The "iphone.css" show the content of division tags one by one, that is, from top to bottom.
  4. The "desktop.css" show the two division tags 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. That is, you need to concern the "safety" issue when using images in an HTML document. The following links provide details on using images tags and a guide on safely using images. Safety Issues of HTML Images: A Comprehensive Guide to Saving Images for the Web.

Safety Issues of HTML Images: A Comprehensive Guide to Saving Images for the Web

In Class Exercise Lab Assignment

In this assignment, you continue working on builidng up your personal website and the medical form, using the basic knowledges learned from responsive Web design to make sure your personal Web site and the medical form display nice format for both iphone and desktop computers.