HTML Fundamentals

A web page is constructed from multiple parts and pieces, including content, images, and design information, and underlying these various components is an infrastructure comprised entirely of HTML. 

Mastering the Hypertext Markup Language gives you the framework needed to create rich websites that users repeatedly visit.

With hands-on exercises and class projects customized for you, this HTML training in Sacramento brings you up to speed on the latest, standards-compliant HTML used to create all manner of websites. You will gain the skills needed to:

• Understand what HTML is and is not, and how it relates to other web languages
• Find and choose the best tools for your web development workstation
• Create a web page using a text editor and HTML code
• Add page elements such as paragraphs and headings
• Emphasize or de-emphasize text using italics, bold and font sizes
• Verify that your code is error-free
• Distinguish between sections using a divider
• Insert special characters, like a copyright symbol
• Bullet or number a list of items
• Set colors for your web page
• Alter the alignment of text and images on the page
• Craft a multi-cell table with rows and columns
• Adjust an image for web page display and add different kinds of images to your website
• Link to websites and launch email applications with a link
• Link the pages of your website together
• Put your website on the Internet

Web developers and web design tools such as Dreamweaver employ the Hypertext Markup Language (HTML) to establish web pages. 

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 training class, you will acquire the fundamental skills needed to create pages using HTML. For site longevity and multi-browser compliance, we emphasize the industry's latest XHTML standard.

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 Picnik.com
• 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

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

Prerequisites:

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