Overview

This course was developed specifically for designers as an introduction to the building blocks of web pages – HTML5 and CSS Our goal is to help designers easily transition and upgrade their existing print-media skillset to better understand these core web languages as they relate to web design. Using both exercise and student websites you will become familiar with standard website layout elements.

Delegates will learn about the new html5 tags and how to structure them. Hence an understanding of what goes on behind webpages creating their own websites.


Duration

2 days

Outline



The Basics
■ Web Browsers ■ What is HTML5? ■ Browser incompatibilities ■ Nesting tags HTML — The structure of a website
■ What is HTML ■ Building HTML ■ Web building basics ■ Working with text ■ Working with DIV’s ■ Working with images ■ Managing Head elements and Meta Tags ■ Special formatting – Tables ■ Special formatting – Forms ■ Connecting structure to design HTML5 Structure
■ Global Structure ■ The HTML, BODY, HEAD, TITLE Elements ■ Creating an HTML5 Document ■ Tags that you must know ■ The audio, source and video tags ■ Headings ■ Paragraphs ■ Lists ■ Horizontal Rules ■ Divisions ■ Line Breaks

Customising your site
■ What is CSS? ■ Where is CSS used? ■ Why is CSS important? ■ What can you do with CSS? ■ CSS in the browser: where the designer loses control Introduction to CSS ■ Working with Properties and Selectors ■ Linked (external) Style Sheets ■ Embedded styles ■ Inline styles

Working with Links
■ Local Links and Navigation Bars ■ Remote Links ■ E-mail Links ■ Named Anchors (Bookmarks)

HTML5 Formatting
■ Block-level Formatting ■ Inline Formatting ■ Using Colors ■ Websafe colours ■ Hexidecimal colour values

Working with Graphics
■ Embedding Images in a Web Page ■ The “alt” Attribute and Accessibility ■ Graphic Formats (GIF, JPEG, and PNG) ■ Using Graphics as Links ■ Using Background Images

Working with Tables
■ Creating and Modifying Tables ■ Working Around Browser Inconsistencies ■ Formatting Tables ■ Table Headers and Captions ■ Spanning Rows and Columns

Working with Forms
■ Form functioning ■ HTML5 forms and form objects ■ Action, Method property ■ Form buttons ■ Check boxes and radio buttons ■ Lists and menus ■ Form focussing ■ Form validating

Managing Head elements and Meta Tags
■ Meta tags ■ Index.htm page ■ Spiders and search engines ■ Keywords ■ Descriptions

Web Page Creation
■ Web building basics ■ Creating a new HTML & HTML5 pages ■ Enhanced Starter Layouts (CS5) ■ New document -preferences ■ Page titles ■ Document Properties ■ Background colour /image



*Please note that we offer free electronic support to clients on content covered on our courses.