Emily '08 (Art major): "A couple months into working here [a law firm], I realized I had a much, much easier time with the web software than my colleagues -- all because I had learned the basics of HTML in your class! Then, after a heart-stopping incident in which I learned on-the-fly how to restore a broken section of the web (someone accidentally deleted the template for an entire section of the site...oops), the head of my department decided that I should be the sole decision maker for the website, responsible for leading all its content-, design-, and tech-related projects."
The COS 109 labs are intended to demystify various parts of modern software, showing you enough of how things work underneath that even though you're unlikely to create your own major systems, you'll have a good idea of what's going on.
The first couple of labs explore the basics of how web pages work, and a couple of later labs show how Javascript programs can be used to make web pages highly interactive. This won't make you a professional (or even advanced amateur) web designer, but you'll know enough that in a pinch you could do useful web pages all by yourself.
Advice, added 9/28: If your web page doesn't work right on myCpanel, use the View Source display in your browser. It will often help you to identify things like files that you didn't upload (or whose names you have spelled wrong, e.g., in the wrong case), missing tag terminators, failure to quote filenames in hrefs, and the like. I find Firefox easier than Chrome or Safari but any of them will be helpful.
In this lab, you will:
This lab can be done on any computer anywhere.
Part 1: Introduction
Part 2: HTML Framework
Part 3: Text
Part 4: Links
Part 5: Lists
Part 6: Graphics and Sound
Part 7: Making Your Page Visible with cPanel
Part 8: Submitting your work
W3Schools web development tutorials and reference
| In this lab, we will highlight instructions for what you have to submit in a yellow box like this one. |
A web page is a text file stored in a specific folder where it is visible on the web. A web page is written in a language called HTML ("HyperText Markup Language") and contains a mixture of content to be displayed and information about how to display it. Professional web designers also use CSS (Cascading Style Sheets) to ensure that all pages have a uniform appearance, and Javascript for dynamic effects. Both of these are beyond the scope of this lab, which focuses on the basics of what's going on underneath.
Important: HTML files are plain text files. Do not use Word to create or edit them. You can use Notepad or WordPad on Windows, or TextEdit on a Mac. From now on, we will use "editor" to mean "Notepad on Windows or TextEdit on MacOSX or any equivalent program."
On Windows, you can use Notepad, or you can use WordPad if you save your files as ".txt" format. You can find these programs from the Start menu in places like All Programs | Accessories or All Programs | Basic Applications. Or search for them from the "go" menu. Do not use Word to edit plain text files.
On a Mac, you can use TextEdit (in Go | Applications). Unfortunately TextEdit is sometimes too smart for its own good. Use Preferences | New Document to set "Plain Text". Do not use "rich text format" (.rtf). Under Open and Save, uncheck the box that says "Add '.txt' extension to plain text files". When you do this, the ruler at the top of the window should disappear. You should also check "Ignore rich text commands in HTML files" and make sure that the "Smart quotes" box is not checked under Preferences | Open and Save in TextEdit to allow you to reopen a file as a text file if you have saved and closed it.
You can view your web page(s) on any browser -- Chrome, Safari, Firefox, Internet Explorer, Edge, etc. For the most part, browsers display straightforward HTML pages in the same way, but there are annoying differences in how various browsers treat complicated pages. Whether these differences arise from bugs or failure to follow standards, web designers must work around the differences, usually by sticking to things that work the same in all browsers.
Your first web page will be stored in a plain text file called index.html. The name index.html is special: it is the default file that browsers use if you don't name a specific file.
For the rest of this lab, you will edit index.html on your own computer, then submit it and upload the final result to an OIT computer that will make it visible to other people. Remember that any information on your web page is by default visible to the entire world. At the least, this strongly suggests that you should not put anything on your web page that you would not also publish on the front page of the New York Times. (It is possible by murmuring a suitable incantation to limit access to computers on the Princeton network; I will be happy to help with incantations upon request.)
To view the contents of an HTML file in a browser, use the File / Open File menu to navigate to your file, or type its filename in the URL entry box as file:///path_to_file.
As you develop your web page, you should check its appearance in your browser frequently. If you check each change as you make it, you can see its effect right away, and quickly isolate the source of any problem. If you make a lot of changes at one time, it's harder to trace a problem to any particular change.
It's likely that at some point during this lab you will find yourself staring at your page in your browser, wondering why the changes you just made had no effect. When this happens, recall that to see the effect of the most recent changes, you must first save the file in your editor, and then reload the just-saved file in your browser.
Finally, you might think that if you start up a new copy of a browser, you will see the newest version of any page you visit. Alas, it ain't necessarily so. You may end up looking at an out-of-date version because in an attempt to be efficient, a browser may display a copy of the page that it has stored on your computer ("cached") rather than retrieving a new version. Caching is generally helpful, but sometimes it gets in the way. To be absolutely sure you're looking at the latest version, you may have to force the browser to reload in spite of its cache; indeed, under some unusual circumstances, you might need to hold down the Shift key while Reloading to force an uncached copy of images.
Web pages are written in a language called HTML, which stands for HyperText Markup Language. HTML is ordinary text, but it includes formatting information that describes the layout. This extra information is contained in a set of tags, which are ordinary text surrounded by < and > signs. They give the browser information about how to display the text.
The next few sections will help you create your own web page. The skeleton of any web page has this form:
<html>
<head>
<title> Title of the web page goes here </title>
</head>
<body>
Content of the web page goes here
</body>
</html>
The text between < and > is called a "tag". Tags can be written
in upper case or lower case; we will use upper case here to make them
stand out, but lower case is easier to type.
Every HTML file must begin with <HTML> and end with </HTML>. These two tags tell your browser that the file is written in HTML and that it should translate every tag it finds between them into the proper effect. Everything you put in your HTML file must go between these two tags.
There are two separate parts to an HTML file, the HEAD and the BODY. The HEAD comes first, is surrounded by the <HEAD> and </HEAD> tags, and usually contains information about the HTML file that is not displayed, like author name, keywords, and a summary of the file. These are not displayed by the browser, but they may be used by search engines and other programs.
One exception to this invisibility rule is the page title. If you look in the title bar of your browser window, you should see the title of the page you are on. If you were to find the page in a search engine or among your bookmarks, it would have the same title. Use the <TITLE> and </TITLE> tags (within the HEAD section) to specify the title of your web page.
Finally comes the BODY section. Everything in this section will be displayed in the main window of your browser.
| Create your initial index.html file. It's easiest to copy and paste the template above and put it in a file. Since this lab will involve several files, you might find it convenient to create a separate folder to hold them, with a name like lab1. |
Each HTML filename must end with .html; browsers expect that. (The extension .htm is often allowed as an alternative but don't use it here.) Also note that file names are case sensitive. Use lower case for index.html.
Most tags have options, called attributes, that you can use to customize the appearance, like the blue headings in this document. Each attribute is written as name="value", where name is the name of the attribute and value is what you set it to be. For example, <BODY BGCOLOR=blue> instead of just <BODY> will make the background color of your page blue.
The most popular attributes of the BODY tag are:
| Name | Value | Effect |
|---|---|---|
| TEXT | a color | changes the color of all normal text |
| BGCOLOR | a color | changes the background color |
| BACKGROUND | a filename | displays an image file as the background |
Thus, if you want a black page with white text, use <BODY BGCOLOR=black TEXT=white>. If, on the other hand, you had a picture named cat.jpg, you might try <BODY BACKGROUND=cat.jpg TEXT=red>. That would tile the cat picture over and over as the background of your page, and all your text would appear in red. The file name can be a link instead, as described later.
Here's a list of some named colors; you can get literally millions of others by specifying their red, green and blue components, which we'll explore in the next lab.
| Available Colors | ||||
|---|---|---|---|---|
| YELLOW | GREEN | BLUE | RED | WHITE |
| GOLD | AQUAMARINE | MIDNIGHTBLUE | PINK | SILVER |
| ORANGE | TURQUOISE | PURPLE | LAVENDER | GRAY |
| BROWN | SKYBLUE | MAROON | BEIGE | BLACK |
| Add some attribute(s) to the BODY tag, something more adventurous than <BODY BGCOLOR=white TEXT=black>. If you prefer other colors or an image, change them now. You can try hexadecimal values for more color choices; use six hex digits for the color, as in BGCOLOR="00aaff", or try names and hex values from this file of colors. |
Here is what you should have so far. Don't worry if the spacing is different, or if you've chosen different colors. Just make sure you understand what each tag does.
|
<HTML> <HEAD> <TITLE> Title of the web page goes here </TITLE> </HEAD> <BODY BGCOLOR="white" TEXT="black"> (All the content of your web page -- what you want your viewers to see in their main window -- will go here.) </BODY> </HTML>
|
However, there are some key differences. First and foremost is the fact that line breaks have to be explicitly marked with a <BR> tag, which causes a line break: text after it will be on a separate line. Alternatively, you can use the <P> or paragraph tag, which not only starts a new line but also puts an empty line between the two chunks of text it separates. Here's an example:
| What you write in HTML | How it appears on your web page |
|---|---|
| The cat sat on the mat. |
The cat sat on the mat. |
| The cat sat <br> on the mat. | The cat sat on the mat. |
| The cat sat <p> on the mat. | The cat sat on the mat. |
How did we display <BR> and <P> tags in plain text? It would seem that if we were to write <BR> in an HTML file, it would insert a break rather than showing the literal text "<BR>". The secret is to use "escape codes" to represent certain symbols that have special meanings in HTML. For example, to display <BR> in an HTML document you write "<BR>". The escape code < stands for < ("less than"), > stands for > ("greater than"), and & stands for & (ampersand).
Note that the semicolon is part of the escape code; if you omit it, things won't work.
Other symbols, including accented letters like é and ñ and symbols like ©, that are not found on the keyboard are also created with escape codes: é, ñ and ©. One especially useful escape is , which produces a "non-breakable space", that is, a blank space that does not go away. You can use it to force a space or to keep two words together on one line. There's a complete list of escapes at this site. Finally, you can include any Unicode character as &#xhhhh;, where hhhh is the hex value, or in decimal by omitting the x. For instance, א and א both produce the Hebrew character alef א.
To include headings in your web pages, with larger and bolder text that stands out, use the <Hn> </Hn> tags. Replace "n" with a number from 1-6 and surround your heading with these two tags. The text inside will be bold, usually larger (depending on the number -- H1 is the largest), and surrounded by blank lines.
| What you write in HTML | How it appears on your web page |
|---|---|
|
<H1>This is an H1 heading.</H1> <H2>This is an H2 heading.</H2> <H3>This is an H3 heading.</H3> <H4>This is an H4 heading.</H4> <H5>This is an H5 heading.</H5> <H6>This is an H6 heading.</H6> |
This is an H1 heading.This is an H2 heading.This is an H3 heading.This is an H4 heading.This is an H5 heading.This is an H6 heading. |
Always close your header tag (using the appropriate closing tag) or the rest of your page will be displayed in the larger, bolder text. The closing tag must match the opening tag: if you open with <H2>, you must close with </H2>.
With a few tags, you can make text bold, italicized, underlined, bigger, smaller or even a different color.
| What you write in HTML | How it appears on your web page |
|---|---|
| <B>This tag makes text bold!</B> | This tag makes text bold! |
| <I>This tag italicizes text!</I> | This tag italicizes text! |
| <U>This tag underlines text!</U> | This tag underlines text! |
| <TT>Here's some fixed width text!</TT> | Here's some fixed width text! |
To display colored text or change the size of the text, use <FONT>. The <FONT> tag doesn't do anything by itself, but it allows you to set the size and color of text through its attributes. The following table shows how to use the <FONT> tag.
| What you write in HTML | How it appears on your web page |
|---|---|
| <FONT COLOR="blue">This is blue text!</FONT> | This is blue text! |
| <FONT SIZE=5>This is big text!</FONT> | This is big text! |
| <FONT COLOR="red" SIZE=6>This is really big red text!</FONT> | This is really big red text! |
The color should be one from the table of background colors for the BODY tag. The size can range from 1 to 7. You can also use relative sizes, like size=-1 and size=+1.
Lines: You've probably noticed the horizontal lines that separate sections of these instructions. You can include such lines in your page by typing <HR> ("horizontal rule") at each place where you would like one to appear. Like <BR>, <HR> does not require a closing tag. The line need not stretch across the whole page; try <HR width=75%>.
Alignment: To center a heading or a paragraph, use the <CENTER> </CENTER> tags to surround whatever you would like to be centered. You can also use the ALIGN=RIGHT or ALIGN=CENTER attribute with headings and paragraphs, as in <P ALIGN=CENTER>.
Pre-formatted Text: If you cannot find a way to make your text appear the way you want, you can always resort to using the <PRE> </PRE> tags. Any text placed between these two tags will appear exactly as you type it, including spaces, indentation and empty lines (though you need escape codes for <, > and &). But the text will appear in a fixed-width font, will not flow naturally, and won't wrap at the edge of your window.
Tables: Our tabular displays are created with the <TABLE> tag; it's one of the topics of the next lab.
| Using these
tags write two or three paragraphs about yourself or some fictional
person. It's definitely ok to invent a persona if you prefer not to publish
personal information on the web; this part is just to use some of the
things that you've learned during this section of the lab. Try to use
the tags outlined above whenever appropriate.
Include some escape codes, and combine effects like style and color changes. |
Now that your web page is up and running with a colorful background and formatted text, it's time to learn what makes the World Wide Web a "web". Hyperlinks, or more commonly just "links," are cross-references from one web page to another, or to another part of the same page. They form the foundation of the Internet because they allow you to navigate and find information without knowing the exact location of what you're looking for. For example, you may not know the name of the file on www.cnn.com that contains an article you want to read, but you can still get to it by clicking on the link to www.cnn.com.
Most often, you will want to link to other sites. The address of a site is called its URL (Universal Resource Locator). A URL is a string of text consisting of a domain name like www.google.com, prefixed by https:// and sometimes followed by other information, that tells the browser know where to go. To create a link in a web page, use the A ("anchor") tag and the HREF attribute:
<A HREF="https://URL">Caption for link</A>Any text that you type between <A HREF...> and </A> will be displayed in blue and be underlined. For instance, to make a link to Google, add:
<A HREF="https://www.google.com">Click here for Google!</A>which will produce Click here for Google!
| What you write in HTML | How it appears on your web page |
|---|---|
| Welcome to <A HREF="https://www.princeton.edu">Princeton!</A> | Welcome to Princeton! |
| Add two or more links to sites you like; each link should include some text saying what the link is. |
<A NAME="anchorname"></A>immediately in front of the place you want your link to point to. For example, the top of this page has an anchor called top before the introduction section. This anchor looks like this:
<A NAME="top"></A>
To link to an anchor, use an HREF with a # and the anchor name you want to point to, as in the table below. When you click on the link, the browser will find the "top" anchor and send you directly there.
| What you write in HTML | How it appears on your web page |
|---|---|
| <A HREF="#top">Click here for the top of this page.</A> | Click here for the top of this page. |
Note that the # is included in the HREF, but not the anchor NAME itself. You can also link to an anchor in another page; just add the #name to the end of the URL.
| Add a link near the bottom of your page that returns you to the top. |
There are two kinds of lists, ordered and unordered. Both have beginning and ending tags that bracket the entire list, and inside those tags they have tags that mark individual items. All of the techniques for formatting text that you've learned above can be applied to text in lists, including lists within lists, and of course there can be links in lists.
In an "ordered list," the browser will automatically number and indent each list item for you, so you can add, remove and rearrange items without having to change your entire numbering scheme.
An ordered list begins with the <ol> tag. Each list item begins with the tag <li> ("list item"). When displayed, this will start a new line with the correct number and indentation. There can be any number of <li> tags. Finally, the list ends with the tag </ol>:
| | |
|---|---|
| <ol> <li> COS 109 problem set <li> Call home <li> Sleep </ol> |
|
Unordered lists are nearly identical to ordered lists, except the browser does not number the list items. Instead, it uses symbols such as a box or a circle to mark each list item.
You can create an unordered list in the same way as an ordered list, using <ul> </ul> tags instead of <ol> </ol>. Here's the same list, unordered:
| | |
|---|---|
| <ul> <li> COS 109 problem set <li> Call home <li> Sleep </ul> |
|
| Use an ordered or unordered list to add a "Top 5" list to your page. It can be anything: your top five movies, books, food, or whatever. |
Important: Material on other web sites may be subject to copyright, and there are both legal and University restrictions on what you can do with copyrighted material, including images and sound. The law is evolving in this area and copyright holders can be very aggressive in asserting their rights (and sometimes more than their rights). You should be aware of the University's policy on intellectual property rights.
In part, this says
"If you want to use an object or work, which may include an image, a background pattern, a section of text or a musical, film, television show, or video selection that you would like to use, you should make a good faith effort to determine that such use constitutes a "fair use" under copyright law or you must obtain permission of the owner or copyright-holder. As a general matter, you are free to establish links to Web pages you enjoy and which you would like to share with others. But you are not generally free to copy or redistribute the work of others on World Wide Web (or elsewhere) without authorization and proper attribution."
Accordingly, you should be especially careful of images or sounds that might be of commercial value to their copyright owners. If a site has an explicit copyright notice, you should not copy anything from it.
For purposes of this lab, and in creating other web pages, you should add a citation for each image or sound that you link to or copy; this is equivalent to citing sources of quotations in a paper. If there is any ambiguity about whether a sound or image is copyrighted, use a link, not a local copy.
We won't do video in this lab, but everything here applies to video clips as well, though the file types will be different.
One of the things that distinguishes an eye-catching site from a mundane one is the clever use of pictures, or images. These images can come from many different places -- you might draw them yourself, you might upload photographs, and under some circumstances you can take them from other web sites.
In an upcoming lab you will learn more about how images work. For now you can use images you find on the web, or any other picture, perhaps from your phone or camera. As long as the filenames of the pictures you are using end in ".gif", ".jpg" or ".png", the pictures will be displayable.
First, make a link to an image without copying it onto your computer:
|
Save and view your web page to make sure the picture appears correctly.
Next, display a picture that you have saved locally:
|
For now, we will be working with sounds that you find somewhere on the Web. If you don't have the URLs for any sounds, use a search engine to locate one. There are also sound files on Windows and MacOSX; use Search / Files or Finder to look for possibilities. Re-read the discussion of copyright above before you choose a sound file. Do not use a copy of a popular song, for example.
Sound files come in a wide variety of formats, including .WAV ("wave"), .MP3, and .MID. For this lab, use MP3 or MIDI files because they're smaller. Just as the web browser is only able to display certain kinds of picture files, by default it can only play sounds from certain kinds of sound files as well. You will know that you have an appropriate file because the last three letters of its filename (its extension) will be .MP3 or .MID (or maybe .MIDI).
When you find a sound you like that raises no copyright issues, use the following instructions to include it in your web page.
|
The final topic for this section is how to use pictures as hypertext links. You've already seen how to use the <A HREF> tag to turn text into a hypertext link. If, instead of text, you used those tags to surround a picture,
<A HREF="https://www.princeton.edu"><img SRC="pusmall.gif"></A>would produce
pusmall.gif is the name of the file that contains the Princeton name and logo. We originally downloaded it from the University's web site.
Using an image as a link is exactly the same as using text. There is something on the web page which the viewer can click to go to the new location. From the technical viewpoint, there is no difference between a picture and text except for slightly different tags.
|
|
OIT provides a way for students and other university members to create personal web pages. It is based on cPanel, a widely used system for creating and maintaining small web sites. You can readily extend it beyond these labs if you like.
You have to set up your cPanel site before you can make your index.html visible. Begin by reading https://helpdesk.princeton.edu/kb/display.plx?ID=1123. You can then request access with this link: https://cpanel.princeton.edu.
Once this has been set up (which should take only a few minutes), you can access your cPanel control page at
your_netid.mycpanel.princeton.edu/cpanel
If you don't get a confirmation message from OIT about your new cPanel account quite soon, check your Gmail spam folder. Google thinks the confirmation is spam in some cases.
Use the File Manager icon to upload your index.html file. Do these steps to upload each new file:
nagivate to your_netid.mycpanel.princeton.edu/cpanel click File Manager select Web Root (public_html/www) click public_html on left upload file to that (leave the modes alone)
Once you have uploaded the file, it should be visible to the world as
your_netid.mycpanel.princeton.edu/filenameIf you omit the filename part, index.html will be used by default.
Again, make sure that the uploaded files only contain information that you wish to share with the whole world.
For now, it's easiest to put your files at the top level in your cPanel file system, though ultimately it might make more sense to have separate folders for different labs.
You will notice that there are several icons for creating new files and for editing files that have been uploaded. Feel free to experiment with these, but don't use the HTML Editor to edit your own files for this lab; the goal here is for you to learn what's happening underneath. Plain "Edit" is best. Bear in mind that if you edit the uploaded version, your changes won't have any effect on the file on your own computer, so watch out for inconsistent versions.
|
At a minimum, your index.html must have the following:
|
If your page looks a bit lame, you're welcome to fix it up and make it look more like ones you find attractive. If you want to know how a web site achieves a certain look, examine its HTML code by selecting "View | Page Source" or equivalent in your browser window while you are visiting that page. If there are tags you do not understand or things you cannot figure out how to do, ask a TA or check out w3schools.com, which is always helpful.
You might also find it instructive to view your web page with more than one browser; sometimes even simple things look different, and if something is grossly different, you might want to try to make it more uniform.
We will do more HTML in later labs, especially for images. Meanwhile, we will post links to the web pages created for this lab so you can see what your friends have done (and vice versa).
Make sure your page, including the images and sound, is accessible at https://your_netid.mycpanel.princeton.edu. Ask a friend to view your page and check all the links from his or her computer. You will have to make sure that any image or sound files that you added are also readable. Use the cPanel web interface to adjust permissions if necessary.
When you are sure that your page is displaying correctly,
upload your index.html and other files to
https://dropbox.cs.princeton.edu/COS109_F2018/Lab1.
