Basics of HTML

HTML5 is a markup language and this version fifth generation HTML-language. Basically you use almost same elements in this language that you would use in XHTML or other HMTL versions (1-4) so if you already know these you probably don’t need bother yourself reading this article. But if you are newbie like I, keep on reading.

Thinks you need

Well you need computer and all essential luxuries with it (media player to listen music, notepad or something where to type your code and save it) and time and some peace are plus. Also you would like to have Internet access to check other tutorials for another view how web pages are done.
I used notepad for this, and you can easily access it by typing your Windows search bar notepad and you are done. If you use Linux you probably want to use terminal emulator because it’s one of the quickies ways to make text documents and publish them. But you are also free to use any software development tools like Eclipse (link), notepad++(link) and for Linux I recommend Gedit ( sudo apt-get install gedit ). Gedit and notepad++ has this “highlight” opportunities so you immediately see that if you have misspelled something or you have forget to end tag.

Basics are Basics

Before making any new files let’s make public_html dictionary to your home dictionary. Remember that first file that is going to be your first site. I mean that this the site you want to see when you type to your URL your address. In Linux remember to activate user module if you are using Apache2 by command: sudo a2enmod userdir , so you are actually able to publish. If you use Linux you might consider Apache2 for your server. The first file should be named index.html .

So what we need to know about first of all? When you use HMTL5 you need to use tags, yeah I know that you don’t need to use them always but I think it’s always to good to use them so no mix ups won’t happen. So this is the one and only you use almost always when you starts <!doctype html> . So what this means, “<“-this mark tells something starts and this mark “>” tells that something has ended. What is inside of those mark tells us that this page is HTML-type of site. So the next think that you see almost every time is this; <html> and it’s end mark </html> . Also these goes to same category <head> , </head> , <body> ,</body> , <p> and </p> . You probably have already seen the pattern, something always starts and ends the commands. You can add almost everything between body tags (basically it is text and pictures, but also sounds, videos and other media material you have done). This is one way to sum up all

<!doctype html>
<html>
	<head>
		<title>Test Page</title>
	</head>
	<body>
		<h1>Helloworld!!!</h1>
<br>
<br>
		<p> If you are able to see this you have write well; </p>

	</body>
</html>

This is one way to make simple HTML-page. To add more content basically you need to add it body, like pictures and music files.

Most used tags and commands

I have listed some most used tags and basic commands that you might want to use every time or basically you need to use. So here they are:

  • <!doctype html> , makes document validated. Also tells that HTML5 is used
  • <html> and </html> , tells that HTML-language is used
  • <head> and </head> , heading
  • <title> and </title> , is that shows up in browsers tabs
  • <body> and </body> , is the part where material and media is
  • <p> and </p> , is where text is located
  • <br> , might not recommend to use for line breaks. I have heard that <wbr> might be better for different browsers if you want to have line breaks in your text.

Conclusion

Remember to make dictionary public_html and file index.hmtl to make first site available. Then you can use notepad/nano or something else software development tools like adobe dreamweaver, notepad++, eclipse or gedit. Remember also type simple codex and plan before you type.
To see more HTML5 read my other articles

**Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed. GNU License 3 (link)**

-Tuomas Törmä

Sources

  • Introduction to Web Site Development lectures At Haaga-Helia spring 2013 teacher Mirja Jaakkola.

Leave a comment