ICT & others Information

HTML Part 026_Border Style, Border width

April 17, 2016 SR_Amena

Border Style

একইভাবে Border-Style: name, dotted, dashed, solid, double, groove, ridge, inset, outset বা hidder এভাবে দেওয়া যাবে। চারদিক ভিন্ন ভিন্ন Style এর জন্য Color এর মত Clockwise নির্ধারন করে দিতে পারেন। যেমন:

<border-style: solid> বা

<border-style-solid dotted> বা

<border-style: solid dotted double dashed> ইত্যাদি। অথবা অন্যভাবে দেওয়া যায। যেমন:

border-top-style: Name

border-right-style: Name

border-bottom-style: Name

border-left-style: Name

যেমন: নিচের কোডিংসহ একটি HTML ফাইল তৈরী করুন।

<!DOCTYPE html>

<html>

<body>

</body>

</html>

ব্রাউজার দিযে খুললে নিন্মেক্ত ফলাফল পাওয়া যাবে।

যেমন: নিচের কোডিংসহ একটি HTML ফাইল তৈরী করুন।

<!DOCTYPE html>

</body> </html>

ব্রাউজার দিযে খুললে নিন্মেক্ত ফলাফল পাওয়া যাবে।

Border width

একইভাবে Border-width: thin, medium (Default), thick, 1px, 16px বা 20px এভাবে চারদিকে ভিন্ন ভিন্ন Width এর জন্য Color বা Style এর মত Clockwise নির্ধারন করে দিতে পারেন।

যেমন: <border-width:10px> বা <border-width:20px> বা <border-width:5px> ইত্যাদি। অন্যভাবেও দেওয়া যায়: যেমন: border-top-width:Value, border-right:Value

border-bottom: Value, border-left: Value

যেমন: নিচের কোডিংসহ একটি HTML ফাইল তৈরী করুন।

<!DOCTYPE html>

<html>

<body>

<table border="5" style="height:50px; width:300px; border-color:red; border-width:thin

medium thick 10px;">

</table>

</body>

ব্রাউজার দিযে খুললে নিন্মেক্ত ফলাফল পাওয়া যাবে।

Previous Post Next Post

বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।

Book Name: Mastering Microsoft Word

Writer: Bappi Ashraf

Published By: Gyankosh Prokashani

Amount of Pages: 464

First Publish: October-2004

Last Edition: We've February-2015 edition. Future edition may be existed!

Book Price: BDT 350 (30% Discount)

The writer of this book has told that he has written this book with the concept of "teach yourself". On the other hand, Web Design is a thing which is interesting to learn. He has also told that the book is full of fan and enjoyment so that a person can learn Web Design by himself by playing with the example projects of this book. Book's CD Link below...

পরিবেশক/প্রাপ্তিস্থান
Online : www.rokomari.com

Facebook Page

RELATED POST LINKS BELOW ********************************************

Part-01 : HTML এরসুচনা এবং কিছু অতি গুরুত্তপূর্ণ বিষয়

Part-02 : HTML Versions ও Html Structure

Part-03 : Html Tag, Attribute, Elements ও Extention Name
Part 004_Title Element এর ব্যবহার, নতুন কোডিং লেখা ও Body Element এর ব্যবহার
Part 005_ BR বা Line Break এলিমেন্টের ব্যাবহার
Part 006_Comments এর ব্যবহার
Part 007_Font সংক্রামত্ম এলিমেন্ট (ট্যাগ)
Part 008_Ciation, Quotations এবং Definitation ইত্যাদি ট্যাগ
Part 009_Bi-Directional Override (BDO) ELEMENT
Part 010_Blinking Element
Part 011_Paragraph Element
Part 012_Heading Element
Part 013_Html Style Attributs
Part 014_html এ style প্রয়োগ
Part 015_ Style এ Font Family অ্যাট্রিবিউট
Part 016_Style এ Background Image অ্যাট্রিবিউট
Part 017_Paragraph Element-এ Align Attributes
Part 018_HR ট্যাগের অনান্য Attributes
Part 019_Html ডিক্লিয়ারেশন
Part 020_Html List, Ordered List, Attribute সহ Ordered List
Part 021_Type Attributes
Part 022_Unordered List, Attribute Nested List, Definition List
Part 023_ MARGIN ATTRIBUTE, Table Element, Table Element এর Attributes
Part 024_Table এর valign Attributes
Part 025_Table এলিমেন্টের <tbody> <thead> <tfoot> ট্যাগ
Part 026_Border Style, Border width
Part 027_ Colspan, Rowspan, Cell Padding
Part 028_HTML এর Layout, Table ব্যবহারে Layout
Part 029_HTML এর Nested Table
Part 030_Division Element, Span element
Part 031_Div এলিমেন্ট ব্যবহার করে Layout
Part 032_<Div> ও <Table> সহ Layout
Part33_গ্রাফিক্স, সংযোজন, এনিমেটেড গ্রাফিক্স, ইমেজের SIZE Attributes
Part34_ ছবি Path বা URL,ইমেজের ALT Attributes,Link Element
Part35_লিষ্ট এর সাথে Link এর ব্যবহার, URL বা Path এর বর্ণনা
Part36_Mailto link তৈরী করা
Part37_FORM ও FORM এর Attributes
Part38_ওয়েব পেজ ভিডিও ও সাউন্ড সংযোগ
Part39_ভিডিও ফাইল সংযোজন
Part 040_Youtube
Part 041_ ওয়েব পেজে ব্যবহৃত বিশেষ চিহ্ন

HTML

HTML Part 025_Table এলিমেন্টের ট্যাগ

April 17, 2016 Sharmin Khan Ishita

Table এলিমেন্টের <tbody> <thead> <tfoot> ট্যাগ

এই তিনটি ট্যাগ দ্বারা টেবিলের body, header ও footer নির্ধারণ করে দেওয়া যায়। এগুলি টেবিলকে কয়েকটি ভাগ করে গ্রুপ গ্রুপ করে প্রদর্শন করে। বড় ওয়েব সাইট যদি প্রিন্ট করা হয় সেক্ষেত্রে প্রতিটি পেজে <thead> ও <tfoot> প্রিন্ট হয়। এই ট্যাগের Format হচ্ছে ...

<tbody> ... <tbody>

<thead> ... <thead>

<tfoot> ... <tfoot>

যেমন: নিচের কোডিংসহ একটি HTML ফাইল তৈরী করুন।

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<! border="0" presents no boder and margin works for top and left>

<tr> <th>Month</th> <th>Savings</th> </tr> </thead>

<tr> <td>January</td> <td>$100</td> /tr>

<tr>

<td>February</td>

</tr>

</tbody>

</table>

</body>

</html>

Table এর Border color এবং ফাঁকা সেল Clockwise

ইতিমধ্যেই আমরা টেবিলের border color সিলেক্ট করে দিয়েছি। এই border color শুধুমাত্র টেবিলের বর্ডার নয় যে কোন border এর ক্ষেত্রেই ব্যবহৃত হয়। border-color ছাড়াও border-style (solid নাকি dashed ইত্যাদি ধরনের বর্ডার) border-width (পুরত্ত্ব)ব নির্ধারন করে দেওয়া যাবে। এছাড়া বর্ডারের চারদিক অর্থ্যাৎ top, right, bottom ও left আলাদা আলাদাভাবে Color, Style এবং Width সংযোজন করা যায়। এটি প্রতিটি Attributes আলাদাভাবে ডিক্লিয়ার করা যায়। আবার একটি Attribute এর সাথে পরপর Value বসিয়ে দেওয়া যায়। এক্ষেত্রে Clockwise অর্থা্যৎ প্রথমে top পরে right পরে bottom এবং শেষে left অংশে Value প্রদান করে।

Color সম্বন্ধে আর একটু আলোচনা করা যাক, কালারকে সরাসরি red, green, blue ইত্যাদি নাম লিখে দেওয়া যায অথবা hex value যেমন: rr (red) gg(green) ও bb(blue) এর Value লিখে দেওয়া যায় এক্ষেত্রে ০ থেকে ১০০ পর্যমত্ম কাউন্ট করে এবং ff এর অর্থ ফুল (সম্পূর্ণ ১০০%) যেমন: #00ff00 এর অর্থ red=00, green=full full এবং blue=00 অর্থাৎ শুধুমাত্র ১০০% Green দেখাবে। আবার #505050 এর অর্থ হলো red 50%, green 50% এবং blue 50% এর মিশ্রিত কালার দেখাবে।

আবার rgb value ও লিখে দেওয়া যাবে এক্ষেত্রে 0 থেকে প্রতিটি কালারের জন্য 256 টি কালার Value থাকে। এখানে rgb লিখে ব্রাকেটের মধ্যে value দেওয়া যাবে। যেমন: rgb (255, 0, 0) অর্থ্যাৎ সম্পূর্ণ red বা rgb(255, 0, 255) অর্থ্যাৎ red ও blue এর 100% কালারের মিশ্রিত কালার। এখন দেখা যাক border-color কে কিভাবে top/right/left/bottom এ ডিক্লেয়ার করা যায়। Format হচ্ছে নিমণরূপ:

এভাবে মোট ৪টি বর্ডার লাল কালারে দেখাবে।

এখন Top এবং bottom হবে Red এবং Right ও Left হবে Green

এখন top=red, right=green, bottom=blue, left=green দেখাবে।

এখন Clockwise Top থেকে পর্যায়ক্রমে top-red, right=green, bottom=blue এবং left=pink কালার দেখাবে।

অথবা অন্যভাবেও দেওয়া যায়। যেমন:

border-top-color: # value(name, hex, rgb)

border-right-color: # value

border-bottom-color: # value

border-left-color: # value

যেমন: নিচের কোডিংসহ একটি HTML ফাইল তৈরী করুন।

<!DOCTYPE html>

<html>

<head>

<title> this is table border element </title>

</head>

<body>

</table> <br />

</table> <br />

</table> <br />

</table> <br />

</table> <br />

</table>

</body>

ব্রাউজার দিযে খুললে নিন্মেক্ত ফলাফল পাওয়া যাবে।

Previous Post Next Post

বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।

Book Name: Mastering Microsoft Word

Writer: Bappi Ashraf

Published By: Gyankosh Prokashani

Amount of Pages: 464

First Publish: October-2004

Last Edition: We've February-2015 edition. Future edition may be existed!

Book Price: BDT 350 (30% Discount)

পরিবেশক/প্রাপ্তিস্থান
Online : www.rokomari.com

Facebook Page

RELATED POST LINKS BELOW ********************************************

Part-01 :HTML এরসুচনা এবং কিছু অতি গুরুত্তপূর্ণ বিষয়

Part-02 : HTML Versions ওHtml Structure

Part-03 : Html Tag, Attribute, Elements ও Extention Name

Part004_Title Element এর ব্যবহার, নতুন কোডিং লেখা ও Body Element এর ব্যবহার

Part 005_ BRবা Line Break এলিমেন্টের ব্যাবহার

Part 006_Comments এর ব্যবহার

Part 007_Font সংক্রামত্ম এলিমেন্ট (ট্যাগ)

Part008_Ciation, Quotations এবং Definitation ইত্যাদি ট্যাগ

Part009_Bi-Directional Override (BDO) ELEMENT

Part010_Blinking Element

Part011_Paragraph Element

Part012_Heading Element

Part013_Html Style Attributs

Part014_html এstyle প্রয়োগ

Part 015_Style এ Font Family অ্যাট্রিবিউট

Part016_Style এBackground Image অ্যাট্রিবিউট

Part 017_Paragraph Element-এ Align Attributes

Part 018_HR ট্যাগের অনান্য Attributes

Part019_Html ডিক্লিয়ারেশন

Part 020_Html List, Ordered List, Attribute সহ Ordered List

Part021_Type Attributes

Part022_Unordered List, Attribute Nested List, Definition List

Part 023_ MARGIN ATTRIBUTE, Table Element, Table Element এরAttributes

Part 024_Table এরvalign Attributes

Part025_Table এলিমেন্টের <tbody> <thead> <tfoot> ট্যাগ

Part026_Border Style, Border width

Part 027_Colspan, Rowspan, Cell Padding

Part 028_HTML এর Layout, Table ব্যবহারে Layout

Part 029_HTML এরNested Table

Part030_Division Element, Span element

Part 031_Div এলিমেন্ট ব্যবহার করে Layout

Part 032_<Div> ও <Table> সহ Layout

Part33_গ্রাফিক্স, সংযোজন, এনিমেটেড গ্রাফিক্স, ইমেজের SIZE Attributes

Part34_ ছবি Path বা URL,ইমেজের ALT Attributes,Link Element

Part35_লিষ্ট এর সাথে Link এর ব্যবহার, URL বা Path এর বর্ণনা

Part36_Mailtolink তৈরী করা

Part37_FORM ও FORM এর Attributes

Part38_ওয়েব পেজ ভিডিও ও সাউন্ড সংযোগ

Part39_ভিডিও ফাইল সংযোজন

Part040_Youtube

Part 041_ ওয়েব পেজে ব্যবহৃত বিশেষ চিহ্ন

HTML

HTML Part 024_Table এর valign Attributes

April 17, 2016 Sharmin Khan Ishita

Table এর valign Attributes

valign দ্বারা সাধারণত Vertical Align বোঝানো হয়। শুধুমাত্র align দ্বারা Horizontal ব বোঝানো হয়। Vertical যদি Cell বড় হয় যেমন: height=300px। এক্ষেত্রে valign দ্বারা উপর, নিচ মাঝে বা বেইজে কনটেন্টকে অ্যালাইন করে দেওয়া যায়। সাধারণত <td>, <tr>, <th>, <tbody> ইত্যাদি ট্যাগের সাথে এই অ্যালাইন ব্যবহার করা হয়। এটির Format হচ্ছে <tbody valign=“top/middle/bottom/baseline”>, top দ্বারা উপরে, bottom দ্বারা নিচে, Middle দ্বারা সেন্টারে এবং baseline দ্বারা যদি টেক্সটের সাইজ ছোট/বড় হয় তবেও ফন্টের মূল বড়ি একটি লাইনে সাজানো থাকে।

যেমন: নিচের কোডিংসহ একটি HTML ফাইল তৈরী করুন।

<!DOCTYPE html>

<html>

<body>

<tr> <td valign="baseline"> Sopno</td> <td valign="baseline" style="font-size:150%" > Officer </td> <td align="right"> 15000</td> </tr>

<tr> <td valign="bottom">Mebin</td> <td valign="top"> Faculty </td> <td align="right"> 20000</td> </tr>

<tr> <td style="background-image:url('earth.jpg')"> Mebin</td>

<td style= "background-image:url('coffee.jpg')"> Faculty </td> <td align="right" style= "background-image:url('taka.jpg')" > 20000</td> </tr>

</table

</body>

</html>

ব্রাউজার দিযে খুললে নিন্মেক্ত ফলাফল পাওয়া যাবে।