HTML and CSS Essentials
Learn to create standards compliant sites using HTML5 and CSS3
Today's professional-standard Web sites are designed using HTML in conjunction with CSS.
Sound challenging? Fear not, because learning to write code for the Web has never been easier or more fun. In this six-lesson course, you'll learn to create Web sites—using HTML to mark up the structure of the document, and CSS to dictate how each page element should look. You will also learn to expand on the basics with cutting-edge HTML5 and CSS3.
Course lessons are packed with hands-on examples that help you gain skills and confidence step-by-step. You'll begin by mastering the basics of HTML markup and how to structure HTML5 pages. You'll also learn how to create HTML tables and add multimedia with HTML5. Then you'll learn to translate your page structure into visual designs that use CSS for typography and positioning. The course wraps up with a look at Web forms, CSS-based navigation, and special CSS3 visual effects.
This course is designed to provide a foundation in Web standards, the set of "best practices" established by the World Wide Web Consortium, among other organizations that set the standards for Web development. A site that adheres to Web standards makes use of certain designated markup, presentation, and scripting languages (like HTML, CSS, and JavaScript). Learning Web standards helps you build sites that are more accessible, usable, and cross-browser compatible, as well as simpler to build and maintain!
Tuition: $900 US
Course Instructor(s):
Requirements:
- Computer with Internet connection (56 Kbps modem or faster).
- An account with an ad-free Web hosting service (free services are available and listed in the course). An ad-free Web space allows students to upload assignments without interference from forced ads like popups or banners.
Course Objectives:
- Create valid HTML and HTML5 pages, structuring page content semantically, adding links, and embedding images.
- Organize Web site files and FTP them to the Web.
- Create HTML data tables and customize them by modifying rows, columns, dimensions, spacing, borders, and background.
- Add audio and video to Web pages using HTML5 audio and video tags.
- Effectively test, troubleshoot, and validate Web pages, and apply fixes for cross-browser compatibility.
- Apply CSS styles to an HTML document through inline CSS, internal style sheet, or external style sheet.
- Apply CSS rules to specific content in an HTML document using classes, IDs, divs, and spans.
- Set and manipulate the typography on a Web page: fonts, colors, weights, styles, variants, decorations, and spacing.
- Style lists, links, and box-level elements on a Web page.
- Create fixed and fluid column layouts using relative positioning, absolute positioning, and floats.
- Create a basic HTML form containing text fields, radio buttons, checkboxes, menus, and input buttons.
- Apply special visual effects to page elements using CSS3.
- Create horizontal and vertical list-based navigation in CSS.
Course Outline
LESSON 1 Intro to HTML and CSS
Lesson One launches the course with an overview of Web development today. To help you understand today's technical environment, you'll explore the differences between HTML 4 and HTML5 current standards, and examine the benefits of writing standards-compliant code. To get your feet wet, you'll learn how to create a valid HTML page, write basic HTML tags, and structure content on a page. Next, you'll explore how to add hyperlinks and insert images to HTML documents. To prepare for the assignment, you'll also learn how to organize Web site files and FTP them to the Web.
LESSON 2 Building HTML Tables and Introducing HTML5
HTML tables have a storied history on the Web. While their proper function is to display tabular data, designers since the early 1990s have been "hacking tables" for layout. Lesson Two shows you the right way to use tables and all of the important tags that go with it. You'll learn how to structure an HTML table and customize it by modifying rows, columns, dimensions, spacing, borders, and backgrounds. From there, you will begin an exploration of up-and-coming HTML5 code, specifically how it is used to create an efficient and easy-to-code page structure. In the exercise, you'll create a calendar that combines data tables with HTML5 page structure.
LESSON 3 HTML5 Multimedia and Troubleshooting
Lesson Three steps up your HTML5 knowledge by introducing its audio and video tags. With these, you'll learn how to insert audio and video files onto your Web pages and create user controls. Then, to make sure your pages are both technically and functionally accurate, you'll learn guidelines for testing and validating Web pages, as well as how to fix broken links and images. In the exercise, you'll create a technically valid HTML5 page that includes multimedia.
LESSON 4 Formatting Text with CSS
Lesson Four shifts the focus to Cascading Style Sheets (CSS). First, you'll learn three ways to associate CSS rules with an HTML document: inline, by internal style sheet, and by external style sheet. Then you'll examine the basic structure of CSS code and the rules for applying it to specific parts of an HTML document. Next, you'll explore the fundamentals of setting and manipulating typography on a Web page, from basic text to lists and links. The lesson concludes with a look at how to style page sections using borders, padding, and margins. You'll practice all of these skills in the exercise.
LESSON 5 Page Layout with CSS
Lesson Five explores exciting contemporary uses of CSS for layout and positioning. You'll learn how to position block-level elements relatively or absolutely on the page and you'll explore how to control the visibility, clipping, and overflow of page objects. Essential guidelines for creating fixed and fluid column-based layouts are provided, as well as troubleshooting tips for CSS positioning. You'll create a complete layout and precise positioning in the exercise.
LESSON 6 Extending HTML and CSS
Your Web design and development career does not end with learning HTML and CSS. Most large-scale Web design projects today require page designers to integrate interactivity into their work. This lesson will give you an understanding of how HTML page functionality can be extended with the addition of forms and CSS-based navigation enhancements. You will also learn special effects using CSS3, including created rounded corners and drop shadows without graphics. For your final exercise, you'll create your own mini Web site complete with HTML5 and CSS3 features.
HTML Web site by student Nadine Herman
Contact us | 800-258-4115 