Web Design And Development Course-HTML List

 

Web Design And Development Course

Web Design And Development Course

বিস্তারিত:

Web Page এ যদি তালিকা প্রদর্শন করাতে চান তাহলে HTML এ 3 ধরনের list করার Tag আছে, ব্যবহার করতে পারেন আপনার প্রয়োজনমত যেকোন একটি ।

Unordered List :

এটিই সবচেয়ে বেশি ব্যবহৃত হয় Professional কাজে । <ul></ul> এর ভিতরে রাখতে হবে এবং <li></li>Element  ভিতর একটা একটা করে Item রাখতে হবে। প্রদর্শন করবে তালিকা আকারে কোন নাম্বারিং থাকবেনা। বাই ডিফল্ট প্রতিটি Item এর বাপাশে  একটা গোল চিহ্ন  থাকে। যেমন,

Web Design And Development Course

প্রদর্শন:

Bangla

English

Social Science

Mathematics

Ordered List:

কখনো কখনো নাম্বার দিয়ে তালিকা প্রয়োজন হতে পারে তখন <ol></ol> এর ভিতর li Tag দিয়ে বানাতে পারেন যেমন,

Web Design And Development Course

প্রদর্শন:

iPad

iPhone

MacBook Air

কত থেকে শুরু হবে এটা ঠিক করা যায় Ol Element start নামে একটা Attributes. মাধ্যমে   যেমন, উপরের List টি যদি 10 থেকে দেখাতে চান তাহলে..

 

Web Design And Development Course

প্রদর্শন:

iPad

iPhone

MacBook Air

li তে value নামের একটা Attributes ব্যবহার করে যেকোন Item এর নাম্বার পরিবর্তন আনায়ন করা যায় যেমন,

Web Design And Development Course

প্রদর্শন:

iPad

iPhone

MacBook Air

Definition list নামে আরেকটা Listing Tag আছে এটা দিয়ে একটু ভিন্নরকমের বা ভিন্নভাবে তালিকা দেখানো যায়  এটা খুব একটা ব্যবহার হয়না, যেমন,

Web Design And Development Course

প্রদর্শন:

Original analysis

on this task, you should discover the particular organization’s objectives plus nature and also scope with the problem beneath research. Even if a concern refers simply to some tiny segment from your organization alone then you must find out just what the objectives from your organization itself are generally. Then you must see how an issue getting studied matches in with each other.

Systems examination,

needs classification Defines venture objectives directly into defined characteristics and operation from your intended program. Evaluates end-user details requirements

Methods design

Identifies desired capabilities and functions at size, including display screen designs, enterprise rules, method diagrams, pseudo-code alongside other records.

Development

The specific code is the following.

 

Web Design And Development Course-HTML Font.

 

 

Web Design And Development Course

বিস্তারিত:

<Font>Tag ব্যাবহার করে WebSite এর Text Style, সাইজ এবং কালার যোগ করা হয়। Size, Color এবং Face Attributes ব্যাবহার করে আপনি  Font কে Customize করতে পারি।<Basefont> Tag ব্যাবহার করে Page এর সকল Text কে একই Size, Style,  এবং Color এ সেট করা যায়।

<Font> এবং <Basefont> Tag ব্যাবহার না করে CSS ব্যাবহার করা উচিত।

ফন্ট আকার (Font size)

Font এর সাইজ ঠিক করা হয় Size Attribute এর সাহায্যে । Font এর আকার এর গ্রহনযোগ্য মান হচ্ছে 1 হতে 7  Font এর Defult  আকার হচ্ছে 3।

Web Design And Development Course

প্রদর্শন:

Here is a size 5 font.

ফন্ট এর রং (Font color)

Font এর Color সেট করা হয় কালার Attribute এর সাহয্যে।

Web Design And Development Course

 

প্রদর্শন:

This text is hexcolor #990000

This text is red

ফন্ট ফেস (Font face)

ফন্ট Face এর ক্ষেত্রে অবশ্যয় সতর্ক হওয়া উচিত কারন আপনার System  এ নির্ধারিত Face টি Install  দেয়া না থাকে তাহলে আপনি ঐ Font টি দেখতে পাবেন না এবং তার পরিবর্তে Times New Roman Font টি দেখতে পাবেন ডিফল্ট হিসাবে ।

Web Design And Development Course

প্রদর্শন:

This paragraph has had its font formatted by the font tag!

বেসফন্ট (Basefont)

Basefont Tag এর সাহায্যে আপনি WebPage এ ডিফল্ট Font সেট করতে পারেন।নিচে Basefont ব্যাবহার করার সঠিক নিয়ম বা পথ দেখানো হল।

Web Design And Development Course

প্রদর্শন:

This particular paragraph has already established its font formatted through the base font label!

Attributes: Review

 

Attribute=”Value”Description

Face =        “name of font” change the font type

Color =      “RGB,Name,or Hexidecimalchange font color

Size  =        “Num. value 1-7″Size r text, 7 is biggest

অবশেষে বলতে চাই Font বা Basefont ব্যাবহার না করে CSS (CSS টিউটোরিয়ালে আলোচনা করা হয়েছে) ব্যবহার করা ভালো।

Attributes: Review

Attribute= “Value” Description
Size= “Num. Value 1-7” Size of your text, 7 is biggest
Color= “Rgb,Name,Or Hexidecimal” Change font color
Face= “Name of Font” Change the font type

প্রথম অক্ষরের সুন্দর স্টাইল:

Font কে Customize  করে যেকোন ধরনের Style করা যায়।

Web Design And Development Course

প্রদর্শন:

প্রদর্শন:

Customize your font to achieve the desired look.

Web Design And Development Course- HTML Link

 

Web Design And Development Course

 

Web Design And Development Course

বিস্তারিত:

আপনি ইচ্ছা করলে আপনার  Site এর কোন Text এর উপর Link তৈরী করে দিতে পারেন যেখানে Click করলে অন্য পেজ/সাইট আসবে। Anchor Tag এর সাহায্যে Link তৈরী করা হয়। শুধু Text নয় আপনি চাইলে একটা Mail Address এর উপর Link দিতে পারেন, একটা ছবির উপর Link দিতে পারেন, বড় কোন Web Page এর সুচিপত্র তৈরী করে এর Item গুলিতে Link দিতে পারেন (এসব Link ক্লিক করলে Page এর ঐ অংশে যাবে যেখান থেকে Item টি শুরু হয়েছে)।

হাইপারটেক্সক্ট রেফারেন্স(Href)

Href Attributes নিদের্শ করে যে ইউজার Click করে কোথায় যাবে।

Hypertext reference হতে পারে Internal, Local, Global .

ইন্টারনাল(International): একই পেজের মধ্যে লিংক তৈরী করতে হবে।

লোকাল(Local): আপনার Web site এর ভিতরেই কোন পেজের সাথে লিংক তৈরী হবে।

গ্লোবাল(Global): আপনার Web site এর বাহিরে অন্য Web site এর লিংক তৈরী হবে।

ইন্টারনাল(Internal): Href=”#Anchorname”

লোকাল(Local): Href=”/Webcoachbd/../pics/picturefile.jpg”

গ্লোবাল(Global): Href=”http://www.tizag.com/”

 

এইচটিএমএল লিংক টেক্সক্ট (HTML Link Text) যেভাবে তৈরী করবেন:

<a> এবং  </a> tag দ্বারা যথাত্রুমে Link শুরু এবং শেষ বোঝায়।  Href Attributes এর সাহায্যে কোন ধরনের লিংক স্থাপিত হবে তা নির্ধারিত হয়। Href Attributes কে opening tag এর মধ্যে রাখতে হয়। opening এবং closing tag এর মধ্যে কোন লেখা থাকলে, তা পরে web পেজে লিংক হিসাবে দেখা যাবে।যেমন:

Web Design And Development Course

প্রদর্শন: গ্লোবাল লিংক(Global Link).Webcoachbd Home         Google Home              Yahoo Home

এইচটিএমএল লিংক টার্গেট (HTML-link Target)

A ট্যাগে Target Attributes দিয়ে ঠিক করা যায় যে Link টি কিভাবে খুলবে যেমন “_Blank” দিলে নতুন Windows  আবার “_Self” দিলে উক্ত পেজেই Link টি Load হবে।

Web Design And Development Course

প্রদর্শন:

Radio button tutorial

এখানে Click করুন নতুন একটি Windows (ট্যাবে) পেজটি খুলবে।

এইচটিএমএল ইমেইল লিংক(HTML Email Link).

Text Link এর উপরে যেভাবে তৈরী করলেন Email Link ও সেভাবে তৈরি করতে হবে শুধু Href Attributes এর ভিতর ইনভার্টেড কমার মধ্যে আগে Web site এর ঠিকানা ছিল আর এবার Email এর  ঠিকানা দিবেন।যেমন:

<a href= “mailto:abc@mail.com” >Email Example</a>

প্রদর্শন:

প্রথম Email Example

এই Limk এর উপর মাউস পয়েন্টার নিয়ে যান, নিচে স্টাটাসবারে mailto:abc@mail.com লেখা দেখাবে। এখানে Click করলে আপনার Browser abc@mail.com  নামের একটি Mail ঠিকানায় Mail পাঠানোর ক্ষেত্র প্রস্তুত করবে।আরও সহজভাবে বলি, ধরুন আপনি মজিলা Mozilla Firefox Browser ব্যবহার করছেন, আপনি যদি Tools>Options>Applications এ গিয়ে Mailto এর জায়গায় Dropdown (ড্রপডাউন) মেনু থেকে Use Yahoo mail সিলেক্ট করে দেন তাহলে Email Example Link ক্লিক করলে আপনার Yahoo Mail খুলবে এবং To ফিল্ডের জায়গায় abc@mail.com লেখা উঠবে।

আপনি চাইলে Email Link এ subject এবং body ঠিক করে দিতে পারেন যেমন:

<a href= “mailto: a@b.com?subject=Web Page Email&body=This email is from your website” > 2nd Email Example</a>

প্রদর্শন:

দ্বিতিয় Email Example

এখানে Click করলে আপনার Yahoo Mail খুলবে এবং To এর জায়গায় a@b.com আর Subject এর জায়গায় Web Page Email ও Body তে This email from your site এগুলি গিয়ে  Automatic বসবে।

ইন্টারনাল লিংক(Internal Link).

নিচে Link গুলিতে Click করে দেখুন এই পেজেরই বিভিন্ন অংশে এই Link গুলি নিয়ে যাবে।এটা হচ্ছে Internal Link ।পেজ বড় হলে সুচিপত্র তৈরী করে এভাবে Link দিতে পারেন।

পেজের উপরে যান

টেক্সট লিংক

“পেজের উপরে যান” এখানে Click করলে পেজের কোথায় যাবে তা আগেই ঠিক করে রাখতে হবে এভাবে

<h3>হাইপারটেক্সক্ট রেফারেন্স(href)<a name=”top“></a></h3>

পরের লিংকটিও এভাবে করে নিতে হবে (এখানে name=”text”)

শেষে “পেজের উপরে যান” এর উপর Link দিয়েছি এভাবে

<a href=”#top”>পেজের উপরে যান</a>

এবং

<a href=”#text”>টেক্সট লিংক</a>

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

2 thoughts on “Web Design And Development Course-HTML List”

  1. Pingback: Web Design And Development Course-HTML Heading

  2. Pingback: Web Design And Development Course-HTML paragraph

Leave a Comment

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

Recommended
Web Design And Development Course বিস্তারিত: HTML এ কিছু বিশেষ…
Cresta Posts Box by CP