An Introduction to Web Technologies

1
An Introduction to Web Technologies

• Ankit Jain
• 4th Year, Computer Engg
• Head DCETECH.COM

2
Internet and WWW

• Inter-network and World Wide Web
• Interlinked hypertext documents accessed using
  HTTP Protocol
• Client - Server architecture

3
Why Internet?Use of internet

• Email
• Social Networking, Chat
• Information sharing
• Getting updates News around the world
• Entertainment Games, Videos and Music
• Virtual classrooms
• Remote Access
• Online Jobs

4
Why Websites?Offline Apps vs. Online Apps

• ONLINE APPS
• No need to install
• Just login and use
• Available from anywhere where Internet connection
  is available
• Operating system independent
• No piracy issues

5
Why Websites?Offline Apps vs. Online Apps

• OFFLINE APPS
• Ease of use
• Generally have more features
• Easier to develop but difficult to update

6
Technologies OverviewList of Technologies

• Client Side Technologies
• HTML, CSS, JavaScript, VBScript
• XHTML, DHTML, WML, AJAX
• FLASH
• Server Side Technologies
• ASP, PHP, Perl, JSP
• ASP.NET, Java
• MySQL, SQL Server, Access

7
Technologies OverviewList of Technologies

• Some More Advanced Technologies
• XML, XSLT, RSS, Atom
• X-Path, XQuery, WSDL
• XML-DOM, RDF
• Ruby on Rails, GRAIL Framework
• REST, SOAP

8
How 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 sharing

9
HTMLHyper Text Markup Language

• Documents
• Document page HTM file topic
• Content (text, images)
• Tags (display commands)
• Other terms
• Window browser display window
• URL Uniform Resource Locator
• Hyperlink hypertext jump to a resource
• Resource URL, image, mailto, external file

10
HTML

• 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
• Processed by browsers on the fly
• Tags usually appear in pairs
• Most have reasonable names or mnemonics
• Most can be modified by attributes/values

11
Thats how this

• lthtmlgt
• ltheadgtlttitlegtWelcome onboardlt/titlegtlt/headgt
• ltbody bgcolorf4f4f4"gt
• lth1gtWelcomelt/h1gt
• ltimg srcdcetech.gif" width222" height80"
  altDCETECH" BORDER"0 /gt
• lth2gtA Message from the Speaker lt/h2gt
• ltpgtltfont colorredgtGood evening! Thank you for
  coming here!lt/fontgtlt/pgt
• ltpgtHello and welcome to Web technologies
  workshop! I'm ltbgtAnkit Jain,lt/bgt, 4th year
  Computer Engg lta hrefhttp//dcetech.com"gt
  Head DCETECH.COM lt/agt. Dcetech is a student
  portal and only one of its kind in India.It is
  not only a technical oriented site which caters
  only for engineers but its for students from any
  background! Also students from any educational
  institution can register and join Dcetech. lt/pgt
• . . .
• lt/bodygt
• lt/htmlgt

12
Turns into this
13
Some HTML Tags example

• START TAG END TAG
• ltHTMLgt lt/HTMLgt
• ltHEADgt lt/HEADgt
• ltTITLEgt lt/TITLEgt
• ltBODYgt lt/BODYgt
• ltH1gt, ltH2gt, ... lt/H1gt, lt/H2gt, ...
• ltIMG ...gt lt/IMGgt (optional)
• ltA ...gt lt/Agt
• ltPgt lt/Pgt
• ltBR/gt (none "empty" tag)
• ltOLgt lt/OLgt
• ltULgt lt/ULgt
• ltLIgt lt/LIgt

14
Basic Structure of HTML document Example of
basic tag positioning

• lthtmlgt
• ltheadgt
• lttitlegtTitle bar textlt/titlegt
• lt/headgt
• ltbodygt
• ltpgtLook, I'm a paragraph!lt/pgt
• lt/bodygt
• lt/htmlgt

15
Attributes and Values

• Properties, traits, or characteristics that
  modify the way a tag looks or acts
• Usually in pairs ltbody bgcolor"teal"gt
• Sometimes not ltoption selectedgt
• Most HTML tags can take attributes
• Format of value depends on attribute
• width"150" ... href"page3.htm"
  notwidth"page3.htm" ... href"150"

16
Tables

• lttable border"1"gt
• lttrgt
• lttdgtRow 1, Cell 1lt/tdgt
• lttdgtRow 1, Cell 2lt/tdgt
• lt/trgt
• lttrgt
• lttdgtRow 2, Cell 1lt/tdgt
• lttdgtRow 2, Cell 2lt/tdgt
• lt/trgt
• lt/tablegt

17
CSS

• What CSS Controls
• Page background, colors, images, fonts and text,
  margins and spacing, headings, positioning,
  links, lists, tables, cursors, etc.
• W3C 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."
• Idea is to put all formatting in CSS
• To that end, many tags are "deprecated" by CSS
  ltfontgt, ltbasefontgt, ltcentergt, ltstrikegt

18
Basic CSS Rule

• Rules have very specific parts and syntax
• Rules have two basic parts selector and
  declaration
• Declaration also has two parts property and
  value
• Selector tells the rule what to modify
• Declaration tells the rule how to modify it

19
JavaScript

• What JavaScript isnt
• Java (object-oriented programming language)
• A "programmers-only" language
• What JavaScript is
• Extension to HTML (support depends on browser)
• An accessible, object-based scripting language
• What JavaScript is for
• Interactivity with the user input (user
  provides data to application) processing
  (application manipulates data) output
  (application provides results to user)

20
Usage of JS

• Direct insertion into page (immediate)
• ltbodygtltpgtToday is
• ltscriptgtdocument.write( Date() )
• lt/scriptgtlt/pgt
• Direct insertion into page (deferred)
• ltheadgt
• ltscriptgtfunction dwd() document.write(
  Date() ) lt/scriptgt
• lt/headgt. . .ltbodygt
• ltpgtToday is ltscriptgtdwd() lt/scriptgtlt/pgt

21
PHP

• Procedural language
• Compare with JavaScript which is event-driven
• C-like syntax -
• Extensive Function Library
• Good Web-server integration
• Script embedded in HTML
• Easy access to form data and output of HTML pages
• Not fully object-oriented
• Java is fully object oriented all functions
  have to be in a class
• In PHP, classes are additional but quite simple
  to use

22
PHP

• PHP scripts are essentially HTML pages with the
  occasional section of PHP script.
• PHP script is enclosed in the tag pair
• lt?php print date(HI) ?gt

23
PHP - C Like Language

• Free format - white space is ignored
• Statements are terminated by semi-colon
• Statements grouped by
• Comments begin with // or a set of comments /
  /
• Assignment is a6
• Relational operators are ,lt , gt ( not a
  single equal)
• Control structures include if (cond) .. else
  , while (cond) .. , for(startcond
  increment endcond)
• Arrays are accessed with x4 is the
  5th element of the array x indexes start at 0
• Associative Arrays (hash array in Perl,
  dictionary in Java) are accessed in the same way
  yfred
• Functions are called with the name followed by
  arguments in a fixed order enclosed in ( )
  substr(fred,0,2)
• Case sensitive - fred is a different variable
  to FRED

24
Conclusion Future Work

• 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
• JavaScript scripts on Clients sides and
• PHP scripts on server sides
• Newer technologies like DHTML, XHTML, and XML are
  based on these
• A little knowledge now can prepare you for new
  technologies!

25
Questions