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.
Upon successful completion of this course, you will be able to:
- describe the function of Hypertext Markup Language (HTML) in Web communications;
- identify a Universal Resource Locator (URL) in a segment of HTML code;
- describe the basics of the Domain Name System (DNS) used on the Internet and private networks;
- describe the function of Cascading Style Sheets (CSS) in Web communications and describe the relationship between CSS and HTML;
- define the terms "presentational" and "semantic" mean in the context of HTML/CSS coding;
- describe the role played by hosting services on the Web;
- list three different variants of (X)HTML in wide use on the Web;
- describe how the widespread use of different web browsers can affect the decisions made by a web-master or the author of a site;
- identify software that can be used to create, maintain, or modify HTML and CSS;
- describe the uses of a Content Management System;
- create empty HTML and CSS files; and
- identify the parts of HTML and CSS files.
1.1: Introduction to Key Terminology: Behind-the-Scenes Web Technologies for Web Authors
1.1.1: Webpages, Websites, and Web Authoring
Several behind-the-scenes technologies must cooperate to deliver websites to users who type in a URL or click on a link. While a comprehensive understanding of these technologies is not necessary to build, maintain, or transform a simple website, the fundamentals are helpful as we move towards the skills of writing and editing HTML and CSS. In particular, correctly using terminology can help you successfully ask for help, whether in online forums or from coworkers, peers, mentors, or family members. Moreover, a basic understanding of these technologies may affect the decisions you make as you develop an example website, especially with respect to selection of an HTML standard, hosting your website, and coding for maximum browser compatibility.
This selection introduces fundamental key terms that many users of the Web will already understand. The distinction between web authoring, programming, and web design are important when talking with more experienced collaborators, or when seeking help on web forums. This selection concludes with questions and activities will help you think about what characteristics, features, or content elements you would like your practice website to demonstrate. Keep a record of your responses to these questions and activities.
1.1.2: Understanding Web Hosting and Domain Names
This selection introduces more fundamental concepts that many users of the Web will already understand. The first general chapter titled "The Web" includes a rather theoretical discussion of "Publishing Webpages" that may be skipped. Also note that the chapter on the Domain Name System is quite technical and only the main idea needs to be understood. The chapter on Web Hosting establishes a fundamental understanding of how we move from functioning HTML and CSS files on our home computers to a functioning site on the Web. This topic will be addressed in more detail in the last unit, but a fundamental understanding of how these technologies work together to create the Web experience will be helpful background as you move through later lessons.
1.1.3: Understanding URLs
Identifying URLs in existing HTML files will be an essential skill as you look at HTML source code. Additionally, without a firm understanding of how the naming scheme for specifying files works on the Web, it will be impossible to link CSS files, images, or other external data to your HTML documents.
1.1.4: Development Environments and Content Management Systems
In the contemporary workplace, use of development environments like Dreamweaver has become commonplace. While this software can make some complicated tasks easy, it is best to learn how to directly manipulate the underlying code, as some tasks cannot be easily achieved using the graphical interface, including many common debugging, site maintenance, and custom design tasks. The use of Content Management Systems (CMS) with highly developed Graphic User Interfaces (GUI) tends to abstract the user away from code-level concerns; even so, knowing how to directly edit HTML and CSS is a crucial skill for the CMS user. This video introduces both development environments and content management systems at a beginner's level. This unit is not a substitute for taking a class or following an online tutorial on the specific setup or software you will be using.
1.1.5: (X)HTML Variants in Widespread Use
At this moment, the Web is undergoing a significant transition from serving web documents using HTML4-based markup toward HTML5. Mark Pilgrim's book advocates for the use of cutting edge HTML5 technologies, and in this chapter he gives a brief history of how HTML4, XHTML, and HTML5 came into being from the standpoint of an insider. For the purposes of this course, we will be primarily learning the HTML4 standard, but we will occasionally look at HTML5 alternatives. Many of the features of HTML5 that distinguish it from HTML4 are useful for kinds of functionality that are outside of the scope of an Introduction to HTML and CSS; for further information, consider reading Pilgrim's book after completing this course.
1.1.6: Browser Compatibility
In the past, different web browsers could not be relied on to display code in exactly the same ways. While this problem is much less of an issue today, there are certain features available on some browsers that are not available on others. Perhaps more importantly, different browsers have implemented the emerging HTML5 and CSS3 standards in different ways. While a complete account of these different implementations is beyond the scope of an introductory course in HTML and CSS, learning the fundamentals of browser compatibility may save the beginner some frustration.
1.2: Writing for the Web
The introduction to this chapter refers to coding skills you will develop in coming units. The important concepts to take away from this reading are the guidelines that writers for the Web must follow to successfully communicate to internet audiences.
Drawing on the guidelines for writing for the Web that you covered in subunit 1.2, use a plain-text editor to compose several paragraphs, headings, and lists that you would like to use in your example website. As you develop this content, you will want to refer to the activities and questions you answered in sub-subunit 1.1.1: Webpages, Websites, and Web Authoring.
1.3: The Functions of HTML and CSS
1.3.1: What is Hypertext Markup Language?
HTML and CSS are core technologies through which information encoded in a way that can be understood by web browsers. They have distinct functions that should be respected for maximum portability, clarity, and easiest maintenance.
This chapter describes the function of HTML as a means to deliver information over the Web. In this introduction, no clear distinction is made between the semantic function of HTML and the presentational function of CSS. You will be learning more about this in sub-subunit 1.3.2 What are Cascading Style Sheets (CSS)? For now, just keep in mind that this is because some websites - especially those that are very old, or those managed by certain content management systems - rely on HTML to markup both semantic content (that is: what content means) and presentational content (that is: how specific content should be displayed). In the best-practice coding that we will be practicing, we will abstract as much presentational information out of HTML files by putting them into external CSS files.
This chapter includes your first hands-on experience with HTML code. You should make sure that you take time to copy-and-paste the example code into your editor, create your first HTML file ("index.htm") in a directory that you can keep track of (for instance, a folder called "PRDV251" on your desktop or in your "Documents" folder), and try opening it with your browser. To prepare yourself for learning about CSS in the next subunit, please note that this introduction does not distinguish between the semantic role of HTML and the presentational role of CSS.
Before viewing the video, be sure to download the associated lab materials. These lab materials will provide a good reference as you create simple websites. You will be using them in future units, so save them in an easily accessible location on your computer. The video addresses the different uses of HTML, CSS, and JavaScript, providing some background on how these technologies were developed to work together to create the contemporary web experience. The most important concept introduced here is "graceful degradation" - that is, planned failure of different features or parts of a website.
1.3.2: What are Cascading Style Sheets (CSS)?
This chapter describes the function of CSS as a means to deliver instructions for presenting HTML files. Pay close attention to the comments about the benefits of abstracting presentational information into a CSS file while leaving the actual "content" in an HTML file.
This website demonstrates the difference between Presentational Markup and Semantic Markup. Here, the "content" is semantically marked up in an HTML file that is consistent for all possible style sheets, but each style sheet specifies a dramatically different way of presenting this information. Try a variety of different style sheets and begin to think about how you would like your example website to look, once you have developed the skills to manipulate its appearance. As you develop your example website, you may want to return to this web resource to harvest ideas for your own design.
1.3.3: Applying CSS to HTML
This chapter describes three different ways that CSS can be used with HTML. Keep these questions in mind: Which of these methods abstracts presentational markup from content to the greatest degree? Why is this an advantage? Note that inline presentational markup is required by some content management systems, while others provide a place to edit linked cascading style sheets. When given the option, it is always best to modify the presentation of an HTML file using external linked CSS. For the purposes of the stand-alone site you will develop in conjunction with this course, you will use external style sheets.
1.4: Creating an HTML File with Basic Text as Content
1.4.1: Using HTML Paragraphs and Headings
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
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!
Unit 1 Assessment
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.