Difference between revisions of "HTML Primer"
Foxfirefey (Talk | contribs) m |
(→Headings) |
||
| (8 intermediate revisions by 2 users not shown) | |||
| Line 3: | Line 3: | ||
= Basic formatting: Tags and attributes = | = Basic formatting: Tags and attributes = | ||
| − | An HTML tag is surrounded by <code>< ></code> brackets. Most tags come as a set with an "opening" form (Example: <code><div></code>) and a "closing" form with a / (Example: <code></div></code>) An individual tag inside of an HTML document is called an "element". | + | An HTML tag is surrounded by <code>< ></code> brackets. Most tags come as a set with an "opening" form (Example: <code><div></code>) and a "closing" form with a / (Example: <code></div></code>) A few tags are self-closing and can either be written with a closing slash (Examples: <code></br /></code>, <code><hr /></code>, <code><img /></code>) or not (<code><br></code>, <code><hr></code>, <code><img></code>) An individual tag inside of an HTML document is called an "element". |
| − | HTML tags nest together much like nesting boxes: tags can contain other tags inside of them between the opening and closing forms of the tag. | + | HTML tags nest together much like nesting boxes: tags can contain other tags inside of them between the opening and closing forms of the tag. Self-closing tags can't contain other tags. |
Tags can also have attributes, which come in the form of <code>name="value"</code>. For instance, when you are making a link to another page using the <code><a></code> tag, your code will be: | Tags can also have attributes, which come in the form of <code>name="value"</code>. For instance, when you are making a link to another page using the <code><a></code> tag, your code will be: | ||
| Line 45: | Line 45: | ||
== Head tags == | == Head tags == | ||
| + | |||
| + | * <code><title></code> -- To define the window title of your page. | ||
| + | * <code><link></code> -- To link to other resources such as CSS stylesheets or scripts. | ||
== Divs == | == Divs == | ||
| − | Div tags mostly exist to give structure to an HTML page--they are usually used with class or ID attributes. They are block elements. | + | Div tags mostly exist to give structure to an HTML page--they don't do anything on their own as they're just containers and are usually used with class or ID attributes. They are block elements. |
== Spans == | == Spans == | ||
| − | A span tag is mostly used to contain inline elements--again, usually used with class or ID attributes. Span tags are inline elements. | + | A span tag is mostly used to contain inline elements--again, usually used with class or ID attributes as they don't do anything on their own. Span tags are inline elements. |
== Paragraphs and Break tags == | == Paragraphs and Break tags == | ||
| − | * <code><p></code> -- This tag defines a paragraph in the text. | + | * <code><p></code> -- This tag defines a paragraph in the text. This is a preformated tag. Text within a paragraph has some space before and after it. |
| − | * <code><br /></code> -- This tag | + | * <code><br /></code> -- This tag introduces a line break. |
| + | * <code><hr /></code> -- This tag introduces a 1px thick horizontal line. | ||
== Links == | == Links == | ||
| Line 77: | Line 81: | ||
== Headings == | == Headings == | ||
| − | Headings are block level elements meant to organize a page into sections (think of entries in a table of contents)--the smaller the number, the higher the heading is in the hierarchy. | + | Headings are block level elements meant to organize a page into sections (think of entries in a table of contents)--the smaller the number, the higher the heading is in the hierarchy. Headings are preformated tags: text within a heading has a certain size, some spacing before and after it and is bold. |
* <code><h1></code> -- the highest level, usually the biggest in size | * <code><h1></code> -- the highest level, usually the biggest in size | ||
| Line 120: | Line 124: | ||
= References = | = References = | ||
| + | |||
| + | * [http://www.w3schools.com/html5/html5_reference.asp HTML5] reference -- shows what's new and deprecated | ||
[[Category: Styles]] | [[Category: Styles]] | ||
Latest revision as of 10:16, 24 April 2011
The following primer tries to give a short overview of HTML. See also the CSS Primer and Browser Developing Tools.
Basic formatting: Tags and attributes
An HTML tag is surrounded by < > brackets. Most tags come as a set with an "opening" form (Example: <div>) and a "closing" form with a / (Example: </div>) A few tags are self-closing and can either be written with a closing slash (Examples: </br />, <hr />, <img />) or not (<br>, <hr>, <img>) An individual tag inside of an HTML document is called an "element".
HTML tags nest together much like nesting boxes: tags can contain other tags inside of them between the opening and closing forms of the tag. Self-closing tags can't contain other tags.
Tags can also have attributes, which come in the form of name="value". For instance, when you are making a link to another page using the <a> tag, your code will be:
<a href="http://www.dreamwidth.org">Dreamwidth</a>
In this instance, the href part of the opening tag is an attribute. The text inside of the link tag is what shows up as the link, and then the tag closes with the </a> form of the tag.
Some important tag attributes are classes and ids. A class is a label that one can place on a tag, and an id is a unique identifier. You can then use these class and ID tags to apply CSS rules to an element-- see the CSS Primer for more information.
Inline versus block elements
Tag Overview
Html, Head and Body; comments
The basic structure of an HTML page uses these tags.
-
<html>-- The HTML tag contains everything else. -
<head>-- The head tag doesn't contain tags that show up on the page. Instead, it includes other resource files, the title of the page, and other metadata tags. -
<body>-- The body tag contains all of the tags that actually show up on the page.
Example of the HTML, head, and body tags put together in their proper order:
<html> <head><title>My Page</title></head> <body> <p>Content of my page</p> </body> </html>
Notice that inside the head tag, we are using a title tag, and inside the body we are using a paragraph tag.
Head tags
-
<title>-- To define the window title of your page. -
<link>-- To link to other resources such as CSS stylesheets or scripts.
Divs
Div tags mostly exist to give structure to an HTML page--they don't do anything on their own as they're just containers and are usually used with class or ID attributes. They are block elements.
Spans
A span tag is mostly used to contain inline elements--again, usually used with class or ID attributes as they don't do anything on their own. Span tags are inline elements.
Paragraphs and Break tags
-
<p>-- This tag defines a paragraph in the text. This is a preformated tag. Text within a paragraph has some space before and after it. -
<br />-- This tag introduces a line break. -
<hr />-- This tag introduces a 1px thick horizontal line.
Links
The link tag is the <a> tag:
<a href="http://www.dreamwidth.org">Dreamwidth</a>
Images
The image tag is how to include an image in an HTML document. For instance, here is an image to Dreamwidth's little username icon:
<img src="http://s.dreamwidth.org/img/silk/identity/user.png" width="16" height="16" />Headings
Headings are block level elements meant to organize a page into sections (think of entries in a table of contents)--the smaller the number, the higher the heading is in the hierarchy. Headings are preformated tags: text within a heading has a certain size, some spacing before and after it and is bold.
-
<h1>-- the highest level, usually the biggest in size -
<h2> -
<h3> -
<h4> -
<h5> -
<h6>
Lists
There are a few different types of lists.
Unordered and ordered lists
-
<ol>-- This tag surrounds list elements in ordered lists. -
<ul>-- This tag surrounds list elements in unordered lists. -
<li>-- This is the tag for an individual list element in both ordered and unordered lists
Definition list
Not used too commonly:
-
<dl>-- The tag that contains all of the list elements -
<dt>-- The title part of the definition in the list -
<dd>-- The definition part of the definition in the list.
Tables
-
<table>-- Goes around the entire table -
<caption>-- Gives the table a caption -
<thead>-- This optionally goes around rows in the head of the table -
<tbody>-- This optionally goes around rows in the body of the table -
<tr>-- Indicates a row -
<th>-- Table cell that is a header -
<td>-- Normal table cell
Quoting
-
<blockquote>-- use for longer, block quotes -
<q>-- use for shorter, inline quotes
References
- HTML5 reference -- shows what's new and deprecated
