Computers: Writing a Web Page

Class description:   Learn how to write simple web pages. Together, the class will make a website that will be published online. Students should have some previous computer experience and have used a web browser. Instructor Chris Gregerson maintains an extensive website at www.phototour.minneapolis.mn.us
Wednesday, 6:30-8:30
contact: chris@phototour.minneapolis.mn.us
This handout can be found online at:
http://www.phototour.minneapolis.mn.us/classes/html1.html

Session 1 - Basic concepts, Yahoo!Geocities, first exercise

Jargon:

"plain text" versus "formatted text"
Plain text is equally spaced ("fixed width"), all the same font, with no bold, italic, colors, or graphics. The previous sentance in plain text would look like this:

By comparison, formatted text may have more than one font, more than one size, be bold or italic, and have graphics in the same document.
Web Browser:
Internet Explorer, Netscape Navigator, and other programs used to read webpages. Web browsers display pages with formatted text, hyperlinks, and graphics. They start with a plain text file, but add formatting according to the HTML tags in the file.
HTML:
Short for Hyper Text Markup Language. HTML is a set of abbreviations that can be used to control how text shows up in a web browser. The abbreviations are called "tags", and are enclosed inside < and > to indicate they are a "tag" rather than just a normal word.

HTML is an "open standard"; like the metric system, no one owns it. An HTML "tag" looks like this: "<b>" (that tag makes text bold). HTML tags add graphics, hyperlinks, and everything else you see in webpages on the internet.

Text Editor:
Any program that lets you type text. Windows comes with a text editor called "notepad", which usually opens if you click "View"->"Source" in Internet Explorer. You can type text in, delete it, and cut and paste it.

Methods for writing webpages

There is commercial software for writing webpages that works like word processors, in a "what-you-see-is-what-you-get" manner (abbreviated "WYSIWYG"). A basic example is Microsoft Word, which can convert documents to HTML if you choose to save it in HTML format. These programs are called "visual HTML editors".

Visual HTML editors can be expensive, costing up to $600.00. The computers we are using don't have a visual HTML editor installed (other than Word). It's recommended that you know basic HTML tags even if you are creating webpages with a visual editor, so you can make corrections when the software makes an error or can't do what you want.

This class will cover the minimum HTML tags necessary to make a professional-looking webpage. We will not use any special software (just a web browser). You will be able to edit your webpage from any computer connected to the internet with a browser (here, at home, or elsewhere).

an online text editor (more examples are at http://www.w3schools.com/html/html_examples.asp)

Editing commands

When editing plain text, the common shortcuts below are useful.
HOME keymove you to the beginning of the line
END keymove you to the end of the line
DELETEdelete all the selected text or one character to the right
BACKSPACEdelete one character to the left
CUT, COPY, and PASTEIf you are familiar with using cut, copy, and paste you can use these in a web browser. They are under the "Edit" pull-down menu. Also, holding down the CONTROL key and then tapping x,c, or v will cut,copy, and paste (respectively).

Basics about writing HTML files

  1. All web pages are actually "plain text" files with HTML tags, which just appear as formatted text when viewed in a web browser. You can view this plain text by clicking "view" --*gl; "source" in the web browser.
  2. Although there is commercial software for writing webpages that works like a word processor, webpages can be written and edited with any text editing program.
  3. Webpages can be saved on your hard drive, or uploaded to a webserver.
  4. When a webpage is viewed in a web browser, the text if formatted according to the HTML tags, adding pictures and hyperlinks.
  5. HTML tags are always enclosed in < >. The "case" doesn't matter, they can be upper-case or lower-case.
  6. Many tags, such as bold <b>, must be "turned off". That is, one tag makes all the following text appear in bold, but another tag sets things back to normal. This is always identical to the opening tag except a forward-slash is added to the beginning: </b>,
  7. A webpage should be saved with a filename extension of ".html". This indicates that it's an HTML document, as apposed to a Microsoft Word document (.doc), or jpeg image (.jpeg).

Spacing in an HTML document

Extra spaces and blank lines are ignored. A single space between two words will count as one space, but more than one space is treated as only one. Example:
This text in an HTML file:Will look like this in a web browser:
Hello there

Hello


there
 Hello there Hello there

HTML Document Structure:

Webpages are supposed to have a few tags to identify them as HTML documents and indicate where the "header" versus the "body" of the document start. These are called "structural tags", and they should be the first thing you enter when writing a new webpage.
  1. <html></html>
    This is the very first tag in an html document. It identifies it as an html document. It should be closed at the very bottom of your html code.
  2. <head></head>
    The opening and closing head tags come at the top of your document. They allow you to give your page a title. Other tags that help identify your page can go inside the head tags; they don't show up in your webpage.
  3. <title></title>
    The text inside this tag will show up in search engines as your page title, and be on the browser's title bar. This tag must go inside the head tags.
  4. <body bgcolor="white/black/etc."></body>
    The opening body tag goes under the closing head tag. All your html code meant to show up in the browser goes between the body tags. The bgcolor attribute is optional, and will change the background color of the webpage. The closing body tag is followed by the closing html tag.

Your first exercise

Choose one of the computers around the edge of the classroom. Go to the address below and follow the instructions. The gray text below contains the answers.
http://www.phototour.minneapolis.mn.us/cgi-bin/exercise1-1.cgi 
<html>
  <head>
  <title>my title</title>
 </head>
 <body>
 
 <h1>My heading</h1>
 
 <p>This is my first paragraph. 
 <p>This is my second paragraph.
 </body>
 </html>

Opening a free Geocities web hosting account

We will use the free homepage service of Geocities.com to write our webpages and to host them. Follow the instructions below to create an account.
  1. Go to http://www.geocities.com/
  2. Once you're there, if you have a Yahoo! email address, use your yahoo id and password to login at this website.
  3. Find the link that reads "sign up for a free website" and click it.
  4. Complete the webpage form to creating a free website account. Before clicking "submit", write your account name and password on the top of this handount. Also, give me your account name before leaving (write it on the class list).
  5. Once you are finished, return to the geocities home page (www.geocities.com). You should already be logged in; Find the link on the right that says "HTML editor", and click it.
  6. This should display a form with a large text-editing window, and some basic HTML tags already entered. Put in your own title between the title tags, and put your name in the body of the document.
  7. Click the "Preview" button to see how the file looks.
  8. In the box labeled "Filename:", type "index.html" for the filename and click the button labeled "save".
  9. All visitors to your new account will see this file. The address for your account is: http://www.geocities.com/your-new-username

Review: