By Chongchen Saelee
OK. Let me show you how I do HTML5 for best speed and conformity. Check this:
To begin, the first thing you need to know about HTML files is that they contain only strings or text. They cannot be binary data like other kinds of files. Ironically, it’s binary anyway, but HTML data is required to be interpreted as text or string only.
So open your favorite string/text editor, such as Notepad or Notepad++, and create a new blank text file. You will be typing in the bare minimum text to structure a HTML file (the proper way anyway). It is essentially some instructions for an Internet browser on how to draw the HTML file. You are actually programming! Can you believe that?
All HTML5 compliant webpages need the !doctype declaration.
<!doctype html>
HTML uses “tags” to make layout more object-oriented. Object-oriented programming is a concept that makes programming easier to wrap your head around. I won’t go in-depth into it, but there’s a lot of organizational philosophy behind it. Anyway, HTML “tags” have attributes and values.
It is structured like a skeleton. Check this:
<head>
stuff goes here
</head><body>
stuff goes here
</body>
You open tags enclosed in brackets < and > and close them with < and />. In some instances, since the optimization of the HTML standard by W3C, a group of professionals that author the web standards, some tags don’t need to be closed. For example, a line break is solely <br/>.
So to set up an HTML file, you need to have an HTML tag, first and foremost. Check this:
<!doctype html>
<html>
<head></head>
<body></body>
</html>
That’s it! That’s your most basic (and compliant) HTML5 file!!!
If you haven’t saved the file yet, then do so. Save the file AS AN HTML FILE, meaning when you save it, select the option for the file extension/format to “All Files(*.*)” in Windows Dialog box, or HTML(*.html) if it exists as a selection, otherwise use All Files and add .html as the file extension and SAVE.
Like this:
myFirstHTML.html
Of course, if you were to open your newly created HTML file in an Internet browser, it won’t display anything. That doesn’t mean you’ve lost what you’ve written, or that it’s not working. If you go to your Internet browser’s View Source Code feature, you will see that it’s all there, it’s fine and dandy, working.
Let’s make it more practical. HelloWorld is a very popular beginner’s concept. Let’s do a HelloWorld implementation in HTML.
Check this:
<!doctype html>
<html>
<head></head>
<body>
Hello, World!
</body>
</html>
Very simple, no? Save your changes and open it in a Internet browser.
Whoa!!! Ain’t that kewl?!!
So now you can experiment with all the other HTML tags, doo-dads, and cool stuffs. W3Schools is one of my favorite references online. I use it ALL THE TIME. You can become the master web designer you’ve always wanted to become! But the beginning may be tough. Keep at it, and you’ll be creating masterpieces in no time.
I hope that helps! Happy coding! You are now a Padawan HTML Jedi.
If you like this post, feel free to leave your comments and questions. Thanks for reading!
Tags: attributes, basic, beginner, compliant, concept, easy, elements, html, HTML5, object oriented, oop, programming, tags, tutorial