Transcript HTML - UVM
HTML
•
•
•
•
•
Hypertext Markup Language
Layout vs. Markup
HTTP, HTTPs
Browsers
Latest version 4.0
– (3.2)
• Tag-based
Basics
•
•
•
•
•
•
•
<HTML>, </HTML>
<HEAD>, </HEAD>
<TITLE>, </TITLE>
<BODY>, </BODY>
Spaces ignored
Case insensitive
Plain Text
Basic HTML Page
<html>
<head>
<title>Insert Title Here</title>
</head>
<body>
Page Body Here
</body>
</html>
Text Modification Tags
• <B>Bold</B>,<I>Italic</I>,
<U>Underline</U>
• <FONT COLOR=RGB SIZE=size>
– RGB Triplets
•
•
•
•
<H1></H1> - <H6></H6>
<PRE>Preformatted</PRE>,
<S[trike]>Strikethrough</S[trike]>
<SUB>subscript</SUB>, <SUP>Superscript</SUP>
Special Characters
•
•
•
•
•
&
> <
©
®
Lists
•
•
•
•
<OL></OL>, <UL></UL>
<LI></LI>
Nested lists allowed
Type parameter
– Disc, Circle, Square
– 1,A,a,i,I
• Start parameter
Links
• Anchor tags: <A></A>
– HREF=“URL”
• protocol://user:pass@server:port/path/filename.ext
– NAME=“NAME”
– TARGET=“frame name”
• Link to a spot on a page:
– protocol://.../filename.ext#anchorname
Graphics
• <IMG SRC=“URL”>
• Standalone. No </IMG>!
• Parameters:
– ALT=“text”
– BORDER=number
– ALIGN=“position” (top,middle,bottom,left,right)
Other Stuff
•
•
•
•
•
<HR>
bgcolor,background, text, link, alink, vlink
<P></P>, <BR>
<CENTER></CENTER>
Comments
– <!--Comment-->
Tables
• <TABLE></TABLE>
–
–
–
–
width=% || pixels
border=number
cellpadding=number
cellspacing=number
• <TR></TR>
– align=left,right,center
– valign=top,middle,bottom
Tables (contd.)
• <TH></TH>
– Usually bold and centered, but no guarantee!
• <TD></TD>
– Can place ANYTHING within a <TD>, even
another table!
– Any and all formatting stops at the </TD>
– Cell alignment
• ROWSPAN, COLSPAN
Tips on Tables
• Warning: Entire table must be loaded into
memory before it can be displayed!
• Draw a picture before you start coding, or at
least have it very clear in your mynd
• Don’t forget browser-dependence: Opera
may not display your table the same as IE or
Netscape Navigator
Frames
• <FRAMESET></FRAMESET>
– rows=“%,pixels,*”
– cols=“%,pixels,*”
• Nested framesets
• <FRAME SRC=“URL”>
– Name, NORESIZE, others
• <NOFRAMES></NOFRAMES>
Special Frame Names
• “_blank”
• new window
• “_self”
• current frame
• “_parent”
• parent frame; defaults to _self if no parent
• “_top”
• main browser window
Forms
• Used for complex behavior, running scripts
on the server, etc.
• <FORM ACTION=“CGI URL”>
– METHOD=“GET|POST”
• <INPUT TYPE=“type”>
• <SELECT>…<OPTION>…</SELECT>
• <TEXTAREA>…</TEXTAREA>
Forms 2
• Common parameters:
– Name=“name”
– Value=“value”
MORE!
• Lots, lots more!
• HTML has a lot more than what is
presented here.
–
–
–
–
Image maps
Style Sheets
DHTML
...
JavaScript
• Scripting language designed to activate the
Web based on ECMAScript
• Java-like syntax (= C-like syntax)
• Loosely-typed
• Interpreted
• Contains limited OO functionality
• But in JavaScript Methods=Properties!
How to Use JavaScript
• <SCRIPT LANGUAGE=“Javascript”>
</SCRIPT>
• Support for Integers, floating pt., strings, booleans
• To define a variable, use var:
•
•
•
•
var a=“ABC”;
a=123;
a=“3.14”;
a=3.14;
Basic Flow of Control
• if(),else, while(), do {…} while();
• for()
– standard notation (for(initial;test;increment))
– for each (for (var in obj))
• function
– no return type (can return or not return as
needed)
With
• with obj {…}
– any properties inside will either be global, or
will be assumed to be part of obj
– e.g. with document {write “Hello!”;}
– same as document.write(“Hello!”);
JavaScript Objects
• Standard set of objects
– window, document, location, history, forms…
• Can create your own objects
– function house(rms, stl, yr, garp) {
this.rooms = rms;
this.style = stl;
this.yearBuilt = yr;
this.hasGarage = garp;
}
– var myhouse = new house(3, “Tenement”, 1962, false);
The location and document
objects
• Location
– href,protocol,host,hostname,port,path,hash,search
– toString(),assign(x)
• Document
– title, location, lastModified
– forms[]
• Can access a form by name
– links[]
– write(x)
The forms object
• Can be referenced by name (for a form named
“bob”, you can say “document.bob”)
• Properties (methods)
– focus(), blur()
– select(), click()
– submit()
• Properties
– name, method, action, target
– individual form input fields can also be identified by
name
The window object
• Browser creates a new window object for every
window created
• document is the data contained in the window
– window.document = document
• alert(), confirm()
• open(“URL”, “windowname”, “options”)
• close()
Event handling
• Placed inside of tags:
– onclick, onChange
– onFocus, onBlur
– onSubmit
• Example:
– <input type=“button” name=“bob”
onclick=“javascript:dostuff();”>
Zippy Stuff
• Eval()
– Accepts a string expression and evaluates it as
JavaScript code.
• Example:
– var a = new abc();
var b = new def();
var c = “a”;
eval(c + “.def()”);
c = “b”;
eval(c + “.def()”);
• Also:
– Eval(“document.write(”+(20+75)+“)”);
More zippy stuff
• setTimeout(javascript_code, delay)
– Waits for delay milliseconds, then executes the
javascript code in quotes.
– Useful for timers:
• <input type=“text” name=“bob”>
<script language=“javascript”>
function doit() {
var Now = Date();
document.bobform.bob.value = Now;
setTimeout(doit,1000);
}
doit();
MORE!
• Lots, lots more!
• This is only a sampling of what JavaScript
can do!
–
–
–
–
Powers DHTML
Form validation
Interact with Java
...