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.