| 1.
| What is an HTML "tag"? It is an instruction for your browser and looks like: <tag>tag contents</end tag>.
|
| 2.
| Bolding: surround text with a b tag:
<b>text to bold</b> = text to bold
|
| 3.
| Make text bigger: surround text with the span tag with style=font-size attribute:
<span style="font-size:20px;">text size 20</span> = text size 20
|
| 4.
| Change the color of the text: surround text with a span tag with style=color attribute
<span style="color:green">text color green</span> = text color green
|
| 5.
| Combine bigger text and color: surround text with span tag with style=font-size;color attributes:
<span style="font-size:20px;color:green">text size 20 color green</span> = text size 20 color green
|
| 6.
| Colors you can use: most regular colors and hexidecimal colors Color Names/Hexidecimal Chart or Hexidecimal Color Chart
<span style="color:red">red</span> = red
<span style="color:orange">orange</span> = orange
<span style="color:yellow">yellow</span> = yellow
<span style="color:green">green</span> = green
<span style="color:blue">blue</span> = blue
<span style="color:purple">purple</span> = purple
<span style="color:gold">gold</span> = gold
<span style="color:silver">silver</span> = silver
<span style="color:hotpink">hotpink</span> = hotpink
<span style="color:yellowgreen">yellowgreen</span> = yellowgreen
<span style="color:forestgreen">forestgreen</span> = forestgreen
|
| 7.
| Center text: surround text with a div tag with align=center attribute
<div align=center>see next line for example of centered text</div>
see this line for example of centered text
|
| 8.
| Combine bigger text and color with center:
<div align=center><span style="font-size:20px;color:green">see next line for example of centered bigger green centered text</span></div>
see this line for example of centered bigger green text
|
| 9.
| Make a link to something, like google: use the a tag with href attribute
<a href="http://www.google.com">link to google</a> = link to google
|
| 10.
| Display an image: use the img tag with src attribute. The end tag is not needed.
<img src=http://www.google.com//ig/images/igoogle_logo_sm.gif> = 
|
| 11.
| Make an image a link: use the a tag and instead of the text 'link to google' use the img tag
<a href="http://www.google.com"><img src=http://www.google.com//ig/images/igoogle_logo_sm.gif></a> =
***Put your mouse over the image and notice it turns into the hand. If you put it over the image in the previous example it stays an arrow.
|
| 12.
| To get the URL for an image from the internet.
Right-click on the image and select:
IE: Properties. Triple-click on the Address (URL) link 'http://...' to highlight the entire link. Right-click and copy.
Firefox: Copy Image Location
Safari: Copy Image Address
|
| 13.
| Put line breaks between lines: use the br tag. The end tag is not needed
<br>first line<br>second line<br>third line =
first line
second line
third line
***It is easier to read if you format it like this
<br>first line
<br>second line
<br>third line
|
OutRyders