Embed Size (px)
DESCRIPTION
This presentation introduces basic tags including
Citation preview
HTMLLesson 2: Getting To Know HTML
By Olivia Moran
[Codo Dojo – HTML Group Sligo, Ireland] liviamoran.mewww.oliviamoran.mehttp://www.slideshare.net/oliviamoran
< <
HTML Consists of
<tags>
What tags have we learned so far?
<html><body><title><h1><p>
The tags that we have so far learned have
opening and closing tags
Some tags do not have a closing tag. They stand
alone. For example: <br><hr>
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.
BR Tag
<html><body><p>This is<br>a para<br>graph withline breaks</p></body></html>
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.
HR Tag
<html><body><h1>HTML</h1><p>HTML is a language for describing web pages.</p><hr><h1>CSS</h1><p>CSS defines how to display HTML elements.</p></body></html>
Some tags have attributesi.e. additional options.
Attributes have to have values. Values should
be enclosed in quotation marks.
Font AttributesFont Attributes
•Face •SizeSize
•Colour Colour
html><body><p><font size="3" color="red">This is some text!</font></p><p><font size="2" color="blue">This is some text!</font></p><p><font face="verdana" color="green">This is some text!</font></p></body></html>
Text Formatting Text Formatting TagsTags
<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>
Text Formatting Text Formatting TagsTags
<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>
Bold, Italic EtcBold, Italic Etc
<html><body><p><u>Underline Me!</u></p><p><strike>Strike Your Out!</strike></p><p><center>This centers text on the page</center></p><p>This is<sub> subscript</sub> and <sup>superscript</sup></p><p><b> <i> I am bold AND Italic, which makes me cool!</i> </b></p></body></html>
U, Strike, Sub EtcU, Strike, Sub Etc
<html> <body><p><font size="+1">Here is a size 4 font</font></p><p><font size="-1">Here is a size 2 font</font></p><p><font size="+2">Here is a size 5 font</font></p></body></html>
Font SizesFont Sizes
<html><body> <p> <font color="pink">This text is pink</font><br/><font color="#FF6666">This text is also pink</font></p>
<p><font color="green">This text is green</font><br/><font color="#339900">This text is also green</font></p> </body></html>
Font Color Font Color
<html><body>
<p><font face="Verdana">This paragraph uses verdana text.</font></p>
<p><font face="Arial"> This paragraph uses arial text.</font></p>
<p><font face="Bookman Old Style, Book Antiqua, Garamond">This paragraph gives alternatives.</font><p>
</body></html>
Font FaceFont Face
<html><body>
<font size="+4"><b>Hey There</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 my font to achieve a desired look.</p>
</body></html>
Putting It All Putting It All TogetherTogether
