1 / 29

HTML

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>

dagmar
Download Presentation

HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML • Hypertext Markup Language • Layout vs. Markup • HTTP, HTTPs • Browsers • Latest version 4.0 • (3.2) • Tag-based

  2. Basics • <HTML>, </HTML> • <HEAD>, </HEAD> • <TITLE>, </TITLE> • <BODY>, </BODY> • Spaces ignored • Case insensitive • Plain Text

  3. Basic HTML Page <html> <head> <title>Insert Title Here</title> </head> <body> Page Body Here </body> </html>

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

  5. Special Characters • &nbsp; • &amp; • &gt; &lt; • &copy; • &reg;

  6. Lists • <OL></OL>, <UL></UL> • <LI></LI> • Nested lists allowed • Type parameter • Disc, Circle, Square • 1,A,a,i,I • Start parameter

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

  8. Graphics • <IMG SRC=“URL”> • Standalone. No </IMG>! • Parameters: • ALT=“text” • BORDER=number • ALIGN=“position” (top,middle,bottom,left,right)

  9. Other Stuff • <HR> • bgcolor,background, text, link, alink, vlink • <P></P>, <BR> • <CENTER></CENTER> • Comments • <!--Comment-->

  10. Tables • <TABLE></TABLE> • width=% || pixels • border=number • cellpadding=number • cellspacing=number • <TR></TR> • align=left,right,center • valign=top,middle,bottom

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

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

  13. Frames • <FRAMESET></FRAMESET> • rows=“%,pixels,*” • cols=“%,pixels,*” • Nested framesets • <FRAME SRC=“URL”> • Name, NORESIZE, others • <NOFRAMES></NOFRAMES>

  14. Special Frame Names • “_blank” • new window • “_self” • current frame • “_parent” • parent frame; defaults to _self if no parent • “_top” • main browser window

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

  16. Forms 2 • Common parameters: • Name=“name” • Value=“value”

  17. MORE! • Lots, lots more! • HTML has a lot more than what is presented here. • Image maps • Style Sheets • DHTML • ...

  18. 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!

  19. 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;

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

  21. 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!”);

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

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

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

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

  26. Event handling • Placed inside of tags: • onclick, onChange • onFocus, onBlur • onSubmit • Example: • <input type=“button” name=“bob” onclick=“javascript:dostuff();”>

  27. 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)+“)”);

  28. 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();

  29. MORE! • Lots, lots more! • This is only a sampling of what JavaScript can do! • Powers DHTML • Form validation • Interact with Java • ...

More Related