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

Monday, April 18, 2016

HTML Part 030_Division Element, Span element




Division Element
<div>  ট্যাগের মাধ্যমে একটি HTML ডকোমেন্টের মধ্যে সেকশন বা ডিভিশন তৈরী করা হয়। অনেকগুলি এলিমেন্টের গ্রুপ তৈরীতে এটি ব্যবহৃত হয়। ওয়েবপেজের Layout  তৈরীতে CSS এর সাথে <div> ট্যাগ অতিমাত্রায় ব্যবহৃত হয়। <div> ট্যাগের প্রথমে এবং শেষে ব্রাউজার ডিফল্ট হিসাবে একটি ফাঁকা লাইন যোগ করে নেওয়া যায়। এই ট্যাগের মধ্যে অন্যান্য Block Level এলিমেন্ট  যেমন: Table, Parragraph, Heading, List  ইত্যাদি ব্যবহার করা যায়। এই ট্যাগের ফরম্যাট হচ্ছে
        <div>...................</div>
উদাহরণ স্বরূপ কোড হচ্ছে নিম্নরূপ:

<!DOCTYPE html>
<html>
<title>example of <div> tag </title>
</head>
<body>
<h3>This is nova system without div tag. </h3>

<div style="color:green;text-align:center;border:1px solid red">
OUR NEW WAP COURSE
<h2>MOBILE WEB PAGE</h2>
<h1> WELCOME </h1>
<p style="text-align:right">
learn mobile web page using wap
<p style="text-align:left">
PHONE:8616571
</div>
<p>This is nova system without div tag. </p>
<p style="text-align:right">
learn mobile web page using wap
<p style="text-align:left">
PHONE:8616571

</body>
</html>
ব্রাউজার দিযে খুললে নিন্মেক্ত ফলাফল পাওয়া যাবে।


Span element
<div>এর সমস্ত বৈশিষ্ট ঠিক রেখে সামান্য পরিবর্তন আনার জন্য <span>.ব্যবহার করা হয়।
উদাহরণ স্বরূপ কোড হচ্ছে নিম্নরূপ:
<!DOCTYPE html>
<html>
<body>
<div style="color:green;font-size:50px; padding:30px;" >NOVA COMPUTER <br /> <span style="color:red; font-size:30px;"> one step ahead always</span>..</div>
</body>
</html>
ব্রাউজার দিযে খুললে নিন্মেক্ত ফলাফল পাওয়া যাবে।
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 ********************************************

HTML Part 029_Nested Table,




Nested Table
এটির অর্থ হচ্ছে টেবিলের মধ্যে আরও একটা টেবিল। অনেক সময় এই ধরনের টেবিলের দরকার পরে।
নিচের কোডিংসহ একটি HTML ফাইল তৈরী করুন।
<!DOCTYPE html>
<html>
<body>
<table frame="box" rules="all" border="2" style="border-color:red;">
<tr><td colspan="1"> nested table</td> <td>Photo</td> </tr>
<tr> <td rowspan =3 style= "background-image:url('taka.jpg'); color:yellow;">
          bappi ashraf</td> <td><img src="bappi.jpg" width="100" height="75"></td> </tr>
<tr> <td>
<table cellspacing=2 border="1" style="background-color:pink;" ></tr>
<tr><th>Name </th> <th> Title </th> <th>Salary</th> </tr>
<tr> <td> Sopnow</td> <td> officer </td> <td> 15000</td> </tr>
<tr> <td> Mebin </td> <td> faculty </td> <td> 20000</td> </tr>
</table> </td> </tr>
</table>
</body>
</html>ব্রাউজার দিযে খুললে নিন্মেক্ত ফলাফল পাওয়া যাবে।
Nasted Table ব্যবহার করে Layout
এখন একটি টেবিলের মধ্যে আরেকটি টেবিল অর্থ্যাৎ Nasted টেবিল ব্যবহার করে আরেকটি Layout তৈরী করবো।
notepade++  নিচেরমত  কোডিংসহ একটি HTML ফাইল তৈরী করুন এবং সেভ করুন।
<!DOCTYPE html>
<html>
<head>
<title> example of Layout5 </title>
</head>
<body>
<table width="500" border="0">
<tr> <td colspan="3" style="background-color:#0099FF;text-align:center;">
<h1>Nova Computer</h1>
</td> </tr>

<tr><td colspan="3"  style="background-
     color:#9999FF;">
Home &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Books &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Tutorials &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
About Us &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
Contact Us &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;</td> </tr>

<tr><td style="background-
     color:#00CCFF;width:100px;text-align:top;">
<b>LINK</b><br />
Link1<br />
Link2<br />
Link3
</td>
<td style="background-color:#CCFFFF;width:300px;text-align:center ;">
Title, Title, Title,
<table border="1"> <tr>

<td style="width:150px;" >Sub Title1</td>
<td>
<p style="font-size: 10;">
<b>Sub Title2</b> <br />
content2 content2 content2 content2 content2
</p>
<p style="font-size: 10;">
<b>Sub Title3</b><br>
content3 content3 content3 content3 content3 
</p>
</td>
</tr>
</table>

<td style="background-color:#00CCFF;width:100px;text-align:top;">
<b>Adsence</b><br />
Add1<br />
Add2<br />
Add3
</td>
</td>

</tr>

<tr>
<td colspan="3" style="background-color:#CCCCFF;text-align:center;">
Copyright © bappi ashraf.com</td>
</tr>
</table>
</body>
</html>
ব্রাউজার দিযে খুললে নিন্মেক্ত ফলাফল পাওয়া যাবে।


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 ********************************************