HTML COURSES

:: ওয়েব ডিজাইনারদের জন্য প্রয়োজনীয় ৮ টি টুলস ::

ওয়েব ডিজাইন হলো একটি আর্ট। ক্রিয়েটিভিটি আর চেষ্টা থাকলে যে কেউ ওয়েব ডিজাইনার হতে পারে। ওয়েব ডিজাইনারদের সহায়তার জন্য অনেক টুলস রয়েছে। এই টুলসগুলো ওয়েব ডিজাইনারের কাজকে সহজ করে। আসুন জেনে নিই তেমনি কিছু প্রয়োজনীয় টুলস সম্পর্কে।

ফায়ার এফটিপি
ডিজাইনারদেরকে কাজের প্রয়োজনে সার্ভারে ফাইল আপলোড করতে হয়। ব্রাউজার দিয়ে সার্ভারে ফাইল আপলোড করা বেশ ঝামেলারই বটে। তবে ব্রাউজারকেই যদি এফটিপি সফটওয়্যার বানিয়ে সমস্যাটির সমাধান করা সম্ভব। ‘ফায়ার এফটিপি’ মজিলা ফায়ারফক্সের অ্যাডঅন বা এক্সটেনশন যেটি ব্রাউজারের উইন্ডোতেই এফটিপি সার্ভারে অ্যাক্সেসের সুযোগ দেয়। এই অ্যাডঅনটি থাকলে আলাদভাবে এফটিপি ক্লায়েন্ট ব্যবহারের দরকার নেই। এটি ব্রাউজার থেকে এফটিপি ক্লায়েন্ট সফটওয়্যারে মুভ করার সময় বাঁচায়।
ডাউনলোড ও ইন্সটল করতে http://bit.ly/dEDeMS এখানে ক্লিক করুন।

ফায়ারবাগ
একজন ওয়েব ডিজাইনার বা ডেভেলপারের জন্য সবচেয়ে উপযোগি ও কাজের অ্যাডঅন বলা হয় ‘ফায়ারবাগ’কে। এটির মাধ্যমে সিএসএস, এইচটিএমএল, জাভাস্কিপ্ট কোড পরিবর্তন করে সরাসরি সেই পরিবর্তন লক্ষ্য করা যায়। এভাবে পরিবর্তন করার পর কোডটি কপি করে আপনি মূল ফাইলে আপডেট করে সহজেই আপনার পছন্দের ডিজাইনটি তৈরি করতে পারবেন।  
ডাউনলোড ও ইন্সটল করতে http://bit.ly/fx8bQ3 এখানে ক্লিক করুন।


এইচটিএমএল ভেলিডেটর
 এটিও ফায়ারফক্স অ্যাডঅন, যা ওয়েবপেজের এইচটিএমএলকে ব্রাউজারে যথার্থভাবে সমর্থন করতে সহায়তা করে। যখন কোনো ওয়েবপেজ ফায়ারফক্সে লোড হয় তখন এটি এইচটিএমএল ভেলিডেট করে এবং স্ট্যাটাসবারে একটি আউকন দেখায়। যখন আপনি ঐ আইকনের উপর আপনার মাউস রাখবেন তখন এটি এইচটিএমএল ভুলগুলো প্রদর্শন করে। আপনি আরেকটি উইন্ডোতে এই ভুলগুলোর সোর্সকোড দেখতে পাবেন।
ডাউনলোড ও ইন্সটল করতে http://bit.ly/YPIE5g এখানে ক্লিক করুন।

সিএসএস ভেলিডেটর
এটিও মজিলা ফায়ারফক্সের আরেকটি অ্যাডঅন যা সিএসএস ভেলিডেট করে। এটি ডব্লিউথ্রিসি সিএসএস ভেলিডেশনের সঙ্গে সম্পৃক্ত ও সিএসএস ভুলগুলো খুঁজে পেতে সহায়তা করে। মাউসের ডানবাটন ক্লিক মেনুর মাধ্যমে এই ভুলগুলো আরেকটি নতুন ব্রাউজারে দেখা যায়।  
ডাউনলোড ও ইন্সটল করতে http://bit.ly/fx8bQ3 এখানে ক্লিক করুন।

কালার ডিটেক্টর
এটি একটি সফটওয়্যার যা আপনার মনিটর স্কিনের যেকোনো স্থানের কালার বা রঙ ডিটেক্ট করে এবং ঐ কালারটির একটি হেক্সাডেসিমেল কালার কোড তৈরি করে। আপনার স্কিনে দেখা কোনো কালার আপনার ওয়েবপেজে ব্যবহার করতে চাইলে এই সফটওয়্যারের মাধ্যমে আপনি ঐ কালার কোডটি নিয়ে ব্যবহার করতে পারবেন। এজন্য ঐ কালারটির উপর আপনার মাউসের কার্সরটি নিন, এরপর ফ্রিজের জন্য F5 চাপুন ও হেক্সাকোড কপির জন্য F6 চাপুন। তাহলে আপনার পছন্দের কালারটির হেক্সাকোড উইন্ডোজ ক্লিপবোর্ডে যুক্ত হয়ে যাবে এবং আপনি ব্যবহার করতে পারবেন।  
ডাউনলোড ও ইন্সটল করতে http://bit.ly/UWAwmL এখানে ক্লিক করুন।

কালার লাভার
এটি একটি ওয়েব বেসড সার্ভিস। এখানে আপনি বিশ্বের বিভিন্ন প্রান্তের ব্যবহারকারীদের ব্যবহৃত কালার, প্যাটার্ন এবং কালার প্যাটার্ন খুঁজে পাবেন। এখন আপনার ওয়েব পেজের সঙ্গে মানানসই ও প্রয়োজনীয় কালারটি বেছে নিতে পারে। যারা কালার বা রঙ পছন্দ করেন তাদের জন্য এটি একটি অসাধারণ জায়গা।
এই ওয়েব সাইটে যেতে http://bit.ly/xZ4mZ এখানে ক্লিক করুন।

মেজারআইটি
এটিও একটি ফায়ারফক্স অ্যাডঅন, যা একটি ওয়েবপেজের পেজ এলিমেন্ট পরিমাপ করে। এটি ওয়েবপেজের উপর রুলার আঁকে এবং পেজ এলিমেন্টটির বিভিন্ন পরিমাপের তথ্য দেয়। এই টুলের মাধ্যমে আপনার যে লেআউটটি পছন্দ হোক সাথে সাথেই তা পরিমাপ করতে পারবেন এবং আপনার ওয়েব ডিজাইনে সেটি ব্যবহার করতে পারবেন।  
ডাউনলোড ও ইন্সটল করতে http://bit.ly/f1EwWI এখানে ক্লিক করুন।

কম্পফাইট
এটি একটি ওয়েব নির্ভর সার্চ টুল যা ইমেজ শেয়ারিং সাইট ফ্লিকার থেকে ইমেজ অর্থাৎ ছবি খুঁজে পেতে সহায়তা করে। আপনার ওয়েবসাইটে ব্যবহারের জন্য মানানসহ ছবি দ্রুত খুঁজে পেতে এই সফটওয়্যারটি অসাধারণ কাজে লাগবে।
এই ওয়েব সাইটে যেতে http://bit.ly/9dkr6F এখানে ক্লিক করুন।

কাজের ক্ষেত্রে সহায়ক এমন টুলস বা সফটওয়্যার সম্পর্কে কি আরো জানতে চান? আপনাদের
কাছ থেকে সাড়া পেলে এই বিষয়ে আরো সহায়ক তথ্য দেওয়ার চেষ্টা করা হবে।

আপনি কি এ ধরণের সহায়ক তথ্য পেতে চান?
১. হ্যাঁ,
২. না

[ধন্যবাদান্তে- ডেভসটিম ইনস্টিটিউট]

এইচটিএমএল টিউটোরিয়াল - (HTML5 এর সঙ্গে সঙ্গতিশীল

HTML এর সঙ্গে আপনি আপনার নিজস্ব ওয়েব সাইট তৈরি করতে পারেন.
এই টিউটোরিয়ালটি শিক্ষা এইচটিএমএল সম্পর্কে সবকিছু আপনি.
এইচটিএমএল শিখতে হয় সহজ - আপনি এটা ভোগ করবে.

প্রতিটি অধ্যায় উদাহরণ

এই এইচটিএমএল টিউটোরিয়াল এইচটিএমএল শত শত উদাহরণ রয়েছে.
আমাদের অনলাইন HTML সম্পাদক সঙ্গে, আপনি HTML সম্পাদনা, এবং একটি বাটন ফলাফল দেখতে ক্লিক করতে পারেন.

উদাহরণ

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

এটা নিজে চেষ্টা করুন » "এটা নিজে চেষ্টা করুন" বাটন কিভাবে এটি কাজ করে দেখতে ক্লিক করুন
এখন এইচটিএমএল শেখার শুরু!

HTML এর উদাহরণ

এইচটিএমএল টিউটোরিয়াল আপনি 100 টিরও বেশি উদাহরণ খুঁজে পাবেন শেষে আপনি এবং নিজেকে সম্পাদনা পরীক্ষা করতে পারবেন.
HTML এ যান উদাহরণ!

এইচটিএমএল ক্যুইজ টেস্ট

W3Schools এ আপনার HTML দক্ষতা পরীক্ষা করুন!
এইচটিএমএল ক্যুইজ শুরু!

এইচটিএমএল তথ্যসূত্র

W3Schools আপনাকে ট্যাগ, মান গুণাবলী, প্রমিত ঘটনা, colornames, সত্ত্বা, চরিত্র-সেট, URL টি এনকোডিং, ভাষা কোড, HTTP-র বার্তা, এবং আরো সম্পর্কে সম্পূর্ণ রেফারেন্স খুঁজে পেতে হবে.
এইচটিএমএল ট্যাগ রেফারেন্স

এইচটিএমএল পরীক্ষা - তোমার ডিপ্লোমা পান!

W3Schools সার্টিফিকেশন

W3Schools 'অনলাইন সার্টিফিকেশন

পেশাদার যারা কাজ, পরিবার, এবং বিল্ডিং কর্মজীবনের মধ্যে সামঞ্জস্য বজায় রাখা প্রয়োজন জন্য উপযুক্ত সমাধান.
আরো তুলনায় 10 থেকে 000 সার্টিফিকেট ইতিমধ্যেই জারি!
তোমার সার্টিফিকেট পান »
এইচটিএমএল সার্টিফিকেট এইচটিএমএল আপনার জ্ঞান একটি নথি.
HTML5 সার্টিফিকেট উন্নত HTML5 আপনার জ্ঞান একটি নথি.
CSS এর সার্টিফিকেট উন্নত সিএসএস আপনার জ্ঞান একটি নথি.
জাভাস্ক্রিপ্ট সার্টিফিকেট জাভাস্ক্রিপ্ট এবং HTML এর DOM আপনার জ্ঞান একটি নথি.
jQuery সার্টিফিকেট jQuery আপনার জ্ঞান একটি নথি.
XML-সার্টিফিকেট এক্সএমএল, XML-DOM এবং XSLT আপনার জ্ঞান একটি নথি.
এএসপি সার্টিফিকেট এএসপি, এসকিউএল, এবং ADO আপনার জ্ঞান একটি নথি.
পিএইচপি সার্টিফিকেট পিএইচপি এবং এসকিউএল (মাইএসকিউএল) আপনার জ্ঞান একটি নথি.

Example Explained

  • The DOCTYPE declaration defines the document type
  • The text between <html> and </html> describes the web page
  • The text between <body> and </body> is the visible page content
  • The text between <h1> and </h1> is displayed as a heading
  • The text between <p> and </p> is displayed as a paragraph

What is HTML?

HTML is a language for describing web pages.
  • HTML stands for Hyper Text Markup Language
  • HTML is a markup language
  • A markup language is a set of markup tags
  • The tags describe document content
  • HTML documents contain HTML tags and plain text
  • HTML documents are also called web pages

    HTML Tags

    HTML markup tags are usually called HTML tags
  • HTML tags are keywords (tag names) surrounded by angle brackets like <html>
  • HTML tags normally come in pairs like <b> and </b>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The end tag is written like the start tag, with a forward slash before the tag name
  • Start and end tags are also called opening tags and closing tags

HTML Elements

"HTML tags" and "HTML elements" are often used to describe the same thing.
But strictly speaking, an HTML element is everything between the start tag and the end tag, including the tags:
HTML Element:
<p>This is a paragraph.</p>

Web Browsers

The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:
Browser

HTML Page Structure

Below is a visualization of an HTML page structure:
<html>
<body>
<h1>This a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>


HTML Versions

Since the early days of the web, there have been many versions of HTML:
Version Year
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013


The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration helps the browser to display a web page correctly.
There are many different documents on the web, and a browser can only display an HTML page 100% correctly if it knows the HTML type and version used.

Common Declarations

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
For a complete list of document type declarations, go to our DOCTYPE Reference.


Build Your Powerful HTML Website for Free with Wix

Start building your own stunning website - programming free!
Wix.com provides a free, easy-to-use online platform that lets you create and publish your own unique website. Its powerful editing tools & customizable website designs make building a beautiful website easy.
Add eCommerce features, connect a custom domain and experience superior SEO results. Wix is your ultimate solution for creating an exquisite HTML website.
Over 20 million users have created their website with Wix.
Create yours now! »

Writing HTML Using Notepad or TextEdit

HTML can be edited by using a professional HTML editor like:
  • Adobe Dreamweaver
  • Microsoft Expression Web
  • CoffeeCup HTML Editor
However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit (Mac). We believe using a simple text editor is a good way to learn HTML.
Follow the 4 steps below to create your first web page with Notepad.

Step 1: Start Notepad

To start Notepad go to:
Start
    All Programs
        Accessories
            Notepad


Step 2: Edit Your HTML with Notepad

Type your HTML code into your Notepad:
Notepad

Step 3: Save Your HTML

Select Save as.. in Notepad's file menu.
When you save an HTML file, you can use either the .htm or the .html file extension. There is no difference, it is entirely up to you.
Save the file in a folder that is easy to remember, like w3schools.

Step 4: Run the HTML in Your Browser

Start your web browser and open your html file from the File, Open menu, or just browse the folder and double-click your HTML file.
The result should look much like this:
View in Browser

Build Your Professional HTML Website with Wix

Start building your own beautiful website. It’s easy and free!
Wix.com provides an easy-to-use online platform where you can create and publish your own website. Enjoy powerful drag & drop editing tools & customizable website designs.
With total design control, eCommerce features, superior SEO results and free domains, Wix is the ultimate solution for creating your perfect and exquisite HTML website.
Over 20 million users have created their website with Wix.
Create yours now! »

HTML Basic - 4 Examples


Don't worry if the examples use tags you have not learned.
You will learn about them in the next chapters.

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

Example

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3


HTML Paragraphs

HTML paragraphs are defined with the <p> tag.

Example

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>


HTML Links

HTML links are defined with the <a> tag.

Example

<a href="http://www.http://hossainmonir1988.blogspot.com">This is a link</a>
Note: The link address is specified in the href attribute.
(You will learn about attributes in a later chapter of this tutorial).

HTML Images

HTML images are defined with the <img> tag.

Example

<img src="w3schools.jpg" width="104" height="142"
Note: The filename and the size of the image are provided as attributes.

HTML Editors


Writing HTML Using Notepad or TextEdit

HTML can be edited by using a professional HTML editor like:
  • Adobe Dreamweaver
  • Microsoft Expression Web
  • CoffeeCup HTML Editor
However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit (Mac). We believe using a simple text editor is a good way to learn HTML.
Follow the 4 steps below to create your first web page with Notepad.

Step 1: Start Notepad

To start Notepad go to:
Start
    All Programs
        Accessories
            Notepad


Step 2: Edit Your HTML with Notepad

Type your HTML code into your Notepad:
Notepad

Step 3: Save Your HTML

Select Save as.. in Notepad's file menu.
When you save an HTML file, you can use either the .htm or the .html file extension. There is no difference, it is entirely up to you.
Save the file in a folder that is easy to remember, like w3schools.

Step 4: Run the HTML in Your Browser

Start your web browser and open your html file from the File, Open menu, or just browse the folder and double-click your HTML file.
The result should look much like this:
View in Browser


Build Your Powerful HTML Website for Free with Wix

Start building your own stunning website - programming free!
Wix.com provides a free, easy-to-use online platform that lets you create and publish your own unique website. Its powerful editing tools & customizable website designs make building a beautiful website easy.
Add eCommerce features, connect a custom domain and experience superior SEO results. Wix is your ultimate solution for creating an exquisite HTML website.
Over 20 million users have created their website with Wix.
Create yours now! »


1 comment:

Hosting Services said...

Buzz Host is a leading mobile app development company in Pakistan. We are passionate about helping businesses and entrepreneurs create successful software products.