Getting to grips with HTML basics

by Will Head

Mar 25, 2008

| 25 Comments

Despite the profusion of point-and-click web-design software, there’s still no excuse for not knowing HTML. Will Head walks you through the basics

With the number of visual tools available to help you whip up a snazzy webpage in next to no time, you could be forgiven for thinking that you don’t need to know how the underlying code behind every page works. However, the HTML (hypertext markup language) specification was never really pinned down at the beginning of its evolution, and as a result some aspects of it were left largely open to interpretation. Combine that with a time when over-eager browser developers were keen to show that their platform offered more features than the competitors’, and you end up with a bit of a mess. Pages designed for one browser should look the same in another, but you couldn't be sure until you loaded them up.

The W3C (World Wide Web Consortium, www.w3.org) has gone to great lengths to implement HTML standards. By understanding and adhering to current web standards, you can look under the bonnet at the pages you create and make sure they’re correctly formatted and accessible to as wide an audience as possible.

Introduction to HTML

The World Wide Web was created by Tim Berners-Lee in 1990, and used the concept of hypertext to link documents together. In order to create pages, Berners-Lee needed a language that could specify how documents linked to one another and also provide rudimentary formatting. He created HTML for this purpose and based it on SGML (standard generalised markup language). Both are text-based standards that use tags to assign meaning to elements of text documents so a computer can make sense of them. An HTML document is simply a text file, but with the file extension HTM or HTML, so the system knows to open it in a browser.

Tags in HTML are enclosed in the characters “<” and “>”, so they can be recognised by the browser. For example, using the tag tells the browser to emphasise the text, usually by rendering it in italics. An end tag, which is signified by placing a forward slash “/” in front of the tag name, tells the browser when to stop applying the effect. So, in order to emphasise a phrase in HTML, the code would simply be:

The quick brown fox jumps over
 the lazy dog.

This would result in “jumps over” being shown in italics when the HTML page is opened by the browser and displayed onscreen. Tags can be used to define the structure of text, such as , which specifies a line break. If you were to write the following text, it would be displayed over two lines by the browser, even though it’s written as one:

This is line one This is line two.

Tags can also have attributes that define how they behave. The font tag, for example, allows you to specify how big the text should be and which typeface should be used. For example:

This text is large and red.

Berners-Lee’s original HTML spec covered 22 tags (of which only 13 are still in use today). Interpretation of early HTML was also fairly loose, which helped speed its introduction, but created problems further down the line, as there was no official standard to adhere to.

This was further exacerbated during the browser-war years in the 1990s, as Microsoft and Netscape battled it out to gain (or retain) most users by adding new features. Non-standard tags were added to increase the appeal of one browser over the other, but this resulted in web developers having to create pages for a specific browser rather than pages that worked fully in both.

The first standard version of HTML was published by the IETF (Internet Engineering Task Force) in 1994. The development and implementation of HTML standards was taken over by the W3C in 1996, and the last published version was HTML 4.01 in 1999.

The worlds first ever webpage, created by Tim Berners-Lee when he worked at CERN.

This article appeared in the February 2008 issue of PC Authority.

Ads by Google

Post your review online now and win 1 of 3 Lenovo laptops!

Comments: 25

charonis Mar 27, 2008 11:52 AM	I am vehemently against web development programs such as DreamWeaver/Frontpage/etc. If you want to make a webpage, do it the correct way by handcoding it, not by using one of these "user friendly" packages. I've seen so many websites that are obviously built with those tools it makes me cringe. What do you think about the PC Authority article Getting to grips with HTML basics? Despite the profusion of point-and-click web-design software, there’s still no excuse for not knowing HTML. Will Head walks you through the basics What do you think?
Alistor Mar 29, 2008 8:48 AM	Notepad is my ally with HTML coding :) Web dev packages are useful to some people who would have no hope learning a language, but I enjoy handcoding, because it gives you satisfaction in a job well done and you learn valuable skills.
charonis Mar 29, 2008 10:27 AM	And it gives you more power over every aspect also.
.:Cyb3rGlitch:. Mar 30, 2008 12:38 PM	I agree. Handcoding gives you more power, and ends up being easier. Especially when getting it to work in IE. >.<
charonis Mar 30, 2008 12:57 PM	ESPECIALLY IE6.... damn thing should be blown up....
.:Cyb3rGlitch:. Mar 31, 2008 11:31 PM	charonis wrote: ESPECIALLY IE6.... damn thing should be blown up.... IE should be blown up altogether. :P
charonis Apr 1, 2008 9:18 AM	Yes... yes it should :) I firmly believe that for all websites, the site should detect your browser, and if it's IE, it should redirect you to www.getfirefox.com
John Smith Apr 1, 2008 3:04 PM	If Only. My life would be a lot easier if that were to happen [-o<
tobyobi Apr 2, 2008 6:52 PM	There is nothing I hate more than Firefox zealots. It's a browser people. And it has some pretty sweet flaws. But anyway. I do my "development" in Dreamweaver. Code completion and highlighting rocks. And anyway, the design view is for chumps, hit the code button and start typing like you should. Not to mention, I get it for free anyway. People that have superiority complexes because they do things the hard way really need to look at working smarter.
Arghdee Apr 2, 2008 7:02 PM	tobyobi wrote: There is nothing I hate more than Firefox zealots. It's a browser people. And it has some pretty sweet flaws. But anyway. I do my "development" in Dreamweaver. Code completion and highlighting rocks. And anyway, the design view is for chumps, hit the code button and start typing like you should. Not to mention, I get it for free anyway. People that have superiority complexes because they do things the hard way really need to look at working smarter. Why use Firefox? Safari is FIVE TIMES FASTER! FIVE TIMES!!! Speaking of development, that's what TextEdit is for innit?
tobyobi Apr 2, 2008 7:03 PM	Arghdee wrote: Why use Firefox? Safari is FIVE TIMES FASTER! FIVE TIMES!!! Speaking of development, that's what TextEdit is for innit? BUT FIREFOX IS A WINDOWS BROWSER TOO!
chris Apr 2, 2008 9:06 PM	Arghdee wrote: Speaking of development, that's what TextEdit is for innit? duh...vim
.:Cyb3rGlitch:. Apr 3, 2008 1:50 PM	tobyobi wrote: There is nothing I hate more than Firefox zealots. It's a browser people. And it has some pretty sweet flaws. But anyway. I do my "development" in Dreamweaver. Code completion and highlighting rocks. And anyway, the design view is for chumps, hit the code button and start typing like you should. Not to mention, I get it for free anyway. People that have superiority complexes because they do things the hard way really need to look at working smarter. As a web developer, you can't NOT hate IE. :P
John Smith Apr 3, 2008 2:03 PM	IE 7 is fine, it's just people still living in the dark age using IE6, it's a piece of crap. All the others have their pros and cons. From a design and usability perspective, IE and Safari display fonts much clearer and nicer than firefox. The ultimate would be an editor with a preview mode of all browsers. One that actually works. One you can type and preview(not design in), not all the other crap dreamweaver has.
ArtMark Apr 4, 2008 5:09 PM	For bigginer and advanced Developers Dreamweaver has it all, I think that one should try Dreamweaver a bit longer ,get used to its featUres find all its features and go forward with it ,it makes your job as a developer much faster especialy working to tight scheduals,you get the job done in no time still being able to add your code and view as you go in any browser yes most browsers work with DW, once you add them in to view.Open sorce developing is good too,but you cant go past using DW. All my sites are maintained and updated using DW CS3 You can ADD CSS within DW for faster stronger websites Go forward advance faster using DW. Mark.....
.:Cyb3rGlitch:. Apr 5, 2008 12:56 PM	ArtMark wrote: For bigginer and advanced Developers Dreamweaver has it all, I think that one should try Dreamweaver a bit longer ,get used to its featUres find all its features and go forward with it ,it makes your job as a developer much faster especialy working to tight scheduals,you get the job done in no time still being able to add your code and view as you go in any browser yes most browsers work with DW, once you add them in to view.Open sorce developing is good too,but you cant go past using DW. All my sites are maintained and updated using DW CS3 You can ADD CSS within DW for faster stronger websites Go forward advance faster using DW. Mark..... I just use Notepad for my stylesheet and HTML-Kit for the XHTML/PHP. :P But hand coding the content is a pain, constant tags and gets on my nerves. But I can't afford Dreamweaver.
nix Apr 5, 2008 1:11 PM	Has anyone tried the MS "Expression" tools? I think they're quite cheap or even free, but I can't remember off the top of my head.
.:Cyb3rGlitch:. Apr 5, 2008 1:26 PM	nix wrote: Has anyone tried the MS "Expression" tools? I think they're quite cheap or even free, but I can't remember off the top of my head. I heard about that, I think they're free. I'm gonna try them out, thanks for the reminder. xD
djaef Apr 22, 2008 5:27 PM	I learnt how to hand code html back in 1999, and while I think it's a great useful skill, I think anyone who wants to hand write a web site instead of using productivity tools like Dreamweaver is living in the dark ages. Dreamweaver is quick, efficient and if you want to write code, go right ahead. Why on earth would anyone ever use Notepad???
.:Cyb3rGlitch:. Apr 23, 2008 2:20 PM	djaef wrote: I learnt how to hand code html back in 1999, and while I think it's a great useful skill, I think anyone who wants to hand write a web site instead of using productivity tools like Dreamweaver is living in the dark ages. Dreamweaver is quick, efficient and if you want to write code, go right ahead. Why on earth would anyone ever use Notepad??? I use it for CSS. And I can't afford Dreamweaver.
DeathBySlinky Apr 24, 2008 10:23 PM	Guys, I have used Notepad++ for all my coding :D It has helped me heaps. As for Dreamweaver...I can let you in on a little secret! If you want to try and get the newest version of MS Office for free, just PM me and I will tell you what you need to do. No scams or anything!! I promise! Peace Out, DeathBySlinky
.:Cyb3rGlitch:. Apr 26, 2008 6:03 PM	DeathBySlinky wrote: Guys, I have used Notepad++ for all my coding :D It has helped me heaps. As for Dreamweaver...I can let you in on a little secret! If you want to try and get the newest version of MS Office for free, just PM me and I will tell you what you need to do. No scams or anything!! I promise! Peace Out, DeathBySlinky But it's illegal, correct?
steli25 Jul 8, 2008 7:54 PM	For debugging, tools as Dreamweaver are very handy. You can use Dreamweaver free trial, which is LEGAL, but in a virtual machine (using Virtual Box or VMware ... ) all you have to do is to take a snapshot of the virtual machine before you install Dreamweaver ... you got the idea, right?
.:Cyb3rGlitch:. Jul 8, 2008 7:57 PM	steli25 wrote: For debugging, tools as Dreamweaver are very handy. You can use Dreamweaver free trial, which is LEGAL, but in a virtual machine (using Virtual Box or VMware ... ) all you have to do is to take a snapshot of the virtual machine before you install Dreamweaver ... you got the idea, right? Let me guess, the virtual machine confuses the trial clock. Am I correct? If so, that is illegal.
Jawsh Jul 9, 2008 3:28 PM	mmm what his saying is that the virtual machine wont have the registry entries from dreamweaver. so whenever you want to debug you can install a 30-day trial of dreamweaver on your 'clean' virtual machine. (EDIT: which, is probably still illegal in some way) I do agree though, Notepad is a very painful way of coding, especially if you write PHP or other languages. There are some very good freeware debugging tools out there though that do pretty things... like numbering lines, code highlighting, debugging etc etc. Dreamweaver or an equivelant app (like there are any) is the most efficient way of designing pages imo. The other fun little tool is http://www.psd2cssonline.com. If you have photoshop it will pick up all the layers in your psd image and write all the css and save all the images for you. NB: I've found it does take a little bit of post-editting to get your right. Edited by jawsh: 9/7/2008 03:28:51 PM Edited by jawsh: 9/7/2008 03:29:14 PM