Web Design And Development Course-HTML TAG

Web Design And Development Course

Web Design And Development Course

বিস্তারিত:

ওয়েব সাইট ডিজাইনে দক্ষ হতে চাইলে আমাদের  টিউটোরিয়াল দেখার পাশাপাশি গুগলে অনিক Web Design And Development Course আছে যেগুলো আপনাদের দেখা উচিত।

আমরা যেকোন একটা HTML Document দেখি সেখানে অবশ্যই Tag থাকে। যেমন, নিচের Document টি দেখুন যেখানে, <html>, <head>, </head>, <body> ইত্যাদি এক একটি Tag। এককথায় less than (<) চিহ্ন এবং greater than (>) চিহ্ন দিয়ে মোড়ানো একটা শব্দকে (যেটা HTMLঅনুমোদিত) Tag বলে। যেমন HTML শব্দটি এই দুই চিহ্ন দিয়ে মুড়িয়ে যখন HTML  Document লিখি তখন এটার নাম HTML ট্যাগ। এরকম শত শত Tag আছে HTML এ। যেমন, Paragraph Tag  <p></p>, Heeding  <h1></h1>Tag ইত্যাদি।

Web Design And Development Course

প্রায় সব Tag এর একটা সমাপ্তি Tag থাকে যেমন, উপরে <html> Tag সমাপ্তি ট্যাগ (closing tag বলা হয়) হচ্ছে </html> এবং <h1> এর  Closing Tag হল </h1> এভাবে বাদবাকি সবগুলি।

টেকনিকাল শব্দ যেটা ব্যবহৃত হয় সেটিই হচ্ছে শুরুর ট্যাগটিকে বলে opening tag বা start tag আর শেষের ট্যাগটিকে বলে closing Tag  বা end Tag.দুটি এক রকম শুধু Closing Tag একটা Backslash (/) চিহ্নে একটু বেশী থাকে।

এই Opening এবং closing Tag ভিতর Content  দিতে হয়। যেমন উপরে দেয়া হয়েছে।

কিছু কিছু Tag আছে এগুলির closing Tag   নেই যেমন, Input Tag, Image Tag ইত্যাদি। এই Tag গুলির সামান্য একটু ভিন্নতা আছে।

Web Design And Development Course

Image Tag  শুরু হয়েছে <Img এভাবে আর শেষ হয়েছে /> এই চিহ্ন দিয়ে। Input  Tag টিও একই । এর মাঝে যা জদেখছেন (Src, type ইত্যাদি) এগুলি Tag  টির Attributes.

* প্রতিটি Tag এ বিভিন্ন ধরনের Attributes ব্যবহার করা যায়।

 

* প্রত্যেকটি Tag রই কাজ নির্দিষ্ট করা আছে যেমন, HTML Document  আপনি যদি Paragraph  দিতে চান তখন <p></p>Tag এর ভিতর তা দিতে হবে, Heading দিলে <h1></h1> Tag এর  ভিতর দিয়ে দিতে হবে (বড় Font headings হলে <h1>, সাইজ অনুযায়ী <h6> পর্যন্ত আছে)। Text field দিতে হলে input Tag, Image দিতে চাইলে <img Tag , Browser এ Title  বারে দেখানোর জন্য আছে <title></title> Tag  ইত্যাদি।

 

* উপরে যে Document  দিয়েছি সেখানে <html></html> কে বলে Parents  Tag পুরো ডকুমেন্ট টির জন্য কেননা পুরো Document যত Tag আছে সবগুলি এর ভিতরে রাখা হয়েছে। ভিতরের ব্যবহৃত Tag গুলি হল এর Chilled  ট্যাগ। একইভাবে head ট্যাগের চাইল্ড ট্যাগ হল title ট্যাগ কিন্তু Title ট্যাগের কোন Chilled Tag নেই। আবার দেখুন Body হল Parents  Tag এবং এর Chilled Tag এখানে p এবং  h1.

Web Design And Development Course-HTML paragraph

 

Web Design And Development Course

Web Design And Development Course – Part: 07

বিস্তারিত:

Web Page এ কোন লেখা প্রকাশ করতে চাইলে p Tag ব্যবহার করা হয়। <p> হচ্ছে এর start tag এবং </p> হচ্ছে এর end tag. Start এবং End Tag এর ভিতর যেকোন লেখা ইচ্ছামত দিতে পারেন। এই লেখা Paragraph আকারে Browser  দেখাবে।

যেমন,

Web Design And Development Course

 

এই Tag এ Attributes ব্যবহার করা যায় যেমন নিচের Attribute গুলি বেশি ব্যবহৃত হয়।

class,id,align,title,style,  এছাড়া Event Attribute Onmouseover, onclick ইত্যাদি ব্যবহার করা যায়।

class এবং id Attribute ব্যবহার করে শুধু মাএ এই p Element নয় বরং প্রায় সব Element নাম দেয়া যায় পরে সেই নাম ধরে CSS Style করা হয়। CSS টিউটোরিয়ালে আরো বিস্তারিত দেখতে পাবেন। এখানে align, title এবং style Attribute কিছু প্রয়োগ দেখানো হল,

Web Design And Development Course

এখানে শুধু জায়গা এবং সময় বাচানোর লক্ষে শুধুমাত্র P Element দেয়া হল আসলে বাস্তবে <body></body> এর ভিতর এইসব Element থাকবে এবং অবশ্যই Document এ Full Stricture  অনুসরন করতে হবে। অর্থ্যাৎ একটা Full Document এর ভিতরেই অবশ্যয় এগুলি রাখতে হবে। এমন Doc Type টিউটোরিয়ালে রেখেছি।

প্রদর্শন

Many browsers immediately left-justify a fresh paragraph.

To improve these habits, the arrange attribute for your

tag and four forms of content approval: left, proper, center, and also justify.

You could specify any paragraph only in just a block and other paragraphs, databases, forms, and preformatted text.

Title Attributes এর প্রভাব দেখতে শেষের লাইনরে উপর মাউস পয়েন্টার নিয়ে যান। এখানে লক্ষ করুন একসাথে একাধিক Attributes একটা Element ব্যবহার করা হয়েছে । আপনি চাইলে আরো বেশি ব্যবহার করতে পারেন।

Web Design And Development Course-HTML Heading

Web Design And Development Course

 

Web Design And Development Course-Part:08

বিস্তারিত:

শিরোনাম বা Heading আকারে বড় Front লেখা Browse  প্রদর্শনের জন্য HTML এ রয়েছে ৬ ধরনের Heading Tag। এর মধ্যে সবচেয়ে বড় হচ্ছে <h1></h1> এভাবে <h2></h2>, <h3></h3>… h1 পযর্ন্ত

যেমন,

Web Design And Development Course

 

** আবারো বলে রাখা ভাল যেটা প্যারাগ্রাফ টিউটোরিয়ালে বললাম – এখানে শুধু জায়গা এবং সময় বাচানোর লক্ষে শুধুমাত্র h1 Element  দেয়া হল আসলে বাস্তবে <body></body> এর ভিতর এইসব Element থাকবে এবং অবশ্যই Document এ  পূর্ন Structure অনুধাবন/অনুসরন করতে হবে। অর্থ্যাৎ একটা পূর্নাঙ্গ Document এর ভিতরেই অবশ্যয় এগুলি রাখতে হবে। যেমন Doc Type টিউটোরিয়ালে রেখেছি

প্রদর্শন:

A long flow of text

Unbroken by title,

Crosses the eyes and numbs the mind

Not to mention the fact that

it helps it be nearly difficult to scan the writing for a certain topic.

আমাদের সাইটের CSS Effect এর কারনে  সাইজ এবং রং সামান্য ভিন্ন দেখাচ্ছে আপনি এটা Save করে Browse করালে একদম আসল Output টি দেখতে পাবেন।

p ট্যাগের মতই এখানেও align, onkeydown,class, onkeypress,dir, onkeypressid, lang, onlick,  onkeypress, style, title ইত্যাদি Attribute ব্যবহার করতে পারেন।

হেডিং (<h1></h1>) এবং paragraph (<p></p>) Element ব্যবহার করে একটা

উদাহরন, দেয়া হল,

Web Design And Development Course

এটা একটা পূর্নাঙ্গ উদাহরন। .html Extension  দিয়ে সেভ করে (যেমন index.html test.html) Browse রান করলে বা আমাদের অনলাইন এডিটরে দেখুন।

অনলইন এডিটর

ওয়েব সাইট ডিজাইনে দক্ষ হতে চাইলে আমাদের  টিউটোরিয়াল দেখার পাশাপাশি গুগলে অনিক Web Design And Development Course আছে যেগুলো আপনাদের দেখা উচিত।

পর্বের পার্ট

Note: পরবর্তী Web Design And Development Course টিউটোরিয়ালে (Part-9) এইচটিএমএল লিস্টএর বিস্তারিত আলোচনা করা হবে।

See More Article…

 

4 thoughts on “Web Design And Development Course-HTML TAG”

  1. Pingback: Web Design And Development Course-HTML প্যারাগ্রাফ। - MT Digital Agency

  2. Pingback: Web Design And Development Course-HTML Element Tutorial -

  3. Pingback: Web Design And Development Course-HTML Introduction - MT Digital Agency

  4. ওয়েব ডিজাইন বা ডেভেলপমেন্ট যেটাই হোক না কেন, আপনি যদি মন দিয়ে শেখেন তাহলে তা আপনার কাছে খুব সহজ মনে হবে, তবে কিছুটা অন্য মনস্ক হয়ে গেলে এর থেকে কঠিন আর কিছু নাই এমন টাই মনে হবে ।

Leave a Comment

Your email address will not be published. Required fields are marked *

Recommended
  Web Design And Development Course বিস্তারিত: Web Page এ…
Cresta Posts Box by CP