HTML and CSS Combo Course

Note: For additional questions and clarification, you may reach Bill Ramirez at bill@dynamicsedge.com or on his following contact details: Office- (510) 804-3600 & Cell- (415) 200-6969

COURSE OVERVIEW:

HTML (Hypertext Markup Language) and CSS (Cascading Style Sheet) lay the groundwork for every kind of website. Learn the skills and techniques that employers rely upon of their web developers to edit content, add new pages, and enhance website navigability.

PREREQUISITES:

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

AGENDA TOPICS:

SECTION ONE: HTML

Unit 1- HTML: Text Editor and 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

Unit 2- HTML Understanding 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

Unit 3- HTML Titles, Versions 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

Unit 4- Line Breaks, Special Characters, and Horizontal Separators

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

Unit 5- Bulleted & Numbered Lists

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

Unit 6- Customize 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

Unit 7- Display 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

Unit 8- Create & Modify 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 com
• Save your images with comprehensible file names in relation to the other files in your website

Unit 9- Embed 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

Unit 10- Link to Web sites & Email Addresses using 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

Unit 11- Create a Web site 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

SECTION TWO – CASCADING STYLE SHEETS (CSS)

• 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

Unit 12- Set up 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

Unit 13- Create 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

Unit 14- Text Formatting Practices

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

Unit 15- Add Design Effects to your 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

Unit 16- Modify 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

Unit 17- Publish Your Site

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