Publishing to the World Wide Web

PUBLISHING TO THE WORLD WIDE WEB Copyright © 1999 The President and Fellows of Harvard College All Rights Reserved TABLE OF CONTENTS PUBLISHING TO THE WORLD WIDE WEB ................................................................... 1 Direct HTML Editing vs. Web Design Tools ................................................................ 1 Creating a Web Directory In Your Unix Account ........................................................... 1 Using Pico ................................................................................................................. 2 Setting File Permissions ............................................................................................ 2 INTRODUCTION TO HTML........................................................................................ 3 THE BASIC WEB PAGE ......................................................................................... 4 Useful HTML tags ....................................................................................................... 4 Lists ........................................................................................................................... 5 Using Tags with Parameters ....................................................................................... 5 URLs .......................................................................................................................... 6 The Anchor Tag .......................................................................................................... 6 Mailto: Links ............................................................................................................... 7 ADDING IMAGES .................................................................................................... 8 Scanning Images........................................................................................................ 8 Downloading Images .................................................................................................. 9 Transferring Images to Your Unix Account ................................................................. 10 Text Alignment .......................................................................................................... 12 WHERE TO GO FROM HERE ................................................................................. 13 The Harvard Computer Society................................................................................. 13 APPENDIX A: BASIC PICO AND PINE EDITING COMMANDS ........................................... 14 Publishing to the Web The Harvard Computer Society PUBLISHING TO THE WORLD WIDE WEB It is not too much to say that the World Wide Web (WWW) has revolutioned modern society. In just a few years, the web has grown from its humble beginnings in a physics research facililty in Switzerland, through a low-key but widespread adoption in government and academic circles, and into the globe-spanning, multi-billion dollar multimedia e-commerce web of today. These days, it sometimes seems like everyone and their dog has their own a web page. It has been suggested that a company isn’t a real company any more unless they have a “.com” on the end of their name. But you don’t have to be a huge multinational corporation to establish a presence on the web—one of the greatest features of the web is that it is a great equalizer, allowing single individuals to publish sites just as easily as corporations or universities. Students can, and do, make web pages that are visited by hundreds, riding the cutting edge of design and multimedia. There’s not enough time in any one seminar to take you through absolutely everything that can be done with the web. Our goal, instead, is to cover just the basics of the web’s HyperText Markup Language (HTML), the language in which all web pages are written. By the end of this seminar, you will have learned the syntax of HTML, created a home page in your FAS Unix account, and added content and graphics to that page. Direct HTML Editing vs. Web Design Tools There exist many different tools for publishing files to the World Wide Web. Some of the more popular of these include Microsoft Frontpage, Netscape Composer, and HoTMetaL Pro. Fundamentally, all of these tools do the same thing, which is to allow you to edit files containing HTML, the HyperText Markup Language that is used to construct web pages. However, you can also edit HTML files yourself directly, if you know the HTML language. Rather than focusing on any specific one of the dozens of web editing programs available, in this seminar we are going to teach you the basics of the HTML language and show you how you can edit HTML files directly in any text editor software. This will give you a deeper understanding of how the web works and will give you ultimately greater flexibility in your designs. Most professional web designers use both specialized web design software and direct editing of HTML, so knowing how to use both approaches is best if you plan on continuing with web design seriously. Creating a Web Directory In Your Unix Account First log into your Unix account. Second, create a directory called public_html. Only the files in public_html are visible to the world via the Web. fas% cd Be sure you are in your home directory fas% mkdir public_html Create (MaKe DIRectory) the public_html folder fas% cd public_html Change Directory into public_html You’re now ready to start creating and editing HTML files for the web! Whenever you log in, remember that you need to go into the public_html directory (by typing cd public_html) if you’re going to edit Web pages. -1- Publishing to the Web The Harvard Computer Society Using Pico Pico, the default editor for Pine, is an easy-to-use Unix text editor. Pico can be used to create and edit text files in Unix account, including Web pages. To start Pico, use either of these commands: fas% pico To create and edit a new file fas% pico [filename] To edit an existing file A list of commands appears at the bottom of the screen, so you don’t need to worry about memorizing commands! On screen, the notation ^X means to type x while holding down the [CTRL] key. Pico commands are not case sensitive. A short guide to Pico has been included in Appendix A of this packet. Setting File Permissions By default, all files in your home directory are private—only you can see or edit them. While this is certainly the behavior you want for most of your files, such as your email, if you want your web page to be viewable by other users, you must change its security permissions to allow other users to access it. Thus you must explicitly set the permissions every time you add a new file to your web page, either by creating a new file in pico, or by uploading a file via FTP. There are two ways to set permissions on your web page: 1. Run chmod -R a+rX ~/public_html “chmod” is the Unix command to change file permissions. a+rX means to give all users read and eXecute permissions on these files. The capitalization of the X means that the execute bit will only be set on directories, not files, which is the desired behavior. The -R option means to recursively change permissions on both the directory and all of its subdirectories. Then you must also run chmod o+x ~ to grant others the ability to execute your home directory, which is necessary for the web server software to be able to list and open your web files. 2. Run fixwebfiles. Fixwebfiles is a special script that exists only on FAS, and which checks the permissions of all files in your web directory and chmods any files which are not public already If you ever get an error from the web server stating that a file or directory could not be accessed, the cause is most often incorrect permissions settings. Re-run fixwebfiles and the problem will usually go away. -2- Publishing to the Web The Harvard Computer Society INTRODUCTION TO HTML HTML, the HyperText Markup Language, is a language for formatting text using special tags, used for creating documents for viewing on the World Wide Web. HTML is a very simple way of creating Web pages. It is not a programming language like C. Instead, a HTML file is just an ordinary text file, containing all of the words you want on your page, plus certain tags that describe how your page should be displayed—things like arrangement of text, placement of images, and even font and color choices are controlled by tags. Web browsers (such as Netscape Navigator or Microsoft Internet Explorer) read and understand these tags and display your web page accordingly. Tags are letters or words which are enclosed in <angle brackets>. Tags define the essential elements of your page, such as paragraphs, lists, tables, and images. For example, here are some tags: <A> <LI> <IMG> <HTML> HTML is case-insensitive, that is, the letters or words in tags can be uppercase or lowercase. However, many web designers feel that using uppercase letters makes it easier to distinguish the tags from the surrounding text. We’ll go over a list of the most important tags shortly. HTML also ignores tabs and line breaks in your document. For example, the following two segments of HTML appear exactly the same in a Web page: This is This is a sentence. a sentence. You will see that this works to your advantage, as you will be able to format your HTML files so that they are more readable while you are editing them, without affecting the content displayed by a Web browser. To force the creation of a line break in a Web page, use the or tags (described

Load more