Line 21, Column 4: document type does not allow element "h2" here
<h2>This is a level two heading</h2>
Created by Judy Jacobs Miller for ITE 115 at Northern Virginia Community College
Comments to jumiller@nvcc.edu
Alternative design by Rong Zhu for ELI students
Last updated January 19, 2010
So you want to make a web site. It's easy. You don't need any fancy software. Just a computer and you're set. The software you will use is already on most computers that are sold today. So what do we need?
A text editor is a program that let's you write text. Actually, ASCII text. What's ASCII text? Basically, the characters on your keyboard. On Windows computers the text editor program is called Notepad. You open it up by selecting: Start > Programs > Accessories > Notepad. Don't confuse a text editor with a word processor. Using a word processor, like Word Pad or Word, will mess you up. Be sure you use Notepad.
A browser is software that let's you view a web page. It takes what's written on Notepad and interprets it. The browser shows you all the formatting; it's what makes the page look pretty, or ugly, or whatever. There are lots of browsers. Two popular browsers are Internet Explorer and Firefox. To open a browser, either double click on the browser icon on your desktop, or select Start > Programs > Internet Explorer (or Firefox).
Let's do a little experiment. Open a web page, say http://www.amazon.com. Now that you have Amazon open, right-click on the web page and choose "View Source" or "View Page Source." . What do you see? Lots of XHTML code. Don't worry if it looks a little complicated. It's really pretty easy. You'll make a web page in less than an hour. Just keep reading.
So what have we learned? You create a web page using Notepad. You view a web page using a browser. Lets make a web page!
The best way to make a web page is to just dive right in. Open Notepad (Start > Programs > Accessories > Notepad) and start typing (or if you're lazy, like me, just copy and paste):
<html> <head> <body> <h1>This is a level one heading</h1> <p>My first lovely paragraph. Wow. This is fun.</p> <p>My second lovely paragraph. We can make paragraphs forever.</p> <h2>This is a level two heading</h2> <p>This is my third paragraph. Notice how the paragraph tag sets off the text. Also notice that every beginning tag has an ending tag.</p> </body> </html> |
What does all this mean? The stuff between the < and the > symbols are "tags." Tags (mostly) come in pairs, a beginning tag and an ending tag. The ending tag repeats the beginning tag, with a forward slash in it. For example, the web page starts with <html> and ends with </html>.
Each web page has two parts:
Beginning to get the idea? It's easy.
So what goes in the head? The title. The title is what appears at the top of the browser, in the blue "title bar." Everything else goes in the body, that is, between the body tags.
Most of what you have to say goes in paragraphs, just like in real life. A paragraph starts with <p> and ends with </p>. You can also put stuff between heading tags, which come in various sizes, from <h1>, <h2>, ... through <h6>. Headings are usually used for, well, headings. The <h1> heading will make text bold and large. <h2> is a little smaller, and so forth. <h6> headings are quite small. Now, it may seem like a heading tag would go in the head, but it doesn't. Headings go in the body, just like everything else (except the title).
After you create the web page, you must name it and save it. Naming a web page the right way is critical, so we devote a whole section to naming. Read on.
Before you name your web page, create a folder to hold all of your web pages. The folder can be anywhere ( a: drive, c: drive, flash drive), it doesn't mater. Just be sure you know where it is so you can find it again. Name the folder "website". Now you can save the text file that you just created using Notepad in the folder called "website." As you save the text file, name it "first.html".
Naming a web page correctly is easy if you follow these three rules:
If you want to know the why behind these rules, read on.
Spaces in filenames can confuse browsers and email programs. Browsers usually substitute "%20" for a space. Email programs sometimes cut off URLs after a space. If you want to use a space for clarity, use an underscore instead. For example, "onion recipe.html" becomes "onion_recipe.html"
Capitals matter. You're probably creating your first web page in a Windows operating system environment. If so, Windows is pretty lax about file names. But once you're done creating your page, and you upload it to a server (so that Aunt Tilly in Iowa can see it), the server may be using an entirely different operating system, like Unix or Linux. Unix and Linux care about capitals. MyFile.htm is a totally different file than myfile.htm in a Unix or Linux environment. You can use capitals in your file names, but when you create your links (which we'll get to real soon), they won't work if your link file name doesn't match your actual file name. If you use all lowercase, you don't have to try to remember "Did I use a capital or not?"
File extensions. Extensions matter. Your web page extension must be either .htm or .html. It doesn't matter which, but you've got to be consistent. If you create a link to myfile.html and the page is named myfile.htm, the link won't work.
Ok, now that we've saved our first web page with the name "first.html" let's take a look at it in the browser.
Now that we've created our web page with Notepad, and saved it as "first.html", we want to see what it looks like in the browser. The easiest way to open a webpage in a browser is to double-click on the filename in "Windows Explorer" or "My Computer." You can also right-click the name of the file, then choose either "Firefox" or "Internet Explorer."
There, you've done it. You've made your first web page, and viewed it in the browser. Don't worry, we'll soon learn how to jazz it up.
Ok, your page is a bit boring. For example, the title bar says "The title goes here." Let's put in a better title. Go back to Notepad. You've still got your web page open in Notepad, don't you? If not, don't worry. Just open the webpage in notepad to see the html code. The easiest way to open the webpage in notepad is to right-click on the filename in "Windows Explorer" or "My Computer," then choose Open With > Notepad. If you are using Internet Explorer, you can also right-click on the webpage and choose View > Source to view the code in Notepad. (This won't work in Firefox.)
Now change the title to something good, like "Marvin's awesome first page", or whatever. If you're not Marvin you might want to change the name. Also, change the level one heading (that's the stuff between the beginning <h1> tag and the ending </h1> tag) to something better. Maybe "Marvin Rocks" or whatever.
Now you've made the changes in Notepad. But you don't see "Marvin Rocks" in your browser. There are two things you have to do to make the changes in Notepad show up in the browser.
Awesome. You did it. You made your first web page.
You may think that if your web page shows up in the browser, the code is correct. Not so. Browser software is designed to attempt to correct coding errors. Incorrect code may appear the way you intended in one browser, may appear odd in another browser, and may not appear at all in a third browser.
There's an easy way to find out if your code is correct. Validate! The World Wide Web Consortium offers a nifty validator. It's at http://validator.w3.org/. Now, there's one little catch. You have to tell the validator what version of xhtml you're using, so it knows what to validate. That's easy, just add a DOCTYPE at the top of your web page. You've also got to add some namespace and character encoding information. Well, all this technical stuff is beyond me, so I just copy and paste.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <body> <h1>This is a level one heading</h1> <p>My first lovely paragraph. Wow. This is fun.</p> <p>My second lovely paragraph. We can make paragraphs forever.</p> <h2>This is a level two heading</h2> <p>Thi is my third paragraph. Notice how the paragraph tag sets off the text. Also notice that every beginning tag has an ending tag.</p> </body> </html> |
Do not try to type this. Just copy and paste it at the top of the web page you're making in Notepad. Be sure to remove the old <html> tag that you had, so you don't have two html tags. Don't forget to save the file again.
The DOCTYPE tells the validator what version of xhtml you are using. There are several different versions of html and xhtml. We're learning xhtml 1.0 strict.
Now you're ready to validate. Here's the link again: http://validator.w3.org/. When you get to the W3C validation page, click the tab that says "Validate by File Upload." Browse to the correct file, then click the "Check" button.
If the code validates, you'll see "This Page Is Valid XHTML 1.0 Strict!" on a green background. Green is good. If the code does not validate, you'll see " This page is not Valid XHTML 1.0 Strict!" on a red background. Red is bad. If your code does not validate, the validator will tell you what is wrong. Read the feedback from the validator, change your code in Notepad, save, then validate again.
The validator generates error messages that are usually pretty helpful, but because of the way it parses documents, occasionally its feedback is cryptic. You'll get used to this, but here are some tips to help you get started:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <body> <h1>This is a level one heading</h1> <p>This is BAD CODE EXAMPLE. Don't copy it</p> <p>My second lovely paragraph. </p> </body> <h2>This is a level two heading</h2> <p>Thi is my third paragraph. </p> </html> |
The above code generates the following validation error:
Line 21, Column 4: document type does not allow element "h2" here
<h2>This is a level two heading</h2>
There is nothing wrong with the code for the h2 statement; the validator is objecting to its location. The previous statement, the </body> statement, is in the wrong place. The closing body tag must come after all statements and right before the </html> statement. In this case the error was actually located at the statement above the statement pointed to by the validator.
You made a web page. Great! You probably created the web page on the C: drive or on a flash drive. It looks good and it validates. Now you want your Aunt Tilly in Iowa to see the page. How are you going to do this? Aunt Tilly cannot see your C: drive or your flash drive. In order for Aunt Tilly to see the web page, you must put it on a web server. A web server is a computer that's hooked up to the Internet (hopefully with a reliable, fast connection) and that has special server software on it. The server software and fast Internet connection allow this computer to act as a web server. So it can serve up web pages, just like a waiter serves up your food. Well, sort of. The web pages don't taste as good.
So how do you get your web page to the server? There are several ways. One way is to use an FTP program. FTP stands for "file transfer protocol," which is one of the protocols, or set of rules, used to transfer files on the Internet.
At Northern Virginia Community College we use an FTP program called Core FTP LIte. Why? Because it's cheap and it's good. Core FTP is already loaded on the computers in the NVCC open labs. If you want to use the program at home, you can download it from www.coreftp.com. (Click on the "Download" tab, then download Core FTP LE, which is the free version.)
All NVCC students have 10 MB of server space. It's free, and it will exist as long as you are enrolled in classes. In order to send your web page to your NVCC server space, you need to know three things:
Let's get started. Open the Core FTP Lite program by double-clicking on the icon on the desktop. If the Site Manager Window is not open, open it by clicking on " File > Connect." In the Site Manager window, click the New Site button in the lower left corner. Fill in the following information:
Click the Connect button. The files on the left are the the files on your local computer. The files on the right are the files on the server. You'll know you connected successfully if you see your WebID on the right. Each student has a folder, the name of which is his or her WebID, on the NVCC student server. All of the student folders are contained in a folder called "home." If you were unable to connect successfully, call (not email) the IT help desk at 703.426.4141.
You navigate around your files in the CORE program much as you would navigate around Windows Explorer. Double click on a folder to open it. Double click on the two dots at the top of the folder listing to see the parent folder. The only tricky thing is when you want to see another drive, such as your A: drive or your flash drive. There is a little icon on the left, called Directory Tree. I think it's supposed to look like a folder tree in Windows Explorer. If you click it you will see all of your drives.
To upload your web pages to the NVCC student server, first highlight the local file or folder on the left side of the CORE window, and click the blue right arrow. The file or folder will be transferred to the server on the right. After an upload, you should see the file or folder name listed on the right.
Once you've uploaded your web page, Aunt Tilly in Iowa, or anyone in the world connected to the Internet, can see it. How? By typing the URL in the web browser address bar:
http://www.student.nvcc.edu/home/YourUserID/filename.html
Of course, replace YourUserID with your actual userid, and replace filename.html with the actual name of the file. If you have created a folder within your web space, be sure to include the folder name as well in the URL.
Always open your browser and check out your web page as it appears on the server. Sometimes things look great on your local computer, but look different on the server.
Linking two pages together requires the following code:
<p><a href="filename.html">words for the user to click on</a></p>
Where do you put this code? Where you want the link to appear. Make sure it's between the body tags, just as all other content on you web page should be.
The filename.html gets replaced by the name of the file you are linking to. The filename in the link must match exactly the actual name of the file. If you've named your file as I've suggested, it has no capitals, no spaces, and ends with .html. That makes it easier when you're linking.
The "words for the user to click on" should be something that describes where the link will take the user. So "Click Here!" would not be very helpful to the user, whereas "Learn more about zebras" would give the user a clue about where the link leads.
For example, if you are linking to a file which contains a description of your favorite movies, the link code might look like this:
<p><a href="fav_movies.html">Learn about Judy's favorite movies.</a></p>
This code will work only when the file to which you are linking is in the same folder as the file from which you are linking. If the files are in different folders, you must do some relative pathing, which is beyond the scope of this tutorial.
The paragraph tags surround the link so that the code will validate. You can have a text and links in the same pargraph, if you'd like.
Once you've created the link, test it out, twice. First, test it on your local computer. Then, test it on the server. Don't forget to send both files to the server: the file you are linking from and the file you are linking to. If your link doesn't work, check the following.
If you want to link to another web site, the link code should include the entire URL, as follows:
<p>For a great place to buy books, visit <a href="http://www.amazon.com">Amazon.</a></p>
Links within your site will also work if you start them with http:// ... etc. For example, you could link to a page within your site as follows:
<p><a href=" http://www.student.nvcc.edu/home/YourUserID/fav_movies.html">Link to My Favorite Movies</a></p>
The link would work, but this is a bad way to link to pages within your own site, for two reasons: 1) link access time is increased and 2) when you want to move your web site to another server, you have to change all your links.
Adding images can really spice up a web page. Images which appear on web pages are typically jpg file or gif files; these are two popular compression formats which are universally recognized by browsers. Do not use another format, such as .bmp or .art.
Please make sure you either own the image or have permission from the owner to use the image. Here are a few web sites that have some free images available for your use:
To download an image, place your cursor over the image, right-click, and select "Save Picture As" or "Save Image As." Save the image in the same folder as the web page on which you want the image to appear. The following code will add an image to your web page:
<p><img src="imagename.jpg" alt="alternative text" /></p>
Imagename.jpg gets replaced by the name of the image file. The alt attribute provides alternative text for those users who cannot or prefer not to view images. For example, if you want an image of a turtle to appear on your web page, the code might look like this
<p><img src="turtle.jpg" alt="Pretty Box Turtle " /></p>
The paragraph tags surround the img so the code will validate. You can have text and images in the same paragraph, if you'd like.
The image code will work only when the image file and the html file are in the same folder. If the files are in different directories, you must do some relative pathing, which is beyond the scope of this tutorial.
If the image does not appear on your web page, check the following:
Let's make some lists. First we'll make an ordered list; this is a list that has numbers. Here's how:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <body> <h1>Judy's Shopping List </h1> <ol> </body> </html> |
Give it a try. Copy the code into Notepad, save it with the name "shop.htm", then open it in the browser and see how it looks.
You might have figured out that the "ol" in the code stands for "ordered list." The "li" in the code stands for "list item." Notice, every beginning tag has an ending tag.
Now try an unordered list. You may have already figured it out: replace the <ol> tag with <ul>, and the </ol> tag with </ul>. Yes, "ul" stands for "unordered list."
Cascading Style Sheets add style to your web pages. There are three different kinds of styles: inline, embedded (also called internal), and external. We'll learn about inline styles here.
With inline styles, you change the appearance of one tag. For example, if you want to make the body have a pink background color, you change the body tag, like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <body style="background-color: #FFCCFF"> <h1>This is a level one heading</h1> <p>My first lovely paragraph. Wow. This is fun.</p> </body> </html> |
If you want to make your page have navy blue font, you do it like this:
<body style="color: #000066">
And if you want to make your page have a pink background and navy blue font, it's like this:
<body style="background-color: #FFCCFF; color: #000066">
What are those funny numbers that change the color? They're the hexadecimal representation of the amount of red, green and blue that make up the color. You can find a list at http://www.devguru.com/Technologies/html/quickref/color_chart.html or http://www.visibone.com/colorlab/.
You can take any tag and apply styling. If you want to make a paragraph have a red Arial font that is 18 pixels high, it's like this:
<p style="color: red; font-family: Arial; font-size: 18px">Hello</p>
If you want to make a level two heading have a red background, white font 24 pixels high, and be aligned to the center it's like this:
<h2 style="text-align: center; color: #FFFFFF; background-color: #FF0000; font-size: 24px">Awesome</h2>
Notice you can use the name of a color, like red or white, rather than the hexidecimal value, for the more common colors. But you'll have a greater selection of colors and more predictability by using hexidecimal values.
Do you like to style? You can find many more style properties and values at http://www.w3schools.com/css/css_reference.asp. Here are a few of the more common properties and values:
| Property | Possible Values |
|---|---|
| background-color | hex value |
| border-color | hex value |
| border-style | solid, double, dotted |
| color | hex value |
| font-family | arial, courier, etc |
| font-size | # of pixels |
| letter-spacing | # of pixels |
| line-height | # of pixels |
| text-align | right, left, center |
Above we learned that Cascading Style Sheets come in three types:
We have already learned how to do inline styles: the style code is placed within each tag, and affects one tag and one tag only. With embedded CSS, we specify the style for a particular tag, and every time that tag is used on a page, the style is applied. Embedded CSS is placed in the head of the document, right after the ending title tag, like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> h2 p </style> <body> <h2>Cardinals</h2> <p>The male cardinal is a beautiful bright red, whereas the female is a less colorful brown.</p> <h2>Bluebirds</h2> <p>Bluebirds are a beautiful shade of blue, but are difficult to attract to your garden. </p> </body> |
The above code says make every level two heading in the document appear in red text, and make every paragraph on the page appear in blue text with a Verdana style font.
Embedded styles are convenient if you want several tags on your page to appear the same. If you use inline and embedded styles for the same tag, the inline style will take precedence. For example, you could use embedded CSS to make every paragraph appear blue (as we did above), then use an inline style to make just one paragraph appear green.
Here's how to add a simple table to your web page. This table has two rows and three cells in each row:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> table td <body> |
Let's analyze this code. The <table> tag starts the table, the <tr> tag starts the row, and the <td> tag starts the cell. (I think it stands for "table data.") Every opening tag has a corresponding ending tag. I've used embedded CSS to style the <table> and <td> tags. The table itself has a solid border. Each cell appears with a solid pink border, and each cell has 10 pixels of padding. Cell padding is the space between the contents of the cell and the cell border.
Just a word or two about external CSS. It is by far the most powerful of the three types of CSS, and is also the easiest to use when you're styling a website with lots of pages. With external CSS, you don't put the CSS styling in the html document; you pull it out and put it in another document that has a .css extention. Each html page gets "linked" up to the external css page. This way, you can create one CSS document which styles hundreds of pages. It's also alot easier to maintain, because if you decide to change the color of all level three headings in your site, you can do it with one new line of code. If you're interested in learning about external CSS, visit my CSS Tutorial.
We've learned how to create web pages with images, links, lists, tables, and styles. We've also learned how to ftp our pages to the server. In short, we've made a web site. Here's a list of the xhtml tags we've used:
Have fun building your web sites!
This work is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 United States License.
