weeks-web/lesson9.html at master · m4hi2/weeks-web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>এটা আমাদের ওয়েব !  পাঠ  ৯ </title>
  <link href='http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy|Alfa+Slab+One' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="prism/prism.css">
</head>
<body>

<hgroup>
  <h1>অবস্থান  এবং ফ্রী সময়</h1>
  <h2>এটা আমাদের ওয়েব !  পাঠ  ৯</h2>
</hgroup>

<nav>
  <p>পূর্বের পাঠ:<br><a href="lesson8.html">সিএসএস লেওউট </a></p>
  <p><a href="index.html">সূচি </a></p>
  <p>পরবর্তী পাঠ:<br><a href="lesson10.html">আপনি কি ভাবে একজন .....? </a></p>
</nav>

  <main>
    <p>স্বাগতম !  এই অংশে আমরা এখানে আরো অনেক বিস্তারিত জানতে পারবো  — <em>positioning</em> — এবং এর পরে আমরা কিছু ফ্রী সময় নিয়ে আরো অনেক কিছু কাজ করবো আমাদের এই প্রোজেক্টে। </p>

    <h2>অবস্থান</h2>

    <p>অবস্থান হল সিএসএস এর একটি বৈশিষ্ট্য যেটা ব্যাবহার করে আপনি  আরো অনেক আকর্ষণীয় সিএসএস লেওউট  তৈরি করতে পারেন। এই এইডিয়া থেকে আপনি ডিফল্ট অবস্থান নিতে পারেন তবে এটায় যেন পরিপূর্ণ  উপাদান থাকে  — সাধারণত  এটি কি ভাবে পেজে প্রদর্শিত হবে  — এবং পরে এইটি  অবস্থান পরিবর্তন করবে যেন এটি শেষ কোথায় উপস্থিত হয় আকর্ষণীয় কোন ফলাফলের সাথে। </p>

    <p> অধিকতর   কর্মব্যস্ততা ছাড়া , একটি উদাহরণ দেখুন !</p>

    <p>শুরুতেই:</p>

    <ol>
      <li>তৈরি করুন একটি  <a href="https://thimble.webmaker.org/">থিম্বোল পেজ</a>.</li>
      <li>যোগ করুন <code>style</code> এইচটিএমএল এর ওপরের উপাদান।</li>
      <li>যোগ করুন নিচের দুইটি <code>div</code> এইচটিএমএল এর ওপরের উপাদান। </li>
 <pre><code class="language-markup">&lt;div class="first"&gt;&lt;/div&gt;
&lt;div class="second"&gt;&lt;/div&gt;</code></pre>
      <li> পেজে নিচের সিএসএসটি যোগ করুন:</li>
<pre><code class="language-css">div {
  font-size: 200%;
  line-height: 150px;
  color: rgba(0,0,0,0.3);
  width: 250px;
  height: 150px;
  margin: 0 auto;
  text-align: center;
}

.first {
  background-color: rgba(255,0,0,0.5);
  position: ;
}

.second {
  background-color: rgba(255,0,255,0.5);
}</code></pre>
</ol>

<p>ঠিক এই পয়েন্টে আমাদের দুইটি  কনটেইনার আছে, একি সাইজের, কিন্তু ভিন্ন কলামে। </p>

<p class="note"> আমি এগুলোকে সামান্য স্বচ্ছ করেছি তো আমরা দেখতে পাই উভয়  উপাদান  সঠিক ভাবে একটি অন্যটিকে অতিক্রম করে।  এই  ব্যাবহার করে স্বচ্ছ রঙটি তৈরি করে। <code>rgba()</code> ব্লক গুলো।  এর পরে দেখে কি করে কাজ করে, পড়ুন <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">MDN color value</a> পেজটি।</p>

<p>আপনি নোটিস পাবেন সাথে কিছু নিয়ম <code>.first</code> নির্বাচক, আমরা ফাকা আছি <code>position</code> প্রপার্টিতে। এটি পুরন করতে হবে সাথে বিভিন্ন মানের  পরবর্তী বিভাগে পাওয়া  অপশন গুলো প্রদর্শন করে। </p>

  <h3>স্থির অবস্থান</h3>

  <p>শুরুতেই, মান গুলো পূরণ করুন <code>static</code> ভেতরের <code>position</code> প্রপার্টির।  এটি একটি ডিফল্ট অবস্থানের মত, তো আপনি দেখতে পাবেন কোন পরিবর্তন নাই। চলতে থাকুন !</p>

  <h3>আপেক্ষিক  অবস্থান</h3>

  <p>এখন  মানটি পরিবর্তন করুন <code>static</code> থেকে <code>static</code> থেকে <code>relative</code>। এখন আমাদের ক্ষমতা আছে উপাদান গুলো সরানো থেকে  এই পেজের পরিপূর্ণ  ভাবে তার আসল অবস্থান সরানোর। আমরা নির্দিষ্ট পরিমান উপাদান সরাতে পারি <code>top</code>, <code>bottom</code>, <code>left</code> এবং <code>right</code> বৈশিষ্ট্য ব্যাবহার করে।  এই লাইনটি যোগ করতে হবে <code>position</code> বৈশিষ্ট্যতে:</p>

<pre><code class="language-css">top: 30px;
bottom: ;
left: 30px;
right: ;</code></pre>

<p>এখন আপনি ওপর থেকে দেখতে পারেন <code>div</code>নিচের দিকে সরানো হয়েছে এবং ডান দিক থেকে। চেস্টা  করুন পরিক্ষা নিরীক্ষার সাথে অন্য মান যোগ করুন কিছু মিনিটের জন্য। আপনার মনে হতে পারে এইটি অদ্ভুত  মান থেকে উপাদান গূলো সরাতে বিপরীত দিক থেকে  যা আপনি আশা করতে পারেন, কিন্তু  বিষয়টি হল আপনি উল্লেখ করতে পারেন  সাইড থেকে আপনি উদ্যোগী হয়েছেন উপাদানটি সরানো থেকে। </p>

<p>এখন সব সেট করুন <code>top</code>, <code>left</code>, ইত্যাদি।  মান থেকে <code>0</code> (অথবা শুধু মান গুলো ফাকা থাকে),  পরবর্তী পার্টের জন্য প্রস্তুতি নিন।</p>

  <h3>পূর্ণ অবস্থান </h3>

<p>পূর্ণ অবস্থান পুরোপুরি আলাদা। এইটি প্রমান পত্র থেকে গঠনপ্রণালীর উপাদান সম্পূর্ণভাবে মুছে দেয় তো এইটি থেকে কোন জায়গা নেওয়া যায়না, এবং যে কোন জায়গায় অবস্থান নিতে <code>body</code> উপাদান গুলো আপনার পছন্দ মত।  এটি কাজ করবে অনুরূপভাবে একটু ভিন্ন ভাবে , তো  বিশ্লেষণ করি । </p>

<p>পরিবর্তন করুন <code>position</code> মান থেকে <code>relative</code> থেকে <code>absolute</code>। আপনি প্রথম থেকে দেখতে পারেন<code>div</code>ওপরের বাম দিক থেকে সরানো  <em>Preview</em> এলাকা, এবং  চলতে থাকা ওপরের দ্বিতীয় থেকে<code>div</code>. দ্বিতীয়টি <code>div</code> অবস্থান এখন যদি প্রথম থেকে  হয়  তাহলে<code>div</code> উপস্থিত থাকবে না অন্য সব গুলো !</p>

<p>এখন চেষ্টা করুন স্থাপন করতে  <code>top</code> and <code>right</code> সম্পত্তি উভয় মান থেকে <code>50px</code>। এই উপাদান গুলো এখন সরান যেতে পারে  যদি  এইটি হয় ৫০ পিক্সেল দূরে থাকে ওপর  <code>body</code>, এবং  ৫০ পিক্সেল দূরে থাকে ডান দিক থেকে <code>body</code>।  এইটি  লক্ষণীয়ভাবে ভিন্ন অবস্থা থেকে থাকে।</p>

<p>শেষের অংশতে , আমি চাই আপনি আবারো যান  <a href="http://www.lipsum.com/">লোরেন আইপসুম জেনারেটোরে</a>।  তৈরি করুন ৫ থেকে ৬ টা পেরাগ্রাফ এর জন্য, পেস্ট করুন আপনার এইচটিএমএল কোড, এবং  জমা করুন সবগুলো পেরাপ্রাফের ভিতরের <code>p</code> উপাদান।  মুলত, স্থাপন করতে প্রয়োজন মত পেজ স্ক্রল করুন । নোট  কি করে একাবারে তুলনা মূলক একই স্থানে বডি উপাদান থাকে , এবং  স্ক্রল  করুন পেজ স্ক্রল হিসেবে। </p>

  <h3>স্থায়ী অবস্থান</h3>

<p>পরে, যদি মান পরিবর্তন হয় <code>position</code> বৈশিষ্ট থেকে<code>absolute</code> থেকে <code>fixed</code>। এর পার্থক্য বের করুন  — এখন চেস্টা করুন পেজের স্ক্রলিং এর !</p>

<p> কেন এটা ঘটেছে?  কারন পূর্ণ অবস্থানে সাধারনত উপাদান অবস্থান থেকে আপেক্ষিক  <code>body</code> উপাদানের প্যারামিটার (আমি সাধারনত বলি , এই রকম <a href="http://css-tricks.com/absolute-positioning-inside-relative-positioning/">পরিবর্তন করা যাবে</a>)। স্থায়ী অবস্থানের পরিবর্তে অবস্থান উপাদান  তুলনামূলক ভাবে থাকে ব্রাউজার উইন্ডোতে, কোনটা  কেন এই উপাদান এই স্থানে অবস্থান করছে  যখন এই উইন্ডো স্ক্রল করে। আপনি এর সাথে অনেক মজা করতে পারেন, যেমন ধরুন, যদি আপনি একটি প্রয়োজনীয় উপাদানের সব সময় প্রয়োজন হয় দেখার জন্য ,  ম্যাপ করতে পারেন, অথবা  মেনু</p>

  </main>

<nav>
  <p>পূর্বের পাঠ:<br><a href="lesson8.html">সিএসএস লেওউট</a></p>
  <p><a href="index.html">সুচি</a></p>
  <p>পরবর্তী পাঠ :<br><a href="lesson10.html">আপনি কি ভাবে একজন .....?</a></p>
</nav>

<hr>
<p><a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br /> এই কাজটি লাইসেন্সের আওতায়  আছে <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"> সৃষ্টিশীল  সাধারন  বিশেষণ ৪.০  আন্তর্জাতিক লাইসেন্স </a>. এটি শেয়ার করুন, ভাল কিছু করুন, ভালোর জন্য ব্যাবহার করুন</p>

</body>
  <script src="prism/prism.js"></script>
</html>