esencan.net’de ilk yazımız; herkese yararlı olması dileğiyle…!
İlk dersimizde HTML’e giriş yapıyoruz. Tarayıcıların çalışma mantığı ve network nasıl çalışır bunu öğreniyoruz. Minik’te olsa bir network içindeki istemci ve sunucuların nasıl iletişim içinde olduğunu anlamak, kod yazmaya başlamadan önce yarar sağlayacağına inanıyorum.
HTML yapımızı oluşturmak için öncelikle bize kolaylık sağlayacak editör bulma ile başlayalım. Biliyorsunuz ki HTML kodları herhangi bir notepad de dahi yazılabilir. Editör kullanmak bize ne gibi kolaylıklar getirecektir. Sıralamak gerekirse en önemlisi yazım hızınızı arttıracaktır, yazdıklarınız yapı itibariyle renklenmesi ile yanlış yazımların göze çarpması kolaylaşacaktır. Ayrıca kullanılacak eklentiler sayesinde otomatik tamamlamadan tutun da, satırların ve kod dizilişlerin hizalanmasına kadar birçok özelliği kullanarak projelerinizi hatasız ve çok daha hızlı yazmanızı sağlayacaktır. Ben JetBrains PhpStorm kullanıyorum, her türlü ihtiyacıma cevap verebilen bir editör. FTP sunucusuna doğrudan bağlantı, veri tabanına kolay ulaşım, hata ayıklamasından tutunda eklentileri ile kazanılan birçok özelliği ile son derece kullanışlı bir editör. Ancak bu editör ücretli. Eğer bir üniversite öğrencisi iseniz ve öğrenim gördüğünüz üniversite üzerinde sonu edu.tr gibi biten bir e-posta hesabınız varsa ücretsiz sahip olabilirsiniz. Deneme sürümünü kullanıp deneyimlemek isterseniz JetBrains PhpStorm‘u resmi sitesinden indirebilirsiniz. Eğer ücretsiz, açık kaynak ve kullanışlı bir editör arıyorsanız aşağıdaki listede belirttiğim editörleri kullanabilirsiniz. HTML Derslerinin videolarında SublimeText3’ü kullandım, videolar ile eş zamanlı gitmeniz açısında aynı editörü kullanmanızı tavsiye ederim.
Açık Kaynak Editörler/IDE (Integrated Development Environment) – (Tümleşik Geliştirme Ortamı)
- SublimeText3 Download Adresi : https://www.sublimetext.com/3 (Bu editör açık kaynak değildir fakat indirip tam sürüm kullanabilirsiniz. Sadece size aralıklarla satın almak isteyip istemediğinizi soracaktır. Almak zorunda değilsiniz.)
- NetBeans IDE Download Adresi: https://netbeans.org/downloads/index.html
- NotePad++ Downloan Adresi : https://notepad-plus-plus.org/download
HTML Kabuğu Blok Yapısı
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>
HTML’in genel ve basitçe blok yapısı yukarıdaki gibidir. ilk satır tarayıcı tarafından bu doküman tipinin anlaşılmasını sağlar. <!DOCTYPE html> HTML5 kod standartlarını içerdiğini tarayıcınıza söyleyen koddur. Eğer bu doküman tipini kullanıp bu dokuman tipinin standartlarına uymazsanız yazdığınız kod satırları tarayıcınız tarafından yorumlanamayabilir. Buda tarayıcıya göre sayfanızdaki belli bölümlerin isteğiniz dışında gözükmesine sebep olacaktır.
Genel kabuk doküman tipinden sonra <html> etiketi ile açılır ve sonuda </html> etiketi ile kapanır. Diğer etiketlerin hepsi bu html etiketleri arasında yer alır.
<head> Etiketi sayfanın içeriği ile ilgilenmeyen, daha çok arka planda olması gereken işlemlerin yürütüldüğü bölümdür. <head> etiketleri arasına yazılan hiç bir kod sayfanızın içerik kısmında gözükmeyecektir. Sadece <title> etiketi yine sayfa içeriğinizde gözükmeyecek olup, sayfanın tab kısmında sayfa başlığı bölümünü oluşturacaktır. Sayfa içerisinde kullandığınız diğer dillerin kütüphanelerinin eklenmesi, external veya internal sitil dosyalarının belirtilmesi yine <head> etiketi içinde tanımlanır.
HTML’e Giriş Ders#1 Eğitim videosunu izlemek için tıklayınız.
Son Yorumlar