Beginning HTML and UNIX

Overview

After completing this workshop, users should be able to:

  1. Log into their MyWeb Account

  2. Use nano to create an index.html file in their public_html directory

  3. Use HTML tags to create a web page

    1. HTML -- Defines HTML Document

    2. HEAD -- Contains info about the document (i.e. title)

    3. TITLE -- Defines the title of the page as seen in the Title Bar

    4. BODY -- Contains all elements of the viewable page

    5. H1-H6 -- Various headings levels. 1-6, from largest to smallest

    6. A -- Used to create links to other pages, sites, or sections of the same page

    7. IMG -- Embeds an image into the document

    8. FONT -- Changes the appearance of text

    9. P -- Generic paragraph used for creating returns in-between paragraphs

  4. Save the web page

  5. Add Read privileges for the web page

  6. View the web page with Internet Explorer

I. Log into your MyWeb account

You will need a UNIX emulator to log into your account. We recommend PuTTy for PC and Fugu for Mac, but any client that supports SSH will work just as well.

Documentation for downloading and using PuTTy can be found at http://myweb.csuchico.edu/putty.php

Documentation for downloading and using Fugu can be found at http://myweb.csuchico.edu/fugu.php

For other free UNIX emulators, see http://www.tucows.com

II. Use nano to create an index.html file

    1. Once you log in and see the command prompt ("$"), you will need to change into your web (public_html) directory. Type: cd public_html

      (Note: Everything that you want to be accessible to the public via the web must be in this directory.)


    2. To create a new document, type: nano index.html This will create an HTML file named "index.html" and open it in the text editor nano.

      Your homepage must be named "index.html". The URL to this page will be http://myweb.csuchico.edu/~login (where "login" is your login name). If you were to have a page named "links.html", the URL to this page will be http://myweb.csuchico.edu/~login/links.html.

III. Use HTML tags to create a web page

HTML is the scripting language that web browsers read. This language is, mainly, composed of HTML tags, which are characterized by the < and > brackets. The following are some essential and common HTML tags.

    1. <HTML></HTML>
      2. Definition - These tags specify the beginning and ending of an HTML document.
    2. <HEAD></HEAD>
      3. Definition - Comments, scripts and descriptive information that will not be displayed by the browser.
    3. <TITLE></TITLE>
      4. Definition - The title of the web page. This must be inside the <HEAD></HEAD> tags.
      Usage: <HEAD><TITLE>My Homepage</TITLE></HEAD>
    4. <BODY></BODY>
      5. Definition - Everything that will be displayed by the browser goes in between these two tags.
      Usage: <BODY BGCOLOR=YELLOW TEXT=BLACK LINK=BLUE>
      Comment: The background color of the web page will be YELLOW, all text (unless otherwise specified) will be BLACK, and all links will be BLUE.
    5. <H1></H1>
      6. - Creates a heading. H1 is the largest heading, H2 is the second largest heading, following by H3 and so on up to H6.
      Usage: <H1>Welcome to My Homepage!</H1>
      Comment: The sentence "Welcome to My Homepage!" is bolded and its text is larger than other text in the document to make it stand out as a heading.
      Heading Example
    6. <A HREF></A>
      7. - Creates a link. Use this tag to make text and image links.
      Usage: <A HREF="http://www.csuchico.edu">CSU, CHICO</A>
      Comment: When the text "CSU, CHICO" is clicked on, the browser will load Chico State's homepage (http://www.csuchico.edu).
      Link Example
    7. <IMG >
      8. Definition - Inserts an image.
      Usage: <CENTER><IMG SRC="my_image.gif"></CENTER>
      Comment: The image my_image.gif is inserted and centered.
    8. <FONT></FONT>
      9. Definition - Allows to change size and color of text in the middle of the document.
      Usage: <FONT SIZE=2 COLOR=#000000>This text is black</FONT>
      Comment: The sentence "This text is black" will appear in black as a result of the font COLOR being set to "#000000", the hex color code for black. Each color can be represented be its name (BLACK, WHITE, RED, etc.) or its hex color code (#000000, #FFFFFF, #FF0000, etc.) For a hex chart, link to http://www.interlog.com/~syedma/mtools/colchart.html
    9. <P>
      10. Definition - Inserts a new paragraph.
      Useage: <p>Hello World!</p>

IV. Save your web page

When you are finished, save and exit out of nano by holding down "Ctrl" on the keyboard and "X" at the same time. Next hit "Y" for Yes to save the modified buffer. Finally, hit return to save the file under the name index.html.

Note: The menu at the bottom of the screen is a list of options. You can select an option by holding down "Ctrl" on the keyboard, symbolized as the caret ("^ "), with the corresponding letter.

Telnet Screenshot

V. Add Read privileges to your web page

In order to display your page, you must set public permissions for it. Once you have saved and exited and are back at the command prompt, type: chmod 755 *.html

You only have to set the file permissions for each file once, regardless of how often you modify it.

VI. View your web page

To view your page go to:

California State University, Chico
Student Computing
helpstu@csuchico.edu
530.898.HELP