2024 Hafta 3-4 HTML Ders Notları PDF

HTML NEDİR? Öğr. Gör. Şükrü KAYA 3. Hafta Bölüm / Hafta Hedefleri Hedef 1: HTML işaretleme dilini tanımak. Hedef 2: HTML editörleri Hedef 3: Temel HTML Tag’lerini öğrenmek. HTML nedir? Herşeyden önce bazen yanlış anlaşıldığı gibi HTML bir programlama dili değildir. HTML bir mar...

HTML NEDİR? Öğr. Gör. Şükrü KAYA 3. Hafta Bölüm / Hafta Hedefleri Hedef 1: HTML işaretleme dilini tanımak. Hedef 2: HTML editörleri Hedef 3: Temel HTML Tag’lerini öğrenmek. HTML nedir? Herşeyden önce bazen yanlış anlaşıldığı gibi HTML bir programlama dili değildir. HTML bir mark-up (~işaretleme) dilidir, yani tag denen özel işaretlerle bir yazının tümünü ya da sadece bir kısmının görünümünü ve/veya işlevini değiştirmeye yarar. Örneğin herhangi bir tag olmadan default yazı tipinde görünen bir yazı, HTML içinde önüne ve arkasına ve işaretleri gelince bu şekilde italik görülür. HTML Sürümleri 1980 yılında CERN’de görevli olan Tim Berners-Lee, CERN araştırmacılarının bilgilerini ve dökümanlarını birbirleriyle paylaşabilmeleri için bir sistem olması gerektiğine inanıyordu. Bu yüzden prototip olarak ENQUIRE isimli sistemi önerdi.1989 yılına gelindiğinde internet tabanlı sistemin ilk temellerini yine aynı isim Tim Berners Lee attı.1990 yılında HTML işaretleme dilini geliştirmesinden sonra World Wide Web(WWW) sistemini kurmuştur. Bu şekilde CERN’de bilgi paylaşımını kolaylaştırma amacı doğrultusunda ortaya çıkan HTML günümüzde hayatımızın vazgeçilmezi olan internetin başlıca temelini oluşturmuştur. HTML 1.0 (1989) HTML 2.0 (1995) HTML 3.2 (1997) HTML 4.0 (1997) HTML 4.1 (1999) HTML 5 (Beta, 2008) HTML Editörleri *Notepad++ *Sublime Text Dreamweaver Visual Studio Code Web Matrix NetBeans Aprana Studio PHP Desingner Web Sunucusu, Domaini Hosting Nedir? HTML ve Tag HTML tagleri bir çok farklı şekilde sınıflandırılabilir. Bir sınıflandırma şu şekildedir. 1.Bir açma bir de kapama tag'inden oluşan container tag'leri, Örnek: Kalın yazı 2.Tek başına bulunan tag'ler. Örnek: İçerik HTML Dökümanlarının Yapısı Bir HTML dökümanı genel olarak (istisnaları vardır) aşağıdaki şekildedir: Burada genelde döküman içeriği dışında kalan karakter set tanımlamaları, başlık, JavaScript tanımlamaları vb elemanlar bulunur... Burada ise dökümanın asıl içeriği vardır, içinde metin, ses, video vb içerebilir... HTML Dökümanlarının Yapısı Örnek HTML Dökümanlarının Yapısı Örnek Semantik Web Nedir? Semantik=Anlamsal Semantik Web= Anlamsal Ağ Tasarladığınız Web sayfalarının semantik olması, arama motorları tarafından o sayfaların kullanıcıların aradığı içeriğe «anlamsal» olarak en uygun olması anlamına gelir. HTML5 ile gelen semantik komutlar Bağımsız web içeriklerini kapsamak için kullanılır. Bu içerikler yorum, haber, forum gönderisi, blog gönderisi, müzik ve video olabilir. article tagına benzer göreve sahiptir ancak daha az semantiktir. Genelde aynı konuya sahip birden fazla içeriği kapsamak için kullanılır. HTML5 ile gelen semantik komutlar Bir sayfanın, makalenin veya bölümün başlık bilgisini kapsar. Firma adı, logo, banner, menü, slogan Sayfanın içine yada dışına link vermek için oluşturulan menüleri kapsar. Genelde sayfanın en üstünde yada yan tarafından bulunan gezinti menüleri bu tag içinde yer alır. Sayfaların sol yada sağ kenarında bulunan ve ana konuyla ilgili menü vb. içerikleri barındıran bölümdür. HTML5 ile gelen semantik komutlar Bir sayfanın, makalenin veya bölümün en altında bulunur ve genelde en yakın içeriğin iletişim ve telif hakkı bilgilerini barındırır. Fotoğraf, şekil, illüstrasyon gibi içerikleri ve bu içeriklerle ilgili başlık bilgisini barındırır. Web Sayfasının Genel Yapısı Search Engine Optimization (SEO) Nedir? Arama motoru optimizasyonu Bir web sitesinin arama motorlarına sitede bulunan ürün ve hizmetlerle ilgili bilgi vermesini sağlayacak şekilde tasarlanması ve kodlanmasıdır. Web sitesinin arama performansını arttırmaya yönelik yapılan çalışmalar. Temel HTML Tag'leri: Bir HTML dökümanı genelde ile başlar ve ile biter, ancak verilmese bile, browser dökümanı sorunsuz olarak görüntüleyebilir. ve Bir HTML belgesi iki bölüme ayrılır. head(baş) ve body(gövde)..... etiketleri arasına sayfa hakkında bilgiler yazılır. Meta ve title gibi etiketler burada yeralıyor..... arası ise sayfamızın gövde bölümü. Ekranda gösterilecek kısımlar bu tagler arasında yer alır. Browser' ın başlık çubuğunda görülecek olan sayfanın başlığı yazılır. Örnek: Isparta Uygulamalı Bilimler Üniversitesi Temel HTML Tag'leri Birçok seçeneği vardır. Örneğin bir kullanımı, bu belirteç ile sayfanızın içeriğini yansıtan bazı anahtar kelimeler ve tanımlamalar verilmesidir. Web üzerinde arama yapan arama motorları sayfaların meta Tag’ına bakarak gruplandırma yaparlar. Bununla ilgili aşağıdaki örnekleri inceleyebiliriz. Mevsim Mevsim Kış Kış Listeler HTML bize üç tip liste hazırlama imkanı veriyor. Bunlar; ❑Sıralı listeler (ordered list) ❑Sırasız listeler (unordered list) ❑Tanımlama listeleri (definition list) Sıralı listeler rakam veya harf yada her ikisini içiçe kullanarak liste oluşturmamızı, sırasız listeler rakam/harf yerine madde imleri koyarak liste oluşturmamızı sağlar. Tanımlama listeleri ise bir listeden çok kalabalık metinlerde okumayı kolaylaştırmaya yardımcı olabilecek bir araçtır. Listemizin rakamla mı harfle mi başlayacağını (type) parametresi ile belirtebiliyoruz. Listeler Sıralı Listeler Sırasız Listeler (Ordered List) (Unnumbered List) LİSTE ELEMANI 1 LİSTE ELEMANI 1 LİSTE ELEMANI 2 LİSTE ELEMANI 2 LİSTE ELEMANI 3 LİSTE ELEMANI 3 Sıralı Listeler Sırasız Listeler Tanımlama Listeleri Tanımlama listelerinde (definition list) amaç maddeleri sıralama değildir. Burada adından da anlaşılacağı gibi tanımlama yapılır. Her bir tanımlama listesinin başlangıcı için.. etiketi kullanılır. Madde sıralamada kullanılan etiketi yerine ve etiketleri kullanılır. Açıklanacak terim.. ile oluşturulurken tanımlama işleminin yapıldığı bölüm.. dir. Tanımlama Listeleri Link Etiketleri Bağlantı anlamına gelen link kelimesi sayfalar arası ilişkilendirme yapmak için kullanılır. Link etiketi Gözükecek Metin dır. Link etiketinin kullanıldığı yerler; Web sayfalarının birbiri ile ilişkilendirmek, Mail adresine yönlendirme yapmak, Bir dosyaya bağlantı kurmak, Bir resme link özelliği kazandırmak, vb. Link Etiketleri Mail Link Etiketi Mail link etiketine tıklandığında o bilgisayardaki aktif olarak kullanılan ve yapılandırılmış olan e-mail programı açılır ve kime bölümünde etiket içerisinde yazılan adres gözükür. Mail etiketinin kullanım şekli şu şekildedir: Görüntülenmesi istenen metin Http -../ - Ftp Link Etiketi Tasarımı yapılan bir site için aynı klasörde bulunan tüm diğer html dokümanlarına ulaşmak, farklı klasör deki bir web dokümanına ulaşmak, farklı bir sitedeki sayfaya ulaşmak yada ftp klasöründen bir dosya indirmek için mail etiketlendirme yapılabilir. Örnek Kullanım: ISUBÜ Ana Sayfası Link Etiketleri Resim Etiketi HTML dokümanlarında resimler etiketi ile oluşturulur. Bu etiketin sonlandırma etiketi bulunmaz. Web sayfasına resim eklemek için şeklinde yapılmaktadır. Bir klasörün içindeki resmin siteye eklenmesi için klasör isminin belirtilmesi gerekmektedir. Bir üst dizindeki resim kullanılacaksa aşağıdaki gibi olmalıdır.