WEB DEVELOPMENT WORKSHOP By Joe Joseph, Cruxsys Technologies For Department Of Computer Science, ICET, MVPA
WEB DEVELOPMENTWORKSHOP
By Joe Joseph, Cruxsys Technologies
For Department Of Computer Science, ICET, MVPA
WELCOME INTRODUCTION
HTML
CSS
Javascript Introduction
PHP Introduction
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
HTMLHTML : Hypertext Markup Language
» HTML documents are made up of tags» Tags sorround content» Tags give meaning to the content it sorround
AN EXAMPLE
<!DOCTYPE html>
<html>
<body>
Welcome to the webdev workshop
</body>
</html>
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”>
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
PAGE TITLES
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
This is my first web page
</body>
</html>
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.
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>
LISTS
● Ordered lists
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>PHP</li>
</ol>
LISTS
● Unordered lists
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>PHP</li>
</ul>
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>
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>
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
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>
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
FORMS - input
<input type="text"> - standard textbox
<input type="password"> - textbox for inputting passwords, characters masked by a special character like *
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
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>
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
Forms - labels
● Each form should have a label● label tag with a for attribute
<label for="fullname">Name</label>
<input name="fullname" id="fullname">
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>
Abbreviations
This workshop covers <abbr title="HyperText Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr>
Pre and code
<pre><code>
<body>Content goes here</body>
</code></pre>
HTML Conclusion
● Putting it all together
● Hands on session
● Further learning resourceshttp://w3schools.comhttp://htmldog.comhttps://www.codecademy.com/tracks/web
Short break
Next topic : CSS