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.