Foundations of HTML & CSS

Foundations of HTML & CSS
Two Days - Instructor-led

This course teaches how to create simple web pages using HTML 5, the successor to HTML 4 and XHTML 1.1. It’s a concise and easy-to-understand overview of how to build web pages with HTML and Cascading Style Sheets (CSS) that are compatible with most of today's HTML-based browsers. You'll discover the different elements involved in bringing a conventional site to life. HTML 5 has been adopted by Apple developers and is useful for developing a variety of mobile apps. A basic knowledge of HTML will also go a long way to customize blog posts and email marketing messages and to troubleshoot pages created in Dreamweaver.

Audience

This course is most suitable to someone who’s already had an exposure to HTML or other scripting or programming languages, and to someone who has a sense of what HTML tags are.

Objectives:

  • Building Web pages that use the newest HTML standards and remain compatible with older HTML-based browsers.
  • Formatting HTML documents using Cascading Style Sheets.
  • Formalizing and strengthening basic knowledge of html and CSS

Course Outline

Lesson 1: Getting Started

  • Browsers and editors
  • HTML syntax principles
  • HTML vs. CSS
  • New features in HTML5

Lesson 2: Creating Your First Page

  • Structure of HTML documents
  • Basic tags
  • Metadata

Lesson 3: Modifying text

  • Paragraph and text formatting
  • Numbered and bulleted lists
  • Special characters

Lesson 4: Adding CSS styles

  • Style sheets overview
  • Applying styles
  • Class, ID, and tag styles

Lesson 5: Styling text

  • Alignment
  • Color & background

Lesson 6: Adding images

  • Image attributes
  • Aligning images
  • Background images

Lesson 7: Adding links

  • Links to another page
  • Links to another site
  • Links to an area on the same page
  • Links color
  • Links hover effects

Lesson 8: Working with tables

  • Table structure overview
  • Table attributes
  • Using a table for layout

Lesson 9: Controlling page layout

  • Relative positioning
  • Absolute positioning
  • Fixed positioning
  • Controlling elements overlap
  • Div tag