The World of Web

The World Of Web!
Ganesh Katrapati
World Is Moving To The Web .. Why?

Cross-Platform o Desktop - Linux,Mac,Win o Mobiles - Android,iOS,Symbian etc o Tablets o Many More - Standard play a major role! o The W3 Consortium Mobility! o No need to install the software & all that Example Google Docs! o Software as a service! o The cloud way!... Easy to write + Great support!
What IS THE Web???
HTML The Language Of The Web!
Introduction to HTML HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language HTML uses markup tags to describe web pages HTML user markup tags to describe web pages
Basic HTML Tags

HTML tag: <html> </html>
o
The <html> tag tells the browser that this is an HTML document.The html element is the outermost element in HTML documents. The html element is also known as the root element.
The head element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.The following tags can be added to the head section: <base>, <link>, <meta>, <script>, <style>, and <title>.
Head tag: <head> </head>

o
Body tag: <body> </body>

o
The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.
Basic HTML Tags

Heading Tags:
o o o o o o
<h1> <h2> <h3> <h4> <h5> <h6>
</h1> </h2> </h3> </h4> </h5> </h6>
Paragraph tag: <p> </p> Linking tag:

o
<a> </a> Eg: <a href='next.html'>Next</a>
Basic Styling Tags

Bold tag: <b>Bold Text</b> Underline tag: <u>Text Underlined </u> Italic tag: <i>Italic Text</i> font tag: <font>Any Text</font> Eg: <font size="3" color="red">some text!</font> <font face="verdana">some text!</font> Line Break : <br> or </br> Some of the styling tags:
<em>Emphasized text</em><br /> <strong>Strong text</strong><br /> <dfn>Definition term</dfn><br /> <code>Computer code text</code><br /> <samp>Sample computer code text</samp><br /> <kbd>Keyboard text</kbd><br /> <var>Variable</var><br /> <cite>Citation</cite>
Basic HTML Tags

Image Tag: <img> </img>
Add an image to HTML pages Eg: *<img src='image. jpeg'></img>
o
Form Tag: <form> </form>

o
A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.The <form> tag is used to create an HTML form(Login Pages)
Input tag: <input> </input>

Types in Input tag: Eg: * <input type='text' name='demo1' value='25'></input> * <input type='password' name='pswd'></input> * <input type='submit'></input>
HTML Lists
Ordered Lists: Ordered list starts with the <ol>
tag. Each list item starts with the <li> tag.
Unordered Lists:
Unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
Definition Lists: A definition list is a list of items,
with a description of each item.The <dl> tag defines a definition list. The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list):
Tags for creating Table

<table> </table> Creating rows <tr> </tr> Creating Table heading <th> </th> Creating Table data < td > </td>
Basic Syntax: <table> <tr> <td>...</td> <td>...</td> </tr> </table>
HTML 5: A Chance to Do Things Differently

New standard from w3 org The future of the web! A Milestone in computer interface for uniformity! Support for Major Browsers ... Chrome,Firefox,Opera,Safari
HTML5 .. cool things Geolocation http://html5demos.com/geo Drag & Drop Files! -http://gokercebeci.com/dev/droparea Cool Demo http://craftymind.com/factory/html5vide o/CanvasVideo.html Another http://hakim.se/experiments/html5/bre akdom/ http://hakim.se/experiments/html5/origami/ Played Angry Birds On Google Chrome & G+?
Some Interesting tags of HTML5

Embed Tag : <embed></embed>
o
The purpose of the <embed> tag is to embed multimedia elements in HTML pages.
Object Tag : <object></object>

o
The purpose of the <object> tag is to embed multimedia elements in HTML pages.
Video Tag : <video> </video>

o
The purpose of the video tag is to embed videos in the HTML pages
Your First Webapp!!

Zombie Login Page! Contains o Username o Password Using: o <form> tag o <table> tag o <input> tag
Check this out! An Animated Periodic Table!

http://www.zurb.com/playground/css-boxshadow-experiments
Polaroids on your Web pages!

http://www.zurb.com/playground/css3-polaroids
A Web DJ!
http://demo.marcofolio.net/jquery_dj/
Your IPod look on your Webpage!

http://paulbakaus.com/lab/js/coverflow/
A cool webpage just like a Coke!

http://www.romancortes.com/blog/pure-css-coke-can/
What more? View it in a 3D!

http://www.paulrhayes.com/experiments/cube-3d/
Want to Create a Super Cool Website like this? HTML Just NOT Enough!
CSS is where the fun begins!
Cascading Style Sheet

Style Your Web pages!
Styles Solved a Big Problem!
HTML was intended to define the content of a document and not for formatting a document in a beautiful way. CSS defines HOW HTML elements are to be displayed.
CSS Saves a Lot of Work!
Interested?? Want to Know HOW??

Know the Syntax:
Apply to HTML:
External style sheet Internal style sheet Inline style
External Style Sheet:

Create a CSS file and HTML file. Link them up!
mystyle.css
show.html file
Internal Style Sheet:

Insert your CSS code in <style> tag of html.
show.html
Inline Styles
<style> tag as attribute with value as css code to the html tag that is to be styled.
show.html
Basic Styling With CSS

CSS Background
CSS background properties define the background effects of an element.
CSS properties used for background effects:
background-color
body {background-color: pink;}
background-image
body {background-image:url('paper.gif');}
background-position
background-position:right top;
CSS Text
Text Color: used to set the color of the text.

body {color:blue;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);}
Text Alignment: used to set the horizontal

alignment of a text.
h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;}
CSS Font
Font Family : sets the font type to the specified element. p.{font-family: "Times New roman;}
Font Style: sets the italic or inclined styles to font.

p.normal {font-style:normal;} p.italic {font-style:italic;}
Font Size: sets the size of the text.

h1 {font-size:40px;} h2 {font-size:30px;} p {font-size:14px;}
CSS Links
Links can be styled differently depending on what state they are in.
a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */
Background Color:specifies the background color

for link.
a:link {background-color:#B2FF99;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;}
How about Animation, Transition, Rotation?? CSS3 has it all !

Enhanced : Backgrounds Text Effects Fonts 2D Transforms 3D Transforms Transitions Animations Multiple Columns User Interface
Our Zombie Login!!

What Next?? Add Backgrounds Images Custom Styling
The Backend Of The Web!

Whats Lags behind?? o How do we get requests o What do we do with them ... & How to?? o The actual processing Thats Where APACHE+PHP+MYSQL Come to rescue!
The NEXT Part Of The Web
What is a Web Server? o Processes Requests ... o Apache , NGINX, IIS Server side & client Side Languages {Inspect Element Javascript} o Javascript,ECMAScript,Dart - CLI o PHP,JSP,ASP - Server Database o MySQL,Oracle,PostgreSQL,SQLite The XAMP Stack!
The NEXT Part Of The Web

The Interaction Of The Key Parts Of The Web!
PHP & Why ?

PHP Hypertext Preprocessor Server side scripting language File Extension .php,.phtml,.php3 Ex: demo.php Runs on all platforms... + Cross Platform Combines with MySQL to build great s/w Ex: Facebook,Wikipedia Free Software ! Easy to learn and fun to code!
Start!
What can be in a php file o php syntax o HTML tags o Text
If you know "C" then you almost know PHP Hello World Program <?php echo "Hello World"; ?>
Explaining
PHP starts with the "<?php" tag ends with "?>" tag "echo" is default printing function "C" like strings Every statement ends with a ";"
PHP Variables & Operators

PHP is a loosely-typed/nimble language. Declare anywhere ... not like c! All variables start with a "$" Example <?php $x="Hello World"; $y = 10; $z = 2.512; ?> Basic Operators +,-,/,*,>,<,==,!=,&&,|| ... etc ... Concatenation Operator echo "Hello"."PHP";
PHP HTML/CSS
Just Echo It !! Example ... PHP in HTML
<html> <head><?php echo "This is Head"?><head> <body><?php echo "This is Body"?></body> </html> Example .. HTML in PHP <?php echo "<html> <head>This is Head<head> <body>This is Body</body> </html>" ?>
PHP Branches
The if statement $x = "php" if($x=="php") echo "If World"; else if($x == "php3") echo "Else If World"; else echo "Else World";
Switch ... Even Strings! switch(n) { case 1: echo "1"; case 2: echo "2"; }
PHP Loops
Scope The for statement for($i=0;$i<10;$i++){ echo "I Will Not Talk In The Class!"; }
While while($i<10) { // Do Some thing else } Break,Continue ... same as "C"
PHP Arrays
Highly Dynamic ... Example $x = array("a","b","c","d"); echo $x[3]; $x[4] = "e"; Associative / Labeled Arrays -- Very Useful! $x = array(); $x["name"] = "Ganesh"; $x["age"] = "21"; echo $x["name"].$x["age"] print_r = prints all items of arrays reccursively list($a,$b,$c) = array(0,1,2) assigns variables
PHP Functions
Differences WRT C? o No return type is specified o arguments do not have types o add "function" key word o Declare anywhere! .. even in ifs & elses o No need to specify prototype at the top o Default values for arguments Example function myfunction($myvariable = "demo") { return $myvariable; } echo myfunction("Hello World"); Huge List Of Inbuilt functions ... o strlen,strcat,strreplace o explode , implode .. to name a few
PHP Function Magicks!

Assign a function to a variable
function demo() { echo "Hello World!"; } $funname = "demo"; $funname() //Very much possible
Used if u define many functions like demo1,demo2,demo3 .. you may call them iteratively Ex:
for($i=0;$i<5;$i++) { $x = "demo".$i; echo $x(); }
PHP Function Magicks!

Function in a Function!
function outer() { echo "Hello Outer"; inner(); // Valid function inner() { echo "Hello Inner"; } } outer(); // Valid inner(); // Invalid
Back To Our Zombie Login Screen

The <form> tag . That is <form action='' method=''><!Our Login Screen Code!> </form> Action -> Where To go? Method -> How to send data? Two Methods o Get -- Less secure & Less data but simple. o Post -- More secure and more data o Examples The $_GET & $_POST also $_REQUEST Arrays hold the data
Advanced Zombie Login Screen
Resouces & Bibliography

HTML & HTML5 o http://www.w3schools.com/html/default.asp o html5demos.com o http://html5test.com/ -- not a resource, Test your browser. CSS - http://www.w3schools.com/ PHP o http://www.w3schools.com/ o php.net -- reference. Our Scripts o HTML o CSS o PHP
What We Did With These Technologies?

freeEdu --- A CMS & CMF Developed with all the above softwares.
What Can You Do With These?

Join us as module developers @ freeEdu Create & Deploy cool web apps
Fascinated by the web? Want to explore more?
Come Join Us!

Contact us
Aditya Maturi -- maturiaditya@gmail.com Pallavi Sivalenka -- sramapallavi@gmail.com Ganesh Katrapati -- neshmailsu@gmail.com

The World of Web

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

The World of Web

Загружено:

Авторское право:

Доступные форматы

The World Of Web!

World Is Moving To The Web .. Why?

What IS THE Web???

HTML The Language Of The Web!

Basic HTML Tags

Head tag: <head> </head>

Body tag: <body> </body>

Basic HTML Tags

<h1> <h2> <h3> <h4> <h5> <h6>

</h1> </h2> </h3> </h4> </h5> </h6>

Paragraph tag: <p> </p> Linking tag:

<a> </a> Eg: <a href='next.html'>Next</a>

Basic Styling Tags

Basic HTML Tags

Form Tag: <form> </form>

Input tag: <input> </input>

Definition Lists: A definition list is a list of items,

Tags for creating Table

Basic Syntax: <table> <tr> <td>...</td> <td>...</td> </tr> </table>

HTML 5: A Chance to Do Things Differently

Some Interesting tags of HTML5

Object Tag : <object></object>

Video Tag : <video> </video>

Your First Webapp!!

Check this out! An Animated Periodic Table!

Polaroids on your Web pages!

Your IPod look on your Webpage!

A cool webpage just like a Coke!

What more? View it in a 3D!

CSS is where the fun begins!

Cascading Style Sheet

Styles Solved a Big Problem!

CSS Saves a Lot of Work!

Interested?? Want to Know HOW??

External Style Sheet:

Internal Style Sheet:

Basic Styling With CSS

CSS background properties define the background effects of an element.

CSS properties used for background effects:

Text Color: used to set the color of the text.

Text Alignment: used to set the horizontal

Font Style: sets the italic or inclined styles to font.

Font Size: sets the size of the text.

Background Color:specifies the background color

How about Animation, Transition, Rotation?? CSS3 has it all !

Our Zombie Login!!

The Backend Of The Web!

The NEXT Part Of The Web

The NEXT Part Of The Web

PHP & Why ?

PHP Variables & Operators

While while($i<10) { // Do Some thing else } Break,Continue ... same as "C"

PHP Function Magicks!

for($i=0;$i<5;$i++) { $x = "demo".$i; echo $x(); }

PHP Function Magicks!

Back To Our Zombie Login Screen

Advanced Zombie Login Screen

Resouces & Bibliography

What We Did With These Technologies?

What Can You Do With These?

Fascinated by the web? Want to explore more?

Come Join Us!

Вам также может понравиться