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
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.
HTML stands for Hyper-Text Markup Language. Its not a program Nor a script. Its 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.
|<!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:
|<!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:
But, not only that, it cannot use the following attributes:
|align (allowed on table related elements: col, colgroup, tbody, td, tfoot, th, thead, and tr)
border (allowed on table related elements)
height (allowed on <img>s)
text, link, vlink, and alink
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:
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 weve covered so far, and how to use the body tag:
|<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<p>The P tag is the Paragraph tag</p>
<p>They are spaced out Similar to pressing the enter key in Microsoft Word</p>
<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:
|<a href="http://www.google.com"> |
This concludes the basic HTML section.
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:
Div tags are based mainly on CSS - So please read my CSS guide [link will go here]
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!