Frank da Cruz
Sat Jan 17 12:07:32 2004
When you're just learning and want to experiment, you can do everything on your PC. Create a new directory ("folder") for your website, and then put the web-page files (HTML plus any pictures) in it. Use NotePad or other plain-text editor (not word processor) on your PC to create an index.html file, which you can view locally with your Web browser. (You can also use word processors such as Word or WordPad if you save in "plain text", "text", "text document", or "text document MS-DOS format".) Later I'll explain how you can install your web site on the Internet.
This sentence contains <b>bold</b> text.
produces:
This sentence contains bold text.
A Web page starts with a series of HTML commands, and ends with a few more. The contents go in between:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Sample Web Page</title> <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#ffffff" text="#000000">(Contents go here)
</body> </html>
The first line (DOCTYPE) specifies which language the page uses; just copy this line1. The next line, <html>, starts the page, and is matched by the last line, </html>, which closes the page. <head>, starts the heading, which contains a title to be displayed on the browser's title bar and a declaration of the character set (usually US-ASCII, ISO-8859-1, or UTF-8). </head> closes the heading.
The <body> statement starts the body of the document and can contain specifiers for color and other attributes. This one chooses black writing on a white background. The body is closed by </body> statement.
As you can see, most HTML commands (but not all!) come in begin-end pairs: <b>...</b>, <head>...</head>, etc. The closing part of the command has a slash (/) between the < and the first letter of the command.
Blank lines and line breaks are ignored. The browser automatically "flows" your text into lines and paragraphs that fit in its window. Paragraphs must be separated by <p>. Line breaks can be forced by <br>.
C:\Documents and Settings\Olga\Desktop\Web\index.html
Now to see your new web page, just double-click on the Web folder and then double-click on index.html.
Now you're ready to start adding "content" to your web page. Go back to NotePad and replace the title and "(Contents go here)" with whatever you want. Any time you want to see the result, use File -> Save in NotePad and then click the Reload button on your browser.
The next sections tell how to achieve different kinds of effects.
__________________
€
(new to 4.01). Otherwise we would stick with the oldest
available verifiable version, which is 2.0.
ä a-umlaut ä Ä A-umlaut Ä á a-acute á à a-grave à ñ n-tilde ñ ß German double-s ß þ Icelandic thorn þ
Examples:
CLICK HERE for a complete list. Cyrillic, Arabic, Hebrew, Greek. Japanese, etc, are a bit harder, but doable.
If you want to include <, &, or > literally in text to be displayed, you have to write <, &, >, respectively.
If you are a Kermit user, you can find a script to convert plain text to HTML HERE.
If the text contains lists, tables, or other structures, read on.
If you have a Microsoft Word document you want to convert to HTML, and your copy of Word does not allow the file to be "Saved As" HTML, then save it as plain text and follow the same instructions. In this case you lose the "richness" (bold, italics, font changes, etc) when you save the file, and will have to put the effects back by hand (next section).
This sentence is bold. This sentence is in italics. This sentence is in bold italics. This sentence is in typewriter font. This sentence has underlined words and underlined bold words. This sentence has colored words. This sentence has big words. This one has very big words. This one has very small words.
This is a "blockquote", which is like a regular paragraph, but it has bigger margins. Begin a blockquote with <blockquote> and end it with </blockquote>. Environments such as blockquotes, lists, etc, that have a beginning and an end always use paired commands like <blah>...</blah>.
This is a blockquote inside another blockquote, which shows how HTML environments can be "nested".Here we are back in the first blockquote again.
And here we are back outside of the first blockquote.
And here is a Description List (<dl>). using Kermit commands as an example:
You can have lists within lists:
And you can have ordered lists that use letters instead of numbers:
Here is a link to the Kermit Project home page.
Here is a link to Section 5 of this document.
Here is a link to Section 4.0 of the C-Kermit for Unix Installation Instructions.
Here is a link to a picture: CLICK HERE to see it.
Heading A Heading B Heading C Cell 1A Cell 1B Cell 1C Cell 2A Cell 2B Cell 2C Cell 3A Cell 3B Cell 3C
Same table again but with borders:
Heading A Heading B Heading C Cell 1A Cell 1B Cell 1C Cell 2A Cell 2B Cell 2C Cell 3A Cell 3B Cell 3C
And again but with Column C right-adjusted:
Heading A Heading B Heading C Cell 1A Cell 1B Cell 1C Cell 2A Cell 2B Cell 2C Cell 3A Cell 3B Cell 3C
There are easier ways to do this than what I describe below, but they require add-on software. The following method should work for everybody who has Windows and an Internet connection.
If you create a public_html subdirectory of your login directory, give it world read and search permission, and then create an index.html file in that directory and give it world read permission, you'll have a home page. In this example "$" is the shell prompt (yours might be different), and what you type is underlined. CAUTION: the directory name is public_html but the underscore might be obscured the underline in the examples below. Whenenever typing "public_html" always include the underscore.
$ cd (Change to your login directory) $ mkdir public_html (Create public_html subdirectory) $ chmod 755 public_html (Give it world read/search permission) $ cd public_html (Enter the public_html subdirectory)
You only have to do this part once.
Let's assume you have created a website in the Web folder on your PC. Here's an example of how to upload your Web files to your public_html directory on Columbia University's Cunix server using FTP (File Transfer Protocol). First start the FTP program:
Start -> Run
and type "ftp" in the box. An FTP window opens and an "ftp>" prompt appears. Type the underlined commands at the "ftp>" prompt (substituting your own user ID, etc):
ftp> lcd Desktop Local directory now C:\Documents and Settings\olga\Desktop. ftp> lcd Web Local directory now C:\Documents and Settings\olga\Desktop\Web. ftp> open cunix Connected to cunix.cc.columbia.edu. 220 Cunix FTP server (Version 5.60) ready. User (cunix.cc.columbia.edu:(none)): olga 331 Password required for olga. Password: (type your password here) 230 User olga logged in. ftp> cd public_html (That's "public_html" in case you can't see the underscore) ftp> binary ftp> put index.html 200 PORT command successful. 150 Opening ASCII mode data connection for index.html. 226 Transfer complete. ftp: 285 bytes sent in 0.00Seconds 285000.00Kbytes/sec. ftp> site chmod 664 index.html 200 CHMOD command successful ftp> bye
This sends the index.html file to your public_html directory on the server. You can send any other file by subsituting its name for "put index.html. If you want to send all the files in your Web folder, replace "put index.html with "put *" (asterisk, meaning "all files" in this directory). Always use binary mode unless you know what you're doing.
If the "site chmod" command failed (this service is not supported by some FTP servers), you have one more step. Before others can see your web files, you have to give them "world read" permission. Again, log in to the server using a terminal emulator (Telnet, SSH, Kermit, whatever), and:
$ cd ~/public_html (Enter the public_html subdirectory) $ chmod 664 * (Make all files publically readable)
Now you have a home page. If you were at Columbia and your login ID was "olga", the address (URL) of your home page would be:
http://www.columbia.edu/~olga/
If you want to add pictures to your Web page, you can upload those too (also with Kermit or FTP), and you also have to "chmod 664" all the files to make them readable by everybody. Every time you add new files to your public_html directory, you have to "chmod 664" them so they are accessible, either in the FTP session itself (as shown previously), or by logging in to the host and:
$ cd ~/public_html (That's "public_html" in case you can't see the underscore) $ chmod 664 *
Pictures should be in JPG or GIF format. To include a picture ("image") in your page, include a statement like this at the desired spot:
<img src="filename" alt="brief description" width="100%">
Replace filename by the name of the file (e.g. skyline.jpg). You can omit or experiment with the width= clause. 100% means "make the picture the same width as the browser window."
Now you have your own home page on the Web, and your own URL (Uniform Resource Locator, or Web address). In this example, the URL is:
http://www.columbia.edu/~olga/
Of course, if you prefer, you can also do all the Web-page editing directly on the server, using an a server-based text editor like EMACS, Pico, or Vi while logged in to the Unix shell. In that case you don't need to upload anything (except maybe photos), but then you also need to be more familiar with the server's Unix environment and commands and utilities.
If you have mastered the simple techniques shown in this page, you know the basics. Which is more than can be said of many "web designers" who only know how to use prepackaged software to create web pages by picking things from menus and moving things around with a mouse.
To learn more, follow these links:
Don't worry that the HTML 4.01 specification says that everything from HTML 1.0 is "deprecated" and we're supposed to be using XHTML or XML and "cascading style sheets" or whatever. They're not allowed to take the original simple HTML syntax away.
If your web pages doesn't look the way you expected, try using the Validation Service. If you have errors in it, this will tell you what they are. The most common errors are unclosed environments (such as <blockquote> without a matching </blockquote>) and missing doublequotes inside commands, e.g.:
which must be:<a href="http://www.columbia.edu/kermit>
<a href="http://www.columbia.edu/kermit">
For more about "special characters" and character sets, see:
(End)