Web-Designing Workshop Day 2

959 views

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
959
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web-Designing Workshop Day 2

  1. 1. presents Workshop onWeb-Designing Date:-18-19th August Faculty Adviser Dr. Nilay Khare Coordinator Dr. Deepak Singh Tomar
  2. 2. CSS: Cascading Style Sheets 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.
  3. 3. CSS General form: selector {property: value} or selector {property1: value1; property2: value2; ... propertyn: valuen }
  4. 4. CSSH1 {text-align: center; color: blue; font: Arial, Times New Roman}P {text-align: left; color: red; font-family: Tahoma, Arial Narrow; font-style: italics}
  5. 5. 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; }
  6. 6. CASCADING STYLE SHEETS (CSS)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; }
  7. 7. 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>
  8. 8. HTML – Fundamentals DIV
  9. 9. CASCADING STYLE SHEETS (CSS)<div style="position:absolute; left:100px; top:100px; width:100px; height:100px; background-color:#ffffff; ">OrStyles can be defined in a separate file<head><LINK REL="stylesheet" HREF="mystyles.css“ TYPE="text/css"></head>
  10. 10. Features of CSS3 Selectors Box Model Backgrounds and Borders Text Effects 2D/3D Transformations Animations Multiple Column Layout User Interface
  11. 11. Javascripts
  12. 12. LET’S SEE SOME EXAMPLES
  13. 13. PHP
  14. 14. What is PHP Hypertext Preprocessor PHP 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.
  15. 15. 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.
  16. 16. 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 users 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.
  17. 17. 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.
  18. 18. PHP Syntax <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PHP Test</title> </head> <body> <?php echo Hello World; ?> </body> </html>
  19. 19. PHP and HTML Code<HTML><HEAD><TITLE>MY FIRST PHP PAGE</TITLE></HEAD><BODY><?PHPECHO "HELLO WORLD!";?></BODY></HTML>
  20. 20. PHP and HTML Code<HTML><HEAD><TITLE>MY FIRST PHP PAGE</TITLE></HEAD><BODY><?PHPECHO "HELLO WORLD! ";ECHO "HELLO WORLD! ";ECHO "HELLO WORLD! ";ECHO "HELLO WORLD! ";ECHO "HELLO WORLD! ";?></BODY></HTML>
  21. 21. PHP Code<?PHP$HELLO = "HELLO WORLD!";$A_NUMBER = 4;$ANOTHERNUMBER = 8;?>
  22. 22. PHP Code<?PHP$MYSTRING = "HELLO!";ECHO $MYSTRING;ECHO "<H5>I LOVE USING PHP!</H5>";?>
  23. 23. PHP: Variables<?PHP$MY_STRING = "HELLO BOB. MY NAME IS: ";$MY_NUMBER = 4;$MY_LETTER = A;ECHO $MY_STRING;ECHO $MY_LETTER;?>
  24. 24. PHP: Strings$MY_STRING = "IEEE MANIT";ECHO "IEEE MANIT";ECHO $MY_STRING;
  25. 25. Mathematical Operators$ADDITION = 2 + 4;$SUBTRACTION = 6 - 2;$MULTIPLICATION = 5 * 3;$DIVISION = 15 / 3;$MODULUS = 5 % 2;ECHO "PERFORM ADDITION: 2 + 4 = ".$ADDITION."<BR/>";ECHO "PERFORM SUBTRACTION: 6 - 2 =".$SUBTRACTION."<BR />";ECHO "PERFORM MULTIPLICATION: 5 * 3 =".$MULTIPLICATION."<BR />";ECHO "PERFORM DIVISION: 15 / 3 = ".$DIVISION."<BR/>";ECHO "PERFORM MODULUS: 5 % 2 = " . $MODULUS. ". MODULUS IS THE REMAINDER AFTER THEDIVISION OPERATION HAS BEEN PERFORMED.IN THIS CASE IT WAS 5 / 2, WHICH HAS A REMAINDEROF 1.";
  26. 26. Logical Operators$X = 4;ECHO "THE VALUE OF X WITH POST-PLUSPLUS =" . $X++;ECHO "<BR /> THE VALUE OF X AFTER THEPOST-PLUSPLUS IS " . $X;$X = 4;ECHO "<BR />THE VALUE OF X WITH WITH PRE-PLUSPLUS = " . ++$X;ECHO "<BR /> THE VALUE OF X AFTER THE PRE-PLUSPLUS IS " . $X;
  27. 27. Comments in PHP<?PHPECHO "HELLO WORLD!"; // THIS WILL PRINT OUT HELLOWORLD!ECHO "<BR />PSST...YOU CANT SEE MY PHP COMMENTS!"; //ECHO "NOTHING";// ECHO "MY NAME IS HUMPERDINKLE!";?><?PHP/* THIS ECHO STATEMENT WILL PRINT OUT MY MESSAGE TOTHETHE PLACE IN WHICH I RESIDE ON. IN OTHER WORDS, THEWORLD. */ECHO "HELLO WORLD!";/* ECHO "MY NAME IS HUMPERDINKLE!";ECHO "NO WAY! MY NAME IS UBER PHP PROGRAMMER!";*/?>
  28. 28. IF Statement$MY_NAME = "SOMEGUY";IF ( $MY_NAME == "SOMEGUY" ) {ECHO "YOUR NAME IS SOMEGUY!<BR />";}ECHO "WELCOME TO MY HOMEPAGE!";
  29. 29.  If Else Elseif Switch
  30. 30. INCLUDE FUNCTION
  31. 31. Menu.php<HTML><BODY><AHREF="HTTP://WWW.EXAMPLE.COM/INDEX.PHP">HOME</A> -<AHREF="HTTP://WWW.EXAMPLE.COM/ABOUT.PHP">ABOUT US</A> -<AHREF="HTTP://WWW.EXAMPLE.COM/LINKS.PHP">LINKS</A> -<AHREF="HTTP://WWW.EXAMPLE.COM/CONTACT.PHP">CONTACT US</A> <BR />
  32. 32. Index.php<?PHP INCLUDE("MENU.PHP"); ?><P>THIS IS MY HOME PAGE THAT USES ACOMMON MENU TO SAVE ME TIME WHEN I ADDNEW PAGES TO MY WEBSITE!</P></BODY></HTML>
  33. 33. PHP Form<HTML><BODY><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></BODY></HTML>
  34. 34. Order.html<HTML><BODY><H4>TIZAG ART SUPPLY ORDER FORM</H4><FORM ACTION="PROCESS.PHP" METHOD="POST"><SELECT NAME="ITEM"><OPTION>PAINT</OPTION><OPTION>BRUSHES</OPTION><OPTION>ERASERS</OPTION></SELECT>QUANTITY: <INPUT NAME="QUANTITY"TYPE="TEXT" /><INPUT TYPE="SUBMIT" /></FORM></BODY></HTML>
  35. 35. Process.html<HTML><BODY><?PHP$QUANTITY = $_POST[QUANTITY];$ITEM = $_POST[ITEM];ECHO "YOU ORDERED ". $QUANTITY . " " . $ITEM. ".<BR />";ECHO "THANK YOU FOR ORDERING FROM TIZAGART SUPPLIES!";?></BODY></HTML>
  36. 36. Web Hosting
  37. 37. Web Components Clients and Servers Domains Names Web Site Hosting Services
  38. 38. Clients & Servers Clients (Browser) Servers Internet Explorer  Apache Firefox  Microsoft Mozilla  Netscape Netscape  zeus Opera  AOLserver Amaya  AV AOL  JavaWebServer MSN  Oracle
  39. 39. 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
  40. 40. 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
  41. 41. 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
  42. 42. 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
  43. 43. Creating a Web Site1. 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.)
  44. 44. DEMO
  45. 45. That’ all! For Doubts and Queries,  Deepak Kumar- Contact No.-9669787936 Email Id-deepakecemanit@gmail.com

×