46
HTML HTML Hyper Text Markup Language Hyper Text Markup Language A simple introduction A simple introduction

HTML Hyper Text Markup Language A simple introduction

Embed Size (px)

Citation preview

Page 1: HTML Hyper Text Markup Language A simple introduction

HTML HTML

Hyper Text Markup LanguageHyper Text Markup Language

A simple introductionA simple introduction

Page 2: HTML Hyper Text Markup Language A simple introduction

Agenda• What is HTML?• Basics• Tools• Important tags• Tables & databases• Forms• Publishing at Stern

Page 3: HTML Hyper Text Markup Language A simple introduction

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.

Page 4: HTML Hyper Text Markup Language A simple introduction

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>

Page 5: HTML Hyper Text Markup Language A simple introduction

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>

Page 6: HTML Hyper Text Markup Language A simple introduction

Creation Tools• Unix

– Pico editor– Vi– Emacs

• Windows– Notepad– Word – Bbedit– Dreamweaver – Front Page

Page 7: HTML Hyper Text Markup Language A simple introduction

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

Page 8: HTML Hyper Text Markup Language A simple introduction

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 – Word (add new ftp location to publish)– Sea Monkey– http://en.wikipedia.org/wiki/

Comparison_of_HTML_editors

Page 9: HTML Hyper Text Markup Language A simple introduction

Advanced ToolsWe 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 Supports HTML5– Also supports mobile devices

Page 10: HTML Hyper Text Markup Language A simple introduction

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>

Page 11: HTML Hyper Text Markup Language A simple introduction

HTML BasicsImportant 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

Page 12: HTML Hyper Text Markup Language A simple introduction

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>

Page 13: HTML Hyper Text Markup Language A simple introduction

Other interesting tags• <table>

– Use to define multicolumn tables– Useful for aligning items– Easy to make and very flexible

• Example

Page 14: HTML Hyper Text Markup Language A simple introduction

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>

Page 15: HTML Hyper Text Markup Language A simple introduction

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.

Page 16: HTML Hyper Text Markup Language A simple introduction

Advanced tags• Frames• Forms• Layers• …

Page 17: HTML Hyper Text Markup Language A simple introduction

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

Page 18: HTML Hyper Text Markup Language A simple introduction

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

Page 19: HTML Hyper Text Markup Language A simple introduction

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.

Page 20: HTML Hyper Text Markup Language A simple introduction

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

Page 21: HTML Hyper Text Markup Language A simple introduction

Publishing at Stern

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

• Notepad

Page 22: HTML Hyper Text Markup Language A simple introduction

Stern File Servers

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

Page 23: HTML Hyper Text Markup Language A simple introduction

Stern File System

All files in one place

Home Directories/homedir/grad/…

WWWPages

Web ServerSaleswebsys3

Page 24: HTML Hyper Text Markup Language A simple introduction

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

Page 25: HTML Hyper Text Markup Language A simple introduction

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.

Page 26: HTML Hyper Text Markup Language A simple introduction

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

Page 27: HTML Hyper Text Markup Language A simple introduction

For more info

• Let’s try to create a web page…

Page 28: HTML Hyper Text Markup Language A simple introduction

More Details• First

– ssh to websys3.stern.nyu.edu (from PUTTY)– 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)

Page 29: HTML Hyper Text Markup Language A simple introduction
Page 30: HTML Hyper Text Markup Language A simple introduction

Click on Dreamweaver

Page 31: HTML Hyper Text Markup Language A simple introduction

Click on Site

Page 32: HTML Hyper Text Markup Language A simple introduction

• Click on Site, add a new site

Page 33: HTML Hyper Text Markup Language A simple introduction
Page 34: HTML Hyper Text Markup Language A simple introduction

Put local copy in your H drive, Click Save

Page 35: HTML Hyper Text Markup Language A simple introduction
Page 36: HTML Hyper Text Markup Language A simple introduction

Click on the + to add a server

Page 37: HTML Hyper Text Markup Language A simple introduction
Page 38: HTML Hyper Text Markup Language A simple introduction

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

Page 39: HTML Hyper Text Markup Language A simple introduction

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

Page 40: HTML Hyper Text Markup Language A simple introduction
Page 41: HTML Hyper Text Markup Language A simple introduction

• The click on save as• And call it Page1

Page 42: HTML Hyper Text Markup Language A simple introduction
Page 43: HTML Hyper Text Markup Language A simple introduction

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.

Page 44: HTML Hyper Text Markup Language A simple introduction
Page 45: HTML Hyper Text Markup Language A simple introduction

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

Page 46: HTML Hyper Text Markup Language A simple introduction

You should now be ready to work