Web geliştirmeye yeni başlayanlar için WEB NEDİR? İNTERNETİN TEMELLERİ yazımızı daha önce yazmıştık. Şimdi de konumuz HTML. HTML, temel bir taşıyıcı olarak işlev görür. HTML (Hypertext Markup Language), web sayfalarının yapısını belirleyen bir işaretleme dilidir. Bir web sayfasını oluşturmak için HTML kullanmak, içeriği yapılandırmak ve düzenlemek için temel bir araçtır. Bu yazıda, HTML’nin temel kavramlarına odaklanarak, web geliştirme yolculuğunuza adım atmanıza yardımcı olacak bir rehber sunacağım.
1. Etiketler: Temel Taşlar
HTML’de etiketler, web sayfalarını oluşturan yapı taşlarıdır. Her bir etiket, belirli bir işlevi yerine getirir ve içeriği belirli bir şekilde biçimlendirir. Başlık etiketleri (<h1>, <h2>, <h3>), metin etiketleri (<p>, <span>, <strong>, <em>), bağlantı etiketleri (<a href="">), ve resim etiketi (<img src="">) gibi birçok farklı etiket türü vardır.
Başlık etiketleri, sayfanın başlığını belirtmek için kullanılır ve önem sırasına göre numaralandırılır. Örneğin, <h1> en önemli başlığı, <h2> daha az önemli bir başlığı temsil eder.
Metin etiketleri, paragraf oluşturmak, metni vurgulamak veya kalınlaştırmak gibi çeşitli metin biçimleri uygulamak için kullanılır. <p> etiketi paragrafları tanımlarken, <strong> ve <em> etiketleri metni kalınlaştırmak ve vurgulamak için kullanılır.
Bağlantı etiketleri, başka bir web sayfasına veya dosyaya bağlantılar oluşturmak için kullanılır. <a href=""> etiketi, bağlantının hedefini belirtir ve kullanıcıyı o hedefe yönlendirir.
Resim etiketi, bir web sayfasına resim eklemek için kullanılır. <img src=""> etiketi, resmin dosya yolunu belirtir ve sayfada görüntülenmesini sağlar.
2. HTML Belgesi Oluşturma
Temel bir HTML belgesi, <html>, <head> ve <body> gibi ana etiketlerden oluşur. <html> etiketi, belgenin başlangıcını ve bitişini belirtir. <head> etiketi, belgenin başlığını ve meta bilgilerini içerirken, <body> etiketi, sayfanın görünen içeriğini içerir.
Başlık ve paragraf oluşturmak için <h1> ve <p> gibi etiketler kullanırız. Örneğin:
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <head> <title>HTML NEDİR VE NASIL KULLANILIR: HTML TEMELLERİ</title> </head> <body> <h1>Hoş Geldiniz!</h1> <p>Bu rehberde HTML'nin temellerini öğreneceksiniz.</p> </body> </html> |
Listeler, sıralı ve sırasız olmak üzere iki türde yapabiliriz. Sırasız listeler <ul> etiketiyle, sıralı listeler ise <ol> etiketiyle yapılır. Örnek vermek gerekirse:
1 2 3 4 5 6 7 8 9 | <ul> <li>Madde 1</li> <li>Madde 2</li> </ul> <ol> <li>İlk adım</li> <li>İkinci adım</li> </ol> |
Tablolar, verileri düzenlemek için kullanılır. <table>, <tr>, <td> ve <th> gibi etiketlerle tablolar oluşturabiliriz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <table> <tr> <th>Ad</th> <th>Soyad</th> </tr> <tr> <td>Yahya</td> <td>TEZCAN</td> </tr> <tr> <td>Jeff</td> <td>BEZOS</td> </tr> <tr> <td>Elon</td> <td>MUSK</td> </tr> </table> |
3. Sayfa Düzeni: Bölümleme ve Stil
Sayfa düzeni, HTML ile içerik bölmek ve düzenlemek için önemlidir. <div> ve <span> gibi etiketler, sayfayı mantıksal olarak bölmenizi sağlar ve CSS ile stil uygulamanıza olanak tanır.
Örneğin, bir sayfayı üst, orta ve alt bölümlere ayırmak için <div> etiketi kullanabiliriz:
1 2 3 | <div id="ust">Üst Kısım</div> <div id="orta">Orta Kısım</div> <div id="alt">Alt Kısım</div> |
CSS (Cascading Style Sheets) ile, HTML belgesine stil uygulayabiliriz. Örneğin, metin rengini ve boyutunu değiştirmek için:
1 2 3 4 | #orta { color: blue; font-size: 18px; } |
4. HTML Web İçeriği: İleri Düzey Etiketler ve Meta Bilgileri
HTML, basit metin ve resimlerden daha fazlasını destekler. Formlar, iframe’ler, video ve ses gibi öğeleri eklemek için özel etiketler vardır.
Formlar, kullanıcıların veri girmesini ve göndermesini sağlar. <form>, <input>, <textarea> gibi etiketlerle formlar oluşturulabilir.
İframe’leri, başka bir web sayfasını mevcut sayfaya yerleştirmek için kullanıyoruz.Örneğin:
1 | <iframe width="1280" height="720" src="https://www.yahyatzcn.com"></iframe> |
Video ve ses dosyalarını, <video> ve <audio> etiketleriyle ekleriz.
1 2 3 4 | <video controls> <source src="klip.mp4" type="video/mp4"> Tarayıcınız video etiketini desteklemiyor. </video> |
Meta etiketlerini, sayfanın karakter setini belirtmek, açıklama eklemek ve arama motorları için bilgi sağlamak için kullanırız.Örneğin
1 2 | <meta charset="UTF-8"> <meta name="description" content="Web nedir? İnternet çağında webin önemi ve rolü hakkında samimi bir inceleme. Temel kavramlar, web tasarımı, geliştirme süreçleri ve dahası."> |
5. Biçimlendirme: Stil ve Tasarım
HTML, içeriği yapılandırmak için kullanılırken, CSS sayfaya stil ve tasarım ekler. CSS, HTML etiketlerine ve sınıflarına özel stiller uygular.
Örneğin, tüm başlıkları kırmızı yapmak için:
1 2 3 | h1 { color: red; } |
Ya da belirli bir sınıfa sahip paragrafları italik yapmak için:
1 2 3 | .paragraf-italik { font-style: italic; } |
Sonuç: HTML İle Web Geliştirme Yolculuğuna Başlangıç
HTML öğrenmek, web geliştirme dünyasına giriş yapmanın ilk adımıdır. Bu rehberde, HTML’nin temel kavramlarını kapsamlı bir şekilde ele aldık ve başlangıç seviyesinden ileri düzeye doğru adım atmaya çalıştık.
Öğrenme sürecinde sabırlı olun, bol bol pratik yapın ve ilerledikçe CSS ve JavaScript gibi diğer teknolojileri de keşfetmeye zaman ayırın. Unutmayın, her büyük web geliştiricisi bir zamanlar HTML’ye yeni başlayan biriydi!.
Teşekkürler çok faydalı oldu. 👏👍