RIT Home

Directories

Info Center/SIS

A word about Learning HTML by the Tags: This tutorial will provide you with background
in how the basic formatting of web pages work. Using editors to build web pages has become
common practice and reduces the learning curve or even the need to learn HTML, so do not be afraid to learn web development with these tools. The advantage you have of knowing some tagging, is the ability to debug the odd things editors sometimes do and the ability to experiment with the latest developments in HTML before the editors catch up.

Introduction to an on-line tutorial:

Go to the Bookmark option in the Netscape menu and select Add Bookmark.

 Select Bookmark again and you can drag down to select the HTML Tutorial. 

3 working windows:

1. for Netscape to view the tutorial, unless you print it.;
2. for the text or HTML editor for typing HTML; and
3. for a second Netscape window to preview your HTML document.

Table of Contents

• Concept 1: What is the Web or WWW?

 
• Concept 2: What is HTML?

 
• Concept 3: What RIT policies exist for making web pages public?

 
• Concept 4: What Internet connected computer can I use to make my web page public?

 
• Exercise 1: Exploring a template home page

 
• Exercise 2: Viewing the HTML source

 
• Exercise 3: Saving the HTML source to disk.

 
• Exercise 4: Setting up HTML documents

 
• Exercise 5: Creating Headings and Titles

 
• Exercise 6: Editing HTML and previewing changes through Netscape

 
• Exercise 7: Spacing and Section Lines

 
• Exercise 8: Formatting text

 
• Exercise 9: Linking to resources on the Internet

• Exercise 10: Linking to other html documents

 
• Exercise 11: Lists

 
• Exercise 12: Adding an address, copyright and mailto contacts to the web page.

 
• Exercise 13: Placing an image

 
• Exercise 14: Putting your web page on-line through the DCE (grace) account

Advanced Topics

• Exercise 15: Making a jumpable table of contents for your page.

 
• Exercise 16: Aligning Images

 
• Exercise 17: Backgrounds with swatches or hexadecimal numbers

 
• Exercise 18: Tables and Frames

• Helpful References

 
• Return to RIT Web Developer's Page

• The Web is an Internet organizational system made up of linkable documents known as web pages. Web pages can include many forms of digital media: text, images, video, audio, links to software, other web pages or even interactive scripts and forms.
• The web documents and files are made public through computers with Web server software connected to an intranet (internal network) or the Internet (global network).

 
• Web users access these documents and digital files using desktop client software browsers such as Netscape, Internet Explorer or Lynx, to name a few.

• 1) HTML is the coding or tags added to a text file to create web pages.

 
• 2) HTML tagged text files give browser software (Netscape) directions about

 
1. layout and format of the web page

 AND

2. navigational links or interactive sections of the page. 

---

An example of a formatting tag:
In the html editor:

<b>bold formatting example</b>

Previewed through the Netscape browser: bold formatting example

In the html text file typing a href presets the link to go to text.html
<a href="text.html">text document with an image</a>

In the browser it looks like this: Try it!

 text document with an image.
 
 

Note: Click the back button to return to this tutorial.

Policies for connecting to the RIT institutional web page are available at:
Guidelines for becoming an Information Provider: at URL: http://www.rit.edu/ServResources/IPGuidelines/index.html

Becoming part of the RIT institutional home page

If you are creating an official organizational RIT page, you will need to fill in the Information Provider form at URL: http://www.rit.edu/ServResources/IPGuidelines/request_form.html

When organizational web pages and forms are complete: Send an email message from an RIT mailer to the RIT On-line Committee to let them know if you have an organizational page to attach to RIT.

 From any RIT mailer send a message to: ROC

 Personal pages do not require this process. An on-line registration for student personal pages is available at RIT Student Pages under the "People" button on the RIT home page.

Option 1: The easiest way to put up a web page is to get an account on the DCE (grace) computer. Go to ITS Help desk, located in Ross Building #10, A291, Phone x6929 or TTY X2810.

For more information, see Exercise 14: Putting your web page on-line through the DCE (grace) account.

 Option 2: You can make your web page public from any Internet connected computer that runs web server software.

Some departments or colleges run their own server if they have the technical and staff resources to maintain it. They can still be an integrated part of the RIT Web page if there is a pointer made from the RIT web page to the department web server.
 

Hint: The second Netscape window you will launch in Step 1 may hide under the first so drag it aside.

 1. In Netscape, under the File menu, select New Web Browser

2. Click on the OPEN button of the second Netscape window. Type in the following Internet address known as a URL (Uniform Resource Locator) to go to a template home page. Any web page can be used as a template. If you prefer to use a blank page in text editor and type all the tags in throughout the tutorial. This is an option too.

http://wally.rit.edu/instruction/web/htmltags/template.html

3. Keep the first Netscape window available to view the tutorial. Or print it out to use on paper.

4. Using the second Netscape window to click through the highlighted links on the Template Page to see what they do.

1. Click in the second Netscape window titled: Joe's Somebody's Home page to make it active. Use the View menu to select Page Source.
2. A text or HTML editor will open to show you the text HTML file. The text within less than, greater than brackets < >.are HTML tags that code web pages.
3. Reduce the size of the view source text editor window so all 3 windows are visible on the screen. (2 windows if you are using a printed tutorial.)

1. Go to the Edit menu in Netscape of the working window and select Composer.
2. By the HTML Editors blank click the Choose button and select a text editor or HTML editor from the hard drive.
3. This will allow you to identify a text editor, word processor, or HTML editor on the hard drive.
4. Click OK. Try View then Page Source again.

Arrange 3 working windows so you can see them all:

1. Adjust your tutorial window to the size shown above. (or use a print out of the tutorial)
2. Move the template window (Joe Somebody's home page) to preview the changes you will make to the template home page; and
3. Make the third text editor window that shows the HTML coding visible for editing the HTML.

Now you are ready to create your own web page from the template!!!

Return to Table of Contents or scroll on. 

1. In the text editor, under File select Save As
2. Navigate your way to the directory/folder on the hard drive or disk where you want to save the document.
3. In the blank that says template.html change the name to index.html. You now have a html file to edit to make your own web page. On grace and most other web servers, the lead web document is named index.html.
4. Arrange your windows so all are visible.

Explanation of what you are viewing: These are the minimal tags required for a HTML document to be properly formatted. Most tags are paired. They have an opening and closing that act on the text, file or address in between them. Any typos will make them inoperable. The tags definitions are:

<HTML></HTML>- begin & end any HTML document

        

<HEAD></HEAD>- surround <TITLE></TITLE> only 

        

<TITLE></TITLE>- window name

                

<BODY></BODY>- surround content of HTML document.

<HTML>                  



<HEAD>                          

<TITLE>Sample HTML Document</TITLE>             

</HEAD>                                         



<BODY>

Content of page goes here. 

Headings, text, images, etc.

</BODY>

</HTML>

 Return to Table of Contents or scroll on.  

 Explanation: Headings are used to create categories within the content.

1. Go to the index.html in your text editor and type in  text for the main heading of the page by replacing the <h1>Joe Somebody's Homepage</h1> heading.
2. Change all the headings in the template to categories that you would like on your page. Try different sizes. Usually they are used in a hierarchical fashion with biggest to smallest for emphasis.

Now try Save in the File menu of the text editor.

Altering the title window

1. Go to the index.html to alter the Title of the home page. Change Joe Somebody's Home page within the <title> </title> to the name of your home page. It should be short. The upper limit for characters including spaces is 69.
2. In Exercise 6, you will preview this change. It will be in the top gray window bar of your second Netscape window.

Looking at HTML changes through Netscape

1. With the index.html open in the text editor, choose Save from the File menu to save all your changes.
2. In Netscape, under the File menu select Open Page in Navigator and select index.html from the hard drive.

If your index.html document is still open in Netscape:

1. Make additional changes to the HTML code in the text editor.
2. Save the changes in the text editor.

 
3. Click on RELOAD in Netscape to see the changes.

 

4. The Location box should show a path on the local hard drive if you use the open page command.

White space in the text editor is not recognized by Web browsers, unless you use spacing tags: See examples and then try your own.

 <p> is placed at the end of the line where a line break and a blank line are needed.

 Example:

 This is paragraph 1

This is paragraph 2

 <br> is placed at the end of the line to designate a line break NOT followed by a blank line.

 Example:

 This is a sample of line breaks at the end of each line.
Here is the second line with a line break.

 Explanation: Horizontal rules of varying lengths and widths create visual and logical breaks in a page. They are made with the:

 <hr>tag.

• Using hr size=? width=?% align=center
• left or right can replace center
• replace the ? with numbers of pixels for size and percentage for width.
• Noshade makes a solid black line.

1. <hr>:--thin line that goes across the page
2. <hr size=5>--line across the page with width size 5
3. <hr size=5 width= 75%>--line 75% across the page with width size 5
4. <Hr size=15 width=65% align=center>--line 65% across the page, centered with width size 15
5. <hr noshade>--solid black line across the page

Examples 1-5

 Note: Without <p>, or <br>, text or the web page will automatically wrap to the size of the browser window. This is a nice feature to take advantage of different size screens.

2.) After each section if they are long, you may pick a <hr> tag  to break up your page visually with section lines. See an example below that you like and use it.

3.) Save your changes in index.html and reload to preview changes.
Return to Table of Contents or scroll on

To format text with styles and alignment tags are required. See the examples then try some of your own in your index.html document.

Pre formatting

<pre>...</pre> goes around pre formatted text to create spaces and tabs. Text will appear as courier font.

 Example:

tabs & spacing is possible  

        with text in-between PRE tags

 <center>...</center>

 <blink>...</blink>

 Example:

Blinking text can take away from content. Do not overuse.

 

Example Text Formatting	Tags
Bold text sample	<b>Bold text sample</b>
Strong text sample	<strong>Strong text sample</strong>
Italics text sample	<i>Italics text sample</i>
Emphasized text sample	<em>Emphasized text sample</em>
Typewriter text font sample	<tt>Typewriter text font sample</tt>
This is a sample citation. -G. Walsh	<cite>This is a sample citation. -G. Walsh</cite>
Sample block quote. -M. Chen	<blockquote>This is a sample block quote. -M. Chen</blockquote>

1.) In index.html, choose a category and begin typing in some content. Use some of text formatting tags below to make text bold or centered. Be adventurous and try some others.

 2.) Save your changes in index.html and reload to preview changes.
 

• Every document, database and file on the Internet has its own unique address or computer location. These address are called Uniform Resource Locators or URL.
• This is important in allowing us to make links to other related sources over the Internet from our own web pages.
• For instance, if there is a resource for my class on a web page in Australia, I can make a clickable item that goes directly there IF I have the URL for that resource.
• To find Internet URL addresses (Uniform Resource Locators),

look at the location bar in Netscape, when you are at a site to record the URL.
Another way to record these is to bookmark them or copy and paste them directly into your HTML.

Example:

<a href="http://www.rit.edu">RIT On-line</a>

 It will appear as: RIT On-line

Notice:

• Quotation marks around the URL
• Text between the tags will appear on the page. i.e. RIT On-line

• Yahoo: http://www.yahoo.com
• Altavista: http://www.altavista.digital.com
• RIT Library: http://wally.rit.edu

Exercise 10: Linking to other html documents

Create a second html document to link to:

1. Select File/New in your text editor and type in the basic HTML tags.
(see Exercise 4:)

2.) Between the body tags, type whatever content you like. Use some of the formatting tags you have learned to make it look nicer. Save the document as somename.html (Call it whatever you like as long it ends with the .html ending) in the same folder/directory as the index.html document.

Link the page to your index.html:

1.) In index.html, type the word or phrase you want to
make clickable to go to your new second document. (i.e. My schedule, resume, course descriptions, etc.)

2.) Type the following tags around your clickable text. Replace My schedule with your own text and somename.html with the name of your .html document.

<a href="somename.html">Course descriptions</a>.

3.) Save and preview by reloading in Netscape.
It will look like the this link:  Course descriptions

 Return to Table of Contents or scroll on  

1.) In index.html change the <ul></ul> list tag to <ol></ol> Each line of the list must still have the single <li> to designate a line in the list.

 2.) Save and reload to see your bulleted list change to a numbered list.

3.) Change them back if you prefer or try other lists as seen below.

At bottom of web pages an address or contact information is usually placed to take credit for the page and provide a source for updating and comments. Copyright and last updated information is also common. In some pages a clickable mailto or form is created to provide feedback on the page.

1.) Following the examples below: Add an address to your index.html page.
2.) Save and reload.

Examples:
 

A: The contact information is surrounded by this tag: <ADDRESS>...</ADDRESS> It will appear in italics.

 Copyright © Use the tag &#169;

 B. The mailto is created with the
<A HREF="mailto: mlfwml@rit.edu">mlfwml@rit.edu</A>

Note: Mailto does not work in all browsers, so providing the address in text will let all users provide feedback.

Here is a fully formatted address example:

The example appears as follows in the browser:

Important: Image tags only link an image file to the page. The gif or jpeg
file must be kept with the index.html or other html document to appear.
This is also true of background images. They are not part of the html document.

• Images can be used as illustrations in a web page.
• Using ALT tags allows descriptions to appear in text-only browsers.
• Formats of images are usually JPEG (.jpg) or GIF (.gif)

.gif is common to the most browsers although JPG is becoming more common.

Getting an image

1. Use an image of your own in GIF or JPEG format or...
2. If you are reading this from print connect to the tutorial at http://wally.rit.edu/instruction/web/htmltags/
3. On the Mac, click down and hold on an image.

On the PC, click the right mouse button and hold on an image.
4. Try an image below for practice but remember copyright.
5. A menu will appear in the page.
6. Select Save this Image As and a dialog box for naming the image will appear.
7. Change the name and save it to the folder/directory on the hard drive where index.html is located.

Other options for obtaining images:
• Mac scanning
• PC scanning
• RIT images
• web collections of images
• cd-roms of image collections.(Check copyright statements.)
• photo CDs

Placing an Image with an ALT title

1. Type the following tag with the name of your image. We will use RIT_Tiger.gif in our example.

<img src="RIT_Tiger.gif" alt="[Image of the RIT Tiger]">

 i.e. 

2. Always include an short descriptor of the image in the ALT tag.
3. This is a helpful for those that look at your web page through a text-only browser.
4. Note: Alt messages only appear in text browsers. i.e. alt="Image of the RIT Tiger"
5. Save and reload to see your image appear.

Exercise 14: Putting your web page on-line through the DCE (grace) account

To set up a www page you need a DCE (grace) account to accommodate requests to your page, available from ITS (Ross, A291--x6929).

There are 2-steps: Setting permissions in your grace account to make web files world readable and FTPing files to your account.  Transfer HTML files, images and other html files to your DCE Grace account:

Step 1: Setting permissions to make files world readable

1. Run Telnet (Open connection Host: grace.rit.edu)

or on a terminal at the Local>c grace, or
connect to the VAX as usual and telnet grace.rit.edu from the $.
2. Login with your DCE username and password to grace. Note: ofw will only work on grace. On other UNIX machines you must set UNIX protections.
3. If this is the first time into your grace account, type mkdir www at the %
4. Type ofw at the % prompt to get a prompt:
5. This will open your account for WEB access

Is this what you want to do? [y,n] Type the letter y
6. If you do not get the open for web prompt: type /usr/local/bin/ofw at the %.
7. Type exit at % to logout.

 On an Internet connected PC run the WS-FTP program (available at http://www.ipswitch.com/downloads/

FTP from a networked Macintosh
FTP from a networked PC

1. In Fetch, select File then New Connection.
2. Host: grace.rit.edu
3. UserID and Password: Type in your DCE grace account info. Click OK.
4. Double click www in the window.

or If no www exists, choose Directories, Create New Directory and type in www. Now, double click www.
5. Select Remote Menu then Put Folders and Files
6. Select all .html files and image or other associated files one by one. from your hard drive and click Add each time.
7. Click Done when all files have been selected.
8. Select 2 types of files. Text and Raw data from the pop-up menu.
9. Click OK and multiple files transfer. (Running dog icon.)
10. Select File then Quit.

1. Click on WS-FTP. A Session Dialog Box will appear. Click Connect if it does not appear.
2. Host: grace.rit.edu
3. UserID and Password: Type in your DCE grace account info.
4. Leave the Account, Remote Host and Local PC fields blank.
5. Click OK
6. The transfer dialog box lists the Local PC directory and the connected Remote System directory of your account. Files of the selected directory are also displayed.
7. Select www under Remote System. Click ChgDir button on remote system.
8. If there is no www, click the mkdir button on the remote system side and type www. Click www to select it and ChgDir button.
9. On the Local System menu use the ChgDir button to open the directory where your web files are stored.
10. Holding the Shift Key down, click to select the .html files images and any other files connected with the web page.
11. Click AUTO as the mode of transfer. This will transfer text as ASCII and images and multimedia and binary.
12. Click the right arrow --> to move the files to your grace account in the www directory. Click Close to end the connection.

http://www.rit.edu/~your_username

For example:

 Return to Table of Contents or scroll on.  

 The tutorial and the template page contain a Table of Contents. When clicked the table of contents items jump to the related section further down the document.

 The key elements are a clickable point created by the following tag:

 <A HREF="#anchor1">text</A>

AND an anchor that marks where to jump to:

<A Name="anchor1">text</A>

Notice: The "#anchor1" text in the A HREF statement must match the text "anchor1" in the A Name statement. 

<ul><li><a href="#crs1">Course 1</A>
<LI><A HREF="#crs2">Course 2</A>
<LI><A HREF="#crs3">Course 3</A>
</UL>

<a name="crs1">Course 1</A>
Contents of this course 1 section...

 <A Name="crs2">Course 2</A>
Contents of this course 2 section...

 <A Name="crs3">Course 3</A>
Contents of this course 3 section.

 The above will appear like this:

Courses Example

• Course 1
• Course 2
• Course 3

Course 1
Contents of this course 1 section...

Course 2
Contents of this course 2 section...

Course 3
Contents of this course 3 section.

1.) Placing an image with an ALT tag:

Tag:<img src="www.gif" alt="World Wide Web icon">

 Explanation: Note: Alt messages only appear in text browsers. The above example will appear as "World Wide Web icon" in a text-only browser like Lynx.

2.) Pointer to an image at a different URL

Tag: <img src="http://www.rit.edu/images/RIT_Tiger.gif" ALT="Image of RIT Tiger">

Explanation: If the image at this URL address is moved, it will no longer appear in your document.

3.) Aligning text with images
align text to top of image

 Tag:<img align=top src="construction.gif" alt="Page Under Construction">align text to top of image

 align text to middle of image

 Tag:<img align=middle src="construction.gif" alt="Page Under Construction">align text to middle of image

 align text to bottom of image

 Tag:<img align=bottom src="construction.gif" alt="Page Under Construction">align text to bottom of image

 
4.) Making an image and text clickable to link to another file.

RIT Dorm Room Sample

 Tag:<a href="dormroom.html"><img src="dorm.gif"> RIT Dorm Room Sample</a>

Explanation: Clickable image and text link to another file.

 Other links could include sound, image, video or other text files.

 Return to Table of Contents or scroll on 

Exercise 17, Exercise 18 and References are links outside of this tutorial. You must connect to the tutorial page to use them.