Well, I just thought I would give a simple HTML tutorial, Since this week is going very slow with New's Post's... So yeah, Here it goes:
If you are running Windows, start Notepad.
If you are on a Mac start SimpleText.
In OSX start TextEdit and change the following preferences: Select (in the preferences window) "Plain text" instead of "Rich text" and then select "Ignore rich text commands in HTML files". This is very important because if you don't do this HTML codes probably won't work.First, Once you open the wordpad, Or whatever you are using, You want to type/copy the following.
CODE
<html>
<head>
<title>My first Site</title>
</head>
<body>
This is where you type things...<b>This is bold..WOW</b>
</body>
</html>
Once you type all of that, You will wan't to save the document as (HTMLTraining.html) If you don't, The file will
not save as a HTML document.
- HTML tags are used to mark-up HTML elements
- HTML tags are surrounded by the two characters < and >
- The surrounding characters are called angle brackets
- HTML tags normally come in pairs like <b> and </b>
- The first tag in a pair is the start tag, the second tag is the end tag
- The text between the start and end tags is the element content
- HTML tags are not case sensitive, <b> means the same as <B>
This is an HTML Element...
CODE
<b>Bold</b>
The HTML element starts with a start tag: <b>
The content of the HTML element is: This text is bold
The HTML element ends with an end tag: </b>
HeadingsHeadings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.
CODE
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
HTML automatically adds an extra blank line before and after a heading.
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
HTML automatically adds an extra blank line before and after a heading.
Paragraphs
Paragraphs are defined with the <p> tag.
CODE
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML automatically adds an extra blank line before and after a paragraph.
Line BreaksThe <br> tag is used when you want to end a line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it.
CODE
<p>This <br> is a para<br>graph with line breaks</p>
The <br> tag is an empty tag. It has no closing tag.
Comments in HTMLThe comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.
CODE
<!-- This is a comment -->
Note that you need an exclamation point after the opening bracket, but not before the closing bracket.
The Anchor Tag and the Href AttributeHTML uses the <a> (anchor) tag to create a link to another document.
An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.
The syntax of creating an anchor:
CODE
<a href="url">Text to be displayed</a>
The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.
This anchor defines a link to Staredit:
CODE
<a href="http://www.staredit.net">Visit Staredit!!</a>
The line above will look like this in a browser:
[URL=http://www.staredit.net]Visit Staredit!![/URL]
[SIZE=7]The Target Attribute[/size]
With the target attribute, you can define where the linked document will be opened.
The line below will open the document in a new browser window:
[code]<a href="http://www.staredit.net/"
target="_blank">Visit Saredit!!</a>
The Frame Tag * The <frame> tag defines what HTML document to put into each frame
In the example below we have a frameset with two columns. The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. The HTML document "frame_a.htm" is put into the first column, and the HTML document "frame_b.htm" is put into the second column:
CODE
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
Tables Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
CODE
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Headings in a table Headings in a table are defined with the <th> tag.
CODE
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Unordered ListsAn unordered list is a list of items. The list items are marked with bullets (typically small black circles).
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
CODE
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Ordered ListsAn ordered list is also a list of items. The list items are marked with numbers.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
CODE
<ol>
<li>Isolated</li>
<li>Yoshi</li>
</ol>
SizeA form is an area that can contain form elements.
Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.
A form is defined with the <form> tag.
CODE
<form>
<input>
<input>
</form>
InputThe most used form tag is the <input> tag. The type of input is specified with the type attribute. The most commonly used input types are explained below.
Text FieldsText fields are used when you want the user to type letters, numbers, etc. in a form.
CODE
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
The Image Tag and the Src AttributeIn HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only and it has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page.
The syntax of defining an image:
CODE
<img src="url">
The URL points to the location where the image is stored. An image named "boat.gif" located in the directory "images" on "http://scmapz.t-rh.com" has the URL:
http://scmapz.t-rh.com/images/blop.gif.
The browser puts the image where the image tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.
BackgroundsThe <body> tag has two attributes where you can specify backgrounds. The background can be a color or an image.
BgcolorThe bgcolor attribute sets the background to a color. The value of this attribute can be a hexadecimal number, an RGB value, or a color name.
CODE
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
The lines above all set the background color to black.
[size=7]The HTML <font> Tag/size]
With HTML code like this, you can specify both the size and the type of the browser output :
CODE
<p>
<font size="2" face="Verdana">
This is a paragraph.
</font>
</p>
<p>
<font size="3" face="Times">
This is another paragraph.
</font>
</p>
Edit: Added Image tags