HTML Hyper Text Markup Language

The Basics u HTML documents contain “tags” which instruct the Browser software on how to present the information within a tag. These are called “styles” u Styles can be imbedded within styles u TEXT u Tags begin with and end with

Adding Hypertext u The (anchor) tag u This tag is used for a clickable element which is a link to another document (or another location within the current document) u Documents can be located on any web server on the internet u A hypertext reference looks like u My home page

Creation Tools u Unix u Pico editor u Vi u Emacs u Windows u Notepad u Word 2000 u Bbedit u Netscape Composer u Dreamweaver u Front Page

Why do we need to know HTML? u There are many tools that will generate reasonable looking web sites u However, you usually need to know HTML in order to connect your web page to a data base

Easiest Tools u Unix u Pico u cd public_html u pico file.htm u chmod o+r file.htm (makes it readable) u Windows (need to move file to sales) u Notepad u Word (add new ftp location to publish) u Netscape Composer u Probably easiest of all, but no advanced features u Use to create initial document, then “hack” the html to add advanced features.

Advanced Tools u Dreamweaver 3 u Handles Frames, Forms, Tables etc. u Generates Javascript behaviours u Handles site management details u Broken links, publishing etc. u Works with Flash and Fireworks u Dreamweaver Ultra extends support to databases

A Simple Document u u This is the Title u u This is the body of the page u And here is some more u

HTML Basics Important Tags u Anchor statement u Text to display u Examples u Click here for myfile u Things to remember u Links are relative to current folder if not fully specified u I.e. “/multim/myfile.htm” means the myfile.htm file in the folder named multim underneath the current folder u Good idea to use relative addresses whenever possible, then you can move complete sites around easily

The IMG tag u u Options u

In-Line Image Maps u

Other areas u Rect u Circle Coords=“X,Y,Radius” u Oval Coords=“x1,y1,x2,y2” u Poly Coords=“x1,y1,x2,y2,x3,y3…” u Point Coords=“x1,y1”

Problems u How do I find the coordinates? u Top left is 0,0 u Bottom right is height, width (pixels) u To find other coordinates, need to examine image with software like LVIEW, PAINTSHOP, PHOTOSHOP, IMAGE COMPOSER etc.

Other interesting tags u u Use to define multicolumn tables u Useful for aligning items u Easy to make and very flexible u Example

Sample Table u <table) u u cell 1 row 1 u cell2 row 1 >/td> u

Tables and Data bases u Since the relational data bases are stored in tables, and the result of any relational query is also a table, guess what, we tend to display data base results as HTML tables. u But that is jumping ahead, first we need to understand the Common Gateway Interface (CGI) model and other related server side solutions.

Advanced tags u Frames u Forms u Layers u …

FORMS u Forms allow user to enter data to be processed on the server. u Forms and tables two necessary ingredients for web enabled databases.

Form Types u TEXT u RADIO u CHECKBOX u LIST u MENU u COMBOBOX u SCROLLBAR u …

Conclusion u HTML is pretty simple u Knowledge of a few tags can get you a long way.. u Have fun… u So let’s publish a web page for your group.

Viewing the HTML Source u To View the “code” for an HTML document, click on “VIEW”, “PAGE SOURCE” u This is very useful for learning html

Publishing Hypertext u Need to move it to web server and place in location web server program can read it u Need to give WEB server read access to the directory and page(s)

Publishing at Stern u Microsoft Word - Internet Assistant u Create document in Word, save as html u Netscape Communicator u Click on FILE in Communicator u Click on New, Blank Page u Create document u PUBLISH Document

Netscape NavigatorPublish u To Publish in NN, you need to set up Netscape with the file location of your HTML files (I.e. your public_html directory) u To find it, login to sales and type u cd public_html u pwd u You also need to provide your user id and password

Publishing... u You need to put the following address in to Netscape for publishing u ftp://sales.stern.nyu.edu/TheAddressOfYourPage u I.e. u ftp://sales.stern.nyu.edu/ export/ugrad/e/ep5/public_html u Where “export/ugrad/e/ep5/public_html” is the output of the pwd command you issued u Netscape will move your file to the server and put it in your directory u to view it go to u

Editing HTML u You can now use many different methods to modify your HTML u 1) Keep using Netscape Composer u 2) Edit on sales using PICO u type pico index.html in your public_html directory u 3) ftp back to your PC and change it in WORD and then ftp it back to sales u Frontpage 98

For more info u go to u Let’s try it….