Merhaba, bu ilk dersimizde HTML dilinin temellerini öğrenecegiz. İlk 7 anahtar kelimeyi öğrenmeden once bu anahtar kelimeler ile ilk web sayfanızı hazırlamanıza yardımcı olacak araçlari tanıyalım. Beraber Bilgisayarınıza bu araçların kurulumunu yapalım.
VS Code Kurulumu
Yukarıdaki butonu tıklayarak sizi yönlendireceği adresten kendi işletim sisteminize göre VS Code kurulum dosyanızı indirin ve yükleyin. Aşağıdaki resim ve video size ihtiyacınız olursa yardımcı olacaktır.
“<!DOCTYPE …>” Web browserları artık pdf yada resim gibi başka dosyaları da okuyabiliyorlar. doctype bilgisi oluşturduğumuz dosya türü hakkında web browserlarına bilgi verir ve <html> kutusundan önce yazılır. html dosyaları için “<!DOCTYPE html>” şeklinde yazılır.
HTML (HyperText Markup Language), Ben bunu bir inşaatın kabasına benzetiyorun. Türkçeye çevirirken (Köprü Metni İşaretleme Dili) olarak çevrilmiş kelime manaları ile. Bence web sayfalarının temelini oluşturduğu ve Türkçe temel kelimesinin sessiz harflerini içerdiği için kısaca (TeMeL) diyebiliriz. (😀) Web’in en temel yapı taşıdır. Web içeriğinin anlamını ve yapısını tanımlar. HTML dışındaki diğer teknolojiler genellikle bir web sayfasının görünümünü/sunusunu (CSS gibi) veya işlevselliğini/davranışını (JavaScript gibi) tanımlamak için kullanılır.
Özetle diyebiliriz ki HTML web teknolojileri için mecburi bir başlangıç noktasıdır. Tüm web aleminde bir HTML var bir de diğerleri…
Bir HTML sayfası oluşturmak için VS Code ile ismi ne olursa olsun soy ismi .html olan bir dosya oluşturmanız gerek ve içerisine <html> köşeli parantezleri ile birlikte küçük harfler ile html yazarak bu dosyanın içindeki kodları tanımlayan bir başlık atmanız gerekli. Dedik ya bu bir temel bunun bir de çatısını koymamız gerek. Yine köşeli parantezleri ile birlikte ama ileri doğru eğik bir çizgi ile beraber </html> şeklinde bir diğer kod ile dosyayı kapatıyoruz. Bundan sonraki yazacağımız tüm HTML kodları bu iki kod arasında olacak. Web sayfasındaki görünen alanın sınırlarını çizmiş olduk. Örneklerine aşağıdaki resimlerde bakabilirsiniz.
imajın üzerine tıklayarak büyütebilirsiniz.
HTML dili iç içe geçmiş kutucukların farklı görünümleri ile tanımlanmasıdır. Bir İnternet sayfası iç içe geçebilecek sonsuz sayıdaki kutucukların bir düzen oluşturmasıdır. Tüm kutuların iki kapağı arasında yazılanlar o kutunun içinde kalır. Bu sebeple HTML dili kodları genellikle eşli olarak yazılır. Örnek: “<html> … </html>” gibi sadece kutunun yada içindekilerin şeklini değiştirmek için kullandığımız kodları tek başlarına kullanabiliriz. Örnek: Satır başına geçmek için kullandığımız “<br>” gibi.
Html kutusu içinde iki ana kutu vardır: head ve body.
<html>
<head>
...
</head>
<body>
...
</body>
</html>
<head> … </head> şeklinde yine açılıp kapanan bir kutu misali yazılır ve html kutusunun içine yerleştirebileceğiniz ve İnternet tarayıcıları tarafından okunan ve yazılan sayfanın özellik, genel bilgi ve tüm sayfanın bağlandığı harici linkleri içeren bölümdür. İçerisinde “<meta> … </meta>”, “<title> … </title>” gibi başka kutuları ve “<link …>” gibi bağlantı bilgilerini içerir.
Web tarayıcılarımız ile açtığımız herhangi bir sitenin yada sayfanın başlığını gösterir. Tarayıcı sekmesinin üzerinde yazılı olarak bilgilendirme sağlar.
Örnek : <title> Kırmızı Balık </title> web tarayıcılarımızda şöyle gözükür:
İngilizce gövde manasına gelir ve bir web sayfasının asıl içeriğini buraya yazarız. İnternet’de gezip gördüğünüz tüm web sayfaları bize bu kutunun içini gösterir. Nasıl oluyor da “<body> … </body> içerisine yazılan düz yazılar rengarenk desenler, dizaynlar ve kompleks aplikasyonlar haline dönüşebiliyor değil mi? Bunu inşaat halindeki bir binanın iskeletine benzetebiliriz demiştim. Daha yapılacak bir hayli iş var. İçerisinde genel olarak header, main ve footer olmak üzere 3 ana kutu barındırabilir.
Bir başka kutucuk örneği. Genellikle temalandırmak için kullanılır. Bir web sayfasındaki belki tekrar edebilecek parçaları düzenlemek için kulanılır. İçerisine bir yada bir den fazla element ve div kutucukları alır.
Daha önce bahsettiğimiz kutucukların biridir. İngilizce Division (Bölüm / bölme) kelimesinin kısaltılmışıdır – ilk üç harfi. Tek başına kullanıldığında HTML sayfamızda herhangi bir görünür değişiklik yapmaz. Div işaretlerinin içerisine koyacağımız elementleri birlikte tutar. Div içerisindeki elementleri gurup halinde tutar ve gurup değişikliklerinde kullanabileceğimiz CSS ve JavaScript kodlarımız için bir bağlantı noktası oluşturur.
İngilizce başlık manasına gelen “heading” kelimesinin ilk harfidir. html dosyalarına başlıklar atmak için kullanılır. 6 farklı standart boyut tanımlanmıştır. En önemli başlıklarımız için en büyük yazı tipi olan “<h1> … </h1>” kullanılır. Sonra sırası ile aynı kutu yapısı ile h2, h3, h4, h5, h6 kullanılır.
Genel paragraf yazıları için kullanılır. <p> … </p> içerisinde kalan tüm yazı bir paragraf teşkil eder. İçinde bulunduğu kutucuğun genişliği kadar satır uzunluğu olur.
<br> yada </br> oralak da yazılır. paragraf aralında yada yazılarınızın arasında satır başı yapmak için kullanılır.
HTML dosyalarına resim eklemek için kullanılır. JPEG, PNG, GİF gibi grafik tiplerini tanır. İnternet tarayıcılarının gelişmesi ile beraber apng, avif, and webp gibi başka resim formatları da desteklenmektedir.
img elementi de kendi zatında küçük bir kutucuk gibidir. İçerisinde hangi resmi görüntülemesi gerektiğini tanımlamanız için “src:” özelliğini kullanırız. Her HTML elementi için kullanılabilecek farklı özellikler vardır. Bunları ileride detaylı bir şekilde anlatıcağız.
<img src="resim dosyasının bulunduğu yerin adresi..">
Şeklinde yazdığımızda oluşturduğumuz HTML sayfası istediğimiz resmi sayfada görüntüleyecektir.
a HTML içerisine link vermek için kullanılır. Tıklandığında sizi başka bir kaynağa götüren yada aynı kaynak dosyanın başka bir kısmını görüntüleyen tüm linkler a işaretlemesi ile oluşturulur. Web sitelerinin menüleri böyle oluşturulur.
