Chapter Three

An Introduction to Web Page Design

Introduction

Welcome to the beginning of the Web Page Class. In this class we are going to learn the basic building blocks of web pages and how to use them. This can appear to be very complicated. Let’s look at where we ultimately are going. Open a web page in your favorite (i.e. Internet Explorer, Chrome, Mozilla , etc.). Position your mouse cursor on the page, not over an image, and right-click. In the menu that appears, select “View Source” or “View Page Source”. What appears is the code that creates this page in your browser (see example below).

Looks complicated doesn’t it? It is complicated; however, it is built out of a Figure 1 Internet Explorer Page Showing Page Source bunch of small components that you will learn during the remainder of this class. If you stick with me and do the little exercises

I ask of you during the semester, by its end you will be well on your way toward being able combine them and create such pages on your own.

XHTML, HTML, and CSS

The code that makes up a webpage consists of two types of coding, the code that defines and organizes the information on the page and the code that formats the information in the webpage. The code that defines and organizes the information on the webpage in XHTML or HTML. We will be using XHTML (see figure 2 for a timeline of XHTL/HTML development).

Figure 2 Timeline of the Development of XHTML and HTML What’s the difference and why XHTML? HTML, which stands for HyperText

Markup Language, was used in the beginning for the creation of web pages. Each version has added features, making it easier to create more complex webpages. HTML designers have made sure that there is compatibility across the differing versions. If I open a later HTML file in an older browser, or vice versa, it either works or shows the problematic materials in plaintext. (Compare this with MS Office, where a more recent file will not open in an earlier version of Office without some work on your part.) As mentioned earlier, we will be using XHTML (eXtensible HyperText Markup

Language) in this class. Like HTML, XHTML has more strict rules, for example requiring all elements to be closed, that results in the creation of more consistent page code. This has the advantage of developing coding habits resulting in pages that are likely to appear the same, despite whatever browser the user may choose to use.

Where does CSS fit in? CSS stands for cascading style sheets. Most of the formatting and styling of our page occurs through CSS code. Using CSS code, we can format pages across our website so that they have the same formatting and thus a similar appearance. For examples the titles on one page, has the same color, line- spacing, font-size, font-size, etc. as the titles on other webpages throughout our website. This also has the advantage that we can make one change to our CSS file and it effects our entire website. This saves time and cuts down on the stress of having to touch every page to make such changes. We will get into using CSS in the last two- thirds of this class.

Obtaining the Skeleton File and the Notepad++ Editor

There are certain components that every XHTML/HTML file must have. I will show pictures, but I want you to be able to see them personally on your computer.

This will also prepare us for when you begin to create your own webpages. Go to my teacher website (within the RCHS website; http://www.russell.kyschools.us/olc/teacher.aspx?s=245 ) and within the Web Page

Development section you will see a folder titled: “XHTML Files”. Inside this folder you will find a file named “skeleton.” (see figure 3 below). Right-click on this file and select “Save Target As” or whatever your option may be to download a copy of this file. Notice where it is saved on your computer. (Don’t worry about the skeleton2.html file, you don’t need it at present. On your desktop, right-click and select “New” and Figure 3 Finding the Skeleton File on Teacher Website in the menu, that appears select

“Folder”.

Name this folder “Web Page Development”. Open this folder and paste a copy of the skeleton file inside. The skeleton file is the foundation for everything we will do this semester and thus we need to keep a copy around.

To make sure we have a copy for our later projects, we will copy this one and rename it for each of our projects and practice exercises. Inside the “Web Page

Development” folder, right-click, select “New”, and then select “Folder”. Name this folder “Practice One”. Open the “Practice One” folder and paste the skeleton file inside. Right-click on this skeleton file and If the Notepad++ program is not rename it “index.html”. Right-click on available in the menu that opens, we will need to install it before we “index.html” and in the menu that appears, continue. Open www.ninite.com in your web browser and select select “Edit with Notepad++”. This will Notepad++ in the Developer Tools open the index file in the Notepad++ section. Then click on “Get Your Ninite” and the installer will be editor. We will be using this editor downloaded to your computer. When the installer is finished throughout this semester to create downloading, right-click on the file webpages. and select “Run as administrator” if this option is available. If it is not available, select “Run”. Your

teacher may need to enter authorization for your install to The Components of a Web Page complete.

The screenshot at the top of the next page (see figure 4) shows what you see when you open the index.html file in the Notepad++ program. Note as we have only Figure 4 Screenshot of index.html File Open in Notepad++

changed the name of the skeleton file, there is not a difference between the skeleton file and the index file that we have opened in the editor. Let’s examine the differing parts of the skeleton that we can see. Please follow along on your screen.

The first line contains a DOCTYPE declaration. It must be on the first line of each web document and tells the web browser the version of HTML in which the document is written. Notice that the DOCTYPE starts with a “<” and ends with a

“>”. This brings up an important principle found in XHTML, every component has some sort of opening and closing code. Take note of these as we go through the skeleton and later when we introduce various XHTML components. The next section is the HTML section. Find the which closes the HTML section. Notice that the remainder of the skeleton is found within the HTML section. The lang=”en” found in this section tells the browser that this page is formatted in

English. If we were using another language, we would need to change this two-digit code.

Next is the Head section which has most of the behind-the-scenes portion of a web page. Most of these elements do not get displayed. Notice it is closed using

“”. Below this is the Body element. The element surrounds all the actual content (text, images, videos, links, etc.) that will be displayed on our web page.

Just as with a person, the head always belongs on top of the body.

Let’s go back to the Head section for a moment. Note the element It provides information about the document to web browsers and search engines. This line declares that the document is encoded in the UTF-8 (Unicode) character set. The

UTF-8-character set is the dominant choice for documents on the internet. We will use it for all our web pages. There can be multiple lines in the same web page. The element is often used to provide additional information such as page keywords, a page description, and the author(s) of a web document. Every web document must include one and only one instance of DOCTYPE, ,

, , and . We haven’t talked about <title> yet and will do that in our next section. </p><p>Viewing Our </p><p>Webpages in a </p><p>Web Browser </p><p>The other way we can open a html Figure 5 Toolbar and Opening HTML File in Web Browser file is in a web browser. If we open it in a web browser, it processes the code and displays it as a webpage. </p><p>Before we go on, what does this skeleton look like in a </p><p>Figure 6 Skeleton Opened in a Web Browser web browser? </p><p>With the file open in Notepad++, click on “Run” in the top toolbar and select </p><p>“Launch in Firefox”, IE, Chrome or whatever the name of the web browser that you use. This opens the HTML file you are editing in the web browser. When you open it, you get something that looks like Figure 6. Notice the page-tab that says “Page Title </p><p>Goes Here”. Go back to Notepad++ and in the <head> section find <title>. Replace where it says “Page Title Goes Here” with “Practice File One” (see figure 7 at top of next page). Click </p><p> on the diskette </p><p> icon at top (third </p><p>Figure 7 Titling Our Web Page from left) and then go to your web browser and refresh the page. When it comes up, your page is still blank, but it now has a title (see figure 8). This is usually how I work. Make a few changes in the editor, save the file, and then refreshing the page in the web browser to check my changes. If you wait until you make a bunch of changes before checking the file, it is difficult to determine which change caused the problem. In XHTML, all elements must be in lowercase letters. The DOCTYPE declaration is not an element. </p><p>Also, the lowercase rule applies only to the XHTML code within the < and > characters, not the actual content to be displayed on the web page. </p><p>Figure 8 Web Page with Title </p><p>Opening and </p><p>Closing Tags </p><p>A <a href="/tags/Tag_(metadata)/" rel="tag">tag</a> is an </p><p>XHTML "command" that tells the browser to perform some action. In XHTML, all elements must have both an opening tag and a closing tag. The closing tags begin with a forward slash. The <meta> element is unusual in that it is a self-closing <html xmlns="http://www.w3.org/1999/xhtml" <a href="/tags/XML/" rel="tag">xml</a>:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Page Title Goes Here Figure 9 Tags Found in Skeleton element. We'll see more examples of this element type in the next chapter. The

XHTML tags that surround the actual content of a page are collectively known as

markup (see Figure 9). Markup is not visible when the page is viewed in a browser.

Browsers ignore line breaks and spaces. We can take advantage of this fact by placing

blank lines and indents in our code to make it easier to organize and read. We will

standardize on using two spaces for each level of indenting (see figure 10).

Page Title Goes Here Figure 10 Example of Good Indenting Practice In Conclusion

In this chapter we have laid the foundation for the creation of web pages and installed our needed tools. In the next chapter we will begin learning basic

XHTML code.