Monday, May 24, 2010
HTML Basics
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
Handy List of Tags
Tags for a basic template:
<HTML>
<HEAD><TITLE></TITLE>
</HEAD>
<BODY></BODY>
</HTML>
HEADINGS
Header 1 <H1></H1>
Header 2 <H2></H2>
Header 3 <H3></H3>
Header 4 <H4></H4>
Header 5 <H5></H5>
Header 6 <H6></H6>
SEPARATORS
Paragraph Break: <P>
Line Break: <BR>
Horizontal Rule: <HR>
LISTS
Unnumbered
<UL>
<LI>
<LI>
</UL>
Numbered
<OL>
<LI>
<LI>
</OL>
SPACING
Horizaontal Space: HSPACE=
Vertical Space: VSPACE=
ALIGNMENT
Top: ALIGN="TOP"
Right: ALIGN="RIGHT"
Let: ALIGN="LEFT"
Wednesday, May 19, 2010
Alignment in Web Page Layouts
Most Web developers, when they think of alignment think of the align attribute or the CSS float property or something like that. But the alignment of the elements on your page is just as important as whether your text is justified or your image is floated to the left. Alignment provides the structural framework of a design. The alignment can affect the mood of the page as well as how effective it is at getting its message across.
But page design can be as structured, with a rigid system that is obvious, or it can be more subtle. If you understand how to align elements effectively on your Web page, you'll be able to break the rules effectively as well.
These images show you a Web page with three simple elements and how you can lay out those elements on the page to create different designs. All that is changing in the layouts is where the elements are placed on the page.
But page design can be as structured, with a rigid system that is obvious, or it can be more subtle. If you understand how to align elements effectively on your Web page, you'll be able to break the rules effectively as well.
These images show you a Web page with three simple elements and how you can lay out those elements on the page to create different designs. All that is changing in the layouts is where the elements are placed on the page.
Advanced CSS
There are three parts of a style sheet:
* selector
the element or class and id title to which the style will be applied
* property
the information on how to format the selector
* value
the actual style to be applied to the property on the selector
For example, if you want all of your paragraphs to be the same font, you would use the following CSS:
p {
font-family : arial;
}
* p
the selector. All text within the tags is impacted by this style
* font-family
the property. All text will have the font-family changed
* arial
the value. The font-family will be "Arial"
As you can see above, the format of a style declaration is:
selector {
property : value ;
property2 : value ;
}
Group your styles for each selector together in curly braces
{}
Then separate the property from the value with a colon
:
Finally, end each style statement with a semi-colon
;
(Note: the semi-colon is only required to separate multiple styles, but it's a good idea to include it at all times. Then you can always add more styles.)
Your selector is usually an HTML tag, but you can also create IDs and classes. These types of selectors are used when you aren't sure what you're going to use the style on. For example, you may want a style class of "highlight" that changes the background color to yellow. It wouldn't matter what tag was highlighted. Here's how:
.highlight {
background-color : #ffff00;
}
Then to use that style, set the class in your HTML tags:
Or you can simply use the
tag to define the exact text to be highlighted.
The following page of this article explains some of the more common properties and the values you can use with them.
* selector
the element or class and id title to which the style will be applied
* property
the information on how to format the selector
* value
the actual style to be applied to the property on the selector
For example, if you want all of your paragraphs to be the same font, you would use the following CSS:
p {
font-family : arial;
}
* p
the selector. All text within the tags is impacted by this style
* font-family
the property. All text will have the font-family changed
* arial
the value. The font-family will be "Arial"
As you can see above, the format of a style declaration is:
selector {
property : value ;
property2 : value ;
}
Group your styles for each selector together in curly braces
{}
Then separate the property from the value with a colon
:
Finally, end each style statement with a semi-colon
;
(Note: the semi-colon is only required to separate multiple styles, but it's a good idea to include it at all times. Then you can always add more styles.)
Your selector is usually an HTML tag, but you can also create IDs and classes. These types of selectors are used when you aren't sure what you're going to use the style on. For example, you may want a style class of "highlight" that changes the background color to yellow. It wouldn't matter what tag was highlighted. Here's how:
.highlight {
background-color : #ffff00;
}
Then to use that style, set the class in your HTML tags:
This headline is highlighted
Or you can simply use the
tag to define the exact text to be highlighted.
The following page of this article explains some of the more common properties and the values you can use with them.
Subscribe to:
Posts (Atom)