Intro
HTML stands for Hyper Text Markup Language. It’s used for creating websites on client side. That means you don’t need a server for it to run. With HTML we often use CSS to style the website, Javascript to make it more dynamic and different server-side languages like PHP or ASP. I’m going to show you how to make websites in XHTML and HTML5 which is not yet implemented in all of the web browsers.
What is HTML like?
In HTML tags are used to tell your web browser how the web-page should be rendered.
Normally tags come in pairs like <html> and </html>. The first one is called opening tag and the last one closing tag. These 2 tags tell the computer that all text between them is a part of a html web-site.
There also are 1 tagged tags like <br>.
Tags can have attributes in them. <img src=”image.jpg”> This tag displays a picture in your browser’s window. “src” or source attribute holds a path to the image.
Differences Between HTML and XHTML
XHTML is very strict comparing it to standart HTML. It was made mostly for one reason: older mobile devices weren’t able to parse HTML due to its loose definition. So experts came out with XHTML which is basically a valid XML document so it features more strict rules.
All XHTML documents must look like this:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
</head>
<body>
</body>
</html>
First is the XHTML declaration which defines the type of a document. Then as usual is a HTML starting tag with added xmlns attribute.
Tags must be always closed. Even single tags like <br>. They look like <br/> in XHTML.
All tags must be properly nested.
Wrong:
<ul>
<li>
</ul>
</li>
Correct:
<ul>
<li>
</li>
</ul>
Elements must be written in lowercase.
Wrong:
<SPAN>
</SPAN>
Correct:
<span>
</span>
All attribute values must be quoted.
Wrong:
<img src=image.gif>
Correct:
<img src=”image.gif”/>
HTML5 – What is It?
It’s the latest version of the HTML and it’s not yet implemented in all of the web browsers. It’s basic syntax looks like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
It includes many new and exciting features like <canvas> element for vector graphics, <video> and <audio> for in-browser media player and many more.
In this tutorial series I will show you both HTML5 and XHTML, but I will focus on HTML 5 because technology must develop to reach higher goals.
Next time I will teach you to actually write HTML code and run it in your web browsers.