HSC ICT Chaper 4 Part 4 | Introduction to Web Design and HTML Part 4

HSC ICT Chaper 4 Part 4 main point: হেডিং এলিমেন্ট (Heading Element) কি?, Title Element এর ব্যবহার কি?, ফন্ট বা টেক্সট ফরমেটিং (Font or Text Formatting) কি?, ফন্ট বা টেক্সট ফরমেটিং (Font or Text Formatting) উদাহরন, এইচটিএমএল কমেন্টস (HTML Comments) কি?, এইচটি এমএল ফন্ট ট্যাগ (HTML Font Tag) কি?, ফন্ট স্টাইল (Font Style) কি?, মারকিউ এলিমেন্ট (Marquee Element) কি?, Marquee এর attribute কি কি?

হেডিং এলিমেন্ট (Heading Element)কি?

HTML এ heading ট্যাগ তারা দ্বারা ডকুমেন্টে বিভিন্ন আকৃতির শিরোনাম দেওয়া যায়। এটা একটি container বা ধারক ট্যাগ। H1 থেকে H6 পর্যন্ত মোট ছয়টি লেবেল রয়েছে। Heading এর H1 টি সবচেয়ে বড় এবং H6 টি সবচেয়ে ছোট হেডিং। এই গঠন (syntax) হলো -

Example

  
   <!DOCTYPE html> 
   <html>
    <head>
    <title>example</title>
   </head>
   <body>
    <h1>Heading1</h1>
    <h2>Heading1</h2>
    <h3>Heading1</h3>
    <h4>Heading1</h4>
    <h5>Heading1</h5>
    <h6>Heading1</h6>
   </body>
  </html>

Output:

Heading1

Heading2

Heading3

Heading4

Heading5
Heading6

Title Element এর ব্যবহার কি?

Title element হচ্ছে HTML document এর নাম। যা এলিমেন্টের ভিতর অবস্থান করে। ডকুমেন্টের নাম বা title সংক্ষিপ্ত হওয়া উচিত যা দেখে সহজেই বুঝা যায় ডকুমেন্টটিতে কি নিয়ে আলোচনা করা হয়েছে।

Example


 <!DOCTYPE html> 
 <html>
  <head>
    <title>Page Name</title>
  </head>
  <body>
    .....
  </body>
 </html>

ফন্ট বা টেক্সট ফরমেটিং (Font or Text Formatting) কি?

ওয়েব পেইজের text গুলোকে বিভিন্ন গঠনে সাজিয়ে উপস্থাপনের প্রক্রিয়াকে বলা হয় ফন্ট ফরম্যাটিং। অর্থাৎ ফন্ট ফরম্যাটিং এর মাধ্যমে text কে বড়, ছোট, মোটা, আন্ডারলাইন, ইটালিক, ইত্যাদি আকারে ওয়েব পেইজে উপস্থাপন করা যায়। HTML এ বিভিন্ন ট্যাগের সাহায্যে ফন্ট ফরম্যাটিং করা যায়। ফন্ট ফরম্যাটিংয়ের জন্য ব্যবহৃত কিছু গুরুত্বপূর্ণ HTML tag নিচে উল্লেখ করা হলো -

Tag(ট্যাগ) কাজ বা ব্যবহার (Applications)
<h1>...</h1>,,,,<h6>...</h6> হেডলাইন এর তৈরি করার জন্য ।
<p>......</p> Paragraph তৈরি করার জন্য ।
<b>.......</b> Text কে bold করে।
<em>..........</em> Text কে Emphasized করে।
<i>..........</i> Text কে Italic style করে।
<u>..........</u> Text কে Underline করার জন্য ব্যবহৃত হয়।
<small>..........</small> Text কে আকারে ছোট করে।
<sub>..........</sub> Text কে subscript করে।
<sup>..........</sup> Text কে superscript করে।
<del>..........</del> Text কে Delete বুঝাতে ব্যবহৃত হয়।

ফন্ট বা টেক্সট ফরমেটিং (Font or Text Formatting) উদাহরনঃ


 <!DOCTYPE html> 
 <html>
  <head>
  <title>example</title>
 </head>
 <body>
  <h4>Heading</h4>
  <p>This an example of <b>text formating</b>.</p>
  <p>This is for <em>emphasize</em>.</p>
  <p>This is for <sub>subscript</sub>.</p>
  <p>This is for <sup>superscript</sup>.</p>
  <p>This is for <i>italic</i>.</p>
  <p>This is for <small>small</small>.</p>
  <p>This is for <u>underline</u>.</p>
 </body>
</html>

Output:

Heading

This an example of text formating.

This is for emphasize.

This is for subscript.

This is for superscript.

This is for italic.

This is for small.

This is for underline.

এইচটিএমএল কমেন্টস (HTML Comments) কি?

HTMLকোডকে আরোও বেশি পঠনযোগ্য ও বোঝার সুবিধার্থে কোডের মধ্যে কমেন্ট সংযুক্ত করা হয়। কমেন্টগুলো প্রকৃত পক্ষে ব্রাউজারে প্রদর্শিত হয় না। কমেন্টের ব্যবহারে HTMLডকুমেন্টটি পরবর্তীতে সংশোধন করা সহজ হয়। কমেন্ট লেখার গঠন (syntax) হলো - 

  
    <!-- This is a comment -->

এইচটি এমএল ফন্ট ট্যাগ (HTML Font Tag) কি?

Font হচ্ছে ওয়েব পেইজের প্রাণ যা ছাড়া ওয়েব পেইজ কল্পনা করা যায় না। আর এই font ট্যাগ এর মাধ্যমে ফন্টের সাইজ,কালার, অ্যালাইনমেন্ট ইত্যাদি পরিবর্তন করা যায়। ফন্ট ট্যাগের তিনটি attribute রয়েছে। যথা -

  1. Face
  2. Color
  3. Size

Font tag এবং গঠন (syntax) হলো -

  
    <font face = "font_name" color = "font_color" size = "number"> Hi from us </font>
  1. Face: ফন্টের নাম নির্ধারণ করে। যেমন : Arial Black।
  2. Color :ফন্টের রঙ নির্ধারণ করে। রং নির্ধারণের জন্য তিনটি পদ্ধতি আছে।
    1. সরাসরি color এর নাম লিখে। যেমন : red,green,gray ইত্যাদি।
    2. Red, Green, এবং Blue এই তিনটি color কে মৌলিক color বলে। যা দ্বারা আধুনিক মনিটর প্রায় ১৩ কোটি রং নির্ধারণ করতে পারে। আর এই তিনটি color কে RGB আকারেও লেখা যায়। এখানে প্রতিটি color এর মান (০-২৫৫)।
      যেমন : rgb(0,0,0) → কালো, rgb(255,255,255) → সাদা।
    3. হেক্সাডেসিমেল নাম্বার সিস্টেেম ছয়টি ডিজিট ব্যবহার করে রং নির্ধারণ করা হয়।
      যেমন - color = "#FFOOEE"
  3. Size :ফন্টের সাইজ নির্ধারণ করে। Size এর default মান তিন, তবে এই মানের হ্রাস-বৃদ্ধি ১এক হতে ৭ পর্যন্ত হতে পারে।

ফন্ট স্টাইল (Font Style) কি?

Font tag এ style অ্যাট্রিবিউট ব্যবহার করে বিভিন্নভাবে অক্ষর বা প্যারাগ্রাফ ফরম্যাটে ফন্ট উপস্থাপন করা যায়। Style অ্যাট্রিবিউটের এর কিছু value আছে। সেগুলো হলো -

font-family → কি ধরনের ফন্ট।
font-size → ফন্টের আকার নির্ধারণের ব্যবহৃত হয়।
font-style → Normal, Italic, Obligue, Inherit, ইত্যাদি।
Style অ্যাট্রিবিউটের গঠন (syntax) হলো - 


  style = "font_family: font_name; font-size: number; color: color_name; font_style: styletype;"

মারকিউ এলিমেন্ট (Marquee Element) কি?

ওযেব পেইজকে আকর্ষণীয় করতে মনিটরের এক দিক হতে অন্যদিকে text বা image স্ক্রলিং করার জন্য Marquee Element ব্যবহার করা হয়। Marquee tag এর মধ্যে বেশকিছু attribute ব্যবহার করা যায়। যেমন -behaviour, bgcolor,direction, align,height, width,loop, ইত্যাদি । Marquee ট্যাগ এর গঠন(Syntax) হলো-

<marquee behavior="scroll" direction="up">This is marquee</marquee>

Marquee এর attribute কি কি?

Attribute Value Description
behavior scroll
slide
alternate		 কিভাবে পরিবর্তন হবে তা নির্ধারণ করে।
direction up
down
left
right		 কোন দিক দিয়ে পরিবর্তীত হবে তা নির্ধারণ করে।
height pixels or % উচ্চতা নির্ধারণ করে।
width pixels or % Width নির্ধারণ করে।
loop number কত বার ঘুরবে তা নির্ধারণ করে।.
scrolldelay seconds একবার ঘুরা থেকে আরেকবার ঘুরার মধ্যবর্তী সময়ের পার্থক্য কতক্ষণ হবে তা নির্ধারণ করে।.
scrollamount number কতদূর jump করবে তা নির্ধারণ করে।
hspace pixels horizontal space নির্ধারণ করে।
vspace pixels vertical space নির্ধারণ করে।

Example

  
   <!DOCTYPE html> 
   <html>
    <head>
    <title>example</title>
   </head>
   <body>
    <marquee behavior="scroll" direction="left">This is marquee</marquee>
    <marquee behavior="alternate" direction="right">This is marquee</marquee>
    <marquee behavior="alternate" scrolldelay="200" direction="right">This is marquee</marquee>
   </body>
  </html>

Output:

This is marquee This is marquee This is marquee