Markup Basics - HTML Tutorial

This chapter, covers some of the basic HTML elements and attributes in a systematic way. Each section displays one or more short webpages, which we will alter several times to demonstrate how various elements work. Before proceeding, you should be comfortable with the idea of saving HTML to a file, altering it with a plain text editor, and viewing the results in your browser. If not, please read Chapter 1, Getting Started and work through the examples until you are comfortable with these concepts.

When you’re done with this section, you should be able to:

• create a document with headings, paragraphs, and line breaks
• change the text color and background color
• use physical styles and logical styles to change the appearance of your text
• display images and create links to other web pages
• understand more complex HTML elements that require nesting, such as lists

The Markup Basics chapter contains these sections:

Paragraph Breaks

Describes the paragraph element and the line break element, including a discussion of correct and incorrect usage.

Headings

Describes the heading elements. In this section, we’ll discover why it’s really important to close your open tags properly.

Font Styles

Explores elements that help control the font. We’ll touch on the difference between inline and block elements, and compare physical style elements versus logical style elements.

Colors

Explains how to change the background and foreground color of an entire page, a paragraph, or even a single word. We’ll see examples of color names and hex codes, and we’ll discuss which method is preferable.

Links

Breaks down a URL into its constituent parts, explains relative links versus absolute links, and provides examples of how to use IDs to link within pages.

Images

Describes what images are, how to embed them in a web page, how to stretch and squash them, and how to “float” them with respect to the other content on the page.

Lists

Describes ordered lists, unordered lists, and definition lists. This is our first example of elements that require nesting to function properly.