Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Vijay it 2 year


Published on

  • Be the first to comment

  • Be the first to like this

Vijay it 2 year

  1. 1. introduction to web technology - Presentation TranscriptAn Introduction to Web Technologies Vikram Singh Asst. Professor, Department of IT, JECRC,JodhpurInternet and WWWInter-network and World Wide WebInterlinked hypertext documents accessed using HTTP ProtocolClient - Server architectureWhy Internet? Use of internetEmailSocial Networking, ChatInformation sharingGetting updates – News around the worldEntertainment – Games, Videos and MusicVirtual classroomsRemote AccessOnline JobsWhy Websites? Offline Apps vs. Online AppsONLINE APPSNo need to installJust login and useAvailable from anywhere where Internet connection is availableOperating system independentNo piracy issuesWhy Websites? Offline Apps vs. Online AppsOFFLINE APPSEase of useGenerally have more featuresEasier to develop but difficult to updateTechnologies Overview List of TechnologiesClient Side TechnologiesHTML, CSS, JavaScript, VBScriptXHTML, DHTML, WML, AJAXFLASHServer Side TechnologiesASP, PHP, Perl, JSPASP.NET, JavaMySQL, SQL Server, AccessTechnologies Overview List of TechnologiesSome More Advanced TechnologiesXML, XSLT, RSS, AtomX-Path, XQuery, WSDLXML-DOM, RDFRuby on Rails, GRAIL FrameworkREST, SOAPHow to choose a Technology?Depends on:What is the type of content?Who is your audience?Who will modify your content?What are your Future Plans?Availability of technology?Your previous experience?Portability and Data sharingHTML Hyper Text Markup LanguageDocumentsDocument = page = HTM file = topic
  2. 2. Content (text, images)Tags (display commands)Other termsWindow: browser display windowURL: Uniform Resource LocatorHyperlink: hypertext jump to a resourceResource: URL, image, mailto, external fileHTMLHTML pages are tag-based documentsReally plain ASCII text filesDont look like documents they representTags indicate how processing program should display text and graphicsProcessed by browsers “on the fly”Tags usually appear in pairsMost have reasonable names or mnemonicsMost can be modified by attributes/valuesThat’s how this…<html><head><title>Welcome onboard</title></head><body bgcolor=“#f4f4f4&quot;><h1>Welcome</h1><img src=“dcetech.gif&quot; width=“222&quot; height=“80&quot; alt=“DCETECH&quot;BORDER=&quot;0“ /><h2>A Message from the Speaker </h2><p><font color=red>Good evening! Thank you for coming here!</font></p><p>Hello and welcome to Web technologies workshop! Im <b>Ankit Jain,</b>, 4 th yearComputer Engg <a href=“;> Head DCETECH.COM </a>. Dcetech is astudent portal and only one of its kind in India.It is not only a technical oriented site which catersonly for engineers but its for students from any background ! Also students from any educationalinstitution can register and join Dcetech. </p>...</body></html>Turns into this…Some HTML Tags exampleSTART TAG END TAG<HTML> </HTML><HEAD> </HEAD><TITLE> </TITLE><BODY> </BODY><H1>, <H2>, ... </H1>, </H2>, ...<IMG ...> </IMG> (optional)<A ...> </A><P> </P><BR/> (none; &quot;empty&quot; tag)<OL> </OL><UL> </UL><LI> </LI>Basic Structure of HTML document Example of basic tag positioning<html><head><title>Title bar text</title></head><body><p>Look, Im a paragraph!</p></body>
  3. 3. </html>Attributes and ValuesProperties, traits, or characteristics that modify the way a tag looks or actsUsually in pairs: <body bgcolor=&quot;teal&quot; >Sometimes not: <option selected >Most HTML tags can take attributesFormat of value depends on attributewidth=&quot;150&quot; ... href=&quot;page3.htm&quot; not width=&quot;page3.htm&quot; ...href=&quot;150&quot;Tables<table border=&quot;1&quot;><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 2Some Common Text TagsHeading levelsh1 – h6, numbers inverse to text size <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 wanted This line will break<br>right thereNote white space or lack thereof in HTML source does not matter!Ordered & Unordered ListsOrdered (numbered)Use <ol>...</ol> tagsUnordered (bulleted)Use <ul>...</ul> tagsList Items make up both listsUse same <li>...</li> tagsLists can contain almost anythingText, images, paragraphs, linksEven other (nested) lists, same type or notAttributes and ValuesProperties, traits, or characteristics that modify the way a tag looks or actsUsually in pairs: <body bgcolor=&quot;teal&quot; >Sometimes not: <dl compact >Most HTML tags can take attributesFormat of value depends on attributewidth=&quot;150&quot; ... href=&quot;page3.htm&quot; not width=&quot;page3.htm&quot; ...href=&quot;150&quot;The Anchor Tag (1)The tag that puts the HT in HTML<a> ... </a> (useless by itself)Must have attributes to be usefulHREF (Hypertext REFerence) attributeMakes a jump to someplace (URL) <a href=&quot;mypage.htm&quot; >My Page</a> <ahref=&quot;; >Google</a>Link text is underscored by defaultWhatever is between <a> and </a> is hot (clickable)
  4. 4. Clicking makes the link go somewhere or do somethingThe Anchor Tag (2)Some link examplestext only image only bothImages (1)Used in pages for various reasonsClarification, navigation, peripheral trainingImages not in page; referenced by pageGraphics are separate, required filesUsually GIFs or JPGs, sometimes othersCan be anywhere in document body: in paragraphs, headings, lists, anchors, etc.Place image with <img> tagLike <a>, <img> is useless by itselfAll work is done with attributes/valuesImages (2)Main attribute: SRCTells page where to find the imageFile name can be local, relative, or fullCase sensitivity depends on serverAnimated GIFs added same as static<img src=&quot;smiley.gif&quot; > <img src=&quot;./pix/mypic.jpg&quot; > <img src=&quot;; >Tables (1)Powerful, flexible information deliveryUsed to reflect or impart structureA table is a container <table> ... </table>That contains other containers (rows) <tr> ... </tr>That contain other containers (cells) <td> ... </td> (data cells) <th> ... </th> (heading cells)That contain data – or other containersText, graphics, lists, even other tables!Tables (2)Basic table markup<table border=&quot;1&quot;> <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 2CSS ConceptsStyles are named sets of formatting commands[18pt, Arial, left aligned] &quot;Section head&quot;[Bold, italic, blue] &quot;Glossary term&quot;[Normal, 10pt, Verdana] &quot;Body text&quot;[Italic, orange, small caps] &quot;Bob&quot;Style sheets are control documents that are referenced by content documentsMS Word, other editors & desktop publishing programs have done it for yearsDOT : DOC :: CSS : HTMWhy Use CSS?HTML formatting is awkward and impreciseOriginally intended to deliver well organized text (aimed at structure, not formatting)Over time, formatting elements were added that solved some problems, but created many moreW3C proposed Cascading Style SheetsSeparate format from contentEnforce consistencyGreatly simplify control & maintenanceWhats &quot;Cascading&quot; All About?Three places to put style commandsExternal: Affects all documents its attached toInternal: Affects only document it appears in
  5. 5. Inline: Affects only text its applied toCascading means styles &quot;pecking order&quot;Precedence is: Inline > Internal > ExternalSeems backward, but it couldnt work any other way; for example…Picture a document whose style sheet specifies Verdana as the font, with one paragraph style inCourier New, with one bold word or phraseWhat Can CSS Control?Almost everythingPage background, colors, images, fonts and text, margins and spacing, headings, positioning,links, lists, tables, cursors, etc.W3C intends CSS to &quot;…relieve HTML of the responsibility of presentation.&quot;Translation: &quot;Dont bug us for new tags; change existing tags & make your own usingCSS.&quot;Idea is to put all formatting in CSSTo that end, many tags are &quot;deprecated&quot; by CSS: <font>, <basefont>, <center>,<strike>…Coding CSS RulesRules have very specific parts and syntaxRules have two basic parts: selector and declarationDeclaration also has two parts: property and valueSelector tells the rule what to modifyDeclaration tells the rule how to modify ith2 { font-style : italic ; } rule property value selector declarationCSS Rule PlacementIn a separate .CSS fileAffects all pages to which it is linked.CSS referenced by pages with <link> tagIn the <head> of an .HTM pageAffects only page in which it appearsRules are coded in <style></style> containerIn an HTML tag in page <body>Affects only text to which it is attachedDeclarations are coded as attribute= &quot;value&quot; pairs, e.g., style=&quot;color: blue;&quot;Linking To An External CSSDo not put <style></style> tags in the .CSS file; this will prevent it from workingAdd CSS rules as needed; break lines where necessary; format as desiredSave as filename .cssReference .CSS in <head> of .HTM(s)<head> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot;href=&quot;mystyles.css&quot;> </head>Adding Styles To A Single PageWithin documents <head>, insert a <style></style> containerCode rules exactly as you would in an external .CSS<head> <style> h2 { font-style: italic; color: red; } p { font-family: &quot;Verdana, Arial, sans-serif&quot;; font-size: 12pt; color: blue; } </style> </head>Adding Styles To An HTML TagWithin a tags < >, code an attribute = &quot;value&quot; pair defining style characteristicsTip: Watch out for nested quotes<h1 style = &quot;font: small-caps bold italic; font-family: Verdana, Arial, sans-serif; color:#008080; text-align: center;&quot; >Gettysburg Address (First Draft)</h1> <p style = &quot;font-family: Times; color: #800000; font-weight: bold;&quot; > Four score and seven beers ago…</p>JavaScriptWhat JavaScript isn’tJava (object-oriented programming language)A &quot;programmers-only&quot; languageWhat JavaScript is
  6. 6. Extension to HTML (support depends on browser)An accessible, object-based scripting languageWhat JavaScript is forInteractivity with the user: * input (user provides data to application) * processing (applicationmanipulates data) * output (application provides results to user)Usage of JSDirect insertion into page (immediate)<body><p>Today is<script>document.write( Date() );</script> </p>Direct insertion into page (deferred)<head><script> function dwd() { document.write( Date() ); } </script></head> . . . <body><p>Today is <script>dwd(); </script> </p>Conclusion & Future WorkMost Web pages – remote or local – are a combination of those technologiesRaw content, placed inside…HTML tags, formatted with…CSS rules, interactivity produced by…JavaScript scripts on Clients sides and…PHP scripts on server sidesNewer technologies like DHTML, XHTML, and XML are based on theseA little knowledge now can prepare you for new technologies!