html 5

Goals


- Discover the potential of new HTML5 / CSS3 standards

- Learn how to build multiplatform sites: smartphone, tablet, ….

Program

History of HTML
Versions

The basics of an HTML document
The Doctype
The html, head, body tags
Comments
Structures of tags and attributes
Differences between inline and block tags

Headings (h1, h2, h3, etc.)
Paragraphs
Bold and italics
Hypertext links
Lists (ordered and unordered)
Tables

Workshop: Structuring an html page

Images and image format
Essential attributes (src, alt, etc.)
Integrate sounds and videos
Other media

Workshop: Integrate multiple media on an html page

Presentation and definition
Attach a css to an html page
Selectors (tag, id, class)
Pseudo-classes
Properties and values
Comments

Workshop: Attach a css sheet to an html page

Text properties (font, size, alignment)
Hexadecimal, rgb, rgba and named colors Background
properties
Inner and outer margins (margin, padding)
Borders
Dimensions
Lists

Workshop: Styling an existing page

Absolute or relative positioning
Floating and fixed
block Flexible blocks
Grids

Workshop: Positioning different blocks on a page

The form tags
The action and method attributes
The different form fields
The different forms of the input fields
The attributes for the form fields (placeholder, required, etc.)
Validate a form

Workshop: Create a registration form

Animations and transitions
Duration of animations
Transition functions
Keyframes

Workshop: Create an animation

Transformations
Text and block shadows
Rounded borders
Columns
The box-sizing property

Responsive Web Design (RWD): definition, components
Ergonomic and functional constraints
Viewport: concept, meta, values
Relative units (%, em) vs. absolute (px)

Screen sizes, optimal resolution
Portrait and landscape modes
Expression of sizes in percentage (%), em
Minimum and maximum sizes
Blocks, content / container approach
Box principle, layout with CSS3
Font size: set a basis for sizes, conversions em
Avoid overflows

Workshop: Multiple examples of flexible grids

Flexible images: background images, HTML5 adaptation
Flexible margins and spaces
Adapted videos
Support of CSS properties by older browsers

Workshop: Avoid overflow of images / videos

Adaptation of the display according to the resolution
Types of media
Choice of conditional rules: orientation, device-width
Internal and external media queries
Management of menus and sliders

Workshop: Creation of pure css responsive site with media-queries

Overview of existing
Bootstrap
960 grid frameworks
Optimization of graphic resources

Workshop: Building an adaptive site with Bootstrap

Passing of the certification (if foreseen in the financing).

Duration

5 days

Price

£ 2164

Audience

All

Prerequisites

Fundamentals of website creation, HTML and CSS

Reference

SIT653-F

Sessions

Contact us for more informations about session date