HTML

Transcript HTML

Computational Boot Camp
HTML
Mike Schaffer
HTML

What is HTML?
 HTML stands for HyperText Markup Language

HTML is the language for publishing on the World
Wide Web (all web pages use HTML)

HTML files are simply text files that are saved in a
special folder on the server, sent to users upon
request, and interpreted by a user’s web browser.

Programs such as Word, Dreamweaver, and GoLive
automatically generate HTML based on a drag-anddrop GUI.
8/23/2002 (MES)
Tags

Tags tell the browser what you are trying to do and
where to start and stop:
 For example, if I want text to be bold, I use the <B>
tag.
 All text after the <B> tag will be bold until the tag is
closed with </B>
 Many, but not all tags need to be “closed” (such as
<HR>).
 E.g.
<B>mike</B> schaffer<HR>
8/23/2002 (MES)
Minimal Tags

HTML documents consist of code which tells web
browsers how to display a web page.
 HTML tags, such as “<BODY>” and “</BODY>” denote
sections and elements of a web page.
 The minimum tags are:
 <HTML>
<html>
<head>
 <HEAD>
<TITLE>A Simple HTML Example</TITLE>
</head>
 <BODY>
<body>
<H1>HTML is Easy To Learn</H1>
<P>Welcome to the world of HTML.
This is the first paragraph. While short
it is still a paragraph!</P>
<P>And this is the second paragraph.</P>
</body>
</html>
8/23/2002 (MES)
Browser Output
Notice that spacing and
layout are based on the
HTML and not how the
text is arranged in the
HTML code.
8/23/2002 (MES)
<html>
<head>
<TITLE>A Simple HTML Example</TITLE>
</head>
<body>
<H1>HTML is Easy To Learn</H1>
<P>Welcome to the world of HTML.
This is the first paragraph. While short
it is still a paragraph!</P>
<P>And this is the second paragraph.</P>
</body>
</html>
Useful Tags

<P> New paragraph
 <BR> Line break (similar to <P>, but leaves no space)
 <HR> Horizontal Rule
 <B> Bold
 <I> Italic
 <CENTER>xxxxxx</CENTER> Center on screen
 <FONT FACE=“Arial” SIZE=“+1” COLOR=“#006699”>
 <IMG SRC = “/path_to_image_file”> Insert an image
 jpg, gif, png files
 <A HREF=“http//www.bu.edu”> Insert a hyperlink
 <A HREF=“mailto:[email protected]”> Insert an e-mail link
 
8/23/2002 (MES)
List Tags

<UL></UL> Start and stop unordered list
<LI> Make a bullet in an unordered list

<OL></OL> Start and stop an ordered list
<LI> Number the line

<DL></DL> Start and stop a definition list
<DT> Term <DD> Definition
8/23/2002 (MES)
Fonts Tags

Inside the <FONT> tag, you may use:
 SIZE=+/- [1,2]
 FACE=“font”

COLOR=“Blue” or COLOR=“#0000FF”
8/23/2002 (MES)
Heading Tags
8/23/2002 (MES)
Colors



“Web-safe” colors are
composed of a palette of 216
colors.
Colors are coded by using
assigning an RGB code. Two
hexadecimal codes for R
(red), two for green (G) and
two for blue (B).
For example:
 Red is FF0000. In this
example, FF means ‘on’
and 0 means ‘off’.
 Blue is 0000FF.
8/23/2002 (MES)
Note ‘0’ means zero, not ‘O’.
Table Tags

<TABLE> Start a table </TABLE> End a table
 <TR> Start a row </TR> End a row
 <TD> Start a column </TD> End a column
 <TH> Column Heading
<table border=4>
<tr>
<th>What are tables used for?</th>
</tr>
<tr>
<td>Tables are used to make data easier to
interpret or to just
give your document more impact.</td>
</tr>
</table>
8/23/2002 (MES)
More Tables
<table border=2>
<tr><th>Heading A</th>
<th>Heading B</th>
<th>Heading C</th></tr>
<tr><td>Cell A</td><td>Cell B</td><td>Cell
C</td></tr>
<tr><td>Cell D</td><td>Cell E</td><td>Cell
F</td></tr></table>
<table border=2>
<tr>
<th>Heading A</th>
<th>Heading B</th>
<th>Heading C</th>
</tr>
<tr>
<td rowspan=2>Cell A & D</td>
<td>Cell B</td>
<td>Cell C</td>
</tr>
<tr><td>Cell E</td><td>Cell F</td>
</tr></table>
8/23/2002 (MES)
Form Tags
Visitor name:
<input type="text" name="visitorname" size="10"
maxlength="20"><br><br>
Which fruits do you like?<br>
<input type="checkbox" name="fruit“ value="apples"> Apples<br>
<input type="checkbox" name="fruit" value="oranges"> Oranges<br>
<input type="checkbox" name="fruit" value="bananas"> Bananas<br><br>
Which fruit is your
<input type="radio"
<input type="radio"
<input type="radio"
favorite?<br>
name="fav" value="apples"> Apples<br>
name="fav" value="oranges"> Oranges<br>
name="fav" value="bananas"> Bananas<br><br>
<textarea name="body" cols="35" rows="4"
wrap="virtual"></textarea><br>
<select name="fav">
<option value="apples">apples</option>
<option value="oranges">oranges</option>
<option value="bananas">bananas</option>
</select><br><br>
<input type="submit" value="Submit Info!"><br>
<input type="reset" value="Reset!">
8/23/2002 (MES)
Form Actions



Forms can be connected to a script on the server.
When the submit button is pressed, all the form
elements may be passed to the script.
The script is defined in the <FORM> tag by an “action”
variable.
<form name=signup method=POST action=/cgi-bin/join_list.cgi>
. . .Form Elements Go Here. . .
<input type=submit name=btnG value="Join the List!">
</form>
8/23/2002 (MES)
Page Hosting Details

Tags are not case-sensitive
 File names and directory paths are case sensitive.
 Each directory should have a file called ‘index.html’.
 Hyperlink paths may be represented a couple ways:
 mike/test.html
 Without a forward slash, the web server starts
in the current directory and moves down.
 /mike/test.html
 Because this link starts with a ‘/’, this link will go
to the first directory in the web folder, finds the
‘mike’ directory and looks for the ‘test.html’ file.
 Note that the ‘/’ doesn’t mean move to the top
of the Unix directory hierarchy.
8/23/2002 (MES)
Hosting Details

For security, use SCP (not FTP) when transferring files
to the server.
 All students can maintain a web page on BU’s servers:
 See: people.bu.edu
 To apply:
http://www.bu.edu/webcentral/publishing/people/appl
y.html


All copies of Linux have a built-in webserver (Apache)
that can serve web pages.
Files and directories must be world-readable (chmod
command) to be seen on the web.
8/23/2002 (MES)
More Info on HTML

For more general HTML information, check out:
 http://www.davesite.com/webstation/html/

http://archive.ncsa.uiuc.edu/General/Internet/WWW/
HTMLPrimerAll.html

Or use “View Source” command in your web browser to
view HTML of an actual page.

Browser Tag Support:
 http://www.ncdesign.org/html/list.htm
8/23/2002 (MES)
HTML Doesn’t Have To Be Static
HTML
 Static
 Code is static
 Can’t react to user input
 Interpreted by browser only

Saved in “/www/html/”
directory
8/23/2002 (MES)
Common Gateway Interface (CGI)
Perl / PHP / SSI / ASP / Shell Script
 Dynamic
 HTML generated dynamically
 Interactive
 Interpreted by server, then by
browser

Saved in “/www/cgi-bin/” directory*

* - files must be executable (i.e.
chmod +x filename)
CGI Diagram
8/23/2002 (MES)
CGI and Database Incorporation
8/23/2002 (MES)
Exercise

Based on what
you’ve learned,
make a page that
looks like this 
8/23/2002 (MES)

HTML

Transcript HTML

Directory