FEED Validator

Congratulations!

This is a valid Atom 1.0 feed.

Recommendations

This feed is valid, but interoperability with the widest range of feed readers could be improved by implementing the following recommendations.

• line 1, column 118: Use of unknown namespace: http://schemas.google.com/blogger/2008 [help]

  ... r.com/styles/atom.css" type="text/css"?><feed xmlns='http://www.w3.org/2 ...
                                               ^

• line 1, column 118: Unable to validate namespace: http://schemas.google.com/g/2005. See the Google Data specification at https://developers.google.com/gdata/docs/1.0/elements [help]

  ... r.com/styles/atom.css" type="text/css"?><feed xmlns='http://www.w3.org/2 ...
                                               ^

• line 1, column 3265: Self reference doesn't match document location [help]

  ... eeds/624213398567285603/posts/default'/><link rel='alternate' type='text ...
                                               ^

• line 1, column 4838: title should not contain HTML unless declared in the type attribute: < (6 occurrences) [help]

  ... pe='text'>HTML &amp;lt;a&amp;gt; Etiketi</title><content type='html'>&lt ...
                                               ^

• line 1, column 0: Invalid HTML: junk characters in start tag: u'\u201drobots\u201d content=\u201dno', at line 1, column 1 [help]

  <?xml version='1.0' encoding='UTF-8'?><?xml-stylesheet href="http://www.blog ...
  

• line 580, column 421: link should not contain HTML: < (6 occurrences) [help]

  ... title='HTML &amp;lt;a&amp;gt; Etiketi'/><author><name>HTML öğren</name>< ...
                                               ^

• line 582, column 0: Non-html tag: svg (672 occurrences) [help]

      <svg class="bi bi-chevron-double-left" fill="currentCo ...
  

• line 651, column 0: content should not contain data-label attribute (1655 occurrences) [help]

  			<td data-label="Tarayıcı">Chrome</td>
  

• line 949, column 0: content should not contain script tag [help]

      <script>
  

• line 959, column 0: content should not contain style tag (2 occurrences) [help]

  <style type="text/css">
  

• line 4583, column 0: style attribute contains potentially dangerous content: box-sizing (11 occurrences) [help]

  <p>Bu makaleyi okuyorsan, muhtemelen <span>HTML</span> öğr ...
  

Source: https://www.k-html.com/feeds/posts/default

1. <?xml version='1.0' encoding='UTF-8'?><?xml-stylesheet href="http://www.blogger.com/styles/atom.css" type="text/css"?><feed xmlns='http://www.w3.org/2005/Atom' xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/' xmlns:blogger='http://schemas.google.com/blogger/2008' xmlns:georss='http://www.georss.org/georss' xmlns:gd="http://schemas.google.com/g/2005" xmlns:thr='http://purl.org/syndication/thread/1.0'><id>tag:blogger.com,1999:blog-624213398567285603</id><updated>2024-03-16T04:10:10.260+03:00</updated><category term="html"/><category term="formlar"/><category term="&lt;input&gt;"/><category term="form"/><category term="&lt;label&gt;"/><category term="Listeler"/><category term="Paragraf biçimlendirme"/><category term="HTML formlar"/><category term="Tablolar"/><category term="html etiketleri"/><category term="&lt;fieldset&gt;"/><category term="&lt;form&gt;"/><category term="&lt;legend&gt;"/><category term="&lt;option&gt;"/><category term="&lt;select&gt;"/><category term="Alıntılar"/><category term="Bağlantılar"/><category term="Dil Kodları"/><category term="Dile genel bakış"/><category term="Medya"/><category term="dahili sayfalar"/><category term="etiketler"/><category term="html iframe"/><category term="html temelleri"/><category term="html5"/><category term="iframes"/><category term="lang"/><category term="paragrafları"/><category term="seo"/><category term="çerçeveler"/><category term="&lt;!-- --&gt;"/><category term="&lt;!DOCTYPE&gt;"/><category term="&lt;a&gt;"/><category term="Açıklama listeleri"/><category term="Açılır listeler"/><category term="Başlıklar"/><category term="Dosya yolları"/><category term="Editörler"/><category term="Farklı Dillerde Sayfalar"/><category term="Formda Normal Düğmeler"/><category term="Formun Ortak Öğelerini Toplamak"/><category term="HTML Bağlantılar"/><category term="HTML Dile genel bakış"/><category term="HTML Editörler"/><category term="HTML Sesleri"/><category term="HTML Videolar"/><category term="HTML ne kadar zor"/><category term="HTML zor mu"/><category term="Kod biçimlendirme"/><category term="Metin biçimlendirme"/><category term="Metin düzenleme"/><category term="Radyo düğmeleri"/><category term="Resimler"/><category term="Seçim aralıkları"/><category term="Sırasız Listeler"/><category term="Temeller"/><category term="Videolar"/><category term="akustik"/><category term="database"/><category term="genek bakış"/><category term="giriş alanları"/><category term="html nedir?"/><category term="html programlama dili"/><category term="html çerçeve"/><category term="iframe nedir"/><category term="kod editor"/><category term="label"/><category term="onay kutuları"/><category term="sesler"/><category term="sıralamalı listeler"/><category term="veritabanlar"/><category term="Öğeleri Adresleme"/><category term="Ülke Kodları"/><title type='text'>HTML öğren</title><subtitle type='html'>HTML&amp;#39;yi herhangi bir deneyimi olmadan ve basit açıklamalarla kolayca ücretsiz k-html&amp;#39;den HTML öğren ile öğrenebilirsin.</subtitle><link rel='http://schemas.google.com/g/2005#feed' type='application/atom+xml' href='https://www.k-html.com/feeds/posts/default'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default'/><link rel='alternate' type='text/html' href='https://www.k-html.com/'/><link rel='hub' href='http://pubsubhubbub.appspot.com/'/><link rel='next' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default?start-index=26&amp;max-results=25'/><author><name>HTML öğren</name><uri>http://www.blogger.com/profile/05938401370972816509</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB9hVaVznt_p0FHumsq5E1ns0HFhwUsz5N8PDjeIc1oE4O70yakyUZqpJJiZyKolfcNdZlaOrykdeVaT9wGLi4Gp6Ko2vw9JCv-r2AQBF1JjXNu_09kuRKvXx-7fys1Hw/s113/html.jpg'/></author><generator version='7.00' uri='http://www.blogger.com'>Blogger</generator><openSearch:totalResults>41</openSearch:totalResults><openSearch:startIndex>1</openSearch:startIndex><openSearch:itemsPerPage>25</openSearch:itemsPerPage><entry><id>tag:blogger.com,1999:blog-624213398567285603.post-5888691169046906594</id><published>2023-05-28T18:02:00.031+03:00</published><updated>2024-03-14T18:17:16.247+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="&lt;a&gt;"/><category scheme="http://www.blogger.com/atom/ns#" term="Bağlantılar"/><category scheme="http://www.blogger.com/atom/ns#" term="etiketler"/><category scheme="http://www.blogger.com/atom/ns#" term="html"/><category scheme="http://www.blogger.com/atom/ns#" term="html etiketleri"/><category scheme="http://www.blogger.com/atom/ns#" term="seo"/><title type='text'>HTML &amp;lt;a&amp;gt; Etiketi</title><content type='html'>&lt;meta name=”robots” content=”noindex”&gt;
3. <div class="parent-links">
4.  <a class="btn btn-primary" href="https://www.k-html.com/2023/03/html-dilin-tum-etiketleri-ve-ozellikleri.html">
5.    <svg class="bi bi-chevron-double-left" fill="currentColor" height="18" viewbox="0 0 18 18" width="18">   <path d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" fill-rule="evenodd">   <path d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" fill-rule="evenodd"> </path></path></svg>
6.    Derse dön
7.  </a>
8.  <a class="btn btn-primary" href="https://www.k-html.com/2023/03/html-dilin-tum-etiketleri-ve-ozellikleri.html">
9.    Derse dön
10. <svg class="bi bi-chevron-double-right" fill="currentColor" height="18" viewbox="0 0 18 18" width="18">
11.  <path d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z" fill-rule="evenodd">
12.  <path d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z" fill-rule="evenodd">
13. </path></path></svg>
14.  </a>
15. </div>
16. <details open="">
17.  <summary style="text-align: left;">Sayfa içeriği</summary>
18.  <ul class="postcontent">
19.    <li>
20.      <b>›</b> <a href="https://www.k-html.com/2023/05/html-etiketi.html#et"><strong><a> Etiketinin Tanımı</strong></a>
21.    </li>
22.    <li>
23.      <b>›</b> <a href="https://www.k-html.com/2023/05/html-etiketi.html#tdk"><strong>Tarayıcı desteğin konsepti</strong></a>
24.    </li>
25.    <li>
26.      <b>›</b> <a href="https://www.k-html.com/2023/05/html-etiketi.html#eo"><strong><a> etiketin özellikleri</strong></a>
27.    </li>
28.    <li>
29.      <b>›</b> <a href="https://www.k-html.com/2023/05/html-etiketi.html#eko"><strong><a> etiketin kullanma örnekleri</strong></a>
30.    </li>
31.    <li>
32.      <b>›</b> <a href="https://www.k-html.com/2023/05/html-etiketi.html#vt"><strong>Varsayılan tasarımı</strong></a>
33.    </li>
34.    <li>
35.      <b>›</b> <a href="https://www.k-html.com/2023/05/html-etiketi.html#ivn"><strong>İpuç ve notlar</strong></a>
36.    </li>
37.  </ul>
38. </details>
39. <hr class="hrkk" />
40. <h2 id="et"><a> Etiketinin Tanımı</h2>
41. <p>Genel olarak, bir sayfada bir bağlantıyı görüntülemek için <span><a></span> etiketi aşağıdaki şekilde kullanılır:</p>
42. <pre class="code"><ul class="ucode"><li><span style="color: blue"><a</span> <span style="color: red">href=</span><span style="color: red">"</span>url<span style="color: red">"</span><span style="color: blue">></span>metin<span style="color: blue"></a></span></li></ul></pre>
43. <p>"metin" yerine, kullanıcının görmesini istediğimiz metni; "url" yerine ise kullanıcıyı yönlendirmek istediğimiz bağlantıyı yazabiliriz.</p>
44. <p>Varsayılan olarak, eklenen bağlantı aşağıdaki şekilde görüntülenir:</p>
45. <ul>
46.  
47.  <li>Henüz tıklanmadıysa, bağlantı mavi renkte ve altı çizilidir.</li>
48.  <li>Daha önce tıklandıysa, bağlantı mor renkte ve altı çizilidir.</li>
49.  <li>Bağlantıya tıklandığında, bağlantı kırmızı renkte görüntülenir.</li>
50.  
51. </ul>
52.  
53.  
54.  
55. <hr />
56. <h2 id="tdk">Tarayıcı Desteğin Konsepti</h2>
57. <p>Bazı tarayıcı tarafından desteklenmeyen farklı etiketler vardır.<br />
58.  
59. Aşağıdaki tabloda <a> etiketini destekleyen ve desteklemeyen tarayıcıların listesi ekledim.</p>
60. <table class="table">
61.     <thead>
62.     <tr>
63.     <th>Tarayıcı</th>
64.     <th>Destekliyor mu?</th>
65.        
66.     </tr>
67.     </thead>
68.     <tbody>
69. <tr>
70. <td data-label="Tarayıcı">Chrome</td>
71. <td data-label="Destekliyor mu?">Destekleniyor</td>
73.  </tr>
74.       <tr>
75.  
76. <td data-label="Tarayıcı">Edge</td>
77.  
78. <td data-label="Destekliyor mu?">Destekleniyor</td>
79.  
81.  
82.  </tr>
83.       <tr>
84. <td data-label="Tarayıcı">Firefox</td>
85. <td data-label="Destekliyor mu?">Destekleniyor</td>
87.  </tr>
88.       <tr>
89. <td data-label="Tarayıcı">Opera</td>
90. <td data-label="Destekliyor mu?">Destekleniyor</td>
92.  </tr>
93.       <tr>
94. <td data-label="Tarayıcı">Safari</td>
95. <td data-label="Destekliyor mu?">Destekleniyor</td>
97.  </tr>
98.       <tr>
99. <td data-label="Tarayıcı">Android Webview</td>
100. <td data-label="Destekliyor mu?">Destekleniyor</td>
102.  </tr>
103.       <tr>
104. <td data-label="Tarayıcı">Android için Chrome</td>
105. <td data-label="Destekliyor mu?">Destekleniyor</td>
107.  </tr>
108.       <tr>
109. <td data-label="Tarayıcı">Android için Firefox</td>
110. <td data-label="Destekliyor mu?">Destekleniyor</td>
112.  </tr>
113.       <tr>
114. <td data-label="Tarayıcı">Android için Opera</td>
115. <td data-label="Destekliyor mu?">Destekleniyor</td>
117.  </tr>
118.       <tr>
119. <td data-label="Tarayıcı">IOS için Safari</td>
120. <td data-label="Destekliyor mu?">Destekleniyor</td>
122.  </tr>
123.       <tr>
124. <td data-label="Tarayıcı">Samsung Internet</td>
125. <td data-label="Destekliyor mu?">Destekleniyor</td>
127.  </tr>
128.      
129.       </tbody>
130.  </table>
131. <hr />
132. <h2 id="eo"><a> Etiketin Özellikleri</h2>
133. <p>Önemli ve gerçekten çok kullanılan özelliklerden bahsedeceğimi ve kullanılması önerilmeyen özellikleri göz ardı edeceğimi belirtmek isterim.</p>
134.  
135. <h3>Donwload Özelliği</h3>
136. <p>Tarayıcıya bir bağlantı tıklandığında bir dosyanın indirileceğini bildirmek için etikete eklenebilirler.
137. <br />
138.  Aşağıdaki tablo, hangi tarayıcıların bu özelliği desteklediğini göstermektedir.</p>
139. <table class="table">
140.     <thead>
141.     <tr>
142.     <th>Tarayıcı</th>
143.     <th>Destekliyor mu?</th>
144.        
145.     </tr>
146.     </thead>
147.     <tbody>
148. <tr>
149. <td data-label="Tarayıcı">Chrome</td>
150. <td data-label="Destekliyor mu?"><abbr title="65 sürümünden itibaren, indirme başka bir web sitesine yerleştirilirse artık çalışmaz!">14</abbr></td>
152.  </tr>
153.       <tr>
154.  
155. <td data-label="Tarayıcı">Edge</td>
156.  
157. <td data-label="Destekliyor mu?">18</td>
158.  
160.  
161.  </tr>
162.       <tr>
163. <td data-label="Tarayıcı">Firefox</td>
164. <td data-label="Destekliyor mu?">20</td>
166.  </tr>
167.       <tr>
168. <td data-label="Tarayıcı">Opera</td>
169. <td data-label="Destekliyor mu?">15</td>
171.  </tr>
172.       <tr>
173. <td data-label="Tarayıcı">Safari</td>
174. <td data-label="Destekliyor mu?">10.1</td>
176.  </tr>
177.       <tr>
178. <td data-label="Tarayıcı">Android Webview</td>
179. <td data-label="Destekliyor mu?"><abbr title="65 sürümünden itibaren, indirme başka bir web sitesine yerleştirilirse artık çalışmaz!">Destekleniyor</abbr></td>
181.  </tr>
182.       <tr>
183. <td data-label="Tarayıcı">Android için Chrome</td>
184. <td data-label="Destekliyor mu?">18</td>
186.  </tr>
187.       <tr>
188. <td data-label="Tarayıcı">Android için Firefox</td>
189. <td data-label="Destekliyor mu?">20</td>
191.  </tr>
192.       <tr>
193. <td data-label="Tarayıcı">Android için Opera</td>
194. <td data-label="Destekliyor mu?">73</td>
196.  </tr>
197.       <tr>
198. <td data-label="Tarayıcı">IOS için Safari</td>
199. <td data-label="Destekliyor mu?">Desteklenmiyor</td>
201.  </tr>
202.       <tr>
203. <td data-label="Tarayıcı">Samsung Internet</td>
204. <td data-label="Destekliyor mu?"><abbr title="9.0 sürümünden itibaren, indirme başka bir web sitesine yerleştirilirse artık çalışmaz!">1.0</abbr></td>
206.  </tr>
207.      
208.       </tbody>
209.  </table>
210. <br />
211. <br />
212. <h3>href Özelliği</h3>
213. <p>Kullanıcıların sayfadaki belirli bir bağlantıya tıkladıklarında yönlendirilmek istediğimiz hedef bağlantıyı <span><a></span> etiketine ekliyoruz. Genel olarak, tarayıcıların bu etiketleri bağlantı olarak tanıması ve diğer etiketlere eklenen özelliklerin çalışabilmesi için <span><a></span> etiketinde <span>href</span> özelliğin eklenmesi gerekmektedir.</p>
214. <p> Aşağıdaki tablo, hangi tarayıcıların bu özelliği desteklediğini göstermektedir.</p>
215. <table class="table">
216.     <thead>
217.     <tr>
218.     <th>Tarayıcı</th>
219.     <th>Destekliyor mu?</th>
220.        
221.     </tr>
222.     </thead>
223.     <tbody>
224. <tr>
225. <td data-label="Tarayıcı">Chrome</td>
226. <td data-label="Destekliyor mu?">Destekleniyor</td>
228.  </tr>
229.       <tr>
230.  
231. <td data-label="Tarayıcı">Edge</td>
232.  
233. <td data-label="Destekliyor mu?">12</td>
234.  
236.  
237.  </tr>
238.       <tr>
239. <td data-label="Tarayıcı">Firefox</td>
240. <td data-label="Destekliyor mu?">Destekleniyor</td>
242.  </tr>
243.       <tr>
244. <td data-label="Tarayıcı">Opera</td>
245. <td data-label="Destekliyor mu?">Destekleniyor</td>
247.  </tr>
248.       <tr>
249. <td data-label="Tarayıcı">Safari</td>
250. <td data-label="Destekliyor mu?">Destekleniyor</td>
252.  </tr>
253.       <tr>
254. <td data-label="Tarayıcı">Android Webview</td>
255. <td data-label="Destekliyor mu?">Destekleniyor</td>
257.  </tr>
258.       <tr>
259. <td data-label="Tarayıcı">Android için Chrome</td>
260. <td data-label="Destekliyor mu?">Destekleniyor</td>
262.  </tr>
263.       <tr>
264. <td data-label="Tarayıcı">Android için Firefox</td>
265. <td data-label="Destekliyor mu?">Destekleniyor</td>
267.  </tr>
268.       <tr>
269. <td data-label="Tarayıcı">Android için Opera</td>
270. <td data-label="Destekliyor mu?">Destekleniyor</td>
272.  </tr>
273.       <tr>
274. <td data-label="Tarayıcı">IOS için Safari</td>
275. <td data-label="Destekliyor mu?">Destekleniyor</td>
277.  </tr>
278.       <tr>
279. <td data-label="Tarayıcı">Samsung Internet</td>
280. <td data-label="Destekliyor mu?">Destekleniyor</td>
282.  </tr>
283.      
284.       </tbody>
285.  </table>
286. <br />
287. <br />
288. <h3>hreflang Özelliği</h3>
289. <p>Kullanıcının yönlendirileceği bağlantının dilini belirtmek için etikete eklenebilir.</p>
290. <p> Aşağıdaki tablo, hangi tarayıcıların bu özelliği desteklediğini göstermektedir.</p>
291. <table class="table">
292.     <thead>
293.     <tr>
294.     <th>Tarayıcı</th>
295.     <th>Destekliyor mu?</th>
296.        
297.     </tr>
298.     </thead>
299.     <tbody>
300. <tr>
301. <td data-label="Tarayıcı">Chrome</td>
302. <td data-label="Destekliyor mu?">Destekleniyor</td>
304.  </tr>
305.       <tr>
306.  
307. <td data-label="Tarayıcı">Edge</td>
308.  
309. <td data-label="Destekliyor mu?">12</td>
310.  
312.  
313.  </tr>
314.       <tr>
315. <td data-label="Tarayıcı">Firefox</td>
316. <td data-label="Destekliyor mu?">Destekleniyor</td>
318.  </tr>
319.       <tr>
320. <td data-label="Tarayıcı">Opera</td>
321. <td data-label="Destekliyor mu?">Destekleniyor</td>
323.  </tr>
324.       <tr>
325. <td data-label="Tarayıcı">Safari</td>
326. <td data-label="Destekliyor mu?">Destekleniyor</td>
328.  </tr>
329.       <tr>
330. <td data-label="Tarayıcı">Android Webview</td>
331. <td data-label="Destekliyor mu?">Destekleniyor</td>
333.  </tr>
334.       <tr>
335. <td data-label="Tarayıcı">Android için Chrome</td>
336. <td data-label="Destekliyor mu?">Destekleniyor</td>
338.  </tr>
339.       <tr>
340. <td data-label="Tarayıcı">Android için Firefox</td>
341. <td data-label="Destekliyor mu?">Destekleniyor</td>
343.  </tr>
344.       <tr>
345. <td data-label="Tarayıcı">Android için Opera</td>
346. <td data-label="Destekliyor mu?">Destekleniyor</td>
348.  </tr>
349.       <tr>
350. <td data-label="Tarayıcı">IOS için Safari</td>
351. <td data-label="Destekliyor mu?">Destekleniyor</td>
353.  </tr>
354.       <tr>
355. <td data-label="Tarayıcı">Samsung Internet</td>
356. <td data-label="Destekliyor mu?">Destekleniyor</td>
358.  </tr>
359.      
360.       </tbody>
361.  </table>
362. <br />
363. <br />
364. <h3>rel Özelliği</h3>
365. <p>Bu özelliği <span><a></span> etiketine ekleyerek, mevcut bağlantı ile kullanıcının yönlendirileceği hedef bağlantı arasındaki ilişkiyi belirlemeyi amaçlarız. Bu, arama motorları için son derece önemli bir faktördür.</p>
366. <p> Aşağıdaki tablo, hangi tarayıcıların bu özelliği desteklediğini göstermektedir.</p>
367. <table class="table">
368.     <thead>
369.     <tr>
370.     <th>Tarayıcı</th>
371.     <th>Destekliyor mu?</th>
372.        
373.     </tr>
374.     </thead>
375.     <tbody>
376. <tr>
377. <td data-label="Tarayıcı">Chrome</td>
378. <td data-label="Destekliyor mu?">Destekleniyor</td>
380.  </tr>
381.       <tr>
382.  
383. <td data-label="Tarayıcı">Edge</td>
384.  
385. <td data-label="Destekliyor mu?">12</td>
386.  
388.  
389.  </tr>
390.       <tr>
391. <td data-label="Tarayıcı">Firefox</td>
392. <td data-label="Destekliyor mu?">Destekleniyor</td>
394.  </tr>
395.       <tr>
396. <td data-label="Tarayıcı">Opera</td>
397. <td data-label="Destekliyor mu?">Destekleniyor</td>
399.  </tr>
400.       <tr>
401. <td data-label="Tarayıcı">Safari</td>
402. <td data-label="Destekliyor mu?">Destekleniyor</td>
404.  </tr>
405.       <tr>
406. <td data-label="Tarayıcı">Android Webview</td>
407. <td data-label="Destekliyor mu?">Destekleniyor</td>
409.  </tr>
410.       <tr>
411. <td data-label="Tarayıcı">Android için Chrome</td>
412. <td data-label="Destekliyor mu?">Destekleniyor</td>
414.  </tr>
415.       <tr>
416. <td data-label="Tarayıcı">Android için Firefox</td>
417. <td data-label="Destekliyor mu?">Destekleniyor</td>
419.  </tr>
420.       <tr>
421. <td data-label="Tarayıcı">Android için Opera</td>
422. <td data-label="Destekliyor mu?">Destekleniyor</td>
424.  </tr>
425.       <tr>
426. <td data-label="Tarayıcı">IOS için Safari</td>
427. <td data-label="Destekliyor mu?">Destekleniyor</td>
429.  </tr>
430.       <tr>
431. <td data-label="Tarayıcı">Samsung Internet</td>
432. <td data-label="Destekliyor mu?">Destekleniyor</td>
434.  </tr>
435.      
436.       </tbody>
437.  </table>
438. <p>Kullanıcının mevcut bağlantıdan yönlendirileceği hedef bağlantı arasındaki ilişkiyi belirlemek için, önceden tanımlanmış bir değeri <span>"rel"</span> özelliğine iletmek gerekmektedir. Bu özellik, bağlantılar arasındaki ilişkiyi tanımlamak için kullanılır ve arama motorları için önemlidir.</p>
439. <table class="table">
440.     <thead>
441.     <tr>
442.     <th>Özellik</th>
443.     <th>Anlamı</th>
444.        
445.     </tr>
446.     </thead>
447.     <tbody>
448. <tr>
449. <td data-label="Özellik">alternate</td>
450. <td data-label="Anlamı">Mevcut bağlantının alternatif bir bağlantı olduğunu ve bu alternatifin daha iyi ve diğer özelliklerle uyumlu olduğunu belirtmek için "rel" özelliğine "alternate" değeri verilir. Bu, mevcut bağlantının alternatif bir seçenek olduğunu ve arama motorlarının bu ilişkiyi anlamasını sağlar.</td>
452.  </tr>
453.       <tr>
454. <td data-label="Özellik">author</td>
455. <td data-label="Anlamı">"author" değeri, ilgili bağlantının içeriğin yazarını tanıttığı veya onunla iletişim kurma yöntemi sağladığı anlamına gelir. Bu değer, kullanıcılara içerik yazarı hakkında daha fazla bilgi edinme veya iletişim kurma imkanı sunar. Özellikle bloglar, makaleler veya haber sitelerinde yazarların profil sayfalarına veya iletişim bilgilerine yönlendiren bağlantılar için kullanılabilir.</td>
457.  </tr>
458.       <tr>
459. <td data-label="Özellik">bookmark</td>
460. <td data-label="Anlamı">"bookmark" değeri, ilgili bağlantının kalıcı olduğunu ve kullanıcının ileride tekrar erişmek veya yer imi olarak kaydetmek isteyebileceği bir bağlantı olduğunu belirtmek için kullanılır. Bu değer, kullanıcılara önemli sayfaları veya içerikleri işaretlemelerine ve kolayca erişmelerine olanak sağlar.</td>
462.  </tr>
463.       <tr>
464. <td data-label="Özellik">external</td>
465. <td data-label="Anlamı">Yerleştirilen bağlantının, sayfanın bulunduğu site ile bağlantısı olmadığını belirtmek için.</td>
467.  </tr>
468.       <tr>
469. <td data-label="Özellik">help</td>
470. <td data-label="Anlamı">Yerleştirilen bağlantının yardım sunduğunu belirtmek için.</td>
472.  </tr>
473.       <tr>
474. <td data-label="Özellik">license</td>
475. <td data-label="Anlamı">Yerleştirilen bağlantının, sayfada görüntülenen içeriğin lisansını belirttiğini belirtir.</td>
477.  </tr>
478.       <tr>
479. <td data-label="Özellik">next</td>
480. <td data-label="Anlamı">Konu bağlantısının, bir şeyi takip etmek için gidilecek bir sonraki bağlantı olduğunu gösterir.</td>
482.  </tr>
483.       <tr>
484. <td data-label="Özellik">nofollow</td>
485. <td data-label="Anlamı">"nofollow" değeri, ilgili bağlantının web sitesinin tamamlayıcısı olmadığını ve dolayısıyla onun bir parçası olarak kabul edilmediğini belirtmek için kullanılır. Özellikle Google AdSense gibi reklam hizmetlerini kullananlar için, Google şirketi bu değerin her reklam bağlantısı için eklenmesini zorunlu kılar. Bu şekilde, AdSense'in belirlediği reklam politikalarıyla çakışmayacak şekilde, web sitesinde yer alan reklam bağlantılarının işaretlenmesi sağlanır.</td>
487.  </tr>
488.       <tr>
489. <td data-label="Özellik">noreferrer</td>
490. <td data-label="Anlamı">Tarayıcının kullanıcının isteği ile herhangi bir bilgi göndermesini engellemek, bu da kullanıcının bağlantıya tıkladığında yönlendirildiği siteye anonim olarak gireceği anlamına gelir.</td>
492.  </tr>
493.       <tr>
494. <td data-label="Özellik">noopener</td>
495.         <td data-label="Anlamı"><span>window.open()</span> koduyla tarayıcıda açılan pencerenin, kullanıcının önceki sayfada girdiği hassas bilgilere erişebilecek potansiyel zararlı JavaScript kodlarının yürütülmesini engellemek için, bir bağlantıya tıklanıldığında kullanılan önlem olarak kullanılabilir.</td>
497.  </tr>
498.       <tr>
499. <td data-label="Özellik">prev</td>
500. <td data-label="Anlamı">"prev" değeri, bir sonraki adıma geçmek için geçilmesi gereken bağlantının, mevcut bağlantıdan önceki bağlantı olduğunu belirtmek için kullanılır. Bu, bir işlemi veya eylemi sürdürmek için takip edilmesi gereken sonraki bağlantıyı ifade eder.</td>
502.  </tr>
503.       <tr>
504. <td data-label="Özellik">search</td>
505. <td data-label="Anlamı">Önceki arama sonuçlarına dayalı bir arama düğmesi göstermek için, her sayfa oluşturulduğunda aramada yardımcı olacak özel bilgilerin belirtilmesi gerektiğinden ve genellikle kullanıcıların site içinde mevcut olan bir arama kutusunu veya Google aramasını tercih ettiğinden dolayı bunu önermiyoruz.</td>
507.  </tr>
508.       <tr>
509. <td data-label="Özellik">tag</td>
510. <td data-label="Anlamı">Bağlantının içeriğinin, mevcut sayfadaki içeriğin aynı türüne ait olduğunu belirtmek için "tag" özelliği kullanılır. Bu özellik, arama motorlarına, bağlantının mevcut sayfadaki içeriğe uyumlu olduğunu anlamalarına yardımcı olur.</td>
512.  </tr>
513.  
514.      
515.       </tbody>
516.  </table>
517.  
518.  
519.  
520.  
521.  
522.  
523.  
524.  
525.  
526.  
527.  
528. <hr />
529. <h2 id="eko"><a>
530.  Etiketin Kullanma Örnekleri</h2>
531. <p>Aşağıdaki örnekte, tek satırlık bir yorum ekledim.</p>
532. <pre class="code"><ul class="ucode"><li><span style="color: orange;"><!--<span style="color: orange;"></span> Yorum olarak yerleştirilen yorum kullanıcılara görüntülenmez. <span style="color: orange;">--></span></span></li><li><span style="color: blue;"><p</span><span style="color: blue;">></span>HTML çok kolay, kullanışlı ve eğlenceli bir dildir.<span style="color: blue;"></p</span><span style="color: blue;">></span></li></ul></pre>
533. <a class="elifnur" href="https://code.k-html.com/kodlar/yorumetiketi1.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
534. <br />
535. <br />
536. <p>Aşağıdaki örnekte birkaç satırdan oluşan bir yorum ekledim.</p>
537. <pre class="code"><ul class="ucode"><li><span style="color: orange"><!--</span></li><li><span style="color: orange">   Bu üç</span></li><li><span style="color: orange">   satıra</span></li><li><span style="color: orange">   yazılan bir yorum</span></li><li><span style="color: orange">--></span></li><li><span style="color: blue"><p</span><span style="color: blue">></span>HTML İnternet üzerinde web sitesi oluşturmak için kullanılan bir betik dildir.<span style="color: blue"></p</span><span style="color: blue">></span></li></ul></pre>
538. <a class="elifnur" href="https://code.k-html.com/kodlar/yorumetiketi2.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
539. <hr />
540. <h2 id="vt">Varsayılan Tasarımı</h2>
541. <p>Temelde kullanıcının önünde gösterilmeyen bir şey olduğu için varsayılan bir tasarımı yoktur.</p>
542. <hr />
543. <h2 id="ivn">İpuç Ve Notlar</h2>
544. <P>Eklenen yorumlar kullanıcının önünde görünmez, çünkü sayfa tasarımcısı bunları kullanıcının okuması için değil, esas olarak kendisi için yerleştirir, ancak bu, kullanıcının isterse bunları göremeyeceği anlamına gelmez. Bu nedenle, yorumlara asla hassas bilgiler yazma çünkü kullanıcı sayfa koduna göz atarsa kolayca görebilir.</P>
545. <p>Herhangi bir açık sayfanın kodu bilgisayarda <span style="color: orange;">Ctrl + U</span> tuşlarına basılarak veya linkin başına <span>view-source:</span> kelimesi eklenerek aşağıdaki gibi kolayca görülebilir:</p>
546. <blockquote>
547.  view-source:https://www.k-html.com/2023/05/html-etiketi.html
548. </blockquote>
549.  
550.  
551.  
552.  
553.  
554.  
555.  
556.  
557.  
558.  
559.  
560.  
561.  
562.  
563.  
564.  
565.  
566.  
567. <div class="parent-links">
568.  <a class="btn btn-primary" href="https://www.k-html.com/2023/03/html-dilin-tum-etiketleri-ve-ozellikleri.html">
569. <svg class="bi bi-chevron-double-left" fill="currentColor" height="18" viewbox="0 0 18 18" width="18">   <path d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" fill-rule="evenodd">   <path d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" fill-rule="evenodd"> </path></path></svg>
570.    Derse dön
571.  </a>
572.  <a class="btn btn-primary" href="https://www.k-html.com/2023/03/html-dilin-tum-etiketleri-ve-ozellikleri.html">
573.    Derse dön
574. <svg class="bi bi-chevron-double-right" fill="currentColor" height="18" viewbox="0 0 18 18" width="18">
575.  <path d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z" fill-rule="evenodd">
576.  <path d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z" fill-rule="evenodd">
577. </path></path></svg>
578.  </a>
579. </div>
580. </content><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/5888691169046906594'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/5888691169046906594'/><link rel='alternate' type='text/html' href='https://www.k-html.com/2023/05/html-etiketi_28.html' title='HTML &amp;lt;a&amp;gt; Etiketi'/><author><name>HTML öğren</name><uri>http://www.blogger.com/profile/05938401370972816509</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB9hVaVznt_p0FHumsq5E1ns0HFhwUsz5N8PDjeIc1oE4O70yakyUZqpJJiZyKolfcNdZlaOrykdeVaT9wGLi4Gp6Ko2vw9JCv-r2AQBF1JjXNu_09kuRKvXx-7fys1Hw/s113/html.jpg'/></author></entry><entry><id>tag:blogger.com,1999:blog-624213398567285603.post-6558383152790272542</id><published>2023-05-07T07:11:00.008+03:00</published><updated>2023-05-28T03:46:28.092+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="&lt;!DOCTYPE&gt;"/><category scheme="http://www.blogger.com/atom/ns#" term="html"/><category scheme="http://www.blogger.com/atom/ns#" term="html etiketleri"/><title type='text'>HTML &amp;lt;!DOCTYPE&amp;gt; Etiketi</title><content type='html'>&lt;div class=&quot;parent-links&quot;&gt;
581.  <a class="btn btn-primary" href="https://www.k-html.com/2023/03/html-dilin-tum-etiketleri-ve-ozellikleri.html">
582.    <svg class="bi bi-chevron-double-left" fill="currentColor" height="18" viewbox="0 0 18 18" width="18">   <path d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" fill-rule="evenodd">   <path d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" fill-rule="evenodd"> </path></path></svg>
583.    Derse dön
584.  </a>
585.  <a class="btn btn-primary" href="https://www.k-html.com/2023/03/html-dilin-tum-etiketleri-ve-ozellikleri.html">
586.    Derse dön
587. <svg class="bi bi-chevron-double-right" fill="currentColor" height="18" viewbox="0 0 18 18" width="18">
588.  <path d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z" fill-rule="evenodd">
589.  <path d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z" fill-rule="evenodd">
590. </path></path></svg>
591.  </a>
592. </div>
593.  
594.  
595.  
596.  
597. <details open="">
598.  <summary style="text-align: left;">Sayfa içeriği</summary>
599.  <ul class="postcontent">
600.    <li>
601.      <b>›</b> <a href="https://www.k-html.com/2023/05/html-etiketi.html#et"><strong><!DOCTYPE> Etiketinin Tanımı</strong></a>
602.    </li>
603.    <li>
604.      <b>›</b> <a href="https://www.k-html.com/2023/05/html-etiketi.html#tdk"><strong>Tarayıcı desteğin konsepti</strong></a>
605.    </li>
606.    <li>
607.      <b>›</b> <a href="https://www.k-html.com/2023/05/html-etiketi.html#eo"><strong><!DOCTYPE> Etiketin özellikleri</strong></a>
608.    </li>
609.    <li>
610.      <b>›</b> <a href="https://www.k-html.com/2023/05/html-etiketi.html#eko"><strong><!DOCTYPE> Etiketin kullanma örnekleri</strong></a>
611.    </li>
612.    <li>
613.      <b>›</b> <a href="https://www.k-html.com/2023/05/html-etiketi.html#vt"><strong>Varsayılan tasarımı</strong></a>
614.    </li>
615.    <li>
616.      <b>›</b> <a href="https://www.k-html.com/2023/05/html-etiketi.html#ivn"><strong>İpuç ve notlar</strong></a>
617.    </li>
618.  </ul>
619. </details>
620. <hr class="hrkk" />
621. <h2 id="et"><!DOCTYPE> Etiketinin Tanımı</h2>
622. <p><span><!DOCTYPE></span> etiketini, sayfayı oluşturmak için hangi <span>HTML</span> sürümünü benimsediğimizi tarayıcıya söylemek için sayfada ilk etiket olarak kullanıyoruz.</p>
623. <p>Daha kesin olmak gerekirse, <span><!DOCTYPE></span> aslında <span>HTML</span> dilinin kendisinin bir etiketi değildir, yalnızca tarayıcının kullanılan dilin sürümünü bilmek için herhangi bir <span>.html</span> dosyasının başında okumayı beklediği bilmeni istiyorum.</p>
624. <p>Tarayıcıya <span>HTML 5</span> kullandığımızı söylemek için, dosyadaki ilk bilgi parçası olarak aşağıdaki bilgiyi eklenmesi gerekiyor.</p>
625. <blockquote><!DOCTYPE html></blockquote>
626.  
627. <h3>Bilgi</h3>
628.  <p>Beşinci sürümde gerekli olana kıyasla çok fazla bilgi yazmayı gerektirdiğinden, <span>HTML</span>'nin önceki sürümlerinin tarayıcıya bildirilmesi can sıkıcıydı.</p>
629. <p>HTML 4.01 aşağıdaki gibi tanımlanır.</p>
630. <blockquote><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"<br/>
631.  "http://www.w3.org/TR/html4/loose.dtd"></blockquote>
632.  
633. <p>XHTML 1.1 aşağıdaki gibi tanımlanır.</p>
634. <blockquote><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" <br />
635. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></blockquote>
636. <hr />
637. <h2 id="tdk">Tarayıcı Desteğin Konsepti</h2>
638. <p>Bazı tarayıcı tarafından desteklenmeyen farklı etiketler vardır.<br />
639.  
640. Aşağıdaki tabloda <!DOCTYPE> etiketini destekleyen ve desteklemeyen tarayıcıların listesi ekledim.</p>
641. <table class="table">
642.     <thead>
643.     <tr>
644.     <th>Tarayıcı</th>
645.     <th>Destekliyor mu?</th>
646.        
647.     </tr>
648.     </thead>
649.     <tbody>
650. <tr>
651. <td data-label="Tarayıcı">Chrome</td>
652. <td data-label="Destekliyor mu?">Destekleniyor</td>
654.  </tr>
655.       <tr>
656.  
657. <td data-label="Tarayıcı">Edge</td>
658.  
659. <td data-label="Destekliyor mu?">Destekleniyor</td>
660.  
662.  
663.  </tr>
664.       <tr>
665. <td data-label="Tarayıcı">Firefox</td>
666. <td data-label="Destekliyor mu?">Destekleniyor</td>
668.  </tr>
669.       <tr>
670. <td data-label="Tarayıcı">Opera</td>
671. <td data-label="Destekliyor mu?">Destekleniyor</td>
673.  </tr>
674.       <tr>
675. <td data-label="Tarayıcı">Safari</td>
676. <td data-label="Destekliyor mu?">Destekleniyor</td>
678.  </tr>
679.       <tr>
680. <td data-label="Tarayıcı">Android Webview</td>
681. <td data-label="Destekliyor mu?">Destekleniyor</td>
683.  </tr>
684.       <tr>
685. <td data-label="Tarayıcı">Android için Chrome</td>
686. <td data-label="Destekliyor mu?">Destekleniyor</td>
688.  </tr>
689.       <tr>
690. <td data-label="Tarayıcı">Android için Firefox</td>
691. <td data-label="Destekliyor mu?">Destekleniyor</td>
693.  </tr>
694.       <tr>
695. <td data-label="Tarayıcı">Android için Opera</td>
696. <td data-label="Destekliyor mu?">Destekleniyor</td>
698.  </tr>
699.       <tr>
700. <td data-label="Tarayıcı">IOS için Safari</td>
701. <td data-label="Destekliyor mu?">Destekleniyor</td>
703.  </tr>
704.       <tr>
705. <td data-label="Tarayıcı">Samsung Internet</td>
706. <td data-label="Destekliyor mu?">Destekleniyor</td>
708.  </tr>
709.      
710.       </tbody>
711.  </table>
712. <hr />
713. <h2 id="eo"><!DOCTYPE> Etiketin Özellikleri</h2>
714. <p><!DOCTYPE> etiketi, onun için özel olarak yapılmış herhangi bir özelliğe sahip değildir.</p>
715.  
716.  
717. <hr />
718.  
719.  
720. <h2 id="eko"><!DOCTYPE> Etiketin Kullanma Örnekleri</h2>
721. <p>Aşağıdaki örnekte, tarayıcıya <span>HTML5</span> kullandığımızı bildiren ilk kod parçası olarak <span><!DOCTYPE html></span> etiketini ekledim.</p>
722. <pre class="code"><ul class="ucode"><li><span style="color: grey"><!DOCTYPE html></span></li><li><span style="color: blue"><html</span><span style="color: blue">></span></li><li>    <span style="color: blue"><body</span><span style="color: blue">></span></li><li>        <span style="color: blue"><p</span><span style="color: blue">></span>HTML öğren, HTML 5'i adım adım açıklamaktadır.<span style="color: blue"></p</span><span style="color: blue">></span></li><li>    <span style="color: blue"></body</span><span style="color: blue">></span></li><li><span style="color: blue"></html</span><span style="color: blue">></span></li></ul></pre>
723. <a class="elifnur" href="https://code.k-html.com/kodlar/doctype.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
724. <br />
725. <br />
726. <hr />
727. <h2 id="vt">Varsayılan Tasarımı</h2>
728. <p>Temelde kullanıcının önünde gösterilmeyen bir şey olduğu için varsayılan bir tasarımı yoktur.</p>
729. <hr />
730. <h2 id="ivn">İpuç Ve Notlar</h2>
731. <P><span><!DOCTYPE></span> sözcüğü büyük veya küçük harflerle yazılabilir, ancak standart format olduğundan büyük harfle yazmanı öneririm.</P>
732.  
733. <blockquote>
734.  <!DOCTYPE html>
735. </blockquote>
736.  
737. <blockquote>
738. <!doctype html>
739. </blockquote>
740.  
741. <blockquote>
742.  <!DocType html>
743. </blockquote>
744.  
745. <blockquote>
746.  <!Doctype html>
747. </blockquote>
748.  
749.  
750.  
751.  
752.  
753.  
754.  
755.  
756.  
757.  
758.  
759.  
760.  
761.  
762.  
763.  
764.  
765.  
766. <div class="parent-links">
767.  <a class="btn btn-primary" href="https://www.k-html.com/2023/03/html-dilin-tum-etiketleri-ve-ozellikleri.html">
768. <svg class="bi bi-chevron-double-left" fill="currentColor" height="18" viewbox="0 0 18 18" width="18">   <path d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" fill-rule="evenodd">   <path d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" fill-rule="evenodd"> </path></path></svg>
769.    Derse dön
770.  </a>
771.  <a class="btn btn-primary" href="https://www.k-html.com/2023/03/html-dilin-tum-etiketleri-ve-ozellikleri.html">
772.    Derse dön
773. <svg class="bi bi-chevron-double-right" fill="currentColor" height="18" viewbox="0 0 18 18" width="18">
774.  <path d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z" fill-rule="evenodd">
775.  <path d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z" fill-rule="evenodd">
776. </path></path></svg>
777.  </a>
778. </div>
779. </content><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/6558383152790272542'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/6558383152790272542'/><link rel='alternate' type='text/html' href='https://www.k-html.com/2023/05/html-etiketi_7.html' title='HTML &amp;lt;!DOCTYPE&amp;gt; Etiketi'/><author><name>HTML öğren</name><uri>http://www.blogger.com/profile/05938401370972816509</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB9hVaVznt_p0FHumsq5E1ns0HFhwUsz5N8PDjeIc1oE4O70yakyUZqpJJiZyKolfcNdZlaOrykdeVaT9wGLi4Gp6Ko2vw9JCv-r2AQBF1JjXNu_09kuRKvXx-7fys1Hw/s113/html.jpg'/></author></entry><entry><id>tag:blogger.com,1999:blog-624213398567285603.post-2615704051612650237</id><published>2023-05-07T06:12:00.020+03:00</published><updated>2023-05-28T03:46:18.618+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="&lt;!-- --&gt;"/><category scheme="http://www.blogger.com/atom/ns#" term="html"/><category scheme="http://www.blogger.com/atom/ns#" term="html etiketleri"/><title type='text'>HTML &amp;lt;!-- --&amp;gt; Etiketi</title><content type='html'>&lt;div class=&quot;parent-links&quot;&gt;
780.  <a class="btn btn-primary" href="https://www.k-html.com/2023/03/html-dilin-tum-etiketleri-ve-ozellikleri.html">
781.    <svg class="bi bi-chevron-double-left" fill="currentColor" height="18" viewbox="0 0 18 18" width="18">   <path d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" fill-rule="evenodd">   <path d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" fill-rule="evenodd"> </path></path></svg>
782.    Derse dön
783.  </a>
784.  <a class="btn btn-primary" href="https://www.k-html.com/2023/03/html-dilin-tum-etiketleri-ve-ozellikleri.html">
785.    Derse dön
786. <svg class="bi bi-chevron-double-right" fill="currentColor" height="18" viewbox="0 0 18 18" width="18">
787.  <path d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z" fill-rule="evenodd">
788.  <path d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z" fill-rule="evenodd">
789. </path></path></svg>
790.  </a>
791. </div>
792. <details open="">
793.  <summary style="text-align: left;">Sayfa içeriği</summary>
794.  <ul class="postcontent">
795.    <li>
796.      <b>›</b> <a href="https://www.k-html.com/2023/05/html-etiketi.html#et"><strong><!-- --> Etiketinin Tanımı</strong></a>
797.    </li>
798.    <li>
799.      <b>›</b> <a href="https://www.k-html.com/2023/05/html-etiketi.html#tdk"><strong>Tarayıcı desteğin konsepti</strong></a>
800.    </li>
801.    <li>
802.      <b>›</b> <a href="https://www.k-html.com/2023/05/html-etiketi.html#eo"><strong><!-- --> etiketin özellikleri</strong></a>
803.    </li>
804.    <li>
805.      <b>›</b> <a href="https://www.k-html.com/2023/05/html-etiketi.html#eko"><strong><!-- --> etiketin kullanma örnekleri</strong></a>
806.    </li>
807.    <li>
808.      <b>›</b> <a href="https://www.k-html.com/2023/05/html-etiketi.html#vt"><strong>Varsayılan tasarımı</strong></a>
809.    </li>
810.    <li>
811.      <b>›</b> <a href="https://www.k-html.com/2023/05/html-etiketi.html#ivn"><strong>İpuç ve notlar</strong></a>
812.    </li>
813.  </ul>
814. </details>
815. <hr class="hrkk" />
816. <h2 id="et"><!-- --> Etiketinin Tanımı</h2>
817. <p>Sayfanın koduna bir <span>not</span> veya <span>yorum</span> eklemek için <span><!-- --></span> etiketini kullanıyoruz çünkü bu, sayfanın kodunu gelecekte daha hızlı incelemeni ve kodun nasıl çalıştığını bilmeni yardımcı olur.</p>
818. <hr />
819. <h2 id="tdk">Tarayıcı Desteğin Konsepti</h2>
820. <p>Bazı tarayıcı tarafından desteklenmeyen farklı etiketler vardır.<br />
821.  
822. Aşağıdaki tabloda <!-- --> etiketini destekleyen ve desteklemeyen tarayıcıların listesi ekledim.</p>
823. <table class="table">
824.     <thead>
825.     <tr>
826.     <th>Tarayıcı</th>
827.     <th>Destekliyor mu?</th>
828.        
829.     </tr>
830.     </thead>
831.     <tbody>
832. <tr>
833. <td data-label="Tarayıcı">Chrome</td>
834. <td data-label="Destekliyor mu?">Destekleniyor</td>
836.  </tr>
837.       <tr>
838.  
839. <td data-label="Tarayıcı">Edge</td>
840.  
841. <td data-label="Destekliyor mu?">Destekleniyor</td>
842.  
844.  
845.  </tr>
846.       <tr>
847. <td data-label="Tarayıcı">Firefox</td>
848. <td data-label="Destekliyor mu?">Destekleniyor</td>
850.  </tr>
851.       <tr>
852. <td data-label="Tarayıcı">Opera</td>
853. <td data-label="Destekliyor mu?">Destekleniyor</td>
855.  </tr>
856.       <tr>
857. <td data-label="Tarayıcı">Safari</td>
858. <td data-label="Destekliyor mu?">Destekleniyor</td>
860.  </tr>
861.       <tr>
862. <td data-label="Tarayıcı">Android Webview</td>
863. <td data-label="Destekliyor mu?">Destekleniyor</td>
865.  </tr>
866.       <tr>
867. <td data-label="Tarayıcı">Android için Chrome</td>
868. <td data-label="Destekliyor mu?">Destekleniyor</td>
870.  </tr>
871.       <tr>
872. <td data-label="Tarayıcı">Android için Firefox</td>
873. <td data-label="Destekliyor mu?">Destekleniyor</td>
875.  </tr>
876.       <tr>
877. <td data-label="Tarayıcı">Android için Opera</td>
878. <td data-label="Destekliyor mu?">Destekleniyor</td>
880.  </tr>
881.       <tr>
882. <td data-label="Tarayıcı">IOS için Safari</td>
883. <td data-label="Destekliyor mu?">Destekleniyor</td>
885.  </tr>
886.       <tr>
887. <td data-label="Tarayıcı">Samsung Internet</td>
888. <td data-label="Destekliyor mu?">Destekleniyor</td>
890.  </tr>
891.      
892.       </tbody>
893.  </table>
894. <hr />
895. <h2 id="eo"><!-- --> Etiketin Özellikleri</h2>
896. <p><!-- --> etiketi, onun için özel olarak yapılmış herhangi bir özelliğe sahip değildir.</p>
897. <hr />
898. <h2 id="eko"><!-- --> Etiketin Kullanma Örnekleri</h2>
899. <p>Aşağıdaki örnekte, tek satırlık bir yorum ekledim.</p>
900. <pre class="code"><ul class="ucode"><li><span style="color: orange;"><!--<span style="color: orange;"></span> Yorum olarak yerleştirilen yorum kullanıcılara görüntülenmez. <span style="color: orange;">--></span></span></li><li><span style="color: blue;"><p</span><span style="color: blue;">></span>HTML çok kolay, kullanışlı ve eğlenceli bir dildir.<span style="color: blue;"></p</span><span style="color: blue;">></span></li></ul></pre>
901. <a class="elifnur" href="https://code.k-html.com/kodlar/yorumetiketi1.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
902. <br />
903. <br />
904. <p>Aşağıdaki örnekte birkaç satırdan oluşan bir yorum ekledim.</p>
905. <pre class="code"><ul class="ucode"><li><span style="color: orange"><!--</span></li><li><span style="color: orange">   Bu üç</span></li><li><span style="color: orange">   satıra</span></li><li><span style="color: orange">   yazılan bir yorum</span></li><li><span style="color: orange">--></span></li><li><span style="color: blue"><p</span><span style="color: blue">></span>HTML İnternet üzerinde web sitesi oluşturmak için kullanılan bir betik dildir.<span style="color: blue"></p</span><span style="color: blue">></span></li></ul></pre>
906. <a class="elifnur" href="https://code.k-html.com/kodlar/yorumetiketi2.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
907. <hr />
908. <h2 id="vt">Varsayılan Tasarımı</h2>
909. <p>Temelde kullanıcının önünde gösterilmeyen bir şey olduğu için varsayılan bir tasarımı yoktur.</p>
910. <hr />
911. <h2 id="ivn">İpuç Ve Notlar</h2>
912. <P>Eklenen yorumlar kullanıcının önünde görünmez, çünkü sayfa tasarımcısı bunları kullanıcının okuması için değil, esas olarak kendisi için yerleştirir, ancak bu, kullanıcının isterse bunları göremeyeceği anlamına gelmez. Bu nedenle, yorumlara asla hassas bilgiler yazma çünkü kullanıcı sayfa koduna göz atarsa kolayca görebilir.</P>
913. <p>Herhangi bir açık sayfanın kodu bilgisayarda <span style="color: orange;">Ctrl + U</span> tuşlarına basılarak veya linkin başına <span>view-source:</span> kelimesi eklenerek aşağıdaki gibi kolayca görülebilir:</p>
914. <blockquote>
915.  view-source:https://www.k-html.com/2023/05/html-etiketi.html
916. </blockquote>
917.  
918.  
919.  
920.  
921.  
922.  
923.  
924.  
925.  
926.  
927.  
928.  
929.  
930.  
931.  
932.  
933.  
934.  
935. <div class="parent-links">
936.  <a class="btn btn-primary" href="https://www.k-html.com/2023/03/html-dilin-tum-etiketleri-ve-ozellikleri.html">
937. <svg class="bi bi-chevron-double-left" fill="currentColor" height="18" viewbox="0 0 18 18" width="18">   <path d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" fill-rule="evenodd">   <path d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" fill-rule="evenodd"> </path></path></svg>
938.    Derse dön
939.  </a>
940.  <a class="btn btn-primary" href="https://www.k-html.com/2023/03/html-dilin-tum-etiketleri-ve-ozellikleri.html">
941.    Derse dön
942. <svg class="bi bi-chevron-double-right" fill="currentColor" height="18" viewbox="0 0 18 18" width="18">
943.  <path d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z" fill-rule="evenodd">
944.  <path d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z" fill-rule="evenodd">
945. </path></path></svg>
946.  </a>
947. </div>
948. </content><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/2615704051612650237'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/2615704051612650237'/><link rel='alternate' type='text/html' href='https://www.k-html.com/2023/05/html-etiketi.html' title='HTML &amp;lt;!-- --&amp;gt; Etiketi'/><author><name>HTML öğren</name><uri>http://www.blogger.com/profile/05938401370972816509</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB9hVaVznt_p0FHumsq5E1ns0HFhwUsz5N8PDjeIc1oE4O70yakyUZqpJJiZyKolfcNdZlaOrykdeVaT9wGLi4Gp6Ko2vw9JCv-r2AQBF1JjXNu_09kuRKvXx-7fys1Hw/s113/html.jpg'/></author></entry><entry><id>tag:blogger.com,1999:blog-624213398567285603.post-4959673284034026398</id><published>2023-03-12T16:33:00.128+03:00</published><updated>2023-06-14T09:54:15.946+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="&lt;fieldset&gt;"/><category scheme="http://www.blogger.com/atom/ns#" term="&lt;form&gt;"/><category scheme="http://www.blogger.com/atom/ns#" term="&lt;input&gt;"/><category scheme="http://www.blogger.com/atom/ns#" term="&lt;label&gt;"/><category scheme="http://www.blogger.com/atom/ns#" term="&lt;legend&gt;"/><category scheme="http://www.blogger.com/atom/ns#" term="&lt;option&gt;"/><category scheme="http://www.blogger.com/atom/ns#" term="&lt;select&gt;"/><category scheme="http://www.blogger.com/atom/ns#" term="Dil Kodları"/><category scheme="http://www.blogger.com/atom/ns#" term="etiketler"/><category scheme="http://www.blogger.com/atom/ns#" term="html"/><category scheme="http://www.blogger.com/atom/ns#" term="html5"/><title type='text'>HTML Dilin Tüm Etiketleri Ve Özellikleri</title><content type='html'>
949.    <script>
950.        window.onload = function() {
951.            alert("Ders henüz hazır değil. Yakında bitecek ve hazır olacak.. Anlayışınız için teşekkür ederim.");
952.        };
953.    </script>
954.  
955.  
956.  
957.  
958.  
959. <style type="text/css">
960.  .kullanimi { display: none;}
961.  
962.  /* Smartphone Portrait and Landscape */
963.  @media only screen
964.    and (min-device-width : 320px)
965.    and (max-device-width : 680px){
966.      .kullanimi {display: inline;}
967.  }
968. </style>
969.  
970. <style>
971.  
972.  .tablebeta{
973. width: 100%;
974. border-collapse: collapse;
975. box-sizing: border-box;
976. }
977.  
978. .tablebeta td,.tablebeta th{
979.  padding:12px 15px;
980.  border:1px solid #ddd;
981.  text-align: center;
982.  font-size:16px;
983. }
984.  
985. .tablebeta th{
986. background-color: #3B8FEB;
987. color:#ffffff;
988.  
989. }
990.  
991. .tablebeta tbody tr:nth-child(even){
992. background-color: #f5f5f5;
993. }
994.  
995. @media(max-width: 500px){
996. .tablebeta thead{
997. display: none;
998. }
999.  
1000. .tablebeta, .tablebeta tbody, .tablebeta tr, .tablebeta td{
1001. display: block;
1002. width: 100%;
1003. }
1004. .tablebeta tr{
1005. margin-bottom:15px;
1006. }
1007. .tablebeta td{
1008. text-align: center;
1009. padding-left: 50%;
1010. text-align: center;
1011. position: relative; }
1012. .tablebeta td::before{
1013. content: attr(data-label);
1014. position: absolute;
1015. left:0;
1016. width: 50%;
1017. padding-left:15px;
1018.      padding-left:15px;
1019. font-size:15px;
1020. font-weight: bold;
1021. text-align: left;
1022. }
1023. }
1024.  
1025.  
1026. a.elifnurbeta {
1027.      align-items: center;
1028.      appearance: none;
1029.      background-color: #3EB2FD;
1030.      background-image: linear-gradient(1deg, #4F58FD, #149BF3 99%);
1031.      background-size: calc(100% + 20px) calc(100% + 20px);
1032.      border-radius: 70px;
1033.      border-width: 0;
1034.      box-shadow: none;
1035.      box-sizing: border-box;
1036.      color: #ffffff !important;
1037.      cursor: pointer;
1038.   margin-left:16px ;
1039.      display: inline-flex;
1040.      font-family: CircularStd,sans-serif;
1041.      font-size: 1rem;
1042.      height: auto;
1043.      justify-content: center;
1044.      line-height: 1;
1045.      padding: 4px 20px;
1046.      position: relative;
1047.      text-align: center;
1048.      text-decoration: none;
1049.      transition: background-color .2s,background-position .2s;
1050.      user-select: none;
1051.      -webkit-user-select: none;
1052.      touch-action: manipulation;
1053.      vertical-align: top;
1054.      white-space: nowrap;
1055.    }
1056.    a.elifnurbeta:active,
1057.    a.elifnurbeta:focus {
1058.      outline: none;
1059.    }
1060.    a.elifnurbeta:hover {
1061.      background-position: -20px -20px;
1062.    }
1063.    a.elifnurbeta:focus:not(:active) {
1064.      box-shadow: rgba(40, 170, 255, 0.25) 0 0 0 .125em;
1065.    font-weight:1px;
1066.    }
1067. </style>
1068.  
1069. <div class="parent-links">  
1070.    <a class="btn btn-primary" href="https://www.k-html.com/2022/10/html-farkl-dillerde-sayfalar.html">
1071.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
1072.      önceki ders
1073.    </a>
1074.  
1075.    <a class="btn btn-primary" href="#">
1076.      sonraki ders
1077.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
1078.    </a>
1079.  </div>
1080. <details open="">
1081.  <summary style="text-align: left;">Sayfa içeriği</summary>
1082.  <ul class="postcontent">
1083.  <li>
1084.  <b>›</b> <a href="https://www.k-html.com/2023/03/html-dilin-tum-etiketleri-ve-ozellikleri.html#tdk"><strong>Tarayıcı desteğin konsepti</strong></a></li>
1085.    <li>
1086.  <b>›</b> <a href="https://www.k-html.com/2023/03/html-dilin-tum-etiketleri-ve-ozellikleri.html#the"><strong>Tüm HTML etiketleri</strong></a>
1087.      </li>
1088.     </ul>
1089.  </details>
1090.  
1091. <hr class="hrkk" />
1092.    <h2 id="tdk">Tarayıcı desteğin konsepti</h2>
1093.    <p><a href="https://chrome.com" rel="nofollow" target="_blank"><span style="color: #2b00fe;">C</span><span style="color: red;">h</span><span style="color: #ffa400;">r</span><span style="color: #2b00fe;">o</span><span style="color: #6aa84f;">m</span><span style="color: red;">e</span></a>, <a href="https://microsoftedgewelcome.microsoft.com/" rel="nofollow" target="_blank"><span style="color: #6aa84f;">E</span><span style="color: #a2c4c9;">d</span><span style="color: #9fc5e8;">g</span><span style="color: #2b00fe;">e</span></a>, <a href="https://firefox.com" rel="nofollow" target="_blank"><span style="color: red;">Fi</span><span style="color: #ffa400;">re</span><span style="color: #2b00fe;">fox</span></a>, <a href="https://www.apple.com/safari/" rel="nofollow" target="_blank"><span style="color: #2b00fe;">Sa</span><span style="color: #cccccc;">fa</span><span style="color: red;">ri</span></a>, <a href="https://www.opera.com/" rel="nofollow" target="_blank"><span style="color: red;">Op</span><span style="color: black;">er</span><span style="color: red;">a</span></a>, <a href="https://www.brave.com/" rel="nofollow" target="_blank"><span style="color: #ffa400;">br</span>av<span style="color: #ffa400;">e</span></a> vb. <span style="color: orange;">Web</span> sitelerine göz atmak için kullanabileceğin birçok tarayıcı vardır.
1094. <br />
1095. Bu tarayıcılar yıllar içinde geliştirilmiştir, bu nedenle her biri için düzinelerce sürüm bulabilirsin ve bugüne kadar sürekli olarak güncellenmektedirler.</p>
1096.    <p><span>HTML</span>'ye gelince, etiketler ve özellikler çoğu tüm tarayıcılarda aynıdır, ancak aşağıdakileri bilmeni gerekiyor:</p>
1097. <ul>
1098.  <li>Yalnızca bazı tarayıcılarda kullanılabilen çok az ek etiket ve özellik vardır.</li>
1099.  <li>Tüm tarayıcılarda ortak olan etiketler vardır, ancak bunlar sayfanın açıldığı tarayıcının türüne bağlı olarak farklı şekilde görüntülenebilir.</li>
1100. </ul>
1101.    <br />
1102. <h3>Tarayıcılar arasındaki fark sorununu çözmek</h3>
1103.    <p>Oluşturduğun tasarımın kullanıcıya olduğu gibi görünmesini sağlamak için hangi tarayıcıyı kullanırsa kullansın tüm tarayıcılarda ortak olan kodların kullanılması tercih ediyorum.</p>
1104. <p>Ayrıca, bunun için endişelenmeni gerek yok çünkü gelecekte <span>Bootstrap</span> ve <span>UIkit</span> gibi hazır kütüphaneler ve aynı tasarıma sahip tüm tarayıcılarda çalışan tasarımlar oluşturmak için diğer harika kütüphaneler kullanacaksın.</p>
1105.    <hr />
1106.    <h2 id="the">Tüm HTML etiketleri</h2>
1107.    <p>Aşağıdaki tablo, tüm dil etiketlerini, özelliklerini ve bunları destekleyen tarayıcıları, her bir etiketin kapsamlı örnekleriyle birlikte içerir.</p>
1108. <table class="tablebeta">
1109.  <thead>
1110.    <tr>
1111.      <th>No</th>
1112.      <th>Kullanımı<br /></th>
1113.      <th>Etiket</th>
1114.    </tr>
1115.  </thead>
1116.  <tbody>
1117.    <tr>
1118.      <td data-label="No">1</td>
1119.      <td data-label="kullanımı"><br class="kullanimi"/> Kodda yorum veya not eklemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="https://www.k-html.com/2023/05/html-etiketi.html">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1120.      <td data-label="Etiket"><!-- --></td>
1121.    </tr>
1122.    <tr>
1123.      <td data-label="No">2</td>
1124.      <td data-label="kullanımı"><br class="kullanimi"/> Tarayıcıya sayfada hangi <span>HTML</span> sürümünün desteklendiğini söylemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="https://www.k-html.com/2023/05/html-etiketi_7.html">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1125.      <td data-label="Etiket"><!DOCTYPE></td>
1126.    </tr>
1127.    <tr>
1128.      <td data-label="No">3</td>
1129.      <td data-label="kullanımı"><br class="kullanimi"/> Sayfada bir bağlantı görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="https://www.k-html.com/2023/05/html-etiketi_28.html">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1130.      <td data-label="Etiket"><a></td>
1131.    </tr>
1132.    <tr>
1133.      <td data-label="No">4</td>
1134.      <td data-label="kullanımı"><br class="kullanimi"/> Fare üzerine getirildiğinde gösterilen kısaltılmış biçimde yerleştirilmiş bir kelimeyi tanımlamak için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>      <td data-label="Etiket"><abbr></td>
1135.    </tr>
1136.    <tr>
1137.      <td data-label="No">5</td>
1138.      <td data-label="kullanımı"><br class="kullanimi"/> Sayfada yazar için iletişim bilgilerini görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1139.      <td data-label="Etiket"><address></td>
1140.    </tr>
1141.    <tr>
1142.      <td data-label="No">6</td>
1143.      <td data-label="kullanımı"><br class="kullanimi"/> Görüntü haritasında <map> etiketi tarafından ayarlanan ve tıklanabilir bir bağlantı haline getiren bir noktayı işaretlemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1144.      <td data-label="Etiket"><area></td>
1145.    </tr>
1146.    <tr>
1147.      <td data-label="No">7</td>
1148.      <td data-label="kullanımı"><br class="kullanimi"/> İçine yerleştirilen içerik tek bir satırda görüntülenir, ancak kullanım amacı bu değildir. Genel olarak, sayfada makaleler, yorumlar, kartlar vb. koleksiyonu görüntüleniyorsa, bunların her biri bu türden bir etiket içinde görüntülenebilir.<br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1149.      <td data-label="Etiket"><article></td>
1150.    </tr>
1151.    <tr>
1152.      <td data-label="No">8</td>
1153.      <td data-label="kullanımı"><br class="kullanimi"/> İçine yerleştirilen içerik tek bir satırda görüntülenir, ancak kullanım amacı bu değildir. Genel olarak, bu tür bir etiketin içine sayfa içeriğiyle doğrudan ilgili olmayan içerik yerleştirilebilir. Ayrıca, sayfa tasarımı sayfa boyunca bir yan menü içeriyorsa, menünün içeriği bu tür bir etiketin içine yerleştirilebilir. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1154.      <td data-label="Etiket"><aside></td>
1155.    </tr>
1156.    <tr>
1157.      <td data-label="No">9</td>
1158.      <td data-label="kullanımı"><br class="kullanimi"/> Sayfadaki bir ses dosyasının oynatıcısını görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1159.      <td data-label="Etiket"><audio></td>
1160.    </tr>
1161.    <tr>
1162.      <td data-label="No">10</td>
1163.      <td data-label="kullanımı"><br class="kullanimi"/> Bir paragraftaki kelimeleri kalın olarak göstermek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1164.      <td data-label="Etiket"><b></td>
1165.    </tr>
1166.    <tr>
1167.      <td data-label="No">11</td>
1168.      <td data-label="kullanımı"><br class="kullanimi"/> Sayfaya yerleştirilen herhangi bir göreli yolun başlayacağı temel yolu belirtmek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1169.      <td data-label="Etiket"><base></td>
1170.    </tr>
1171.    <tr>
1172.      <td data-label="No">12</td>
1173.      <td data-label="kullanımı"><br class="kullanimi"/> Metnin başka bir dilde yazılmış bir kısım içermesi ve bu dilin diğer metnin görüntülenme şeklini etkilemesi durumunda, bu kısmı bu etiketin içine koyabilirsiniz, böylece tarayıcı onu metnin geri kalanından ayırır ve böylece etkilemez. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1174.      <td data-label="Etiket"><bdi></td>
1175.    </tr>
1176.    <tr>
1177.      <td data-label="No">13</td>
1178.      <td data-label="kullanımı"><br class="kullanimi"/> Metnin görünümünü ve içindeki her karakterin yönünü değiştirmek için de kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1179.      <td data-label="Etiket"><bdo></td>
1180.    </tr>
1181.    <tr>
1182.      <td data-label="No">14</td>
1183.      <td data-label="kullanımı"><br class="kullanimi"/> Alıntılanan metni, her tarafta kenar boşlukları olacak şekilde tek bir satırda görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1184.      <td data-label="Etiket"><blockquote></td>
1185.    </tr>
1186.    <tr>
1187.      <td data-label="No">15</td>
1188.      <td data-label="kullanımı"><br class="kullanimi"/> Kullanıcının karşısına çıkacak olan sayfa içeriğinin içerisine yerleştirilmesi gerektiğinden sayfanın ana bölümlerinden biri olarak kabul edilir. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1189.      <td data-label="Etiket"><body></td>
1190.    </tr>
1191.    <tr>
1192.      <td data-label="No">16</td>
1193.      <td data-label="kullanımı"><br class="kullanimi"/> Geçerli satırın sonunu bildirmek, yani kalan içeriği yeni bir satırda görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1194.      <td data-label="Etiket"><br></td>
1195.    </tr>
1196.    <tr>
1197.      <td data-label="No">17</td>
1198.      <td data-label="kullanımı"><br class="kullanimi"/> Bir sayfada bir düğme görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1199.      <td data-label="Etiket"><button></td>
1200.    </tr>
1201.    <tr>
1202.      <td data-label="No">18</td>
1203.      <td data-label="kullanımı"><br class="kullanimi"/> Grafikleri sayfada belirli bir alan içinde görüntülemek için kullanılır ve içinde görüntülenen grafiklerin JavaScript kodu ile çizildiğini ve canlandırıldığını belirtir. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1204.      <td data-label="Etiket"><canvas></td>
1205.    </tr>
1206.    <tr>
1207.      <td data-label="No">19</td>
1208.      <td data-label="kullanımı"><br class="kullanimi"/> Bir tabloya basit bir başlık veya açıklama eklemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1209.      <td data-label="Etiket"><caption></td>
1210.    </tr>
1211.    <tr>
1212.      <td data-label="No">20</td>
1213.      <td data-label="kullanımı"><br class="kullanimi"/> Bir sayfada görüntülenen önemli bir çalışmanın başlığını vurgulamak için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1214.      <td data-label="Etiket"><cite></td>
1215.    </tr>
1216.    <tr>
1217.      <td data-label="No">21</td>
1218.      <td data-label="kullanımı"><br class="kullanimi"/> Bir sayfada kodu görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1219.      <td data-label="Etiket"><code></td>
1220.    </tr>
1221.    <tr>
1222.      <td data-label="No">22</td>
1223.      <td data-label="kullanımı"><br class="kullanimi"/> Tablonun sütunları <span><colgroup></span> etiketi ile gruplandırılmışsa, aynı gruba yerleştirilen sütunların görünüm özelliklerini belirtmek için span><col></span> etiketi kullanılabilir, bu özelliklerin CSS kodu tarafından belirtildiğine dikkat edelim. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1224.      <td data-label="Etiket"><col></td>
1225.    </tr>
1226.    <tr>
1227.      <td data-label="No">23</td>
1228.      <td data-label="kullanımı"><br class="kullanimi"/> Colgroup özelliği, görünüm özelliklerini değiştirmek için tablo sütunlarını gruplara ayırır ve bu özelliklerin CSS kodu tarafından belirlendiğini gösterir. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1229.      <td data-label="Etiket"><colgroup></td>
1230.    </tr>
1231.    <tr>
1232.      <td data-label="No">24</td>
1233.      <td data-label="kullanımı"><br class="kullanimi"/> İçine yerleştirilen içerik üzerinde gerçek bir etkisi yoktur, ancak içine yerleştirilen içeriğe karşılık gelen bir değer eklemek için kullanılır.Örneğin, programcı, sayfanın içeriğini karşılık gelen değerlere göre artan sırada düzenleyebilir. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1234.      <td data-label="Etiket"><data></td>
1235.    </tr>
1236.    <tr>
1237.      <td data-label="No">25</td>
1238.      <td data-label="kullanımı"><br class="kullanimi"/> Metin kutusuna bir değer girdiğinde kullanıcının önünde görünen önceden yapılandırılmış seçenekleri görüntülemek için kullanılır.
1239.       <br /> Datalist'te ayırt edici olan, kullanıcının girdiği karakterlere göre göreceli olması ve kendisine aynı harflerle başlayan seçeneklerin sunulmasıdır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1240.      <td data-label="Etiket"><datalist></td>
1241.    </tr>
1242.    <tr>
1243.      <td data-label="No">26</td>
1244.      <td data-label="kullanımı"><br class="kullanimi"/> Açıklama listelerinde belirli bir terim altında bir açıklama veya seçenek görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1245.      <td data-label="Etiket"><dd></td>
1246.    </tr>
1247.    <tr>
1248.      <td data-label="No">27</td>
1249.      <td data-label="kullanımı"><br class="kullanimi"/> Silinen metni görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1250.      <td data-label="Etiket"><del></td>
1251.    </tr>
1252.    <tr>
1253.      <td data-label="No">28</td>
1254.      <td data-label="kullanımı"><br class="kullanimi"/> Kullanıcının gösterip gizleyebileceği ek ayrıntıları görüntülemek için <span><summary></span> etiketiyle birlikte kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1255.      <td data-label="Etiket"><details></td>
1256.    </tr>
1257.    <tr>
1258.      <td data-label="No">29</td>
1259.      <td data-label="kullanımı"><br class="kullanimi"/> Açıklama yapılacak terimden bahsetmek için kullanılır ve fare üzerine gelindiğinde görünen bir ipucunun da gösterilebileceğini belirtir. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1260.      <td data-label="Etiket"><dfn></td>
1261.    </tr>
1262.    <tr>
1263.      <td data-label="No">30</td>
1264.      <td data-label="kullanımı"><br class="kullanimi"/> İçeriği bir sayfada içeriğin üzerinde görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1265.      <td data-label="Etiket"><dialog></td>
1266.    </tr>
1267.    <tr>
1268.      <td data-label="No">31</td>
1269.      <td data-label="kullanımı"><br class="kullanimi"/> İçine konulan içerik tek bir satırda görüntülenir ve sayfadaki her bölüm ve iç bölümleri de bu tür bir etiketin içine yerleştirildiğinden, asıl kullanım amacı sayfanın içeriğini bölmektir. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1270.      <td data-label="Etiket"><div></td>
1271.    </tr>
1272.    <tr>
1273.      <td data-label="No">32</td>
1274.      <td data-label="kullanımı"><br class="kullanimi"/> Bir sayfada bir açıklama listesi görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1275.      <td data-label="Etiket"><dl></td>
1276.    </tr>
1277.    <tr>
1278.      <td data-label="No">33</td>
1279.      <td data-label="kullanımı"><br class="kullanimi"/> Açıklama listelerinde bir terimi veya başlığı görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1280.      <td data-label="Etiket"><dt></td>
1281.    </tr>
1282.    <tr>
1283.      <td data-label="No">34</td>
1284.      <td data-label="kullanımı"><br class="kullanimi"/> Metni italik olarak görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1285.      <td data-label="Etiket"><em></td>
1286.    </tr>
1287.    <tr>
1288.      <td data-label="No">35</td>
1289.      <td data-label="kullanımı"><br class="kullanimi"/> Sayfada harici içerik görüntülemek için kullanılır, bu içerik uygulama, resim, video vb. olabilir. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1290.      <td data-label="Etiket"><embed></td>
1291.    </tr>
1292.    <tr>
1293.      <td data-label="No">36</td>
1294.      <td data-label="kullanımı"><br class="kullanimi"/> Bir formdaki ortak alanları gruplandırmak için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1295.      <td data-label="Etiket"><fieldset></td>
1296.    </tr>
1297.    <tr>
1298.      <td data-label="No">37</td>
1299.      <td data-label="kullanımı"><br class="kullanimi"/> <figure> etiketi içindeki nesnenin açıklamasını görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1300.      <td data-label="Etiket"><figcaption></td>
1301.    </tr>
1302.    <tr>
1303.      <td data-label="No">38</td>
1304.      <td data-label="kullanımı"><br class="kullanimi"/> Bir sayfada resim, kod veya grafiğin görüntülenmesi için bir yer ayırmak için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1305.      <td data-label="Etiket"><figure></td>
1306.    </tr>
1307.    <tr>
1308.      <td data-label="No">39</td>
1309.      <td data-label="kullanımı"><br class="kullanimi"/> İçine yerleştirilen içerik tek bir satırda görüntülenir, ancak kullanım amacı bu değildir. Genel olarak yazarın adı, iletişim bilgileri, telif hakkı ve içeriğe bağlantılar yer almaktadır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1310.      <td data-label="Etiket"><footer></td>
1311.    </tr>
1312.    <tr>
1313.      <td data-label="No">40</td>
1314.      <td data-label="kullanımı"><br class="kullanimi"/> Kullanıcıdan veri almak için sayfada bir form görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1315.      <td data-label="Etiket"><form></td>
1316.    </tr>
1317.    <tr>
1318.      <td data-label="No">41</td>
1319.      <td data-label="kullanımı"><br class="kullanimi"/> Bu etiketleri sayfada başlıkları görüntülemek için kullanırız. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1320.      <td data-label="Etiket"><h1>-<h6></td>
1321.    </tr>
1322.    <tr>
1323.      <td data-label="No">42</td>
1324.      <td data-label="kullanımı"><br class="kullanimi"/> Tasarım dosyalarını, sayfa komut dosyalarını, site simgesini ve diğer önemli şeyleri içine dahil etme olasılığının yanı sıra tarayıcıya sayfanın içeriğinin nasıl görüntüleneceğini bildirmek için kullanıldığı için sayfanın ana bölümlerinden biri olarak kabul edilir. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1325.      <td data-label="Etiket"><head></td>
1326.    </tr>
1327.    <tr>
1328.      <td data-label="No">43</td>
1329.      <td data-label="kullanımı"><br class="kullanimi"/> İçine yerleştirilen içerik tek bir satırda görüntülenir, ancak kullanım amacı bu değildir. Genel olarak, site bölümlerinin üst kısmında görüntülenen veya sitenin tüm sayfalarının üst kısmında görüntülenen, bir üst menü, site logosu, arama düğmesi vb. içerebilecek içerik, içine yerleştirilebilir. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1330.      <td data-label="Etiket"><header></td>
1331.    </tr>
1332.    <tr>
1333.      <td data-label="No">44</td>
1334.      <td data-label="kullanımı"><br class="kullanimi"/> Bir sayfada yatay bir çizgi görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1335.      <td data-label="Etiket"><hr></td>
1336.    </tr>
1337.    <tr>
1338.      <td data-label="No">45</td>
1339.      <td data-label="kullanımı"><br class="kullanimi"/> Tüm sayfa etiketlerinin yerleştirilmesi gereken temel etiket olduğu için sayfadaki ilk etiket olarak yerleştirilir. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1340.      <td data-label="Etiket"><html></td>
1341.    </tr>
1342.    <tr>
1343.      <td data-label="No">46</td>
1344.      <td data-label="kullanımı"><br class="kullanimi"/> Metni italik olarak görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1345.      <td data-label="Etiket"><i></td>
1346.    </tr>
1347.    <tr>
1348.      <td data-label="No">47</td>
1349.      <td data-label="kullanımı"><br class="kullanimi"/> İçerisindeki başka bir sayfanın içeriğini görüntülemek için bir sayfaya çerçeve yerleştirmek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1350.      <td data-label="Etiket"><iframe></td>
1351.    </tr>
1352.    <tr>
1353.      <td data-label="No">48</td>
1354.      <td data-label="kullanımı"><br class="kullanimi"/> Bir sayfada bir resim görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1355.      <td data-label="Etiket"><img></td>
1356.    </tr>
1357.    <tr>
1358.      <td data-label="No">49</td>
1359.      <td data-label="kullanımı"><br class="kullanimi"/> HTML form elemanlarından biridir ve kullanıcının belirli bir veri veya değer girmesini sağlar.  <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1360.      <td data-label="Etiket"><input></td>
1361.    </tr>
1362.    <tr>
1363.      <td data-label="No">50</td>
1364.      <td data-label="kullanımı"><br class="kullanimi"/> HTML'de kullanılan bir işarettir ve metin parçalarının altını çizmek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1365.      <td data-label="Etiket"><ins></td>
1366.    </tr>
1367.    <tr>
1368.      <td data-label="No">51</td>
1369.      <td data-label="kullanımı"><br class="kullanimi"/> Klavyedeki düğmelerin adlarını görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1370.      <td data-label="Etiket"><kbd></td>
1371.    </tr>
1372.    <tr>
1373.      <td data-label="No">52</td>
1374.      <td data-label="kullanımı"><br class="kullanimi"/> Forma yerleştirilen bir elemana özel bir isim vermek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1375.      <td data-label="Etiket"><label></td>
1376.    </tr>
1377.    <tr>
1378.      <td data-label="No">53</td>
1379.      <td data-label="kullanımı"><br class="kullanimi"/> <span><fieldset></span> etiketi tarafından gösterilen sınırlar içinde görünen bir başlık eklemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1380.      <td data-label="Etiket"><legend></td>
1381.    </tr>
1382.    <tr>
1383.      <td data-label="No">54</td>
1384.      <td data-label="kullanımı"><br class="kullanimi"/> <span><ol></span>, <span><ul></span> veya <span><menu></span> etiketleri tarafından oluşturulan menüye öğe eklemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1385.      <td data-label="Etiket"><li></td>
1386.    </tr>
1387.    <tr>
1388.      <td data-label="No">55</td>
1389.      <td data-label="kullanımı"><br class="kullanimi"/> Sayfaya harici dosyaları dahil etmek için kullanılır ve genellikle tasarım dosyalarını ve site simgesini dahil etmek için kullanıyoruz. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1390.      <td data-label="Etiket"><link></td>
1391.    </tr>
1392.    <tr>
1393.      <td data-label="No">56</td>
1394.      <td data-label="kullanımı"><br class="kullanimi"/> İçine yerleştirilen içerik tek bir satırda görüntülenir, ancak kullanım amacı bu değildir.<br />HTML'de kullanılan bir etikettir ve web sayfasının ana içeriğini belirtmek için kullanılır.<br />Bu etiket, bir web sayfasındaki en önemli içeriği belirtmek için kullanılır ve genellikle web sayfalarının ortasında yer alır. Tarayıcılar, <span>"<main>"</span> etiketi içindeki içeriği sayfanın ana içeriği olarak kabul eder ve sayfanın geri kalan kısmından ayrı olarak işler.  <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1395.      <td data-label="Etiket"><main></td>
1396.    </tr>
1397.    <tr>
1398.      <td data-label="No">57</td>
1399.      <td data-label="kullanımı"><br class="kullanimi"/> Bir resim veya grafik üzerindeki belirli alanlara bağlantılar eklemek için kullanılır. <br />Bu etiket, bir resim veya grafik haritasını belirtmek için kullanılır ve <span>"<area>"</span> etiketi ile birlikte kullanılır. Tarayıcılar, <span>"<map>"</span> etiketi ile belirtilen haritayı işler ve kullanıcının tıkladığı alana bağlı olarak belirli bir bağlantıya yönlendirir. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1400.      <td data-label="Etiket"><map></td>
1401.    </tr>
1402.    <tr>
1403.      <td data-label="No">58</td>
1404.      <td data-label="kullanımı"><br class="kullanimi"/> Bir metin parçasını vurgulamak veya belirginleştirmek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1405.      <td data-label="Etiket"><mark></td>
1406.    </tr>
1407.    <tr>
1408.      <td data-label="No">59</td>
1409.      <td data-label="kullanımı"><br class="kullanimi"/> Web sayfasının meta verilerini belirtmek için kullanılır. Bu etiket, bir web sayfasının başlığı, karakter kodlaması, açıklaması, anahtar kelimeleri ve diğer bilgileri gibi meta verilerini içerir. Tarayıcılar, "<meta>" etiketi içindeki bilgileri sayfanın meta verileri olarak kullanır ve web sayfasını daha iyi anlamlandırmak veya dizine eklemek için kullanır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1410.      <td data-label="Etiket"><meta></td>
1411.    </tr>
1412.    <tr>
1413.      <td data-label="No">60</td>
1414.      <td data-label="kullanımı"><br class="kullanimi"/> Sayfada bir mezura görüntülemek için kullanılır, yüzdesi, kendisi için ayarlanmış olan en küçük ve en büyük değere kıyasla mevcut değerine göre belirlenir. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1415.      <td data-label="Etiket"><meter></td>
1416.    </tr>
1417.    <tr>
1418.      <td data-label="No">61</td>
1419.      <td data-label="kullanımı"><br class="kullanimi"/> Web sayfasının gezinme bağlantılarını belirtmek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1420.      <td data-label="Etiket"><nav></td>
1421.    </tr>
1422.    <tr>
1423.      <td data-label="No">62</td>
1424.      <td data-label="kullanımı"><br class="kullanimi"/> Kullanıcının tarayıcısı sayfanın JavaScript kodunun çalıştırılmasına izin vermiyorsa, kullanıcının sayfasında alternatif içerik görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1425.      <td data-label="Etiket"><noscript></td>
1426.    </tr>
1427.    <tr>
1428.      <td data-label="No">63</td>
1429.      <td data-label="kullanımı"><br class="kullanimi"/> Sayfada harici içerik görüntülemek için kullanılır, bu içerik bir uygulama, resim, video vb olabilir. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1430.      <td data-label="Etiket"><object></td>
1431.    </tr>
1432.    <tr>
1433.      <td data-label="No">64</td>
1434.      <td data-label="kullanımı"><br class="kullanimi"/> Bir sayfada sıralı bir liste görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1435.      <td data-label="Etiket"><ol></td>
1436.    </tr>
1437.    <tr>
1438.      <td data-label="No">65</td>
1439.      <td data-label="kullanımı"><br class="kullanimi"/> Bir form elemanındaki seçeneklerin gruplanmasını sağlamak için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1440.      <td data-label="Etiket"><optgroup></td>
1441.    </tr>
1442.    <tr>
1443.      <td data-label="No">66</td>
1444.      <td data-label="kullanımı"><br class="kullanimi"/> <span><select></span> etiketi ile oluşturulan bir açılır listeye seçenek eklemek veya <span><datalist></span> etiketi ile oluşturulan bir yardımcı listeye seçenek eklemek için içine bir öğe eklemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1445.      <td data-label="Etiket"><option></td>
1446.    </tr>
1447.    <tr>
1448.      <td data-label="No">67</td>
1449.      <td data-label="kullanımı"><br class="kullanimi"/> Form elemanının işlenmiş değerini göstermek veya başka bir hesaplama veya işlem sonucunu göstermek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1450.      <td data-label="Etiket"><output></td>
1451.    </tr>
1452.    <tr>
1453.      <td data-label="No">68</td>
1454.      <td data-label="kullanımı"><br class="kullanimi"/> Bir paragraf belirtmek için kullanılır.  <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1455.      <td data-label="Etiket"><p></td>
1456.    </tr>
1457.    <tr>
1458.      <td data-label="No">69</td>
1459.      <td data-label="kullanımı"><br class="kullanimi"/> Bir nesne için belirli bir parametreyi belirtmek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1460.      <td data-label="Etiket"><param></td>
1461.    </tr>
1462.    <tr>
1463.      <td data-label="No">70</td>
1464.      <td data-label="kullanımı"><br class="kullanimi"/> Sayfada tek bir görseli göstermek için kullanılır fakat bu görselleri değiştirmek için uygun gördüğümüz sayfanın boyutuna göre başka bir görselle değiştirilebilir. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1465.      <td data-label="Etiket"><picture></td>
1466.    </tr>
1467.    <tr>
1468.      <td data-label="No">71</td>
1469.      <td data-label="kullanımı"><br class="kullanimi"/> Önceden biçimlendirilmiş bir metin bloğunu belirtmek için kullanılır.  <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1470.      <td data-label="Etiket"><pre></td>
1471.    </tr>
1472.    <tr>
1473.      <td data-label="No">72</td>
1474.      <td data-label="kullanımı"><br class="kullanimi"/> Belirli bir işlemin tamamlanmasından sonra kullanıcıya ne kadar kaldığını göstermek amacıyla bir ilerleme çubuğu görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1475.      <td data-label="Etiket"><progress></td>
1476.    </tr>
1477.    <tr>
1478.      <td data-label="No">73</td>
1479.      <td data-label="kullanımı"><br class="kullanimi"/> Alıntılanan metni " " arasında görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1480.      <td data-label="Etiket"><q></td>
1481.    </tr>
1482.    <tr>
1483.      <td data-label="No">74</td>
1484.      <td data-label="kullanımı"><br class="kullanimi"/> Tarayıcı, kendisine ayarlanan sözcük üzerinde dipnotu görüntüleme özelliğini desteklemiyorsa, dipnotun etrafında köşeli parantezleri görüntülemek için <span><ruby></span> etiketinin içinde kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1485.      <td data-label="Etiket"><rp></td>
1486.    </tr>
1487.    <tr>
1488.      <td data-label="No">75</td>
1489.      <td data-label="kullanımı"><br class="kullanimi"/> <span><ruby></span> etiketi içinde bulunduğu kelime üzerinde dipnot görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1490.      <td data-label="Etiket"><rt></td>
1491.    </tr>
1492.    <tr>
1493.      <td data-label="No">76</td>
1494.      <td data-label="kullanımı"><br class="kullanimi"/> Bir kelimenin üstünde veya yanında dipnot görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1495.      <td data-label="Etiket"><ruby></td>
1496.    </tr>
1497.    <tr>
1498.      <td data-label="No">77</td>
1499.      <td data-label="kullanımı"><br class="kullanimi"/> Silinen metni görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1500.      <td data-label="Etiket"><s></td>
1501.    </tr>
1502.    <tr>
1503.      <td data-label="No">78</td>
1504.      <td data-label="kullanımı"><br class="kullanimi"/> Bir web sayfasında bir örnek metin bloğunu belirtmek için kullanılır ve genellikle kod örnekleri veya terminal çıktıları için kullanılır.  <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1505.      <td data-label="Etiket"><samp></td>
1506.    </tr>
1507.    <tr>
1508.      <td data-label="No">79</td>
1509.      <td data-label="kullanımı"><br class="kullanimi"/> Sayfaya <span>javascript</span> kodu eklemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1510.      <td data-label="Etiket"><script></td>
1511.    </tr>
1512.    <tr>
1513.      <td data-label="No">80</td>
1514.      <td data-label="kullanımı"><br class="kullanimi"/> İçine yerleştirilen içerik tek bir satırda görüntülenir, ancak kullanım amacı bu değildir. Genel olarak, sayfanın herhangi bir ayrı bölümü (yorum bölümü, en son makaleler vb.) bu tür bir etiketin içine yerleştirilebilir. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1515.      <td data-label="Etiket"><section></td>
1516.    </tr>
1517.    <tr>
1518.      <td data-label="No">81</td>
1519.      <td data-label="kullanımı"><br class="kullanimi"/> Değerlerinden seçilmesi gereken bir açılır liste eklemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1520.      <td data-label="Etiket"><select></td>
1521.    </tr>
1522.    <tr>
1523.      <td data-label="No">82</td>
1524.      <td data-label="kullanımı"><br class="kullanimi"/> Bir web sayfasındaki belirli bir metni daha küçük boyutta görüntülemek için kullanılır ve genellikle dipnotlar, hukuki uyarılar veya benzeri küçük metinler için kullanılır.  <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1525.      <td data-label="Etiket"><small></td>
1526.    </tr>
1527.    <tr>
1528.      <td data-label="No">83</td>
1529.      <td data-label="kullanımı"><br class="kullanimi"/> Hangi tür tarayıcı kullanıyor olursa olsun, tarayıcının kullanıcıya gösterebilmesini sağlamak için sayfada görüntülenecek birkaç ses veya video formatı hazırlamak için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1530.      <td data-label="Etiket"><source></td>
1531.    </tr>
1532.    <tr>
1533.      <td data-label="No">84</td>
1534.      <td data-label="kullanımı"><br class="kullanimi"/> İçine konulan içerik üzerinde herhangi bir etkisi yoktur ve asıl kullanım amacı CSS kodu ile paragraflara yerleştirilmiş bazı içeriklerin görünümünü değiştirmektir. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1535.      <td data-label="Etiket"><span></td>
1536.    </tr>
1537.    <tr>
1538.      <td data-label="No">85</td>
1539.      <td data-label="kullanımı"><br class="kullanimi"/> Paragraftaki önemli kelimeleri koyu olarak göstermek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1540.      <td data-label="Etiket"><strong></td>
1541.    </tr>
1542.    <tr>
1543.      <td data-label="No">86</td>
1544.      <td data-label="kullanımı"><br class="kullanimi"/> Bir web sayfasının genel stilini veya belirli bir bölümünün stilini belirlemek için kullanılır ve genellikle <span>CSS</span> (Cascading Style Sheets) kodlarını içerir.<br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1545.      <td data-label="Etiket"><style></td>
1546.    </tr>
1547.    <tr>
1548.      <td data-label="No">87</td>
1549.      <td data-label="kullanımı"><br class="kullanimi"/> Metni, yanındaki metnin geri kalanından biraz daha aşağıda görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1550.      <td data-label="Etiket"><sub></td>
1551.    </tr>
1552.    <tr>
1553.      <td data-label="No">88</td>
1554.      <td data-label="kullanımı"><br class="kullanimi"/> <span><details></span> etiketindeki gizli içeriği göstermek için tıklanabilen kısayol metnini görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1555.      <td data-label="Etiket"><summary></td>
1556.    </tr>
1557.    <tr>
1558.      <td data-label="No">89</td>
1559.      <td data-label="kullanımı"><br class="kullanimi"/>Metni, yanındaki metnin geri kalanından biraz daha yüksekte görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1560.      <td data-label="Etiket"><sup></td>
1561.    </tr>
1562.    <tr>
1563.      <td data-label="No">90</td>
1564.      <td data-label="kullanımı"><br class="kullanimi"/> Bir sayfada <span>SVG</span> grafiklerini görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1565.      <td data-label="Etiket"><svg></td>
1566.    </tr>
1567.    <tr>
1568.      <td data-label="No">91</td>
1569.      <td data-label="kullanımı"><br class="kullanimi"/> Bir sayfada tablo görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1570.      <td data-label="Etiket"><table></td>
1571.    </tr>
1572.    <tr>
1573.      <td data-label="No">92</td>
1574.      <td data-label="kullanımı"><br class="kullanimi"/> HTML tablosunun ana bölümüdür ve tablonun satırlarını ve hücrelerini içerir.  <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1575.      <td data-label="Etiket"><tbody></td>
1576.    </tr>
1577.    <tr>
1578.      <td data-label="No">93</td>
1579.      <td data-label="kullanımı"><br class="kullanimi"/> Bir tabloya normal bir sütun eklemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1580.      <td data-label="Etiket"><td></td>
1581.    </tr>
1582.    <tr>
1583.      <td data-label="No">94</td>
1584.      <td data-label="kullanımı"><br class="kullanimi"/> Sayfada daha sonra görüntülenecek içeriği gizli bir şekilde hazırlamak için kullanılır ve gösterilmesi gerektiğinde JavaScript ile bir kopyası oluşturulabilir. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1585.      <td data-label="Etiket"><template></td>
1586.    </tr>
1587.    <tr>
1588.      <td data-label="No">95</td>
1589.      <td data-label="kullanımı"><br class="kullanimi"/> Sayfaya çok satırlı bir metin kutusu eklemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1590.      <td data-label="Etiket"><textarea></td>
1591.    </tr>
1592.    <tr>
1593.      <td data-label="No">96</td>
1594.      <td data-label="kullanımı"><br class="kullanimi"/> Bir tablonun sonunda farklı şekilde görüntülenecek bilgileri içeren satırları gruplandırmak için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1595.      <td data-label="Etiket"><tfoot></td>
1596.    </tr>
1597.    <tr>
1598.      <td data-label="No">97</td>
1599.      <td data-label="kullanımı"><br class="kullanimi"/> Tablodaki bir sütunun veya satırın başlığını temsil eden bir alan eklemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1600.      <td data-label="Etiket"><th></td>
1601.    </tr>
1602.    <tr>
1603.      <td data-label="No">98</td>
1604.      <td data-label="kullanımı"><br class="kullanimi"/> HTML tablosunun başlık kısmını içerir ve genellikle tablonun ilk satırında yer alır.  <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1605.      <td data-label="Etiket"><thead></td>
1606.    </tr>
1607.    <tr>
1608.      <td data-label="No">99</td>
1609.      <td data-label="kullanımı"><br class="kullanimi"/> Arama motorlarının metinde belirtilen tarih ve saati daha iyi anlaması için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1610.      <td data-label="Etiket"><time></td>
1611.    </tr>
1612.    <tr>
1613.      <td data-label="No">100</td>
1614.      <td data-label="kullanımı"><br class="kullanimi"/> Tarayıcı sekmesinde gösterilecek sayfanın başlığını belirtmek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1615.      <td data-label="Etiket"><title></td>
1616.    </tr>
1617.    <tr>
1618.      <td data-label="No">101</td>
1619.      <td data-label="kullanımı"><br class="kullanimi"/> Tabloya satır eklemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1620.      <td data-label="Etiket"><tr></td>
1621.    </tr>
1622.    <tr>
1623.      <td data-label="No">102</td>
1624.      <td data-label="kullanımı"><br class="kullanimi"/> Ses dosyasına veya sayfada görüntülenen videoya altyazı eklemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1625.      <td data-label="Etiket"><track></td>
1626.    </tr>
1627.    <tr>
1628.      <td data-label="No">103</td>
1629.      <td data-label="kullanımı"><br class="kullanimi"/> Metnin altında bir satır görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1630.      <td data-label="Etiket"><u></td>
1631.    </tr>
1632.    <tr>
1633.      <td data-label="No">104</td>
1634.      <td data-label="kullanımı"><br class="kullanimi"/> Bir sayfada sırasız bir liste görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1635.      <td data-label="Etiket"><ul></td>
1636.    </tr>
1637.    <tr>
1638.      <td data-label="No">105</td>
1639.      <td data-label="kullanımı"><br class="kullanimi"/> Aritmetik işlemlerde kullanılan değişkenlerin isimlerini metnin geri kalanından farklı bir şekilde göstermek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1640.      <td data-label="Etiket"><var></td>
1641.    </tr>
1642.    <tr>
1643.      <td data-label="No">106</td>
1644.      <td data-label="kullanımı"><br class="kullanimi"/> Sayfada bir video görüntülemek için kullanılır. <br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1645.      <td data-label="Etiket"><video></td>
1646.    </tr>
1647.    <tr>
1648.      <td data-label="No">107</td>
1649.      <td data-label="kullanımı"><br class="kullanimi"/> Metnin tamamı aynı satırda görüntülenemiyorsa, metnin nerede kesilip yeni bir satırda gösterileceğini belirtmek için kullanılır.<br /><a target="_blank" class="elifnurbeta" href="#ens">Okumaya devam et <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></td>
1650.      <td data-label="Etiket"><wbr></td>
1651.    </tr>
1652.  </tbody>
1653. </table>
1654.    
1655.    
1656.  
1657.    
1658.    
1659. <div class="parent-links">  
1660.    <a class="btn btn-primary" href="https://www.k-html.com/2022/10/html-farkl-dillerde-sayfalar.html">
1661.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
1662.      önceki ders
1663.    </a>
1664.  
1665.    <a class="btn btn-primary" href="#">
1666.      sonraki ders
1667.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
1668.    </a>
1669.  &lt;/div&gt;</content><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/4959673284034026398'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/4959673284034026398'/><link rel='alternate' type='text/html' href='https://www.k-html.com/2023/03/html-dilin-tum-etiketleri-ve-ozellikleri.html' title='HTML Dilin Tüm Etiketleri Ve Özellikleri'/><author><name>HTML öğren</name><uri>http://www.blogger.com/profile/05938401370972816509</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB9hVaVznt_p0FHumsq5E1ns0HFhwUsz5N8PDjeIc1oE4O70yakyUZqpJJiZyKolfcNdZlaOrykdeVaT9wGLi4Gp6Ko2vw9JCv-r2AQBF1JjXNu_09kuRKvXx-7fys1Hw/s113/html.jpg'/></author></entry><entry><id>tag:blogger.com,1999:blog-624213398567285603.post-154890834627296298</id><published>2022-10-06T20:50:00.015+03:00</published><updated>2023-05-06T21:42:51.557+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Farklı Dillerde Sayfalar"/><category scheme="http://www.blogger.com/atom/ns#" term="html"/><category scheme="http://www.blogger.com/atom/ns#" term="seo"/><title type='text'>HTML Farklı Dillerde Sayfalar</title><content type='html'>&lt;div class=&quot;parent-links&quot;&gt;
1670.  <a
1671.    class="btn btn-primary"
1672.    href="https://www.k-html.com/2022/09/html-ulke-kodlar.html"
1673.  >
1674. <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
1675.    önceki ders
1676.  </a>
1677.  
1678.  <a class="btn btn-primary" href="https://www.k-html.com/2023/03/html-dilin-tum-etiketleri-ve-ozellikleri.html">
1679.    sonraki ders
1680.    <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
1681.  </a>
1682. </div>
1683. <details open="">
1684.  <summary style="text-align: left;">Sayfa içeriği</summary>
1685.  <ul class="postcontent">
1686.    <li>
1687.      <b>›</b>
1688.      <a
1689.        href="https://www.k-html.com/2022/10/html-farkl-dillerde-sayfalar.html#amvfds"
1690.        ><strong>Arama motorları ve farklı dillerde sayfalar</strong></a
1691.      >
1692.    </li>
1693.    <li>
1694.      <b>›</b>
1695.      <a
1696.        href="https://www.k-html.com/2022/10/html-farkl-dillerde-sayfalar.html#gdnb"
1697.        ><strong>Google dilimizi nasıl biliyor?</strong></a
1698.        ></li>
1699.     <li> <b>›</b>
1700.      <a
1701.        href="https://www.k-html.com/2022/10/html-farkl-dillerde-sayfalar.html#sfdongs"
1702.        ><strong
1703.          >Siteyi farklı dillerde olduğunu nasıl Google'a söyleriz?</strong
1704.        ></a
1705.      >
1706.    </li>
1707.    <li>
1708.      <b>›</b>
1709.      <a
1710.        href="https://www.k-html.com/2022/10/html-farkl-dillerde-sayfalar.html#fdbfto"
1711.        ><strong>Farklı Dillerde bir sayfa tasarlama örnek</strong></a
1712.      >
1713.    </li>
1714.  </ul>
1715. </details>
1716. <hr class="hrkk" />
1717. <h2 id="amvfds">Arama motorları ve farklı dillerde sayfalar</h2>
1718. <p>
1719.  İçeriği farklı dillere çevrilmiş bazı web sitelerinde, Google'da arama
1720.  yaptığında sayfa içeriği ingilizce dilinde olabilir ama ona Türkçe'de bir
1721.  çevrilmiş sayfa varsa o çıkar. Bu sihir değildir ve bazılarının maalesef
1722.  inandığı gibi, sitenin dilini bilmesi için seni gözetlediği anlamına gelmez.
1723. </p>
1724. <p>
1725.  Pratik bir örnek olarak, Türkiye'de yaşıyorsan ve Google'da "Facebook"
1726.  kelimesini aradığında, seni ilk olarak Türkçe'de çevrilmiş Facebook
1727.  bağlantılarını aşağıdaki gibi gösterecektir.
1728. </p>
1729. <a href="https://src.k-html.com/facebook-search-result-from-turkey.png"
1730.  ><img
1731.    src="https://src.k-html.com/facebook-search-result-from-turkey.png"
1732.    alt="Türkiye'de facebook arama sonucu"
1733. /></a>
1734. <hr />
1735. <h2 id="gdnb">Google dilimizi nasıl biliyor?</h2>
1736. <p>
1737.  Herhangi bir <span style="color: orange;">web</span> sitesine erişmeye
1738.  çalıştığında, bilgisayarın otomatik olarak
1739.  <span style="color: orange;">web</span> sitesine çalışması için ihtiyaç
1740.  duyduğu bazı gerekli bilgileri sağlar. Bu bilgilerin en önemlilerinden biri de
1741.  <span>IP</span> adresindir, çünkü bu adres aracılığıyla konumunu öğrenebilir
1742.  ve bu, yaşadığın ülkeyi ve konuştuğun dili de bilmek anlamına gelir.
1743. </p>
1744. <p>
1745.  Google arama moturunda, daha önceden hesabında seçtiğin ve tercih ettiğin
1746.  dillere göre sonuç verir.<br />
1747.  Ancak daha önceden hiç bir dil seçmediysen senin Coğrafi konumundaki kişilere
1748.  göre dil gösterir. Mesela Türkiye'de yaşıyorsan ilkte Türkçe dilinde
1749.  göstermeyi çalışır ancak Türkçe dili dedteklemiyorsa veya müsait değilse
1750.  Türkiye'deki kişilere göre dil verir, mesela kullanıcılar Türkçe'den sonra en
1751.  çok tercih ettiği ve kullandığı dil Ingilizce ise o zaman Ingilizce'de
1752.  göstermeyi çalışır.
1753. </p>
1754. <hr />
1755. <h2 id="sfdongs">Siteyi farklı dillerde olduğunu nasıl Google'a söyleriz?</h2>
1756. <p>
1757.  Birden fazla dile çevrilmiş bir sayfanı olması durumunda, çevrilmiş kopyaları
1758.  bulunan her sayfada çevrilmiş tüm sayfaların bağlantılarını belirterek bunu
1759.  Google'a bildirebilirsin.<br />
1760.  Çevrilmiş sayfalara bağlantılar
1761.  <span><head> </head></span> bölümünün içine
1762.  <span><link></span> etiketi ile aşağıdaki gibi yerleştirilmelidir.
1763. </p>
1764. <blockquote>
1765.  Örneğin, Türkçede bir sayfamız var ve kullanıcı Türkçe konuşmuyor ve ne
1766.  içerdiğini anlayabilmesi için sayfanın İngilizce bir kopyasını istiyor.<br />
1767.  İlk olarak aynı içeriğe sahip fakat İngilizcede başka bir sayfa hazırladıktan
1768.  sonra bağlantının yolunu alıp bir kod ekliyorsun ve bu kodun işi Google'a şunu
1769.  söylemektir; "Kullanıcı İngilizcede bir kopyasını istiyorsa bu sayfaya
1770.  gönder."
1771. </blockquote>
1772. <br />
1773. <pre
1774.  class="code"
1775. ><ul class="ucode"><li><span style="color: blue"><head</span><span style="color: blue">></span></li><li>    <span style="color: #00008B;"><!--<span style="color: #00008B;"></span> Açık sayfa bağlantı türünün canoncial olduğunu belirtiyoruz. <span style="color: #00008B;">--></span></span></li><li>    <span style="color: blue"><link</span> <span style="color: red">rel=</span><span style="color: red">"</span>canoncial<span style="color: red">"</span> <span style="color: red">hreflang=</span><span style="color: red">"</span>language-code<span style="color: red">"</span> <span style="color: blue">/</span><span style="color: blue">></span> </li><li></li><li>    <span style="color: #00008B;"><!--<span style="color: #00008B;"></span> Çevirilmiş tüm sayfalar bağlantı türünün alternatif olduğunu belirtiyoruz. <span style="color: #00008B;">--></span></span></li><li>    <span style="color: blue"><link</span> <span style="color: red">rel=</span><span style="color: red">"</span>alternate<span style="color: red">"</span> <span style="color: red">hreflang=</span><span style="color: red">"</span>language-code<span style="color: red">"</span> <span style="color: red">href=</span><span style="color: red">"</span>url<span style="color: red">"</span> <span style="color: blue">/</span><span style="color: blue">></span> </li><li>    <span style="color: blue"><link</span> <span style="color: red">rel=</span><span style="color: red">"</span>alternate<span style="color: red">"</span> <span style="color: red">hreflang=</span><span style="color: red">"</span>language-code<span style="color: red">"</span> <span style="color: red">href=</span><span style="color: red">"</span>url<span style="color: red">"</span> <span style="color: blue">/</span><span style="color: blue">></span> </li><li></li><li><span style="color: blue"></head</span><span style="color: blue">></span></li></ul></pre>
1776. <br />
1777. <ul>
1778.  <li>
1779.    Şu anda açık olan sayfanın dilini arama motoruna bildirmek için
1780.    <span>rel</span> özelliğe değer olarak <span>canoncial</span> ekledim.
1781.  </li>
1782.  <li>
1783.    Arama motoruna kullanıcının diline göre uygun bir çevrilmiş bir sayfa olması
1784.    durumunda gösterilmesi gerektiğini bildirmek için <span>rel</span> özelliğe
1785.    değer olarak <span>alternate</span> ekledim.
1786.  </li>
1787.  <li>
1788.    <span>language-code</span> kelimenin yerine, açık olan veya alternatif sayfa
1789.    için sayfanın dilini belirtmek için
1790.    <a
1791.      href="https://www.k-html.com/2022/09/html-dil-kodlar.html"
1792.      target="_blank"
1793.      >dilin kodu</a
1794.    >
1795.    eklemelisin.
1796.  </li>
1797.  <li>
1798.    <span>url</span> kelimesi yerine, kullanıcının diline uygun bir dile
1799.    çevrilmiş aynı orijinal içeriği içeren sayfanın bağlantısını iletmelisin.
1800.  </li>
1801. </ul>
1802. <br />
1803. <blockquote>
1804.  Kullanıcıyı yönlendirmenin bu yöntemi Google arama motoru tarafından
1805.  kullanılmaktadır ancak diğer arama motorları mutlaka kullanmamaktadır ve bu
1806.  yöntemi kullanmayan arama motorları da bulunmaktadır.<br />
1807.  Basit bir örnek olarak, Bing arama motoru, kullanıcıyı yönlendirmek için
1808.  kullanılan etiketlere önem vermez.
1809. </blockquote>
1810. <hr />
1811. <h2 id="fdbfto">Farklı Dillerde bir sayfa tasarlama örnek</h2>
1812. <p>
1813.  Aşağıdaki örnekte <span>k-html</span> sitesinde "HTML Öğren" başlıklı bir
1814.  sayfa olduğunu ve dört dile (Türkçe, İngilizce, Japonca ve Arapça)
1815.  çevrildiğini varsayıyoruz.
1816. </p>
1817. <p>
1818.  Sayfanın çevrilmiş her versiyonunun aşağıdaki gibi özel bir dosyaya
1819.  yerleştirildiğini varsayalım:
1820. </p>
1821. <ul>
1822.  <li>tr-k-html.html Türkçe sayfasıdır.</li>
1823.  <li>en-k-html.html İngilizce sayfasıdır.</li>
1824.  <li>jp-k-html.html Japonca sayfasıdır.</li>
1825.  <li>ar-k-html.html Arapça sayfasıdır.</li>
1826. </ul>
1827. <p>
1828.  Artık bir kullanıcı, arama motorunun sayfayı kullanıcının dilinde göstermesi
1829.  için Google'da "HTML öğren" araması yaparsa, sayfaların bu şekilde bağlanması
1830.  gerekir.
1831. </p>
1832.  
1833. <h3>Türkçe dilinde sayfası</h3>
1834. <p>Türkçede sayfa aşağıdaki gibi çevrilen diğer sayfalara belirtmelidir.</p>
1835. <pre
1836.  class="code"
1837. ><ul class="ucode"><li><span style="color: grey"><!DOCTYPE html></span></li><li><span style="color: blue"><html</span> <span style="color: red">lang=</span><span style="color: red">"</span>tr<span style="color: red">"</span><span style="color: blue">></span></li><li>    <span style="color: blue"><head</span><span style="color: blue">></span></li><li>        <span style="color: #00008B;"><!--<span style="color: #00008B;"></span> Burada açık sayfanın dili Türkçe olduğunu Google'a bildirdim. <span style="color: #00008B;">--></span></span></li><li>        <span style="color: blue"><link</span> <span style="color: red">rel=</span><span style="color: red">"</span>canoncial<span style="color: red">"</span> <span style="color: red">hreflang=</span><span style="color: red">"</span>tr<span style="color: red">"</span> <span style="color: blue">/</span><span style="color: blue">></span> </li><li>        <span style="color: #00008B;"><!--<span style="color: #00008B;"></span> Burada arama motoruna, sayfanın İngilizce'ye çevrilmiş bir versiyonunun varlığını ve  yolu ile birlikte olduğunu bildirdim. <span style="color: #00008B;">--></span></span></li><li>        <span style="color: blue"><link</span> <span style="color: red">rel=</span><span style="color: red">"</span>alternate<span style="color: red">"</span> <span style="color: red">hreflang=</span><span style="color: red">"</span>en<span style="color: red">"</span> <span style="color: red">href=</span><span style="color: red">"</span>.<span style="color: blue">/</span>en-k-html.html<span style="color: red">"</span> <span style="color: blue">/</span><span style="color: blue">></span> </li><li>        <span style="color: #00008B;"><!--<span style="color: #00008B;"></span> Burada arama motoruna, sayfanın Japonca'ya çevrilmiş bir versiyonunun varlığını ve  yolu ile birlikte olduğunu bildirdim. <span style="color: #00008B;">--></span></span></li><li>        <span style="color: blue"><link</span> <span style="color: red">rel=</span><span style="color: red">"</span>alternate<span style="color: red">"</span> <span style="color: red">hreflang=</span><span style="color: red">"</span>jp<span style="color: red">"</span> <span style="color: red">href=</span><span style="color: red">"</span>.<span style="color: blue">/</span>jp-k-html.html<span style="color: red">"</span> <span style="color: blue">/</span><span style="color: blue">></span> </li><li>        <span style="color: #00008B;"><!--<span style="color: #00008B;"></span> Burada arama motoruna, sayfanın Arapça'ya çevrilmiş bir versiyonunun varlığını ve  yolu ile birlikte olduğunu bildirdim. <span style="color: #00008B;">--></span></span></li><li>        <span style="color: blue"><link</span> <span style="color: red">rel=</span><span style="color: red">"</span>alternate<span style="color: red">"</span> <span style="color: red">hreflang=</span><span style="color: red">"</span>ar<span style="color: red">"</span> <span style="color: red">href=</span><span style="color: red">"</span>.<span style="color: blue">/</span>ar-k-html.html<span style="color: red">"</span> <span style="color: blue">/</span><span style="color: blue">></span> </li><li></li><li>        <span style="color: #00008B;"><!--<span style="color: #00008B;"></span> Türkçe sayfa başlığı <span style="color: #00008B;">--></span></span></li><li>        <span style="color: blue"><title</span><span style="color: blue">></span>HTML Öğren<span style="color: blue"></h2</span><span style="color: blue">></span></li><li>    <span style="color: blue"></head</span><span style="color: blue">></span></li><li>    <span style="color: blue"><body</span><span style="color: blue">></span></li><li>        。。。</li><li>    <span style="color: blue"></body</span><span style="color: blue">></span></li><li><span style="color: blue"></html</span><span style="color: blue">></span></li></ul></pre>
1838. <br /><br />
1839.  
1840. <h3>İngilizce dilinde sayfası</h3>
1841. <p>İngilizcede sayfa aşağıdaki gibi çevrilen diğer sayfalara belirtmelidir.</p>
1842. <pre
1843.  class="code"
1844. ><ul class="ucode"><li><span style="color: grey"><!DOCTYPE html></span></li><li><span style="color: blue"><html</span> <span style="color: red">lang=</span><span style="color: red">"</span>en<span style="color: red">"</span><span style="color: blue">></span></li><li>    <span style="color: blue"><head</span><span style="color: blue">></span></li><li>        <span style="color: #00008B;"><!--<span style="color: #00008B;"></span> Burada açık sayfanın dili  İngilizce  olduğunu Google'a bildirdim. <span style="color: #00008B;">--></span></span></li><li>        <span style="color: blue"><link</span> <span style="color: red">rel=</span><span style="color: red">"</span>canoncial<span style="color: red">"</span> <span style="color: red">hreflang=</span><span style="color: red">"</span>en<span style="color: red">"</span> <span style="color: blue">/</span><span style="color: blue">></span> </li><li>        <span style="color: #00008B;"><!--<span style="color: #00008B;"></span> Burada arama motoruna, sayfanın Türkçe'ye çevrilmiş bir versiyonunun varlığını ve  yolu ile birlikte olduğunu bildirdim. <span style="color: #00008B;">--></span></span></li><li>        <span style="color: blue"><link</span> <span style="color: red">rel=</span><span style="color: red">"</span>alternate<span style="color: red">"</span> <span style="color: red">hreflang=</span><span style="color: red">"</span>tr<span style="color: red">"</span> <span style="color: red">href=</span><span style="color: red">"</span>.<span style="color: blue">/</span>tr-k-html.html<span style="color: red">"</span> <span style="color: blue">/</span><span style="color: blue">></span> </li><li>        <span style="color: #00008B;"><!--<span style="color: #00008B;"></span> Burada arama motoruna, sayfanın Japonca'ya çevrilmiş bir versiyonunun varlığını ve  yolu ile birlikte olduğunu bildirdim. <span style="color: #00008B;">--></span></span></li><li>        <span style="color: blue"><link</span> <span style="color: red">rel=</span><span style="color: red">"</span>alternate<span style="color: red">"</span> <span style="color: red">hreflang=</span><span style="color: red">"</span>jp<span style="color: red">"</span> <span style="color: red">href=</span><span style="color: red">"</span>.<span style="color: blue">/</span>jp-k-html.html<span style="color: red">"</span> <span style="color: blue">/</span><span style="color: blue">></span> </li><li>        <span style="color: #00008B;"><!--<span style="color: #00008B;"></span> Burada arama motoruna, sayfanın Arapça'ya çevrilmiş bir versiyonunun varlığını ve  yolu ile birlikte olduğunu bildirdim. <span style="color: #00008B;">--></span></span></li><li>        <span style="color: blue"><link</span> <span style="color: red">rel=</span><span style="color: red">"</span>alternate<span style="color: red">"</span> <span style="color: red">hreflang=</span><span style="color: red">"</span>ar<span style="color: red">"</span> <span style="color: red">href=</span><span style="color: red">"</span>.<span style="color: blue">/</span>ar-k-html.html<span style="color: red">"</span> <span style="color: blue">/</span><span style="color: blue">></span> </li><li></li><li>        <span style="color: #00008B;"><!--<span style="color: #00008B;"></span> İngilizce sayfa başlığı <span style="color: #00008B;">--></span></span></li><li>        <span style="color: blue"><title</span><span style="color: blue">></span>Learn HTML<span style="color: blue"></h2</span><span style="color: blue">></span></li><li>    <span style="color: blue"></head</span><span style="color: blue">></span></li><li>    <span style="color: blue"><body</span><span style="color: blue">></span></li><li>        。。。</li><li>    <span style="color: blue"></body</span><span style="color: blue">></span></li><li><span style="color: blue"></html</span><span style="color: blue">></span></li></ul></pre>
1845. <br />
1846. <br />
1847.  
1848. <h3>Japonca dilinde sayfası</h3>
1849. <p>Japoncada sayfa aşağıdaki gibi çevrilen diğer sayfalara belirtmelidir.</p>
1850. <pre
1851.  class="code"
1852. ><ul class="ucode"><li><span style="color: grey"><!DOCTYPE html></span></li><li><span style="color: blue"><html</span> <span style="color: red">lang=</span><span style="color: red">"</span>jp<span style="color: red">"</span><span style="color: blue">></span></li><li>    <span style="color: blue"><head</span><span style="color: blue">></span></li><li>        <span style="color: #00008B;"><!--<span style="color: #00008B;"></span> Burada açık sayfanın dili  Japonca  olduğunu Google'a bildirdim. <span style="color: #00008B;">--></span></span></li><li>        <span style="color: blue"><link</span> <span style="color: red">rel=</span><span style="color: red">"</span>canoncial<span style="color: red">"</span> <span style="color: red">hreflang=</span><span style="color: red">"</span>jp<span style="color: red">"</span> <span style="color: blue">/</span><span style="color: blue">></span> </li><li>        <span style="color: #00008B;"><!--<span style="color: #00008B;"></span> Burada arama motoruna, sayfanın Türkçe'ye çevrilmiş bir versiyonunun varlığını ve  yolu ile birlikte olduğunu bildirdim. <span style="color: #00008B;">--></span></span></li><li>        <span style="color: blue"><link</span> <span style="color: red">rel=</span><span style="color: red">"</span>alternate<span style="color: red">"</span> <span style="color: red">hreflang=</span><span style="color: red">"</span>tr<span style="color: red">"</span> <span style="color: red">href=</span><span style="color: red">"</span>.<span style="color: blue">/</span>tr-k-html.html<span style="color: red">"</span> <span style="color: blue">/</span><span style="color: blue">></span> </li><li>        <span style="color: #00008B;"><!--<span style="color: #00008B;"></span> Burada arama motoruna, sayfanın İngilizce'ya çevrilmiş bir versiyonunun varlığını ve  yolu ile birlikte olduğunu bildirdim. <span style="color: #00008B;">--></span></span></li><li>        <span style="color: blue"><link</span> <span style="color: red">rel=</span><span style="color: red">"</span>alternate<span style="color: red">"</span> <span style="color: red">hreflang=</span><span style="color: red">"</span>en<span style="color: red">"</span> <span style="color: red">href=</span><span style="color: red">"</span>.<span style="color: blue">/</span>en-k-html.html<span style="color: red">"</span> <span style="color: blue">/</span><span style="color: blue">></span> </li><li>        <span style="color: #00008B;"><!--<span style="color: #00008B;"></span> Burada arama motoruna, sayfanın Arapça'ya çevrilmiş bir versiyonunun varlığını ve  yolu ile birlikte olduğunu bildirdim. <span style="color: #00008B;">--></span></span></li><li>        <span style="color: blue"><link</span> <span style="color: red">rel=</span><span style="color: red">"</span>alternate<span style="color: red">"</span> <span style="color: red">hreflang=</span><span style="color: red">"</span>ar<span style="color: red">"</span> <span style="color: red">href=</span><span style="color: red">"</span>.<span style="color: blue">/</span>ar-k-html.html<span style="color: red">"</span> <span style="color: blue">/</span><span style="color: blue">></span> </li><li></li><li>        <span style="color: #00008B;"><!--<span style="color: #00008B;"></span> Japonca sayfa başlığı <span style="color: #00008B;">--></span></span></li><li>        <span style="color: blue"><title</span><span style="color: blue">></span>HTMLを学ぶ<span style="color: blue"></h2</span><span style="color: blue">></span></li><li>    <span style="color: blue"></head</span><span style="color: blue">></span></li><li>    <span style="color: blue"><body</span><span style="color: blue">></span></li><li>        。。。</li><li>    <span style="color: blue"></body</span><span style="color: blue">></span></li><li><span style="color: blue"></html</span><span style="color: blue">></span></li></ul></pre>
1853. <br />
1854. <br />
1855.  
1856. <br /><br />
1857. <h3>Arapça dilinde sayfası</h3>
1858. <p>Arapçada sayfa aşağıdaki gibi çevrilen diğer sayfalara belirtmelidir.</p>
1859. <pre
1860.  class="code"
1861. ><ul class="ucode"><li><span style="color: grey"><!DOCTYPE html></span></li><li><span style="color: blue"><html</span> <span style="color: red">lang=</span><span style="color: red">"</span>ar<span style="color: red">"</span><span style="color: blue">></span></li><li>    <span style="color: blue"><head</span><span style="color: blue">></span></li><li>        <span style="color: #00008B;"><!--<span style="color: #00008B;"></span> Burada açık sayfanın dili  Arapça  olduğunu Google'a bildirdim. <span style="color: #00008B;">--></span></span></li><li>        <span style="color: blue"><link</span> <span style="color: red">rel=</span><span style="color: red">"</span>canoncial<span style="color: red">"</span> <span style="color: red">hreflang=</span><span style="color: red">"</span>ar<span style="color: red">"</span> <span style="color: blue">/</span><span style="color: blue">></span> </li><li>        <span style="color: #00008B;"><!--<span style="color: #00008B;"></span> Burada arama motoruna, sayfanın Türkçe'ye çevrilmiş bir versiyonunun varlığını ve  yolu ile birlikte olduğunu bildirdim. <span style="color: #00008B;">--></span></span></li><li>        <span style="color: blue"><link</span> <span style="color: red">rel=</span><span style="color: red">"</span>alternate<span style="color: red">"</span> <span style="color: red">hreflang=</span><span style="color: red">"</span>tr<span style="color: red">"</span> <span style="color: red">href=</span><span style="color: red">"</span>.<span style="color: blue">/</span>tr-k-html.html<span style="color: red">"</span> <span style="color: blue">/</span><span style="color: blue">></span> </li><li>        <span style="color: #00008B;"><!--<span style="color: #00008B;"></span> Burada arama motoruna, sayfanın İngilizce'ya çevrilmiş bir versiyonunun varlığını ve  yolu ile birlikte olduğunu bildirdim. <span style="color: #00008B;">--></span></span></li><li>        <span style="color: blue"><link</span> <span style="color: red">rel=</span><span style="color: red">"</span>alternate<span style="color: red">"</span> <span style="color: red">hreflang=</span><span style="color: red">"</span>en<span style="color: red">"</span> <span style="color: red">href=</span><span style="color: red">"</span>.<span style="color: blue">/</span>en-k-html.html<span style="color: red">"</span> <span style="color: blue">/</span><span style="color: blue">></span> </li><li>        <span style="color: #00008B;"><!--<span style="color: #00008B;"></span> Burada arama motoruna, sayfanın Japonca'ya çevrilmiş bir versiyonunun varlığını ve  yolu ile birlikte olduğunu bildirdim. <span style="color: #00008B;">--></span></span></li><li>        <span style="color: blue"><link</span> <span style="color: red">rel=</span><span style="color: red">"</span>alternate<span style="color: red">"</span> <span style="color: red">hreflang=</span><span style="color: red">"</span>jp<span style="color: red">"</span> <span style="color: red">href=</span><span style="color: red">"</span>.<span style="color: blue">/</span>jp-k-html.html<span style="color: red">"</span> <span style="color: blue">/</span><span style="color: blue">></span> </li><li></li><li>        <span style="color: #00008B;"><!--<span style="color: #00008B;"></span> Arapça sayfa başlığı <span style="color: #00008B;">--></span></span></li><li>        <span style="color: blue"><title</span><span style="color: blue">></span>HTML تعلم<span style="color: blue"></h2</span><span style="color: blue">></span></li><li>    <span style="color: blue"></head</span><span style="color: blue">></span></li><li>    <span style="color: blue"><body</span><span style="color: blue">></span></li><li>        。。。</li><li>    <span style="color: blue"></body</span><span style="color: blue">></span></li><li><span style="color: blue"></html</span><span style="color: blue">></span></li></ul></pre>
1862.  
1863. <div class="parent-links">
1864.  <a
1865.    class="btn btn-primary"
1866.    href="https://www.k-html.com/2022/09/html-ulke-kodlar.html"
1867.  >
1868. <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
1869.    önceki ders
1870.  </a>
1871.  
1872.  <a class="btn btn-primary" href="https://www.k-html.com/2023/03/html-dilin-tum-etiketleri-ve-ozellikleri.html">
1873.    sonraki ders
1874.    <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
1875.  </a>
1876. </div>
1877. </content><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/154890834627296298'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/154890834627296298'/><link rel='alternate' type='text/html' href='https://www.k-html.com/2022/10/html-farkl-dillerde-sayfalar.html' title='HTML Farklı Dillerde Sayfalar'/><author><name>HTML öğren</name><uri>http://www.blogger.com/profile/05938401370972816509</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB9hVaVznt_p0FHumsq5E1ns0HFhwUsz5N8PDjeIc1oE4O70yakyUZqpJJiZyKolfcNdZlaOrykdeVaT9wGLi4Gp6Ko2vw9JCv-r2AQBF1JjXNu_09kuRKvXx-7fys1Hw/s113/html.jpg'/></author></entry><entry><id>tag:blogger.com,1999:blog-624213398567285603.post-1064837399323633438</id><published>2022-09-22T23:55:00.007+03:00</published><updated>2023-05-07T04:14:13.361+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="html"/><category scheme="http://www.blogger.com/atom/ns#" term="lang"/><category scheme="http://www.blogger.com/atom/ns#" term="Ülke Kodları"/><title type='text'>HTML Ülke Kodları</title><content type='html'>&lt;div class=&quot;parent-links&quot;&gt;
1878.  <a
1879.    class="btn btn-primary"
1880.    href="https://www.k-html.com/2022/09/html-dil-kodlar.html"
1881.  >
1882.    <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
1883.    önceki ders
1884.  </a>
1885.  
1886.  <a
1887.    class="btn btn-primary"
1888.    href="https://www.k-html.com/2022/10/html-farkl-dillerde-sayfalar.html"
1889.  >
1890.    sonraki ders
1891.    <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
1892.  </a>
1893. </div>
1894. <details open="">
1895.  <summary style="text-align: left;">Sayfa içeriği</summary>
1896.  <ul class="postcontent">
1897.    <li>
1898.      <b>›</b>
1899.      <a href="https://www.k-html.com/2022/09/html-ulke-kodlar.html#sdue"
1900.        ><strong>Sayfa dilinin ülkesini seçmek</strong></a
1901.      >
1902.    </li>
1903.    <li>
1904.      <b>›</b>
1905.      <a href="https://www.k-html.com/2022/09/html-ulke-kodlar.html#ubikk"
1906.        ><strong>Ülkeleri belirtmek için kullanılan karakterler</strong></a
1907.      >
1908.    </li>
1909.  </ul>
1910. </details>
1911. <hr class="hrkk" />
1912. <h2 id="sdue">Sayfa dilinin ülkesini seçmek</h2>
1913. <p>
1914.  Bir önceki dersimizde sayfanın dilini belirlemek için kullanılan sembolleri
1915.  öğrendik. Bu derste ülke belirlemek için önceki sembollere eklenebilecek diğer
1916.  sembolleri de öğreneceğiz. Mesela, sayfa dilinin İngilizce olduğu ve özellikle
1917.  Birleşik Krallığın lehçesine bağlı olduğu belirlenebilir.
1918. </p>
1919. <p>
1920.  Dolayısıyla dilin ülkesinin belirtilmesi bu dili kullanan ülkenin lehçesini
1921.  belirtmek amacındadır ve bu konu da dilin kendisinin belirlenmesinde olduğu
1922.  gibi isteğe bağlıdır.
1923. </p>
1924.  
1925. <p>
1926.  Aşağıdaki örnekte, tarayıcıya sayfa içeriğinin ABD İngilizcesi olduğunu
1927.  bildirdim.
1928. </p>
1929. <blockquote>
1930.  <span>Önemli Uyar</span>: Dil kodları küçük harf, ülke kodları büyük harf
1931.  olmalıdır.
1932.  <br />
1933.  <span>Bilgi</span>: <span>en-US</span> iki bölüme ayrılmıştır; burada
1934.  <span>"en"</span> İngilizce dili ve <span>"US"</span> Birleşik Devletler
1935.  lehçesi anlamına gelir.
1936. </blockquote>
1937. <pre
1938.  class="code"
1939. ><ul class="ucode"><li><span style="color: grey;"><!DOCTYPE html></span></li><li><span style="color: blue;"><html</span> <span style="color: red;">lang=</span><span style="color: red;">"</span>en-US<span style="color: red;">"</span><span style="color: blue;">></span></li><li>    <span style="color: blue;"><body</span><span style="color: blue;">></span></li><li>        <span style="color: blue;"><p</span><span style="color: blue;">></span>The largest city in the US is New York City, with over 8.5 million residents.<span style="color: blue;"></p</span><span style="color: blue;">></span></li><li>    <span style="color: blue;"></body</span><span style="color: blue;">></span></li><li><span style="color: blue;"></html</span><span style="color: blue;">></span></li></ul></pre>
1940. <a
1941.  class="elifnur"
1942.  href="https://code.k-html.com/kodlar/sdue.html"
1943.  target="_blank"
1944.  >kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
1945. <br />
1946. <br />
1947. <p>
1948.  Aşağıdaki örnekte tarayıcıya ülkenin Türkiye olduğunu ve sayfanın dilinin
1949.  Türkçe olduğunu bildirdim.
1950. </p>
1951. <blockquote>
1952.  <span>Önemli Uyar</span>: Dil kodları küçük harf, ülke kodları büyük harf
1953.  olmalıdır.
1954.  <br />
1955.  <span>Bilgi</span>: <span>tr-TR</span> iki bölüme ayrılmıştır; burada
1956.  <span>"tr"</span> Türkçe dili ve <span>"TR"</span> Türkiye lehçesi anlamına
1957.  gelir.
1958. </blockquote>
1959.  
1960. <pre
1961.  class="code"
1962. ><ul class="ucode"><li><span style="color: grey;"><!DOCTYPE html></span></li><li><span style="color: blue;"><html</span> <span style="color: red;">lang=</span><span style="color: red;">"</span>tr-TR<span style="color: red;">"</span><span style="color: blue;">></span></li><li>    <span style="color: blue;"><body</span><span style="color: blue;">></span></li><li>        <span style="color: blue;"><p</span><span style="color: blue;">></span>Nemrut Dağı, Türkiye'nin Adıyaman ilinde yer alan 2.150 metre yüksekliğinde bir dağdır.<span style="color: blue;"></p</span><span style="color: blue;">></span></li><li>    <span style="color: blue;"></body</span><span style="color: blue;">></span></li><li><span style="color: blue;"></html</span><span style="color: blue;">></span></li></ul></pre>
1963. <a
1964.  class="elifnur"
1965.  href="https://code.k-html.com/kodlar/sdue2.html"
1966.  target="_blank"
1967.  >kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
1968. <hr />
1969. <h2 id="ubikk">Ülkeleri belirtmek için kullanılan karakterler</h2>
1970. <p>
1971.  Genel olarak, her ülkenin kendisini simgeleyen iki harfi vardır ve bu harfler
1972.  kendisine tahsis edilmiş <span>ISO 639-1</span> küresel standart sistemi temel
1973.  alınarak geliştirilmiştir.
1974. </p>
1975. <p>Aşağıdaki tabloda her ülkeye atanan harflerden bahsettim.</p>
1976. <table class="table">
1977.  <thead>
1978.    <tr>
1979.      <th>No</th>
1980.      <th>Ülke</th>
1981.      <th>Ülke kodu</th>
1982.    </tr>
1983.  </thead>
1984.  <tbody>
1985.    <tr>
1986.      <td data-label="No">1</td>
1987.      <td data-label="Ülke">Türkiye</td>
1988.      <td data-label="Ülke kodu">TR</td>
1989.    </tr>
1990.    <tr>
1991.      <td data-label="No">2</td>
1992.      <td data-label="Ülke">Afganistan</td>
1993.      <td data-label="Ülke kodu">af</td>
1994.    </tr>
1995.    <tr>
1996.      <td data-label="No">3</td>
1997.      <td data-label="Ülke">Arnavutluk</td>
1998.      <td data-label="Ülke kodu">AL</td>
1999.    </tr>
2000.    <tr>
2001.      <td data-label="No">4</td>
2002.      <td data-label="Ülke">Cezayir</td>
2003.      <td data-label="Ülke kodu">DZ</td>
2004.    </tr>
2005.    <tr>
2006.      <td data-label="No">5</td>
2007.      <td data-label="Ülke">Amerikan Samoası</td>
2008.      <td data-label="Ülke kodu">AS</td>
2009.    </tr>
2010.    <tr>
2011.      <td data-label="No">6</td>
2012.      <td data-label="Ülke">Andora</td>
2013.      <td data-label="Ülke kodu">AD</td>
2014.    </tr>
2015.    <tr>
2016.      <td data-label="No">7</td>
2017.      <td data-label="Ülke">Angola</td>
2018.      <td data-label="Ülke kodu">AO</td>
2019.    </tr>
2020.    <tr>
2021.      <td data-label="No">8</td>
2022.      <td data-label="Ülke">Antarktika</td>
2023.      <td data-label="Ülke kodu">AQ</td>
2024.    </tr>
2025.    <tr>
2026.      <td data-label="No">9</td>
2027.      <td data-label="Ülke">Antigua ve Barbuda</td>
2028.      <td data-label="Ülke kodu">AG</td>
2029.    </tr>
2030.    <tr>
2031.      <td data-label="No">10</td>
2032.      <td data-label="Ülke">Arjantin</td>
2033.      <td data-label="Ülke kodu">AR</td>
2034.    </tr>
2035.    <tr>
2036.      <td data-label="No">11</td>
2037.      <td data-label="Ülke">Ermenistan</td>
2038.      <td data-label="Ülke kodu">AM</td>
2039.    </tr>
2040.    <tr>
2041.      <td data-label="No">12</td>
2042.      <td data-label="Ülke">Aruba</td>
2043.      <td data-label="Ülke kodu">AW</td>
2044.    </tr>
2045.    <tr>
2046.      <td data-label="No">13</td>
2047.      <td data-label="Ülke">Avustralya</td>
2048.      <td data-label="Ülke kodu">AU</td>
2049.    </tr>
2050.    <tr>
2051.      <td data-label="No">14</td>
2052.      <td data-label="Ülke">Avusturya</td>
2053.      <td data-label="Ülke kodu">AT</td>
2054.    </tr>
2055.    <tr>
2056.      <td data-label="No">15</td>
2057.      <td data-label="Ülke">Azerbaycan</td>
2058.      <td data-label="Ülke kodu">AZ</td>
2059.    </tr>
2060.    <tr>
2061.      <td data-label="No">16</td>
2062.      <td data-label="Ülke">Bahamalar</td>
2063.      <td data-label="Ülke kodu">BS</td>
2064.    </tr>
2065.    <tr>
2066.      <td data-label="No">17</td>
2067.      <td data-label="Ülke">Bahreyn</td>
2068.      <td data-label="Ülke kodu">BH</td>
2069.    </tr>
2070.    <tr>
2071.      <td data-label="No">18</td>
2072.      <td data-label="Ülke">Bangladeş</td>
2073.      <td data-label="Ülke kodu">BD</td>
2074.    </tr>
2075.    <tr>
2076.      <td data-label="No">19</td>
2077.      <td data-label="Ülke">Barbados</td>
2078.      <td data-label="Ülke kodu">BB</td>
2079.    </tr>
2080.    <tr>
2081.      <td data-label="No">20</td>
2082.      <td data-label="Ülke">Belarus</td>
2083.      <td data-label="Ülke kodu">BY</td>
2084.    </tr>
2085.    <tr>
2086.      <td data-label="No">21</td>
2087.      <td data-label="Ülke">Belçika</td>
2088.      <td data-label="Ülke kodu">BE</td>
2089.    </tr>
2090.    <tr>
2091.      <td data-label="No">22</td>
2092.      <td data-label="Ülke">Belize</td>
2093.      <td data-label="Ülke kodu">BZ</td>
2094.    </tr>
2095.    <tr>
2096.      <td data-label="No">23</td>
2097.      <td data-label="Ülke">Benin Cumhuriyeti</td>
2098.      <td data-label="Ülke kodu">BJ</td>
2099.    </tr>
2100.    <tr>
2101.      <td data-label="No">24</td>
2102.      <td data-label="Ülke">Bermuda</td>
2103.      <td data-label="Ülke kodu">BM</td>
2104.    </tr>
2105.    <tr>
2106.      <td data-label="No">25</td>
2107.      <td data-label="Ülke">Butan</td>
2108.      <td data-label="Ülke kodu">BT</td>
2109.    </tr>
2110.    <tr>
2111.      <td data-label="No">26</td>
2112.      <td data-label="Ülke">Bolivya</td>
2113.      <td data-label="Ülke kodu">BO</td>
2114.    </tr>
2115.    <tr>
2116.      <td data-label="No">27</td>
2117.      <td data-label="Ülke">Bosna Hersek</td>
2118.      <td data-label="Ülke kodu">BA</td>
2119.    </tr>
2120.    <tr>
2121.      <td data-label="No">28</td>
2122.      <td data-label="Ülke">Botsvana</td>
2123.      <td data-label="Ülke kodu">BW</td>
2124.    </tr>
2125.    <tr>
2126.      <td data-label="No">29</td>
2127.      <td data-label="Ülke">Bouvet Adası</td>
2128.      <td data-label="Ülke kodu">BV</td>
2129.    </tr>
2130.    <tr>
2131.      <td data-label="No">30</td>
2132.      <td data-label="Ülke">Brezilya</td>
2133.      <td data-label="Ülke kodu">BR</td>
2134.    </tr>
2135.    <tr>
2136.      <td data-label="No">31</td>
2137.      <td data-label="Ülke">Britanya Hint Okyanusu Toprakları</td>
2138.      <td data-label="Ülke kodu">IO</td>
2139.    </tr>
2140.    <tr>
2141.      <td data-label="No">32</td>
2142.      <td data-label="Ülke">Brunei Sultanlığı</td>
2143.      <td data-label="Ülke kodu">BN</td>
2144.    </tr>
2145.    <tr>
2146.      <td data-label="No">33</td>
2147.      <td data-label="Ülke">Bulgaristan</td>
2148.      <td data-label="Ülke kodu">BG</td>
2149.    </tr>
2150.    <tr>
2151.      <td data-label="No">34</td>
2152.      <td data-label="Ülke">Burkina Faso</td>
2153.      <td data-label="Ülke kodu">BF</td>
2154.    </tr>
2155.    <tr>
2156.      <td data-label="No">35</td>
2157.      <td data-label="Ülke">Burundi</td>
2158.      <td data-label="Ülke kodu">BI</td>
2159.    </tr>
2160.    <tr>
2161.      <td data-label="No">36</td>
2162.      <td data-label="Ülke">Kamboçya</td>
2163.      <td data-label="Ülke kodu">KH</td>
2164.    </tr>
2165.    <tr>
2166.      <td data-label="No">37</td>
2167.      <td data-label="Ülke">Kamerun</td>
2168.      <td data-label="Ülke kodu">CM</td>
2169.    </tr>
2170.    <tr>
2171.      <td data-label="No">38</td>
2172.      <td data-label="Ülke">Kanada</td>
2173.      <td data-label="Ülke kodu">CA</td>
2174.    </tr>
2175.    <tr>
2176.      <td data-label="No">39</td>
2177.      <td data-label="Ülke">Yeşil Burun Adaları</td>
2178.      <td data-label="Ülke kodu">CV</td>
2179.    </tr>
2180.    <tr>
2181.      <td data-label="No">40</td>
2182.      <td data-label="Ülke">Cayman Adaları</td>
2183.      <td data-label="Ülke kodu">KY</td>
2184.    </tr>
2185.    <tr>
2186.      <td data-label="No">41</td>
2187.      <td data-label="Ülke">Orta Afrika Cumhuriyeti</td>
2188.      <td data-label="Ülke kodu">CF</td>
2189.    </tr>
2190.    <tr>
2191.      <td data-label="No">42</td>
2192.      <td data-label="Ülke">Çad</td>
2193.      <td data-label="Ülke kodu">TD</td>
2194.    </tr>
2195.    <tr>
2196.      <td data-label="No">43</td>
2197.      <td data-label="Ülke">Şili</td>
2198.      <td data-label="Ülke kodu">CL</td>
2199.    </tr>
2200.    <tr>
2201.      <td data-label="No">44</td>
2202.      <td data-label="Ülke">Çin</td>
2203.      <td data-label="Ülke kodu">CN</td>
2204.    </tr>
2205.    <tr>
2206.      <td data-label="No">45</td>
2207.      <td data-label="Ülke">Noel Adası</td>
2208.      <td data-label="Ülke kodu">CX</td>
2209.    </tr>
2210.    <tr>
2211.      <td data-label="No">46</td>
2212.      <td data-label="Ülke">Cocos Adaları</td>
2213.      <td data-label="Ülke kodu">CC</td>
2214.    </tr>
2215.    <tr>
2216.      <td data-label="No">47</td>
2217.      <td data-label="Ülke">Kolombiya</td>
2218.      <td data-label="Ülke kodu">CO</td>
2219.    </tr>
2220.    <tr>
2221.      <td data-label="No">48</td>
2222.      <td data-label="Ülke">Komorlar</td>
2223.      <td data-label="Ülke kodu">KM</td>
2224.    </tr>
2225.    <tr>
2226.      <td data-label="No">49</td>
2227.      <td data-label="Ülke">Kongo</td>
2228.      <td data-label="Ülke kodu">CG</td>
2229.    </tr>
2230.    <tr>
2231.      <td data-label="No">50</td>
2232.      <td data-label="Ülke">Demokratik Kongo Cumhuriyeti</td>
2233.      <td data-label="Ülke kodu">CD</td>
2234.    </tr>
2235.    <tr>
2236.      <td data-label="No">51</td>
2237.      <td data-label="Ülke">Cook Adaları</td>
2238.      <td data-label="Ülke kodu">CK</td>
2239.    </tr>
2240.    <tr>
2241.      <td data-label="No">52</td>
2242.      <td data-label="Ülke">Kosta Rika</td>
2243.      <td data-label="Ülke kodu">CR</td>
2244.    </tr>
2245.    <tr>
2246.      <td data-label="No">53</td>
2247.      <td data-label="Ülke">Fildişi Sahili</td>
2248.      <td data-label="Ülke kodu">CI</td>
2249.    </tr>
2250.    <tr>
2251.      <td data-label="No">54</td>
2252.      <td data-label="Ülke">Hırvatistan</td>
2253.      <td data-label="Ülke kodu">HR</td>
2254.    </tr>
2255.    <tr>
2256.      <td data-label="No">55</td>
2257.      <td data-label="Ülke">Küba</td>
2258.      <td data-label="Ülke kodu">CU</td>
2259.    </tr>
2260.    <tr>
2261.      <td data-label="No">56</td>
2262.      <td data-label="Ülke">Kıbrıs</td>
2263.      <td data-label="Ülke kodu">CY</td>
2264.    </tr>
2265.    <tr>
2266.      <td data-label="No">57</td>
2267.      <td data-label="Ülke">Çek Cumhuriyeti</td>
2268.      <td data-label="Ülke kodu">CZ</td>
2269.    </tr>
2270.    <tr>
2271.      <td data-label="No">58</td>
2272.      <td data-label="Ülke">Danimarka</td>
2273.      <td data-label="Ülke kodu">DK</td>
2274.    </tr>
2275.    <tr>
2276.      <td data-label="No">59</td>
2277.      <td data-label="Ülke">Cibuti</td>
2278.      <td data-label="Ülke kodu">DJ</td>
2279.    </tr>
2280.    <tr>
2281.      <td data-label="No">60</td>
2282.      <td data-label="Ülke">Dominika</td>
2283.      <td data-label="Ülke kodu">DM</td>
2284.    </tr>
2285.    <tr>
2286.      <td data-label="No">61</td>
2287.      <td data-label="Ülke">Dominik Cumhuriyeti</td>
2288.      <td data-label="Ülke kodu">DO</td>
2289.    </tr>
2290.    <tr>
2291.      <td data-label="No">62</td>
2292.      <td data-label="Ülke">Ekvador</td>
2293.      <td data-label="Ülke kodu">EC</td>
2294.    </tr>
2295.    <tr>
2296.      <td data-label="No">63</td>
2297.      <td data-label="Ülke">Mısır</td>
2298.      <td data-label="Ülke kodu">EG</td>
2299.    </tr>
2300.    <tr>
2301.      <td data-label="No">64</td>
2302.      <td data-label="Ülke">El Salvador</td>
2303.      <td data-label="Ülke kodu">SV</td>
2304.    </tr>
2305.    <tr>
2306.      <td data-label="No">65</td>
2307.      <td data-label="Ülke">Ekvator Ginesi</td>
2308.      <td data-label="Ülke kodu">GQ</td>
2309.    </tr>
2310.    <tr>
2311.      <td data-label="No">66</td>
2312.      <td data-label="Ülke">Eritre</td>
2313.      <td data-label="Ülke kodu">ER</td>
2314.    </tr>
2315.    <tr>
2316.      <td data-label="No">67</td>
2317.      <td data-label="Ülke">Estonya</td>
2318.      <td data-label="Ülke kodu">EE</td>
2319.    </tr>
2320.    <tr>
2321.      <td data-label="No">68</td>
2322.      <td data-label="Ülke">Etiyopya</td>
2323.      <td data-label="Ülke kodu">ET</td>
2324.    </tr>
2325.    <tr>
2326.      <td data-label="No">69</td>
2327.      <td data-label="Ülke">Falkland adalarıs</td>
2328.      <td data-label="Ülke kodu">FK</td>
2329.    </tr>
2330.    <tr>
2331.      <td data-label="No">70</td>
2332.      <td data-label="Ülke">Faroe Adaları</td>
2333.      <td data-label="Ülke kodu">FO</td>
2334.    </tr>
2335.    <tr>
2336.      <td data-label="No">71</td>
2337.      <td data-label="Ülke">Fiji</td>
2338.      <td data-label="Ülke kodu">FJ</td>
2339.    </tr>
2340.    <tr>
2341.      <td data-label="No">72</td>
2342.      <td data-label="Ülke">Finlandiya</td>
2343.      <td data-label="Ülke kodu">FI</td>
2344.    </tr>
2345.    <tr>
2346.      <td data-label="No">73</td>
2347.      <td data-label="Ülke">Fransa</td>
2348.      <td data-label="Ülke kodu">FR</td>
2349.    </tr>
2350.    <tr>
2351.      <td data-label="No">74</td>
2352.      <td data-label="Ülke">Fransız Guyanası</td>
2353.      <td data-label="Ülke kodu">GF</td>
2354.    </tr>
2355.    <tr>
2356.      <td data-label="No">75</td>
2357.      <td data-label="Ülke">Fransız Polinezyası</td>
2358.      <td data-label="Ülke kodu">PF</td>
2359.    </tr>
2360.    <tr>
2361.      <td data-label="No">76</td>
2362.      <td data-label="Ülke">Fransız Güney Toprakları</td>
2363.      <td data-label="Ülke kodu">TF</td>
2364.    </tr>
2365.    <tr>
2366.      <td data-label="No">77</td>
2367.      <td data-label="Ülke">Gabon</td>
2368.      <td data-label="Ülke kodu">GA</td>
2369.    </tr>
2370.    <tr>
2371.      <td data-label="No">78</td>
2372.      <td data-label="Ülke">Gambiya</td>
2373.      <td data-label="Ülke kodu">GM</td>
2374.    </tr>
2375.    <tr>
2376.      <td data-label="No">79</td>
2377.      <td data-label="Ülke">Gürcistan</td>
2378.      <td data-label="Ülke kodu">GE</td>
2379.    </tr>
2380.    <tr>
2381.      <td data-label="No">80</td>
2382.      <td data-label="Ülke">Almanya</td>
2383.      <td data-label="Ülke kodu">DE</td>
2384.    </tr>
2385.    <tr>
2386.      <td data-label="No">81</td>
2387.      <td data-label="Ülke">Gana</td>
2388.      <td data-label="Ülke kodu">GH</td>
2389.    </tr>
2390.    <tr>
2391.      <td data-label="No">82</td>
2392.      <td data-label="Ülke">Cebelitarık</td>
2393.      <td data-label="Ülke kodu">GI</td>
2394.    </tr>
2395.    <tr>
2396.      <td data-label="No">83</td>
2397.      <td data-label="Ülke">Yunanistan</td>
2398.      <td data-label="Ülke kodu">GR</td>
2399.    </tr>
2400.    <tr>
2401.      <td data-label="No">84</td>
2402.      <td data-label="Ülke">Grönlan</td>
2403.      <td data-label="Ülke kodu">GL</td>
2404.    </tr>
2405.    <tr>
2406.      <td data-label="No">85</td>
2407.      <td data-label="Ülke">Grenada</td>
2408.      <td data-label="Ülke kodu">GD</td>
2409.    </tr>
2410.    <tr>
2411.      <td data-label="No">86</td>
2412.      <td data-label="Ülke">Guadelup</td>
2413.      <td data-label="Ülke kodu">GP</td>
2414.    </tr>
2415.    <tr>
2416.      <td data-label="No">87</td>
2417.      <td data-label="Ülke">Guam</td>
2418.      <td data-label="Ülke kodu">GU</td>
2419.    </tr>
2420.    <tr>
2421.      <td data-label="No">88</td>
2422.      <td data-label="Ülke">Guatemala</td>
2423.      <td data-label="Ülke kodu">GT</td>
2424.    </tr>
2425.    <tr>
2426.      <td data-label="No">89</td>
2427.      <td data-label="Ülke">Gine</td>
2428.      <td data-label="Ülke kodu">GN</td>
2429.    </tr>
2430.    <tr>
2431.      <td data-label="No">90</td>
2432.      <td data-label="Ülke">Gine-Bissau</td>
2433.      <td data-label="Ülke kodu">GW</td>
2434.    </tr>
2435.    <tr>
2436.      <td data-label="No">91</td>
2437.      <td data-label="Ülke">Guyana</td>
2438.      <td data-label="Ülke kodu">GY</td>
2439.    </tr>
2440.    <tr>
2441.      <td data-label="No">92</td>
2442.      <td data-label="Ülke">Haiti</td>
2443.      <td data-label="Ülke kodu">HT</td>
2444.    </tr>
2445.    <tr>
2446.      <td data-label="No">93</td>
2447.      <td data-label="Ülke">Heard Adası ve Mcdonald Adaları</td>
2448.      <td data-label="Ülke kodu">HM</td>
2449.    </tr>
2450.    <tr>
2451.      <td data-label="No">94</td>
2452.      <td data-label="Ülke">Honduras</td>
2453.      <td data-label="Ülke kodu">HN</td>
2454.    </tr>
2455.    <tr>
2456.      <td data-label="No">95</td>
2457.      <td data-label="Ülke">Hong Kong</td>
2458.      <td data-label="Ülke kodu">HK</td>
2459.    </tr>
2460.    <tr>
2461.      <td data-label="No">96</td>
2462.      <td data-label="Ülke">Macaristan</td>
2463.      <td data-label="Ülke kodu">HU</td>
2464.    </tr>
2465.    <tr>
2466.      <td data-label="No">97</td>
2467.      <td data-label="Ülke">İzlanda</td>
2468.      <td data-label="Ülke kodu">IS</td>
2469.    </tr>
2470.    <tr>
2471.      <td data-label="No">98</td>
2472.      <td data-label="Ülke">Hindistan</td>
2473.      <td data-label="Ülke kodu">IN</td>
2474.    </tr>
2475.    <tr>
2476.      <td data-label="No">99</td>
2477.      <td data-label="Ülke">Endonezya</td>
2478.      <td data-label="Ülke kodu">ID</td>
2479.    </tr>
2480.    <tr>
2481.      <td data-label="No">100</td>
2482.      <td data-label="Ülke">İran İslam Cumhuriyeti</td>
2483.      <td data-label="Ülke kodu">IR</td>
2484.    </tr>
2485.    <tr>
2486.      <td data-label="No">101</td>
2487.      <td data-label="Ülke">Irak</td>
2488.      <td data-label="Ülke kodu">IQ</td>
2489.    </tr>
2490.    <tr>
2491.      <td data-label="No">102</td>
2492.      <td data-label="Ülke">İrlanda</td>
2493.      <td data-label="Ülke kodu">IE</td>
2494.    </tr>
2495.    <tr>
2496.      <td data-label="No">103</td>
2497.      <td data-label="Ülke">İsrail</td>
2498.      <td data-label="Ülke kodu">IL</td>
2499.    </tr>
2500.    <tr>
2501.      <td data-label="No">104</td>
2502.      <td data-label="Ülke">İtalya</td>
2503.      <td data-label="Ülke kodu">IT</td>
2504.    </tr>
2505.    <tr>
2506.      <td data-label="No">105</td>
2507.      <td data-label="Ülke">Jamaika</td>
2508.      <td data-label="Ülke kodu">JM</td>
2509.    </tr>
2510.    <tr>
2511.      <td data-label="No">106</td>
2512.      <td data-label="Ülke">Japonya</td>
2513.      <td data-label="Ülke kodu">JP</td>
2514.    </tr>
2515.    <tr>
2516.      <td data-label="No">107</td>
2517.      <td data-label="Ülke">Ürdün</td>
2518.      <td data-label="Ülke kodu">JO</td>
2519.    </tr>
2520.    <tr>
2521.      <td data-label="No">108</td>
2522.      <td data-label="Ülke">Kazakistan</td>
2523.      <td data-label="Ülke kodu">KZ</td>
2524.    </tr>
2525.    <tr>
2526.      <td data-label="No">109</td>
2527.      <td data-label="Ülke">Kenya</td>
2528.      <td data-label="Ülke kodu">KE</td>
2529.    </tr>
2530.    <tr>
2531.      <td data-label="No">110</td>
2532.      <td data-label="Ülke">Kiribati</td>
2533.      <td data-label="Ülke kodu">KI</td>
2534.    </tr>
2535.    <tr>
2536.      <td data-label="No">111</td>
2537.      <td data-label="Ülke">Kore Demokratik Halk Cumhuriyeti</td>
2538.      <td data-label="Ülke kodu">KP</td>
2539.    </tr>
2540.    <tr>
2541.      <td data-label="No">112</td>
2542.      <td data-label="Ülke">Kore Cumhuriyeti</td>
2543.      <td data-label="Ülke kodu">KR</td>
2544.    </tr>
2545.    <tr>
2546.      <td data-label="No">113</td>
2547.      <td data-label="Ülke">Kuveyt</td>
2548.      <td data-label="Ülke kodu">KW</td>
2549.    </tr>
2550.    <tr>
2551.      <td data-label="No">114</td>
2552.      <td data-label="Ülke">Kırgızistan</td>
2553.      <td data-label="Ülke kodu">KG</td>
2554.    </tr>
2555.    <tr>
2556.      <td data-label="No">115</td>
2557.      <td data-label="Ülke">Laos Demokratik Halk Cumhuriyeti</td>
2558.      <td data-label="Ülke kodu">LA</td>
2559.    </tr>
2560.    <tr>
2561.      <td data-label="No">116</td>
2562.      <td data-label="Ülke">Letonya</td>
2563.      <td data-label="Ülke kodu">LV</td>
2564.    </tr>
2565.    <tr>
2566.      <td data-label="No">117</td>
2567.      <td data-label="Ülke">Lübnan</td>
2568.      <td data-label="Ülke kodu">LB</td>
2569.    </tr>
2570.    <tr>
2571.      <td data-label="No">118</td>
2572.      <td data-label="Ülke">Lesoto</td>
2573.      <td data-label="Ülke kodu">LS</td>
2574.    </tr>
2575.    <tr>
2576.      <td data-label="No">119</td>
2577.      <td data-label="Ülke">Liberya</td>
2578.      <td data-label="Ülke kodu">LR</td>
2579.    </tr>
2580.    <tr>
2581.      <td data-label="No">120</td>
2582.      <td data-label="Ülke">Libya</td>
2583.      <td data-label="Ülke kodu">LY</td>
2584.    </tr>
2585.    <tr>
2586.      <td data-label="No">121</td>
2587.      <td data-label="Ülke">Lihtenştayn</td>
2588.      <td data-label="Ülke kodu">LI</td>
2589.    </tr>
2590.    <tr>
2591.      <td data-label="No">122</td>
2592.      <td data-label="Ülke">Litvanya</td>
2593.      <td data-label="Ülke kodu">LT</td>
2594.    </tr>
2595.    <tr>
2596.      <td data-label="No">123</td>
2597.      <td data-label="Ülke">Lüksemburg</td>
2598.      <td data-label="Ülke kodu">LU</td>
2599.    </tr>
2600.    <tr>
2601.      <td data-label="No">124</td>
2602.      <td data-label="Ülke">Makao</td>
2603.      <td data-label="Ülke kodu">MO</td>
2604.    </tr>
2605.    <tr>
2606.      <td data-label="No">125</td>
2607.      <td data-label="Ülke">Makedonya, Eski Yugoslav Cumhuriyeti</td>
2608.      <td data-label="Ülke kodu">MK</td>
2609.    </tr>
2610.    <tr>
2611.      <td data-label="No">126</td>
2612.      <td data-label="Ülke">Madagaskar</td>
2613.      <td data-label="Ülke kodu">MG</td>
2614.    </tr>
2615.    <tr>
2616.      <td data-label="No">127</td>
2617.      <td data-label="Ülke">Malawi</td>
2618.      <td data-label="Ülke kodu">MW</td>
2619.    </tr>
2620.    <tr>
2621.      <td data-label="No">128</td>
2622.      <td data-label="Ülke">Malezya</td>
2623.      <td data-label="Ülke kodu">MY</td>
2624.    </tr>
2625.    <tr>
2626.      <td data-label="No">129</td>
2627.      <td data-label="Ülke">Maldivler</td>
2628.      <td data-label="Ülke kodu">MV</td>
2629.    </tr>
2630.    <tr>
2631.      <td data-label="No">130</td>
2632.      <td data-label="Ülke">Mali</td>
2633.      <td data-label="Ülke kodu">ML</td>
2634.    </tr>
2635.    <tr>
2636.      <td data-label="No">131</td>
2637.      <td data-label="Ülke">Malta</td>
2638.      <td data-label="Ülke kodu">MT</td>
2639.    </tr>
2640.    <tr>
2641.      <td data-label="No">132</td>
2642.      <td data-label="Ülke">Marşal Adaları</td>
2643.      <td data-label="Ülke kodu">MH</td>
2644.    </tr>
2645.    <tr>
2646.      <td data-label="No">133</td>
2647.      <td data-label="Ülke">Martinik</td>
2648.      <td data-label="Ülke kodu">MQ</td>
2649.    </tr>
2650.    <tr>
2651.      <td data-label="No">134</td>
2652.      <td data-label="Ülke">Moritanya</td>
2653.      <td data-label="Ülke kodu">MR</td>
2654.    </tr>
2655.    <tr>
2656.      <td data-label="No">135</td>
2657.      <td data-label="Ülke">Mauritius</td>
2658.      <td data-label="Ülke kodu">MU</td>
2659.    </tr>
2660.    <tr>
2661.      <td data-label="No">136</td>
2662.      <td data-label="Ülke">mayo</td>
2663.      <td data-label="Ülke kodu">YT</td>
2664.    </tr>
2665.    <tr>
2666.      <td data-label="No">137</td>
2667.      <td data-label="Ülke">Meksika</td>
2668.      <td data-label="Ülke kodu">MX</td>
2669.    </tr>
2670.    <tr>
2671.      <td data-label="No">138</td>
2672.      <td data-label="Ülke">Mikronezya, Birleşik Devletler</td>
2673.      <td data-label="Ülke kodu">FM</td>
2674.    </tr>
2675.    <tr>
2676.      <td data-label="No">139</td>
2677.      <td data-label="Ülke">Moldova Cumhuriyeti</td>
2678.      <td data-label="Ülke kodu">MD</td>
2679.    </tr>
2680.    <tr>
2681.      <td data-label="No">140</td>
2682.      <td data-label="Ülke">Monako</td>
2683.      <td data-label="Ülke kodu">MC</td>
2684.    </tr>
2685.    <tr>
2686.      <td data-label="No">141</td>
2687.      <td data-label="Ülke">Moğolistan</td>
2688.      <td data-label="Ülke kodu">MN</td>
2689.    </tr>
2690.    <tr>
2691.      <td data-label="No">142</td>
2692.      <td data-label="Ülke">Karadağ</td>
2693.      <td data-label="Ülke kodu">ME</td>
2694.    </tr>
2695.    <tr>
2696.      <td data-label="No">143</td>
2697.      <td data-label="Ülke">Montserrat</td>
2698.      <td data-label="Ülke kodu">MS</td>
2699.    </tr>
2700.    <tr>
2701.      <td data-label="No">144</td>
2702.      <td data-label="Ülke">Fas (Morocco)</td>
2703.      <td data-label="Ülke kodu">MA</td>
2704.    </tr>
2705.    <tr>
2706.      <td data-label="No">145</td>
2707.      <td data-label="Ülke">Mozambik</td>
2708.      <td data-label="Ülke kodu">MZ</td>
2709.    </tr>
2710.    <tr>
2711.      <td data-label="No">146</td>
2712.      <td data-label="Ülke">Myanmar</td>
2713.      <td data-label="Ülke kodu">MM</td>
2714.    </tr>
2715.    <tr>
2716.      <td data-label="No">147</td>
2717.      <td data-label="Ülke">Namibya</td>
2718.      <td data-label="Ülke kodu">NA</td>
2719.    </tr>
2720.    <tr>
2721.      <td data-label="No">148</td>
2722.      <td data-label="Ülke">Nauru</td>
2723.      <td data-label="Ülke kodu">NR</td>
2724.    </tr>
2725.    <tr>
2726.      <td data-label="No">149</td>
2727.      <td data-label="Ülke">Nepal, Federal Demokratik Cumhuriyeti</td>
2728.      <td data-label="Ülke kodu">NP</td>
2729.    </tr>
2730.    <tr>
2731.      <td data-label="No">150</td>
2732.      <td data-label="Ülke">Hollanda</td>
2733.      <td data-label="Ülke kodu">NL</td>
2734.    </tr>
2735.    <tr>
2736.      <td data-label="No">151</td>
2737.      <td data-label="Ülke">Hollanda Antilleri</td>
2738.      <td data-label="Ülke kodu">AN</td>
2739.    </tr>
2740.    <tr>
2741.      <td data-label="No">152</td>
2742.      <td data-label="Ülke">Yeni Kaledonya</td>
2743.      <td data-label="Ülke kodu">NC</td>
2744.    </tr>
2745.    <tr>
2746.      <td data-label="No">153</td>
2747.      <td data-label="Ülke">Yeni Zelanda</td>
2748.      <td data-label="Ülke kodu">NZ</td>
2749.    </tr>
2750.    <tr>
2751.      <td data-label="No">154</td>
2752.      <td data-label="Ülke">Nikaragua</td>
2753.      <td data-label="Ülke kodu">NI</td>
2754.    </tr>
2755.    <tr>
2756.      <td data-label="No">155</td>
2757.      <td data-label="Ülke">Nijer</td>
2758.      <td data-label="Ülke kodu">NE</td>
2759.    </tr>
2760.    <tr>
2761.      <td data-label="No">156</td>
2762.      <td data-label="Ülke">Nijerya</td>
2763.      <td data-label="Ülke kodu">NG</td>
2764.    </tr>
2765.    <tr>
2766.      <td data-label="No">157</td>
2767.      <td data-label="Ülke">Niue</td>
2768.      <td data-label="Ülke kodu">NU</td>
2769.    </tr>
2770.    <tr>
2771.      <td data-label="No">158</td>
2772.      <td data-label="Ülke">Norfolk Adası</td>
2773.      <td data-label="Ülke kodu">NF</td>
2774.    </tr>
2775.    <tr>
2776.      <td data-label="No">159</td>
2777.      <td data-label="Ülke">Kuzey Mariana Adaları</td>
2778.      <td data-label="Ülke kodu">MP</td>
2779.    </tr>
2780.    <tr>
2781.      <td data-label="No">160</td>
2782.      <td data-label="Ülke">Norveç</td>
2783.      <td data-label="Ülke kodu">NO</td>
2784.    </tr>
2785.    <tr>
2786.      <td data-label="No">161</td>
2787.      <td data-label="Ülke">Umman</td>
2788.      <td data-label="Ülke kodu">OM</td>
2789.    </tr>
2790.    <tr>
2791.      <td data-label="No">162</td>
2792.      <td data-label="Ülke">Pakistan</td>
2793.      <td data-label="Ülke kodu">PK</td>
2794.    </tr>
2795.    <tr>
2796.      <td data-label="No">163</td>
2797.      <td data-label="Ülke">Palau</td>
2798.      <td data-label="Ülke kodu">PW</td>
2799.    </tr>
2800.    <tr>
2801.      <td data-label="No">164</td>
2802.      <td data-label="Ülke">Filistin</td>
2803.      <td data-label="Ülke kodu">PS</td>
2804.    </tr>
2805.    <tr>
2806.      <td data-label="No">165</td>
2807.      <td data-label="Ülke">Panama</td>
2808.      <td data-label="Ülke kodu">PA</td>
2809.    </tr>
2810.    <tr>
2811.      <td data-label="No">166</td>
2812.      <td data-label="Ülke">Papua Yeni Gine</td>
2813.      <td data-label="Ülke kodu">PG</td>
2814.    </tr>
2815.    <tr>
2816.      <td data-label="No">167</td>
2817.      <td data-label="Ülke">Paraguay</td>
2818.      <td data-label="Ülke kodu">PY</td>
2819.    </tr>
2820.    <tr>
2821.      <td data-label="No">168</td>
2822.      <td data-label="Ülke">Peru</td>
2823.      <td data-label="Ülke kodu">PE</td>
2824.    </tr>
2825.    <tr>
2826.      <td data-label="No">169</td>
2827.      <td data-label="Ülke">Filipinler</td>
2828.      <td data-label="Ülke kodu">PH</td>
2829.    </tr>
2830.    <tr>
2831.      <td data-label="No">170</td>
2832.      <td data-label="Ülke">Pitcairn</td>
2833.      <td data-label="Ülke kodu">PN</td>
2834.    </tr>
2835.    <tr>
2836.      <td data-label="No">171</td>
2837.      <td data-label="Ülke">Polonya</td>
2838.      <td data-label="Ülke kodu">PL</td>
2839.    </tr>
2840.    <tr>
2841.      <td data-label="No">172</td>
2842.      <td data-label="Ülke">Portekiz</td>
2843.      <td data-label="Ülke kodu">PT</td>
2844.    </tr>
2845.    <tr>
2846.      <td data-label="No">173</td>
2847.      <td data-label="Ülke">Porto Riko</td>
2848.      <td data-label="Ülke kodu">PR</td>
2849.    </tr>
2850.    <tr>
2851.      <td data-label="No">174</td>
2852.      <td data-label="Ülke">Katar</td>
2853.      <td data-label="Ülke kodu">QA</td>
2854.    </tr>
2855.    <tr>
2856.      <td data-label="No">175</td>
2857.      <td data-label="Ülke">Réunion</td>
2858.      <td data-label="Ülke kodu">RE</td>
2859.    </tr>
2860.    <tr>
2861.      <td data-label="No">176</td>
2862.      <td data-label="Ülke">Romanya</td>
2863.      <td data-label="Ülke kodu">RO</td>
2864.    </tr>
2865.    <tr>
2866.      <td data-label="No">177</td>
2867.      <td data-label="Ülke">Rusya Federasyonu</td>
2868.      <td data-label="Ülke kodu">RU</td>
2869.    </tr>
2870.    <tr>
2871.      <td data-label="No">178</td>
2872.      <td data-label="Ülke">Ruanda</td>
2873.      <td data-label="Ülke kodu">RW</td>
2874.    </tr>
2875.    <tr>
2876.      <td data-label="No">179</td>
2877.      <td data-label="Ülke">Aziz Helena</td>
2878.      <td data-label="Ülke kodu">SH</td>
2879.    </tr>
2880.    <tr>
2881.      <td data-label="No">180</td>
2882.      <td data-label="Ülke">Saint Kitts ve Nevis</td>
2883.      <td data-label="Ülke kodu">KN</td>
2884.    </tr>
2885.    <tr>
2886.      <td data-label="No">181</td>
2887.      <td data-label="Ülke">Aziz Lucia</td>
2888.      <td data-label="Ülke kodu">LC</td>
2889.    </tr>
2890.    <tr>
2891.      <td data-label="No">182</td>
2892.      <td data-label="Ülke">Aziz Pierre ve Miquelon</td>
2893.      <td data-label="Ülke kodu">PM</td>
2894.    </tr>
2895.    <tr>
2896.      <td data-label="No">183</td>
2897.      <td data-label="Ülke">Saint Vincent ve Grenadinler</td>
2898.      <td data-label="Ülke kodu">VC</td>
2899.    </tr>
2900.    <tr>
2901.      <td data-label="No">184</td>
2902.      <td data-label="Ülke">Samoa</td>
2903.      <td data-label="Ülke kodu">WS</td>
2904.    </tr>
2905.    <tr>
2906.      <td data-label="No">185</td>
2907.      <td data-label="Ülke">San Marino</td>
2908.      <td data-label="Ülke kodu">SM</td>
2909.    </tr>
2910.    <tr>
2911.      <td data-label="No">186</td>
2912.      <td data-label="Ülke">Sao Tome ve Principe</td>
2913.      <td data-label="Ülke kodu">ST</td>
2914.    </tr>
2915.    <tr>
2916.      <td data-label="No">187</td>
2917.      <td data-label="Ülke">Suudi Arabistan</td>
2918.      <td data-label="Ülke kodu">SA</td>
2919.    </tr>
2920.    <tr>
2921.      <td data-label="No">188</td>
2922.      <td data-label="Ülke">Senegal</td>
2923.      <td data-label="Ülke kodu">SN</td>
2924.    </tr>
2925.    <tr>
2926.      <td data-label="No">189</td>
2927.      <td data-label="Ülke">Sırbistan</td>
2928.      <td data-label="Ülke kodu">RS</td>
2929.    </tr>
2930.    <tr>
2931.      <td data-label="No">190</td>
2932.      <td data-label="Ülke">Seyşeller</td>
2933.      <td data-label="Ülke kodu">SC</td>
2934.    </tr>
2935.    <tr>
2936.      <td data-label="No">191</td>
2937.      <td data-label="Ülke">Sierra Leone</td>
2938.      <td data-label="Ülke kodu">SL</td>
2939.    </tr>
2940.    <tr>
2941.      <td data-label="No">192</td>
2942.      <td data-label="Ülke">Singapur</td>
2943.      <td data-label="Ülke kodu">SG</td>
2944.    </tr>
2945.    <tr>
2946.      <td data-label="No">193</td>
2947.      <td data-label="Ülke">Slovakya</td>
2948.      <td data-label="Ülke kodu">SK</td>
2949.    </tr>
2950.    <tr>
2951.      <td data-label="No">194</td>
2952.      <td data-label="Ülke">Slovenya</td>
2953.      <td data-label="Ülke kodu">SI</td>
2954.    </tr>
2955.    <tr>
2956.      <td data-label="No">195</td>
2957.      <td data-label="Ülke">Solomon Adaları</td>
2958.      <td data-label="Ülke kodu">SB</td>
2959.    </tr>
2960.    <tr>
2961.      <td data-label="No">196</td>
2962.      <td data-label="Ülke">Somali</td>
2963.      <td data-label="Ülke kodu">SO</td>
2964.    </tr>
2965.    <tr>
2966.      <td data-label="No">197</td>
2967.      <td data-label="Ülke">Güney Afrika</td>
2968.      <td data-label="Ülke kodu">ZA</td>
2969.    </tr>
2970.    <tr>
2971.      <td data-label="No">198</td>
2972.      <td data-label="Ülke">Güney Georgia ve Güney Sandwich Adaları</td>
2973.      <td data-label="Ülke kodu">GS</td>
2974.    </tr>
2975.    <tr>
2976.      <td data-label="No">199</td>
2977.      <td data-label="Ülke">Güney Sudan</td>
2978.      <td data-label="Ülke kodu">SS</td>
2979.    </tr>
2980.    <tr>
2981.      <td data-label="No">200</td>
2982.      <td data-label="Ülke">ispanya</td>
2983.      <td data-label="Ülke kodu">ES</td>
2984.    </tr>
2985.    <tr>
2986.      <td data-label="No">201</td>
2987.      <td data-label="Ülke">Sri Lanka</td>
2988.      <td data-label="Ülke kodu">LK</td>
2989.    </tr>
2990.    <tr>
2991.      <td data-label="No">202</td>
2992.      <td data-label="Ülke">Sudan</td>
2993.      <td data-label="Ülke kodu">SD</td>
2994.    </tr>
2995.    <tr>
2996.      <td data-label="No">203</td>
2997.      <td data-label="Ülke">Surinam</td>
2998.      <td data-label="Ülke kodu">SR</td>
2999.    </tr>
3000.    <tr>
3001.      <td data-label="No">204</td>
3002.      <td data-label="Ülke">Svalbard ve Jan Mayen</td>
3003.      <td data-label="Ülke kodu">SJ</td>
3004.    </tr>
3005.    <tr>
3006.      <td data-label="No">205</td>
3007.      <td data-label="Ülke">Svaziland</td>
3008.      <td data-label="Ülke kodu">SZ</td>
3009.    </tr>
3010.    <tr>
3011.      <td data-label="No">206</td>
3012.      <td data-label="Ülke">İsveç</td>
3013.      <td data-label="Ülke kodu">SE</td>
3014.    </tr>
3015.    <tr>
3016.      <td data-label="No">207</td>
3017.      <td data-label="Ülke">İsviçre</td>
3018.      <td data-label="Ülke kodu">CH</td>
3019.    </tr>
3020.    <tr>
3021.      <td data-label="No">208</td>
3022.      <td data-label="Ülke">Suriye Arap Cumhuriyeti</td>
3023.      <td data-label="Ülke kodu">SY</td>
3024.    </tr>
3025.    <tr>
3026.      <td data-label="No">209</td>
3027.      <td data-label="Ülke">Tayvan</td>
3028.      <td data-label="Ülke kodu">TW</td>
3029.    </tr>
3030.    <tr>
3031.      <td data-label="No">210</td>
3032.      <td data-label="Ülke">Tacikistan</td>
3033.      <td data-label="Ülke kodu">TJ</td>
3034.    </tr>
3035.    <tr>
3036.      <td data-label="No">211</td>
3037.      <td data-label="Ülke">Tanzanya, Birleşik Cumhuriyeti</td>
3038.      <td data-label="Ülke kodu">TZ</td>
3039.    </tr>
3040.    <tr>
3041.      <td data-label="No">212</td>
3042.      <td data-label="Ülke">Tayland</td>
3043.      <td data-label="Ülke kodu">TH</td>
3044.    </tr>
3045.    <tr>
3046.      <td data-label="No">213</td>
3047.      <td data-label="Ülke">Doğu Timor</td>
3048.      <td data-label="Ülke kodu">TL</td>
3049.    </tr>
3050.    <tr>
3051.      <td data-label="No">214</td>
3052.      <td data-label="Ülke">Togo</td>
3053.      <td data-label="Ülke kodu">TG</td>
3054.    </tr>
3055.    <tr>
3056.      <td data-label="No">215</td>
3057.      <td data-label="Ülke">Tokelau</td>
3058.      <td data-label="Ülke kodu">TK</td>
3059.    </tr>
3060.    <tr>
3061.      <td data-label="No">216</td>
3062.      <td data-label="Ülke">Tonga</td>
3063.      <td data-label="Ülke kodu">TO</td>
3064.    </tr>
3065.    <tr>
3066.      <td data-label="No">217</td>
3067.      <td data-label="Ülke">Trinidad ve Tobago</td>
3068.      <td data-label="Ülke kodu">TT</td>
3069.    </tr>
3070.    <tr>
3071.      <td data-label="No">218</td>
3072.      <td data-label="Ülke">Tunus</td>
3073.      <td data-label="Ülke kodu">TN</td>
3074.    </tr>
3075.    <tr>
3076.      <td data-label="No">219</td>
3077.      <td data-label="Ülke">Türkiye</td>
3078.      <td data-label="Ülke kodu">TR</td>
3079.    </tr>
3080.    <tr>
3081.      <td data-label="No">220</td>
3082.      <td data-label="Ülke">Türkmenistan</td>
3083.      <td data-label="Ülke kodu">TM</td>
3084.    </tr>
3085.    <tr>
3086.      <td data-label="No">221</td>
3087.      <td data-label="Ülke">Turks ve Caicos Adaları</td>
3088.      <td data-label="Ülke kodu">TC</td>
3089.    </tr>
3090.    <tr>
3091.      <td data-label="No">222</td>
3092.      <td data-label="Ülke">Tuvalu</td>
3093.      <td data-label="Ülke kodu">TV</td>
3094.    </tr>
3095.    <tr>
3096.      <td data-label="No">223</td>
3097.      <td data-label="Ülke">Uganda</td>
3098.      <td data-label="Ülke kodu">UG</td>
3099.    </tr>
3100.    <tr>
3101.      <td data-label="No">224</td>
3102.      <td data-label="Ülke">Ukrayna</td>
3103.      <td data-label="Ülke kodu">UA</td>
3104.    </tr>
3105.    <tr>
3106.      <td data-label="No">225</td>
3107.      <td data-label="Ülke">Birleşik Arap Emirlikleri</td>
3108.      <td data-label="Ülke kodu">AE</td>
3109.    </tr>
3110.    <tr>
3111.      <td data-label="No">226</td>
3112.      <td data-label="Ülke">Birleşik Krallık</td>
3113.      <td data-label="Ülke kodu">GB</td>
3114.    </tr>
3115.    <tr>
3116.      <td data-label="No">227</td>
3117.      <td data-label="Ülke">Amerika Birleşik Devletleri</td>
3118.      <td data-label="Ülke kodu">US</td>
3119.    </tr>
3120.    <tr>
3121.      <td data-label="No">228</td>
3122.      <td data-label="Ülke">Amerika Birleşik Devletleri Küçük Dış Adaları</td>
3123.      <td data-label="Ülke kodu">UM</td>
3124.    </tr>
3125.    <tr>
3126.      <td data-label="No">229</td>
3127.      <td data-label="Ülke">Uruguay</td>
3128.      <td data-label="Ülke kodu">UY</td>
3129.    </tr>
3130.    <tr>
3131.      <td data-label="No">230</td>
3132.      <td data-label="Ülke">Özbekistan</td>
3133.      <td data-label="Ülke kodu">UZ</td>
3134.    </tr>
3135.    <tr>
3136.      <td data-label="No">231</td>
3137.      <td data-label="Ülke">Vanuatu</td>
3138.      <td data-label="Ülke kodu">VU</td>
3139.    </tr>
3140.    <tr>
3141.      <td data-label="No">232</td>
3142.      <td data-label="Ülke">Venezuela</td>
3143.      <td data-label="Ülke kodu">VE</td>
3144.    </tr>
3145.    <tr>
3146.      <td data-label="No">233</td>
3147.      <td data-label="Ülke">Vietnam</td>
3148.      <td data-label="Ülke kodu">VN</td>
3149.    </tr>
3150.    <tr>
3151.      <td data-label="No">234</td>
3152.      <td data-label="Ülke">Virgin Adaları, İngiliz</td>
3153.      <td data-label="Ülke kodu">VG</td>
3154.    </tr>
3155.    <tr>
3156.      <td data-label="No">235</td>
3157.      <td data-label="Ülke">Virgin Adaları, ABD</td>
3158.      <td data-label="Ülke kodu">VI</td>
3159.    </tr>
3160.    <tr>
3161.      <td data-label="No">236</td>
3162.      <td data-label="Ülke">Wallis ve Futuna</td>
3163.      <td data-label="Ülke kodu">WF</td>
3164.    </tr>
3165.    <tr>
3166.      <td data-label="No">237</td>
3167.      <td data-label="Ülke">Batı Sahra</td>
3168.      <td data-label="Ülke kodu">EH</td>
3169.    </tr>
3170.    <tr>
3171.      <td data-label="No">238</td>
3172.      <td data-label="Ülke">Yemen</td>
3173.      <td data-label="Ülke kodu">YE</td>
3174.    </tr>
3175.    <tr>
3176.      <td data-label="No">239</td>
3177.      <td data-label="Ülke">Zambiya</td>
3178.      <td data-label="Ülke kodu">ZM</td>
3179.    </tr>
3180.    <tr>
3181.      <td data-label="No">240</td>
3182.      <td data-label="Ülke">Zimbabve</td>
3183.      <td data-label="Ülke kodu">ZW</td>
3184.    </tr>
3185.  </tbody>
3186. </table>
3187.  
3188. <div class="parent-links">
3189.  <a
3190.    class="btn btn-primary"
3191.    href="https://www.k-html.com/2022/09/html-dil-kodlar.html"
3192.  >
3193.    <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
3194.    önceki ders
3195.  </a>
3196.  
3197.  <a
3198.    class="btn btn-primary"
3199.    href="https://www.k-html.com/2022/10/html-farkl-dillerde-sayfalar.html"
3200.  >
3201.    sonraki ders
3202.    <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
3203.  </a>
3204. </div>
3205. </content><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/1064837399323633438'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/1064837399323633438'/><link rel='alternate' type='text/html' href='https://www.k-html.com/2022/09/html-ulke-kodlar.html' title='HTML Ülke Kodları'/><author><name>HTML öğren</name><uri>http://www.blogger.com/profile/05938401370972816509</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB9hVaVznt_p0FHumsq5E1ns0HFhwUsz5N8PDjeIc1oE4O70yakyUZqpJJiZyKolfcNdZlaOrykdeVaT9wGLi4Gp6Ko2vw9JCv-r2AQBF1JjXNu_09kuRKvXx-7fys1Hw/s113/html.jpg'/></author></entry><entry><id>tag:blogger.com,1999:blog-624213398567285603.post-467478006050221498</id><published>2022-09-18T17:52:00.020+03:00</published><updated>2023-05-07T04:11:22.276+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Dil Kodları"/><category scheme="http://www.blogger.com/atom/ns#" term="html"/><category scheme="http://www.blogger.com/atom/ns#" term="lang"/><title type='text'>HTML Dil Kodları</title><content type='html'>
3206. <div class="parent-links">  
3207.    <a class="btn btn-primary" href="https://www.k-html.com/2022/07/html-formun-ortak-ogelerini-toplamak.html">
3208.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
3209.      önceki ders
3210.    </a>
3211.  
3212.    <a class="btn btn-primary" href="https://www.k-html.com/2022/09/html-ulke-kodlar.html">
3213.      sonraki ders
3214.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
3215.    </a>
3216.  </div>
3217. <details open="">
3218.  <summary style="text-align: left;">Sayfa içeriği</summary>
3219.  <ul class="postcontent">
3220.  <li>
3221.  <b>›</b> <a href="https://www.k-html.com/2022/09/html-dil-kodlar.html#sde"><strong>Sayfanın dilini seçmek</strong></a></li>
3222.    <li>
3223.  <b>›</b> <a href="https://www.k-html.com/2022/09/html-dil-kodlar.html#dbikk"><strong>Dilleri belirtmek için kullanılan karakterler</strong></a>
3224.      </li>
3225.     </ul>
3226.  </details>
3227. <hr class="hrkk" />
3228. <h2 id="sde">Sayfanın dilini seçmek</h2>
3229. <p>Başlangıçta sayfanın dilini belirtmek, sayfanın içeriğinin yazıldığı birincil dili belirtmek anlamına gelir ve bu isteğe bağlı olarak yapılır, ancak yapılması tercih edilir.</p>
3230. <p>Sayfanın dilini belirtme nedenleri çoktur ama en önemlisi arama motorunda üst sıralarda yer almanı yardımcı olması açısından faydalı olmasıdır. Ayrıca, kullanıcı sayfayı çevirmek için tarayıcısında eklenti kullanıyorsa bu, çevirmenin sayfanın dili ne olduğunu bilgilendirilmesine yardımcı olur, böylece onu kullanıcının diline çevirebilir.</p>
3231. <p>Genel olarak, sayfanın dilini belirtmek için, sayfanın temel <span><html></span> etiketine <span>lang</span> özelliği ekliyoruz ve  değer olarak dilin belirten özel karakterler ekliyoruz</p>
3232. <p>Aşağıdaki örnekte sayfanın içeriği  Türkçe dilinde olduğunu tarayıcıya bildirdim.</p>
3233. <pre class="code"><ul class="ucode"><li><span style="color: grey"><!DOCTYPE html></span></li><li><span style="color: blue"><html</span> <span style="color: red">lang=</span><span style="color: red">"</span>tr<span style="color: red">"</span><span style="color: blue">></span></li><li>    <span style="color: blue"><body</span><span style="color: blue">></span></li><li>        <span style="color: blue"><p</span><span style="color: blue">></span>HTML dili öğrenmek istiyorsan k-html.com sana en iyi ücretsiz dersler veriyor!<span style="color: blue"></p</span><span style="color: blue">></span></li><li>    <span style="color: blue"></body</span><span style="color: blue">></span></li><li><span style="color: blue"></html</span><span style="color: blue">></span></li></ul></pre>
3234. <a href="https://code.k-html.com/kodlar/hdk.html" target="_blank" class="elifnur">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
3235. <hr />
3236. <h2 id="dbikk">Dilleri belirtmek için kullanılan karakterler</h2>
3237. <p>Genel olarak, her dilin onu temsil eden iki harfi vardır ve bu harfler, kendisine tahsis edilmiş <span>ISO 639-1</span> küresel standart sistemi temel alınarak geliştirilmiştir.</p>
3238.  
3239.  
3240.   <table class="table">
3241.     <thead>
3242.     <tr>
3243.     <th>No</th>
3244.     <th>Dil</th>
3245.     <th>Dilin kodu</th>
3246.     </tr>
3247.     </thead>
3248.     <tbody>
3249. <tr>
3250. <td data-label="No">1</td>
3251. <td data-label="Dil">Türkçe</td>
3252. <td data-label="Dilin kodu">tr</td>
3253.  </tr>
3254.  <tr>
3255. <td data-label="No">2</td>
3256. <td data-label="Dil">Abhazca</td>
3257. <td data-label="Dilin kodu">ab</td>
3258.  </tr>
3259.  <tr>
3260. <td data-label="No">3</td>
3261. <td data-label="Dil">Afar</td>
3262. <td data-label="Dilin kodu">aa</td>
3263. </tr>
3264. <tr>
3265. <td data-label="No">4</td>
3266. <td data-label="Dil">Afrikaanca</td>
3267. <td data-label="Dilin kodu">af</td>
3268. </tr>
3269. <tr>
3270. <td data-label="No">5</td>
3271. <td data-label="Dil">Akan</td>
3272. <td data-label="Dilin kodu">ak</td>
3273. </tr>
3274. <tr>
3275. <td data-label="No">6</td>
3276. <td data-label="Dil">Arnavutça</td>
3277. <td data-label="Dilin kodu">sq</td>
3278. </tr>
3279. <tr>
3280. <td data-label="No">7</td>
3281. <td data-label="Dil">Amharca</td>
3282. <td data-label="Dilin kodu">am</td>
3283. </tr>
3284. <tr>
3285. <td data-label="No">8</td>
3286. <td data-label="Dil">Arapça</td>
3287. <td data-label="Dilin kodu">ar</td>
3288. </tr>
3289. <tr>
3290. <td data-label="No">9</td>
3291. <td data-label="Dil">Aragonca</td>
3292. <td data-label="Dilin kodu">an</td>
3293. </tr>
3294. <tr>
3295. <td data-label="No">10</td>
3296. <td data-label="Dil">Ermeni</td>
3297. <td data-label="Dilin kodu">hy</td>
3298. </tr>
3299. <tr>
3300. <td data-label="No">11</td>
3301. <td data-label="Dil">Assam</td>
3302. <td data-label="Dilin kodu">as</td>
3303. </tr>
3304. <tr>
3305. <td data-label="No">12</td>
3306. <td data-label="Dil">Avarik</td>
3307. <td data-label="Dilin kodu">av</td>
3308. </tr>
3309. <tr>
3310. <td data-label="No">13</td>
3311. <td data-label="Dil">Avestan</td>
3312. <td data-label="Dilin kodu">ae</td>
3313. </tr>
3314. <tr>
3315. <td data-label="No">14</td>
3316. <td data-label="Dil">Aymara</td>
3317. <td data-label="Dilin kodu">ay</td>
3318. </tr>
3319. <tr>
3320. <td data-label="No">15</td>
3321. <td data-label="Dil">Azerice</td>
3322. <td data-label="Dilin kodu">az</td>
3323. </tr>
3324. <tr>
3325. <td data-label="No">16</td>
3326. <td data-label="Dil">Bambara</td>
3327. <td data-label="Dilin kodu">bm</td>
3328. </tr>
3329. <tr>
3330. <td data-label="No">17</td>
3331. <td data-label="Dil">Başkurt</td>
3332. <td data-label="Dilin kodu">ba</td>
3333. </tr>
3334. <tr>
3335. <td data-label="No">18</td>
3336. <td data-label="Dil">Baskça</td>
3337. <td data-label="Dilin kodu">eu</td>
3338. </tr>
3339. <tr>
3340. <td data-label="No">19</td>
3341. <td data-label="Dil">Belarusça</td>
3342. <td data-label="Dilin kodu">be</td>
3343. </tr>
3344. <tr>
3345. <td data-label="No">20</td>
3346. <td data-label="Dil">Bengalce</td>
3347. <td data-label="Dilin kodu">bn</td>
3348. </tr>
3349. <tr>
3350. <td data-label="No">21</td>
3351. <td data-label="Dil">Bihari</td>
3352. <td data-label="Dilin kodu">bh</td>
3353. </tr>
3354. <tr>
3355. <td data-label="No">22</td>
3356. <td data-label="Dil">Bislama</td>
3357. <td data-label="Dilin kodu">bi</td>
3358. </tr>
3359. <tr>
3360. <td data-label="No">23</td>
3361. <td data-label="Dil">Boşnakça</td>
3362. <td data-label="Dilin kodu">bs</td>
3363. </tr>
3364. <tr>
3365. <td data-label="No">24</td>
3366. <td data-label="Dil">Bretonca</td>
3367. <td data-label="Dilin kodu">br</td>
3368. </tr>
3369. <tr>
3370. <td data-label="No">25</td>
3371. <td data-label="Dil">Bulgarca</td>
3372. <td data-label="Dilin kodu">bg</td>
3373. </tr>
3374. <tr>
3375. <td data-label="No">26</td>
3376. <td data-label="Dil">Birmanya</td>
3377. <td data-label="Dilin kodu">my</td>
3378. </tr>
3379. <tr>
3380. <td data-label="No">27</td>
3381. <td data-label="Dil">Katalanca</td>
3382. <td data-label="Dilin kodu">ca</td>
3383. </tr>
3384. <tr>
3385. <td data-label="No">28</td>
3386. <td data-label="Dil">Çamorro dili</td>
3387. <td data-label="Dilin kodu">ch</td>
3388. </tr>
3389. <tr>
3390. <td data-label="No">29</td>
3391. <td data-label="Dil">Çeçen</td>
3392. <td data-label="Dilin kodu">ce</td>
3393. </tr>
3394. <tr>
3395. <td data-label="No">30</td>
3396. <td data-label="Dil">Chichewa,Chewa ve Nyanja</td>
3397. <td data-label="Dilin kodu">ny</td>
3398. </tr>
3399. <tr>
3400. <td data-label="No">31</td>
3401. <td data-label="Dil">Çince</td>
3402. <td data-label="Dilin kodu">zh</td>
3403. </tr>
3404. <tr>
3405. <td data-label="No">32</td>
3406. <td data-label="Dil">Çuvaşça</td>
3407. <td data-label="Dilin kodu">cv</td>
3408. </tr>
3409. <tr>
3410. <td data-label="No">33</td>
3411. <td data-label="Dil">korniş dili</td>
3412. <td data-label="Dilin kodu">kw</td>
3413. </tr>
3414. <tr>
3415. <td data-label="No">34</td>
3416. <td data-label="Dil">Korsikalı</td>
3417. <td data-label="Dilin kodu">co</td>
3418. </tr>
3419. <tr>
3420. <td data-label="No">35</td>
3421. <td data-label="Dil">Cree</td>
3422. <td data-label="Dilin kodu">cr</td>
3423. </tr>
3424. <tr>
3425. <td data-label="No">36</td>
3426. <td data-label="Dil">Hırvat</td>
3427. <td data-label="Dilin kodu">hr</td>
3428. </tr>
3429. <tr>
3430. <td data-label="No">37</td>
3431. <td data-label="Dil">Çek</td>
3432. <td data-label="Dilin kodu">cs</td>
3433. </tr>
3434. <tr>
3435. <td data-label="No">38</td>
3436. <td data-label="Dil">Danimarkalı</td>
3437. <td data-label="Dilin kodu">da</td>
3438. </tr>
3439. <tr>
3440. <td data-label="No">39</td>
3441. <td data-label="Dil">Divehi,Dhivehi ve Maldiv</td>
3442. <td data-label="Dilin kodu">dv</td>
3443. </tr>
3444. <tr>
3445. <td data-label="No">40</td>
3446. <td data-label="Dil">Flemenkçe</td>
3447. <td data-label="Dilin kodu">nl</td>
3448. </tr>
3449. <tr>
3450. <td data-label="No">41</td>
3451. <td data-label="Dil">Dzongkha</td>
3452. <td data-label="Dilin kodu">dz</td>
3453. </tr>
3454. <tr>
3455. <td data-label="No">42</td>
3456. <td data-label="Dil">ingilizce</td>
3457. <td data-label="Dilin kodu">en</td>
3458. </tr>
3459. <tr>
3460. <td data-label="No">43</td>
3461. <td data-label="Dil">Esperanto</td>
3462. <td data-label="Dilin kodu">eo</td>
3463. </tr>
3464. <tr>
3465. <td data-label="No">44</td>
3466. <td data-label="Dil">estonyaca</td>
3467. <td data-label="Dilin kodu">et</td>
3468. </tr>
3469. <tr>
3470. <td data-label="No">45</td>
3471. <td data-label="Dil">Ewe</td>
3472. <td data-label="Dilin kodu">ee</td>
3473. </tr>
3474. <tr>
3475. <td data-label="No">46</td>
3476. <td data-label="Dil">Faroe dili</td>
3477. <td data-label="Dilin kodu">fo</td>
3478. </tr>
3479. <tr>
3480. <td data-label="No">47</td>
3481. <td data-label="Dil">Fiji dili</td>
3482. <td data-label="Dilin kodu">fj</td>
3483. </tr>
3484. <tr>
3485. <td data-label="No">48</td>
3486. <td data-label="Dil">Fince</td>
3487. <td data-label="Dilin kodu">fi</td>
3488. </tr>
3489. <tr>
3490. <td data-label="No">49</td>
3491. <td data-label="Dil">Fransızca</td>
3492. <td data-label="Dilin kodu">fr</td>
3493. </tr>
3494. <tr>
3495. <td data-label="No">50</td>
3496. <td data-label="Dil">Fula,Fulah,Pulaar ve Pular</td>
3497. <td data-label="Dilin kodu">ff</td>
3498. </tr>
3499. <tr>
3500. <td data-label="No">51</td>
3501. <td data-label="Dil">Galiçyaca</td>
3502. <td data-label="Dilin kodu">gl</td>
3503. </tr>
3504. <tr>
3505. <td data-label="No">52</td>
3506. <td data-label="Dil">Galce (İskoç)</td>
3507. <td data-label="Dilin kodu">gd</td>
3508. </tr>
3509. <tr>
3510. <td data-label="No">53</td>
3511. <td data-label="Dil">Galce (Manks)</td>
3512. <td data-label="Dilin kodu">gv</td>
3513. </tr>
3514. <tr>
3515. <td data-label="No">54</td>
3516. <td data-label="Dil">Gürcü</td>
3517. <td data-label="Dilin kodu">ka</td>
3518. </tr>
3519. <tr>
3520. <td data-label="No">55</td>
3521. <td data-label="Dil">Almanca</td>
3522. <td data-label="Dilin kodu">de</td>
3523. </tr>
3524. <tr>
3525. <td data-label="No">56</td>
3526. <td data-label="Dil">Yunanca</td>
3527. <td data-label="Dilin kodu">el</td>
3528. </tr>
3529. <tr>
3530. <td data-label="No">57</td>
3531. <td data-label="Dil">Grönlandca</td>
3532. <td data-label="Dilin kodu">kl</td>
3533. </tr>
3534. <tr>
3535. <td data-label="No">58</td>
3536. <td data-label="Dil">Guarani</td>
3537. <td data-label="Dilin kodu">gn</td>
3538. </tr>
3539. <tr>
3540. <td data-label="No">59</td>
3541. <td data-label="Dil">Gujarati</td>
3542. <td data-label="Dilin kodu">gu</td>
3543. </tr>
3544. <tr>
3545. <td data-label="No">60</td>
3546. <td data-label="Dil">Haitian Creole</td>
3547. <td data-label="Dilin kodu">ht</td>
3548. </tr>
3549. <tr>
3550. <td data-label="No">61</td>
3551. <td data-label="Dil">Hausa</td>
3552. <td data-label="Dilin kodu">ha</td>
3553. </tr>
3554. <tr>
3555. <td data-label="No">62</td>
3556. <td data-label="Dil">İbranice</td>
3557. <td data-label="Dilin kodu">he</td>
3558. </tr>
3559. <tr>
3560. <td data-label="No">63</td>
3561. <td data-label="Dil">Herero dili</td>
3562. <td data-label="Dilin kodu">hz</td>
3563. </tr>
3564. <tr>
3565. <td data-label="No">64</td>
3566. <td data-label="Dil">Hintçe</td>
3567. <td data-label="Dilin kodu">hi</td>
3568. </tr>
3569. <tr>
3570. <td data-label="No">65</td>
3571. <td data-label="Dil">Hiri Motu</td>
3572. <td data-label="Dilin kodu">ho</td>
3573. </tr>
3574. <tr>
3575. <td data-label="No">66</td>
3576. <td data-label="Dil">Macarca</td>
3577. <td data-label="Dilin kodu">hu</td>
3578. </tr>
3579. <tr>
3580. <td data-label="No">67</td>
3581. <td data-label="Dil">İzlandaca</td>
3582. <td data-label="Dilin kodu">is</td>
3583. </tr>
3584. <tr>
3585. <td data-label="No">68</td>
3586. <td data-label="Dil">İdo dili</td>
3587. <td data-label="Dilin kodu">io</td>
3588. </tr>
3589. <tr>
3590. <td data-label="No">69</td>
3591. <td data-label="Dil">İbo dili</td>
3592. <td data-label="Dilin kodu">ig</td>
3593. </tr>
3594. <tr>
3595. <td data-label="No">70</td>
3596. <td data-label="Dil">Endonezya dili</td>
3597. <td data-label="Dilin kodu">id ve in</td>
3598. </tr>
3599. <tr>
3600. <td data-label="No">71</td>
3601. <td data-label="Dil">interlingua dili</td>
3602. <td data-label="Dilin kodu">ia</td>
3603. </tr>
3604. <tr>
3605. <td data-label="No">72</td>
3606. <td data-label="Dil">interlingue</td>
3607. <td data-label="Dilin kodu">ie</td>
3608. </tr>
3609. <tr>
3610. <td data-label="No">73</td>
3611. <td data-label="Dil">İnuitçe</td>
3612. <td data-label="Dilin kodu">iu</td>
3613. </tr>
3614. <tr>
3615. <td data-label="No">74</td>
3616. <td data-label="Dil">İnyupikçe</td>
3617. <td data-label="Dilin kodu">ik</td>
3618. </tr>
3619. <tr>
3620. <td data-label="No">75</td>
3621. <td data-label="Dil">İrlandalı</td>
3622. <td data-label="Dilin kodu">ga</td>
3623. </tr>
3624. <tr>
3625. <td data-label="No">76</td>
3626. <td data-label="Dil">İtalyanca</td>
3627. <td data-label="Dilin kodu">it</td>
3628. </tr>
3629. <tr>
3630. <td data-label="No">77</td>
3631. <td data-label="Dil">Japonca</td>
3632. <td data-label="Dilin kodu">ja</td>
3633. </tr>
3634. <tr>
3635. <td data-label="No">78</td>
3636. <td data-label="Dil">Cava</td>
3637. <td data-label="Dilin kodu">jv</td>
3638. </tr>
3639. <tr>
3640. <td data-label="No">79</td>
3641. <td data-label="Dil">Kalaallisut ve Grönlandca</td>
3642. <td data-label="Dilin kodu">kl</td>
3643. </tr>
3644. <tr>
3645. <td data-label="No">80</td>
3646. <td data-label="Dil">kannada dili</td>
3647. <td data-label="Dilin kodu">kn</td>
3648. </tr>
3649. <tr>
3650. <td data-label="No">81</td>
3651. <td data-label="Dil">Kanuri</td>
3652. <td data-label="Dilin kodu">kr</td>
3653. </tr>
3654. <tr>
3655. <td data-label="No">82</td>
3656. <td data-label="Dil">Kashmiri</td>
3657. <td data-label="Dilin kodu">ks</td>
3658. </tr>
3659. <tr>
3660. <td data-label="No">83</td>
3661. <td data-label="Dil">Kazak dili</td>
3662. <td data-label="Dilin kodu">kk</td>
3663. </tr>
3664. <tr>
3665. <td data-label="No">84</td>
3666. <td data-label="Dil">Kmer dili</td>
3667. <td data-label="Dilin kodu">km</td>
3668. </tr>
3669. <tr>
3670. <td data-label="No">85</td>
3671. <td data-label="Dil">Kikuyu</td>
3672. <td data-label="Dilin kodu">ki</td>
3673. </tr>
3674. <tr>
3675. <td data-label="No">86</td>
3676. <td data-label="Dil">Kinyarwanda (Ruanda)</td>
3677. <td data-label="Dilin kodu">rw</td>
3678. </tr>
3679. <tr>
3680. <td data-label="No">87</td>
3681. <td data-label="Dil">Kirundi</td>
3682. <td data-label="Dilin kodu">rn</td>
3683. </tr>
3684. <tr>
3685. <td data-label="No">88</td>
3686. <td data-label="Dil">Kırgızca</td>
3687. <td data-label="Dilin kodu">ky</td>
3688. </tr>
3689. <tr>
3690. <td data-label="No">89</td>
3691. <td data-label="Dil">Komi dili</td>
3692. <td data-label="Dilin kodu">kv</td>
3693. </tr>
3694. <tr>
3695. <td data-label="No">90</td>
3696. <td data-label="Dil">Kongo dili</td>
3697. <td data-label="Dilin kodu">kg</td>
3698. </tr>
3699. <tr>
3700. <td data-label="No">91</td>
3701. <td data-label="Dil">Korece</td>
3702. <td data-label="Dilin kodu">ko</td>
3703. </tr>
3704. <tr>
3705. <td data-label="No">92</td>
3706. <td data-label="Dil">Kürt</td>
3707. <td data-label="Dilin kodu">ku</td>
3708. </tr>
3709. <tr>
3710. <td data-label="No">93</td>
3711. <td data-label="Dil">kwanyama</td>
3712. <td data-label="Dilin kodu">kj</td>
3713. </tr>
3714. <tr>
3715. <td data-label="No">94</td>
3716. <td data-label="Dil">Lao</td>
3717. <td data-label="Dilin kodu">lo</td>
3718. </tr>
3719. <tr>
3720. <td data-label="No">95</td>
3721. <td data-label="Dil">Latince</td>
3722. <td data-label="Dilin kodu">la</td>
3723. </tr>
3724. <tr>
3725. <td data-label="No">96</td>
3726. <td data-label="Dil">Letonca</td>
3727. <td data-label="Dilin kodu">lv</td>
3728. </tr>
3729. <tr>
3730. <td data-label="No">97</td>
3731. <td data-label="Dil">Limburgish (Limburger)</td>
3732. <td data-label="Dilin kodu">li</td>
3733. </tr>
3734. <tr>
3735. <td data-label="No">98</td>
3736. <td data-label="Dil">Lingala</td>
3737. <td data-label="Dilin kodu">ln</td>
3738. </tr>
3739. <tr>
3740. <td data-label="No">99</td>
3741. <td data-label="Dil">litvanyaca</td>
3742. <td data-label="Dilin kodu">lt</td>
3743. </tr>
3744. <tr>
3745. <td data-label="No">100</td>
3746. <td data-label="Dil">Luga-Katanga dili</td>
3747. <td data-label="Dilin kodu">lu</td>
3748. </tr>
3749. <tr>
3750. <td data-label="No">101</td>
3751. <td data-label="Dil">Luganda ve Ganda</td>
3752. <td data-label="Dilin kodu">lg</td>
3753. </tr>
3754. <tr>
3755. <td data-label="No">102</td>
3756. <td data-label="Dil">Lüksemburgca</td>
3757. <td data-label="Dilin kodu">lb</td>
3758. </tr>
3759. <tr>
3760. <td data-label="No">103</td>
3761. <td data-label="Dil">manks</td>
3762. <td data-label="Dilin kodu">gv</td>
3763. </tr>
3764. <tr>
3765. <td data-label="No">104</td>
3766. <td data-label="Dil">Makedonca</td>
3767. <td data-label="Dilin kodu">mk</td>
3768. </tr>
3769. <tr>
3770. <td data-label="No">105</td>
3771. <td data-label="Dil">Madagaskar</td>
3772. <td data-label="Dilin kodu">mg</td>
3773. </tr>
3774. <tr>
3775. <td data-label="No">106</td>
3776. <td data-label="Dil">Malayca</td>
3777. <td data-label="Dilin kodu">ms</td>
3778. </tr>
3779. <tr>
3780. <td data-label="No">107</td>
3781. <td data-label="Dil">Malayalamca</td>
3782. <td data-label="Dilin kodu">ml</td>
3783. </tr>
3784. <tr>
3785. <td data-label="No">108</td>
3786. <td data-label="Dil">Maltaca</td>
3787. <td data-label="Dilin kodu">mt</td>
3788. </tr>
3789. <tr>
3790. <td data-label="No">109</td>
3791. <td data-label="Dil">Maori dili</td>
3792. <td data-label="Dilin kodu">mi</td>
3793. </tr>
3794. <tr>
3795. <td data-label="No">110</td>
3796. <td data-label="Dil">Marathi dili</td>
3797. <td data-label="Dilin kodu">mr</td>
3798. </tr>
3799. <tr>
3800. <td data-label="No">111</td>
3801. <td data-label="Dil">Marshallca</td>
3802. <td data-label="Dilin kodu">mh</td>
3803. </tr>
3804. <tr>
3805. <td data-label="No">112</td>
3806. <td data-label="Dil">Moldovalı</td>
3807. <td data-label="Dilin kodu">mo</td>
3808. </tr>
3809. <tr>
3810. <td data-label="No">113</td>
3811. <td data-label="Dil">Moğolca</td>
3812. <td data-label="Dilin kodu">mn</td>
3813. </tr>
3814. <tr>
3815. <td data-label="No">114</td>
3816. <td data-label="Dil">Nauru dili</td>
3817. <td data-label="Dilin kodu">na</td>
3818. </tr>
3819. <tr>
3820. <td data-label="No">115</td>
3821. <td data-label="Dil">Navajo dili</td>
3822. <td data-label="Dilin kodu">nv</td>
3823. </tr>
3824. <tr>
3825. <td data-label="No">116</td>
3826. <td data-label="Dil">Ndonga dili</td>
3827. <td data-label="Dilin kodu">ng</td>
3828. </tr>
3829. <tr>
3830. <td data-label="No">117</td>
3831. <td data-label="Dil">Kuzey Ndebele</td>
3832. <td data-label="Dilin kodu">nd</td>
3833. </tr>
3834. <tr>
3835. <td data-label="No">118</td>
3836. <td data-label="Dil">Nepalce</td>
3837. <td data-label="Dilin kodu">ne</td>
3838. </tr>
3839. <tr>
3840. <td data-label="No">119</td>
3841. <td data-label="Dil">Norveççe</td>
3842. <td data-label="Dilin kodu">no</td>
3843. </tr>
3844. <tr>
3845. <td data-label="No">120</td>
3846. <td data-label="Dil">norveçce bokmål</td>
3847. <td data-label="Dilin kodu">nb</td>
3848. </tr>
3849. <tr>
3850. <td data-label="No">121</td>
3851. <td data-label="Dil">Norveç nynorsk'u</td>
3852. <td data-label="Dilin kodu">nn</td>
3853. </tr>
3854. <tr>
3855. <td data-label="No">122</td>
3856. <td data-label="Dil">Nuosu dili</td>
3857. <td data-label="Dilin kodu">ii</td>
3858. </tr>
3859. <tr>
3860. <td data-label="No">123</td>
3861. <td data-label="Dil">Oksitanca</td>
3862. <td data-label="Dilin kodu">oc</td>
3863. </tr>
3864. <tr>
3865. <td data-label="No">124</td>
3866. <td data-label="Dil">Ojibwe</td>
3867. <td data-label="Dilin kodu">oj</td>
3868. </tr>
3869. <tr>
3870. <td data-label="No">125</td>
3871. <td data-label="Dil">Eski Kilise Slavcası ve Eski Bulgarca</td>
3872. <td data-label="Dilin kodu">cu</td>
3873. </tr>
3874. <tr>
3875. <td data-label="No">126</td>
3876. <td data-label="Dil">Ortaca</td>
3877. <td data-label="Dilin kodu">or</td>
3878. </tr>
3879. <tr>
3880. <td data-label="No">127</td>
3881. <td data-label="Dil">Oromo (Afaan Oromo)</td>
3882. <td data-label="Dilin kodu">om</td>
3883. </tr>
3884. <tr>
3885. <td data-label="No">128</td>
3886. <td data-label="Dil">Osetçe</td>
3887. <td data-label="Dilin kodu">os</td>
3888. </tr>
3889. <tr>
3890. <td data-label="No">129</td>
3891. <td data-label="Dil">pali</td>
3892. <td data-label="Dilin kodu">pi</td>
3893. </tr>
3894. <tr>
3895. <td data-label="No">130</td>
3896. <td data-label="Dil">Peştuca</td>
3897. <td data-label="Dilin kodu">ps</td>
3898. </tr>
3899. <tr>
3900. <td data-label="No">131</td>
3901. <td data-label="Dil">Farsça</td>
3902. <td data-label="Dilin kodu">fa</td>
3903. </tr>
3904. <tr>
3905. <td data-label="No">132</td>
3906. <td data-label="Dil">Lehçe</td>
3907. <td data-label="Dilin kodu">pl</td>
3908. </tr>
3909. <tr>
3910. <td data-label="No">133</td>
3911. <td data-label="Dil">Portekizce</td>
3912. <td data-label="Dilin kodu">pt</td>
3913. </tr>
3914. <tr>
3915. <td data-label="No">134</td>
3916. <td data-label="Dil">Pencap (Doğu)</td>
3917. <td data-label="Dilin kodu">pa</td>
3918. </tr>
3919. <tr>
3920. <td data-label="No">135</td>
3921. <td data-label="Dil">Keçua</td>
3922. <td data-label="Dilin kodu">qu</td>
3923. </tr>
3924. <tr>
3925. <td data-label="No">136</td>
3926. <td data-label="Dil">Romanşça</td>
3927. <td data-label="Dilin kodu">rm</td>
3928. </tr>
3929. <tr>
3930. <td data-label="No">137</td>
3931. <td data-label="Dil">Rumence</td>
3932. <td data-label="Dilin kodu">ro</td>
3933. </tr>
3934. <tr>
3935. <td data-label="No">138</td>
3936. <td data-label="Dil">Rusça</td>
3937. <td data-label="Dilin kodu">ru</td>
3938. </tr>
3939. <tr>
3940. <td data-label="No">139</td>
3941. <td data-label="Dil">Sami dili</td>
3942. <td data-label="Dilin kodu">se</td>
3943. </tr>
3944. <tr>
3945. <td data-label="No">140</td>
3946. <td data-label="Dil">Samoaca</td>
3947. <td data-label="Dilin kodu">sm</td>
3948. </tr>
3949. <tr>
3950. <td data-label="No">141</td>
3951. <td data-label="Dil">Sango</td>
3952. <td data-label="Dilin kodu">sg</td>
3953. </tr>
3954. <tr>
3955. <td data-label="No">142</td>
3956. <td data-label="Dil">Sanskritçe</td>
3957. <td data-label="Dilin kodu">sa</td>
3958. </tr>
3959. <tr>
3960. <td data-label="No">143</td>
3961. <td data-label="Dil">Sırpça</td>
3962. <td data-label="Dilin kodu">sr</td>
3963. </tr>
3964. <tr>
3965. <td data-label="No">144</td>
3966. <td data-label="Dil">Sırp-Hırvat</td>
3967. <td data-label="Dilin kodu">sh</td>
3968. </tr>
3969. <tr>
3970. <td data-label="No">145</td>
3971. <td data-label="Dil">sesotho</td>
3972. <td data-label="Dilin kodu">st</td>
3973. </tr>
3974. <tr>
3975. <td data-label="No">146</td>
3976. <td data-label="Dil">Setsvana</td>
3977. <td data-label="Dilin kodu">tn</td>
3978. </tr>
3979. <tr>
3980. <td data-label="No">147</td>
3981. <td data-label="Dil">Şona</td>
3982. <td data-label="Dilin kodu">sn</td>
3983. </tr>
3984. <tr>
3985. <td data-label="No">148</td>
3986. <td data-label="Dil">Sichuan Yi</td>
3987. <td data-label="Dilin kodu">ii</td>
3988. </tr>
3989. <tr>
3990. <td data-label="No">149</td>
3991. <td data-label="Dil">Sindhi</td>
3992. <td data-label="Dilin kodu">sd</td>
3993. </tr>
3994. <tr>
3995. <td data-label="No">150</td>
3996. <td data-label="Dil">Sinhalese</td>
3997. <td data-label="Dilin kodu">si</td>
3998. </tr>
3999. <tr>
4000. <td data-label="No">151</td>
4001. <td data-label="Dil">Siswati</td>
4002. <td data-label="Dilin kodu">ss</td>
4003. </tr>
4004. <tr>
4005. <td data-label="No">152</td>
4006. <td data-label="Dil">Slovak</td>
4007. <td data-label="Dilin kodu">sk</td>
4008. </tr>
4009. <tr>
4010. <td data-label="No">153</td>
4011. <td data-label="Dil">Slovence</td>
4012. <td data-label="Dilin kodu">sl</td>
4013. </tr>
4014. <tr>
4015. <td data-label="No">154</td>
4016. <td data-label="Dil">Somali</td>
4017. <td data-label="Dilin kodu">so</td>
4018. </tr>
4019. <tr>
4020. <td data-label="No">155</td>
4021. <td data-label="Dil">Güney Ndebele</td>
4022. <td data-label="Dilin kodu">nr</td>
4023. </tr>
4024. <tr>
4025. <td data-label="No">156</td>
4026. <td data-label="Dil">İspanyol</td>
4027. <td data-label="Dilin kodu">es</td>
4028. </tr>
4029. <tr>
4030. <td data-label="No">157</td>
4031. <td data-label="Dil">Sunda dili</td>
4032. <td data-label="Dilin kodu">su</td>
4033. </tr>
4034. <tr>
4035. <td data-label="No">158</td>
4036. <td data-label="Dil">Svahili dili</td>
4037. <td data-label="Dilin kodu">sw</td>
4038. </tr>
4039. <tr>
4040. <td data-label="No">159</td>
4041. <td data-label="Dil">Svati</td>
4042. <td data-label="Dilin kodu">ss</td>
4043. </tr>
4044. <tr>
4045. <td data-label="No">160</td>
4046. <td data-label="Dil">İsveççe</td>
4047. <td data-label="Dilin kodu">sv</td>
4048. </tr>
4049. <tr>
4050. <td data-label="No">161</td>
4051. <td data-label="Dil">Tagalog</td>
4052. <td data-label="Dilin kodu">tl</td>
4053. </tr>
4054. <tr>
4055. <td data-label="No">162</td>
4056. <td data-label="Dil">Tahiti</td>
4057. <td data-label="Dilin kodu">ty</td>
4058. </tr>
4059. <tr>
4060. <td data-label="No">163</td>
4061. <td data-label="Dil">Tacik</td>
4062. <td data-label="Dilin kodu">tg</td>
4063. </tr>
4064. <tr>
4065. <td data-label="No">164</td>
4066. <td data-label="Dil">Tamilce</td>
4067. <td data-label="Dilin kodu">ta</td>
4068. </tr>
4069. <tr>
4070. <td data-label="No">165</td>
4071. <td data-label="Dil">Tatar</td>
4072. <td data-label="Dilin kodu">tt</td>
4073. </tr>
4074. <tr>
4075. <td data-label="No">166</td>
4076. <td data-label="Dil">Telugu</td>
4077. <td data-label="Dilin kodu">te</td>
4078. </tr>
4079. <tr>
4080. <td data-label="No">167</td>
4081. <td data-label="Dil">Tayca</td>
4082. <td data-label="Dilin kodu">th</td>
4083. </tr>
4084. <tr>
4085. <td data-label="No">168</td>
4086. <td data-label="Dil">Tibetçe</td>
4087. <td data-label="Dilin kodu">bo</td>
4088. </tr>
4089. <tr>
4090. <td data-label="No">169</td>
4091. <td data-label="Dil">Tigrinya</td>
4092. <td data-label="Dilin kodu">ti</td>
4093. </tr>
4094. <tr>
4095. <td data-label="No">170</td>
4096. <td data-label="Dil">Tonga</td>
4097. <td data-label="Dilin kodu">to</td>
4098. </tr>
4099. <tr>
4100. <td data-label="No">171</td>
4101. <td data-label="Dil">Tsonga</td>
4102. <td data-label="Dilin kodu">ts</td>
4103. </tr>
4104. <tr>
4105. <td data-label="No">172</td>
4106. <td data-label="Dil">Türkçe</td>
4107. <td data-label="Dilin kodu">tr</td>
4108. </tr>
4109. <tr>
4110. <td data-label="No">173</td>
4111. <td data-label="Dil">Türkmen</td>
4112. <td data-label="Dilin kodu">tk</td>
4113. </tr>
4114. <tr>
4115. <td data-label="No">174</td>
4116. <td data-label="Dil">Twi</td>
4117. <td data-label="Dilin kodu">tw</td>
4118. </tr>
4119. <tr>
4120. <td data-label="No">175</td>
4121. <td data-label="Dil">Uygur</td>
4122. <td data-label="Dilin kodu">ug</td>
4123. </tr>
4124. <tr>
4125. <td data-label="No">176</td>
4126. <td data-label="Dil">Ukraynaca</td>
4127. <td data-label="Dilin kodu">uk</td>
4128. </tr>
4129. <tr>
4130. <td data-label="No">177</td>
4131. <td data-label="Dil">Urduca</td>
4132. <td data-label="Dilin kodu">ur</td>
4133. </tr>
4134. <tr>
4135. <td data-label="No">178</td>
4136. <td data-label="Dil">Özbekçe</td>
4137. <td data-label="Dilin kodu">uz</td>
4138. </tr>
4139. <tr>
4140. <td data-label="No">179</td>
4141. <td data-label="Dil">Venda dili</td>
4142. <td data-label="Dilin kodu">ve</td>
4143. </tr>
4144. <tr>
4145. <td data-label="No">180</td>
4146. <td data-label="Dil">Vietnamca</td>
4147. <td data-label="Dilin kodu">vi</td>
4148. </tr>
4149. <tr>
4150. <td data-label="No">181</td>
4151. <td data-label="Dil">Volapük</td>
4152. <td data-label="Dilin kodu">vo</td>
4153. </tr>
4154. <tr>
4155. <td data-label="No">182</td>
4156. <td data-label="Dil">Valon</td>
4157. <td data-label="Dilin kodu">wa</td>
4158. </tr>
4159. <tr>
4160. <td data-label="No">183</td>
4161. <td data-label="Dil">Galce</td>
4162. <td data-label="Dilin kodu">cy</td>
4163. </tr>
4164. <tr>
4165. <td data-label="No">184</td>
4166. <td data-label="Dil">Wolof dili</td>
4167. <td data-label="Dilin kodu">wo</td>
4168. </tr>
4169. <tr>
4170. <td data-label="No">185</td>
4171. <td data-label="Dil">Batı Frizcesi</td>
4172. <td data-label="Dilin kodu">fy</td>
4173. </tr>
4174. <tr>
4175. <td data-label="No">186</td>
4176. <td data-label="Dil">Xhosa</td>
4177. <td data-label="Dilin kodu">xh</td>
4178. </tr>
4179. <tr>
4180. <td data-label="No">187</td>
4181. <td data-label="Dil">Yidiş dili</td>
4182. <td data-label="Dilin kodu">yi ve ji</td>
4183. </tr>
4184. <tr>
4185. <td data-label="No">188</td>
4186. <td data-label="Dil">Yoruba</td>
4187. <td data-label="Dilin kodu">yo</td>
4188. </tr>
4189. <tr>
4190. <td data-label="No">189</td>
4191. <td data-label="Dil">Zhuang ve Çuang</td>
4192. <td data-label="Dilin kodu">za</td>
4193. </tr>
4194. <tr>
4195. <td data-label="No">190</td>
4196. <td data-label="Dil">Zuluca</td>
4197. <td data-label="Dilin kodu">zu</td>
4198. </tr>
4199.  
4200.     </tbody>
4201.   </table>
4202.  
4203.  
4204.  
4205.  
4206.  
4207.  
4208.  
4209.  
4210.  
4211.  
4212.  
4213.  
4214.  
4215.  
4216.  
4217.  
4218.  
4219.  
4220.  
4221.  
4222.  
4223.  
4224.  
4225.  
4226.  
4227.  
4228.  
4229.  
4230. <div class="parent-links">  
4231.    <a class="btn btn-primary" href="https://www.k-html.com/2022/07/html-formun-ortak-ogelerini-toplamak.html">
4232.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
4233.      önceki ders
4234.    </a>
4235.  
4236.    <a class="btn btn-primary" href="https://www.k-html.com/2022/09/html-ulke-kodlar.html">
4237.      sonraki ders
4238.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
4239.    </a>
4240.  &lt;/div&gt;</content><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/467478006050221498'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/467478006050221498'/><link rel='alternate' type='text/html' href='https://www.k-html.com/2022/09/html-dil-kodlar.html' title='HTML Dil Kodları'/><author><name>HTML öğren</name><uri>http://www.blogger.com/profile/05938401370972816509</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB9hVaVznt_p0FHumsq5E1ns0HFhwUsz5N8PDjeIc1oE4O70yakyUZqpJJiZyKolfcNdZlaOrykdeVaT9wGLi4Gp6Ko2vw9JCv-r2AQBF1JjXNu_09kuRKvXx-7fys1Hw/s113/html.jpg'/></author></entry><entry><id>tag:blogger.com,1999:blog-624213398567285603.post-2941337793678697643</id><published>2022-07-24T21:37:00.011+03:00</published><updated>2023-05-07T04:11:07.434+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="&lt;fieldset&gt;"/><category scheme="http://www.blogger.com/atom/ns#" term="&lt;form&gt;"/><category scheme="http://www.blogger.com/atom/ns#" term="&lt;legend&gt;"/><category scheme="http://www.blogger.com/atom/ns#" term="form"/><category scheme="http://www.blogger.com/atom/ns#" term="formlar"/><category scheme="http://www.blogger.com/atom/ns#" term="Formun Ortak Öğelerini Toplamak"/><category scheme="http://www.blogger.com/atom/ns#" term="html"/><category scheme="http://www.blogger.com/atom/ns#" term="HTML formlar"/><title type='text'>HTML Formun Ortak Öğelerini Toplamak</title><content type='html'>&lt;div class=&quot;parent-links&quot;&gt;  
4241.    <a class="btn btn-primary" href="https://www.k-html.com/2022/07/html-secim-aralklar.html">
4242.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
4243.      önceki ders
4244.    </a>
4245.  
4246.    <a class="btn btn-primary" href="https://www.k-html.com/2022/09/html-dil-kodlar.html">
4247.      sonraki ders
4248.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
4249.    </a>
4250.  </div>
4251. <details open="">
4252.  <summary style="text-align: left;">Sayfa içeriği</summary>
4253.  <ul class="postcontent">
4254.  <li>
4255.  <b>›</b> <a href="https://www.k-html.com/2022/07/html-formun-ortak-ogelerini-toplamak.html#footk"><strong>Formun ortak öğelerini toplamak konsepti</strong></a></li>
4256.    <li>
4257.  <b>›</b> <a href="https://www.k-html.com/2022/07/html-formun-ortak-ogelerini-toplamak.html#oeke"><strong>Öğelerin etrafına kenar eklemek</strong></a>
4258.      </li>
4259.     </ul>
4260.  </details>
4261. <hr class="hrkk" />
4262. <h2 id="footk" >Formun ortak öğelerini toplamak konsepti</h2>
4263. <p><span>Formun Ortak Öğelerini Toplamak</span>, ortak elemanların etrafına kenar çizmek ve <span>formu</span> daha güzel gösteren bir başlık vermek anlamına gelir.<br />
4264.  <span>Formun</span> tüm öğelerinin çevresine kenarlıklar çizebileceğin gibi, <span>formun</span> içine yerleştirilmiş öğelerin çevresine de kenarlıklar çizebilirsin.</p>
4265. <hr />
4266. <h2 id="oeke" >Öğelerin etrafına kenar eklemek</h2>
4267. <p><span><fieldset></span> etiketi, benzersiz bir <a href="https://www.k-html.com/2021/05/html-baslklar.html" target="_blank">başlık</a> ekleme yeteneği ile <a href="https://www.k-html.com/2022/04/html-formlar.html" target="_blank">form</a> öğelerinin etrafına kare bir kenarlık eklemek için kullanılır.<br />
4268. <span>Formun</span> başlığı, kutunun satırları içinde çok güzel görünmesi için <span><legend></span> etiketi ile eklenir.</p>
4269. <p>Aşağıdaki örnekte, <span>forma</span> kenar ve bir başlık ekledim.</p>
4270. <pre class="code"><ul class="ucode"><li><span style="color: blue"><form</span><span style="color: blue">></span></li><li>    <span style="color: blue"><fieldset</span><span style="color: blue">></span></li><li>        <span style="color: blue"><legend</span><span style="color: blue">></span>Giriş Formu<span style="color: blue"></legend</span><span style="color: blue">></span></li><li>        <span style="color: #00008B;"><!--<span style="color: #00008B;"></span> Burada kenar içinde görünecek elemanları eklemelisin. <span style="color: #00008B;">--></span></span></li><li>    <span style="color: blue"></fieldset</span><span style="color: blue">></span></li><li><span style="color: blue"></form</span><span style="color: blue">></span></li></ul></pre>
4271. <a href="https://code.k-html.com/kodlar/footk.html" target="_blank" class="elifnur">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
4272. <br /><br />
4273. <p>Aşağıdaki örnekte, <span>formdaki</span> öğelere iki gruba ayrılmış görünecek şekilde kenarlıklar ve başlıklar ekledim.</p>
4274. <pre class="code"><ul class="ucode"><li><span style="color: blue"><form</span><span style="color: blue">></span></li><li>        <span style="color: blue"><fieldset</span><span style="color: blue">></span></li><li>            <span style="color: blue"><legend</span><span style="color: blue">></span>Kullanıcı adı<span style="color: blue"></legend</span><span style="color: blue">></span></li><li>            <span style="color: #00008B;"><!--<span style="color: #00008B;"></span> Burada formun içine ilk grup için bir kenarlık ve bir başlık ekledim. <span style="color: #00008B;">--></span></span></li><li>        <span style="color: blue"></fieldset</span><span style="color: blue">></span></li><li></li><li>        <span style="color: blue"><fieldset</span><span style="color: blue">></span></li><li>            <span style="color: blue"><legend</span><span style="color: blue">></span>Benim dilim<span style="color: blue"></legend</span><span style="color: blue">></span></li><li>            <span style="color: #00008B;"><!--<span style="color: #00008B;"></span> Burada formun içine ikinci grup için bir kenarlık ve bir başlık ekledim. <span style="color: #00008B;">--></span></span></li><li>        <span style="color: blue"></fieldset</span><span style="color: blue">></span></li><li><span style="color: blue"></form</span><span style="color: blue">></span></li></ul></pre>
4275. <a href="https://code.k-html.com/kodlar/footk2.html" target="_blank" class="elifnur">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
4276. <br /><br />
4277. <p>Aşağıdaki örnekte, <span>formun</span> kendisine kenar ve bir başlık, içindeki öğelere iki gruba ayrılmış görünecek şekilde bir başlık kenarlığı ekledim.</p>
4278. <pre class="code"><ul class="ucode"><li><span style="color: blue"><form</span><span style="color: blue">></span></li><li>    <span style="color: blue"><fieldset</span><span style="color: blue">></span></li><li>        <span style="color: blue"><fieldset</span><span style="color: blue">></span></li><li>            <span style="color: blue"><legend</span><span style="color: blue">></span>Kullanıcı adı<span style="color: blue"></legend</span><span style="color: blue">></span></li><li>            <span style="color: #00008B;"><!--<span style="color: #00008B;"></span> Burada formun içine ilk grup için bir kenarlık ve bir başlık ekledim. <span style="color: #00008B;">--></span></span></li><li>        <span style="color: blue"></fieldset</span><span style="color: blue">></span></li><li></li><li>        <span style="color: blue"><fieldset</span><span style="color: blue">></span></li><li>            <span style="color: blue"><legend</span><span style="color: blue">></span>Benim dilim<span style="color: blue"></legend</span><span style="color: blue">></span></li><li>            <span style="color: #00008B;"><!--<span style="color: #00008B;"></span> Burada formun içine ikinci grup için bir kenarlık ve bir başlık ekledim. <span style="color: #00008B;">--></span></span></li><li>        <span style="color: blue"></fieldset</span><span style="color: blue">></span></li><li>    <span style="color: blue"></fieldset</span><span style="color: blue">></span></li><li><span style="color: blue"></form</span><span style="color: blue">></span></li></ul></pre>
4279. <a href="https://code.k-html.com/kodlar/footk3.html" target="_blank" class="elifnur">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
4280. <div class="parent-links">  
4281.    <a class="btn btn-primary" href="https://www.k-html.com/2022/07/html-secim-aralklar.html">
4282.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
4283.      önceki ders
4284.    </a>
4285.  
4286.    <a class="btn btn-primary" href="https://www.k-html.com/2022/09/html-dil-kodlar.html">
4287.      sonraki ders
4288.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
4289.    </a>
4290.  &lt;/div&gt;</content><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/2941337793678697643'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/2941337793678697643'/><link rel='alternate' type='text/html' href='https://www.k-html.com/2022/07/html-formun-ortak-ogelerini-toplamak.html' title='HTML Formun Ortak Öğelerini Toplamak'/><author><name>HTML öğren</name><uri>http://www.blogger.com/profile/05938401370972816509</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB9hVaVznt_p0FHumsq5E1ns0HFhwUsz5N8PDjeIc1oE4O70yakyUZqpJJiZyKolfcNdZlaOrykdeVaT9wGLi4Gp6Ko2vw9JCv-r2AQBF1JjXNu_09kuRKvXx-7fys1Hw/s113/html.jpg'/></author></entry><entry><id>tag:blogger.com,1999:blog-624213398567285603.post-319299459381045717</id><published>2022-07-19T19:48:00.009+03:00</published><updated>2023-05-07T04:10:52.518+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="&lt;input&gt;"/><category scheme="http://www.blogger.com/atom/ns#" term="&lt;label&gt;"/><category scheme="http://www.blogger.com/atom/ns#" term="formlar"/><category scheme="http://www.blogger.com/atom/ns#" term="html"/><category scheme="http://www.blogger.com/atom/ns#" term="Seçim aralıkları"/><title type='text'>HTML Seçim Aralıkları</title><content type='html'>&lt;div class=&quot;parent-links&quot;&gt;  
4291.    <a class="btn btn-primary" href="https://www.k-html.com/2022/07/html-aclr-listeler.html">
4292.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
4293.      önceki ders
4294.    </a>
4295.  
4296.    <a class="btn btn-primary" href="https://www.k-html.com/2022/07/html-formun-ortak-ogelerini-toplamak.html">
4297.      sonraki ders
4298.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
4299.    </a>
4300.  </div>
4301. <details open="">
4302.  <summary style="text-align: left;">Sayfa içeriği</summary>
4303.  <ul class="postcontent">
4304.  <li>
4305.  <b>›</b> <a href="https://www.k-html.com/2022/07/html-secim-aralklar.html#sak"><strong>Seçim aralığın konsepti</strong></a></li>
4306.    <li>
4307.  <b>›</b> <a href="https://www.k-html.com/2022/07/html-secim-aralklar.html#sae"><strong>Seçim aralığı eklemek</strong></a>
4308.      </li>
4309.     </ul>
4310.  </details>
4311. <hr class="hrkk" />
4312. <h2 id="sak">Seçim aralığın konsepti</h2>
4313. <p>Seçim aralığı (<span>range</span>), belirli bir aralıktaki, örneğin 0'dan 100'e kadar olan sayısal değerleri seçmeye ayrılmış bir çubuktur.
4314. Bu çubuk, bir değer seçmek için hareket ettirilebilen bir düğmeye sahiptir (kaydırıcı kontrolü gibi).</p>
4315. <hr />
4316. <h2 id="sae" style="text-align: center">Seçim aralığı eklemek</h2>
4317. <p>Bir seçim aralığı eklemek için <span><input></span> etiketini <span style="color: blue"><input </span><span style="color: red">type="</span>range<span style="color: red">"</span><span style="color: blue">></span> olarak ekleyebilirsin.</p>
4318. <p><span><input></span> etikete aşağıdaki özellikleri ekleyebilirsin:</p>
4319. <ul>
4320.  <li><span>id</span>: <span><label></span> etiketi ile ilişkilendirmek istiyorsan <span>id</span> eklemelisin.</li>
4321.    
4322.  <li><span>name</span>: Gönder butonuna tıklandığında içinde seçilen değerin gönderilmesi için ekliyoruz.</li>
4323.  <li><span>value</span>: Temel bir değer vermek için.</li>
4324.  <li><span>min</span>: Seçilebilecek en küçük değeri belirtir.</li>
4325.  <li><span>max</span>: Seçilebilecek en büyük değeri belirtir.</li>
4326.  <li><span>step</span>: Kaydırıldıkça değerinin ne kadar değişeceğini belirtir.</li>
4327.  <li><span>disabled</span>: Inaktif görünmesini sağlamak için.</li>
4328. </ul>
4329. <br />
4330. <p>Aşağıdaki örnekte 0 ile 99 arasında değişebilen ve varsayılan değeri 18 olan bir değer aralığı gösterdim ve eğer değeri kaydırırsan 1 değeri ile değişecektir.</p>
4331. <pre class="code"><ul class="ucode"><li><span style="color: blue"><label</span> <span style="color: red">for=</span><span style="color: red">"</span>age<span style="color: red">"</span><span style="color: blue">></span>0 ile 99 arasında senin yaşın seç:<span style="color: blue"></label</span><span style="color: blue">></span></li><li><span style="color: blue"><input</span> <span style="color: red">type=</span><span style="color: red">"</span>range<span style="color: red">"</span> <span style="color: red">id=</span><span style="color: red">"</span>age<span style="color: red">"</span> <span style="color: red">name=</span><span style="color: red">"</span>Yaş<span style="color: red">"</span> <span style="color: red">min="</span>0<span style="color: red">"</span> <span style="color: red">max=</span><span style="color: red">"</span>99<span style="color: red">"</span> <span style="color: red">step=</span><span style="color: red">"</span>1<span style="color: red">"</span> <span style="color: red">value=</span><span style="color: red">"</span>18<span style="color: red">"</span><span style="color: blue">></span></li></ul></pre>
4332. <a href="https://code.k-html.com/kodlar/sae.html" target="_blank" class="elifnur">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a><br /><br />
4333.  
4334. <p>Aşağıdaki örnekte 0 ile 20 arasında değişebilen ve varsayılan değeri 10 olan bir değer aralığı gösterdim. Eğer değeri kaydırırsan 4 değeri ile değişecektir.</p>
4335. <pre class="code"><ul class="ucode"><li><span style="color: blue"><label</span> <span style="color: red">for=</span><span style="color: red">"</span>ses<span style="color: red">"</span><span style="color: blue">></span>0 ile 20 arasında istediğin ses yüksekliği seç:<span style="color: blue"></label</span><span style="color: blue">></span></li><li><span style="color: blue"><input</span> <span style="color: red">type=</span><span style="color: red">"</span>range<span style="color: red">"</span> <span style="color: red">id=</span><span style="color: red">"</span>ses<span style="color: red">"</span> <span style="color: red">name=</span><span style="color: red">"</span>Ses<span style="color: red">"</span> <span style="color: red">min="</span>0<span style="color: red">"</span> <span style="color: red">max=</span><span style="color: red">"</span>20<span style="color: red">"</span> <span style="color: red">step=</span><span style="color: red">"</span>4<span style="color: red">"</span> <span style="color: red">value=</span><span style="color: red">"</span>10<span style="color: red">"</span><span style="color: blue">></span></li></ul></pre>
4336. <a href="https://code.k-html.com/kodlar/sae2.html" target="_blank" class="elifnur">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a><br /><br />
4337. <p>Aşağıdaki örnekte 0 ile 100 arasında bir seçim aralığı ve varsayılan değeri 0 olan bir seçim aralığı gösterdim.<br />
4338. Burada aralığı <span>"disabled"</span> inaktif hale getiriyoruz ve bu nedenle değeri değiştirilemez.</p>
4339. <pre class="code"><ul class="ucode"><li><span style="color: blue"><label</span> <span style="color: red">for=</span><span style="color: red">"</span>ses<span style="color: red">"</span><span style="color: blue">></span>0 ile 100 arasında senin puanı seç:<span style="color: blue"></label</span><span style="color: blue">></span></li><li><span style="color: blue"><input</span> <span style="color: red">type=</span><span style="color: red">"</span>range<span style="color: red">"</span> <span style="color: red">id=</span><span style="color: red">"</span>puan<span style="color: red">"</span> <span style="color: red">name=</span><span style="color: red">"</span>puan<span style="color: red">"</span> <span style="color: red">min="</span>0<span style="color: red">"</span> <span style="color: red">max=</span><span style="color: red">"</span>100<span style="color: red">"</span> <span style="color: red">step=</span><span style="color: red">"</span>1<span style="color: red">"</span> <span style="color: red">value=</span><span style="color: red">"</span>0<span style="color: red">"</span><span style="color: blue">></span></li></ul></pre>
4340. <a href="https://code.k-html.com/kodlar/sae3.html" target="_blank" class="elifnur">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a><br />
4341.  
4342. <div class="parent-links">  
4343.    <a class="btn btn-primary" href="https://www.k-html.com/2022/07/html-aclr-listeler.html">
4344.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
4345.      önceki ders
4346.    </a>
4347.  
4348.    <a class="btn btn-primary" href="https://www.k-html.com/2022/07/html-formun-ortak-ogelerini-toplamak.html">
4349.      sonraki ders
4350.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
4351.    </a>
4352.  &lt;/div&gt;</content><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/319299459381045717'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/319299459381045717'/><link rel='alternate' type='text/html' href='https://www.k-html.com/2022/07/html-secim-aralklar.html' title='HTML Seçim Aralıkları'/><author><name>HTML öğren</name><uri>http://www.blogger.com/profile/05938401370972816509</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB9hVaVznt_p0FHumsq5E1ns0HFhwUsz5N8PDjeIc1oE4O70yakyUZqpJJiZyKolfcNdZlaOrykdeVaT9wGLi4Gp6Ko2vw9JCv-r2AQBF1JjXNu_09kuRKvXx-7fys1Hw/s113/html.jpg'/></author></entry><entry><id>tag:blogger.com,1999:blog-624213398567285603.post-8358155634094241095</id><published>2022-07-17T15:22:00.016+03:00</published><updated>2023-05-29T22:21:08.843+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="&lt;label&gt;"/><category scheme="http://www.blogger.com/atom/ns#" term="&lt;option&gt;"/><category scheme="http://www.blogger.com/atom/ns#" term="&lt;select&gt;"/><category scheme="http://www.blogger.com/atom/ns#" term="Açılır listeler"/><category scheme="http://www.blogger.com/atom/ns#" term="html"/><category scheme="http://www.blogger.com/atom/ns#" term="Listeler"/><title type='text'>HTML Açılır Listeler</title><content type='html'>&lt;div class=&quot;parent-links&quot;&gt;  
4353.    <a class="btn btn-primary" href="https://www.k-html.com/2022/07/html-radyo-dugmeleri.html">
4354.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
4355.      önceki ders
4356.    </a>
4357.  
4358.    <a class="btn btn-primary" href="https://www.k-html.com/2022/07/html-secim-aralklar.html">
4359.      sonraki ders
4360.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
4361.    </a>
4362.  </div>
4363. <details open="">
4364.  <summary style="text-align: left;">Sayfa içeriği</summary>
4365.  <ul class="postcontent">
4366.  <li>
4367.  <b>›</b> <a href="https://www.k-html.com/2022/07/html-aclr-listeler.html#alk"><strong>Açılır liste konsepti</strong></a></li>
4368.    <li>
4369.  <b>›</b> <a href="https://www.k-html.com/2022/07/html-aclr-listeler.html#ale"><strong>Açılır liste eklemek</strong></a>
4370.      </li>
4371.     </ul>
4372.  </details>
4373. <hr class="hrkk" />
4374. <h2 id="alk">Açılır liste konsepti</h2>
4375. <p><u>Açılır listeler</u> veya <span>Dropdown</span>, tıklandığında içindeki tüm öğeleri gösteren düğme benzeri bir listedir.</p>
4376. <p>Varsayılan olarak, sayfada yalnızca listedeki ilk öğe görünür ve kullanıcı bunlardan birini seçebilir, ancak bunlardan birden fazla değer seçmesine ek olarak görünecek öğe sayısını belirtebilirsin.</p>
4377. <hr />
4378. <h2 id="ale">Açılır liste eklemek</h2>
4379. <p>Ondan bir öğe seçilebildiğin <span>açılır liste</span> eklemek için, tarayıcıyı bir <span>açılır liste</span> eklemek istediğini söylemek için  <span><select> </select></span> etiketi ekleyebilirsin ve, içindeki öğeleri eklemek için <span><option> </option></span> etiketi ekleyebilirsin.</p>
4380. <h3><span><select></span> etiketin özellikleri</h3>
4381. <ul>
4382.  <li><span>id</span>: <span><label></span> etiketi ile ilişkilendirmek istiyorsan <span>id</span> eklemelisin.</li>
4383.  <li><span>name</span>: Gönder butonuna tıklandığında içinde seçilen değerin gönderilmesi için ekliyoruz.</li>
4384.  <li><span>size</span>: Listede görünecek öğelerin sayısını sınırlamak istediğimizde <span>size</span> ekliyoruz. Varsayılan olarak, yalnızca bir öğe görünür.</li>
4385.  <li><span>disabled</span>: İnaktif hale getirmek istiyorsan <span>disabled</span> eklemelisin. Yani soluk bir renkte görünmek ve içine yerleştirilen hiçbir değere tıklanmamak'tır.</li>
4386. </ul>
4387. <h3><span><option></span> etiketin özellikleri</h3>
4388. <ul>
4389.  <li><span>value</span>: Seçeneğin değerini ayarlamak için ekliyoruz ve her <span><option></span> için farklı bir değer belirlememiz gerekiyor.</li>
4390.  <li><span>selected</span>: Öğeyi varsayılan olarak seçili yapmak istiyorsan <span>selected</span> eklemelisin.</li>
4391.  <li><span>disabled</span>: İnaktif hale getirmek istiyorsan <span>disabled</span> eklemelisin.</li>
4392. </ul>
4393. <br />
4394. <p>Aşağıdaki örnekte 4 öğeli bir <span>açılır liste</span> ekledim.</p>
4395. <pre class="code"><ul class="ucode"><li><span style="color: blue;"><label</span> <span style="color: red;">for=</span><span style="color: red;">"</span>languages<span style="color: red;">"</span><span style="color: blue;">></span>Senin dilin seç:<span style="color: blue;"></label</span><span style="color: blue;">></span></li><li><span style="color: blue;"><select</span> <span style="color: red;">id=</span><span style="color: red;">"</span>languages<span style="color: red;">"</span> <span style="color: red;">name=</span><span style="color: red;">"</span>languages<span style="color: red;">"</span><span style="color: blue;">></span></li><li>    <span style="color: blue;"><option</span> <span style="color: red;">value=</span><span style="color: red;">"</span>turkish<span style="color: red;">"</span><span style="color: blue;">></span>Türkçe<span style="color: blue;"></option</span><span style="color: blue;">></span></li><li>    <span style="color: blue;"><option</span> <span style="color: red;">value=</span><span style="color: red;">"</span>english<span style="color: red;">"</span><span style="color: blue;">></span>ingilizce<span style="color: blue;"></option</span><span style="color: blue;">></span></li><li>    <span style="color: blue;"><option</span> <span style="color: red;">value=</span><span style="color: red;">"</span>arabic<span style="color: red;">"</span><span style="color: blue;">></span>arapça<span style="color: blue;"></option</span><span style="color: blue;">></span></li><li>    <span style="color: blue;"><option</span> <span style="color: red;">value=</span><span style="color: red;">"</span>japanese<span style="color: red;">"</span><span style="color: blue;">></span>japonca<span style="color: blue;"></option</span><span style="color: blue;">></span></li><li><span style="color: blue;"></select</span><span style="color: blue;">></span></li></ul></pre>
4396. <a class="elifnur" href="https://code.k-html.com/kodlar/ale.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
4397. <br /><br />
4398. <p>Aşağıdaki örnekte, sayfa açıldığında varsayılan olarak dördüncü öğenin seçileceğini belirten bir liste ekledim.</p>
4399. <pre class="code"><ul class="ucode"><li><span style="color: blue;"><label</span> <span style="color: red;">for=</span><span style="color: red;">"</span>languages<span style="color: red;">"</span><span style="color: blue;">></span>Senin dilin seç:<span style="color: blue;"></label</span><span style="color: blue;">></span></li><li><span style="color: blue;"><select</span> <span style="color: red;">id=</span><span style="color: red;">"</span>languages<span style="color: red;">"</span> <span style="color: red;">name=</span><span style="color: red;">"</span>languages<span style="color: red;">"</span><span style="color: blue;">></span></li><li>    <span style="color: blue;"><option</span> <span style="color: red;">value=</span><span style="color: red;">"</span>turkish<span style="color: red;">"</span><span style="color: blue;">></span>Türkçe<span style="color: blue;"></option</span><span style="color: blue;">></span></li><li>    <span style="color: blue;"><option</span> <span style="color: red;">value=</span><span style="color: red;">"</span>english<span style="color: red;">"</span><span style="color: blue;">></span>ingilizce<span style="color: blue;"></option</span><span style="color: blue;">></span></li><li>    <span style="color: blue;"><option</span> <span style="color: red;">value=</span><span style="color: red;">"</span>arabic<span style="color: red;">"</span><span style="color: blue;">></span>arapça<span style="color: blue;"></option</span><span style="color: blue;">></span></li><li>    <span style="color: blue;"><option</span> <span style="color: red;">value=</span><span style="color: red;">"</span>japanese<span style="color: red;">" selected</span><span style="color: blue;">></span>japonca<span style="color: blue;"></option</span><span style="color: blue;">></span></li><li><span style="color: blue;"></select</span><span style="color: blue;">></span></li></ul></pre>
4400. <a class="elifnur" href="https://code.k-html.com/kodlar/ale2.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
4401. <br /><br />
4402. <p>Aşağıdaki örnekte, listedeki son iki öğe inaktif olan bir liste ekledim.</p>
4403. <p>Dördüncu ve üçüncü <span><option></span> etiketi <span>disabled</span> özelliği ekledim için inaktif oldu.</p>
4404. <pre class="code"><ul class="ucode"><li><span style="color: blue;"><label</span> <span style="color: red;">for=</span><span style="color: red;">"</span>languages<span style="color: red;">"</span><span style="color: blue;">></span>Senin dilin seç:<span style="color: blue;"></label</span><span style="color: blue;">></span></li><li><span style="color: blue;"><select</span> <span style="color: red;">id=</span><span style="color: red;">"</span>languages<span style="color: red;">"</span> <span style="color: red;">name=</span><span style="color: red;">"</span>languages<span style="color: red;">"</span><span style="color: blue;">></span></li><li>    <span style="color: blue;"><option</span> <span style="color: red;">value=</span><span style="color: red;">"</span>turkish<span style="color: red;">"</span><span style="color: blue;">></span>Türkçe<span style="color: blue;"></option</span><span style="color: blue;">></span></li><li>    <span style="color: blue;"><option</span> <span style="color: red;">value=</span><span style="color: red;">"</span>english<span style="color: red;">"</span><span style="color: blue;">></span>ingilizce<span style="color: blue;"></option</span><span style="color: blue;">></span></li><li>    <span style="color: blue;"><option</span> <span style="color: red;">value=</span><span style="color: red;">"</span>arabic<span style="color: red;">" disabled</span><span style="color: blue;">></span>arapça<span style="color: blue;"></option</span><span style="color: blue;">></span></li><li>    <span style="color: blue;"><option</span> <span style="color: red;">value=</span><span style="color: red;">"</span>japanese<span style="color: red;">" disabled</span><span style="color: blue;">></span>japonca<span style="color: blue;"></option</span><span style="color: blue;">></span></li><li><span style="color: blue;"></select</span><span style="color: blue;">></span></li></ul></pre>
4405. <a class="elifnur" href="https://code.k-html.com/kodlar/ale3.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
4406. <br /><br />
4407. <p>Aşağıdaki örnekte inaktif bir liste ekledim.</p>
4408. <p><span><select></span> etiketi <span> disabled</span> ekledim için liste inaktif oldu.</p>
4409. <pre class="code"><ul class="ucode"><li><span style="color: blue;"><label</span> <span style="color: red;">for=</span><span style="color: red;">"</span>languages<span style="color: red;">"</span><span style="color: blue;">></span>Senin dilin seç:<span style="color: blue;"></label</span><span style="color: blue;">></span></li><li><span style="color: blue;"><select</span> <span style="color: red;">id=</span><span style="color: red;">"</span>languages<span style="color: red;">"</span> <span style="color: red;">name=</span><span style="color: red;">"</span>languages<span style="color: red;">" disabled</span><span style="color: blue;">></span></li><li>    <span style="color: blue;"><option</span> <span style="color: red;">value=</span><span style="color: red;">"</span>turkish<span style="color: red;">"</span><span style="color: blue;">></span>Türkçe<span style="color: blue;"></option</span><span style="color: blue;">></span></li><li>    <span style="color: blue;"><option</span> <span style="color: red;">value=</span><span style="color: red;">"</span>english<span style="color: red;">"</span><span style="color: blue;">></span>ingilizce<span style="color: blue;"></option</span><span style="color: blue;">></span></li><li>    <span style="color: blue;"><option</span> <span style="color: red;">value=</span><span style="color: red;">"</span>arabic<span style="color: red;">"</span><span style="color: blue;">></span>arapça<span style="color: blue;"></option</span><span style="color: blue;">></span></li><li>    <span style="color: blue;"><option</span> <span style="color: red;">value=</span><span style="color: red;">"</span>japanese<span style="color: red;">"</span><span style="color: blue;">></span>japonca<span style="color: blue;"></option</span><span style="color: blue;">></span></li><li><span style="color: blue;"></select</span><span style="color: blue;">></span></li></ul></pre>
4410. <a class="elifnur" href="https://code.k-html.com/kodlar/ale4.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
4411. <span class="br"></span>
4412. <div class="parent-links">  
4413.    <a class="btn btn-primary" href="https://www.k-html.com/2022/07/html-radyo-dugmeleri.html">
4414.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
4415.      önceki ders
4416.    </a>
4417.  
4418.    <a class="btn btn-primary" href="https://www.k-html.com/2022/07/html-secim-aralklar.html">
4419.      sonraki ders
4420.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
4421.    </a>
4422.  &lt;/div&gt;</content><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/8358155634094241095'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/8358155634094241095'/><link rel='alternate' type='text/html' href='https://www.k-html.com/2022/07/html-aclr-listeler.html' title='HTML Açılır Listeler'/><author><name>HTML öğren</name><uri>http://www.blogger.com/profile/05938401370972816509</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB9hVaVznt_p0FHumsq5E1ns0HFhwUsz5N8PDjeIc1oE4O70yakyUZqpJJiZyKolfcNdZlaOrykdeVaT9wGLi4Gp6Ko2vw9JCv-r2AQBF1JjXNu_09kuRKvXx-7fys1Hw/s113/html.jpg'/></author></entry><entry><id>tag:blogger.com,1999:blog-624213398567285603.post-7463959017036532552</id><published>2022-07-09T20:29:00.011+03:00</published><updated>2023-05-07T04:10:22.573+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="formlar"/><category scheme="http://www.blogger.com/atom/ns#" term="html"/><category scheme="http://www.blogger.com/atom/ns#" term="Radyo düğmeleri"/><title type='text'>HTML Radyo Düğmeleri</title><content type='html'>&lt;div class=&quot;parent-links&quot;&gt;  
4423.    <a class="btn btn-primary" href="https://www.k-html.com/2022/07/html-onay-kutular.html">
4424.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
4425.      önceki ders
4426.    </a>
4427.    <a class="btn btn-primary" href="https://www.k-html.com/2022/07/html-aclr-listeler.html">
4428.      sonraki ders
4429.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
4430.    </a>
4431.  </div>
4432. <details open="">
4433.  <summary style="text-align: left;">Sayfa içeriği</summary>
4434.  <ul class="postcontent">
4435.  <li>
4436.  <b>›</b> <a href="https://www.k-html.com/2022/07/html-radyo-dugmeleri.html#rdk"><strong>Radyo düğmesinin kavramı</strong></a></li>
4437.    <li>
4438.  <b>›</b> <a href="https://www.k-html.com/2022/07/html-radyo-dugmeleri.html#rde"><strong>Radyo düğmesi eklemek</strong></a>
4439.      </li>
4440.     </ul>
4441.  </details>
4442. <hr class="hrkk" />
4443. <h2 id="rdk">Radyo düğmesinin kavramı</h2>
4444. <p>Radyo Düğmesi, tıklandığında içinde seçildiğini belirten büyük bir nokta gösteren dairesel bir düğmedir.</p>
4445. <p>Kullanıcının önünde birkaç seçeneği görüntülemek ve bunlardan yalnızca birini seçmesini sağlamak için genellikle radyo düğmelerini kullanılan bir düğmedir.</p>
4446. <hr />
4447. <h2 id="rde">Radyo düğmesi eklemek</h2>
4448. <p>Bir <span>Radyo düğmesi</span> eklemek için <span style="color: blue;"><input</span> <span style="color: red;">type="</span>radio<span style="color: red;">"</span><span style="color: blue;">></span> olarak <span><input /></span> etiketini kullanabilirsin.</p>
4449. <p>Bu etikete aşağıdaki özellikleri ekleyebilirsin:</p>
4450. <ul>
4451. <li><span>id</span>: <span><label></span> etiketi ile linklemek istersek <span><label></span> ekliyoruz.</li>
4452. <li><span>name</span>: gönder butonuna tıklandığında içine yerleştirilen değerin gönderilmesi için ekliyoruz</li>
4453. <li><span>value</span>: Gönder butonuna tıklandığında gönderilecek değeri verir.
4454. </li><li><span>disabled</span>: soluk görünmesini ve değeri değişmez sağlamak için kullanılıyor.</li>
4455. <li><span>checked</span>: sayfa açıldığında varsayılan olarak kontrol edilmesini sağlamak için <span>checked</span> ekliyoruz.</li>
4456. </ul>
4457. <span class="br"></span>
4458. <h4>Teknik bilgi</h4>
4459. <blockquote>Sayfaya eklenen her <span>radyo düğmesi</span> grubuna aynı ad verilmelidir, "yani, ona birleşik bir <span>Name</span> vermek", çünkü tarayıcı aynı ada sahip <span>radyo düğmelerini</span> bulduğunda, bunların bir gruba ait olduğunu hemen anlar ve bu nedenle kullanıcı, hepsini değil, yalnızca birini seçebilmelidir.</blockquote>
4460. <p>Düğmenin yanında göstereceğin metni, her zaman düğmeye iliştirilmiş <span><label></span> etiketi ile yerleştir, çünkü tarayıcı, kullanıcının onunla ilişkili metne tıkladığında aynı düğmeyi tıkladığını düşünecektir.</p>
4461. <span class="br"></span>
4462. <p>Aşağıdaki örnekte üç radyo düğmesi gösterdim.</p>
4463. <pre class="code"><ul class="ucode"><li><span style="color: blue;"><input</span> <span style="color: red;">type=</span><span style="color: red;">"</span>radio<span style="color: red;">"</span> <span style="color: red;">id=</span><span style="color: red;">"</span>tr<span style="color: red;">"</span> <span style="color: red;">name=</span><span style="color: red;">"</span>languages<span style="color: red;">"</span> <span style="color: red;">value=</span><span style="color: red;">"</span>turkish<span style="color: red;">"</span><span style="color: blue;">></span></li><li><span style="color: blue;"><label</span> <span style="color: red;">for=</span><span style="color: red;">"</span>tr<span style="color: red;">"</span><span style="color: blue;">></span>Türkçe<span style="color: blue;"></label</span><span style="color: blue;">></span><span style="color: blue;"><br></span></li><li><br /></li><li><span style="color: blue;"><input</span> <span style="color: red;">type=</span><span style="color: red;">"</span>radio<span style="color: red;">"</span> <span style="color: red;">id=</span><span style="color: red;">"</span>en<span style="color: red;">"</span> <span style="color: red;">name=</span><span style="color: red;">"</span>languages<span style="color: red;">"</span> <span style="color: red;">value=</span><span style="color: red;">"</span>english<span style="color: red;">"</span><span style="color: blue;">></span></li><li><span style="color: blue;"><label</span> <span style="color: red;">for=</span><span style="color: red;">"</span>en<span style="color: red;">"</span><span style="color: blue;">></span>English<span style="color: blue;"></label</span><span style="color: blue;">></span><span style="color: blue;"><br></span></li><li><br /></li><li><span style="color: blue;"><input</span> <span style="color: red;">type=</span><span style="color: red;">"</span>radio<span style="color: red;">"</span> <span style="color: red;">id=</span><span style="color: red;">"</span>jp<span style="color: red;">"</span> <span style="color: red;">name=</span><span style="color: red;">"</span>languages<span style="color: red;">"</span> <span style="color: red;">value=</span><span style="color: red;">"</span>japanese<span style="color: red;">"</span><span style="color: blue;">></span></li><li><span style="color: blue;"><label</span> <span style="color: red;">for=</span><span style="color: red;">"</span>jp<span style="color: red;">"</span><span style="color: blue;">></span>日本<span style="color: blue;"></label</span><span style="color: blue;">></span></li></ul></pre>
4464. <a class="elifnur" href="https://code.k-html.com/kodlar/rde.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
4465. <br /><br />
4466. <p>Aşağıdaki örnekte, ilk gösterilen varsayılan olarak seçili olarak üç <span>radyo düğmesi</span> görüntülüyoruz.</p>
4467. <pre class="code"><ul class="ucode"><li><span style="color: blue;"><input</span> <span style="color: red;">type=</span><span style="color: red;">"</span>radio<span style="color: red;">"</span> <span style="color: red;">id=</span><span style="color: red;">"</span>tr<span style="color: red;">"</span> <span style="color: red;">name=</span><span style="color: red;">"</span>languages<span style="color: red;">"</span> <span style="color: red;">value=</span><span style="color: red;">"</span>turkish<span style="color: red;">" checked</span><span style="color: blue;">></span></li><li><span style="color: blue;"><label</span> <span style="color: red;">for=</span><span style="color: red;">"</span>tr<span style="color: red;">"</span><span style="color: blue;">></span>Türkçe<span style="color: blue;"></label</span><span style="color: blue;">></span><span style="color: blue;"><br></span></li><li><br /></li><li><span style="color: blue;"><input</span> <span style="color: red;">type=</span><span style="color: red;">"</span>radio<span style="color: red;">"</span> <span style="color: red;">id=</span><span style="color: red;">"</span>en<span style="color: red;">"</span> <span style="color: red;">name=</span><span style="color: red;">"</span>languages<span style="color: red;">"</span> <span style="color: red;">value=</span><span style="color: red;">"</span>english<span style="color: red;">"</span><span style="color: blue;">></span></li><li><span style="color: blue;"><label</span> <span style="color: red;">for=</span><span style="color: red;">"</span>en<span style="color: red;">"</span><span style="color: blue;">></span>English<span style="color: blue;"></label</span><span style="color: blue;">></span><span style="color: blue;"><br></span></li><li><br /></li><li><span style="color: blue;"><input</span> <span style="color: red;">type=</span><span style="color: red;">"</span>radio<span style="color: red;">"</span> <span style="color: red;">id=</span><span style="color: red;">"</span>jp<span style="color: red;">"</span> <span style="color: red;">name=</span><span style="color: red;">"</span>languages<span style="color: red;">"</span> <span style="color: red;">value=</span><span style="color: red;">"</span>japanese<span style="color: red;">"</span><span style="color: blue;">></span></li><li><span style="color: blue;"><label</span> <span style="color: red;">for=</span><span style="color: red;">"</span>jp<span style="color: red;">"</span><span style="color: blue;">></span>日本<span style="color: blue;"></label</span><span style="color: blue;">></span></li></ul></pre>
4468. <a class="elifnur" href="https://code.k-html.com/kodlar/rde2.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
4469. <br /><br />
4470. <p>Aşağıdaki örnekte, ilki varsayılan olarak seçili olarak gösterilen ve üçüncüsü kullanıcının değerini değiştirememesi için inaktif, üç radyo düğmesi ekledim.</p>
4471. <pre class="code"><ul class="ucode"><li><span style="color: blue;"><input</span> <span style="color: red;">type=</span><span style="color: red;">"</span>radio<span style="color: red;">"</span> <span style="color: red;">id=</span><span style="color: red;">"</span>tr<span style="color: red;">"</span> <span style="color: red;">name=</span><span style="color: red;">"</span>languages<span style="color: red;">"</span> <span style="color: red;">value=</span><span style="color: red;">"</span>turkish<span style="color: red;">" checked</span><span style="color: blue;">></span></li><li><span style="color: blue;"><label</span> <span style="color: red;">for=</span><span style="color: red;">"</span>tr<span style="color: red;">"</span><span style="color: blue;">></span>Türkçe<span style="color: blue;"></label</span><span style="color: blue;">></span><span style="color: blue;"><br></span></li><li><br /></li><li><span style="color: blue;"><input</span> <span style="color: red;">type=</span><span style="color: red;">"</span>radio<span style="color: red;">"</span> <span style="color: red;">id=</span><span style="color: red;">"</span>en<span style="color: red;">"</span> <span style="color: red;">name=</span><span style="color: red;">"</span>languages<span style="color: red;">"</span> <span style="color: red;">value=</span><span style="color: red;">"</span>english<span style="color: red;">"</span><span style="color: blue;">></span></li><li><span style="color: blue;"><label</span> <span style="color: red;">for=</span><span style="color: red;">"</span>en<span style="color: red;">"</span><span style="color: blue;">></span>English<span style="color: blue;"></label</span><span style="color: blue;">></span><span style="color: blue;"><br></span></li><li><br /></li><li><span style="color: blue;"><input</span> <span style="color: red;">type=</span><span style="color: red;">"</span>radio<span style="color: red;">"</span> <span style="color: red;">id=</span><span style="color: red;">"</span>jp<span style="color: red;">"</span> <span style="color: red;">name=</span><span style="color: red;">"</span>languages<span style="color: red;">"</span> <span style="color: red;">value=</span><span style="color: red;">"</span>japanese<span style="color: red;">" disabled</span><span style="color: blue;">></span></li><li><span style="color: blue;"><label</span> <span style="color: red;">for=</span><span style="color: red;">"</span>jp<span style="color: red;">"</span><span style="color: blue;">></span>日本<span style="color: blue;"></label</span><span style="color: blue;">></span></li></ul></pre>
4472. <a class="elifnur" href="https://code.k-html.com/kodlar/rde3.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
4473. <br /><br>
4474.  <p>Aşağıdaki örnekte, her gruptaki ilk düğme varsayılan olarak seçili olarak gösterilen iki <span>radyo düğmesi</span> grubu ekledim.</p>
4475.  <p>Birinci gruba cinsiyet, ikinci gruba ise <span>dil</span> adını verdim.</p>
4476.  <pre class="code"><ul class="ucode"><li><span style="color: #00008B;"><!--<span style="color: #00008B;"></span> Cinsiyet adındaki her radyo düğmesi ilk gruba aittir <span style="color: #00008B;">--></span></span></li><li><span style="color: blue"><input</span> <span style="color: red">type=</span><span style="color: red">"</span>radio<span style="color: red">"</span> <span style="color: red">id=</span><span style="color: red">"</span>male<span style="color: red">"</span> <span style="color: red">name=</span><span style="color: red">"</span>cinsiyet<span style="color: red">"</span> <span style="color: red">value=</span><span style="color: red">"</span>male<span style="color: red">"</span> <span style="color: red">checked</span><span style="color: blue">></span></li><li><span style="color: blue"><label</span> <span style="color: red">for=</span><span style="color: red">"</span>male<span style="color: red">"</span><span style="color: blue">></span>Erkek<span style="color: blue"></label</span><span style="color: blue">></span><span style="color: blue"><b</span>r<span style="color: blue">></span></li><li></li><li><span style="color: blue"><input</span> <span style="color: red">type=</span><span style="color: red">"</span>radio<span style="color: red">"</span> <span style="color: red">id=</span><span style="color: red">"</span>female<span style="color: red">"</span> <span style="color: red">name=</span><span style="color: red">"</span>cinsiyet<span style="color: red">"</span> <span style="color: red">value=</span><span style="color: red">"</span>female<span style="color: red">"</span><span style="color: blue">></span></li><li><span style="color: blue"><label</span> <span style="color: red">for=</span><span style="color: red">"</span>female<span style="color: red">"</span><span style="color: blue">></span>Kadın<span style="color: blue"></label</span><span style="color: blue">></span><span style="color: blue"><b</span>r<span style="color: blue">></span></li><li></li><li><span style="color: #00008B;"><!--<span style="color: #00008B;"></span> dil adındaki her radyo düğmesi ikinci gruba aittir <span style="color: #00008B;">--></span></span></li><li><span style="color: blue"><input</span> <span style="color: red">type=</span><span style="color: red">"</span>radio<span style="color: red">"</span> <span style="color: red">id=</span><span style="color: red">"</span>tr<span style="color: red">"</span> <span style="color: red">name=</span><span style="color: red">"</span>dil<span style="color: red">"</span> <span style="color: red">value=</span><span style="color: red">"</span>turkish<span style="color: red">" checked</span><span style="color: blue">></span></li><li><span style="color: blue"><label</span> <span style="color: red">for=</span><span style="color: red">"</span>tr<span style="color: red">"</span><span style="color: blue">></span>Türkçe<span style="color: blue"></label</span><span style="color: blue">></span><span style="color: blue"><b</span>r<span style="color: blue">></span></li><li></li><li><span style="color: blue"><input</span> <span style="color: red">type=</span><span style="color: red">"</span>radio<span style="color: red">"</span> <span style="color: red">id=</span><span style="color: red">"</span>ar<span style="color: red">"</span> <span style="color: red">name=</span><span style="color: red">"</span>dil<span style="color: red">"</span> <span style="color: red">value=</span><span style="color: red">"</span>Arabic<span style="color: red">"</span><span style="color: blue">></span></li><li><span style="color: blue"><label</span> <span style="color: red">for=</span><span style="color: red">"</span>ar<span style="color: red">"</span><span style="color: blue">></span>Arapça<span style="color: blue"></label</span><span style="color: blue">></span></li></ul></pre>
4477.  <a class="elifnur" href="https://code.k-html.com/kodlar/rde4.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
4478.  <div class="parent-links">  
4479.    <a class="btn btn-primary" href="https://www.k-html.com/2022/07/html-onay-kutular.html">
4480.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
4481.      önceki ders
4482.    </a>
4483.    <a class="btn btn-primary" href="https://www.k-html.com/2022/07/html-aclr-listeler.html">
4484.      sonraki ders
4485.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
4486.    </a>
4487.  </div>
4488.  
4489.  
4490.  
4491.  
4492.  
4493.  
4494.  
4495.  
4496.  
4497.  
4498.  
4499.  
4500.  
4501.  
4502.  
4503.  
4504.  
4505.  
4506.  
4507. </content><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/7463959017036532552'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/7463959017036532552'/><link rel='alternate' type='text/html' href='https://www.k-html.com/2022/07/html-radyo-dugmeleri.html' title='HTML Radyo Düğmeleri'/><author><name>HTML öğren</name><uri>http://www.blogger.com/profile/05938401370972816509</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB9hVaVznt_p0FHumsq5E1ns0HFhwUsz5N8PDjeIc1oE4O70yakyUZqpJJiZyKolfcNdZlaOrykdeVaT9wGLi4Gp6Ko2vw9JCv-r2AQBF1JjXNu_09kuRKvXx-7fys1Hw/s113/html.jpg'/></author></entry><entry><id>tag:blogger.com,1999:blog-624213398567285603.post-440368369681779223</id><published>2022-07-08T20:03:00.012+03:00</published><updated>2023-05-07T04:10:07.919+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="&lt;input&gt;"/><category scheme="http://www.blogger.com/atom/ns#" term="&lt;label&gt;"/><category scheme="http://www.blogger.com/atom/ns#" term="form"/><category scheme="http://www.blogger.com/atom/ns#" term="formlar"/><category scheme="http://www.blogger.com/atom/ns#" term="html"/><category scheme="http://www.blogger.com/atom/ns#" term="onay kutuları"/><title type='text'>HTML Onay Kutuları</title><content type='html'>&lt;div class=&quot;parent-links&quot;&gt;  
4508.    <a class="btn btn-primary" href="https://www.k-html.com/2022/05/html-formda-normal-dugmeler.html">
4509.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
4510.      önceki ders
4511.    </a>
4512.    <a class="btn btn-primary" href="https://www.k-html.com/2022/07/html-radyo-dugmeleri.html">
4513.      sonraki ders
4514.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
4515.    </a>
4516.  
4517.  </div>
4518. <details open="">
4519.  <summary style="text-align: left;">Sayfa içeriği</summary>
4520.  <ul class="postcontent">
4521.  <li>
4522.  <b>›</b> <a href="https://www.k-html.com/2022/07/html-onay-kutular.html#okk"><strong>Onay kutusu konsepti</strong></a></li>
4523.    <li>
4524.  <b>›</b> <a href="https://www.k-html.com/2022/07/html-onay-kutular.html#oke"><strong>Onay kutusu eklemek</strong></a>
4525.      </li>
4526.     </ul>
4527.  </details>
4528. <hr class="hrkk" />
4529. <h2 id="okk">Onay kutusu konsepti</h2>
4530. <p><span>Onay kutusu</span>, tıklandığında seçildiğini belirten bir <u>onay işareti</u> gösteren ve tekrar tıklandığında artık seçili olmadığını belirtmek için onay işaretinin kaybolduğu kare şeklinde bir düğmedir.</p>
4531. <p>Genellikle, kullanıcının önüne birkaç seçeneği göstermek ve onlardan istediğini seçebilmesini ve hatta hepsini seçmesini sağlamak için onay kutularını kullanırız.</p>
4532. <hr />
4533. <h2 id="oke">Onay kutusu eklemek</h2>
4534. <p>Bir <span>onay kutusu</span> eklemek için <span style="color: blue;"><input</span> <span style="color: red;">type="</span>checkbox<span style="color: red;">"</span><span style="color: blue;">></span> gibi <span><input /></span> etiketini kullanabilirsin.</p>
4535. <p>Bu etikete aşağıdaki özellikleri ekleyebilirsin:</p>
4536. <ul>
4537. <li><span>id</span>: <span><label></span> etiketi ile linklemek istersek <span><label></span> ekliyoruz.</li>
4538. <li><span>name</span>: gönder butonuna tıklandığında içine yerleştirilen değerin gönderilmesi için ekliyoruz</li>
4539. <li><span>value</span>: Gönder butonuna tıklandığında gönderilecek değeri verir.
4540. </li><li><span>disabled</span>: soluk görünmesini ve değeri değişmez sağlamak için kullanılıyor.</li>
4541. <li><span>checked</span>: sayfa açıldığında varsayılan olarak kontrol edilmesini sağlamak için <span>checked</span> ekliyoruz.</li>
4542. </ul>
4543. <span class="br"></span>
4544. <h4>Teknik bilgi</h4>
4545. <p>kutunun yanında görüneceğin metin için, her zaman <span><label></span> etiketi ile yerleştir ve alana bağla, çünkü tarayıcı, kullanıcının ekli metni tıkladığında aynı kutuyu tıkladığını düşünecektir.</p>
4546. <br />
4547. <p>Aşağıdaki örnekte, her biri için farklı bir ad ve değere sahip üç onay kutusu ekledim.</p>
4548. <pre class="code"><ul class="ucode"><li><span style="color: blue;"><input</span> <span style="color: red;">type=</span><span style="color: red;">"</span>checkbox<span style="color: red;">"</span> <span style="color: red;">id=</span><span style="color: red;">"</span>tr<span style="color: red;">"</span> <span style="color: red;">name=</span><span style="color: red;">"</span>option1<span style="color: red;">"</span> <span style="color: red;">value=</span><span style="color: red;">"</span>turkish<span style="color: red;">"</span><span style="color: blue;">></span></li><li><span style="color: blue;"><label</span> <span style="color: red;">for=</span><span style="color: red;">"</span>tr<span style="color: red;">"</span><span style="color: blue;">></span>Türkçe<span style="color: blue;"></label</span><span style="color: blue;">></span><span style="color: blue;"><br></span></li><li><br /></li><li><span style="color: blue;"><input</span> <span style="color: red;">type=</span><span style="color: red;">"</span>checkbox<span style="color: red;">"</span> <span style="color: red;">id=</span><span style="color: red;">"</span>en<span style="color: red;">"</span> <span style="color: red;">name=</span><span style="color: red;">"</span>option2<span style="color: red;">"</span> <span style="color: red;">value=</span><span style="color: red;">"</span>english<span style="color: red;">"</span><span style="color: blue;">></span></li><li><span style="color: blue;"><label</span> <span style="color: red;">for=</span><span style="color: red;">"</span>en<span style="color: red;">"</span><span style="color: blue;">></span>English<span style="color: blue;"></label</span><span style="color: blue;">></span><span style="color: blue;"><br></span></li><li><br /></li><li><span style="color: blue;"><input</span> <span style="color: red;">type=</span><span style="color: red;">"</span>checkbox<span style="color: red;">"</span> <span style="color: red;">id=</span><span style="color: red;">"</span>jp<span style="color: red;">"</span> <span style="color: red;">name=</span><span style="color: red;">"</span>option3<span style="color: red;">"</span> <span style="color: red;">value=</span><span style="color: red;">"</span>japanese<span style="color: red;">"</span><span style="color: blue;">></span></li><li><span style="color: blue;"><label</span> <span style="color: red;">for=</span><span style="color: red;">"</span>jp<span style="color: red;">"</span><span style="color: blue;">></span>日本<span style="color: blue;"></label</span><span style="color: blue;">></span></li></ul></pre>
4549. <a class="elifnur" href="https://code.k-html.com/kodlar/oke.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
4550. <br /><br />
4551. <p>Aşağıdaki örnekte, ilki varsayılan olarak seçili olarak gösterilen üç onay kutusu görüntülüyoruz.</p>
4552. <pre class="code"><ul class="ucode"><li><span style="color: blue;"><input</span> <span style="color: red;">type=</span><span style="color: red;">"</span>checkbox<span style="color: red;">"</span> <span style="color: red;">id=</span><span style="color: red;">"</span>tr<span style="color: red;">"</span> <span style="color: red;">name=</span><span style="color: red;">"</span>option1<span style="color: red;">"</span> <span style="color: red;">value=</span><span style="color: red;">"</span>turkish<span style="color: red;">" checked</span><span style="color: blue;">></span></li><li><span style="color: blue;"><label</span> <span style="color: red;">for=</span><span style="color: red;">"</span>tr<span style="color: red;">"</span><span style="color: blue;">></span>Türkçe<span style="color: blue;"></label</span><span style="color: blue;">></span><span style="color: blue;"><br></span></li><li><br /></li><li><span style="color: blue;"><input</span> <span style="color: red;">type=</span><span style="color: red;">"</span>checkbox<span style="color: red;">"</span> <span style="color: red;">id=</span><span style="color: red;">"</span>en<span style="color: red;">"</span> <span style="color: red;">name=</span><span style="color: red;">"</span>option2<span style="color: red;">"</span> <span style="color: red;">value=</span><span style="color: red;">"</span>english<span style="color: red;">"</span><span style="color: blue;">></span></li><li><span style="color: blue;"><label</span> <span style="color: red;">for=</span><span style="color: red;">"</span>en<span style="color: red;">"</span><span style="color: blue;">></span>English<span style="color: blue;"></label</span><span style="color: blue;">></span><span style="color: blue;"><br></span></li><li><br /></li><li><span style="color: blue;"><input</span> <span style="color: red;">type=</span><span style="color: red;">"</span>checkbox<span style="color: red;">"</span> <span style="color: red;">id=</span><span style="color: red;">"</span>jp<span style="color: red;">"</span> <span style="color: red;">name=</span><span style="color: red;">"</span>option3<span style="color: red;">"</span> <span style="color: red;">value=</span><span style="color: red;">"</span>japanese<span style="color: red;">"</span><span style="color: blue;">></span></li><li><span style="color: blue;"><label</span> <span style="color: red;">for=</span><span style="color: red;">"</span>jp<span style="color: red;">"</span><span style="color: blue;">></span>日本<span style="color: blue;"></label</span><span style="color: blue;">></span></li></ul></pre>
4553. <a class="elifnur" href="https://code.k-html.com/kodlar/oke2.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
4554. <br /><br />
4555. <p>Aşağıdaki örnekte, ilki varsayılan olarak seçili olarak gösterilen ve ayrıca kullanıcının değerini değiştirememesi için etkin olmayan üç onay kutusu görüntüledim.</p>
4556. <pre class="code"><ul class="ucode"><li><span style="color: blue;"><input</span> <span style="color: red;">type=</span><span style="color: red;">"</span>checkbox<span style="color: red;">"</span> <span style="color: red;">id=</span><span style="color: red;">"</span>tr<span style="color: red;">"</span> <span style="color: red;">name=</span><span style="color: red;">"</span>option1<span style="color: red;">"</span> <span style="color: red;">value=</span><span style="color: red;">"</span>turkish<span style="color: red;">" checked disabled</span><span style="color: blue;">></span></li><li><span style="color: blue;"><label</span> <span style="color: red;">for=</span><span style="color: red;">"</span>tr<span style="color: red;">"</span><span style="color: blue;">></span>Türkçe<span style="color: blue;"></label</span><span style="color: blue;">></span><span style="color: blue;"><br></span></li><li><br /></li><li><span style="color: blue;"><input</span> <span style="color: red;">type=</span><span style="color: red;">"</span>checkbox<span style="color: red;">"</span> <span style="color: red;">id=</span><span style="color: red;">"</span>en<span style="color: red;">"</span> <span style="color: red;">name=</span><span style="color: red;">"</span>option2<span style="color: red;">"</span> <span style="color: red;">value=</span><span style="color: red;">"</span>english<span style="color: red;">"</span><span style="color: blue;">></span></li><li><span style="color: blue;"><label</span> <span style="color: red;">for=</span><span style="color: red;">"</span>en<span style="color: red;">"</span><span style="color: blue;">></span>English<span style="color: blue;"></label</span><span style="color: blue;">></span><span style="color: blue;"><br></span></li><li><br /></li><li><span style="color: blue;"><input</span> <span style="color: red;">type=</span><span style="color: red;">"</span>checkbox<span style="color: red;">"</span> <span style="color: red;">id=</span><span style="color: red;">"</span>jp<span style="color: red;">"</span> <span style="color: red;">name=</span><span style="color: red;">"</span>option3<span style="color: red;">"</span> <span style="color: red;">value=</span><span style="color: red;">"</span>japanese<span style="color: red;">"</span><span style="color: blue;">></span></li><li><span style="color: blue;"><label</span> <span style="color: red;">for=</span><span style="color: red;">"</span>jp<span style="color: red;">"</span><span style="color: blue;">></span>日本<span style="color: blue;"></label</span><span style="color: blue;">></span></li></ul></pre>
4557. <a class="elifnur" href="https://code.k-html.com/kodlar/oke3.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
4558. <div class="parent-links">  
4559.    <a class="btn btn-primary" href="https://www.k-html.com/2022/05/html-formda-normal-dugmeler.html">
4560.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
4561.      önceki ders
4562.    </a>
4563.    <a class="btn btn-primary" href="https://www.k-html.com/2022/07/html-radyo-dugmeleri.html">
4564.      sonraki ders
4565.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
4566.    </a>
4567.  
4568.  &lt;/div&gt;</content><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/440368369681779223'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/440368369681779223'/><link rel='alternate' type='text/html' href='https://www.k-html.com/2022/07/html-onay-kutular.html' title='HTML Onay Kutuları'/><author><name>HTML öğren</name><uri>http://www.blogger.com/profile/05938401370972816509</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB9hVaVznt_p0FHumsq5E1ns0HFhwUsz5N8PDjeIc1oE4O70yakyUZqpJJiZyKolfcNdZlaOrykdeVaT9wGLi4Gp6Ko2vw9JCv-r2AQBF1JjXNu_09kuRKvXx-7fys1Hw/s113/html.jpg'/></author></entry><entry><id>tag:blogger.com,1999:blog-624213398567285603.post-8171063874357978447</id><published>2022-06-27T23:00:00.009+03:00</published><updated>2023-05-06T21:35:53.311+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="html"/><category scheme="http://www.blogger.com/atom/ns#" term="HTML ne kadar zor"/><category scheme="http://www.blogger.com/atom/ns#" term="HTML zor mu"/><title type='text'>HTML Öğrenmek Ne Kadar Zor?</title><content type='html'>&lt;div class=&quot;parent-links&quot;&gt;  
4569.    <a class="btn btn-primary" href="https://www.k-html.com/2022/06/html5-nedir.html">
4570.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
4571.      önceki ders
4572.    </a>
4573.    <a class="btn btn-primary" href="https://www.k-html.com/2022/02/html-iframe-nedir.html">
4574.      HTML Iframe Nedir
4575.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">
4576.  <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>
4577.  <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/>
4578. </svg>
4579.    </a>
4580.  
4581.  </div>
4582. <p>Dijital dünyanın birçok temel direği arasında <span>HTML</span>, uzun süredir var olan bir şeydir. <span>Web</span> sayfaları ve uygulamalar oluşturmak için kullanılır ve bugüne kadar en yaygın kullanılan kodlama dillerinden biri olmaya devam etmektedir.</p>
4583. <p>Bu makaleyi okuyorsan, muhtemelen <span>HTML</span> öğrenmekle ilgileniyorsundur. Belki bir <span>web</span> geliştiricisi veya <span>UX</span> tasarımcısı olmayı bile düşünüyorsun. Bu makalede, <span>HTML</span>'nin temellerini, neden yararlı olduğunu ve <span>HTML</span>'de ustalaşmayı nasıl öğrenebileceğini açıklayacağım. Ancak ilerlemeden önce, aşağıdaki bldirim bilmeni gerekir.</p><div style="background-color: #cadeea; border: 0px; box-sizing: border-box; color: black; cursor: pointer; font-size: 13px; margin: 0px auto 20px; max-width: 100%; padding: 30px;"><center><h3 style="font-size: 24px;">HTML Dersler</h3><p style="font-size: 16px;">HTML Dili öğrenmek istiyorsan <span style="clear: both;
4584.    
4585.    overflow: hidden;
4586.    white-space: nowrap;">k-html.com</span> sana en iyi sonuç için tam ücretsiz olarak bir kurs hazırladı.<br /><span class="br"></span> Dili öğrenmek için bütün ihtiyacın olduğu şeyler ve araçlar tam ücretsiz olarak kullanabilirsin.</p><button style="appearance: none; background-color: #2a32c5; border-color: rgb(42, 50, 197); border-radius: 1.5rem; border-style: solid; border-width: 1px; color: white; cursor: pointer; display: block; font-size: 1rem; font-weight: 400; height: 4rem; letter-spacing: 1.5px; margin: 0px auto; min-width: 190px; padding: 10px 22px; text-transform: uppercase; width: auto;"><a href="https://www.k-html.com/2021/05/html-dile-genel-baks.html" style="color: white; outline: none; padding: 0px; text-decoration-line: none; transition-duration: 0.2s;" target="_blank">Öğrenmeyi başla</a></button></center></div>
4587. <br /> <br />
4588. <p><strong>HyperText</strong> : "<span style="color: orange">Köprü Metni</span>", "metin içinde metin" olarak tanımlanabilir. İçinde bağlantı bulunan herhangi bir metne hiper metin denir. Bu nedenle, bir <span style="color: orange">web</span> sayfasındaki seni başka bir <span>web</span> sayfasına gönderen bir bağlantıya tıkladığında, bu bir hiper metne tıkladığın anlamına gelir. İki veya daha fazla <span style="color: orange">web</span> sayfasını veya <span>HTML</span> belgesini birbirine bağlamak için bir bağlantıdır.</p>
4589. <p><strong>Markup Language</strong>: <span style="orange">İşaretleme dili</span>,  metin belgesine mizanpaj ve biçimlendirme değişiklikleri uygulamak için kullanılan bir bilgisayar dilidir. İşaretleme dili, metnini dinamik olduğu kadar daha etkileşimli olmasına da yardımcı olur. <a href="https://www.k-html.com/2021/07/html-resimler.html" target="_blank">Resimlere</a>, <a href="https://www.k-html.com/2021/05/html-tablolar.html" target="_blank">tablolara</a> ve <a href="https://www.k-html.com/2021/05/html-baglantlar.html" target="_blank">bağlantılara</a> dönüştürmek için de kullanılabilir.</p>
4590. <hr class="ens" />
4591. <h2>Neden HTML Öğrenmelisin?</h2>
4592. <p><span>HTML</span> öğrenmenin senin için değerli olmasının birkaç nedeni vardır:</p>
4593. <ul>
4594. <li>En yaygın kullanılan programlama dillerinden biridir.</li>
4595. <li>Çeşitli web geliştirme ayarlarında kullanışlıdır.</li>
4596. <li>HTML, profesyonel Yazılım Mühendisleri kadar programcı olmayanlar için de yararlıdır.</li>
4597. <li>Seni bir kodlayıcı gibi düşünmeyi öğretecek.</li>
4598.  </ul>
4599. <p>
4600. Kelimenin tam anlamıyla yüzlerce programlama dili var. Hepsinin kendi yetenekleri ve kullanımları vardır. Bu nedenle kendini özellikle <span>HTML</span>'nin zaman ayırmaya değer olup olmadığını sorabilirsin.
4601. </p>
4602. <p><span>HTML</span>, en yaygın kullanılan biçimlendirme dillerinden biridir. Bu nedenle, sonunda video oyunu programlama, ön uç veya arka uç veya uygulama geliştirmede uzmanlaşmaya karar verirsen, yol boyunca muhtemelen birkaç satır HTML ile karşılaşacaksın.</p>
4603.  
4604. <p><span>HTML</span> çok yaygın olduğu için bu, programcı olmayanlar için bile faydalı bir beceridir. Bir <span style="color: orange">web</span> sitesine içerik eklemeni veya tasarım değişiklikleri önermeni sağlayan bir görevdeysen, bazı <span>HTML</span> temellerini bilmek, geliştirme ekibine güvenmek yerine gerekli değişiklikleri kendi başını yapmanı olanak tanır.</p>
4605. <p>Son olarak, <span>HTML</span> öğrenmek, Yazılım Mühendisi olmanın temelini oluşturmanı yardımcı olacaktır. Dili öğrendikçe yavaş yavaş bir programcı gibi düşünmeye başlayacaksın. Diğer daha nüanslı dilleri öğrenmek için zemin hazırlar.</p>
4606. <p>Artık değerine ikna olduğunu göre, yeni başlayan programcılar için öğrenmenin ne kadar zor olduğunu keşfedelim.</p>
4607. <hr />
4608. <h2 style="text-align:center">HTML Öğrenmek Ne Kadar Zor? Ve HTML'yi Nasıl Öğrenirsin?</h2>
4609. <p>Temel bilgiler oldukça hızlı bir şekilde ele alınabildiğinden, <span>HTML</span>'nin öğrenilmesi nispeten kolaydır. Ve yaratmanı izin verdiği şeyle, aynı zamanda oldukça güçlü bir araçtır. Dili tasarlamak ve sürdürmekle görevli kuruluş olan <span>World Wide Web Konsorsiyumu</span> veya <span>W3C</span>'nin yönetimi altında, <span>HTML</span> sürekli olarak geliştirmelerden geçmektedir. Amaçları, hızla büyüyen internet izleyicisinin taleplerini karşılamaktır.</p>
4610. <p><span>HTML</span> öğrenmeni ne kadar sürdüğü, onu ne için kullanmak istediğini bağlıdır. Basitçe <span>HTML</span> ilkelerini bilmek, kodları okumak ve ezberlemek için birkaç gün sürmelidir. Aslında, temel bilgileri bir saat kadar kısa bir sürede öğrenebilirsin! Etiketleri anladıktan sonra, kendi <span>HTML</span> sayfalarını oluşturmaya bile başlayabilirsin!</p>
4611. <p>Ancak, <span>HTML</span> kullanmak ve etkileşimli <span style="color: orange">web</span> siteleri tasarlamak tamamen farklı bir hikaye. İyi bir <span style="color: orange">web</span> sitesi tasarlamanın yaklaşık %50 beceri ve %50 yetenek olduğuna inanıyoruz. <span>HTML</span> tekniklerini öğrenmek ve doğru etiket kullanımını bilmek işini büyük ölçüde iyileştirebilir.</p>
4612.  <p>Ayrıca, odaklandığın hedef kitlenin yanı sıra iyi tasarım bilgisine sahip olmak, <span style="color: orange">web</span> siteni başarı şansını artıracaktır. Neyse ki, tüm bu gereksinimler araştırılabilir ve yerine getirilebilir. Sadece çaba göstermeye istekli olmanı gerekir. Bu sonuçta seni daha iyi <span style="color: orange">web</span> siteleri oluşturmaya yönlendirecektir.</p>
4613. <p><span style="color: orange">Web</span> siteni çalıştırmaya başladığında, ondan <span>HTML</span>'ye ek olarak öğrenebileceğin çok çeşitli becerilere tanık olduğuna şaşıracaksın. Bu beceriler, grafik tasarım ve tipografi yönlerinden bilgisayar programlamaya kadar değişebilir. Bilgisayarlarla genel verimliliğin çok artacağını fark edeceksin.</p>
4614. <p>Bununla birlikte, <span>HTML</span> öğrenmenin en iyi yanı, her zaman çevrimiçi olmanı gerek olmamasıdır! Tüm <span style="color: orange">web</span> siteni kodunu çevrimdışı olarak yazabilir ve bilgisayarını kaydedebilirsin. Ardından, tek yapmanı gereken tüm dosyaları <span style="color: orange">web</span>'e aktarmak. Ne zaman ekleyecek yeni içeriğin varsa, bunu <span style="color: orange">web</span> siteni mevcut çevrimiçi sürümüne yüklemeni yeterlidir. işte bu kadar!</p>
4615. <p><span>HTML</span> kodu yazmak için özel bir yazılıma ihtiyacın olmamasına ve herhangi bir metin düzenleyicisi işi yapmasına rağmen, iyi bir <span>HTML</span> düzenleyicisi daha fazla işlevsellik ve kullanım kolaylığı sunacaktır. <span>HTML</span> kodunu yazarken, <span>World Wide Web Consortium</span>'da ücretsiz olarak sunulana benzer bir <span>HTML</span> doğrulayıcı kullanarak doğrulamak her zaman iyi bir fikirdir.</p>
4616. <p>Onunla eğlen ve dene! Ancak işini bittiğinde gereksiz tüm kodları kaldırmayı unutma. Kod ne kadar kısa olursa, tarayıcının yüklenmesi o kadar kolay olur.</p>
4617. <hr />
4618. <h2 style="text-align: center">Profesyonel Programcı Olmak</h2>
4619. <p>Umarım bu makale sana <span>HTML</span> ile ilgili bazı görüşler ve sorulara cevaplar vermiştir. <span>HTML</span>, belki de ustalaşması en kolay ön uç programlama dillerinden biridir. Yani <span>HTML</span> öğrenmek istiyorsan, Şimdiden başla! Sabır ve pratikle bu popüler dilden en iyi şekilde yararlanmayı öğreneceksin.</p>
4620. <p><span>HTML</span>'de profesyonel olmak, ondan ne beklediğini bağlıdır ve dili her kullandığında daha iyi kullanacaksın.</p>
4621. <div class="parent-links">  
4622.    <a class="btn btn-primary" href="https://www.k-html.com/2022/06/html5-nedir.html">
4623.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
4624.      önceki ders
4625.    </a>
4626.    <a class="btn btn-primary" href="https://www.k-html.com/2022/02/html-iframe-nedir.html">
4627.      HTML Iframe Nedir
4628.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">
4629.  <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>
4630.  <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/>
4631. </svg>
4632.    </a>
4633.  
4634.  &lt;/div&gt;</content><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/8171063874357978447'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/8171063874357978447'/><link rel='alternate' type='text/html' href='https://www.k-html.com/2022/06/html-ogrenmek-ne-kadar-zor.html' title='HTML Öğrenmek Ne Kadar Zor?'/><author><name>HTML öğren</name><uri>http://www.blogger.com/profile/05938401370972816509</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB9hVaVznt_p0FHumsq5E1ns0HFhwUsz5N8PDjeIc1oE4O70yakyUZqpJJiZyKolfcNdZlaOrykdeVaT9wGLi4Gp6Ko2vw9JCv-r2AQBF1JjXNu_09kuRKvXx-7fys1Hw/s113/html.jpg'/></author></entry><entry><id>tag:blogger.com,1999:blog-624213398567285603.post-9005781017984643881</id><published>2022-06-12T10:41:00.028+03:00</published><updated>2023-05-07T04:09:22.777+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="html"/><category scheme="http://www.blogger.com/atom/ns#" term="html nedir?"/><category scheme="http://www.blogger.com/atom/ns#" term="html5"/><title type='text'>HTML5 Nedir?</title><content type='html'>
4635. <div class="parent-links">  
4636.    <a class="btn btn-primary" href="https://www.k-html.com/2022/05/html-giris-alanlar.html">
4637.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
4638.      önceki ders
4639.    </a>
4640.    <a class="btn btn-primary" href="https://www.k-html.com/2022/06/html-ogrenmek-ne-kadar-zor.html">
4641.      sonraki ders
4642.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
4643.    </a>
4644.  
4645.  </div>
4646. <p><span>Hyper Text Markup Language</span>, kısaltması <span>HTML5</span> anlamına gelen bir biçimlendirme dilidir. <span style="color: orange;"><span style="color: orange;">Web</span></span> sayfalarının görünümünün değiştirilmesinin yanı sıra görünümlerinde ayarlamalar yapılmasını sağlayan bir sistemdir. Ayrıca <span style="color: orange;"><span style="color: orange;">web</span></span> için içerik yapılandırmak ve sunmak için kullanılır.
4647. <br />
4648.  <span>HTML5</span> ile <a href="https://brave.com/" rel="nofollow" target="_blank">Brave</a>, <a href="https://www.mozilla.org/en-US/firefox/new/" rel="nofollow" target="_blank">Firefox</a>, <a href="https://www.google.com/chrome/" rel="nofollow" target="_blank">Chrome</a>, <a href="https://www.microsoft.com/en-us/download/internet-explorer.aspx" rel="nofollow" target="_blank">Explorer</a>, <a href="https://www.apple.com/safari/" rel="nofollow" target="_blank">Safari</a> ve daha fazlası gibi tarayıcılar belirli bir <span style="color: orange;"><span style="color: orange;">web</span></span> sayfasının nasıl görüntüleneceğini, öğelerin nerede olduğunu, görüntülerin nereye yerleştirileceğini ve metnin nereye yerleştirileceğini bilebilir.
4649. <br />
4650. <span>HTML5</span> dışında, bir siteye biçim ve etkileşim vermek için gerekli olan başka diller de vardır, ancak herhangi bir sayfanın temel yapısı önce <span>HTML5</span> dilinde tanımlanır.</p>
4651.  
4652. <details open="">
4653. <summary style="text-align: left;">Sayfa içeriği</summary>
4654.  <ul class="postcontent">
4655. <li>
4656.  <b>›</b> <a href="https://www.k-html.com/2022/06/html5-nedir.html#hnd"><strong>HTML ne demek?</strong></a>
4657.      </li>
4658.  <li>
4659.  <b>›</b> <a href="https://www.k-html.com/2022/06/html5-nedir.html#hhbkhon"><strong>HTML5 hakkında bu kadar harika olan ne?</strong></a></li>
4660.    <li>
4661.  <b>›</b> <a href="https://www.k-html.com/2022/06/html5-nedir.html#hny"><strong>HTML5 ne yapabilir?</strong></a>
4662.      </li>
4663.      <li>
4664.  <b>›</b> <a href="https://www.k-html.com/2022/06/html5-nedir.html#he"><strong>HTML etiketleri</strong></a>
4665.      </li>
4666.     <li>
4667.  <b>›</b> <a href="https://www.k-html.com/2022/06/html5-nedir.html#ho"><strong>HTML öğeleri</strong></a>
4668.      </li><li>
4669.  <b>›</b> <a href="https://www.k-html.com/2022/06/html5-nedir.html#ha"><strong>HTML özellikleri</strong></a>
4670.      </li><li>
4671.  <b>›</b> <a href="https://www.k-html.com/2022/06/html5-nedir.html#shn"><strong>Semantik HTML nedir?</strong></a>
4672.      </li><li>
4673.  <b>›</b> <a href="https://www.k-html.com/2022/06/html5-nedir.html#hno"><strong>HTML5'i nereden öğreneceğim?</strong></a>
4674.      </li>
4675.     </ul>
4676.  </details>
4677.  
4678. <a href="https://src.k-html.com/html-nedir.png" style="margin-left: 50px;"><img alt="HTML nedir - Dile genel açıklama" height="222" src="https://src.k-html.com/html-nedir.png" width="431" /></a>
4679. <hr class="hrkk" />
4680.  <h2 id="hnd"><span>HTML</span> ne demek?</h2>
4681.  <p><span>HTML</span>'yi anlamak için önce kelimenin anlamını öğrenelim.</p>
4682. <p><span>HTML</span>, <span>Hypertext Markup Language</span> anlamına gelen Köprü Metni İşaretleme Dili'nin kısaltmasıdır.</p>
4683.  <ul>
4684.    <li>Hypertext: İlgili öğeleri iletmek için düzenlenen metin (genellikle görüntülerin yanı sıra yerleştirmeler de içerir).</li>
4685.    <li>Markup: Basılı veya elektronik kopya biçiminde yazdırılacak herhangi bir şeyi dizmek için bir stil kılavuzu.</li>
4686.    <li>Language: Bir bilgisayar sisteminin anladığı ve komutları yorumlamak için kullandığı bir dil.</li>
4687.  </ul>
4688.  <p><span>HTML</span>, <span style="color: orange;">web</span> sayfalarının yapısını belirler. Bu yapı tek başına bir <span style="color: orange;">web</span> sayfasının iyi ve etkileşimli görünmesi için yeterli değildir. Böylece <span>HTML</span>'ni güzelleştirmek ve etkileşim eklemek için <span style="color: blue;">css</span> ve <span style="color: orange;">javascript</span> gibi diller kullanacaksın.</p>
4689.  <p>Bu durumda, bu üç dilli (<span>HTML</span>, <span style="color: blue;">css</span> ve <span style="color: orange;">javascript</span>) şu şekilde parçalamayı seviyorum: bunlar bir insan vücudu gibidir.</p>
4690.  <ul>
4691.    <li><span>HTML</span> iskelettir,</li>
4692.    <li><span style="color: blue;">css</span> cilt ve dış görünüştür,</li>
4693.    <li><span style="color: orange;">javascript</span> ise yapıya ve cilde hayat veren dolaşım, sindirim ve solunum sistemleridir.</li>
4694.    </ul>
4695.  <p><span>HTML</span>, <span style="color: blue;">css</span> ve <span style="color: orange;">javascript</span>'e şu şekilde de bakabilirsin: <span>HTML</span> bir evin yapısıdır, <span style="color: blue;">css</span> iç ve dış dekordur ve <span style="color: orange;">javascript</span>, evi yaşanabilir kılan elektrik, su sistemi ve diğer birçok işlevsel özelliktir.</p>
4696.    <hr />
4697.  <h2 id="hhbkhon"><span>HTML5</span> hakkında bu kadar harika olan ne?</h2>
4698.  <p><span>HTML5</span>, tarayıcı eklentileri gibi ek yazılımlar gerektirmeden çevrimiçi yapmak isteyeceğin hemen her şeyi sunmak için tasarlanmıştır. Animasyondan uygulamalara, müzikten filmlere kadar her şeyi yapar ve tarayıcınızda çalışan inanılmaz derecede karmaşık uygulamalar oluşturmak için de kullanılabilir.
4699. <br />
4700. Daha Fazlada var. <span>HTML5</span> tescilli değildir, bu nedenle onu kullanmak için telif ücreti ödemeni gerekmez. Aynı zamanda çapraz platformdur, yani tablet veya akıllı telefon, netbook, dizüstü bilgisayar veya ultrabook veya Smart TV kullanmanı farketmez: tarayıcın <span>HTML5</span>'i destekliyorsa, kusursuz çalışması gerekir. Ve tüm tarayıcıların <span>HTML5</span>'i desteklediğini bilmeni istiyorum.</p>
4701.  <hr />
4702.  <h2 id="hny"><span>HTML5</span> ne yapabilir</h2>
4703.  <p><span>HTML</span> ile birçok şey yapabilir, mesela sayfaya <a href="https://www.k-html.com/2021/07/html-resimler.html" target="_blank">resimler</a>, <a href="https://www.k-html.com/2022/04/html-formlar.html" target="_blank">formlar</a>, <a href="https://www.k-html.com/2021/11/html-videolar.html" target="_blank">videolar</a> veya <a href="https://www.k-html.com/2021/12/html-sesleri.html" target="_blank">şarkılar</a> gibi ses klipleri ekleyebilir veya sayfa düzenleri, paragraflar veya aklınıza gelebilecek her şeyi ekleyebilirsin.</p>
4704. <p><span>HTML</span>, bir oyun veya <span style="color: orange;">web</span> sitesi oluşturabilir veya komut dosyaları oluşturabilir ve dili öğrenirken öğreneceğin birçok şeyi yapabilir.</p>
4705.  <hr />
4706.  <h2 id="he"><span>HTML</span> etiketleri</h2>
4707.  <p><span>HTML</span>, belirli bir <span style="color: orange;">web</span> sayfasının işaretlemesini tanımladığından, metnin, resimlerin veya diğer yerleştirmelerin belirli şekillerde görünmesini isteyeceksin.</p>
4708.  <p>Örneğin, bazı metinlerin büyük, diğer metnin küçük ve bazılarının kalın, <a href="https://www.k-html.com/2021/05/html-metin-bicimlendirme.html#miog" target="_blank">italik</a> veya madde işareti biçiminde olmasını isteyebilirsin.</p>
4709.    <p><span>HTML</span>'de bunu yapmanı izin veren "<strong>etiketler</strong>" vardır. Bu nedenle, <a href="https://www.k-html.com/2021/05/html-baslklar.html" target="_blank">başlıklar</a>, <a href="https://www.k-html.com/2021/05/html-paragraflar.html" target="_blank">paragraflar</a>, kalın harflerle yazılmış kelimeler, italik kelimeler ve daha fazlasını oluşturmak için etiketler vardır.</p>
4710.    <p>Aşağıdaki resim bir <span>HTML</span> etiketinin anatomisini açıklamaktadır:</p>
4711.  <a href="https://src.k-html.com/html-etiketinin-anatomisi.png"> <img alt="HTML etiketinin anatomisi" height="320" src="https://src.k-html.com/html-etiketinin-anatomisi.png" width="640" /></a><br /><br />
4712.    <hr />
4713.    <h2 id="ho"><span>HTML</span> öğeleri</h2>
4714.    <p>Öğe, açılış etiketi, içerik ve kapanış etiketinden oluşur.
4715. <br />Bazı öğeler boştur, yani bir kapanış etiketi yoktur, bunun yerine <span style="color: orange;">web</span> sayfasına eklemek istediğin içeriğe bir kaynak veya bağlantı içerir.</p>
4716.    <p>Boş bir öğeye örnek, görüntüleri bir <span style="color: orange;">web</span> sayfasına gömmek için kullandığın <span><img></span>'dir.</p>
4717.    <p><span>HTML</span> öğeleri genellikle etiketlerle birbirinin yerine kullanılır, ancak ikisi arasında çok az fark vardır. Öğe, açılış ve kapanış etiketinin ve ardından aradaki içeriğin birleşimidir.</p>
4718.    <p>Bir <span>HTML</span> öğesinin anatomisini görselleştirmeni yardımcı olması için başka bir resim yaptım:</p>
4719.   <a href="https://src.k-html.com/html-ogesinin-anatomisi.png"><img alt="HTML öğesinin anatomisi" height="320" src="https://src.k-html.com/html-ogesinin-anatomisi.png" width="640" /></a> <br /><br />
4720. <hr />
4721.  <h2 id="ha"><span>HTML</span> özellikleri</h2>
4722.  <p><span>HTML</span> etiketleri ayrıca özellik adında şeyi alır. Bu özellikler açılış etiketine yerleştirilir ve stil ve kimliklerden sınıflara kadar değişir. Öğe hakkında daha fazla bilgi ileten ve <span style="color: orange;">javascript</span> ile stil ve düzenleme gibi şeyler yapmanı yardımcı olan değerleri alırlar.</p>
4723. <p>Aşağıdaki infografikte açılış etiketi, "ens" değerine sahip bir class özellik içeriyor. Bu, öğeye stil vermek veya etkileşim için <span style="color: orange;">javascript</span> ile seçmek için kullanılabilir.</p>
4724.  <a href="https://src.k-html.com/html-ozellikler.png" target="_blank"><img alt="HTML özellikler" height="320" src="https://src.k-html.com/html-ozellikler.png" width="640" /></a>
4725.  <br /><br />
4726.    <p>Buraya temel bir <span>HTML</span> sayfasının anatomisi ekledim:</p>
4727.  <pre class="code"><ul class="ucode"><li><span style="color: grey;"><!DOCTYPE html></span></li><li><span style="color: blue;"><html</span><span style="color: blue;">></span></li><li>  <span style="color: blue;"><head</span><span style="color: blue;">></span></li><li>    <span style="color: blue;"><meta</span> <span style="color: red;">charset=</span><span style="color: red;">"</span>UTF-8<span style="color: red;">"</span> <span style="color: blue;">/</span><span style="color: blue;">></span></li><li>    <span style="color: blue;"><title</span><span style="color: blue;">></span>HTML'in tanımı<span style="color: blue;"></title</span><span style="color: blue;">></span></li><li>  <span style="color: blue;"></head</span><span style="color: blue;">></span></li><li>  <span style="color: blue;"><body</span><span style="color: blue;">></span></li><li>    <span style="color: orange;"><!--Metin ve resim gibi sayfa içeriği buraya girer<span style="color: orange;">--></span></span></li><li>  <span style="color: blue;"></body</span><span style="color: blue;">></span></li><li><span style="color: blue;"></html</span><span style="color: blue;">></span></li></ul></pre>
4728.    <p>Buradaki önemli kod parçalarına bakalım:</p>
4729. <ul>
4730.      <li><span style="color: grey;"><!DOCTYPE html></span>: Bu kodda <span>HTML5</span> kullandığımızı belirtir. <span>HTML5</span>'in tanıtımından önce, <span><!Doctype></span> etiketiyle hangi <span>HTML</span> sürümünü kodladığını açıkça belirtmeni gerekiyordu. Örneğin, <span>HTML4.0</span>, <span>3.2 </span>vb. Ama artık buna ihtiyacımız yok. Kodda <span>“html”</span> yazıldığında, tarayıcı otomatik olarak <span>HTML5</span>'te kod yazdığını varsayar.</li><span class="br"></span>
4731.      <li><span style="color: blue;"><html></html></span>: Her <span>HTML</span> belgesinin kökü veya en üst düzey öğesi. Diğer her öğe içine sarılmalıdır.</li><span class="br"></span>
4732.      <li><span style="color: blue;"><head></head></span>: <span>HTML</span> belgesinin en önemli bölümlerinden biridir. <span style="color: orange;">web</span> tarayıcıları, sayfa hakkında önemli bilgiler almak için <span>head</span> etiketlerinin içine bakar. Sayfa başlığı, stil sayfaları, <span>SEO</span> için meta bilgiler ve çok daha fazlası gibi bilgileri içerir.</li><span class="br"></span>
4733.      <li><span style="color: blue;"><meta /></span>: Bu, sayfayla ilgili meta bilgileri taşıyan boş bir öğedir. Bu tür bilgiler, yazarı, ne tür kodlama kullandığını (neredeyse her zaman UTF-8), yanıt verebilirlik, uyumluluk ve çok daha fazlasını içerebilir. <span style="color: orange;">Web</span> tarayıcıları, <span>SEO</span>'da çok önemli bir rol oynayacak olan web sayfası hakkında bilgi almak için her zaman meta etikete bakar.</li><span class="br"></span>
4734.      <li><span style="color: blue;"><title></title></span>: Bu, <span style="color: orange;">web</span> sayfasının başlığını tanımlar. Her zaman tarayıcı sekmesinde gösterilir. Mesela bu dersin başlığı 'HTML5 Nedir? ~ HTML öğren'</li><span class="br"></span>
4735.      <li><span style="color: blue;"><body></body></span>: <span>HTML</span> belgesinin tüm içeriği <span>body</span> etiketinin içinde bulunur. Tüm sayfada yalnızca bir <span><body></span> etiketi olabilir.</li><span class="br"></span>
4736.    </ul>
4737.  <hr />
4738.    <h2 id="shn">Semantik HTML nedir?</h2>
4739.    <p><span>Semantik HTML</span>, <span>HTML</span> etiketlerini ne için kullanıldıklarının gerçek anlamını ilettiği anlamına gelir.</p>
4740.    <p><span>Semantik</span>, 90'ların başında başlangıcından bu yana <span>HTML</span>'nin ayrılmaz bir parçası olmuştur. Ancak, <span style="color: blue;">CSS</span>'nin çoğu tarayıcıda çalışmaya başladığı 90'ların sonlarına kadar hiçbir zaman özel bir alaka kazanmadı.</p>
4741.    <p><span>Semantik HTML</span> ile, <span><div></span> ve <span><span></span> ingilizce dili bağımsız etiketler istenmeyen ve sevilmediği gibi sonraki kodlara kıyasla önerilmez, <span><header></span>, <span><nav></span>, <span><main></span>, <span><section></span>, <span><footer></span> ve <span><article></span> gibi yaptıklarının aynısını yapabildiği anlamsal olarak daha açıklayıcı etiketler olduğundan daha çok kolay olur ve daha çok kişi seviyor.</p>
4742.    <p><span>Semantik</span> etiketleri kullanmanın göze çarpan bir avantajı, <span style="color: orange;">web</span> tarayıcılarının <span style="color: orange;">web</span> sayfasını veya <span style="color: orange;">web</span> sitesini kolayca dizine ekleyebilmeleri ve karşılığında <span>SEO</span>'yu geliştirmesidir.</p>
4743.    <p>Ayrıca, <span>semantik</span> kullanan bir <span style="color: orange;">web</span> sitesi, <span style="color: orange;">web</span> sitelerine erişmek için ekran okuyucu kullananlar için daha bilgilendirici, uyarlanabilir ve erişilebilir hale gelir.</p>
4744.    <h3>Önemli Semantik Etiketler ve Yaptıkları</h3>
4745.    <p>En sık kullanılan <span>Semantik HTML</span> etiketlerinden bazılarına bakalım:</p>
4746.  <ul>
4747.    <li><span><header></span>: <span><header></span> öğesi, bir <span style="color: orange;">web</span> sayfasının giriş bölümünü tanımlar. Logo, gezinme, tema değiştirici ve arama çubuğu gibi öğeler içerir.</li>
4748.    <li><span><nav></span>: <span><nav></span> öğesi, ana sayfa, iletişim, hakkında, SSS vb. gibi sayfanın gezinme öğelerini belirtir.</li>
4749.    <li><span><main></span>: <span><main></span> öğesi geleneksel olarak etiketin doğrudan alt öğesi olarak kabul edilir. <span>HTML</span> belgesinin <span><header></span> ve <span><footer></span> dışındaki ana bölümlerini içerir. İdeal olarak, <span>HTML</span> belgesinin tamamında bunlardan yalnızca biri olmalıdır.</li>
4750.    <li><span><section></span>: <span><section></span> öğesi, <span style="color: orange;">web</span> sayfasının belirli bir bölümünü tanımlar. Bu, vitrin bölümü, hakkında bölümü, iletişim bölümü veya diğerleri olabilir. Tek bir <span>HTML</span> belgesinde çok sayıda bölüm kullanabilirsin.</li>
4751.    <li><span><article></span>: <span><article></span> öğesi, belirli bilgileri taşıyan bir <span style="color: orange;">web</span> sayfasının belirli bir bölümünü temsil eder. Bu tür bilgiler <a href="https://www.k-html.com/2021/08/HTML-Yazt-renkler.html" target="_blank">metin</a>, <a href="https://www.k-html.com/2021/07/html-resimler.html" target="_blank">resim</a>, <a href="https://www.k-html.com/2021/11/html-videolar.html" target="_blank">video</a> ve yerleştirmelerin bir kombinasyonu olabilir. Bu öğeye, diğer blog gönderilerinden alıntılar içeren bir sayfada bağımsız bir blog gönderisi olarak bak.</li>
4752.    <li><span><aside></span>: Adından da anlaşılacağı gibi, bu bir <span style="color: orange;">web</span> sayfasındaki bir kenar çubuğunu temsil eder. Genellikle ana içerikle doğrudan ilgili olmayan <span style="color: orange;">web</span> sayfasının bir parçasıdır.</li>
4753.    <li><span><footer></span>: <span><footer></span> öğesi, hızlı bağlantılar, telif hakkı bilgileri veya tüm web sitesi veya web sayfasıyla ilgili diğer veriler gibi öğeleri barındırır.</li>
4754.  </ul>
4755.    <p><span>Semantik</span> öğeler gerçek anlamı ve belirli bir içeriğin gerçekte ne yaptığını ilettiğinden, bu öğelerin otomatik olarak olması gereken yere konumlanmadığına dikkat et. Bunu hala <span>CSS</span> ile yapmak zorundasın.</p>
4756.    <p>Basit bir <span>Semantik HTML</span> belgesi şöyle görünür:</p>
4757.  <pre class="code"><ul class="ucode"><li><span style="color: grey;"><!DOCTYPE html></span></li><li><span style="color: blue;"><html</span> <span style="color: red;">lang=</span><span style="color: red;">"</span>tr<span style="color: red;">"</span><span style="color: blue;">></span></li><li>  <span style="color: blue;"><head</span><span style="color: blue;">></span></li><li>    <span style="color: blue;"><meta</span> <span style="color: red;">charset=</span><span style="color: red;">"</span>UTF-8<span style="color: red;">"</span> <span style="color: blue;">/</span><span style="color: blue;">></span></li><li>    <span style="color: blue;"><title</span><span style="color: blue;">></span>HTML<span style="color: red;">"</span>in tanımı<span style="color: blue;"></title</span><span style="color: blue;">></span></li><li>  <span style="color: blue;"></head</span><span style="color: blue;">></span></li><li></li><li>  <span style="color: blue;"><body</span><span style="color: blue;">></span></li><li>    <span style="color: blue;"><header</span><span style="color: blue;">></span></li><li>      <span style="color: blue;"><h1</span> <span style="color: red;">class=</span><span style="color: red;">"</span>logo<span style="color: red;">"</span><span style="color: blue;">></span>LOGO<span style="color: blue;"></h1</span><span style="color: blue;">></span></li><li>      <span style="color: blue;"><nav</span><span style="color: blue;">></span></li><li>        <span style="color: blue;"><ul</span><span style="color: blue;">></span></li><li>         <span style="color: blue;"><li</span><span style="color: blue;">></span>Ana Sayfa<span style="color: blue;"></li</span><span style="color: blue;">></span></li><li>         <span style="color: blue;"><li</span><span style="color: blue;">></span>Kod Editor<span style="color: blue;"></li</span><span style="color: blue;">></span></li><li>         <span style="color: blue;"><li</span><span style="color: blue;">></span>Kod Dönüştürücü<span style="color: blue;"></li</span><span style="color: blue;">></span></li><li>         <span style="color: blue;"><li</span><span style="color: blue;">></span>Color Picker<span style="color: blue;"></li</span><span style="color: blue;">></span></li><li>         <span style="color: blue;"><li</span><span style="color: blue;">></span>Yardım<span style="color: blue;"></li</span><span style="color: blue;">></span></li><li>         <span style="color: blue;"><li</span><span style="color: blue;">></span>Araştırma<span style="color: blue;"></li</span><span style="color: blue;">></span></li><li>        <span style="color: blue;"></ul</span><span style="color: blue;">></span></li><li>      <span style="color: blue;"></nav</span><span style="color: blue;">></span></li><li>    <span style="color: blue;"></header</span><span style="color: blue;">></span></li><li>    <span style="color: blue;"><main></span></li><li>      <span style="color: blue;"><section</span> <span style="color: red;">class=</span><span style="color: red;">"</span>makale<span style="color: red;">"></span></li><li>        <span style="color: blue;"><article></span></li><li>          HTML, Web programlama öğrenmeye başlayacak herkes için çok önemli bir dildir ve hiçbir web programcısı için asla vazgeçilemez.</li><li>          HTML, programlama yolculuğunu başlayacağın dildir, en kolay dillerden biridir ve herhangi bir web programcısı için başlangıç noktasıdır.</li><li>        <span style="color: blue;"></article></span></li><li>      <span style="color: blue;"></section</span><span style="color: blue;">></span></li><li>      <span style="color: blue;"><section</span> <span style="color: red;">class="</span>contact-me<span style="color: red;">"</span><span style="color: blue;">></span></li><li>        Soical media</li><li>        <span style="color: blue;"><a</span> <span style="color: red;">href=</span><span style="color: red;">"</span>https:<span style="color: blue;">/</span><span style="color: blue;">/</span>Instagram.com<span style="color: blue;">/</span>kaneki4kudo<span style="color: red;">"</span><span style="color: blue;">></span>Instagram<span style="color: blue;"></a</span><span style="color: blue;">></span></li><li>      <span style="color: blue;"></section</span><span style="color: blue;">></span></li><li>      <span style="color: blue;"><a</span>side <span style="color: red;">class=</span><span style="color: red;">"</span>address<span style="color: red;">"</span><span style="color: blue;">></span>Benim adresim<span style="color: blue;"></aside></span></li><li>    <span style="color: blue;"></main></span></li><li>    <span style="color: blue;"><footer></span>© 2022 Tüm hakları Saklıdır<span style="color: blue;"></footer</span><span style="color: blue;">></span></li><li>  <span style="color: blue;"></body</span><span style="color: blue;">></span></li><li><span style="color: blue;"></html</span><span style="color: blue;">></span></li></ul></pre>
4758.    <a class="elifnur" href="https://code.k-html.com/kodlar/semantik-html.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a><br />
4759.  <br />
4760.    <p>Tarayıcıda şöyle görünüyor:</p>
4761.    <a href="https://src.k-html.com/semantik-html.png"><img alt="Semantik HTML ile bir sayfa görünüm" height="626" src="https://src.k-html.com/semantik-html.png" width="1113" /></a><br /><br />
4762.    <p><span><aside></span> etiketinin içindeki içeriğin kenar çubuğunda olmadığını ve <span><nav></span> etiketinin içindeki içeriğin gezinme çubuğu olarak otomatik olarak kullanılamadığını görebilirsin. Bu yüzden yine de <span style="color: blue;">CSS</span> ile görünmeleri gerektiği gibi görünmelerini sağlamalısın.</p>
4763. <hr />
4764. <h2 id="hno">HTML5'i nereden öğreneceğim?</h2>
4765.  <p>Umarım bu makale <span>HTML</span>'nin temellerini ve ne işe yaradığını öğrenmeni yardımcı olmuştur. Artık <span style="color: blue;">CSS</span> ve <span style="color: orange;">JavaScript</span> gibi daha gelişmiş teknikleri öğrenmeye başlayabilir ve ardından <span style="color: orange;">web</span> geliştirme alanında sağlam bir kariyer oluşturmaya başlayabilirsin.
4766. <br />
4767. <span>HTML</span> dilini öğrenmeye başlamak istiyorsan, bu kursu ondan öğrenmek için bir referans olarak kullanabilirsin, hatta şimdi <span>k-html.com</span>'daki dersleri okuyarak başlayabilirsin.
4768. <br />
4769. <span>HTML</span> çok kolay bir dildir ve çok çalışırsan bir haftayı geçmeyen kısa bir sürede bile öğrenebilirsin.
4770. <br />
4771. Bu kurs büyük bir özenle hazırlanmıştır ve öğrenmek için tamamen ücretsizdir, bu kursu oluşturmak ve en iyi hale getirmek için bir yılı aşkın süredir çalıştım.<br />
4772. <span>HTML</span> öğrenmek istiyorsan, <span>HTML öğren</span> <span>HTML</span> öğrenmeye başlamak için en iyi kurs ve kaynaktır.
4773. <br />
4774. Umarım bu makale anlaşılması kolay olmuştur ve senin için yararlı olmuştur, okuduğun için teşekkür ederim.</p>
4775.  <div class="parent-links">  
4776.    <a class="btn btn-primary" href="https://www.k-html.com/2022/05/html-giris-alanlar.html">
4777.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
4778.      önceki ders
4779.    </a>
4780.    <a class="btn btn-primary" href="https://www.k-html.com/2022/06/html-ogrenmek-ne-kadar-zor.html">
4781.      sonraki ders
4782.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
4783.    </a>
4784.  
4785.  &lt;/div&gt;</content><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/9005781017984643881'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/9005781017984643881'/><link rel='alternate' type='text/html' href='https://www.k-html.com/2022/06/html5-nedir.html' title='HTML5 Nedir?'/><author><name>HTML öğren</name><uri>http://www.blogger.com/profile/05938401370972816509</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB9hVaVznt_p0FHumsq5E1ns0HFhwUsz5N8PDjeIc1oE4O70yakyUZqpJJiZyKolfcNdZlaOrykdeVaT9wGLi4Gp6Ko2vw9JCv-r2AQBF1JjXNu_09kuRKvXx-7fys1Hw/s113/html.jpg'/></author></entry><entry><id>tag:blogger.com,1999:blog-624213398567285603.post-6829595156977231765</id><published>2022-05-02T11:06:00.017+03:00</published><updated>2023-05-07T04:09:07.688+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="&lt;input&gt;"/><category scheme="http://www.blogger.com/atom/ns#" term="form"/><category scheme="http://www.blogger.com/atom/ns#" term="Formda Normal Düğmeler"/><category scheme="http://www.blogger.com/atom/ns#" term="formlar"/><category scheme="http://www.blogger.com/atom/ns#" term="HTML formlar"/><title type='text'>HTML Formda Normal Düğmeler</title><content type='html'>&lt;div class=&quot;parent-links&quot;&gt;  
4786.    <a class="btn btn-primary" href="https://www.k-html.com/2022/05/html-giris-alanlar.html">
4787.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
4788.      önceki ders
4789.    </a>
4790.    <a class="btn btn-primary" href="https://www.k-html.com/2022/07/html-onay-kutular.html">
4791.      sonraki ders
4792.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
4793.    </a>
4794.  
4795.  </div>
4796. <details open="">
4797.  <summary style="text-align: left;">Sayfa içeriği</summary>
4798.  <ul class="postcontent">
4799.  <li>
4800.  <b>›</b> <a href="https://www.k-html.com/2022/05/html-formda-normal-dugmeler.html#dt"><strong>Düğme türleri</strong></a></li>
4801.    <li>
4802.  <b>›</b> <a href="https://www.k-html.com/2022/05/html-formda-normal-dugmeler.html#nde"><strong>Normal düğme eklemek</strong></a>
4803.      </li>
4804.     <li>
4805.  <b>›</b> <a href="https://www.k-html.com/2022/05/html-formda-normal-dugmeler.html#fvgibde"><strong>Form verilerini göndermek için bir düğme eklemek</strong></a>
4806.      </li> <li>
4807.  <b>›</b> <a href="https://www.k-html.com/2022/05/html-formda-normal-dugmeler.html#fdside"><strong>Form değerlerini sıfırlamak için düğme eklemek</strong></a>
4808.      </li>
4809.     <li>
4810.  <b>›</b> <a href="https://www.k-html.com/2022/05/html-formda-normal-dugmeler.html#kbbdssbde"><strong>Kullanıcının bilgisayarından bir dosya seçmesini sağlayan bir düğme eklemek</strong></a>
4811.      </li>
4812.     </ul>
4813.  </details>
4814. <hr class="hrkk" />
4815. <h2 id="dt">Düğme türleri</h2>
4816. <p>Genel olarak <span>formlara</span> eklenebilen <span>4</span> önemli buton türü vardır ve hepsi <span><input></span> etiketi ile eklenebilir.</p>
4817. <p>Gösterilecek buton tipini belirtmek için etikete <span>type</span> özelliğini eklemelisin ve bu değerlerinden birini aşağıdaki gibi iletmelisin:</p>
4818. <ul>
4819.  <li><span class="ensbtn"><input type="button"></span> Normal bir düğme için kullanabilirsin.</li><span class="br"></span>
4820.  <li><span class="ensbtn"><input type="submit"></span> <span>Form</span> verilerini göndermek için özel bir düğme için kullanabilirsin.</li><span class="br"></span>
4821.  <li><span class="ensbtn"><input type="reset"></span> <span>Formdaki</span> meta verileri sıfırlamak için özel bir düğme eklemek için kullanabilirsin.</li><span class="br"></span>
4822.  <li><span class="ensbtn"><input type="file"></span> Kullanıcının cihazında bir dosya seçmesini sağlamak için özel bir düğme eklemek için kullanabilirsin.</li><span class="br"></span>
4823. </ul>
4824. <blockquote><span style="color: red;">Not: </span>Varsayılan olarak, <span>input</span> etiketinin biçimini belirtmezsen, bir normal metin kutusu <span style="color: blue;"><input</span> <span style="color: red;">type="</span>text<span style="color: red;">"</span><span style="color: blue">></span> görüntülemek istediğin kabul edilecektir.</blockquote>
4825. <hr />
4826. <h2>Normal düğme eklemek</h2>
4827. <p>Normal bir düğme eklemek için <span style="color: blue"><button</span> <span style="color: red">type="</span>button<span style="color: red">"</span><span style="color: blue">></span>text<span style="color: blue;"></button></span> etiketini veya <span style="color: blue"><input</span> <span style="color: red">type="</span>button<span style="color: red">"</span> <span style="color: red">value="</span>text<span style="color: red">"</span><span style="color: blue">></span> etiketini kullanabilirsin.<br />
4828.  Elbette her iki durumda da <span>text</span> metninin olduğu yerde buton üzerinde görünmesini istediğin metni iletmelisin.</p>
4829. <p>Aralarındaki temel fark, <span><button></span> etiketinin içine yerleştirilebilirken, <span><input></span> etiketinin yalnızca içeride metin olabilmesidir.<br />
4830. Basit bir örnek olarak, düğmede bir simge görüntülemek için <span><button></span> etiketinin içine bir <span><img></span> etiketi koyabilirsin.</p>
4831. <h3>Teknik Bilgi</h3>
4832. <p>Butona tıklandığında ne olacağını belirlemeye istiyorsan, bunun için <span>JavaScript</span> kullanmanı gerekir.<br />
4833.  Şimdi endişelenmeyelim çünkü gelecekte <span>JavaScript</span> çalışırken öğreneceğin en kolay şeylerden biri bu.</p>
4834. <span style="br"></span>
4835. <p>Aşağıdaki örnekte, birincisi <span><button></span> etiketi ve ikincisi <span><input></span> etiketi olan iki düğme görüntülüyoruz.</p>
4836. <pre class="code"><ul class="ucode"><li><span style="color: blue"><button</span> <span style="color: red">type=</span><span style="color: red">"</span>button<span style="color: red">"</span><span style="color: blue">></span>Button 1<span style="color: blue"></button</span><span style="color: blue">></span></li><li><span style="color: blue"><input</span> <span style="color: red">type=</span><span style="color: red">"</span>button<span style="color: red">"</span> <span style="color: red">value=</span><span style="color: red">"</span>Button 2<span style="color: red">"</span><span style="color: blue">></span></li></ul></pre>
4837. <a href="https://code.k-html.com/kodlar/form-button-typeler.html" class="elifnur" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a><br /><br />
4838. <p>Aşağıdaki örnekte, birincisi <span><button></span> etiketi ve ikincisi <span><input></span> etiketi olan iki düğme görüntülüyoruz.</p>
4839. <p>Her iki düğmeye de tıkladığında, kullanıcıya "Merhaba dünya" metniyle birlikte bir uyarı mesajı görüntülenecektir.<br />
4840.  İki butona <span>onclick</span> özelliğini ekledim ve <span>javascript</span> kodu ile tıklandığında görüntülenmesini istediğimiz yazıyı ilettim.</p>
4841. <pre class="code"><ul class="ucode"><li><span style="color: blue"><button</span> <span style="color: red">type=</span><span style="color: red">"</span>button<span style="color: red">"</span> <span style="color: red">onclick=</span><span style="color: red">"</span>alert(<span style="color: red">'</span>Merhaba dünya<span style="color: red">'</span>);<span style="color: red">"</span><span style="color: blue">></span>Mesajı görüntüle<span style="color: blue"></button</span><span style="color: blue">></span></li><li><span style="color: blue"><input</span> <span style="color: red">type=</span><span style="color: red">"</span>button<span style="color: red">"</span> <span style="color: red">value=</span><span style="color: red">"</span>Mesajı görüntüle<span style="color: red">"</span> <span style="color: red">onclick=</span><span style="color: red">"</span>alert(<span style="color: red">'</span>Merhaba dünya<span style="color: red">'</span>);<span style="color: red">"</span><span style="color: blue">></span></li></ul></pre>
4842. <a href="https://code.k-html.com/kodlar/form-button-onclick.html" class="elifnur" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a><br /><br />
4843. <p>Aşağıdaki örnekte butonun içine bir <span>simge</span> ekledim.</p>
4844. <pre class="code"><ul class="ucode"><li><span style="color: blue"><button</span> <span style="color: red">type="</span>button<span style="color: red">"</span><span style="color: blue">></span>başlat<span style="color: blue"><img</span> <span style="color: red">src="</span>start.png<span style="color: red">"</span><span style="color: blue">></span><span style="color: blue"></button></span></li></ul></pre>
4845. <a href="https://code.k-html.com/kodlar/form-button-with-img.html" class="elifnur" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a><hr />
4846. <h2 id="fvgibde">Form verilerini göndermek için bir düğme eklemek</h2>
4847. <p>Tıklandığında siteye <span>form</span> verilerini otomatik olarak gönderen bir düğme eklemek için, türünün <span>submit</span> olduğunu belirten <span><input></span> etiketini kullanırız.</p>
4848. <p>Varsayılan olarak, <span>submit</span> tipi butonda görünecek metni belirtmezsen, <span>submit</span> kelimesi üzerinde görünecektir.<br />
4849.  Üzerinde görünecek kelimeyi belirtmek için, ona <span>value</span> özelliğini ekleyebilir ve görüntülenmesini istediğin metni değeri olarak iletebilirsin.</p><span class="br"></span>
4850. <p>Aşağıdaki örnekte, <span>form</span> verilerini göndermek için özel bir düğme ekledim.</p>
4851. <pre class="code"><ul class="ucode"><li><span style="color: blue"><input</span> <span style="color: red">type=</span><span style="color: red">"</span>submit<span style="color: red">"</span> <span style="color: red">value=</span><span style="color: red">"</span>Login<span style="color: red">"</span><span style="color: blue">></span></li></ul></pre>
4852. <a href="https://code.k-html.com/kodlar/form-submit-button.html" class="elifnur" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
4853. <hr />
4854. <h2 id="fdside">Form değerlerini sıfırlamak için düğme eklemek</h2>
4855. <p><span>Form</span> elemanlarının girilen değerlerini silen ve tıklandığında otomatik olarak ilk değerlerine döndüren bir buton eklemek için değerini <span>reset</span> belirterek <span><input></span> etiketini kullanıyoruz.</p>
4856. <p>Varsayılan olarak, sıfırlama düğmesinde görünecek metni belirtmezsen, üzerinde <span>reset</span> kelimesi görünecektir.<br />
4857.  Üzerinde görünecek kelimeyi belirtmek için, ona <span>value</span> özelliğini ekleyebilir ve görüntülenmesini istediğin metni değeri olarak iletebilirsin.</p>
4858. <p>Aşağıdaki örnekte, ilk <span>form</span> değerlerini döndürmek için özel bir düğme ekledim.</p>
4859. <pre class="code"><ul class="ucode"><li><span style="color: blue"><input</span> <span style="color: red">type="</span>reset<span style="color: red">"</span> <span style="color: red">value="</span>Değerleri Sıfırla<span style="color: red">"</span><span style="color: blue">></span></li></ul></pre>
4860. <a href="https://code.k-html.com/kodlar/form-reset-button.html" target="_blank" class="elifnur">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
4861. <hr />
4862. <h2 id="kbbdssbde">Kullanıcının bilgisayarından bir dosya seçmesini sağlayan bir düğme eklemek</h2>
4863. <p>Kullanıcının, tıkladığında cihazında bir dosya seçmesini sağlayan bir düğme eklemek için, türünün dosya olduğunu belirten <span><input></span> etiketini kullanırız.<br />
4864.  <span style="color:red">Not</span>: Bu özel düğmede, bu metnin sabit olduğunu ve değiştiremeyeceğini belirten <span>"Dosya Seç"</span> metni görünür.</p>
4865. <p>Aşağıdaki örnekte, kullanıcının bilgisayarında bir dosya seçmesini sağlayan bir düğme ekledim.</p>
4866. <pre class="code"><ul class="ucode"><li><span style="color: blue"><input</span> <span style="color: red">type=</span><span style="color: red">"</span>file<span style="color: red">"</span><span style="color: blue">></span></li></ul></pre>
4867. <a href="https://code.k-html.com/kodlar/form-choose-file-button.html" target="_blank" class="elifnur">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
4868. <blockquote><span style="color: red">Not:</span> Görüntülenen metnin tarayıcının diline göre değiştiğini unutma.</blockquote>
4869. <div class="parent-links">  
4870.    <a class="btn btn-primary" href="https://www.k-html.com/2022/05/html-giris-alanlar.html">
4871.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
4872.      önceki ders
4873.    </a>
4874.    <a class="btn btn-primary" href="https://www.k-html.com/2022/07/html-onay-kutular.html">
4875.      sonraki ders
4876.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
4877.    </a>
4878.  &lt;/div&gt;</content><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/6829595156977231765'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/6829595156977231765'/><link rel='alternate' type='text/html' href='https://www.k-html.com/2022/05/html-formda-normal-dugmeler.html' title='HTML Formda Normal Düğmeler'/><author><name>HTML öğren</name><uri>http://www.blogger.com/profile/05938401370972816509</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB9hVaVznt_p0FHumsq5E1ns0HFhwUsz5N8PDjeIc1oE4O70yakyUZqpJJiZyKolfcNdZlaOrykdeVaT9wGLi4Gp6Ko2vw9JCv-r2AQBF1JjXNu_09kuRKvXx-7fys1Hw/s113/html.jpg'/></author></entry><entry><id>tag:blogger.com,1999:blog-624213398567285603.post-4688797306269007937</id><published>2022-05-01T14:17:00.031+03:00</published><updated>2023-05-07T04:08:54.138+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="&lt;input&gt;"/><category scheme="http://www.blogger.com/atom/ns#" term="form"/><category scheme="http://www.blogger.com/atom/ns#" term="formlar"/><category scheme="http://www.blogger.com/atom/ns#" term="giriş alanları"/><category scheme="http://www.blogger.com/atom/ns#" term="html"/><title type='text'>HTML Form Giriş Alanları</title><content type='html'>&lt;div class=&quot;parent-links&quot;&gt;  
4879.    <a class="btn btn-primary" href="https://www.k-html.com/2022/04/html-form-ogeleri-adresleme.html">
4880. <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>      önceki ders
4881.    </a>
4882.    <a class="btn btn-primary" href="https://www.k-html.com/2022/05/html-formda-normal-dugmeler.html">
4883.      sonraki ders
4884.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">
4885.  <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>
4886.  <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/>
4887. </svg>
4888.    </a>
4889.  
4890.  </div>
4891. <details open="">
4892.  <summary style="text-align: left;">Sayfa içeriği</summary>
4893.  <ul class="postcontent">
4894.  <li>
4895.  <b>›</b><a href="https://www.k-html.com/2022/05/html-giris-alanlar.html#mke"><strong>Metin kutusu eklemek</strong></a></li>
4896.    <li>
4897.  <b>›</b><a href="https://www.k-html.com/2022/05/html-giris-alanlar.html#csbmke"><strong>Çok satırlı bir metin kutusu eklemek</strong></a>
4898.      </li>
4899.     </ul>
4900.  </details>
4901. <hr class="hrkk" />
4902. <h2 id="mke">Metin kutusu eklemek</h2>
4903. <p>Sayfaya bir metin kutusu eklemek için <span><input></span> etiketini kullanabilirsin, bu etiketin daha sonraki derslerde öğreneceğimiz birçok başka şey eklemek için kullanılabileceğini unutmayalım.</p>
4904. <p><span><input></span> etikete aşağıdaki özellikleri ekleyebilirsin:</p>
4905. <ul>
4906. <li><span class="ensbtn">id</span>: <span><label></span> etiketi ile ilişkilendirmek istiyorsak buna ekliyoruz.</li>
4907.  <span class="br"></span>
4908. <li><span class="ensbtn">name</span>: Gönder butonuna tıklandığında içine yerleştirilen değerin gönderilmesi için ekliyoruz.</li><span class="br"></span>
4909. <li><span class="ensbtn">type</span>: Etiketin sayfada bulunduğu konumun görüntüleneceği türü veya biçimi belirtir.</li>
4910. <span class="br"></span><li><span class="ensbtn">value</span>: Ana başlangıç değeri vermek için.</li>
4911. <span class="br"></span><li><span class="ensbtn">readonly</span>: değerini değişmez kılmak için.</li>
4912. <span class="br"></span><li><span class="ensbtn">disabled</span>: Soluk görünmesini sağlamak ve değerini kopyalanamaz veya değiştirilemez hale getirmek için.</li>
4913. <span class="br"></span><span class="br"></span><li><span class="ensbtn">size</span>: Kutuda kaç karakter görünmesini istediğinizi belirtir (sanki içine girilebilecek karakter sayısıyla orantılı olarak kutunun boyutunu belirtiyormuşsun gibi).</li>
4914. <span class="br"></span><li><span class="ensbtn">maxlength</span>: Girilebilecek maksimum karakter sayısını belirtir.</li>
4915. <span class="br"></span><li><span class="ensbtn">placeholder</span>: Boşsa görünen metin kutusunun içinde bir ipucu gösterir.</li>
4916. <span class="br"></span> <li><span class="ensbtn">required</span>: Boş bırakılırsa ve gönder düğmesini tıkladıysa, kullanıcıyı metin kutusuna bir değer girmeye zorlamak için buna ekleyebilirsin.</li>
4917. </ul>
4918. <h3>Metin kutusu türünü tanımlamak</h3>
4919. <p><a href="https://www.k-html.com/2022/04/html-formlar.html#type" target="_blank">type</a> özelliği ile tanımladığımız metin kutusu tipi için aşağıdaki varyasyonlar çok önemlidir:</p>
4920. <ul>
4921.  <li><span style="color: blue;"><input</span> <span style="color: red;">type="</span>text<span style="color: red;">"</span><span style="color: blue;">></span> Düz metin kutusu için bu, varsayılan türüdür.</li>
4922.  <li><span style="color: blue;"><input</span> <span style="color: red;">type="</span>password<span style="color: red;">"</span><span style="color: blue;">></span> Bir parola girişi metin kutusu için.</li>
4923.  <li><span style="color: blue;"><input</span> <span style="color: red;">type="</span>number<span style="color: red;">"</span><span style="color: blue;">></span> Sayıları girmek için özel bir metin kutusu için.</li>
4924.  <li><span style="color: blue;"><input</span> <span style="color: red;">type="</span>email<span style="color: red;">"</span><span style="color: blue;">></span> Bir e-posta girmek için özel bir metin kutusu için.</li>
4925. </ul>
4926. <p>Varsayılan olarak, <span><input></span> etiketinin biçimini belirtmezsen, tarayıcı bir düz metin kutusu <span style="color: blue;"><input</span> <span style="color: red;">type="</span>text<span style="color: red;">"</span><span style="color: blue;">></span> görüntülemek istediğin anlayacaktır.</p>
4927. <span class="br"></span>
4928. <p>Aşağıdaki örnekte, türünü belirtmeden bir metin kutusu görüntülüyoruz.</p>
4929. <pre class="code"><ul class="ucode"><li><span style="color: blue;"><label</span> <span style="color: red;">for="</span>username<span style="color: red;">"</span><span style="color: blue;">></span>Username<span style="color: blue;"></label</span><span style="color: blue;">></span><span style="color: blue;"><br></span></li><li><span style="color: blue;"><input</span> <span style="color: red;">id="</span>username<span style="color: red;">"</span> <span style="color: red;">name="</span>username<span style="color: red;">"</span><span style="color: blue;">></span></li></ul></pre>
4930. <a class="elifnur" href="https://code.k-html.com/kodlar/form-mke.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
4931. <br /><br />
4932. <p>Aşağıdaki örnekte, bir <span>e-posta</span> girmek için bir metin kutusu ve bir şifre girmek için bir metin kutusu gösterdim.</p>
4933. <blockquote><span style="color: red;">Not</span>: Kullanıcı <span>e-postaya</span> benzeyen bir metin girmezse, veriyi göndermek düğmesine tıklarsa hata verecektir.</blockquote>
4934. <pre class="code"><ul class="ucode"><li><span style="color: blue;"><label</span> <span style="color: red;">for="</span>email<span style="color: red;">"</span><span style="color: blue;">></span>Email<span style="color: blue;"></label></span><span style="color: blue;"><br></span></li><li><span style="color: blue;"><input</span> <span style="color: red;">type="</span>email<span style="color: red;">"</span> <span style="color: red;">id="</span>email<span style="color: red;">"</span> <span style="color: red;">name="</span>email<span style="color: red;">"</span><span style="color: blue;">><br>></span><span style="color: blue;"><br></span></li><li><span style="color: blue;"><label</span> <span style="color: red;">for="</span>password<span style="color: red;">"</span><span style="color: blue;">></span>Password<span style="color: blue;"></label></span><span style="color: blue;"><br></span></li><li><span style="color: blue;"><input</span> <span style="color: red;">type="</span>password<span style="color: red;">"</span> <span style="color: red;">id="</span>password<span style="color: red;">"</span> <span style="color: red;">name="</span>password<span style="color: red;">"</span><span style="color: blue;">></span></li></ul></pre>
4935. <a class="elifnur" href="https://code.k-html.com/kodlar/form-giris-alanlar.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a><br /><br />
4936. <p>Aşağıdaki örnekte, bir sayı girmeye ayrılmış bir metin kutusu gösterdim.</p>
4937. <blockquote><span style="color: red;">Not</span>: Burada kullanıcının yalnızca metin kutusu içine sayı girmesine izin verilir.</blockquote>
4938. <span class="br"></span>
4939. <pre class="code"><ul class="ucode"><li><span style="color: blue;"><label</span> <span style="color: red;">for="</span>age<span style="color: red;">"</span><span style="color: blue;">></span>senin yaşın<span style="color: blue;"></label> <br></span></li><li><span style="color: blue;"><input</span> <span style="color: red;">type="</span>number<span style="color: red;">"</span> <span style="color: red;">id="</span>age<span style="color: red;">"</span> <span style="color: red;">name="</span>age<span style="color: red;">"</span><span style="color: blue;">></span></li></ul></pre>
4940. <a class="elifnur" href="https://code.k-html.com/kodlar/form-giris-alanlar-num.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a><br /><br />
4941. <span class="br"></span>
4942. <p>Aşağıdaki örnekte, metin kutusunda görünebilecek karakter sayısının <span>20</span> ve içine girilebilecek maksimum karakter sayısının <span>25</span> olduğunu belirttim.</p>
4943. <pre class="code"><ul class="ucode"><li><span style="color: blue;"><label</span> <span style="color: red;">for="</span>username<span style="color: red;">"</span><span style="color: blue;">></span>Username<span style="color: blue;"></label></span><span style="color: blue;"><br></span></li><li><span style="color: blue;"><input</span> <span style="color: red;">type="</span>text<span style="color: red;">"</span> <span style="color: red;">id="</span>username<span style="color: red;">"</span> <span style="color: red;">name="</span>username<span style="color: red;">"</span> <span style="color: red;">size="</span>20<span style="color: red;">"</span> <span style="color: red;">maxlength="</span>25<span style="color: red;">"</span><span style="color: blue;">></span></li></ul></pre>
4944. <a class="elifnur" href="https://code.k-html.com/kodlar/form-giris-alanlar-num-limit.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a><br /><br />
4945. <span class="br"></span>
4946. <p>Aşağıdaki örnekte, metin kutusuna bir ana değer ekledim.</p>
4947. <pre class="code"><ul class="ucode"><li><span style="color: blue;"><label</span> <span style="color: red;">for="</span>username<span style="color: red;">"</span><span style="color: blue;">></span>Username<span style="color: blue;"></label></span><span style="color: blue;"><br></span></li><li><span style="color: blue;"><input</span> <span style="color: red;">type="</span>text<span style="color: red;">"</span> <span style="color: red;">id="</span>username<span style="color: red;">"</span> <span style="color: red;">name="</span>username<span style="color: red;">"</span> <span style="color: red;">value="</span>kaneki kudo<span style="color: red;">"</span><span style="color: blue;">></span></li></ul></pre>
4948. <a class="elifnur" href="https://code.k-html.com/kodlar/form-giris-alanlar-value.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a><br /><br />
4949. <span class="br"></span>
4950. <p>Aşağıdaki örnekte, metin kutusunun değerini salt olarak yaptım, yani kullanıcı metini sadece okuyabilır ve metini değiştiremez.</p>
4951. <pre class="code"><ul class="ucode"><li><span style="color: blue;"><label</span> <span style="color: red;">for="</span>username<span style="color: red;">"</span><span style="color: blue;">></span>Username<span style="color: blue;"></label></span><span style="color: blue;"><b</span>r<span style="color: blue;">></span></li><li><span style="color: blue;"><input</span> <span style="color: red;">type=</span><span style="color: red;">"</span>text<span style="color: red;">"</span> <span style="color: red;">id=</span><span style="color: red;">"</span>username<span style="color: red;">"</span> <span style="color: red;">name="</span>username<span style="color: red;">"</span> <span style="color: red;">value="</span>kaneki kudo<span style="color: red;">"</span> readonly<span style="color: blue;">></span></li></ul></pre>
4952. <a class="elifnur" href="https://code.k-html.com/kodlar/form-giris-alanlar-readonly.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a><br /><br />
4953. <span class="br"></span>
4954. <p>Aşağıdaki örnekte, metin kutusunu <span>inaktif</span> olarak yaptım, bu da onun soluk bir renkte göründüğü ve kullanıcı değeri kopyalanamaz veya değiştirilemez anlamına geliyor.</p>
4955. <pre class="code"><ul class="ucode"><li><span style="color: blue;"><label</span> <span style="color: red;">for="</span>username<span style="color: red;">"</span><span style="color: blue;">></span>Username<span style="color: blue;"></label></span><span style="color: blue;"><br></span></li><li><span style="color: blue;"><input</span> <span style="color: red;">type="</span>text<span style="color: red;">"</span> <span style="color: red;">id="</span>username<span style="color: red;">"</span> <span style="color: red;">name="</span>username<span style="color: red;">"</span> <span style="color: red;">value="</span>kaneki kudo<span style="color: red;">"</span> disabled<span style="color: blue;">></span></li></ul></pre>
4956. <a class="elifnur" href="https://code.k-html.com/kodlar/form-giris-alanlar-disabled.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a><br /><br />
4957. <span class="br"></span>
4958. <p>Aşağıdaki örnekte, metin kutularının boş olmaları durumunda ipuçlarını göstermesini sağladım.</p>
4959. <pre class="code"><ul class="ucode"><li><span style="color: blue;"><label</span> <span style="color: red;">for="</span>email<span style="color: red;">"</span><span style="color: blue;">></span>Email<span style="color: blue;"></label></span><span style="color: blue;"><br></span></li><li><span style="color: blue;"><input</span> <span style="color: red;">type="</span>email<span style="color: red;">"</span> <span style="color: red;">id="</span>email<span style="color: red;">"</span> <span style="color: red;">name="</span>email<span style="color: red;">"</span> <span style="color: red;">placeholder="</span>senin e-postan ekle<span style="color: red;">"</span><span style="color: blue;">> <br><br></span></li><li><span style="color: blue;"><label</span> <span style="color: red;">for="</span>password<span style="color: red;">"</span><span style="color: blue;">></span>Password<span style="color: blue;"></label></span><span style="color: blue;"><br></span></li><li><span style="color: blue;"><input</span> <span style="color: red;">type="</span>password<span style="color: red;">"</span> <span style="color: red;">id="</span>password<span style="color: red;">"</span> <span style="color: red;">name="</span>password<span style="color: red;">"</span> <span style="color: red;">placeholder="</span>senin şifren ekle<span style="color: red;">"</span><span style="color: blue;">></span></li></ul></pre>
4960. <a class="elifnur" href="https://code.k-html.com/kodlar/form-giris-alanlar-hints.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
4961. <br /> <br />
4962. <p>Aşağıdaki örnekte, metin kutuları boş bırakılırsa kullanıcıyı doldurmaya ve gönder düğmesine tıklamaya zorladım.</p>
4963. <pre class="code"><ul class="ucode"><li><span style="color: blue;"><label</span> <span style="color: red;">for="</span>email<span style="color: red;">"</span><span style="color: blue;">></span>Email<span style="color: blue;"></label></span><span style="color: blue;"><br></span></li><li><span style="color: blue;"><input</span> <span style="color: red;">type="</span>email<span style="color: red;">"</span> <span style="color: red;">id="</span>email<span style="color: red;">"</span> <span style="color: red;">name="</span>email<span style="color: red;">"</span> <span style="color: red;">required</span><span style="color: blue;">> <br></span><span style="color: blue;"><br></span></li><li><span style="color: blue;"><label</span> <span style="color: red;">for="</span>password<span style="color: red;">"</span><span style="color: blue;">></span>Password<span style="color: blue;"></label> </span><span style="color: blue;"><br></span></li><li><span style="color: blue;"><input</span> <span style="color: red;">type="</span>password<span style="color: red;">"</span> <span style="color: red;">id="</span>password<span style="color: red;">"</span> <span style="color: red;">name="</span>password<span style="color: red;">"</span> <span style="color: red;">required</span><span style="color: blue;">></span></li></ul></pre>
4964. <a class="elifnur" href="https://code.k-html.com/kodlar/form-giris-alanlar-required.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
4965. <hr />
4966. <h2 id="csbmke">Çok satırlı bir metin kutusu eklemek</h2>
4967. <p>Birden fazla satır içeren bir metin kutusunu görüntülemek için <span><textarea></span>metin<span></textarea></span> gibi <span><textarea></span> etiketini kullanıyoruz.<br />
4968. Metin kelimesi yerine, içinde görüntülemek istediğimiz tüm metni ekliyoruz.</p>
4969. <p>Kullanıcıdan adresini veya profilini girmesini istediğimizde genellikle çok satırlı bir metin kutusu kullanıyoruz.</p>
4970. <p>Bu etikete aşağıdaki özellikleri ekleyebilirsin:</p>
4971. <ul>
4972.  <li><span class="ensbtn">id</span> <span><label></span> etiketi ile ilişkilendirmek istiyorsak buna ekliyoruz.</li>
4973.  <span class="br"></span>
4974.  <li><span class="ensbtn">name</span> Gönder butonuna tıklandığında içine yerleştirilen değerin gönderilmesi için ekliyoruz.</li>
4975.  <span class="br"></span>
4976.  <li><span class="ensbtn">readonly</span> Değerini değişmez kılmak istiyorsak <span>readonly</span> ekliyoruz.</li>
4977.  <span class="br"></span>
4978.  <li><span class="ensbtn">disabled</span> Soluk bir renkte görünmesini istersek ve değeri kopyalanamaz veya değiştirilemez diye <span>disabled</span> ekliyoruz.</li>
4979.  <span class="br"></span>
4980.  <li><span class="ensbtn">cols</span> Aynı satırda görünebilecek maksimum karakter sayısını belirtmek istiyorsak, yani genişliğini her satıra girilebilecek maksimum karakter sayısıyla orantılı olarak belirtiyorsun gibi ekliyoruz.</li>
4981.  <span class="br"></span>
4982.  <li><span class="ensbtn">rows</span> Her seferinde içinde kaç satır çıkabileceğini belirtmek istersek, yani uzunluğunu onun için belirttiğin satır sayısıyla orantılı olarak belirtmişsin gibi ekliyoruz.</li>
4983. </ul>
4984. <br />
4985. <p>Aşağıdaki örnekte, içinde ilk değeri olan birden fazla satırdan oluşan bir metin kutusu ekledim.</p>
4986. <pre class="code"><ul class="ucode"><li><span style="color: blue;"><label</span> <span style="color: red;">for="</span>biography<span style="color: red;">"</span><span style="color: blue;">></span>Biography<span style="color: blue;"></label> <br></span></li><li><span style="color: blue;"><textarea</span> <span style="color: red;">name="</span>biography<span style="color: red;">"</span> <span style="color: red;">id="</span>biography<span style="color: red;">"</span><span style="color: blue;">></span>k−html.com 2021<span style="color: red;">'</span>de yayınlandı.<span style="color: blue;"></textarea></span></li></ul></pre>
4987. <a class="elifnur" href="https://code.k-html.com/kodlar/form-giris-alanlar-textarea.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a><br /><br />
4988. <span class="br"></span>
4989. <p>Aşağıdaki örnekte, her satırda görünebilecek maksimum karakter sayısını ve içinde görünecek varsayılan satır sayısını belirten, birden fazla satırdan oluşan bir metin kutusu ekledim.</p>
4990. <pre class="code"><ul class="ucode"><li><span style="color: blue;"><label</span> <span style="color: red;">for="</span>biography<span style="color: red;">"</span><span style="color: blue;">></span>Biography<span style="color: blue;"></label> <br></span></li><li><span style="color: blue;"><textarea</span> <span style="color: red;">name="</span>biography<span style="color: red;">"</span> <span style="color: red;">id="</span>biography<span style="color: red;">"</span><span style="color: red;"> cols="</span>40<span style="color: red;">" rows="</span>4<span style="color: red;">"</span><span style="color: blue;">></span>k−html.com 2021<span style="color: red;">'</span>de yayınlandı.<span style="color: blue;"></textarea></span></li></ul></pre>
4991. <a class="elifnur" href="https://code.k-html.com/kodlar/form-giris-alanlar-colsandrows.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a><br /><br />
4992. <span class="br"></span>
4993. <p>Aşağıdaki örnekte, boyutunu belirten ve değerini sadece okunabilir hale getiren, birden fazla satırdan oluşan bir metin kutusu ekledim.</p>
4994. <pre class="code"><ul class="ucode"><li><span style="color: blue;"><label</span> <span style="color: red;">for="</span>biography<span style="color: red;">"</span><span style="color: blue;">></span>Biography<span style="color: blue;"></label></span><span style="color: blue;"><br></span></li><li><span style="color: blue;"><textarea</span> <span style="color: red;">name="</span>biography<span style="color: red;">"</span> <span style="color: red;">id="</span>biography<span style="color: red;">"</span> <span style="color: red;">cols="</span>40<span style="color: red;">"</span> <span style="color: red;">rows="</span>4<span style="color: red;">"</span> readonly<span style="color: blue;">></span>Form genellikle, kullanıcının sayfaya veri girmesini sağlamak amacıyla sayfaya yerleştirilen bir dizi öğedir.Formlarla ilgilendiğimiz yaygın örnekler, giriş sayfaları, yeni hesap oluşturma sayfaları, yorum ekleme, gönderi ekleme vb.<span style="color: blue;"></textarea</span><span style="color: blue;">></span></li></ul></pre>
4995. <a class="elifnur" href="https://code.k-html.com/kodlar/form-giris-alanlar-onlyread.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a><br /><br />
4996. <span class="br"></span>
4997.  
4998. <div class="parent-links">  
4999.    <a class="btn btn-primary" href="https://www.k-html.com/2022/04/html-form-ogeleri-adresleme.html">
5000. <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>      önceki ders
5001.    </a>
5002.    <a class="btn btn-primary" href="https://www.k-html.com/2022/05/html-formda-normal-dugmeler.html">
5003.      sonraki ders
5004.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">
5005.  <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>
5006.  <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/>
5007. </svg>
5008.    </a>
5009.  
5010.  &lt;/div&gt;</content><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/4688797306269007937'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/4688797306269007937'/><link rel='alternate' type='text/html' href='https://www.k-html.com/2022/05/html-giris-alanlar.html' title='HTML Form Giriş Alanları'/><author><name>HTML öğren</name><uri>http://www.blogger.com/profile/05938401370972816509</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB9hVaVznt_p0FHumsq5E1ns0HFhwUsz5N8PDjeIc1oE4O70yakyUZqpJJiZyKolfcNdZlaOrykdeVaT9wGLi4Gp6Ko2vw9JCv-r2AQBF1JjXNu_09kuRKvXx-7fys1Hw/s113/html.jpg'/></author></entry><entry><id>tag:blogger.com,1999:blog-624213398567285603.post-1361595946079991805</id><published>2022-04-27T08:13:00.016+03:00</published><updated>2023-05-07T04:08:37.906+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="&lt;label&gt;"/><category scheme="http://www.blogger.com/atom/ns#" term="form"/><category scheme="http://www.blogger.com/atom/ns#" term="formlar"/><category scheme="http://www.blogger.com/atom/ns#" term="HTML formlar"/><category scheme="http://www.blogger.com/atom/ns#" term="label"/><category scheme="http://www.blogger.com/atom/ns#" term="Öğeleri Adresleme"/><title type='text'>HTML Form Öğeleri Adresleme</title><content type='html'>&lt;div class=&quot;parent-links&quot;&gt;  
5011.    <a class="btn btn-primary" href="https://www.k-html.com/2022/04/html-formlar.html">
5012.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
5013.      önceki ders
5014.    </a>
5015.    <a class="btn btn-primary" href="https://www.k-html.com/2022/05/html-giris-alanlar.html">
5016.      sonraki ders
5017.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
5018.    </a>
5019.  
5020.  </div>
5021. <details open="">
5022.  <summary style="text-align: left;">Sayfa içeriği</summary>
5023.  <ul class="postcontent">
5024.  <li>
5025.  <b>›</b><a href="https://www.k-html.com/2022/04/html-form-ogeleri-adresleme.html#eao"><strong>Elemanları adreslemenin önemi</strong></a></li>
5026.    <li>
5027.  <b>›</b><a href="https://www.k-html.com/2022/04/html-form-ogeleri-adresleme.html#oady"><strong>Öğeleri adresleme doğru yolu</strong></a>
5028.      </li>
5029.     </ul>
5030.  </details>
5031. <hr class="hrkk" />
5032. <h2 id="eao">Elemanları adreslemenin önemi</h2>
5033. <p><span>Forma</span> yerleştirilen herhangi bir öğenin adı olarak düz metin eklersen, bunu yapmanın en iyi yolu bu değildir, çünkü tarayıcı bunların birbiriyle ilişkili olduğunu bilmeyecek.</p>
5034. <p>Bir önceki derste yaptığımız gibi <span>formun</span> elemanlarını isimlendirmenin yolu, bunu yapmanın en iyi yolu değildir ve bunu yapmanın yolu da bu değildir.</p>
5035. <p>Sana daha fazla açıklayalım.</p>
5036. <p>Metin eklemek için bir alan eklemek istiyorsan, bu kodu ekleyeceksin.</p>
5037. <pre class="code"><ul class="ucode"><li>Username<span style="color: blue"><br></span></li><li><span style="color: lue"><input</span> <span style="color:red">type=</span><span style="color:red">"</span>text<span style="color:red">"</span><span style="color:blue">></span></li></ul></pre><p>Değil mi?</p>
5038. <p>Bu kodda kullanıcı adını eklemek için bir alan ekledim ve öğeleri adresleme'de kastettiğimiz şey öğenin başlığı yani bizim durumumuzda bu kodun başlığı <span>username</span> dir.</p>
5039. <p>Öğeleri Adresleme doğru yolu bu değil ve önceki derste sadece dersi kolaylaştırmak için kullandım.</p>
5040. <p>Aşağıdaki örnekte, metin kutusu için başlık koyma şeklimiz, tarayıcıda çok normal görünse de doğru yol değildir.<br />Bu yöntemle ilgili sorun, tarayıcının <span>username</span> metninin kendisinden sonra yerleştirilen metin kutusuyla ilişkili olduğunu bilmemesidir ve bu nedenle kullanıcı metne tıklarsa, metin kutusuna yazmaya başlamak istediğini bilemez. Ve bu nedenle kullanıcının yazabilmesi için metin kutusunun içini tıklaması gerekir.</p>
5041. <pre class="code"><ul class="ucode"><li>Username<span style="color: blue"><br></span></li><li><span style="color: lue"><input</span> <span style="color:red">type=</span><span style="color:red">"</span>text<span style="color:red">"</span><span style="color:blue">></span></li></ul></pre>
5042. <a href="https://code.k-html.com/kodlar/form-ogeleri-adresleme.html" target="_blank" class="elifnur">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
5043. <hr />
5044. <h2 id="oady">Öğeleri adresleme doğru yolu</h2>
5045. <p>Yanında veya üstüne özel metin yerleştirmek istediğin <span>formdaki</span> herhangi bir öğe <span><label> </label></span> içine yerleştirilmelidir.</p>
5046. <p><span><label></span> içindeki metni eklerken ve içine yerleştirilen öğeyle ilişkilendirirken, tarayıcı bu öğeyle daha iyi ilgilenir çünkü kullanıcı öğenin etiketine tıklarsa hemen yazmaya başlayabilir.</p>
5047. <p>Bilgisayarda, fareyi kullanarak istediğin şeye tıkladığın için bu konuyu önemli bulmayabilirsin, ancak dokunmatik ekranı olan cep telefonlarında, kullanıcının metnin içine parmağıyla tıklaması çok zor olacaktır. içinde kutuyu açmak için kullanıcı alana açılmasına kadar birkaç kez tıklıcak ve açılana kadar denemesi gerekecek.</p>
5048. <p>Öte yandan, bu sayfaların tasarımını <span>CSS</span> koduyla nasıl değiştireceğini öğrendiğinde çok yararlıdır çünkü bu, kullanıcı bunlarla etkileşime girdiğinde <span>forma</span> yerleştirilen öğelere çok güzel efektler eklemeni sağlayacaktır.</p>
5049. <br />
5050. <p>Şimdi, <span>forma</span> yerleştirilen herhangi bir öğeyi kendi adıyla ilişkilendirmek için şunları yapmanı gerekir:</p>
5051. <ul type="1">
5052.  <li>Öğenin <span>id</span> özelliğini ekle ve öğeye özel bir ad ver.</li>
5053.  <li><span><label></span> etiketine <span>for</span> özelliği ekle ve öğe için belirlediğin <span>id</span> özelliği ile aynı değeri ilet.</li>
5054. </ul>
5055. <p>Aşağıdaki örnekte, <span>formda <label></span> adına eklenmiş bir <span style="color: blue;"><input</span> <span style="color: red;">type="</span>text<span style="color: red;">"</span><span style="color: blue;">></span> metin kutusu ekledim.</p>
5056. <pre class="code"><ul class="ucode"><li><span style="color: blue"><label</span> <span style="color: red">for="</span>username<span style="color: red">"</span><span style="color: blue">></span>Username<span style="color: blue"></label></span><span style="color: blue"><br></span></li><li><span style="color: blue"><input</span> <span style="color: red">type="</span>text<span style="color: red">" id="</span>username<span style="color: red">"</span><span style="color: blue">></span></li></ul></pre>
5057. <a href="https://code.k-html.com/kodlar/form-ogeleri-adresleme2.html" target="_blank" class="elifnur">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
5058. <div class="parent-links">  
5059.    <a class="btn btn-primary" href="https://www.k-html.com/2022/04/html-formlar.html">
5060.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
5061.      önceki ders
5062.    </a>
5063.    <a class="btn btn-primary" href="https://www.k-html.com/2022/05/html-giris-alanlar.html">
5064.      sonraki ders
5065.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
5066.    </a>
5067.  
5068.  </div>
5069.  
5070. </content><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/1361595946079991805'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/1361595946079991805'/><link rel='alternate' type='text/html' href='https://www.k-html.com/2022/04/html-form-ogeleri-adresleme.html' title='HTML Form Öğeleri Adresleme'/><author><name>HTML öğren</name><uri>http://www.blogger.com/profile/05938401370972816509</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB9hVaVznt_p0FHumsq5E1ns0HFhwUsz5N8PDjeIc1oE4O70yakyUZqpJJiZyKolfcNdZlaOrykdeVaT9wGLi4Gp6Ko2vw9JCv-r2AQBF1JjXNu_09kuRKvXx-7fys1Hw/s113/html.jpg'/></author></entry><entry><id>tag:blogger.com,1999:blog-624213398567285603.post-4001241812390029288</id><published>2022-04-26T05:57:00.030+03:00</published><updated>2023-05-07T04:08:20.824+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="&lt;input&gt;"/><category scheme="http://www.blogger.com/atom/ns#" term="form"/><category scheme="http://www.blogger.com/atom/ns#" term="HTML formlar"/><title type='text'>HTML Formlar</title><content type='html'>&lt;div class=&quot;parent-links&quot;&gt;  
5071.    <a class="btn btn-primary" href="https://www.k-html.com/2021/12/html-iframe.html">
5072. <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>      önceki ders
5073.    </a>
5074.    <a class="btn btn-primary" href="https://www.k-html.com/2022/04/html-form-ogeleri-adresleme.html">
5075.      sonraki ders
5076.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
5077.    </a>
5078.  
5079.  </div>
5080. <details open="">
5081.  <summary style="text-align: left;">Sayfa içeriği</summary>
5082.  <ul class="postcontent">
5083.      <li>
5084.  <b>›</b> <a href="https://www.k-html.com/2022/04/html-formlar.html#fk">Form kavramı</a>
5085.      </li>
5086.    <li>
5087.  <b>›</b> <a href="https://www.k-html.com/2022/04/html-formlar.html#sbfe">Sayfaya bir form eklemek</a>
5088.      </li>
5089.    <li>
5090.  <b>›</b> <a href="https://www.k-html.com/2022/04/html-formlar.html#figide">Form içeriğini göndermek için düğme eklemek</a>
5091.      </li>
5092.    <li>
5093.  <b>›</b> <a href="https://www.k-html.com/2022/04/html-formlar.html#fvgyb">Form verilerini gönderme yöntemini belirtmek</a>
5094.      </li>
5095.    <li>
5096.  <b>›</b> <a href="https://www.k-html.com/2022/04/html-formlar.html#fyeiv">Forma yerleştirilen etiketlere isim vermek</a>
5097.      </li>
5098.    <li>
5099.  <b>›</b> <a href="https://www.k-html.com/2022/04/html-formlar.html#fingb">Form içeriğinin nereye gönderileceğini belirtmek</a>
5100.      </li>
5101.    <li>
5102.  <b>›</b> <a href="https://www.k-html.com/2022/04/html-formlar.html#fote">Formda otomatik tamamlamayı eklemek</a>
5103.      </li>
5104.    <li>
5105.  <b>›</b> <a href="https://www.k-html.com/2022/04/html-formlar.html#fgdik">Forma girilen değerlerin kontrolü kaldırmak</a>
5106.      </li>
5107.    <li>
5108.  <b>›</b> <a href="https://www.k-html.com/2022/04/html-formlar.html#fvasnab">Form verilerini alan sayfanın nerede açılacağını belirtmek</a>
5109.      </li>
5110.    <li>
5111.  <b>›</b> <a href="https://www.k-html.com/2022/04/html-formlar.html#fbkeoe">Formla birlikte kullanılan en önemli etiketler</a>
5112.      </li>
5113.     </ul>
5114.  </details>
5115. <hr class="hrkk" />
5116. <h2 id="fk"><span>Form</span> kavramı</h2>
5117. <p><span>Form</span> genellikle, kullanıcının sayfaya veri girmesini sağlamak amacıyla sayfaya yerleştirilen bir dizi öğedir.<br />
5118. <span>Formlarla</span> ilgilendiğimiz yaygın örnekler, giriş sayfaları, yeni hesap oluşturma sayfaları, yorum ekleme, gönderi ekleme vb.</p>
5119.  <p><span>Formun</span> kendisi sayfada görüntülenen bir şey değil, içine koyduğumuz etiketler için bir kapsayıcıdır.<br />
5120. <span>Formun</span> temel fikri, içine yerleştirilen öğelerde kullanıcı tarafından girilen bilgileri toplamak ve bir kerede kaydedeceğimiz yere göndermektir.
5121.  </p>
5122.  <p>Bu derste, <span>forma</span> yerleştirilebilecek özellikleri ve her birinin rolünü öğreneceksin.</p>
5123.  <h4>Teknik bilgi</h4>
5124.  <p>Kullanıcının bilgileri bir <span>forma</span> doldurmasını istediğimiz öğeleri düzenlemenin, gelecekte <span>JavaScript</span> dilini öğrendiğinde öğreneceğin birçok faydası vardır.<br />
5125. Tarayıcının, <span>forma</span> girilen tüm bilgileri kaydedileceği yere göndermeden önce kontrol etmesi gibi fayda olur.<br />
5126. Basit bir örnek olarak, yeni bir hesap oluşturmaya çalışan kullanıcıya, yalnızca 5 karakter girdiğini tespit edersen girdiği şifrenin kabul edilemez olduğunu ve en az 8 karakter olması gerektiğini söylersin.</p>
5127.  <hr />
5128.  <h2 id="sbfe">Sayfaya bir form eklemek</h2>
5129. <p>Genellikle sayfaya <span>form</span> eklemek için aşağıdaki gibi <span><form></span> etiketini kullanırız.</p>
5130. <pre class="code"><ul class="ucode"><li><span style="color: blue"><form</span><span style="color: blue">></span></li><li>    <span style="color: #00008B;"><!--<span style="color: #00008B;"></span> Burada formun tüm bağımlı öğelerini eklemelisin <span style="color: #00008B;">--></span></span></li><li><span style="color: blue"></form</span><span style="color: blue">></span></li></ul></pre>
5131. <p>Aşağıdaki örnekte, kullanıcı adı girmek için bir metin kutusu, şifre girmek için bir metin kutusu ve siteye girilen bilgileri göndermek için bir buton içeren bir <span>form</span> ekledim.<br />
5132. <span style="color: red">Not:</span> Bu sadece seni <span>form</span> içindeki öğeleri nasıl düzenleyeceğin konusunda genel bir fikir vermeyi amaçlayan bir tasarımdır.</p>
5133. <pre class="code"><ul class="ucode"><li><span style="color: blue"><form></span></li><li>    Kullanıcı adı<span style="color: blue"><br></span></li><li>    <span style="color: blue"><input</span> <span style="color: red">type="</span>text<span style="color: red">"</span><span style="color: blue">></span><span style="color: blue"><br></span><span style="color: blue"><br></span></li><li>    şifre<span style="color: blue"><br></span></li><li>    <span style="color: blue"><input</span> <span style="color: red">type=</span><span style="color: red">"</span>password<span style="color: red">"</span><span style="color: blue">></span><span style="color: blue"><br></span><span style="color: blue"><br></span></li><li>    <span style="color: blue"><input</span> <span style="color: red">type="</span>button<span style="color: red">"</span> <span style="color: red">value=</span><span style="color: red">"</span>Login<span style="color: red">"</span><span style="color: blue">></span></li><li><span style="color: blue"></form</span><span style="color: blue">></span></li></ul></pre>
5134. <a href="https://code.k-html.com/kodlar/Sayfaya-bir-form-eklemek.html" target="_blank" class="elifnur">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
5135. <hr />
5136. <h2 id="figide">Form içeriğini göndermek için düğme eklemek</h2>
5137. <p>Oluşturduğun her <span>form</span>, tarayıcıya bu düğmenin <span>forma</span> girilen verileri siteye göndermek için olduğunu söylemek için <span>submit</span> türünde <span style="color: blue"><input</span> <span style="color: red">type="</span>submit<span style="color: red">"</span><span style="color: blue">></span> şeklinde tek bir düğme içermelidir.</p>
5138. <h4>Teknik Bilgi</h4>
5139. <p>Varsayılan olarak, <span>sumbit</span> türünde bir düğme tıklandığında, tarayıcı, <span>forma</span> iletilen verilere göre kullanıcıya yeni bir sayfanın görüntülenmesini bekler.<br />
5140. Kullanıcının aktarılacağı sayfa belirtilmemişse tarayıcı, <span>formun</span> bulunduğu sayfada mevcut sayfayı tekrar açacaktır.</p>
5141. <p>Verilerin gönderileceği sayfanın nasıl belirleneceğini biraz sonra öğreneceğiz, ancak şimdilik yalnızca içerik göndermek için düğme fikrine odaklanmalısın.</p>
5142. <p>Aşağıdaki örnekte, üzerinde <span>Giriş</span> kelimesini gösterdiğimizi belirten <span>form</span> verilerini göndermek için bir buton ekledim.</p>
5143. <blockquote><span style="color: red">Not</span>: <span>Giriş</span> düğmesine tıkladığında, <span style="color: blue">form</span> verilerini gönderirken gitmek istediğimiz sayfayı belirtmediğimiz için tarayıcının mevcut sayfanın göründüğü tüm sayfayı yeniden görüntüleyeceğini fark edeceksin.</blockquote>
5144. <pre class="code"><ul class="ucode"><li><span style="color: blue"><form></span></li><li>    Kullanıcı adı<span style="color: blue"><br></span></li><li>    <span style="color: blue"><input</span> <span style="color: red">type="</span>text<span style="color: red">"</span><span style="color: blue">></span><span style="color: blue"><br></span><span style="color: blue"><br></span></li><li>    şifre<span style="color: blue"><br></span></li><li>    <span style="color: blue"><input</span> <span style="color: red">type=</span><span style="color: red">"</span>password<span style="color: red">"</span><span style="color: blue">></span><span style="color: blue"><br></span><span style="color: blue"><br></span></li><li>    <span style="color: blue"><input</span> <span style="color: red">type="</span>submit<span style="color: red">"</span> <span style="color: red">value=</span><span style="color: red">"</span>Login<span style="color: red">"</span><span style="color: blue">></span></li><li><span style="color: blue"></form</span><span style="color: blue">></span></li></ul></pre>
5145. <a href="https://code.k-html.com/kodlar/form-içeriği-göndermek-için-düğme-eklemek.html" target="_blank" class="elifnur">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
5146. <hr />
5147. <h2 id="fvgyb">Form verilerini gönderme yöntemini belirtmek</h2>
5148. <p><span>Form</span> verileri gönderilirken veri aktarımı için kullanılacak yöntem belirtilmelidir.<br />
5149. <span>post</span> ve <span>get</span> olmak üzere iki ana yöntem vardır.</p>
5150. <p><span>Formda</span> veri gönderme yöntemini belirtmek için <span>method</span> özelliğini ekliyoruz ve aşağıdaki gibi <span>get</span> değeri veya <span>post</span> değeri iletiyoruz.</p>
5151. <pre class="code"><ul class="ucode"><li><span style="color: #00008B;"><!--<span style="color: #00008B;"></span> get yöntemini kullanacaksak. <span style="color: #00008B;">--></span></span></li><li><span style="color: blue"><form</span> <span style="color: red">method=</span><span style="color: red">"</span>get<span style="color: red">"</span><span style="color: blue">></span></li><li></li><li><span style="color: #00008B;"><!--<span style="color: #00008B;"></span> post yöntemini kullanacaksak. <span style="color: #00008B;">--></span></span></li><li><span style="color: blue"><form</span> <span style="color: red">method=</span><span style="color: red">"</span>post<span style="color: red">"</span><span style="color: blue">></span></li></ul></pre>
5152. <br />
5153. <br />
5154. <h3><span>get</span> yöntemi hakkında bilgiler.</h3>
5155. <ul>
5156. <li><span>Forma</span> girilen veriler, gönderileceği sayfanın bağlantısına eklenir.</li>
5157. <li>Bağlantı boyutu <span>2048</span> karakteri aşamadığından, sayfa bağlantısı karakter sayısıyla sınırlıdır.</li>
5158. <li>Gönderilen tüm veriler bağlantıda göründüğünden, gönderilen veriler kullanıcı şifresi gibi hassas ise bu yöntem geçerli değildir.</li>
5159. <li>Sayfa kaydetmeyi (<span style="color: #00008B;">bookmark</span>) etkinleştirmek istiyorsan bu yöntem mükemmeldir.</li>
5160. </ul>
5161. <br />
5162. <br />
5163. <h3><span>post</span> yöntemi hakkında bilgiler.</h3>
5164. <ul>
5165. <li><span>Forma</span> girilen veriler normal bir kullanıcının göremeyeceği şekilde gönderilir.</li>
5166. <li>Gönderilecek veri miktarı konusunda endişelenmeden sınırsız sayıda mektup gönderebilirsin.</li>
5167. <li>Bu yöntem, gönderilen verilerin kullanıcının şifresi veya kredi kartı bilgileri gibi hassas olması durumunda iyidir.</li>
5168. <li>Sayfa kaydetmeyi (<span style="color: #00008B;">bookmark</span>) etkinleştirmek istiyorsan bu yöntem kullanışlı değildir.</li>
5169. </ul>
5170. <blockquote><span>Not</span>: Bir sayfa tasarımcısı olarak (<span>web designer</span>), veri gönderme yöntemleri arasındaki farkı hiç umursamıyorsun çünkü bu, onu programlamaktan sorumlu olan site geliştiricisi (<span>Web Developer</span>)'nin sorumluluğundadır ve elbette bunu anlayacaksın.<br />
5171. Gelecekte siteleri programlamayı öğrenmeye başladığında daha doğru bir şekilde anlarsın.</blockquote>
5172. <hr />
5173. <h2 id="fyeiv">Forma yerleştirilen etiketlere isim vermek</h2>
5174. <p>Kullanıcının verilerini girebilmesi veya içinden verilerini seçebilmesi için <span>forma</span> yerleştirilen herhangi bir etiketin <span>name</span> niteliğine sahip olması gerekir, her etikete aşağıdaki gibi <span>name</span> niteliği için farklı bir değer verilmesi gerektiğine dikkat edilmelidir.</p>
5175. <pre class="code"><ul class="ucode"><li><span style="color: blue"><form</span><span style="color: blue">></span></li><li>    <span style="color: #00008B;"><!--<span style="color: #00008B;"></span> Bu etikette name niteliğini ekledim ve ona <span style="color: red">"</span>username<span style="color: red">"</span> değerini verdim. <span style="color: #00008B;">--></span></span></li><li>    <span style="color: blue"><input</span> <span style="color: red">type=</span><span style="color: red">"</span>text<span style="color: red">"</span> <span style="color: red">name=</span><span style="color: red">"</span>username<span style="color: red">"</span><span style="color: blue">></span></li><li></li><li>    <!-- Bu etikette name niteliğini ekledim ve ona <span style="color: red">"</span>password<span style="color: red">"</span> değerini verdim. --<span style="color: blue">></span></li><li>    <span style="color: blue"><input</span> <span style="color: red">type=</span><span style="color: red">"</span>password<span style="color: red">"</span> <span style="color: red">name=</span><span style="color: red">"</span>password<span style="color: red">"</span><span style="color: blue">></span></li><li></li><li>    <span style="color: #00008B;"><!--<span style="color: #00008B;"></span> Bu etiketin name özelliğini içermesine gerek yoktur çünkü içine bir değer girmeyeceğiz. <span style="color: #00008B;">--></span></span></li><li>    <span style="color: blue"><input</span> <span style="color: red">type=</span><span style="color: red">"</span>submit<span style="color: red">"</span><span style="color: blue">></span></li><li><span style="color: blue"></form</span><span style="color: blue">></span></li></ul></pre>
5176. <br />
5177. <p>Etiketlere verilen <span>name</span> kelimesi kullanıcının önüne görüntülenmez, ancak kullanıcının ilk kutucuğa yazdıklarını <span>username</span> ikinci kutuya yazdıklarını <span>password</span> olarak tarayıcıya kaydetmesini sağlar, böylece girilen her bilginin onu diğerlerinden ayıran bir değeri olur.</p>
5178. <p>Burada kullanıcının ilk metin kutusuna <span>"k-kudo"</span> değerini ve ikinci kutuya <span>"ens"</span> değerini girdiğini varsayarsak, değerleri bu basit formda programlı olarak saklayacaktır.</p>
5179. <pre class="code"><ul class="ucode"><li>[</li><li>    username: <span style="color: red">"k−kudo"</span>,</li><li>    password: <span style="color: red">"ens"</span></li><li>]</li></ul></pre>
5180. <blockquote>Etikete <span>name</span> özelliği ile bir isim verildiğinde, doldurduğunda tarayıcı seni önerilerde bulunabilmektedir.<br />
5181. Basit bir örnek olarak, bulduğun herhangi bir siteye giriş yapmaya çalıştığında, kendisini seçmek istemeni durumunda, giriş yapmak için kullandığın önceki bilgileri seni gösterecektir.</blockquote>
5182. <hr />
5183. <h2 id="fingb"><span>Form</span> içeriğinin nereye gönderileceğini belirtmek</h2>
5184. <p><span>submit</span> tipi ile bir butona tıklandığında <span>form</span> içeriğinin nereye gönderileceğini belirtmek için <span>action</span> özelliğini ekliyoruz ve ondan veri alacak sitenin <span>URL</span>'sini geçiyoruz.</p>
5185. <h4>Teknik bilgi</h4>
5186. <blockquote>Site, verileri başka bir sayfada olduğu gibi görüntüleyebilir ve üzerinde değişiklik yapabilir ve bir <a href="https://www.k-html.com/2022/03/database-veritabanlar.html" target="_blank">veritabanına</a> kaydedebilir vb.<br />
5187. Bunları, şu anda yalnızca sayfa tasarımı bölümünü öğrendiğin için şimdi değil, eksiksiz bir web sitesi geliştirmeyi öğrendiğinde öğreneceksin.
5188. </blockquote>
5189. <p>Aşağıdaki örnekte, kullanıcı verilerini <span>post</span> stilinde almak için önceden hazırladığımız <span>k-html</span> sitesinde <span>form</span> verilerinin başka bir sayfaya gönderileceğini ve ardından olduğu gibi görüntüleneceğini belirtiyoruz.</p>
5190. <pre class="code"><ul class="ucode"><li><span style="color: blue"><form</span> <span style="color: red">action=</span><span style="color: red">"</span>.<span style="color: blue">/</span>submit−account.php<span style="color: red">"</span> <span style="color: red">method=</span><span style="color: red">"</span>post<span style="color: red">"</span><span style="color: blue">></span></li><li>     Username<span style="color: blue"><b</span>r<span style="color: blue">></span></li><li>    <span style="color: blue"><input</span> <span style="color: red">type=</span><span style="color: red">"</span>text<span style="color: red">"</span> <span style="color: red">name=</span><span style="color: red">"</span>username<span style="color: red">"</span><span style="color: blue">></span><span style="color: blue"><b</span>r<span style="color: blue">></span><span style="color: blue"><b</span>r<span style="color: blue">></span></li><li>    Password<span style="color: blue"><b</span>r<span style="color: blue">></span></li><li>    <span style="color: blue"><input</span> <span style="color: red">type=</span><span style="color: red">"</span>password<span style="color: red">"</span> <span style="color: red">name=</span><span style="color: red">"</span>password<span style="color: red">"</span><span style="color: blue">></span><span style="color: blue"><b</span>r<span style="color: blue">></span><span style="color: blue"><b</span>r<span style="color: blue">></span></li><li>    <span style="color: blue"><input</span> <span style="color: red">type=</span><span style="color: red">"</span>submit<span style="color: red">"</span> <span style="color: red">value=</span><span style="color: red">"</span>Login<span style="color: red">"</span><span style="color: blue">></span></li><li><span style="color: blue"></form</span><span style="color: blue">></span></li></ul></pre>
5191. <a href="https://code.k-html.com/kodlar/fingb.html" target="_blank" class="elifnur">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
5192. <hr />
5193. <h2 id="fote">Formda otomatik tamamlamayı eklemek</h2>
5194. <p>Eğer <span>formun</span> içine yerleştirilen metin kutularını doldururken <span>formun</span> kullanıcıya öneriler göstermesini istiyorsan, <span>autocomplete</span> özelliğini <span><form></span> etiketine ekleyip öneri gösterip vermek istiyorsan <span>on</span> değerini verebilirsin, ve öneri göstermek istemiyorsan <span>off</span> değerini verebilirsin.</p>
5195. <p>Varsayılan olarak, otomatik tamamlama varsayılan olarak etkindir, yani kendini belirtmesen bile <span><form autocomplete="on"></span> olarak belirtilir.</p>
5196. <p>Aşağıdaki örnekte, <span>formda</span> otomatik tamamlamayı etkinleştirdim.<br />
5197.  Yani burada, <span>formu</span> doldururken, tarayıcının metin kutularına daha önce girdiğin bilgileri seçmeni önereceğini fark edeceksin.</p>
5198. <pre class="code"><ul class="ucode"><li><span style="color: blue"><form</span> <span style="color: red">autocomplete=</span><span style="color: red">"</span>on<span style="color: red">"</span><span style="color: blue">></span></li><li>   ...</li><li><span style="color: blue"></form</span><span style="color: blue">></span></li></ul></pre>
5199. <a href="https://code.k-html.com/kodlar/fote.html" target="_blank" class="elifnur">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
5200. <br /><br />
5201. <p>Aşağıdaki örnekte formda otomatik tamamlamayı kapattım.</p>
5202. <p>Yani burada formu doldururken, tarayıcının daha önce girdiğin hiçbir bilgiyi seçmeni önermediğini fark edeceksin.<br />
5203. Bunun bazı tarayıcılarda farklılık gösterdiğini unutma.</p>
5204. <pre class="code"><ul class="ucode"><li><span style="color: blue"><form</span> <span style="color: red">autocomplete=</span><span style="color: red">"</span>off<span style="color: red">"</span><span style="color: blue">></span></li><li>   ...</li><li><span style="color: blue"></form</span><span style="color: blue">></span></li></ul></pre>
5205. <a href="https://code.k-html.com/kodlar/fote2.html" target="_blank" class="elifnur">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
5206. <hr />
5207. <h2 id="fgdik"><span>Forma</span> girilen değerlerin kontrolü kaldırmak</h2>
5208.  <p>Varsayılan olarak, <span>form</span>, kullanıcı göndermeden önce gönder düğmesini tıkladığında girilen değer türlerini kontrol eder.<br />Doğru bulursa gönderir ve değilse, verileri gönderebilmesi için düzeltmeni gereken hataları bildiren bir mesaj gösterir.</p>
5209. <p>Şimdi, <span>forma</span> girilen değerleri göndermeden önce tarayıcının otomatik doğrulamasını iptal etmek istersen, <span><form></span> etiketinin <span>novalidate</span> özelliğini <span><form</span> <span style="color: red;">novalidate</span><span>></span> olarak ekleyebilirsin.</p>
5210.  <blockquote><span style="color: red;">Not</span>: <span>Novalidate</span> özelliği <a href="https://www.apple.com/safari/" target="_blank" rel="nofollow">Safari</a> dışındaki en popüler tarayıcılarda çalışıyor.</blockquote>
5211.  <p>Aşağıdaki örnekte, <span>forma</span> girilen değerler üzerinde otomatik kontrolü iptal ettim.<br />
5212.    Burada tarayıcının girilen <span>e-postanın</span> geçerli olup olmadığına bakmaması için <span>novalidate</span> özelliğini <span><form></span> etiketine ekledim.</p>
5213. <pre class="code"><ul class="ucode"><li><span style="color: blue"><form</span> <span style="color: red">novalidate</span><span style="color: blue">></span></li><li>   ...</li><li><span style="color: blue"></form</span><span style="color: blue">></span></li></ul></pre>
5214. <a href="https://code.k-html.com/kodlar/fgdik.html" target="_blank" class="elifnur">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
5215. <hr />
5216. <h2 id="fvasnab"><span>Form</span> verilerini alan sayfanın nerede açılacağını belirtmek</h2>
5217. <p>Varsayılan olarak data gönder butonuna tıkladığında o anki sayfanın yerine datayı alan sayfa açılacaktır daha ne demek istediğimi anlamak için önceki örneklerdeki <span style="color: red">target=</span><span style="color: red">"</span>preview<span style="color: red">"</span> özelliğini sil ve kodu dene.</p>
5218. <p>Verileri alan sayfanın nerede açılacağını belirtmek istiyorsan, <span><form></span> etiketine <span>target</span> özelliğini eklemeli ve ona aşağıdaki değerlerden birini vermelisin:</p>
5219. <ul>
5220.  <li><span class="ensbtn">_self</span>: Açık olan sayfanın yerine yeni sayfanın açılmasını istiyorsan kullanırsın. (bu varsayılan seçenektir)</li><span class="br"></span>
5221.  <li><span class="ensbtn">_blank</span>: Tarayıcıda yeni bir sekme açmak ve sayfayı açmak istiyorsan kullanırsın.</li><span class="br"></span>
5222.  <li><span class="ensbtn">_top</span>: Yeni sayfanın mevcut sayfa ile aynı sayfada açılmasını ve içine yerleştirilmiş olan örtüşen sayfaları kaldırmanı istiyorsan kullanırsın.</li><span class="br"></span>
5223.  <li><span class="ensbtn">_parent</span>:  Mevcut sayfanın bulunduğu sayfanın yerine yeni sayfanın açılmasını istiyorsan kullanırsın.</li><span class="br"></span>
5224.  <li><span class="ensbtn">framename</span>: Yeni sayfanın aynı sayfada bir çerçeve ( <a href="https://www.k-html.com/2021/12/html-iframe.html" target="_blank"><iframe></a> ) içinde açılmasını istiyorsan kullanırsın.</li>
5225. </ul>
5226. <p>Aşağıdaki örnekte, başka bir sayfaya veri gönderirken ikinci sayfayı yeni bir sekmede açan bir <span>form</span> ekledim.</p>
5227. <pre class="code"><ul class="ucode"><li><span style="color: blue"><form</span> <span style="color: red">target=</span><span style="color: red">"</span>_blank<span style="color: red">"</span><span style="color: blue">></span></li><li>   ...</li><li><span style="color: blue"></form</span><span style="color: blue">></span></li></ul></pre>
5228. <a href="https://code.k-html.com/kodlar/fvasnab.html" target="_blank" class="elifnur">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
5229. <br />
5230. <br />
5231. <p>Aşağıdaki örnekte, başka bir sayfaya veri gönderirken, aynı sayfaya yerleştirilmiş bir <a href="https://www.k-html.com/2021/12/html-iframe.html" target="_blank">çerçeve</a> içinde ikinci sayfayı açan <span>my_iframe</span> adlı bir <span>form</span> ekledim.</p>
5232. <pre class="code"><ul class="ucode"><li><span style="color: blue"><form</span> <span style="color: red">target=</span><span style="color: red">"</span>my_iframe<span style="color: red">"</span><span style="color: blue">></span></li><li>    ...</li><li><span style="color: blue"></form</span><span style="color: blue">></span></li><li></li><li><span style="color: blue"><iframe</span> <span style="color: red">name=</span><span style="color: red">"</span>my_iframe<span style="color: red">"</span><span style="color: blue">></span><span style="color: blue"></iframe></span></li></ul></pre>
5233. <a href="https://code.k-html.com/kodlar/fvasnab2.html" target="_blank" class="elifnur">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
5234. <hr />
5235. <h2 id="fbkeoe">Formla birlikte kullanılan en önemli etiketler</h2>
5236. <p>Kullanıcının kendisinden istediğin bilgileri girmesini sağlamak veya onun için önceden hazırlamış olduğun bilgilerden birini seçmesini sağlamak için <span>formlara</span> eklenebilecek birçok etiket bulunmaktadır. Ileride hazır ürünler hakkında bilgi edineceksin. <span>formlara</span> eklenebilecek harika etiketler elde etmek için kullanabileceğin kütüphaneler var.</p>
5237. <p>Işte bilmeni gereken en önemli etiketler:</p>
5238. <ul>
5239.  <li><span class="ensbtn"><label></span>: <span>Form</span> içerisine yerleştirilen elemana özel bir isim vermek için kullanılır.</li>
5240.  <span class="br"></span>
5241.  <li><span class="ensbtn"><button></span>: Bir düğme için kullanılır.</li>
5242.  <span class="br"></span>
5243. <li><span class="ensbtn"><textarea></span>: Birden fazla satırdan oluşan bir metin kutusu almak için kullanılır.</li>
5244.  <span class="br"></span>
5245. <li><span class="ensbtn"><select></span>: Değerlerinden birinin seçilmesi gereken bir açılır <a href="https://www.k-html.com/2021/05/html-sralamal-listeler.html" target="_blank">liste</a> almak için kullanılır.</li>
5246.  <span class="br"></span>
5247. <li><span class="ensbtn"><datalist></span>: Birinin seçilebileceği bir açılır <a href="https://www.k-html.com/2021/05/html-srasz-listeler.html" target="_blank">liste</a> almak için kullanılır.</li>
5248.   <span class="br"></span>
5249.  <li><span class="ensbtn"><fieldset></span>: Modele bordür eklemek için kullanılır, bu da daha güzel görünmesini sağlar.</li>
5250.  <span class="br"></span>
5251.  <li><span class="ensbtn"><input></span>: Birçok <span>form</span> elde etmek için kullanılabileceği için en önemli etiketlerden biri olarak kabul edilir.</li>
5252. </ul>
5253. <br />
5254. <h3 id="type"><span><input></span> etiketinin <span>type</span> özelliği</h3>
5255. <p>Bu etiket ile elde edilebilecek şekiller için, buna <span>type</span> özelliğini eklemeli ve almak istediğin şekli belirtmek için önceden tanımlanmış değerlerden birini vermelisin. Bunlar, tüm tarayıcılarda çalıştıkları için elde edilebilecek en önemli biçimlerdir:</p>
5256. <ul>
5257.  <li><span class="ensbtn"><input type="text"></span>: Düz metin kutusu için bu, varsayılan türüdür.</li>
5258.  <span class="br"></span>
5259.  <li><span class="ensbtn"><input type="password"></span>: Özel bir parola girişi metin kutusu için kullanılır.</li>
5260.  <span class="br"></span>
5261.  <li><span class="ensbtn"><input type="number"></span>: Sayıları girmek için özel bir metin kutusu için kullanılır.</li>
5262.  <span class="br"></span>
5263.  <li><span class="ensbtn"><input type="email"></span>: Bir <span>e-posta</span> girmek için özel bir metin kutusu için kullanılır.</li>
5264.  <span class="br"></span>
5265.  <li><span class="ensbtn"><input type="button"></span>: Normal bir düğme için kullanılır.</li>
5266.  <span class="br"></span>
5267.  <li><span class="ensbtn"><input type="submit"></span>: <span>Form</span> verilerini göndermek için özel bir düğme için kullanılır.</li>
5268.  <span class="br"></span>
5269.  <li><span class="ensbtn"><input type="reset"></span>: <span>Formun</span> tüm öğelerinin ilk değerlerini döndürmek için özel bir düğme için kullanılır.</li>
5270.  <span class="br"></span>
5271.  <li><span class="ensbtn"><input type="file"></span>: Kullanıcının cihazdan bir dosya seçmesini sağlamak için özel bir düğme için kullanılır.</li>
5272.  <span class="br"></span>
5273.  <li><span class="ensbtn"><input type="range"></span>: Bir tamsayı değeri seçmek için hareket ettirilebilen bir çubuğa sahip olmak için kullanılır.</li>
5274.  <span class="br"></span>
5275.  <li><span class="ensbtn"><input type="checkbox"></span>: Kare düğme için seçilebilir veya seçimi kaldırılabilmek için kullanılır.</li>
5276.  <span class="br"></span>
5277.  <li><span class="ensbtn"><input type="radio"></span>: Dairesel düğme için seçilebilir veya seçimi kaldırılabilmek için kullanılır.</li>
5278.  <span class="br"></span>
5279. </ul>  
5280. <a href="https://code.k-html.com/kodlar/form-type.html" class="elifnur" target="_blank">Tüm özellikleri dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
5281. <blockquote><span style="color: red;">Not</span>: Bu özelliklerin nasıl kullanılacağını sonraki derslerde detaylı olarak öğreneceksin.</blockquote>
5282. <div class="parent-links">  
5283.    <a class="btn btn-primary" href="https://www.k-html.com/2021/12/html-iframe.html">
5284. <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>      önceki ders
5285.    </a>
5286.    <a class="btn btn-primary" href="https://www.k-html.com/2022/04/html-form-ogeleri-adresleme.html">
5287.      sonraki ders
5288.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
5289.    </a>
5290.  &lt;/div&gt;</content><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/4001241812390029288'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/4001241812390029288'/><link rel='alternate' type='text/html' href='https://www.k-html.com/2022/04/html-formlar.html' title='HTML Formlar'/><author><name>HTML öğren</name><uri>http://www.blogger.com/profile/05938401370972816509</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB9hVaVznt_p0FHumsq5E1ns0HFhwUsz5N8PDjeIc1oE4O70yakyUZqpJJiZyKolfcNdZlaOrykdeVaT9wGLi4Gp6Ko2vw9JCv-r2AQBF1JjXNu_09kuRKvXx-7fys1Hw/s113/html.jpg'/></author></entry><entry><id>tag:blogger.com,1999:blog-624213398567285603.post-7766887168830116389</id><published>2022-03-28T05:37:00.474+03:00</published><updated>2023-05-07T05:57:35.327+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="database"/><category scheme="http://www.blogger.com/atom/ns#" term="veritabanlar"/><title type='text'>Database - Veritabanları </title><content type='html'>&lt;h4&gt;&lt;strong&gt;&lt;span style=&quot;color: purple&quot;&gt;Veritabanları&lt;/span&gt; - tanımı, türleri ve &lt;span style=&quot;color: purple&quot;&gt;veritabanlar&lt;/span&gt; hakkında bütün ihtiyacın olduğu ilgiler.&lt;/strong&gt;&lt;/h4&gt;
5291. <br />
5292. <p><span style="color: purple">Veritabanı</span>, organize bir şekilde saklanan bir veri setidir.<br /> Bir sistemi verimli bir şekilde çalıştırmak için, o belirli sisteme giren ve/veya çıkan geçmiş ve mevcut kayıtlar için etkin belleğe ihtiyacın olacaktır.<br />
5293. Aynısı, birkaç kişinin ortak çabalarını gerektiren bir işletme veya kuruluş için de geçerlidir. Bu amaçla, büyük ve küçük şirketler ve hastaneler, okullar ve üniversiteler gibi kuruluşlar, mevcut çeşitli <span style="color: purple">veritabanlarında</span> depolanan sistematik <span style="color: purple">“varlıklara”</span> veri elde etmek, derlemek ve paylaşmak için çok yararlı bir yöntem olur.<br />
5294. Şirketler, benzersiz iş ihtiyaçlarını karşılamak için farklı türde <span style="color: purple">veritabanları</span> kullanabilir.<br />
5295. Bu derste <span style="color: purple">veritabanlarının</span> tüm yönlerine bakacağız.</p>
5296. <a href="https://src.k-html.com/database-veritaban.png"><img alt="Database fotoğrafı" height="225" src="https://src.k-html.com/database-veritaban.png" width="400" /></a>
5297. <div class="parent-links">  
5298.    <a class="btn btn-primary" href="https://www.k-html.com/2021/12/html-sesleri.html">
5299.      <i class="fas fa-angle-double-left"></i>
5300.      önceki ders
5301.    </a>
5302.    <a class="btn btn-primary" href="https://www.k-html.com/2022/06/html5-nedir.html">
5303.      sonraki ders
5304.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
5305.    </a>
5306.  </div>
5307. <details open="">
5308.  <summary style="text-align: left;"><strong>Sayfa içeriği</strong></summary>
5309.  <ul class="postcontent">
5310.      <li>
5311.  <strong>›</strong><a href="https://www.k-html.com/2022/03/database-veritabanlar.html#ens1">İçerik Özeti</a>
5312.      </li>
5313.    <li>
5314.  <strong>›</strong><a href="https://www.k-html.com/2022/03/database-veritabanlar.html#ens2">Veritabanlarını Tanımlamak</a>
5315.      </li>
5316.    <li>
5317.  <strong>›</strong><a href="https://www.k-html.com/2022/03/database-veritabanlar.html#ens3">Veritabanı Hedefleri</a>
5318.      </li>
5319.    <li>
5320.  <strong>›</strong><a href="https://www.k-html.com/2022/03/database-veritabanlar.html#ens4">Veritabanı Türleri</a>
5321.      </li>
5322.    <li>
5323.  <strong>›</strong><a href="https://www.k-html.com/2022/03/database-veritabanlar.html#ens5">Veritabanı Özellikleri</a>
5324.      </li>
5325.    <li>
5326.  <strong>›</strong><a href="https://www.k-html.com/2022/03/database-veritabanlar.html#ens6">Veritabanı Yönetim Sistemi</a>
5327.      </li>
5328.    <li>
5329.  <strong>›</strong><a href="https://www.k-html.com/2022/03/database-veritabanlar.html#ens7">Veritabanı Ortamları</a>
5330.      </li>
5331.    <li>
5332.  <strong>›</strong><a href="https://www.k-html.com/2022/03/database-veritabanlar.html#ens8">Veritabanlarının Faydaları</a>
5333.      </li>
5334.    <li>
5335.  <strong>›</strong><a href="https://www.k-html.com/2022/03/database-veritabanlar.html#ens9">Veritabanlarının Dezavantajları</a>
5336.      </li>
5337.    <li>
5338.  <strong>›</strong><a href="https://www.k-html.com/2022/03/database-veritabanlar.html#ens10">Veritabanlarının avantajı</a>
5339.      </li>
5340.    <li>
5341.  <strong>›</strong><a href="https://www.k-html.com/2022/03/database-veritabanlar.html#ens11">Veritabanı Kullanım Örnekleri</a>
5342.      </li>
5343.    <li>
5344.  <strong>›</strong><a href="https://www.k-html.com/2022/03/database-veritabanlar.html#ens12">Veritabanı Geliştirme</a>
5345.      </li>
5346.    <li>
5347.  <strong>›</strong><a href="https://www.k-html.com/2022/03/database-veritabanlar.html#ens13">Veritabanı Yaşam Döngüsü</a>
5348.      </li>
5349.    <li>
5350.  <strong>›</strong><a href="https://www.k-html.com/2022/03/database-veritabanlar.html#ens14">Veritabanı geliştirme aşamaları</a>
5351.      </li>
5352.    <li>
5353.  <strong>›</strong><a href="https://www.k-html.com/2022/03/database-veritabanlar.html#ens15">Veritabanı Terminolojisi</a>
5354.      </li>
5355.    <li>
5356.  <strong>›</strong><a href="https://www.k-html.com/2022/03/database-veritabanlar.html#ens16">İyi Veritabanı Tasarımı</a>
5357.      </li>
5358.    <li>
5359.  <strong>›</strong><a href="https://www.k-html.com/2022/03/database-veritabanlar.html#ens17">Veritabanı Tasarım Adımları</a>
5360.      </li>
5361.    <li>
5362.  <strong>›</strong><a href="https://www.k-html.com/2022/03/database-veritabanlar.html#ens18">Veritabanları Neden Önemlidir?</a>
5363.      </li>
5364.    <li>
5365.  <strong>›</strong><a href="https://www.k-html.com/2022/03/database-veritabanlar.html#ens19">Veritabanlar Öğrenmeyi Ne Kadar Sure Alır?</a>
5366.      </li>
5367.     </ul>
5368.  </details>
5369. <hr class="hrkk" />
5370. <h2 id="ens1"><strong>İçerik Özeti</strong></h2>
5371. <p><span style="color: purple">Veritabanlarının</span> veya <span style="color: purple">bilgi tabanlarının</span> kavramını ve tanımını, amaçlarını ve farklı <span style="color: purple">veritabanları</span> türlerini açıklama. <span style="color: purple">Veritabanı</span> yönetim sistemleri, ortamları, avantajları, dezavantajları, terminolojisi ve veritabanlarının önemi. Veritabanı tasarım yöntemlerini ve bunun için iyi tasarım özelliklerini açıklama.</p>
5372. <hr />
5373. <h2 id="ens2"><strong><span style="color: purple">Veritabanlarını</span> Tanımlamak</strong></h2>
5374. <p>Bir <span style="color: purple">veritabanı</span> veya <span style="color: purple">bilgi tabanı</span> (<span style="color: purple">Database</span>), mantıksal veya matematiksel bir ilişki ile birbiriyle ilişkili olan ortak bir ilgili veri öğeleri kümesidir. Belirli bir kuruluş veya şirketin faaliyetlerini desteklemek için kullanılır.</p>
5375. <p>Bir <span style="color: purple">veritabanı</span>, bir kez tanımlanan ve daha sonra birçok kullanıcı tarafından erişilen bir <span style="color: purple">veri deposu</span> olarak görülebilir.</p>
5376. <p>Bir <span style="color: purple">veritabanı</span> bir veya daha fazla <span style="color: purple">tablodan</span> oluşur.<br />Bir <span style="color: purple">tablo</span>, bir veya daha fazla <a href="https://www.k-html.com/p/database-kayt.html" target="_blank"><span style="color: purple">kayıttan</span></a> (<span style="color: purple">satır</span>) oluşur.<br />Bir <a href="https://www.k-html.com/p/database-kayt.html" target="_blank"><span style="color: purple">kayıt</span></a>, bir veya daha fazla <span style="color: purple"><a href="https://www.k-html.com/p/database-alanlar.html">alandan</a></span> oluşur.</p>
5377. <p>Kayıtlara bir örnek, bir şirketteki belirli bir çalışanın kaydıdır.<br /> Aşağıdakiler gibi çeşitli <span style="color: purple">alanlardan</span> oluşur:</p>
5378. <ul>
5379.  <li>Çalışan Numarası.</li>
5380.  <li>Çalışan Adı.</li>
5381.  <li>fonksiyonel sınıf.</li>
5382.  <li>işe alma tarihi.</li>
5383.  <li>temel maaş.</li>
5384.  <li>Çalıştığı departman.</li>
5385.  <li>Çalışma saatlerinin süresi.</li>
5386.  <li>Ve diğer birçok bilgi.</li>
5387. </ul>
5388. <p>Ve bir bilgisayarda organize bir şekilde saklanan diğer çalışan verileri <span style="color: purple">Veritabanı Yönetim Sistemi (Database Management System)</span> adı verilen ve verilerle uğraşmayı ve aramayı kolaylaştıran ve kullanıcının eklemesini ve değiştirmesini sağlayan bir bilgisayar programı içinde.</p>
5389. <p>Veriler, <a href="https://www.k-html.com/p/database-sql.html"><span style="color: purple">Structured Query Language</span></a> adlı bir dilde özel komutlar kullanılarak alınır ve belirli verilerin sorgulanmasına veya verilerin özetlenmesine ve karar verme sürecinde yönetime yardımcı olan faydalı bilgilerin alınmasına yardımcı olan <a href="https://www.k-html.com/p/database-sql.html"><span style="color: purple"><abbr title="Structured Query Language">SQL</abbr></span></a> kısaltmasıyla sembolize edilir.</p>
5390. <hr />
5391. <h2 id="ens3"><strong><span style="color: purple">Veritabanı Hedefleri</span></strong></h2>
5392. <p><span style="color: purple">Veritabanı</span> tasarımının temel amacı, belirli bir şirkete ait veri miktarlarını depolamak için entegre bir ortam yaratmaktır, verilerin örnek teşkil edecek şekilde düzenlenme şekline vurgu yaparak.</p>
5393. <p><span style="color: purple">Veritabanı</span> tasarımcısının temel amacı, bilgi veya veriyi, büyük miktarda veriyi düzenli bir şekilde barındıracak, fazlalık olmayacak ve sorunsuz bir şekilde alınabilecek, değiştirilebilecek ve eklenebilecek şekilde yapılandırmaktır. Bundan maksimum faydayı elde etmek için veri yapısını taksonomik yapıya yakınlaştırmayı dikkate almak.</p>
5394. <p><span style="color: purple">Bilgi tabanları</span>, orta yönetim ve stratejik yönetim için birçok hedefe ulaşır.<br />Ayrıca şirket veya kurumdaki karar vericilere analiz, veri madenciliği yapma ve gerekli sonuçlara ulaşma yeteneği sağlar.</p>
5395. <hr />
5396. <h2 id="ens4"><strong><span style="color: purple">Veritabanı</span> Türleri</strong></h2>
5397. <p>İçlerindeki farklı veri türleri arasında <span style="color: purple">mantıksal</span> ve <span style="color: purple">matematiksel</span> ilişkinin türüne bağlı olarak <span style="color: purple">veritabanı</span> kombinasyonları vardır.</p>
5398. <p>Yapının doğası gereği üç tür veri tabanı tanımlanabilir ve bunlar aşağıdaki gibidir:</p>
5399. <ul>
5400.  <li><a href="https://www.k-html.com/p/database-iliskisel-veritaban.html">İlişkisel veritabanları</a></li>
5401.  <li>Yapılandırılmış veritabanları</li>
5402.  <li>Hiyerarşik veritabanları</li>
5403. </ul>
5404. <p><span style="color: purple">Veritabanlarının</span> boyutuna ve kullanımlarının doğasına göre:</p>
5405. <ul>
5406.  <li>Büyük Veritabanları</li>
5407.  <li><a href="https://www.k-html.com/p/database-veri-depolar.html">Veri Depoları</a></li>
5408. </ul>
5409. <p>Aşağıda her birinin ayrıntılı bir açıklaması ekledim:</p>
5410. <br />
5411. <small><h3><strong>İlişkisel <span style="color: purple">veritabanları</span></strong>:</h3></small><p> İlişkisel bir veritabanı, veri öğeleri arasındaki ilişkisel yapıdır.<br />
5412. İlişkisel yapı, veri öğeleri arasında, kullanılan bir öğenin değeri iki öğenin toplamı olacak şekilde belirli bir ilişkinin kullanılmasıdır. Bu yapı, bilgi <span style="color: purple">veritabanları</span> dünyasında uygulanan en başarılı yapıdır, çünkü veriler arasındaki ilişki türünde çeşitlilik sağlar, çünkü içindeki ilişkileri uygulama olanakları diğer herhangi bir yapıya göre daha fazladır.</p>
5413. <small><h3><strong>Yapılandırılmış <span style="color: purple">veritabanları</span></strong>:</h3></small> <p>Yapılandırılmış bir <span style="color: purple">veritabanı</span>, veri öğeleri arasındaki yapılandırılmış yapıyı kullanan bir <span style="color: purple">veritabanıdır</span>.
5414. <br />
5415. Veri unsurları arasındaki organizasyonel yapı ilişkisinin kullanmaktadır.
5416. <br />
5417. Örneğin, iki öğe bir öğe altında veya ona bağlı olarak sınıflandırılır.</p>
5418. <small><h3><strong>Hiyerarşik <span style="color: purple">veritabanları</span></strong>:</h3></small><p> Veri öğeleri arasında hiyerarşik bir ilişkiye bağlı olan <span style="color: purple">veritabanlarıdır.</span>
5419. <br />
5420. Örneğin, her öğe yukarıdan aşağıya doğru sırayla yalnızca bir öğeden sorumludur ve başka bir öğeden sorumlu değildir ve bu böyle devam eder.</p>
5421. <br/>
5422. <small><h3><strong>Büyük <span style="color: purple">Veritabanları</span></strong></h3></small>
5423. <p><span style="color: purple">Veritabanı</span> türlerine boyut açısından bakıldığında, <span style="color: purple">veritabanları</span> bu şekilde ayrılabilir:</p>
5424.  <ul>
5425.    <li>Belirli bir kuruluşa veya şirkete hizmet veren basit veritabanları.</li>
5426.    <li>Büyük veritabanları veya veri merkezleri.</li>
5427.  </ul>
5428.  <p>Büyük <span style="color: purple">veritabanları</span> veya <span style="color: purple">veri merkezleri</span>, klimalar aracılığıyla operasyonel alan, insan kaynakları, bakım uzmanları ve uygun hava koşulları açısından <span style="color: purple">veritabanları</span> için gerekli ayarlarla donatılmasıyla karakterize edilen devasa binalardır ve bunlar için kullanılan birkaç koruyucu enerji jeneratörü vardır büyük miktarda veriyi depolamak ve yönetmek için.</p>
5429. <p>Veri merkezlerine örnek olarak <span style="color: blue">G</span><span style="color: red">o</span><span style="color: blue">o</span><span style="color: blue">g</span><span style="color: green">l</span><span style="color: red">e</span>, <span style="color: blue">Facebook</span> ve diğerleri gibi <span style="color: purple">dev</span> teknoloji şirketlerine ait olanlar verilebilir.</p>
5430. <h3><strong>Veri Depoları</strong></h3><br />
5431. <p>Ayrıca veri ambarları (İngilizce: <span style="color: purple">Data Warehouses</span>) olan çeşitli kaynaklardan toplanan bir tür <span style="color: purple">veritabanı</span> vardır.</p>
5432. <p>Veri ambarı, kurumların ve şirketlerin çalışmalarının performansında faydalı olan raporları ve analizleri çıkarmak için çeşitli kaynaklardan gelen geleneksel veri tabanlarından geçmiş verilerin bir koleksiyonudur.</p>
5433. <p>Bu türün örnekleri, birkaç farklı ülke veya şehirde bulunan birkaç şubesi olan bir şirketin genel merkezinde kullanılanlardır.</p>
5434. <hr />
5435. <h2 id="ens5"><strong>Veritabanı Özellikleri</strong></h2>
5436. <p><span style="color: purple">Veritabanında</span> birçok özellik bulunmaktadır. Spektimde var olan en önemli özellikleri şu şekilde açıklayacağım:</p>
5437. <ul>
5438.  <li>Verilerin koordineli bir şekilde tutulması.</li>
5439.   <li>Gerçek dünyanın bazı yönlerinin veya gerçek dünya bilgilerini temsil eden bir dizi veri unsurunun (olguların) bir temsilidir.</li>
5440.   <li>Veritabanı mantıklı, tutarlı ve dahili olarak tutarlıdır.</li>
5441.   <li>Bir veritabanı, belirli bir amaç için tasarlanmış, oluşturulmuş ve verilerle doldurulmuştur.</li>
5442.   <li>Her veri öğesi bir alanda saklanır.</li>
5443.   <li>Alanlar kümesi bir <a href="https://www.k-html.com/2021/05/html-tablolar.html" target="_blank">tablo</a> oluşturur. Örneğin, bir çalışan tablosundaki her alan, tek bir çalışanla ilgili verileri içerir.</li>
5444.   <li>Bilgi tabanı birçok <a href="https://www.k-html.com/2021/05/html-tablolar.html" target="_blank">tablo</a> içerebilir. Örneğin, bir üyelik sistemi bir adres tablosu ve bir bireysel üye tablosu içerebilir.</li>
5445.  <li>Aynı verileri kaydetmekten kaçının.</li>
5446.  <li>Verileri belirli ilkeler temelinde organize etmek.</li>
5447.  <li>Veritabanları, bir grup kullanıcı arasında iletişime ve birbirleriyle veri alışverişine izin verir.</li>
5448.  <li>Veritabanları, kullanıcının verileri hızlı bir şekilde aramasını ve erişmesini kolaylaştırır.</li>
5449.  <li>Veritabanları, kullanıcılar arasında alışverişe izin verir.</li>
5450.  <li>Veritabanları herhangi bir zamanda ve kolaylıkla güncellenebilir.</li>
5451.  <li>Birden fazla dosyaya ihtiyaç duymadan verileri tek bir dosyada saklayabilir ve kaydedebiliriz.</li>
5452.  <li>Veritabanları, diğer uygulama programlarından bağımsızdır.</li>
5453.  <li>Veri depolama süreci, depolamanın merkezileştirilmesine bağlıdır.</li>
5454. </ul>
5455. <hr />
5456. <h2 id="ens6"><strong><span style="color: purple">Veritabanı Yönetim Sistemi</span></strong></h2>
5457. <p><span style="color: purple">Veritabanı Yönetim Sistemi "Database Management System"</span>  ve kısatlaması (<span style="color: purple"><abbr title="Database Management system">DBMS</abbr></span>) denir,<br />
5458.  Kullanıcıların <span style="color: purple">veritabanlarına</span> erişimi oluşturmasını, sürdürmesini ve kontrol etmesini sağlayan bir yazılım setidir.<br />
5459. <span style="color: purple"><abbr title="Database Management system">DBMS</abbr></span>'nin temel amacı, program kullanıcıyı bu görevi gerçekleştirmek için <span style="color: purple">veritabanı</span> motoruna bağlarken, kullanıcıların bilgileri alması, depolaması, alması, eklemesi, değiştirmesi veya silmesi için uygun ve etkili bir ortam sağlamaktır.</p>
5460. <p><span style="color: purple">Veritabanı</span> tabloları arasında bir ilişki varsa buna ilişkisel veritabanı yönetim sistemi veya ilişkisel veritabanı yönetim sistemi denir.</p>
5461. <p>Örneğin bir <span style="color: purple">veritabanı</span> yaklaşımı kullanarak herhangi bir şirket veya kuruluşta bir personel yönetim sistemine sahip olabiliriz.</p>
5462. <p><span style="color: purple">Veritabanı</span> yönetim sistemi "<abbr title="Database Management system">DBMS</abbr>", personel departmanı, üst yönetim ve muhasebe departmanı tarafından ortak veritabanına erişmek ve her departmanın işini kolaylaştırmak için kullanılır.</p>
5463. <hr />
5464. <h2 id="ens7"><strong><span style="color: purple">Veritabanı</span> Ortamları</strong></h2>
5465. <p><span style="color: purple">Veritabanı</span> ortamı, <span style="color: purple">veritabanlarını</span> tasarlamak ve yönetmek için gerekli araçları ve yazılımı sağlayan yazılım ortamı veya sistemdir.</p>
5466. <p>Veritabanlarını yönetmek için en iyi araçları ve yöntemleri sağlamak için birbirleriyle rekabet eden uzmanlaşmış uluslararası şirketler tarafından geliştirilen birçok veritabanı ortamı vardır.</p>
5467. <p>En popüler veritabanı ortamları arasında şunlar bulunur:</p>
5468. <ul>
5469.  <li><a href="https://www.oracle.com/database/" target="_blank">Oracle İlişkisel Veritabanı Yönetim Sistemi</a></li>
5470.  <li><a href="https://www.phpmyadmin.net/" target="_blank">PHPMyAdmin</a></li>
5471.  <li><a href="https://www.mysql.com/" target="_blank">MySQL</a></li>
5472.  <li><a href="https://firebirdsql.org/" target="_blank">FireBird</a></li>
5473.  <li><a href="https://www.postgresql.org/" target="_blank">Postgresql</a></li>
5474.  <li><a href="https://www.microsoft.com/en-ww/microsoft-365/access" target="_blank">Microsoft Access</a></li>
5475.  <li><a href="https://www.oracle.com/tr/database/technologies/related/berkeleydb.html" target="_blank">Birckly</a></li>
5476.  <li><a href="https://interbase.com/" target="_blank">Borland Interbase</a></li>
5477.  <li><a href="https://www.microsoft.com/tr-tr/sql-server/sql-server-downloads?rtc=1" target="_blank">Microsoft SQL server</a></li>
5478.  <li><a href="https://www.ibm.com/products/informix" target="_blank">Informix</a></li>
5479.  <li><a href="https://www.ibm.com/analytics/db2" target="_blank">IBMDB2</a></li>
5480.  <li>B-trieve</li>
5481.  <li><a href="https://www.sap.com/turkey/acquired-brands/what-is-sybase.html" target="_blank">Sybase</a></li>
5482. </ul>
5483. <hr />
5484. <h2 id="ens8"><strong><span style="color: purple">Veritabanlarının</span> Faydaları</strong></h2>
5485. <p>Verileri yönetmek, bizim işimize yaraması ve yaptığımız görevler için faydalı olması için onunla ilgilenmek anlamına gelir.</p>
5486. <p>Veritabanı yönetim sistemi "<abbr title="Database Management system">DBMS</abbr>" ile, toplanan ve veritabanlarına eklenen bilgiler artık tesadüfi karışıklığa maruz kalmaz ve daha sezgiseldir ve her türlü işin geri kalanıyla bütünleşir.</p>
5487. <p><span style="color: purple">Veritabanlarını</span> kullanarak veri yönetimi, sahip olduğumuz verilerin stratejik kullanıcıları olmamızı sağlar.</p>
5488. <p>Aşağıdakileri içerebilecek çeşitli kullanımlar için sıklıkla verilere erişmemiz ve bunları yeniden düzenlememiz gerekir:</p>
5489. <ul>
5490.  <li>Posta listeleri oluşturmak.</li>
5491.  <li>Yönetim raporlarının yazması.</li>
5492.  <li>Farklı müşteri ihtiyaçlarını belirlemek</li>
5493.  <li>Seçilen haber hikayelerinin listelerini oluşturun.</li>
5494. </ul>
5495. <p><span style="color: purple">Veritabanlarının</span> sağladığı işlem gücü, içerdikleri verilerin işlenmesine de olanak tanır, böylece aşağıdaki gibi işlemleri gerçekleştirebilir:</p>
5496. <ul>
5497.  <li>Çeşit "Sort"</li>
5498.  <li>Düzenlemek "Arrange"</li>
5499.  <li>Eşleşme Oluşturmak "Match"</li>
5500.  <li>Bağlantı oluşturmak</li>
5501.  <li>alanları atla "skip field"</li>
5502.  <li>Alanlar üzerinde hesaplamak "calculate"</li>
5503. </ul>
5504. <p>Çok yönlülükleri nedeniyle <span style="color: purple">veritabanları</span> her türlü projeye güç sağlar.</p>
5505. <h3><strong><span style="color: purple">Veritabanlarının</span> özellikleri</strong></h3><br />
5506. <p><span style="color: purple">Veritabanlarının</span>, onları kolay, verimli ve daha esnek bilgi depolamak, düzenlemek ve almak için en iyi yollar haline getiren birçok avantajı vardır.
5507. Bu özelliklerden en önemlileri arasında:</p>
5508. <ul>
5509.  <li>Tüm veri ve bilgileri tek bir büyük dosyaya dahil etmek, özellikle düz veritabanlarında, bu tür bir veri tabanı çoğu elektronik tablo programında kullanıldığından, bir konuyla ilgili tüm verilerin tek bir büyük ortak kayda girilmesine yardımcı olur,<br />
5510. Bilgilerin kendi alanına doldurulması, kağıt kayıtlara göre zamandan tasarruf sağlar ve verimlilik verimliliğini artırır.</li>
5511.  <li>Birkaç küçük veri dosyasının ilişkisel veritabanlarında birleştirilmesi, bilgi yönetiminde güç sağlar ve veri girişi üzerindeki kontrolü artırır.<br />
5512. İlişkisel veritabanlarının çalışma mekanizması, tüm dosyalardan belirli bir konu hakkında veri toplayıp çekmeleri ve bunları birleştirerek kullanıcının ihtiyaç duyduğu nihai raporu sağlamak için bir araya getirmeleridir, bu da kapsamlı bilgilerin getirilmesinde hız sağlar.</li>
5513. <li>Hem ana bilgisayar sistemleri gibi büyük organizasyonlarda hem de kişisel bilgisayarlar gibi küçük işletme organizasyonlarında bulunur.</li>
5514. </ul>
5515. <hr />
5516. <h2 id="ens9"><strong><span style="color: purple">Veritabanlarının</span> Dezavantajları</strong></h2>
5517. <p><span style="color: purple">Veritabanlarının</span> sahip olduğu birçok avantajın yanı sıra, büyük miktarda bilgiyi depolamak ve yüksek verimlilikle kolayca erişmek gibi avantajlarının yanı sıra, bazı dezavantajları da vardır:</p>
5518. <ul>
5519.  <li>Veritabanları bilgi, program ve yazılımın karmaşık bir karışımı olduğundan karmaşıklık ve veritabanlarını geliştirme süreci oldukça deneyimli tasarımcıların kullanılmasını gerektiren çok karmaşık bir süreçtir.</li>
5520.  <li>Veritabanlarının kalıcı ve sürekli finansal kaynaklara ihtiyaç duyması nedeniyle yüksek maliyet.</li>
5521.  <li>Güvenlik, büyük şirketler veritabanlarının virüslere ve bilgisayar korsanlarına karşı güvenli olmasını gerektirdiğinden.</li>
5522. </ul>
5523. <hr />
5524. <h2 id="ens10"><strong><span style="color: purple">Veritabanlarının</span> Avantajı</strong></h2>
5525. <p>Bir <span style="color: purple">veritabanı</span> yaklaşımını dosya yönetim sistemlerinden veya dosya tabanlı bir yaklaşımdan ayıran bir dizi özellik vardır.</p>
5526. <p>Aşağıda <span style="color: purple">veritabanlarının</span> en önemli özelliklerinin kısa bir açıklaması yer almaktadır:</p>
5527. <h3><strong><span style="color: purple">Veritabanı</span> Sistemi Öz Tanımı</strong></h3><br />
5528. <p><span style="color: purple">Veritabanları</span>, yalnızca veri tabanının kendisini değil, aynı zamanda veri tabanındaki tablolar arasındaki verileri ve ilişkileri tanımlayan ve açıklayan <a href="https://www.k-html.com/p/database-meta-veri.html" target="_blank">meta verileri</a> de içerdikleri için kendi kendini tanımlayan olarak adlandırılır. Bu bilgiler, gerektiğinde <span style="color: purple"><abbr title="Database Management system">DBMS</abbr></span> yazılımı veya <span style="color: purple">veritabanı</span> kullanıcıları tarafından kullanılır. Verilerin ve veriler hakkındaki bilgilerin bu şekilde ayrılması, <span style="color: purple">veritabanı</span> sistemini, veri tanımlamanın uygulama programlarının bir parçası olduğu geleneksel dosya tabanlı sistemden oldukça farklı kılar.</p>
5529. <br />
5530. <h3><strong>Program ve veri arasındaki izolasyon</strong></h3><br />
5531. <p>Dosya yönetimi tabanlı bir sistemde, veri dosyalarının yapısı uygulama programlarında tanımlanır, bu nedenle bir kullanıcı dosya yapısını değiştirmek isterse, o dosyaya erişen tüm programların da değişmesi gerekebilir.</p>
5532. <p>Bir <span style="color: purple">veritabanı</span> yaklaşımında, bilgi yapısı programlardan ziyade sistem kataloğunda saklanır.</p>
5533. <p>Bu nedenle, dosya yapısını değiştirmek için tek bir değişiklik yeterlidir. Programlar ve veriler arasındaki bu izolasyona program veri bağımsızlığı da denir.</p>
5534. <br />
5535. <h3><strong>Çoklu görünüm desteği</strong></h3><br />
5536. <p><span style="color: purple">Veritabanları</span>, birden çok veri görünümünü destekler. Görünüm, sistemin belirli kullanıcılarına tanımlanan ve atanan bilgi tabanının bir alt kümesidir. Sistemin birçok kullanıcısı sistem hakkında farklı görüşlere sahip olabilir.</p>
5537. <p>Her Teklif, yalnızca bir kullanıcıyı veya kullanıcı grubunu ilgilendiren bilgileri veya verileri içerebilir.</p>
5538. <h3><strong>Veri paylaşımı ve çok kullanıcılı sistem</strong></h3><br />
5539. <p>Mevcut <span style="color: purple">veritabanı</span> sistemleri, birden çok kullanıcıyı destekleyecek şekilde tasarlanmıştır. Yani birden fazla kullanıcının aynı bilgi tabanına aynı anda erişmesine izin verir. Bu erişim, eşzamanlılık kontrol stratejileri adı verilen özellikler aracılığıyla sağlanır. Bu stratejiler, erişilen bilgi veya verilerin her zaman doğru olmasını ve verilerin bütünlüğünün korunmasını sağlar.</p>
5540. <p>Modern çok kullanıcılı <span style="color: purple">veritabanı</span> sistemlerinin tasarımı, geçmişte aynı anda yalnızca bir kişi tarafından kullanılanlara göre önemli bir gelişmedir.</p>
5541. <h3><strong>Veri artıklığı kontrolü</strong></h3><br />
5542. <p>Bir <span style="color: purple">veritabanı</span> yaklaşımında, ideal olarak, her bir veri öğesi, <span style="color: purple">veritabanında</span> yalnızca bir konumda depolanır.</p>
5543. <p>Bazı durumlarda, sistem performansını iyileştirmek için veri fazlalığı hala mevcuttur, ancak bu fazlalıklar uygulama programlaması tarafından kontrol edilir ve <span style="color: purple">veritabanı</span> tasarlanırken mümkün olan en düşük fazlalık sağlanarak minimumda tutulur.</p>
5544. <h3><strong>veri değişimi</strong></h3><br />
5545. <p>Bir kuruluş için tüm verileri bir <span style="color: purple">veritabanı</span> sistemine dahil etmenin aşağıdakiler de dahil olmak üzere birçok avantajı vardır:</p>
5546. <p>İlk olarak, verilerin çalışanlar ve sisteme erişimi olan diğer kişiler arasında paylaşılmasına izin verir.</p>
5547. <p>İkincisi, kullanıcılara belirli bir miktarda veriden entegrasyon olmadan mümkün olandan daha fazla bilgi üretme yeteneği verir.</p>
5548. <h3><strong>Veri girişi doğrulama kısıtlamalarını uygula</strong></h3><br />
5549. <p><span style="color: purple">Veritabanı</span> yönetim sistemleri, kullanıcılar veri girdiğinde girilen verilerin geçerli olmasını sağlamak ve veri bütünlüğünü korumak için belirli kısıtlamaları tanımlama ve uygulama yeteneği sağlamalıdır. <span style="color: purple">Veritabanlarındaki</span> bir kısıtlama, belirli bir format kullanan bir posta kodu veya bir şehir alanına eklenen geçerli bir şehir gibi bir tabloya nelerin girilebileceğini veya düzenlenebileceğini belirleyen bir kısıtlama veya kuraldır.</p>
5550. <p>Birçok <span style="color: purple">veritabanı</span> kısıtlaması türü vardır. Veri türleri, örneğin, bir alanda izin verilen veri türünü tanımlar; örneğin, sayılara atanan bir alanda yalnızca sayılara izin verilmesi kısıtlaması.</p>
5551. <p>Birincil anahtar gibi verilerin kişiselleştirilmesi, mükerrer kayıtların girilmemesini sağlar.</p>
5552. <p>Kısıtlamalar basit (tablo tasarımındaki basit bir kurala dayalı) veya karmaşık (karmaşık ifadelere dayalı) olabilir.</p>
5553. <h3><strong>Yetki Verme ve Yetkisiz Erişimi Kısıtlama</strong></h3><br />
5554. <p>Belirli bir <span style="color: purple">veritabanı</span> sisteminin tüm kullanıcıları aynı erişim ayrıcalıklarına sahip olmayacaktır.</p>
5555. <p>Örneğin, bir kullanıcı salt okunur erişime sahip olabilir (bir dosyayı değişiklik yapmadan okuma yeteneği), diğer bir kullanıcı ise bir dosyayı okuma ve değiştirme yeteneği olan okuma-yazma ayrıcalıklarına sahip olabilir. Bu nedenle <span style="color: purple"><span style="color: purple"><abbr title="Database Management system">DBMS</abbr></span></span>, farklı türde kullanıcı hesapları oluşturmak ve kontrol etmek, farklı yetkiler vermek ve yetkisiz erişimi kısıtlamak için bir güvenlik alt sistemi sağlamalıdır.</p>
5556. <h3><strong>veri bağımsızlığı</strong></h3><br />
5557. <p><span style="color: purple"><abbr title="Database Management system">DBMS</abbr></span>'nin bir diğer avantajı, veri bağımsızlığına izin verme yeteneğidir.</p>
5558. <p>Başka bir deyişle, sistem veri açıklamaları veya verileri (<span style="color: purple">meta veriler</span>) tanımlayan veriler uygulama yazılımından ayrılır.</p>
5559. <p>Bu mümkündür çünkü <a href="https://www.k-html.com/p/database-veri-yaps.html">veri yapısındaki</a> değişiklikler <span style="color: purple">veritabanı</span> yönetim sistemi tarafından işlenir ve yazılımın kendisine gömülü değildir.</p>
5560. <h3><strong>işleme senkronizasyonu</strong></h3><br />
5561. <p><span style="color: purple">Veritabanı</span> yönetim sistemi, senkronizasyon kontrol alt sistemlerini içermelidir.</p>
5562. <p>Bu özellik, birden fazla kullanıcı aynı bilgiyi güncellese bile, işlem işleme sırasında bilgi veya verilerin tutarlı ve geçerli kalmasını sağlar.</p>
5563. <h3><strong>Birden çok veri görünümü sağlamak</strong></h3><br />
5564. <p>Bir <span style="color: purple"><abbr title="Database Management system">DBMS</abbr></span>, doğası gereği, birden fazla kullanıcının veri tabanına tek tek veya aynı anda erişmesine izin verir. Kullanıcıların eriştikleri verilerin nasıl ve nerede saklandığının farkında olmaları önemli değildir.</p>
5565. <h3>Yedekleme ve kurtarma işlevleri</h3><br />
5566. <p>Yedekleme ve kurtarma, verileri kayıptan korumanın yollarıdır. <span style="color: purple">Veritabanı</span> sistemleri, verileri yedeklemek ve geri yüklemek için ağ yedekleme işleminden ayrı bir işlem sağlar. Sabit sürücü arızalanırsa ve sabit sürücüde depolanan <span style="color: purple">veritabanına</span> erişilemezse, <span style="color: purple">veritabanını</span> kurtarmanın tek yolu bir yedekten geçer. Karmaşık bir güncellemenin ortasında bir bilgisayar sistemi arızalanırsa, <span style="color: purple">veritabanının</span> orijinal durumuna geri yüklenmesini sağlamaktan kurtarma alt sistemi sorumludur. Bunlar, bir veritabanı yönetim sisteminin iki ek avantajıdır.</p>
5567. <hr />
5568. <h2 id="ens11"><strong><span style="color: purple">Veritabanı</span> Kullanım Örnekleri</strong></h2>
5569.  <ul>
5570. <li>Kayıtlı kullanıcıları çevrimiçi satış için özel bir <span style="color: purple">web</span> sitesinde tutmak için web sitesi tasarımı.</li>
5571.   <li>Sosyal <a href="https://www.k-html.com/p/database-hizmetler.html" target="_blank">hizmetlerden</a> faydalananların arşivlenmesi ve takibi için uygulama geliştirilmesi.</li>
5572.    <li>Sağlık tesisleri için tıbbi kayıt sistemi tasarımı.</li>
5573.    <li><span style="color: purple">Biyoinformatik</span> veri tabanı sistemlerinin geliştirilmesi.</li>
5574.    <li>Müşteriler için bir <span style="color: purple">e-posta</span> adres defteri oluşturmak.</li>
5575.    <li>Belirli kelimelerle ilgili bir belge koleksiyonu.</li>
5576.    <li>Bir havayolunda uçuş rezervasyonlarının düzenlenmesi için bir sistemin geliştirilmesi.</li>
5577.    <li>Bankalarda bir bankacılık sisteminin tasarımı ve geliştirilmesi.</li>
5578.    <li>Şirketlerde <a href="https://www.k-html.com/p/database-muhasebe-sistemi.html">muhasebe sisteminin</a> geliştirilmesi.</li>
5579.    <li>Okul yönetimi için özel bir sistem hazırlamak ve tasarlamak.</li>
5580.    <li>Çok projeli bir ofis için bir proje yönetim sisteminin geliştirilmesi.</li>
5581. </ul>
5582. <p>ve diğer sistemler.</p>
5583. <p>Doğru tasarlanmış <span style="color: purple">veritabanları</span>, doğru güncel bilgilere erişim sağlar, çünkü <span style="color: purple">veritabanlarıyla</span> çalışırken hedeflere ulaşmak için doğru tasarım esastır. Bilgi tabanlarının mantıklı bir şekilde tasarlanması, şirket veya organizasyondaki ihtiyaçların karşılanmasına katkıda bulunur ve yönetimin doğru zamanda doğru kararları almasına yardımcı olur.</p>
5584. <p>Bir perakende şirketinde, şirket yönetiminin belirli bir ürün için bir pazarlama mekanizması geliştirmeye çalıştığını varsayarsak, satış <span style="color: purple">veritabanında</span> depolanan bu ürünün geçmiş satışlarına ilişkin <a href="https://www.k-html.com/p/database-veri-analizi.html" target="_blank">verileri analiz</a> ederek bu amaca ulaşmak için başvurur. Bu şekilde yönetim, bu verileri analiz edebilir ve bu ürün için pazarlama planları geliştirmek için uygun yöntem ve teknikleri belirleyebilir. Yani yönetim, bu ürünün pazarlaması için gelecek planları geliştirmek için satış bilgi tabanında bulunan bu ürünün satış hareketinin tarihsel verilerini inceliyor.</p>
5585. <hr />
5586. <h2 id="ens12"><strong><span style="color: purple">Veritabanı</span> Geliştirme</strong></h2>
5587. <p>Genel olarak yazılım mühendisliğinin önemli bir yönü, geliştirme sürecinin her biri geliştirmenin bir yönüne odaklanan bir dizi aşamaya veya adıma bölünmesidir. Bu adımlar kümesine bazen <span style="color: purple">Yazılım Geliştirme Yaşam Döngüsü (SDLC)</span> adı verilir. Yazılım Ürünü, kullanımdan kalıcı olarak kesilene kadar bu yaşam döngüsü boyunca (bazen iyileştirildiği veya yeniden geliştirildiği için sık sık) hareket eder.</p>
5588. <p>İdeal olarak, geliştirme yaşam döngüsündeki her aşama, bir sonraki aşamaya geçmeden önce doğrulanabilir.</p>
5589. <h3><strong>Yazılım Geliştirme Yaşam Döngüsü - Şelale Modeli</strong></h3><br />
5590. <p>Şelale <a href="https://www.k-html.com/p/database-model.html">modeli</a>, çoğu yazılım mühendisliği kitabında kullanılan modeldir.</p>
5591. <p>Genel olarak şelale modeli, herhangi bir bilgisayar sistemi geliştirme sürecine uygulanabilir. Süreç, bir adımın çıktısının bir sonraki adımın girdisi olduğu katı bir adımlar dizisi olarak görünür.</p>
5592. <p><a href="https://www.k-html.com/2022/04/html-formlar.html" target="_blank">Formdaki</a> her adım, bir sonraki adıma geçmeden önce tamamlanmalıdır.</p>
5593. <a href="https://src.k-html.com/Database-veritabanlar.png">
5594. <img alt="Şelale Modeli - Veritabanı Geliştirme" height="630" src="https://src.k-html.com/Database-veritabanlar.png" width="640" />
5595. </a>
5596. <p>Şelale modeli, her bir faaliyet için girdi ve çıktılarla birlikte gerekli görevleri tanımlamanın bir yolu olarak kullanılabilir. Önemli olan faaliyetlerin kapsamıdır.</p>
5597. <p>Şelale modelinde yer alan adımlar aşağıdaki gibi özetlenebilir:</p>
5598. <ol type="1">
5599.  <li>Gereksinimlerin tanımlanması, bir gereksinim ifadesi olarak ifade edilen sistemden ne istedikleri konusunda paydaşlara danışmayı ve anlaşmayı içerir.
5600.    </li><li>Analiz, bir gereksinim beyanına bakarak başlar ve bir sistem spesifikasyonu üreterek sona erer. Spesifikasyon, bir sistemin ne yapması gerektiğinin resmi bir temsilidir ve nasıl başarılması gerektiğinden bağımsız olarak ifade edilir.</li>
5601.  <li>Tasarım, sistem spesifikasyonu ile başlar, tasarım belgelerini üretir ve sistemin nasıl kurulacağına dair ayrıntılı bir açıklama sağlar.</li>
5602.  <li>Uygulama, bir bilgisayar sisteminin, sistemin çalışacağı ortamı (örneğin, geliştirme için mevcut olan belirli donanım veya yazılım) dikkate alarak belirli bir tasarım belgesine göre inşa edilmesidir. Uygulama, tipik olarak, nihai bir sistem kullanıma sunulmadan önce doğrulanabilen ve test edilebilen bir başlangıç sistemi ile yapılabilir.</li>
5603.  <li>Test, uygulanan sistemi dokümantasyon ve tasarım gereksinimlerinin spesifikasyonlarıyla karşılaştırır ve bir kabul raporu veya genellikle, analiz, tasarım ve düzeltilmesi gereken uygulama süreçlerinin gözden geçirilmesini gerektiren bir hatalar ve hatalar listesi üretir (test genellikle yaşam döngüsü boyunca tekrarlanan bir şelale modeline yol açan görev).</li>
5604.  <li>Bakım, gereksinimlerdeki veya uygulama ortamındaki değişikliklerle ilgilenmeyi, hataları düzeltmeyi veya sistemi yeni ortamlara taşımayı içerir (örneğin, bir sistemi bağımsız bir bilgisayardan bir <span style="color: purple">UNIX</span> iş istasyonuna veya ağ ortamına geçirme). Bakım, gerekli değişiklikleri analiz etmeyi, bir çözüm tasarlamayı, bu çözümü hizmet verilen bir yazılım sisteminin ömrü boyunca uygulamayı ve test etmeyi içerdiğinden, şelale yaşam döngüsü sık sık yeniden gözden geçirilecektir.</li>
5605. </ol>
5606. <hr />
5607. <h2 id="ens13"><strong><span style="color: purple">Veritabanı</span> Yaşam Döngüsü</strong></h2>
5608. <p>Üç varsayımı içeren <span style="color: purple">veritabanı</span> geliştirme modelinin temeli olarak şelale modelini kullanabiliriz:</p>
5609. <ol type="1">
5610.  <li><span style="color: purple">Veritabanı</span> geliştirme - bir <span style="color: purple">veritabanındaki</span> verileri tanımlamak için bir şema tanımlama ve oluşturma - <span style="color: purple">veritabanını</span> kullanan kullanıcının süreçlerinden ayrılabilir.</li>
5611.  <li>Şema ile ilişkili aktiviteleri ayırt etmek için üç şemanın yapısını da temel olarak kullanabiliriz.</li>
5612.  <li>Verileri kullanan her kullanıcı işlemi için ayrı ayrı değil, veri semantiğini <span style="color: purple">veritabanı</span> içinde bir kez zorlamaya ilişkin belirli kısıtlamaları temsil edebiliriz.</li>
5613. </ol>
5614. <p>Bu varsayımları şelale modeli ile kullanarak, bu şematik modelin, <span style="color: purple">veritabanı</span> geliştirme için faaliyetlerin ve çıktılarının bir modeli olduğunu görebiliriz. Yalnızca ilişkisel <span style="color: purple">veritabanları</span> (veya ilişkisel bir yaklaşıma sahip <span style="color: purple">veritabanları</span>) için değil, herhangi bir <span style="color: purple"><abbr title="Database Management system">DBMS</abbr></span> sınıfı için geçerlidir.</p>
5615. <p>Pratik olarak konuşursak, <span style="color: purple">veritabanı</span> geliştirme, gerçek dünya gereksinimlerini elde etme, gereksinimleri analiz etme, sistem verilerini ve işlevlerini tasarlama ve ardından sistemdeki işlemleri uygulama sürecidir.</p>
5616. <hr />
5617. <h2 id="ens14"><strong>Veritabanı geliştirme aşamaları</strong></h2>
5618. <p><span style="color: purple">Veritabanı</span> geliştirme süreci aşağıdaki aşamalardan oluşur:</p>
5619. <ol>
5620.  <li>gereksinimleri toplamak</li>
5621.  <li>analiz</li>
5622.  <li>mantıksal tasarım</li>
5623.  <li>Uygulamak</li>
5624.  <li>tasarım gerçekleştirme</li>
5625.  <li>Veritabanını yayınlayın</li>
5626. </ol>
5627. <p>Aşağıda, bu aşamaların her birinin ayrıntılı bir açıklaması bulunmaktadır:</p>
5628. <h3><strong>gereksinimleri toplamak</strong></h3><br />
5629. <p>İlk adım gereksinimleri toplamaktır. Bu adım sırasında, <span style="color: purple">veritabanı</span> tasarımcıları, önerilen sistemi anlamak ve veri ve işlevsel gereksinimleri elde etmek ve belgelemek için müşterilerle (<span style="color: purple">veritabanı</span> kullanıcıları) <a href="https://www.k-html.com/p/database-roportaj-yapmak.html">görüşme</a> yapmalıdır.</p>
5630. <p>Bu adımın sonucu, kullanıcılar tarafından sunulan ayrıntılı gereksinimleri içeren bir belgedir.</p>
5631. <p>Gereksinimlerin tanımlanması, veri öğelerinin anlamı ve yorumlanması hakkında bir anlaşma ile birlikte depolamak istedikleri statik veriler hakkında tüm kullanıcılar arasında danışma ve anlaşmayı içerir. Veri yöneticisi, bu süreçte, veri gereksinimlerini etkileyen iş ve yasal ve etik konulara ilişkin genel bir bakış sağlayan önemli bir rol oynar.</p>
5632. <p>Veri gereksinimleri belgesi, gereksinimlerin kullanıcılar tarafından anlaşıldığını doğrulamak için kullanılır. Kolayca anlaşıldığından emin olmak için aşırı resmi veya aşırı şifreli olmamalıdır. Belge, yalnızca bir dizi bireysel gereksinim değil, tüm kullanıcıların gereksinimlerinin kısa bir özetini sağlamalıdır, çünkü amaç tek bir ortak <span style="color: purple">veritabanı</span> geliştirmektir.</p>
5633. <p>Gereksinimler, <a href="https://www.k-html.com/p/database-veri-isleme.html">verilerin nasıl işleneceğini</a> değil, veri öğelerinin ne olduğunu, sahip oldukları özellikleri, uygulanan kısıtlamaları ve veri öğeleri arasındaki ilişkileri tanımlamalıdır.</p>
5634. <h3><strong>analiz</strong></h3><br />
5635. <p>Veri analizi, veri gereksinimlerinin beyanı ile başlar ve ardından kavramsal bir veri modeli üretilir. Analizin amacı, verilerin hem yüksek hem de düşük özelliklerinin ele alınması ve kullanılması için kullanıcının gereksinimlerine uygun verilerin ayrıntılı bir tanımını elde etmektir. Bunlar, nitelikler için izin verilebilecek olası değer aralığı gibi özellikleri içerir (örneğin, bir okul <span style="color: purple">veritabanında</span>, ders kodunda, ders başlığında ve atanan puanlarda).</p>
5636. <p>Kavramsal bir veri modeli, bu verilerin kullanıcı süreçlerinde son kullanımına veya belirli bilgisayar ortamlarında veri uygulanmasına bakılmaksızın, <span style="color: purple">veritabanındaki</span> verilere odaklandığından, <span style="color: purple">veritabanı</span> geliştirme sırasında istemciler ve geliştiriciler arasında iletilen şeyin resmi, paylaşılan bir temsilini sağlar. Bu nedenle, kavramsal bir veri modeli, verilerin anlamı ve yapısıyla ilgilenir, ancak nasıl uygulandığını etkileyen ayrıntılarla ilgilenmez.</p>
5637. <p>Kavramsal bir veri modeli, <span style="color: purple">veritabanının</span> içermesi gereken verilerin ve verilerin karşılaması gereken kısıtlamaların resmi bir temsilidir. Bu, modelin nasıl uygulandığından bağımsız terimlerle ifade edilmelidir. Sonuç olarak, analiz şu türdeki sorulara odaklanmaktadır: “Bu nasıl elde edilir?” değilde “Ne gerekli?” olamalıdır.</p>
5638. <h3><strong>mantıksal tasarım</strong></h3><br />
5639. <p><span style="color: purple">Veritabanı</span> tasarımı kavramsal bir veri modeli ile başlar ve mantıksal bir şema için bir belirtim üretir. Bu, ne tür bir bilgi tabanı sisteminin gerekli olduğunu ve bunun bir ağ, ilişkisel veya nesne <span style="color: purple">veritabanı</span> olup olmadığını belirleyecektir.</p>
5640. <p>Mantıksal tasarım sürecine girdi olarak kavramsal veri modelinin ilişkisel bir temsilini kullanabiliriz.</p>
5641. <p>Bu aşamanın çıktısı, kavramsal veri modelindeki veri açıklamasını karşılamak için gereken tüm tabloların ve kısıtlamaların ayrıntılı bir ilişkisel belirtimi, mantıksal bir şemasıdır. Bu tasarım etkinliği sırasında,<span style="color: purple"> veritabanlarında </span>verilerin temsil edilmesi için en uygun seçenekler belirlenir.<br /> Bu seçimler, örneğin değişim esnekliği, tekrarın kontrolü ve kısıtlamaları temsil etmenin en iyi yolu dahil olmak üzere çeşitli tasarım kriterlerini hesaba katmalıdır.</p>
5642. <p>Hangi verilerin depolandığını ve <span style="color: purple">veritabanında</span> nasıl işlenebileceğini tanımlayan mantıksal şema tarafından tanımlanan tablolardır.</p>
5643. <p>İlişkisel <span style="color: purple">veritabanlarına</span> ve <span style="color: purple"><abbr title="Structured Query Language">SQL</abbr></span>'e aşina olan <span style="color: purple">veritabanı</span> tasarımcıları, kavramsal bir veri modeli ürettikten sonra doğrudan uygulamaya geçme eğiliminde olabilir. Bununla birlikte, ilişkisel temsilin <span style="color: purple"><abbr title="Structured Query Language">SQL</abbr></span> tablolarına bu şekilde doğrudan dönüştürülmesi, gerekli tüm özelliklere sahip bir <span style="color: purple">veritabanı</span> ile sonuçlanmayabilir:</p>
5644. <h4><strong><span style="color: purple">Veritabanının</span> mantıksal tasarımının özellikleri</strong></h4>
5645. <ol>
5646.  <li>tamamlamak</li>
5647.  <li>entegrasyon</li>
5648.  <li>Esneklik</li>
5649.  <li>Yeterlik</li>
5650.  <li>kullanılabilirlik</li>
5651. </ol>
5652. <p>İyi bir kavramsal veri modeli, bu özelliklere sahip bir <span style="color: purple">veritabanına</span> yönelik temel bir ilk adımdır, ancak bu, <span style="color: purple"><abbr title="Structured Query Language">SQL</abbr></span> tablolarına doğrudan dönüştürmenin otomatik olarak iyi <span style="color: purple">veritabanları</span> ürettiği anlamına gelmez. Bu ilk adım, kavramsal veri modeli tanımını yerine getirmek için gereken tabloları ve kısıtlamaları doğru bir şekilde temsil edecek, böylece eksiksizlik ve bütünlük gereksinimlerini karşılayacaktır, ancak esnek olmayabilir veya zayıf kullanılabilirlik sağlayabilir. Daha sonra veri tabanı tasarımının kalitesini artırmak için ilk tasarım bükülür.</p>
5653. <p>Ve esneme, bir şeyi farklı bir amaç için bükme ve bükülürken yanlarını zayıflatma düşüncesini aynı anda yakalamayı amaçlayan bir terimdir.</p>
5654. <p><span style="color: purple">Veritabanı</span> tasarımında yer alan yinelemeli adımların temel amacı, kullanılacak tabloların genel görevini, her tablonun bileşen parçalarının ayrıntılı görevlerinden ayırmaktır ve bu tablolar, birbirinden bağımsız olmasalar da, birer birer kabul edilir. diğer. Tabloların revizyonunun her yinelemesi yeni bir tasarıma yol açacaktır; Bu yeni tasarımlar, işlem birden fazla döngü için tekrarlansa bile topluca ikinci kesim tasarımları olarak adlandırılır.</p>
5655. <h4><strong><span style="color: purple">Veritabanı</span> Mantıksal Tasarım Stratejileri</strong></h4>
5656. <p>İlk olarak, belirli bir kavramsal veri modeli için temsil ettiği tüm kullanıcı gereksinimlerini tek bir <span style="color: purple">veritabanı</span> üzerinden karşılaması gerekli değildir. Birden fazla <span style="color: purple">veritabanı</span> geliştirmenin, farklı lokasyonlarda bağımsız çalışma ihtiyacı veya <span style="color: purple">'</span>kendi<span style="color: purple">'</span> verileri üzerinde departman kontrolü gibi çeşitli nedenleri olabilir. Ancak, bir dizi veri tabanı fazlalık veri içeriyorsa ve kullanıcıların birden fazla veri tabanındaki verilere erişmesi gerekiyorsa, tek bir veri tabanının birden fazla gereksinimi karşılayabilmesinin veya veri yedekliliği ve dağıtımıyla ilgili sorunları inceleme ihtiyacının olası nedenleri vardır.</p>
5657. <p>İkincisi, <span style="color: purple">veritabanı</span> geliştirmeyle ilgili varsayımlardan biri, <span style="color: purple">veritabanının</span> geliştirilmesini, onu kullanan kullanıcı süreçlerinin geliştirilmesinden ayırabileceğimizdir. Bu, <span style="color: purple">veritabanı</span> uygulandığında, halihazırda tanımlanmış olan kullanıcı süreçleri için gerekli olan tüm verilerin tanımlandığı ve erişilebilir olduğu beklentisine dayanmaktadır; Ancak, gelecekteki değişikliklerin gereksinimleri karşılaması için esnekliğe de ihtiyacımız var. Bazı uygulamalar için bir <span style="color: purple">veritabanı</span> geliştirirken, en yaygın istekler için tasarımımızı geliştirebilmemiz için <span style="color: purple">veritabanına</span> hangi ortak isteklerin yapılacağını <a href="https://www.k-html.com/p/database-tahmin.html">tahmin etmek</a> mümkün olabilir.</p>
5658. <p>Üçüncüsü, ayrıntılı düzeyde, <span style="color: purple">Veritabanı</span> tasarımı ve uygulamasının birçok yönü, kullanılan <span style="color: purple"><abbr title="Database Management system">DBMS</abbr></span>'ye bağlıdır.<br />
5659. Bir <span style="color: purple"><abbr title="Database Management system">DBMS</abbr></span> seçimi sabitlenirse veya tasarım görevinden önce yapılırsa, bu seçim uygulama için beklemek yerine tasarım kriterlerini tanımlamak için kullanılabilir.<br />
5660. Yani, genel bir tasarım üretmek ve ardından uygulama sırasında onu <span style="color: purple"><abbr title="Database Management system">DBMS</abbr></span>'ye atamak yerine, belirli bir <span style="color: purple"><abbr title="Database Management system">DBMS</abbr></span> için tasarım kararlarını dahil etmek mümkündür.</p>
5661. <h4><strong><span style="color: purple">Veritabanı</span> mantıksal tasarım öncelikleri</strong></h4>
5662. <p>Tek bir tasarımın iyi bir <span style="color: purple">veritabanının</span> tüm özelliklerini bir kerede karşılayamayacağını bulmak nadir değildir.</p>
5663. <p>Bu nedenle tasarımcının bu özelliklere öncelik vermesi önemlidir (genellikle gereksinim spesifikasyonundaki bilgileri kullanarak).</p>
5664. <p>Örneğin, belirli bir <span style="color: purple">veritabanı</span> sistemini geliştirmede bütünlüğün verimlilikten daha önemli olup olmadığını ve kullanılabilirliğin esneklikten daha önemli olup olmadığını belirlemek. Tasarım aşamasının sonunda, mantıksal şema, kullanıcı gereksinimlerini karşılamak için uygulanması gereken <span style="color: purple">veritabanını</span> tanımlayan <span style="color: purple"><abbr title="Structured Query Language">SQL</abbr> ,DDL</span> ifadeleriyle tanımlanacaktır.</p>
5665. <h3><strong>Uygulamak</strong></h3><br />
5666. <p>Uygulama, mantıksal şema belirtimine göre bir <span style="color: purple">veritabanı</span> oluşturmayı içerir.</p>
5667. <p>Güvenlik, harici şema vb. Uygulama, mevcut <span style="color: purple"><abbr title="Database Management system">DBMS</abbr></span>, <span style="color: purple">DB</span> araçları ve işletim ortamından büyük ölçüde etkilenir. Basitçe bir <span style="color: purple">veritabanı</span> şeması oluşturmanın ve kısıtlamaları uygulamanın ötesinde ek görevler vardır - veriler tablolara girilmeli, kullanıcılar ve kullanıcı işlemleriyle ilgili sorunlar ele alınmalı ve kurumsal veri yönetiminin daha geniş yönleriyle ilişkili yönetim faaliyetleri desteklenmelidir. <span style="color: purple"><abbr title="Database Management system">DBMS</abbr></span> yaklaşımına uygun olarak, bu endişelerin mümkün olduğunca çoğu sistem içinde ele alınmalıdır.</p>
5668. <p>Bu endişelerden bazıları aşağıda kısaca ele alınacaktır:</p>
5669. <p>Pratik olarak konuşursak, belirli bir <span style="color: purple"><abbr title="Database Management system">DBMS</abbr></span>'de mantıksal bir şema uygulamak, bir <span style="color: purple"><abbr title="Database Management system">DBMS</abbr></span>'nin sunması gereken belirli özellikler ve tesisler hakkında çok ayrıntılı bilgi gerektirir. İdeal bir dünyada, iyi yazılım mühendisliği uygulamalarına uygun olarak, uygulamanın ilk aşaması, tasarım gereksinimlerinin mevcut en iyi uygulama araçlarıyla eşleştirilmesini ve ardından bu araçların uygulama için kullanılmasını içerir. <span style="color: purple">Veritabanları</span> açısından, bu, uygulamamız gereken <span style="color: purple">veritabanı</span> için en uygun olan <span style="color: purple"><abbr title="Database Management system">DBMS</abbr></span> ve <span style="color: purple"><abbr title="Structured Query Language">SQL</abbr></span> varyantlarına sahip satıcı ürünlerini seçmeyi içerebilir. Ancak ideal bir dünyada yaşamıyoruz ve çoğu zaman donanım ve <span style="color: purple"><abbr title="Database Management system">DBMS</abbr></span> kararları, <span style="color: purple">veritabanı</span> tasarımı düşünülmeden çok önce seçilecek. Bu nedenle, uygulama, herhangi bir yazılım veya donanım sınırlamasının üstesinden gelmek için ek tasarım esnekliği içerebilir.</p>
5670. <h3><strong>tasarım gerçekleştirme</strong></h3><br />
5671. <p>Mantıksal tasarımı oluşturduktan sonra ürettiğimiz tanımlara göre <span style="color: purple">veritabanımızı</span> oluşturmamız gerekiyor.</p>
5672. <p>İlişkisel veya ilişkisel bir <span style="color: purple"><abbr title="Database Management system">DBMS</abbr></span> kullanan bir uygulama için bu, mantıksal şema açıklamasını karşılayan tablolar ve kısıtlamalar oluşturmak için <span style="color: purple"><abbr title="Structured Query Language">SQL</abbr></span>'in kullanılmasını ve uygun depolama şemasının seçilmesini (<span style="color: purple"><abbr title="Database Management system">DBMS</abbr></span> bu düzeyde kontrole izin veriyorsa) içerecektir.</p>
5673. <p>Bunu başarmanın bir yolu, uygun <span style="color: purple"><abbr title="Structured Query Language">SQL</abbr>, DDL</span> ifadelerini <span style="color: purple"><abbr title="Database Management system">DBMS</abbr></span> tarafından yürütülebilecek bir dosyaya yazmaktır, böylece <span style="color: purple">veritabanını</span> tanımlayan <span style="color: purple"><abbr title="Structured Query Language">SQL</abbr></span> ifadelerinin ayrı bir kaydı, bir metin dosyası olur. Başka bir yol, (<a href="https://docs.microsoft.com/tr-tr/sql/ssms/download-sql-server-management-studio-ssms?view=sql-server-ver15">SQL Server Management Studio</a>) veya (<a href="https://www.microsoft.com/tr-tr/microsoft-365/access">Microsoft Access</a>) gibi bir <span style="color: purple">veritabanı</span> aracıyla etkileşimli olarak çalışmaktır. Mantıksal şemayı uygulamak için hangi mekanizma kullanılırsa kullanılsın, sonuç, <span style="color: purple">veritabanının</span> tablolar ve kısıtlamalarla tanımlanmış olmasıdır, ancak kullanıcı işlemleri için veri içermeyecektir.</p>
5674. <h3><strong><span style="color: purple">Veritabanını</span> yayınlamak</strong></h3><br />
5675. <p><span style="color: purple">Veritabanını</span> oluşturduktan sonra tabloları doldurmanın iki yolu vardır:</p>
5676. <ul>
5677.  <li>Ya: mevcut verilerden.</li>
5678.  <li>Veya: veritabanı için kullanıcı tarafından geliştirilen uygulamaların kullanımı yoluyla.</li>
5679. </ul>
5680. <p>Bazı tablolar için, bir <span style="color: purple">veritabanından</span> veya diğer veri dosyalarından mevcut veriler olabilir.</p>
5681. <p>Örneğin, bir hastane için veri tabanı oluştururken, veri tabanına dahil edilmesi gereken tüm çalışanlar için halihazırda bazı kayıtların olması beklenebilir. Veriler ayrıca bir dış kuruluştan getirilebilir (adres listeleri genellikle dış şirketlerden getirilir) veya büyük bir veri girişi işi sırasında üretilebilir (manuel kayıtlar özel bir veri giriş kuruluşu tarafından bilgisayar dosyalarına dönüştürülebilir). Bu gibi durumlarda, <span style="color: purple">veritabanını</span> doldurmanın en basit yolu, <span style="color: purple"><abbr title="Database Management system">DBMS</abbr></span>'de bulunan alma ve verme işlevlerini kullanmaktır.</p>
5682. <p>Genellikle çeşitli standart formatlardaki verileri içe ve dışa aktarma olanakları vardır (bu işlevler bazı sistemlerde veri yükleme ve boşaltma olarak da <a href="https://www.k-html.com/p/database-bildi.html" target="_blank">bilinir</a>). İçe aktarma, veri dosyasının doğrudan bir tabloya kopyalanmasını sağlar. Veriler, içe aktarma işlevinin kullanımına uygun olmayan bir dosya formatında tutulduğunda, eski verileri okuyan, gerektiği gibi dönüştüren ve ardından <span style="color: purple"><abbr title="Structured Query Language">SQL</abbr></span> kodunu kullanarak <span style="color: purple">veritabanına</span> ekleyen bir uygulama programı kurmak gerekir. veya bu amaç için özel olarak üretilmiş kod. Büyük miktarda mevcut veriyi bir <span style="color: purple">veritabanına</span> taşımak, büyük bir ek yük olarak adlandırılır. Toplu yüklemenin sonuna kadar kısıtlama kontrolünü ertelemek için bir <span style="color: purple"><abbr title="Database Management system">DBMS</abbr></span> olanağı olduğunu bulana kadar, verilerin toplu yüklenmesi, her seferinde bir tablo olmak üzere çok büyük miktarda veri yüklenmesini içerebilir.</p>
5683. <h3><strong><span style="color: purple">Veritabanı</span> tasarım şeması geliştirme yönergeleri</strong></h3><br />
5684. <p><a href="https://www.k-html.com/p/database-not.html">Not</a>: Bu, fiziksel <span style="color: purple">veritabanlarının</span> (mantıksal model) tasarımı için güçlü bir temel geliştirmeye yardımcı olan genel bir yönergedir.</p>
5685. <ul>
5686.  <li>Bilgi toplama aşamasında tespit edilen tüm varlıkların belgelenmesi.</li>
5687.  <li>Her bir varlığa ait tüm nitelikleri belgelemek.
5688.  Filtreyi ve birincil anahtarları tanımlamak.
5689.  Her varlığın anahtar olmayan tüm özniteliklerinin tamamen birincil anahtara bağlı olduğundan emin olmak.</li>
5690. <li>Bir başlangıç ER denetimi taslağı geliştirin ve uygun personelle gözden geçirmek, (Bu yinelemeli bir süreçtir).</li>
5691. <li>Çok değerli nitelikler ve yinelenen gruplar için yeni varlıklar (tablolar) oluşturmak.<br />
5692. ve bu yeni varlıkları (tabloları) birleştirmek.</li>
5693. <li>Tablo normalleştirme yoluyla ER modellemesinin doğrulanması.</li>
5694. </ul>
5695. <hr />
5696. <h2 id="ens15"><strong><span style="color: purple">Veritabanı</span> Terminolojisi</strong></h2>
5697. <h3><strong>tablolar</strong></h3><br />
5698. <p>Bir <span style="color: purple">veritabanı</span>, bilgileri elektronik tablo benzeri satır ve sütunların listeleri olan tablolar adı verilen özel kaplar halinde düzenlemek.</p>
5699. <p>Basit bir <span style="color: purple">veritabanında</span> yalnızca bir tablomuz olabilir, ancak çoğu <span style="color: purple">veritabanında</span> genellikle birden fazla tablo gerekir.</p>
5700. <p>Örneğin, bir şirketin veri tabanında, ürünler hakkında bilgi içeren bir tabloya, satın alma siparişleri hakkında bilgi içeren başka bir tabloya ve müşterilerle ilgili bilgileri içeren başka bir tabloya ihtiyaç duyulabilir.</p>
5701. <h3><strong>kayıtlar ve alanlar</strong></h3><br />
5702. <p>Tablolarda her satıra kayıt, her sütuna alan adı verilir.</p>
5703. <p>Kayıt, bir şey hakkında bilgi toplamanın anlamlı ve tutarlı bir yoludur.</p>
5704. <p>Bir alan tek bir bilgi öğesiyken, her kayıtta görünen öğe türüdür.</p>
5705. <p>Örneğin, Ürünler tablosunda, her satır veya kayıt bir ürün hakkında bilgi içerebilir ve bu kayıttaki her sütun veya alan, o ürünle ilgili ad veya fiyat gibi bir tür bilgi içerebilir.</p>
5706. <h3><strong>birincil anahtar</strong></h3><br />
5707. <p>Bir tablodaki birincil anahtar, her satırı benzersiz bir şekilde, yani tekrarlanamaz bir şekilde tanımlamak için kullanılan bir sütundur.</p>
5708. <p>Birincil anahtar örnekleri şunlardır: bir çalışan kimlik numarası, bir kişisel kimlik kartı numarası veya Ürün Tanımlama Tablosundaki bir Ürün Kimliği olabilir.</p>
5709. <hr />
5710. <h2 id="ens16"><strong>İyi <span style="color: purple">Veritabanı</span> Tasarımı</strong></h2>
5711. <p>Doğru olması için <span style="color: purple">veritabanı</span> tasarım sürecini yönlendirecek bazı ilkeler vardır.</p>
5712. <p>Bu ilkeler arasında:</p>
5713. <h3><strong>İlke 1: Veri fazlalığından kaç</strong></h3><br />
5714. <p>Bu ilke, veri tabanının fazla veri içermemesi için veri fazlalığından kaçınmak anlamına gelir. Aşırı veri geçersizdir çünkü alanı boşa harcar ve hata ve tutarsızlık potansiyelini artırır.</p>
5715. <h3><strong>İkinci ilke: bilginin doğruluğu, doğruluğu ve bütünlüğü</strong></h3><br />
5716. <p>Bu, iyi bir <span style="color: purple">veritabanı</span> tasarımının önemli bir ilkesidir, sanki <span style="color: purple">veritabanı</span> yanlış bilgiler içeriyormuş gibi, <span style="color: purple">veritabanından</span> bilgi çeken herhangi bir rapor da yanlış bilgi içerecektir. Sonuç olarak, yönetimin bu raporlara dayanarak vereceği kararlar yanıltıcı olacaktır, yani yanlış bilgilere dayanmaktadır.</p>
5717. <p>Bu nedenle, iyi bir <span style="color: purple">veritabanı</span> tasarım özelliği şunları gerektirir:</p>
5718. <ul>
5719.  <li>Fazlalığı azaltmak için bilgileri başlıklarla tablolara bölmek.</li>
5720.  <li>Tablolardaki bilgileri gerektiği gibi birleştirmek.</li>
5721.  <li>Verilerin doğruluğunu, geçerliliğini ve bütünlüğünü sağlamak.</li>
5722. </ul>
5723. <hr />
5724. <h2 id="ens17"><strong><span style="color: purple">Veritabanı</span> Tasarım Adımları</strong></h2>
5725. <p><span style="color: purple">Veritabanı</span> tasarım adımları aşağıdakilerden oluşur:</p>
5726. <ul>
5727.  <li>Veritabanının amacını belirlemek.</li>
5728.  <li>Gerekli bilgileri belirlemek ve düzenlemek.</li>
5729.  <li>Bilgileri tablolara ayırın.</li>
5730.  <li>Bilgi öğelerini sütunlara dönüştürün.</li>
5731.  <li>Birincil anahtarları tanımlamak.</li>
5732.  <li>Tablolar arasında ilişkiler oluşturmak:
5733.    <ol>
5734.      <li>Bire çok ilişki</li>
5735.      <li>veya çoktan çoğa ilişki</li>
5736.      <li>bire bir ilişki</li>
5737.    </ol>
5738.  </li>
5739. </ul>
5740. <p>Aşağıda her adımın ayrıntılı bir açıklaması ekledim:</p>
5741. <h3><strong><span style="color: purple">Veritabanının</span> amacını belirlemek</strong></h3><br />
5742. <p><span style="color: purple">Veritabanının</span> amacının belirlenmesi, optimal <span style="color: purple">veritabanı</span> tasarım sürecine hazırlanmaya yardımcı olur.</p>
5743. <p>Bilgi tabanının tasarımına başlamadan önce bilgi tabanının amacını kağıda yazmamız önerilir.</p>
5744. <p>Yazmanın amacı, veri tabanının nasıl kullanılacağını netleştirmek ve bu kullanım için gereksinimleri ana hatlarıyla belirtmektir.</p>
5745. <p>Evden çalışan bir şirket için küçük bir bilgi tabanı için,
5746. Örneğin, "Müşteri <span style="color: purple">veritabanı</span>, posta yazışmaları ve raporlar oluşturmak amacıyla müşteri bilgilerinin bir listesini tutar" gibi basit bir şey yazabiliriz. <span style="color: purple">Veritabanı</span> daha karmaşıksa veya birçok kişi tarafından kullanılıyorsa ve bu genellikle büyük şirketlerde ve kuruluşlarda oluyorsa, amaç bir veya daha fazla paragraf olabilir ve her bir kişinin <span style="color: purple">veritabanını</span> nasıl ve ne zaman kullandığını içermelidir. Buradaki fikir, iyi geliştirilmiş bir misyon beyanına sahip olmaktır. Tasarım süreci ile belirtilebilir. Aslında böyle bir ifadeye sahip olmak, karar verirken hedeflere odaklanmamıza yardımcı olur.</p>
5747. <h3><strong>Gerekli bilgileri belirlemek ve düzenlemek</strong></h3><br />
5748. <p>Bu adımda, bilgi tabanına kaydedilmesi gerekebilecek her türlü bilgi toplanır, örneğin:</p>
5749. <ul>
5750.  <li>Ürün Bilgisi</li>
5751.  <li>veya satış bilgileri</li>
5752.  <li>veya tedarikçiler hakkında bilgi</li>
5753.  <li>..vb</li>
5754. </ul>
5755. <p>Örneğin, satınalma siparişleri deftere kaydedilebilir ve müşteri bilgileri kağıt formlara kaydedilebilir.<br />
5756. Daha sonra belgeleri toplarız ve mevcut formlarımız yoksa, örneğin bir <a href="https://www.k-html.com/2022/04/html-formlar.html" target="_blank">formda</a> doldurduğumuz her kutuyu gösteren her tür bilgiyi listeleriz. Müşteri bilgilerini kaydetmek için bir formun tasarlanması gerektiğini varsayarsak, <a href="https://www.k-html.com/2022/04/html-formlar.html" target="_blank">forma</a> hangi bilgileri koymak istiyoruz? Hangi ambalaj kutularını oluşturmak istiyoruz? Bu öğelerin her birini tanımlar ve listeleriz.<br />
5757. Örneğin, şu anda dizin kartlarında bir müşteri listesi tuttuğumuzu varsayalım. Bu kartların incelenmesi, her kartın müşterinin adını, adresini, şehri, eyaleti, posta kodunu ve telefon numarasını içerdiğini gösterebilir.
5758.  Bu öğelerin her biri, bir tablodaki potansiyel bir sütunu temsil eder.</p>
5759. <p>Bu listeyi hazırlarken bu, ilk seferde mükemmel bir şekilde tamamlamanız gerektiği anlamına gelmez. Alternatif olarak akla gelen her madde listelenebilir.</p>
5760. <p><span style="color: purple">Veritabanını</span> birden fazla kişi kullanıyorsa, fikirleri de talep edilebilir. Menü daha sonra da ayarlanabilir.</p>
5761. <h4><strong>Verileri çıktı ihtiyaçlarına göre düzenlemek</strong></h4>
5762. <p>Ardından, <span style="color: purple">veritabanından</span> oluşturulacak rapor veya posta türlerini düşünün.</p>
5763. <p>Örneğin, bir ürün satış raporunun bölgeye göre satışları göstermesini veya ürün stok düzeylerini gösteren bir özet envanter raporunu isteyebiliriz.</p>
5764. <p>Ayrıca, bir satış etkinliğini duyuran veya bir ödül sunan müşterilere göndermek için <a href="https://www.k-html.com/2022/04/html-formlar.html" target="_blank">form</a> mektupları oluşturmak isteyebiliriz. Rapor tasarlandı ve nasıl görüneceğini hayal edin. Rapora hangi bilgileri dahil etmek istiyoruz? Her öğeyi listeliyoruz. Daha sonra <a href="https://www.k-html.com/2022/04/html-formlar.html" target="_blank">form</a> mektubu ve oluşturmak istediğimiz diğer raporlar için de aynısını yapıyoruz.</p>
5765. <p>Oluşturmak isteyebileceğimiz raporlar ve postalar hakkında bir fikir edinmek, <span style="color: purple">veritabanında</span> hangi öğelere ihtiyacımız olacağını belirlemeye yardımcı olur.</p>
5766. <p>Örneğin, müşterilere periyodik <span style="color: purple">e-posta</span> güncellemelerini seçme (veya abonelikten çıkma) fırsatı verdiğimizi ve abone olan kişilerin bir listesini yazdırmak istediğimizi varsayalım. Bu bilgileri kaydetmek için Müşteriler tablosuna bir "<span style="color: purple">E-posta gönder</span>" sütunu eklenebilir. Alan, her müşteri için 'evet' veya 'hayır' olarak ayarlanabilir.</p>
5767. <p>Müşterilere <span style="color: purple">e-posta</span> gönderme prosedürü, kaydedilmesi gereken başka bir öğe önerir. Bir müşterinin <span style="color: purple">e-posta</span> almak istediğini bildiğimizde, mesaj göndereceğimiz <span style="color: purple">e-posta</span> adresini de bilmemiz gerekir. Bu nedenle her müşterinin <span style="color: purple">e-posta</span> adresini kaydetmemiz gerekiyor.</p>
5768. <p>Raporu oluşturmak için ihtiyaç duyacağımız unsurları göz önünde bulundurarak, her rapor veya çıktı listesi için bir prototip oluşturmak uygundur.</p>
5769. <p>örnek bir mektubu incelerken aklımıza bazı şeyler gelebilir.
5770.  “Bay” veya “Bayan” selamı ile başlayan önsöz gibi uygun bir selamlamayı dahil etmek istiyorsak, bir selamlama öğesi oluşturulmalıdır.
5771.  Mektuba “Sevgili Kaneki Bey” yerine “Sevgili Kudo Bey” ile de başlayabiliriz. Bu, bireysel olarak kullanılabilmesi için soyadını ilk addan ayrı tutmak istediğimizi gösterir.</p>
5772. <h4><strong>Daha küçük parçalara ayırma</strong></h4>
5773. <p>Hatırlanması gereken ana nokta, her bir bilgiyi daha küçük, kullanışlı parçalara bölmektir.</p>
5774. <p>Örneğin, adla ilgili olarak, soyadını kolayca sağlamak için ad ve soyadı olmak üzere iki kısma ayrılabilir. Örneğin, bir raporu soyadına göre sıralamak için müşterinin soyadının ayrı olarak saklanması yararlı olur. Genel olarak, bir bilgi unsuruna dayalı olarak sıralamak, araştırmak, hesaplamak veya bir rapor sunmak istiyorsak, o unsurun kendi alanına yerleştirilmesi gerekir.</p>
5775. <p><span style="color: purple">Veritabanında</span> cevabını bulmak istediğimiz soruları düşünerek: Geçen ay kaç premium ürün satışı yaptık? En iyi müşterilerimiz nerede yaşıyor? Çok satan ürünün tedarikçisi kimdir? Bu sorular, veri tabanındaki daha fazla öğeyi belirlemede veya onu daha küçük parçalara ayırma ihtiyacını en baştan belirlememize yardımcı olacaktır.</p>
5776. <p>Bu bilgileri topladıktan sonra, bir sonraki adıma hazır olacağız.</p>
5777. <h3><strong>Bilgileri tablolara bölme</strong></h3><br />
5778. <p>Bu adımda, bilgi öğeleri adreslere veya ana birimlere bölünür, her birim birbiriyle ilişkili ve belirli bir <span style="color: purple">algoritma</span> ile ilgili, örneğin çalışanlar için bir adres, ürünler için bir başlık ve siparişler için bir adres gibi bir dizi bilgiyi temsil eder.</p>
5779. <p>Bilgileri <span style="color: purple">tablolara</span> bölmek için ana birimler veya başlıklar seçilir.</p>
5780. <p>Örneğin, bilgi öğelerimiz ürünler, tedarikçiler, müşteriler ve siparişlerle ilgili verileri içeriyorsa. Bu dört tabloyla başlamak mantıklıdır:</p>
5781. <ul>
5782.  <li>birinci tablo: ürünler hakkında bilgi</li>
5783.  <li>ikinci tablo: tedarikçiler hakkında bilgi</li>
5784.  <li>Üçüncü tablo: Müşteriler hakkında bilgiler</li>
5785.  <li>Dördüncü tablo: Uygulamalar hakkında bilgi</li>
5786. </ul>
5787. <p>Bu oluşturulabilecek tabloların tam listesi olmasa da iyi bir başlangıç noktasıdır.</p>
5788. <p>Bu tablolar, iyi işleyen bir tasarım elde edilene kadar geliştirilmeye devam edilebilir.</p>
5789. <p>Her tabloda bulunan temel öğelerin listesini incelerken, bunları önceki resimde gösterilen dört tablo yerine tek bir tabloya yerleştirmeyi düşünebiliriz.</p>
5790. <p>Ancak bunun neden kötü bir fikir olduğunu aşağıdaki örnekte öğreneceğiz.</p>
5791. <h4><strong>Açıklayıcı örnek</strong></h4>
5792. <p>Bir tablonun siparişler için tasarlandığını ve sanki içindeki her satır ürün ve tedarikçisi hakkında bilgi içeriyormuş gibi birden fazla tablodaki tüm ham verileri içerdiğini varsayalım. Aynı tedarikçiden çok sayıda ürün alınabileceğinden, tedarikçinin isim ve adres bilgilerinin birkaç kez tekrarlanması gerektiği sonucu çıkar. <br />
5793. Bu, disk depolama alanı kaybı kadar zaman ve emek kaybıdır. Bu nedenle, tedarikçi bilgilerini ayrı bir Tedarikçi tablosuna yalnızca bir kez kaydetmek ve ardından bu tabloyu Ürünler tablosuna bağlamak çok daha iyi bir çözümdür.</p>
5794. <h4><strong>değişiklik ihtiyaçları</strong></h4>
5795. <p>İkinci sorun ise bilgilerin tablolara bölünüp tek bir tabloya konmaması, bu da belirli bilgileri değiştirmemiz gerektiğinde sorun yaratıyor.<br />
5796. Örneğin, bir kaynağın adresini değiştirmemiz gerektiğini ve aynı toplu tabloda birkaç yerde göründüğü için, bu yerlerin hepsinde adresi değiştirmemiz gerektiğini varsayalım,
5797.  Adresi yanlışlıkla bir yerde değiştirebilir, diğer yerlerde değiştirmeyi unutabiliriz,
5798.  Yani kaynak adresini tek bir yere kaydetmek bu sorunu çözer.</p>
5799. <p>Bir <span style="color: purple">veritabanı</span> tasarlarken, her bilgi parçası her zaman yalnızca bir kez kaydedilmelidir. Kendimizi belirli bir kaynağın adresi gibi birden fazla yerde aynı bilgiyi tekrarlarken bulursak, <span style="color: purple">veritabanının</span> tasarımının iyi olmadığı ve bu nedenle bu bilgilerin ayrı bir tabloya konulması gerektiği söylenebilir. tasarım daha kaliteli ve verimli hale gelir.</p>
5800. <h4><strong>silme ihtiyaçları</strong></h4>
5801. <p>Son olarak, belirli bir şirket tarafından sağlanan yalnızca bir ürün olduğunu ve adres ve tedarikçi adı bilgilerini korurken onu silmek istediğimizi varsayalım. Tedarikçi bilgilerini kaybetmeden ürün geçmişini nasıl silmek isteriz? Elbette bunu yapamayız. Her kayıt, ürünlerle ilgili bilgilerin yanı sıra tedarikçi bilgilerini de içerdiğinden, birini silmeden diğerini silemeyiz. Aşağıdaki bilgileri ayrı tutmak için tabloyu ikiye bölmeliyiz: biri ürün bilgisi için, diğeri tedarikçi bilgisi için. Bir ürün kaydının silinmesi, tedarikçiyle ilgili bilgileri değil, yalnızca ürünle ilgili bilgileri silmelidir.</p>
5802. <p>Tabloda temsil edilen başlığı seçerken, sütunlar yalnızca başlıkla ilgili bilgileri içermelidir.</p>
5803. <p>Örneğin, Ürünler tablosu yalnızca ürünlerle ilgili bilgileri depolamalıdır. Tedarikçinin adresi ürünle ilgili değil tedarikçiyle ilgili bilgiler olduğundan Tedarikçiler tablosuna aittir.</p>
5804. <h3><strong>Bilgi öğelerini sütunlara dönüştürmek</strong></h3><br />
5805. <p>Bu adımda, her tabloda hangi bilgileri saklamak istediğimize karar veriyoruz. burada her öğe bir alan olur ve tabloda bir sütun olarak görüntülenir.</p>
5806. <p>Örneğin, Çalışanlar tablosu "Çalışan Adı", "Soyadı", "Çalışma Tarihi" vb. alanları içerebilir.</p>
5807. <p>Bir tablodaki sütunları seçmek için, tabloya kaydedilen adres detayları için ihtiyacımız olan bilgiler belirtilir.</p>
5808. <p>Örneğin, "Müşteriler" tablosu için tablonun sütunları aşağıdaki ayrıntılı veriler olabilir:</p>
5809. <ul>
5810.  <li>İsim</li>
5811.  <li>adres</li>
5812.  <li>Şehir</li>
5813.  <li>eyalet</li>
5814.  <li>posta kodu</li>
5815.  <li>Bir e-posta göndermek</li>
5816.  <li>selamlamak</li>
5817.  <li>E-posta adresi</li>
5818.  <li>vb..</li>
5819. </ul>
5820. <p>Tablodaki her kayıt, her kayıt için ad, adres, şehir, eyalet, posta kodu ve e-posta, selamlama, bilgileri saklayabileceğiniz aynı sütun kümesini içerir. Örneğin, Adres sütunu müşterilerin adreslerini içerir. Her kayıt bir müşteri hakkında bilgi içerir ve Adres alanı o müşterinin adresini içerir.</p>
5821. <p>Her tablo için ilk sütun kümesini seçtikten sonra sütunlar optimize edilebilir.</p>
5822. <p>Örneğin, müşteri adının iki ayrı sütun olarak saklanması tercih edilir: ad ve soyadı, çünkü yalnızca bu sütunlar sıralanabilir, aranabilir ve dizine eklenebilir. Benzer şekilde, bir adres aslında beş ayrı bileşenden oluşur: adres, şehir, eyalet, posta kodu ve ayrı sütunlarda saklamak için kullanışlı olan ülke/bölge. Örneğin bir arama, sıralama veya duruma göre filtreleme yapmak istiyorsak, ayrı bir sütunda saklanan durum bilgisine ihtiyacımız var.</p>
5823. <p><span style="color: purple">Veritabanının</span> sadece yerel bilgileri mi yoksa uluslararası bilgileri mi içerdiğine de dikkat edilmelidir.</p>
5824. <p>Örneğin, uluslararası adresleri saklamayı planlıyorsak, böyle bir sütun yerel eyaletleri ve diğer ülkelerin/bölgelerin bölgelerini içerebileceğinden, Eyalet yerine Bölge sütununun olması tercih edilir.</p>
5825. <p>Benzer şekilde, uluslararası adresleri saklamak istiyorsak posta kodu daha iyi olabilir.</p>
5826. <p>Bir tablo için sütun seçmeye ilişkin bazı önemli ipuçları:</p>
5827. <h4><strong>Hesaplanan veriler içermemek</strong></h4>
5828. <p>Çoğu durumda, hesaplamaların sonucu tablolarda saklanmamalıdır.</p>
5829. <p>Alternatif olarak, işlemin sonucunu görmek istediğimizde hesaplamaların sonuçları alınabilir.</p>
5830. <p>Örneğin, bilgi tabanındaki her ürün kategorisi için siparişteki birimlerin alt toplamını görüntüleyen bir "Siparişteki Ürünler" raporu olduğunu varsayalım. Ancak herhangi bir tabloda sıralı birimlerin alt toplamı için sütun yoktur. Bunun yerine, Ürünler tablosu, her ürün için sipariş üzerine birimleri depolayan bir "Sipariş Üzerine Birimler" sütununu içerir. Bu verilerle, raporu her yazdırdığımızda veritabanı bir ara toplam hesaplar.</p>
5831. <p>Yani, ara toplamın kendisi bir tabloda saklanmamalıdır.</p>
5832. <h4><strong>Bilgileri daha küçük <span style="color: purple">mantıksal</span> parçalarda saklamak</strong></h4>
5833. <p>Ürün açıklamalarıyla birlikte tam adlar veya ürün adları için bir alana ihtiyacımız olabilir.</p>
5834. <p>Bir alanda birden fazla bilgi türünü birleştirirsek, daha sonra tek tek bilgileri almak zor olacaktır.</p>
5835. <p>En iyi tasarım, bilgiyi <span style="color: purple">mantıksal</span> parçalara bölmektir.</p>
5836. <p>Örneğin, ad ve soyadı için veya ürün adı, kategorisi ve açıklaması için ayrı alanlar oluşturulabilir.</p>
5837. <p>Her tablodaki veri sütunlarını optimize ettiğimizde, tablo bir sonraki adım olan birincil anahtarını seçmeye hazırdır.</p>
5838. <h3><strong><span style="color: purple">Veritabanlarında</span> birincil anahtarları tanımlamak</strong></h3><br />
5839. <p>Bu adımda, her tablo için birincil anahtar seçilir.</p>
5840. <p>Birincil anahtar, her satırı benzersiz şekilde tanımlamak için kullanılan bir sütundur. <br />mesela:</p>
5841. <ul>
5842.  <li>"Ürün Kimliği" veya</li>
5843.  <li>"Talep kimliği"</li>
5844. </ul>
5845. <p>Her tablo, tabloda depolanan her satırı benzersiz şekilde tanımlayan bir sütun veya sütun kümesi içermelidir. Bu, genellikle çalışan kimlik numarası veya seri numarası gibi benzersiz bir tanımlayıcı numaradır. <span style="color: purple">Veritabanı</span> terminolojisinde bu bilgilere tablonun birincil anahtarı denir. Bir <span style="color: purple">veritabanı</span> ortamı, verileri birden çok tablo arasında hızlı bir şekilde elektronik olarak ilişkilendirmek ve verileri manuel olarak toplamak zorunda kalmadan bir araya getirmek için birincil anahtar alanlarını kullanır.</p>
5846. <p>Bir tablo için, katalogdaki her ürünü benzersiz şekilde tanımlayan bir ürün numarası gibi benzersiz bir tanımlayıcımız varsa, bu tanımlayıcı tablonun birincil anahtarı olarak kullanılabilir, ancak yalnızca o sütundaki değerler her biri için her zaman farklıysa kayıt, yani tekrarlanamazlar çünkü birincil anahtarda yinelenen değerler olamaz. Örneğin, adlar benzersiz olmadığı için kişilerin adları birincil anahtar olarak kullanılamaz. Aynı masada aynı isimde iki kişiyi rahatlıkla alabiliriz.</p>
5847. <h4><strong>Birincil anahtar değeri</strong></h4>
5848. <p>Birincil anahtara her zaman bir değer sağlanmalıdır.</p>
5849. <p>Sütun değeri belirtilmemişse veya bazen bilinmiyorsa (eksik değer), birincil anahtarda bir bileşen olarak kullanılamaz.</p>
5850. <p>Ayrıca her zaman değeri değişmeyecek bir birincil anahtar seçmeliyiz.</p>
5851. <p>Bir tablonun birincil anahtarı, birden fazla tablo kullanan bir <span style="color: purple">veritabanındaki</span> diğer tablolara referans olarak kullanılabilir. Birincil anahtar değiştirilirse, değişiklik, anahtarın referans alındığı her yerde de uygulanmalıdır. Değişmeyecek bir birincil anahtarın kullanılması, bu anahtara atıfta bulunan diğer tablolarla senkronize edilmeme, yani bir ilişki ile ilişkilendirilme olasılığını azaltır.</p>
5852. <p>Genellikle birincil anahtar olarak rastgele benzersiz bir sayı kullanılır. Örneğin, her siparişe benzersiz bir sipariş numarası atayabilirsin. Sipariş numarasının tek amacı siparişi tanımlamaktır. Bir kez ayarlandıktan sonra bu sayı değiştirilemez.</p>
5853. <h4><strong>Birincil anahtar otomatik numaralandırma</strong></h4>
5854. <p>Herhangi bir sütunu veya sütun grubunu uygun birincil anahtar olarak seçmeyi düşünmüyorsak, Otomatik Sayı veri tipine sahip bir sütun kullanılmalıdır. Otomatik Sayı veri türü kullanıldığında, her kayıt için otomatik olarak bir otomatik seri değeri oluşturulur. Bu tanımlayıcı türü yanlıştır; Temsil ettiğiniz sınıfı tanımlayan gerçek bir bilgi içermez. Yanlış tanımlayıcılar, değişmeyecekleri için birincil anahtar olarak kullanım için idealdir. Telefon numarası veya müşteri adı gibi satırla ilgili bilgileri içeren birincil anahtar, gerçek bilgilerin kendisi değişebileceğinden büyük olasılıkla değişecektir.</p>
5855. <p>Otomatik Sayı veri türüne atanan sütun, iki ürün kimliği aynı olmadığı için genellikle iyi bir birincil anahtar olarak kullanılabilir.</p>
5856. <p>Bazı durumlarda, tablonun birincil anahtarını sağlamak için iki veya daha fazla alanı birlikte kullanmamız gerekebilir.</p>
5857. <p>Örneğin, siparişler için kayıt öğelerini depolayan bir Sipariş Ayrıntıları tablosu, birincil anahtarında iki sütun kullanabilir: sipariş kimliği ve ürün kimliği.</p>
5858. <p>Birincil anahtar birden fazla sütun kullandığında buna bileşik anahtar da denir.</p>
5859. <p>Bir ürün satış <span style="color: purple">veritabanı</span> için, her tablonun birincil anahtar görevi görmesi için bir Otomatik Sayı sütunu oluşturulabilir.</p>
5860. <p>Örneğin, Ürünler tablosu için ürün kimliği, Siparişler tablosu için Sipariş Kimliği, Müşteriler tablosu için Müşteri Kimliği ve Tedarikçiler tablosu için Tedarikçi Kimliği oluşturulabilir.</p>
5861. <h3><strong>Veritabanlarında tablolar arasında ilişkiler oluşturmak</strong></h3><br />
5862. <p>Bu adımda, her tablo gözden geçirilir ve bir tablodaki verilerin diğer tablolardaki verilerle nasıl bir ilişkisi vardır.</p>
5863. <p>Gerekirse, ilişkileri netleştirmek için tablolara alanlar eklenebilir veya yeni tablolar oluşturulabilir.</p>
5864. <p>Örneğin Ürünler tablosu ile Satış tablosu arasında "Ürün No" alanı üzerinden bağlantı kurulabilir, böylece ürün için "Ürün No" bazında yapılan tüm satış işlemleri Satış tablosunda görünür, ancak Satış tablosundaki tüm ürün verilerini tekrarlamak.</p>
5865. <p>Artık bilgileri tablolara ayırdığımıza göre, bilgileri anlamlı yollarla tekrar bir araya getirmenin bir yoluna ihtiyacımız var.</p>
5866. <p>Örneğin, bir form birkaç tablodan bilgi içerir ve içindeki bilgiler aşağıdaki tablodan gelir:</p>
5867. <ol type="1">
5868.  <li>müşteri tablosu</li>
5869.  <li>personel tablosu</li>
5870.  <li>siparişler tablosu</li>
5871.  <li>Ürünler tablosu</li>
5872.  <li>ve sipariş detayları tablosu</li>
5873. </ol>
5874. <p>İlişkisel bir <span style="color: purple">veritabanı</span> yönetim sisteminde, bilgiler ayrı tablolara, adreslere dayalı tablolara bölünebilir. Tablo ilişkileri daha sonra gerekirse bilgileri birbirine bağlamak ve bir araya getirmek için kullanılabilir.</p>
5875. <p><span style="color: purple">Veritabanlarında</span> üç tür ilişki vardır:</p>
5876. <ol type="1">
5877.  <li>Bire çok ilişki</li>
5878.  <li>veya çoktan çoğa ilişki</li>
5879.  <li>Ya da bire bir ilişki</li>
5880. </ol>
5881. <p>Aşağıda, bu tür ilişkilerin her birinin nasıl oluşturulacağına ilişkin ayrıntılı bir açıklama verilmiştir:</p>
5882. <h4><strong>Bire çok ilişki oluşturmak</strong></h4>
5883. <p>Birinci tablodaki her bir kayıt için ikinci tabloda onunla ilişkilendirilmiş birden çok kaydın bulunduğu bir-çok ilişkisi.</p>
5884. <p>Örneğin, bir ürün siparişi veri tabanındaki Ürünler ve Tedarikçiler tablolarında, bir tedarikçinin herhangi bir sayıda ürünü tedarik edebileceği bilinmektedir.</p>
5885. <p>Tedarikçiler tablosundaki herhangi bir kaynağın Ürünler tablosunda çok sayıda ürün olduğu sonucu çıkar.</p>
5886. <p>Bu nedenle, Tedarikçiler tablosu ile Ürünler tablosu arasındaki ilişki bire çok ilişki türüdür.</p>
5887. <p><span style="color: purple">Veritabanı</span> tasarımında bir-çok ilişkisini temsil etmek için, ilişkinin “bir” tarafındaki birincil anahtarı kullanırız ve ardından onu ilişkinin “çok” tarafındaki tabloya ek bir sütun olarak ekleriz. Bu durumda Tedarikçiler tablosundan Tedarikçi Kimliği sütununu Ürünler tablosuna ekliyoruz. Ürünler tablosundaki müşteri kimlik numarası, her ürün için doğru tedarikçiyi otomatik olarak bulmak için kullanılacaktır.</p>
5888. <p>Ürünler tablosundaki Tedarikçi Kimliği sütununa yabancı anahtar adı verilir.</p>
5889. <p>Yabancı anahtar, başka bir tablonun birincil anahtarıdır.</p>
5890. <p>Ürünler tablosundaki Tedarikçi Kimliği sütunu, aynı zamanda Tedarikçiler tablosundaki birincil anahtar olduğundan bir yabancı anahtardır.</p>
5891. <p>Bağlantılı tabloların birleştirilmesinin temeli, birincil anahtarlar ve yabancı anahtarlar oluşturularak sağlanabilir.</p>
5892. <p>Hangi tabloların ortak bir sütunu paylaşması gerektiğinden emin değilsek, birden çoğa ilişki belirtmek, dahil edilen iki tablonun ortak bir sütun gerektirmesini sağlar.</p>
5893. <h4><strong>Çoktan çoğa ilişki oluşturun</strong></h4>
5894. <p>İlk tablodaki her bir kayıt için ikinci tabloda onunla ilişkili birden çok kaydın olabileceği çoktan çoğa ilişki.</p>
5895. <p>Ve tam tersi, ikinci tablodaki her kayıt için, birinci tabloda onunla ilişkili birden fazla kayıt olabilir.</p>
5896. <p>Örneğin, Ürünler tablosu ile Siparişler tablosu arasındaki ilişki. Bir sipariş birden fazla ürün içerebilir.</p>
5897. <p>Öte yandan, bir ürün birkaç siparişte görünebilir.</p>
5898. <p>Bu nedenle, Siparişler tablosundaki her kaydın Ürünler tablosunda birden çok kaydı olabilir.</p>
5899. <p>Ürünler tablosundaki her kaydın Siparişler tablosunda birden çok kaydı olabilir.</p>
5900. <p>Bu tür bir ilişkiye çoktan çoğa ilişki denir, çünkü herhangi bir ürünün birçok siparişi olabilir ve herhangi bir siparişin birçok ürünü olabilir.</p>
5901. <p>Tablolar arasında çoktan çoğa ilişkileri keşfetmek için ilişkinin her iki tarafını da dikkate almanın önemli olduğuna dikkat edilmelidir.</p>
5902. <p>İki tablo başlığı, Siparişler ve Ürünler, çoktan çoğa bir ilişki içerir. Bu bir sorun.</p>
5903. <p>Sorunu anlamak için, Siparişler tablosuna Ürün Kimliği alanını ekleyerek iki tablo arasında bir ilişki oluşturmaya çalışırsak ne olacağını hayal edelim. Sipariş başına birden fazla ürün olması için siparişler tablosunda sipariş başına birden fazla kayda ihtiyacımız olacaktır. Tek bir siparişle ilişkili her satır için sipariş bilgilerini tekrarlayabiliriz, bu da hatalı verilere yol açabilecek yetersiz bir tasarımla sonuçlanır. Ürünler tablosuna <span style="color: purple">OrderID</span> alanı koyarsak her ürün için Ürünler tablosunda birden fazla kaydımız olacağı için aynı sorunla karşılaşacağız. Bu sorun nasıl çözülebilir?</p>
5904. <h4><strong>Çoktan çoğa ilişki oluşturma problemini çözüm</strong></h4>
5905. <p>Çözüm, çoktan çoğa ilişkiyi iki bire çoğa ilişkiye böldüğümüz, genellikle "sipariş ayrıntıları" tablosu olarak adlandırılan üçüncü bir tablo oluşturmaktır.</p>
5906. <p>Daha sonra iki tablonun her birinden birincil anahtar üçüncü tabloya eklenebilir.</p>
5907. <p>Sonuç olarak, üçüncü tablo, ilişkinin tüm oluşumlarını veya örneklerini kaydeder.</p>
5908. <p>Sipariş Ayrıntıları tablosundaki her kayıt, siparişteki bir kayıt öğesini temsil eder.</p>
5909. <p>Sipariş Ayrıntıları tablosunun birincil anahtarı, Siparişler ve Ürünler tablolarından iki yabancı anahtar alanından oluşur.</p>
5910. <p>Tek bir siparişin birçok kayıt öğesi olabileceğinden, yalnızca <span style="color: purple">OrderID</span> alanının kullanılması bu tablo için birincil anahtar olarak çalışmaz. Alan benzersiz değerler içermediğinden sipariş kimliği, siparişteki her kayıt öğesi için tekrarlanır. Tek bir ürün birçok farklı siparişte görünebileceğinden yalnızca <span style="color: purple">PID</span> alanını kullanmak da işe yaramaz.</p>
5911. <p>Ancak iki alan birleştirildiğinde, bu her zaman her kayıt için benzersiz bir değerle sonuçlanır.</p>
5912. <p>Bir ürün satış <span style="color: purple">veritabanında</span>, siparişler tablosu ve ürünler tablosu birbiriyle doğrudan ilişkili değildir.</p>
5913. <p>Ancak bunlar, bir sipariş detay tablosu yoluyla dolaylı olarak ilişkilidir.</p>
5914. <p>Siparişler ve ürünler arasındaki çoktan çoğa ilişki, bire çok ilişkiler kullanılarak <span style="color: purple">veritabanında</span> temsil edilir, böylece:</p>
5915. <ol type="1">
5916.  <li>Siparişler tablosu ve Sipariş Ayrıntıları tablosu bire çok ilişkisine sahiptir. Her isteğin birden fazla kayıt öğesi olabilir, ancak her kayıt öğesi yalnızca bir istekle ilgilidir.</li>
5917.  <li>Ürünler tablosu ve Sipariş Ayrıntıları tablosu bire çok ilişkisine sahiptir. Her ürünün kendisiyle ilişkilendirilmiş birçok günlük öğesi olabilir, ancak her günlük öğesi yalnızca bir ürüne atıfta bulunur.</li>
5918. </ol>
5919. <p>“Sipariş Detayı” tablosundan belirli bir siparişteki tüm ürünler seçilebilir. Belirli bir ürün için tüm siparişler de seçilebilir.</p>
5920. <h4><strong>Bire bir ilişki oluşturmak</strong></h4>
5921. <p>Birinci tablodaki her ilgili kayıt için ikinci tablodaki eşleşen bir kayıt olduğu bire bir ilişki.</p>
5922. <p>Örneğin, nadiren ihtiyaç duyabileceğimiz veya yalnızca birkaç ürün için geçerli olan bazı özel ek ürün bilgilerini kaydetmemiz gerektiğini varsayalım. Bilgiye çok sık ihtiyaç duymadığımız için ayrı bir tabloya yerleştirilebilir ve Ürünler tablosunda bilgi depolamak, uygulanmadığı her ürün için boş alan oluşturabilir. Örneğin, bir ürünler tablosu oluşturulabilir ve ürün kimliği birincil anahtar olarak kullanılabilir. Bu ek tablo ile ürün tablosu arasındaki ilişki bire bir ilişkidir. Ürünler tablosundaki her kayıt için Ek Tabloda eşleşen bir kayıt vardır.</p>
5923. <p>Bu tür bir ilişki tanımlanırken, iki tablo ortak bir alanı paylaşmalıdır.</p>
5924. <p><span style="color: purple">Veritabanında</span> bire bir ilişkiye ihtiyaç duyulduğunda, iki tablodan gelen bilgiler tek bir tabloda bir araya getirilebilir.</p>
5925. <p>Bunu, verilerin doğası ve tüm kayıtların kullanılabilirliği ile ilgili herhangi bir nedenle yapmak istemezsek, ek tablo oluşturma yöntemini kullanırız.</p>
5926. <p>Aşağıdaki liste, ilişkinin tasarımda nasıl temsil edildiğini gösterir:</p>
5927. <ul>
5928. <li>İki tablo aynı adrese sahipse, ilişki iki tabloda aynı birincil anahtar kullanılarak kurulabilir.</li>
5929.  <li>Eğer iki tablo farklı adreslere ve farklı birincil anahtarlara sahipse, tablolardan biri seçilir ve birincil anahtarı diğer tabloya yabancı anahtar olarak eklenir.</li>
5930. </ul>
5931. <p>Tablolar arasındaki ilişkileri tanımlamak, doğru tabloları ve sütunları aldığınızdan emin olmanıza yardımcı olur.</p>
5932. <p>Bire bir veya bire çoğa ilişki olduğunda, ilgili tablolar ortak bir sütun veya sütunları paylaşmalıdır.</p>
5933. <p>Çoktan çoğa ilişki olduğunda, ilişkiyi doğru bir şekilde temsil etmek için üçüncü bir tablo sağlanmalıdır.</p>
5934. <hr />
5935. <h2 id="ens18"><strong>Veritabanları Neden Önemlidir?</strong></h2>
5936.  <p><span style="color: purple">Veritabanları</span>, çeşitli iş alanlarında büyük önem taşır ve aşağıdakiler de dahil olmak üzere birçok noktada önemleri öne çıkar:</p>
5937. <ul>
5938. <li>Veritabanları, içerdikleri verilere erişim sürecini hızlandırmaya büyük ölçüde yardımcı olur, bu nedenle, burada ve orada arama yapmak yerine, gerekli veriler toplanır, böylece erişim ve işleme veya gelecekte çeşitli işlerde kullanma sürecini kolaylaştırır.</li>
5939. <li>Veritabanları, gelecekte bu verilerin değiştirilmesi sürecini büyük ölçüde kolaylaştırmakta ve silme veya ekleme işlemlerini kolaylaştırmanın yanı sıra gerekli güncellemelerin yapılması sürecini de büyük ölçüde kolaylaştırmaktadır.</li>
5940. <li>Veritabanları, bu kurallar dahilinde kaydedilen ve saklanan verilerle doğrudan ilgili herhangi bir soruyu veya soruyu herhangi bir zamanda yanıtlamaya yardımcı olur.</li>
5941.  <li>Yönetimini ve geri alınmasını kolaylaştırmak için büyük verileri hiyerarşik bir şekilde koordine etmeye ve gruplandırmaya yardımcı olur.</li>
5942. <li>Kullanışlı ve verimli bir veritabanı yönetim sistemi, marka yöneticilerinin yalnızca daha yeni bilgiler girmesine değil, aynı zamanda mevcut bilgileri güncellemelerine ve ihtiyaç duymadıkları bilgileri silmelerine olanak tanır.</li>
5943.  <li>Örneğin, bir satıcı 1.000 birim satabildiğinde, o kişi, kişinin adı ve müşteri bilgileri gibi belirli ayrıntıları ve ayrıca kullanıcının sattığı ürün ve ürün sayısı gibi belirli ayrıntıları içerebilen işlem bilgilerini ilişkisel yönetim sistemine girebilir.</li>
5944. <li><span style="color: purple"><abbr title="İlişkisel veritabanı yönetim sistemi">RDBMS</abbr></span>, yeni kayıtlar girecek ve gerekli tüm bilgileri güncelleyecek ve böylece markaların ürünlerini verimli bir şekilde takip edip satmasına olanak tanıyacaktır.</li>
5945.  <li>Firma yöneticisi belirli kriterlere göre ihtiyaç duyduğu bilgiyi kolaylıkla bulabilmektedir, bu aynı zamanda fiyat, renk, marka gibi her özelliği arayan müşteriler için de mevcuttur.</li>
5946.  <li>Bilgileri öngörülebilir ve sıralı bir biçimde saklayarak, kullanıcıların ihtiyaç duydukları bilgileri kolaylıkla bulmalarını sağlar.</li>
5947.  </ul>
5948. <hr />
5949. <h2 id="ens19"><strong>Veritabanlar Öğrenmeyi Ne Kadar Sure Alır?</strong></h2>
5950. <p><span style="color: purple"><abbr title="Structured Query Language">SQL</abbr></span> nispeten basit bir dil olduğundan, öğrenciler iki ila üç hafta içinde temel bilgilere aşina olmayı bekleyebilirler. Bununla birlikte, işte <span style="color: purple"><abbr title="Structured Query Language">SQL</abbr></span> becerilerini kullanmayı planlıyorsan, muhtemelen daha yüksek bir akıcılık düzeyine ihtiyacın olacaktır.</p>
5951. <p>Ustalığı ne kadar çabuk elde edeceğiniz, öğrenme yönteminize bağlı olacaktır. <span style="color: purple"><abbr title="Structured Query Language">SQL</abbr></span>'i bağımsız olarak öğrenmeye çalışırsan, süreç yaklaşık altı ay sürebilir - <span style="color: purple"><abbr title="Structured Query Language">SQL</abbr></span>'i düzenli olarak uygulamıyorsan daha uzun sürebilir. Ancak, kodlama eğitim kampı gibi yoğun, resmileştirilmiş bir öğrenme programına katılarak süreci hızlandırabilirsin. Bunlardan birine kaydolursan, üç ay gibi kısa bir sürede <span style="color: purple"><abbr title="Structured Query Language">SQL</abbr></span> ustalığı kazanmayı bekleyebilirsin.</p>
5952. <div class="parent-links">  
5953.    <a class="btn btn-primary" href="https://www.k-html.com/2022/03/html-yaz-aras-bosluk.html">
5954.    <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
5955.      önceki ders
5956.    </a>
5957.    <a class="btn btn-primary" href="https://www.k-html.com/2022/06/html5-nedir.html">
5958.      sonraki ders
5959.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
5960.    </a>
5961.  </div>
5962.  
5963.  
5964.  
5965.  
5966.  
5967. </content><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/7766887168830116389'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/7766887168830116389'/><link rel='alternate' type='text/html' href='https://www.k-html.com/2022/03/database-veritabanlar.html' title='Database - Veritabanları '/><author><name>HTML öğren</name><uri>http://www.blogger.com/profile/05938401370972816509</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB9hVaVznt_p0FHumsq5E1ns0HFhwUsz5N8PDjeIc1oE4O70yakyUZqpJJiZyKolfcNdZlaOrykdeVaT9wGLi4Gp6Ko2vw9JCv-r2AQBF1JjXNu_09kuRKvXx-7fys1Hw/s113/html.jpg'/></author></entry><entry><id>tag:blogger.com,1999:blog-624213398567285603.post-2743529456214091909</id><published>2022-03-07T15:13:00.060+03:00</published><updated>2023-06-17T06:58:32.388+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="html"/><category scheme="http://www.blogger.com/atom/ns#" term="paragrafları"/><title type='text'>HTML Yazı Arası Boşluk</title><content type='html'>
5968. <p>Boşluk çubuğu, sekme ve enter tuşlarını kullanan birden çok boşluk, <span>HTML</span> kodu yazarken, <span>HTML</span> tüm bu boşlukları sözcükler arasındaki boşluk olarak çevirip yalnızca bir boşluk olarak görüntülediğinden genellikle yoksayılır.</p>
5969. <p>HTML'de metinler arasında farklı boşluklar eklemek mümkündür. Tek bir boşluk eklemek için normal boşluk karakteri kullanılabilir. Birden fazla boşluk eklemek için ise   veya diğer bir çok kod kullanılabilir. Ayrıca, kesintisiz bir boşluk eklemek için <pre> etiketi kullanılabilir. Bu şekilde metinlerin düzeni daha iyi hale getirilebilir.</p>
5970. <p>Öte yandan, <span style="color: blue;">CSS</span> kodları boşluk biçimlendirme ve yönlendirmede daha fazla özgürlük sağlar ve <span>HTML</span>'de ayrıca birçok alan özelleştirme aracı vardır.</p>
5971. <details open="">
5972.  <summary style="text-align: left;">Sayfa içeriği</summary>
5973.  <ul class="postcontent">
5974.      <li><b>›</b> <a href="https://www.k-html.com/2022/03/html-yaz-aras-bosluk.html#tbvbbe">Tek boşluklar ve büyük boşluklar eklemek</a></li>
5975.    
5976.      <li><b>›</b> <a href="https://www.k-html.com/2022/03/html-yaz-aras-bosluk.html#umb">Uzun metin biçimlendirme</a></li>
5977.    
5978.       <li><b>›</b> <a href="https://www.k-html.com/2022/03/html-yaz-aras-bosluk.html#ff">Faydalı fikirler</a></li>
5979.    
5980.      <li><b>›</b> <a href="https://www.k-html.com/2022/03/html-yaz-aras-bosluk.html#u">Uyarılar</a></li>
5981.    </ul>
5982. </details>
5983.  
5984. <hr class="hrkk" />
5985. <h2 id="tbvbbe">Tek boşluklar ve büyük boşluklar eklemek</h2>
5986. <br />
5987.  
5988.  
5989. <h3>Kesintisiz bir boşluk eklemek</h3>
5990. <a href="https://src.k-html.com/html-yazı-arası-boşluk.png"><img height="124" src="https://src.k-html.com/html-yazı-arası-boşluk.png" width="509" alt="Kesintisiz bir boşluk eklemek"/></a><br /><br />
5991. <p><span>HTML</span>, boşluk çubuğuna ne kadar basarsan bas genellikle kelimeler arasında bir boşluk görüntüler ve <span> </span> veya <span> </span> yazarak fazladan bir boşluk gösterebilirsin.</p>
5992. <p>Bu, kesintisiz mesafe adı verilen bir boşluk görüntüler ve bu mesafe her zaman gösterilir.</p>
5993. <p>Bu alana kesintisiz boşluk denir, çünkü satırın yerinde kesilmesini önler ve bu alanı aşırı kullanırsan tarayıcı stilize bir şekilde satır sonları eklemekte zorlanır.</p>
5994. <pre class="code"><ul class="ucode"><li><span style="color: blue;"><p</span><span style="color: blue;">></span> k-html   HTML dili öğren <span style="color: blue;"></p</span><span style="color: blue;">></span></li></ul></pre>
5995. <a class="elifnur" href="https://code.k-html.com/kodlar/kbae.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
5996. <br />
5997. <br />
5998. <h3>Farklı belirtilerle beyaz boşluk eklemek</h3>
5999. <a href="https://src.k-html.com/html-yazı-arası-boşluk2.png"><img height="174" src="https://src.k-html.com/html-yazı-arası-boşluk2.png" width="528" alt="Farklı belirtilerle beyaz boşluk eklemek
6000. "/></a><br /><br />
6001. <p>Tarayıcıya boşluk göstermesini söyleyen birçok başka sembol birimi vardır ve farklı tarayıcılar bu boşluğu farklı şekilde görüntüleyebilir, ancak bu boşluk türü <span> </span> sembolünden farklı olarak satır sonunu etkilemez:</p>
6002. <ul>
6003.  <li><span> </span> Bu kod, yaklaşık iki normal boşluk genişliğinde bir boşluk ekler.</li>
6004.  <li><span> </span> Bu mesafe yaklaşık olarak normal mesafeye eşittir.</li>
6005. </ul>
6006. <pre class="code"><ul class="ucode"><li><span style="color: blue;"><p</span><span style="color: blue;">></span>k-html   HTML dili öğren.<span style="color: blue;"></p</span><span style="color: blue;">></span></li><li><span style="color: blue;"><p</span><span style="color: blue;">></span>k-html   HTML dili öğren.<span style="color: blue;"></p</span><span style="color: blue;">></span></li></ul></pre>
6007. <a class="elifnur" href="https://code.k-html.com/kodlar/fbbbe.html" target="_blank">kod dene  <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
6008. <br />
6009. <br />
6010. <h3>Kesintisiz bir boşluk eklemek</h3>
6011. <a href="https://src.k-html.com/html-yazı-arası-boşluk3.png"><img height="189" src="https://src.k-html.com/html-yazı-arası-boşluk3.png" alt="Kesintisiz bir boşluk eklemek" width="591" /></a><br /><br />
6012. <p>Art arda birden fazla kesintisiz boşluk eklemek, paragrafın başlangıcından önce boşluk bırakmanın bir yoludur. <span>    </span> Bu yalnızca <span>HTML</span>'de yapılabilir, ancak bunun yerine <span>CSS</span> kodunu kullanabiliyorsan önerilmez.</p>
6013. <h3><span>CSS</span> sembollerini kullanarak bir metin paragrafından önce geniş bir boşluk bırakmak.</h3>
6014. <a href="https://src.k-html.com/html-yazı-arası-boşluk4.png"><img height="246" src="https://src.k-html.com/html-yazı-arası-boşluk4.png" width="424" alt="CSS sembollerini kullanarak bir metin paragrafından önce geniş bir boşluk bırakmak"/></a><br /><br />
6015. <p><span>CSS</span> karakter aralığı ve sınırları, tarayıcıya daha tutarlı bir sonuç veren basit bir görüntüleme kılavuzu verir ve <span>CSS</span> deneyimini olmadığında ve bunun için ayrı bir dosyanı olmadığında bile bunu yapmak kolaydır.</p>
6016. <ul>
6017.  <li><span>HTML</span> dosyasının <span style="color: blue;"><head></head></span> bölümüne içine sonraki kodu ekle:<br />
6018. <pre class="code"><ul class="ucode"><li><span style="color: blue"><style></span></li><li>   p.ens {</li><li>   padding-left: 1.8em</li><li>   }</li><li><span style="color: blue"></style></span></li></ul></pre><br />
6019.    Burada "<span>p.ens</span>", (<span>ens</span> yerine herhangi bir ad kullanabilirsin) adlı bir paragraf türünü (<span>p</span> etiketi) tanımlar ve kodun geri kalanı bu paragrafların soluna beyaz boşluk ekler.</li>
6020.  <li>Şimdi dosyadaki <span>body</span> etiketine geri dön. Bir metin paragrafını başını boşluk eklemek  istediğinde, onu aşağıdaki etiketlerin içine koy:<br />
6021.  <span style="color: blue;"><p</span> <span style="color: red;">class=</span><span style="color: red;">"</span>ens<span style="color: red;">"</span><span style="color: blue;">></span><span style="color: blue;"></p</span><span style="color: blue;">></span></li>
6022.  <li>Girinti miktarını ayarlamak için, <span>CSS</span> kodundaki "<span>1.8em</span>" değerini değiştir ve uzunluğu yazı tipi boyutuna göre ölçtüğü için "<span>em</span>" değerini içinde numaranın değeri değiştirebilirsin.</li>
6023. </ul>
6024. <pre class="code"><ul class="ucode"><li><span style="color: blue;"><style></span></li><li>  p.ens{</li><li>    padding-left: 1.8em }</li><li><span style="color: blue;"></style></span></li><li><span style="color: blue;"><p</span> <span style="color: red;">class=</span><span style="color: red;">"</span>ens<span style="color: red;">"</span><span style="color: blue;">></span>html kolay bir dildir<span style="color: blue;"></p</span><span style="color: blue;">></span></li></ul></pre>
6025. <a class="elifnur" href="https://code.k-html.com/kodlar/cskbmpohbbb.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
6026. <hr />
6027. <h2 id="umb">Uzun metin biçimlendirme</h2>
6028.  
6029. <br />
6030. <h3>Önceden biçimlendirilmiş metin kullanmak.</h3>
6031.  <a href="https://src.k-html.com/html-yazı-arası-boşluk5.png"><img height="329" src="https://src.k-html.com/html-yazı-arası-boşluk5.png" width="485" alt="Önceden biçimlendirilmiş metin kullanmak"/></a><br /><br />
6032. <p><span><pre></pre></span> etiketlerinde herhangi bir boşluk veya giriş düğmelerine basıldığında tam olarak oldukları gibi görüntülenir ve bunu sembol örneklerini, şiirleri veya boşluk veya satır sonlarının önemli olduğu diğer metinleri görüntülemek için kullanabilirsin.</p>
6033.  <ul>
6034.    <li>Önceden biçimlendirilmiş metnin en büyük dezavantajı, normal <span>HTML</span> kodlarının aksine kullanıcının penceresine uyacak şekilde yeniden boyutlandırılmadığından genişliktir.</li>
6035. </ul>
6036.  <p><span><pre></pre></span> kullandığında, yazdıklarını tamamen kullanıcıya gösterilir, bir trilyon boşluk ekleyebilirsin ve tarayıcı herhangi bir boşluk silmez ve hepsini doğal olarak gösterir "tabi ki kullanıcının bilgisayarı bu kadar boşluk yükleyebilir ise:)".</p>
6037.  <pre class="code"><ul class="ucode"><li><span style="color: blue;"><pre</span><span style="color: blue;">></span></li><li>HTML                    KOLAY           BIR                DILDIR.</li><li></li><li></li><li>k-html</li><li></li><li>üzerinden    html      dili öğren</li><li><span style="color: blue;"></pre</span><span style="color: blue;">></span></li></ul></pre>
6038. <a class="elifnur" href="https://code.k-html.com/kodlar/obmk.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
6039.  <br />
6040. <br />
6041. <h3>Yeni satır eklemek</h3>
6042.  <a href="https://src.k-html.com/html-yazı-arası-boşluk6.png"><img height="346" src="https://src.k-html.com/html-yazı-arası-boşluk6.png" alt="Yeni satır eklemek" width="503" /></a><br /><br />
6043. <p><span><br></span> etiketi geçerli metin satırını sonlandırır ve birden çok <span><br></span> etiketi kullanarak birden çok boş satır ekleyebilirsin.<br />
6044. Bu yöntem deneyimsiz <span>HTML</span> öğrenenler tarafından kullanılabilir, ancak <span>CSS</span> kodlarını yazmayı öğrendikten sonra yapılması önerilmez.</p>
6045. <blockquote>Tabii ki kullanabilirsin ama <span>CSS</span> sana daha fazla kolay yöntem sağlıyabilir.</blockquote>
6046. <pre class="code"><ul class="ucode"><li><span style="color: blue;"><p</span><span style="color: blue;">></span>HTML zor mu? <span style="color: blue;"></p</span><span style="color: blue;">></span></li><li><span style="color: blue;"><br /></span></li><li><span style="color: blue;"><br /></span></li><li><span style="color: blue;"><p</span><span style="color: blue;">></span>HTML kolay bir dildir.<span style="color: blue;"></p</span><span style="color: blue;">></span></li><li><span style="color: blue;"><br /></span></li><li><span style="color: blue;"><br /></span></li><li><span style="color: blue;"><br /></span></li><li><span style="color: blue;"><p</span><span style="color: blue;">></span>k−html ile kolay dersler ile HTML dili öğren.<span style="color: blue;"></p</span><span style="color: blue;">></span></li></ul></pre>
6047. <a class="elifnur" href="https://code.k-html.com/kodlar/yse.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
6048. <br />
6049. <br />
6050. <h3>Boş bir paragraf eklemek</h3>
6051. <a href="https://src.k-html.com/html-yazı-arası-boşluk7.png"><img height="230" src="https://src.k-html.com/html-yazı-arası-boşluk7.png" alt="Boş bir paragraf eklemek" width="603" /></a><br /><br />
6052. <p>Metnin etrafındaki <span><p></p></span> etiketi bir metin paragrafını tanımlar ve çoğu tarayıcı paragrafları tek bir boş satırla ayırır, ancak doğru biçimlendirmeyi garanti edemezsin.</p>
6053. <p>Bu, kullanabileceğin en kötü yöntemdir ve siteni arama motorundaki sıralamasını çok düşürür, bu yüzden kullanmanı tavsiye etmiyorum.</p>
6054. <pre class="code"><ul class="ucode"><li><span style="color: blue;"><p</span><span style="color: blue;">></span>k−html HTML dili öğren.<span style="color: blue;"></p</span><span style="color: blue;">></span></li><li><span style="color: blue;"><p</span><span style="color: blue;">></span><span style="color: blue;"></p</span><span style="color: blue;">></span></li><li><span style="color: blue;"><p</span><span style="color: blue;">></span>k−html HTML dili öğren.<span style="color: blue;"></p</span><span style="color: blue;">></span></li></ul></pre>
6055. <a class="elifnur" href="https://code.k-html.com/kodlar/bbpe.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
6056.    <hr />
6057. <h2 id="ff">Faydalı fikirler</h2>
6058.    <ul>
6059.      <li>Son görünümünü kontrol ederken kodunda fazladan semboller bulursan, kusurlu karakterleri kontrol et, mesela <span><br></span> yerine <span><br</span> yazmak gibi.</li>
6060.      
6061.      <li><span>CSS</span> kodları, metne boşluk eklemek de dahil olmak üzere daha öngörülebilir sayfa biçimlendirme sonuçlarına yol açan daha güçlü bir yöntemdir.</li>
6062.      
6063.      <li>Başlangıç etiketinden sonra veya kapanış etiketinden hemen önce boşluk eklemekten kaçının.<br />
6064. Örneğin, <span style="color: blue;"><a</span><span style="color: blue;">></span>boşluk<span style="color: blue;"></a</span><span style="color: blue;">></span> olarak olur ancak, <span style="color: blue;"><a</span><span style="color: blue;">></span> boşluk <span style="color: blue;"></a</span><span style="color: blue;">></span> olarak yazmamalısın.</li>
6065. </ul>
6066.    <hr />
6067. <h2 id="u">Uyarılar</h2>
6068.    <ul>
6069.      <li>Sekme düğmesinin (<span>	</span>) <span>HTML</span> kodu, <span>HTML</span> belgesi geniş alanları desteklemediği için kodun hiçbir şey yapmayacağını düşündüğün için çalışmaz.</li>
6070.      
6071.      <li><span>HTML</span> kodlarını her zaman bir <a href="https://www.k-html.com/2021/05/html-editorler.html" target="_blank">kod düzenleyiciye</a> veya boş bir metin dosyasına yazın ve bunları bir not defteri programında yazma.<br />
6072.        Web tarayıcınızda boşluklar garip sembollere dönüşüyorsa, muhtemelen <a href="https://www.k-html.com/2021/05/html-editorler.html" target="_blank">not defterinde</a> programınızda saklanan verilerin web'de kullanılması amaçlanmamıştır.</li>
6073.      </ul>
6074. <div class="parent-links">  
6075.    <a class="btn btn-primary" href="https://www.k-html.com/2022/02/html-programlama-dili.html">
6076. <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>      önceki ders
6077.    </a>
6078.    <a class="btn btn-primary" href="https://www.k-html.com/2022/03/database-veritabanlar.html">
6079.      sonraki ders
6080.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
6081.    </a>
6082.  &lt;/div&gt;</content><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/2743529456214091909'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/2743529456214091909'/><link rel='alternate' type='text/html' href='https://www.k-html.com/2022/03/html-yaz-aras-bosluk.html' title='HTML Yazı Arası Boşluk'/><author><name>HTML öğren</name><uri>http://www.blogger.com/profile/05938401370972816509</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB9hVaVznt_p0FHumsq5E1ns0HFhwUsz5N8PDjeIc1oE4O70yakyUZqpJJiZyKolfcNdZlaOrykdeVaT9wGLi4Gp6Ko2vw9JCv-r2AQBF1JjXNu_09kuRKvXx-7fys1Hw/s113/html.jpg'/></author></entry><entry><id>tag:blogger.com,1999:blog-624213398567285603.post-1564229328952128317</id><published>2022-02-20T00:11:00.014+03:00</published><updated>2023-05-06T20:09:39.662+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="html iframe"/><category scheme="http://www.blogger.com/atom/ns#" term="iframe nedir"/><category scheme="http://www.blogger.com/atom/ns#" term="iframes"/><category scheme="http://www.blogger.com/atom/ns#" term="çerçeveler"/><title type='text'>HTML Iframe Nedir</title><content type='html'>&lt;blockquote&gt;Bu kısa bir derstir ve en iyi miktarda bilgiyi ve mümkün olan en iyi resimde almanı sağlamak için &lt;a href=&quot;https://www.k-html.com/2021/12/html-iframe.html&quot; target=&quot;_blank&quot;&gt;iframe dersini&lt;/a&gt; okumanız çok tavsiye ederim.
6083. </blockquote><p>İster programcı, ister normal bir insan, ister tasarımcı ol, iframeler hakkında bir şeyler duymuş olmalısın.<br />
6084. Evet iframeler, "çerçeve, çerçeveler, iframe'ler, iframe, iframs, iframeler" gibi farklı biçimlerde sıklıkla duyduğunuz bir kelimedir.<br />
6085. bu derste iframe hakkında farklı bilgi alacağız.</p>
6086. <details open="">
6087.  <summary style="text-align: left;">Sayfa içeriği</summary>
6088.  <ul class="postcontent">
6089.      <li>
6090.  <b>›</b><a href="https://www.k-html.com/2022/02/html-iframe-nedir.html#hik">HTML'deki iframe kavramı:</a>
6091.      </li>
6092.    <li>
6093.  <b>›</b> <a href="https://www.k-html.com/2022/02/html-iframe-nedir.html#hsie">HTML sayfasına iframe ekleme:</a>
6094.      </li>
6095.    <li>
6096.  <b>›</b> <a href="https://www.k-html.com/2022/02/html-iframe-nedir.html#hibb">HTML'de iframe boyutunu belirleme:</a>
6097.      </li>
6098.    <li>
6099.  <b>›</b> <a href="https://www.k-html.com/2022/02/html-iframe-nedir.html#hibbe">HTML'de iframe'e bir başlık ekleme:</a>
6100.      </li>
6101.    <li>
6102.  <b>›</b> <a href="https://www.k-html.com/2022/02/html-iframe-nedir.html#hbibba">HTML'de bir iframede bir bağlantı açma:</a>
6103.      </li>
6104.    <li>
6105.  <b>›</b> <a href="https://www.k-html.com/2022/02/html-iframe-nedir.html#sbyvg">Sayfada bir YouTube videosu görüntüleyin:</a>
6106.      </li>
6107.     </ul>
6108.  </details>
6109. <hr class="hrkk"/>
6110. <h2 id="hik">HTML'deki iframe kavramı</h2>
6111. <p><a href="https://www.k-html.com/2022/02/html-programlama-dili.html" target="_blank">HTML programlama dilinde</a> iframe kavramı, bir sayfada başka bir sayfadaki içeriğin görüntülendiği bir yer tahsis edilmesini ifade eder, diğer bir deyişle iframe, kullanıcının bir sayfanın (HTML) içeriğini başka bir (HTML) sayfa içinde görüntülemesine olanak tanır.</p>
6112. <hr />
6113. <h2 id="hsie">HTML sayfasına iframe ekleme:</h2>
6114. <p>Genel olarak, (<iframe>) etiketi (<iframe src="url"></iframe>) sayfada bir çerçeve görüntülemek için kullanılır. Ve “url” kelimesinin yerine içinde görüntülemek istediğimiz sayfanın yolunu koyuyoruz.</p>
6115. <hr />
6116. <h2 id="hibb">HTML'de iframe boyutunu belirleme</h2>
6117. <p>Sayfada görüntülenen iframe, boyutunu kendini belirtmediğin sürece içinde çok küçük bir alanda görüntülenir. Çerçeve boyutu genellikle CSS kodu ile belirlenir ve <a href="https://www.k-html.com/2021/05/html-dile-genel-baks.html" target="_blank">HTML dilinde</a> bunu belirlemenin iki yolu vardır. ve onlar:</p>
6118. <ul>
6119. <li>width: Görüntülenecek çerçevenin piksel cinsinden genişliğini belirtmek için kullanırız.</li>
6120. <li>height: Görüntülenecek çerçevenin uzunluğunu piksel cinsinden belirtmek için kullanırız.</li>
6121. </ul>
6122. <hr />
6123. <h2 id="hibbe">HTML'de iframe'e bir başlık ekleme</h2>
6124. <p>iframe'e koyduğumuz başlığın sayfada görüntülenmesi amaçlanmamıştır yani kullanıcının önündeki sayfada görüntülenmemektedir.Çerçeveye koyduğumuz başlığın önemi, kullanıcının kördür ve sayfanın içeriğini okumak için ekran okuyucuya güvenir.</p>
6125. <p>iframe için bir başlık eklemek için, başlık özelliğini etikete (<iframe>) ekleyin ve başlığı buna şöyle bir değer olarak iletin (<“iframe title=”text>).</p>
6126. <hr />
6127. <h2 id="hbibba">HTML'de bir iframede bir bağlantı açma</h2>
6128. <p>Sayfaya yerleştirilen bağlantıyı aynı sayfaya yerleştirilmiş bir iframe içinde açmak istiyorsan, iframe'e (name) özelliğini ekleyip ona bir ad verebilir ve ardından kendisi ayarlanan adı iframe'w iletebilirsin. bağlantıdaki özellik (target).
6129. <hr />
6130. <h2 id="sbyvg">Sayfada bir YouTube videosu görüntüleyin</h2>
6131. <p>YouTube'da bulduğun herhangi bir videoyu kendini kod yazmanıza gerek kalmadan sayfa içinde kolayca görüntüleyebilirsin çünkü YouTube seni Göm veya embed diye bir seçenek sunar. Videonun altında bulacağın Paylaş düğmesinde karşınıza çıkacaktır. ve ardından kopyalayıp sayfaya koyabileceğin kodu verene kadar üzerine tıklayın.</p>
6132. <blockquote>Bu kısa bir derstir ve en iyi miktarda bilgiyi ve mümkün olan en iyi resimde almanızı sağlamak için <a href="https://www.k-html.com/2021/12/html-iframe.html" target="_blank">iframe dersini</a> okumanız çok tavsiye ederim.
6133. </blockquote>
6134.  
6135. <div class="parent-links">  
6136.    <a class="btn btn-primary" href="https://www.k-html.com/2022/02/html-programlama-dili.html">
6137. <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>      HTML programlama dili
6138.    </a>
6139.    <a class="btn btn-primary" href="https://www.k-html.com/2022/06/html-ogrenmek-ne-kadar-zor.html">
6140.      HTML Öğrenmek Ne Kadar Zor?
6141.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
6142.    </a>
6143.  &lt;/div&gt;</content><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/1564229328952128317'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/1564229328952128317'/><link rel='alternate' type='text/html' href='https://www.k-html.com/2022/02/html-iframe-nedir.html' title='HTML Iframe Nedir'/><author><name>HTML öğren</name><uri>http://www.blogger.com/profile/05938401370972816509</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB9hVaVznt_p0FHumsq5E1ns0HFhwUsz5N8PDjeIc1oE4O70yakyUZqpJJiZyKolfcNdZlaOrykdeVaT9wGLi4Gp6Ko2vw9JCv-r2AQBF1JjXNu_09kuRKvXx-7fys1Hw/s113/html.jpg'/></author></entry><entry><id>tag:blogger.com,1999:blog-624213398567285603.post-6566338654428016350</id><published>2022-02-14T08:09:00.021+03:00</published><updated>2023-05-06T20:09:25.155+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="html"/><category scheme="http://www.blogger.com/atom/ns#" term="html programlama dili"/><title type='text'>HTML Programlama Dili</title><content type='html'>
6144. <details open="">
6145.  <summary style="text-align: left;">Sayfa içeriği</summary>
6146.  <ul class="postcontent">
6147.      <li>
6148.  <b>›</b> <a href="https://www.k-html.com/2022/02/html-programlama-dili.html#Hn">HTML nedir?</a>
6149.      </li>
6150.    <li>
6151.  <b>›</b> <a href="https://www.k-html.com/2022/02/html-programlama-dili.html#Hdnk">HTML dili niçin kullanılır?</a>
6152.      </li>
6153.    <li>
6154.  <b>›</b> <a href="https://www.k-html.com/2022/02/html-programlama-dili.html#Hnc">HTML nasıl çalışıyor</a>
6155.      </li>
6156.    <li>
6157.  <b>›</b> <a href="https://www.k-html.com/2022/02/html-programlama-dili.html#Hen">HTML'deki etiketler nelerdir?</a>
6158.      </li>
6159.    <li>
6160.  <b>›</b> <a href="https://www.k-html.com/2022/02/html-programlama-dili.html#Hocusm">HTML öğrenmek çok uzun sürer mi?</a>
6161.      </li>
6162.    <li>
6163.  <b>›</b> <a href="https://www.k-html.com/2022/02/html-programlama-dili.html#epHen">En popüler HTML editörleri nelerdir?</a>
6164.      </li>
6165.    <li>
6166.  <b>›</b> <a href="https://www.k-html.com/2022/02/html-programlama-dili.html#HTvE">HTML'nin Tarihi ve Evrimi</a>
6167.      </li>
6168.    <li>
6169.  <b>›</b> <a href="https://www.k-html.com/2022/02/html-programlama-dili.html#Hs">HTML sürümleri</a>
6170.      </li>
6171.    <li>
6172.  <b>›</b> <a href="https://www.k-html.com/2022/02/html-programlama-dili.html#Scozm">Sürekli çevrimiçi olmak zorunda mıyım?</a>
6173.      </li>
6174.    <li>
6175.  <b>›</b> <a href="https://www.k-html.com/2022/02/html-programlama-dili.html#Hybsvrm">HTML'nin yapamayacağı bir şey var mı?</a>
6176.      </li>
6177.    <li>
6178.  <b>›</b> <a href="https://www.k-html.com/2022/02/html-programlama-dili.html#Have">HTML'nin artıları ve eksileri</a>
6179.      </li>
6180.    <li>
6181.  <b>›</b> <a href="https://www.k-html.com/2022/02/html-programlama-dili.html#HHSSS">HTML Hakkında Sıkça Sorulan Sorular</a>
6182.      </li>
6183.     </ul>
6184.  </details>
6185. <p><span>HTML</span>, <span>World Wide Web</span> Consortium (<span>W3C</span>) tarafından önerilen resmi dildir ve genellikle masaüstü ve mobil web tarayıcıları da dahil olmak üzere tüm büyük web tarayıcıları tarafından uygulanır. <span>HTML5</span>, spesifikasyonun en son sürümüdür.</p>
6186. <hr class="hrkk" />
6187. <h2 id="Hn">HTML nedir?</h2>
6188. <p><span>HTML</span> kelime'si Hypertext Markup Language kısatlaması'dır ve Köprü Metni İşaretleme Dili anlamına gelir.<br />
6189. <span>HTML</span>, web tasarımcılarının web siteleri oluşturmak için kullandıkları etiketlerden ve komutlardan oluşur.</p>
6190.  
6191. <p>
6192. Köprü metni, okuyucuların başka bir sayfaya veya sayfanın bir bölümüne gitmek için tıklayabileceği bağlantılara sahip metindir.<br />
6193.  Bu arada, biçimlendirme dili, üstbilgiler ve altbilgiler gibi sayfa bölümlerini ve <a href="https://www.k-html.com/2021/05/html-tablolar.html" target="_blank">tablolar</a> ve <a href="https://www.k-html.com/2021/07/html-resimler.html" target="_blank">resimler</a> dahil olmak üzere diğer öğeleri tanımlamak için etiketleri veya özel etiketlere sahip düz metni kullanır.
6194. </p>
6195.  
6196. <p>
6197. <span>HTML</span>, web sayfaları oluşturmak için kullanılan üç ana araçtan biridir.<br />
6198. <span>HTML</span>, bir web sitesinde metnin, resimlerin vb. görüneceği yapıyı veya yolu sağlar.<br />
6199. <span>CSS</span> (Basamaklı Stil Sayfaları), bu öğelerin renkler, biçimlendirme ve düzen gibi görsel özelliklerini tanımlar.
6200.  <br />
6201.  Bu arada <span>Javascript</span>, bu öğelerin kullanıcı eylemine bağlı olarak belirli şekillerde davranmasını sağlar. <br />Örneğin, kullanıcılar fareyi üzerine getirdiğinde veya bir sayfadaki bir düğmeyi tıkladığında metnin yazı tipi boyutu artabilir.
6202.  </p>
6203.  
6204. <p>
6205. <span>HTML</span> yazmak için <span>Notepad, Brackets,VScode </span>veya <span>Atom</span> gibi bir metin düzenleyiciye ihtiyacın olacak.<br />
6206. HTML editörleri, kodlamanı temiz ve verimli olmasını sağlar. Etiketleri (otomatik tamamlama) ve diğer yaygın öğeleri otomatik olarak ekleyerek veya hataları düzelterek hataların azaltılmasına yardımcı olur.
6207. </p>
6208. <blockquote>
6209. <a href="https://www.k-html.com/2021/05/html-editorler.html" target="_blank">HTML editörler</a> hakkında daha çok bilgi almak istiyorsan <a href="https://www.k-html.com/2021/05/html-editorler.html" target="_blank">HTML editörler</a> dersi okuyabilirsin.
6210. </blockquote>
6211. <hr />
6212. <h2 id="Hdnk">HTML dili niçin kullanılır?</h2>
6213. <p>
6214. <span>HTML</span>, web siteleri ve web tabanlı belgeler için varsayılan dildir.<br /> Tarayıcı, İnternet üzerinden görüntülenecek belge veya dosyaların yapısını ve stilini anlamada yardımcı olur.<br /> Web sayfalarını ses, video, tablo ve diğer şeyler eklemek için kullanılır.<br /> Ayrıca, hiper metin aracılığıyla web sayfaları içinde veya web siteleri arasında gezinmeyi kolaylaştırır.</p>
6215. <p>
6216. Ayrıca, web sitesi oluşturucuları, ürün sipariş etmek, rezervasyon yapmak veya bilgi aramak için formlar tasarlamak için <span>HTML</span> kullanabilir. <br />
6217.  Bu nedenle <span>HTML</span>, markanı oluşturmak ve bir e-ticaret sitesi veya çevrimiçi abonelik tabanlı bir işletme yürütmek için temel yapı taşıdır.
6218. </p>
6219. <hr />
6220.  <h2 id="Hnc"><span>HTML</span> nasıl çalışıyor</h2>
6221.  <p>
6222.  HTML, bilgisayara ve web sunucusuna HTML'de olduğunu ve bu şekilde okunması gerektiğini gösteren belirli sözdizimi, dosya ve etiket kurallarına sahip bir metin dosyasıdır.
6223.  <br />
6224.  Bu HTML kurallarını herhangi bir metin düzenleyicideki bir metin dosyasına uygulayarak, bir kullanıcı temel bir web sayfası yazıp tasarlayabilir ve ardından bunu İnternet'e yükleyebilir.
6225. </p>
6226.  
6227. <p>
6228. En basit <span>HTML</span> kuralı, metin dosyasının başına belge türü sözdizimini eklemektir.<br /> Bu, belgede her zaman önce gelir, çünkü bilgisayara bunun bir <span>HTML</span> dosyası olduğundan emin olduğunu söyleyen kısımdır.<br /> Belge başlığı genellikle şöyle görünür: <span>index.html</span>, içinde herhangi bir içerik veya parçalanma olmadan her zaman bu şekilde yazılmalıdır. Bilgisayar, bu reklamdan önce gelen hiçbir içeriği <span>HTML</span> olarak tanımayacaktır.
6229. </p>
6230.  
6231. <p>
6232.  Doktipler yalnızca <span>HTML</span> ile kullanılmaz, <span>SGML</span> (Standart Genel İşaretleme Dili) kullanan herhangi bir belge oluşturmak için uygulanabilirler.<br /> <span>SGML</span>, kullanılacak belirli bir biçimlendirme dilini tanımlamak için bir standarttır.<br /> <span>HTML</span>, <span>SGML</span> ve <span style="color: #00008B;">DOCType</span> biçimlerinin geçerli olduğu çeşitli biçimlendirme dillerinden biridir.
6233. </p>
6234.  
6235. <p>
6236. Bir <span>HTML</span> dosyası oluşturmanın diğer bir ön koşulu, onu <span style="color: #00008B;">.html</span> dosya uzantısıyla kaydetmektir.<br /> <span>DOCTYPE</span> bildirimi, <span>HTML</span> sinyallerini bilgisayara dosya içinden gönderirken, dosya uzantısı <span>HTML</span>'yi bilgisayara dosyanın dışından gönderir. <br />Her ikisine de sahip olarak bilgisayar, dosyayı okuyup okumadığını bir <span>HTML</span> dosyası olduğunu söyleyebilir.<br /> Bu, dosyaları <span>web'e</span> yüklerken özellikle önemlidir, çünkü <span>web</span> sunucusunun, dahili içeriği okumak için bir istemci bilgisayara göndermeden önce dosyalarla ne yapacağını bilmesi gerekir.
6237. </p>
6238. <hr />
6239. <h2 id="Hen">HTML'deki etiketler nelerdir?</h2>
6240. <p>
6241. Etiketler, içlerindeki metnin görüntülenme şeklini ifade eden sembollerdir ve etiket, herhangi bir <span>HTML</span> dosyasının temel bileşenidir. Bunları <span><etiket adı></span> şeklinde yazılan kelimeler arasında bilebilirsin.
6242. </p>
6243.  
6244. <p>
6245. Görüntüler, tablolar… gibi her türlü harika şeyi görüntülemeni izin veren etiketler vardır, yalnızca tarayıcını sayfada ne görüntüleneceğini söyleyerek, görüntülemek istediğin şey için uygun etiketi kullanması.
6246. </p>
6247. <p>
6248. Yani farklı etiketleri farklı şekilde kullanmak farklı işler yaratacaktır.<br /> Sayfanı bir tarayıcı aracılığıyla görüntülerken etiketlerin kendileri değil, etkileri ve işlevleri görünür.
6249. </p>
6250. <p>
6251. Genellikle her HTML etiketi, bir açılış etiketi ve bir kapanış etiketinden oluşur. daha çok bilgi almak için <a href="https://www.k-html.com/2021/05/html-temelleri.html" target="_blank">HTML temelleri</a> dersi okumayı tercih ederim.
6252. </p>
6253.  
6254. <p>
6255. Her etiketin bir rolü vardır ve aşağıdaki gibi bazı metinlere birden fazla biçimlendirme uygulanmasına izin verilmez:
6256. </p>
6257. <p>
6258. <span><b></span>Bu kelimeler geniş ve koyu olacak<span></b></span> ve bu kelimeler olmayacak.
6259. </p>
6260. <p>
6261. Bu metin bir tarayıcıda görüntülendiğinde, yukarıdaki satır aşağıdaki gibi görüntülenecektir:
6262. </p>
6263. <p>
6264. <b>Bu kelimeler geniş ve koyu olacak</b> ve bu kelimeler olmayacak.
6265. </p>
6266.  
6267. <p>
6268. Yukarıdaki örnekte, <span><b></span> etiketi metnin bir bölümünün etrafına yerleştirildi ve bunun etkisi, içerilen metnin normal bir web tarayıcısında görüntülendiğinde fark edeceğiniz gibi kalın ve koyu olması olacaktır.
6269. </p>
6270. <p>
6271. En sık kullanılan <span>HTML</span> etiketlerinin bir listesini görmek istersen, <span>HTML</span> etiketi referansı kılavuzuma bakabilirsin.
6272. </p>
6273. <hr />
6274. <h2 id="Hocusm"><span>HTML</span> öğrenmek çok uzun sürer mi?</h2>
6275. <p>
6276. Peki, ondan ne istediğini ve ne sıklıkla öğrendiğini bağlı, <span>HTML</span> öğrenmek sadece birkaç gün sürecek.<br /> Temel bilgileri bir saat içinde alabilirsin. Etiketleri öğrendikten sonra <span>HTML</span> sayfaları oluşturabilirsin.
6277. </p>
6278.  
6279. <p>
6280. Ancak <span>HTML</span> kullanmak ve iyi web siteleri tasarlamak farklı bir hikaye, etiketleri ve rollerini bilmek ve kaydetmek yeterli <span>değil</span>.<br /> İyi bir web sitesi tasarlamak becerinin yarısı yeteneğin yarısıdır ve bazı insanların düşündüğü gibi her şeyi bilmek değildir.
6281. </p>
6282.  
6283. <p>
6284. Daha büyük ve daha iyi bir deneyim elde etmek için püf noktaları kullanmayı ve çok fazla kod yazmayı öğrenin ve ulaşmaya çalıştığın genel tasarım ve hedef kitleyi oluşturmak web siteni başarı şansını artıracaktır.
6285. </p>
6286.  
6287. <p>
6288. Neyse ki, daha iyi <span>web</span> siteleri üretebilmeni için çalışmaya istekli olduğun sürece bu şeyler araştırılabilir ve anlaşılabilirsin.
6289. </p>
6290.  
6291. <p>
6292. Web siteni oluşturmanın bir sonucu olarak öğreneceğin beceri seti etkileyicidir.<br />
6293. Grafik tasarım, tipografi ve bilgisayar programlamanın çeşitli yönlerini öğreneceksin.
6294. </p>
6295.  
6296. <p>
6297. Genel olarak bilgisayarlarla olan yeterliliğin artacak. Ayrıca promosyonlar hakkında bilgi edineceksin ve belirli bir kitle için yazmaya uyum sağladıkça yazma becerilerin de gelişecektir.
6298. </p>
6299. <hr />
6300. <h2 id="EpHen">En popüler <span>HTML</span> editörleri nelerdir?</h2>
6301. <p>
6302. <span>HTML</span> metin düzenleyicileri, web sayfaları oluşturmak ve değiştirmek için kullanılır.<br /> <span>HTML</span> kodu, Not Defteri dahil herhangi bir metin düzenleyicide yazılabilir. <span>HTML</span>'yi herhangi bir metin düzenleyicide yazmanız ve dosyayı “<span>.html</span>” uzantılı olarak kaydetmeniz yeterlidir.<br /> Popüler <span>HTML</span> metin düzenleyicilerinden bazıları aşağıda listelenmiştir:
6303. </p>
6304. <ul>
6305. <li>VSCode en iyi seçenek</li><li>notepad++</li><li>sublime text</li><li>Atom</li><li>komodo edit</li><li>bluefish</li><li>Textmate</li><li>Ultra edit</li><li>Vim</li><li>BBedit</li><li>scintilla</li><li>Textpad</li><li>emacs</li><li>brackets</li><li>ve online editörlerden farklı editör var en iyisi <a href="https://code.k-html.com">kod editör</a></li>
6306. </ul>
6307. <hr />
6308. <h2 id="HTvE">HTML'nin Tarihi ve Evrimi</h2>
6309. <p>
6310. <span>World Wide Web</span>'in ilk günlerinde, <span>HTML</span> sözdizimini kullanarak metin belgelerini kodlamak, akademik belgeleri ve teknik notları paylaşmayı kolaylaştırmak için fazlasıyla yeterliydi.<br /> Ancak, internetin akademi duvarlarının ötesine ve genel nüfusun evlerine yayılmasıyla birlikte, format ve etkileşim açısından web sayfalarına olan talep artmıştır.
6311. </p>
6312.  
6313. <p>
6314. HTML 4.01, İnternet'in henüz bir hane adı olmadığı ve HTML5'in 2014'e kadar standartlaştırılmadığı bir zamanda 1999'da piyasaya sürüldü. Bu süre zarfında, HTML işaretlemesi, yalnızca web sayfası içeriğinin belge yapısını tanımlama işlevinden saptı. aynı zamanda nasıl olması gerektiğini açıklama rolü İçerik bir web sayfası tarafından görüntülendiğinde görünür.
6315. </p>
6316.  
6317. <p>
6318. Sonuç olarak, HTML4 tabanlı web sayfaları genellikle bir etiket içinde, metni görüntülerken hangi yazı tipinin kullanılacağı, arka plan için hangi rengin kullanılacağı ve içeriğin nasıl hizalanacağı hakkında bilgiler içerir. Bir web sayfasında işlendiğinde HTML öğesinin nasıl biçimlendirildiğine ilişkin HTML etiketi içindeki açıklama, bir anti-HTML'dir. HTML, genellikle içeriğin nasıl tasarlandığını ve tarayıcıda görüntülendiğini değil, nasıl düzenlendiğini açıklamalıdır. Diğer biçimlendirme dilleri bu görev için daha uygundur.
6319. </p>
6320. <hr />
6321. <h2 id="Hs">HTML sürümleri</h2>
6322. <p>
6323. Aşağıda, HTML sürümlerinin ve oluşturulma yıllarının bir listesi bulunmaktadır. Zaman içinde her sürümün birkaç tekrarı yayınlandı. Bu liste, önemli kopyalara odaklanmayı amaçlamaktadır.
6324. </p>
6325.  
6326. <ul>
6327. <li>HTML 1.0 - 1992'de yayınlandı - çok sınırlı bir kapasiteye ve yaklaşık 20 öğeye sahiptir.</li>
6328.  <li>1995 yılında piyasaya sürülen HTML 2.0, matematik işlevleriyle ilgili öğeleri birleştirmeye başladı.</li>
6329.  <li>HTML 3.2 - 1996'da yayınlandı - Math işlevi girişimini tamamen bıraktı ve farklı tescilli uzantılar arasında örtüşme sağladı.</li>
6330.  <li>1997'de piyasaya sürülen HTML 4.0, izin verilen kullanımdan kaldırılan öğelerin sayısı bakımından farklılık gösteren üç değişken sundu.</li>
6331.  <li>HTML 4.01 - 1999'da yayınlandı - 4.0 ile çok az farklı.</li>
6332.  <li>2014'te piyasaya sürülen HTML 5, onu geliştiren kuruluş olan W3C'nin XHTML adlı başka bir paralel dile odaklandığından, güncellemelere uzun bir aradan sonra geldi.</li>
6333.  <li>HTML 5.1 - 2016'da yayınlandı - yeni etiketlerle gömülü farklı medya türlerini daha kolay barındırmayı hedefliyor.</li>
6334.  <li>2017'de yayınlanan HTML 5.2, insanlar ve bilgisayarlar tarafından eşit olarak anlaşılmayı hedefliyor.</li>
6335.  <li>HTML 5.3 - Henüz yayınlanmadı - W3C, WHATWG ile yeni bir sürüm üzerinde işbirliği yapıyor. İşbirliği 2019 yılında başladı.</li>
6336. </ul>
6337. <hr />
6338. <h2 id="Scozm">
6339. Sürekli çevrimiçi olmak zorunda mıyım?
6340. </h2>
6341.  
6342. <p>
6343. hiç. Web sitenin tamamını çevrimdışı olarak tasarlayabilir veya değiştirebilir, hepsini bilgisayarında saklayabilir ve ardından, halka açılmaya hazır olduğunda tüm dosyaları <span>web</span>'e aktarabilirsin.
6344. </p>
6345.  
6346. <p>
6347. Tasarımı yeniden değiştirmek istersen, bunu yapabilirsin, yeni bileşenleri sitenin çevrimiçi sürümüne eklemeni yeterlidir. Gerçekten çok basittir.
6348. </p>
6349. <hr />
6350. <h2 id="Hybsvrm">HTML'nin yapamayacağı bir şey var mı?</h2>
6351.  
6352. <p>
6353. Tabii ki, ancak web siteleri daha popüler ve ihtiyaç duyulduğundan, yeni şeylerin olmasına izin vermek için birçok başka destekleyici dil oluşturuldu, ayrıca HTML, iyileştirmelere ve yeni özelliklerin eklenmesine yer açmak için birkaç yılda bir değiştirilir.
6354. </p>
6355.  
6356. <p>
6357. Stil sayfaları (<span>css</span> veya basamaklı stil sayfası), sayfalarını nasıl görüntüleneceğini kontrol etmek, onları güzel ve tutarlı kılmak ve sayfaları daha erişilebilir kılmak için kullanılır.
6358. </p>
6359.  
6360. <p>
6361. Temel efektler ve etkileşimler, temel <span>HTML</span>'ye çok fazla güç katan <span>JavaScript</span> tarafından sağlanır.
6362. </p>
6363.  
6364. <p>
6365. Bu destek dillerinin çoğu temel olarak kabul edilir ancak <span>html</span> öğrendikten sonra tabiki internette her şey bunun üzerine kurulu olduğu için ancak tüm bu teknolojileri bir arada kullandığında siteni mükemmele yakın olacaktır.
6366. </p>
6367. <hr />
6368. <h2 id="Have">HTML'nin artıları ve eksileri</h2>
6369.  
6370. <p>HTML kullanmanın avantajları şunları içerir:</p>
6371. <ul>
6372.  <li>Mevcut büyük miktarda kaynakla yaygın olarak benimsenmiştir.</li>
6373.  <li>Her tarayıcıda yerel olarak çalışır.</li>
6374.  <li>k-html.com ile Öğrenmesi çok kolay.</li>
6375.  <li>Temiz ve tutarlı kaynak koduna sahiptir.</li>
6376.  <li>Açık kaynak ve kullanımı ücretsiz.</li>
6377.  <li><span>PHP</span> gibi diğer arka uç programlama dilleri ile entegre olabilir.</li>
6378. </ul>
6379.  
6380. <p>
6381. Göz önünde bulundurulması gereken olumsuzluklardan bazıları şunlardır:
6382. </p>
6383.  
6384. <ul>
6385. <li>Çok dinamik bir işlevi yoktur ve çoğunlukla statik web sayfaları için kullanılır.</li>
6386.  <li>Tüm bileşenler, benzer öğeler kullanıyor olsalar bile ayrı ayrı oluşturulmalıdır.</li>
6387.  <li>Tarayıcı davranışı beklenmedik olabilir. Örneğin, eski tarayıcılar daha yeni özelliklerle uyumlu olmayabilir.</li>
6388. </ul>
6389. <hr />
6390. <h2 id="HHSSS">HTML Hakkında Sıkça Sorulan Sorular</h2>
6391.  
6392. <p>HTML nasıl tanımlanabilir?
6393. <br />
6394. HTML (Köprü Metni İşaretleme Dili), bir HTML dosyasındaki içeriğin nasıl yapılandırıldığını açıklamaya yönelik metin tabanlı bir yaklaşım olarak tanımlanabilir. Bu işaretleme, web tarayıcısına bir web sayfasında metin, resim ve diğer multimedya biçimlerinin nasıl görüntüleneceğini söyler.
6395. </p>
6396.  
6397. <p>HTML öğrenmek ne kadar sürer?
6398. <br />
6399. Çoğu programcı, yeni başlayanların HTML öğrenmeye başlaması için günde 2-4 saat önerir. Çoğu yeni programcı, HTML'nin temellerini bir veya iki hafta içinde öğrenebilir. Bununla birlikte, dilde ustalaşmak ve tam potansiyelini anlamak için günlük pratik gereklidir.
6400.  </p>
6401.  
6402. <p>Aynı gün HTML öğrenebilir miyim?
6403. <br />
6404. Evet, doğru - HTML'yi sadece bir günde öğrenebilirsin. … HTML, Hiper Metin İşaretleme Dili anlamına gelir ve web sayfaları için ana işaretleme dilidir. HTML'yi öğrenmesi kolaydır. İlk günlerde belgeleri, proje dosyalarını vb. düzenlemek için HTML kullanılabilir.
6405.  </p>
6406.  
6407. <p>HTML, Python'dan daha mı zor?
6408. <br />
6409. C, JAVA, vb. gibi diğer programlama dilleri gibidir. PYTHON genellikle arka uç yazılım geliştirme için kullanılır. Python'a günde 5-6 saat verirseniz, bir ayda çok şey öğrenirsin ve ardından farklı uygulamalar geliştirebilecek bilgi birikimine sahip olursun. HTML, Python'dan çok daha kolaydır.
6410.  </p>
6411.  
6412. <p>Önce HTML mi yoksa Python mu öğrenmeliyim?
6413. <br />
6414. Ne öğrenmeye başlamak istediğini seçmekte özgürsün, ancak Python'u öğrenmek için sıfırdan zorlamadığını bilerek, çok kolay olduğu için HTML ile başlamanı öneririm ve şahsen Python'u pek sevmiyorum ve tercih etmiyorum. Java veya C gibi diğer programlama dilleri üzerinde daha fazla tercih ediyorum, doğru daha zor, ama daha iyi ve faydalı.
6415.  </p>
6416.  
6417. <p>Bu ücretli kursmu?
6418. <br />
6419. hayır, bu tam ücretsiz bir kursdur.
6420.  </p>
6421.  
6422.  
6423.  
6424. <blockquote><span>HTML</span> dili öğrenmek istiyorsan bu kurs senin için tasarlandı, <br />
6425. <span>html5</span> öğrenmek için <a href="https://www.k-html.com/2022/03/html-yaz-aras-bosluk.html">HTML dile genel bakış</a> dersi okuyabilirsin.
6426.  </blockquote>
6427. <div class="parent-links">  
6428.    <a class="btn btn-primary" href="https://www.k-html.com/2022/03/html-yaz-aras-bosluk.html">
6429. <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>      html yazı arası boşluk
6430.    </a>
6431.    <a class="btn btn-primary" href="https://www.k-html.com/2022/02/html-iframe-nedir.html">
6432.      iframe nedir?
6433.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">
6434.  <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>
6435.  <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/>
6436. </svg>
6437.    </a>
6438.  
6439.  &lt;/div&gt;</content><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/6566338654428016350'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/6566338654428016350'/><link rel='alternate' type='text/html' href='https://www.k-html.com/2022/02/html-programlama-dili.html' title='HTML Programlama Dili'/><author><name>HTML öğren</name><uri>http://www.blogger.com/profile/05938401370972816509</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB9hVaVznt_p0FHumsq5E1ns0HFhwUsz5N8PDjeIc1oE4O70yakyUZqpJJiZyKolfcNdZlaOrykdeVaT9wGLi4Gp6Ko2vw9JCv-r2AQBF1JjXNu_09kuRKvXx-7fys1Hw/s113/html.jpg'/></author></entry><entry><id>tag:blogger.com,1999:blog-624213398567285603.post-8371531787830784390</id><published>2021-12-17T15:56:00.129+03:00</published><updated>2023-05-07T04:06:05.010+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="html iframe"/><category scheme="http://www.blogger.com/atom/ns#" term="html çerçeve"/><category scheme="http://www.blogger.com/atom/ns#" term="iframes"/><category scheme="http://www.blogger.com/atom/ns#" term="çerçeveler"/><title type='text'>HTML Iframe</title><content type='html'>&lt;div class=&quot;parent-links&quot;&gt;  
6440.    <a class="btn btn-primary" href="https://www.k-html.com/2021/12/html-sesleri.html">
6441.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
6442.      önceki ders
6443.    </a>
6444.    <a class="btn btn-primary" href="https://www.k-html.com/2022/04/html-formlar.html">
6445.      sonraki ders
6446.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
6447.    </a>
6448.  </div>
6449. <details open="">
6450.  <summary style="text-align: left;">Sayfa içeriği</summary>
6451.  <ul class="postcontent">
6452.      <li>
6453.  <b>›</b> <a href="https://www.k-html.com/2021/12/html-iframe.html#cn">Çerçeveler nedir</a>
6454.      </li>
6455.      <li>
6456.  <b>›</b> <a href="https://www.k-html.com/2021/12/html-iframe.html#sbie">Sayfaya bir iframe eklemek</a>
6457.      </li>
6458.       <li>
6459.  <b>›</b> <a href="https://www.k-html.com/2021/12/html-iframe.html#ibb">Iframe boyutunu belirtmek</a>
6460.      </li>
6461.      <li>
6462.  <b>›</b> <a href="https://www.k-html.com/2021/12/html-iframe.html#iko">Iframe kodun özellikleri</a>
6463.      </li>
6464.       <li>
6465.  <b>›</b> <a href="https://www.k-html.com/2021/12/html-iframe.html#ibe">Iframe'e başlık eklemek</a>
6466.      </li>
6467.       <li>
6468.  <b>›</b> <a href="https://www.k-html.com/2021/12/html-iframe.html#iibba">Iframe içinde bir bağlantı açmak</a>
6469.      </li>
6470.       <li>
6471.  <b>›</b> <a href="https://www.k-html.com/2021/12/html-iframe.html#sbyvg">Sayfada bir YouTube videosu görüntülemek</a>
6472.      </li>
6473.    </ul>
6474. </details>
6475. <hr class="hrkk" />
6476. <h2 id="cn">Çerçeveler nedir</h2>
6477. <p><span>Çerçeve (iframe)</span>, başka bir sayfadaki içeriğin görüntülendiği sayfada bir yer tahsis etmek anlamına gelir.</p>
6478. <p>Başka bir anlamda, bir çerçeve, bir <span>HTML</span> sayfasının içeriğini başka bir <span>HTML</span> sayfasının içinde görüntülemeni yardımcı olur.</p>
6479. <p>Kısacası çerçeve kavramı, bir sayfanın içine bir sayfa eklemektir.</p>
6480. <p>Seni bir örnek vereceğim, diyelim ki bir siteni var ve siteyi bir sayfasına <span style="color: red">YouTube</span>'dan bir video yerleştirme gerekiyor, sayfanın içine başka bir sayfa yerleştirme için buna çerçeveler denir.</p>
6481. <hr />
6482. <h2 id="sbie">Sayfaya bir <span>iframe</span> eklemek</h2>
6483. <p>Genellikle sayfada bir çerçeve görüntülemek için <span><iframe></span> etiketini <span style="color: blue"><iframe</span> <span style="color: red">src=</span><span style="color: red">"</span>url<span style="color: red">"</span><span style="color: blue">></iframe></span> olarak kullanıyoruz.</p>
6484. <p><span>url</span> Kelimesinin yerine içinde görüntülemek istediğimiz sayfanın yolunu eklemeliyiz.</p>
6485. <p>Aşağıdaki örnekte, <span><iframe></span> etiketini kullanarak sayfaya bir çerçeve ekledim ve içinde <a href="https://www.k-html.com" target="_blank"><span>HTML öğren</span></a> web sitesinde ana sayfayı görüntüledim.</p>
6486. <pre class="code"><ul class="ucode"><li><span style="color: blue"><iframe </span><span style="color: red">src=</span><span style="color: red">"</span>https:<span style="color: blue">/</span><span style="color: blue">/</span>www.k-html.com<span style="color: red">"</span><span style="color: blue">></span><span style="color: blue"></iframe></span></li></ul></pre>
6487. <a class="elifnur" href="https://code.k-html.com/kodlar/iframe.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
6488. <hr />
6489. <h2 id="ibb"><span>Iframe</span> boyutunu belirtmek</h2>
6490. <p>Sayfada gösterdiğimiz çerçeve, önceki örnekte gördüğün gibi boyutu kendini belirtmediğin sürece çok küçük bir alanında görüntüleniyor.</p>
6491. <p>Genellikle çerçeve boyutu <span>CSS</span> kodu ile belirlenir, çünkü bunu yapmanın kolay ve daha iyi yollarını sağlar, ancak <span>HTML</span> çalıştığımız için çerçeve boyutunu belirlemek için <span>HTML</span> tarafından sağlanan özelliklere odaklanacağız:</p>
6492. <ul>
6493.  <li><span>width</span>: Görüntülenecek çerçevenin genişliğini piksel olarak belirtmek için kullanılıyor.</li>
6494.  <li><span>height</span>: Görüntülenecek çerçevenin uzunluğunu piksel olarak belirtmek için kullanılıyor.</li>
6495. </ul>
6496. <br />
6497. <h5 style="color: red;">Bilgi:</h5>
6498. <p>Genişlik yüzde olarak belirtilebilirsin. Mesela, çerçevenin genişliğini tüm sayfanın genişliğine eşit olacak şekilde <span>%100</span> yapabilirsin.</p>
6499.  <p>Uzunluğu <span>%100</span>'e ayarlarsan, herhangi bir fark görmezsin çünkü çalışması için temel sayfa uzunluğunu <span>%100</span>'e ayarlamanı gerekir.<br />
6500.    Çerçeve uzunluğuyla uğraşma çünkü <span>CSS</span> öğrenirken onunla nasıl oynayacağını kolayca öğreneceksin.
6501. </p>
6502. <p>Aşağıdaki örnekte, kursumuz'da ilk dersin içeriğinin görüntüleneceği <span>400</span> piksel genişliğinde ve <span>400</span> piksel yüksekliğinde olduğunu belirten bir çerçeve görüntüledim.</p>
6503. <pre class="code"><ul class="ucode"><li><span style="color: blue"><iframe </span><span style="color: red">src=</span><span style="color: red">"</span>https:<span style="color: blue">/</span><span style="color: blue">/</span>www.k-html.com<span style="color: blue">/</span>2021<span style="color: blue">/</span>05<span style="color: blue">/</span>html-dile-genel-baks.html<span style="color: red">"</span> <span style="color: red">width=</span><span style="color: red">"</span>400<span style="color: red">"</span> <span style="color: red">height="</span>400<span style="color: red">"</span><span style="color: blue">></span><span style="color: blue"></iframe></span></li></ul></pre>
6504. <a class="elifnur" href="https://code.k-html.com/kodlar/iframe2.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
6505. <br /> <br />
6506. <p>Aşağıdaki örnekte, sayfada ilk dersinin görüntüleneceği, genişliğinin <span>%100</span> ve uzunluğunun <span>400</span> piksel olduğunu belirten bir çerçeve görüntüledim.</p>
6507. <pre class="code"><ul class="ucode"><li><span style="color: blue"><iframe </span><span style="color: red">src=</span><span style="color: red">"</span>https:<span style="color: blue">/</span><span style="color: blue">/</span>www.k-html.com<span style="color: blue">/</span>2021<span style="color: blue">/</span>05<span style="color: blue">/</span>html-dile-genel-baks.html<span style="color: red">"</span> <span style="color: red">width=</span><span style="color: red">"</span>100%<span style="color: red">"</span> <span style="color: red">height="</span>400<span style="color: red">"</span><span style="color: blue">></span><span style="color: blue"></iframe></span></li></ul></pre>
6508. <a class="elifnur" href="https://code.k-html.com/kodlar/iframe3.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
6509. <hr />
6510. <h2 id="iko"><span>Iframe</span> kodun özellikleri</h2>
6511. <p><span><iframe></span> Etiketinin birçok özelliği vardır fakat bunların çoğu artık <a href="https://www.k-html.com/2022/06/html5-nedir.html" target="_blank">HTML5</a>'te kullanılmamaktadır ve son dil güncellemesinden sonra kaldırılmıştır, şimdi <span>HTML5</span>'te hala kullanılan özelliklerden bahsedeceğim.</p>
6512. <ul>
6513.  <li><span>height</span>: <span><iframe> </span>için yüksekliği ayarlarmak için kullanılıyor.
6514.    <br />
6515.    <p>Aşağıdaki örnekte, kodun yüksekliğini belirtmek için <span>height</span> özeliğini kullandım.</p>
6516.    <pre class="code"><ul class="ucode"><li><span style="color: blue"><iframe</span> <span style="color: red">src=</span><span style="color: red">"</span>https:<span style="color: blue">/</span><span style="color: blue">/</span>www.k-html.com<span style="color: blue">/</span>2021<span style="color: blue">/</span>05<span style="color: blue">/</span>html-dile-genel-baks.html<span style="color: red">"</span> <span style="color: red">height=</span><span style="color: red">"</span>500<span style="color: red">"</span><span style="color: blue">></span><span style="color: blue"></iframe></span></li></ul></pre>
6517.    <a class="elifnur" href="https://code.k-html.com/kodlar/iframe-kodun-ozellikleri.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></li>
6518.  <br />
6519.  <li><span>width</span>:<span> <iframe></span> için genişliği ayarlar.
6520.    <p>Aşağıdaki örnekte, kodun genişliğini belirtmek için <span>width</span> özelliği kullandım.</p>
6521.     <pre class="code"><ul class="ucode"><li><span style="color: blue"><iframe</span> <span style="color: red">src=</span><span style="color: red">"</span>https:<span style="color: blue">/</span><span style="color: blue">/</span>www.k-html.com<span style="color: blue">/</span>2021<span style="color: blue">/</span>05<span style="color: blue">/</span>html-dile-genel-baks.html<span style="color: red">"</span> <span style="color: red">width="</span>500<span style="color: red">"</span><span style="color: blue">></span><span style="color: blue"></iframe></span></li></ul></pre>
6522.    <a class="elifnur" href="https://code.k-html.com/kodlar/iframe-kodun-ozellikleri2.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></li>
6523.  <br />
6524.  <li><span>src</span>: <span><iframe></span>'e dahil edilecek sitenin veya sayfanın yolunu belirtmek için kullanılıyor.
6525.    <p>Bu örnekte <span>src</span> özelliğini ekledim ve gördüğün gibi şu ana kadar eklenen tüm kodlarda <span>src</span> özellik kullanılmış.</p>
6526.  <pre class="code"><ul class="ucode"><li><span style="color: blue"><iframe</span> <span style="color: red">src=</span><span style="color: red">"</span>https:<span style="color: blue">/</span><span style="color: blue">/</span>www.k-html.com<span style="color: blue">/</span>2021<span style="color: blue">/</span>05<span style="color: blue">/</span>html-dile-genel-baks.html<span style="color: red">"</span><span style="color: blue">></span><span style="color: blue"></iframe></span></li></ul></pre>
6527.    <a class="elifnur" href="https://code.k-html.com/kodlar/iframe-kodun-ozellikleri3.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a></li>
6528.  <br />
6529. <li><span>name</span>: <span><iframe></span> için bir adı belirtir ve arama motorları için faydalı kalır.
6530.  <blockquote><span>name</span> özelliği, bir <span>Javascript</span>'teki öğeye başvurmak için veya bir <span style="color: #00008B;"><a></span> veya <span style="color: #00008B;"><form></span> öğesinin hedef özelliğin değeri veya bir <span style="color: #00008B;"><input></span> veya <span style="color: #00008B;"><button></span> öğesinin form <span>target</span> özelliği olarak kullanılabilir.<br />
6531.  <a href="https://www.k-html.com/2021/12/html-iframe.html#iibba">Iframe içinde bir bağlantı açmak</a> bölümünde bu özellik hakkında daha fazla açıklayacağım.</blockquote>
6532.  <p>Aşağıdaki örnekte, <span>name</span> özelliğinin bir örneğini ekledim.</p>
6533.  <pre class="code"><ul class="ucode"><li><span style="color: blue"><iframe</span> <span style="color: red">src=</span><span style="color: red">"</span>https:<span style="color: blue">/</span><span style="color: blue">/</span>www.k-html.com<span style="color: red">"</span> <span style="color: red">name=</span><span style="color: red">"</span>iframe-1<span style="color: red">"</span><span style="color: blue">></span><span style="color: blue"></iframe></span></li><li><span style="color: blue"><a</span> <span style="color: red">href=</span><span style="color: red">"</span>https:<span style="color: blue">/</span><span style="color: blue">/</span>www.k-html.com<span style="color: blue">/</span>2021<span style="color: blue">/</span>05<span style="color: blue">/</span>html-dile-genel-baks.html<span style="color: red">"</span> <span style="color: red">target=</span><span style="color: red">"</span>iframe-1<span style="color: red">"</span><span style="color: blue">></span>html dile genel bakış<span style="color: blue"></a</span><span style="color: blue">></span></li></ul></pre>
6534.   <a class="elifnur" href="https://code.k-html.com/kodlar/iframe-kodun-ozellikleri4.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
6535.  </li>
6536.  <br />
6537.  <li><span>sandbox</span>: <span><iframe></span> kodu içindeki içerik için ekstra bir dizi kısıtlamayı etkinleştirir.
6538.  <br />
6539.  Bu özellik biraz ileri düzeyde olduğu için şimdi açıklamayacağım ileride nasıl kullanılacağını öğreneceksin.</li>
6540.  </ul>
6541. <hr />
6542. <h2 style="text-align:center;" id="ibe"><span>Iframe</span>'e başlık eklemek</h2>
6543. <p><span>Çerçeveye</span> koyduğumuz başlık sayfada görüntülenmek için tasarlanmamıştır yani sayfada kullanıcının önünde görüntülenmez.</p>
6544. <p>Peki, o zaman bu özellik neden kullanılıyor?<br />
6545. <span>Çerçeveye</span> koyduğumuz başlığın önemi, eğer kullanıcı körse ve sayfanın içeriğini okumak için ekran okuyucuya kullanıyorsa, okuyucu <span>Çerçeveye</span> yerleştirilen başlığı okuyacaktır, böylece kullanıcı sayfada bir çerçeve var  olduğu bilecektir.</p>
6546. <p>
6547.  Çerçeve için bir başlık eklemek için <span><iframe></span> etiketine <span>title</span> özelliğini ekle ve başlığı buna <span style="color: blue"><iframe</span> <span>title="</span>metin<span>"</span><span style="color: blue">></span> gibi bir değer olarak iletebilirsin.
6548.  </p>
6549. <p>Aşağıdaki örnekte, sayfaya eklediğim <span>çerçeve</span> için, çerçeve boyutunu ve içeriğinin görüntüleneceği sayfanın bağlantısını belirterek bir başlık eklediğim.</p>
6550. <pre class="code"><ul class="ucode"><li><span style="color: blue"><iframe</span> <span style="color: red">src=</span><span style="color: red">"</span>https:<span style="color: blue">/</span><span style="color: blue">/</span>k-html.com<span style="color: red">"</span> <span style="color: red">width=</span><span style="color: red">"</span>100%<span style="color: red">" height=</span><span style="color: red">"</span>400<span style="color: red">"</span> <span style="color: red">title=</span><span style="color: red">"</span>k-html.com üzerinden html dili öğrenmeyi başla<span style="color: red">"</span><span style="color: blue">></span><span style="color: blue"></iframe></span></li></ul></pre>
6551. <a href="https://code.k-html.com/kodlar/iframe-baslik-eklemek.html" class="elifnur" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
6552. <hr />
6553. <h2 id="iibba"><span>Iframe</span> içinde bir bağlantı açmak</h2>
6554. <p>Sayfaya yerleştirilen bağlantıyı aynı sayfaya yerleştirilmiş bir <span>çerçeve</span> içinde açmak istiyorsan, çerçeveye <span>name</span> özelliğini ekle buna bir ad verebilirsin, ardından kendi belirlediğin adı bağlantıdaki <span>target</span> özelliğine geçirebilirsin.</p>
6555. <p>Aşağıdaki örnekte, sayfaya yerleştirilen bir çerçeve içine tıklandığında atıfta bulunduğu sayfayı açacak bir bağlantı ekledim.</p>
6556. <pre class="code"><ul class="ucode"><li><span style="color: blue"><a</span> <span style="color: red">href=</span><span style="color: red">"</span>https:<span style="color: blue">/</span><span style="color: blue">/</span>k-html.com<span style="color: blue">/</span>2021<span style="color: blue">/</span>05<span style="color: blue">/</span>html-dile-genel-baks.html<span style="color: red">"</span> <span style="color: red">target=</span><span style="color: red">"</span>k-iframe<span style="color: red">"</span><span style="color: blue">></span>html dile genel bakış aç<span style="color: blue"></a</span><span style="color: blue">></span></li><li><span style="color: blue"><iframe</span> <span style="color: red">name=</span><span style="color: red">"</span>k-iframe<span style="color: red">"</span><span style="color: blue">></span><span style="color: blue"></iframe></span></li></ul></pre>
6557. <a href="https://code.k-html.com/kodlar/iframe-içinde-bir-bağlantı-açmak.html" class="elifnur" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
6558. <hr />
6559. <h2 id="sbyvg" style="text-align:center;">Sayfada bir <span style="color: red">YouTube</span> videosu görüntülemek</h2>
6560. <p><span style="color: red">YouTube</span>'da bulduğun herhangi bir videoyu, herhangi bir kod yazmanıza gerek kalmadan sayfa içinde kolayca görüntüleyebilirsin, çünkü <span style="color: red">YouTube</span> seni "<span>Embed</span>" ya da <span>göm</span> adında bir seçenek veriyor.<br />
6561. Üzerine tıkladığında, seni videoyu görüntüleyen bir <span>çerçeve</span> kodu verecektir.</p>
6562. <blockquote>
6563. <span>Bilgi: Gömme</span> seçeneğini bulmak için videonun altında bulduğun Paylaş düğmesine tıklayarak, seni görünecektir.<br />
6564. Ardından sayfaya ekleyeceğin kodu seni vermesi için üzerine tıkla.
6565. </blockquote>
6566. <p>Aşağıdaki örnekte, bir <span style="color: red">YouTube</span> videosu için <span>Embed</span> butonuna tıkladıktan sonra aldığımız bir kodu ekledim.</p>
6567. <pre class="code"><ul class="ucode"><li><span style="color: blue"><iframe</span></li><li>  <span style="color: red">width=</span><span style="color: red">"</span>560<span style="color: red">"</span></li><li>  <span style="color: red">height="</span>315<span style="color: red">"</span></li><li>  <span style="color: red">src=</span><span style="color: red">"</span>https:<span style="color: blue">/</span><span style="color: blue">/</span>www.youtube.com<span style="color: blue">/</span>embed<span style="color: blue">/</span>vIPJASal9U0<span style="color: red">"</span></li><li>  <span style="color: red">title=</span><span style="color: red">"</span>YouTube video player<span style="color: red">"</span></li><li>  <span style="color: red">frameborder=</span><span style="color: red">"</span>0<span style="color: red">"</span></li><li>  <span style="color: red">allow="</span>accelerometer; autoplay; clipboard−write; encrypted−media; gyroscope; picture−in−picture<span style="color: red">"</span></li><li> <span style="color: red">allowfullscreen</span><span style="color: blue">></span></li><li><span style="color: blue"></iframe></span></li></ul></pre>
6568. <a href="https://code.k-html.com/kodlar/Sayfada-bir-YouTube-videosu-görüntülemek.html" class="elifnur" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
6569. <br /> <br />
6570. <p><span style="color: red">YouTube</span>'den alacağın bu kodu not et ve kendini yazmayacaksın ve içindeki özelliklerin çoğunun ne yaptığını bilmeni gerekir,
6571. <span>allow</span> özelliği'ye videoya otomatik oynatma gibi özellikler eklendi, anlatılmamış olan gelişmiş özellikleri kullanıldı ileride nasıl kullanacağını öğreneceksin..<br />
6572. <span>allowfullscreen</span> özelliği, videoyu tam ekran boyutunda görüntülemek için kullanıldı.</p>
6573. <div class="parent-links">  
6574.    <a class="btn btn-primary" href="https://www.k-html.com/2021/12/html-sesleri.html">
6575.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
6576.      önceki ders
6577.    </a>
6578.    <a class="btn btn-primary" href="https://www.k-html.com/2022/04/html-formlar.html">
6579.      sonraki ders
6580.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
6581.    </a>
6582.  &lt;/div&gt;</content><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/8371531787830784390'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/8371531787830784390'/><link rel='alternate' type='text/html' href='https://www.k-html.com/2021/12/html-iframe.html' title='HTML Iframe'/><author><name>HTML öğren</name><uri>http://www.blogger.com/profile/05938401370972816509</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB9hVaVznt_p0FHumsq5E1ns0HFhwUsz5N8PDjeIc1oE4O70yakyUZqpJJiZyKolfcNdZlaOrykdeVaT9wGLi4Gp6Ko2vw9JCv-r2AQBF1JjXNu_09kuRKvXx-7fys1Hw/s113/html.jpg'/></author></entry><entry><id>tag:blogger.com,1999:blog-624213398567285603.post-5482716259807027327</id><published>2021-12-02T16:01:00.131+03:00</published><updated>2023-05-07T04:05:46.716+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="akustik"/><category scheme="http://www.blogger.com/atom/ns#" term="html"/><category scheme="http://www.blogger.com/atom/ns#" term="HTML Sesleri"/><category scheme="http://www.blogger.com/atom/ns#" term="sesler"/><title type='text'>HTML Sesleri</title><content type='html'>&lt;div class=&quot;parent-links&quot;&gt;  
6583.    <a class="btn btn-primary" href="https://www.k-html.com/2021/11/html-videolar.html">
6584. <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>      önceki ders
6585.    </a>
6586.    <a class="btn btn-primary" href="https://www.k-html.com/2021/12/html-iframe.html">
6587.      sonraki ders
6588.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
6589.    </a>
6590.  
6591.  </div>
6592. <details open="">
6593.  <summary style="text-align: left;">Sayfa içeriği</summary>
6594.  <ul class="postcontent">
6595.      <li>
6596.  <b>›</b> <a href="https://www.k-html.com/2021/12/html-sesleri.html#sevo">Seslerin etiketleri ve özellikleri</a>
6597.      </li>
6598.      <li>
6599.  <b>›</b> <a href="https://www.k-html.com/2021/12/html-sesleri.html#sek">Source etiketin kullanma</a>
6600.      </li>
6601.  </ul>
6602. </details>
6603. <hr class="hrkk" />
6604. <h2 id="sevo">Seslerin etiketleri ve özellikleri</h2>
6605. <p>Genelde <span><audio></span> etiketini tarayıcıya sayfada bir ses dosyasını görüntülemek istediğimizi söylemek için kullanılıyor.<br />
6606. İlerleyen bölümlerde çalmak istediğimiz ses dosyasını seçmenin yollarını anlatacağım.</p>
6607. <h3>Çalınabilecek ses dosyası türleri</h3>
6608. <p>Tüm tarayıcılarda herhangi bir eklenti eklemeden çalışan formüller bunlardır:</p>
6609. <ul>
6610.  <li><span>MP3</span> formatı var: En eski formatlardan biri olduğu ve tüm cihazlarla uyumlu olmasıyla çok iyi biliniyor ve bu nedenle hala en yaygın olarak kullanılıyor.</li>
6611.  <li><a href="https://www.apple.com" target="_blank" rel="nofollow">Apple</a> tarafından sıklıkla kullanılan başka bir format olan <span>ACC</span> formatı daha vardır, ve bu format yüksek kalitededir.</li>
6612.  <li>Ayrıca ücretsiz kaynak programlarında yaygın olarak kullanılan <span>OGG</span> formatı olan üçüncü bir format daha vardır ve avantajı ücretsiz olmasıdır, yani herhangi bir patentle korunmamaktadır.</li>
6613.  <li>Bir de sıkıştırılmamış format olan <span>WAV</span> formatı var ve bu tarzdaki sesin boyutu büyük olduğundan ve diğer formatlara göre indirmesi daha uzun sürdüğü için çok kullanmanı tavsiye etmiyorum.</li>
6614. </ul>
6615. <p>Her formül yalnızca birkaç tarayıcıda çalıştığından, tüm tarayıcılarda çalışan bir formül olmadığını da bilmelisin.<br />
6616.  Örneğin, <span> MP3</span> formatı <span>Internet Explorer</span>, <span>Google Chrome</span>, <span>Safari</span> ve <span>Brave</span>'de çalışır, ancak <span>Firefox</span> ve <span>Opera</span>'da çalışmaz.<br />
6617. <span>OGG</span> formatı <span>Google Chrome</span>,<span> Firefox</span>, <span>Opera</span> ve <span>Brave</span>'de çalışan ancak <span>Internet Explorer</span> ve <span>Safari</span>'de çalışmaz.
6618.  <br />Ancak bu sorunun birçok çözümü var ve bunların en iyisi koda birden fazla formül eklemektir ve bunların hepsini aşağıda göreceğiz.</p>
6619. <br />
6620. <h3><span><audio></span> Etiketin özellikleri</h3>
6621. <ul>
6622.  <li><span>autoplay</span>: Ses dosyasının sayfa yüklenmekten sonra otomatik olarak oynatılması için <span>autoplay</span> özelliği kullanılır ve Çoğu tarayıcının bu özelliği desteklemediğini ve gerekli olmadıkça bu özelliğin kullanılmasını önermediğimi ve eklenmesi gerekiyorsa, kullanıcıdan izin istemek daha iyidir ve bunu <span>Javascript</span>'te öğreneceğini unutma.<br />
6623.  burada bir örnek için'de otomatik olarak başlıyacak bir ses dosyası ekledim.</li>
6624.    <pre class="code"><ul class="ucode"><li>  <span style="color: blue"><audio </span><span style="color: red">src="</span>https:<span style="color: blue">//</span>code.k-html.com<span style="color: blue">/</span>kodlar<span style="color: blue">/</span>audio.mp3<span style="color: red">" controls autoplay</span><span style="color: blue">></span></li><li> Tarayıcınız ses dosyası biçimini desteklemiyor</li><li> <span style="color: blue"></audio></span></li></ul></pre>
6625.    <a class="elifnur" href="https://code.k-html.com/kodlar/audio-autoplay.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
6626.  <br /><br>
6627.  <li><span>controls</span>: Bu özellik mevcutsa, tarayıcı, kullanıcının ses kaydı, ses klibinde farklı konumlara hareket etme, duraklatma ve oynatma dahil olmak üzere ses oynatmayı kontrol etmesine izin vermek için kontroller sağlayacaktır.</li>
6628.  <br />
6629.  <li><span>loop</span>: Bu özellik mevcutsa, klip süresiz olarak sonuna ulaştıktan sonra baştan oynatılacaktır.<br />
6630.    Aşağıdaki örnek, klibi tamamlandıktan sonra oynatmak için <span>loop</span> özelliğine sahip <span><audio></span> öğesini kullanılan bir kod ekledim.</li>
6631.  
6632.    <pre class="code"><ul class="ucode"><li><span style="color: blue"><audio </span><span style="color: red">src=</span><span style="color: red">"</span>https:<span style="color: blue">/</span><span style="color: blue">/</span>code.k-html.com<span style="color: blue">/</span>kodlar<span style="color: blue">/</span>audio.mp3<span style="color: red">"</span><span style="color: red"> controls loop<span style="color: blue">></span></span></li><li>Tarayıcınız ses dosyası biçimini desteklemiyor</li><li><span style="color: blue"></audio></span></li></ul></pre>
6633.    <a class="elifnur" href="https://code.k-html.com/kodlar/audio.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
6634.  
6635.  <br /><br>
6636.  <li><span>muted:</span> Bu özellik kullanılırsa, klipteki ses otomatik olarak kapatılır ve ses görünmesi için kullanıcının sesi açması gerekir.<br />
6637.    Burada <span>muted</span> özelliğinin kullanımıyla ilgili bir örnek ekledim.</li>
6638.    <pre class="code"><ul class="ucode"><li><span style="color: blue"><audio </span><span style="color: red">src=</span><span style="color: red">"</span>https:<span style="color: blue">/</span><span style="color: blue">/</span>code.k-html.com<span style="color: blue">/</span>kodlar<span style="color: blue">/</span>audio.mp3<span style="color: red">" controls muted</span><span style="color: blue">></span></li><li>Tarayıcınız ses dosyası biçimini desteklemiyor</li><li><span style="color: blue"></audio></span></li></ul></pre>
6639.    <a class="elifnur" href="https://code.k-html.com/kodlar/audio-muted.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
6640.  
6641.  <br /><br>
6642.  <li>
6643.    <span>preload: </span>Bu özelliğin amacı, tarayıcıya en iyi kullanıcı deneyimi için ne yapması gerektiği konusunda fikir vermektir ve 3 değeri vardır:
6644.    <ol type="1">
6645.      <li><span>none</span> değeri eklenirse, tarayıcı kodu yok sayar ve yalnızca kodu gösterir ve kullanıcı klibi oynatana kadar klibi indirmez.</li>
6646.       <li><span>auto</span> değeri eklenirse, kullanıcının oynatması beklenmese bile tarayıcı, sayfa yükleme sırasında klibi otomatik olarak yükler.</li>
6647.       <li><span>metadata</span> değeri eklenirse tarayıcı, klibin kendisini değil, yalnızca klip biçimi, uzunluğu ve boyutu gibi klibin temel verilerini yükler.</li>
6648.    </ol><br />
6649.   Bu özelliğin değeri ayarlanmazsa, tarayıcıdan varsayılan değer alınacaktır (her tarayıcının kendi varsayılan değeri vardır), ancak değerin <span>metadata</span> olmasını tavsiye ederim.
6650.    </li>
6651.    <br />
6652.    <p><span>autoplay</span> önyüklemeye göre önceliği olduğunu unutma, bu nedenle otomatik oynatma ayarlanırsa tarayıcı ses dosyası otomatik olarak indirmeye başlar.</p><br />
6653.   <p>Tarayıcının <span>preload</span> kodundan isteneni yapmak zorunda olmadığı ve gerekenden farklı bir şey yapabileceğine dikkat edilmelidir, çünkü <span>preload</span> kodu tarayıcıya site programcısın ne istediğinin bir özetini vermek içindir, ve tarayıcı gerekli işi yapmak zorunda değildir.</p>
6654.    <p>Daha basit bir şekilde anlatacağım.<br />
6655. <span>preload</span> kodunu ekledin ve <span>auto</span> özelliğini ekledin tamam mı?.<br />Bu durumda tarayıcı hemen dosyayı indirmeye başlayacak, yoksa öyle mi düşünüyorsun?.<br />Kullanıcı istemedikçe dosyaların otomatik olarak indirilmemesi için ayrılmış tarayıcılar vardır ve sen indirmemesini söylesen bile dosyayı indiren tarayıcılar vardır.<br />Dosyanın otomatik olarak indirilmesini engelleyen bazı reklam engelleyici eklentilerin bulunduğunu ve hepsinin değil de bazı eklentilerin olduğunu belirtmek gerekir.
6656.    </p><br />
6657.    <p>Burada <span>none </span>değeri ile bir örnek ekledim.</p>
6658.    <pre class="code"><ul class="ucode"><li><span style="color: blue"><audio </span><span style="color: red">src=</span><span style="color: red">"</span>audio.mp3<span style="color: red">"</span> <span style="color: red">preload="</span>none<span style="color: red">"</span> <span style="color: red">controls</span><span style="color: blue">></span></li><li> Tarayıcınız ses dosyası biçimini desteklemiyor</li><li><span style="color: blue"></audio></span></li></ul></pre>
6659.    <a class="elifnur" href="https://code.k-html.com/kodlar/audio-preload-none.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
6660.    <br /><br />
6661.     <p>Burada <span>auto </span>değeri ile bir örnek ekledim.</p>
6662.    <pre class="code"><ul class="ucode"><li><span style="color: blue"><audio </span><span style="color: red">src=</span><span style="color: red">"</span>audio.mp3<span style="color: red">"</span> <span style="color: red">preload="</span>auto<span style="color: red">"</span> <span style="color: red">controls</span><span style="color: blue">></span></li><li> Tarayıcınız ses dosyası biçimini desteklemiyor</li><li><span style="color: blue"></audio></span></li></ul></pre>
6663.    <a class="elifnur" href="https://code.k-html.com/kodlar/audio-preload-auto.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
6664.    <br /><br />
6665.    <p>Burada <span>metadata </span>değeri ile bir örnek ekledim.</p>
6666.    <pre class="code"><ul class="ucode"><li><span style="color: blue"><audio </span><span style="color: red">src=</span><span style="color: red">"</span>audio.mp3<span style="color: red">"</span> <span style="color: red">preload="</span>metadata<span style="color: red">"</span> <span style="color: red">controls</span><span style="color: blue">></span></li><li> Tarayıcınız ses dosyası biçimini desteklemiyor</li><li><span style="color: blue"></audio></span></li></ul></pre>
6667.    <a class="elifnur" href="https://code.k-html.com/kodlar/audio-preload-metadata.html" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
6668.  <br /><br />
6669.  <li><span>src :</span>
6670.    Bu özellik, indirilecek ses dosyasının <span>URL</span>'sini içerir. Bu özellik isteğe bağlıdır.</li>
6671.    <p>Ne?, bir dakika, <span>src</span> özelliği nasıl isteğe bağlı olabilir?
6672.    <br />
6673.    Peki ses dosyası <span>URL</span>'si nasıl eklenecek? Bu soruda düşündün mü?
6674.    <br />
6675.        Peki merak etme şimdi her şeyi açıklayacağım .</p>
6676.    <p>Eklemek istediğin ses dosya'nin <span>URL</span>'sini belirtmek için <span><audio></span> öğesinin içindeki <span><source></span> öğesini kullanabilirsin.</p>
6677.    <p><span><audio></span> etiketinde <span>src</span> özeliğini kullanamaya bilirsin ve onu <span><source></span> etiketinin içine ekleyebilirsin ve biraz daha sonra anlatacağım.
6678.  </p><br />
6679.  <blockquote>Ancak <span>src</span> özelliği önemlidir ve ses dosyasını getiren o olduğundan vazgeçilemez, ancak isteğe bağlı olmaktan kastettiğim sadece <span><audio></span> etiketinin içine ve <span><source></span> etiketinin içine eklenebilir, ve aşağıda açıklayacağım şey bu.</blockquote>
6680. </ul>
6681. <hr />
6682. <h2 id="sek"><span>Source</span> etiketin kullanma</h2>
6683. <p><span><source></span> Kodu, kullanmanı tavsiye ederim, çok önemli bir koddur ve şimdi nasıl kullanılacağını ve faydalarını göreceğiz.</p>
6684. <p><span><source></span> Etiketinin çalışma şekli, <span><audio></span>  etiketinin içine <span><source></span> etiketini eklemektedir, öyleyse neden <span><audio></span> etiketini normal bir şekilde kullanmıyoruz ve <span><source></span> kodu daha çok tercih ediyorum acaba? ..</p>
6685. <p>Bunu basit bir şekilde anlatacağım, <span><a href="https://www.google.com" target="_blank" rel="nofollow">Google'de</a></span> bir film izlemeye gittiğinde seni filmi oynatmak için birkaç sunucu gösteriyor değil mi? Ve eğer sunucu çalışmıyorsa, başka bir tane seçersin, değil mi?</p>
6686. <p><span><source></span> Kodu için aynıdır, ancak sunucuları kullanıcıya göstermez, bunun yerine otomatik olarak kendi kendine dener ve dosyayı normal olarak <span><audio></span> koduna eklenmiş gibi kullanıcıya gösterir.</p>
6687. <p>Eğer anlamadıysan, endişelenme! Örneklere baktıktan sonra anlayacaksın, ses dosyasına birden fazla kaynak eklemeni yeterli ve ilk ses dosyası çalışmıyorsa tarayıcı ikinci dosyayı deneyecektir.</p>
6688. <p>Öncelikle kullanmak istediğimiz özellikleri <span><audio></span> kodunun içine ekliyoruz ve içine <span><source></span> kodlarını ekliyoruz.</p>
6689. <p>Buraya 4 farklı formülle bir örnek ekledim, ilk formülün çalışmaması durumunda sonraki formünü otomatik olarak deneyecektir.</p>
6690. <p><span>controls</span> özelliğini eklediğimiz için tarayıcı kontrol düğmelerini gösterecek ve <span>metadata</span> özelliğini eklediğimiz için tarayıcı dosyayı otomatik olarak oynatmaya hazırlayacak ve çalışacağı ilk formatı seçecektir.<br />Yani tarayıcı dosyayı indirmeye hazırlayacaktır, ancak ses dosyayı indirmeyecek ve kullanıcının ses dosyasını başlayana kadar indirmiyecek.</p>
6691. <pre class="code"><ul class="ucode"><li><span style="color: blue"><audio</span>  <span style="color: red">preload="</span>metadata<span style="color: red">"</span> <span style="color: red">controls</span><span style="color: blue">></span></li><li><span style="color: blue"><source</span> <span style="color: red">src="</span>audio.mp3<span style="color: red">"</span><span style="color: blue">></span></li><li><span style="color: blue"><source</span> <span style="color: red">src="</span>audio.ogg<span style="color: red">"</span><span style="color: blue">></span></li><li><span style="color: blue"><source</span> <span style="color: red">src="</span>audio.aac<span style="color: red">"</span><span style="color: blue">></span></li><li><span style="color: blue"><source</span> <span style="color: red">src=</span><span style="color: red">"</span>audio.wav<span style="color: red">"</span><span style="color: blue">></span></li><li>Tarayıcınız ses dosyası biçimini desteklemiyor!</li><li><span style="color: blue"></audio></span></li></ul></pre>
6692. <a href="https://code.k-html.com/kodlar/source-etiketin-kullanma.html" class="elifnur" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
6693. <blockquote>
6694. Peki sorulması gereken önemli bir soru var, eğer çok fazla yedek sunucu kullanıyorsan bu sitede ağırlık yaratır mı?
6695.  <br />
6696.  Cevap evet, çok fazla yedekleme sunucusu kullanmak siteye ağır bir yük bindirecektir.<br /><span>auto</span> Özelliğini ekliyorsan siteni neden yavaş diye sorma ama <span>metadata</span> özelliği yada <span>none</span> özelliği kullanırsan çok sayıda dosya eklemekte sorun yok ama 3 den fazla eklemeni tavsiye etmem çünkü kullanıcı dosyayı indirmeye başlayınca sayfa ağırlaşacaktır.</blockquote>
6697. <div class="parent-links">  
6698.    <a class="btn btn-primary" href="https://www.k-html.com/2021/11/html-videolar.html">
6699. <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>      önceki ders
6700.    </a>
6701.    <a class="btn btn-primary" href="https://www.k-html.com/2021/12/html-iframe.html">
6702.      sonraki ders
6703.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
6704.    </a>
6705.  &lt;/div&gt;</content><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/5482716259807027327'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/5482716259807027327'/><link rel='alternate' type='text/html' href='https://www.k-html.com/2021/12/html-sesleri.html' title='HTML Sesleri'/><author><name>HTML öğren</name><uri>http://www.blogger.com/profile/05938401370972816509</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB9hVaVznt_p0FHumsq5E1ns0HFhwUsz5N8PDjeIc1oE4O70yakyUZqpJJiZyKolfcNdZlaOrykdeVaT9wGLi4Gp6Ko2vw9JCv-r2AQBF1JjXNu_09kuRKvXx-7fys1Hw/s113/html.jpg'/></author></entry><entry><id>tag:blogger.com,1999:blog-624213398567285603.post-2132940700541922249</id><published>2021-11-14T12:36:00.113+03:00</published><updated>2023-05-07T04:05:28.797+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="html"/><category scheme="http://www.blogger.com/atom/ns#" term="HTML Videolar"/><category scheme="http://www.blogger.com/atom/ns#" term="Videolar"/><title type='text'>HTML Videolar</title><content type='html'>&lt;div class=&quot;parent-links&quot;&gt;  
6706.    <a class="btn btn-primary" href="https://www.k-html.com/2021/07/html-resimler.html">
6707.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
6708.      önceki ders
6709.  </a>
6710.    <a class="btn btn-primary" href="https://www.k-html.com/2021/12/html-sesleri.html">
6711.      sonraki ders
6712.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
6713.    </a>
6714.  </div>
6715. <details open="">
6716.  <summary style="text-align: left;">Sayfa içeriği</summary>
6717.  <ul class="postcontent">
6718.      <li>
6719.  <b>›</b> <a href="https://www.k-html.com/2021/11/html-videolar.html#vevo">Videoların etiketleri ve özellikleri</a>
6720.      <li>
6721.  <b>›</b> <a href="https://www.k-html.com/2021/11/html-videolar.html#sve">Sayfaya video eklemek</a>
6722.      </li>
6723.    <li>
6724.    <b>›</b> <a href="https://www.k-html.com/2021/11/html-videolar.html#veo">video etiketin özellikleri</a>
6725.      </li>
6726.     <li>
6727.    <b>›</b> <a href="https://www.k-html.com/2021/11/html-videolar.html#voob">Videoyu otomatik olarak başlatmak</a>
6728.      </li>
6729.    </ul>
6730. </details>
6731. <hr class="hrkk" />
6732. <h2 id="vevo">Videoların etiketleri ve özellikleri</h2>
6733. <p>Genel olarak, tarayıcıya sayfada bir video görüntülemek istediğimizi söylemek için <span><video></span> etiketini kullanılıyor.<br />
6734. Görüntülemek istediğimiz videoyu belirtmek için <span><source></span> etiketini kullanıyoruz.</p>
6735. <p>Sayfaya video eklemek için <span color='purple'>HTML5</span>, sayfaya video eklemenin iki yolunu sağlayabilir ve iki yöntem de esas olarak <span><video></span> etiketini kullanıyor.<br />
6736. Tek bir video, yani yalnızca bir video dosyası eklemek için <span><video></span> etiketini <span><video</span> <span style="color: red">src="</span>...<span style="color: red">"</span><span>></span> olarak kullanabilirsin.<br />
6737. Üç noktayı video dosyasının yolu veya bağlantısıyla değiştirebilirsin.</p>
6738. <br />
6739. <h3>Gösterilebilecek video türleri</h3>
6740. <p>Ekliyebildiğin video türleri <span>.mp4</span>, <span>.webm</span> ve <span>.ogg</span> tüm tarayıcılarda çalışır ve bununla, tarayıcıların herhangi bir eklentiye ihtiyaç olmadan bu tür video dosyalar çalışacaktır.</p>
6741. <p>Kullanıcının cihazının zayıf olması ve sayfadaki videonun çözünürlüğünün çok yüksek olması tarayıcının video dosyasını çalıştırmayabilir olduğunu unutma.</p>
6742. <p>Biraz önce bahsettiğim formüller tüm tarayıcılarda çalışıyor ancak bu video kullanıcının cihazında çalışacak anlamına gelmiyor.<br />
6743. Çok önemli bir şeye dikkat etmelisin, o da kullanıcının telefonunun veya bilgisayarının video dosya formatını desteklemeyebileceğidir.</p>
6744. <p>Genel olarak <span>.mp4</span> ve <span>.webm</span> kullanmanı öneririm.<p>
6745. <p>Bu nedenle, oynatılabilecek video türlerinin yanı sıra, kullanıcı tarafından hangi videoların oynatılabileceğini belirlerken videoların çözünürlük bakılması gereken bir şeydir.</p>
6746. <blockquote>Genel olarak, <span>360p</span> tüm kullanıcılarda çalışıyor ve, <span>720p</span> çoğu kullanıcılarda çalışıyor.</blockquote>
6747. <br />
6748. <h3>Video etiketin özellikleri</h3>
6749.  <p><span><video></span> etiketi için etiketin en önemli özellikleri şunlardır:</p>
6750.   <ul>
6751.    <li><span>width</span>: Video penceresini Piksel olarak genişliğini belirtmek için kullanılıyor.</li>
6752.    <li><span>height</span>: Video penceresini Piksel olarak uzunluğunun belirtmek için kullanılıyor.</li>
6753.    <li><span>control</span>: Video penceresindeki kontrol düğmelerini göstermek için kullanılıyor.</li>
6754.   </ul>
6755.  <p><span><source></span> etiketi için, etiketin en önemli özellikleri şunlardır:</p>
6756.   <ul>
6757.    <li><span>src</span>: görüntülenecek videonun yolunu belirtmek için.</li>
6758.    <li><span>type</span>: Görüntülenecek videonun türünü belirtir.</li>
6759.   </ul>
6760. <br />
6761. <h3>Teknik Bilgi</h3>
6762. <p>Görüntülenecek videonun boyutunu belirtmezsen, tarayıcı videoyu yüklendikten sonra sayfada görüntülemeye çalıştığında büyük olasılıkla yanıp söner ve bir anda tüm sayfayı yeniden çizer, bu nedenle kullanıcı bunu bir flaş olarak görebilir.</p>
6763. <p>Bu nedenle, ister <span>HTML</span> özellikleriyle ister <span>CSS</span> koduyla belirtsen de, sayfada görüntülemeyi düşündüğün videonun boyutunu her zaman belirtmeyi unutma.</p>
6764. <hr />
6765. <h2 id="sve">Sayfaya video eklemek</h2>
6766. <p>Aşağıdaki örnekte sayfaya bir video ekledim.</p>
6767. <pre class="code"><ul class="ucode"><li><span style="color: blue"><video</span> <span style="color: red">src=</span><span style="color: red">"</span>https:<span style="color: blue">/</span><span style="color: blue">/</span>src.k-html.com<span style="color: blue">/</span>video.mp4<span style="color: red">"</span><span style="color: blue">/</span><span style="color: blue">></span></li></ul></pre>
6768. <a href="https://code.k-html.com/kodlar/video.html" target="_blank" class="elifnur">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
6769. <br /><br />
6770. <p><span><video></span> etiketi herhangi bir oynatma denetimi göstermez, <span>HTML,</span> <span>CSS</span> ve <span>JavaScript</span> ile kendini oluşturabilirsin; Demek istediğim şey video çıkıyor ama çalışmıyor ve duraklatma, ses kilidi veya diğer ayarlar gibi herhangi bir kontrol düğmesi göstermiyor ve bu tercihler<span> css</span> ve <span>javascript</span> kullanılarak oluşturulabiliyor ve <span>HTML5</span>'de <span>controls</span> özelliği var.
6771. </p>
6772. <pre class="code"><ul class="ucode"><li><span style="color: blue"><video</span> <span style="color: red">src=</span><span style="color: red">"</span>https:<span style="color: blue">/</span><span style="color: blue">/</span>src.k-html.com<span style="color: blue">/</span>video.mp4<span style="color: red">"</span> <span style="color: red">controls</span><span style="color: blue">/</span><span style="color: blue">></span></li></ul></pre>
6773. <a href="https://code.k-html.com/kodlar/video2.html" target="_blank" class="elifnur">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
6774. <br />
6775. <br />
6776. <p>Aşağıdaki örnekte, çalışmaması durumunda videonun bir yedek kopyasını ekledim.</p>
6777. <p><span><source></span> etiketi 2 kere ekledim sebebi daha önceden hazırladım 2 farklı kopya'dır.
6778. Niye böyle yaptım? <br />
6779. Çünkü tarayıcı ilk kopya açmayı denicek çalıştı ise video normal bir şekilde görüncek , ama birinci kopya çalışmadı ise ikinci kopya oynatmayı denicek.</p>
6780. <p>
6781. Burada <span>.mp4</span> bir kopya ekledim ve <span>.webm</span> bir kopya ekledim.<br />
6782. Birinci kopya çalımadı ise tarayıcı sonraki kopya oynatmayı denicek.<br />
6783. Tabi kii kopya eklemekte zorunlulu değilsin ve bir tek kopya ekleye bilirsin kopya eklemekte önenirim ve istediğin kadar kopya eklebilirsin</p>
6784. <p><span>Tarayıcın video etiketini desteklemiyor!</span> Metini kullanıcının tarayıcısı ilk etapta video oynatmayı desteklemiyorsa sayfada görüntülenir.<br />
6785. Tarayıcı yalnızca formatı desteklemiyorsa mesajın görüneceğini, ancak bu durumda gerekli videoyu bulamazsa, metni göstermeyeceğini ve yalnızca bir resmi de görüntüleyeceğini unutma.</p>
6786. <pre class="code"><ul class="ucode"><li><span style="color: blue"><video</span><span style="color: red"> controls</span><span style="color: blue">></span></li><li> <span style="color: blue"><source</span> <span style="color: red">src=</span><span style="color: red">"</span>https:<span style="color: blue">/</span><span style="color: blue">/</span>src.k-html.com<span style="color: blue">/</span>video.mp4<span style="color: red">"</span> <span style="color: red">type=</span><span style="color: red">"</span>video<span style="color: blue">/</span>mp4<span style="color: red">"</span><span style="color: blue">></span></li><li> <span style="color: blue"><source</span> <span style="color: red">src=</span><span style="color: red">"</span>https:<span style="color: blue">/</span><span style="color: blue">/</span>src.k-html.com<span style="color: blue">/</span>video.webm<span style="color: red">"</span> <span style="color: red">type=</span><span style="color: red">"</span>video<span style="color: blue">/</span>webm<span style="color: red">"</span><span style="color: blue">></span></li><li> Tarayıcınız video etiketini desteklemiyor! </li><li><span style="color: blue"></video</span><span style="color: blue">></span></li></ul></pre>
6787. <a href="https://code.k-html.com/kodlar/sve2.html" target="_blank" class="elifnur">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
6788. <br />
6789. <br />
6790. <p>Aşağıdaki örnekte sayfaya video kontrol düğmeleri gösteren ve genişliğinin <span>360</span> piksel ve uzunluğunun <span>200 </span>piksel olduğunu belirten bir video ekledim.</p>
6791. <pre class="code"><ul class="ucode"><li><span style="color: blue"><video</span> <span style="color: red">width=</span><span style="color: red">"</span>360<span style="color: red">"</span> <span style="color: red">height</span><span style="color: red">="</span>200<span style="color: red">"</span> <span style="color: red">controls</span><span style="color: blue">></span></li><li><span style="color: blue"><source</span> <span style="color: red">src=</span><span style="color: red">"</span>https:<span style="color: blue">/</span><span style="color: blue">/</span>src.k-html.com<span style="color: blue">/</span>video.mp4<span style="color: red">"</span> <span style="color: red">type=</span><span style="color: red">"</span>video<span style="color: blue">/</span>mp4<span style="color: red">"</span><span style="color: blue">></span></li><li><span style="color: blue"><source</span> <span style="color: red">src=</span><span style="color: red">"</span>https:<span style="color: blue">/</span><span style="color: blue">/</span>src.k-html.com<span style="color: blue">/</span>video.webm<span style="color: red">"</span> <span style="color: red">type=</span><span style="color: red">"</span>video<span style="color: blue">/</span>webm<span style="color: red">"</span><span style="color: blue">></span></li><li>Tarayıcınız video etiketini desteklemiyor! </li><li><span style="color: blue"></video</span><span style="color: blue">></span></li></ul></pre>
6792. <a href="https://code.k-html.com/kodlar/sve.html" target="_blank" class="elifnur">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
6793.  <hr />
6794. <h2 id="veo">Video etiketin özellikleri</h2>
6795. <p><span><video></span> Etiketi için ekliyebildiğin farklı özellikler var, şu özellikleri aşağıda ekledim.</p>
6796. <br />
6797. <h3>preload</h3>
6798.    <p><span>Preload</span>: özelliği, yazarın sayfa yüklendiğinde videonun yüklenmesi gerektiğini düşünüp düşünmediğini belirtir.<br />
6799. <span>preload</span> özelliği, yazarın tarayıcıya, en iyi kullanıcı deneyimine yol açacağını düşündüğü şey hakkında bir ipucu vermesini sağlar.</p>
6800. <p><span style="color: red">Not</span>: <span>autoplay</span> özelliği varsa, <span>preload</span> özelliği çalışmaz.</p>
6801. <p>Preload özelliğin Değerleri</p>
6802. <ul>
6803.    <li><span style="color: red">auto: </span>sayfa yüklendiğinde tarayıcının tüm videoyu yüklemesi gerektiğini olması.</li>
6804.    <li><span style="color: red">metadata: </span>sayfa yüklendiğinde tarayıcının yalnızca meta verileri yüklemesi gerektiğini olması</li>
6805.    <li><span style="color: red">none:</span> sayfa yüklendiğinde tarayıcının videoyu yüklememesi gerektiğini olması</li>
6806.  </ul>
6807. <h3>poster</h3>
6808.  <p>Bu özellik, video yüklenene veya video oynatılana kadar video penceresinde bir görüntü görüntülemek için kullanılır.</p>
6809. <pre class="code"><ul class="ucode"><li>  <span style="color: blue"><video</span> <span style="color: red">src=</span><span style="color: red">"</span>https:<span style="color: blue">/</span><span style="color: blue">/</span>src.k-html.com<span style="color: blue">/</span>video.mp4<span style="color: red">"</span> <span style="color: red">poster</span>=<span style="color: red">"</span>https:<span style="color: blue">/</span><span style="color: blue">/</span>src.k-html.com<span style="color: blue">/</span>poster.png<span style="color: red">"</span> <span style="color: red">controls</span><span style="color: blue">></span></li></ul></pre>
6810.  <a href="https://code.k-html.com/kodlar/sve3.html" target="_blank" class="elifnur">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
6811. <br /><br />
6812. <h3>loop</h3>
6813. <p>Video dosyası bittiğinde videoyu tekrar oynatır.</p>
6814. <pre class="code"><ul class="ucode"><li><span style="color: blue"><video</span> <span style="color: red">src=</span><span style="color: red">"</span>https:<span style="color: blue">/</span><span style="color: blue">/</span>src.k-html.com<span style="color: blue">/</span>video.mp4<span style="color: red">"</span> <span style="color: red">controls</span> <span style="color: red">loop</span><span style="color: blue">></span></li></ul></pre>
6815.  <a href="https://code.k-html.com/kodlar/sve4.html" target="_blank" class="elifnur">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
6816. <br /><br />
6817. <h3>muted</h3>
6818. <p>Sesi varsayılan olarak
6819. kapatmak için kullanılır, böylece video dosyası yüklendiğinde ses varsayılan olarak kapatılmış olarak görünür.</p>
6820. <pre class="code"><ul class="ucode"><li><span style="color: blue"><video</span> <span style="color: red">src=</span><span style="color: red">"</span>https:<span style="color: blue">/</span><span style="color: blue">/</span>src.k-html.com<span style="color: blue">/</span>video.mp4<span style="color: red">"</span> <span style="color: red">controls</span> <span style="color: red">muted</span><span style="color: blue">></span></li></ul></pre>
6821.  <a href="https://code.k-html.com/kodlar/sve5.html" target="_blank" class="elifnur">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
6822. <hr />
6823. <h2 id="voob" style="text-align:center;" >Videoyu otomatik olarak başlatmak</h2>
6824. <p><span style="color: red">YouTube</span>'da olduğu gibi sayfa açıldığında videonun otomatik olarak oynatılmasını istiyorsan, bu özelliğin bazı telefonlarda çalışmadığına dikkat ederek <span><video></span> etiketine <span style="color: #00008B;">autoplay</span> özelliğini ekleyebilirsin.</p>
6825. <p>Aşağıdaki örnekte sayfaya bir video ekledim ve sayfa açıldığında otomatik olarak oynatılmasını ayarladım.</p>
6826. <pre class="code"><ul class="ucode"><li><span style="color: blue"><video</span> <span style="color: red">width=</span><span style="color: red">"</span>360<span style="color: red">"</span> <span style="color: red">height</span><span style="color: red">"</span>200<span style="color: red">"</span> <span style="color: red">controls</span> <span style="color: red">autoplay</span><span style="color: blue">></span></li><li><span style="color: blue"><source</span> <span style="color: red">src=</span><span style="color: red">"</span>https:<span style="color: blue">/</span><span style="color: blue">/</span>src.k-html.com<span style="color: blue">/</span>video.mp4<span style="color: red">"</span> <span style="color: red">type=</span><span style="color: red">"</span>video<span style="color: blue">/</span>mp4<span style="color: red">"</span><span style="color: blue">></span></li><li><span style="color: blue"><source</span> <span style="color: red">src=</span><span style="color: red">"</span>https:<span style="color: blue">/</span><span style="color: blue">/</span>src.k-html.com<span style="color: blue">/</span>video.webm<span style="color: red">"</span> <span style="color: red">type=</span><span style="color: red">"</span>video<span style="color: blue">/</span>webm<span style="color: red">"</span><span style="color: blue">></span></li><li>  Tarayıcınız video etiketini desteklemiyor! </li><li><span style="color: blue"></video</span><span style="color: blue">></span></li></ul></pre>
6827. <a href="https://code.k-html.com/kodlar/voob.html" class="elifnur" target="_blank">kod dene <svg  width="25" height="25" fill="currentColor" class="bi bi-play-fill" viewBox="1 1 14 14">   <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/> </svg></a>
6828. <div class="parent-links">  
6829.    <a class="btn btn-primary" href="https://www.k-html.com/2021/07/html-resimler.html">
6830.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-left" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>   <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/> </svg>
6831.      önceki ders
6832.    </a>
6833.    <a class="btn btn-primary" href="https://www.k-html.com/2021/12/html-sesleri.html">
6834.      sonraki ders
6835.      <svg width="18" height="18" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 18 18">   <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>   <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/> </svg>
6836.    </a>
6837.  &lt;/div&gt;</content><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/2132940700541922249'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/624213398567285603/posts/default/2132940700541922249'/><link rel='alternate' type='text/html' href='https://www.k-html.com/2021/11/html-videolar.html' title='HTML Videolar'/><author><name>HTML öğren</name><uri>http://www.blogger.com/profile/05938401370972816509</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB9hVaVznt_p0FHumsq5E1ns0HFhwUsz5N8PDjeIc1oE4O70yakyUZqpJJiZyKolfcNdZlaOrykdeVaT9wGLi4Gp6Ko2vw9JCv-r2AQBF1JjXNu_09kuRKvXx-7fys1Hw/s113/html.jpg'/></author></entry></feed>