Your SlideShare is downloading. ×
0
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Web-Designing Workshop Day 2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web-Designing Workshop Day 2

790

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
790
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. presents Workshop onWeb-Designing Date:-18-19th August Faculty Adviser Dr. Nilay Khare Coordinator Dr. Deepak Singh Tomar
  • 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. CSS General form: selector {property: value} or selector {property1: value1; property2: value2; ... propertyn: valuen }
  • 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. 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. 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. 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. HTML – Fundamentals DIV
  • 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. Features of CSS3 Selectors Box Model Backgrounds and Borders Text Effects 2D/3D Transformations Animations Multiple Column Layout User Interface
  • 11. Javascripts
  • 12. LET’S SEE SOME EXAMPLES
  • 13. PHP
  • 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. 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. 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. 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. PHP Syntax <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PHP Test</title> </head> <body> <?php echo Hello World; ?> </body> </html>
  • 19. PHP and HTML Code<HTML><HEAD><TITLE>MY FIRST PHP PAGE</TITLE></HEAD><BODY><?PHPECHO "HELLO WORLD!";?></BODY></HTML>
  • 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. PHP Code<?PHP$HELLO = "HELLO WORLD!";$A_NUMBER = 4;$ANOTHERNUMBER = 8;?>
  • 22. PHP Code<?PHP$MYSTRING = "HELLO!";ECHO $MYSTRING;ECHO "<H5>I LOVE USING PHP!</H5>";?>
  • 23. PHP: Variables<?PHP$MY_STRING = "HELLO BOB. MY NAME IS: ";$MY_NUMBER = 4;$MY_LETTER = A;ECHO $MY_STRING;ECHO $MY_LETTER;?>
  • 24. PHP: Strings$MY_STRING = "IEEE MANIT";ECHO "IEEE MANIT";ECHO $MY_STRING;
  • 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. 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. 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. IF Statement$MY_NAME = "SOMEGUY";IF ( $MY_NAME == "SOMEGUY" ) {ECHO "YOUR NAME IS SOMEGUY!<BR />";}ECHO "WELCOME TO MY HOMEPAGE!";
  • 29.  If Else Elseif Switch
  • 30. INCLUDE FUNCTION
  • 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. 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. 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. 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. 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. Web Hosting
  • 37. Web Components Clients and Servers Domains Names Web Site Hosting Services
  • 38. Clients & Servers Clients (Browser) Servers Internet Explorer  Apache Firefox  Microsoft Mozilla  Netscape Netscape  zeus Opera  AOLserver Amaya  AV AOL  JavaWebServer MSN  Oracle
  • 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. 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. 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. 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. 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. DEMO
  • 45. That’ all! For Doubts and Queries,  Deepak Kumar- Contact No.-9669787936 Email Id-deepakecemanit@gmail.com

×