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: 4 stars4 stars4 stars4 stars4 stars / 77
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

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

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




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