basics of html.pdf

7/25/2019 Basics of HTML.pdf

1/15

By. Narasimha Sir Sathya Technologies

Sathya Technologies, Ameerpet, Hyderabad. Phone: 040-65538958, 65538968, 65538978.

HTML asics

By Mr.Narasimha


2/15



HTML Basics

Introduction

HTML stands for Hypertext Markup Language, and it is the most widely used language to write

Web Pages. As its name suggests, HTML is a markup language.

Hypertextrefers to the way in which Web pages (HTML documents) are linked together.

When you click a link in a Web page, you are using hypertext.

Markup Languagedescribes how HTML works. With a markup language, you simply

"mark up" a text document with tags that tell a Web browser how to structure it to

display.

Originally, HTML was developed with the intent of defining the structure of documents like

headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information betweenresearchers.

All you need to do to use HTML is to learn what type of markup to use to get the results youwant.

Creating HTML Document:

Creating an HTML document is easy. To begin coding HTML you need only two things: a

simple-text editor and a web browser. Notepad is the most basic of simple-text editors and youwill probably code a fair amount of HTML with it.

You can use ourHTML Online Editor to learn HTML. Here are the simple steps to create a basic

HTML document:

Open Notepad or another text editor.

At the top of the page type .

On the next line, indent five spaces and now add the opening header tag: .

On the next line, indent ten spaces and type .

Go to the next line, indent five spaces from the margin and insert the closing header tag:

. Five spaces in from the margin on the next line, type.

Now drop down another line and type the closing tag right below its mate: .

Finally, go to the next line and type .

In the File menu, choose Save As.

In the Save as Type option box, choose All Files.

Name the file template.htm.
http://www.tutorialspoint.com/html/html_editor.htmhttp://www.tutorialspoint.com/html/html_editor.htm


3/15



Click Save.

You have basic HTML document now, to see some result put the following code in title andbody tags.

This is document titleThis is a heading

Document description goes here.....

Now you have created one HTML pageand you can use a Web Browser to open this HTML file

to see the result. Hope you understood that Web Pages are nothing but they are simple HTML

files with some content which can be rendered using Web Browsers.

NOTE: One HTML file can have extension as .htmor .html. So you can use either of thembased on your comfort.

HTML Document Structure:

An HTML document starts and ends with and >/html> tags. These tags tell the browserthat the entire document is composed in HTML. Inside these two tags, the document is split intotwo sections:

The ... elements, which contain information about the document such astitle of the document, author of the document etc. Information inside this tag does not

display outside.

The ... elements, which contain the real content of the document that yousee on your screen.

HTML Tags and Elements:

HTML language is a markup language and we use many tags to markup text. In the aboveexample you have seen , etc. are called HTML tags or HTML elements.

Every tag consists of a tag name, sometimes followed by an optional list of tag attributes , allplaced between opening and closing brackets (< and >). The simplest tag is nothing more than aname appropriately enclosed in brackets, such as and . More complicated tags contain

one or more attributes , which specify or modify the behavior of the tag.

According to the HTML standard, tag and attribute names are not case-sensitive. There's no

difference in effect between , , , or even ; they are all


4/15



equivalent. But with XHTML, case is important: all current standard tag and attribute names are

in lowercase.

The basic structure for all HTML documents is simple and should include the following

minimum elements or tags:

- The main container for HTML pages

- The container for page header information

- The title of the page

- The main body of the page

Now we will explain each of these tags one by one. In this chapter you will find the terms

element and tag are used interchangeably.

The Element:

The element is the containing element for the whole HTML document. Each HTMLdocument should have one and each document should end with a closing tag.

Following two elements appear as direct children of an element:

As such, start and end HTML tags enclose all the other HTML tags you use to describe the Web

page.

The Element:

The element is just a container for all other header elements. It should be the first thingto appear after the opening tag.

Each element should contain a element indicating the title of the document,

although it may also contain any combination of the following elements, in any order:

The tag is used to include CSS rules inside the document. CheckHTML Styletag.

The tag is used to include JAVAScript or VBScript inside the document. Check

HTML Script tag. The tag used to specify a title for every page that you write inside the

element

You should specify a title for every page that you write inside the element. This elementis a child of the element). It is used in several ways:

It displays at the very top of a browser window.
http://www.tutorialspoint.com/html/html_style_tag.htmhttp://www.tutorialspoint.com/html/html_style_tag.htmhttp://www.tutorialspoint.com/html/html_script_tag.htmhttp://www.tutorialspoint.com/html/html_script_tag.htmhttp://www.tutorialspoint.com/html/html_style_tag.htmhttp://www.tutorialspoint.com/html/html_style_tag.htm


5/15



It is used as the default name for a bookmark in browsers such as IE and Netscape.

Its is used by search engines that use its content to help index pages.

Therefore it is important to use a title that really describes the content of your site. The

element should contain only the text for the title and it may not contain any other elements.

The Element:

The element appears after the element and contains the part of the Web pagethat you actually see in the main browser window, which is sometimes referred to as body

content.

A element may contain anything from a couple of paragraphs under a heading to more

complicated layouts containing forms and tables.

Most of what you will be learning in this and the following five chapters will be written between

the opening tag and closing tag.

Putting all together:

Now if we will put all these tags together, it will constitute a complete HTML document asfollows:

HTML Basic tags

This is a paragraph tag.

HTML Attributes

Attributes are another important part of HTML markup. An attribute is used to define the

characteristics of an element and is placed inside the element's opening tag. All attributes aremade up of two parts: a name and a value:

The nameis the property you want to set. For example, the element in theexample carries an attribute whose name is face, which you can use to indicate which

typeface you want the text to appear in.

The valueis what you want the value of the property to be. The first example wassupposed to use the Arial typeface, so the value of the faceattribute is Arial.


6/15



The value of the attribute should be put in double quotation marks, and is separated from the

name by the equals sign. You can see that a color for the text has been specified as well as the

typeface in this element:

Many HTML tags have a unique set of their own attributes. These will be discussed as each tag

is introduced throughout the chapter. Right now we want to focus on a set of generic attributesthat can be used with just about every HTML Tag in existence.

Font Tag

You can set any font you like using faceattribute but be aware that if the user viewing the page

doesn't have the font installed, they will not be able to see it. Instead they will default to TimesNew Roman of your font with size attribute. See below few examples on using different font

face

You can set the size of your font with size attribute. The range of accepted values is from

1(smallest) to 7(largest). The default size of a font is 3.

You can set any font color you like using colorattribute. You can specify the color that you want

by either the color name or hexadecimal code for that color.

Example:

Times New RomanVerdana

Images in HTML

Images are very important to beautify as well as to depicts many concepts on your web page. Itsis true that one single image is worth than thuasands of words. So as a Web Developer youshould have clear understanding on how to use images in your web pages.

Image Attributes:

Following are most frequently used attributes for tag.

border:sets a border around the image. This will have a value like 1 or 2 etc.

src:specifies URL of the image file.

alt:this is an alternate text which will be displayed if image is missing.


7/15



Linking Documents - The Element:

A link is specified using the element. This element is called anchor tagas well. Anything

between the opening tag and the closing tag becomes part of the link and a user canclick that part to reach to the linked document.

Anchor Attributes:

Following are most frequently used attributes for tag.

href:specifies the URL of the target of a hyperlink. Its value is any valid document URL,absolute or relative, including a fragment identifier or a JavaScript code fragment.

target:specify where to display the contents of a selected hyperlink. If set to "_blank"

then a new window will be opened to display the loaded page, if set to "_top" or"_parent" then same window will be used to display the loaded document, if set to "_self"

then loads the new page in current window. By default its "_self".

title: attribute lets you specify a title for the document to which you are linking. Thevalue of the attribute is any string, enclosed in quotation marks. The browser might use it

when displaying the link, perhaps flashing the title when the mouse passes over the link.

A Simple Example:

Sathya |

Microsoft |

Wipro

Frequently used tags

Tag Description
Break tag to insert new line

Horizontal Ruler to draw a horizontal line

...
To prepare Paragraph in web page
.

.

Heading tags with different font sizes


8/15



To group more than html tag as one unit

HTML Tables

Tables are very useful to arrange in HTML and they are used very frequently by almost all webdevelopers. Tables are just like spreadsheets and they are made up of rows and columns.

You will create a table in HTML/XHTML by using tag. Inside element the table

is written out row by row. A row is contained inside a tag . which stands for table row. Andeach cell is then written inside the row element using a tag . which stands for table data.

Table Heading - The Element:

Table heading can be defined using element. This tag will be put to replace tag which

is used to represent actual data. Normally you will put your top row as table heading as shownbelow, otherwise you can use element at any place:

NOTE:Each cell must, however, have either a or a element in order for the table todisplay correctly even if that element is empty.

Tables Backgrounds

You can set table background using of the following two ways:

Using bgcolor attribute - You can set background color for whole table or just for one

cell.

Using backgroundattribute - You can set background image for whole table or just forone cell.

NOTE:You can set border color also using bordercolorattribute.

Using Table Caption:

The captiontags will serve as a title or explanation and show up at the top of the table. This tagis depracated in newer version of HTML/XHTML.


9/15



Using a Header, Body, and Footer:

Tables can be divided into three portions: a header, a body, and a foot. The head and foot arerather similar to headers and footers in a word-processed document that remain the same for

every page, while the body is the main content of the table.

Example:

Firstname

Lastname

Total Marks

RaviTeja

950

Naveen

Kumar

894

John

Paul

680

Maneesh

Babu

987

The above code will produce the following output:

Firstname Lastname Total Marks

Ravi Teja 950


10/15



Naveen Kumar 894

John Paul 680

Narasimha Rao 987

HTML Lists Formatting

You can list out your items, subjects or menu in the form of a list. HTML gives you three

different types of lists.

- An unordered list. This will list items using bullets

- A ordered list. This will use different schemes of numbers to list your items

Unordered List

You can use typeattribute to specify the type of bullet you like. By default its is a disc.

Following are the possible way:

Hindi

English

Maths

Physics

Hindi

English

Maths

Physics

o Hindio Englisho Mathso Physics

OrderedList

You can use typeattribute to specify the type of numbers you like. By default its is a generic

numbers. Following are the other possible way:

- Upper-Case Numerals.

- Lower-Case Numerals.


11/15



- Lower-Case Letters. - Upper-Case Letters.

I. Hindi

II.

EnglishIII. Maths

IV. Physics

i. Hindi

ii.

Englishiii. Maths

iv. Physics

a. Hindi

b.

Englishc. Maths

d. Physics

A. Hindi

B.

EnglishC. Maths

D. Physics

HTML FORMS

HTML Forms are required when you want to collect some data from the site visitor. For example

registration information: name, email address, credit card, etc.

A form will take input from the site visitor and then will post your back-end application such as

CGI, ASP Script or PHP script etc. Then your back-end application will do required processingon that data in whatever way you like.

Form elements are like text fields, textarea fields, drop-down menus, radio buttons, checkboxes,etc. which are used to take information from the user.

A simple syntax of using is as follows:

form elements like input, textarea etc.

Most frequently used form attributes are:

name:This is the name of the form.

action:Here you will specify any script URL which will receive uploaded data.

method: Here you will specify method to be used to upload data. It can take various

values but most frequently used are GET and POST.

There are different types of form controls that you can use to collect data from a visitor to yoursite.

Text input controls

Buttons

Checkboxes and radio buttons

Select boxes


12/15



File select boxes

Hidden controls

Submit and reset button

HTML Forms - Text Input Controls:

There are actually three types of text input used on forms:

Single-line text input controls:Used for items that require only one line of user input,such as search boxes or names. They are created using the element.

Password input controls:Single-line text input that mask the characters a user enters.

Multi-line text input controls:Used when the user is required to give details that maybe longer than a single sentence. Multi-line input controls are created with the

element.

Single-line text input controls are created using an element whose type attribute has avalue of text.

Following is the list of attributes for tag.

type:Indicates the type of input control you want to create. This element is also used tocreate other form controls such as radio buttons and checkboxes.

name:Used to give the name part of the name/value pair that is sent to the server,

representing each form control and the value the user entered.

value:Provides an initial value for the text input control that the user will see when theform loads.

size:Allows you to specify the width of the text-input control in terms of characters.

maxlength:Allows you to specify the maximum number of characters a user can enter

into the text box.

Password input controls

This is also a form of single-line text input controls are created using an element whosetype attribute has a value of password.

Here is a basic example of a single-line password input used to take user password:

Login :

Password:


13/15



This will produce following result:

Login :

Password :

submit

Multiple-Line Text Input Controls:

If you want to allow a visitor to your site to enter more than one line of text, you should create a

multiple-line text input control using the element.

Here is a basic example of a multi-line text input used to take item description:

Description :

Enter description here...

HTML Forms - Creating Button:

There are various ways in HTML to create clickable buttons. You can create clickable button

using tag.

When you use the element to create a button, the type of button you create is specified

using the type attribute. The type attribute can take the following values:

submit:This creates a button that automatically submits a form.

reset:This creates a button that automatically resets form controls to their initial values.

button: This creates a button that is used to trigger a client-side script when the user

clicks that button.

You can use element to create various buttons. Here is the syntax:

Submit

Reset


14/15



Button

Checkboxes Control:

Checkboxes are used when more than one option is required to be selected. They are created

using tag as shown below.

Here is example HTML code for a form with two checkboxes

Maths Physics

The result of this code is the following form

Maths PhysicsSelect Subject

HTML Forms - Raido box Control:

Radio Buttons are used when only one option is required to be selected. They are created using tag as shown below:

Here is example HTML code for a form with two radio button:

Maths Physics

DropDownList Box Control:

Drop Down Box is used when we have many options available to be selected but only one or two

will be selected..

Here is example HTML code for a form with one drop down box


15/15



MathsPhysics

The result of this code is the following form

Maths

Submit

Following is the list of important attributes of :

name:This is the name for the control.

size:This can be used to present a scrolling list box.

multiple:If set to "multiple" then allows a user to select multiple items from the menu.

Following is the list of important attributes of :

value:The value that is sent to the server if this option is selected.

selected:Specifies that this option should be the initially selected value when the page

loads.

label:An alternative way of labeling options.

HTML Forms - Hidden Controls:

If you will want to pass information between pages without the user seeing it. Hidden form

controls remain part of any form, but the user cannot see them in the Web browser. They should

not be used for any sensitive information you do not want the user to see because the user couldsee this data if she looked in the source of the page.

HTML Forms - Submit and Reset Button:

These are special buttons which can be created using When submit button is clickedthen Forms data is submitted to the back-end application. When reset button is clicked then all

the forms control are reset to default state.