mozilla webmaker







27/08/2013


what is html5?


  • Latest and most enhanced version of html
  • Standard for structuring and presenting contents on the world wide web
  • Not a programming language, but a markup language




desouradeep.wordpress.com

new features


  • CANVAS: Two dimensional surface, programmable by JavaScript
  • AUDIO and VIDEO embedding
  • Geo-location
  • Drag and Drop
  • Forms 2.0 : New attributes added to input elements




desouradeep.wordpress.com

quick start


https://thimble.webmaker.org/

desouradeep.wordpress.com

structure

My first html


<!DOCTYPE html>
<html>
    <head>
        <title>This is the title</title>
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>







desouradeep.wordpress.com

basic tags

Some very basic tags




<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

<!-- This is a comment -->

<p>This is a paragraph</p>
<br> <!-- line break -->
<hr> <!-- horizontal rule-->

desouradeep.wordpress.com

formatting


Tags used to format output


<b>Bold text</b>
<code>Computer code</code>
<em>Emphasized text</em>
<i>Italic text</i>
<kbd>Keyboard input</kbd> 
<pre>Preformatted text</pre>

desouradeep.wordpress.com

formatting


Some more...


<small>Smaller text</small>
<strong>Important text</strong>
<sub>Subscripted text</sub>	
<sup>Superscripted text</sup>
<ins>inserted text</ins>
<del>deleted text</del>

desouradeep.wordpress.com

links



  • ordinary links
  • IMAGE LINKS
  • MAIL TO LINKS

desouradeep.wordpress.com

ORDINARY LINKS


Link opens in the same tab
<a href='http://google.com'>Google</a>

Link opens in a new tab
<a href='http://google.com' target='blank'>Google</a>

desouradeep.wordpress.com

image link


Clicking on the image opens up the link


<a href='http://google.com'><img src='http://www.google.com/homepage/images/google_favicon_64.png' alt="Alternate Text"></a>

desouradeep.wordpress.com

mail to link


Link to send email


<a href='mailto:souradeep.2011@gmail.com'>Send Email</a>

desouradeep.wordpress.com

images


Embed images


<img src='http://www.techgig.com/files/photo_1372853497_temp.jpg' alt="Alternate Text" height="90" width="200">

desouradeep.wordpress.com

lists



  • Unordered List
  • Ordered List
  • Definition List

desouradeep.wordpress.com

unordered list


Lists using bullets


<ul>
   <li>Item1</li>
   <li>Item2</li>
</ul>

desouradeep.wordpress.com

ordered list


Lists using numbers/letters/romans etc


<ol>
   <li>Item1</li>
   <li>Item2</li>
</ol>

desouradeep.wordpress.com

definition list


Grouped Lists


<dl>
   <dt>Item 1</dt>
     <dd>Definition of Item 1.1</dd>
     <dd>Definition of Item 1.2</dd>
   <dt>Item 2</dt>
     <dd>Definition of Item 2.1</dd>
     <dd>Definition of Item 2.2</dd>
</dl>

desouradeep.wordpress.com

tables




<table border="1">
  <tr>
    <th>table header 1</th>
    <th>table header 2</th>
  </tr>
  <tr>
    <td>table data 1.1</td>
    <td>table data 2.1</td>
  </tr>
  <tr>
    <td>table data 1.2</td>
    <td>table data 2.2</td>
  </tr>
  <tr>
    <td>table data 1.3</td>
    <td>table data 2.3</td>
  </tr>
</table>

desouradeep.wordpress.com

html forms

Forms are used to take in inputs from the user.


FORM METHODS:

1.GET

2.POST





desouradeep.wordpress.com

GET


get method is used when data to be sent is not sensitive. 

<form method='get'>
  First Name: <input type="text" name="firstname"><br>
  Last Name: <input type="text" name="lastname"><br>
  <input type="submit" value="Submit">
</form>

desouradeep.wordpress.com

post


post method is used when data to be sent is sensitive

<form method='post'>
  Userame: <input type="text" name="username"><br>
  Password: <input type="password" name="password"><br>
  <input type="submit" value="Submit">
</form>

desouradeep.wordpress.com

types of inputs


  1. Text
  2. Password
  3. Checkbox
  4. Radio Button
  5. Drop Down
  6. Text Area
  7. Submit Button
  8. Reset Button





desouradeep.wordpress.com

text


Simple text input, small text entries

<input type="text" name="text" size="40" maxlength="50">

desouradeep.wordpress.com

PASSWORD


Password Inputs

    <input type="password" >




desouradeep.wordpress.com

checkbox

Checkboxes lets the user check more than  1 option for a particular form


<form>
    <input type="checkbox" name="option"> Option 1 <br>
    <input type="checkbox" name="option"> Option 2 <br>
    <input type="checkbox" name="option"> Option 3 <br>
    <input type="checkbox" name="option"> Option 4 <br>
</form>





desouradeep.wordpress.com

radio button



Radio Buttons are used to limit the user to a single option

<form>
    <input type="radio" name="grade"> First  <br>
    <input type="radio" name="grade"> Second <br>
    <input type="radio" name="grade"> Third  <br>
    <input type="radio" name="grade"> Fourth <br>
</form>

desouradeep.wordpress.com

dropdown


Lets the user select from a limited no of choices from a menu

<select>
  <option>Google</option>
  <option selected="selected">Facebook</option>
  <option>Twitter</option>
</select>

desouradeep.wordpress.com

text area


For large text entries
<textarea name="comment" rows="3" cols="20">
    HTML5 is cool!!
</textarea>

desouradeep.wordpress.com

submit and reset button


Special buttons to Submit or Reset data


<form>
    <input type="submit" value="Submit">
    <input type="reset">
</form>

desouradeep.wordpress.com

div


<div> tags represent divisions, used to group elements for common styling

<p>Some text here</p>

<div class="someClass">
  <h1>this is part of someClass</h1>
  <h3>this as well</h3>
  <p><i>me too</i></p>
</div>

<p>But I am not</p>

desouradeep.wordpress.com

class


class attribute points to a specific styling in external CSS  or javascript 

<p>Some text here</p>

<div class="someClass">
  <h1>this is part of someClass</h1>
  <h3>this as well</h3>
  <p><i>me too</i></p>
</div>

<p>But I am not</p>

<div class="someClass">
  <h2>i am again from someClass</h2>
</div>

desouradeep.wordpress.com

id



id attribute is similar except, it can be used only once throughout the html. They are unique. 



<p>Some text here</p>

<div class="someID">
  <h1>this is part of someID</h1>
  <h3>this as well</h3>
  <p><i>me too</i></p>
</div>

<p>But I am not</p>

<div class="anotherID">
  <h2>i am from a different ID</h2>
  <h3>Cant repeat the same ID</h3>
</div>




desouradeep.wordpress.com

Queries ? 


thank you :)


webmaker.org









SOURADEEP DE


IRC Nick: souradeep
@desouradeep
souradeep.2011@gmail.com

desouradeep.wordpress.com
github: github.com/desouradeep

FOSS CONTRIBUTOR :


CURRENTLY:

3rd Year CSE Student at BCREC, Durgapur

mozilla webmaker

By Souradeep De

Made with Slides.com

mozilla webmaker

  • 2,675

More from Souradeep De