<        < HTML        Lesson 2: Getting To Know HTMLBy Olivia Moran[Codo Dojo – HTML Group Sligo, Ireland]liviamoran.meww...
HTML Consists     of  <tags>
What tags have we learned so far?    <html>    <body>    <title>     <h1>     <p>
The tags that we have so     far learned haveopening and closing tags
Some tags do not have aclosing tag. They stand alone. For example:         <br>         <hr>
BR Tag                    BR Tag                    What is it?• The <br> tag inserts a single line break.• The <br> tag i...
<html><body><p>This is<br>a para<br>graph withline breaks</p></body></html>
HR Tag                    HR Tag                    What is it?• The <hr> tag cretes a break in an HTML page (e.g. a  new ...
<html><body><h1>HTML</h1><p>HTML is a language for describingweb pages.</p><hr><h1>CSS</h1><p>CSS defines how to display H...
Some tags have attributesi.e. additional options.
Attributes have tohave values. Values shouldbe enclosed in quotation marks.
Font Attributes    •Face     •Size   •Colour
html><body><p><font size="3" color="red">This issome text!</font></p><p><font size="2" color="blue">This issome text!</fon...
Text Formatting      Tags
<html><body><p><b>This text is bold</b></p><p><big>This text is big</big></p><p><i>This text is italic</i></p><p>This is<s...
Text Formatting      Tags
Bold, Italic Etc<html><body><p><b>This text is bold</b></p><p><big>This text is big</big></p><p><i>This text is italic</i>...
U, Strike, Sub Etc<html><body><p><u>Underline Me!</u></p><p><strike>Strike Your Out!</strike></p><p><center>This centers t...
Font Sizes<html><body><p><font size="+1">Here is a size 4font</font></p><p><font size="-1">Here is a size 2font</font></p>...
<html><body>                   Font Color <p> <font color="pink">This text ispink</font><br/><font color="#FF6666">This te...
Font Face<html><body><p><font face="Verdana">Thisparagraph uses verdanatext.</font></p><p><font face="Arial"> This paragra...
Putting It All<html><body>                    Together<font size="+4"><b>HeyThere</b></font><br/><font face="verdana” size...
Upcoming SlideShare
Loading in …5
×

Lesson 2: Getting To Know HTML

435 views
343 views

Published on

This presentation introduces basic tags including

Published in: Education
2 Comments
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
435
On SlideShare
0
From Embeds
0
Number of Embeds
27
Actions
Shares
0
Downloads
8
Comments
2
Likes
0
Embeds 0
No embeds

No notes for slide

Lesson 2: Getting To Know HTML

  1. 1. < < HTML Lesson 2: Getting To Know HTMLBy Olivia Moran[Codo Dojo – HTML Group Sligo, Ireland]liviamoran.mewww.oliviamoran.mehttp://www.slideshare.net/oliviamoran
  2. 2. HTML Consists of <tags>
  3. 3. What tags have we learned so far? <html> <body> <title> <h1> <p>
  4. 4. The tags that we have so far learned haveopening and closing tags
  5. 5. Some tags do not have aclosing tag. They stand alone. For example: <br> <hr>
  6. 6. BR Tag BR Tag What is it?• The <br> tag inserts a single line break.• The <br> tag is an empty tag which means that it has no end tag.
  7. 7. <html><body><p>This is<br>a para<br>graph withline breaks</p></body></html>
  8. 8. HR Tag HR Tag What is it?• The <hr> tag cretes a break in an HTML page (e.g. a new topic).• The <hr> element is used to separate content (or define a change) in an HTML page.
  9. 9. <html><body><h1>HTML</h1><p>HTML is a language for describingweb pages.</p><hr><h1>CSS</h1><p>CSS defines how to display HTMLelements.</p></body></html>
  10. 10. Some tags have attributesi.e. additional options.
  11. 11. Attributes have tohave values. Values shouldbe enclosed in quotation marks.
  12. 12. Font Attributes •Face •Size •Colour
  13. 13. html><body><p><font size="3" color="red">This issome text!</font></p><p><font size="2" color="blue">This issome text!</font></p><p><font face="verdana"color="green">This is some text!</font></p></body></html>
  14. 14. Text Formatting Tags
  15. 15. <html><body><p><b>This text is bold</b></p><p><big>This text is big</big></p><p><i>This text is italic</i></p><p>This is<sub> subscript</sub> and<sup>superscript</sup></p></body></html>
  16. 16. Text Formatting Tags
  17. 17. Bold, Italic Etc<html><body><p><b>This text is bold</b></p><p><big>This text is big</big></p><p><i>This text is italic</i></p><p>This is<sub> subscript</sub> and<sup>superscript</sup></p></body></html>
  18. 18. U, Strike, Sub Etc<html><body><p><u>Underline Me!</u></p><p><strike>Strike Your Out!</strike></p><p><center>This centers text on thepage</center></p><p>This is<sub> subscript</sub> and<sup>superscript</sup></p><p><b> <i> I am bold AND Italic, whichmakes me cool!</i> </b></p></body></html>
  19. 19. Font Sizes<html><body><p><font size="+1">Here is a size 4font</font></p><p><font size="-1">Here is a size 2font</font></p><p><font size="+2">Here is a size 5font</font></p></body></html>
  20. 20. <html><body> Font Color <p> <font color="pink">This text ispink</font><br/><font color="#FF6666">This text is alsopink</font></p><p><font color="green">This text isgreen</font><br/><font color="#339900">This text is alsogreen</font></p></body></html>
  21. 21. Font Face<html><body><p><font face="Verdana">Thisparagraph uses verdanatext.</font></p><p><font face="Arial"> This paragraphuses arial text.</font></p><p><font face="Bookman Old Style,Book Antiqua, Garamond">Thisparagraph gives alternatives.</font><p></body></html>
  22. 22. Putting It All<html><body> Together<font size="+4"><b>HeyThere</b></font><br/><font face="verdana” size="4”color="pink”><i>The font is really cool.It lets me</i> </font><p><font size="7" face="Georgia, Arial"color="maroon">C</font>customize myfont to achieve a desired look.</p></body></html>

×