HTML Tutorial

HTML
HTML - Hyper Text Markup Language

|
two types
1. Programming Language
2. Scripting Language
------ HTML is a Scripting Language
One software which is produced by another software called as programming language

ex. C,C++,JAVA,.NET
The web pages are developed or created by scripting language

ex. HTML,CSS,JAVA SCRIPT,.VB SCRIPT
There are two types of web pages

1.Static webpages
2.Dynamic webpages
3.Server pages
These all three types are used to create a website or a webpage
INTRODUCTION TO HTML:
1.TAGS
<html> --- called as Tags

- Tags are two types
1. Container tags or Pair tags
These having both Opening and Closing tags
ex. <html> and </html>
2. Empty tags or Single tags
These having only opening tags only
ex. <br>,<img>,<hr>,etc,.
WE ARE GOING TO LEARN Syntax:

1.Tags
2.Elements
3.Attributes
Basic HTML Document:

____________________________________________________
<!DOCTYPE html>
<html>
<head>
<title> sridhar </title>
</head>
<body>
element 1
element 2
</body>
</html>
____________________________________________________
1. HEADING TAGS
Heading tags =6
<h1>----</h1>
<h2>----</h2>
<h3>----</h3>
<h4>----</h4>
<h5>----</h5>
<h6>----</h6>
2. PARAGRAPH TAGS
the paragraph tag <p>----------</p>

_____________________________________________________
<html>
<head>
<title>----------</title>
</head>
<body>
<h2>
<p>--------paragraph 1--------</p>
<p>--------paragraph 2--------</p>
<p>--------paragraph 3--------</p>
</h2>
</body>
</html>
_____________________________________________________
3. EMPTY TAGS
Line break and Horizontal line
<br> or </br> or <br/> ------ line break

<hr> or </hr> or <hr/> ------ horizontal line
__ if need more space between the paragraphs increase the break tags more
ex. content <br><br><br> content
__ at the same if u need more horizontal lines increase <hr> tags

ex. content <hr><hr><hr> content
note: <wbr> is the tag deletes the space between the two words and combine the
both
______________________________________________________
4.CENTERING TAG
Centering tag <center>---------</center>
For Example
-------------------
<html>
<head>
<title>---------</title>
</head>
<body>
<center><p>----------</p> </center>
</body>
</html>
-------------------
_______________________________________________________
5.BACKGROUND COLOUR ATTRIBUTE
Attribute Tag- bgcolor="colour"
Only defined colours

ex.Black,Gray,SILVER,White,Yellow,Lime,Navy,Olive,
Aqua,Fuchsia,Red,Green,Blue,Purple,Maroon,Teal.
-------------------
<html>
<head>
<title>------</title>
</head>
<body bgcolor="colour name">-----------
<body>
</html>
-------------------
_______________________________________________________
6.ALIGNMENT ATTRIBUTE
Alignment are three - LEFT,RIGHT,CENTER
Attribute tag --- align="center"

--------------------
<html>
<head>
<title>------</title>
</head>
<body>
<h1 align="center"> <p>--------</p> </h1>
</body>
</html>
--------------------
________________________________________________________
7.FONT TAG
For a particular word or line need to change style,colour,size,etc,.we can use

font tag
Font tag -- <font>--------</font>
Font Tag --- <h1><font size="8">------------</font></h1>

<h1><font size="5" color="red">--------</font></h1>
<h1><font size="5" color="red" face="impact">-------</font></h1>
There is another type of font tags
i.e is BIG and SMALL
BIG tag -- <big>------</big>

SMALL Tag -- <small>---</small>
if u give many times times big or small the number of times one step of size
will increase.
_________________________________________________________
8.TEXT FORMAT TAGS

For Bold <b>---word----</b>
Italic <i>---word----</i>
Underline <u>---word----</u>
Strike Through <strike>---word---</strike>
Sub Script <sub>---2---</sub>
Super Script <sup>---5---</sup>
Strong <strong>----word---</strong>
These tags having both opening and closing tag

__________________________________________________________
9. MARQUEE TAG
Marquee tag is used for scroll the words in the screen in horizontal or
vertical directions,speed,backgroung colour,etc
This is also container tag or pair tag. having both opening and closing tag.
Default scroll will right to left side
Marquee tag - <marquee>----content------</marquee>

<marquee><font face="impact" size="5" color="red">--------
</font></marquee>
<marquee direction="up or down"><font>---------</font></marquee>
<marquee width="50%"><font>-----------</font></marquee> - for
half space scrolling
<marquee scrollamount="10"><font>------</font></marquee> - for
speed of scrolling
<marquee bgcolor="green"><font>-------</font></marquee>
__________________________________________________________
10. HEADINGS AND PARAGRAPHS
-- Bullets and Numberings

1.unorderlist - bullets - <ul>
2.orderlist - numbering - <ol>
-- LIST TAG - <li>
For example an unorderlist
<html>
<title>----------------</title>
<body><hr><hr>
<ul>
<li> element 1 </li>
<li> element 3 </li></ul>
<hr><hr>
</body>
</html>
For unorderlist we will get bullets by default.

If we want to change the font for list, give font tag before list.
Instead of bullets we use square,disc,triangle,arrows,cirlce,etc,.
ex. <ul type="square"><li>--------</li></ul>
For example an orderlist

<html>
<title>----------------</title>
<body><hr><hr>
<ol>
<li> element 3 </li></ol>
<hr><hr>
</body>
</html>
For orderlist we will get numbers by default.

If we want to change the font for list, give font tag before list.
Instead of numbers,we use Roman Numbers,Alphabets,etc
ex. <ol type="A"> ---- for capital alphabets
<ol type="a"> ---- for small alphabets
<ol type="i"> ---- for roman numbers
For missing numbers, the number counting start from 20,.
ex. <ol start="20">
________________________________________________________
11.IMAGE TAGS
The image will upload from computer or from internet.
The image just uploading from the computer

image tag -- <img src="path\image title">
-- <img src="C:\Users\Vishnu Naidu\Pictures\Saved
Pictures\india.jpg">
The image also upload directly from the web browser by copying the link adress of
the image
image tag -- <img src="http://thewowstyle.com/wp-
content/uploads/2015/01/Free-Wallpaper-Nature-Scenes.jpg">
-- IMAGE WIDTH/HEIGHT(INC/DEC)
-- <img src="path\image title" width="300px" height="150px">

-- <img src="C:\Users\Vishnu Naidu\Pictures\Saved Pictures\india.jpg"
width="300" height="150">
px is optional
-- IMAGE TITLE
-- <img src="path\image title" width="300px" height="150px" Title="optional

name">
-- IMAGE BORDER
If we requires the border to the image we use the attribute

-- <img src="path\image title" border="3">
-- IMAGE BACKGROUND
Set as the image in background by using attribute

-- <body background="image path">
_________________________________________________________
12.TEXT LINKS
Tags used for Text links

for example <a>------</a>
--- <a href="URL"> webiste title </a>
<a href="www.google.com"> google </a>
for adding the other websites to our website such as

facebook,twitter,instagram,etc,.
for example in the following program

--------------------
<html>
<title>--------------</title>
<hr>
<a href="https://www.goolge.com/"> GOOGLE </a>
<a href="https://www.facebook.com/"> Facebook </a>
<hr>
<body>
<p>--------</p>
</body>
</html>
----------------------
If i need to open the link in new tab we use attribute
target="blank"
--- <a href="https://www.goolge.com/" target="blank"> GOOGLE </a>

<a href="https://www.facebook.com/" target="blank"> Facebook </a>
_______________________________________________________
13. IMAGE LINKS
When click on images we moved on to the links to another site

We are trying on social icons sucha s goole,facebook,twitter,etc,.
For example writing the coding

-----------------------
<html>
<title>--------------</title>
<hr>
<a href="https://www.goolge.com/"><img src="path\google.jpg"></a>
<a href="https://www.facebook.com/"><img src="path\facebook.png"></a>
<hr>
<body>
<p>--------</p>
</body>
</html>
-----------------------
If the images of social icons are in different size,we cam change dimensions
of the image by using image properties
For example
<html>
<title>--------------</title>
<hr>
<a href="https://www.goolge.com/"><img src="path\google.jpg" width="100"
height="100"></a>
<a href="https://www.facebook.com/"><img src="path\facebook.png"
width="100" height="100"></a>
<hr>
<body>
<p>--------</p>
</body>
</html>
------------------------
If need to open link in another tab, use attribute tag -- target="blank"
<hr>
<a href="https://www.goolge.com/" target="blank"><img
src="path\google.jpg" width="100" height="100"></a>
<a href="https://www.facebook.com/" target="blank"><img
src="path\facebook.png" width="100" height="100"></a>
<hr>
_____________________________________________________
14. TABLE TAGS
Table contains rows and columns.
TABLE <table>------</table>
ROWS <tr>---------</tr>
COLUMNS <td>---------</td>
-----------------------
For example coding for a table of 3*2 of numbering 6
<table>
<tr><td>1</td><td>4</td></tr>
</table>
the above program shows like positions
1 4
2 5
3 6
------------------------
If need of table lines in page we use attribute -- border
<table border="2">------</table>
If need the table in center ,just use center tag <center>
<center><table border="2">-----</table></center>
------------------------
If need headings in the table,the attribute tag is
<table border="2">
<th>S.NO</th><th>S.NAME</th>
</table>
then we will get table with border and headings
_________________________________________________________
15.TABLE CONTENTS TAGS
we are going to learn the following tags

1.Header -- <thead>------</thead>
2.Footer -- <tfoot>------</tfoot>
3.Cell Padding
4.Cell Spacing
In these header and footer are tags, cell padding and cell spacing are
attributes
-- CELLPADDING
In cellpadding attribute will helps in increases size of the inner part

of cell
ex. <table cellpadding="5">-----------</table>
-- CELL SPACING
In cellspacing attribute helps in increases size between the dual lines

in the table.
ex. <table cellspacing="2">------------</table>
-------------------------------
we are going to learn inc/dec of the table rows and columns adjustments.also
merging the rows and columns
--- ROW HEIGHT AND WIDTH
to increase size of the table rows and columns

- <table border="2" height="200" width="300">
--- ROWSPAN AND COLSPAN
to merge the columns or rows to single box
--- FOR COLSPAN ATTRIBUTE

<table border="2">
<tr ><td>1</td><td>4</td></tr>
<tr><td colsoan="2">3</td></tr>
</table>
--- FOR ROWSPAN ATTRIBUTE

<table border="2">
<tr ><td rowspan="3">1</td><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
</table>
______________________________________________________________
15. TABLE ALIGNMENTS AND COLORS

we are going to learn about table alignments and colors
<tr align="left or right or center"> for horizontal moves

<tr valign="top or bottom or middle"> for vertical moves
we have to change color of border lines..attribute - bordercolor="red">

for background color in table..attribute - bgcolor="yellow">
--- link colors

1. Standard link --- link -- default link
2. visited link --- vlink -- for already visited link
3. active link --- alink --
For Example in coding
<html>
<body link="green" vlink="red" alink="yellow">
<hr>
<a href="https://www.goolge.com/"> GOOGLE </a>
<a href="https://www.facebook.com/"> Facebook </a>
<hr>
</body>
</html>
---------------------------------
color methods
1. color names
2. hex codes
3. color decimal or percentage value

HTML Tutorial

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML Tutorial

Caricato da

Copyright:

Formati disponibili

HTML

HTML - Hyper Text Markup Language

------ HTML is a Scripting Language

One software which is produced by another software called as programming language

The web pages are developed or created by scripting language

There are two types of web pages

These all three types are used to create a website or a webpage

<html> --- called as Tags

WE ARE GOING TO LEARN Syntax:

Basic HTML Document:

the paragraph tag <p>----------</p>

Line break and Horizontal line

<br> or </br> or <br/> ------ line break

__ at the same if u need more horizontal lines increase <hr> tags

Centering tag <center>---------</center>

Attribute Tag- bgcolor="colour"

Only defined colours

Alignment are three - LEFT,RIGHT,CENTER

Attribute tag --- align="center"

For a particular word or line need to change style,colour,size,etc,.we can use

Font tag -- <font>--------</font>

Font Tag --- <h1><font size="8">------------</font></h1>

There is another type of font tags

i.e is BIG and SMALL

BIG tag -- <big>------</big>

8.TEXT FORMAT TAGS

These tags having both opening and closing tag

Default scroll will right to left side

Marquee tag - <marquee>----content------</marquee>

10. HEADINGS AND PARAGRAPHS

-- Bullets and Numberings

-- LIST TAG - <li>

For example an unorderlist

For unorderlist we will get bullets by default.

For example an orderlist

For orderlist we will get numbers by default.

The image will upload from computer or from internet.

The image just uploading from the computer

-- <img src="path\image title" width="300px" height="150px">

-- <img src="path\image title" width="300px" height="150px" Title="optional

If we requires the border to the image we use the attribute

Set as the image in background by using attribute

Tags used for Text links

for adding the other websites to our website such as

for example in the following program

--- <a href="https://www.goolge.com/" target="blank"> GOOGLE </a>

13. IMAGE LINKS

When click on images we moved on to the links to another site

For example writing the coding

If need to open link in another tab, use attribute tag -- target="blank"

14. TABLE TAGS

Table contains rows and columns.

the above program shows like positions

15.TABLE CONTENTS TAGS

we are going to learn the following tags

In cellpadding attribute will helps in increases size of the inner part

In cellspacing attribute helps in increases size between the dual lines

--- ROW HEIGHT AND WIDTH

to increase size of the table rows and columns

--- ROWSPAN AND COLSPAN

to merge the columns or rows to single box

--- FOR COLSPAN ATTRIBUTE

--- FOR ROWSPAN ATTRIBUTE

15. TABLE ALIGNMENTS AND COLORS