IGNOU: html-introduction

Showing posts with label html-introduction. Show all posts

Sunday, September 15, 2013

H8 - Formatting Options in HTML

Open note pad (wordpad or MS word) , then type the commands as given below :

Save the file as . htm (dot htm) or . html (dot html) .

Open any web page , and browse the created page to view the web page .

Refer HTML - An Introduction before creating any web page.

===============================================

<html>

<head>

<Title>Formatting Tags</title>

</head>

<body>

<br><i>Italilcs</i>

<br><u>Underline</i>

<br><b><i><u>Bold-Italilcs-Underline</b></i></u>

<br>Look at this<sup>Superscript</sup>

<br>Look at this<sub>Subscript</sub>

<br>Look at this<strong>Strong Text</strong>

<br>Look at this<em>Emphasized Text</em>

<br>Look at this<strike>Striked Out Text</strike>

<br>Look at this<small>Small Text</small>

<br>Look at this<center>Text in Centre</centre>

<br><font face="Arial">This is Arial Font></font>

<br><font face="Courier"size="5">This is Courier Font with size 5></font>

<br><font face="Times New Roman"size="10"color="red">Times New Roman Font with size 10 & Red color ></font>

<br><font color="blue">Blue Color></font>

<br><font color="green">Green Color></font>

</body>

</html>

OUTPUT :

Note : Formatting Options in HTML are ;

1 : <br> = BOLD

2 : <i> = ITALICS

3 : <u> = UNDERLINE

4 : <sup> = SUPERSCRIPT

5 : <sub> = SUBSCRIPT

6 : <strong> = BOLD FACE

7 : <em> = EMPHASIZED TEXT

8 : <strike> = STRIKEOUT EFFECT

9 : <big> = BIGGER THAN NORMAL TEXT

10 : <small> = SMALLER THAN NORMAL TEXT

11 : <centre> = ALIGN TEXT & IMAGES AT CENTRE

12 : <font> = TO CHANGE FONT ;

Font has 3 attributes namely FACE,SIZE,COLOR : Color attributes values ranges from 000000 to FFFFFF.

13 : <bgcolor> = TO SET BACKGROUND COLOR

14 : <basefont> = SETS OR CHANGE THE ENTIRE TEXT IN THE PAGE

(13 & 14 are given in the coming 2 programs)

Back to HTML

PREVIOUS CHAPTER NEXT CHAPTER

H7 - Types of Heading in HTML

Open note pad (wordpad or MS word) , then type the commands as given below :

Save the file as . htm (dot htm) or . html (dot html) .

Open any web page , and browse the created page to view the web page .

Refer HTML - An Introduction before creating any web page.

===============================================

<html>

<head>

<Title>Heading</title>

</head>

<body>

<h1>Priyada Mohanan</h1>

<h2>Priyada Mohanan</h2>

<h3>Priyada Mohanan</h3>

<h4>Priyada Mohanan</h4>

<h5>Priyada Mohanan</h5>

<h6>Priyada Mohanan</h6>

<h1 align="right">Priyada Mohanan</h3>

<h2 align="center">Priyada Mohanan</h1>

<h3 align="left">Priyada Mohanan</h2>

</body>

</html>

OUTPUT :

Note :

<h1> to <h6> is used to give heading.

<h1> is the biggest heading , and <h6> is the smallest one.

Note that , We can use alignment option (left,right,centre etc) with the heading tags.

Back to HTML

PREVIOUS CHAPTER NEXT CHAPTER

Monday, September 9, 2013

H6 - To draw horizontal lines in a web page

Open note pad (wordpad or MS word) , then type the commands as given below :

Save the file as . htm (dot htm) or . html (dot html) .

Open any web page , and browse the created page to view the web page .

Refer HTML - An Introduction before creating any web page.

===============================================

<html>

<head>

<Title>Drawing lines</title>

</head>

<body>

Hello world

Welcome to HTML

Learn how to draw horizontal lines

</body>

</html>

OUTPUT :

Note :

<hr> is used to draw horizontal lines.

It has 4 attributes (Check what is an attributes, from Introduction)

1 : Align (left,right,centre)

2 : Width (length in pixels)

3 : Size (Thickness in pixels)

4 : Noshade (To draw in single color)

Note that , We are giving all these attributes with in the tags.

Back to HTML

PREVIOUS CHAPTER NEXT CHAPTER

H5 - SPACE between text

Open note pad (wordpad or MS word) , then type the commands as given below :

Save the file as . htm (dot htm) or . html (dot html) .

Open any web page , and browse the created page to view the web page .

Refer HTML - An Introduction before creating any web page.

===============================================

<html>
<head>
<Title>My web page</title>
</head>
<body>
<pre>
Priyada Mohanan
Ernakulam,Cochin
Kerala
India
</pre>
</body>
</html>

OUTPUT :

Note :

<br> is used to start a new line.

Here instead of <br> , we add <pre>.

While using <pre> , no need to use <br> in each line.(Check previous example also.)

Back to HTML

PREVIOUS CHAPTER NEXT CHAPTER

H4 - Address in a web page

Open note pad (wordpad or MS word) , then type the commands as given below :

Save the file as . htm (dot htm) or . html (dot html) .

Open any web page , and browse the created page to view the web page .

Refer HTML - An Introduction before creating any web page.

===============================================

<html>

<head>

</head>

<body>

<br>Priyada Mohanan</br>

<br>Ernakulam,Cochin</br>

<br>Kerala</br>

<br>India</br>

</body>

</html>

OUTPUT :

Note : <br> is used to start a new line.It is an EMPTY(STAND ALONE) tag.

That is <br> has no closing tag(check introduction)

Check the difference in output, of this and next example.

Back to HTML

PREVIOUS CHAPTER NEXT CHAPTER

Thursday, September 5, 2013

H3 - To give Alignments to paragraph

Open note pad (wordpad or MS word) , then type the commands as given below :

Save the file as . htm (dot htm) or . html (dot html) .

Open any web page , and browse the created page to view the web page .

Refer HTML - An Introduction before creating any web page.

===============================================

<html>
<head>
<Title>Aligning Paragraph</title>
</head>
<body>
<p align="left">This is left aligning</P>
<p align="right">This is right aligning</P>
<p align="center">This is centre aligning</P>
</body>
</html>

OUTPUT :

Note :

To align paragraph , use <p> followed by the alignment option.

That is <p align="left"

Back to HTML

PREVIOUS CHAPTER NEXT CHAPTER

H2 -How to set Paragraph in HTML

Open note pad (wordpad or MS word) , then type the commands as given below :

Save the file as . htm (dot htm) or . html (dot html) .

Open any web page , and browse the created page to view the web page .

Refer HTML - An Introduction before creating any web page.

===============================================

<html>
<head>
<Title>Implementing Paragraph</title>
</head>
<body>
<p>1st paragraph</P>
<p>2nd paragraph</P>
<p>3rd paragraph</P>
</body>
</html>

Output :

======================
Note :
To implement paragraph , use <p>
Back to HTML

PREVIOUS CHAPTER NEXT CHAPTER

Wednesday, September 4, 2013

HTML - An Introduction

HTML

( 1 ) : What is HTML ?

HTML stands for Hyper Text Markup Language.
It is user for creating web pages.

( 2 ) : Where to type HTML ?

You can use any text editor to type html ; like

Notepad
Wordpad
MS Word...
Dream weaver etc

( 3 ) : How to save HTML files ?

You can save a HTML file in 2 type of extensions , like

. htm (dot htm)
. html (dot html)

( 4 ) : HTML editors .

Dream Weaver
MS Front Page etc

( 5 ) : Basic structure of HTML .

<html>

<head>

</head>

</html>

( 6 ) : Detailed description of the structure of HTML .

< > is known as TAGS. First we use <html> to open the HTML commands . Note that a slash ( / ) is used to close any commands . Here we use </html> to close the HTML commands .
Next part is the <head> . In this section , we give title for the web page. To give title , we should give the same format as <title>.........................................</title> , and in the middle section of this , we can write a title. After that , close the head section by using slash as </head> .
Next comes the body part . Whatever we want to write in the body part , we can write . All the contents of the web page comes here. And close this body part , after writing the contents , and close the section by </body> .

( 7 ) : We used in the HTML ,

< > : TAGS
Container Tag : They have both opening and closing tags.
Stand alone (Empty ) tags : They have only one tag (opening tag only).
Elements : They are the one which used with in container tags.
Attributes : Which shows the character of the Elements.

( 8 ) : How to view the web page ?

You can use any web browser (Internet Explorer , Google Chrome etc) to view the created web page.
To do this ;

Open any web browser
Select File --> Open ( or press Ctrl and O )
Click Browse .
Select the saved file from it's location.
Click OK.

Then we can see the created web page. If we select View --> Sourse from the web page , we can see the commands we used to create it.

( 9 ) : Some more things to remember :

There are other subdivisions for the alignment of paragraph , to draw tables.....etc.

We will study them in the following sections.

Now we are going to create a simple web page , using HTML.
Open note pad (wordpad or MS word) , then type the commands given with the title " MY FIRST WEB PAGE" .

Visitors

Sunday, September 15, 2013

Monday, September 9, 2013

Thursday, September 5, 2013

Wednesday, September 4, 2013

HTML

Back to HTML

Subscribe To