HTML CODE TUTORIAL

HTML (HYPER TEXT MARKUP LANGUAGE)

HTML Definition: - It is stand for Hyper Text Markup Language. Html is use to design and developer web page. Html is invented by Tim Burner Le in 1980.

Note: - The Full Form of Html is

H: - Hyper (flexible)

T: - Text (text)

M: - Markup

L: - Language

In 1969 for computer was committed.

Invented in us defiance Academy. In 1980’s Tim Burner Le Invented.

Http:- protocol

Tcp: - protocol

Ip: - protocol

Protocol: - protocol is setup instruction or information.

Http:- Hyper Text Transfer Protocol.

Tcp: - Transmission Control protocol.

Ip: - Internet protocol.

Tag: - Tag is group of instruction

It is encode with

“<” and “>” open angle and close imgle

Attributes: - Protocol of tag are called

Typs of tag:-

1. Open Tag (singular tag)

2. Close Tag (paired tag)

3. Open Tag (singular tag) :- The open Tag has no companion tag In other hand it has no need to close

Example - <Br> break line

<Hr> Horizontal Rule

2. Close Tag (paired Tag):- It has us companion tag It means it is necessary to close.

Example: - <P>……………………</P> Paragraph Tag.

<Marquee>……………. </Marquee> Marquee Tag.

Note: - Use Backspace (/) to close any tag.

STRUCTURE OF HTML:-

***********************************************************

<HTML>

<HEAD>

<TITLE> WEBSITE PAGE NAME</TITLE>

</HEAD>

<BODY>

DESIGING OF BODY

</BODY>

</HTML>

****************************************************

Customize Background body with Html Tag :--

Body: - The Tag which is use for body is tag.

Note: - How to write any tag and attributes.

Structure Example :- <Body Bgcolor=”Red”>

Body = Tag

Bgcolor = Attribute

Red = Value

Body Attribute: - 1. Bgcolor

2. Background

3. Text

1. Bgcolor: - it is use to change body background color.

2. Background:-It is use to change body background with bitmap image.

3. Text: - It is use to change default body text color.

Example: - 1. To Change the Body color………

<Html>

<Head>

` <Title> Change the body color </Title>

</Head>

Hubnet Technologies (p) Ltd.

</Body>

</Html>

2. To Change the Background Body with Bitmap Image.

<Html>

<Head>

` <Title> Change the body color </Title>

</Head>

Hubnet Technologies (p) Ltd.

</Body>

</Html>

3. To Change the Background Body with Bitmap Image and Text Color.

<Html>

<Head>

` <Title> Change the body color </Title>

</Head>

Hubnet Technologies (p) Ltd.

</Body>

</Html>

**********************************************************

Tex Formatting: - We can customize background body text an Html page through using same tag of Html.

1. Tag: - Font

Attributes: - 1. Face 2. Color 3. Size

2. <B>:- To Create Font Bold.

3. <I>:- To Create Font Italic.

4. <U>:- To Create Font Underline.

5. <TT>:- To Create Font True type.

6. <Big>:- To Create Big Like Bold.

7. <Br>:- To Create Break Line.

Example of Font Tag:-

1. Using of Font Color:-

<Html>

<Head>

<Title> Using Font </Title>

</Head>

<Body>

<Font Color=” Green”> Welcome to Bihar State </Font>

</Body>

</Html>

2. Using of Font Color and Size:-

<Html>

<Head>

<Title> Using Font </Title>

</Head>

<Body>

<Font Color=” Green” Size=”10”> Welcome to Bihar State </Font>

<Font Color=” Green” Size=”20” > Welcome to Hubnet </Font>

</Body>

</Html>

3. Using of Font Color, Size and Face:-

<Html>

<Head>

<Title> Using Font </Title>

</Head>

<Body>

<Font Color=” Green” Size=”10” Face=”Arial”> Welcome to Bihar State </Font>

<Font Color=” Green” Size=”20” Face=”Impact” > Welcome to Hubnet </Font>

</Body>

</Html>

**********************************************************

Horizontal Rule: - This Tag is use to create a one pixel horizontal rule on web page. This Tag is also called open tag.

Tag :- <Hr>

Attributes: - 1. Color

2. Size

3. Width

4. Name

5. Align (Right, Left, Center)

1. Color: - It is use to change default <hr> Horizontal Color.

2. Size: - It is use to Increase or Decrease height of Horizontal Rule.

3. Width: - It is use to Control width of Horizontal Rule.

4. Name: - To Define a Name of Horizontal Rule.

5. Align: - It is use to align of Horizontal Rule.

Example:- Use of Horizontal Rule All Attributes :-

<Html>

<Head>

<Title> Using Horizontal Rule </Title>

</Head>

<Body>

Welcome to Bihar State

</Body>

</Html>

**********************************************************

Paragraph: - This Tag is use to paragraph and also we can use for paragraph text.

Tag :- <p> ……………………… </p>

Attributes: - Align

Example:-

<Html>

<Head>

<Title> Using Paragraph Text </Title>

</Head>

<Body>

<p align=”right”> Microsoft’s support services are subject to then-current prices, terms, and conditions, which are subject to change without notice. Microsoft’s support services are subject to then-current prices, terms, and conditions, which are subject to change without notice. </p>

</Body>

</Html>

**********************************************************

Marquee :- Html use Marquee Tag to Animated any text or object (image) with straight form Like That’s :- Right to Left, Left to Right, Up to Down, Down to Up,

Tag :- <Marquee> …………………………. </Marquee>

Attributes:-

1. Behavior:- It has three value to change its Behavior,

(a) Scroll

(b) Slide

2. Direction: - It is use to change direction of marquee object, Like

That: - Right, Left, Up, Down.

3. Loop: - Loop is use to repeat how many time as we want.

4. Scrollamount: - It is use to Increase or Decrease the speed of marquee object.

5. Scrolldelay: - Same Like Scrollamount.

Note: - No Space between Scroll and amount Word

Note: - No Space between Scroll and delay Word

6. Width

7. Height

Example: - 1. Use of Behavior and Direction:-

<Html>

<Head>

<Title> Using Marquee Tag </Title>

</Head>

<Body>

Hello Dear How Are You?

</Marquee>

Hello Dear How Are You?

</Marquee>

Hello Dear How Are You?

</Marquee>

</Body>

</Html>

2. Use of Behavior, Direction’ Loop’ And Srollamount:-

<Html>

<Head>

<Title> Using Marquee Tag </Title>

</Head>

<Body>

Hello Dear How Are You?

</Marquee>

Hello Dear How Are You?

</Marquee>

Hello Dear How Are You?

</Marquee>

</Body>

</Html>

**********************************************************

Heading Tag: - There is another tag for text called heading. While these are little absolute in today’s graphics web environment, they are still bandy to have in your toolbox, They come in size ranging from 1-6. A Heading should always be used in numeric order say for

Example :- <H1> ………………………. </H1>

Attributes: - Align (Right, Left, Center)

Example:-

<Html>

<Head>

<Title> Using Heading Tag </Title>

</Head>

<Body>

<H1 Align=”Center”> something Really Cool. </H1>

<H2 Align=”Right”> something Really Cool. </H2>

<H3 Align=”Left”> something Really Cool. </H3>

<H4 Align=”Center”> something Really Cool. </H4>

<H5 Align=”Right”> something Really Cool. </H5>

<H6 Align=”Left”> something Really Cool. </H6>

</Body>

</Html>

*********************************************************

Break Line Tag: - This is the time that we are learning how browser works. Even as you type the text as above in the next line, You will find the text “Programming “in the same line.

In Case you want it on the next line you have to use the break tag <Br>. This is a open tag.

Example:-

<Html>

<Head>

<Title> Use of Break Line</Title>

</Head>

<Body>

I like the Html Programming <br>

I have a Best Programmer <br>

2 <br> 0 <br> 1 <br> 1<br>

</Body>

</Html>

**********************************************************

Use of Superscript, Subscript and Email and Matio Linking

Example:-

1. Superscript and Subscript:-

<Html>

<Head>

<Title> Using Superscript and Subscript </Title>

</Head>

<Body>

HUBNET TECHNOLOGIES <sup> tm </sup>

HUBNET TECHNOLOGIES <sub> tm </sub>

</Body>

</Html>

2. Email and Matio:-

<Html>

<Head>

<Title> Using Email and Matio </Title>

</Head>

<Body Bgcolor=”#000099” Text=”Green”>

<H1>HUBNET TECHNOLOGIES </H1>

<A href=http://www.hubnettech.net>

For More Information an to Hubnet </A>

<A href=”matio: Hubnet Technologies @ yahoo.com”>

Mail Us </A>

</Body>

</Html>

3. Bi-Directions Over :- BDO

RTL :- Right to Left.

<Html>

<Head>

<Title> Using Email and Matio </Title>

</Head>

<Body Bgcolor=”#000099” Text=”Green”>

<H1 Align=”Center”>

<bdo=”rtl”>Hubnet</bdo></H1>

</Body>

</Html

******************************************************************

Call Image Graphics on Html Page:-

This is the time to learn about the image tag. In this tag you will learn how to set image width and height and place images in your web page.

Tag :- <Img> ………………………… </Img>

Attributes: - 1. Height

2. Width

3. Border

4. Alt (Alternate Text)

5. Src (Source)

6. Align (Right, Left)

Example:-

<Html>

<Head>

<Title> Use Image Call </Title>

</Head>

</Img>

</img>

</Body>

</Html>

**********************************************************

Preformatted Text: - We can a stop to this with the <Pre> (Preformatted) Tag. And have things displayed in the way we type them.

Tag :- <Pre> ………………………………….. </Pre>

Example:-

<Html>

<Head>

<Title> Use Preformatted </Title>

</Head>

<Pre> what is the input device? (Use of 2 tabs)

1. Keyboard (use of 2 tabs)

2. Mouse (use of 3 tabs)

3. Printer (use of 3 tabs)

4. Monitor (use of 2 tabs)

</Pre>

</Body>

</Html>

******************************************************************

List: - Another very useful little tool in Html is a list. Lists display information in a compact, tight format and are useful as set to know about. The two main categories for lists are unordered list and ordered lists. Other than these are definition list, Nested list, Compact list, Directory list and Menu list.

So List Item: - 1. Order List.

2. Unorder List.

3. Definition List.

List Item: - Html provides list item to change our data sequencly when we need to arrange like that’s. .

Types of List:-

1. Order List: - We can arrange our data sequencly with order like.

A, B, C, D, a, b, c, d, I, II, III, IV, i, ii, iii, iv.

Tag :- <ol> …………………………. </ ol>

Attributes: - 1. Type: - “1” “a” “A” “I” Or “i”

Example:-

<Html>

<Head>

<Title> Use of order list </Title>

</Head>

<Li> Mouse</Li>

<Li> Keyboard</Li>

<Li> Monitor</Li>

<Li> Printer</Li>

</Ol>

</Body>

</Html

2. Unorder List: - Html uses this tag to arrange the data sequencly with unordered.

Tag :- <Ul> ………………………………………… </Ul>

Attributes: - 1. Type: - “Disc”

“Square”

“Circle”

Example: - <Html>

<Head>

<Title> Use of Unordered list </Title>

</Head>

<Li> Mouse</Li>

<Li> Keyboard</Li>

<Li> Monitor</Li>

<Li> Printer</Li>

</Ul>

</Body>

</Html

3. Definition List: - We can define any description using definition list in html.

Tag :- <DL> Definition List.

<DD> Definition Description.

<DT> Definition Term.

Example:-

<Html>

<Head>

<Title> Use of Definition List </Title>

</Head>

<DL>

<DD>what is computer? </DD>

<DT>Computer is an Electronic device. </DT>

</DL>

</Body>

</Html

4. Directory and Menu List :-

Tag :- <Dir> ………………………….. </Dir>

Example:-

<Html>

<Head>

<Title> Use of Directory list </Title>

</Head>

<Dir>

</Dir>

</Body>

</Html

Tag :- <Menu> ………………………….. </Menu>

Example:-

<Html>

<Head>

</Head>

<Menu>

<LI>Sugar </Li>

</Menu>

</Body>

</Html

Example of order list and Unorder list:-

<Html>

<Head>

<Title> Use of Unordered list </Title>

</Head>

<Body Bgcolor=”Green”>

<Ol Type=”1”>

<Li> Module One </Li>

<Ul Type=” Square”>

<Li> Dos</Li>

<Li> Window </Li>

</Ul>

<Li> Module Two </Li>

<Ul Type=”Circle”>

<Li>HTML</Li>

<Li> Java Script </Li>

</Body>

</Html

Output Results: 1. Module One

Dos

Window

2. Module Two

HTML

Java script

****************************************************************

Links: - Link Tag is use with Html page to allocate the particular page or destination within page or root directory.

Tag :- <A> ……………………………..</A>

Attributes: - 1. Name

2. Href (Hyper Reference)

3. Alt (Alternate Text)

4. Tag Index.

Types of Links: - 1. Internal Link.

2. External Link.

1. Use of Internal Link: - with the use of internal link we can specify a destination within the page. We can create a like using text/image.

Tag :- <a> …………………………. </a>

Attributes: - 1. Name

2. Href (Hyper Reference)

3. Alt (Alternate Text)

4. Tag Index.

Step 1:- Create a reference name using name attributes.

Step 2:- Create link with using reference name with #. (Selector)

2. Use of External Link: - External Link html provides external link to convert another documents, page, software, etc. on Active window or Html page.

Tag :- <a> …………………….. </a>

Attributes: - 1. Href

2. Alt

3. Target

_self

_blank

_parent

Example: - Normal style

<Html>

<Head>

<Title> Use External Link </Title>

</Head>

<A Href=”About Us.Html”> About Us </A>

<A Href=”Contact Us.Html”> Contact Us </A>

<A Href=”Gellery.Html”> Gallery </A>

</Body>

</Html>

Example: Target styles

<Html>

<Head>

<Title> Use External Link </Title>

</Head>

<A Href=”About Us.Html” Target=”_self” > About Us </A>

<A Href=”Contact Us.Html” Target=”_blank” > Contact Us </A>

<A Href=”Gellery.Html” Target=”_parent” > Gallery </A>

</Body>

</Html>

******************************************************************

Tables: -

Everyday we can across different type of tables instances of this type are a timetable a calendar and a shopping list. A large data sorted in a table becomes very easy to access because it provides an organized systematic display of data.

A Table is essentially made up head, rows, columns, and cells. Data can be put in the table using the various tags. Row is horizontal and columns are vertical.

Tag :- <Table> ………………………………. </Table>

Attributes: - 1. Height

2. Width.

3. Rowspan

4. Colspan

5. Align

6. Border

7. Bordercolor

8. Cellpandding

9. Cellspacing

10. Bgcolor

11. Background

Nested Tag: - 1. <TD>:- This is used to Enter Table Data.

` 2. <TH>:- This is used to give a Table Heading.

3. <TR>:- This is used Table Row breaks.

4. <Caption>:- use to create footer or reference of Table.

Attributes of caption: - 1. Name

2. Align (Right, Left, Bottom, Top)

Example: - 1. Creating a Simple Table:-

<Html>

<Head>

<Title> Use Normal Table </Title>

</Head>

<TR>

<TH> Course </TH>

</TR>

<TR>

<TH>Mr. Chandirka Sharma </TH>

<TH> Web Designing </TH>

</TR>

<TR>

<TH>Mr. Sunman Kumar </TH>

<TH> Web Designing </TH>

</TR>

<TR>

<TH>Mr. Niraj Kumar </TH>

<TH> Graphics Designing </TH>

</TR>

<Caption align=”Bottom”> Table No. 1</Caption>

</Body>

</Html>

Example: - 2. Using Cellpandding and Cellspacing Simple Table:-

<Html>

<Head>

<Title> Use Table Cellpandding and Cellspacing </Title>

</Head>

<TR>

<TH> Course </TH>

</TR>

<TR>

<TH>Mr. Chandirka Sharma </TH>

<TH> Web Designing </TH>

</TR>

<TR>

<TH>Mr. Sunman Kumar </TH>

<TH> Web Designing </TH>

</TR>

<TR>

<TH>Mr. Niraj Kumar </TH>

<TH> Graphics Designing </TH>

</TR>

<Caption align=”Bottom”> Table No. 2</Caption>

</Body>

</Html>

Example: - 3. Using Colspan Table:-

<Html>

<Head>

<Title> Use Colspan </Title>

</Head>

<TR>

<TH Colspan=”3”> Result for B.S.E.B. PATNA </TH>

</TR>

<TR>

<TH> Course </TH>

</TR>

<TR>

<TH>Mr. Chandirka Sharma </TH>

<TH> Web Designing </TH>

</TR>

<TR>

<TH>Mr. Sunman Kumar </TH>

<TH> Web Designing </TH>

</TR>

<TR>

<TH>Mr. Niraj Kumar </TH>

<TH> Graphics Designing </TH>

</TR>

<Caption align=”Bottom”> Table No. 3</Caption>

</Body>

</Html>

Frameset: - Frameset is use to create a web page with multiple Displays window

This example contain for page at a time with the help of frameset tag in Html.

Tag :- <Frameset> ……………………………… </Frameset>

Nested Tag : - <Frame> ………………………….. </Frame>

Attributes: - 1. Name: - To define a portions name of window.

2. Src: - To define a src to contain in the portions.

3. Rows: - To Create portions in Horizontal.

4. Cols: - To Create portions in Horizontal.

Example: - 1^St

<Html>

<Head>

<Title> Using Frameset </Title>

</Head>

</Frameset>

</Html>

Example: - 2^nd

<Html>

<Head>

<Title> Using Frameset </Title>

</Head>

</Frameset>

</Html>

Example: - 3^rd

<Html>

<Head>

<Title> Using Frameset </Title>

</Head>

`<Frame src=”Lisa.Html”>

</Frameset>

</Html>

Example: - 4^Th

<Html>

<Head>

<Title> Using Frameset </Title>

</Head>

`<Frame src=”Lisa.Html”>

</Frameset>

</Html>

Form: -

Html Introduction from tag to create online from connect database with using different data pc (Excel, Assess, Sql, Orcal)

Tag :- <From> ………………………….. </From>

Attributes: - 1. Name: - Using the Attributes we can define a name of exiting from.

2. Method: - “Post” or “Get” using this attributes of from tag we can post or retrieve the data.

Nested Tag: - 1. Input

Attributes: -

1. Type: - Text

Password

File

Image

Button

Radio

Checkbox

Hidden

2. Textarea

Attributes: -

1. Cols

2. Rows

3. Name

4. Value

3. Select

4. Option

Example of Creating a Registration From:-

<Html>

<Head>

<Title>Registration From </Title>

</Head>

<Body>

<H1 Align=”Center”> Registration From</H1>

<From>

Name : <Input Type=”Text” Value=”Name” size=”10”><Br>

Password : <Input Type=”password” Value=”Name” size=”10”><Br>

Confirm Password : <Input Type=”password” Value=”Name” size=”10”><Br>

Date of Birth :- <Select>

<Option> January</Option>

</Select>

</Select>

Address : <Textarea Rows=”5” Cols=”50” warp=”Hard/Soft”> </Textarea><Br>

Gender: - Male <Input Type=”Radio” Name=”Radio” value=””>

Female <Input Type=”Radio” Name=”Radio” value=””>

Hobbies: - Cricket <Input Type=”Checkbox” Name=”Checkbox” value=””>

Singing <Input Type=”Checkbox” Name=”Checkbox” value=””>

Reading <Input Type=”Checkbox” Name=” Checkbox” value=””> <Br>

Attachment :- <Input Type=”file”>

</From>

</Body>

</Html>

Note: - Max. Length= Character Length

********************************************************************************************************************

Cascading Style Sheet:

Cascading Style Sheet: - It is stand for cascading stylesheet and it is use with Html create attractive website.

With the help CSS properties we can make flexible properties of tag is attractive. We can also make dynamic website using CSS properties.

Types of Cascading StyleSheet:-

1. Internal StyleSheet: - This type of stylesheet work with same documents where CSS is coding.

To use internal CSS with Html documents write the following syntax.

Note :- (Between head and body Tag)

Syntax :- <Style Type=”text/css”>

</Style>

2. External Stylesheet: - This tag of stylesheet use with more than one page Html documents. Standard editor of css is notepad and its extension is CSS.

To use External StyleSheet write the following code on Html documents.

Note :- (Between head and body Tag)

Syntax :- <Link Href=”Location.css/File.css” Rel=”Stylesheet” Type=”text/css”>

********************************************************** *

Note: - 1. { }:- Middle Brecs are use for define properties. *

2. :: - Colon is use to a sign the value. *

3. ;:- semicolon is use for terminate the value. *

4. - :- Hyphen is used for join two words like (Font-Size). *

5. #:- Hash sign indicate ‘ID’ also we can say it is selector. *

6. . : - Dot sign Indicate “Class”. *

**********************************************************

1. Working with Background StyleSheet:-

1. Background color

2. Background Image

3. Background Attachment (To Canted fixed/Scroll)

4. Background Repeat (Repeat Background X-axis, Y-axis)

5. Background Position (Top, Middle, Bottom).

(1.) Internal StyleSheet:-

<Html>

<Head>

<Title> Background color CSS StyleSheet (/Title>

</Head>

Body {Background-Color: Red;

}

</Style>

</Body>

</Html>

(2.) External StyleSheet:-

1^st Step :- Open a New Black Notepad Document.

<Html>

<Head>

<Title> Background color CSS StyleSheet (/Title>

</Head>

Body {Background-Color: Red;

}

</Style>

</Body>

</Html>

Search This Blog

Real Place (Imran Rahman)

HTML CODE TUTORIAL

Comments

Post a Comment

Popular posts from this blog

Tata Dimna Lake Damp Jamsedpur

Imran Rahman darbhanga

Mera bharat mahan