Header Ads Widget

Responsive Advertisement

নতুনদের জন্য এইচটিএমএল শেখার সহজ উপায় (HTML For Beginners The Easy Way) –১ম ক্লাস

HTML কি বা কাহাকে বলে? (What is HTML)-

এইচটিএমএল (HTML) এর পূর্ণরূপ (Full Meaning of html) হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ (Hyper Text Markup Language)। Html মূলত WWW (World Wide Web) ওর্য়াল্ড ওয়াইড ওয়েব অর্থাৎ (Web Page) ওয়েব পেজ তৈরির জন্য একটি আদর্শ মার্কআপ ভাষা। Html একটি Web Page এর গঠন বর্ণনা করে (HTML describes the structure of a Web page) এবং পেইজের উপাদান সমুহের একটি সিরিজ গঠিত করে (HTML consists of a series of elements)। এবং Html এর উপাদানগুলি (browser) ব্রাউজারকে তথ্যসমুহ সুগঠিত ও সুন্দর ভাবে উপস্থাপনের মাধ্যমে দেখানোর নির্দেশ প্রদান করে (HTML elements tell the browser how to display the content)। যেমন ঃ (For example)

<!DOCTYPE html>

<html>

<head>

<title>Test project</title>

</head>

<body>


<h1>Web Education Of Bangladesh</h1>

<p>I will want Learn HTML, #HTML Basic, #HTML Elements, #HTML Introduction, #learn html free</p>


</body>

</html>


Output (আউটপুট)

www.webedunews.com

এখানে <!DOCTYPE html>  দিয়ে Html এর একটি নথি (Document) কে বুঝানো হয়েছে। যেমন M.S.Word এর Title bar এ লিখা থাকে “Document- Microsoft Word” আবার M.S.Excel এ লিখা খাকে “Book 1- Microsoft Excel” অর্থাৎ আপনি যখন Computer এ কোন Program Or Software কাজ করবেন তখন  Program Or Software title bar এ ঐ Program এবং Document এর নাম দেখাবে।


<html> একটি element (উপাদানের) এর শুরু ।


<head> এই element (উপাদান) টিতে Html পৃষ্ঠা সম্পর্কিত মেটা (meta) তথ্য দেওয়া হয়।


<title>  এই element (উপাদান) টিতে Html পৃষ্ঠার জন্য একটি শিরোনাম নির্দেশ করে। যহা ব্রাউজারের শিরোনাম বারে বা পৃষ্ঠার ট্যাবে দেখানো হয়। “Test project”


<body> উপাদানটি নথির মূল অংশকে সংজ্ঞায়িত করে এবং এটি সমস্ত দৃশ্যমান বিষয়বস্তুর জন্য একটি ধারক, যেমন শিরোনাম, অনুচ্ছেদ, চিত্র, হাইপারলিঙ্ক, টেবিল, তালিকা ইত্যাদি।


<h1> (element) উপাদান একটি অনুচ্ছেদের (Paragraph) শিরোনাম (Heading) নির্দেশ করে। যেমন “Web Education Of Bangladesh”।


<p> (element) উপাদান একটি অনুচ্ছেদ (Paragraph) নির্দেশ করে। যেমন “I will want Learn HTML, #HTML Basic, #HTML Elements, #HTML Introduction, #learn html free”

এইচটিএমএল এ টেক্সট, লিখা, প্যারাগ্রাফ কিভাবে যুক্ত করব? (How To Add Text In HTML) : 

আমরা খুব সহজেই ট্যাগ (tag) element (উপাদান) ব্যবহার করে  Html এ বিভিন্ন লিখা, প্যারাগ্রাফ যুক্ত করা হয়। যেমন- <p> This is a new article of html</p> । এখানে <p> Opening tag এবং </p> Close tag. 

Elements সমুহের ব্যবহার 

Element

Meaning

Purpose

<b>

Bold

Highlight important information

<strong>

Strong

Similarly to bold, to highlight key text

<i>

Italic

To denote text

<em>

Emphasized Text

Usually used as image captions

<mark>

Marked Text

Highlight the background of the text

<small>

Small Text

To shrink the text

<strike>

Striked Out Text

To place a horizontal line across the text

<u>

Underlined Text

Used for links or text highlights

<ins>

Inserted Text

Displayed with an underline to show an inserted text

<sub>

Subscript Text

Typographical stylistic choice

<sup>

Superscript Text

Another typographical presentation style



উপরোক্ত Element (উপাদান) সমুহ ব্যবহার করে ওয়েব ডিজাইনে Paragraph, Image, Table তৈরী করা সহ Taxt এর ধরণ পরির্বতন করা যায়।


কিভাবে HTML এ লিঙ্ক যোগ করবেন (How To Add Links In HTML) - আপনি হয়তো লক্ষ্য করেছেন, ইন্টারনেট অনেকগুলি লিঙ্কের সমন্বয়ে গঠিত।


ওয়েব সার্ফিং করার সময় আপনি যে সমস্ত কিছুতে ক্লিক করেন তা হল একটি লিঙ্ক । আপনি যে ওয়েবসাইটটি পরিদর্শন করছেন বা অন্য একটি বাহ্যিক সাইটের অন্য পৃষ্ঠায় নিয়ে যাওয়ার জন্য লিংক ব্যবহার করা হয়।


লিঙ্কগুলি <a> ট্যাগ দ্বারা খোলা একটি বৈশিষ্ট্যের মধ্যে অন্তর্ভুক্ত করা হয়। এই উপাদানটি প্রথম যা আমরা পূরণ করেছি যা একটি বৈশিষ্ট্য ব্যবহার করে এবং তাই এটি পূর্বে উল্লিখিত ট্যাগগুলির থেকে আলাদা দেখায়। অর্থাৎ  <a>        </a> ট্যাগ এর মধ্য লিঙ্ক যুক্ত করতে হয়। যেমন- <a>www.webedunews.com</a>


নোট - আজকে আমরা এখন পর্যন্ত যা শিখলাম, তা হচ্ছে HTML এর একেবারেই প্রাথমিক ধাপ।। আমরা পর্যায়ক্রমে এ্যাডভান্স লেবেলে শিখব এবং HTML সাথে CSS ব্যবহার করে একটি Website Devolop এর প্রজেক্ট এর মধ্যেমে Website Devolop করব ইনশা-আল্লাহ। আজকে আমরা HTML এর বিভিন্ন Element, Tag, Use of Element, Use of tag সম্পর্কে জানলাম।






Post a Comment

3 Comments

  1. Hi,
    This is great article for skill development of HTML. I look this site is very helpful.

    ReplyDelete
  2. I look very helpful. Thank you.

    ReplyDelete