Monday, October 31, 2011

HTML Tutorial part - 7 ( Text formatting tags - part -3)

HTML Allows various type of Text formatting tags.

HTML Tutorial in Bangla.



Bellow describe this :
<marquee> : This tag is used for indicating any scrolling type content.
<Blink> : This tag is used for indicating any blinking header type content.
<address> : This tag is used for indicating an address. If you write any address type content in your HTML document, then you can use this address tag.
<center>:This tag is used to center-align HTML elements.
<blockquote> : This tag is used for indicating long quotations.
<q> : This tag is used for indicating short quotations. This tags including content show will including a short quotations. 


Example of Above tags -

<!--textformat.html-->
<html>
<head>
  <title>HTML Text Formatting tags part - one</title>
</head>
<body>
<marquee> This is scroling text style..</marquee>
<blink> BD News.</blink>
<pre><p> This         is paragraph
            format.</p>
</pre>
<center><p>Contact Me.</p>
<address><p> Sahidur Rahman Suman<br />
Dhaka - 1207<br />
Bangladesh<br />
</p></address>
</center>

<p>Here is a long quatation.<p>
<blockquote>
HTML stands for Hypertext Markup Language, is the common markup language for creating or describing a web pages. It is not a programming language, it is a markup language.HyperText is a system for linking together concepts within and among documents.
</blockquote>
<br />
<p> Here comes a short quatation: <q> This is a short quatation.</q></p>
</body>
</html>

Output will be shown as bellow -
This is scroling text style..
BD News.
This      is paragraph 
   format.


Contact Me.
Sahidur Rahman Suman

Dhaka - 1207

Bangladesh



Here is a long quatation.
HTML stands for Hypertext Markup Language, is the common markup language for creating or describing a web pages. It is not a programming language, it is a markup language.HyperText is a system for linking together concepts within and among documents.

Here comes a short quatation: This is a short quatation.

Saturday, October 22, 2011

HTML Tutorial part - 6 ( Text formatting tags - part - 2)

HTML Allows various type of Text formatting tags.

HTML Tutorial in Bangla.



Bellow describe this :
<ins> : This tag content style is insert style. if you want to show that you insert some text in your web pages that time you can use this element. 
<del> : This tag content style is delete style. If you want to show that you delete some text from your web pages that you can use this element.
<strike> : This tag enclosed text is displayed as like del element style.
<cite>: This tag content style is citation style. This tags enclosed text is displayed with Italic too. This tag use for write any quotation in web document.
<code> : This tag content style is computer code style. If you want to write any computer programming source code in your web pages that time you can use this element.
<samp> : This tag content style is sample style.
<var> : This tag content style is variable style.
<tt> : This tag content style is Tele Style.
<sub> : This tag content style is Subscript style. It will be use when you write any subscript type content like chemical name or atomic name or chemical equation.
  <sup> :  This tag content style is Superscript style. It will be use when you write any Subscript type content  like mathematical equations.

Example of Above tags -

<!--textformat.html-->
<html>
<head>
  <title>HTML Text Formatting tags part - one</title>
</head>
<body>
    <ins> This is insert style</ins><br />
    <del> This is delete style</del><br />
    <strike> This is strikethrough Style</strike><br />
    <cite> This is citation style.</cite><br />
    <code> This is computer code style</code><br />
    <samp> This is sample style</samp><br />
    <var> This is variable style</var><br />
    <tt> This is telestyle</tt><br />
    Subscript - H<sub>2</sub><br />
    Superscript - a<sup>2</sup>+2ab+ b<sup>2</sup>
</body>
</html>

Output will be shown as bellow -
This is insert style

This is delete style

This is strikethrough Style

This is citation style.

This is computer code style

This is sample style

This is variable style

This is telestyle

Subscript - H2

Superscript - a2+2ab+ b2

Thursday, October 20, 2011

HTML Tutorial part - 5 ( Text formatting tags - part - 1)

HTML Allows various type of Text formatting tags.

HTML video Tutorial in Bangla



Bellow describe this :
<big>. The big elements content is displayed with bigger than normal style
<small>:The enclosed text is displayed with Small size.
<b>:This tags enclosed text is displayed with Bold.

<i>:This tags enclosed text is displayed with Italic.
<u>:This tags enclosed text is displayed with Underline.
<strong>:This tags enclosed text is displayed with Strong Style.
<em>: This tags indicates that the enclosed text should be displayed with emphasis, displayed italic.
<abbr>:This tag use for Abbreviation of a word or organization.
<acronym>:This tag use also for Acronym of a word or organization. It's output same as <abbr> tag

Example of Above tags -

<!--formatting.html-->
<html>
<head>
  <title>HTML Text Formatting tags part - one</title>
</head>
<body>
This is normal style
<big>This is big Style..</b><br />

<small>This is Small Font Style..</small><br />
<b>This is bold Style..</b><br />
<i>This is italic Style..</i><br />
<u>This is underline Style..</u><br />
<strong>This is Strong Style..</strong><br />
<em>This is emphasis Style..</em><br />

<abbr title="United Nations"> UN </abbr><br />
<acronym title="Hypertext Markup Language"> HTML </acronym><br />
</body>
</html>

Output will be shown as bellow -

This is normal style
This is big Style.
This is Small Font Style..
This is bold Style..
This is italic Style..
This is underline Style..
This is Strong Style..
This is emphasis Style..
UN
HTML

Saturday, October 15, 2011

HTML Tutorial Part - 4 ( Heading and paragraph )


HTML Heading

Web pages Heading defined with <h1> to <h6> tags.If you want to write any heading types content, you will use following tags in your web pages .

HTML Bangla Video Tutorial


For example :

<!--heading_1.html-->
<html>
<head>
  <title>HTML Heading:</title>
</head>
<body>

<h1> Header one..</h1>
<h2 align="center"> Header two..</h2>
<h3 align="right"> Header three..</h3>
<h4 align="justify"> Header four..</h4>
<h5> Header five..</h5>
<h6> Header six..</h6>

</body>
</html>

Above Examples output will be shown as bellow -

Header one..

Header two..

Header three..

Header four..

Header five..
Header six..


HTML paragraph

Web pages paragraph defined with <p> tags . If you will write any paragraph type content in your web pages, you will use this p elements.

For example :
<!--heading_2.html-->
<html>
<head>
  <title>HTML Paragraph:</title>
</head>
<body>

<p> Welcome to the web development tutorial. HTML is a markup language for creating a web pages. HTML stands for Hypertext markup language.</p>

</body>
</html>


Above Examples output will be shown as bellow -
Welcome to the web development tutorial. HTML is a markup language for creating a web pages. HTML stands for Hypertext markup language.

HTML page break

Web pages page Break defined with <br/> tags
For example :

<!--paragraph_3.html-->
<html>
<head>
  <title>HTML page break:</title>
</head>
<body>

<p> This is a <br />paragraph..</p>
<p> Above line break for &lt;br /> tags</p>

</body>
</html>
Above Examples output will be shown as bellow -
This is a
paragraph..

Above line break for <br /> tags

HTML Horizontal Rule

Web pages Horizontal Rule defined with <hr/> tags

For example :

<!--paragraph_3.html-->
<html>
<head>
  <title>HTML Horizontal Rule:</title>
</head>
<body>

<h1> Bellow line is show for <hr /> tags</h1><hr/>

<h3 align="right"> Header three..</h3><hr/>
<h4 align="justify"> Above line is show for &lt;hr /> tags</h4>
<h5> Header five..</h5>
<h6> Header six..</h6>
<hr/>
<p> Above line is show for &lt;hr /> tags</p><br/>

</body>
</html>

Above Examples output will be shown as bellow -

Bellow line is show for <hr /> tags


Header three..

Above line is show for <hr /> tags

Header five..
Header six..
Above line is show for <hr /> tags


Thursday, October 13, 2011

HTML Tutorial Part - 3 ( Dreamweaver Setup )

Macromedia Dreamweaver is a powerful and most easiest web Editor Software for making web pages. Most Web Developer use this IDE (Integrated Development Environment ) for making different types of web pages easily.

It's supports major operating Systems.Also you can make HTML, CSS , Java Script, PHP, ASP , Coldfusion pages using the Macromedia Dreamweaver.

How to Setup Macromedia Dreamweaver in Bangla Video Tutorial



Dreamweaver Tutrial in English.







Bellow Screen shoot of Macromedia Dreamweaver download and Installation process step by step -

Step - 1: First you will browse this link - http://www.adobe.com/downloads/ for Download the Macromedia Dreamweaver IDE or purchase any version of Macromedia Dreamweaver. Here show the Dreamweaver 8 installation process -





Step - 2: Now you will click Dreamweaver8-en Installer -



Step - 3: Wait few seconds -

Step - 4: Then you will click Next (According to bellow this picture) -

Step - 5: Then you will select I accept the terms in the license agreement and click Next -

Step - 6: Choose any check boxes if you want to create a shortcut in Desktop and click Next -

Step - 7: Select Check Boxes and click Next -

Step - 8: click Install (According to bellow picture) -

Step - 9: Wait Few minutes -

Step - 10: click Finish -


Step - 11: Then you will open Macromedia Dreamweaver8,
Start->All Programs->Macromedia->Macromedia Dremweaver 8 (According to bellow this picture -


Step - 12: Select Designer or Coder and then click Ok -


Step - 13 : If you have Macromedia Dreamweaver Serial Key, you can select first one else you can select another one (use only 30 days Trial version) and then click continue -


Step - 14: Put the Serial Key -


Step - 15: Copy Serial Key -

Step - 16: Then Paste Serial Key and Click Continue Button -

Step - 17: Activation Successfull and also you can Register your Macromedia Dreamweaver Copy (According to bellow this picture) -

Step - 18: Ready for coding, Select any one -






Monday, October 10, 2011

HTML Tutorial - Part - 2 ( create html page with Notepad )


In this tutorial I will show you How to make a web page using a Simple text Editor Notepad ( for Windows Operating System Users ) Step By Step –

HTML Tutorial in Bangla Language Video






HTML Tutorial in English Language Video.





  
Step – 1:  Click Start - > All Programs - > Accessories --> Notepad.  Open Notepad Text editor and write HTML tags according to bellow screen shot.



Step – 2:  Now click Save this file in your computer Hard drive.






Step – 3:  It will be better that at first you will create a folder in any drive where you want to save this web page. I have created a folder in my computer’s Drive G( Drive name Projects ) and project folder name is ( selfstudy ). Then I created an another folder name ( images ) inside selfstudy folder where I can store images for this website ( selfstudy ). ( it is optional for this tutorial ). And all of web pages will be saved inside the selfstudy folder ( your folder created in your computer where you want to save your webpage ) .

I have saved this page inside the selfstudy folder name as index.html ( Computer -> Project(G) -> selfstudy, in my computer's directory),
Beacause every website should have a Home page. Web browser is not recognized which one is home page. Web browser know index page. When a user submit a url ( Like www.google.com ) in a browser for visiting that website. Then browser will find index page from that web servers and the server will send this page to browser.

So, Your website’s Home page name must be name as index.html. or ( index, language wise file extension, if website is developed by PHP language, home page name will be index.php )




Step – 4 :  Then Go to your Computer’s Hard drive save this web page and open this page with Any web browser ( like - Internet Explorer, Mozilla Firefox, Opera, Chrome ).

I save my web page in my computer’s this directory –
My Computer - > Project(G) -> selfstudy

Then open index.html page.
Select index -> click right mouse -> open with -> Firefox





Step – 5:  Then the output of this web pages will be shown bellow style.



Describe Above outputs –

"This is a header" output show for <h1> element or ( <h1> and </h1> tags )
"This is a paragraph" output show for <p> element or ( <p> and </p> tags )
"This is another paragraph" output show for <p> element or ( <p> and </p> tags ) . but this <p> element’s output show with two lines. Because You can go to first step screen shot and this <p> element source code was like <p>This is <br /> another paragraph. </p> . This <br /> tags create a new line or line break. That’s why this output show with two lines.


Saturday, October 08, 2011

HTML Tutorial - Theory Part - 1


HTML stands for Hypertext Markup Language, is the common markup language for creating or describing a web pages. It is not a programming language, it is a markup language.
A markup language is a language for communicating to a web browser how the contents of a page will be displayed. In HTML this extra information is communicated to the browser in the form of codes or "tags".
HTML is written in the form of "tags" that are surrounded by angle brackets like start tag <html> and end tag </html>.
An HTML file have an .htm or .html file extension as like index.html , about_us.htm, which can identify that the page is a web page or HTML Documents.

HTML Tutorial( Bangla )




HTML Tutorial ( English )



HTML Tags

Tags is the important part of Hypertext Markup language. HTML Tags give instruction a browser how to display the page content. In other words, HTML Tag is one kind of command, how and what type content will display in the browser window.

HTML tags are english words written by angle brackets like <html>. It has two parts. One is Opening tag or Start tag ( written by angel bracket (< then tag-name and then again angel bracket ( > ), e.g <h1> ) and another is Closing tag or end tag( written by angel bracket ( < )then backslash or Slash ( / ) then tag-name then again angel bracket (>), e.g </h1> ).
HTML tags normally come in pairs like opening tag <h1> and closing tag </h1> expect empty element.

How to start

You need something for make a website. Bellow describe this:
  • Editor
  • Browser
 Editor:
An HTML Editor is a application software for creating, editing and modifying web pages. Although the HTML markup of a page can be written with any text editor, specialized HTML Editors can offer more visual writing features for web developers.

HTML Editors more features as like graphical authoring tools and content management systems make easy to write, edit and modify web pages.
HTML Editors give you features that aren't usually available in plain text editors.Bellow some Text and HTML Editors List :

Web Browser:

A Browser is only HTML web pages reading Application software. A Web Browser is designed to read the instructions or HTML Tags, in order to render the page graphically.
A Web browser is a client software that uses HTTP (Hypertext Transfer Protocol) to make requests of Web servers throughout the Internet on behalf of the browser user.Then server send requested page to users computer and users computer browser translate HTML pages and display the visual content, dont't display the HTML Tags
Bellow some browsers List:

HTML Syntax

A HTML document contains two distinct parts, the head and the body. The head contains information about the document that is not displayed on the screen. The body then contains everything else that is displayed as part of the web page.
The basic structure then of any HTML page is:
Explained Above HTML Syntax:
  • <DOCTYPE – Document types define which HTML version you use .
  • The <html> and </html> tags identifies that this document is a web page or HTML document.
  • The <head> and </head> tags are specifies page information which is not visible in a web page.
  • The <title> and </title> tags are assigns to page name. title content generally displayed at top of browser.
  • The <body> and </body> tags are contains page contents which is visible in Browser window.

HTML Elements

HTML documents or web pages are defined by HTML elements. Say other hands a collection of HTML elements make a web page or HTML Documents.
HTML Elements has normally three parts.
  • An HTML element starts with a start tag / opening tag. ( <h1> )
  • An HTML element ends with an end tag / closing tag. (</h1>
  • The element content is everything between the start and the end tag.
Example of Elements -

 HTML Attribute
Attributes are instructions that clarify and modify an element. Attributes provide additional information about HTML elements.

The syntax for attributes is as follows: