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:

• Page Mills: There are many applications (such as WordPress, the *late* iWeb, Adobe Dreamweaver or later versions of Microsoft Word) that allow you easily to design your web page. The applications actually write the HTML code for you in the background. This makes creating a web page idiot simple. The drawback is that you don't directly control what the application writes. Thus, your finished page may contain instructions or background information that you don't want. Professional websites and indeed most well designed websites do not use page mills. Indeed, some applications seem maliciously designed to work only with preferred browsers. Because of this we REQUIRE that you use the second option when creating your SGC pages!

• Do it yourself: It's surprisingly easy to make a competent looking web page by writing your own html code, even if you only know a few HTML commands. All you need is an application for writing text files (examples include NotePad and TextEdit) and a web browser. Using this method, you can be sure that the web page does only what you want it to do and nothing else. Plus, you should be able to understand WHY its doing what it is doing. The downside is that it is a little more time consuming at first.

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:

• A template for your academic webpage https://www.geol.umd.edu/sgc/resources/website.html,
• a list of requirements at https://www.geol.umd.edu/sgc/docs/webassign.pdf.

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

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:

• A text (.txt) file with whatever text you want to appear on yor web page.
• An "sgc" folder on your hard drive that will contain all of your html and image files that mirrirs the sgc folder on your server space.
• A text processing application (examples include NotePad and TextEdit). We FORBID you to use MS Word for this task! It is quite easy to "accidentally" let the software know that it is an HTML file, and then Word will add its own cryptic code...Although we are not familiar with them at this moment, we have it on good authority that the following applications are especially convenient for editing html code:
  • Brackets
  • Komodo-edit
• A web browser (Chrome, Firefox, Safari, etc.)

While you work you will use both applications:

• With the text application you will actually build and modify your html file.
• With the browser, you will view the file as a rendered web page to check your progress.

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.

• For TextEdit:
  • Under the TextEdit menu choose "Preferences."
  • In the "New Document" screen:
    • for "Format" select the "plain text" button.
    • deselect that "smart quotes" and "smart dashes" options.
  • In the "Open and Save" screen, for "When Opening a File" click the "ignore rich text commands in html files" button.
  • Close the "preferences" window.

The steps:

• Go to http://www.geol.umd.edu/sgc/resources/website.html.
• View the source - the html code that the browser is rendering to create the web page - of this file. All browsers can do this though in some versions you have to hunt around for the command. If you're puzzled, a web search for "viewing source code in (name of your browser)" will usually produce the information you need.
• Copy and paste the source code into a text file and save that file to your hard drive(or the desktop of the computer, if you are working in a WAM lab) in your text editor.

• NOTE: Although the file, in truth, is a text file, save it with a ".html" extension. You may encounter these hurdles:
  • TextEdit, will ask if you really want to use the ".html" extension. Just click "use html."
  • On a Windows machine, your file will appear with a browser icon and NotePad will not be able to see it to open it unless you choose "all files" in the "open" dialog box.

• The template you have saved will give you the essential structure, and a LOT of the important features, that you need for this site. However, it is good to understand how it works! So, here are the basics:
  • NOTE: All html commands are inside caret marks (< and >).
  • Nearly all HTML files begin with a "Head section": a set of commands and links that the web browser handles before loading the full page. A simple head section has the following commands:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>Title that appears on the window bar</title>
    

    <link rel="stylesheet" type="text/css" href="//www.geol.umd.edu/sgc/portfoliostyle.css" />

    </head>
    

About the head section:

• The <title></title> commands designate the title that will appear in the menu bar of the rendered page. In this case, "Title that appears on the window bar".
• The link commands:
  • <link rel="stylesheet" type="text/css" href="//www.geol.umd.edu/sgc/portfoliostyle.css" />
  • <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="//www.geol.umd.edu/sgc/portfoliosmall.css" />
  tell your browser:
  • Look for a file (in "sgc" folder of the Geology Dept. server) called "portfoliostyle.css" or "portfoliosmall.css," depending on whether the device you are using is a computer of smartphone.
  • This file is a stylesheet, and it is written in CSS:

  A "stylesheet" is a comprehensive file containing all of the styling properties of your page. Should your text be centered, left-aligned, or right aligned? Should it span the width of the page, or should it be contained in a 500 pixel box? Do you want to display an image in a certain location? Will it have a caption - and where will the caption go? All of these questions are answered in the stylesheet. It is a resource that can turn your page from a barebones website to a well designed portfolio to showcase to employers. CSS is the most common "stylesheet" language, and we encourage using it, but NOT YET. Applying a style sheet to your web page will be a separate assignment. For now, your template will link to a stylesheet that we have provided.

• We have two stylesheet links, one for computers and one for smartphones.

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:

• A Header: To contain your heading information (Your name, major, and affiliations).
• Content: To contain most of the information on the page.
• A footer: To contain a "last updated..." statement.

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

• The Header

  <div id="header">
  

  <b>Your Name</b>
  </p>

  <p>
  Your Major<br />
  <a href="http://www.scholars.umd.edu/">College Park Scholars</a>-<a href="http://www.geol.umd.edu/sgc/">Science and Global Change Program< /a>
  </div>
  

• The Content

  <div id="content">
  

  Various content. Blah blah blah.
  </div>
  

• The Footer

  <div id="footer">
  

  Last modified: xx xxtember 20xx.
  </div>
  

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.

• Line breaks, also called "returns" (for example, right after a title to a paragraph) have the form: <br />
• Paragraph breaks have the form:
  <p>
  Your paragraph here.
  </p>
• To underline a line of text, use <u>some text, then end with </u>, and it will come out as follows: some text, then end with
• For italics or bold, it is just like underlining, but with "i" or "b" in place of "u". (See, HTML is actually is pretty simple...)
• Large text: Put <h2> and </h2> immediately in front of and behind any text that you would like to have appear in large font size (your name, for instance.) For example:

  BIG WORDS!

• Teeny tiny text: Put <h6> and </h6> around the text. For example:

  tiny words...

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:
<ul>
<li>Society of Vertebrate Paleontology
<li>Chesapeake Dance Weekend Committee
<li>Society of Northern Virginian Orchid Sniffers
</ul>

and look like this in the browser:

Clubs and organizations:

• Society of Vertebrate Paleontology
• Chesapeake Dance Weekend Committee
• Society of Northern Virginian Orchid Sniffers

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 beginning of the body we've inserted a number of "links": some the University requires, some that SGC requires. Links are really the essence of HTML. They are codes that call up information, and that allow the person reading the file to move around the web. This particular set of links includes both linked images and good old-fashioned hotlinks.
  • Image Links tell the web browser to place an image at this spot of the page. You tell the computer where that image is stored, and you can control how it is displayed. The command for an image link is:

    <img src="location name of image file">

  ("img src" is, of course, short hand for "image source".) If your image is in exactly the same folder on the same server as your html file, than this img src command would just be the name of the file. However, in the case here we are asking for the computer to look elsewhere for where the graphic is stored. Using the first of these, the command:

  <img src="http://www.geol.umd.edu/sgc/sharedimages/sunspot.gif" height=75">

  tells the computer to look for the graphic called "sunspot.gif" in the folder "sharedimages", which is in the folder "sgc", which is on the Department of Geology's server. Also, the command "height=75" tells the computer to display this image at 75 pixels high. It renders on the page like this:

  

  What if you have organized the sgc folder in your server space so that html files are in a folder called "htmls" and your images are in a folder called "images"? In that case your command to make an image called "mypicture.jpg" appear in your page would look like this:

  <img src="../images/mypicture.jpg">

  In this case, the two dots ".." tells the browser to go to the folder in which the folder containing the html file is, itself, contained (in this case, your "sgc" folder). The browser would then go to the "images" folder and look for "mypicture.jpg."

• Hyperlinks tell the web browser that if the viewer clicks on the text or image, they will be sent to a new page. The command for a hyperlink is:

  <a href="location or file you are sending them to">text or image that serves as link</a>

  (Note that the "</a>" part of the command tells the computer that this is the end of link). If the new file you are redirecting people to is in exactly the same folder on the same server as the page they start out with, the "location or file you are sending them to" is just the file name. If it is elsewhere on the web, you'll have to give its complete URL. Again, using the first example from the top of the template, the command:

  <a href="http://www.scholars.umd.edu"><img src="http://www.geol.umd.edu/sgc/sharedimages/sunspot.gif" height=75></a>

  says "when the Sunspot image is clicked, send the viewer to www.scholars.umd.edu". Rendered, it looks like this:

  

  You could also use a line of text as link rather than a graphic. For example:

  <a href="http://www.scholars.umd.edu">College Park Scholars</a>

  Would turn "College Park Scholars" into linked hot-text that would send you to http://www.scholars.umd.edu when clicked, like this:

  College Park Scholars

  Note: Your assignment requires you to include these linked images. It does not tell you where to put them. You may make them part, either of your header or content sections.

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

</body>
</html>

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.

Courage!

Upload:

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:

• Hypertext Markup Language - 2.0 by Berners-Lee and Connolly
• HTML Code Tutorial
• HTML Dog.

Last modified: 10 October 2017