PLC’s Technology Workshop

HyperText Markup Language (HTML)

Language Resource and Research Center (LaRRC)

Step - 1

Let us get to the server space where HTML files are stored:

Items:

i) Double click "Telnet" - This should be in communications>telnet folder

ii) Click File > Open connection

iii) Type: mail.sas.upenn.edu (or) ccat.sas.upenn.edu

iv) Type userid and password

(You should now get the prompt [MAIN MENU]%)

v) Type unix

vi) To see the list of files and directories in your server space type:

press enter key.

At this point see if you have ‘html’. If you do, you have a html directory and continue to Step - 2. Otherwise type the following - followed by <enter key>. Don’t type what is within parenthesis.

If you use ccat.sas.upenn.edu, do the following

vii) mkdir html (This will make a directory called html

viii) chmod o=rx html (This will give read and execute permission to everyone.

chmod means ‘change mode’).

skip the steps below and go to Step - 2

If you are using mail.sas.upenn.edu or dolphin type:

makehome

This should create a html directory and a file called index.html with some text in it.

STEP - 2

Let us make a sample html file using the text processor pico

i) cd html (This should take you to the directory called html)

ii) pico test.html

iii) press enter key

(This should open the text editor pico with blank space)

iii) type the following:

<html>

<title>This is my homepage </title>

<body>

<hr>

<h1><b>Welcome to my homepage</b></h1>

<hr>

</body>

</html>

iv) Now: Press control key (ctrl) and x

(This will ask whether you want to save the document. Press y)

(Now it will ask for file name with test.html on the prompt. Press enter key)

v) type: ls This will list the files you have in the directory html. See if you

have test.html

vi) type: chmod o=r This gives permission for everyone to read.

Step - 3

Let us use ‘NetScape Gold’ to view and edit sample.html

i) Double click Netscape Gold

ii) Press the button ‘open’ or choose ‘Open location’ from File menu

iii) Enter: http://www.sas.upenn.edu/~yourNetworkID/sample.html

(If you use ccat, enter:

http://ccat.sas.upenn.edu/~yourNetworkID/sample.html)

It should load the file you just created.

iv) Press ‘edit’. This will ask where you want to save your file.

Choose a folder (public folder at MMETS) and press ‘ok’

v) You can now do all the editing such as: making bold face, giving background color, italics, centering text, making tables, inserting images, giving links to other pages etc.

vi) After you edit your document, Save your document from File menu

Step - 4

Let us use ‘fetch’ to upload your document back to the server.

i) Double click ‘fetch’ - This should be in communications folder

ii) Double Enter the following in appropriate fields

Host: mail.sas.upenn.edu (or) ccat.sas.upenn.edu

User: Your NetworkID (the one use in your email address)

Password: The password you use

iii) Press OK (This should connect you to your server space)

iv) Look for html on the left hand menu and double click it.

v) Click ‘put’

vi) Choose ‘sample.html’ from the folder (usually public folder at MMETS)

vii) Press OK

viii) It should show the mode as ‘text’. Press OK

(This should replace your old file with the new one)At this point you can "reload’ the document in Netscape and the new file should load.

step - 5

Let us learn more about HTML tags

HTML tags are made using < and > . Whatever given within two ankled brackets are commands. Every command should end with </..>, like <html>xxxxxxx </html>. The words given within < > are not case sensitive. So, <TITLE> and <tItle> are same. Following are the frequently used tags in HTML documents.

<html> begin html documents </html> end html document

<head> begin heading </head> end heading

<title> begin title </title> end title

<body> begin body of the document </body> end body

<body bgcolor="blue"> gives blue color background for the document

Hexadecimal numbers like #FF0000, #ffffff etc., may also be given here

<body text="red"> text color is red

<body link="9690cc"> gives specific color to hotspots

<body background="myfile.gif"> takes background from gif files

<h1>begin heading with letter size 1. 1(biggest) to 6(smallest) are allowed </h1>

end heading

<ul> begin un ordered list - can also be used for horizontal space </ul> end...

<ol> ordered list to be used with <ol> <li>.....</li> </ol>

<dl> definition list usually used with <dt> and <dd>(definition term/definition)

<p> begin paragraph </p> end paragraph

<pre> is pre formatted text: it gives space, line break etc., are applied as in source

<br> is used for line break - Unlike other tags, it does not have end counterpart

<hr> horizontal rule: <hr size=4 width="50%"> make a rule with specified value

<b> begin bold face letter </b> end bold face letter

<I> begin italics </I> end italics

<tt> typewriter text </tt> end typewriter text

<em> emphasis

<strong> strong emphasis

<cite> citation

Escape sequences: (For a list of escape sequences point your browser to: http://ccat.sas.upenn.edu/plc/larrc/accents.html)

Some of the predefined characters such as <, >, & etc. along with many other diacritic markers may be produced using & followed by respective names and ;. Note these escape sequences are case sensitive

< is for <

> is for >

& is for &

ö is for umlaut o

&ntilde is for n with tilde

&Egrave is for E with grave accent

&eacute is for e with acute accent and so on.....

The tag <font> This tag may be used for color, size, type etc., as follows.

<font size=+2> This size size can be negative as in -1, -2, etc.,

These can be given in one tag as in: <font color="blue" size=-1 face=newyork>

Images:

.gif, jpg, jpeg, .tiff .xbm etc., are some of the imge types that can be used in html. Image files can be displaed or made as a hot spot.

<img src="myfile.gif"> displays the image with its original size

<img src="myfile.gif" width="50%", height="50%"> displays half the size

of the image

<img src="myfile.gif" alt="up"> alt is alternate text. If image does not display,

print the text.

<img src="myfile.gif" align=top> aligns text at the top of image

<img src="myfile.gif" align=center> aligns text at the center of image

<a href= is called anchor with hyper text reference: This is used to create hyper links to other documents, images, other location etc. The typical syntax is as follows

<a href="location/document/images">Clickable hot spot</a>

<a href="myfile.gif">Display this image </a> (image)

<a href="myfile.au">Play this sound file</a> (sound)

<a href="myfile.wav">Play this wave file</a> (sound)

<a href="myfile.mov">Play this movie file</a> (movie file)

<a href="myflie.html">Load this html file</a> (html file)

<a name="section2">Names this spot as section2</a>

<a href="myfile.html#section2">Load and go to section 2 </a>

<a href="http://ccat.sas.upenn.edu">Link to CCAT homepage</a>

TABLE

Tables can be made in html documents with the tag <table> begin </table> end. Following are the tags to be used in tabular environement:

<table border> begin table with border </table> end table

<tr> begin table row </tr> end table row

<td> begin table data </td> end table data

<th> Cell contents </th>

<table align=center> horizontal alignment of a cell in center. (left, right)

<table valign=middle> vertical alignment of a cell in middle (top, bottom)

colspan = n the number of columns a cell spans

rowspan = n the number of rows a cell spans

nowrap turn off wrapping within a cell

Try this sample:

<tr>

<td>This is first column</td>

<td>This is second column</td>

</tr>

</table>

FRAMES: Frames may be used to divide the page in to more than one sections. It can be either horizontally or vertically or both. In order to devide the window into two, you should have three html documents. One with the specification of frames and corresponding documents, and the other two documentes to go into two frames.

Frame1: Following code divides the browser window into two equal halfs horizontally. If you change ROWS into COLS, it will divide the window vertically.

frame1.htm:

<FRAMESET ROWS="50%,*" frameborder=yes border=1 bordercolor=black

framespacing=0 bgcolor="#99cccc" text="FFFFFF">

<FRAME NAME="main1" SRC="doc1.htm" MARGINWIDTH=8

MARGINHEIGHT=8 SCROLLING="auto">

<FRAME NAME="main2" SRC="doc2.htm" MARGINWIDTH=8

MARGINHEIGHT=8 SCROLLING="auto">

</FRAMESET>

doc1.htm should go into top window and doc2.htm at the bottom window. You will load frame1.htm and it will automatically load the other two documents.

STEP - 6

Let us create a fill-out form, add JavaScript code and send message via email:

Forms should begin with <form> and end with </form>. <input>, <textarea> etc., are some of the tags that can be used to enter data on the WEB.

Type the following code in a plain text file and load in a browser. You can also save it from http://ccat.sas.upenn.edu/plc/larrc/email.html

This code uses forms within tabular environment.

<html>

function mailIt(form) {

var data = document.testForm

var userInfo = ""

var mytext = ""

var s = 1

if (data.recipient.value == "" ){

alert("NOP! You need to give email address of your teacher");

return false;

}else{

form.action = "mailto:" + data.recipient.value

}

if (data.student.value == ""){

alert("You need to enter your name also")

return false;

}else{

userInfo += "Student: " + data.student.value + "\n\n"

}

userInfo += "Student's email " + data.emailad.value + "\n\n"

mytext += "Message: " + data.s1.value + "\n"

form.mailBody.value = userInfo + mytext

return true

}

</script>

<TABLE>

<TD>

<TR>

<TH ALIGN=left>Enter your instructor's email:

</TR>

</TD>

<TD>

<TR>

<TH ALIGN=right>Your name:

</TR>

</TD>

<TD>

<TR>

<TH ALIGN=right>Your email:

</TR>

</TD>

<br>

<TD><TR><font color="red"size=+2> Type your message here</font><br><br>

</TR></TD><br>

</form>

<FORM

NAME="mailForm"

ACTION=""

METHOD="post"

ENCTYPE="multipart/form-data"

onSubmit="return mailIt(this)">

<TR>

</TR>

</FORM>

</TABLE>

</BODY>

</HTML>

This document is available at http://ccat.sas.upenn.edu/plc/larrc/html.html

Sample pages for fill-in forms, use of frames etc., with langauge learning materials may be seen at:

http://ccat.sas.upenn.edu/plc/larrc/webauthor.html

http://ccat.sas.upenn.edu/plc/larrc/learn.html