HTML Training

How the Web Works -- illustration (Flash movie)

Our training begins with an overview of Web concepts and technologies, providing you with a solid foundation for subsequent lessons. In particular, 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
• the place for and purpose of CSS, PHP, ASP, XML, etc. in HTML

What Tools You Need

Next, we discuss the various tools the developer uses to create, publish and administer a website. Some of the topics we discuss are:

• the differences between a Text Editor (NotePad), an HTML Editor (TextPad, Homesite, BBedit), and a WYSIWYG Web Application (Dreamweaver, FrontPage, GoLive)
• the strengths, weakness and rapid evolution of contemporary web browsers
• the fundamentals of FTP applications (a more detailed discussion of FTP applications occurs later in the class)
• available graphics programs (we explore the programs in greater depth later in the class)

Displaying Text in the Browser

At this point, we introduce you to basic formatting techniques and cover "tagging" or "marking up" text so the browser knows how to display the document. We will show you how to:

• open the file in a web browser to see the interpretation of your code
• open an HTML file in a text editor for editing
• identify tags and understand their use in defining elements on the page
• clearly understand how formatting code affects the presentation within the browser
• create basic paragraphs
• make text bigger or smaller

Headings and Formatting Text

After we talk about adding text to your page, we discuss how to format the text to call attention to particular portions, or create headings for various segments of your page. We teach you to:

• create primary, secondary and tertiary headings in 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

After covering the basic function of HTML, we focus on the form of your code and how to provide the browser with useful information about your page. We cover how 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 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

Line Breaks, Rules and Special Characters

We then move on to cover the code necessary to add certain non-textual content to the screen: for example, line breaks, horizontal lines and special characters not 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
• inputting special symbols such as the symbol for “copyright,” or an arrow

Bulleted and Numbered Lists

Next we show you how to create bulleted and numbered lists. These are also known as unordered and ordered lists, respectively. We will teach you how to:

• define a bulleted list
• create a numbered list
• embed a list within another list

Setting Properties for Formatting Effects

Next, we explore a variety of modifications you can make to your content with HTML "attributes" - such as providing additional keywords or information about an element, creating tool-tip flyovers, and setting formatting styles. In this portion of the training course we teach you:

• about the title attribute and its effect on the browser and search engines
• how to specify text and background colors for the web page
• how to align text on the page
• how to change the bullet type or numbering sequence of lists

Images on the Web

After creating a basic website, we discuss ways to incorporate images. We use a simple, free graphics program to create some banners and icons and then we add them to your web pages. You will learn:

• what image formats, sizes and resolutions the Web supports and their advantages and disadvantages
• where to save your images in relation to your site
• the importance of sensible naming protocols for the image files
• how to include images in your HTML, both in-line and as a background
• how to enable or disable text wrapping around an image

Creating a Website using Links

After creating a series of webpages, we teach you the use of hyperlinks to combine them into a website allowing a visitor to expand a topic, launch an email, jump to a part of a page and generally navigate your site’s content. We teach you howto:

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

HTML Tables of Data

The final fundamental skill for effective data presentation is the implementation of HTML tables within your page. Here, we discuss

• inserting a multi-row, multi-column table of data
• 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

While an understanding of HTML is vital to creating sophisticated web pages, there are many tools to assist in the day to day maintenance and in some of the more tedious coding tasks. You will learn:

• what a WYSIWYG editor is used for
• how to create a table, hyperlinks and a navigation bar in a WYSIWYG editing tool such as Mozilla Composer

Putting Your Site on the Web

Finally, we discuss the use of a special application, known as an FTP program, to transfer our files onto a web server. In the conclusion of our fundamentals course 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 and share it with others

Prerequisites:

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

Related web design classes in San Francisco:

• HTML Advanced
• CSS Intro
• Dreamweaver Fundamentals
• Search Engine Optimiz.