Getting to grips with HTML basics

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

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 <em> 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 <em>jumps over
</em> 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 <br>, 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<br>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:

<font size=7 color=”red”>This text is large and red</font>.

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.

Browse this article:   Next

This Feature appeared in the February 2008 issue of PC & Tech Authority Magazine

Source: Copyright © PC Pro, Dennis Publishing

See more about:  getting  |  grips  |  html  |  basics
 
 

Readers of this article also read...

Need to know &#8211; BlackBerry 10 

Need to know – BlackBerry 10

 
What do six technology writers think of upgrading to Windows 8? 

What do six technology writers think of upgrading to Windows 8?

 
Apple Note incoming? 

Apple Note incoming?

 
LibreOffice 3.6.2 fixes bugs and improves stability 

LibreOffice 3.6.2 fixes bugs and improves stability

 
Google Maps brings Street View back to iOS 6 

Google Maps brings Street View back to iOS 6

 
Comments: 25
charonis
27 March 2008
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
29 March 2008
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
29 March 2008
And it gives you more power over every aspect also.
.:Cyb3rGlitch:.
30 March 2008
I agree. Handcoding gives you more power, and ends up being easier. Especially when getting it to work in IE. >.<
charonis
30 March 2008
ESPECIALLY IE6.... damn thing should be blown up....
.:Cyb3rGlitch:.
31 March 2008
charonis wrote:
ESPECIALLY IE6.... damn thing should be blown up....

IE should be blown up altogether. :P
charonis
1 April 2008
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
1 April 2008
If Only. My life would be a lot easier if that were to happen

[-o<
tobyobi
2 April 2008
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
2 April 2008
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
2 April 2008
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
2 April 2008
Arghdee wrote:
Speaking of development, that's what TextEdit is for innit?
duh...vim
.:Cyb3rGlitch:.
3 April 2008
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
3 April 2008
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
4 April 2008
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:.
5 April 2008
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
5 April 2008
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:.
5 April 2008
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
22 April 2008
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:.
23 April 2008
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
24 April 2008
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:.
26 April 2008
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
8 July 2008
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:.
8 July 2008
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
9 July 2008
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
Comments have been disabled for this article.

Latest Comments

Latest Poll

Which side are you choosing in the new console wars?



or View results
The Xbox One
  24%
 
The PlayStation 4
  30%
 
A console? Good Lord no - PC for me thanks!
  46%
TOTAL VOTES: 165

Vote now
Ads by Google

From our Partners

PC & Tech Authority Downloads