Difference between revisions of "HTML Primer"

From Dreamwidth Notes
Jump to: navigation, search
(Created page with "= Basic formatting = == Tags == == Attributes == = Tag Overview = == Head and Body == == Divs == == Spans == == Links == == Images == == Headers == == Lists == == Tabl...")
 
Line 1: Line 1:
−
= Basic formatting =
+
= Basic formatting: Tags and attributes =
  
−
== Tags ==
+
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>)  An individual tag inside of an HTML document is called an "element".
  
−
== Attributes ==
+
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.  Some tags can't contain other tags and these tags do not need closing 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 <code>a</code> tag, your code will be:
 +
 
 +
<syntaxhighlight lang="html4strict">
 +
<a href="http://www.dreamwidth.org">Dreamwidth</a>
 +
</syntaxhighlight>
 +
 
 +
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 <code>&lt;/a&gt;</code> 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 =
 
= Tag Overview =
  
−
== Head and Body ==
+
== Html, Head and Body; comments ==
 +
 
 +
The basic structure of an HTML page uses these tags. 
 +
 
 +
* &lt;html&gt; -- The HTML tag contains everything else.
 +
* &lt;head&gt; -- 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 [http://www.w3schools.com/html5/tag_meta.asp metadata tags].
 +
* &lt;body&gt; -- 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:
 +
 
 +
<syntaxhighlight lang="html4strict">
 +
<html>
 +
<head><title>My Page</title></head>
 +
<body>
 +
<p>Content of my page</p>
 +
</body>
 +
</html>
 +
</syntaxhighlight>
 +
 
 +
Notice that inside the head tag, we are using a title tag, and inside the body we are using a paragraph tag.
 +
 
 +
== Head tags ==
  
 
== 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.
  
 
== 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.
 +
 +
== Paragraphs and Break tags ==
 +
 +
* &lt;p&gt; -- This tag defines a paragraph in the text.
 +
* &lt;br /&gt; -- This tag defines a line break
  
 
== Links ==
 
== Links ==
 +
 +
The link tag is the &lt;a&gt; tag:
 +
 +
<syntaxhighlight lang="html4strict">
 +
<a href="http://www.dreamwidth.org">Dreamwidth</a>
 +
</syntaxhighlight>
  
 
== Images ==
 
== Images ==
  
−
== Headers ==
+
The image tag is how to include an image in an HTML document:
 +
 
 +
<syntaxhighlight lang="html4strict">
 +
<img src="http://s.dreamwidth.org/img/silk/identity/user.png" width="16" height="16">
 +
</syntaxhighlight>
 +
 
 +
== Headings ==
 +
 
 +
* &lt;h1&gt;
 +
* &lt;h2&gt;
 +
* &lt;h3&gt;
 +
* &lt;h4&gt;
 +
* &lt;h5&gt;
 +
* &lt;h6&gt;
  
 
== Lists ==
 
== Lists ==
 +
 +
There are a few different types of lists.
 +
 +
=== Unordered and ordered lists ===
 +
 +
* &lt;ol&gt; -- This tag surrounds list elements in ordered lists.
 +
* &lt;ul&gt; -- This tag surrounds list elements in unordered lists.
 +
* &lt;li&gt; -- This is the tag for an individual list element in both ordered and unordered lists
 +
 +
=== Definition list ===
 +
 +
Not used too commonly:
 +
 +
* &lt;dl&gt; -- The tag that contains all of the list elements
 +
* &lt;dt&gt; -- The title part of the definition in the list
 +
* &lt;dd&gt; -- The definition part of the definition in the list.
  
 
== Tables ==
 
== Tables ==
 +
 +
* &lt;table&gt;
 +
* &lt;thead&gt;
 +
* &lt;tbody&gt;
 +
* &lt;tr&gt;
 +
* &lt;th&gt;
 +
* &lt;td&gt;
  
 
== Quoting ==
 
== Quoting ==
 +
 +
* &lt;blockquote&lt;
 +
* &lt;q&lt;
  
 
= References =
 
= References =
  
 
[[Category: Styles]]
 
[[Category: Styles]]

Revision as of 00:51, 22 April 2011

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>) 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. Some tags can't contain other tags and these tags do not need closing 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

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.

Spans

A span tag is mostly used to contain inline elements--again, usually used with class or ID attributes. Span tags are inline elements.

Paragraphs and Break tags

  • <p> -- This tag defines a paragraph in the text.
  • <br /> -- This tag defines a line break

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: 

<img src="http://s.dreamwidth.org/img/silk/identity/user.png" width="16" height="16">

Headings

  • <h1>
  • <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>
  • <thead>
  • <tbody>
  • <tr>
  • <th>
  • <td>

Quoting

  • <blockquote<
  • <q<

References

Retrieved from "http://wiki.dreamwidth.net/wiki/index.php?title=HTML_Primer&oldid=9661"