web-designing workshop day 2
DESCRIPTION
TRANSCRIPT
presentsWorkshop on
Web-DesigningDate:-18-19th August
Faculty Adviser
Dr. Nilay KhareCoordinator
Dr. Deepak Singh Tomar
A powerful way to specify styles and formatting across all documents in a web site.
Style sheets can be specified inline or as a separate document.
Helps to keep a common look and feel.
CSS: Cascading Style Sheets
CSS
General form:
selector {property: value} orselector {property1: value1; property2: value2; ... propertyn: valuen }
CSS
H1 {text-align: center; color: blue; font: Arial, Times New Roman}
P {text-align: left; color: red; font-family: Tahoma, Arial Narrow; font-style: italics}
CASCADING STYLE SHEETS (CSS)
H1 {text-align: center; color: blue}
A {color:green; font-familiy:arial,courier; font-weight:bold;}
td { align:center; background-color:grey; border-color:red;}
div {position:absolute; visibily:hidden; margin:10px }
font {color:navy; font-size:2pt; font-face:trebuchet; }
hr {color:#ff0000; width:80%; align:center; }
table {width:80%; align:center; border:2px; padding:5px; }
H1 {text-align: center; color: blue} H1.widget {text-align: center; color: red; font-size:80%; }
A {color:green; font-familiy:arial,courier; font-weight:bold;}A.menu {color:cyan; font-familiy:arial,courier; font-style:italics;}
td { align:center; background-color:grey; border-color:red;}td.figure { align:right; background-color:white; border-color:black;}
font {color:navy; font-size:2pt; font-face:trebuchet; }font.fred {color:blue; font-size:2pt; font-face:trebuchet; font-
weight:bold; }
element.class {property:value; }
CASCADING STYLE SHEETS (CSS)
IFRAME
<html><body>
<iframe src="demo_iframe.htm" name="iframe_a"></iframe><p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
</body></html>
HTML – FundamentalsDIV
<div style="position:absolute; left:100px; top:100px; width:100px; height:100px; background-color:#ffffff; ">
Or Styles can be defined in a separate file
<head><LINK REL="stylesheet" HREF="mystyles.css“
TYPE="text/css">
</head>
CASCADING STYLE SHEETS (CSS)
Features of CSS3
SelectorsBox ModelBackgrounds and BordersText Effects2D/3D TransformationsAnimationsMultiple Column LayoutUser Interface
Javascripts
LET’S SEE SOME EXAMPLES
PHP
What is PHP
Hypertext PreprocessorPHP is a widely-used general-purpose
scripting language that is especially suited for Web development and can be embedded into HTML.
PHP is a general-purpose server-side scripting language originally designed for Web development to produce dynamic Web pages.
What is Scripting Language
A scripting language is a programming language that supports the writing of scripts, programs written for a software environment that automate the execution of tasks which could alternatively be executed one-by-one by a human operator.
Environments that can be automated through scripting include software applications, web pages within a web browser, the shellsof operating systems.
Client-side and Server-side Scripting
The client-side environment used to run scripts is usually a browser. The processing takes place on the end users computer. The source code is transferred from the web server to the users computer over the internet and run directly in the browser.
The server-side environment that runs a scripting language is a web server. A user's request is fulfilled by running a script directly on the web server to generate dynamic HTML pages. This HTML is then sent to the client browser. It is usually used to provide interactive web sites that interface to databases or other data stores on the server.
Uses of PHP
Image or text rollovers.Creating pop-up window.Validating the content of fields.Links HTML forms to Database.Generate secure Web Pages.
PHP Syntax
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PHP Test</title> </head> <body> <?php echo 'Hello World'; ?> </body> </html>
<HTML> <HEAD> <TITLE>MY FI RST PHP PAGE</T I TLE> </HEAD> <B ODY> <?PHP ECHO "HELLO WORLD!" ; ?> < /B ODY> </HTML>
PHP and HTML Code
< H T M L > < H E A D > < T I T L E > M Y F I R S T P H P PA G E < / T I T L E > < / H E A D > < B O D Y > < ? P H P E C H O " H E L L O W O R L D ! " ; E C H O " H E L L O W O R L D ! " ; E C H O " H E L L O W O R L D ! " ; E C H O " H E L L O W O R L D ! " ; E C H O " H E L L O W O R L D ! " ; ? > < / B O D Y > < / H T M L >
PHP and HTML Code
<?PHP $HELLO = "HELLO WORLD!" ; $A_NUMBER = 4 ; $ANOTHERNUMBER = 8 ; ?>
PHP Code
<?PHP $MYSTRI NG = "HELLO!" ; ECHO $MYSTRI NG; ECHO "<H5>I LOVE USING PHP!</H5>" ; ?>
PHP Code
<?PHP $MY_STRING = "HELLO B OB. MY NAME IS : " ; $MY_NUMBER = 4 ; $MY_LET TER = A ; ECHO $MY_STRING; ECHO $MY_LET TER; ?>
PHP: Variables
$MY_STRING = " IEEE MANI T" ;ECHO " IEEE MANI T" ; ECHO $MY_STRING;
PHP: Strings
$ A D D I T I O N = 2 + 4 ; $ S U B T R A C T I O N = 6 - 2 ; $ M U LT I P L I C AT I O N = 5 * 3 ; $ D I V I S I O N = 1 5 / 3 ; $ M O D U LU S = 5 % 2 ; E C H O " P E R F O R M A D D I T I O N: 2 + 4 = " . $ A D D I T I O N. " < B R / > " ; E C H O " P E R F O R M S U B T R A C T I O N : 6 - 2 = " .$ S U B T R A C T I O N. " < B R / > " ; E C H O " P E R F O R M M U LT I P L I C AT I O N: 5 * 3 = " .$ M U LT I P L I C AT I O N. " < B R / > " ; E C H O " P E R F O R M D I V I S I O N: 1 5 / 3 = " .$ D I V I S I O N. " < B R / > " ; E C H O " P E R F O R M M O D U LU S : 5 % 2 = " . $ M O D U LU S . " . M O D U LU S I S T H E R E M A I N D E R A F T E R T H E D I V I S I O N O P E R AT I O N H A S B E E N P E R F O R M E D . I N T H I S C A S E I T WA S 5 / 2 , W H I C H H A S A R E M A I N D E R O F 1 . " ;
Mathematical Operators
$X = 4 ; ECHO "THE VALUE OF X WITH POST-PLUSPLUS = " . $X++; ECHO "<BR /> THE VALUE OF X AFTER THE POST-PLUSPLUS IS " . $X ; $X = 4 ; ECHO "<BR />THE VALUE OF X WI TH WI TH PRE -PLUSPLUS = " . ++$X ; ECHO "<BR /> THE VALUE OF X AFTER THE PRE -PLUSPLUS IS " . $X ;
Logical Operators
< ? P H P E C H O " H E L L O W O R L D ! " ; / / T H I S W I L L P R I N T O U T H E L L O W O R L D ! E C H O " < B R / > P S S T. . . Y O U C A N ' T S E E M Y P H P C O M M E N T S ! " ; / / E C H O " N O T H I N G " ; / / E C H O " M Y N A M E I S H U M P E R D I N K L E ! " ; ? >
< ? P H P / * T H I S E C H O S TAT E M E N T W I L L P R I N T O U T M Y M E S S A G E T O T H E T H E P L A C E I N W H I C H I R E S I D E O N. I N O T H E R W O R D S , T H E W O R L D . * / E C H O " H E L L O W O R L D ! " ; / * E C H O " M Y N A M E I S H U M P E R D I N K L E ! " ; E C H O " N O WA Y ! M Y N A M E I S U B E R P H P P R O G R A M M E R ! " ; * / ? >
Comments in PHP
$MY_NAME = "SOMEGUY" ; IF ( $MY_NAME == "SOMEGUY" ) { ECHO "YOUR NAME IS SOMEGUY!<BR />" ; } ECHO "WELCOME TO MY HOMEPAGE!" ;
IF Statement
IfElseElseifSwitch
INCLUDE FUNCTION
<HTML> <B ODY> <A HREF="HT TP: / /WWW.EXAMPLE.COM/ INDEX .PHP">HOME</A> - <A HREF="HT TP: / /WWW.EXAMPLE.COM/AB OUT.PHP">AB OUT US</A> - <A HREF="HT TP: / /WWW.EXAMPLE.COM/L INKS.PHP">LINKS</A> - <A HREF="HT TP: / /WWW.EXAMPLE.COM/CONTACT.PHP">CONTACT US</A> <BR />
Menu.php
<?PHP INCLUDE( "MENU.PHP" ) ; ?> <P>THI S IS MY HOME PAGE THAT USES A COMMON MENU TO SAVE ME T I ME WHEN I ADD NEW PAGES TO MY WEBSITE!</P> </B ODY> </HTML>
Index.php
<HTML><B ODY> <H4>TIZAG ART SUPPLY ORDER FORM</H4> <FORM> <SELECT> <OPTION>PAINT</OPTION> <OPTION>BRUSHES</OPTION> <OPTION>ERASERS</OPTION> </SELECT> QUANTITY: <INPUT TYPE="TEXT" /> <INPUT TYPE="SUBMIT" /> < /FORM> </B ODY></HTML>
PHP Form
< H T M L > < B O D Y > < H 4 > T I Z A G A RT S U P P LY O R D E R F O R M < / H 4 > < F O R M A C T I O N = " P R O C E SS. P H P " M E T H O D = " P O S T " > < S E L E C T N A M E = " I T E M " > < O P T I O N > PA I N T < / O P T I O N > < O P T I O N > B R U S H E S < / O P T I O N > < O P T I O N > E R A S E R S < / O P T I O N > < / S E L E C T > Q UA N T I T Y: < I N PU T N A M E = " Q UA N T I T Y " T Y P E = " T E X T " / > < I N PU T T Y P E = " S U B M I T " / > < / F O R M > < / B O D Y > < / H T M L >
Order.html
<HTML><B ODY> <?PHP $QUANTITY = $_POST[ 'QUANTI TY ' ] ; $ ITEM = $_POST[ ' I TEM' ] ; ECHO "YOU ORDERED " . $QUANTITY . " " . $ ITEM . " .<BR />" ; ECHO "THANK YOU FOR ORDERING FROM T IZAG ART SUPPLIES! " ; ?> < /B ODY></HTML>
Process.html
Web Hosting
Web Components
Clients and ServersDomains NamesWeb Site Hosting Services
Clients & Servers
Clients (Browser)Internet ExplorerFirefoxMozillaNetscapeOperaAmayaAOLMSN
ServersApacheMicrosoftNetscapezeusAOLserverAVJavaWebServerOracle
Domain’s URL’s and IPs
Domain name: The specific address of a computer on the Internet microsoft.com
Uniform Resource Locator (URL): http://www.microsoft.com/faqs.html
Internet protocol (IP) address 192.168.1.1
Domain Registrar
A company that provides domain name registration services for a fee.
Maintain database which maps domain names to IP’s
Propagate new domain name/IP address information across the internet
Domain Registrar
A company that provides domain name registration services for a fee.
Maintain database which maps domain names to IP’s
Propagate new domain name/IP address information across the internet
Domain Registrar
A company that provides domain name registration services for a fee.
Maintain database which maps domain names to IP’s
Propagate new domain name/IP address information across the internet
Creating a Web Site
1. Choose a domain name2. Register with a Registrar3. Choose a hosting service4. Tell Registrar the IP address5. Create web content6. Store (publish) onto hosting server (FTP).
(Using Filezilla or cPanel>File Manager.)
DEMO
