HTML Training

How the Web Works -- illustration (Flash movie)

The first portion of the class lays the foundation for greater comprehension and skill development. We review:

• the history of the World Wide Web
• the relationship between the browser, the ISP and the Web
• what "http://" and "ftp://" mean
• how HTML works and who defines it
• the difference between XHTML and HTML
• how all of the other acronyms fit in (CSS, PHP, ASP, XML, etc.)

What Tools You Need

Next, the training addresses the various tools necessary (and available) to create a website. Subjects considered:

• the differences between a Text Editor (NotePad), an HTML Editor (TextPad, Homesite, BBedit), and a WYSIWYG Web Application (Dreamweaver, FrontPage, GoLive)
• the strengths and weakness of contemporary web browsers and how browsing environments are rapidly changing
• a cursory look at FTP programs (discussion continued during FTP segment)
• a brief overview of available graphics programs (discussion is continued during web graphics segment)

Displaying Text in the Browser

Our first forays into HTML coding introduce you to basic formatting techniques while illustrating "tagging" or "marking up" text so the browser knows how to display the document. After this section, you will be comfortable:

• opening the file in a web browser to see the code interpreted
• opening an HTML file in a text editor for editing
• knowing what tags are and how they are used to define elements on the page
• clarifying how the formatting the code affects the presentation in the browser
• creating basic paragraphs
• making text bigger or smaller

Headings and Formatting Text

Not all content on the page is paragraph text. Sometimes content is a title or a header, sometimes it simply needs to be emphasized, bolded or italicized to draw attention to it. We discuss the types of content you can define using HTML and their differences. After this lesson, you will be able to :

• create a primary heading for the page
• create secondary and tertiary headings for different parts of the web page
• apply simple text formatting (bold & italics)
• nest elements or apply multiple types of formatting to a single piece of text

HTML Versions, Titles and Proper HTML Grammar

In the first forays with HTML, we focus on getting a feel for what HTML can do, but we rely heavily upon the browser to translate what we are saying. In the next exercises we will learn how to provide the browser with useful information and to write code that is syntactically proper. After this exercise, you will be able to :

• change the title bar for the browser window
• specify which version of HTML you are using
• set up the basic structure of a web document
• put comments and notes to yourself in the code that do not display on the page
• use a template that you will create to build new HTML documents

Line Breaks, Rules and Special Characters

In this exercise we introduce the HTML code necessary for adding certain text-free content to the screen. Examples include line breaks, horizontal lines and special characters that doesn't exist on the keyboard. You will learn about :

• empty elements - or elements that don't have text content
• creating basic line breaks and how that differers from adding paragraphs
• inserting horizontal rules
• including special symbols for copyright and other charcters that don't exist on the keyboard

Bulleted and Numbered Lists

Although paragraphs and headings are the primary way to dispay text content, occassionally, it is important to emphasize a list of things. Lists typically come in two formats - ordered or unordered, that is, numbered or bulleted. We will examine these elements in HTML and explore creating them. After this lesson you will be adept at:

• defining a bulleted lists
• creating a numbered lists
• embedding a list within another list item

Setting Properties for Formatting Effects

After adding some content and covering the basic types of text elements, we discuss HTML attributes. Attributes can be used to provide additional keywords or information about an element, can set various properties, can create tool-tip flyovers and can set styles. We explore a variety of modifications you can make to your content through attributes. This portion of the training course will teach you:

• about the title attribute and its effect in the browser and search engines
• how to specify a text color and a background color for the web page
• aligning text on the page
• changing the bullet type or numbering sequence for lists

Images on the Web

Once we've created a basic website, we discuss ways to incorporate images. In a series of exercises we will both create images for our website as well as modify existing images for the website. We will include the images on the HTML pages. You will learn:

• what image formats the Web supports
• advantages and disadvantages of the various formats
• where to save your images in relation to your site
• about the use of sensible file names for the images
• about the size and resolution of images for the web
• how to include images in your HTML
• how to wrap text around an image in the text
• how to stop text wrapping around an image
• adding horizontal rules (lines) to your page to separate content sections
• how to use an image as a background

Creating a Website using Links

A website is nothing more than a collection of web pages that have been linked together for the convenience of the visitor. Hyperlinks allow a visitor to expand a topic, to launch an email, to jump to a part of a page and to generally navigate the content of the entire website. We discuss a myriad of hyperlinking techniques. After these exercises, you will be able to:

• link to existing external websites
• link pages within the same site together
• make an image link
• launch an email application program from a link
• link to a part of the page
• confidently organize your web pages for linking ease

HTML Tables of Data

Sometimes the content that you want to display needs to be presented as a table of data. In this exercise we will discuss the history of HTML tables and how to implement them in your document. You will:

• insert a multi-row, multi-column table of data
• learn about the different types of cells - for headings and data
• how to put a border on your table
• how to change the background color of a cell, row or an entire table
• how to change the alignment of a cell or of a row of cells

Tools that Will Write Your HTML for You

Understanding the foundation language of the web (HTML) is vital for creating web pages, but there are many tools that can assist in the day to day maintenance of web page and in some of the more tedious coding tasks. We will take a few moments to examine how a tool like Dreamweaver can help create tables and hyperlinks. After this training course you will know :

• what a WYSIWYG editor is used for
• how to create a table in a WYSIWYG tool like Mozilla Composer
• how to create hyperlinks between documents
• how to create a navigation bar at the top of your documents

Putting Your Site on the Web

Upon the creation of a small website, we use a special application (an FTP program) to transfer our files onto a web server. You will:

• learn about File Transfer Protocol (FTP) and how to use an FTP application
• access a server and see where web documents reside
• place your files on the server so they may be accessed from the Web
• review your published website

Prerequisites:

• Familiarity with PCs and Windows or Mac Operating Systems
• Familiarity with right-clicking
• Able to copy and paste in a word processor
• Ability to switch between open programs
• Ability to use the Windows "explore" feature to view the files contained in a folder

keywords: html course san francisco bay area (HTML Advanced), css classes san francisco bay area (CSS Advanced)