webdevelopment workshop-html
TRANSCRIPT
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