my care2
make a difference

community & fun

groups

get together & make a difference

 
 
 Cheat Sheet June 10, 2005 2:31 PM

Cheat Sheet!


This will come in handy for everyone. You can save this on your computer or even print it out to have handy notes to help you remember.

When I was first learning, I taught myself from websites and lots of practice lol. I kept a small notebook I wrote down notes in to help me remember.

If you save this online you can make it really simple by just copying the code and pasting it in your page where you want it then adding the value you want (your choice of color, font, etc...)

Basic start of a page:
I actually keep a page saved on my computer called blank and it only has this in it so I do not have to type

it every time lol. I just open up blank and then go to save as (name I want to use). Its lazy lol but is nice so you don't have to type it out always lol.

<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>

Line breaks

<br>

Fonts

<font face="name of font here"></font>

<font size="#"></font>

<font face="Verdana" size="5"></font>

<font color="Blue"> or <font color="#0000FF"></font>

<font face="Verdana" size="5" color="#0000FF"></font>

<b></b> are the tags to make text Bold.
<i></i> are the tags to make text italic.
<u></u> are the tags to make text underlined.

Backgrounds

<body bgcolor="#000000">

<body background="image.gif">


Images

<img src="image.gif">

<img src="avatar11.gif" width="100" height="100" border="0" alt="name of image">

<img src="" width="" height="" border="" alt=""> 

Links


<a href=""></a>

<a href="link.html">Click Here</a>

<a href="link.html" target="_blank">Click Here</a>   Text Link Opens in new window

<a href="link.html"><img src="image.jpg"></a>  Image Link

<a href="mailto:your email address">Email Me!</a>   E-mail Link

<a href="Email">mailto:lilstormchylde@gmail.com">Email Me!</a>   E-mail Link

Tables

<table>
<tr>
<td>
</td>
</tr>
</table>


<table>
<tr>
<td>cell one
</td>
</tr>
<tr>
<td>cell two
</td>
</tr>
<tr>
<td>cell three
</td>
</tr>
<tr>
<td>cell four
</td>
</tr>
</table>


<table border="1" bordercolor="blue" width="50%" cellspacing="2" cellpadding="4" bgcolor="green"

align="center">
<tr>
<td>
</td>
</tr>
</table>


<table border="1" bordercolor="blue" width="50%" cellspacing="2" cellpadding="4" bgcolor="green"

align="center">
<tr>
<td colspan="3" align="center" bgcolor="white">1</td>
</tr>
<tr>
<td rowspan="3" valign="down">2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</table>

Nested Tables (tables inside tables)

<table>
<tr>
<td>
      <table>
      <tr>
      <td>
            <table>
            <tr>
            <td>
            </td>
            </tr>
            </table>
      </td>
      </tr>
      </table>
</td>
</tr>
</table>

 [ send green star]
 
 June 10, 2005 2:33 PM

Frames


<frameset cols="150,*">
   <frame src="left.html" name="left">
   <frame src="right.html" name="right">
</frameset>


<html>
<head>
<frameset cols="150,*">
   <frame src="left.html" name="left">
   <frame src="right.html" name="right">
</frameset>
</head>
<body>
</body>
</html>

<frameset cols="150,*" border="0">


<frameset cols="150,*" border="0">
 <frame src="left.html" noresize="noresize" name="left">
 <frame src="right.html" noresize="noresize" name="right">
</frameset>

<frameset bordercolor="blue">

<frame src="left.html" marginwidth="2" marginheight="2">

<frameset framespacing="2">

<frame src="left.html" scrolling="no">


Targeting frames

<a href="right.html" target="right">Right</a> to have a page load in the frame named right

If you do not want your link to open inside a frame but in the entire page then you would put:

target="_top"

if you would prefer it to open in a completely different window:

target="_blank"

CSS

<style type="text/css">
</style>


Font

body {
font-family: verdana;
font-size: 11px;
color: red
}


<style type="text/css">
body {
font-family: verdana;
font-size: 11px;
color: #0000FF
}
</style>

<html>
<head>
<style type="text/css">
body {
font-family: verdana;
font-size: 11px;
color: red
}
</style>
</head>
<body>
</body>
</html>


letter-spacing: value (either normal or add a length)
text-align: value (right, left, center, justify)

font-style: value (normal, italic, oblique)
font-weight: value (normal, bold, bolder, lighter, 100-900)


Links


a:link    {color: #383369; text-decoration: underline}
a:visited {color: #383369; text-decoration: underline}
a:active  {color: #B8860B; text-decoration: none}
a:hover   {color: #B8860B; text-decoration: none}

For text-decoration you have several choices of what to put:

none means it looks like normal text (no line udner it like a normal link).
underline means it looks like a normal link, it has a line under it.
overline means there is a line above the link
underline overline means there is a line above and under the link
line-through means there is a slash through the link


Backgrounds


body {
background: #000000
}


body {
background-image:url(july4.jpg);
background-repeat:no-repeat;
background-position:top left;
background-attachment:fixed
}


ALL

<style type="text/css">
body {
background: #000000;
background-image:url(july4.jpg);
background-repeat:no-repeat;
background-position:top left;
background-attachment:fixed;
font-family: verdana;
font-size: 11px;
color: red
}
a:link    {color: #383369; text-decoration: overline}
a:visited {color: #383369; text-decoration: line-through}
a:active  {color: #B8860B; text-decoration: underline overline}
a:hover   {color: #B8860B; text-decoration: none}
</style>

Sroll Bars
This will only work in IE

scrollbar-face-color : #383369;
scrollbar-highlight-color : #000000;
scrollbar-3dlight-color : #383369;
scrollbar-shadow-color : #383369;
scrollbar-darkshadow-color : #383369;
scrollbar-track-color : #383369;
scrollbar-arrow-color : #000000;

External Style Sheets

<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

Remeber to make your style sheet like normal then remove the <style type="text/css"></style> tags and

save it to its own page first.

 [ send green star]
 
 July 14, 2005 6:09 PM

I believe it is worth noting here that while font tags do still work, current trends suggest that designers are moving away from them and going to CSS. I use Macromedia Dreamweaver MX 2004, and it literally marks font tags as INVALID to try to break the trend of using font tags.

The post above has CSS elements, but doesn't seem to show a completed stylesheet. Here is an example of a simple stylesheet with a few font styles:

<style type="text/css">
<!--
body,td,th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

a:link {
    color: #5E62AC;
    text-decoration: none;
}

a:visited {
    text-decoration: none;
    color: #8BAAD9;
}

a:hover {
    text-decoration: none;
    color: #8BAAD9;
}

a:active {
    text-decoration: none;
    color: #8BAAD9;
}

.main_txt {
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    margin: 10px;
}

.copyright {font-size: 9px}
.sitemap_title {
    font-size: 14px;
    font-weight: bold;
    color: #4C508D;
}

.sitemap_link {font-size: 12px}
.header {
    font-size: 36px;
    color: #5F63AD;
}

-->
</style>

To use style sheet elements, add class="style_name" to any of your main page element tags.

Example for a paragraph of style formatted text:

<p class="style_name"> Text text text text. </p>

When viewed on a page, the example would look something like this:

Text text text text.

If you want to use another style within that paragraph, you have to add a span tag around the text you want to be displayed in another style.

Span Example:

<p class="style_name"> Text <span class="style_name2">text text</span> text. </p>

The result would look something like this:

Text text text text.

Of course, "style_name(2)" would be replaced by an actual style name listed in your style sheet.

I will say that CSS confused me at first, but it is very useful and simple to use once you've become acquainted with it. I would reccommend new designers get acquainted with it from the start, because at the rate of use, font tags are likely to disappear IMHO.

  [ send green star]  [ accepted]
 
 July 14, 2005 6:14 PM

Yeah I never use the font tags anymore, even though I actually have seen alot of people still using them.

I stuck with the font tags though as css can be complicated for those just beginning

I have a CSS thread you may want to add too. I was just adding some simple stuff here to help people remember some tags.

Feel free to add anything and create new threads too! I am by far not an expert I just try to help with what I do know So would love others to also add in with what they know on any of the threads! And that goes for everyone

 [ send green star]
 
  New Topic              Back To Topics Read Code of Conduct

 

This group:
Website Design Help
208 Members

View All Topics
New Topic

Track Topic
Mail Preferences


Copyright © 2009 Care2.com, inc. and its licensors. All rights reserved