Beginners Guide: Introduction to HTML

**carsey** · 09-26-2008, 10:23 AM

What is HTML?

HTML is the most common website programming language available. If you visiting a website, then there is a very high chance that it will have been written in HTML.

HTML stands for Hyper Text Markup Language.
The language itself consists simply of small markup tags which instruct a web browser such as Internet Explorer or Firefox, how to display the webpage.

A HTML webpage must always have a extension of .HTML or .HTM otherwise web browsers will not recognize that it has to load the webpage formats.

So, now we know the basics of what HTML stands for and what it is used for. We will now move on to how you can create your own simple webpage using HTML.

One of the easiest ways you can begin writing HTML is by using notepad that in integrated into the Windows Operating System. Other methods involve using Macromedia Dreamweaver or notepad++ . There are many other editors available on the market.

For the purpose of this walkthrough, we will be using Notepad.

Open Notepad. Click Start > All Programs > Accessories > Notepad.

The first line of code that we will need will be <html>. This markup tag will instruct your browser that it should begin reading the code and is the beginning of the HTML markup.

Type the rest of the following code into notepad under the <html> tag:

HTML Code:

<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage, which uses HTML. <b>This text is bold</b>
</body
</html>

Explanation of Markup Tags:

<html>: This defines the beginning of the HTML Document.
<head>: This is the header information.
<title>: This shows the title of the webpage in the bar along the top of the screen
</title>: Ends the title tag.
</head>: Ends the head tag.
<body>: This is the content of the actual webpage. This is shown in the web browser's content area.
<b>: This tag makes the text bold. </b> Closes the bold tag.
</body>: This tells the browser that there is no further content to be displayed in the content area.
</html>:Instructs the browser that there is no further HTML present.

Now, we will see what effect this code has in a web browser. Save the document. We need to make sure that the extension is .html or .htm otherwise our browser will not load it.

File > Save As... and enter mypage.html in the File Name Field.

Open your favourite web browser and Click File > Open and search for the location you saved the file we have just created. Double click it to open it. Alternatively, you can Right-Click the icon and expand Open-With: and select the Web Browser you prefer.

It should be now shown in the browser.

Congratulations. You have just created your first webpage!

**TheAtheist** · 10-11-2008, 03:35 AM

Nicely written article Carsey. I must admit however, as someone who has dabbled in both advanced HTML and other online coding syntaxes, i found your article hard to analyse as I knew the stuff too well... if you get my drift( I found it hard to check how easy it would be for a complete novice to use the article basically) But thats nothing against the article however, and i checked the code and it works fine(both by sight and by actually testing!!!)

One thing i think would really make the article a bit better, is if it covered a bit of a wider base of HTML. I'm not talking about anything especially complex, but just something a bit more complex, such as colour, images etc - just so someone could, if they wished, write a very basic website for themselves.

One other little thing i take issue with, as its a bit out of date is this

"If you visiting a website, then there is a very high chance that it will have been written in HTML." - in this new age of web 2.0 pages, this isnt strictly true anymore, although they often have a backbone of HTML to ensure anyone can get onto their site. I realise the statement you made is less ambigious, but.....

Regards,
Joe

**carsey** · 10-11-2008, 07:14 AM

Hi TheAtheist,

Thanks for the comments. I do have plans to add more features of HTML later on. I'd make it sort of like a online tutorial so it gets more advanced as you get further on.

**TheAtheist** · 10-17-2008, 10:10 AM

Nice one, like that concept. Just another quick comment: At the end of the coding bit of this article, when you say to open the page in the browser, possibly add a small paragraph illustrating key stumbling blocks in case of errors, so users gain an understanding of the importance of such things as closing all tags and case sensitivity?

**dm01** · 11-08-2008, 06:18 PM

Pretty good so far. I'm currently exploring the idea of a basic XHTML with CSS article elsewhere on the site.

Your forgot to mention the right-click->Open With <Web Browser> option.

**carsey** · 01-08-2009, 06:43 PM

Updated the opening process of viewing coding in a browser.

Also tried to creat a error by leaving a closing tag open, but firefox seemed to not display the error and showed the correct formatting.

Will add linking to different pages now.

**TheAtheist** · 02-25-2009, 12:43 PM

Quote:

Originally Posted by carsey

Also tried to creat a error by leaving a closing tag open, but firefox seemed to not display the error and showed the correct formatting.

Would you like me to see if i can put the error in for you using opera and see if it corrects it as firefox does as i think this would make the article very useful if you could explain how to check for such errors in their own code.

**carsey** · 02-25-2009, 08:00 PM

Yep, that would be a great help. Thanks

**TheAtheist** · 02-26-2009, 02:46 AM

error has been introduced on the closing body tag in the code for you Carsey.

**asidman** · 02-27-2009, 04:05 PM

Great article, very nice intro to HTML

Quote:

If you visiting a website, then there is a very high chance that it will have been written in HTML.

Maybe rephrase it to something like: Most websites are either entirely created using HTML or have HTML as the foundation for the site.
Or similar.

09-26-2008, 10:23 AM	#1 (permalink)
carsey Moderator, TSF Articles Join Date: Aug 2006 Location: Hunwick, Co. Durham England Posts: 10,678 OS: XP Pro SP3 My System	Beginners Guide: Introduction to HTML What is HTML? HTML is the most common website programming language available. If you visiting a website, then there is a very high chance that it will have been written in HTML. HTML stands for Hyper Text Markup Language. The language itself consists simply of small markup tags which instruct a web browser such as Internet Explorer or Firefox, how to display the webpage. A HTML webpage must always have a extension of .HTML or .HTM otherwise web browsers will not recognize that it has to load the webpage formats. So, now we know the basics of what HTML stands for and what it is used for. We will now move on to how you can create your own simple webpage using HTML. One of the easiest ways you can begin writing HTML is by using notepad that in integrated into the Windows Operating System. Other methods involve using Macromedia Dreamweaver or notepad++ . There are many other editors available on the market. For the purpose of this walkthrough, we will be using Notepad. Open Notepad. Click Start > All Programs > Accessories > Notepad. The first line of code that we will need will be <html>. This markup tag will instruct your browser that it should begin reading the code and is the beginning of the HTML markup. Type the rest of the following code into notepad under the <html> tag: HTML Code: <head> <title>Title of page</title> </head> <body> This is my first homepage, which uses HTML. <b>This text is bold</b> </body </html> Explanation of Markup Tags: <html>: This defines the beginning of the HTML Document. <head>: This is the header information. <title>: This shows the title of the webpage in the bar along the top of the screen </title>: Ends the title tag. </head>: Ends the head tag. <body>: This is the content of the actual webpage. This is shown in the web browser's content area. <b>: This tag makes the text bold. </b> Closes the bold tag. </body>: This tells the browser that there is no further content to be displayed in the content area. </html>:Instructs the browser that there is no further HTML present. Now, we will see what effect this code has in a web browser. Save the document. We need to make sure that the extension is .html or .htm otherwise our browser will not load it. File > Save As... and enter mypage.html in the File Name Field. Open your favourite web browser and Click File > Open and search for the location you saved the file we have just created. Double click it to open it. Alternatively, you can Right-Click the icon and expand Open-With: and select the Web Browser you prefer. It should be now shown in the browser. Congratulations. You have just created your first webpage! __________________ Submit New Articles Here Last edited by TheAtheist; 02-26-2009 at 02:44 AM. Reason: closing tag left open to cause error

10-11-2008, 03:35 AM	#2 (permalink)
TheAtheist Mentor, Articles Team Join Date: May 2006 Location: Portishead, Bristol Posts: 1,312 OS: xp sp3 My System	Re: Beginners Guide: Introduction to HTML Nicely written article Carsey. I must admit however, as someone who has dabbled in both advanced HTML and other online coding syntaxes, i found your article hard to analyse as I knew the stuff too well... if you get my drift( I found it hard to check how easy it would be for a complete novice to use the article basically) But thats nothing against the article however, and i checked the code and it works fine(both by sight and by actually testing!!!) One thing i think would really make the article a bit better, is if it covered a bit of a wider base of HTML. I'm not talking about anything especially complex, but just something a bit more complex, such as colour, images etc - just so someone could, if they wished, write a very basic website for themselves. One other little thing i take issue with, as its a bit out of date is this "If you visiting a website, then there is a very high chance that it will have been written in HTML." - in this new age of web 2.0 pages, this isnt strictly true anymore, although they often have a backbone of HTML to ensure anyone can get onto their site. I realise the statement you made is less ambigious, but..... Regards, Joe __________________ Submit New Articles "Freedom of thought is best promoted by the gradual illumination of men's minds, which follows from the advance of science" - Darwin Join the TSF folding team - Team 85015

10-11-2008, 07:14 AM	#3 (permalink)
carsey Moderator, TSF Articles Join Date: Aug 2006 Location: Hunwick, Co. Durham England Posts: 10,678 OS: XP Pro SP3 My System	Re: Beginners Guide: Introduction to HTML Hi TheAtheist, Thanks for the comments. I do have plans to add more features of HTML later on. I'd make it sort of like a online tutorial so it gets more advanced as you get further on. __________________ Submit New Articles Here

10-17-2008, 10:10 AM	#4 (permalink)
TheAtheist Mentor, Articles Team Join Date: May 2006 Location: Portishead, Bristol Posts: 1,312 OS: xp sp3 My System	Re: Beginners Guide: Introduction to HTML Nice one, like that concept. Just another quick comment: At the end of the coding bit of this article, when you say to open the page in the browser, possibly add a small paragraph illustrating key stumbling blocks in case of errors, so users gain an understanding of the importance of such things as closing all tags and case sensitivity? __________________ Submit New Articles "Freedom of thought is best promoted by the gradual illumination of men's minds, which follows from the advance of science" - Darwin Join the TSF folding team - Team 85015

11-08-2008, 06:18 PM	#5 (permalink)
dm01 Moderator: Design Join Date: Oct 2006 Location: Richmond, B.C.; Canada Posts: 1,419 OS: Windows XP [Version 5.1.2600] SP3 \| Ubuntu Jaunty Jackalope \| Windows 7 BETA My System	Re: Beginners Guide: Introduction to HTML Pretty good so far. I'm currently exploring the idea of a basic XHTML with CSS article elsewhere on the site. Your forgot to mention the right-click->Open With <Web Browser> option. __________________ Validate your Markup Validate your CSS Notepad++ Please use [html], [php], and [code] when posting code or markup. I do not help by Private Message or e-mail. If for some reason I have over-looked a reply to a thread that I have previously replied to, then send me a message.

01-08-2009, 06:43 PM	#6 (permalink)
carsey Moderator, TSF Articles Join Date: Aug 2006 Location: Hunwick, Co. Durham England Posts: 10,678 OS: XP Pro SP3 My System	Re: Beginners Guide: Introduction to HTML Updated the opening process of viewing coding in a browser. Also tried to creat a error by leaving a closing tag open, but firefox seemed to not display the error and showed the correct formatting. Will add linking to different pages now. __________________ Submit New Articles Here

02-25-2009, 08:00 PM	#8 (permalink)
carsey Moderator, TSF Articles Join Date: Aug 2006 Location: Hunwick, Co. Durham England Posts: 10,678 OS: XP Pro SP3 My System	Re: Beginners Guide: Introduction to HTML Yep, that would be a great help. Thanks __________________ Submit New Articles Here

02-26-2009, 02:46 AM	#9 (permalink)
TheAtheist Mentor, Articles Team Join Date: May 2006 Location: Portishead, Bristol Posts: 1,312 OS: xp sp3 My System	Re: Beginners Guide: Introduction to HTML error has been introduced on the closing body tag in the code for you Carsey. __________________ Submit New Articles "Freedom of thought is best promoted by the gradual illumination of men's minds, which follows from the advance of science" - Darwin Join the TSF folding team - Team 85015