1. HTML Hyper Text Markup Language

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

3. 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

4. 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

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

6. 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

7. 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.

8. 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

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

10. 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

11. The IMG tag Options – http://www.stern.nyu.edu/images/nyu.gif

12. In-Line Image Maps

13. 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”

14. 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.

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

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

17. 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.

18. Advanced tags Frames Forms Layers …

19. 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

20. Form Types TEXT RADIO CHECKBOX LIST MENU COMBOBOX SCROLLBAR …

21. 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.

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

23. 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).

24. 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 http://www.mozilla.prg Click on FILE in Mozilla Click on New, Blank Page –Create document –PUBLISH Document

25. 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

26. 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.

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

28. 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??)

29. 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 http://www.stern.nyu.edu/~userid/filename.htm http://pages.stern.nyu.edu/~userid/filename.html

30. 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

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

32. 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