FRIHOST • FORUMS • SEARCH • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

[Guide] HTML and CSS

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


Hogwarts
I wrote this thread as a guide for people new to HTML and CSS or willing to broaden their horizons with them. It will cover
• Basic HTML
• Divs
• Tables
• Advanced Tables
• CSS
• Forms
• Meta
• FAQ

It is currently not finished yet, so please do not complain. Screenshots will be added soon.
Please do not reply to this topic. I will request all replies be removed.

Last edited by Hogwarts on Sun May 20, 2007 3:04 pm; edited 4 times in total
Hogwarts
Basic HTML
HTML stands for Hyper-Text Markup Language. It’s not a program – Nor a script. It’s a language which is sent from a web server to a clients browser (Generally via port 80, HTTP, which stands for Hyper-Text Transfer Protocol), before being interpreted by the clients browser. This is a major problem for web developers, as different browsers interpret HTML differently, dependant upon the rendering engine they use. The most commonly used rendering engines are Trident (Internet Explorer) and Gecko (Firefox, Mozilla, etc.). HTML tags are encased in less than and greater then symbols, such as <head> and end with a less than symbol and a forward slash followed by the tags name and a greater than symbol, i.e. </head>. There are also self closing tags – Such as the <br /> tag. This means that it does not require an end – It ends itself. They close themselves because of the /> at the end of them.

There are also numerous dialects of HTML – HTML, XHTML, DHTML, etc. This is yet another major problem for developers, as deciding which to use can be a tedious task. This guide will cover XHTML 1.0 Strict and XHTML 1.0 Transitional.

The dialect a file uses is declared in a <!DOCTYPE> tag, which precedes all other HTML in a document. XHTML 1.0 Transitional is declared using the following code. This should be placed at the very top of the file – Because it is one of the single most important things your HTML should include at the risk of incompatibility.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


XHTML 1.0 Strict is declared using this:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


There are many differences between the two types of XHTML. XHTML Strict does not allow the following elements:
Code:
<center>
<font>
<iframe>
<strike>
<u>

But, not only that, it cannot use the following attributes:
Code:
align (allowed on table related elements: col, colgroup, tbody, td, tfoot, th, thead, and tr)
language
background
bgcolor
border (allowed on table related elements)
height (allowed on <img>’s)
hspace
name
noshade
nowrap
target
text, link, vlink, and alink
vspace
width (allowed on <img>’s and table related elements)

While there are many downsides to XHTML strict, browsers use a “stricter” method to render these. This means less compatibility issues.
General HTML tags:
<html> - This goes after the doctype and at the end of the page. This is necessary for HTML to function properly.
<head> - The information that is not meant to be displayed goes here, such as meta content, titles, CSS, CSS attachments, etc. Example:
Code:
<head>
   <title>Hello World!</title>
</head>

This makes the title of the page “Hello World!” which is displayed up the
<body> - This contains the body of the website – The HTML that is displayed to the viewer. This is one of the main tags, and in the syntax of html follows the head tag. As a recap of what we’ve covered so far, and how to use the body tag:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
   <title>Hello World!</title>
</head>
<body>
   <p>The P tag is the Paragraph tag</p>
   <p>They are spaced out – Similar to pressing the enter key in Microsoft Word</p>
</body>
</html>

<p> - As covered in the previous example, the <p> tag is the Paragraph tag. Paragraphs are spaced out using margins, meaning that the top and bottom of the paragraph will not come into contact with other things.
<h1> - The heading tag, in this case <h1>, although also including <h2>, <h3>, etc. is used to create a heading. Heading 1 text is large and bold. Heading 2 text is smaller, bold, and italic. Heading 3 is smaller than the other headings, but is still large and bold (yet not italic).
<br /> - The break tag is quite straightforward. It is used to create a page break – And it is self closing. This means that they do not require a </br> but that it requires a /> on the end of it (i.e. <br />).
<hr /> - Similar to <br />, the horizontal rule includes a line through the center of it which widens itself to fit the space surrounding it (to the right and left of it).
<a> - This is the Anchor tag. It can be used for links using a href attribute, and it can be used as an anchor using the name attribute (This means that http://www.site.ext/index.html#NAME will take you directly to where the <a> attribute is in the page). Example:
Code:
<a href="http://www.google.com">

Code:
<a name=”hello”>

This concludes the basic HTML section.
Hogwarts
Divs
Divs - Divisions - Are among the most important tags. They are widely used due to their versitility. Regretably, they rely heavily on CSS. Also, very few attributes can be used on DIV tags.

The three most important tags that can be used on DIVs are:
Class - <div class="CLASS"></div>
ID - <div id="ID"></div>
Align - <div align="center"></div>

The class attribute references to CSS - Defined in the page or in the pages linked to in the page. It references to styles beginning with a .
Classes can be used by multiple objects in your HTML

The ID attribute references to CSS too - Defined in the page or in the pages linked to in the page. It references to styles beginning with a #
IDs can only be used by single objects in your HTML

The Align attribute declares where in the div the contents of the div tag will be aligned - Be it center, left, right or justified.

A basic CSS class is as follows:
Code:
.menu {
text-align: right;
padding: 5px;
height: 100px;
width: 100px;
margin-left: auto;
margin-right; auto;
}

Note that the CSS is enclosed in curly brackets ({}) and that each attribute is ended with a semicolon (;) - Unlike Javascript, a new line does not signify a new attribute.

Div tags are based mainly on CSS - So please read my CSS guide [link will go here]
Hogwarts
Tables
Tables are among the simplest things a person can use.

All tables are enclosed in <table> and </table> tags - Each row in the table is enclosed in <tr> and </tr> tags and each table cell is enclosed in <td> and </td> tags.

Tutorial is only up to here so far - Please check back soon! Please do not reply to this thread!
Related topics

HTML/CSS menu replacement
Web Design Tutorials
I am looking for good links to HTML CSS and JS resources.
[HTML/CSS] Blokada wyskakujacych okienek...
html and css code from form inputs
Learning CSS
Make HTML, CSS, JS, PHP smaller with out buy a software?
A little Help (Html,CSS, javascript)
Photoshop CS3 convert to css/html
Solved: Need convert php-template to css-html static
PHP Tutorials
HTML/CSS/any means of doing this.
rollovers in CSS
CSS/HTML
Un guide sur les meilleurs Freeware sur le net. Un MUST!
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.