ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

HTML Tutorial

Updated on July 4, 2009

Your first lesson in HTML in ten easy steps

I will show you how easy it is to write HTML code and after each step you will view the page in a web browser.

Looking at HTML code is rather daunting for the uninitiated. But this used to be the ONLY way a web page was constructed. Nowadays, and for quite a while in fact, we have HTML Editing programs which makes it a lot easier.

Understanding HTML is still beneficial. You can look at another persons source code and see how they got a particular effect or what they're doing and how they're doing it. Also you might need to manually insert a line of HTML code to use something like a hit counter. Or insert meta tags or do a quick change.

And a person who typically uses HTML ('coding in the raw') will usually create a site that will download a lot faster than someone who made it in an HTML Editor. That's because they have control over every single character saved in that page. Unfortunately a HTML Editor program will be a little messier. This mess results in a larger file size.

So in the interests of ancient history we are going to play around with a little bit of HTML.

Step 1

Open up NotePad (for PC) or SimpleText (for MAC) but don't use a word processor (they have an autoformating function that plays havoc with the code).

You don't need to open the text doc to full screen. It's best to adjust the size so you can have this hub open and you're able to read it, and you can type in the text doc at the same time. And I suggest you actually type it, don't copy and paste. You'll have a far bigger feeling of satisfaction and sense of accomplishment by getting your hands 'dirty'. Trust me on that.

Type the following (but no need to type the numbers on the left hand side):

<html>
<head>
</head>
<body>




</body>
</html>

Step 1 Notes

The html tags are informing the browser "this is a HTML page!".

The head tags... I'll discuss them further in future hub. For now we'll just leave them as is.

The body tags is where the 'stuff' is going to happen.

With me so far? See that technical term I used there? Stuff!

Step 2

Save the document to your desktop. Name it prac.html

Make sure it says prac.html not prac.html.txt

Step 3

Type in this bit of text then save.

<html>
<head>
</head>
<body>
this is a html document



</body>
</html>

Step 4

Double click the html file you've made. It should open in your default browser.

You will see the words this is a html document. But no tags. The browser reads the tags and displays the writing as per the tags instructions. So far we haven't actually added any tags that directly effect the text being displayed. But we will in a moment.

Step 5

Type in these tags then save...

Make sure you save!

<html>
<head>
</head>
<body>
this is a html document<br>
<font size="+2">change the font size</font><br>


</html>
</body>

The <br> creates a line break space. If you don't put that in it'll just stick the next line straight onto the end of the previous one.

<font> tags can do a variety of things, like change the color, style and in this case the size.

Step 6

Click on refresh/reload on your web browser to see the changes.

Step 7

Add some color.

This is where I've stumped Australians in the past. I'll write it on the board and within moments of them doing it they'll tell me the color hasn't changed. And that's because they've assumed I've spelled it incorrectly. So it's the Americanized 'color' and not 'colour'.

<html>
<head>
</head>
<body>
this is a html document<br>
<font size="+2">change the font size</font><br>
<font color="#3333FF">change the font colour</font><br>

</body>
</html>

Click on refresh/reload on your web browser to see the changes.

Step 8

We're going to add another line and change the font style.

<html>
<head>
</head>
<body>
this is a html document<br>
<font size="+2">change the font size</font><br>
<font color="#3333FF">change the font colour</font><br>
<i>change the font style</i><br>
</body>
</html>

Click on refresh/reload on your web browser to see the changes.

Step 9

Lets change things up!

Change <font size="+2"> to <font size="+4"> then hit refresh.

Change the i in <i> and </i> to a b then hit refresh. See what you've done there? You've made it bold.

Change the b in <b> and </b> to a u then hit refresh. See what you've done there? You've made underlined it.

If you were to have <u><b><i>change the font style</i></b></u> it would be unlined, bolded and italicized.

Change the 3333FF in <font color="#3333FF"> to FFFF99 then hit refresh. Then change it to CC0000 and hit refresh... C0C0C0... CC33CC... 00CC00...

Step 10

Now let's have a look at the original code again.

<html>
<head>
</head>
<body>
this is a html document<br>
<font size="+2">change the font size</font><br>
<font color="#3333FF">change the font colour</font><br>
<i>change the font style</i><br>
</body>
</html>

Everything that is stuck between the arrowed brackets is the HTML code.

Everything in between is the writing shown in the web browser.

And that's how easy HTML is.

If you were to view the source of any HTML page and went through and deleted all the information (code) that was within and including the arrow brackets, you'd be left with the content you read on the page.

Congratulations on learning a new language!

You don't actually have to use this new found talent to create webpages from scratch. Dreamweaver is an excellent HTML Editor. NVU is a free one. Avoid Microsoft Frontpage. That thing creates code that I have no idea what the hell is going on (if you remove this so called 'code' the page will still function properly, and be as little as 1/10th the original file size).

The important thing is that you are able and you very well should open up the source code when you're creating a webpage in an HTML editor every chance you get. See what the WYSIWYG (What You See Is What You Get interface) is producing in the background. This gets particularly interesting when you start making tables.

For me the benefit of becoming conversant in HTML code is that there were often times it was quicker for me to go straight in the source code and add or remove things in Notepad than what it would have been to do in Dreamweaver. Or when looking at a students webpage, sometimes they may have added a few too many font tags over font tags and a span tag and the hyperlink isn't working properly resulting in no hover effect. No amount of WYSIWYG editing is going to fix that up. But as soon as you see it in the source code it's easy to clean up the mess.

The other thing is from what I've learned in HTML has enabled me to hack in small changes to templates in Wordpress, phpBB and other Content Management Systems.

By gradually exposing yourself to source code you'll slowly, and without much effort at all, learn a thing or two about HTML. And soon enough, without even realizing it, you'll be fluent in a second language (even if it is a geek one).

Comments

    0 of 8192 characters used
    Post Comment

    • Victoria Stephens profile image

      Victoria Stephens 

      6 years ago from London

      Hi darkside,

      Well done on the html tutorial. I have found html so useful since learning it. Everything from building my own site to tweaking other pages. It's a brilliant help to anyone that wants to have control over their own work.

      Best wishes.x

    • darkside profile imageAUTHOR

      Glen 

      9 years ago from Australia

      Thanks Tim.

      Though while font size=+2 does work and font size="+2" is a little more correct, you'll find that font-size="+2" doesn't work because of the hyphen that you've got in there.

    • profile image

      Aqeel Saeed 

      9 years ago

      Yesterday i was with my friend and was trying to understand what is html but could not follow what he was telling but now i have learned. thnks.

    • profile image

      Tim The UWN 

      9 years ago

      Thanks a million for this tutorial,im not saying this to get my comment count up ,but so i can give you feedback...

      It would be betterif you used

      font-size="2pt"

      instead of

      font-size=2pt

      Thanks,http://www.ultimatewebnet.com

    • prasetio30 profile image

      prasetio30 

      9 years ago from malang-indonesia

      thanks for tutorial. It wa great.

    • mayhmong profile image

      mayhmong 

      9 years ago from North Carolina

      That brings back good high school memories. I wish we could play with some html code on hubpage. I love making every pictures and words colorful and rotate it over and over and over and...you get my point?

    • Coach Tim profile image

      Coach Tim 

      9 years ago from Los Angeles, CA

      As always, you're really good at this stuff...thanks for sharing!

    • Kmadhav profile image

      Kmadhav 

      9 years ago from New delhi

      good html tutorial with screenshots ......nice hub darkside

    • Gypsy Willow profile image

      Gypsy Willow 

      9 years ago from Lake Tahoe Nevada USA , Wales UK and Taupo New Zealand

      OOOOOOhhhhh I understood it! thanks for the lesson, Darkside! Can I call myself a Geek now? Thanks, that was interesting.

    • rb11 profile image

      rb11 

      9 years ago from Las Vegas

      The message of your hub is quite good. Learning just a few tweaks here and there will allow you to jazz up existing templates and improve your visitors viewing quite a bit. I have used the following site for just this purpose

      http://www.quackit.com/html/codes/html_link_code.c...

      Good Hub....Regards

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)