◦ Desktop - Linux,Mac,Win ◦ Mobiles - Android,iOS,Symbian etc ◦ Tablets ◦ Many More -- • Standard play a major role! ◦ The W3 Consortium • Mobility! ◦ No need to install the software & all that ▪ Example Google Docs! ◦ Software as a service! ◦ The cloud way!... • Easy to write + Great support!
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
<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. • Head tag: <head> </head> ◦ 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>. • Body tag: <body> </body> ◦ The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.
an image to HTML pages Eg: *<img src='image. jpeg'></img> • Form Tag: <form> </form> ◦ 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>
<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):
standard from w3 org • The future of the web! • A Milestone in computer interface for uniformity! • Support for Major Browsers ... Chrome, Firefox,Opera,Safari
Drop Files! -- http://gokercebeci. com/dev/droparea • Cool Demo http://craftymind. com/factory/html5video/CanvasVideo.html • Another http://hakim. se/experiments/html5/breakdom/ • http://hakim.se/experiments/html5/origami/ • Played Angry Birds On Google Chrome & G+?
◦ The purpose of the <embed> tag is to embed multimedia elements in HTML pages. • Object Tag : <object></object> ◦ The purpose of the <object> tag is to embed elements in HTML pages. • Video Tag : <video> </video> ◦ The purpose of the video tag is to embed videos in the HTML pages
Just NOT Enough! 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/
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!
effects of an element. CSS Background 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;
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;}
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;}
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;} CSS Links
2D Transforms • 3D Transforms • Transitions • Animations • Multiple Columns • User Interface How about Animation, Transition, Rotation?? CSS3 has it all !
Web Server? ◦ Processes Requests ... ◦ Apache , NGINX, IIS • Server side & client Side Languages {Inspect Element Javascript} ◦ Javascript,ECMAScript,Dart - CLI ◦ PHP,JSP,ASP - Server • Database ◦ MySQL,Oracle,PostgreSQL,SQLite • The XAMP Stack!
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!
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>" ?>
is specified ◦ arguments do not have types ◦ add "function" key word ◦ Declare anywhere! .. even in ifs & elses ◦ No need to specify prototype at the top ◦ Default values for arguments • Example function myfunction($myvariable = "demo") { return $myvariable; } echo myfunction("Hello World"); • Huge List Of Inbuilt functions ... ◦ strlen,strcat,strreplace ◦ explode , implode .. to name a few
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(); }
. • That is <form action='' method=''><!Our Login Screen Code! > </form> • Action -> Where To go? • Method -> How to send data? • Two Methods ◦ Get -- Less secure & Less data but simple. ◦ Post -- More secure and more data ◦ Examples • The $_GET & $_POST also $_REQUEST Arrays hold the data
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
neshkatrapati
dunglas
mot_techtalk
curekoshimizu
alstrocrack
nrslib
pvcresin
soyuka
javiergs
yusukebe
sunterras
falcon8823
natmark
eileencodes
csswizardry
mclloyd
jnunemaker
kevinliebholz
keathley
malarkey
deanohume
danielanewman
jlugia
keavy
samlambert
