OUR COURSES
Fundamentals in HTML5 & CSS3 - Inclusive of CSS Floating Layouts
Duration 13 hr 28 mins
Languages en_US
Course Description
Get started with a solid foundation in HTML and CSS. From there, learn about handling text, tables, graphics, and hyperlinks. Additonally, Finally, dig into building forms and handling multimedia — all in HTML and CSS Fundamentals! Join award-winning software trainer, Geoff Blake on a journey into HTML, CSS and web design in this information-packed course. Spanning nearly 6 hours, you’ll gain skills with more than 70 casual, easy to follow lessons, hands-on tasks and techniques!Get started with a solid foundation in HTML and CSS and code away with your new found skill!
- Learn about the basics of HTML and CSS
- Understand how different parts of a web page is designed
- Know how to apply these skills into your own designs
- Additionally learn and understand more about CSS Floating Layouts
Course Objectives
1. Understand the fundamentals of HTML and CSS2. Able to apply the fundamentals into your own web designs
3. Know how to work with flexible layout in CSS
4. Understand the combination of flexible/fixed layout
5. Able to work with audio, video and hyperlinks
6. Understand how to format a page using CSS
Content
Hello And Welcome
From Ten Ton Dreamweaver: The Three Web Design Challenges, Part 1
The Three Web Design Challenges, Part 2
Viewing A Page's Background Code
So What The Heck Is HTML?
Understanding HTML Fundamentals
The Three Basic Components of HTML
The Two Types Of Elements: Block And Inline
Understanding What CSS Is About
The Three Web Design Challenges, Part 2
Viewing A Page's Background Code
So What The Heck Is HTML?
Understanding HTML Fundamentals
The Three Basic Components of HTML
The Two Types Of Elements: Block And Inline
Understanding What CSS Is About
Choosing Your Coding Application (And Setting Up TextEdit For The Mac)
Setting Up Basic Page Structure
Setting The Doctype And XMLNS Info
Saving Your Page And Previewing It In A Browser
Inserting A Page Title
Setting Up Basic Page Structure
Setting The Doctype And XMLNS Info
Saving Your Page And Previewing It In A Browser
Inserting A Page Title
Understanding Whitespace And Creating Paragraphs
Creating Line Breaks
Inserting Non-Breaking Spaces
Handy To Know: Inserting Special Characters
Easy Formatting With Bold And Italics
Using Blockquote And Code Elements
From The Old World: Formatting Text
Creating Structural Headings
HTML Comments
Inserting Horizontal Rules
Introducing Div's
Creating Line Breaks
Inserting Non-Breaking Spaces
Handy To Know: Inserting Special Characters
Easy Formatting With Bold And Italics
Using Blockquote And Code Elements
From The Old World: Formatting Text
Creating Structural Headings
HTML Comments
Inserting Horizontal Rules
Introducing Div's
Creating Ordered Lists
Inserting An Unordered Lists
Her's How To Create A Nested List
TASK #1: Hand Code This List!
Inserting An Unordered Lists
Her's How To Create A Nested List
TASK #1: Hand Code This List!
From Ten Ton Dreamweaver: Understanding Graphic Formats On The Web
Inserting Graphics, All By Hand
Applying Attributes To The Img Element
Understanding Relative Paths
Understanding Absolute Paths
Ready For Some Photoshop? Techniques For Resizing Graphics
Setting A Page Background
Inserting Graphics, All By Hand
Applying Attributes To The Img Element
Understanding Relative Paths
Understanding Absolute Paths
Ready For Some Photoshop? Techniques For Resizing Graphics
Setting A Page Background
Creating A Basic Hyperlink
Linking From A Graphic
Opening Links In A New Browser Window
Absolute And Relative Links, And Linking To An Internal Web Page
Linking To An Email Address
Linking To Anchors
Linking From A Graphic
Opening Links In A New Browser Window
Absolute And Relative Links, And Linking To An Internal Web Page
Linking To An Email Address
Linking To Anchors
Setting Up The Basic Table Structure
Inserting Table Headers
Attributes For Tables
Attributes For Table Rows
Attributes For Table Cells
Inserting Nested Tables
Inserting Different Types Of Content Into Tables
TASK: Re-Create This Table!
Inserting Table Headers
Attributes For Tables
Attributes For Table Rows
Attributes For Table Cells
Inserting Nested Tables
Inserting Different Types Of Content Into Tables
TASK: Re-Create This Table!
Inserting An Iframe
Editing The Page That Appears Inside An Iframe
Loading An External Website Into An Iframe
Setting Iframe Attributes
Using Target="_parent" Links In Iframes
Editing The Page That Appears Inside An Iframe
Loading An External Website Into An Iframe
Setting Iframe Attributes
Using Target="_parent" Links In Iframes
Inserting Text Fields
Loadin' Up Some Checkboxes
Creating Radio Buttons
Inserting Text Areas
How About Drop Down Menus?
Creating Submit And Reset Buttons
Finally, Form Submission Settings
Loadin' Up Some Checkboxes
Creating Radio Buttons
Inserting Text Areas
How About Drop Down Menus?
Creating Submit And Reset Buttons
Finally, Form Submission Settings
Embedding Audio Files
Embedding Video Files
Linking To Audio And Video Files
Linking To Other Types Of Media
Embedding Video Files
Linking To Audio And Video Files
Linking To Other Types Of Media
Further Resources And Where To Go From Here
Download Project Files
Welcome To Ten Ton CSS Fundamentals!
Welcome To Ten Ton CSS Fundamentals!
The Basics: Understanding How CSS Works
Anatomy Of A CSS Rule
CSS Property Reference
Getting Set Up and Creating A Style Sheet
Anatomy Of A CSS Rule
CSS Property Reference
Getting Set Up and Creating A Style Sheet
The Three Fundamental CSS Rule Types
Getting Started With HTML Selectors
Creating Class Selectors
Applying Class Selectors, Part One
Applying Class Selectors, Part Two
ID Selectors
Additional Properties and Introducing CSS Shorthand
Getting Started With HTML Selectors
Creating Class Selectors
Applying Class Selectors, Part One
Applying Class Selectors, Part Two
ID Selectors
Additional Properties and Introducing CSS Shorthand
Formatting Graphics
Creating A Floating Sidebar
Controlling Table Formatting With CSS, Part One
Controlling Table Formatting With CSS, Part Two
Technique: Advanced Table Formatting
Creating An Alert Message
Constructing A Quick Page Layout
Technique: Creating A Sticky Footer
Creating A Menu From An HTML List
Setting The Menu's Hyperlink Formatting
Creating A Floating Sidebar
Controlling Table Formatting With CSS, Part One
Controlling Table Formatting With CSS, Part Two
Technique: Advanced Table Formatting
Creating An Alert Message
Constructing A Quick Page Layout
Technique: Creating A Sticky Footer
Creating A Menu From An HTML List
Setting The Menu's Hyperlink Formatting
Moving Rules From An Internal Style Sheet To An External Sheet
Making Changes To An External Style Sheet
CSS Comments And Gettin' Your Style Sheet Organized
Applying An Alternate Design
Applying Multiple Style Sheets
Importing Style Sheets Into External Style Sheets
Technique: Creating A Printer-Friendly Style Sheet
Inline Styles
Making Changes To An External Style Sheet
CSS Comments And Gettin' Your Style Sheet Organized
Applying An Alternate Design
Applying Multiple Style Sheets
Importing Style Sheets Into External Style Sheets
Technique: Creating A Printer-Friendly Style Sheet
Inline Styles
Cascading, Part One: Introducing The Idea Of Cascading
Cascading, Part Two: Understanding Overrides And How Rules Combine Together
Cascading, Part Three: Understanding How Style Sheets Cascade
A Quick Note On Cascading External Style Sheets
Task: Take The Cascading Quiz
Using Firefox's Firebug Plugin
Resolving Conflicts With Dreamweaver
Using !Important
Cascading, Part Two: Understanding Overrides And How Rules Combine Together
Cascading, Part Three: Understanding How Style Sheets Cascade
A Quick Note On Cascading External Style Sheets
Task: Take The Cascading Quiz
Using Firefox's Firebug Plugin
Resolving Conflicts With Dreamweaver
Using !Important
Thanks For Watching
Introduction
A Note About Set Up
Download Project Files
A Note About Set Up
Download Project Files
Basic Floating
Using Floats On Multiple Items
Introducing Clear
A Practical Example: Creating A Thumbnail Gallery With Float And Clear
Practical Application of Float and Clear
Using Floats On Multiple Items
Introducing Clear
A Practical Example: Creating A Thumbnail Gallery With Float And Clear
Practical Application of Float and Clear
Creating The Basic Structure
Setting Properties And Testing The Layout
Inserting The Header
Inserting The Footer And Finalizing
Understanding How The Layout Works
Setting Properties And Testing The Layout
Inserting The Header
Inserting The Footer And Finalizing
Understanding How The Layout Works
Building The Basic Layout Structure
Adding In Some Dummy Content
Setting Properties, Part 1
Setting Properties, Part 2
Final Layout Options
Adding In Some Dummy Content
Setting Properties, Part 1
Setting Properties, Part 2
Final Layout Options
Setting Up The Structure
Setting Properties, Part 1
Setting Properties, Part 2
Final Layout Options
Setting Properties, Part 1
Setting Properties, Part 2
Final Layout Options
Building Dreamweaver CS3/CS4 Essential’s Layouts Using Floats, Part 1
Building Dreamweaver CS3/CS4 Essential’s Layouts Using Floats, Part 2
Creating Floating Layouts In Dreamweaver
Building Dreamweaver CS3/CS4 Essential’s Layouts Using Floats, Part 2
Creating Floating Layouts In Dreamweaver
Wrapping It Up