• 1.4: Creating an HTML File with Basic Text as Content

      • 1.4.1: Using HTML Paragraphs and Headings

        • HyperText Markup Language: "Paragraphs and Headings" URL

          This reading provides the syntax for the most basic tags in HTML; pay close attention to how these tags work, as other tags will follow much the same format.

          Using the information provided in the previous reading, the content you developed in subunit 1.2: Writing for the Web and the file "index.htm" you created in sub-subunit 1.3.1: What is Hypertext Markup Language?, develop a simple website with paragraphs and multiple levels of headings. Check your work to see what the unformatted site looks like with the default settings in your web browser.

      • 1.4.2: Essential HTML Document Anatomy

        • Leicester University: Richard Mobbs' "Introduction to HTML/XHTML: Structure of an HTML Document" URL

          Please pay attention to the cover page for this chapter, as well as the four sections on "Head of an HTML Document," "Body of an HTML Document," "Example of an HTML Document," and "Good Working Practices" found in the left-hand side of the window.

          Compare the parts of the HTML document described in this reading with the parts of your "index.htm;" if there are elements missing from your file, experiment with adding them. You should get in the habit of checking each change you make to "index.htm" with a web browser, so add one element at a time.

      • 1.4.3: The Essential Anatomy of an External CSS File

        • Cascading Style Sheets: "Syntax" URL

          This chapter demonstrates many intermediate uses of CSS that we will address in later Units. The key thing that it enables you to do is create your first stylesheet.

          Create a file called "mystylesheets.css" in the directory with "index.htm" and copy-and-paste the declaration and style rules from this chapter. This CSS file is not yet linked to your HTML file, so it will not change how your HTML file appears in the Web-browser. That is the next step.

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

        • Leicester University: Richard Mobbs' "Introduction to HTML/XHTML: Defining a Linked Style Sheet" URL

          This chapter provides you with the information about how you tell a web browser to format an HTML file with a specific CSS file. Without this, the browser will use default style sheets to display the HTML.

          Using the information in the above reading, you will need to link your "mystylesheets.css" to your "index.htm" example webpage. First, copy-and-paste the "link" declaration from this chapter between the and tags of "index.htm" (WARNING: make sure that your link declaration is not nested inside the and tags of the example webpage you created in conjunction with "1.4.2 The Essential Anatomy of an HTML file."). After saving "index.htm," take a look at your page using your web browser. The new style rules in "mystylesheets.css" should change the appearance of your page. NOTE: Don't bother with the style settings provided as examples in this chapter, as your simple "index.htm" file does not need the styles here. The styles already in your "mystylesheets.css" file should demonstrate how CSS can be used to modify your "index.htm" file. That said, there is no harm in experimenting - just be sure you keep backup copies of your files!