iCellini Computer Training

Setting Up Shop

• The Basic Tools You Need
• Beyond the Basic Tools
• Not Just Text, Text, Text
• Online Tools
• Creating a Spot for Your Website

Introduction to Web Pages

• Your First Web Pages
• Anatomy of a Web Page
• Viewing the Source
• Basic Requirements of a Web Page
• The Doctype
• The html Element
• The head Element
• The title Element
• meta Elements
• Other head Elements
• The body Element
• The Most Basic Web Page in the World
• Headings and Document Hierarchy
• Paragraphs
• For People Who Love Lists
• Commenting Your HTML
• Symbols

Diving into Our Website

• The Home Page: the Starting Point for All Websites
• Splitting Up the Page
• Linking Between Our New Pages
• The blockquote (Who said that?)
• The cite Element
• strong and em
• Taking a Break

Adding Some Style

• What is CSS?
• Adding Inline Styles
• The span Element
• Embedded Styles
• Why Embedded Styles Are Better Than Inline Styles
• External stylesheets
• Why External Stylesheets Are Better Than Embedded Styles
• Creating an External CSS File
• Linking CSS to a Web Page
• Starting to Build Our Stylesheet
• Stylish Headings
• A Mixture of New Styles
• A New Look in a Flash!
• A Beginner’s Palette of Styling Options
• Recap: the Style Story so Far
• Looking at Elements in Context
• Contextual Selectors
• Grouping Styles
• Which Rule Wins?
• Recapping Our Progress
• Styling Links
• Class Selectors
• Styling Partial Text Using span

Shaping Up Using CSS

• Block-level Elements versus Inline Elements
• Block-level Elements
• Inline Elements
• Inline Begets Inline
• Inline Elements Can Never Contain Block-level Elements
• Styling Inline and Block-level Elements
• Sizing Up the Blocks
• Setting a Width
• Setting a Height
• Adding Borders to Block-level Elements
• Example Borders
• Styling Individual Sides of an Element
• Shorthand Border Styles
• Border Styles You Can Use
• Shaping and Sizing Our Diving Site
• Adding Padding
• Introducing Padding to the Project Site
• Margins
• The Box Model
• Positioning Elements Anywhere You Like!
• Showing the Structure
• Absolute Positioning
• Other Layout Options
• More Absolute Positioning
• Relative Positioning
• Floated Positioning
• Styling Lists

Using Images on Your Website

• Inline Images
• Anatomy of the Image Element
• Web Accessibility
• JPEG versus GIF versus PNG
• Transparency
• PNG: King of Transparency
• Adding an Image Gallery to the Site
• Updating the Navigation
• Adding the New Gallery Page
• Adding the First Image
• Formatting the Picture Using CSS
• Captioning the Picture
• Basic Image Editing
• Image Cropping
• Special Effects
• Resizing Large Images
• Other Software
• Filling up the Gallery
• Sourcing Images for Your Website
• Background Images in CSS
• Repeated Patterns
• Nonrepeating Images
• Shorthand Backgrounds
• Fixed Heights and Widths
• Setting a Background for Our Navigation

Tables: Tools for Organizing Data

• What is a Table?
• Anatomy of a Table
• Styling the Table
• Borders, Spacing, and Alignment
• Making Your Tables Accessible
• Linearization
  summary
• Captioning Your Table
• Adding an Events Table
• Stylish Table Cells
• Advanced Tables
• Merging Table Cells
• Advanced Accessibility

Forms: Interacting with Your Audience

• Anatomy of a Form
• A Simple Form
• The Building Blocks of a Form
• The form Element
• The fieldset and legend Elements
• The label Element
• The input Element
• The select Element
• The textarea Element
• Submit Buttons
• The Default Control Appearance
• Building a Contact Page
• Editing the Contact Us Page
• Adding a form and a fieldset Element
• Styling fieldset and legend with CSS
• Adding Text Input Controls
• Tidying Up label Elements with CSS
• Adding a select Element
• Adding a textarea Element
• Adding Radio Buttons and Checkboxes
• Completing the Form: a Submit Button
• Processing the Form

Further Discussion

• The Client-server Model
• Web Hosting Jargon 101
• Hosting Your Web Site
• Uploading Files to Your Server
• Validating Your Web Pages