Hypertext Markup Language (HTML)

Homepages


Much of the hype about the internet revolves around the ability to create homepages easily
A homepage is simply a document written so it can be accessed via Web Browsers
Homepages can be accessible to the entire web, or they can be created locally
We will create local homepages
Our page will be stored on a floppy
It can access other sites on the web
It can't be reached by other sites

HTML

Definition


Hypertext Markup Language
Starts with ASCII text
Adds special TAGS to enhance text, add links and other features
Hypertext based - click on a topic, you go to another topic
Tags refer to logical attributes of information rather than actual attributes
E.G. <em> means emphasis.
It's up to the particular browser the user is using how that text will appear
In a text - only browser, emphasised text may be bold or all uppercase
In a graphical browser like netscape, it may be a slightly larger typefont

Tags


Usually encased in < > signs
Example: <p> means paragraph

Paired tags


Some tags have a beginning and an end
The end tag is just like the beginning one, except it starts with a /
example: The following word will be <em> emphasised </em>. Other stuff on this line will not be.

Text formatting tags

<h1> ...</h1>


Stands for heading one
Will be the boldest type of heading the browser allows
Usually used for titles
There are other heading levels as well
<h2> .. </h2> is a second level heading
Goes all the way to <h6>
Be SURE to end a heading tag!

<p>


Marks the end of a paragraph
If you want a carriage return at a specific point in an html document, you must insert a <p> marker. Otherwise, stuff will all run together.
Does not have an ending mark
<br> also makes a line break

<hr>


Creates a horizontal rule...
Draws a line on the screen
Good for breaking up a document

Hypermedia Tags

Anchors


Perhaps the most powerful tag
Allows you to set up a hypertext link connecting your document to any other document available ANYWHERE on the WWW.
Requires that you know the URL of that document.

Syntax


<a href = "URLofDocument">Text that will be highlighted</a>
URLofDocument refers to the complete reference for the document you want to link to. It should be encased in quotes.
The text that will be highlighted will show up differently on the screen, and when the user clicks on that text, they will go to the URL in question

Inline Graphics


Adds ability to incorporate GIF or JPEG images
Such images can be scanned,drawn, or gotten from other parts of the Internet.
BMP and WMF are not yet standards for WWW.

Syntax


<img src ="URLofImageLocation">
Insert a url of the location of the image.
If the image is on the same directory as the html file, just use the name of the image file
Image MUST be GIF or JPEG

Other stuff


This is just the beginning!!!
Look up HTML on the WWW to get LOTS of information and a number of excellent tutorials on HTML editing
Great tutorial at http://www.ncsa.uiuc.edu/demoweb/html-primer.html
There are good programs out there to help with this
I prefer a simple text editor like Notepad in windows

Development hints


Test your URLs FIRST!!!
Get all your graphics files lined up before you start writing
Write out the page in straight text first
Use a simple editor you are comfortable with
Be sure to save your files in an ASCII format
Be sure document ends with .html (if you're in Win95, Mac or Unix) or .htm (in Dos or Win3.1)
(Almost every word processor can handle this)
After you know what the page will look like, start adding the formatting tags
Put a few marks in, save your document, load up netscape, and use the File_OpenFile command to open up your document.
You DON"T have to close your editor for this! leave it open!
You will see that the browser has tried to interpret your tags (if you typed carefully!)
Note the errors and return to the document
Fix errors and repeat until it works like you want.

Example Source code:


<html>
<head>
<title>Andy's home page! </title>
</head>
<body background="happycmp.gif">

<center>
<img src ="pics/A.GIF">
<img src ="pics/N.GIF">
<img src ="pics/D.GIF">
<img src ="pics/Y.GIF">
<img src ="pics/S.GIF">
<br>
<img src ="pics/P.GIF">
<img src ="pics/A.GIF">
<img src ="pics/G.GIF">
<img src ="pics/E.GIF">
</center>
<hr>
<img src="andy1.jpg"
align = "left">
Hi! I'm Andy Harris. I am the service course coordinator for the
<a href ="http://klingon.cs.iupui.edu">
Department of Computer and Information Science</a>
here at
<a href ="http://www.iupui.edu">IUPUI. </a>
My work involves developing and teaching classes for non-CS majors.
My current projects include a new version of
<a href="mmcc/index.html">
100 Principles of Computer Science</a>,
<a href="220vb/220fall.html">
220 Visual Basic Programming</a>,
and
<a href="220html/index.html">
220 Web Programming</a>.

My current major project is a state -wide curriculum project entitled
<a href = "sdi/index.html">
MMCC</a>
(A Multi-Campus, Modular Non-Major Curriculum in Computing)
<br>
I am also a licensed special education teacher. I have worked for a number
of years with a group of students with severe disabilities at North Central
High School.<p>
<hr>

<a href = "sched.html">My schedule for Fall '96</a>
<br><br>

<h1>Here are some interesting links:</h1>

<h2>Visual Basic Stuff</h2>
<a href="220vb/220fall.html">My Course Syllabus</a><br>
</body>
</html>

Example Printout: