CE 311 K - Introduction to Computer Methods

Lab 1 - Introduction & Web Pages


Introduction

In this exercise you will get acquainted with

By the end of this exercise, you will have learned how to set up your email account and your personal home page.

Setting Up a User Account at LRC

If you are a student in the Department of Civil Engineering (or enrolled in a civil engineering course), you are eligible to have a User Account at LRC.  If you haven’t had a User Account at LRC yet, go to the LRC's home page, select Getting Started from the list of Topics to see the instructions.   Scroll down to the part about How do I get an account? on this page, press the appropriate button and fill in the form requesting an NT account. You will get confirmation of establishment of this account by email.  Once you have received your account, you will be given a username and a password. You may access your LRC Account by sitting at a PC and logging in with your username and your password.

Setting Up an IF Account and Internet Access at Home

There are several microcomputer labs available around the campus.  In order to access those computers, you are required to have an Individually-Funded (IF) account.  If you don’t have one, you need to set up one for yourself.  Go to ACITS’ IF account home page to see the instructions.  Once you get your IF account and do NOT have Internet access at home, you have some options offered by the University.  If you are living on campus, you can use direct ethernet connection ResNet in the dorms.  If you are living away from the campus, the University offers reasonable dial-up service called Telesys.  Go to the ACITS’ Internet access hope page to see the details.

Setting Up Your Home Page

 1.  The World Wide Web

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 as a means of transporting research and ideas effectively throughout the organization. Effective communications was a goal of CERN's for many years, as its members were located in a number of countries.  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. While the 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. The information on the Web is distributed globally on thousands of computers all across the world. Each computer contributes a small amount of disk storage space for the information that it publishes on the Web.

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. Hypertext allows you to view text and information and navigate from one point to another in the system in a nonlinear fashion. Hypertext can be viewed on any computer that has a hypertext processor called a browser. Examples of browsers are Internet Explorer, and Netscape. A browser is a program used to view hypertext information and navigate the Web.

A Web site is a location on the Web that publishes some kind of information. When you view a web page from a site, your browser connects to that site to get the information. Each web site and every web page or piece of information on that site has a unique address called a Universal Resource Locator (URL) which is a pointer to a specific piece of information on the Web. When people want you to visit their web site they just give you the URL, and you enter that URL in your browser to view the site. Some useful UT Austin URL's are:

Most URL's start with the letters http:// (HyperText Transfer Protocol), but other letters are sometimes used for file transfer (ftp://) or sending email (mailto://). University Web site addresses end in the suffix ".edu". There are other suffixes for other entities, e.g., ".org" for non-profit organizations, ".com" for profit organizations (commercial entities), ".gov" for government sites. The first part of a URL tells what site to look for the document in, then the remainder of the URL tells the path to get to the document on that site. For example, the main Web page for this course is at the URL:

http://www.ce.utexas.edu/prof/mckinney/ce311k/ce311k.html

where www.ce.utexas.edu is the address of the UT Civil Engineering Department Web server, "/prof/mckinney/" is the portion of the CE server where I store my Web pages, and "/ce311k.html" is the Web page containing information about this course.

The Web is very dynamic and interactive. Documents published on the Web are updated frequently, and information can be submitted over the Web (using forms or Java).

To publish information on the Web, you must have access to a Web Server. A Web Server is the program that runs on a Web site and is responsible for replying to Web browser requests for information. The University has a Web server running on the computer where your Web pages will be located. Your UT WEBSPACE account provides you with hard disk space on the server with the URL. 

 

When you use a browser to request a page on a Web site, that browser makes a Web connection to the server. The server accepts the connection, sends the requested information, and closes the connection. The browser then formats the information and displays it on your computer.  While a Web document is comprised of one or more web pages stored on a web site (the computer on the Web that stores the document) a Web page is an individual element of a web document (like a page in a book). A web page is a single file with a single filename that is retrieved from the web server and formatted for display by a browser.

 

In order for you to share your web documents with other web users, you will need to create and upload your web documents to the Webspace web server.  Go to the WEBSPACE home page (webspace.utexas.edu) and select Getting Started from the list of Topics to see the instructions.   Scroll down to the part about Accessing you Webspace account on this page to learn how to login to your account (username = your UTEID, password = your UTEID password).

 

 

Once you log into Webspace, your should see the following window (actually this is for my login so yours will look a little different):

 

 

In order for your web documents to be seen by web users you should create a folder named "www" in your Webspace directory.  To do this, select the "New Directory" button at the top of the screen. 

 

 

 

Then you need to change the sharing permissions on the new "www" directory in your account.  DO this my selecting the "Share" icon on the line for the "www" directory and then select the "Change" button on the new screen which appears..

 

 

 

You should change the the selections under "Read" for "Users with accounts" and the "Public" from "No" to "Yes".  Notice the selection for the scope of the change is to "Apply changed settings to subdirectories and files".  This means that web users will be able to read any files that you upload to the "www" directory in your account at a later time.  Once you upload some web documents to your WEBSPACE account you and others will be able to access those documents over the web. 

 

2.  Creating Your Homepage

 

Most of a Web Page is written in a document processing language called HyperText Markup Language (HTML) that describes the structure of Web documents.  HTML defines a set of common styles for Web pages: headings, paragraphs, lists, and tables. It also defines character styles, bold, italic, etc.  Basic reference is available at ACITS’ HTML Basics home page (strongly recommended).  So, you may read through that document to get a rough idea about HTML.  We will work on a simple HTML document in an exercise below.  An alternative way to create HTML documents is to use web publishers such as Netscape Composer and Microsoft FrontPage.  You may even use Microsoft Word to edit a web page.  If you need help in publishing web pages, go to the Team Web (Learning to Publish) homepage for detailed information. 

Step 1.  Open a program called “Notepad” from Start\Programs\Accessories (Figure 1.2).

Opening “Notepad” Program.

Step 2.  Now, you should see the screen as follows:

New Notepad File.

Step 3.  Copy the following simple HTML code and paste it into the notepad document (which is just a text document).

<HTML>

<HEAD><TITLE>My Homepage</TITLE></HEAD>

<BODY>

<CENTER>

<H1>My Name</H1>

<H2>My Picture</H2>

<IMG SRC=http://www.utexas.edu/depts/ut-images/basegifs/img0061.gif>

</CENTER>

<H2>My Links</H2>

<UL>

<LI><A HREF=http://www.utexas.edu>UT Austin Home</A></LI>

</UL>

This page was created by: My Name<BR>

Send Comments to:<A HREF=mailto:your email account@mail.utexas.edu>My email account@mail.utexas.edu</A><BR>

</BODY>

</HTML>

Step 4.  Save the file as “index.html” (REMEMBER where you saved it!!).

4.  Placing Your Homepage in Your UT Webspace Account

Now that you have prepareed your web document, "index.html", you are ready to upload it to your Webspace directory so that other web users can see it.  Access your Webspace account from a computer connected to the web by opening a web browser and typing in the web address (URL) https://webspace.utexas.edu and logging into your account.  Navigate to the "www" directory in your webspace account that we created earlier.  Upload your index.html file into your "www" directory by pressing the "upload" button at the top of the page. 

You will then be able to browse the computer you are working on for the file you want to upload (see the figure below).

 

Once you transfer the file it should look like this.  Notice that the "index.html" file indicates that it is ready to be shared.

Web users can now access your file at the web address: webspace.utexas.edu/yourUTEID/www.  For example, you can see my homepage at: https://webspace.utexas.edu/mckinndc/www:

6.  Your Web Address

Your web address will be: https://webspace.utexas.edu/yourUTEID/www.

Other Tips on HTML Basics

1.  See http://www.utexas.edu/cc/training/handouts/htmlbasic/ for basic information of HTML.

 

2.  Images

Images in Web pages are usually in one of two formats: GIF or JPEG formats.  GIF is the more popular format.  At this point we willassume that you have an image that you want to put on your home page.  In particular, let's add a longhorn steer image to your page. 

This image is called: "tex-logo-small.gif".  You can save a copy of this image by placing the mouse cursor over the image and pressing the right-hand mouse button.  Then select "save picture as" and save a copy of the image in the directory of your choice.  Be sure to remember what directory you save the inage in so that you can find it later.  For example, you can save the image file in your "public_html" folder or on a floppy disk.  Just as HTML documents have the ".html" file extension, images have the ".gif" or ".jpg" file extension.

After you have the image ready to go, you can include it in your Web page.  Images are indicated in HTML using the <IMG> tag, which requires no closing tag.  For the GIF file, you can use the following tag:

<IMG SRC="tex-logo-small.gif">

OK, lets create a simple HTML file with this image in it.  Type, or copy, the following HTML code into a new ASCII text file using the Notepad editor. 

<HTML>
<HEAD>
<TITLE>Simple example HTML page with an image</TITLE>
</HEAD>
<BODY>
<H1>This is a very simple HTML page but now it has an image!</H1>
<IMG SRC="tex-logo-small.gif">
</BODY>
</HTML>

Images can serve as links in your pages.  If you include an <IMG> tag inside the opening and slosing parts of an anchor tag (<A>), that image serves as aclickable hot spotfor the link itself:

<A HREF="http://www.utexas.edu"><IMG SRC="tex-logo-small.gif"></A>

Try adding this line to the HTML file you just created.

A convenient way to add images to your web pages is to use the program Microsoft Frontpage.  Just select the menu "insert/picture/from file" and select the image you want to insert.  You can also use Netscape Editor or Microsoft Word to insert images into your Web pages.


Assignment

Your assignment is to set up a personal homepage with at least (1) your name, (2) a picture (your picture is recommended but you are welcome to use other images instead), (3) a link to your email, and (4) a link to the CE311K homepage (http://www.ce.utexas.edu/prof/mckinney/ce311k/ce311k.html).

To Be Turned In

·        A copy of your homepage, printed using a web browser.   The homepage should include at least your name, a picture, and link to your email and to the CE311K homepage

·        A text copy of the html source code of your homepage,.

To be Sent Electronically

·        Send an email (with a brief message) to your TA  and let him know your homepage address (if available)


McKinney | CE311K Civil Engineering | UT Austin