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. 

Hyper Text Markup Language (HTML) CLASS 2

In last class, you get introduced to HTML

Quiz class1:

What do you mean by HTML.

Write format for opening tag.

Write format for closing tag.

Write basic structure of html document using html tag, head tag, title tag and body tag.


CLICK HERE: FOR HTML CLASS 1

LEARN FROM IIT PASS OUTS AND INDUSTRY EXPERTS

HTML Class 2

Understanding tags

You have learn about
<html> and </html> -Main layer or container for HTML documents
<head> and </head>- The layer which provides information (not visible to the end user of web page) about HTML documents.
<body> and </body>- The layer which contains visible part of the HTML documents.

Let’s discuss the tags, which are used in head segment of HTML document.

Define the tags which are used in head segment of an HTML document.

Tags are categorized in seven categories based on uses in head segment.

Title tag:

You have seen how to use title tag in class 1. It helps search engines for indexing purpose as well as become default name for bookmarking purpose in web browsers.

Format:

<title>...</title>

*Always give a title to your page as it helps in Search Engine Optimization also.

Meta tags:

Meta tags are the most important tag of head segment and very useful for search engine optimization. It provides information about document only, not about content. It allows you specify metadata which is used by search engines to give ranking.
Format for Meta tag:

<meta />

*Meta tags are empty tags.
*Empty tags provide information using attributes, so they do not need closing tags as in the case of other tags like <html>…</html>  , <body>…</body> etc.

Attributes of Meta tag:
name: It provides name to the property and could be anything like author, keywords, description etc.
Ex.  <meta name=”author” />
content: It specifies the value of property.
Ex.  <meta name=”keywords” content=”Jobs, Resume, Fresher” />
scheme:  It specifies how to interpret the value of property as declared in the content segment.
Ex.  <meta name=”author” content=”Listed Jobs”  scheme=””/>
http-equiv: It is used provide commands to http response message headers like to refresh the page, to set expiry time, to define content-type or to set a cookie.
<meta http-equiv="refresh" content="10" />

Base tags: 

It is used to set a base URL for all relative links on the web page and has no end tag.

Format: <base />

Example: Suppose the absolute address for images in the body segment of HTML document are as given below

<html>
<head>
     <title>HTML without base tag</title>
</head>
<body>  
     <img src="http://listedjobs.weebly.com/uploads/1/5/9/6/15969036/7536589.jpg?180" />
     <img src="http://listedjobs.weebly.com/uploads/1/5/9/6/15969036/3222737.jpg?140" />

</body>
<html>


Base URL is http://www.listedjobs.weebly.com

Relative links are /uploads/1/5/9/6/15969036/7536589.jpg?180 and /uploads/1/5/9/6/15969036/3222737.jpg?140

Now, once you specify http://www.listedjobs.weebly.com as base URL in head section, then you do not have to use complete path of images in body segment.

<html>
<head>
<title>HTML base tag</title>

     <base href="http://www.listedjobs.weebly.com"/>

</head>

<body>

     <img src="/uploads/1/5/9/6/15969036/7536589.jpg?180"/>
     <img src="/uploads/1/5/9/6/15969036/3222737.jpg?140"/>

</body>
</html>

Attributes of  base tag

href: It takes URL as the value

target:It takes four keywords as mentioned below as the value and give command for where to open the target URL.


_blank: open in a new window
_self:  open in the same frame as it was clicked
_parent:open in the parent frameset
_top   :open in the full body of the window


Let's do some HTML coding...

Step 1: Open text editor.

Step 2:

<html>
<head>
<title>HTML base tag</title>

     <base href="http://www.listedjobs.weebly.com"/>

</head>

<body>

     <img src="/uploads/1/5/9/6/15969036/7536589.jpg?180"/>
     <img src="/uploads/1/5/9/6/15969036/3222737.jpg?140"/>
     <a href="http://www.listedjobs.weebly.com" target="_blank">Listed Jobs </a>
</body>
</html>


Step 3:Save the work.

a.Go to file menu at the top of editor,click on it.

b.Find save or save as option, click on it. A box will appear.

c.Create new folder and open it.

d.Find "save as type" option at the bottom of box, select "All Files" options from drop down menu.

e.Give a name to your HTML file,type base.htm or base.html

**You can use either .htm or .html, both are valid extension for HTML file,

f.Click Save.

congratulations, you have created your second offline web page with linking property. open it,click on link of listed job and see the result,


Link tag:

It is used to link an external file like css or script files.

Format:

<link.../>

Example:

<link rel="stylesheet" type="text/css" href="/style.css" />


We will discuss it further in the other classes preferably after css class.


Style tag:

It is used to declare style sheet rules inside the document.

Format:

<style>...</style>

Example:

<style type="text/css">

  h1 { color:#000FF1 }

</style>

We will discuss it further in the other classes.

Script tag:

It is used to include JAVAScript or VBScript inside the document.

Format:

<script>...</script>

Example:

<script type="text/javascript">

      document.write("Calling Javascript...")

</script>

We will discuss it further in the other classes.

Object tag:

It is used to add multimedia files like images, audio files, video files etc. to the web page.param tags are used to define various parameters of an object tag.

Format:

<object>...</object>


Example:

<object title="mp3file" classid="java.class">
  <param name="audio" value="trans.wav" />
  <param name="width" value="300" />
  <param name="height" value="200" />
</object>

We will discuss it further in the other classes.

Let’s discuss the tags, which are used in body segment of HTML document.

Define the tags which are used in body segment of an HTML document.

As you know, body segment displays information (visible to the end user), so, it needs formatting which is done by using various tags like heading tags, paragraph tags, embed tag etc.

We will discuss these tags and learn their uses in next chapters.

Please practice Base tag code

Hyper Text Markup Language (HTML) CLASS I

LEARN FROM IIT PASSOUTS AND INDUSTRY EXPERTS

HTML means Hyper Text Markup Language, is the most common markup language used for Website development.

Pre-requisite for self-learning

•     Working knowledge of Windows or Unix
•     Working knowledge of any text editor, Notepad++ recommended.
•     Working knowledge of creating directories and files
•     Working knowledge of internet browsing using a browsers

What is HyperText ?

HyperText is the text which you use to link HTML documents i.e. web pages together.

What is Markup Language?

Markup Language is a language which uses tags to mark up text and guides web browsers on how to display a text document in a structured way i.e. well designed web page.

When you will combine both of these i.e. HyperText and Markup Language, it becomes HyperText Markup Language or HTML.

What do you mean by tags?

"tags" are those words, you can say HTML keywords, which are used to  mark up text like HTML, head, body, title. When these words are used within either opening tag container i.e. <> or closing tag container </>, they become tags. Different tags have different attributes which you will learn in other classes. In HTML, tags are not case-sensitive, so you can use either upper case or lowercase or even mix uppercase or lowercase letters. Mixing of uppercase and lowercase letters are not recommended.

*HTML tags or HTML elements, both are same.  

Opening tag Ex. <HTML>, <head> etc.

Closing tag Ex. </HTML>, </head> etc.

What is HTML Document ?

An HTML document is a layered structure of HTML tags, explained below in steps.

Step 1:Main layer

<html>

</html>

It starts with <html> tag and ends with </html> tag.

Uses: informs web browsers that this is an HTML document.

Step 2:Main Layer is divided in two layers head and body 

<html>

     <head>

     </head>

     <body>

     </body>

</html>

Uses:  The head segment provides general information about the document like its title,style used,script function etc. which are not availble on the web page display.

Uses: The body segment contains all content which are availble for display on the web page.

The head and body segments, both are divided in to various layers as per requirement.

Now let's do some basic HTML coding.....

Step 1: Open text editor.

Step 2: In editor,type (please, follow structure)

<html>

     <head>

          <title>ENTER TITLE</title>

     </head>

     <body>

          <h1>Enter heading</h1>

          <p>Say something</p>

     </body>

</html>

*<title> is title opening tag.

*<h1> is heading opening tag.

* <p> is paragraph opening tag.

Step 3: Save the work.

1. Go to file menu at the top of editor, click on it.
2. Find save or save as option, click on it. A box will appear.
3. Create new folder and open it.
4. Find "save as type" option at the bottom of box, select "All Files" options from drop down menu.
5. Give a name to your first HTML file,type index.htm or index.html                                               **You can use either .htm or .html, both are valid extension for HTML file.
6.  Click Save.

Congratulations, you have created your first offline web page. Open it, have a look and smile.

Have any questions, Contact Us 


  Google+