Introduction to Web Technologies And Software CMC presented by CMC TATAKESWAR & CMC SINGUR
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Introduction to Web Technologies And Software
CMC
presented by
CMC TATAKESWAR & CMC SINGUR
Presenta tion OverviewLook a t main technologica l
components tha t make up modern Web pagesHTML – HyperText Markup LanguageCSS – Cascading Style Shee tsJavaScript – um, JavaScript
For each componentWhat it is /isn't, can/can't doWhat kinds of cons tructs it comprisesHow to use it in Web pagesHow it inte racts with othe r components
HTML ComponentsDocuments
Document = page = HTM file = topicContent (text, images)Tags (display commands)
Other te rmsWindow: browser display windowURL: Uniform Resource Loca torHyperlink: hypertext jump to a resourceResource : URL, image , mailto, exte rna l
file
HTML PagesHTML pages a re tag-based
documentsReally pla in ASCII text filesDon't look like documents they representTags indica te how process ing program
should display text and graphicsDesigned to describe hypertext, not paperProcessed by browsers "on the fly"Tags usua lly appear in pa irsMost have reasonable names or
mnemonicsMost can be modified by a ttributes /va lues
That's How This ...
<HTML> <HEAD> <BODY background="slate.gif"> <H1>Welcome</H1> <IMG SRC="DOUGLAS.GIF" WIDTH="80" HEIGHT="107" ALT="Our Founder" BORDER="0">
<H2>A Message from the President </H2> <P><font color=red>Good evening! Thank you for working late!</font></P>
<P>Hello and welcome to DougCo, 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 DougCo; 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
START TAG END TAG<HTML> </HTML><HEAD> </HEAD><TITLE> </TITLE><BODY> </BODY><H1>, <H2>, ... </H1>, </H2>, ...<IMG ...> </IMG> (optional)<A ...> </A><P> </P> (optional)<BR> (none; "empty" tag)<OL> </OL><UL> </UL><LI> </LI> (optional)
Some HTML Tag Examples
HTML Document LayoutExample of bas ic tag pos itioning
Always think c o nta ine rs !Tag pa irs tha t enclose content
<html><head><title>Title bar text</title></head><body><p>Look, I'm a paragraph!</p></body></html>
Some Common Text TagsHeading leve ls
h1 – h6, numbers inverse to text s ize<h1>Heading One</h1> <h2>Heading One</h2>
ParagraphProbably the most common tag<p>Yada yada yada...</p>
Line break (an empty tag)Used when <p>'s white space not wantedThis line will break<br>right there
Note white space or lack the reof in HTML source does not matter!
Ordered & Unordered Lis tsOrdered (numbered)
Use <ol>...</ol> tags
Unordered (bulle ted)Use <ul>...</ul> tags
Lis t Items make up both lis tsUse same <li>...</li> tags
Lis ts can conta in a lmos t anythingText, images , pa ragraphs , linksEven other (nes ted) lis ts , same type or
not
Attributes and ValuesPropertie s , tra its , or characte ris tics tha t
modify the way a tag looks or actsUsually in pa irs : <body bgcolor="teal">Sometimes not: <dl compact>
Most HTML tags can take a ttributesFormat of va lue depends on a ttributewidth="150" ... href="page3.htm" no twidth="page3.htm" ... href="150"
The Anchor Tag (1)
The tag tha t puts the HT in HTML<a> ... </a> (use less by itse lf)Must have a ttributes to be useful
HREF (Hypertext REFerence) a ttributeMakes 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
Whatever is be tween <a> and </a> is hot (clickable )Clicking makes the link go somewhere
or do something
The Anchor Tag (2)
Some link examples
text only
image only
both
Images (1)
Used in pages for va rious reasonsClarifica tion, naviga tion, periphera l
tra ining
Images not in page ; re fe re nc e d by pageGraphics a re sepa ra te , required filesUsually GIFs or JPGs, sometimes othersCan be anywhere in document body: in
pa ragraphs , headings , lis ts , anchors , e tc.
Place image with <img> tagLike <a>, <img> is use less by itse lfAll work is done with a ttributes /va lues
Images (2)
Main a ttribute : SRCTells page where to find the imageFile name can be loca l, re la tive , or fullCase sens itivity depends on se rverAnimated GIFs added same as s ta tic
<img src="smiley.gif"><img src="./pix/mypic.jpg"><img src="http://www.myweb.com/mail.gif">
Tables (1)
Powerful, flexible information de live ryUsed to re flect or impart s tructure
A table is a conta ine r<table> ... </table>
That conta ins othe r conta ine rs (rows)<tr> ... </tr>
That conta in othe r conta ine rs (ce lls )<td> ... </td> (data cells)<th> ... </th> (heading cells)
That conta in da ta – or othe r conta ine rsText, graphics , lis ts , even other tables !
Tables (2)
Bas ic table markup<table border="1"> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr></table> Row 1, Cell 1 Row 1, Cell 2
Row 2, Cell 1 Row 2, Cell 2
CSS ConceptsStyles a re named se ts of formatting
commands[18pt, Aria l, le ft a ligned] "Section head"[Bold, ita lic, blue] "Glossary te rm"[Normal, 10pt, Verdana] "Body text"[Ita lic, orange , small caps] "Bob"
Style shee ts a re control documents tha t a re re fe renced by content documentsMS Word, other editors & desktop
publishing programs have done it for yearsDOT : DOC :: CSS : HTM
Why Use CSS?HTML formatting is awkward and
impreciseOrigina lly intended to de liver well
organized text (a imed a t s tructure , not formatting)
Over time , formatting e lements were added tha t solved some problems , but crea ted many more
W3C proposed Cascading S tyle Shee tsSepara te format from contentEnforce cons is tencyGrea tly s implify control & maintenance
What's "Cascading" All About?
Three places to put s tyle commandsExterna l: Affects a ll documents it's a ttached
toInte rna l: Affects only document it appears inInline : Affects only text it's applied to
Cascading means s tyles ' "pecking order"Precedence is : Inline > Inte rna l > Exte rna lSeems backward, but it couldn't work any
other way; for example…Picture a document whose s tyle shee t
specifies Verdana as the font, with one paragraph s tyle in Courie r New, with one bold word or phrase
What Can CSS Control?Almost everything
Page background, colors , images , fonts and text, margins and spacing, headings , pos itioning, links , lis ts , tables , cursors , e tc.
W3C intends CSS to "…relieve HTML of the respons ibility of presenta tion."Trans la tion: "Don't bug us for new tags ;
change exis ting tags & make your own us ing CSS."
Idea is to put a ll formatting in CSSTo tha t end, many tags a re "depreca ted" by
CSS: <font>, <basefont>, <cente r>, <s trike>…
Coding CSS RulesRules have very specific pa rts and syntax
Rules have two bas ic pa rts : se lector and decla ra tionDecla ra tion a lso has two parts : property and va lue
Selector te lls the rule wha t to modifyDecla ra tion te lls the rule how to modify it
h2 { font-style : italic ; }
rule
property value
selector declaration
CSS Rule PlacementIn a separa te .CSS file
Affects a ll pages to which it is linked.CSS re fe renced by pages with <link> tag
In the <head> of an .HTM pageAffects only page in which it appearsRules a re coded in <s tyle></s tyle>
conta inerIn an HTML tag in page <body>
Affects only text to which it is a ttachedDecla ra tions a re coded as a ttribute =
" va lue " pa irs , e .g., s tyle="color: blue ;"
Linking To An Externa l CSSDo not put <s tyle></s tyle> tags in
the .CSS file ; this will prevent it from working
Add CSS rules as needed; break lines where necessa ry; format as des ired
Save as file na m e .cssReference .CSS in <head> of .HTM(s)
<head><link rel="stylesheet" type="text/css"
href="mystyles.css"></head>
Adding S tyles To A Single PageWithin document's <head>, inse rt a
<s tyle></s tyle> conta inerCode rules exactly as you would in an
exte rna l .CSS
<head><style> h2 { font-style: italic; color: red; } p { font-family: "Verdana, Arial, sans- serif"; font-size: 12pt; color: blue; }</style></head>
Adding S tyles To An HTML TagWithin a tag's < >, code an
a ttribute = " va lue " pa ir de fining s tyle characte ris ticsTip: Watch out for nes ted quotes
<h1 style = "font: small-caps bold italic; font-family: 'Verdana, Arial, sans-serif'; color: #008080; text-align: center;">Gettysburg Address (First Draft)</h1><p style = "font-family: Times;color: #800000; font-weight: bold;">Four score and seven beers ago…</p>
JavaScript IntroWhat JavaScript isn’t
Java (object-oriented programming language)A "programmers -only" language
What JavaScript isExtens ion to HTML (support depends on
browser)An access ible , object-based scripting
language
What JavaScript is forInte ractivity with the use r:
* input (use r provides da ta to applica tion) * process ing (applica tion manipula tes da ta )* output (applica tion provides re sults to use r)
Implementing JavaScript (1)
Direct inse rtion into page (immedia te )In <script></script> conta iner within
document head or body
Direct inse rtion into page (de fe rred)In <script></script> conta iner and ins ide
function { … } definition within document head or body
Through exte rna l re fe rencesIn exte rna l .js file s (immedia te /defe rred)Much like CSS exte rna l re fe rence
Embedded inlineWithin other tags (a s a ttribute va lues )
Implementing JavaScript (2a)
Direct inse rtion into page (immedia te )<body><p>Today is <script>document.write( Date() ); </script></p>
Direct inse rtion into page (de fe rred)<head><script>function dwd() { document.write( Date() ); }</script></head>. . .<body><p>Today is <script>dwd(); </script></p>
Implementing JavaScript (2b)
Through exte rna l re fe rences (immedia te /de fe rred depends on script file 's contents )<script src="swapimgs.js"></script>
Embedded inline as a ttribute va lues<img id="pic1" src="somepic.jpg" onmouseover="swapin('pic1')" onmouseout="swapout('pic1')">. . .<input type="button" value="Buy Now" onclick="placeOrder('ordform')"</input>
Key Language Components
ObjectsThings on a page ; think no un
AttributesProperties of objects ; think a d je c tiv e
MethodsActions taken by objects ; think ve rb
Sta tementsLines of assembled components ; think s e nte nc e
FunctionsNamed groups of s ta tements ; think p a ra g ra ph
Programming Cons tructs
VariablesNamed e lements tha t can change va lue
Data typesIntege r, floa ting-point, Boolean, s tring
Opera torsAssignment, comparison, a rithmetic,
Boolean, s tring, specia l
Control s ta tementsConditions , loops
KeywordsReserved words with specia l meaning
A Few JS Examples (1)
Some bas ic JavaScriptsTo ge t the day of the monthvar day = new Date().getDate();
To do something ten timesfor (var x=0; x<10; x++) { document.write( x * x ); }
To make a decis ion and act on itif (username == "Bob") { userisknown = true; displayWelcomeBack(username); }else { userisknown = false; displayFirstLogin(username); }
A Few JS Examples (2)
Some more bas ic JavaScriptsTo write something into the pagedocument.write("<b>Welcome, " + uname + "</b>");
To make a ca lcula tionpcent = score / 100;
To show the use r a message boxalert("Score: " + pcent + "%");
To put some text on the Windows clipboardmycb = "daveg~armadillo";clipboardData.setData("Text",mycb);
To force a jump to another pagewindow.location="anotherpage.htm";
SummaryMost Web pages – remote or loca l –
a re a combina tion of those technologiesRaw content, placed ins ide…HTML tags , formatted with…CSS rules , inte ractivity produced by…JavaScript scripts
Newer technologies like DHTML, XHTML, and XML are based on theseA little knowledge now can prepare you for
new technologies and he lp you keep up with your peers , your boss… and your kids !
Related Documents
