Home arrow HTML arrow HTML Tutorial
HTML

HTML Tutorial


This article is the September contest winner. The author provides a basic tutorial of HTML, with code samples illustrating headings, lists, background colors, using the Frame tag and more.

Author Info:
By: Anand Narayanaswamy
Rating: 3 stars3 stars3 stars3 stars3 stars / 73
October 11, 2004
TABLE OF CONTENTS:
  1. · HTML Tutorial
  2. · Paragraph Tags, Attributes and Headings
  3. · Using Lists
  4. · Indents and Links
  5. · Working with Images
  6. · Working with Tables
  7. · Working with Frames
  8. · Using Forms, Text, Buttons, and Combo Box
  9. · Text Area, Check Box, and Radio Buttons
  10. · Additional Tags
  11. · Drawing Lines, SUB and SUP Tags
  12. · Test Yourself Questions

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
HTML Tutorial
(Page 1 of 12 )

The Basics

HTML stands for Hyper Text Markup Language. It is the language which is used to design and format web pages. You have probably heard of programming languages such as C, C++, Java, and Visual Basic. Each of these languages consists of syntaxes and programming rules. These syntaxes are what programmers call codes. It's important to learn how to write codes using the relevant language. Moreover, you have to strictly adhere to the rules and conventions of that particular language.

In HTML, these syntaxes are called as Tags. Tags are enclosed within angular brackets: < and >. There are lots of predefined tags in HTML, which are used for various purposes. For example, in order to modify a line of text into bold, you apply the bold tag with an opening tag as <B>, then write some lines of text or a paragraph containing some text, and close the tag using the tag </B> as shown in listing 1.

All tags in HTML have to be closed using the syntax </>. But there are some exceptions to this rule, which we will discuss later. You can code your tags as you wish because HTML is not a case sensitive language like C++ and Java.

Structure

Every HTML code needs to be written in a structure which is defined by World Wide Web Consortium. It is not compulsory to follow this structure. However, it is good practice to follow this structure while designing your web pages. Listing 1 shows the structure of a simple HTML page:

Listing 1

<!-- This is the way to apply comments in HTML. This will not
be displayed on the browser -->

    <HTML>  
   <HEAD>
    <TITLE>
    Welcome to HTML
    </TITLE>
    </HEAD>
    <BODY>  
    <!--PAGE CONTENT STARTS HERE-->
    <B>This is your first web page designed using HTML. This line will be printed as your output.</B>
    </BODY>
    </HTML>

Enter the above code using Notepad and save the file as First.htm or First.html. However, you can use your own file name. Now open up your browser Microsoft Internet Explorer (File | Open) or Netscape Navigator (File | Open File) and browse for the file, which you saved. If everything goes well, you will view the output. Whatever is written inside the body tag will be displayed on the browser.

Now try out the following piece of code and observe the results:

Listing 2

    This text will be in Bold
    <B>Welcome to HTML</B><BR>

    This text will be in Italics
    <I>Welcome to HTML</I><BR>

    This text will be Underlined
    <U>Welcome to HTML</U><BR>

<BR> tag denotes Line Break. It creates a new line.


blog comments powered by Disqus
HTML ARTICLES

- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5
- BBC Adopts HTML 5, Mozilla Addresses Issues
- Advanced Sticky Footers in HTML and CSS
- HTML and CSS Sticky Footers
- Strategy Analytics Predicts HTML5 Phones to ...
- HTML5 Guidelines for Web Developers
- Learning HTML5 Game Programming
- More Engaging CSS3 and HTML Background Effec...
- Engaging HTML and CSS3 Background Effects
- More Web Columns with CSS3 and HTML
- Columns with CSS3 and HTML
- Creating Inline-Block HTML Elements with CSS
- Drag and Drop in HTML5: Parsing Local Files

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 10 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials