HTML: HTML Etiketleri
HTML kodlarını dikkatlice incelerseniz etiketlerden oluşan bir yapıda olduğunu göreceksiniz. HTML etiketleri büyüktür ve küçüktür işaretleri arasında belirtilir. Her etiket bir komut yada yönerge belirtir.
İnternet tarayıcı bu işaretleri gördüğünde, bunlar arasındaki metnin yorumlanması gereken bir metin/komut olduğunu algılar.
Bazı etiketler tek başına kullanılırken, bazılarını başlangıç ve bitiş etiketi şeklinde kullanmak gerekir. Bitiş etiketleri başlangıç etiketine kesme işaretinin “/” eklenmesiyle yapılır.
1 2 | <b></b> : Yazıyı bold yap <br> : Satırbaşı yap |
Örn:
Paint Yazılım <b>HTML Eğitimi</b> HTML Etiket konusu.
Kullanıcının tarayıcıda gördüğü:
Paint Yazılım HTML Eğitimi HTML Etiket konusu.
Görüldüğü üzere, tarayıcı HTML kodunu ekranda görüntülerken, etiketsiz kısımları aynen yazdı. Etiketleri ise yorumladı. <b> başlangıç etiketini gördüğünde, sonraki metnin bold olarak yazılması gerektiğini algıladı ve “Bilgisayar” kelimesini bold(kalın) olarak yazdı. </b> bitiş etiketini gördüğünde ise bold olarak yazmaktan vazgeçti ve normal yazıya döndü.
- HTML etiketleri matematikteki parantezler gibidir. Açılmış bir etiket mutlaka kapatılmalıdır ki, tarayıcılar HTML kodlarını düzgün yorumlasınlar ve sayfalar kullanıcıların ekranlarında düzgün görünsün.
- Hatalı etiketler internet tarayıcılar tarafından göz ardı edilirler. Tarayıcılar bu etiketler yokmuş gibi davranır ve sayfayı ona göre yorumlar. Bu durum bazen sorun olmayabilir, fakat çoğu zaman web sayfasında istenmeyen görünümlere sebep olur.
- Bu tür sorunların kısmen önüne geçmek için, etiketleri yazarken başlangıç ve bitiş etiketlerini ard-arda yazıp sonra aralarını doldurmak en doğru yöntemdir. Böylece etiketleri kapatmayı unutmanın önüne geçilmiş olur.
- Etiketleri yazarken büyük harf yada küçük harf olması fark etmez. Fakat yazım tekniği olarak küçük harf kullanılması daha uygundur.
- HTML dosyaları temel olarak başlangıç ve gövde bölümlerinden oluşurlar. Kod yazarken önce HTML olduğunu belirtmek, ardından başlangıç (head) kısmını doldurmak gerekir. Daha sonra ise gövde metnini (body) yazmalıdır.
1 2 3 4 5 6 7 8 | <html> <head> <!-- Başlangıç Metni / Head Section --> </head> <body> <!-- Gövde Metni / Body Section --> </body> </html> |
<head> Etiketi
Başlangıç metni içine, yani <head> ve </head> etiketleri arasına yazılanlar sayfa hakkında bilgiler içerir. Anahtar kelimeler (meta), sayfanın başlığı (title) ve sayfanın karakter seti gibi bilgiler burada yer alır.
1 2 3 4 | <head> <title>Paint Yazılım</title> <meta name="description" content="Paintle herşey yeniden tasarlanıyor."> </head> |
Arama motorlarında iyi bir sıralama edinmek için meta etiketleri içerisine yazdığımız anahtar kelimeler çok önemlidir. Örneğin “Paint.com.tr” sitesinin Meta etiketleri şöyle olabilir.
<meta name="keywords" content="Web Tasarım, Web Yazılım, Reklam Ajansı, SEO">
Sayfanızda kullandığınız Türkçe karakter setinin başka bilgisayarlarda bozuk şekillerde görülmemesi için;
<meta http-equiv="Content-Type" content="text/html; charset=windows1254">
| Etiket | Açıklama |
|---|---|
| <head> | Sayfa hakkındaki bilgileri tanımlar |
| <title> | Sayfa başlığını tanımlar |
| <base /> | Sayfadaki tüm bağlantılar için varsayılan bir adres veya varsayılan bir hedef tanımlar |
| <link /> | Sayfa ile harici bir kaynak arasındaki ilişkiyi tanımlar |
| <meta /> | Bir HTML sayfası hakkında meta verileri tanımlar |
| <script> | Bir istemci tarafı komut dosyası tanımlar |
| <style> | Bir belge için stil bilgilerini tanımlar |
<body> Etiketi
Gövde metni içine ise, kullanıcının tarayıcısında görmesini istediğimiz içerikleri yazarız. HTML dosyasının en geniş bölümünü oluşturur. <body> ve </body> etiketleri arasında yer alır ve sayfada sunulmak istenen bütün görsel ögeler bu alana yazılır.
1 2 3 | <body> <h1>Web Sayfama Hoşgeldiniz</h1> </body> |
1 2 3 4 5 6 7 8 9 10 | <html> <head> <title>Kamil ERSÖNMEZ'in Kişisel Blogu</title> <meta name="description" content="Kamil, Ersönmez, Kişisel Blog"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> </head> <body> Web Sayfama Hoşgeldiniz </body> </html> |
HTML Alıştırmalar
- – Tarayınızın ilgili menülerine tıklayarak herhangi bir web sayfasının HTML kodlarını açıp inceleyiniz. Metnin yapısını gözden geçiriniz. Özellikle de etiketlerin nasıl kullanıldığı üzerinde durunuz. İçiçe geçmiş etiketlere dikkat ediniz.
- Aynı web sayfasını bilgisayarınıza (tam HTM) olarak kaydediniz. Oluşan dosya ve klasörleri inceleyiniz ve aralarındaki ilişkileri araştırınız. Kaydettiğiniz HTM uzantılı dosyayı bu kez Notepad ile açarak HTML kodlarına bakınız. 1. maddedeki kod dosyası ile arasındaki farkları belirleyiniz. Bu farkların neden oluştuğu konusunda fikir yürütünüz.
- HTM uzantılı dosyadaki etiketlerden bazılarını siliniz yada yazım hatası uygulayınız. Sonrasında web sayfasını tarayıcınızda açtığınızda ne tür farklar oluştu?
- HTM dosyadaki etiketleri büyük harfle yazıp kaydettikten sonra sayfayı tarayıcınızda tekrar çalıştırınız. Her hangi bir fark gözlemliyor musunuz?
W3C Nedir?
- W3C(World Wide Web Consortium), yani Dünya Ağ Birliği, internet siteleri konusunda standartları belirlemek için 1994 yılında kurulmuş bir organizasyondur. Web'in, yaygınlaşma hızı nedeniyle, tarama ve geliştirme standartlarına ihtiyaç duyduğu düşünülerek, Web'in mucidi Tim Berners-Lee tarafından, Web'le ilgili bir çok yeniliğin geliştirildiği MIT ve CERN bünyesinde oluşturulmuştur.
- Web'in yaygınlaşması, Web üzerindeki verileri göstermek üzere kullanılan çok sayıda tarayıcının (web browser) ortaya çıkmasına neden olmuştur. İnternette, tahmini olarak 10 milyar web sitesi bulunmaktadır. İnsanlar, bu siteleri gezerken, Internet Explorer, Mozilla Firefox, Chrome, Opera, Apple Safari gibi çeşitli tarayıcılar kullanmaktadır. Yaygın olarak kullanılan bu tarayıcılara ek olarak, özellikle mobil cihaz üreticileri tarafından, kendi cihazları için tasarlanmış bir çok başka araç da bulunmaktadır. Tüm bu tarayıcıların, ziyaret edilen siteyi doğru şekilde anlaması ve göstermesi, sitenin W3C standartlarına uygun şekilde tasarlanmış olmasıyla alakalıdır.
- İnternetteki sitelerin büyük çoğunluğunun bu standartlara uygun olmaması, standartlara uygun sitelerin bir adım öne geçmesini sağlar.
Standartlara uyum sağlamamak ise, ziyaretçilerin, aradıklarını bulamama neticesinde kısa sürede ziyaret ettikleri siteden ayrılmalarına yol açar. - W3C standartları, web sitesi inşasında izlenmesi gereken bir kılavuzdur. Bu standartlar, temelde şu konularda iyileştirmeler sağlar:
– Site içeriğinin doğru okunması
– Site içeriğinin hızlı aktarılması - Arama motorlarının yaygınlaşması ve çalışma yöntemlerinin karmaşıklaşması, W3C standartlarının önemini daha da arttırmıştır. Google gibi büyük arama motorları, indeksledikleri sitelerin W3C standartlarına uyumunu önemserler. Standartlara uygunluk, arama sonuçlarında listelenen sitelerin sıralamasını etkiler. Arama motorlarının mantığı oldukça basittir:
- Aranan bilgiyi içeren iyi web siteleri, profesyoneller tarafından hazırlanır. Profesyoneller tarafından hazırlanmış bir web sitesi, W3C standartlarına uygun olacaktır.
- W3C standartlarına uyum, web sitesinin güncelleştirilmesi ve bakımı sırasında önemli zaman tasarrufları sağlayacak, oluşabilecek kodlama hatalarının sayısını en aza indirecektir.
- Kişi veya kurumlar, web sitelerinin bu standartlara ne kadar uygun olduğunu http://validator.w3.org/'daki adres formuna sitelerinin adresini yazarak öğrenebilirler.
- Bu arada dünyadaki en büyük firmaların web sitelerinin bile W3C Standartlarına uygun olmadığını görmek şaşırtıcıdır. (Örnek olarak Microsoft, Google, Facebook gibi web sitelerinin uygunluğunu kontrol edebilirsiniz. Microsoft.com' a ait 176 Hata ve 36 Uyarı, Facebook' a ait 36 Hata ve 6 Uyarı mesajı alacaksınız. Bu veriler 15.02.2009 tarihine ait verilerdir)
- 14 Mart 2022
Diğer Yazılarımız
Tüm Yazılarımız
Soru işareti kalmasın
Bu yazı hakkında aklınıza takılanlar, bir fikriniz belkide şikayetiniz vardır. Yada yazımızda hatalar olduğunu düşünüyor olabilirsiniz. Peki neden bize ulaşmayı düşünmeyesiniz ki?
Hizmetlerimiz
Binlerce müşterimizin yararlandığı 100'e yakın hizmetlerimizden sizlerde yararlanabilirsiniz. Onlarca ücretsiz web hizmeti ve profesyonel destekle sizleri daima daha ileriye taşımayı hedefliyoruz.
Tüm Yenilik ve Kampanyalardan Haberdar Ol
Son Yazılar
- CSS Grid Kullanımı Başlangıç Rehberi 1 Ocak 2025
- C# While Döngüsü Kullanımı 1 Ocak 2025
- C# ile Dosya Okuma ve Yazma İşlemleri 29 Aralık 2024