[TechApp]

Ultimate HTML Tutorial

Table of Contents:
Part 1:
-Introduction
-Text Editor
-Elements
-Tags
-Text
-Formatting
-Attributes
-Font
-Text Links
-Comments
-Lists
-Images
-Image Links
-Tables
-BG Color
-Color Chart


Part 2:
-Forms
-Input
-Text Fields
-Password
-Reset
-Submit
-Check Boxes
-Radio
-Select
-Hidden Fields
-Upload
-Text Areas

Part 3:
-Formatting Tags
-Bold
-Paragraphs
-Headings
-Line Breaks
-Horizontal Rule
-Email
-Italic
-Code
-Superscript
-Subscript
-Strikethrough
_________________________________________________________________________________________________________________________________________________________________​___________________________________________________________

Part 1

_________________________________________________________________________________________________________________________________________________________________​___________________________________________________________

Introduction:

Welcome to my tutorial on HTML. In this tutorial you will learn about HTML and how to use it. I don't recommend blowing straight through this tutorial. HTML is a easy to understand language, but is a coding language so you want to take you time with it. HTML stands for HyperText Markup Language and is the very basics of any website on the internet. The first HTML website came out in November of 1990, and later became the basis of the internet. So if your ready, lets get started!
_________________________________________________________________________________________________________________________________________________________________​___________________________________________________________

Text Editor:

Before you get started coding your own website you should probably get rid of you trustworthy Notepad that came with Windows and get a real text editor. Dream Weaver is a very good text editor, but costs a lot of money. So if you don't want to use DW you can use Notepad++ which is just Notepad for Windows, but a whole bunch more stuff and even comes with HTML syntax. For the sake of this tutorial we will be using Notepad++.
_________________________________________________________________________________________________________________________________________________________________​___________________________________________________________

Elements:

When you first go to a website what do you see? Banners, text, images, maybe even hear music playing? Those are all elements of that website. The word element just means a part of that webpage. Many elements on a webpage are invisible to you, but run in the background.

An element consists of three essential pieces: an opening tag, the content, and a closing tag:
<p> - opening paragraph tag
Element Content - "Once upon a time..."
</p> - closing tag
A singe HTML page can contain thousands of elements, but it must have the four bare minimum of four: the HTML, head, title, and body elements.

<html> and </html> Element
<html> is the element that begins and ends each and every web page. Its sole purpose is to hold each web element nicely in position and serves the role of book cover; all other HTML elements are encapsulated within the <html> element. The tag also lets web browsers know, "Hey, I'm an HTML web page!", so that the browser knows how to render it. Remember to close your HTML documents with the corresponding </html> tag to signify the end of the HTML document.

Code

<html>
</html>

<head> Element
The <head> is usually the first element contained inside the <html> element. While it is also an element container that encapsulates other HTML elements, these elements are not directly displayed by a web browser. Instead they function behind the scenes, providing more descriptive information about the HTML document, like its page title and other meta data. Other elements used for scripting (JavaScript) and formatting (CSS) are also contained within the <head> element, and we will eventually introduce how to utilize those languages. For now, the head element will continue to lay empty except for the title element, which will be introduced next.

Code

<html>
  <head>
  </head>
</html>

<title> Element
The <title> element adds a title to a web page. Web page titles are displayed at the top of any browser window or at the top of browser tabs. They are probably the first thing seen by web surfers as pages are loaded, and web pages you bookmark are saved using the web pages' titles.
A proper title makes a good first impression, and any page caught without a title is considered unprofessional, at best.

Code

<html>
  <head>
     <title>TechApp</title>
  </head>
</html>

<body> Element
The element that encapsulates all the visual elements (paragraphs, pictures, tables, etc.) of a web page is the <body> element. We will be looking at each of these elements in greater detail as the tutorial progresses, but for now, it's only important to understand that the body element is one of the four critical web page elements, and it contains all of the page's viewable content.

Code

<html>
  <head>
    <title>TechApp</title>
  </head>
  <body>
    <p>This is my tutorial</p>
  </body>
</html>

To recap quickly:
We've laid out a set of four essential elements that are used to create a strong foundation and structure for your web page. The <html> element encapsulates all page content and elements, including two special elements: the <head> and <body> elements. The <head> element is a smaller container for elements that work behind the scenes of web pages, while the <body> element houses content elements such as web forms, text, images, and web video.
From here on out, the examples we provide will assume that you have a firm understanding of these key elements and know to place the majority of your HTML code inside of the <body> element.
_________________________________________________________________________________________________________________________________________________________________​___________________________________________________________

Tags:

A web browser reads an HTML document from top to bottom, left to right. Each time the browser finds a tag, the tag is rendered accordingly. Paragraph tags render paragraph text, image tags render images, etc. By adding tags to an HTML document, you are not only coding HTML, but also signaling to the browser, "Hey look, this is paragraph text; now treat it as such!"
Do you recall that HTML elements are comprised of three major parts: the opening tag, the content, and the closing tag? As you will learn, there are infinite combinations of HTML tags/elements, including those used for forms, images, and lists. Everything displayed on an web page requires the use of a tag or two.
HTML Tag Code:

Code

<tag>Content</tag>

<p>This text will be rendered like a paragraph.</p>

Tags should always be written in lowercase letters if you plan on publishing the page online, as this is the web standard for XHTML and Dynamic HTML.
HTML More Tag Code:

Code

<body>Body Tag
<p>Paragraph Tag</p>
<h2>Heading Tag</h2>
<b>Bold Tag</b>
<i>Italic Tag</i>
</body>

Elements Without Closing Tags:
There are a few elements that do not require formal closing tags. In a way, they still have the 3 parts (opening/closing and content), but they are consolidated into one tag. The reason for this is that these tags do not really require any content to be placed within them, but sometimes may require attributes such as source URLs for images.
One prime, easy example of an HTML tag that does not require a closing tag is the line break tag.

Code

<br />

To tell the browser we want to place a line break (carriage return) onto the site, it is not necessary to type <br>linebreak</br>. This would require a tremendous amount of effort,and if every line break tag needed all three components as other tags do, life would become redundant real quick. The better solution is to combine the opening and closing tags into a single format and shorten the number of characters needed to render a line break. Other tags, such as image tags and input tags, have also been modified in such a manner.
HTML Code:

Code

<img src="../pic.jpg" /> -- Image Tag
<br /> -- Line Break Tag
<input type="text" size="12" /> -- Input Field

_________________________________________________________________________________________________________________________________________________________________​___________________________________________________________

Text:

Text is the backbone of any web page. It plays an double role; it provides content for web surfers to enjoy as they skim through articles and articles of information, but it also gives Search Engines and Spiders keywords and meta data. It is because of text on web pages that we have a network of seemingly endless information available at our fingers.
HTML Text is probably the first element most HTML beginners learn to add to any web page, and this is generally achieved through a classic, "Hello, World!" example.
HTML Text Code:

Code

<html>
  <head>
    <title>Hello world! This is my first webpage!</title>
  </head>
  <body>
    Hello World!
  </body>
</html>

HTML Paragraph Text:
Any text containing more than a few lines (or sometimes even more) should exist inside of a paragraph tag <p>. This tag is reserved specifically for blocks of text, such as those you would expect to find inside your favorite novel.
HTML <p> Tag Code:

Code

<html>
  <head>
    <title>My Web Page!</title>
  </head>
  <body>
    <p>Avoid losing floppy disks with important school...</p>
    <p>For instance, let's say you had a HUGE school...</p>
  </body>
</html>

Well written HTML documents can gain popularity through Search Engine Optimization and careful coding of your HTML elements.
Precision is important when writing your code. Web spiders are a little forgiving when it comes to malformed HTML elements. For best results, do your best to ensure your code is complete and accurately constructed.
_________________________________________________________________________________________________________________________________________________________________​___________________________________________________________

Formatting:

As you begin to place more and more text elements onto your website, you may find yourself wanting to incorporate bold or italic properties usinging your text elements. HTML offers a handful of special tags that can be utilized to do just that:
HTML Text Formatting Tags:

Code

<p>An example of <b>Bold Text</b></p>
<p>An example of <em>Emphasized Text</em></p>
<p>An example of <strong>Strong Text</strong></p>
<p>An example of <i>Italic Text</i></p>
<p>An example of <sup>superscripted Text</sup></p>
<p>An example of <sub>subscripted Text</sub></p>
<p>An example of <del>struckthrough Text</del></p>
<p>An example of <code>Computer Code Text</code></p>

Here is what is looks like after:


About formatting text elements:
Formatting elements such as <b> should be used sparingly, and what we mean by that is that you should only use them to bold or italicize one or two words at a time. If you wish to bold an entire paragraph, the better solution would involve Cascading Style Sheets (CSS) and adjust the element's font-weight property. You may consult how to do that in our CSS Tutorial. Ultimately, the decision is in the hands of the web designer, but generally, it's best to keep the use of these tags quick and sparse.

Line Breaks:
A line break is used in HTML text elements, and it is the equivalent of pressing Enter or Return on your keyboard. In short, a line break ends the line you are currently on and resumes on the next line. Earlier, we mentioned that each paragraph element begins and ends with a line break, which creates an empty space between the start of a paragraph element and the end of a paragraph element.
As we've mentioned, line break elements are a little different from most of the tags we have seen so far because they do not require a closing tag. Instead, their opening and closing tags are combined into a single line break element. Placing <br /> within the code is the same as pressing the return key in a word processor. Use the <br /> tag within other elements such as paragraphs (<p>).
HTML Formatted Text:

Code

<p>
Billy Bob<br />
Box 99<br />
New York, New York<br />
</p>

Address:
Billy Bob
Box 99
New York, New York
We have created an address for a letterhead and used a line break <br /> tag inside of a paragraph element to add some line breaks to make this text appear more like an address. Here's another look as we add a signature element to the same letter.

HTML Text Format:

Code

<p>Sincerely,<br />
<br />
<br />
Barack Obama<br />
President</p>

What is really says:
Sincerely,


Kevin Sanders
Vice President

---

Attributes:

Web page customization begins with HTML attributes. Attributes are like blue print schematics informing the browser how to render an HTML element. As an HTML tag is processed, the web browser looks to these attributes as guides for the construction of web elements. Without any attribute values specified, the browser will render the element using the default setting(s) (usually very boring).
HTML attributes are responsible for customizing web elements. As a web surfer, you've probably seen a vast assortment of color schemes, fonts, and styles -- all of which are brought to you by HTML and CSS element attributes.

Title Attribute:
The title attribute titles an HTML element and adds a tiny text pop-up to any HTML element, offering your web viewers a tool-tip mechanism where information can be found or where a better description of an HTML element can be seen.
Much like the tool tips found in word processing programs, this attribute can add spice to any page while offering the user priceless interactivity. As the mouse hovers over the element, a tool tip is displayed, giving the viewer just one extra piece of information.
HTML Title Attribute:

Code

<h2 title="Hello There!">Titled Heading Tag</h2>

Now if you do this on your own and hover over the text "heading" you will see a box pop up that says "Hello There!"
The title attribute is one that has not deprecated and should be used often. Many search engines are capable of identifying this attribute inside your HTML elements, granting increased search rankings based on the relevance of the title attribute text.

Align Attribute:
If you wish to change the horizontal alignment of your elements, you may do so using the align attribute. It allows you to align things left, right, or center. By default, most elements are automatically aligned left, unless otherwise specified.
HTML Align Attribute:

Code

<h2 align="center">Centered Heading</h2>

HTML Align Attribute Code:

Code

<h2 align="left">Left-aligned heading</h2>

<h2 align="center">Centered Heading</h2>

<h2 align="right">Right-aligned heading</h2>

HTML attributes, including align, used to be the primary source for the customization of web elements, but they have now lost their market share to Cascading Style Sheets (CSS). Since most HTML attributes are now deprecated, they should ultimately be avoided in professional-level web design. Nonetheless, having an understanding of HTML attributes will prove to be a tremendous aid for anybody looking to move into professional web development using Cascading Style Sheets.
__​__

Font:

The <font> tag provides no real functionality by itself, but with the help of a few attributes, this tag is used to change the style, size, and color of HTML text elements. The size, color, and face attributes can be used all at once or individually, providing users with the ability to create dynamic font styles for any HTML element.
Note: The <font> and <basefont> tags are deprecated and should not be used for published work. Instead, use CSS styles to manipulate your font.

Font Size:
Set the size of your font with size. The range of accepted values goes from 1 -- the smallest, to 7 -- the largest. The default size of a font is 3.
HTML Font Size Code:

Code

<p>
<font size="5">Here is a size 5 font</font>
</p>

Font Color:
Set the color of your font with color.
HTML Font Color Code:

Code

<font color="#990000">This text is hex color #990000</font>
<br />

<font color="red">This text is red</font>

Output:
This text is hex color #990000
This text is red

Font Face:
Choose a different font face by specifying any font you have installed. Font face is synonymous with font type. As a web designer, be aware that if you specify a custom font type and users viewing the page don't have the exact same font installed, they will not be able to see it. Instead the chosen font will default to Times New Roman. To reduce the risk of running into this situation, you may provide a list of several fonts with the face attribute, such as outlined below.
HTML Font Face Code:

Code

<p>
<font face="Georgia, Arial, Garamond">This paragraph
has had its font...</font>
</p>

Output:
This paragraph has had its font formatted by the font tag!
In the example above, we have changed the font face (type) of a paragraph element and specified a list of similar fonts to apply to this element in the case that some of our viewers do not have these fonts installed.
__​__

Text Links:

The World Wide Web got its spidery name from the plentiful connections (links) that link websites together with the click of a button. What most people don't know is that HTML links are actually HTML anchors constructed using anchor tags (<a>).
HTML Text Link:

Code

<a>I am a text link!</a>

While the example above appears and feels like a text link when viewed through a web browser, the element is incomplete as it is missing a vital attribute that references another web page called a Hypertext Reference (href).

Hypertext Reference:
A Hypertext Reference (href) is an HTML attribute of an anchor (link) tag that requires a valid URL in order to properly direct a user to a different location. In other words, this Hypertext Reference is where users will navigate to if they do click on this link. Use the demonstration below as a reference.
HTML Text Link Code:

Code

<a href="http://www.google.com/" target="_blank">Google</a>

Output:
Google
__​__

Comments:

Comments are a great asset to new developers and a great way to place little notes to yourself reminding yourself what pieces of code are doing what. Comments are also great ways to troubleshoot bugs and code errors, as they give you the ability to comment out lines of code one at a time to search for the exact line causing problems.
As a sprouting young web developer, HTML code comments are your friends! A comment is a way to control which lines of code are to be ignored by the web browser and which lines of code to incorporate into your web page. There are three main reasons why you may want your code to be commented out or ignored.
-Comment out elements temporarily rather than removing them, especially if they've been left unfinished.
-Write notes or reminders to yourself inside your actual HTML documents.
-Create notes for other scripting languages like JavaScript which requires them.

Comment Tags:

Code

[b]<!--[/b] Opening Comment Tag
-- > Closing Comment Tag

As you can see, comments are also comprised of an opening and closing tag, (<!-- -->). Like other HTML elements, these tags can span across multiple lines of code, allowing you to comment out large blocks of HTML code. Any HTML elements that are encapsulated inside of the comment tags will be ignored by the web browser. This makes comment tags quite useful for debugging, as they allow the developer to temporarily comment out pieces of an HTML document without having to immediately delete the code from the HTML document.
HTML Comment Code:

Code

<!--Note to self: This is a test note -->

Placing notes and reminders to yourself is a great way to remember your thoughts and to keep track of elements embedded inside the web page. Also, your code may exist for many, many years, and these notes to yourself are a great way to remember what was going on, since you may not remember five or more years down the road.
All combinations of text placed within the comment tags will be ignored by the web browser. This includes any HTML tags, scripting language(s), etc.
__​__

Lists:

HTML lists appear in web browsers as bulleted lines of text. There are actually three different types of HTML lists, including unordered lists (bullets), ordered lists (numbers), and definition lists (think: dictionaries). Each list type utilizes its own unique list tag, which we'll demonstrate below.
HTML List Item Code:

Code

<body>
  <ul>
    <li>I am a list item!>
    <li>I am a list item too!>
    <li>I am a list item also!>
  </ul>
</body>

HTML List Items:

• I am a list item!
  
• I am a list item too!
  
• I am a list item also!
  

The actual list tags themselves, such as <ul>, are nothing but container elements for list items (<li>). They work behind the scenes to identify the beginning and ending of an HTML list element.
__​__

Images:

Images are a staple of any web designer, so it is very important that you understand how to use them properly. In order to place an image onto a website, one needs to know where the image file is located within the file tree of the web server -- the URL (Unified Resource Locator).
Use the <img /> tag to place an image on your webpage. Like the <br /> tag, <img /> tag does not require a formal ending tag. Instead, all we need to do to close this tag out with a slash (/) placed just inside the ending bracket (/>).
HTML Image Code:

Code

<img src="http://dribbble.s3.amazonaws.com/users/4087/screenshots/45590/shot_1281887798_teaser.png" />

[img]http://dribbble.s3.amazonaws.com/users/4087/screenshots/45590/shot_1281887798_teaser.png[/img]
So that you can follow along with us, we've provided a global URL of an image we have stored on Tizag's web server. If you have an active connection to the internet, you should be able to use the URL in the example to render this image on your own web page. If not, you will have to download (right click the image and Save As...on a PC, control-click and Save on a Mac). Once saved to your local computer, point the image src attribute to the recently downloaded image file. It might help to save the image file in the same folder as your web page.

Horizontally Align Images:
Images can be aligned horizontally to the right or to the left of other elements using the align attribute. Image elements are aligned to the left by default.
HTML Align Attribute Code:
<img src="http://dribbble.s3.amazonaws.com/users/4087/screenshots/45590/shot_1281887798_teaser.png" align="right">

[img]http://dribbble.s3.amazonaws.com/users/4087/screenshots/45590/shot_1281887798_teaser.png[/img]

As you can see, the image's right edge has now been aligned with the right edge of the display box. Since the display box is the parent element, this is the desired behavior for the align attribute. If we take this example a step further, you can achieve some really great designs by embedding aligned images inside of paragraph <p> elements.

HTML Image Align Code:

Code

<p>This is paragraph 1, yes it is...</p>
<p>
<img src="http://dribbble.s3.amazonaws.com/users/4087/screenshots/45590/shot_1281887798_teaser.png" align="right">
The image will appear along the...isn't it?
</p>
<p>This is the third paragraph that appears...</p>

Now if you do that you will see your final result.

HTML GIF, JPEG, and PNG:
Gifs are best used for banners, clip art, and buttons. The main reason for this is that .gif files can have transparent backgrounds -- a priceless attribute when it comes to web design. On the down side, .gif files are limited to only 256 colors and any .gif image containing more than a few colors tends to have a larger file size than their .jpeg or .png counterparts. Large picture files are a plague of web design!

Jpegs have an unlimited color wheel and a high compression rate, which downsizes your load times and saves on hard drive space. Although .jpeg (or .jpg) files don't allow for transparent backgrounds, their size/quality ratio is outstanding. It's best to use .jpeg files for photo galleries or artwork. Avoid using .jpeg files for graphical designs, though; stick to using them for thumbnails, backgrounds, and photo galleries.

PNG image files are the best of both worlds. They have a large color wheel, low file size, and allow for transparencies like .gif images do. With a high-compression rate and transparent coloring, they might just be the best format for any web graphics.

When in doubt, try saving an image in multiple formats and decide which is better, keeping file size and quality in mind.

---

Image Links:

Image links are constructed as you might expect, by embedding an <img> tag inside of an anchor element <a>. Like HTML text links, image links require opening and closing anchor tags, but instead of placing text between these opening and closing tags, the developer needs to place an image tag -- with a valid source attribute value of course.
If you do not know how to use the image tag, please take a minute and review the HTML Image lesson before reading further.
HTML Image Link Code:

Code

<a href="http://www.yahoo.com" target="_blank">
<img src="http://dribbble.s3.amazonaws.com/users/4087/screenshots/45590/shot_1281887798_teaser.png" />
</a>

HTML Image Link:
[img]http://dribbble.s3.amazonaws.com/users/4087/screenshots/45590/shot_1281887798_teaser.png[/img]
By default, many browsers add a small border around image links. This default behavior is intended to give web viewers the ability to quickly decipher the difference between ordinary images and image links. Since this default is different from web browser to web browser, it may be best to squelch this ambiguity and set the border attribute of the image tag to 0 or 1.
__​__

Tables:

An HTML table is an element comprised of table rows and columns, much like you'd see when working with an application such as Excel. Tables are container elements, and their sole purpose is to house other HTML elements and arrange them in a tabular fashion -- row by row, column by column.
Tables may seem difficult at first, but after working through this lesson, you'll see that they aren't so horrible. A table element consists of three different HTML tags including the <table> tag, <tr> (table rows), and the <td> (table columns) tags.

HTML Table Code:

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>

Basic HTML Table Layout:

We've adjusted the formatting of the code by adding additional spaces before some of the table elements, but this has no bearing on the rendering of the element. It simply helps keep track of each tag/element and helps us ensure we don't miss an opening or closing tag which would prevent our table element from rendering correctly. We've also added a border attribute to ensure the table cells/rows are more visible to our readers.
Content elements like HTML lists, images, and even other table elements can be placed inside each table cell. Doing so aligns the elements in a tabular fashion and provides structure.

HTML Table Code:

Code

<table border="1">
  <tr>
    <td width="50%">
  <ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  </ul>
    </td>
    <td>
  <ul>
  <li>List Item 4</li>
  <li>List Item 5</li>
  <li>List Item 6</li>
  </ul>
    </td>
  </tr>
  <tr>
    <td>
  <p>Avoid losing floppy disks with important school...</p>
    </td>
    <td>
  <a href="http://www.espn.com" target="_blank" rel="nofollow">
  <img src="http://www.tizag.com/pics/htmlT/ahman.gif" class="linksESPN" />
  </a>
    </td>
  </tr>
</table>

HTML Table 2:

HTML tables allow the web designer to align page content in a tabular fashion while spanning elements horizontally across the web page, rather than stacking them up one on top of another.
__​__

BG Color:

The bgcolor attribute is used to set the background color of an HTML element. Bgcolor is one of those attributes that has become deprecated with the implementation of Cascading Style Sheets. The reason we've included it in this tutorial is because it will give us an opportunity to introduce web colors and also add some life to our HTML web page as we continue to progress through this tutorial. It will serve as a visual aid for you as you are learning the mechanics of building a table.
Without much effort, we can bring that boring white web page to life by adding some color with the bgcolor attribute.

HTML Bgcolor Code:

Code

<body bgcolor="silver">
  <p>This page now has a SILVER background!</p>
</body>

Web Colors:
Our example uses the text value, which is one of three different types of color values that can be used with the bgcolor attribute. Below is a table of the 16 basic HTML color values that are available to HTML web designers.
HTML Basic Colors:

While the table above illustrates only 16 colors, 16 is surely not the limit to our color wheel. As we mentioned, HTML supports three different types of color values including text values (which we've pretty much covered above), numeric, (RGB) and hexadecimal values. We'll go into more detail regarding these values so just sit tight. This next example offers a sneak peak at what these values may look like.

HTML Code:

Code

<table bgcolor="#ff0000" border="1"><tr>
<td>A red colored table background using hexadecimal values "#FF0000".</td>
</tr></table>

<table bgcolor="rgb(0, 0, 255)" border="1"><tr>
<td>A blue colored table background using numeric, RGB values "rgb(0, 0, 255)".</td>
</tr></table>

<table bgcolor="lime" border="1"><tr>
<td>A lime colored table background using color names.</td>
</tr></table>

Table Bgcolor Values:

Hexadecimal and numeric color values (RGB) allow HTML developers to expand the color wheel beyond 16 colors. Way beyond 16, in fact. Nonetheless, there's no need to memorize 256+ unique color combinations; instead, we can use numeric and hexadecimal values and calculate color shades.
__​__

Color Chart:

Below is the hexadecimal representation for an array of HTML background colors. The hexadecimal value that you see displayed in each box represents the value to get the background color of that cell.

__​__

Part 1 Conclusion:

So you have just read part 1 of the ultimate guide to HTML. Please be sure to keep checking back for updates and part 2 and 3 will be coming out soon!

[Intel]

http://www.codecademy.com/tracks/htmlcss

Great tutorial though, even if a bit obsolete. Thanks.

[TechApp]

http://www.codecademy.com/tracks/htmlcss

Great tutorial though, even if a bit obsolete. Thanks.

I just wanted to start off with something easy and simple for people to learn. I will soon make a CSS, Javascript, and do an HTML 5 tutorial.

[Intellectus]

Keeping this thread alive, great to see a good tutorial even though i can html fluently 🙂

[DayZ®]

Nice Guide, Sadly i am already quite used to HTML. Also if you guys aren't used to HTML and keep forgetting the Codes, dont worry it gets a LOT easier as you work on it you eventually Memorize most of the Required Codes. wait till they attempt CSS Thats where it gets a bit more confusing and allows you to make a really Sexy site.

[Clique]

Nice tutorial. Should be really helpful for beginners :3

[bad]

Great and HQ tut mate.
Thanks for your efforts :)

[Phytrix]

Great tutorial, although I think you overdid it with the text size. Normal size is fine, really.

[GotLiveChat]

Nice tutorial; hopefully it was more cut/n/paste than hand typed.

[Tech Experts]

wow good i really appriciate it .:) thanks .

[TechApp]

Nice tutorial; hopefully it was more cut/n/paste than hand typed.

No it was not copy and pasted. I have spent over a week typing it. I worked on it a little bit everyday. I actually posted it once before it was suppose to be posted and I had to get a staff member to hurry up and junk it before others saw it. All good now though.

[Ryan']

No it was not copy and pasted. I have spent over a week typing it. I worked on it a little bit everyday. I actually posted it once before it was suppose to be posted and I had to get a staff member to hurry up and junk it before others saw it. All good now though.

Really? http://www.tizag.com/htmlT/elements.php

You've just changed some of the wording...
I knew this was a c+p after I seen the part about styling with HTML tags. 😠

[Rasmouse]

This was very easy to understand, and a great way for me to get started with html. Thanks!

[shqipenet]

I appreciate it mate great tut nice work

[C‎a‎r‎bon]

You really should just use html for the structure of the website, and then style with css. huge waste of time styling every html tag