Webdevelopment workshop-html
1 like509 views
This document provides an overview of a web development workshop covering HTML, CSS, JavaScript, and PHP. It introduces the presenter and their background. The bulk of the document consists of detailed explanations of various HTML elements like tags, attributes, headings, paragraphs, lists, links, images, tables, forms, and layout elements. It concludes with a brief introduction to CSS and an announcement of a short break before covering CSS in more depth.
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