-->
Toneysoft Blog

*We are Inspire Our Technology,* Blogging, Tutorial,Download,Widget,Windows phone android Apps,Web design,Seo, Outsourcing,Antivirus ...

Latest Post Toneysoft blog:

Featured post

How to get 1000 up Visitor per video on your Youtube channel Make Money part 2

How to get 1000 up Visitor per vidos On your You Tube Visitor and And Money Money Hidden Tips Toneysoft :  উপরের টাইটেল দেখে হইত বুজ...

more awesome post in below Showing posts with label HTML. Show all postsLevel!
Showing posts with label HTML. Show all posts

বাংলাই সম্পূর্ণ ওয়েবডিজাইন শিক্ষা ও পূর্ণাঙ্গ ওয়েবডিজাইন এর হাতে খরি।

hate khori Web design tutorial Web design tutorial in Bangla

বাংলাই সম্পূর্ণ ওয়েবডিজাইন শিক্ষা ও পূর্ণাঙ্গ  ওয়েবডিজাইন এর হাতে খরি।


HTML  একটি ওয়েবপ্রোগ্রামিং ল্যাঙ্গুয়েজ এবং এর অর্থ হচ্ছে "হাইপার টেস্ট মার্কআপ ল্যাঙ্গুয়েজ" (HTML)
ওয়েবডিজাইন শিখার জন্য HTML জানা টা গুরুত্বপূর্ণ 

আমি আপনাদের শেখার বাংলায় কিভাবে ওয়েবডিজাইন শিখবেন।  আমি আপনাদের কে সহজ ভাবে ও পেক্টিকেল ভাবে ওয়েবডিজাইন করা শেখাব। আশা করি সবাই ভাল ভাবে বুঝতে পারবেন। অনেকের মনে এই ধারণা আছে যে অনলাইন এ মাধ্যমে পরিপূর্ণ ভাবে ওয়েবডিজাইন শেখা যায় না। আমি তাদের উদ্দেশ্য করে বলছি যে আমার এই টিটৈারিয়াল গুলোকে ভাল ভাবে ফলো করলে আপনিও নিজেকে ওয়েবডিজাইনার হিসেবে তুলে ধরতে পারবেন। আমার কেনো ভুল হলে ক্ষমা করবেন। 

আমি আপনাদের আজ HTML কি প্রোগ্রাম লেখার পদ্ধতি সেটা দেখাব: 

HTML একটা কম্পিউটার ল্যাঙ্গুয়েজ, যা পৃথিবীর বিশাল তথ্য-ভান্ডারকে ইন্টারনেটের মাধ্যমে প্রদর্শনের সুযোগ তৈরি করে দিয়েছে। একটা ওয়েব পেজের মূল গঠন তৈরি হয় HTML দিয়ে। HTML কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়, একে Hyper Text Mark Up Language বলা হয়। Mark Up Language এক সেট Mark Up ট্যাগের সমন্বয়ে গঠিত হয়। একটা ওয়েব পেজের বিভিন্ন অংশ ব্রাউজারের মাধ্যমে কিভাবে প্রদর্শিত হবে, তা HTML এ Mark Up ট্যাগ সমূহ ব্যবহার করে প্রকাশ করা হয় ।


 HTML প্রোগ্রাম লেখার পদ্ধতি: 

যে কোন প্রোগ্রাম লেখার জন্যই কোন একটা এডিটর ব্যবহার করে কোডিং করতে হয়। HTML এ প্রোগ্রাম লেখার জন্য প্রাথমিকভাবে এডিটর হিসেবে উইন্ডোজ অপারেটিং সিস্টেমের ডিফল্ট এডিটর notepad ব্যবহার করা যেতে পারে এবং বাড়তি সুবিধা পাবার জন্য এডভান্স এডিটর হিসেবে Dreamweaver এবং Notepad++ ব্যবহার করা ভাল। HTML এ লেখা প্রোগ্রাম .html এক্সটেনশন যেমন index.html দ্বারা Save করে যেকোন ব্রাউজার যেমন Internet explorer, Mozilla Firefox , Google chrome এবং Opera দ্বারা দেখা যাবে।


আশা করি লেখা কপি পেস্ট করে শেখার চেষ্টা করবেন না । কপি পেস্ট করে হয়ত আপনার সুবিধা হবে কিন্তু  পরবর্তিতে আপনার ই অসুবিধা হবে। কপি পেষ্ট করে শিখতে গেলে পরে হয়ত আপনি আর পারবেন কোড মনে থাকবে না তাই কষ্ট করে নোট প্যাড বা আপনি ইডেটর হিসেবে যেটা ব্যবহার করছে কোড গুলো লিখুন এবং ফলাফল দেখুন। 

HTML এ লেখা প্রোগ্রামের মৌলিক অংশ সমূহ

<html>
<head>
<title> www.toneysoftblog.blogspot.com</title>
</head>
<body>
This is my first web page. I am learning now HTML.
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে আপনি ফলাফল পেয়ে যাবেন। 


আমি ছবি আপলোড করলাম না কারন ফলাফল আপনি নিজেয় পেয়ে যাবেন। 

HTML এ লেখা প্রোগ্রামের বিভিন্ন অংশ বিশ্লেষণ

প্রোগ্রামের মধ্যে <> এবং < /> দুইটা চিহ্ন এবং এর মধ্যে কিছু Word যেমন html, head, title, body এগুলোকে Keyword বলে এবং <> বা < /> চিহ্ন এবং এর মাঝে লেখা একটি Keyword কে ট্যাগ বলা হয়। যেমন <head> অর্থ head ট্যাগ। HTML এ দুই ধরনের ট্যাগ রয়েছে , <> চিহ্ন ও keyword নিযে গঠিত ট্যাগকে শুরু ট্যাগ এবং < /> চিহ্ন ও keyword নিযে গঠিত ট্যাগকে শেষ ট্যাগ বলে যেমন 
< title> অর্থ title শুরু ট্যাগ এবং <title /> অর্থ title শেষ ট্যাগ।

<html> বা html ট্যাগ:


HTML এ প্রোগ্রাম লেখার জন্য সমস্ত code কে <html> </html> এর মাঝে লেখা হয়।


<head> বা head ট্যাগ:

<head></head> এর ভেতরে <title> </title> ট্যাগ লেখা হয় যার মাধ্যমে ওয়েবসাইটের title বা শিরোনাম প্রদর্শনের ব্যবস্থা করা হয়। এই code এ title হিসেবে www.tutohost.com লেখা হয়েছে যা ব্রাউজারের title bar এ দেখা যাচ্ছে। এছাড়া css এর stylesheet কে head ট্যাগের মধ্যেই call করা হয়।

<body> বা body ট্যাগ:

<body> বা body ট্যাগ খুবই গুরুত্বপূর্ণ। একটি ওয়েব সাইটের মূল Content সমূহ Body ট্যাগের মধ্যে অবস্থান করে । <body></body> ট্যগের মধ্যেই বিভিন্ন Text , Image, Table ইত্যাদি ফরমেটিং এর জন্য বিভিন্ন ট্যাগ সমূহ লেখা হয় । এই code এ <body></body> ট্যগের মধ্যে  This is my first web page. I am learning now HTML. লেখা হয়েছে যা ব্রাউজারের মূল অংশে প্রদর্শিত হচ্ছে।

যদি বুঝতে না পারেন তাহলে ভিডিও টি দেখুন। 





Web Design for Beginner Web design tutorial Html Part-002

Web Design for Beginner Web design tutorial Html Part-002

HTML Basic Tags

 

Heading Tags

Any document starts with a heading. You can use different sizes for your
headings. HTML also have six levels of headings, which use the elements
<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading,
browser adds one line before and one line after that heading.
Example
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<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>
</body>
</html>


This will produce 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 Tag

The <p> tag offers a way to structure your text into different paragraphs. Each
paragraph of text should go in between an opening <p> and a closing </p>
tag as shown below in the example:
Example
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>

This will produce following result:

Here is a first paragraph of text.
Here is a second paragraph of text.

Here is a third paragraph of text.

Line Break Tag

Whenever you use the <br /> element, anything following it starts from 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.The <br /> tag 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 <br> it is
not valid in XHTML.

Example
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment on time.<br />
Thanks<br />
Toneysoft</p>
</body>
</html>

This will produce following result:
Hello
You delivered your assignment on time.
Thanks
Toneysoft

Centering Content

You can use <center> tag to put any content in the center of the page or any
table cell.

Example

<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>


This will produce following result:
This text is not in the center.
This text is in the center.

Horizontal Lines

Horizontal lines are used to visually break up sections of a document. The
<hr> tag creates a line from the current position in the document to the right
margin and breaks the line accordingly.
For example, you may want to give a line between two paragraphs as in the
given example below:

Example
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
This will produce following result:
This is paragraph one and should be on top

This is paragraph two and should be at bottom

Again <hr /> tag is an example of the empty element, where you do not need
opening and closing tags, as there is nothing to go in between them.
The <hr /> element has a space between the characters hr and the forward
slash. If you omit this space, older browsers will have trouble rendering the
horizontal line, while if you miss the forward slash character and just use
<hr> it is not valid in XHTML.

Preserve Formatting

Sometimes you want your text to follow the exact format of how it is written
in the HTML document. In those cases, you can use the preformatted tag
<pre>.Any text between the opening <pre> tag and the closing </pre> tag will
preserve the formatting of the source document.

Example
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>

This will produce following result:
function testFunction( strText ){
alert (strText)
}


Try using same code without keeping it inside <pre>...</pre> tags.
Nonbreaking Spaces
Suppose you want to use the phrase "12 Angry Men." Here you would not want a
browser to split the "12, Angry" and "Men" across two lines:
An example of this technique appears in the movie "12 Angry Men."
In cases where you do not want the client browser to break text, you should
use a nonbreaking space entity &nbsp; instead of a normal space. For
example, when coding the "12 Angry Men" in a paragraph, you should use
something similar to the following code:

Example
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</p>
</body>
</html>

Web Design for Beginner Web design tutorial part 001

Web Design for Beginner Web design tutorial Html Part-001


HTML - Overview

HTML stands for Hypertext Markup Language, and it is the most widely used
language to write Web Pages.
 Hypertext refers to the way in which Web pages (HTML documents) are
linked together. Thus the link available on a webpage are called

Hypertext.

 As its name suggests, HTML is a Markup Language which means you
use HTML to simply "mark up" a text document with tags that tell a
Web browser how to structure it to display.
Originally, HTML was developed with the intent of defining the structure of
documents like headings, paragraphs, lists, and so forth to facilitate the
sharing of scientific information between researchers.
Now, HTML is being widely used to format web pages with the help of different
tags available in HTML.
Basic HTML Document

In its simplest form, following is an example of an HTML document:

<!DOCTYPE html><html><head><title>This is document title</title></head><body><h1>This is a heading</h1><p>Document content goes here.....</p></body></html>
Let's save it in an HTML file test.htm using your favorite text editor. Finally
open it using a web browser like Internet Explorer or Google Chrome, or

Firefox etc. It must show the following output:

HTML Tags

As told earlier, HTML is a markup language and makes use of various tags to
format the content. These tags are enclosed within angle braces <Tag Name>.
Except few tags, most of the tags have their corresponding closing tags. For
example <html> has its closing tag </html> and <body> tag has its closing
tag </body> tag etc.

Above example of HTML document uses following tags:

To learn HTML, you will need to study various tags and understand how they
behave while formatting a textual document. Learning HTML is simple as
users have to learn the usage of different tags in order to format the text or
images to make a beautiful webpage.
World Wide Web Consortium (W3C) recommends to use lowercase tags

starting from HTML 4.

HTML Document Structure
A typical HTML document will have following structure:
Document declaration tag

<html><head>

Document header related tags

</head><body>

Document body related tags

</body></html>

We will study all the header and body tags in subsequent chapters, for now
let's see what is document declaration tag.
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration tag is used by the web browser to understand
the version of the HTML used in the document. Current version of HTML is 5
and it makes use of the following declaration:

<!DOCTYPE html>

There are many other declaration types which can be used in HTML document
depending on what version of HTML is being used. We will see more details

on this while discussing <!DOCTYPE...> tag along with other HTML tags.

HTML Basic tutorial for beginner part -012

HTML Basic tutorial for beginner part -012.




Today I'll show you how in HTML, audio, video, flash ad in the HTML of this Part.







Discribe audio fo HTML 

In the presentation of a subject, as well as text and photo use the audio or video becomes more vivid.

As well as the weight of the web can be done through the media , and other media cannot.  HTML pages made by the <embed> tag are used to add audio files easily and control the process.


Project instruction 



<html>

<head>
<title>toneysoft09</title>
</head>
<body >
<p>
<center>
<embed src="audio.mp3" height="35" width="300"
controller="true" loop="false" autostart="false">
</embed>
<h3 style="color:#F00">Click play button and enjoy
music.</h3>
</center>
</p>
</body>

</html>


Take a notepad and write in this code in notepad, notepad into file, click save as index.html file name and press save button to deliver the file. 


Project Details: 




<embed> add the audio file tags.




<embed src="audio.mp3" Height="35" width="300"

controller="true" loop="false" autostart="false">
</embed>

Src=sudio.m3" 


This src="..........." added the audio file link

Height="35" width="300" 



Web pages displayed on the audio player via the audio player is settled shape.


Controller="true"





Through the web page it is determined whether the audio will be displayed. If the controller = "......... .." is written in the true and false, then the audio player will appear in the text will not appear in the audio player.
Controller display web page the :

Auto start:


Autostart= "......... .." is written in the true and false, then the audio player will play in the text will not play in the audio player.

Video: 



HTML produced by the <embed> tag is used to control the process can be easily add video
In a video to the desktop folder of your choice or for example a video . video.wmv folder to save the place.

Project instructin:

<html>
<head>
<title> www.toneysoft09.com</title>
</head>
<body >
<p>
<center>
<embed src="video.wmv" width="344" height="300"
autostart="false" controller="true" loop="false" > </
embed>
<h3 style="color:#F00">Click the play button and enjoy
video.</h3>
</center>
</p>
</body>
</html>

Project Details: 




<embed> add the Video file tags.




<embed src="Video.wav" Height="35" width="300"

controller="true" loop="false" autostart="false">
</embed>

Src=sudio.m3" 


This src="..........." added the Video.wav file link

Height="35" width="300" 



Web pages displayed on the Video player via the Video player is settled shape.


Controller="true"





Through the web page it is determined whether the video will be displayed. If the controller = "......... .." is written in the true and false, then the video player will appear in the text will not appear in the video player.
Controller display web page the :

Auto start:


Autostart= "......... .." is written in the true and false, then the video player will play in the text will not video play in the audio player.

Take a notepad and write in this code in notepad, notepad into file, click save as index.html file name and press save button to deliver the file. 


Flash Add:


In a video to the desktop folder of your choice or for example a video . flash.swf folder to save the place .

<html>
<head>
<title> www.toneysoft09.com</title>
</head>
<body >
<p>
<center>
<embed src="flash.swf " width="344" height="300"
autostart="false" controller="true" loop="false" > </
embed>
<h3 style="color:#F00">Click the play button and enjoy
video.</h3>
</center>
</p>
</body>

</html>

<embed src="flash.swf " width="344" height="300"
autostart="false" controller="true">

</embed>

Project Details: 



<embed> add the Flash file tags.




<embed src="flash.swf " Height="35" width="300"

controller="true" loop="false" autostart="false">
</embed>

Src=sudio.m3" 


This src="..........." added the flash.swf  file link

Height="35" width="300" 



Web pages displayed on the Video player via the Flash player is settled shape.


Controller="true"





Through the web page it is determined whether the Flash will be displayed. If the controller = "......... .." is written in the true and false, then the Flash player will appear in the text will not appear in the Flash player.
Controller display web page the :

Auto start:


Autostart= "......... .." is written in the true and false, then the Flash player will play in the text will not Flash play in the audio player.


Take a notepad and write in this code in notepad, notepad into file, click save as index.html file name and press save button to deliver the file. 

Now HTML Tutorial Will be completed , Next Tutorial is CSS Writing Soon

Previous All Tutorials :





HTML basic tutorial for beginner part-011.

Today I will give you the html of the 11th  tutorial. They showed that today,



** Meta elements:
** Style
** Html the use of scripts

Meta elements:



Meta " search engine optimization" (SEO) is the most essential works.
Meta tags are the subject of this tutorial, I 'll discuss next.

Style:



Internal style sheets for use <style> </ style> For example,

HTML is a programming language.  To add to the convenience of the web pages Programming Language is used for different types of scripting, Java, and so on jquery. Java, J to add the query script in the HTML <script> </ script> tag is used.

JavaScript, etc. Jquery scripts in the HTML <script> </ script> tag are used.



<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"
src="sliding_effect.js"></script>

Follow the Example:


<html>
<head>
<title> www.tutohost.com</title>
<script type="text/javascript">
function show_alert()
{alert("Welcome to www.toneysoft09.com");}
</script>
</head>
<body bgcolor="#009933" >
<input type="button" style="margin-left:150px;
width:100px; height:50px; font-size:18px; color:#F00"
onclick="show_alert()" value="Click Me" />
</body>
</html>


Copyright © 2015 Toneysoft Blog All Right Reserved
^