know yourselves. information, computer, 7 wonders, various.

Sunday, April 17, 2016

HTML Part 026_Border Style, Border width


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>
<table  border="5" style="height:100px; width:300px;  border-color:red; border-width:3px; border-style:solid dotted double dashed;">
<tr> <td>nova1 </td><td> nova2 </td> <td> nova3 </td><td> nova4 </td> </tr> </table> <br />
<table border="5" style="width:300px; border-color:red; border-width:5px; border-style:dotted;">
<tr><td>nova</td><td></td> <td> </td><td> </td> </tr> </table> <br />
<table border="5" style="width:300px; border-color:red; border-width:5px; border-style:double;">
<tr><td>nova</td><td></td> <td> </td><td> </td> </tr> </table> <br />
<table border="5" style="width:300px; border-color:red; border-width:5px; border-style:dashed;">
<tr><td>nova</td><td></td> <td> </td><td> </td> </tr> </table> <br />
</body>
</html>
ব্রাউজার দিযে খুললে নিন্মেক্ত ফলাফল পাওয়া যাবে।
যেমন: নিচের কোডিংসহ একটি HTML ফাইল তৈরী করুন।
<!DOCTYPE html>
<html> <body>
<table border="5" style="width:300px; border-color:red; border-width:5px; border-style:groove;">
<tr><td>nova</td><td></td> <td> </td><td> </td> </tr> </table> <br />
<table border="5" style="width:300px; border-color:red; border-width:5px; border-style:ridge;">
<tr><td>nova</td><td></td> <td> </td><td> </td> </tr> </table> <br />
<table border="5" style="width:300px; border-color:red; border-width:5px; border-style:inset;">
<tr><td>nova</td><td></td> <td> </td><td> </td> </tr> </table> <br />
<table border="5" style="width:300px; border-color:red; border-width:5px; border-style:outset;">
<tr><td>nova</td><td></td> <td> </td><td> </td> </tr> </table> <br />
<table border="5" style="width:300px; border-color:red; border-width:5px; border-style:hidden;">
<tr><td>nova</td><td></td> <td> </td><td> </td> </tr> </table> <br />
</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:5px 10px 15px 20px;">
<tr> <td>nova1 </td><td> nova2 </td> <td> nova3 </td><td> nova4 </td> </tr> </table> <br />
<table border="5" style="height:50px; width:300px;  border-color:red; border-width:thin
medium thick 10px;">
<tr> <td>nova1 </td><td> nova2 </td> <td> nova3 </td><td> nova4 </td> </tr> </table> <br />
<table  border="5" style=" height:50px; width:300px; border-style:solid; border-color:red; border-top-width:20px;border-right-width:15px;border-bottom-width:10px;border-left-width:5px;">
<tr> <td></td> <td></td> <td></td> <td></td> </tr>
</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... 

 cd

RELATED POST LINKS BELOW ********************************************
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_ ওয়েব পেজে ব্যবহৃত বিশেষ চিহ্ন