HTML DERSLERİ ANASAYFA ÖNCEKİ DERS SIRADAKİ DERS
Konu başlığına tıklayarak detayları görebilirsiniz!!!
HTML kodlamas yapmak, geliştirmek ve yazdığımız kodları görüntülemek ve test edebilmek amacıyla çeşitli araçlara ve tarayıcılara ihtiyaç duyarız. Bu görüntüleme ve test etme ortamları da Tarayıcı Görüntüleme Motoru (Layout Engine) ve HTML Motoru (HTML Engine) gibi bazı ek özelliklere sahiptirler.
Ben şahsen tarayıcı olarak Google Chrome, editör olarak yani kod yazma amaçlı Notepad++ veya ide olarak Netbeans üçlüsünü çeşitli projelerde kullanıyorum ve öneririm.
Bunun dışında bir çok geliştirme aracı mevcuttur tercih ve kullanım kolaylığınıza göre istediğiniz bir tane ile çalışabilirsiniz. Tarayıcınızda arama motoruna HTML geliştirme araçları yazdığınızda önerilen geliştirme araçlararından birini de kullanabilirsiniz.
Web Tarayıcılar (Browser) basit tabiri ile günlük yaşantımızda internet sitelerine girmek için kullandığımız çeşitli firmalar tarafından geliştirilen görüntüleme/geliştirme araçlarıdır. Günümüzde popüler olarak bilinen Chrome, Firefox, Explorer, Safari, Opera gibi tarayıcıları örnek verebiliriz.
Tarayıcı yapısı modüler sistem olarak tabir ettiğimiz kullanıcı arayüzü (user interface) ve işlevsel arabirimler (functional interface) olarak ikiye ayrılan bir sistemi benimser. Tarayıcılar kendi Görüntüleme Motorlarını (Layout Engine) kullanırlar ve sürekli olarak güncellerler. Görüntüleme motorları sadece tarayıcıda işlenen .html uzantılı web dosyalarının, kullanıcı arayüzü aracılığıyla kullananlara gösterilmesini sağlar (Web Sitesinin Görüntülenmesi).
Popüler Web Tarayıcıları (indirmek için üzerine tıklayınız):
Google Chrome
Mozilla Firefox
Internet Explorer
Safari
İndirdiğiniz tarayıcı setup dosyasını çift tıklayarak yönergeleri izleyerek kurulumu tamamlayabilirsiniz.
Geliştirme araçları veya editörler bize kod yazarken gerekli olan araçlardır. Kodlarımızı bu programlar aracağılıyla yazıp tarayıcı üzerinde çalıştıracağız. Tarayıcıların içinde yer alan geliştirme araçları dışında, editör olarak Notepad++ programını veya hem html kodları yazarken hem de daha gelişmiş yazılım dillerinde de kullanılabilen çok işlevli Netbeans programını da kullanabilirsiniz.
Yazılım Geliştirme Araçları(indirmek için üzerine tıklayınız):
Notepad++
Netbeans IDE
Yine indirdiğiniz programın setup dosyasına çift tıklayarak ve yönergeleri izleyerek kurulumu tamamlayabilirsiniz.
HTML bizlere modern, gelişmiş web uygulamaları geliştirmek için yeni etiketler (tag) ve özellikler (attributes) sunar. HTML sayfasının temel bellidir, bu yapı olmadan diğer etiketleriniz hiç bir işe yaramayacaktır.
Dosyalarımızı düzenli bir şekilde tutabilmek açısından masaüstünüzde htmldersleri adında bir klasör oluşturmanız kolaylık sağlayacaktır. Notepad++ programını açıp Dosya > Yeni > Hyper Text Markup Language file seçerek dosyamıza Ders01.html adını verip, oluşturduğumuz htmldersleri klasörünü seçtikten sonra Kaydet diyerek bitiriyoruz.
Kaydetme işlemini gerçekleştirdiğinizde dosya ikonunuzun kullanmakta olduğunuz tarayıcının logosu olduğunu göreceksiniz. Bu başarıyla bir .html dosyası oluşturduğunuzu gösterecektir. Bu dosyaya çift tıkladığınızda tarayıcınızda açıldığını göreceksiniz.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Ders01</title> </head> <body> İLK WEB SAYFAM! </body> </html>
Her HTML belgesi <!DOCTYPE html> etiketi ile başlar. Bu etiket(tag) belge türünü ayarlamak için kullanılır. Bu etiketin HTML yapısı içerisinde en üstte olması zorunludur. <!DOCTYPE html> ile ayrıca kodlarımızı hangi HTML versiyonu ile yazdığımızı belirtiyoruz. Eski versiyonlarda direk versiyonu belirtiyorduk ama HTML5 ile birlikte bu şekilde belirtmemiz yeterli oluyor.
<html> etiketi tüm diğer etiketlerin içerisine yazıldığı etikettir. Bu etiketi ana etiketimiz gibi düşünebiliriz. HTML diziliminde ana eleman olarak kullanılır. Head, body etiketlerini içerisinde barındırır.
<head></head> etiketi kapsamında sayfa içerisinde görsel olarak göremediğimiz daha çok tanımlama ve refere amaçlı kısımlar yer alır. Title (başlık), CSS, Script (javascript), meta, link, base, object, gibi tanımlamalar ve referans verme işlemleri bu kısımda yapılır. Daha çok kulanıcının göremeyeceği arka planda yapılan işlemler belirtiliyor. Bu kısımda kullanıcıya görünebilecek tek etiket <title> yani başlık etiketidir. O da tarayıcıda sayfayı açtığımızda başta sekme üzerinde görünen kısımdır.
<meta> etiketi <head> etiketleri içerisinde yazılır. Hazırladığınız web sayfası hakkında taryıcılara ya da arama motorlarına çeşitli bilgiler sunar. Mesela charset niteliği ile web sayfanızda kulanacağınız yazı karakteri kümesini belirlersiniz. Genellikle utf-8 kullanmak sizler için yeterli olacaktır. charset belirlememeniz durumunda ilerleyen zamanlarda sayfanızdaki sembol, sayı veya karakterlerin gösterilmesinde problem yaşayabilirsiniz. charset tarayıcıların sayfanızda bulunan karakterleri ve sembolleri göstermek için kullandıkları bir algoritma olarak da tanımlanabilir. <meta> etiketini ayrıca bir çok işlem için kullanabiliyoruz ama buradaki kullanım amacımız Türçe karakter kullanırken gereksiz sembollerle karşılaşmamızın önüne geçmektir. Etiketin içerisinde belirttiğimiz alanlarda o etiketin niteliğini göstermemiz için kullanılmaktadır (meta içerisindeki charset gibi).
<body> kısmında ise kullanıcıyla etkileşime geçiyoruz. Bu kısımda kulanıcının görüp işlemler yapabileceği kodları yazıyoruz. Bu işlemler yine ana etiketler dışındaki diğer etiketler kullanılarak gerçekleştirilir.Örnek olarak 'İLK WEB SAYFAM' yazıyoruz ve html dosyamıza çift tıkladığımızda ilk web sayfamızın oluştuğunu görüyoruz.
TARAYICI EKRAN GÖRÜNTÜSÜ:
