HTML

1
HTML

• Hyper Text Markup Language
• A simple introduction

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
• ltboldgtlth1gt TEXT lt/h1gtlt/boldgt
• Tags begin with lttaggt and end with lt/taggt

4
Adding Hypertext

• The ltagt (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
• lta hrefhttp//www.stern.nyu.edu/nwhitegt My
  home page lt/agt

5
Creation Tools

• Unix
• Pico editor
• Vi
• Emacs
• Windows
• Notepad
• Word
• Bbedit
• 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 or file.htm (makes it readable by the
  web server)
• Windows (need to move file to sales)
• Notepad
• Word (add new ftp location to publish)
• Sea Monkey
• http//en.wikipedia.org/wiki/Comparison_of_HTML_ed
  itors

8
Advanced Tools We will use Dreamweaver

• Dreamweaver
• Handles Frames, Forms, Tables etc.
• Generates Javascript behaviours
• Handles site management details
• Broken links, publishing etc.
• Works with Flash and Fireworks
• Latest version (CS5.5) Supports HTML5
• Also supports mobile devices

9
A Simple Document

• lthtmlgt
• ltheadgt
• lttitlegt This is the Title lt/titlegt lt/headgt
• ltbodygt
• This is the body of the pageltpgt
• And here is some more
• lt/bodygt
• lt/htmlgt

10
HTML BasicsImportant Tags

• Anchor statement
• lta hrefURL optionsgt Text to display lt/agt
• Examples
• lta hrefmyfile.htm gtClick here for myfile lt/agt
• lta hrefmyfile.htm aligncentergt Click here for
  myfilelt/agt
• lta hrefmyfile.htm targetmainwindowgt Click
  here for myfile lt/agt
• 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 websys underneath the
  current folder
• Good idea to use relative addresses whenever
  possible, then you can move complete sites around
  easily

11
The IMG tag

• ltIMG SRCmyimage.gifgt
• Options
• ltIMG SRCmyimage.gif altthis is my picturegt
• ltImg srcmyimage.gif mapmapnamegt
• ltimg srcmyimage.gif height200 width100gt
• ltimg srchttp//www.stern.nyu.edu/images/nyu.gif
  align leftgt

12
Other interesting tags

• lttablegt
• Use to define multicolumn tables
• Useful for aligning items
• Easy to make and very flexible
• Example

13
Sample Table

• lttable)
• lttrgt
• lttdgt cell 1 row 1lt/tdgt
• lttdgt cell2 row 1 gt/tdgt
• lt/trgt
• lttrgt
• lttdgtltimg src..gt lt/tdgt
• lttdgt ltimg src lt/tdgt
• lt/trgt
• lt/tablegt

14
Tables and Databases

• Since 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.
• Actually, this is outdated, now we use divs
• But that is jumping ahead, first we need to
  understand the Common Gateway Interface (CGI)
  model and other related server side solutions. We
  will talk about that in a few sessions.

15
Advanced tags

• Frames
• Forms
• Layers

16
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

17
Form Types

• TEXT
• RADIO
• CHECKBOX
• LIST
• MENU
• COMBOBOX
• SCROLLBAR

18
Conclusion

• HTML is pretty simple
• Knowledge of a few tags can get you a long way..
• Have fun
• So lets publish a web page.

19
Publishing Hypertext

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

20
Publishing at Stern

• Dreamweaver (This is what we will use throughout
  the course)
• Notepad

21
Stern File ServersYour files are shared across
several serverspages.stern.nyu.edu (the
student web server)andsales.stern.nyu.edu(the
student unix machine.)And vleda.stern.nyu.eduYou
can only login to sales and vleda.
22
Stern File System All files in one place
vleda
WWW
Pages Web Server
Sales
Home Directories /homedir/grad/
23
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??)

24
Publishing

• You need to use the following address for
  publishing
• sftp//vleda.stern.nyu.edu/TheAddressOfYourPage
• I.e.
• sftp//vleda.stern.nyu.edu/homedir/grad/e/ep5/publ
  ic_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.html
• http//pages.stern.nyu.edu/userid/filename.html
• For this class, I would like you to put all of
  your files in a websys folder in your public_html
  directory.

25
Editing HTML in Dreamweaver

• You can either buy Dreamweaver in the bookstore,
  or run it from the Stern APPS server.
• The advantage of buying it is that it will keep
  all of your settings from one session to another.
  
• But, we will use Dreamweaver on apps for
  examples.
• If you are budget constrained, you can use APPS
  for the first part of the course, and then
  download a demo version of Dreamweaver that will
  run for 30 days.

26
For more info

• Lets try to create a web page

27
More Details

• First
• ssh to sales.stern.nyu.edu
• Login with your stern userid and password
• This should create a home directory for you.
• Then type cd public_html
• Type mkdir websys
• Type exit
• Second
• Go to http//apps.stern.nyu.edu with your web
  browser
• Third
• Click on Dreamweaver (it takes a while to start)

28
(No Transcript)
29
Click on Dreamweaver
30
Click on Site
31

• Click on Site, add a new site

32
(No Transcript)
33
Put local copy in your H drive, Click Save
34
(No Transcript)
35
Click on the to add a server
36
(No Transcript)
37

• You now should be able to use Dreamweaver to
  create a web page.
• The default web page is usually index.html. It
  will be displayed when you go to a location and
  dont specify a file name.
• You can create your own home page at Stern by
  putting an index.html file in your public_html
  directory.
• But we dont want to put one in your websys
  directory, so that we can list its contents for
  grading.

38

• Next, we click on
• File, New in Dreamweaver and create a file.
• Dreamweaver can show us both what the web
  browser will display, as well as what the html
  code is if we click on the split tab.

39
(No Transcript)
40

• The click on save as
• And call it Page1

41
(No Transcript)
42
Now we are ready to publish to the web server

• If we click on the UP ARROW, it should move files
  to the web server where we can see them with a
  web browser.

43
(No Transcript)
44
Your Homeworks

• Please put all of your homeworks in the websys
  folder so we can find them.
• Name them hw1.htm, hw2.htm etc.
• Do NOT put an index.html file in that folder. It
  will hide your homeworks from us.
• If you wish, you can use Dreamweaver to put an
  index.html file in the public_html folder, and
  then you will have your own web page.
• To do that, create another site and make the root
  directory public_html

45
You should now be ready to work