Html Coding
Text Sizes | Text Colors | Text Face ( Font Type) | Text Face, Size and Color | Header Text | Links | Targeting A Link | Link Anchors | Textarea | Input Area | Drop Down List | Adding Images | Width And Height | Image Link | Lists
Css Coding
Css Intro | Adding style properties to a tag | Scrollbar Colors | Classes and Ids| Adding the same style properties to multiple tags | Positioning a division (div)/ Coding a layout

Comming soon
  1. Php
    • includes
    • skinning
  2. Html
    • Frames
    • iframes
And much more!!!

 

 

 

 

 

 

 

 

 

 

Text Sizes
Changes text sizes
Size 1pt text
Size 2pt text
Size 3pt text
Size 5pt text
Size 15pt text

Top

 

 

 

 

 

Text Colors
Changes text colors you can use a color name (red) or hexcode (#FF0000)
Red text
Green text
Yellow text
Green Blue-ish text

Top

 

 

 

 

 

Text Face
Changes text face/ the font type
Comic Sans Ms text
Times New Roman text
Terminal text
Verdana text

Top

 

 

 

 

 

Text Face, Size and Color
Changes text face/ the font type
Size 3pt green Times New Roman text
Size 4pt #00FFFF (cyan) Comic Sans Ms text
Size 5pt #EE22AA Verdana text

Top

 

 

 

 

 

Header Text
Creates header text

Header 1

Header 2

Header 3

Header 4

and so on....but why go on??

Top

 

 

 

 

 

Lists
Making a list
  1. A item in the list
  2. A item in the list
  3. A item in the list
  4. A item in the list
  5. A item in the list
  6. A item in the list
  7. A item in the list
  • A item in the list
  • A item in the list
  • A item in the list
  • A item in the list
  • A item in the list
  • A item in the list
  • A item in the list
  1. A item in the list
  2. A item in the list
  3. A item in the list
    • A item in the list
    • A item in the list
    • A item in the list
    • A item in the list
      • A item in the list
      • A item in the list
      • A item in the list
      • A item in the list
      • A item in the list
      • A item in the list
      • A item in the list
    • A item in the list
    • A item in the list
    • A item in the list
  4. A item in the list
  5. A item in the list
  6. A item in the list
  7. A item in the list

ol is an ordered list (1,2,3,etc)
ul is an unordered list
You can also nest lists too
Top

 

 

 

 

 

Links
Linking to other places
Click here to get to somewhere else!!


Top

 

 

 

 

 

Targeting Links
Getting links to open somewhere else, like another frame or a new page all together
add: target="_bank" to the tag ( before the >) to get : Click here to get to somewhere else!!


Top

 

 

 

 

 

Anchors
Creates a link to places on the same page. The "#name" and "name" must be exactaly the same.
I'm linking to the text called "here"

This is the link:
This is the text to be linked:
Top

 

 

 

 

 

Textarea
Creates a textarea for displaying codes or for forms


Top

 

 

 

 

 

Input
Creates a input area for submitting info, you don't have to have a value; value is what is displayed in the area





Top

 

 

 

 

 

Drop Down List
Creates a drop-down list

Without a size

With a size 0f 5


Top

 

 

 

 

 

Adding Images
Displays images.
The url is the address of the image


Top

 

 

 

 

 

Width & Height
Controls the size of your images. If you don't provide the width or heigh it will be determined automatically
change the # to whatever the dimensions are.


Top

 

 

 

 

 

Image Link
Turns an image into a link

With border

Without border

Top

 

 

 

 

 

I'm Here! | Back
Style to one tag
Adding style to one tag only
add style="background:red; border:3px solid orange;color:black"
 to the tag befor the >
<b style="background:red; border:3px solid orange;color:black">Special Bold Text</b>
Example: Bold text Bold text with the style properties added
You can add extra style properties to any tag.

Top

 

 

 

 

 

Css Intro
Style Sheets
Css is used add style properties to the tags. For example the tag for bold text is <b> (bold) the in the style sheet it looks like:

<style>
b{
    font-size:12px;
    color:orange;
    border-bottom:2px dashed purple;
}
</style>

All tags can be used in your stylesheet. Here a snippet of the code for the
<i> (italics), <u> (underlined), <b> (bold) tags

<style>
i{
    color:green;
    background:yellow;
    font-size:15pt;
}
u{
    color:red;
    background:black;
    font-size:15pt;
    border-bottom:3px solid green;

}
b{
    color:hotpink;
    background:none;
    font-family:tahoma;

}
</style>

This means that ALL italics on the page will be
green with a yellow background and be size 15px.

ALL underlined text will be red with a black background, be size 15 and have a solid green, 3px thick, border

ALL bold text will be hotpink with no background and be the tahoma font


Top

 

 

 

 

 

Scrollbar Colors
Changes the color of the scrollbars

sad ahsd fapghj fapz fcsad ahsd fapz hjlkhj dgdfg dsf sdf dsfsdfg awsrf afcfapz hjlkhj dgdfg dsf sdf dsfsdfg awsfapz hjlkhj dgdfg dsf sdf dsfsdfg aws
<style>
body{
    scrollbar-face-color:red;
    scrollbar-darkshadow-color:yellow;
    scrollbar-3dlight-color:aqua;
    scrollbar-highlight-color:orange;
    scrollbar-track-color:black;
    scrollbar-shadow-color:blue;
    scrollbar-arrow-color:violet;
}
</style>

sad ahsd fapz fcsad ahsd fapz fcsad ahsd fapz fcsad ahsd fapz fcsad ahsd fapz fcsad ahsd fapz fcsad ahsd fapz fcsad ahsd fapz fcsad ahsd fapz fcsad ahsd fapz fcsad ahsd fapz fc
<style>
body{
    scrollbar-base-color:purple;
}
</style>

Change TAGNAME to the tag you want to add scrollbar properties to. If you use body that will change all the scrollbars on the page
Top

 

 

 

 

 

Classes and IDs
Class sets a property style to a group of text you want
Id sets a property style to individual text you want

Like in school; the class is all the students, and the Id is for each individual student
This is special text.
Add class="classname" to the tag to change and .classname is the name in the style sheet For example: This is bold text

This is Bold class name text

And below are links in a div (width:300px) with the id="idname" The code for these particular style settings are: <style>
.classname{
    color:yellow;
    background:red;
    border:0px solid white;
    border-top:3px solid orange;
    border-bottom:20px double #FF9900;
    font-family:times new roman;
    font-size:60px;
    font-weight:bold;
}
</style>

<style>
#idname a{
    backgroud:red;
    width:100%;
    height:20px;
    border-bottom:1px solid maroon;
}
#idname a:hover{
    backgroud:pink;
    width:100%;
    height:20px;
    border-bottom:1px solid red;
}
</style>
Top

 

 

 

 

 

Same Properties, Different tags
Setting the same properties to mulitiple tags...

is very easy.
....
<style>
b, i, body{
    backgroud:red;
    line-height:2;
    border-bottom:1px solid maroon;
}
.class, #id, b, code, #name, .name2{
    backgroud:pink;
    width:100%;
    height:20px;
    border-bottom:1px solid red;
}
a, a:link, a:active, a:visited{
    backgroud:hotpink;
    width:100%;
    height:20px;
    border-bottom:1px solid red;
}
</style>

Top

 

 

 

 

 

Coding a layout
positioning a divison (div)
<style>
.layout{
    overflow:auto;
    position:absolute;
    top:#px;
    left:#px;
    height:#px;
    width:#px;
}
</style>

and the actuall div code is:

Ok let's break down the css code line by line.
</style>
.layout{
    overflow:auto;
.....

First remember the .layout is the class name.
The next line means that if there is more text than can fit into the space then there will be a scrollbar, and if it all fit there will be no scrollbar.. Other options are none or yes

...
    position:absolute;
...
This means that it will be floating. No matter where in your code you put the actual div code, it will float to whatever position you put it at. Simple as that.

...
    top:#px;
    left:#px;
...
The # of pixels from the top and the # of pixels from the left it will be located.

....
    height:#px;
    width:#px;
}
</style>

The height and the width. Duh. Top