Introduction to Internet Technology Presentation Overview v Look
- Slides: 35
Introduction to Internet Technology
Presentation Overview v. Look at main technological components that make up modern Web pages ØHTML – Hyper. Text Markup Language ØCSS – Cascading Style Sheets ØJava. Script – um, Java. Script v. For each component ØWhat it is/isn't, can/can't do ØWhat kinds of constructs it comprises ØHow to use it in Web pages ØHow it interacts with other components
HTML Components v. Documents ØDocument = page = HTM file = topic ØContent (text, images) ØTags (display commands) v. Other terms ØWindow: browser display window ØURL: Uniform Resource Locator ØHyperlink: hypertext jump to a resource ØResource: URL, image, mailto, external file
HTML Pages v. HTML pages are tag-based documents ØReally plain ASCII text files ØDon't look like documents they represent ØTags indicate how processing program should display text and graphics ØDesigned to describe hypertext, not paper ØProcessed by browsers "on the fly" ØTags usually appear in pairs ØMost have reasonable names or mnemonics ØMost can be modified by attributes/values
That's How This. . . <HTML> <HEAD> <BODY background="slate. gif"> <H 1>Welcome</H 1> <IMG SRC="DOUGLAS. GIF" WIDTH="80" HEIGHT="107" ALT="Our Founder" BORDER="0"> <H 2>A Message from the President </H 2> <P><font color=red>Good evening! Thank you for working late!</font></P> <P>Hello and welcome to Doug. Co, Incorporated! I'm <b>Douglas S. Michaels, </b> President and Founder, <a href="acronyms. htm">COB, CEO, COO, and BBBWAIC</a>. Let me take this opportunity to congratulate you on obtaining employment here at Doug. Co; I want you to know that you've chosen to spend your career in one of the most worthwhile and rewarding endeavors possible --making me richer!</P>. . .
. . . Turns Into This
Some HTML Tag Examples START TAG <HTML> <HEAD> <TITLE> <BODY> <H 1>, <H 2>, . . . <IMG. . . > <A. . . > <P> <BR> <OL> <UL> <LI> END TAG </HTML> </HEAD> </TITLE> </BODY> </H 1>, </H 2>, . . . </IMG> (optional) </A> </P> (optional) (none; "empty" tag) </OL> </UL> </LI> (optional)
HTML Document Layout v. Example of basic tag positioning <html> <head> <title>Title bar text</title> </head> <body> <p>Look, I'm a paragraph!</p> </body> </html> v. Always think containers! ØTag pairs that enclose content
Some Common Text Tags v. Heading levels Øh 1 – h 6, numbers inverse to text size <h 1>Heading One</h 1> <h 2>Heading One</h 2> v. Paragraph ØProbably the most common tag <p>Yada yada. . . </p> v. Line break (an empty tag) ØUsed when <p>'s white space not wanted This line will break right there v. Note white space or lack thereof in HTML source does not matter!
Ordered & Unordered Lists v. Ordered (numbered) ØUse <ol>. . . </ol> tags v. Unordered (bulleted) ØUse <ul>. . . </ul> tags v. List Items make up both lists ØUse same <li>. . . </li> tags v. Lists can contain almost anything ØText, images, paragraphs, links ØEven other (nested) lists, same type or not
Attributes and Values v. Properties, traits, or characteristics that modify the way a tag looks or acts ØUsually in pairs: <body bgcolor="teal"> ØSometimes not: <dl compact> v. Most HTML tags can take attributes ØFormat of value depends on attribute Ø width="150". . . href="page 3. htm" not width="page 3. htm". . . href="150"
The Anchor Tag (1) v. The tag that puts the HT in HTML Ø<a>. . . </a> (useless by itself) ØMust have attributes to be useful v. HREF (Hypertext REFerence) attribute ØMakes a jump to someplace (URL) <a href="mypage. htm">My Page</a> <a href="www. google. com">Google</a> ØLink text is underscored by default v. Whatever is between <a> and </a> is hot (clickable) ØClicking makes the link go somewhere or do something
The Anchor Tag (2) v. Some link examples text only image only both
Images (1) v. Used in pages for various reasons ØClarification, navigation, peripheral training v. Images not in page; referenced by page ØGraphics are separate, required files ØUsually GIFs or JPGs, sometimes others ØCan be anywhere in document body: in paragraphs, headings, lists, anchors, etc. v. Place image with <img> tag ØLike <a>, <img> is useless by itself ØAll work is done with attributes/values
Images (2) v. Main attribute: SRC ØTells page where to find the image ØFile name can be local, relative, or full ØCase sensitivity depends on server ØAnimated GIFs added same as static <img src="smiley. gif"> <img src=". /pix/mypic. jpg"> <img src="http: //www. myweb. com/mail. gif">
Tables (1) v. Powerful, flexible information delivery ØUsed to reflect or impart structure v. A table is a container <table>. . . </table> v. That contains other containers (rows) <tr>. . . </tr> v. That contain other containers (cells) <td>. . . </td> (data cells) <th>. . . </th> (heading cells) v. That contain data – or other containers ØText, graphics, lists, even other tables!
Tables (2) v. Basic table markup <table border="1"> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> Row 1, Cell 1 Row 1, Cell 2 </table> Row 2, Cell 1 Row 2, Cell 2
CSS Concepts v. Styles are named sets of formatting commands Ø[18 pt, Arial, left aligned] "Section head" Ø[Bold, italic, blue] "Glossary term" Ø[Normal, 10 pt, Verdana] "Body text" Ø[Italic, orange, small caps] "Bob" v. Style sheets are control documents that are referenced by content documents ØMS Word, other editors & desktop publishing programs have done it for years ØDOT : DOC : : CSS : HTM
Why Use CSS? v. HTML formatting is awkward and imprecise ØOriginally intended to deliver well organized text (aimed at structure, not formatting) ØOver time, formatting elements were added that solved some problems, but created many more v. W 3 C proposed Cascading Style Sheets ØSeparate format from content ØEnforce consistency ØGreatly simplify control & maintenance
What's "Cascading" All About? v. Three places to put style commands Ø External: Affects all documents it's attached to Ø Internal: Affects only document it appears in Ø Inline: Affects only text it's applied to v. Cascading means styles' "pecking order" Ø Precedence is: Inline > Internal > External Ø Seems backward, but it couldn't work any other way; for example… Ø Picture a document whose style sheet specifies Verdana as the font, with one paragraph style in Courier New, with one bold word or phrase
What Can CSS Control? v. Almost everything Ø Page background, colors, images, fonts and text, margins and spacing, headings, positioning, links, lists, tables, cursors, etc. v. W 3 C intends CSS to "…relieve HTML of the responsibility of presentation. " Ø Translation: "Don't bug us for new tags; change existing tags & make your own using CSS. " v. Idea is to put all formatting in CSS Ø To that end, many tags are "deprecated" by CSS: <font>, <basefont>, <center>, <strike>…
Coding CSS Rules v. Rules have very specific parts and syntax Ø Rules have two basic parts: selector and declaration Ø Declaration also has two parts: property and value rule h 2 { font-style : italic ; } property selector value declaration Ø Selector tells the rule what to modify Ø Declaration tells the rule how to modify it
CSS Rule Placement v. In a separate. CSS file ØAffects all pages to which it is linked Ø. CSS referenced by pages with <link> tag v. In the <head> of an. HTM page ØAffects only page in which it appears ØRules are coded in <style></style> container v. In an HTML tag in page <body> ØAffects only text to which it is attached ØDeclarations are coded as attribute= "value" pairs, e. g. , style="color: blue; "
Linking To An External CSS v. Do not put <style></style> tags in the. CSS file; this will prevent it from working v. Add CSS rules as needed; break lines where necessary; format as desired v. Save as filename. css v. Reference. CSS in <head> of. HTM(s) <head> <link rel="stylesheet" type="text/css" href="mystyles. css"> </head>
Adding Styles To A Single Page v. Within document's <head>, insert a <style></style> container v. Code rules exactly as you would in an external. CSS <head> <style> h 2 { font-style: italic; color: red; } p { font-family: "Verdana, Arial, sansserif"; font-size: 12 pt; color: blue; } </style> </head>
Adding Styles To An HTML Tag v. Within a tag's < >, code an attribute = "value" pair defining style characteristics ØTip: Watch out for nested quotes <h 1 style = "font: small-caps bold italic; font-family: 'Verdana, Arial, sans-serif'; color: #008080; textalign: center; ">Gettysburg Address (First Draft)</h 1> <p style = "font-family: Times; color: #800000; font-weight: bold; "> Four score and seven beers ago…</p>
Java. Script Intro v. What Java. Script isn’t Ø Java (object-oriented programming language) Ø A "programmers-only" language v. What Java. Script is Ø Extension to HTML (support depends on browser) Ø An accessible, object-based scripting language v. What Java. Script is for Ø Interactivity with the user: * input (user provides data to application) * processing (application manipulates data) * output (application provides results to user)
Implementing Java. Script (1) v. Direct insertion into page (immediate) Ø In <script></script> container within document head or body v. Direct insertion into page (deferred) Ø In <script></script> container and inside function { … } definition within document head or body v. Through external references Ø In external. js files (immediate/deferred) Ø Much like CSS external reference v. Embedded inline Ø Within other tags (as attribute values)
Implementing Java. Script (2 a) v. Direct insertion into page (immediate) Ø <body><p>Today is <script>document. write( Date() ); </script></p> v. Direct insertion into page (deferred) Ø <head><script> function dwd() { document. write( Date() ); } </script></head>. . . <body><p>Today is <script>dwd(); </script></p>
Implementing Java. Script (2 b) v. Through external references (immediate/deferred depends on script file's contents) Ø <script src="swapimgs. js"></script> v. Embedded inline as attribute values Ø <img id="pic 1" src="somepic. jpg" onmouseover="swapin('pic 1')" onmouseout="swapout('pic 1')">. . . <input type="button" value="Buy Now" onclick="place. Order('ordform')" </input>
Key Language Components v. Objects Ø Things on a page; think noun v. Attributes Ø Properties of objects; think adjective v. Methods Ø Actions taken by objects; think verb v. Statements Ø Lines of assembled components; think sentence v. Functions Ø Named groups of statements; think paragraph
Programming Constructs v. Variables Ø Named elements that can change value v. Data types Ø Integer, floating-point, Boolean, string v. Operators Ø Assignment, comparison, arithmetic, Boolean, string, special v. Control statements Ø Conditions, loops v. Keywords Ø Reserved words with special meaning
A Few JS Examples (1) v. Some basic Java. Scripts Ø To get the day of the month var day = new Date(). get. Date(); Ø To do something ten times for (var x=0; x<10; x++) { document. write( x * x ); } Ø To make a decision and act on it if (username == "Bob") { userisknown = true; display. Welcome. Back(username); } else { userisknown = false; display. First. Login(username); }
A Few JS Examples (2) v. Some more basic Java. Scripts Ø To write something into the page document. write("<b>Welcome, " + uname + "</b>"); Ø To make a calculation pcent = score / 100; Ø To show the user a message box alert("Score: " + pcent + "%"); Ø To put some text on the Windows clipboard mycb = "daveg~armadillo"; clipboard. Data. set. Data("Text", mycb); ØTo force a jump to another page window. location="anotherpage. htm";
Summary v. Most Web pages – remote or local – are a combination of those technologies ØRaw content, placed inside… ØHTML tags, formatted with… ØCSS rules, interactivity produced by… ØJava. Script scripts v. Newer technologies like DHTML, XHTML, and XML are based on these ØA little knowledge now can prepare you for new technologies and help you keep up with your peers, your boss… and your kids!