Topic outline

  • Course Introduction

    This course provides students with an introduction to the core technologies used to communicate information on the Web: Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS). Whether managing an employer's website, producing an online resume, or starting a web-based business, knowing the fundamentals of how information is structured and presented on the internet is a crucial skill for the contemporary workplace.

    Today, many technologies exist to facilitate the creation and management of websites, including development environments like Adobe Dreamweaver and Content Management Systems like WordPress and Joomla! Even though mastery of the basics of HTML and CSS is easily attainable, these labor-saving technologies have discouraged many professionals from learning crucial coding skills. With a basic understanding of how HTML code is created and transformed, professionals are better able to produce or transform websites according to precise specifications, whether they use a fully-featured development environment, a Content Management System, or write code from the ground-up using a simple text editor.

    Moreover, these skills enable professionals to troubleshoot minor problems and to intelligently communicate with clients, collaborators, Information Technology staff within a company, or outside contractors in order to maintain, modify, or produce complicated web-based projects.

  • Unit 1: Foundational Concepts for Writing HTML and CSS

    This unit will introduce basic concepts and skills needed to begin a website in HTML and CSS. It will develop a foundational vocabulary that will help you make sense of the course's resources and describe the problems that come up with any coding project. Over the course of this unit, you will also learn how to create files and start working with HTML and CSS.

    Completing this unit should take you approximately 5 hours.

  • 1.1.1: Webpages, Websites, and Web Authoring

  • 1.1.2: Understanding Web Hosting and Domain Names

  • 1.1.3: Understanding URLs

  • 1.1.4: Development Environments and Content Management Systems

  • 1.1.5: (X)HTML Variants in Widespread Use

  • 1.1.6: Browser Compatibility

  • 1.2: Writing for the Web

  • 1.3.1: What is Hypertext Markup Language?

  • 1.3.2: What are Cascading Style Sheets (CSS)?

  • 1.3.3: Applying CSS to HTML

  • 1.4.1: Using HTML Paragraphs and Headings

  • 1.4.2: Essential HTML Document Anatomy

  • 1.4.3: The Essential Anatomy of an External CSS File

  • 1.4.4: Linking an External CSS File to an HTML File

  • Unit 2: First Steps in HTML and CSS Coding

    In the second unit, we will begin to learn the syntax rules that enable us to read and write HTML and CSS files. This unit is divided into two subunits. The first subunit provides the core syntax rules needed to begin marking up text in HTML, while the second gives you the skills you need to start formatting text with CSS. Throughout this unit, you should attempt to incorporate new elements and techniques into your ongoing "index.htm" site and/or your "mystylesheets.css" file. Remember to keep backups every step of the way!

    Completing this unit should take you approximately 7 hours.

  • 2.1: Core Concepts in HTML Coding

  • 2.1.1: HTML Comments

  • 2.1.2: HTML Hyperlinks

  • 2.1.3: HTML Lists

  • 2.1.4: HTML Tables

  • 2.1.5: HTML Quotations

  • 2.2: Core Concepts in CSS Coding

  • 2.2.1: Comments in External CSS Files

  • 2.2.2: Basic Syntax for Styles in CSS

  • 2.2.3: Formatting Text Using CSS

  • 2.2.4: Inline Styles, Embedded CSS, and Externally Linked CSS

  • 2.2.5: CSS Selectors

  • 2.2.6: Cascading, Inheritance, and Conflicting Styles in CSS

  • Unit 3: Using HTML and CSS for Colors, Special Characters, Images, and Multimedia Content

    In this unit, we will learn syntax and establish guidelines for creating visually interesting websites. This unit is divided into five subunits. The first subunit addresses the use of color on the Web, and demonstrates how to incorporate colored text, backgrounds, and apply color to other website elements. This subunit also discusses special considerations that should affect color choice, but a full discussion of this topic should be pursued in the course of studying graphic design for the Web. The second subunit addresses the use of special characters like punctuation marks, accented letters, and special symbols on the Web. The third and fourth subunits discuss how to include images and video in HTML documents, and the final unit discusses how to format these media objects using CSS.

    Completing this unit should take you approximately 7 hours.

  • 3.1.1: Some Different Approaches to Specifying Color in HTML and CSS

  • 3.1.2: Selecting Colors Wisely for Web Publishing

  • 3.2: Special Characters in HTML Documents

  • 3.3: Putting Images on the Web using HTML

  • 3.4: Putting Video on the Web using HTML

  • 3.5.1: Background Colors and Images Using CSS

  • 3.5.2: The Element-Box Model in CSS

  • 3.5.3: Positioning and Sizing Elements using CSS

  • 3.5.4: Formatting Tables using CSS

  • 3.5.5: Formatting Lists using CSS

  • Unit 4: Organizing Content and Information for More Complex Websites using HTML and CSS

    Now that we have a strong foundation for creating simple single-page websites, we will learn how to develop websites with several parts accessed through a menu. This unit will address contemporary best-practices for creating sophisticated websites, new technologies on the horizon, and a deprecated technique that you may find in some legacy code.

    Completing this unit should take you approximately 6 hours.

  • 4.1: HTML's and Tags

  • 4.2: Using CSS to Format an HTML List as Navigation Bar

  • 4.3: Styling HTML Tags to Create Familiar Multi-Column Layouts

  • 4.4: New Tags in HTML5 Increase Semantic Specificity

  • Unit 5: Coordinating HTML/CSS-Based Websites with Other Web Technologies and Going Live with a New Website

    While we have already learned all of the basics of HTML and CSS and we are prepared to make sophisticated non-interactive sites, many familiar functions on the Web require the cooperation of HTML and other web technologies and techniques. For example, many websites use Server Side Includes, JavaScript, XML/XSLT, and/or PHP. When looking at existing code, references to, or snippets of, these non-HTML elements may be confusing, so it is important to know what to look for. Equally, when developing sites with interactive elements, learning the fundamentals of how HTML works with other web technologies will be essential.

    Given this, we will briefly address the function of these technologies with optional readings before wrapping up the course with a discussion of code validation and the basic techniques for going live with a new website.

    Completing this unit should take you approximately 4 hours.

  • 5.1: Server-Side vs. Client-Side Operations for the Simple Website

  • 5.1.1: Server-Side Includes

  • 5.1.2: PHP

  • 5.1.3: JavaScript

  • 5.1.4: XML/XSLT

  • 5.2: HTML Validation

  • 5.3.1: Registering a Domain for a New Website

  • 5.3.2: Obtaining Hosting for a New Website

  • 5.3.3: Submitting a New Website to Search Engines

  • 5.3.4: Search Engine Optimization