lesson 2 - the basics
As you've just learned, writing code is really just putting the right content in the right tag. As we just learned, there are a few simple rules in coding html.
basic rules
1) All opening tags must have closing tags. Some tags open and close in the same tag, we'll learn about those later.
<p>This is a paragraph</p>
Correct
<p>This is a paragraph.
<p>This is another paragraph
Incorrect
2) Tags can contain tags within them, but all tags opened within a tag must close within the same tag, not outside of it.
<p>This is a <strong>tag</strong> within a tag</p>
Correct.
<p>This is a the <em>wrong<strong> type</em> of coding</p></strong>
Incorrect
3) All code should be lowercase always.
<h3 id="header">The text can be uppercase, but not the code</h3>
Correct
<H3 ID="Header">This is bad bad code</H3>
Incorrect
4) A block level tag can contain an inline tag, but an inline tag cannot contain a block level tag. We'll talk about this more later.
the structure of a tag
In addition to these simple rules, all tags must follow the proper syntax. There are two parts to a complete tag, the opening tag and the closing tag. The opening tag is written simply as this:
<element attribute="value" attribute="value">
Let's break this apart.
The element is what kind of content you are defining. If you text is a paragraph, your element is p. If you text is bold, your element is strong. In html, there are a number of defined elements to describe your content. We'll learn more in second.
Attributes are characteristics that are particular to an element. For example, if you are using the image tag, <img>, your attribute would be the source of the image. The value is just the specific value for that tag. If you have an image tag with the source attribute, your value would be the specific source. The attribute is the catergory and the value is the answer. Your image tag could look like this <img src="images/image1.jpg" />. Values are always delimited by quotes. Some attributes have multiple attribute and value pairs. These are simply separated with a space.
Often times your tag will not need attributes. In this case, simply put the > after the element.
The closing tag is much easier, it is written like this:
</element>
Where the element name is the same element name in the opening tag.
Basic Tags
At this point your head is probably spinning with all these rules. Don't worry about them too much for now, just keep them in mind as you go forward. The most important this is to start trying them out. Here are some basic formatting tags:
<p> This is your basic paragraph tag
<br /> (self closing) This is a line break tag. It closes itself, so it doesn't need a closing tag.
<h1> Largest heading
<h3> Medium sized heading
<h6> Smallest heading
<em> Emphasis, generally italics
<strong> Strong, generally bold
<img /> (self closing) This is used to place an image on a webpage
<ul> Unordered list. List items go between the opening and closing tags and are bulleted
<ol> Ordered list. List items go between the opening and closing tags and are numbered
<li> List item
There are a few more key tags, but we'll go into detail with those in the coming lessons.