HTML Hyper Text Markup Language

Agenda Basics Tools Important tags Tables & databases Forms Publishing at Stern

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

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

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

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

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

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

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

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

The IMG tag Options –

In-Line Image Maps

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

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

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

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

Tables and Databases 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. But that is jumping ahead, first we need to understand the Common Gateway Interface (CGI) model and other related server side solutions.

Advanced tags Frames Forms Layers …

Forms Forms allow users to enter data to be processed by a program on the server Forms and tables are the two necessary ingredients for web enabled databases

Form Types TEXT RADIO CHECKBOX LIST MENU COMBOBOX SCROLLBAR …

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

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

Publishing Hypertext Need to move it to web server and place in location web server program can read it Need to give WEB server program read access to the directory and page(s), since the program runs under a different userid (than yours).

Publishing at Stern Microsoft Word –Create document in Word, save as html Dreamweaver MX 2004 (available in labs) Mozilla Composer (Mozilla is the latest incarnation of the original Netscape Browser) –Downloadable from Click on FILE in Mozilla Click on New, Blank Page –Create document –PUBLISH Document

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

Stern File Servers Your files are shared across several servers: pages.stern.nyu.edu (the student web server) and sales.stern.nyu.edu the student unix machine. You can only login to sales.

Stern File System All files in one place Home Directories /homedir/ugrad/… WWW Pages Web Server Sales

File System Standards All grad student home directories are at: /homedir/grad/fchar/userid –Where fchar is the first character of your userid Undergrad files are at: /homedir/ugrad/fchar/userid But web pages are in –…/userid/public_html (why??)

Publishing You need to use the following address for publishing –ftp://sales.stern.nyu.edu/TheAddressOfYourPageftp://sales.stern.nyu.edu/TheAddressOfYourPage –I.e. sftp://sales.stern.nyu.edu/homedir /grad/e/ep5/public_html Where “homedir/grad/e/ep5/public_html” is the output of the pwd command you issued –But you can view it at

Editing HTML You can now use many different methods to modify your HTML –1) Keep using Mozilla Composer –2) Edit on sales using PICO (emacs, vi …) type pico index.html in your public_html directory –3) ftp back to your PC and change it in WORD and then ftp it back to sales –Frontpage –Dreamweaver … –Notepad

For more info Let’s try to create a web page…

Your Homeworks But your homeworks should go in a subdirectory of public_html named websys I.E. publish to sftp://sales.stern.nyu.edu/homedir/ugrad/fch ar/userid/public_html/websys