1_Htmldoc3_1

Download Report

Transcript 1_Htmldoc3_1 

HTML
Hyper Text Markup Language
A simple introduction
Agenda
•
•
•
•
•
•
•
What is HTML?
Basics
Tools
Important tags
Tables & databases
Forms
Publishing at Stern
What is HTML?
• HTML
– stands for Hyper Text Markup Language
• It allows a user to “markup” a text
document to indicate how one might
want different parts displayed by a
web browser.
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
– <bold><h1> TEXT </h1></bold>
• Tags begin with <tag> and end with
</tag>
Adding Hypertext
• The <a> (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
•
<a href=“http://www.stern.nyu.edu/~nwhite”> My home page </a>
Creation Tools
• Unix
– Pico editor
– Vi
– Emacs
• Windows
–
–
–
–
–
Notepad
Word
Bbedit
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
• You will definitely need to know
HTML to create a mobile app.
Easiest Tools
• Unix
– Pico
• cd public_html
• pico file.htm
• chmod o+r file.htm (makes it readable by the web
server)
• Windows (need to move file to websys3)
– Notepad
– Sea Monkey
– http://en.wikipedia.org/wiki/Comparison_of_H
TML_editors
Advanced Tools
We will use Dreamweaver
• Dreamweaver CC
– Handles Frames, Forms, Tables etc.
– Generates Javascript behaviours
– Handles site management details
• Broken links, publishing etc.
– Works with Flash and Fireworks
– Latest version Supports HTML5
– Also supports mobile devices
A Simple Document
•
•
•
•
•
•
•
•
<html>
<head>
<title> This is the Title </title> </head>
<body>
This is the body of the page<p>
And here is some more
</body>
</html>
HTML Basics
Important Tags
• Anchor statement
– <a href=“URL” options> Text to display </a>
– Examples
• <a href=“myfile.htm” >Click here for myfile </a>
• <a href=“myfile.htm” align=center> Click here for
myfile</a>
• <a href=“myfile.htm” target=mainwindow> Click here
for myfile </a>
• 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
The IMG tag
• <IMG SRC=“myimage.gif”>
• Options
– <IMG SRC=“myimage.gif” alt=“this is my
picture”>
– <Img src=“myimage.gif” map=mapname>
– <img src=“myimage.gif” height=200 width=100>
– <img
src=“http://www.stern.nyu.edu/images/nyu.gif”
align = left>
Other interesting tags
• <table>
– Use to define multicolumn tables
– Useful for aligning items
– Easy to make and very flexible
• Example
Sample Table
•
•
•
•
•
•
•
•
•
•
<table>
<tr>
<td> cell 1 row 1</td>
<td> cell2 row 1 >/td>
</tr>
<tr>
<td><img src=“..”> </td>
<td> <img src=“…” </td>
</tr>
</table>
Better than table tag
the div tag
• The div tag just creates a rectangular
section of your web page that you can
manipulate and address separately. It is
more flexible than the <table> tag, and in
almost all cases should be used instead of
the table tag. Your can create tables by
embedding divs within divs. See the next
page.
•
•
Div examples
A div with 2 sections, each with 3
sections
•
•
<div>
<div>
– <div> … </div>
– <div> .. </div>
– <div> … </div>
•
•
•
•
•
•
•
</div>
<div>
<div> … </div>
<div> .. </div>
<div> … </div>
</div>
</div>
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.
Advanced tags
•
•
•
•
Frames
Forms
Layers
…
Forms
• A form allow users to enter data
through a web page so it can be
processed by a program on a 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.
Publishing Hypertext
• Need to move it to web server
(computer) and place in a location the
web server program can read it
• You need to give the WEB server
program read access to the
directory and page(s), since the
program runs under a different
userid (than yours).
Publishing at Stern
• Dreamweaver (This is what we will use
throughout the course)
• Notepad
Stern File Servers
Your files are shared across several
servers:
pages.stern.nyu.edu
(the student web server)
and
websys3.stern.nyu.edu
(the class unix machine.)
sales.stern.nyu.edu
(The general unix machine for students)
You can only login to sales and websys3.
Stern Network File System
All files in one place
WWW
Pages
Web Server
websys3
Home Directories
/homedir/grad/…
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
– sftp://websys3.stern.nyu.edu/TheAddressOfYourPage
– I.e.
• sftp://websys3.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.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.
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.
• You can also buy a Dreamweaver academic license
by the month
For more info
• Let’s try to create a web page…
More Details
• First
– ssh to websys3.stern.nyu.edu (from PUTTY or terminal)
– 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)
Click on Dreamweaver
Click on Site
• Click on Site, add a new site
Put local copy in your H
drive, Click Save
Click on the + to add a
server
websys3
• 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
don’t 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 don’t want to put one in your websys
directory, so that we can list it’s contents for
grading.
• 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.
• The click on save as
• And call it Page1
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.
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
You should now be ready
to work