(X)HTML Part 1: Basics

[henasraf]

[Tutorial]
(X)HTML Part 1:
Basics

Hi! My name is dokueki. You can refer to me as doku, or Spidey if you want, since that's my older alias.
Done with the introduction, now let's get to business:
I am writing an HTML tutorial, and splitting it into parts.
This part is the first out of the series, and it will cover (X)HTML/web design basics.
Beware! The tutorial contains lots of text. If you can't stand the reading, stay out of the topic :P

How is this article built?

In this part of the tutorial (part 1), I will introduce you to HTML and web design.
Things that will be covered in this article are:

• HTML syntax and how to use it
  
• Common HTML tags and properties
  
• XHTML - what is it and why should I use it?
  
• Web design's unwritten rules
  

Section A: HTML Syntax and How to Use it

HTML syntax is very simple. Before you start, I would suggest you grab yourself a text editor with syntax highlighting.
Basic Editor vs. WYSIWYG

Should I use a basic text editor or a WYSIWYG (What You See is What You Get) editor?
Basic editors give you:

• Full control over your content
  
• If you're an ok coder at the least, your designs will load much faster
  
• You will know exactly where everything is placed and what/where to edit, letting you have easier fixing and control
  
• You have to code the website by hand, and though it's easier than it looks, newcomers may reject the mere idea
  

WYSIWYG gives you:

• A visual view of your design
  
• Often it's easy to edit settings/properties/tags without guessing them/researching
  
• The code will load slow
  
• You will have a hard time controlling your design properly
  
• You will have worse control over the contents and capabilities you want to achieve
  

So the thing comes to this; I personally suggest a basic editor rather than a WYSIWYG editor. Pick one with syntax highlighting, since that will make your editing easier, and those usually come with comfortable settings and controls that let you code faster and more efficiently, rather than MS notepad for example.
I personally suggest Notepad++, but if you fine one you prefer more -- by all means, go ahead. I will not be addressing the editor in particular at any parts in the tutorials unless I specifically say so, so whichever you pick does not matter.
If you still rather go with a WYSIWYG editor, most of the HTML taught here will not be much help -- actually, very little.

HTML syntax is very easy.
Every tag must be opened and closed -- except for a few which only have standalone tags.
A tag begins with < and closes with >. The closing matching tag usually begins with </ and ends with >. These tags are tags that have properties and can have content inside them which the tag only applies to the content itself, not anything outside it.
Tags that do not have closing matching tags, open with < and close with />. Those are tags that should not have a content inside them, only properties. For example, the <img /> tag and it's image source and alternative text. It should not have a content.
A comment is a line that does not get interpreted by the browser. What does that mean? It can be used to leave, as the name implies, comments for the reader of the code, whether it's the user or the developer.
Comments begin with <!-- and end with -->.
Here are examples of tags:[HTML]<!-- This is a comment. This will be ignored by the parser. -->
<!--
Comments can be multiline
And indented.
-->

<b>Bold text<!-- Comments can go anywhere except for inside a tag's property place. --></b>
<!-- This is an example of a normal tag that opens and closes. -->
<i>Italic text</i>
<!-- This is an example of a tag that does not have a closing matching tag.
This particular tag generates a horizontal line on the screen. -->
<hr />
[/HTML]
HTML properties are the things that define how the tag should behave and act.
For example; an image tag cannot be left blank, it should have a source image that tells it which file to take and display it!
Properties are announced like so: <tag property="value">.
An image tag has a source property which tells it which image to show.[HTML]<img src="mypicture.png" />[/HTML]
This will make the picture called "mypicture.png" located in the same directory as the html page load.

Common HTML Tags and Properties

HTML users have tags they use very often for their web designs. Here is a list of the most commonly used ones, and their explanation:[HTML]<strong>Strong text. This usually replaces the b tag for bold text.</strong>
<em>Emphasis text. This usually replaces the i tag for italic text.</em>
<img src="source.ext" /> <!-- image tag -->
<div style="/* css style */">DIV box -- a simple yet efficient box on the screen. CSS is used to give the box style and behavior.</div>
<span style="/* css style */">Span text -- this is used to apply styles to text that are not included in tags such as strong and em. It is usually used the same as DIV is used, but this one does not force the content inside it to be in an individual box that seperates itself from what's around it but rather integrates itself into text in a flow.</span>[/HTML]
These are mandatory tags, and are used commonly in every page. These define how the page itself works rather than just parts of it:[HTML]<html> <!-- is used to start the html page. In XHTML this tag has another tag before it and has properties. We'll get to that later though! --></html>
<head><!-- Inside the html tag, this defines the header of the page. This includes the title and global styles for the page, as well as meta tags and other more advanced tags/properties. --></head>
<title>This determines the page's title -- it will be displayed in the browser title/tab title and the bookmark name when the page is bookmarked. It should go inside the head tag.</title>
<body><!-- this is where the actual page is shown. All text and other tags go in here, and they will be displayed in the browser. --></body>[/HTML]

XHTML: What is it and Why Should I Use it?

XHTML is a set of web standards. They tell you where and how to use tags and properties to help your pages become easily globally used and more suitable for all browsers while keeping the code clean.
Rules you should remember about XHTML compatability:

1. Every page should have a DOCTYPE tag before the html tag
   
2. Every page should have at least an html tag, a header with a title inside, and a body (even an empty one).
   
3. All tags should be properly closed.
   
4. Tags that do not have matching tags should be closed properly with />.
   
5. All tag names and properties should be in lower case letters.
   
6. All tag property values should be wrapped in double or single (preferrably double) quotes.
   
7. Shortening of tag properties is not allowed.
   
8. Deprecated tags are indeed deprecated! (center and font tags for example, have been replaced by CSS inside DIVs or spans)
   

Alright so that's it for part 1. It's not that intense, I know, but it's what you need to start. I advise you to try create basic pages with HTML and see how you do. If you know CSS, throw it there too! I will teach it very soon, but in this part we haven't learned anything practical yet. Sorry!
The next part will be intense and will teach HTML layout, and basic CSS.