Hyper Text Markup Language kelimelerinin kısaltması olan HTML dili web sayfalarında kullanılan sade ve en basit dillerden birisidir. Bu metin dilinin çalışması için belirli taglar ve bu taglar arasına da içeriklerin eklenmesi gerekir. Daha sonrasında Chrome, Opera, Safari gibi tarayıcılar üzerinden bu kodların derlenip çıktı oluşturulması ve kullanıcılara gösterilmesi gerekir.
HTML Ne İşimize Yarar?
HTML kodları C , C#, Java dillerinde olduğu gibi genel if , else koşullarını ya da for, while gibi döngü elemanlarını içermez. Yalnızca metin , görsel veya video gibi içeriklerin web sayfalarına göre işaretlenmesi ve konumlandırılmasında kullanılır. İnternet üzerinde yer alan tüm web sitelerinin kaynak dili HTML’dir. Sunucu tarafında PHP, ASP gibi diller çalışsa da içeriklerimizi tarayıcılara gönderirken bu dilden faydalanırız.
HTML Öğrenme Araçları
HTML dilini öğrenmek genellikle birkaç saatimizi alır. Bu dili öğrenmenin en iyi yollarından birisi kendi web sitenizi oluşturmaktır. Web sitesi tasarlarken sunucu sistemleri , algoritma gibi teknik konuları bilmenize gerek yoktur. İnternet dünyasında popüler olan Youtube ve Udemy dışında HTML dersleri alabileceğiniz kaynaklar şunlardır:
- W3Schools: Web geliştiricilerin bir programlama dilini öğrenmesi için gerekli bir çok örnek bulunmaktadır. Aynı zamanda sistemin örneklerinden yola çıkarak kendizi deneyebileceğiniz bir alan da mevcut.
- Stackoverflow: Bu site genellikle programlama dillerini kodlarken oluşan hataların ve bu hatalara ilişkin çözüm önerilerinin sunulduğu forum bazlı platformlardandır.
- CodePen: Bireysel hesabınızı oluşturup kendi kodlarını yazmak isteyen kişiler için tasarlanmış yardımcı bir kaynaktır.
- Github: Web dünyasındaki en popüler web sitelerinden birisidir. Bir web projesi tasarlarken fikir almak oldukça sağlıklıdır. Web geliştiriciler tarafından yayınlanan örnek projeleri inceleyebilir , kendi projelerinizde de kullanabilirsiniz.
En Çok Kullanılan HTML Kodları
Html: Tüm kodların yazıldığı iskelet yapının en dış kısmında yer alırlar. <html></html> şeklinde yazılırlar.
Head: Arka planda tarayıcıların algılaması için oluşturulan kodların yer aldığı bölümdür. <head></head> şeklinde tanımlanırlar.
Title: Web sitelerinin pencere başlığı olarak kullanılmaktadır. <title> Site Başlığı </title>
Body: Paylaşılan içeriklerin kullanıcılar tarafından görüntülendiği kısımdır. <body></body> şeklinde tanımlanırlar.
Başlıklar: Yazılan içeriklere vurgu yapılmak istendiği durumlarda kullanılır. Yazı fontu olarak en büyük başlık <h1> en küçük başlık ise <h6> etiketi ile oluşturulur.
Paragraflar: Başlıktan sonra gelen içeriklerin paragraf olduklarını belirtmek amacıyla yazılan etiketlerdir. <p> </p> etiketleri ile tanımlanırlar.
Linkleme Etiketi: Metne veya görsele tıklandığında bir web sayfasına yönlendirmek için bu etiket kullanılır. <a href = “yonlendirilensite.com”> Yönlendirilen site </a>
Img : Resim dosyalarını tarayıcıya eklemek için kullanılır. <img> ile tanımlanır.
Bold: Yazının kalın olarak görüntülenmesini sağlayan etikettir. <b> ile gösterilir.
Strong: Önemli metinlere vurgu yapmak için kullanılır. <strong> ya da <em> şeklinde etiketleme yapılır.
İtalik: Yazıların eğik bir biçimde yazılması için kullanılır. Genellikle akademik dergilerin belirtilmesinde bu etiket tercih edilir. <i> şeklinde tanımlanır.
Del: Silinen metinleri belirtmek için kullanılır. <del> şeklinde tanımlanır.
Sub: Alt simge metnidir. <sup> olarak tanımlanır.
Sup: Üst simge metnidir. <sup> olarak tanımlanır.
Small : İçeriklerin daha küçük fontta gösterilmesi için kullanılırlar. Genellikle dipnot alanlarında tercih edilir. <small></small> şeklinde etiketlenmelidir.
Blockquote: Birebir alıntılama yapılan içeriklerin belirtilmesi için kullanılır. <blockquote> </blockquote> şeklinde etiketlenir.
q : Kısa bir alıntı yapılacaksa kullanan etikettir. <q></q> ile gösterilir.
Abbr : Kısaltma yapılacağı zaman kullanılır. Genellikle uzun kuruluş isimlerinde tercih edilir. <abbr></abbr> şeklinde ifade edilir.
Address: Bir makalenin veya içeriğin sahibi için iletişim bilgileri tanımlamak üzere kullanılır. <address></address> etiketleri arasına yazılır.
Cite : Bir sanat içeriğini belirtmek için kullanılır. İtalik gösterilir. <cite></cite> ile kullanılır.
Yorum Alanı: Bu etiket içerisine yazdıklarınız kullanıcılar tarafından görüntülenemezler. Kodlar hakkında not tutmak için kullanılır. <!- – Yorum Alanı –> olarak gösterilir.
Tablo Oluşturma : Satırlar <tr> , satır başlıkları <th> , tablo içeriği <td> ile gösterilir.
Listeleme : <ul> <li> ile gösterilirler.
Div: Bir çok HTML ögesini içerisinde barındıran bir sınıftır. <div></div> olarak gösterilir.
Span : Blok düzeyli elemandır ve yazıldığı kadar alan kaplar . <span> </span> şeklinde tanımlanırlar.
Br : HTML alt satıra geçme kodudur. <br/> ile kullanılır.
