HTML Color Hex Codes
Basic:
Change Font Color: <font color=COLORHERE>TEXT HERE
Changing Font Size: <font size=NUMBER>TEXT HERE
Changing Font Face: <font face="FONTNAME">TEXT HERE
All together: <font face="FONT" size=NUMBER color=COLORHERE>TEXT HERE
Text with Background Color: <span style=background:COLOR> TEXT GOES HERE</span>
Indenting Text: <dl><dd>INDENTED TEXT HERE</dl>
Change Font Color: <font color=COLORHERE>TEXT HERE
Changing Font Size: <font size=NUMBER>TEXT HERE
Changing Font Face: <font face="FONTNAME">TEXT HERE
All together: <font face="FONT" size=NUMBER color=COLORHERE>TEXT HERE
Text with Background Color: <span style=background:COLOR> TEXT GOES HERE</span>
Indenting Text: <dl><dd>INDENTED TEXT HERE</dl>
Italics: <i>TEXT</i> Slashout: <s>TEXT</s> Bold: <b>TEXT</b> Underline: <u>TEXT</u>
SuperScript: <sup>TEXT</sup> SubScript: <sub>TEXT</sub> Typewriter: <tt>TEXT</tt>
SuperScript: <sup>TEXT</sup> SubScript: <sub>TEXT</sub> Typewriter: <tt>TEXT</tt>
Marquees:
Basic Marquee: <marquee>TEXT HERE</marquee>
Bouncy Marquee: <marquee behavior=alternate>TEXT HERE</marquee>
Marquee with a Background Color: <marquee bgcolor=aqua>TEXT HERE</marquee>
Marquee going in a direction: <marquee direction=right, left,up,or down>TEXT HERE</marquee>
Marquee with Speed: <marquee scrollamount=NUMBER>TEXT HERE</marquee>
Marquee Width: <marquee width=percent OR number>TEXT HERE</marquee>
Ex: width=33% OR width=102
Combining it all: <marquee bgcolor=COLOR width=#scrollamount=# direction=L,R,U,orD>TEXT HERE</marquee>
Bulleted List: <li>TEXT<li>TEXT <li>TEXT<li>TEXT
Make a Heart: ♥
Less-Than Symbol <: <
Greater-Than Symbol >: >
& Ampersand, : or 'and' sign: &
" Quotation Mark: "
© Copyright Symbol: ©
™ Trademark Symbol: ™
Space (non-breaking space):
Button With PopUp:
<INPUT TYPE="button" VALUE="TEXT HERE" onClick='alert("TEXT")'></FORM>
Aligning Text: <p align="DIRECTION">TEXT</p>
in DIRECTION, put left, right, or center. OR, a simple code for just centering: <center>
Make a Little Space: <br>
Body Background Colors: <body bgcolor="COLOR OR HEX CODE HERE">
Body Background Image: <body background="IMAGE URL">
Graphics: <img src="URL OF GRAPHIC" alt="text">
<img> Tag Attributes:
align="?" Image alignment within surrounding text
width="??" Image width (in pixels or %)
height="??" Image height (in pixels or %)
border="??" Border thickness (in pixels) (*)
Change size of Graphic: <img src="URL OF GRAPHIC" height=# width=#></a>
Link with a Graphic: <a href="URL OF LINK"> <img src="URL OF GRAPHIC" border=0></a>
<a href="url"> link text </a>
<a> Tag Attributes:
name="??" Name of link (name of anchor, or name of bookmark)
target="?" Link target location: _self, _blank, _top, _parent
href="url#bookmark" Link to a bookmark (defined with name attribute)
Special:
Email Link: <a href="mailto:[email protected]"> TEXT HERE</a>
Button that will take you to a link: <FORM METHOD="link" ACTION="URL HERE"> <INPUT TYPE="submit" VALUE="TEXT HERE"></FORM>
Email Button:
<FORM METHOD="link" ACTION="mailto:[email protected]"> <INPUT TYPE="submit" VALUE="TEXT HERE"></FORM>
Basic Marquee: <marquee>TEXT HERE</marquee>
Bouncy Marquee: <marquee behavior=alternate>TEXT HERE</marquee>
Marquee with a Background Color: <marquee bgcolor=aqua>TEXT HERE</marquee>
Marquee going in a direction: <marquee direction=right, left,up,or down>TEXT HERE</marquee>
Marquee with Speed: <marquee scrollamount=NUMBER>TEXT HERE</marquee>
Marquee Width: <marquee width=percent OR number>TEXT HERE</marquee>
Ex: width=33% OR width=102
Combining it all: <marquee bgcolor=COLOR width=#scrollamount=# direction=L,R,U,orD>TEXT HERE</marquee>
Bulleted List: <li>TEXT<li>TEXT <li>TEXT<li>TEXT
Make a Heart: ♥
Less-Than Symbol <: <
Greater-Than Symbol >: >
& Ampersand, : or 'and' sign: &
" Quotation Mark: "
© Copyright Symbol: ©
™ Trademark Symbol: ™
Space (non-breaking space):
Button With PopUp:
<INPUT TYPE="button" VALUE="TEXT HERE" onClick='alert("TEXT")'></FORM>
Aligning Text: <p align="DIRECTION">TEXT</p>
in DIRECTION, put left, right, or center. OR, a simple code for just centering: <center>
Make a Little Space: <br>
Body Background Colors: <body bgcolor="COLOR OR HEX CODE HERE">
Body Background Image: <body background="IMAGE URL">
Graphics: <img src="URL OF GRAPHIC" alt="text">
<img> Tag Attributes:
align="?" Image alignment within surrounding text
width="??" Image width (in pixels or %)
height="??" Image height (in pixels or %)
border="??" Border thickness (in pixels) (*)
Change size of Graphic: <img src="URL OF GRAPHIC" height=# width=#></a>
Link with a Graphic: <a href="URL OF LINK"> <img src="URL OF GRAPHIC" border=0></a>
<a href="url"> link text </a>
<a> Tag Attributes:
name="??" Name of link (name of anchor, or name of bookmark)
target="?" Link target location: _self, _blank, _top, _parent
href="url#bookmark" Link to a bookmark (defined with name attribute)
Special:
Email Link: <a href="mailto:[email protected]"> TEXT HERE</a>
Button that will take you to a link: <FORM METHOD="link" ACTION="URL HERE"> <INPUT TYPE="submit" VALUE="TEXT HERE"></FORM>
Email Button:
<FORM METHOD="link" ACTION="mailto:[email protected]"> <INPUT TYPE="submit" VALUE="TEXT HERE"></FORM>
Make a Line: <hr width=NUMBER color=COLOR size=NUMBER> (width is width, size is height)
class_schedule_table_assignment.doc |
Table "Fun" Codes: |
Putting it all together: |
Assignment:
Hand code a website. You need to include the following:
- Home Page (link 1) - must have a background and an email link to your school email. include a picture of yourself.
- Class Schedule (link 2) - put your year long schedule in a table. add some extra formatting
- Fave Things (link 3) - include images of your fave musical artist/band, hobby, school subject, restaurant, and food. One of these images needs to be a graphic link.