HTML NOTE

HTML (HYPER TEXT MARKUP LANGUAGE)

• HTML is a language to describe webpages.

• HTML is not a programming language.

• A markup language is a set of markup tags. Ex: <html>…..</html>

• HTML uses markup tags to describe a page.

HTML Tags

• HTML tags are keywords surrounded by angle brackets like < >.

• HTML tags normally comes in pairs. <head>……..</head>

• The opening tag is called start tag and the closing tag is called end tag.

HTML Document

• HTML document describes webpages. It contains HTML tags and plain text.

• HTML documents are also called web pages.

WEB Browsers

The purpose of Web browsers is to read HTML document and display them as web pages. The browser does not display the HTML tags, but uses the tag to interpret the content of the page.

.htm or .html file extenstion

When you save a html document you can use either .htm or .html extension. With new software it is better to use .html extension. Ex: Hello.html

HTML Elements

An HTML element is everything from the start tag to the end tag.

Start Tag Element content End Tag

<p> This is a paragraph </p>

</br>

• An HTML element starts with opening tag and ends with closing tag

• Some HTML elements have empty content i.e </br>

• Empty contents are closed in the start tag itself.

• Most HTML elements can have attributes ex: <a href=”Default.htm”>2

Creating a Web page using HTML:

The document must start with <HTML> tag and end with </HTML>

The next tag we can use <HEAD>……</HEAD> For providing headings

<TITLE>……..</TITLE> Tags are used to provide the title of your webpage

<H1> to <H6> Tags are used to apply various heading styles.

Ex: A sample web page for displaying title and headings

<html>

<head>

<title> MY WEBPAGE </title>

<h1> This is Heading Style 1</h>

<h2> This is Heading Style 2</h>

<h3> This is Heading Style 3</h>

</html>

Applying Font Styles, Color and Alignment:

<p> ……</p> tag is used for starting a paragraph.

We can use the style option for setting font style , color and alignment

Ex: <h2 style=”Font-family:Ariel;color:red;font-size:20;text-align:center”>

Ex:

<html>

<head>

<title> MY FIRST WEBPAGE </title>

<h1 >Alisha Sahu</h1>

<h2 >Rashmi Ranjan</h2>

<h3 >Ayushi Asrani</h3>

<h4 >Rajani Jena</h4>

<h5>Sumitra</h5>

<h6>Minati</h6>

<p><b>This is a bold style</b></p>

<p><i>This is italic style</i></p>

<p><u>This is underline style</u></p>

<p style="font-family:Chiller;color:red;font-size:30;text-align:center">This is a Chiller font with Red Colour</p>

</head>

</html>

BACKGROUND DESIGN:

Background : this property is used to set background image to the webpage

Ex: <body background=”image.jpg”>

Bgcolor : This property is used to set the background color of the webpage.

Text : this property is used to set the text color for whole page.

TEXT FORMATTING TAGS:

<!....... Comments

<br> Line break

<pre> </pre> preformatted text

<b> </b> Bold

<u> </u> Underline

<i> </i> Italic

<strike> </strike> Strikethrough

<sub> </sub> Subscript

<sup> </sup> Superscript

<big> </big> Large Font size

<small> </small> Smaller Font size

LISTS:

There are 2 types of lists in HTML

• Ordered List (serial numberings i.e 1,2,3…A,B,C, I,II, III etc)

• Un ordered List (bullets )

Ordered Lists:

The ordered list is represented by the following tags

Each item in the list is given a <LI> tag

Type Attribute:

1 Numbers 1,2,3…

A A,B,C….

a a,b,c…

I I,II,III

i i,ii,iii

ex:

<li> Item 1

<li> Item 2

<li> Item 3

……………..

</OL>

Heading in a List:

<LH> This tag is used to provide Headings for a list

Design the following Page:

Department of Computer Science

• B.Sc Computer Sceince

• M.Sc Computer Science

• P.G.D.C.A

Department of Mathematics

• B.Sc Mathematics

• M.Sc Mathematics

• M.Phil Mathematics

Department of Zoology

• B.Sc Zoology

• M.Sc Zoology

• M.Phil Zoology

• Ph.D Zoology

UNORDERD LISTS:

The unordered list contains bullets or symbols.

It is represented by the <UL>…..</UL> tag

And each list item is given <LI> tag.

The bullet is of three types:

• Disc

• Circle

• Square

Ex: Design the following page:

<html>

<body>

The Department of computer science offers the following courses

<li> B.Sc computer Science

<li>M.C.A

</UL>

<h6> Evening Courses</h6>

<li>B.Sc Computer Science

<li>M.Sc Computer Science

<li>PGDCA

</ul>

<h6> Week-end Programmes</h6>

<li>M.Phil

<li>Ph.D

</ul>

</body>

</html>

Horizontal Rule

<HR> tag is used to create a horizontal line

There are four attributes to the <HR> tag:

Size

Width

Alignment

Source

Ex: Design the following with Horizontal rule

Ex: <html>

<body>

Department of Computer Science

Courses Offered

B.Scs. Computer Science

<h4><center>iiet Computers</center></h4>

<h4>COURSES OFFERED</h4>

</body>

</html>

HYPERLINKS:

Anchor tag is used to create hyperlinks to another page or website address.

Ex: <a href=”#comp”>Computer Science</a> is rendering services.

• To go to the linked text within the same page

<a href=”iiet.html”>Computer Education</a>

• To go to the specified linked page.

Deisgn the page with hyperlink

Iiet Computer Education

COURSES PROVIDED

PG DIPLOMA IN COMPUTER APPLICATION

DIPLOMA IN COMPUTE APPLICATION

CERTIFICATE IN COMPUTER APPLICATION

PGDCA

CF & DOS

MS-OFFICE

INTERNET

PROGRAMING

DCA

Fundamentals

Office package & Internet

CCA

Fundamentals

Word, Excel & PowerPoint

Internet concepts

Task 2:

Create a document with Home.html and provide only the Headings or links

Create other pages: PGDCA.HTML, DCA.HTML, CCA.HTML

Place all html files in the same folder.

Now open Home.html file and click the required link page to open.

ADDING IMAGES/ PICTURES TO WEBPAGE

To add an image to your page you can use

The <img> tag

Ex: <img src=”Image.jpg” height=120 width=200 align=left/right/middle border=5>

TABLE:

For designing a table the following tags are used:

To create a table we have to use the tag <TABLE> and the following properties:

Broder : To add border to the table

TH : To add table heading to columns in a table

TR : To create rows in a table

TD : To add table data in each cell

Cell spacing : To set space between cells

Cell padding : To set space between the edges of a cell

Align : To set the horizontal alignment of each cell

VAlign : To set the vertical alignment of each cell

Row span : To span or merge cell or heading across the rows.

Column span : To span cell or heading across the column.

Ex:

<HTML>

<TITLE> TABLE DESINGS </TITLE>

<BODY>

<TABLE>

<TR>

<TH> Author </TH>

<TH> Price </TH>

</TR>

<TR>

<TD> Computer Programming </TD>

<TD> Trinath Babu </TD>

</TR>

<TR>

<TD> HTML Programming </TD>

<TD>Chandan Ku Behera </TD>

</TR>

</TABLE>

</BODY>

</HTML>

SMARTSEVAKENDRA BANDHUGAON

Search This Blog

HTML NOTE

Comments

Post a Comment