You are on page 1of 18

Satinderpal Kaur

MBA3(D)

INTRODUCTION TO HTML
HTML is a markup language. It tells the web browser what content to display. HTML
separates "content" (words, images, audio, video, and so on) from "presentation" (the
definition of the type of content and the instructions for how that type of content should be
displayed). HTML uses a pre-defined set of elements to identify content types. Elements
contain one or more "tags" that contain or express content. Tags are surrounded by angle
brackets, and the "closing" tag (the one that indicates the end of the content) is prefixed by a
forward slash.
HTML (Hyper Text Markup Language) is a markup language which consists of tags
embedded in the text of a document. The browser reading the document interprets these
markup tags to help format the document for subsequent display to a reader. However, many
of the decisions about layout are made by the browser. Remember, web browsers are
available for a wide variety of computer systems.
HTML stands for Hyper Text Markup Language. HTML is a language for describing web
pages. HTML is not a programming language, it is a markup language. HTML uses
markup tags to describe web pages. HTML elements form the building blocks of all websites.
HTML allows images and objects to be embedded and can be used to create interactive forms.
It provides a means to create structured documents by denoting structural semantics for text
such as headings, paragraphs, lists, links, quotes and other items. It can embed scripts written
in languages such as JavaScript which affect the behavior of HTML web pages.

The browser thus displays the document with regard to features that the viewer selects either
explicitly or implicitly. Factors affecting the layout and presentation include:

The markup tags used.

The physical page width.

The fonts used to display the text.

The color depth of the display.

HTML is a language for describing web pages.

HTML stands for Hyper Text Markup Language


HTML is a markup language
A markup language is a set of markup tags
The tags describe document content
HTML documents contain HTML tags and plain text
HTML documents are also called web pages
Aesthetically, an HTML website can look just as appealing as a website using the more
advanced technologies. It is easy to be swayed by the desire to be 'up with the times'.

Chandigarh Business School

Page 1

Satinderpal Kaur

MBA3(D)

However, getting yourself a well made HTML website may be a wiser and more progressive
decision for your business than getting a high-tech website.

FEATURES OF HTML
1. HTML is easy to use and understand
Almost anyone in the web development business would know HTML be it a freelancer or
a large agency. If at any point in time you need to hire the services of a different web design
firm or professional for making changes or updates to your website, it would be relatively
easy to find cost-effective and affordable solution providers who can make the changes you
need to your website.
2. All browsers support HTML
Almost if not all browsers support HTML. Certainly more browsers support HTML than
any other web programming language. As a result, when you build a website using HTML, it
would show up on most browsers around the world, as long as the programmer takes care to
optimize the website for the most commonly used browsers. Optimizing an HTML based
website for browser compatibility is neither difficult nor complex.
3. HTML and XML syntax is very similar
Today, XML is increasingly being used for data storage. The similarity of syntax between
HTML and XML means that it is easier and seamless working between the two platforms.
4. HTML is free
A major advantage of HTML is that it is free. You do not need any software for HTML, no
plug-ins are needed and it means that you can save considerably on your website
development cost. Even with open source content management systems, all the plug-ins that
you may need are not always free.
5. Most development tools support HTML
Whether it is FrontPage, Dream Weaver or any other programming tool, there are more web
development tools that allow you to create HTML based websites, than any other web
programming language.
6. HTML is most search engine friendly
Of all the web programming languages, HTML is the most search engine friendly. Creating
SEO compliant websites using HTML is significantly easier than any other programming
language. HTML causes the least SEO complications and provides the greatest flexibility
when trying to build an SEO compliant website. As long as you have taken care to ensure
Chandigarh Business School

Page 2

Satinderpal Kaur

MBA3(D)

your HTML code is clean and validated, an HTML website is easiest to read and access for
search engine crawlers. This reduces crawling time and improves page load time, helping
your website perform better in search results.

WHAT ARE HTML TAGS?


When a web browser displays a page such as the one you are reading now, it reads from a
plain text file, and looks for special codes or "tags" that are marked by the < and > signs.
The general format for a HTML tag is:

TYPES OF TAGS:-

1. Open/ended tag :-[<br/>,<link/>,<img/>]


2. Start/Close tag:- [<body>,</body>,<title>,</title>]

3.

<strike>..<strike> or <s>.. </s> Tag

The HTML strike tag renders a <strike>strike</strike> (or <strike>line</strike>)


through the middle of the text.
Result:
The HTML strike tag renders a strike (or line) through the middle of the text.
Note:- <br/> is only used in earlier version but now <br > only used

4. Header tags:-[<h1>,<h2>..<h6>]

<tag_name>string of text</tag_name>
As an example, the title for this section uses a header tag:
<h3>What are HTML tags?</h3>
HTML tags may tell a web browser to bold the text, italicize it,make it into a
header, or make it be a hypertext link to another web page. It is important to note
that the ending tag,
</tag_name> contains the "/" slash character. This "/" slash tells a web browser to
stop tagging the text.

Chandigarh Business School

Page 3

Satinderpal Kaur

MBA3(D)

EXAMPLE:-

<html>
<head>
<title>Volcano Web</title>
</head>
<!-- written for the Writing HTML Tutorial
by Lorrie Lava, February 31, 1999 -->
<body>
In this lesson we will use the Internet to research information on volcanoes and then write a
report on our results.
</body>
</html>

Save the document as a file called "volc.html"

The <title> tag is used to uniquely identify each document and is also displayed in
the title bar of the browser window. The <title>...</title> tag is located in the
<head>...</head> portion and thus will not be visible on the screen.

The text between <html> and </html> describes the web page.The text between
<body> and </body> is the visible on page content.

The text between <html> and </html> describes the web page.The text between
<body> and </body> is the visible page content

Chandigarh Business School

Page 4

Satinderpal Kaur

MBA3(D)

STEP TO CREATE WEB PAGE


Step 1: Open Notepad

To open Notepad in Windows 7 or earlier:


Click Start (bottom left on your screen). Click All Programs. Click Accessories.
Click Notepad.
To open Notepad in Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen). Type
Notepad.

Step 2: Write Some HTML


Write or copy some HTML into Notepad.
Example:<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Chandigarh Business School

Page 5

Satinderpal Kaur

MBA3(D)

Step 3: Save the HTML Page


Save the file on your computer.
Select File -> Save as in the Notepad menu.
When saving an HTML file, use either the .html or the .html file extension. There is no
difference; it is entirely up to you.

Step 4: View HTML Page in Your Browser


Double-click your saved HTML file, and the result will look much like this:-

Chandigarh Business School

Page 6

Satinderpal Kaur

MBA3(D)

1) Create a welcome screen using html tags.


<html>
<head>
<body>
<p>welcome to my page</p>
</body>
</head>
</html>

Output:View HTML Page in Browser


Double-click on saved HTML file, and the result will look much like this:-

Chandigarh Business School

Page 7

Satinderpal Kaur

MBA3(D)

2) Create a web page using list tag


(a) Create a web page using ORDERED LIST
<html>
<head>
<br><b>welcome to my page</b></br>
<ol type=A START=7>
<li>chandigarh
<li>himachal
<li>haryana
</Ol>
</head>
</html>
Output:View HTML Page in Browser
Double-click on saved HTML file, and the result will look much like this:-

Chandigarh Business School

Page 8

Satinderpal Kaur

MBA3(D)

b) Create a web page using UNORDERED LIST


<html>
<head>
<br><b>welcome to my page</b></br>
<ul type=square>
<li>chandigarh
<li>himachal
<li>haryana
</ul>
</head>
</html>
Output:View HTML Page in Browser
Double-click on saved HTML file, and the result will look much like this:

Chandigarh Business School

Page 9

Satinderpal Kaur

MBA3(D)

3) Create a web page using image tag


<html>
<head>
<body style="background-color:yellow">
<h3 style="background-color:green">this is a heading</h3>
<p style="background-color:red">this is a paragraph</p>
<img src="chrysanthemum.jpg"/>
</body>
</head>
</html>
Output:View HTML Page in Browser
Double-click on saved HTML file, and the result will look much like this:

4) Create a web page using formatting tag


<html>
Chandigarh Business School

Page 10

Satinderpal Kaur

MBA3(D)

<head>
<body style="background-color:yellow">
<h1 style="font-family:verdana;color:red">A heading</h1>
<p sytle="font-family:arial;color:white;font-size:30px">A paragraph</p>
<img src="chrysanthemum.jpg"/>
</body>
</head>
</html>
Output:View HTML Page in Browse
Double-click on saved HTML file, and the result will look much like this:

5) Create a web page using ancher tag


<html>
<head>
Chandigarh Business School

Page 11

Satinderpal Kaur

MBA3(D)

<body>
<p>welcome to page</p>
<a href="satinder.html"target="_blank">link to next page</a>
</body>
</head>
</html>
Output:View HTML Page in Browser
Double-click on saved HTML file, and the result will look much like this. When we click on
the link to next page, then next page will be open.

After click on link we can see following:-

Chandigarh Business School

Page 12

Satinderpal Kaur

MBA3(D)

6) Create a web page using table tag


<html>
Chandigarh Business School

Page 13

Satinderpal Kaur

MBA3(D)

<head>
<title>my document</title>
</head>
<body>
<h3 align="centre" font-size:"20%">chandigarh university</h3>
<table align="centre" border="1" height="50%" width="50%">
<tr bgcolor="red" align="left">
<th>name</th>
<th>class</th>
<th>rollno</th>
</tr>
<tr bgcolor="green">
<td>satinder</td>
<td>mba</td>
<td>589</td>
</tr>
<tr bgcolor="pink">
<td>sunita</td>
<td>mba</td>
<td>608<td>
</tr>
</table>
</html>

Output:View HTML Page in Browser


Chandigarh Business School

Page 14

Satinderpal Kaur

MBA3(D)

Double-click on saved HTML file, and the result will look much like this:-

7) Create a web page using top frameset


<html>
<head>
Chandigarh Business School

Page 15

Satinderpal Kaur

MBA3(D)

<title>Frameset page</title>
</head>
<frameset rows= "35%,*">
<frame src="satinder.html"/>
<frameset cols= "30%,35%">
<frame src="welcomer.html"/>
<frame src="welcomel.html"/>
</frameset>
</html>
Output:View HTML Page in Browser
Double-click on saved HTML file, and the result will look much like this:

8) Create a admission form using form tag in HTML


<form action="frameset rows1 2 column.html" method="get">
<fieldset>
<legend>personalia:</legend></br>
Chandigarh Business School

Page 16

Satinderpal Kaur

MBA3(D)

First Name:<input type="text" size="30"/></br>


Last Name:<input type="text" size="30"/></br>
Graduation %:<input type="text" size="30"/></br>
Phone No.:<input type="text" size="30"/></br>
Email:<input type="text" size="30"/></br>
Date of Birth:<input type="text" size="30"/></br>
<input type="submit" value="Submit"/>
<input type="reset" value="Reset"/>
</form>
Output:View HTML Page in Browser

After click on submit button we can see following:-

Chandigarh Business School

Page 17

Satinderpal Kaur

Chandigarh Business School

MBA3(D)

Page 18

You might also like