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.
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.
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.
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:
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:
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:
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".
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:
We'll look at each type in the following sections.
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.
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.
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.
Take this assessment to see how well you understood this unit.