• Unit 1: HTML and CSS Prerequisite Overview

    JavaScript works with HTML to display dynamic and interactive web pages. This unit briefly introduces the Hypertext Markup Language (HTML5) and Cascading Style Sheets (CSS). It is not intended as an entire HTML5/CSS course but provides some of the concepts necessary to work in Introduction to JavaScript I. The HTML sections cover the structure of an HTML5 document, headings, elements, tags, and attributes. Next, read the Cascading Style Sheet (CSS) areas to learn how to add styling (such as colors, font size, and backgrounds). You can skip these sections if you are familiar with these concepts.

    Completing this unit should take you approximately 3 hours.

    • Upon successful completion of this unit, you will be able to:

      • identify types of HTML5 tags and attributes in a document;
      • explain how CSS is used in HTML5;
      • illustrate the use of CSS rules; and
      • create a simple webpage using HTML and CSS.

    • 1.1: Introduction to HTML

      • HTML Basics Book

        The Hypertext Markup Language (HTML), developed in the 1990s, is a language for transmitting global hypertext documents. HTML is a "markup language" that defines the structure of a document using information such as tags and text. A web browser reads this information and displays a webpage. In this article, we look at a brief introduction to HTML. Then, we will focus on the structure of an HTML document, mandatory and optional tags, and attributes. As you read these sections, pay attention to the rules for writing HTML. For example, an HTML5 document must contain four basic tags enclosed in open "<" and closed ">" brackets.

      • Practice: HTML Text Fundamentals Book

        This article continues our discussion on writing HTML and describes how to structure a webpage. Start by downloading and viewing the unstructured Quick Hummus Recipe. Then, use the Active Learning sections to learn how to structure the document using interactive examples. 

        You will see that there are several reasons why the structure of a webpage is essential, including use by screen readers and locating pages using a search engine. The complete solution is located here.

      • Working with Files: Folder Structure and Naming Conventions Page

        This article gives a good overview of best practices for organizing this information on your computer, server, or an online repository such as GitHub. After reading this article, consider the following questions:

        • How should folders be named?
        • What is the purpose of an index.html file?
        • What is the purpose of a file path?
        • Why should filenames be written with no spaces and with words separated by hyphens?

      • Example in Action: Working with Basic HTML Page

        This video demonstrates how to develop a simple webpage using an editor and view the page in a browser. This demonstration uses the Atom code editor and creates a file named index.html. You should see the following nesting of tags in creating this document: <html><head><meta><title><body>. After watching this video, consider the following questions:

        • How is the <meta> tag used?
        • What tag is used to display text in the browser?

      • Practice Review: Creating a Simple Webpage Book

        Try this practice exercise to see how well you understood this unit. 

        Read this article to review the concepts of elements, tags, links, and images. Then, follow the instructions to create an idex.html webpage.

        You can copy the HTML code for each section and paste it into Notepad (Windows), TextEdit (Mac), or an editor of your choice. Be sure to create a folder structure on your computer modeling the Working with Files section, and you can use your own image. 

        Your completed index.html file contains:

        • a document header;
        • an image tag;
        • heading tags;
        • a list; and
        • a link.

        This exercise does not count towards your grade. It is just for practice!

        Make sure you complete all parts of this example before you continue to the next section, "Introduction to CSS".

    • 1.2: Introduction to CSS

      • What is CSS? Book

        Ever wonder how web pages have a specific look and feel with color, fonts, and layout? These features are part of the Cascading Stylesheet (CSS) language. It provides for the separation of the data in HTML from the styling of the data. Thus, developers can define the look of a webpage separately from the text it contains.

        There are three ways to write CSS:

        • Inline CSS: HTML element is styled;
        • Embedded CSS: CSS rules are located in an HTML file; and
        • External CSS: CSS is located in an external file. This makes the CSS code easy to maintain and reusable.

        We'll look at each type in the following sections.

      • Getting Started with CSS Rules Book

        In the HTML section, you created an "index.html" file that contained an image and list. This article explains how to add CSS to that document. You will define styles for the <h1>, <p>, and <li> elements. This example uses embedded CSS rules in an external .css file. This method is efficient for styling several documents.

      • Example in Action: Working with Inline CSS Page

        In the previous example, the CSS used rules to define the styling for elements. This video demonstrates how to use "inline" CSS applied to individual elements in an HTML document. Here, the CSS code uses a "style" attribute on each element. The use of inline CSS, while regularly used in HTML, is not efficient because of the styling of each element.

      • Practice: Develop a Webpage Using HTML and CSS Book

        Now it's time to practice developing a small webpage using HTML and CSS. In this example, you'll create a biography webpage using font, color, and text-decoration styles. Watch what happens to the biography text by changing the style.

        You can also try this example using an editor and a web browser. The HTML file to start this exercise can be found at this link.

    • Study Session Review Video

    • Unit 1 Assessment

      • Unit 1 Assessment Quiz
        Receive a grade

        Take this assessment to see how well you understood this unit.

        • This assessment does not count towards your grade. It is just for practice!
        • You will see the correct answers when you submit your answers. Use this to help you study for the final exam!
        • You can take this assessment as many times as you want, whenever you want.