Webdev tutorial

HTML

Syntax

HTML (HyperText Markup Language) is a user friendly language meant to structure web pages (meaning tell the browser what is what). Once you get the basics of it down, it is very easy to learn, and all you'll need is knowledge of a few basic tags, which we'll teach you later. Once you've learned HTML correctly, you can go on to CSS, which is used along side HTML to change the way a page looks. Thus, once you learn the syntax, and a few tags, you'll be ready to learn CSS. In this section we'll cover these basics that you'll need to know in order to proceed with learning how to make a website. There are two types of tags: empty, and non-empty (simple, no?).

Non-empty Tags

We'll go with the non-empty tag first, as it is more common. Here is how this type of tag is structured: a lesser than symbol (<) followed by the the tag's name and attributes (if any), followed by a greater than symbol (>). Then comes the contents of the tag, and then an ending tag, which is a lesser than symbol, a forward slash (/), the tag's name, and then a greater than symbol. Attributes follow the format of a space before them, seperating them from the previous text, the attribute name, an equals sign (=), and then the content of the tag in quotation marks (it can be double or single quotes, as long as you're consistent). Note: the quotation marks could be considered optional, but it's best not to make the browser guess, and just add them in. So, for example, a paragraph tag with a class defined (more on this in the tags section): <p class="foo">This is a paragraph. Yay, paragraph.</p>

Empty Tags

Next, the empty tag. There are very few of these, and their syntax has a slight difference if you're using XML syntax (which is meaningless, and not really different at all, so ignore that for now). It's simply an opening tag, with no content or closing tag. Such as the following: <img src="foo.jpg">, which is an image tag. That's it. Nothing more.

Indented Tags

Some tags will be within other tags (as in within the content section of a non-empty tag), and it's important to know that you should close them in correct order. Yes, it seems common sense, but, hey, some people don't do it nontheless. So, if foo is opened, and then bar is opened within foo, we should close bar, and then foo. So, in summary: Good: <foo><bar></bar></foo>, Bad: <foo><bar></foo></bar>. And now you know HTML syntax. That wasn't too bad, was it?