Showing posts with label Web Development. Show all posts
Showing posts with label Web Development. Show all posts

Monday, April 18, 2016

HTML Part 032



<Div> <Table> সহ Layout
এখন Content সমৃদ্ধ Div এর মধ্যে একটি টেবিল সংযোজন করবো। Table Layout এ যেমন Nested Table আকারে টেবিলের Cell 1 Column 2 Rows বিশিষ্ট একটি টেবিল দিয়েছিলাম সে রকম একটি টেবিল <Div> এর মধ্যে সংযোজন করে Layout তৈরী করবো।
উদাহরণ স্বরূপ কোড হচ্ছে নিম্নরূপ:

<!DOCTYPE html>
<html>
<head>
<title> example of Layout9 </title>
</head>
<body>
<div style="width:500px">
<div style="background-color:#0099FF;text-align:center;">
<h1 style="margin-bottom:0;">Nova Computer</h1>
</div>
<div  style="background-color:#9999FF; height:25px; width:500px; float:left;">
Home </a>&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;
</div>
<div style="background-color:#00CCFF; height:200px; width:100px; float:left;">
<b>LINK</b> <br />
Link1<br />
Link2<br />
Link3
</div>
<div  style="background-color:#CCFFFF; height:200px; width:300px; float:left;">
Title and Content.
     <table border="1"style="height:150px;">
     <tr>
     <td style="width:150px;" >Sub Title1</td>
     <td>
     <p style="font-size: 10;">
     <b>Sub Title2</b> <br />
     content2 content2 content2
     </p>
     <p style="font-size: 10;">
     <b>Sub Title3</b><br>
     content3 content3 content3
     </p>
     </td>
     </tr>
     </table>
</div>
<div  style="background-color:#00CCFF; height:200px; width:100px; float:left;">
<b>Adsence</b><br />
Add1<br />
Add2<br />
Add3
</div>
<div  style="background-color:#CCCCFF;clear:both;text-align:center;">
Copyright © bappi ashraf.com
</div>

</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 031_Div এলিমেন্ট ব্যবহার করে Layout



Div এলিমেন্ট ব্যবহার করে Layout
আমরা এখন <Div> এলিমেন্ট ব্যবহার করে Layout তৈরী করবো। যদিও <Div> এর সাথে CSS এর অংশ ID বা Class ব্যবহার করা হয়। এ বিষয়ে আমরা পরে জানাবো।
নিচে লক্ষ্য করবেন প্রথমে 500px width এর একটি Div নেওয়া হয়েছে। অর্থ্যাৎ মোট 500px width এর একটি Div তৈরী হবে এবং Height উল্লেখ না করার কারনে এটি Content অনুসারে নিচের দিকে বাড়তে থাকবে। লক্ষ্য করুন এই <Div> টি শেষ করা হয় নাই। এই ডিভের মধ্যে আরো ৬ জোড়া <Div> নেওয়া হয়েছে এবং শেষে <Div> টিকে শেষ করা হয়েছে। অর্থ্যাৎ Div এর মধ্যে Div। দ্বিতীয় <Div> Banner বা Header দেওয়া হয়েছে। এটি Automatic 500Px width হবে। তৃতীয়টি মেনুর জন্য এটির অবশ্য Height 25px নির্ধারন করে দেওয়া হয়েছে। পরের তিনটি <Div> কে যথাক্রমে 100Px, 300Px 100Px অর্থ্যাৎ মোট 500Px কে তিন ভাগে ভাগ করে Left Side Bar, Content Right Side Bar এর জন্য জায়গা রাখা হয়েছে। পাশাপাশি রাখার জন্য যে যেন একটি শেষ হলে অপরটি শুরু হয় সেজন্য floar:left সিলেক্ট করে দেওয়া হয়েছে। শেষে Footer এর জন্য আরও একটি Div নেওয়া হয়েছে। মনে রাখবেন আগের দিনে Layout এর জন্য Table লে-আউট ব্যবহার করা হতো। এটি সঠিক নহে টেবিলকে ব্যবহার করতে হবে Tabular Data প্রদর্শনের জন্য। এখন এটির পরিবর্তে Div Element কে ব্যবহার করা হয়।
Layout:  এখানে মোট ৭টি Div সম্বন্ধে আগেই বলা হয়েছে। আর একটু ধারনা নেওয়া যাক।


উদাহরণ স্বরূপ কোড হচ্ছে নিম্নরূপ:
<!DOCTYPE html>
<html>
<head>
<title> example of Layout7 </title>
</head>
<body>
<div  style="width:500px">
<div  style="background-color:#00CCFF;height:25px;">
Header </div>
<div  style="background-color:#9999FF;height:25px;">
Home menu </div>
<div id="menu" style="background-color:#00CCFF;height:200px;width:100px;float:left;">
Left Side Bar
</div>
<div style="background-color:#CCFFFF;height:200px;width:300px; float:left;">
Title and Content. </div>
<div style="background-color:#00CCFF;height:200px;width:100px;float:left;">
Right Side Bar
</div>
<div style="background-color:#CCCCFF;">
Footer </div>
</div>
</body>
</html>
ব্রাউজার দিযে খুললে নিন্মেক্ত ফলাফল পাওয়া যাবে।

এখন Program টি আরও Modify করে বিভিন্ন Data Input  করা হয়েছে। যার ব্যবহার ইতিমধ্যেই দেওয়া হয়েছে। কিন্তু Structure একই রাখা হয়েছে।

উদাহরণ স্বরূপ কোড হচ্ছে নিম্নরূপ:

<!DOCTYPE html>
<html>
<head>
<title> example of Layout6 </title>
</head>
<body>

<div style="width:500px">

<div style="background-color:#0099FF;text-align:center;">
<h1 style="margin-bottom:0;">Nova Computer</h1></div>
<div  style="background-color:#9999FF; height:25px; width:500px; float:left;">
Home </a>&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;</div>

<div style="background-color:#00CCFF; height:200px; width:100px; float:left;">
<b>LINK</b> <br />
Link1<br />
Link2<br />
Link3
</div>

<div style="background-color:#CCFFFF; height:200px; width:300px; float:left;">
Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content.</div>
<div style="background-color:#00CCFF; height:200px; width:100px;float:left;">
<b>Adsence</b><br />
Add1<br />
Add2<br />
Add3
</div>

<div  style="background-color:#CCCCFF;clear:both;text-align:center;">
Copyright © bappi ashraf.com</div>
</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 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 ********************************************