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 web pages creating their own websites.
Overview
Levels: Essentials Intermediate Advanced
Course 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
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
HTML5 Formatting
- Block-level Formatting
- Inline Formatting
- Using Colors
- Websafe colors
- Hexadecimal color 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
Customizing 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)