Webdevelopment workshop-html
•
1 recomendación•491 vistas
Part 1 - of webdevelopment workshop held at ICET muvattupuzha
Recomendados
Más contenido relacionado
Similar a Webdevelopment workshop-html
Similar a Webdevelopment workshop-html (20)
Último
Último (17)
Webdevelopment workshop-html
- 1. WEB DEVELOPMENT WORKSHOP By Joe Joseph, Cruxsys Technologies For Department Of Computer Science, ICET, MVPA
- 2. WELCOME INTRODUCTION HTML CSS Javascript Introduction PHP Introduction
- 3. ABOUT ME● Currently Msc Computer Science Student, wannabe academician ● Started Career as Linux Systems Engineer in 2006 after completing BCA and RHCE ● Worked as LAMP stack developer, Technical Consultant for startups etc. ● Expertise in Cloud computing, various open source technologies etc. ● Founder Cruxsys Technologies
- 4. HTML HTML : Hypertext Markup Language » HTML documents are made up of tags » Tags sorround content » Tags give meaning to the content it sorround
- 5. AN EXAMPLE <!DOCTYPE html> <html> <body> Welcome to the webdev workshop </body> </html>
- 6. ATTRIBUTES ● Tags can have attributes ● Attributes are specified in the opening tag ● The values for attributes are given in quotation marks eg : <body bgcolor=”lime”>
- 7. ELEMENTS ● The tags and the enclosed information are together known as html elements <p> is a tag <p> Hello World </p> is an html element
- 8. PAGE TITLES <!DOCTYPE html> <html> <head> <title>My first web page</title> </head> <body> This is my first web page </body> </html>
- 9. HEADINGS ● <h1>, <h2>, . . . .<h6> tags are used for headings ● they should always be used in order ● For example, an h4 should be a sub-heading of an h3, which should be a sub-heading of an h2.
- 10. PARAGRAPHS AND LINE BREAKS The <p> tag is used for paragraphs The <br> tag is used for linebreaks <p> Welcome to the workshop<br> on webdevelopment </p>
- 13. LINKS anchor tag (a) is used to define a link <a href="index.html">home</a> | <a href="aboutus.html">about us</a> | <a href="contact.html">contact</a> <a href=”https://facebook.com/cruxsys”> Like us on facebook </a>
- 14. LINKS An anchor can be set to any element in the same page with an id attribute set. <p id=”last-stanza”> Woods are lovely dark and deep, but I have promises to keep </p> <a href=”#last-stanza”>Last Stanza</a>
- 15. IMAGES <img src="images/logo.gif" width="120" height="90" alt="Company logo"> src attribute : location of image alt attribute : alternative description no closing tag required
- 16. TABLES <table> <tr> <td>Cell 1 of Row 1</td> <td>Cell 2 of Row 1</td> </tr> <tr> <td>Cell 1 of Row 2</td> <td>Cell 2 of Row 2</td> </tr> </table>
- 17. FORMS <form action="process.php" method="post"> </form> action attribute : server side script that recieves form data method attribute : how the data will be sent – post – get
- 18. FORMS - input <input type="text"> - standard textbox <input type="password"> - textbox for inputting passwords, characters masked by a special character like *
- 19. FORMS - input <input type="checkbox"> is for checkbox. can have a checked attribute (<input type="checkbox" checked> <input type="radio"> is for radio buttons can checked attribute. <input type="submit"> submit button. Submits the form when clicked
- 20. FORMS - textarea & select <textarea rows="5" cols="15"> Lots of text </textarea> <select> <option value=”1”>Option 1</option> <option value=”2”>Option 2</option> <option value="3">Option 3</option> </select>
- 21. Form elements' name attribute All form elements should have name attribute If no name attribute is present they will be ignored when submitted to the form handling script
- 22. Forms - labels ● Each form should have a label ● label tag with a for attribute <label for="fullname">Name</label> <input name="fullname" id="fullname">
- 23. Span and Div ● used along with CSS for layout ● span is an inline element ● div is a block element <div id="header">Header goes here</div> <div id=”sidebar”>Sidebar </div> <div id=”content”>Content</div> <div id=”footer”> © 2015 <span class=”credits”>Powered by Cruxsys</span> </div>
- 24. Abbreviations This workshop covers <abbr title="HyperText Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr>
- 25. Pre and code <pre><code> <body> Content goes here </body> </code></pre>
- 26. HTML Conclusion ● Putting it all together ● Hands on session ● Further learning resources http://w3schools.com http://htmldog.com https://www.codecademy.com/tracks/web
- 27. Short break Next topic : CSS