This is a brief list of commands with their syntax. If you do not know what these functions do, you may need to consult another source.

Coding symbols have been replaced with braces. You will need to undo this change to use these commands.
Always start with: {!DOCTYPE html}
To ensure proper text display, you may want to use:
{meta charset="utf-8"/}

(optional) To claim your web page as your own, use:
<meta name="Author" content="Name" />


To link a CSS file to your HTML document, use:
{link rel="stylesheet" href="css/name.css" type="text/css"}

div:
{div class="NAME"}{/div}

(Or, use {div id="NAME"}{/div}


Handy tip:
To make a browse bar, use something like:
{div id="navbar"}
{ul}
{li}{a href="#"> Home{/a}{/li}
{li}Contact Us{/li}
{/ul}
{/div}


To style a single page, us {style} 

Just enter your CSS information inside this tag, starting the line below the open tag, and ending just above the close tag.

Example:

{style}
body {
background:#000000;
}
.alignText
{
text-align:center;
}
.borderStyle
{
border:2px solid white;
}
#wrapper
{
width:1000px;
margin:auto;
}
{/style}


To apply multiple style attributes to a specific tag just list them all with a single space in between, like:

{p class="borderStyle alignText" }Your text here{/p}


Remember: For head body, etc, just use the selector, like "body"

For id, use "#selector"

For class, use ".selector"



CSS:

Braces in this section should NOT be replaced, as CSS uses these braces.

To set a font, use @font-face as your selector, followed by:
font-family: '2d';
src: url('../fonts/grunge.ttf');
}

In general (to select constant attributes for a command), you need:
selector,optionalSelector,optionalSelector
{
Attribute:value;
Attribute:value;
}
Examples:
h1,h2
{
color:green;
font-family: '2d';
}

ol li
{
color:red;
font-size:2em
}



To set div properties, you basicly want:
.selector
{
border:solid 5px red;
width:400px;
text-align:center;
background-color:blue;
float:left;
}
(All settings are optional)

After using float commands, use "clear:both;"


If you used <div id="NAME"> Use something like this example:

#selector
{
border:solid 5px red;
width:400px;
text-align:center;
background-color:blue;
float:left;
}

For the previously mentioned browse bar, you will need something like the following in your CSS:
#navbar li
{
display:inline;
padding-right:10px;
}

Also, you may want to include:
{
text-decoration:none;


Basic tags which are easy to understand have been excluded. It is assumed that you have some base knowledge of such things. If you do not know these, or need additional help with commands and syntax, you may find this useful.

 
Make a Free Website with Yola.