html hypertext markup language layout vs. markup http, https browsers latest version 4.0 –(3.2)...
Post on 20-Dec-2015
228 views
TRANSCRIPT
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– ...