web developement workshop (oct 2009 -day 1)
DESCRIPTION
TRANSCRIPT
![Page 1: Web Developement Workshop (Oct 2009 -Day 1)](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e0893b37959892b8b5433/html5/thumbnails/1.jpg)
Web Development Web Development
BY : BY :
KARTIK KARTIK : http://kar2905.wordpress.com : http://kar2905.wordpress.com
PRATIK : PRATIK : http://pratik3d.blogspot.comhttp://pratik3d.blogspot.com
SAURABH : saurabh[email protected] : saurabh[email protected]
![Page 2: Web Developement Workshop (Oct 2009 -Day 1)](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e0893b37959892b8b5433/html5/thumbnails/2.jpg)
<html><body><ul><li>HTML ( A Fast run through) </li><li>MYSQL </li><li>PHP </li><li>Login Script Demonstration </li></ul></body></html>
![Page 3: Web Developement Workshop (Oct 2009 -Day 1)](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e0893b37959892b8b5433/html5/thumbnails/3.jpg)
HYPER TEXT MARKUP LANGAUGE DEVELOPED BY : World Wide Web
Consortium & WHATWG Type code : TEXT Extended from : SGML Extended to : XHTML Standard(s) : W3C HTML 4.01
W3C HTML 3.2 In short it is the language used to design Web
Pages
![Page 4: Web Developement Workshop (Oct 2009 -Day 1)](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e0893b37959892b8b5433/html5/thumbnails/4.jpg)
Use any text editor Gedit, Notepad++, Notepad,.. Save as .htm or .html extension
![Page 5: Web Developement Workshop (Oct 2009 -Day 1)](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e0893b37959892b8b5433/html5/thumbnails/5.jpg)
A tag is : Nonhierarchical keyword or term assigned to a piece of information
< > Opening Tag </ > Closing Tag
![Page 6: Web Developement Workshop (Oct 2009 -Day 1)](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e0893b37959892b8b5433/html5/thumbnails/6.jpg)
The element content is everything between the start and the end tag ( <p>Hello</p> )
Some HTML elements have empty content( <br /> )
Most HTML elements can have attributes Its not case sensitive eg <p> means the
same as <P> . But W3C (?) recommends lower case
![Page 7: Web Developement Workshop (Oct 2009 -Day 1)](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e0893b37959892b8b5433/html5/thumbnails/7.jpg)
<html> <head> <title> My first web page </title> </head> <body> <h1>Hello everyone </h1> </body> </html>
![Page 8: Web Developement Workshop (Oct 2009 -Day 1)](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e0893b37959892b8b5433/html5/thumbnails/8.jpg)
The <html> element defines the whole HTML document.
The element has a start tag <html> and an end tag </html>
The element content is another HTML element (the body)
![Page 9: Web Developement Workshop (Oct 2009 -Day 1)](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e0893b37959892b8b5433/html5/thumbnails/9.jpg)
The <head> element defines the head of the HTML document
The element has a start tag <head> and an end tag </head>
The element content is another HTML element (title of the webpage)
![Page 10: Web Developement Workshop (Oct 2009 -Day 1)](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e0893b37959892b8b5433/html5/thumbnails/10.jpg)
The <body> element defines the body of the HTML document
The element has a start tag <body> and an end tag </body>
The element content is another HTML element (a paragraph)
![Page 11: Web Developement Workshop (Oct 2009 -Day 1)](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e0893b37959892b8b5433/html5/thumbnails/11.jpg)
<p> This is a paragraph </p> <h1>This is a heading </h1> <h2 ,3 .. 6 > Various headings </h2,3..6> < a href=“google.com”>This is a link </a> <img src=“the source” width=“104” /> <br/> : is used to give a line break <hr/> : is used to give a horizontal line <! this is a comment >
![Page 12: Web Developement Workshop (Oct 2009 -Day 1)](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e0893b37959892b8b5433/html5/thumbnails/12.jpg)
<b> BOLD </b> <i> ITALICS </i> <big> Big Text </big> This is<sub> subscript</sub> and
<sup>superscript</sup> <code>This is computer output</code> <strong>BOLD </strong > Many more tags ..
http://www.w3schools.com/tags/default.asp
![Page 13: Web Developement Workshop (Oct 2009 -Day 1)](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e0893b37959892b8b5433/html5/thumbnails/13.jpg)
� HTML elements can have attributes
Attributes provide additional information about the element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"
Standard attributes :
class ,id , style ,title
Attributes
![Page 14: Web Developement Workshop (Oct 2009 -Day 1)](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e0893b37959892b8b5433/html5/thumbnails/14.jpg)
style="background-color:yellow"
style="font-size:10px"
style="font-family:Times"
style="text-align:center”
Examples :
<body style="background-color:yellow">
<p style="font-family:courier new; color:red; font-size:20px">
<a href=“url" style="background-color:red">Last Page</a>
Style Attribute
![Page 15: Web Developement Workshop (Oct 2009 -Day 1)](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e0893b37959892b8b5433/html5/thumbnails/15.jpg)
<table border="1">
<tr><th>Heading</th><th>Another Heading</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr> </table>
Tables
H e a d i n g A n o t h e r H e a d i n g
r o w 1 , c e l l 1 r o w 1 , c e l l 2
r o w 2 , c e l l 1 r o w 2 , c e l l 2
![Page 16: Web Developement Workshop (Oct 2009 -Day 1)](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e0893b37959892b8b5433/html5/thumbnails/16.jpg)
UNORDERED LIST<ul><li>Windows</li><li>Linux</li></ul> ORDERED LIST <ol><li>Windows</li><li>Linux</li></ol>
WindowsLinux
1.Windows2.Linux
LIST
![Page 17: Web Developement Workshop (Oct 2009 -Day 1)](https://reader034.vdocuments.net/reader034/viewer/2022051513/547e0893b37959892b8b5433/html5/thumbnails/17.jpg)
DEFINITION LIST<dl><dt>Windows</dt><dd>Vista</dd><dt>Linux</dt><dd>Fedora</dd></dl>
Windows Vista
Linux Fedora
What it can do?