Scribd
Upload
165 views25 pages

An Introduction To Web Technologies: Ankit Jain

This document provides an introduction to various web technologies including HTML, CSS, JavaScript, PHP and more. It describes how the internet and world wide web works using HTTP protocol. It explains why websites are useful for email, social networking, sharing information, entertainment and more. It provides an overview of common client-side and server-side technologies. It also discusses how to choose appropriate technologies based on factors like content type, audience, and future plans. Finally, it concludes that most web pages combine these technologies and newer technologies are based on these foundational ones.

Uploaded by

Jean-yves Lapicque
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
165 views25 pages

An Introduction To Web Technologies: Ankit Jain

This document provides an introduction to various web technologies including HTML, CSS, JavaScript, PHP and more. It describes how the internet and world wide web works using HTTP protocol. It explains why websites are useful for email, social networking, sharing information, entertainment and more. It provides an overview of common client-side and server-side technologies. It also discusses how to choose appropriate technologies based on factors like content type, audience, and future plans. Finally, it concludes that most web pages combine these technologies and newer technologies are based on these foundational ones.

Uploaded by

Jean-yves Lapicque
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 25

An Introduction to

Web Technologies

Ankit Jain
4th Year, Computer Engg
Head – DCETECH.COM
Internet and WWW

• Inter-network and World Wide Web

• Interlinked hypertext documents accessed


using HTTP Protocol

• Client - Server architecture


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
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
Why Websites?
Offline Apps vs. Online Apps
OFFLINE APPS
• Ease of use
• Generally have more features
• Easier to develop but difficult to update
Technologies Overview
List 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
Technologies Overview
List of Technologies
Some More Advanced Technologies
• XML, XSLT, RSS, Atom
• X-Path, XQuery, WSDL
• XML-DOM, RDF
• Ruby on Rails, GRAIL Framework
• REST, SOAP
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
HTML
Hyper 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
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
That’s how this…

<html>
<head><title>Welcome onboard</title></head>
<body bgcolor=“#f4f4f4">
<h1>Welcome</h1>
<img src=“dcetech.gif" width=“222" height=“80" alt=“DCETECH"
BORDER="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! I'm <b>Ankit
Jain,</b>, 4th year Computer Engg <a
href=“http://dcetech.com"> Head DCETECH.COM </a>. 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.
</p>
. . .
</body>
</html>
Turns into this…
Some HTML Tags example

• START TAG END TAG


• <HTML> </HTML>
• <HEAD> </HEAD>
• <TITLE> </TITLE>
• <BODY> </BODY>
• <H1>, <H2>, ... </H1>, </H2>, ...
• <IMG ...> </IMG> (optional)
• <A ...> </A>
• <P> </P>
• <BR/> (none; "empty" 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, I'm a paragraph!
</p>
</body>
</html>
Attributes and Values

• Properties, traits, or characteristics that


modify the way a tag looks or acts
– Usually in pairs: <body bgcolor="teal">
– Sometimes not: <option selected>
• Most HTML tags can take attributes
– Format of value depends on attribute
– width="150" ... href="page3.htm" not
width="page3.htm" ... href="150"
Tables

<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

• 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:
<font>, <basefont>, <center>, <strike>…
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
rule
h2 { font-style : italic ; }
property value
selector declaration

– Selector tells the rule what to modify


– Declaration tells the rule how to modify it
JavaScript

• What JavaScript isn’t


– 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)
Usage of JS

• Direct 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>
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
PHP

– PHP scripts are essentially HTML pages with


the occasional section of PHP script.
– PHP script is enclosed in the tag pair:
• <?php print date(“H:I”) ?>
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 ‘=’: $a=6
• Relational operators are ,< , > == ( not a single equal)
• Control structures include if (cond) {..} else { }, while
(cond) { .. } , for(startcond; increment; endcond) { }
• Arrays are accessed with [ ] : $x[4] 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: $y[“fred”]
• 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
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!
Questions

You might also like