Exercise 1: Getting Started with HTML Programming

Sandra Akmansoy
University of Texas at Austin
Fall 1997


Table of Contents

Introduction

The purpose of this first exercise is to get you acquainted with the LRC and with HTML, Hypertext Markup Language, which is the standard for document formatting that allows a document to be read and correctly displayed regardless of the viewing computer, its operating system, and the viewing software. . By the end of this exercise, you will have learned how to set up your email account and your personal home page.

The World Wide Web began in March 1989, when Tim Berners-Lee of CERN (a collective of European high-energy physics researchers) proposed the project to be used as a means of transporting research and ideas effectively throughout the organization. Effective communications was a goal of CERNs for many years, as its members were located in a number of countries.
The operation of the Web relies on hypertext as its means of interacting with users. Hypertext is basically the same as regular text - it can be stored, read, searched, or edited - with an important exception: hypertext contains connections within the text to other documents.
The Internet is the catch-all word used to describe the massive world-wide network of computers. The word "internet" literally means "network of networks". In itself, the Internet is comprised of thousands of smaller regional networks scattered throughout the globe. On any given day it connects roughly 15 million users in over 50 countries. The World-Wide Web is mostly used on the Internet; they do not mean the same thing. The Web refers to a body of information - an abstract space of knowledge, while the Internet refers to the physical side of the global network, a giant mass of cables and computers.( www.hcc.hawaii.edu/guide/www.guide.html#t4 )

There are many pages on the World Wide Web to help you design a home page. Here are a few links:
HTML Basics Course
Leaning to Publish at UT
Netscape Gold Web Starter
Yahoo! Computers and Internet:Information and Documentation:Data Formats:HTML:Guides and Tutorials
Yahoo! Internet and World Wide Web History
Yahoo! World Wide Web & Internet
Yale Style Manual-Basic Web Interfave Design

...more Website Design Links

Setting Up Email

The first step is to set up your email account. Sit down at a PC and start Netscape. Find the LRC's home page at http://www.ce.utexas.edu/docs/LRC/LRC.html. Next select Email from the list of Topics . Once the Electronic Mail Alternative page has been loaded read the document University Mailbox Service, then click to run the setup program.

Setting Up a User Account

Here is what you need to do to set up your user account: Go to the LRC Home Directory Account Page, scroll down to the end of this page and fill in the form requesting an NT account. You will get confirmation of establishment of this account by email. You will be allocated 25 MB of file space along with your account.
Once you have received your account, you will be given a username and a password. You may access your NT Account by sitting at a PC and loging in with your username (instead of the PC number) and your password ( instead of ECJ). Once you have done this, open the file manager and find your username in the civil/stu drive. In your account, a directory called public_html will have automatically been created . You will place all files concerning your home page in this directory.

Setting Up Your Home Page

Basic Components to HTML Programming

HTML programming is quite simple once you know the basics. The easiest way to create an HTML file is to use notepad and save your file as a .HTML rather than .TXT.
HTML codes are always surrounded by a "<" less than and ">" greater than character. HTML codes are not case-sensitive, so you can use either upper case letters or lower case letters. Itis easiest to find HTML codes if they are typed in upper case, in contrast to the document contents around them.

HTML uses open and close codes (<>) to surround text that is different from the text that precedes or follows it. For example, if you want to write the words "home page" in italic, within notepad you would type " <i> home page </i>. The / in </i> signifies that it is the end of the text to be italacized.

Some HTML codes are stand-alone and require no closing tags, like the tags for images or horizontal rules. For example, to create a horizontal rule across the windows insert the <HR> tag. To insert a picture file insert the <IMG SRC="image.jpeg"> tag (with the appropriate file name inserted).

Below is a list of the most common syntax.

  1. You must indicate that this is an HTML document by using the proper syntax: <html> </html>
  2. Mark the beginning of the document header using <head> </head>
  3. Your page must have a title. This titles serve in helping the user know what your page is about when using bookmarks or searching. However, the title will not appear on the page itself. <title> </title>
  4. You can use headings for titles within your page. <h2> </h2> , <h3> </h3> ...
  5. Once you start the body of your page you must indicate it using the the proper syntax. <body> </body>
  6. To write text in bold, use the syntax <b> </b>
  7. To write text in italic, use the syntax <i> </i>
  8. To place text in the center of the page, use the syntax <center> </center>
  9. To have a line break, use the syntax <br>
  10. To start a new paragraph, use the syntax <P> </P>

Here is a sample home page . Also, you can check out home pages from last semester's class. One of these pages was designed as a tutorial for Web design. Within the next few weeks, you will learn how to make sophisticated home pages like these!

Here is a list of tips for Web page designing.Make sure you check out the Do's and Don't's of Web designing before starting your home page.

Linking Your Email address

It is always a good idea to have your email address on your home page so that people who are interested in your work can contact you. It is especially convenient for the user to have a link to your email. That way by clicking on the screen, Netscape will automatically open a window for them to send you and email.
The syntax for linking your email address is:

    <A HREF=mailto:yourname@mail.utexas.edu>Send Me An Email </A>

where the phrase "send me an email" will be the underlined link.

Placing Your home.html In Your User Account

Once you have your home.html file ready you must place it in your user account. Access your file space by ftp or directly from one of the machines in the Learning Resource Center and put the home.html file into your directory called /public_html that is automatically created within your NT account's file system.
Here are the instructions to get into your LRC file space from a remote login

  1. Connect to the UT system using the UTCONNECT software.
  2. Once you are connected, start the application "WS_FTP" comes with UTCONNECT.
  3. In the window that comes up select:
    1. Hostname: civil.ce.utexas.edu
      Hosttype: Microsoft NT
      User ID: "your user name"
      Password: "your password"
      Remote host: home1/stu/"your user name"

  4. Once connected, change to the "public_html" directory.
  5. Transfer whatever files you want to you "public_html" directory. Remember to select:
    1. "ascii" for *.html and *.htm files and
      "binary" for *.jpg or *.gif files

Your web address will be: http://www.ce.utexas.edu/stu/username where "username" is the user name on the Windows NT account that you requested.
Overnight, a script is run in the LRC which detects the presence of your home.html file and adds your name to the list of students who have home pages.

Assignment

Your assignment for next week is to set up your email account and a personal home page with at least your name and a link to your email.