HTML Etiketleri
İçindekiler
HTML, web sitelerinin oluşturulması ve biçimlendirilmesi için kullanılan bir işaretleme dilidir. HTML etiketleri, web tarayıcılarına içeriğin nasıl gösterileceğini anlatan işaretlerdir. HTML etiketleri, açılış ve kapanış etiketi olmak üzere iki parçadan oluşur. Açılış etiketi (<tag>) ve kapanış etiketi (</tag>) şeklinde kullanılır. İşte HTML’de yaygın olarak kullanılan bazı etiketler:
- <p></p>: Paragraf etiketi, bir paragraf oluşturur.
- <h1></h1> – <h6></h6>: Başlık etiketleri, farklı seviyelerde başlık oluşturur.
- <a></a>: Bağlantı etiketi, başka bir sayfaya veya kaynağa bağlantı sağlar.
- <img>: Resim etiketi, bir resim ekler.
- <table></table>: Tablo etiketi, verilerin tablo halinde gösterilmesini sağlar.
- <form></form>: Form etiketi, kullanıcıdan veri girişi almayı sağlar.
Bu etiketlerin yanı sıra daha pek çok HTML etiketi bulunmaktadır. Her bir etiketin belirlenmiş bir amacı ve kullanım şekli vardır. Örneğin, <p> etiketi metni paragraf olarak biçimlendirirken, <a> etiketi bir bağlantı oluşturur. Doğru etiketleri kullanmak, web sitelerinin düzgün görüntülenmesini ve yönlendirilmesini sağlar.
HTML Dosya Oluşturma
HTML, bir web sayfasının yapılandırılması ve görselleştirilmesi için kullanılan temel bir işaret dilidir. HTML’de sayfanın metinleri, resimleri, videoları ve diğer öğeleri yerleştirmek için çeşitli etiketler kullanılır. Bu blog yazısında, HTML dosya oluşturma süreci ve bu süreçte kullanılan bazı önemli etiketler hakkında daha fazla bilgi edineceksiniz.
HTML dosyası oluşturmak için bir metin düzenleyici veya HTML düzenleme yazılımı kullanabilirsiniz. Bir HTML dosyası oluşturduktan sonra, dosyanın uzantısının “.html” veya “.htm” olduğundan emin olmalısınız.
HTML dosyanızın içeriğini oluşturmak için çeşitli etiketler kullanabilirsiniz. Örneğin, <p> etiketi bir paragrafı belirtmek için kullanılır. İçeriği daha iyi yapılandırmak için <h1>, <h2> veya <h3> gibi başlık etiketlerini kullanabilirsiniz. Aynı zamanda, metninizi<strong> etiketiyle kalınlaştırabilir veya <em> etiketiyle vurgulayabilirsiniz.
HTML dosyanıza resim eklemek için ise <img> etiketini kullanabilirsiniz. Bu etiketin “src” özelliği, görüntünün kaynak dosyasının URL’sini belirtir. Ayrıca, resme bir alternatif metin eklemek için “alt” özelliğini kullanabilirsiniz.
Bir liste oluşturmak için <ul> veya <ol> etiketlerini kullanabilirsiniz. <ul> etiketi, sırasız bir liste oluşturmak için kullanılırken, <ol> etiketi sıralı bir liste oluşturmak için kullanılır. Listeye öğeler eklemek için <li> etiketini kullanabilirsiniz.
| Etiket | Açıklama |
|---|---|
| <p> | Bir paragrafı belirtmek için kullanılır. |
| <img> | Bir resim eklemek için kullanılır. |
| <ul>/<ol> | Bir liste oluşturmak için kullanılır. |
| <li> | Listeye öğe eklemek için kullanılır. |
HTML dosya oluşturma süreci oldukça esnektir ve sayfanızı istediğiniz gibi özelleştirebilirsiniz. İyi bir HTML temel bilgisi edinmek, başarılı bir web geliştirici olmanın temel adımlarından biridir.
Metin Formatlama İşlemleri
HTML’de metin formatlama işlemleri, metnin görüntülenme şeklini değiştirme ve vurgulama işlevlerini içerir. Metin formatlama sayesinde, metni kalın, italik veya altı çizili gibi farklı biçimlerde gösterebiliriz. HTML etiketleri kullanarak metin formatlama işlemlerini gerçekleştirebiliriz.
Birinci yöntem olarak, <b> etiketi ile metni kalın hale getirebiliriz. Örneğin: <b>Bu metin kalın</b> şeklinde kullanabilirsiniz.
İkinci yöntem olarak, <i> etiketi ile metni italik hale getirebiliriz. Örneğin: <i>Bu metin italik</i> şeklinde kullanabilirsiniz.
Üçüncü yöntem olarak, <u> etiketi ile metni altı çizili hale getirebiliriz. Örneğin: <u>Bu metin altı çizili</u> şeklinde kullanabilirsiniz.
Metin formatlama işlemleri, metni görsel olarak daha etkileyici hale getirmek ve dikkat çekmek için kullanılır. HTML etiketleri sayesinde metnin anlamı vurgulanır ve kullanıcı tarafından daha kolay okunabilir hale gelir.
Resim Eklemek
Bir web sitesinin görsel açıdan çekici olması, kullanıcı deneyimini artırmak için oldukça önemlidir. Bu nedenle, web sayfalarında resimlerin doğru şekilde eklenmesi gerekmektedir. HTML, resim eklemek için <img> etiketini kullanır. Bu etiket, resmi doğru boyutlarda, uygun konumda ve alternatif metinlerle birlikte göstermenizi sağlar.
Resim eklerken src özelliğini kullanarak resmin URL’sini belirtmelisiniz. Ayrıca alt özelliğiyle birlikte resim için alternatif metni de eklemeniz önemlidir. Eğer resim yüklenemezse veya görüntülenemezse, bu alternatif metinler kullanıcıya resmin anlamını aktarabilir.
- src: Resmin dosya yolunu veya URL’sini belirtir.
- alt: Resim açıklamasını içeren alternatif bir metin belirtir.
Aşağıdaki örnek, bir resmin nasıl HTML kodu içine eklenmesi gerektiğini göstermektedir:
| Kod | Açıklama |
|---|---|
| <img src=”resim.jpg” alt=”Doğa manzarası”> | Web sayfasına “resim.jpg” isimli bir resim ekleyecektir. Eğer resim yüklenemezse veya görüntülenemezse “Doğa manzarası” alternatif metni gösterilecektir. |
Bu şekilde, web sayfalarınıza resimler ekleyerek, kullanıcıları görsel açıdan etkileyebilir ve daha çekici bir deneyim sunabilirsiniz. Resimlerinizi doğru boyutlarda ve uygun formatta tutarak sayfa yüklemelerini optimize etmeyi de unutmayın.
Hiperlink Ekleme
HTML’de hiperlink eklemek, web sayfalarını daha etkileşimli hale getiren ve kullanıcılara diğer sayfalara veya kaynaklara kolayca ulaşma imkanı veren önemli bir işlemdir. Bir hiperlink, belirli bir metni ya da bir görseli tıklandığında başka bir web sayfasına veya aynı sayfadaki farklı bir bölüme yönlendiren bir bağlantıdır. HTML’de hiperlink oluşturmak için <a> etiketi kullanılır.
Bir hiperlink oluştururken, ilk olarak href özelliğini kullanarak bağlantının hedefini belirtmemiz gerekir. Bu özellik, tıklanınca yönlendirilecek olan URL veya sayfanın konumunu içerir. Örneğin:
- <a href=”http://www.example.com”>Başka bir web sayfasına yönlendiren bağlantı.</a>
- <a href=”#section2″>Aynı sayfadaki farklı bir bölüme yönlendiren bağlantı.</a>
Bu örneklerde, ilk hiperlink kullanıcının başka bir web sayfasına yönlendirilmesi için kullanılırken, ikinci hiperlink aynı sayfadaki farklı bir bölüme yönlendirilmektedir.
| Hiperlink Etiketleri | Açıklama |
|---|---|
| <a href=”url”>…</a> | Belirtilen URL’ye sahip bir web sayfasına yönlendirir. |
| <a href=”#section”>…</a> | Aynı sayfadaki belirli bir bölüme yönlendirir. |
| <a href=”mailto:email”>…</a> | Belirtilen e-posta adresine yeni bir e-posta oluşturur. |
Tablolar Oluşturma ve Biçimlendirme
HTML’de tablolar oluşturmak ve biçimlendirmek, web sayfalarınızı düzenli ve görsel olarak daha çekici hale getirmenin etkili bir yoludur. Tablolar, bilgileri sıralamak, verileri karşılaştırmak veya düzenlemek için kullanılır. HTML tablolarını oluşturmak ve biçimlendirmek oldukça kolaydır.
HTML’de bir tablo oluşturmak için, <table> etiketini kullanırız. Tablonun içeriğini oluşturmak için <tr> (satır) etiketi kullanılır. Her satırın hücrelerini oluşturmak için ise <td> (tablo hücresi) etiketini kullanırız. Bunlar, temel tablo yapısını oluşturur.
Tablolara biçim vermek için <table>, <tr> ve <td> etiketlerinin yanı sıra CSS kullanabiliriz. Stil ve biçimlendirme seçeneklerini daha fazla kontrol etmek için class veya id gibi CSS seçicilerini ekleyebiliriz. Örneğin, tablonun arka plan rengini değiştirmek için CSS kullanabiliriz.
| TC Kimlik Numarası | Ad Soyad | Yaş |
| 12345678901 | Ahmet Yılmaz | 25 |
| 98765432109 | Ayşe Demir | 30 |
Yukarıdaki örnekte, bir öğrenci tablosunu görebilirsiniz. <table>, <tr> ve <td> etiketleri kullanılarak oluşturulmuştur. İlk satır, başlık olarak kullanılmak üzere kalınlaştırılmıştır. Bilgiler sütunlara yerleştirilmiş ve sıralanmıştır.
Formlar Oluşturma ve Veri Gönderme
Formlar, web sitelerinde kullanıcıların bilgilerini toplamak için kullanılan önemli bir bileşendir. Formlar, kullanıcılardan çeşitli girişler talep edebilir ve bu verileri sunucuya gönderebilir. Bu sayede, kullanıcıların iletişim bilgilerini toplamak, anketler yapmak veya kullanıcıların hesap bilgilerini güncellemelerini sağlamak gibi çeşitli amaçlar için kullanılabilir.
HTML, form oluşturmak ve veri göndermek için bir dizi etikete sahiptir. En önemli form etiketi, <form> etiketidir. Bu etiket, formun başlangıcını ve bitişini belirtir. <input> etiketi, kullanıcıdan giriş talep etmek için kullanılır ve farklı tiplerde giriş alanları oluşturmak için kullanılabilir. Örneğin, metin girişi, şifre girişi, tarih seçimi gibi farklı türlerde input alanları oluşturulabilir.
Bunun yanı sıra, formdaki verileri sunucuya göndermek için <button> veya <input type=”submit”> gibi buton etiketleri kullanılır. Bu etiketler, kullanıcının formu göndermek için tıkladığı butonları temsil eder. Form verilerinin gönderilmesi, kullanıcının belirli bir URL’ye yönlendirileceği veya verilerin sunucuya JavaScript veya AJAX gibi yöntemlerle gönderileceği bir gerçekleştirilebilir.
- <form> etiketi, formu başlatmak ve bitirmek için kullanılır.
- <input> etiketi, kullanıcıdan giriş talep etmek için kullanılır.
- <button> etiketi, formu göndermek için bir buton oluşturur.
- <input type=”submit”> etiketi, formu göndermek için bir buton oluşturur.
| Etiket | Açıklama |
|---|---|
| <form> | Formu başlatmak ve bitirmek için kullanılır. |
| <input> | Kullanıcıdan giriş talep etmek için kullanılır. |
| <button> | Formu göndermek için bir buton oluşturur. |
| <input type=”submit”> | Formu göndermek için bir buton oluşturur. |
Sık Sorulan Sorular
HTML etiketleri nedir ve neden önemlidir?
HTML etiketleri, web sayfalarının yapısını belirlemek için kullanılan işaretlerdir. Etiketler, metinleri biçimlendirme, bağlantılar oluşturma, resimler eklemek ve diğer birçok işlemi yapmak için kullanılır. HTML etiketlerinin doğru bir şekilde kullanılması, web sayfasının düzgün bir şekilde görüntülenmesini ve arama motorlarında daha iyi sıralama almasını sağlar.
HTML dosyası nasıl oluşturulur?
HTML dosyası, bir metin düzenleyici programı kullanılarak oluşturulabilir. Dosya, “.html” uzantısıyla kaydedilir ve içinde HTML etiketleri kullanılarak içerik oluşturulur. Web tarayıcısında açıldığında, HTML dosyası web sayfasını görüntüler.
Metin formatlama işlemleri nelerdir?
HTML, metinleri çeşitli biçimlerde göstermek için kullanılan etiketler sunar. Başlıklar oluşturmak, paragrafları ayırmak, metinleri kalın veya italik yapmak, listeler oluşturmak ve daha fazlası için metin formatlama etiketleri kullanılabilir.
Resim nasıl eklenir?
Resim eklemek için HTML “img” etiketi kullanılır. Bu etiketin “src” özelliği, görüntü dosyasının URL’sini belirtir. Ayrıca, “alt” özelliği resmin açıklamasını içerir ve tarayıcılar tarafından görüntü yüklenemezse yerine gösterilir.
Hiperlink nasıl eklenir?
Hiperlink eklemek için HTML “a” etiketi kullanılır. Bu etiketin “href” özelliği, bağlantının URL’sini belirtir. Bağlantının metnini belirtmek için etiket içine metin eklenir.
Tablolar nasıl oluşturulur ve biçimlendirilir?
HTML “table” etiketi kullanılarak tablolar oluşturulur. Tablolar, “tr” (satır) ve “td” (hücre) etiketleri kullanılarak yapılır. Tabloya başlık eklemek için “th” etiketi kullanılır ve “colspan” veya “rowspan” özelliği ile hücreleri birleştirme veya genişletme işlemi yapılabilir. Tablolar için CSS kullanarak biçimlendirme işlemi yapılabilir.
Formlar nasıl oluşturulur ve veri gönderilir?
HTML “form” etiketi kullanılarak formlar oluşturulur. Form içindeki giriş alanları, kullanıcının veri girmesini sağlar. Formun “action” özelliği, verilerin gönderileceği URL’yi belirtir.