IT Solutions for Businesses and Developers: Web Designing and Development Solution

IT Solutions for Businesses and Developers: Web Designing and Development Solution: In assocation with EliteKoders Software Technologies Pvt. Ltd, We are bringing economical Web Designing and Development solutions to the St...

IT Solutions for Businesses and Developers: Search Engine Optimization

IT Solutions for Businesses and Developers: Search Engine Optimization: We do search engine optimization using google keyword analytic tools which will help you in strengthening your online presence and attract ...

IT Solutions for Businesses and Developers: Web Hosting Solutions

IT Solutions for Businesses and Developers: Web Hosting Solutions: We are trying to keep web hosting rates as low as possible and made our plans accordingly. Our motto is "Why to pay for if you do not ...

IT Solutions for Businesses and Developers: Compare Our Semi Dedicated Server Plans 27 Feb 201...

IT Solutions for Businesses and Developers: Compare Our Semi Dedicated Server Plans 27 Feb 201...: Semi Dedicated 2 Unlimited  Hosted Domains Unlimited  Subdomains 1  IP Addresses Active  SSH Unlimited  MySQL Databases Unlimi...

IT Solutions for Businesses and Developers: We can do anything to support you

IT Solutions for Businesses and Developers: We can do anything to support you: Customer Care One of the most essential components of our offering is the customer care service. Our skilled professionals will dedicate a...

Hyper Text Markup Language (HTML) CLASS 4

In last class, you got some idea about attributes. Today we will discuss tags which are used for formatting.

Quiz class 3:

Define core attributes.

Define internationalization attributes.

Give example for defining name and value properties of an attribute.

CLICK HERE: FOR HTML CLASS 3

LEARN FROM IIT PASS OUTS AND INDUSTRY EXPERTS

HTML Class 4

Formatting: is an important segment of HTML document and is helpful in making content more readable as well as user friendly.

Before moving ahead let's discuss how html treats white-space and consecutive empty lines. Multiple White-spaces are not recognized by HTML while displaying content on screen, HTML collapsess all whitespaces together and show only one white-space which is known as white space collapsing.On the same pattern, empty lines are ignored and treated as one space. To show multiple white-spaces or empty lines, you have to use special HTML tags.

Let's begin with formatting of a document

Every document should begin with a heading followed by a paragraph or multiple paragraphs.

Heading: Gives an idea about the content of paragraph to the reader.

Format <hn> where n=1,2,3,4,5,6

Once heading is declared, HTML adds one line above and below declared heading while displaying it on screen. 

Example:

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

This will display following result:

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

Paragraph

Format <p>...</p>

<p>Here is a paragraph of text.</p>

<p>Here is a second paragraph of text.</p>

<p>Here is a third paragraph of text.</p>

This will produce following result:

Here is a paragraph of text.

Here is a second paragraph of text.

Here is a third paragraph of text.

Attribute:

Name Align, values: left, centre, right, justify

You can use align attribute to align your paragraphs.

<p align="left">This is left aligned.</p>

<p align="center">This is center aligned.</p>

<p align="right">This is right aligned.</p>

<p align="justify">This is justified. This works when you have multiple lines in your paragraph and you want to justify all the lines so that they can look more nice.</p>

This will produce following result:

This is left aligned.

This is center aligned.

This is right aligned.

This is justified. This works when you have multiple lines in your paragraph and you want to justify all the lines so that they can look more nice.

Line breaks or empty lines

Format: <br />

*Example of an empty element.

* always remember space between br and slash(/), if not given older browsers would have trouble in displaying line breaks or empty lines.

Create Line Breaks - The <br /> Element:

Whenever you use the <br /> element, anything following it starts on the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them.

Example:

Hello<br />

World<br />

Thanks<br />

Mahnaz

This will produce following result:

Hello

world

Thanks

Mahnaz

Centering Content: for centering the content, in the page or table cells, center tag is used 

Format: <center>...</center>

Example:

<p>Not in the center.</p>

<center>

<p>In the center.</p>

</center>

This will produce following result:

Not in the center.

In the center.

Non breaking Spaces: are used when you do not want words to be splitted in two lines by browsers, as you do not want following phrase to get splitted "hello world" as

"hello

world"

Simply,use

<p> "hello&nbsp;world"</p>

&nbsp; is used to keep words together.

Soft Hyphens:  Sometimes you want a browser should hyphenate long words to make it easily readable.

Example:

<p style="text-align: justify;"> triskaidekaphobia</p>

This will produce following result:

triskaidekaphobia

<p style="text-align: justify;"> tri&shy;skai&shy;deka&shy;phobia</p>

This will produce following result:

tri­skai­deka­phobia

*&shy is used to make word hyphenated

*This may notwork with some web browsers.

Preserve Formatting: Used to make content appear on the screen as it is written in the HTML document.

Format <pre>...</pre>

<pre>

hello world

     I am a coder

}

</pre>

This will produce following result:

hello world

     I am a coder

Visual breaking of sections: Horizontal Rules are used to break pages in vertical segments

Format <hr />

* Empty element

* Inserts a line

Example:

<p>This is paragraph one and should be on top</p>

<hr />

<p>This is paragraph two and should be at bottom</p>

This will produce following result:

This is paragraph one and should be on top

 

This is paragraph two and should be at bottom

Note: The <hr /> element has a space between the characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break, while if you miss the forward slash character and just use <hr> it is not valid XHTML

Presentational Tags:

Bold tag: Anything written between bold tags would appear bold on screen.

Format: <b>...</b>

Code:

<p>Hello <b>world</b></p>

Result:

Hello world

Italic tag: Anything written between italic tag would appear italicized on screen.

Format: <i>...</i>

Code:

<p>Hello<i>world</i></p>

Result:

Hello world

Underline tag: Anything written between underline tag would appear underlined on screen.

Format: <u>...</u>

Code:

<p>Hello <u>world</u></p>

Result:

Hello world

Strike tag:Anything written between strike tag would appear srikethrough on screen.

Format: <strike>...</strike> Element:

Code:

<p>Hello <strike>world</strike></p>

Result:

Hello world

Monospaced font: used for making width of every letter same, as in general, letter m is wider than i and if respective tag is used their width become same.

Format: <tt>...</tt>

Code:

<p>Hello <tt>world</tt></p>

Try yourself and see result.

Superscripting of Text: Anything written between sup tag would appear superscripted on screen.

Format: ^...

Code:

<p>Hello^world</p>

Try yourself and see result.

Subscripting of Text: Anything written between sub tag would appear subscirpted on screen.

Format: _...

Code:

<p>Hello_world</p>

Try yourself and see result.

Making Text Larger: Anything written between big tag would appear larger on screen.

Format: <big>...</big>

Code:

<p>Hello<big>world</big></p>

Try yourself and see result.

Making Text Smaller: Anything written between small tag would appear smaller on screen.

Format: <small>...</small>

Code:

<p>Hello<small>world</small></p>

Try yourself and see result.

Grouping of elements is done to create sections or subsections within a page like you may want to put all menu items within a block where change in properties would affect each item in similar way.

div tag:Block level grouping: is done by using div tag

Format: <div>...</div>

Code:

<div id="menu" align="middle" >

<a href="/index.htm">HOME</a> |

<a href="/about/contact_us.htm">CONTACT</a> |

<a href="/about/index.htm">ABOUT</a>

</div>

<div id="content" align="left" bgcolor="white">

<h5>Content Articles</h5>

<p>Actual content goes here.....</p>

</div>

Result:

HOME | CONTACT | ABOUT

Content Articles

Actual content goes here.....

Span tag: Inline grouping: is done by using span tag.

The <span> element, on the other hand, can be used to group inline elements only. So, if you had a part of a sentence or paragraph you wanted to group together you could use the <span> element.

Code:

<div><p>Hello friends,<span style="color:green">I am sailendra kumar</span>, who is providing you <span style="color:purple">free tutorial on HTML</span> alongwith CSS</p></div>

Try yourself and see result.

Hyper Text Markup Language (HTML) CLASS 3

In last class, you got some idea about tags. Today we will discuss attributes of the tags.

Quiz class 2:

What do you mean by tag.

What are the uses meta tags.

Define base tag with examples..

CLICK HERE: FOR HTML CLASS 2

LEARN FROM IIT PASS OUTS AND INDUSTRY EXPERTS

HTML Class 3

Understanding attributes

Attributes of the tags are an important segment of HTML which are used to define different characteristic of various tags. Every attribute has two parts, name of attribute and value associated with that attribute.

Example: <font face="arial" color="#F1FF00">

Tag: <font...>

Name:  face, color

Value: arial for face and it could be replaced by diffrent values of face like italic, calibri etc.
#F1FF00 for color and it could be replaced by diffrent values of color like #FFFF10, #000FFF etc.

As shown in example, name and value is always placed inside the opening tag. Value is always placed within double quote mark"".
Equal sign is used to assign an specific value to the name.

Core Attributes:

ID
Title:
Style:
Class:

Let's discuss it

ID Attribute: 

It gives unique identity to the tag, which makes identification of that tag easy within an HTML document.

Format: <p id="h123">...</p>

ID attribute must start with capital or small letter and may followed by capital or small letters, numbers, colons, underscore, hyphen,and periods.

Title Attribute:

The title attribute defines title for the tag and used as tool tip.

Example:

<h4 title="Hello world">Loading...</h4>

Above code will generate following result:

Loading...

when you will put cursor on it, the title would come on screen.

Class Attribute:

The class attribute is used to specify class of a tag within cascading style sheet(CSS). In css class, you will learn more about it.

Style Attribute:

The style attribute is used to define cascading style sheet rule for the tag

Example:

<p style="font-family:arial; color:#FF0000;">Hello World</p>

Internationalization Attributes:

These attributes are used to define characteristics of html tag which is the main tag of an HTML document as entire document is contained within it.

dir: instructs the browsers about the direction for the flow of text.

It takes two values only.
ltr: left to right
rtl: right to left

Example:

<html dir=rtl>
<head>
<title>Give Direction for floating</title>
</head>
<body>
This is how IE 5 renders right-to-left directed text.
</body>
</html>

*Try changing dir values.
 
lang: provides information about the main language used within the html document.It takes ISO-639 standard two character language codes as value.

Example:

<html lang=en>
<head>
<title>English Language WebPage</title>
</head>
<body>
This page is using English Language
</body>
</html>

* for both of these tags,
when used within html tag, instruction given by these attributes are applicable to the entire document
when used within other tag, instruction given by these attributes  are applicable to the content of that tag only.