HTML for bigners

1. HTML

2. • HTML with note pad

3. • Open note pad

4. • Type the ext on note pad
• All the think you want to see on your web
browser..

5. • Then save the notepad..
• You have to save
• Enter the name “triel.html”
• Then press “Enter”

6. • Minimize the note pad
• Open the library
• Open doucment
• Open triel

7. • Then go to note pad
• Then type
• My heading
• Then press Ctrl+S

8. • The n press alt+tab
• Press f5
• Then press alt+tab

9. • Open note pad
• Type <h1> My heading</h1>
• Then press “ctrl+S”
• Then Alt+tab
• Press f5

10. • Go to note pad
• Type <h2> second heading</h2>
• For 3rd heading
• Type <h3> 3rd heading</h3>

11. Note..
• Every time you are using <h1> and then </h1>
• The “<h1>” is called the start tag
• </h1> is the end tag
• That means <> and </> are tags

12. paragraph
• <p> Your paragraph here</p>
• Then save and open brwo

13. Horizental line
• ______________________________

14. Horizental line
• For horizental line the code is
• <hr>
• Then save and see on browser..

15. Table..
• For table the code is
• <table>
• </table>

16. Table..
• For table row the code is
• <table>
• <tr> </tr>
• </table>

17. Table..
• For table cell the code is
• For easy recognise arrange like this by pressing enter & space
<table>
<tr>
<td></td>
</tr>
</table>

18. Table..
My instruction to you
td stands for
Table Cell
Your code on note pad
<table>
<tr>
<td></td>
</tr>
</table>

19. Table..
My instruction to you
then type one “1” in the table
cell
Then save and see
Your code on note pad
<table>
<tr>
<td>1 </td>
</tr>
</table>

20. Table..
My instruction to you
For new cell Make new sell
Type “kaki” in new sell
Then save and see
Your code on note pad
<table>
<tr>
<td>1 </td>
<td>kaki</td>
</tr>
</table>

21. Table..
My instruction to you
For new row type new row
Then make new cell in <tr>
command
Your code on note pad
1. <table>
2. <tr>
3. <td>1 </td>
<td>kaki</td>
4. </tr>
5. <tr> <td></td> </tr>
6. </table>

22. Table..
My instruction to you
Then type a new name “alok”
in that new cell
Then save and see
Your code on note pad
1. <table>
2. <tr>
3. <td>1 </td>
<td>kaki</td>
4. </tr>
5. <tr> <td>alok </td> </tr>
6. </table>

23. Table..
My instruction to you
And then add new cell
<td></td>
Then save and see
Your code on note pad
1. <table>
2. <tr>
3. <td>1 </td>
<td>kaki</td>
4. </tr>
5. <tr> <td>alok </td> </tr>
6. </table>

24. Table..
My instruction to you
And then add new cell
<td></td>
Then save and see
Your code on note pad
1. <table>
2. <tr>
3. <td>1 </td>
<td>kaki</td>
4. </tr>
5. <tr> <td>alok </td> </tr>
6. </table>

25. For better understinging
• Add border
• Go to <table> line
• Then change it to <table border=“1”>
• Then save and see

26. View the sourse code
• To view your sourse code
• Press ctrl+U on your browser
1. <table>
2. <tr>
3. <td>1 </td>
<td>kaki</td>
4. </tr
5. <tr> <td>alok </td> </tr>
6. </table>

27. • Then save and
• Now see some thing wrong
• To check it

28. What is the sourse code ?
• Sourse code is the file that is uploaded on
your browser..

29. What is the benefit to see it..?
• Any thing wrong with your code will be red in
color
• And it will help you to identify..

30. Lets check it..
• Go to note pad
• Make some error with tags
• Any tag (<>)

31. Html
• Html is about coading..
• Few examples

32. •<h1> ….</h1>

33. •<h2>…. </h2>

34. •<table>…..</table>

35. •<br>

36. •<hr>

37. •<div>….</div>

38. •<p>…..</p>

39. • Triel this code your self
• And make some tasks for your practice..

40. • Thank you..