HTML / CSS Fundamentals Training

Web developers and web design tools such as Dreamweaver employ the Hypertext Markup Language (HTML) to establish web pages. CSS, or Cascading Style Sheets, is a versatile web design language that lets you customize the layout of your web pages. Without CSS, the appearance of your pages - including the fonts, sizes, colors, placement, and spacing - is determined by the web browser.

With text tags, HTML authors layout the page content, including embedded images, text objects such as paragraphs, headings and bullet lists, and interactive links. HTML lays the foundation that other languages such as Cascading Style Sheets and JavaScript build upon.

In this hands-on HTML/CSS training class, you will acquire the fundamental skills needed to create pages using HTML and CSS. For site longevity and multi-browser compliance, we emphasize the industry's latest web standards.

How the Web Works

HTML is only one part of a larger collection of languages and technologies that make the World Wide Web (WWW) work. We begin class discussing how HTML began, who defines it and why it has various standards. We then illustrate the relationship between your Internet Service Provider (ISP), your browser and the web. Furthermore, we explain other acronyms and technologies including XML, JSP, PHP, JavaScript and CSS. In this part of the HTML training class, we'll show you how to:

  • Identify the relationship between the browser, the ISP and the Web
  • Distinguish between "http://" and "ftp://"
  • Interpret the latest HTML Standard/li>
  • Differentiate among the roles of CSS, JavaScript and server-side languages such as PHP, ColdFusion and Ruby on Rails.

What Tools You Need for HTML

A web developer needs a set of tools to create web pages. We explain the various applications available on the market and what features they provide. You will learn the differences between the high-end WYSIWYG (What You See Is What You Get) applications like Adobe Dreamweaver and Microsoft SharePoint Designer and the more rudimentary editors freely available. We describe the wide variety of frugal options to get the best out of a small budget. After this lesson, you will know how to:

  • Determine whether to develop web pages with a text editor (NotePad), an HTML editor (TextPad, Taco HTML), or a WYSIWYG editor
  • Identify the strengths, weaknesses, and rapid evolution of contemporary web browsers
  • Master the fundamentals of FTP applications
  • Make use of available graphics tools from free online tools to Adobe Photoshop

HTML: Getting Started with a Text Editor & Browser

A web page is a text document that contains HTML code or tags in it. To edit a web page, we work in text editor. To view the web page, we open it in a browser. We begin the lesson experimenting with a couple of tags for basic formatting, such as bold, italic and font size. Through hands-on experience editing and adding HTML tags and reviewing the way the code is interpreted by the browser, you will grow confident in basic "tagging" or "marking up" of text. This session of the HTML training will teach you how to:

  • View the HTML source of a web page
  • Open an HTML file in a web browser
  • Edit an HTML page in a text editor
  • Code with HTML tags to define different types of page elements
  • Create paragraphs in a web page
  • Make text bigger or smaller
  • Italicize words
  • Make a sentence bold

HTML Headings & Other Blocks of Text

Web page content comes in different forms. Paragraphs of text are often grouped together under headings. Sections may have sub-sections with their own sub-headings. After this portion of the HTML training class, you will master the skills needed to:

  • Identify the different between a paragraph of text and a heading
  • Create primary, secondary and tertiary headings in the web page
  • Emphasize and strongly emphasize text inside of a paragraph

HTML Versions, Titles and Proper HTML Grammar

Writing proper HTML ensures different browsers render each web page correctly. In class, you will learn how to write proper HTML, set the content of the browser title bar, diagnose common mistakes and write comments or notes hidden from the browser. In this lesson, you will learn the best way to:

  • Change the title in the browser window
  • Specify which version of HTML you are using
  • Set up the basic structure of a web document and use this as a template to build new HTML pages
  • Put comments and notes to yourself in the code that do not display on the page
  • Validate your HTML code and find syntax errors

Line Breaks, Horizontal Separators & Special Characters

In a word processor, special characters are inserted using a menu option to add a new symbol, lines and dividers are drawn, and blank lines are added by hitting the return/enter key a few times. In HTML, a developer has to include code to add these items. Sometimes the content is added with a special kind of tag, other times developers use a character code reference or entity. Adding code to your own pages, you will learn about:

  • Non-text or "empty elements" - or tags that do not contain text
  • Creating basic line breaks and how that differs from adding paragraphs
  • Inserting horizontal rules or dividers across the page
  • Referencing special symbols such as the symbol for "copyright"
  • Guides on the Web that list the code for different symbols

Bulleted & Numbered Lists with HTML

While paragraph formatted text and headings are useful, sometimes it is nice to bullet or number a list of items. HTML provides built-in support for both kinds of lists. In this session of the HTML training class, we create both a numbered and a bulleted list. Then we define a sub-list or a list within another list. Afterwards, you will confidently be able to:

  • Mark something as a list item
  • Group a set of list items into a bulleted list
  • Number or sequence a set of list items
  • Embed a list within another list

Customizing Page Elements with HTML Attributes

Up until this lesson, every page element we define is basically the same. One paragraph looks like another paragraph. One bulleted list looks like another. Obviously, there are times when a developer needs to change a paragraph so it aligns to the right or alter the bullet used in a list. Many of these effects can and should be set using CSS (Cascading Style Sheets), but some modifications or customizations can be achieved by setting a value to a tag's HTML "attribute(s)". After this lesson, you will be able to:

  • Look up a tag's attributes and possible values
  • Add a custom "tooltip" mouseover to any page element
  • Provide additional keywords to search engines using the title attribute
  • Change the alignment of a paragraph or heading
  • Alter the bullet or sequencing style used by a list
  • Set basic text and background colors for the web page

Displaying Tabular Data in HTML

Tables usefully organize information into rows and columns. Traditionally, web developers have employed tables in myriad ways because of their clean ability to structure content. We focus on the core tags used to create tables and the ways to modify the appearance of the table by altering the tables border, background, width and alignment. In this HTML training lesson, you will learn how to:

  • Engineer a table with HTML code
  • Establish rows within the table
  • Designate that a cell provides heading information
  • Denote that a cell contains tabular data
  • Add a border on your table
  • Modify the spacing inside and outside of the table cells
  • Change the background color of a cell, row or an entire table
  • Modify the alignment of the text within a cell or of a row of cells

Creating & Modifying Images for the Web

Text documents, though informational, gain more viewer interest when combined with images. Because images are more than simple code, in this lesson we step back from our code editor and consider the steps a professional web designer takes when selecting or creating artwork for their company's website. We share resources for finding royalty-free art and discusses which image formats are suitable for the web, advantages and disadvantages of various formats, image size and resolution, and file naming conventions. Moreover, we search for and save images, before we roll up our sleeves and use a simple, free online graphics program to create images for the class website project. In this multi-step, hands-on lesson, you will gain the skills needed to:

  • Search and find artwork for your website
  • Determine what format, size and resolution would best suit a web page
  • Open an existing image in a graphics editor and modify it for the web
  • Create a new image from scratch
  • Add text, borders, frames or other information to an image using
  • Save your images with comprehensible file names in relation to the other files in your website

Embedding an Image on Your HTML Web Page

Word processors make inserting images look easy. You simply browse for the image - no matter where it is - and the application simply copies it into the document. In HTML things are a little different. In code, we point to the image file. Technically, the image file is never actually part of the HTML page. Instead, the code in the web page tells the browser where to find the image file and how it should be embedded by the browser. The tag used to reference an image contains a lot of information so that the browser can display the art. In this part of the HTML fundamentals training, we return to our text editors and add the code, so that you will learn how to:

  • Insert an image tag in the HTML
  • Specify to the browser how to find the image file
  • Indicate how much space the browser should carve out in the web page for the image
  • Make your images accessible and understandable to search engines and screen readers
  • Add a mouse-over, tool-tip to the picture
  • Center an image in the middle of the page
  • Wrap text around an image and provide a little buffer space between the image and the text
  • Stop the text wrap at particular point on the page

Linking to Websites & Email Addresses with HTML

The beauty of the web lies in the wealth of information available at the click of a mouse. Engaging websites exploit the plethora of information available on the Internet. Through code and practice, we illustrate how to make linkable text and clickable images. You will also learn a few tricks of the trade for adding tool-tips to links, how to alter the appearance of the links and how to use a link to launch an email application. After this session, you will be able to:

  • Make text on your page link to an existing website
  • Add a link to an image on your site
  • Display a tooltip that tells the visitor where the link goes
  • Launch a mail program from a link
  • Put a hyperlink into another window
  • Change the colors of the page hyperlinks

Creating a Website by Linking Your Files

Websites are a collection of files that have been linked together using hyperlinks. After creating a series of web pages for your class project, you will learn how to use hyperlinks to combine them into a website. In this part of the lesson, you will grasp the intricacies of linking to other web pages as well as different kinds of files like PDFs. In this lesson, we reveal how to:

  • Hyperlink from one page to another within a website
  • Create a set of links for full site navigation
  • Organize your files to make linking easier
  • Link to other file formats such as Word documents and PDFs
  • Reference files in other folders
  • Make long pages easier to manage with links to sections of the page

Web Design with CSS (Cascading Style Sheets)

HTML and CSS work hand in hand to construct and display accessible, searchable, and flexible web pages. If you follow the W3C's guidelines for HTML, CSS and accessibility, your web content will become more available to your audience, whether they are reading your page using a desktop browser, voice browser, or mobile phone. After this introductory lesson, you will be able to:

  • Determine the separate roles of HTML and CSS
  • Toggle a web page view to see it with or without its stylesheets
  • Avoid HTML techniques that hinder accessibility for disabled users
  • Insert CSS inside HTML
  • Specify color properties

Setting Styles for a Single Web Page

The power of CSS lies in its ability to define the default appearance of all page elements, without tagging them individually. Plus, CSS separates content from presentation to give you incredible flexibility over your designs. In this section of the CSS training, you will learn how to:

  • Craft an embedded stylesheet that controls the entire HTML document
  • Design a basic "rule" to set the color for all the paragraphs on the page
  • Define what a CSS "selector" is and how it works
  • Set the default colors for the document and its various headings
  • Add comments and notes to your stylesheet
  • Validate HTML and CSS formatting using online tools

Styles for an Entire Web Site

Although it is handy to be able to control page designs on an individual basis, multiple web pages in a site often share colors, type settings and even page designs. CSS offers site-wide design control with external stylesheets that several HTML files can reference. To explore the benefits of "global" stylesheets, we show you how to:

  • Create an external stylesheet for global site design and link to it from your HTML files
  • Specify whether the stylesheet should be used for screen, print or both
  • Define the preferred font for the various elements on your pages, and experiment with different font styles, such as italics, bold, and small caps

Text Formatting Techniques

Compelling websites use text in many creative ways - for navigation, links, paragraphs, headings, data, labels, lists, and more. In this CSS training section, you discover the power of CSS to make your site's text come alive. You will learn how to:

  • Define a default font size for the page that can be read easily in different browsers
  • Experiment with text spacing and alignment to achieve the look you want
  • Indent text according to traditional print style guidelines, if that's what you need to do
  • Determine the style of bulleted and numbered lists
  • Adding borders and background colors

Adding Design Effects to Images

In addition to offering flexibility with text, CSS allows you to explore the potential of images. Whether you want to stamp a watermark on the background of a web page or replace ordinary bullets with a particular icon, you can use images with CSS to maximum effect:

  • Choose a background image for your web page and position it in the document
  • Fix the background image so that it doesn't scroll with the rest of the page

Modifying Specific Items in the HTML

In the preceding exercises, we created global rules - that is, we defined the way all paragraphs appear or how all bulleted lists look. In the real world, there are always exceptions to the rule: one list that needs to be styled differently or a set of paragraphs that need to be separated from the rest. After this lesson, you will be able to:

  • Differentiate between identifiers (unique items) and classes (groups or families of items)
  • Give an element a unique identifier
  • Draft a rule that affects only members of a specific class, such as paragraphs of legal information
  • Control the appearance of an identified page element, such as a column of text

Putting Your Site on the Web/Publishing

A web page must be published to the Internet to be found. In the last lesson of the day, we discuss the ins and outs of website hosting. So that you can truly appreciate the process of publishing, we use a special application, known as an FTP program, to transfer our files onto a web server. You will get to put your class project on the web. Finish up your HTML training by learning how to:

  • Investigate different hosting options
  • Use an FTP application
  • Access a server and see where web documents reside
  • Upload your site to the server
  • Review your published website and share it with others


  • Able to copy and paste in a word processor
  • Ability to switch between open programs in a Mac or Windows operating system

HTML/CSS training is offered at four locations: