317 courses ePortfolio Forums Blog FAQ

HTML and CSS for Beginners

Purpose of Course  showclose

This course provides students with an introduction to the core technologies used to communicate information on the Web: Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS).  Whether managing an employer’s website, producing an online resume, or starting a web-based business, knowing the fundamentals of how information is structured and presented on the internet is a crucial skill for the contemporary workplace.

Today, many technologies exist to facilitate the creation and management of websites, including development environments like Adobe Dreamweaver and Content Management Systems like WordPress and Joomla!  Even though mastery of the basics of HTML and CSS is easily attainable, these labor-saving technologies have discouraged many professionals from learning crucial coding skills.  With a basic understanding of how HTML code is created and transformed, professionals are better able to produce or transform websites according to precise specifications, whether they use a fully-featured development environment, a Content Management System, or write code from the ground-up using a simple text editor.

Moreover, these skills enable professionals to troubleshoot minor problems and to intelligently communicate with clients, collaborators, Information Technology staff within a company, or outside contractors in order to maintain, modify, or produce complicated web-based projects.

Course Information  showclose

Welcome to HTML and CSS for Beginners.  General information on this course and its requirements can be found below.  This course is appropriate for beginners who are comfortable navigating the Internet, but want to learn to write or maintain websites for personal use or for a small business.

Primary Resources: This course will direct you to a range of different free, online materials that our consulting professors have carefully selected for you.

Requirements for Completion: In order to complete this course, you will need to work through each unit and all of its assigned materials.  You will need to look closely at provided code snippets and example lab materials and experiment with them using your browser and editor.  Finally, you will need to develop example code and an example website using the illustrated techniques to successfully complete the course.  Units 1-4 lay the groundwork for coding in HTML and CSS, while Unit 5 focuses on HTML and CSS as part of a great ecology of technologies underlying contemporary websites.
 
Please note that you will only receive an official grade on your Final Exam.  However, in order to adequately prepare for this exam and develop the skills required to create simple websites, you will need to work through the coding assignments and activities associated with readings.
In order to pass this course, you will need to earn a 70% or higher on the Final Exam.  Your score on the exam will be tabulated as soon as you complete it.  If you do not pass the exam, you may take it again.
 
Time Commitment: This course should take you approximately 30 hours to complete; however, the class will be most rewarding if you continue to develop the example website into a presentable part of your portfolio.  Since some websites require more complex designs than others and creating presentable websites can sometimes require a long process of modifications and revisions, this example website may take longer to complete than the course itself.  Each unit includes a “time advisory” that lists the amount of time you are expected to spend on each subunit.  It may be useful to take a look at these time advisories and determine how much time you have over the next few weeks to complete each unit and to then set goals for yourself.  Units are of variable length, between about 5 and 7 hours.  Different students will find learning to think through the markup process easy or difficult depending on temperament, experience, and environment; generally, however, it is best to break learning up in to smaller blocks of time, as the terminology and syntax can sometimes be overwhelming in study periods of more than two hours.  Perhaps you can sit down with your calendar and decide to complete subunit 1.1-1.1.6 (1.55 hours) on Monday night; subunit 1.2-1.3.3 (1.85 hours) on Tuesday night; subunits 1.4-1.4.4 (1.8 hours) on Wednesday night; etc.
 
Tips/Suggestions: There are many forums and tutorials online beyond those immediately linked in this course that can help you if you get stuck.  Keep in mind that for any given specified output, there may be several ways of coding HTML and CSS.  While the material at www.w3schools.com is often too schematic to learn HTML and CSS alone, the interactive “Try it Yourself” activities on that website can be invaluable if you get stuck or are having a hard time figuring out how something works.



Learning Outcomes  showclose

Upon successful completion of this course, the student will be able to:
  • Edit, modify, or transform existing HTML documents and CSS style sheets to produce specified outputs.
  • Correct syntax errors in HTML documents and CSS style sheets.
  • Simplify unnecessarily complex HTML or CSS code.
  • Write syntactically and stylistically correct HTML documents and CSS style sheets.
  • Explain why best coding practices demand the abstraction of presentational instructions from semantic information.
  • Identify the situations in which it is permissible to use deprecated or stylistically incorrect HTML code.
  • Identify and explain situations when HTML and CSS require supplemental technologies to perform specified tasks.
  • Recognize and identify Server Side Includes, JavaScript, and PHP in existing HTML documents.
  • Correctly define and use fundamental terms and concepts related to web development.

Course Requirements  showclose

In order to take this course, you must:

√    Have access to a computer.

√    Have continuous broadband Internet access.

√    Have the ability/permission to install plug-ins or software (e.g. Adobe Reader or Flash).

√    Have the ability to download and save files and documents to a computer.

√    Have the ability to open Microsoft files and documents (.doc, .ppt, .xls, etc.).

√    Have competency in the English language.

√    Have read the Saylor Student Handbook.

√    Have software capable of editing plain text-formatted files (e.g. Notepad, Textedit, Gedit, or Vim; NOTE: students may want to install free and open-source software with convenient features for editing and creating HTML and CSS files, e.g. BluefishNotepad X, or Notepad++).

Unit Outline show close


Expand All Resources Collapse All Resources
  • 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.

    Unit 1 Time Advisory   show close
    Unit 1 Learning Outcomes   show close
  • 1.1 Introduction to Key Terminology: Behind-the-Scenes Web Technologies for Web Authors  

    Note: 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.     

  • 1.1.1 Webpages, Websites, and Web Authoring  
    • Reading: WikiBooks’ Authoring Webpages: “Introduction”

      Link: WikiBooks’ Authoring Webpages“Introduction” (PDF)

      Instructions: 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.

      Reading this website and completing these exercises should take approximately 30 minutes.

      Terms of Use: The article above is released under a Creative Commons Attribution-Share-Alike License 3.0 (HTML).  You can find the original WikiBooks version of this article here (HTML).

  • 1.1.2 Understanding Web Hosting and Domain Names  
    • Reading: WikiBooks’ Internet Technologies: “The Web”, “Domain Names”, and “Web Hosting”

      Link: WikiBooks’ Internet Technologies: “The Web” (PDF), “Domain Names” (PDF), and “Web Hosting” (PDF)

      Instructions: 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.

      Reading these sections should take approximately 15 minutes.

      Terms of Use: The articles above are released under a Creative Commons Attribution-Share-Alike License 3.0 (HTML).  You can find the original WikiBooks versions of the articles here (HTML), here (HTML), and here (HTML).

  • 1.1.3 Understanding URLs  
    • Reading: Leicester University: Richard Mobbs’ Introduction to HTML/XHTML: “Uniform Resource Locator”

      Link: Leicester University: Richard Mobbs’ Introduction to HTML/XHTML“Uniform Resource Locator” (HTML)

      Instructions: 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.

      Reading this webpage should take approximately 15 minutes.

      Terms of Use: Please respect the copyright and terms of use displayed on the webpage above.

  • 1.1.4 Development Environments and Content Management Systems  
    • Reading: The Saylor Foundation’s “Development Environments and Content Management Systems for the Beginning HTML/CSS Student”

      Link: The Saylor Foundation’s “Development Environments and Content Management Systems for the Beginning HTML/CSS Student” (PDF)

      Instructions: 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.

      Read this article should take approximately 15 minutes.

  • 1.1.5 (X)HTML Variants in Widespread Use  
    • Reading: Mark Pilgrim’s Dive Into HTML5: “A Quite Biased History of HTML5”

      Link: Mark Pilgrim’s Dive Into HTML5: “A Quite Biased History of HTML5” (HTML)

      Instructions: 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.

      Reading this webpage should take approximately 30 minutes.

      Terms of Use: Please respect the copyright and terms of use displayed on the webpage above.

  • 1.1.6 Browser Compatibility  
  • 1.2 Writing for the Web  
  • 1.2.1 Pre-Writing for your Example Website  
    • Activity: The Saylor Foundation’s “Writing for the Web”

      Instructions: 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.

      Completing this activity should take approximately 30 minutes.

  • 1.3 The Functions of HTML and CSS  

    Note: 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.

  • 1.3.1 What is Hypertext Markup Language (HTML)?  
    • Reading: Leicester University: Richard Mobbs’ Introduction to HTML/XHTML: “What is HTML?”

      Link: Leicester University: Richard Mobbs’ Introduction to HTML/XHTML“What is HTML?” (HTML)

      Instructions: 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.

      Reading this webpage should take approximately 15 minutes.

      Terms of Use: Please respect the copyright and terms of use displayed on the webpage above.

    • Reading: WikiBooks’ HyperText Markup Language: “Introduction”

      Link: WikiBooks’ HyperText Markup Language: “Introduction” (PDF)

      Instructions: 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.

      Reading this material and completing the exercise should take approximately 15 minutes.

      Terms of Use: The article above is released under a Creative Commons Attribution-Share-Alike License 3.0 (HTML).  You can find the original WikiBooks version of this article here (HTML).

    • Web Media: YouTube: Google Code University’s HTML/CSS/Javascript from the Ground Up: “Introduction” and associated “Lab Materials”

      Link: YouTube: Google Code University’s HTML/CSS/Javascript from the Ground Up: “Introduction” (YouTube) and associated “Lab Materials” (HTML and ZIP)

      Instructions: Before viewing the video, be sure to download the associated lab materials (HTML and ZIP) associated with the Google Code University HTML, CSS and JavaScript from the Ground Up videos.  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.

      Watching this video should take approximately 15 minutes.

      Terms of Use: Please respect the copyright and terms of use displayed on the webpage above.

  • 1.3.2 What are Cascading Style Sheets (CSS)?  
    • Reading: WikiBooks’ Cascading Style Sheets: “Introduction”

      Link: WikiBooks’ Cascading Style Sheets“Introduction” (PDF)

      Instructions: 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.

      Reading this material should take approximately 15 minutes.

      Terms of Use: The article above is released under a Creative Commons Attribution-Share-Alike License 3.0 (HTML).  You can find the original WikiBooks version of this article here (HTML).

    • Web Media: “CSS Zen Garden”

      Link: “CSS Zen Garden” (HTML)

      Instructions: 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.

      Reading this website should take approximately 15 minutes.

      Terms of Use: Please respect the copyright and terms of use displayed on the webpage above.

  • 1.3.3 Applying CSS to HTML  
    • Reading: WikiBooks’ Cascading Style Sheets: “Applying CSS to HTML and XHTML”

      Link: WikiBooks’ Cascading Style Sheets: “Applying CSS to HTML and XHTML” (PDF)

      Instructions: 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.

      Reading this material should take approximately 15 minutes.

      Terms of Use: The article above is released under a Creative Commons Attribution-Share-Alike License 3.0 (HTML).  You can find the original WikiBooks version of this article here (HTML).

  • 1.4 Creating an HTML File with Basic Text as Content  
  • 1.4.1 Using HTML Paragraphs and Headings  
  • 1.4.2 Essential HTML document anatomy: and  
    • Reading: Leicester University: Richard Mobbs’ Introduction to HTML/XHTML: “Structure of an HTML Document”

      Link: Leicester University: Richard Mobbs’ Introduction to HTML/XHTML“Structure of an HTML Document” (HTML)

      Instructions: 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.

      Reading this material should take approximately 15 minutes.

      Terms of Use: Please respect the copyright and terms of use displayed on the webpage above.

    • Activity: The Saylor Foundation’s “HTML Headers”

      Instructions: 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.

      Completing this activity should take approximately 15 minutes.

  • 1.4.3 The Essential Anatomy of an External CSS File  
    • Reading: WikiBooks’ Cascading Style Sheets: “Syntax”

      Link: WikiBooks’ Cascading Style Sheets“Syntax” (PDF)

      Instructions: 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.

      Reading this material should take approximately 15 minutes.

      Terms of Use: The article above is released under a Creative Commons Attribution-Share-Alike License 3.0 (HTML).  You can find the original WikiBooks version of this article here (HTML).

    • Activity: The Saylor Foundation’s “Creating a CSS File”

      Instructions: 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.

      Completing this activity should take approximately 15 minutes.

  • 1.4.4 Linking an External CSS File to an HTML File  
    • Reading: Leicester University: Richard Mobbs’ Introduction to HTML/XHTML: “Defining a Linked Style Sheet”

      Link: Leicester University: Richard Mobbs’ Introduction to HTML/XHTML“Defining a Linked Style Sheet” (HTML)

      Instructions: 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.

      Reading this material should take approximately 15 minutes.

      Terms of Use: Please respect the copyright and terms of use displayed on the webpage above.

    • Activity: The Saylor Foundation’s “Linking a Style Sheet to an HTML File”

      Instructions: 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 <head> and </head> tags of “index.htm” (WARNING: make sure that your link declaration is not nested inside the <title> and </title> 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!

      Completing this activity should take approximately 30 minutes.

  • Unit 1 Assessment  
  • Unit 2: First Steps in HTML and CSS Coding  

    In the second unit, we will begin to learn the syntax rules that enable us to read and write HTML and CSS files.  This unit is divided into two subunits.  The first subunit provides the core syntax rules needed to begin marking up text in HTML, while the second gives you the skills you need to start formatting text with CSS.  Throughout this unit, you should attempt to incorporate new elements and techniques into your ongoing “index.htm” site and/or your “mystylesheets.css” file.  Remember to keep backups every step of the way!

    Unit 2 Time Advisory   show close
    Unit 2 Learning Outcomes   show close
  • 2.1 Core Concepts in HTML Coding  
  • 2.1.1 HTML Comments  
    • Reading: WikiBooks’ HyperText Markup Language: “Comments”

      Link: WikiBooks’ HyperText Markup Language: “Comments” (PDF)
       
      Instructions: Comments are a crucial part of well-written code.  They can document the function of different elements of a site, which can be invaluable as you are learning code and may be prone to forgetting what different parts of your file are for.  They also can be used to temporarily eliminate portions of your code that are not working correctly, which may be helpful as you troubleshoot problems.  Finally, in advanced coding, comments are used to communicate with other web technologies – you may not need to know this now, but if you find comments that look a lot like computer code elsewhere on the Web, it may prove useful.  Keep in mind however, that comments are delivered with the functioning code, so they are available to any curious user who looks at the source code for a website.
       
      Reading this material should take approximately 15 minutes.
       
      Terms of Use: The article above is released under a Creative Commons Attribution-Share-Alike License 3.0 (HTML).  You can find the original WikiBooks version of this article here (HTML).

  • 2.1.2 HTML Hyperlinks  
    • Reading: Leicester University: Richard Mobbs’ Introduction to HTML/XHTML: “Hyperlinks”

      Link: Leicester University: Richard Mobbs’ Introduction to HTML/XHTML“Hyperlinks” (HTML)

      Instructions: Hyperlinks are the characteristic innovation of the Web that allows you to click on portions of a webpage in order to automatically navigate to another webpage, another part of your website, or even an anchor within the page you are currently using.

      Reading this material should take approximately 15 minutes.

      Terms of Use: Please respect the copyright and terms of use displayed on the webpage above.

    • Activity: The Saylor Foundation’s “Using Hyperlinks”

      Instructions: Using the information from the above reading, try to include a link to a URL on the Web in your “index.htm” file.  Then, try creating a second *.htm file with different content than “index.htm” and link to that on your home computer.  Be sure to add comments describing the links you add.

      Completing this activity should take approximately 30 minutes.

  • 2.1.3 HTML Lists  
    • Reading: Leicester University: Richard Mobbs’ Introduction to HTML/XHTML: “Lists”

      Link: Leicester University: Richard Mobbs’ Introduction to HTML/XHTML“Lists” (HTML)

      Instructions: As you learned in subunit 1.3: Writing for the Web, users of the Internet tend to look for information very quickly and lists are a user-friendly way to make your information easy to find.  Additionally, lists are often used to organize the elements of a menu; since we will be returning to this special use of lists, don’t worry about it right now.

      Reading this material should take approximately 15 minutes.

      Terms of Use: Please respect the copyright and terms of use displayed on the webpage above.

    • Activity: The Saylor Foundation’s “Using HTML Lists”

      Instructions: Using the information in the previous reading and your pre-writing assignment, try to incorporate one or two types of informational lists into your example webpage.

      Completing this activity should take approximately 30 minutes.

  • 2.1.4 HTML Tables  
    • Reading: Leicester University: Richard Mobbs’ Introduction to HTML/XHTML: “Tables”

      Link: Leicester University: Richard Mobbs’ Introduction to HTML/XHTML“Tables” (HTML)

      Instructions: Tables are used on the Web in much the same way that they are used in word processing: to present tabular data.  This use-case is extremely helpful for users, as it makes information easy to locate and see.  In this chapter, Mobbs notes that tables can also be used to structure the elements of a webpage, since you can include images, paragraphs, and many other elements inside each cell.  Generally speaking, this is a use-case for tables that has been superseded by the use of CSS to position and organize content and should be avoided.  In conceptual terms, the reason for this is that using tables to organize content is effectively a use of HTML for presentational information – which is CSS’s job.  Instead, tables should be used for semantic information – that is, to designate a part of an HTML file as tabular data, rather than to specify how that data is presented.  That said, in some Content Management Systems, tables may be the only convenient way to organize content in an HTML file.  In these cases, using tables to organize content is fine.

      Reading this material should take approximately 15 minutes.

      Terms of Use: Please respect the copyright and terms of use displayed on the webpage above.

    • Reading: WikiBooks’ HyperText Markup Language: “Tables”

      Link: WikiBooks’ HyperText Markup Language“Tables” (PDF)

      Instructions: This chapter provides some additional syntax for tables that may be of use in situations where you must organize content using tables, rather than simply using them to present tabular data.  Again: this is not a recommended practice and has been superseded by the use of CSS to position and organize content, but is sometimes necessary when content management systems limit the abstraction of presentational from semantic content.

      Reading this material should take approximately 15 minutes.

      Terms of Use: The article above is released under a Creative Commons Attribution-Share-Alike License 3.0 (HTML).  You can find the original WikiBooks version of this article here (HTML).

    • Activity: The Saylor Foundation’s “Using HTML Tables”

      Instructions: Undertake the exercises suggested in the above article, then attempt to incorporate tabular data of some kind into your example “index.htm” webpage.

      Completing this exercise should take approximately 30 minutes.

  • 2.1.5 HTML Quotations  
  • 2.2 Core Concepts in CSS Coding  
  • 2.2.1 Comments in External CSS Files  
    • Reading: Leicester University: Richard Mobbs’ Introduction to HTML/XHTML: “Adding Comments to Your Style Sheet”

      Link: Leicester University: Richard Mobbs’ Introduction to HTML/XHTML“Adding Comments to Your Style Sheet” (HTML)

      Instructions: The use of comments in CSS is very similar to the use of comments in HTML.  However, as you will soon see, CSS for even a simple webpage takes requires a trained eye.  As you develop that eye, it will be very useful for you to use comments liberally: consider commenting every rule in your style sheet, indicating what you intend the rule to do, so that if you have surprising results you can compare what you intended to your actual output and try to pinpoint where you went wrong.

      Reading this material should take approximately 15 minutes.

      Terms of Use: Please respect the copyright and terms of use displayed on the webpage above.

  • 2.2.2 Basic Syntax for Styles in CSS  
    • Reading: WikiBooks’ Cascading Style Sheets: “Defining Style Rules”

      Link: WikiBooks’ Cascading Style Sheets: “Defining Style Rules” (PDF)

      Instructions: This short chapter spells out the syntax for style rules in CSS that you may have already deduced from the examples in the “Syntax” chapter of Cascading Style Sheetsread in sub-subunit 1.4.3: The Essential Anatomy of an External CSS File.

      Reading this material should take approximately 15 minutes.

      Terms of Use: The article above is released under a Creative Commons Attribution-Share-Alike License 3.0 (HTML).  You can find the original WikiBooks version of this article here (HTML).

    • Activity: The Saylor Foundation’s “Defining CSS Styles”

      Instructions: Based on what you have just read, take a look at your “mystylesheets.css” file and see if you can identify the different parts of each style and guess their function.  Consider experimenting with these styles to see if you can change how your “index.htm” file appears in the Web browser – but remember to keep back-up copies of your files!

      Completing this activity should take approximately 30 minutes.

  • 2.2.3 Formatting Text Using CSS  
  • 2.2.4 Inline Styles, Embedded CSS, and Externally Linked CSS  
    • Reading: Wikiversity’s Web Design: “Inline CSS”, “Embedded CSS”, and “External CSS”

      Link: Wikiversity’s Web Design“Inline CSS” (PDF), “Embedded CSS” (PDF), and “External CSS” (PDF)

      Instructions: We have already learned in sub-subunit: 1.3.3 Applying CSS to HTML that there are three different ways of applying styles to HTML.  While we have already created an example of “external” or “linked” CSS (which is generally the best practice for web coding), it is important for you to be able to distinguish between inline, embedded, and external use-cases of CSS.  This is particularly true if you are working with existing websites that may more than one of these techniques, or if you are using a content management system that prevents you from linking to external style sheets.  For the purposes of learning these different techniques, create a few copies of “index.htm” in different directories and try using the techniques you have learned in this unit to modify the presentation of your paragraphs and headings using each technique.  Also try using two or more of these techniques to modify the same version of your “index.htm” file – you will likely have unexpected results if your styles conflict.  Keep this in mind as you advance through the rest of this unit, as the reasons for this will become more clear as you come to understand the “cascading” nature of “cascading style sheets.”

      Reading this material should take approximately 15 minutes.

      Terms of Use: The article above are released under a Creative Commons Attribution-Share-Alike License 3.0 (HTML).  You can find the original Wikiversity version of these articles here (HTML), here (HTML), and here (HTML).

    • Activity: The Saylor Foundation’s “Fonts, Text, and Sizes in CSS”

      Instructions: For the purposes of learning these different techniques, create a few copies of “index.htm” in different directories and try using the techniques you have learned in this unit to modify the presentation of your paragraphs and headings using each technique.  Also try using two or more of these techniques to modify the same version of your “index.htm” file – you will likely have unexpected results if your styles conflict.  Keep this in mind as you advance through the rest of this unit, as the reasons for this will become more clear as you come to understand the “cascading” nature of “Cascading Style Sheets.”

      Completing this activity should take approximately 30 minutes.

  • 2.2.5 CSS Selectors  
    • Reading: WikiBooks’ Cascading Style Sheets: “Selectors”

      Link: WikiBooks’ Cascading Style Sheets: “Selectors” (PDF)

      Instructions: Selectors are the means through which a CSS file “selects” specific elements from an HTML file and then applies a specified style to those elements.  For example, if you want to apply a style to some, but not all paragraphs on your webpage, class selectors will allow you to do this; similarly, if you want to apply a style just one <h2> element on your webpage, id selectors will make this possible.  In this regard, selectors are the core technique that enables you to abstract presentational information into the CSS file while leaving semantic information in the HTML file.  NOTE: Since Internet Explorer 6 is extremely outdated at this point, you may choose to ignore the advice given in this chapter about incompatibilities with this browser; also don’t worry about discussion of XML or later versions of CSS that appear in this chapter, as these are not concepts you need to know to continue working with your example webpage.

      Reading this material should take approximately 15 minutes.

      Terms of Use: The article above is released under a Creative Commons Attribution-Share-Alike License 3.0 (HTML).  You can find the original WikiBooks version of this article here (HTML).

    • Activity: The Saylor Foundation’s “Using CSS Selectors”

      Instructions: Spend some time looking at the CSS file you have already created and experimenting with selectors to modify the presentation of your HTML file.  Remember that id and class selectors will only work if you specify the ids or classes in your “index.htm” file – go ahead and experiment with this using the examples in this chapter.

      Completing this activity should take approximately 30 minutes.

  • 2.2.6 Cascading, Inheritance, and Conflicting Styles in CSS  
    • Reading: WikiBooks’ Cascading Style Sheets: “The CSS Cascade”

      Link: WikiBooks’ Cascading Style Sheets: “The CSS Cascade” (PDF)

      Instructions: What does the “cascade” in “cascading style sheets” mean?  What happens if there is presentational markup in an HTML file and conflicting information in an external style sheet?  Though difficult, the concepts in this chapter are crucial for understanding how and when style rules are applied, especially when inline, embedded, and externally linked style rules are present in the same page or site.

      Reading this material should take approximately 15 minutes.

      Terms of Use: The article above is released under a Creative Commons Attribution-Share-Alike License 3.0 (HTML).  You can find the original WikiBooks version of this article here (HTML).

  • Unit 2 Assessment  
  • Unit 3: Using HTML and CSS for Colors, Special Characters, Images, and Multimedia Content  

    In this unit, we will learn syntax and establish guidelines for creating visually interesting websites.  This unit is divided into five subunits.  The first subunit addresses the use of color on the Web, and demonstrates how to incorporate colored text, backgrounds, and apply color to other website elements.  This subunit also discusses special considerations that should affect color choice, but a full discussion of this topic should be pursued in the course of studying graphic design for the Web.  The second subunit addresses the use of special characters like punctuation marks, accented letters, and special symbols on the Web.  The third and fourth subunits discuss how to include images and video in HTML documents, and the final unit discusses how to format these media objects using CSS.

    Unit 3 Time Advisory   show close
    Unit 3 Learning Outcomes   show close
  • 3.1 Colors on the Web  
  • 3.1.1 Some Different Approaches to Specifying Color in HTML and CSS  
    • Reading: WikiBooks’ Cascading Style Sheets: “Color”

      Link: WikiBooks’ Cascading Style Sheets: “Color” (PDF)

      Instructions: You have already encountered several examples of specifying color using CSS and/or HTML and are probably wondering how to figure out color specification on your own.  This chapter discusses the different ways that color is specified on the Web, providing examples that you can adapt for experimentation with your own example webpage.

      Reading this material should take approximately 15 minutes.

      Terms of Use: The article above is released under a Creative Commons Attribution-Share-Alike License 3.0 (HTML).  You can find the original WikiBooks version of this article here (HTML).

  • 3.1.2 Selecting Colors Wisely for Web Publishing  
    • Reading: “Color Scheme Designer”

      Link: “Color Scheme Designer” (HTML)

      Instructions: While designing color schemes for maximum readability is a topic best addressed in a graphic design-focused course on web design, Color Scheme Designer is a tool than can help you develop interesting and pleasing color schemes.  The tool can export these color schemes for use in HTML and CSS or it can be configured to specify the colors in HTML Hex codes, RGB color space, or other formats, depending on the color-naming conventions you are following after reading about Color in CSS.

      Exploring this website should take approximately 15 minutes.

      Terms of Use: Please respect the copyright and terms of use displayed on the webpage above.

    • Activity: The Saylor Foundation’s “Using CSS Selectors”

      Instructions: Like many web tools, Color Scheme Designer’s usefulness will become apparent only if you experiment with the features built into its relatively simple design.  Try to produce a few different pleasing color combinations and then apply them to elements of your example website using multiple, differently named external style sheets.

      Completing this activity should take approximately 30 minutes.

  • 3.2 Special Characters in HTML Documents  
  • 3.3 Putting Images on the Web using HTML  
    • Reading: Leicester University: Richard Mobbs’ Introduction to HTML/XHTML: “Including Pictures”

      Link: Leicester University: Richard Mobbs’ Introduction to HTML/XHTML“Including Pictures” (HTML)

      Instructions: Images are such a core part of the Web experience that we can hardly imagine a webpage without at least some illustrative or decorative photographs or illustrations.  Including images inline in a website is very easy.  Read all four pages under the “Including Pictures” heading on the Introduction to HTML/XHTML website.

      Reading this material should take approximately 15 minutes.

      Terms of Use: Please respect the copyright and terms of use displayed on the webpage above.

    • Activity: The Saylor Foundation’s “Including Images”

      Instructions: Move an image you would like to use on your website into your working directory.  Next, use the examples on this site to include this image in your example website.  Then, see if you can make that image into a hyperlink to a website elsewhere on the Web – or to a separate example page that you are developing.  Don’t worry too much about formatting it now, as you will learn to format it using CSS later.

      Completing this activity should take approximately 30 minutes.

    • Optional Reading: WikiBooks’ HyperText Markup Language: “Images”

      Link: WikiBooks’ HyperText Markup Language: “Images” (PDF)

      Instructions: This is an optional, supplementary reading that provides some extra information about images in websites.  If you have successfully included inline pictures in your example site, you are unlikely to need this reading, but if you are having problems, it may be of some use.

      Reading this material should take approximately 15 minutes.

      Terms of Use: The article above is released under a Creative Commons Attribution-Share-Alike License 3.0 (HTML).  You can find the original WikiBooks version of this article here (HTML).

  • 3.4 Putting Video on the Web using HTML  

    Note: Including video in can be a very complex process and generally is treated in more advanced classes that discuss technologies like Flash.  Even so, it is often the case that a simple website needs embedded video, so this course includes the following information to help you get started on including this feature in your websites.  Fortunately, the emerging HTML5 standard will make video significantly easier to manage.  If you do not intend to include video content on your site, you may skip this subunit.

    • Reading: Mark Pilgrim’s Dive Into HTML5: “Video on the Web”

      Link: Mark Pilgrim’s Dive Into HTML5: “Video on the Web” (HTML)

      Instructions: This article includes much of the nitty-gritty information about encoding, decoding, and playing video on the Web.  It also includes a thorough discussion of including video in an HTML file using the newer HTML5 standard, including a discussion of compatibility issues.  Since HTML5 has not yet been adopted by the entire web community, older techniques are discussed below.

      Reading this material should take approximately 15 minutes.

      Terms of Use: Please respect the copyright and terms of use displayed on the webpage above.

    • Reading: Wikiversity’s “Video Content on the Internet”

      Link: Wikiversity’s “Video Content on the Internet” (PDF)

      Instructions: This article introduces the concept of Flash video and points you towards both intermediate and advanced techniques for creating a Flash player on your site.

      Reading this material should take approximately 15 minutes.

      Terms of Use: The article above is released under a Creative Commons Attribution-Share-Alike License 3.0 (HTML).  You can find the original Wikiversity version of this article here (HTML).

    • Reading: Wikiversity’s Graphical Content and Multimedia: “HTML Tags for Video Embedding”

      Link: Wikiversity’s Graphical Content and Multimedia“HTML Tags for Video Embedding” (PDF and HTML)

      Instructions: This segment offers an example of how the “object” and “embed” tags can be used to embed a video in a website.  You will need to click through to external resources and tutorials to successfully make use of this example.

      Reading this material should take approximately 15 minutes.

      Terms of Use: The article above is released under a Creative Commons Attribution-Share-Alike License 3.0 (HTML).  This article is a modified version of an article of the same title originally found on Wikiversity.  The Saylor Foundation has reformatted the entry and has omitted several of the original sections.  You can find the original Wikiversity version of this article here (HTML).

  • 3.5 Using CSS for Graphical Formatting  
  • 3.5.1 Background Colors and Images Using CSS  
    • Reading: W3Schools’ “CSS Background”

      Link: W3Schools’ “CSS Background” (HTML)

      Instructions: Background properties in CSS allow you to specify colors or images as the backgrounds to create visual interest on a website.

      Reading this material should take approximately 15 minutes.

      Terms of Use: Please respect the copyright and terms of use displayed on the webpage above.

    • Activity: The Saylor Foundation’s “Background Properties”

      Instructions: Create a few style sheets with which to experiment with background properties.  Try applying colored backgrounds to elements of your HTML file.  Then, try applying images as backgrounds.

      Reading this material should take approximately 30 minutes.

  • 3.5.2 The Element-Box Model in CSS  
  • 3.5.3 Positioning and Sizing Elements using CSS  
    • Reading: Evan Goer’s Pocket HTML Tutorial: “Align and Indent”

      Link: Evan Goer’s Pocket HTML Tutorial: “Align and Indent” (HTML)

      Instructions: Goer’s Pocket HTML Tutorial provides a very clear explanation of some simple use cases for alignment and indentation using inline and embedded CSS.  Note that he uses the <div> tag, which we have not yet learned about.  Don’t worry: the techniques for indentation and alignment he provides are useful for all of the elements you have already learned!

      Reading this material should take approximately 15 minutes.

      Terms of Use: Please respect the copyright and terms of use displayed on the webpage above.

    • Reading: W3Schools’ “CSS Dimension Property”, “CSS Positioning”, “CSS Align Property”, and “CSS Float”

      Link: W3Schools’ “CSS Dimension Property” (HTML), “CSS Positioning” (HTML), “CSS Align Property” (HTML), and “CSS Float” (HTML)

      Instructions: Oftentimes, you will want to select where or what size on a page you want an element to display.  The CSS positioning properties allow you complete control over where elements appear.  Ultimately, we will use these properties to create sophisticated designs; for now, however, after experimenting with the interactive elements on these pages, try to use the CSS positioning properties to place images of different sizes in different places on your example webpage.  Make sure that you master the “float” properties so that you can wrap words around an image.

      Reading this material should take approximately 15 minutes.

      Terms of Use: Please respect the copyright and terms of use displayed on the webpage above.

    • Activity: The Saylor Foundation’s “Positioning and Sizing Images Using CSS”

      Instructions: Ultimately, we will use these properties to create sophisticated designs; for now, however, after experimenting with the interactive elements on the above pages, try to use the CSS positioning properties to place images of different sizes in different places on your example webpage.  Make sure that you master the “float” properties so that you can wrap words around an image.

      This resource should take approximately 1 hoursto complete.

  • 3.5.4 Formatting Tables using CSS  
    • Reading: W3Schools’ “CSS Styling Tables”

      Link: W3Schools’ “CSS Styling Tables” (HTML)

      Instructions: The default styles for tables often do not match with the graphical design specifications for a website.  Fortunately, CSS allows us to modify many of the graphical characteristics of tables.

      Reading this material should take approximately 15 minutes.

      Terms of Use: Please respect the copyright and terms of use displayed on the webpage above.

    • Activity: The Saylor Foundation’s “Styling Tables Using CSS”

      Instructions: Using you have already learned about the box model and the techniques demonstrated in this chapter, try applying CSS sizing and positioning styles to the tabular data in your example webpage.

      Reading this material should take approximately 30 minutes.

  • 3.5.5 Formatting Lists using CSS  
    • Reading: W3Schools’ “CSS Styling Lists”

      Link: W3Schools’ “CSS Styling Lists” (HTML)

      Instructions: The default styles for lists are often quite limiting; in order to develop lists that match your graphic design specifications, you will usually need to use CSS to change how the semantic content stored in HTML lists is displayed.  In the next unit, we will learn to use CSS to style special lists to create menus for multi-page websites.

      Reading this material should take approximately 15 minutes.

      Terms of Use: Please respect the copyright and terms of use displayed on the webpage above.

    • Activity: The Saylor Foundation’s “Styling Lists Using CSS”

      Instructions: Using you have already learned about the box model and the techniques demonstrated in the above chapter, try styling the lists in your example webpage.

      Reading this material should take approximately 30 minutes.

  • Unit 3 Assessment  
  • Unit 4: Organizing Content and Information for More Complex Websites using HTML and CSS  

    Now that we have a strong foundation for creating simple single-page websites, we will learn how to develop websites with several parts accessed through a menu.  This unit will address contemporary best-practices for creating sophisticated websites, new technologies on the horizon, and a deprecated technique that you may find in some legacy code. 

    Unit 4 Time Advisory   show close
    Unit 4 Learning Outcomes   show close
  • 4.1 HTML’s ?div? and ?span? Tags  
    • Reading: Evan Goer’s Pocket HTML Tutorial: “Div and Span”

      Link: Evan Goer’s Pocket HTML Tutorial: “Div and Span” (HTML)

      Instructions: The ?div? and ?span? tags are crucial to contemporary site design.  With “id” and “class” attributes, they allow the coder to specify different presentational qualities for the different parts of the Website.  For instance, it is common to have a ?div? for the banner, a ?div? for the body, a ?div? for side-navigation, and a ?div? for the footer.  Since you can specify different background, color, and font characteristics for each id using CSS selectors, it is easy to create familiar webpage layouts using these tools.

      Reading this material should take approximately 15 minutes.

      Terms of Use: Please respect the copyright and terms of use displayed on the webpage above.

  • 4.2 Using CSS to Format an HTML List as Navigation Bar  
    • Reading: W3Schools’ “CSS Navigation Bar”

      Link: W3Schools’ “CSS Navigation Bar” (HTML)

      Instructions: Navigation bars have become expected features on sophisticated modern websites.  Fortunately, with the skills you have already developed for manipulating the presentation of HTML lists using CSS, you are able to create a variety of navigation bar styles.

      Reading this material should take approximately 30 minutes.

      Terms of Use: Please respect the copyright and terms of use displayed on the webpage above.

  • 4.3 Styling HTML ?div? Tags to Create Familiar Multi-Column Layouts  
    • Reading: The Saylor Foundation’s “Multi-Column Layouts for the HTML4 and CSS Beginner”

      Link: The Saylor Foundation’s “Multi-Column Layouts for the HTML4 and CSS Beginner” (PDF)

      Instructions: This tutorial demonstrates how to use the ?div? tag with CSS to create a familiar multi-column layout.  You will use this tutorial to convert your simple example webpage into a sophisticated 3-column layout.  Please use the HTML and CSS files attached here as examples while you work through the reading.

      Reading this material should take approximately 30 minutes.

    • Reading: Wikiversity’s Web Design: “CSS Challenge 3” and “CSS Challenge 4”

      Link: Wikiversity’s Web Design“CSS Challenge 3” (PDF) and “CSS Challenge 4” (PDF)

      Instructions: These CSS Challenges provide example HTML code prepared for the common 2-column layouts found throughout the Web today.  They challenge you to produce CSS code that formats them.  In a sense, this is the culmination of all the skills you have learned so far, so return to this challenge frequently to test your skills.

      Reading this material should take approximately 1 hour.

      Terms of Use: The article above is released under a Creative Commons Attribution-Share-Alike License 3.0 (HTML).  The article is a modified version of an article of the same title originally found on Wikiversity.  The Saylor Foundation has reformatted the entry and has omitted several of the original sections  You can find the original Wikiversity  version of this article here (HTML).

    • Activity: The Saylor Foundation’s “Creating Multi-Column Layouts using HTML and CSS”

      Instructions: The examples provided in this sub-unit and the skills you have developed by working with the CSS Challenges from Wikiversity, now try to apply a 2-column or 3-column layout to your example website.  This will entail editing both your HTML and your CSS.  You might consider reusing some of the CSS code you developed for the CSS Challenges for this assignment – remember that modularity and reusability are two of the merits of abstracting presentational markup from semantic markup.  Refer back to the CSS Zen Gardenand the code examples from the Google Code University for ideas.  Work towards making an aesthetically pleasing and usable website from the materials you have already developed.  At this point, you have enough background information to hunt online resources for ideas, code snippets, and tutorials to help your realize virtually any design you can imagine.

      Completing this activity should take approximately 2 hours.

  • 4.4 New Tags in HTML5 Increase Semantic Specificity  
    • Reading: Mark Pilgrim’s Dive Into HTML5: “Semantics”

      Link: Mark Pilgrim’s Dive Into HTML5:  “Semantics” (HTML)

      Instructions: You will remember that the role of HTML is to store semantic content, while the role of CSS is to abstract presentational information from this content.  But, as you have probably observed, the ?div? tag does not tell us much about the content that it encapsulates and only provides semantic information about this content through the use of ids or classes.  Since this is somewhat against the spirit of abstracting presentational information from semantic content, the new HTML5 standard introduces some extra tags allow more semantically specific markup, often replacing the heavy reliance on the ?div? tag in the older HTML4 standard.  This optional chapter addresses these new tags.  Most readers can skim up to the heading “New Semantic Elements in HTML5,” but before using these new tags, it would be worth your time to read up on compatibility issues in HTML5 – which are addressed throughout Mark Pilgrim’s book.

      Reading this material should take approximately 1 hour.

      Terms of Use: Please respect the copyright and terms of use displayed on the webpage above.

    • Activity: The Saylor Foundation’s “Creating Multi-Column Layouts using HTML5 and CSS”

      Instructions: Drawing on the multi-column layout you created using ?div? tags and the HTML4 standard, try to “port” this website to the HTML5 standard using the information in Pilgrim’s chapter.

      Completing this activity should take approximately 30 minutes.

  • 4.5 A Deprecated Technique for Organizing HTML Content: Frames  
    • Optional Reading: WikiBooks’ HyperText Markup Language: “Frames”

      Link: WikiBooks’ HyperText Markup Language: “Frames” (PDF)

      Instructions: This is an optional, supplementary reading that provides some extra information about an old technique for dividing content on webpages.  This technique will not work with some modern browsers, is incompatible with the HTML4 standard, and should generally be avoided.  Even so, if you are working on an older website or looking a code from a legacy site for educational purposes, you may discover this once-common technique.

      Reading this material should take approximately 15 minutes.

      Terms of Use: The article above is released under a Creative Commons Attribution-Share-Alike License 3.0 (HTML).  You can find the original WikiBooks version of this article here (HTML).

  • Unit 4 Assessment  
  • Unit 5: Coordinating HTML/CSS-Based Websites with Other Web Technologies and Going Live with a New Website  

    While we have already learned all of the basics of HTML and CSS and we are prepared to make sophisticated non-interactive sites, many familiar functions on the Web require the cooperation of HTML and other web technologies and techniques.  For example, many websites use Server Side Includes, JavaScript, XML/XSLT, and/or PHP.  When looking at existing code, references to, or snippets of, these non-HTML elements may be confusing, so it is important to know what to look for.  Equally, when developing sites with interactive elements, learning the fundamentals of how HTML works with other web technologies will be essential.

    Given this, we will briefly address the function of these technologies with optional readings before wrapping up the course with a discussion of code validation and the basic techniques for going live with a new website.

    Unit 5 Time Advisory   show close
    Unit 5 Learning Outcomes   show close
  • 5.1 Server-Side vs. Client-Side Operations for the Simple Website  
    • Reading: WikiBooks’ A Bit History of Internet: “Chapter 5: Client-Server”

      Link: WikiBooks’ A Bit History of Internet: “Chapter 5: Client-Server” (PDF)

      Instructions: This is a short introduction to the difference between clients (such as your home PC of laptop running a web-browser) and servers (such as the computer which will host your website).  Understanding the client-server relationship is important to understanding the relationship between HTML/CSS and other web technologies.  It is also crucial a crucial concept to understand as you move towards going live with your example website.

      Reading this material should take approximately 15 minutes.

      Terms of Use: The article above is released under a Creative Commons Attribution-Share-Alike License 3.0 (HTML).  You can find the original WikiBooks version of this article here (HTML).

  • 5.1.1 Server-Side Includes  
    • Reading: WikiBooks’ Active Server Pages: “Server-Side Includes”

      Link: WikiBooks’ Active Server Pages: “Server-Side Includes” (PDF)

      Instructions: Server-side includes are a technique for including the contents of another file in an HTML file.  This is an advanced technique that requires further instruction; the purpose of this short reading is to familiarize you with a common use-case so that you are ready to seek help of a skilled programmer or so that you know one of the directions you can continue your study of core Internet technologies.

      Reading this material should take approximately 15 minutes.

      Terms of Use: The article above is released under a Creative Commons Attribution-Share-Alike License 3.0 (HTML).  You can find the original WikiBooks version of this article here (HTML)

  • 5.1.2 PHP  
  • 5.1.3 JavaScript  
    • Reading: WikiBooks’ JavaScript: “Introduction”

      Link: WikiBooks’ JavaScript: “Introduction” (PDF)

      Instructions: JavaScript is a relatively easy programming language used to create interactive content on webpages.  This brief introduction to JavaScript will not help you get coding, but will help identify situations when you would want to seek out the help of a skilled JavaScript programmer – or, it may motivate you to learn this core Internet technology.

      Reading this material should take approximately 15 minutes.

      Terms of Use: The article above is released under a Creative Commons Attribution-Share-Alike License 3.0 (HTML).  You can find the original WikiBooks version of this article here (HTML).

  • 5.1.4 XML/XSLT  
    • Reading: WikiBooks’ XML – Managing Data Exchange: “Introduction to XML”

      Link: WikiBooks’ XML – Managing Data Exchange: “Introduction to XML” (PDF)

      Instructions: XML is a SGML-based language related to HTML; however, XML is in some ways more flexible but in other ways demands more attention to detail.  The differences between the languages have led to a sort of division of labor: HTML is used for delivering most core content on the Web, while XML is used for data-heavy applications that require customizable data structures.  Even so, using the style sheet language XSLT, XML files can be converted into HTML files on the server before delivering those HTML files to the client or web browser over the Internet.  This brief introduction will not teach you to code XML, but will hopefully help you identify cases in which XML is useful.

      Reading this material should take approximately 15 minutes.

      Terms of Use: The article above is released under a Creative Commons Attribution-Share-Alike License 3.0 (HTML).  You can find the original WikiBooks version of this article here (HTML).

  • 5.2 HTML Validation  
    • Activity: The Saylor Foundation’s “Site Validation and Compatibility Check”

      Instructions: Try validating a few of the pages you have created in this course; also try downloading the HTML of a website that you go to frequent and try validating it.  Also remember to check the compatibility of your code by opening it in a variety of web-browsers – minimally, the current versions of Firefox, Chrome, Opera, and Internet Explorer on a Windows machine and Firefox, Chrome, Opera, and Safari on a Mac OS/X machine.  Ideally, you would also check your code’s compatibility on older browsers and on browsers on GNU/Linux, iOS, Android, Windows Mobile, and RIM/Blackberry platforms before going live with a high profile website.  For a personal website, this level of attention to detail may not be warranted, however.  Alternatively, there are a number of webtools that will test a site for cross-browser compatibility once the site is already live.

      Completing this activity should take approximately 15 minutes.

    • Reading: WikiBooks’ HyperText Markup Language: “Validating HTML”

      Link: WikiBooks’ HyperText Markup Language: “Validating HTML” (PDF)

      Instructions: Validating HTML is one important step to ensure that your webpage is constructed of valid and well-formed HTML.  This will give you some assurance that your page will work on many web browsers; however, the only way to be certain that your webpage is widely compatible is to test it on a variety of platforms and browsers.

      Reading this material should take approximately 15 minutes.

      Terms of Use: The article above is released under a Creative Commons Attribution-Share-Alike License 3.0 (HTML).  You can find the original WikiBooks version of this article here (HTML).

  • 5.3 Going Live with a New Website  
  • 5.3.1 Registering a Domain for a New Website  
    • Reading: WikiBooks’ U.S. Internet Law: “Domain Names”

      Link: WikiBooks’ U.S. Internet Law: “Domain Names” (PDF)

      Instructions: Typically you register the domain name (e.g. www.example.foo) at the same time that you pay for web hosting.  It may be of some use to you to think about the important question of what to name your website – and the legal limits that may be set by existing websites with similar names.

      Reading this material should take approximately 15 minutes.

      Terms of Use: The article above is released under a Creative Commons Attribution-Share-Alike License 3.0 (HTML).  You can find the original WikiBooks version of this article here (HTML).

    • Activity: The Saylor Foundation’s “Domain Name Brainstorm”

      Instructions: Brainstorm a few possible domain names for your website.  Use Google to check to see if these domain names are available.  Remember that the best domain names are memorable, short, and do not require the user to remember idiosyncratic spellings or usages of valid punctuation marks like the underscore.   Also remember that you will want your domain to be unique – if your proposed domain name is www.examplewebsite.net and there are already websites named www.examplewebsite.com, www.theexamplewebsite.net, www.example_website.foo, or other similar permutations, you should consider seeking an alternative name.  When you register your domain name for business or personal branding, consider registering all similar domain names to prevent brand dilution.  Once you’ve determined an available and acceptable domain name you would like to use, make sure that it makes sense for your website’s title.  You may need to change your title to reflect the available domain names.

      Completing this activity should take approximately 15 minutes.

  • 5.3.2 Obtaining Hosting for a New Website  
  • 5.3.3 Submitting a New Website to Search Engines  

    Note: In this subunit you will submit your content to popular search engines, including minimally Google, Bing, and Yahoo!.  Some search engines like DuckDuckGo automatically index new websites, but it can take some time for them to find your site.

  • 5.3.4 Search Engine Optimization  
    • Reading: WikiBooks’ Social Web: “Search Engine Optimization”

      Link: WikiBooks’ Social Web: “Search Engine Optimization” (PDF)

      Instructions: Search Engine Optimization (SEO) is the process by which you help your site attain a high level of visibility on the Web, especially in search engine results.  You will want to think through SEO at length before your site goes live and will continue to leverage the “social web” to keep your site at the top of search results.

      Reading this material should take approximately 15 minutes.

      Terms of Use: The article above is released under a Creative Commons Attribution-Share-Alike License 3.0 (HTML).  You can find the original WikiBooks version of this article here (HTML).

    • Reading: Sitemaps.org’s “What are Site Maps?”

      Link: Sitemaps.org’s “What are Site Maps?” (HTML)

      Instructions: Providing sitemaps for your complex website can dramatically improve your visibility on Google Search.  With the knowledge you already have about HTML and the brief reading on XML in this Unit, you should be able to understand the information about the sitemaps XML format on this site.

      Reading this material should take approximately 15 minutes.

      Terms of Use: Please respect the copyright and terms of use displayed on the webpage above.

    • Activity: The Saylor Foundation’s “Creating Site Maps”

      Instructions: Using the template provided at Sitemaps.org, create a sitemap for your own website.  Be sure to link it to your HTML file.

      Completing this activity should take approximately 1 hour.

  • Unit 5 Assessment  
  • Final Exam  

« Previous Unit Next Unit » Back to Top