|Course Introduction||Course Syllabus|
|1.1.1: Webpages, Websites, and Web Authoring||Authoring Webpages: "Introduction"||
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||Internet Technologies: "The Web, Domain Names, and Web Hosting"||
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||Leicester University: Richard Mobbs' "Introduction to HTML/XHTML: Uniform Resource Locator"||
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||Development Environments and Content Management Systems for the Beginning HTML/CSS Student||
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||Mark Pilgrim's "Dive Into HTML5: A Quite Biased History of HTML5"||
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||Browser Compatibility issues for the Beginning HTML/CSS Student||
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||Authoring Webpages: "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.1: What is Hypertext Markup Language?||Leicester University: Richard Mobbs' "Introduction to HTML/XHTML: What is HTML?"||
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.
|HyperText Markup Language: "Introduction"||
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.
|1.3.2: What are Cascading Style Sheets (CSS)?||Cascading Style Sheets: "Introduction"||
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.
|CSS Zen Garden||
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||Cascading Style Sheets: "Applying CSS to HTML and XHTML"||
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.1: Using HTML Paragraphs and Headings||HyperText Markup Language: "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"||
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"||
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"||
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!
These videos introduce HTML coding and will help orient you to the subsequent lessons dealing with specific elements and attributes used in HTML coding. Note that these videos deal with some more advanced topics (like interactive forms); while learning these topics is easily within the reach of the self-taught student, they are beyond the scope of this course.
|2.1.1: HTML Comments||HyperText Markup Language: "Comments"||
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.
|2.1.2: HTML Hyperlinks||Leicester University: Richard Mobbs' "Introduction to HTML/XHTML: Hyperlinks"||
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. Be sure to read each section of this article about hyperlinks.
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.
|2.1.3: HTML Lists||Leicester University: Richard Mobbs' "Introduction to HTML/XHTML: Lists"||
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.
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.
|2.1.4: HTML Tables||Leicester University: Richard Mobbs' "Introduction to HTML/XHTML: Tables"||
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.
|HyperText Markup Language: "Tables"||
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.
Undertake the exercises suggested in the above article, then attempt to incorporate tabular data of some kind into your example "index.htm" webpage.
|2.1.5: HTML Quotations||HyperText Markup Language: "Quotations"||
This chapter introduces tags for marking up quotations both in-line and as block-quotes.
Based on what you have just read, incorporate both types of quotations into your example "index.htm" webpage.
These videos introduce CSS coding and will help orient you to the subsequent lessons dealing with specific elements and attributes used in CSS coding. Note that these videos deal with some more advanced topics (like formatting colors, menus, and images) that will be addressed in subsequent units.
|2.2.1: Comments in External CSS Files||Leicester University: Richard Mobbs' "Introduction to HTML/XHTML: Adding Comments to Your Style Sheet"||
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.
|2.2.2: Basic Syntax for Styles in CSS||Cascading Style Sheets: "Defining Style Rules"||
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 Sheets you read in sub-subunit 1.4.3: The Essential Anatomy of an External CSS File.
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!
|2.2.3: Formatting Text Using CSS||Cascading Style Sheets: "Fonts and Text and Lengths and Units"||
One typical use of CSS is formatting fonts and text when you present the content of an HTML file. The Fonts and Text chapter introduces many of the core techniques for modifying the appearance of text, while the Lengths and Units chapter introduces the measuring systems used for changing the size and position of HTML elements.
Based on what you have just read, you should experiment with using several of these text-formatting techniques by modifying your "mystylesheets.css" file to produce different appearances for your "index.htm" file.
|2.2.4: Inline Styles, Embedded CSS, and Externally Linked CSS||Web Design: "Inline CSS, Embedded CSS, and External CSS"||
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."
|2.2.5: CSS Selectors||Cascading Style Sheets: "Selectors"||
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 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.
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.
|2.2.6: Cascading, Inheritance, and Conflicting Styles in CSS||Cascading Style Sheets: "The CSS Cascade"||
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.
|3.1.1: Some Different Approaches to Specifying Color in HTML and CSS||Cascading Style Sheets: "Color"||
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.
|3.1.2: Selecting Colors Wisely for Web Publishing||Color Scheme Designer||
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.
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.
|3.2: Special Characters in HTML Documents||HyperText Markup Language: "Text Formatting"||
You have already begun formatting text using CSS, but you may have realized that some punctuation marks and special characters tend to create problems when they are included in your HTML file. This chapter will provide you with the special codes you need to include these characters.
|3.3: Putting Images on the Web using HTML||Leicester University: Richard Mobbs' "Introduction to HTML/XHTML: Including Pictures"||
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.
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.
|HyperText Markup Language: "Images"||
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.
|3.4: Putting Video on the Web using HTML||Mark Pilgrim's "Dive Into HTML5: Video on the Web"||
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.
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.
|Wikiversity: "Video Content on the Internet"||
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.
|Graphical Content and Multimedia: "HTML Tags for Video Embedding"||
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.
|3.5.1: Background Colors and Images Using CSS||W3Schools: "CSS Background"||
Background properties in CSS allow you to specify colors or images as the backgrounds to create visual interest on a website.
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.
|3.5.2: The Element-Box Model in CSS||Evan Goer's "Pocket HTML Tutorial: Box Model: Borders and Margins and Padding"||
These articles provides a very clear explanation of the element-box model (or simply "the box model") in relation to borders and margins and padding.
Be sure to read both articles.
|W3Schools: "CSS Box Model, Border, Outline, Margin, and Padding"||
Read these articles, which discuss the fundamentals of laying-out, organizing, and graphically formatting an HTML document using CSS depend on a thorough understanding of the element-box model.
After experimenting with the interactive elements on each of these pages, try to use the element-box model to modify the paragraphs, headings, tables, lists, and images you have included in your example webpage.
|3.5.3: Positioning and Sizing Elements using CSS||Evan Goer's "Pocket HTML Tutorial: Align and Indent"||
This article 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!
|W3Schools: "CSS Dimension Property, Positioning, Align Property, and Float"||
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.
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.
|3.5.4: Formatting Tables using CSS||W3Schools: "CSS Styling Tables"||
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.
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.
|3.5.5: Formatting Lists using CSS||W3Schools: "CSS Styling Lists"||
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.
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.
|4.1: Tags||Evan Goer's "Pocket HTML Tutorial: Div and Span"||
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.
|4.2: Using CSS to Format an HTML List as Navigation Bar||W3Schools: "CSS Navigation Bar"||
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.
|4.3: Styling HTML Tags to Create Familiar Multi-Column Layouts||Multi-Column Layouts for the HTML4 and CSS Beginner||
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.
|Web Design: "CSS Challenge 3 and 4"||
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.
Using the examples provided in this sub-unit and the skills you have developed by working with the CSS Challenges, 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. 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.
|4.4: New Tags in HTML5 Increase Semantic Specificity||Mark Pilgrim's "Dive Into HTML5: Semantics"||
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.
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.
|5.1: Server-Side vs. Client-Side Operations for the Simple Website||A Bit History of Internet: "Chapter 5: Client-Server"||
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.
|5.1.1: Server-Side Includes||Active Server Pages: "Server-Side Includes"||
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.
|5.1.2: PHP||PHP Programming: "PHP Programming" and "Integration Methods"||
PHP is a server-side programming language used to create interactive elements and forms on websites. The introductory paragraph and selection on "Integration Methods" are intended to help you identify situations in which you would want to seek out the help of a skilled PHP programmer - or, it may motivate you to learn this core Internet technology.
|5.1.4: XML/XSLT||XML - Managing Data Exchange: "Introduction to XML"||
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.
|5.2: HTML Validation||HyperText Markup Language: "Validating HTML"||
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.
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.
|5.3.1: Registering a Domain for a New Website||U.S. Internet Law: "Domain Names"||
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.
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.
|5.3.2: Obtaining Hosting for a New Website||Internet Technologies: "Web Hosting"||
This brief introduction to the concept of web hosting should help new web coders begin searching for an appropriate hosting service.
|Starting a Website: "Choosing a Hosting Service"||
There are countless options for individuals or small businesses hoping to host a new website on the Web. This article helps orient you to the selection process and gives you some directions and key concepts you will need as you seek out an appropriate host. Do some additional research into other providers before you choose a host.
Based on the information above, as well as your own research, consider what the best hosting service for your purposes would be. Once you have identified the hosting service with which you would like to work, establish your account with this service. You will most likely register your domain name in conjunction with establishing an account with a hosting service.
|5.3.4: Search Engine Optimization||Social Web: "Search Engine Optimization"||
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.
|Sitemaps.org: "What are Site Maps?"||
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.
Using the template provided at Sitemaps.org, create a sitemap for your own website. Be sure to link it to your HTML file.
|Course Feedback Survey||Course Feedback Survey|