HTML, içeriğinizin yapısını tanımlayan bir biçimlendirme dilidir. HTML, içeriğin belirli bir şekilde görünmesini veya belirli bir şekilde hareket etmesini sağlamak için içeriğin farklı bölümlerini kapsamak veya sarmak için kullandığınız bir dizi öğeden oluşur. Çevreleyen etiketler, başka bir yere bir kelime veya resim köprüsü oluşturabilir, kelimeleri italik yazabilir, yazı tipini büyütebilir veya küçültebilir, vb. yapıları oluşturabilirsiniz.
Örneğin, aşağıdaki içerik satırını alın:
Oyuncular için en iyi bilgisayar güçlü ekran kartı olan bilgisayarlardır.
Satırın ve içindeki kalın ifadenin kendi başına durmasını istiyorsak. Bunu paragraf ve kalın etiketleri içine almalıyız.
1 2 3 | <p>Oyuncular için en iyi bilgisayar <strong>güçlü ekran kartı</strong> olan bilgisayarlardır.</p> |
Bu yazıda sizlere HTML Öğrenme yolunda yarımcı olacak bir çok örnek bulacaksınız. Ayrıca sitemizde HTML Kodları ve Anlamları kapsamlı belgeyi inceleyerek çok daha fazla etiket hakkında bilgi sahibi olabilirsiniz.
Örneklere başlamadan önce HTML kodları nereye yazılır ve hangi temel etiketleri içerdiğini bilmemiz gerekiyor.
HTML Temel Bilgiler
HTML kodları yazmak için her hangi bir metin editörü kullanılabilir. Bu editörler en kapsamlısı Dreamwever olabileceği gibi en ilkel Not Defteri de olabilir. Ancak HTML yazmak için en rahat editör Visual Studio Code (VSCode) olduğunu belirtmek isterim. Ayrıca VSCode, Microsoft’un ürünü olmasına rağmen tamamen ücretsizdir. Buradaki bağlantıyı kullanarak indirip kurabilirsiniz.
HTML kod örneklerini yazarken aşağıdaki temel HTML yapısı kullanacağız. Örnekler bu yapının içindeki <body> etiketleri arasında yazılacaktır. Bazı örneklerde satır için style özelliği kullanılarak temel CSS örnekleri de eklenecektir.
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>YAZILIM KODLAMA</title> </head> <body> <h1>Merhaba Dünya!</h1> </body> </html> |
Tüm HTML kod örneklerini <body> içindeki bölüme yazdığımızı ifade etmiştik. Yukarıdaki yapıda da <h1> başlık etiketi de aynı şekilde yazılmıştır.
HTML Kod Örnekleri
HTML kod örneklerini bir kaç bölüme ayırabiliriz. Bu bölümler metin işlemleri, listeler, tablolar, bağlantılar vb. şekilde sıralayabiliriz.
HTML Metin Biçimlendirme Örnekleri
Örnek : Paragraf oluşturmak için <p> etiketi kullanılır. Örnekte sayfaya 3 tane paragraf eklenmiştir. Aşağıdaki bölümde bir kısmını paylaştığım metin biçimlendirme etiketlerine buradaki bağlantıya tıklayarak ulaşabilirsiniz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>YAZILIM KODLAMA</title> </head> <body> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi officia ad officiis ab aut beatae sed ipsum dolorem voluptatem laudantium quae ratione magni, laborum, aliquid fugiat harum molestiae. Quia, repellendus.</p> <p>Eligendi explicabo facilis molestiae recusandae aliquam laudantium facere, perspiciatis magnam exercitationem maxime quod, placeat iste at delectus magni libero tenetur. Tempora assumenda libero veniam repellat labore inventore odio quo itaque.</p> <p>A laboriosam laborum ad dignissimos illum vel omnis, eos tenetur ipsa pariatur assumenda, possimus molestias at impedit, sunt totam nostrum voluptates mollitia dolore nemo ab maxime. Deserunt ratione ullam inventore!</p> </body> </html> |
Örnek: <br> etiketi paragraf içinde bir alt satıra geçmek için kullanılır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>YAZILIM KODLAMA</title> </head> <body style="background-color: WhiteSmoke;"> <p>Lorem ipsum <br>dolor sit amet consectetur<br> adipisicing elit.</p> </body> </html> |
Örnek : <b> etiketi metnin bir kısmını kalın yapar.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>YAZILIM KODLAMA</title> </head> <body> <p><b>Lorem ipsum</b> dolor sit amet consectetur adipisicing elit.</p> </body> </html> |
Örnek : Örnekte vurgu(<strong>) etiketi kullanarak metin bir kısmını kalın yapılmıştır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>YAZILIM KODLAMA</title> </head> <body> <p><strong>Lorem ipsum</strong> dolor sit amet consectetur adipisicing elit.</p> </body> </html> |
Örnek : <i> etiketi kullanılarak metnin bir kısmı eğik yapılmıştır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>YAZILIM KODLAMA</title> </head> <body> <p><i>Lorem ipsum</i> dolor sit amet consectetur adipisicing elit.</p> </body> </html> |
Örnek: <del> etiketi
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>YAZILIM KODLAMA</title> </head> <body> <p><del>Lorem ipsum</del> dolor sit amet consectetur adipisicing elit.</p> </body> </html> |
Örnek : <u> etiketi
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>YAZILIM KODLAMA</title> </head> <body style="background-color: WhiteSmoke;"> <!-- background-color arkaplan rengi verir.--> <p><u>Lorem ipsum</u> dolor sit amet consectetur adipisicing elit.</p> </body> </html> |
Örnek : <em> etiketi, bir ifade etiketidir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>YAZILIM KODLAMA</title> </head> <body style="background-color: WhiteSmoke;"> <p><em>Lorem ipsum</em> dolor sit amet consectetur adipisicing elit.</p> </body> </html> |
Örnek: <small> etiketi, daha küçük metni (ve diğer yan yorumları) tanımlar.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>YAZILIM KODLAMA</title> </head> <body style="background-color: WhiteSmoke;"> <p><small>Lorem ipsum</small> dolor sit amet consectetur adipisicing elit.</p> </body> </html> |
Örnek: <sub> etiketi kullanılarak alt simge eklemeyi aşağıdaki HTML kodlarını kullanarak oluşturalım.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>YAZILIM KODLAMA</title> </head> <body style="background-color: WhiteSmoke;"> Bitkiler gündüz CO<sub>2</sub> alır, O<sub>2</sub> verirler. Gece ise O<sub>2</sub> alır, CO<sub>2</sub> verirler. </body> </html> |
Örnek : <sup> etiketi kullanarak üst simge eklemesi yapılmaktadır. <sup> etiketi kullanımı ile ilgili örnek HTML kodları ve ekran çıktısını inceleyelim.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>YAZILIM KODLAMA</title> </head> <body style="background-color: WhiteSmoke;"> <p> 2<sup>4</sup> = 2 x 2 x 2 x 2 </p> </body> </html> |
Örnek: <s> etiketi, doğru veya alakalı olmayan metni belirtir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>YAZILIM KODLAMA</title> </head> <body style="background-color: WhiteSmoke;"> <p><s>Lorem ipsum</s> dolor sit amet consectetur adipisicing elit.</p> </body> </html> |
Başlık Örnekleri
HTML’de 6 tane başlık etiketi mevcuttur. <h1>, <h2> en önemlileri olmak üzere <h3>, <h4>, <h5>, <h6> başlıklar vardır. Önem sırası 1 en önemli 6 en önemsiz olacak şekilde sıralanır.
Örnek: <Hx> etiketlerini kullanma
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>YAZILIM KODLAMA</title> </head> <body style="background-color: WhiteSmoke;"> <h1>BAŞLIK 1</h1> <h2>BAŞLIK 2</h2> <h3>BAŞLIK 3</h3> <h4>BAŞLIK 4</h4> <h5>BAŞLIK 5</h5> <h6>BAŞLIK 6</h6> </body> </html> |
Liste Örnekleri
Listeler içerik gruplandırma etiketlerinin bir parçası olarak kullanılır. HTML’de <ul> , <ol> ve <dl> olmak üzere 3 tip liste mevcuttur. Aşağıdaki örnekler listeler ile yapılan en temel işlemleri göstermektedir.
Daha fazla liste örneği için buraya tıklayın.
Örnek: <ol> ile sırala liste oluşturma
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>YAZILIM KODLAMA</title> </head> <body style="background-color: WhiteSmoke;"> <ol> <li>Kahve</li> <li>Çay</li> <li>Oralet</li> </ol> <ol start="50"> <li>Kahve</li> <li>Çay</li> <li>Oralet</li> </ol> </body> </html> |
Örnek : <ol> etiketi işaretlerini değiştirme. CSS kullanılarak değiştirilir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>YAZILIM KODLAMA</title> </head> <body style="background-color: WhiteSmoke;"> <ol style="list-style-type:upper-roman"> <li>Kahve</li> <li>Çay</li> <li>Oralet</li> </ol> <ol style="list-style-type:lower-alpha"> <li>Kahve</li> <li>Çay</li> <li>Oralet</li> </ol> </body> </html> |
Örnek: <ul> etiketi sırasız liste oluşturur. Daha fazla liste örneği için buraya tıklayın.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>YAZILIM KODLAMA</title> </head> <body style="background-color: WhiteSmoke;"> <ul> <li>Kahve</li> <li>Çay</li> <li>Oralet</li> </ul> </body> </html> |
Örnek: Liste işaretlerini değiştirme
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>YAZILIM KODLAMA</title> </head> <body style="background-color: WhiteSmoke;"> <ul style="list-style-type:circle"> <li>Kahve</li> <li>Çay</li> <li>Oralet</li> </ul> <ul style="list-style-type:disc"> <li>Kahve</li> <li>Çay</li> <li>Oralet</li> </ul> <ul style="list-style-type:square"> <li>Kahve</li> <li>Çay</li> <li>Oralet</li> </ul> </body> </html> |
Örnek: <dl> etiketi, <dt> (terimleri / adları tanımlar) ve <dd> ile birlikte kullanılır (her terimi / adı tanımlar).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>YAZILIM KODLAMA</title> </head> <body style="background-color: WhiteSmoke;"> <dl> <dt>Kahve</dt> <dd>Sade Kahve</dd> <dt>Süt</dt> <dd>Sütlü Soğuk Kahve</dd> </dl> </body> </html> |
Tablo Örnekleri
HTML tabloları, web geliştiricilerinin verileri satırlar ve sütunlar halinde düzenlemesine olanak tanır. Daha fazla tablo örneği için buradaki bağlantıya tıklayın.
Örnek: <table>, <tr> ve <td> etiketlerini kullanarak tablo oluşturun.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>YAZILIM KODLAMA</title> </head> <body style="background-color: WhiteSmoke;"> <table> <tr> <th>Ad</th> <th>Soyad</th> <th>Yaş</th> </tr> <tr> <td>Ali</td> <td>Ergül</td> <td>50</td> </tr> <tr> <td>Ayşe</td> <td>Türk</td> <td>45</td> </tr> <tr> <td>Fatma</td> <td>Duru</td> <td>30</td> </tr> </table> </body> </html> |
Örnek: Ders Programı tablosu oluşturun
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>YAZILIM KODLAMA</title> </head> <body style="background-color: WhiteSmoke;"> <table border="1" width="300px" align="center" cellpadding="20" cellspacing="10"> <tr> <th colspan="10">DERS PROGRAMI</th> </tr> <tr> <th rowspan="7">GÜNLER</th> </tr> <tr> <th></th> <th>1.Ders</th> <th>2.Ders</th> <th>3.Ders</th> <th>4.Ders</th> <th>5.Ders</th> <th>6.Ders</th> <th>7.Ders</th> <th>8.Ders</th> </tr> <tr> <th>Pazartesi</th> <td colspan="4" align="center">WEB TASARIMI</td> <td colspan="2">YABANCI DİL</td> <td>TARİH</td> <td>DİN KÜLTÜRÜ</td> </tr> <tr> <th>Salı</th> <td colspan="2">EDEBİYATI</td> <td colspan="2">FELSEFE</td> <td>TÜRK EDEBİYATI</td> <td colspan="2">BEDEN</td> <td>COĞRAFYA</td> </tr> <tr> <th>Çarşamba</th> <td colspan="2">MATEMATİK</td> <td colspan="2">VERİ TABANI</td> <td>TARİH</td> <td colspan="3" align="center">TÜRK EDEBİYAT</td> </tr> <tr> <th>Perşembe</th> <td>COĞRAFYA</td> <td>DİN KÜLTÜRÜ</td> <td colspan="6" align="center">WEB TASARIMI</td> </tr> <tr> <th>Cuma</th> <td colspan="6" align="center">GRAFİK VE ANİMASYON</td> <td colspan="2">TÜRK EDEBİYAT</td> </tr> </table> </body> </html> |
Örnek: Tablo kimlik kartı oluşturma
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>YAZILIM KODLAMA</title> </head> <body style="background-color: WhiteSmoke;"> <table border="3"> <tr> <th colspan="3">Kimlik Kartı</th> </tr> <tr> <td width="120">Adı</td> <td width="120">Hayri</td> <td width="120" height="100" rowspan="3" align="center"><img src="https://picsum.photos/70/70" height="70" width="90" alt="www.yazilimkodlama.com" border="2"></td> </tr> <tr> <td>Soyadı</td> <td>KOÇMARLAR</td> </tr> <tr> <td>Doğum Tarihi</td> <td>10 Haziran</td> </tr> <tr> <td colspan="2">Bilişim Teknolojileri</td> <td>Sicil No: 123456</td> </tr> </table> </body> </html> |
HTML Resim Örnekleri
HTML’de, görüntüler <img> etiketi ile tanımlanır. Etiketi kullanırken alt ve src özelliklerinin kullanımı zorunludur. Resim Ekleme ile ilgili konu anlatımı için buradaki bağlantıya tıklayın.
Örnek: Basit bir resim ekleyelim.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>YAZILIM KODLAMA</title> </head> <body style="background-color: WhiteSmoke;"> <img src="https://picsum.photos/600/250" alt="Örnek resim"> </body> </html> |
Örnek : <figure> etiketi kullanarak resim ekleyiniz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>YAZILIM KODLAMA</title> </head> <body style="background-color: WhiteSmoke;"> <figure> <img src="https://picsum.photos/600/250" alt="Örnek resim"> <figcaption>Örnek resim sitesinden rastgele bir resim</figcaption> </figure> </body> </html> |
Örnek: Tablo ve Resim etiketi kullanma
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>YAZILIM KODLAMA</title> </head> <body style="background-color: WhiteSmoke;"> <table style="border:1px; background:#bedce3"> <tr> <td><img src="resimler/DSC_0245.jpg" width="250px"></td> <td><img src="resimler/DSC_0248.jpg" width="250px"></td> </tr> <tr> <td><img src="resimler/DSC_0518.jpg" width="250px"></td> <td><img src="resimler/DSC_0390.jpg" width="250px"></td> </tr> </table> </body> </html> |
Bağlantı Örnekleri
HTML’de bağlantı oluşturmak için <a> etiketi kullanılır. Bağlantı ile ilgili detaylı bilgi için HTML Bağlantı Oluşturma yazısını okuyabilirsiniz.
Örnek: yazilimkodlama.com sitesine bağlantı veren bağlantıyı yapalım.
1 2 3 | <a href="https://www.yazilimkodlama.com/" target="blank">Anasayfaya Gidin.</a> |
Örnek: sayfa içindeki #yorumlar bölümüne link verin. (sayfa içi bağlantı verme)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>YAZILIM KODLAMA</title> </head> <body style="background-color: WhiteSmoke;"> <a href="#yorumlar">Yorumlara Git</a> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus ipsum placeat recusandae magnam eligendi consectetur, laborum optio nostrum quod sint aspernatur deserunt ducimus corporis aliquid voluptatum, doloribus autem voluptatem expedita!</p> <p>Voluptatem doloribus iure suscipit veritatis possimus animi sint minima quam illo velit, repellat aliquam! Provident iusto numquam quam repellendus dolore, veritatis aliquam tempora voluptatibus laborum amet tenetur, iste itaque culpa!</p> <p>Possimus voluptatibus aspernatur ex tempora fugit, aut libero nobis molestiae praesentium at. Nesciunt, ullam fugiat? Nemo voluptatum praesentium doloribus enim provident sequi nostrum ipsum, libero minima deserunt repellat autem nam?</p> <p>Perferendis repudiandae quasi in laborum illum, rem magni asperiores! Saepe quos debitis cumque corrupti deleniti aliquid molestiae minima tenetur. Eligendi eaque aliquid ex qui suscipit ipsa eum porro quia minima.</p> <p>Molestias, possimus doloribus. Consequuntur laborum possimus reiciendis labore voluptate similique neque magnam dignissimos sed praesentium minima, obcaecati vitae, odio, et quasi enim quae quos alias perferendis repudiandae? Fuga, iste molestiae?</p> <p>Aperiam, repellat modi aliquam beatae vitae, voluptates accusamus odio atque ab quidem explicabo est numquam voluptas eligendi commodi aliquid minus eum pariatur placeat incidunt quisquam quaerat, mollitia suscipit. Aliquam, asperiores!</p> <p>Esse non sequi similique dolor pariatur illo, quidem fugiat repudiandae impedit dolorem vitae incidunt, repellendus aliquid inventore exercitationem qui eveniet? Cupiditate, nesciunt doloribus? Accusantium, architecto doloribus! Totam nostrum perferendis sint!</p> <p>Veniam id tempore ratione placeat dicta quam facilis autem enim sapiente. Assumenda quod a facilis ab similique. Omnis fugit libero praesentium maiores, qui dolores ducimus magni accusantium, ipsa provident ipsam!</p> <p>Optio, sit doloremque. Obcaecati libero earum similique dolore itaque ratione laborum voluptate accusantium dolores doloribus consectetur impedit, numquam quod, a omnis natus atque! Ab neque blanditiis accusantium ratione modi eaque?</p> <p>Voluptatem, corrupti natus autem, cum voluptatibus officia accusamus nostrum laborum consectetur nulla quos voluptates saepe excepturi asperiores labore est! Consequatur ratione temporibus voluptatum amet ad sapiente obcaecati rem earum blanditiis!</p> <p>Quod non, iure ullam ducimus explicabo quidem suscipit. Dolor itaque provident quam deleniti consequatur, delectus nesciunt possimus veritatis eius ullam harum sint vitae nulla sed sequi cum officiis aperiam magni?</p> <p>Similique, ullam amet possimus quis, fugiat exercitationem delectus eaque est nostrum quod expedita repudiandae molestiae provident sequi id minus repellat corrupti. Eos ut dignissimos eligendi corporis unde? Sequi, error molestias.</p> <p>Odit eius pariatur nobis eos at est dicta, quia quaerat magni itaque illum, excepturi architecto obcaecati ullam cumque repellendus alias id totam et. Aliquam porro voluptatem voluptatum animi tenetur voluptas?</p> <p>Facilis culpa necessitatibus exercitationem a ad facere, repellendus ea at dolore ipsam, est tempora. Enim hic odio accusamus, maiores vel sunt commodi consequuntur, sequi similique quis inventore in repudiandae voluptas.</p> <p>Voluptates ea ad debitis incidunt at quod dolore aperiam illo optio corrupti, eos similique magnam, ipsa voluptatum architecto reprehenderit, recusandae maxime enim modi quidem error! Asperiores beatae quam repellendus nesciunt!</p> <p>Dicta illo accusantium totam! Optio labore sunt laudantium architecto iure omnis asperiores earum? Voluptatem, iure ea placeat magnam rerum qui neque minima reprehenderit, temporibus corporis exercitationem. In necessitatibus quia labore!</p> <p>Repudiandae fugit dignissimos deserunt magnam alias molestias nobis animi veniam incidunt obcaecati optio ipsa quam suscipit, facere corporis quas delectus quisquam maiores culpa unde. Similique in dignissimos nam deleniti! Fuga!</p> <p>Iste harum praesentium culpa, aliquam corrupti blanditiis voluptatibus molestias? Magnam odit quia minima ratione labore, ipsam aliquam eaque adipisci repellendus molestias eum unde dolores cupiditate eos minus ut cumque qui?</p> <p>Quod quo perferendis tenetur alias error dolore tempora mollitia quae et pariatur tempore dignissimos, expedita ab voluptatum beatae id minima consequatur eum iste, quia dolores! Officiis temporibus tempora ut perferendis!</p> <p>Et minus aut vero quos accusamus, neque, ducimus tempore blanditiis quas laudantium beatae harum. Dolorem fuga vero molestias repudiandae quod itaque odit rerum similique. Corporis eius omnis eligendi doloremque voluptate.</p> <p>Deleniti cumque minus ex! Repellendus consequatur molestias laborum rem debitis quas cupiditate reprehenderit amet dolor aliquam, facere enim repudiandae placeat ex. Non quidem tempore, porro illo similique error officiis repudiandae.</p> <p>Magni amet reprehenderit, fuga dolores vero ipsa beatae nam quod natus recusandae eum odio deserunt libero sequi dicta accusantium, repellendus quos autem? Harum quae consectetur minima, culpa illum assumenda iste!</p> <p>Perspiciatis voluptates, maxime esse impedit nobis illum atque saepe adipisci molestiae harum explicabo, iste natus sit aut totam, nulla inventore odio aliquam. Velit dolorum quas provident deserunt soluta exercitationem voluptate!</p> <p>Laudantium quae in esse. Provident aliquam laboriosam tenetur ad assumenda. Perspiciatis iusto ut nam, itaque in illo a cum necessitatibus quibusdam corrupti natus. Vel sunt velit laudantium voluptas officiis ipsa?</p> <p>Delectus, ipsum. Itaque odio maxime cum dolor aperiam ratione aut sapiente delectus natus fugit qui aliquid nulla architecto accusantium ex in illo quaerat ipsum aliquam, voluptatem exercitationem. Vitae, officiis eveniet.</p> <p>Quam quis cumque temporibus laboriosam sapiente assumenda voluptatibus aliquam doloribus sequi vitae autem quia, ratione hic maiores, libero quas eos nobis. Eligendi laborum at possimus id accusantium amet consequuntur voluptatem?</p> <p>Maxime doloribus ut voluptate explicabo. Optio dignissimos quibusdam aliquam saepe! Ipsam soluta, eveniet officiis libero earum distinctio vero est a sequi sint et optio, quia sunt maxime quidem dignissimos illum?</p> <p>Ipsum, aperiam possimus tenetur repudiandae aut odit qui quaerat quam rem debitis placeat optio explicabo facere adipisci quae a expedita. Delectus deleniti velit laboriosam dolorem expedita repellendus quasi possimus neque.</p> <p>Fugiat dolor, quod odio dicta animi similique laudantium voluptate dolores. Quidem, veniam sit voluptates mollitia unde molestiae ipsum ratione velit neque debitis architecto ipsam obcaecati itaque eius accusantium ex est!</p> <p>Repudiandae consectetur ducimus eaque blanditiis pariatur optio a illo unde atque, eum fugit nam ut est iusto iste ipsa voluptate cupiditate, amet repellat deserunt eos! Quisquam optio cupiditate aperiam vitae!</p> <p>Doloremque iusto ducimus cum recusandae sunt accusantium nihil voluptates at quam consequuntur accusamus facere aperiam iste error non, quasi fugiat aliquid eius est nisi molestiae ratione! Exercitationem iusto architecto enim?</p> <p>Placeat facere aperiam autem! Deserunt perferendis natus tempore soluta laborum! Voluptatum aperiam tempora impedit saepe, rerum quibusdam ullam dolores, perspiciatis nam ratione quo reiciendis voluptas illo quas! Unde, commodi earum?</p> <p>Cupiditate, architecto ab voluptates laborum reiciendis exercitationem sunt consequatur aperiam qui. Vero sit velit eius, rerum ipsum distinctio neque, repellat enim exercitationem possimus odit repellendus maxime ea, eligendi delectus cumque.</p> <p>Nisi illum id expedita autem consectetur error accusamus delectus odio officiis, porro, nobis obcaecati iste repellendus doloremque rem enim aliquid dolor reprehenderit! Laborum laudantium eos quibusdam assumenda ipsum deserunt nisi.</p> <p>Sapiente perferendis, mollitia aut libero obcaecati cumque doloribus accusamus alias maxime nobis architecto iste non explicabo quis dolores. Quia modi voluptatum nam natus voluptas vitae numquam ipsa minima velit? Maxime!</p> <p>Amet iure provident quis in nulla quod, fugiat tempore ipsum perspiciatis reiciendis optio voluptas perferendis esse laudantium aliquam, eligendi sit laborum. Fugiat amet aspernatur ut corporis iste laborum. Illum, asperiores?</p> <p>Veritatis labore amet sunt molestiae nam quidem debitis exercitationem, enim est eveniet nulla inventore numquam maiores natus blanditiis ipsa quae facere sapiente. Quibusdam sed consequatur aperiam autem fuga voluptate laborum.</p> <p>Laboriosam accusantium pariatur veritatis velit incidunt, nam nesciunt praesentium, aliquid molestiae architecto non harum vel totam voluptate. Consequatur nesciunt quam, ea, deserunt reprehenderit rerum omnis quis non, temporibus alias optio!</p> <p>Sequi, dolores. Consequuntur, cumque. Odit, mollitia accusamus. Quia velit omnis et, mollitia magnam sequi ea pariatur aperiam eius aut assumenda labore recusandae impedit! Aperiam quo repellat cum odit vitae quidem.</p> <p>Quo, tenetur aliquid. In quis, fugiat autem doloremque tempore placeat itaque! Ipsam ex perferendis vel reprehenderit eveniet sequi laborum sit rerum nam facilis, deserunt quisquam similique quos. Velit, dicta incidunt.</p> <h2 id="yorumlar">Yorumlar</h2> <p>Bu bölüm yorumlar kısmını göstermektedir.</p> <p>Bu bölüm yorumlar kısmını göstermektedir.</p> <p>Bu bölüm yorumlar kısmını göstermektedir.</p> <p>Bu bölüm yorumlar kısmını göstermektedir.</p> <p>Bu bölüm yorumlar kısmını göstermektedir.</p> <p>Bu bölüm yorumlar kısmını göstermektedir.</p> <p>Bu bölüm yorumlar kısmını göstermektedir.</p> </body> </html> |
Örnek: Hakkımızda sayfasına bağlantı verin.
1 2 3 | <a href="hakkimizda.html">Hakkımızda Sayfasını Aç</a> |
Örnek: Harici sayfaya link verin.
1 2 3 4 5 | <a href="https://www.yazilimkodlama.net">YAZILIM KODLAMA PROGRAMLAMA </a> <a href="http://www.google.com.tr">Arama Motoru</a> |
Örnek: mail adresine ve telefona link verin.
1 2 3 4 5 | <a href="mailto:ornek@hotmail.com">Örnek Adlı kişinin mail adresi</a> <a href="+902121001010">Benim Numaram Değil (+902121001010)</a> |
Örnek: download özelliği ile bağlantı verilen dosyayı indirin.
1 2 3 | <a href="takvim.pdf" download>Dosyayı indir</a> |
Form Örnekleri
HTML’de form nesneleri kullanıcı ile etkileşim elamanlarıdır. Form Oluşturma işlemi bir <form> etiketi içine diğer tüm form elemanları eklenerek yapılır. Daha fazla form örneği için buradaki bağlantıya tıklayın.
Bakınız: HTML Kodları, Örnekleri ve Anlamları
Örnek:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>YAZILIM KODLAMA</title> </head> <body style="background-color: WhiteSmoke;"> <form action="www.yazilimkodlama.com" method="get" > <table border="0"> <tr> <td>Ad :</td> <td><input type="text" name="ad" id="ad" required placeholder="Lütfen Adınızı Girin"></td> </tr> <tr> <td>Soyad :</td> <td><input type="text"name="soyad"id="soyad" required placeholder="Lütfen Soyadınızı Girin"></td> </tr> <tr> <td colspan="2"> FUTBOL<input type="checkbox"name="hobi1" id="hobi1"> YÜZME<input type="checkbox"name="hobi2" id="hobi2"> KARATE<input type="checkbox"name="hobi3" id="hobi3"> KİTAP<input type="checkbox"name="hobi4" id="hobi4"> </td> </tr> <tr> <td colspan="2"> KADIN<input type="radio"name="cinsiyet" id="cinsiyet" value="kadın"> ERKEK<input type="radio" name="cinsiyet" id="cinsiyet" value="erkek"> </td> </tr> <tr> <td>YAŞ</td> <td><input type="number" name="yas" id="yas" min="18" max="88"></td> </tr> <tr> <td>MAİL:</td> <td><input type="email" name="mail" id="mail" required></td> </tr> <tr> <td colspan="2"> <input type="submit" name="kaydet" id="kaydet" value="KAYDET"> <input type="reset" name="sil" id="sil" value="TEMİZLE"> </td> </tr> </table> </form> </body> </html> |
Örnek:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>YAZILIM KODLAMA</title> </head> <body style="background-color: WhiteSmoke;"> <form> <fieldset> <legend> iletişim Formu </legend> <table border="1"> <tr> <td>Adınız Soyadınız : </td> <td><input type="text" name="adsoyad"> </td> </tr> <tr> <td>E-Posta Adresiniz : </td> <td><input type="text" name="mail"> </td> </tr> <tr> <td>Telefonunuz : </td> <td><input type="text" name="mail" placeholder="(___)(_______)"> </td> </tr> <tr> <td>TC Kimlik Numaranız : </td> <td><input type="text" name="tckimlik" placeholder="11 hane olmalıdır."> </td> </tr> <tr> <td>Bildiğiniz Yabancı Diller</td> <td> <label for="ing">İngilizce</label><input type="checkbox" id="ing" value="ing"><br> <label for="alm">Almanca</label><input type="checkbox" id="alm" value="alm"><br> <label for="fra">Fransızca</label><input type="checkbox" id="fra" value="fra"> </td> </tr> <tr> <td>Mesajınız : </td> <td><textarea cols="22" rows="7" name="mesaj"></textarea> </td> </tr> </table> </fieldset> </form> </body> </html> |
