WEB
PROGRAMMING
PRESENTED BY,
MANOJ KUMAR D S,
ASSISTANT PROFESSOR,
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING.
World Wide Web
TheWorld
Wide
Web(www,W3) is aninformation systemof
interlinkedhypertextdocumentsthatareaccessedviatheInternetandbuilton
topoftheDomainNameSystem.
Ithasalsocommonlybecomeknownsimplyasthe Web.
Individual document pages on theWorldWideWeb are calledweb pagesand
are accessed with a software application running on the user's computer,
commonlycalledawebbrowser.
Web
pages
may
contain
text,images,
videos,
and
othermultimediacomponents, as well asweb navigation features consisting
ofhyperlinks.
Tim Berners-Lee, aBritishcomputer scientist and formerCERNemployee,is
theinventoroftheWeb.
On 12 March 1989,Berners-Lee wrote a proposal for what would eventually
becometheWorldWideWeb.
The 1989 proposal was meant for a more effective CERN communication
system but Berners-Lee also realised the concept could be implemented
throughout the world.Berners-Lee andBelgiancomputer scientistRobert
Cailliauproposed in 1990 to use hypertext "to link and access information of
various kinds as a web of nodes in which the user can browse at will",and
Berners-LeefinishedthefirstwebsiteinDecemberofthatyear.
The first test was completed around 20 December 1990 and Berners-Lee
reportedabouttheprojectonthenewsgroupalt.hypertexton7August1991
USAGE OF INTERNET
Applyforjobsorschools
Filloutgovernmentforms
Checkbankaccounts
Communicatewithfamily,friendsandco-workers
Doresearch
Learnnewskills
Readnews
Watchvideos
How to connect to the Internet
ThreemainwaystoconnecttotheInternet
Dial-Up
High Speed/DSL
Wireless Connection (Wi-Fi)
Dial-Up Internet Connection
Dial-Up
Allyouneedisacomputer,phone-lineandInternetServiceProvider!(ISP)
NotasfastasotherInternetconnections,butoftenmoreaffordable
Your computer
Landline
ISP
Internet
High Speed (Cable/DSL) Internet Connection
Travelsthroughfiber-opticcablesunderground
NeedstobeconnectedbyaModemtoyourcomputer
Modem:AhubthatconnectsthecomputertotheInternet
FasterthanDial-up
Wireless Internet Connection
(Wi-Fi)
YourcomputermustbeaWirelessenableddevice.
Yourcomputercanpickupsignalsfromdifferentwirelessnetworks.
Somenetworksrequirepasswordsorasubscription,othersarefree.
Thisiswhatthewirelesssymbolwouldlooklikeifyourcomputerwas
connected.
WirelessFidelity(WI-FI)
Web Browser
Aweb-basedprogramthatdisplaystheInternet
CommonWebBrowsers
Safari: forApples/Macintosh
Internet Explorer: forWindowsonly
Google Chrome: createdbyGoogle
Mozilla Firefox: worksonMac&WindowsPC
IF FACEBOOK WAS A
SCHOOL I WOULD HAVE GOT
100% FOR ATTENDANCE
-UNKNOWN
DESIGN IS NOT JUST WHAT IT LOOKS LIKE AND FEELS LIKE.
DESIGN IS HOW IT WORKS.
QUALITY IS MUCH BETTER THAN QUANTITY.
ONE HOME RUN IS MUCH BETTER THAN TWO DOUBLES.
-STEVE JOBS
HTML
Hyper Text Markup Language, commonly referred to asHTML, is the standardmarkup
languageusedtocreatewebpages.
It is written in the form ofHTML elementsconsisting oftagsenclosed inangle
brackets(like<html>).
HTML tags most commonly come in pairs like<h1>and</h1>, although some
representempty elementsandsoareunpaired.
The first tag in such a pair is thestart tag, and the second is theend tag(they are also
calledopening tagsandclosing tags).
HTMLelementsformthebuildingblocksofallwebsites.
HTML allowsimages and objectsto be embedded and can be used to
createinteractiveforms.
Itprovidesameanstocreatestructureddocumentsbydenotingstructuralsemantics
fortextsuchasheadings,paragraphs,lists,links,quotesandotheritems.
It can embedscriptswritten in languages such asJavaScriptwhich affect the
behaviourofHTMLwebpages.
WebbrowserscanalsorefertoCascadingStyleSheets(CSS)todefinethelookand
layoutoftextandothermaterial.
TheWorld Wide Web Consortium(W3C), maintainer of both the HTML and the
CSSstandards,hasencouragedtheuseofCSSoverexplicitpresentationalHTML
since1999.
HTML Tags
ThemostbasictagistheHTMLtag.
This is used so the browser will know that the content to follow is HTML
code/content.(Mostbrowsersassumethisbydefaultevenwithouttheuseof
theHTMLtag.)
<HTML>
</HTML>
HTML Tags - Bold
TextcanbeformattedinwaysthatyouwouldnormallydosoinaprogramlikeMSWord.
Tosetsomethinginbold,usethe<B></B>tagsandincludethepiecetobesetinboldinbetween.
Example.
<HTML>
Thepurposeofthisexperimentistolearnmoreabouttheway<B>people</B>understand
<B>machines</B>.
</HTML>
HTML Tags - Italics
Italicsworkinthesameway.TheHTMLtagsforsettingtextinitalicsis<I>and</I>
Example.
<HTML>
Althoughtheaveragescoreinthissampleis4.23,<I>yourscore</I>was6.32.
</HTML>
Font size and color
Tosetthefontface,usethe<FONT></FONT>tags.
Note:Thefonttagisthefirstofseveraltagswewilldiscussthathaveattributes.Forexample,
whensettingthefont,youcanadjusttheface,thesize,andthecolor.
Example
<HTML>
<FONTSIZE=2FACE=arialCOLOR=blue>
Welcometoourlabwebpage!
</FONT>
</HTML>
Line spacing
InHTML,carriagereturnsarenotcodedaslinebreaks.Youcanusethemallyouwishtoformat
yourfile,butthepresenceofareturninthecodewillnotaffecttherenderingofthetext.
Toinsertalinebreak,youmustincludeatagforit.
Thelinebreaktagis<BR>.Thereisnoclosingtag.
Line spacing
Example.
<HTML>
<FONTSIZE=3FACE=arialCOLOR=blue>
PersonalityResearchLab
</FONT>
<BR><BR>
<FONTSIZE=2FACE=arialCOLOR=blue>
Welcometoourlabwebpage!
</FONT>
</HTML>
Centering Text
Tocentertext,usethe<CENTER>and</CENTER>tags
Example.
<HTML>
<CENTER>PersonalityResearchLab</CENTER>
<BR><BR>
Thepurposeofthisexperimentistolearnmoreaboutthewaypeopleunderstandothers.
</HTML>
Creating Links
Alinkisaportionofthepagethat,whenclicked,automaticallytransportstheusertoanewpage.
HTMLcode:
<AHREF=http://www.google.com>clickheretogotoGoogle</A>
Note:TheAstandsforanchor.TheHREFattributeistheURLforthepageyouwantthe
usertogotowhenthelinkisclicked.Thetextinbetweenthetwotagswillbewhattheusersees
asthelink.
Tables
Tablesareavaluablewaytoorganizetheplacementoftextonawebpage.
Afewimportantthingstoknowaboutthewaytablecodeisprocessedbybrowsers.
-Rowbyrow
-Lefttoright
Tables
Anytextthatisplacedin-betweenthesetagswillberenderedbythebrowser.
Example.
<TABLE>
</TABLE>
Tables
The<TR>and</TR>tagsareusedtodenoteanewTableRow.
<TABLE>
<TR>
</TR>
</TABLE>
Tables
The<TD></TD>tagsareusedtodenoteacellwithinarow.
Anytextthatisplacedin-betweenthesetagswillberenderedwithinthatcellinthetable.
Example
<TABLE>
<TR>
<TD>cell1</TD>
<TD>cell2</TD>
</TR>
</TABLE>
Tables
Modifyingtableattributes:
<TABLEBORDER=1BGCOLOR=gray>
<TR>
<TD>cell1</TD>
<TD>cell2</TD>
</TR>
<TR>
<TD>cell3</TD>
<TD>cell4</TD>
</TR>
Cascading Style Sheets (CSS)
OneofthecumbersomeaspectsofformattingtextinclassicHTMListhesheernumberoftags
requiredtodoso.Ifyouchoosetochangethestyleofyourwebpageafteraperiodoftime,
allofthecodeneedstoberewritten.
Thisisespeciallyinconvenientwhenworkingwithtablesbecausethetexthastobeformatted
separatelywithineachcell.
CSS provides a means for separating style from content and is an efficient way to add
personalitytoyourwebpages.
CSS
Adjustingthewayinwhichlinksbehave.
<HTML>
<styletype="text/css"media="all">
a:link
{color:blue;}
a:visited
{color:navy;}
a:active {color:pink;}
}
</style>
Welcometomywebpage!<BR>
<AHREF=http://www.google.com>clickheretogotoGoogle</A>
