HTML Nedir ve Temel HTML Komutları Nelerdir?

Nisan 2019
YouTube'ta Takip Et:

Bir web sitesinin ne şekilde göründüğü ile ilgili kodların bulunduğu yapıdır HTML. Hyper Text Mark-Up Langıage anlamına gelen HTML, açılış ve kapanış kodları ile sayfanın kullanıcıya iletilmesinde önemli ve o kadar da basit bir dildir.

HTML’de bütün etiketlerin hiyerarşik bir yapısı var. Bu yapının en başında ve sonunda HTML etiketleri bulunuyor. HTML etiketleri arasında iki önemli etiket bulunur. Head etiketi ve Body etiketi. Head etiketinin içinde, sayfanın ön yüzünü dolaylı olarak etikeleyen kodlar bulunur. CSS ve JS dosyaları, sayfa başlığının yer aldığı Title etiketi gibi kodlar Head etiketleri arasında yer alır. Body etiketleri arasında ise sayfada direkt olarak gördüğümüz içerik kodları yer alır. Aşağıda standart bir HTML yapısını görebilirsiniz.

HTML etiketleri nasıl kullanılır? Yukarıdaki kodda farkettiyseniz açılan her etiketin bir de kapanışı var ve bu kapanışlar / işaretiyle sağlanıyor. Kapanışları unutursak ya da hiyerarşik yapıya uymazsak ortaya çıkan sayfa istediğimiz gibi bir sayfa olmaz, sistemin kafası karışır.

Sık Kullanılan HTML Etiketleri

Başlık Etiketleri: HTML için kullanılan belli başlı etiketler var. Burada onlardan kısaca bahsedeceğim. Öğrenmemiz gereken ilk etiket grubu H1, H2, H3, H4, H5, H6 etiketleri. Heading anlamına gelen bu etiketler boyut olarak H1 en büyük, H6 en küçük olacak şekilde içeriklerin başlıklarında kullanılan etiketler.

Paragraf Etiketi: Siteye eklediğiniz paragrafların başına ve sonuna etiketleri kullanmamız gerekir.

Alt Satıra Geçme Etiketi: Normalde yazdığınız paragraflar ekrana sığmadığında otomatik olarak alt satıra geçer. Ama bilinçli olarak alt satıra geçmek için Break anlamına gelen br etiketini kullanmamız gerekiyor. Bu etiketin açılış ve kapanışı gibi bir durumu yok, alt satıra geçmek istediğiniz noktaya br etiketini eklerseniz, sonraki kelimeler otomatik olarak alt satıra geçecektir.

Madde Etiketleri: Bir listeleme veya sıralama yapmak için madde etiketleri kullanılır. Örneğin bir menü oluşturuyorsunuz ve öncelikle menünün bir liste olduğunu belli eden ul etiketini kullanıyoruz ve ardından menü maddelerini de li etiketiyle sıralıyoruz.

Bu grubu kullandığınız zaman, liste maddelerinin başında nokta işaretini görürsünüz. Nokta işareti yerine 1, 2, 3 gibi sayılı bir sıralama yapmak için ul yerine ol etiketi kullanılır.

Şekil Şukul Etiketleri: HTML’in, yazdığınız paragrafta Microsoft Word’deki bazı özellikler gibi şekle sokmanızı sağlayan özellikleri bulunur. Bir metni kalın yapmak için <strong></strong> etiketleri arasında koymalısınız. Böylece, bu etiketler arasında koyduğunuz metin, diğer metinlerden daha kalın görünecektir. İtalik yapmak için <em></em> veya <i></i> etiketleri arasına, altı çizili olmasını isterseniz <ins></ins> veya <u></u> etiketleri arasına yerleştirebilirsiniz metninizi.

Linkler: Tıklandığında başka bir sayfaya geçmek için de linkler kullanılır. Tıklanabilir her şey bir linktir ve logoda, menülerde, sayfa içinde başka bir sayfaya geçerken ya da footer dediğimiz sayfanın en alt bölümünde bu linklerden bolca görünür. Bir metne ya da bir imaja link vermek için a etiketi ve linke tıklandığında yönleneceği adres olan href kullanılır. Aşağıdaki örnekte Tıkla kelimesine tıkladığınızda sayfa.html sayfasına yönlendirilirsiniz.

Linkleme konusunda bilmemiz gereken iki ek özellik var. Tıklandığında arayan telefon numarası oluşturmak ve tıklandığında varsayılan mail adresi programını açan mail linki oluşturmak.

Telefon numarası linki oluşturma: Siteye tıklanabilir telefon numarası eklemek için a etiketinin tel özelliğini kullanıyoruz. Böylece onun bir telefon numarası olduğu anlaşılıyor telefonlar ya da iletişim programları tarafından.

Mail linki oluşturma: Tıklandığında mail programının açılmasını sağlayan mail linki için de mailto özelliğini kullanıyoruz.

Görseller: Sayfa içerisinde resim veya fotoğraf görüntülemek için de image anlamına gelen img etiketini kullanıyoruz. Img etiketinin kullanımını aşağıda görebilirsiniz. src ise source anlamına geliyor ve resmin yolunu burada belirtiyorsunuz. img etiketinin kapanışı da dikkat ederseniz diğer etiketlerden farklı.

Bir görsele link vermek isterseniz a etiketinde gördüğümüz kod kısmında Tıkla yazan yere imajın etiketini koyabilirsiniz. Örneği aşağıda. Böylece görsele tıklandığında a href etiketindeki sayfaya yönlendirilecektir.

Dosya yollarının olduğu link ve görsel etiketlerine bir parantez açmak istiyorum. CSS, JS ve görsellerin olduğu web sitelerinde tüm dosyalar aynı klasörde olmaz. Mesela css dosyaları CSS klasörünün içinde, görseller img klasörünün içinde olabilir. index.html ile birlikte bir img klasörü düşünün ve img klasörünün altndaki bir logoya ulaşmaya çalışalım. Bunu da aşağıdaki kodla yapabiliyoruz.

Yorumlar: Sayfa içeriğinde görünmeyen ancak kendinize ya da sitenin kodlarına ulaşabilecek diğer insanlar için not niteliğindeki yorumlar da HTML etiketleri arasında önemlidir. Uzun uzun sayfalar hazırlarsanız sayfanın hangi bölümünün başlangıcı olduğu gibi notlar ekleyebilirsiniz. Örneğin bir sayfada yorumlar varsa yorum alanının başına bu kodu eklediğinizde yüzlerce satırlık kod arasında rahatlıkla burayı bulmak için sayfa içerisinde arama yapabilirsiniz. Yorumların, her programlama dilinde önemli bir yeri vardır. Yorum etiketinin kapatmayı unutursanız, sonraki kodlar da yorum olarak nitelendirileceği için sayfada sıkıntı yaşarsınız.

Tüm bu kodları ister bir metin editöründe yazıp index.html olarak kaydedin, isterseniz jsfiddle ya da codepen gibi sitelerde test edin. Bu tip siteler HTML, CSS ve JavaScript kodlarını test edebileceğiniz sitelerdendir ve online olarak bu servislerden ücretsiz olarak faydalanabilirsiniz.

Sadece HTML le dinamik sayfalar, formlar ya da başlı başına bir web sitesi yapamazsınız ama HTML bilmenin birçok avantajı var. Örneğin, bir WordPress sitesinde bir şeyler kayarsa, tablolarda sıkıntı olursa, görsellerle ilgili istenmeyen durumlarla karşılaşırsanız HTML bilginiz sayesinde bu sorunların üstesinden gelebilirsiniz. HTML, web tasarım dünyasında ilk öğrenmeniz gereken dildir. Tasarımcı da olsanız, web sitesi tasarlıyorsanız HTML’in işleyişini bilmeniz sizin avantajınıza.

Gözden kaçırdığım veya eklemek istediğiniz bir şey olursa yorum kısmına yazabilirsiniz.