Science and Global Change HTML Guide Home

Tips for turning text into html:

SGC students are required to create your own professional academic portfolio website. This site will serve as an academic portfolio or resume for your work in SGC over the next four semesters. You will be adding new pages to it throughout your time in SGC. Websites are a set of interlinked webpages. Webpages are documents (often just text documents formatted with instructions in HTML code) which are placed on servers. We will teach you how to write individual webpages, and by linking the pages together, you'll have a website. You can write up your webpages on your own personal computer, or on a computer in the University's labs. The files making up your portfolio will be placed in the "sgc" folder in your "terpconnect" space, alongside the image file you uploaded previously.

HyperText Markup Language (HTML) is the standard language for web pages. HTML code tells your web browser (an application like Internet Explorer, Firefox, Safari, and the like) what to display, and how to display it using simple commands. If you're unfamiliar with writing HTML code, it may seem scary, but it's actually very easy. To create HTML code, you basically have two choices:

Your web page assignment requires you to create the beginnings of a personal academic web page and get it onto the internet. Be sure to use these resources:

The following is a helpful (we hope!) guide to writing HTML.

Writing the Code

The code we will be writing will be very simple, and most of it can be written almost mechanically. Just follow these instructions in this sequence. Please note, server software is case sensitive with regards to file names (i.e., the files "Tholtz.html" and "tholtz.html" would be considered different files), so follow the case carefully. For commands, case is not important.

To start out you need the following:

While you work you will use both applications:

Setting preferences: Text processing applications sometimes open html files by rendering them as full web pages instead of showing you the course code. That is not what you want. To remedy this, you may have to set the preferences of the text application properly. TextEdit for the Mac definitely requires this.

The steps:

About the head section:

The body section: The <body> command designates the body of the file, the part that will actually be rendered inside the browser window. A common practice is to divide this into sections using the <div></div> command. For this assignment, we ask you to divide the body of your web page into three sections:

Reasons for doing this will be made clear for later. For now, just indulge us.

Basic formatting: Now for the fun and power. Turning your text into a proper web page that connects to other web sources is easy, using some simple commands.

Indented lists: An indented list of items (such as the clubs to which you belong) can be made by combining the bullet marks, <li>, with the indented list commands, <ul> and </ul>. For example, my list of clubs might be written this way:

Clubs and organizations:
<li>Society of Vertebrate Paleontology
<li>Chesapeake Dance Weekend Committee
<li>Society of Northern Virginian Orchid Sniffers

and look like this in the browser:

Clubs and organizations:

You can nest one indented list inside another, as you can see in the discussion of commands above!

[Note that if you were to do a list of organizations like the example above, it would be a good idea to make hotlinks for each of the items on the list!]

HTML connectivity: Now for even more fun and power. Turning your text into a proper web page that connects to other web sources is easy, using some simple commands.

At the bottom of the file is the "closing", which tells the software that this is the end. It uses the following codes:


Dealing with a headache: We have become aware that images captured by smart phones sometimes render in the wrong orientation and can't be reoriented by html commands. As a result, they make your web page look lame. The only solution we know is for you to:
  • open the images in Photoshop (or something like it),
  • orient them properly,
  • make some tiny change to the image (changing the color of a single pixel is enough)
  • save under a new name.

Now upload your html file to the sgc folder in your Terpconnect server space exactly the same way you uploaded the image in the previous assignment. Make sure that the scg folders on your hard drive and your server space precisely mirror one another.

Additional Information: If you want a more complete listing of HTML codes, here are some options: