Ünite 3: Hipermetin İşaretleme Dili

Giriş

Web 1.0 teknolojileri arasında yer alan HTML betimsel dilinin doğuşu 1989 yılına dayanmaktadır. CERN’de görevli olan yazılımcı Tim Berners Lee, CERN araştırmacılarının bilgilerini ve dokümanlarını birbirleriyle paylaşabilmeleri için bir sistem tasarımı yapmış ve ENQUIRE isimli sistemi önermiştir. Böylece,1989 yılına gelindiğinde internet tabanlı sistemin ilk temelleri Tim Berners Lee tarafından atılmıştır. 1990 yılında HTML işaretleme dilini geliştirmesinden sonra World Wide Web (WWW) sistemi kurulmuştur. Tim Berners Lee tarafından geliştirilen HTML betimsel dili sayesinde bilgisayar ağlarında hipermetin (zengin metin) dokümanlar paylaşılabilmektedir.

HTML İşaretleme Dili

Hipermetin İşaretleme Dili ya da Zengin Metin İşaretleme Dili olarak geçen ve internette içeriklerin sunulmasını sağlayan HTML, basit bir yapıya sahiptir. Hypertext Markup Language – Hipermetin İşaretleme Dili ifadesinin kısaltması HTML olarak yazılmaktadır. Hypertext kelimesi hipermetin olarak dilimize çevrilmiştir. Bunun anlamı, bilgisayar ekranında sadece yazıdan ibaret olmayan belge olarak açıklanmaktadır. Bu dilin günümüzde kullanılan son versiyonu HTML5 olarak adlandırılmaktadır. Basit bir ilişkilendirme ve yönlendirme işlevi olan bu dil, programlama dili olarak ifade edilmez. Bunun nedeni ise HTML etiketleri ile bir program yazılamamasıdır. Bir web sitesi hazırlayabilmek için temel kodlama ve tasarım konularının bilinmesi gerekmektedir. Web kodlama yapabilmek için ASP, JSP, PHP, Java, CSS3, HTML5 vb. yazılım dillerinden en az birine hâkim olunması önerilir. HTML standartları W3C - Dünya Çapında Ağ Konsorsiyumu tarafından belirlenmektedir. HTML’nin temelini etiket (Tag) oluşturmaktadır. W3C (World Wide Web Consortium) - Dünya Çapında Ağ Konsorsiyumu 1994 yılında Tim Berners-Lee tarafından MIT ve CERN bünyesinde kurulmuştur. Dünya Çapında Ağ (WWW) standartlarını belirleyen örgüttür.

HTTP (Hyper Text Transfer Protocol-Hiper Metin Aktarım Protokolü): Web sayfalarının sunucu ve son kullanıcı bilgisayar arasında nasıl aktarılacağını düzenleyen ve kontrolü sağlayan sistemdir. Kısaca ifade edecek olursak, iletişim kuralıdır. İstek-cevap bilgisayarların birbirleriyle konuşmaları için kullanılan temel metotlardan birisidir.

HTTPS (Hypertext Transfer Protocol Secure, Güvenli Hiper-Metin Aktarım Protokolü): Hiper metin aktarım iletişim kuralının (HTTP) güvenli ağ protokolü ile birleştirilmiş biçimidir. HTML durağan bir yapıya sahiptir. Sunucuya yüklenmiş HTML sayfaları kullanıcının web tarayıcısında görüntülenmektedir. Günümüzde farklı web tarayıcıları kullanılmaktadır. Google Chrome, Internet Explorer, Firefox, Opera ve Safari günümüzdeki tarayıcılara örnek verilebilir. HTML sayfalarını hazırlamak için web sayfası editörü ya da basit bir kelime işlemci gerekebilir. HTML sayfası oluşturabilmek için farklı web kodlama düzenleme yazılımları da kullanılabilir. Önerilen editör yazılımları: Notepad++, Aptana Studio, Komodo Edit, Sublime Text, Brackets’dır. Bazı yazılımlar görsel tasarım yaptığınızda arka planda html kodlamasını kendisi yapmaktadır. Adobe Dreamweaver, Microsoft Expression Web ve BlueGriffon gibi yazılımlar örnek verilebilir. HTML sayfası kullanılacak ikonları geliştirmek için kullanılabilecek ücretsiz yazılımlardan bazıları şunlardır: Gimp, Paint.net, Layerstyle, Pixlr. Bu yazılımlar dışında internet üzerinden ücretli ya da ücretsiz birçok farklı yazılım bulabilirsiniz. Bir HTML belgesi başlıca 2 kısımdan oluşmaktadır. Bunlar; Baş HEAD ve Gövde BODY kısımlarıdır.

HTML sayfalarının web tarayıcı ile tanışmasını DocType etiketi kullanılır. HTML sayfaları web tarayıcılarında farklı ekran görüntüsü verebilir. DocType etiketi ile tarayıcıya sayfanın standardını yani HTML’nin hangi versiyonu kullanıldığını tanımlar bu sayede farklı web tarayıcılarında tasarımcının hazırladığı sayfa aynı görüntülenir. HTML’de üç tip belge türü seçeneği bulunur. Bunlar

1. Transitional (Geçişli),
2. Strict (Katı),
3. Frameset (Çerçeve Kümeleri)’dir.

En sık kullanılan Transitional (Geçişli) belge türüdür.

HTML dilinde sayfalar hazırlayabilmek için HTML etiketlerini yazarak kayıt etmeniz gerekecektir. Bunun için farklı düzenleme yazılımları kullanabilirsiniz. Bilgisayarınızda kullandığınız işletim sisteminizde yüklü olan bir kelime işlemci yazılımı ya da Not Defteri yazılımı ile html dilindeki web sayfasını yazabilir ve kayıt edebilirsiniz.

Bilgisayarınızda kullandığınız işletim sisteminizde yüklü olan bir kelime işlemci yazılımı ya da Not Defteri üzerinde html dilindeki web sayfasını oluşturabilirsiniz. Sayfada Türkçe Karakter sorunu yaşanmaması için Kodlama UTF-8 olması gerekiyor. Bu sorunu oluşumunu engellemek için kesin çözüm ise HTML etiketlerinden META etiketinde tanımlama yapmaktır. HTML5 öncesi sürümler için Head bölümüne yazılması gereken; meta http-equiv=”Content-Type”content=”text/html; charset=utf-8”/

HTML Etiketleri

HTML sayfaları HTML etiketi ile başlar ve /HTML etiketi ile biter. HTML komutları, küçük ve büyük “ …. ” işaretleri arasına yazılır. Açma Etiketi: ETİKET ADI Kapama Etiketi: şeklinde yazılmaktadır. Örnek; Kalın Yazı Stili Kapatma işleminde en son açılan etiket ilk kapatılır. HTML etiketleri, “Satır İçi Etiketler” ve “Blok Etiketler” olmak üzere iki grupta toplanır. Satır İçi etiketler ile farklı bir stilde görüntü oluşturulabilir. Buna örnek olarak etiketinin kullanımı gösterilebilir. Blok etiketler ise alt alta yer alırlar ve kendi satırlarında yani bloklarında geçerlidirler.

BR etiketi, html kodlamada sık kullanılan etiketlerden birisidir. Satır atlama işlevini görür. Sayfada yer alan nesneden sonra gelecek nesnenin bir alt satırda yer almasını sağlar. br br/ olarak kullanılır.

HR etiketi, sayfa içinde yatay çizgi oluşmasını sağlar. hr hr/ olarak kullanılır.

Center etiketi, sayfa içi nesnelerin ortalanmasını sağlar. Kullanımı aşağıdaki gibidir:

center arasında yer alan nesneleri ortalar /center

Div etiketi, Division - Bölümlendirme işlevine sahiptir. HTML sayfalarında çok sık kullanılan bir etikettir.

Table etiketi, HTML belgesinde tablo oluşturmak için kullanılan etikettir. Web sayfası tasarımında sık kullanılan etiketlerden birisidir. Sayfa mimarisinde web tasarımcılarının işini kolaylaştırarak nesnelerin kolay hizalanmalarını sağlamaktadır.

Head etiketi yani head …… /head arasındaki bilgiler, içinde HTML sayfasının teknik özelliklerini, tanımları barındırmaktadır. Özellikle bir web sayfasının tanımının yapılması internet tarayıcıları ve arama motorları açısından önemlidir. Head …… /Head arasında sık kullanılan HTML etiketleri şunlardır; title , link , style , base , meta , script

TITLE etiketi, head etiketinden sonra kullanılır. link etiketi hazırlanan web sayfasının internet tarayıcısında görüntülenen sayfa başlığını belirler.

LINK etiketi, head etiketinden sonra kullanılır. link sayfaya dışardan eklenecek özelliklere ait dosyaların yolunun belirtildiği etikettir.

BASE etiketi, head etiketinden sonra kullanılır. base etiketi ile hazırlanan web sayfasının başlangıç adresi belirlenir.

STYLE etiketi, head etiketinden sonra kullanılır. Web sayfasında kullanılacak elemanların büyüklük, renk gibi özellikleri belirlenebilir.

META etiketi, head etiketinden sonra kullanılır. Önceleri İnternet Arama Motorları tarafından çok sık kullanılmaktaydı. Fakat sayfalarının aramalarda üst sırada yer almasını isteyen birçok web tasarımcısı yanlış yönlendirme ve tanımlamalar yaptığı için arama motorları sayfa derecelendirmelerinde farklı kriterler kullanmaya başlamışlardır.

SCRIPT etiketi, head etiketinden sonra kullanılır.

script etiketi sayfada çalışacak bir javascript tanımlanması ya da harici dosya yüklenmesini sağlamaktadır. Tanımlanan scriptler internet tarayıcısının Script Yorumlayıcısı (script engine) tarafından çalıştırılır.

BODY etiketi, HTML dilinde hazırlanmış bir web sitesinin gövdesini oluşturmaktadır. Body etiketinin kapsadığı alanda yani body …….. / body arasında kullanılacak etiketler ile web sayfasında görüntülenecek metinler, görseller, video adresleri gibi nesnelerin adresleri ve tanımlamaları yer alır.

Liste etiketi, HTML sayfası içinde 3 farklı liste hazırlanabilir. Bunlar;

1. Sıralı Listeler
2. Sırasız Listeler
3. Tanım Listeleri

ol Sıralı liste için kullanılır. ul Sırasız liste için kullanılır. li Liste maddesi için kullanılır. dl Tanımlama listesi için kullanılır. dt Terim tanımları yapılır. dd Tanım açıklaması yapılır.

Paragraf etiketi, Web sayfasında yer alacak paragraf metinleri için kullanılır. Var olan metinden ayrı bir paragraf oluşturabilirsiniz.

Başlık etiketi, h1 ... h6 arasında sıralanan 6 farklı etiket ile sayfa içinde başlıklar kullanılır. Başlıca metin biçimlendirme etiketleri; B etiketi, Strong etiketi, I ve Em etiketleri, Font etiketi ile Small ve Big etiketleridir. B etiketi, b …… /b etiketi içinde yer alan yazının kalın olarak görüntülenmesini sağlar. Strong etiketi, B etiketi ile aynı işleve sahiptir. strong ……… /strong arasında yazılanların kalın olarak görüntülenmesini sağlar. I ve Em etiketleri, i ……. /i arasında ya da em /em arasında yazılanların ekrana italik olarak gelmesini sağlar. Font etiketi, yazı boyutu, rengi ve yazı tipinin değiştirilebilmesini sağlar. Small ve Big etiketleri, yazının boyutlarını küçültür ya da büyütür.

HTML ile hazırlanan web sayfalarında kullanılacak renkler “İngilizce isimleriyle” ya da “hexadecimal renk kodları” ile yazılırlar. Renk kodlarının başına “ # ” işareti konulmalıdır. Renk kodları RGB ile uyumludur. Web tarayıcılarının html kodları, içinde kullanılan ortak renkleri sorunsuz tanıyarak çalıştırmaktadır. Bu renkler; Siyah (black), Gümüş (silver), Gri (gray), Beyaz (white), Kırmızı (red), Bordo (maroon), Mor (purple), Yeşil (green), Çim (lime), Zeytin (olive), Sarı (yellow), Altuni (gold), Turuncu (orange), Mavi(blue), Lacivert (navy), Turkuvaz (aqua)’dır. Örneğin; body bgcolor=”green” ve body bgcolor = ”#008000” aynı renkleri ifade etmektedir.

HTML5 İle Gelen Yenilikler, Grafik ve Formlar

HTML5 daha esnek kodlama sunarak farklı dillerin ortak çalışmasına imkân tanımıştır. İnternet Explorer, Mozilla Firefox ve Opera tarayıcılarının güncel sürümleri tarafından kısmen desteklenmektedir. PHP, ASP, ASP.net gibi web programlama dilleri, JavaScript betik dili ve CSS3 ile uyumlu çalışmaktadır. CSS ve JavaScript kullanılarak dinamik web sayfaları hazırlanabilmektedir. HTML5 ile gelen yeni etiketler sayesinde yeni işlevler kazandırılmıştır.

Header Etiketi: etiketi ile web sayfalarının başlığı ya da sayfa içindeki bazı bölümlerin başlığı yazılabilir. Yapısal etiketler arasında yer almaktadır.

Article Etiketi: etiketi ile bağımsız bir içerik eklenebilir. Kendi başına bir içerik olarak ya da sayfa içerisinde birden çok kullanılabilir. Blog, forum mesajları ve haber metinlerinde kullanılabilir.

Aside Etiketi: Web sayfalarında ana unsurla yani kendinden önceki içerikle bağlantılı alt bilgiler veren bölümler hazırlanabilir. Slidebar (kenar çubuğu) ile sayfada görüntülenecektir.

Audio Etiketi: Mp3, Wav ve Ogg uzantılı ses ve müzik dosyalarının tarayıcı üzerinde çalışmasını sağlar. audio olarak kullanılır. Nav Etiketi: nav etiketi gezinti (navigasyon) linklerinin bulunduğu bölümü tanımlar. Belgenin tüm link grupları nav etiketi ile işaretlenmemelidir. nav etiketi sadece ana blokta bulunan bağlantılar için tasarlanmıştır.

Video Etiketi: Mp4, WebM ve Ogg uzantılı dosyaları çalıştırmak için kullanılır. Kaynağı belirtilmiş video dosyası açılacaktır. Video kaynağı ve açılacak videonun pencere büyüklüğü belirlenmelidir.

Source Etiketi: Bir web tarayıcısının desteklediği özelliğe göre ses veya video dosyalarının farklı formatlarından uygun olanının çalışmasını sağlamaktadır.

Figure ve Figcaption Etiketleri: figure etiketi içinde resim ve fotoğraf gibi görseller için kullanılır. figcaption etiketi figure etiketi içinde kullanılır ve görsel hakkında bilgi yazılır.

Canvas Kullanımı: canvas etiketi kullanılır. Kullanılan etiketin grafikler için sadece tuval üzerinde tutucu görevi vardır. Grafik çizmek için script kullanmak gerekir. Canvas ile yollar, kutular, daireler, yazılar ve resimler eklemek için birkaç değişik özellik kullanır.

SVG Etiketi Kullanımı: SVG, Skala edilebilir Vektör Grafikleri (Scalable Vector Graphics) anlamına gelmektedir. Canvas gibi bir çizim alanı sunmaktadır. Bu çizim alanında çizim yapılabilmektedir. Vektör temelli grafikleri ifade etmek için kullanılmaktadır. Örneğin, daire ya da poligon çizilebilmektedir. SVG grafikleri XML formatında tanımlamaktadır. Dolayısıyla, grafikler büyütülseler ya da yeniden boyutlandırılsalar da kaliteleri düşmez. SVG dosyaları içindeki her etiket, her özellik hareketlendirilebilir.

HTML5 İle Hazırlanmış Web Sayfasına Coğrafi Konum ve Video Eklemek (2. Düzey Başlık) Google Maps özelliğini sayfa içinde kullanarak web sayfasında coğrafi konumu gösterebilirsiniz. Örnek gösterim aşağıdaki gibidir:

script src=”https://maps.googleapis.com/maps/api/js?callback=m yMap” / script

HTML ile hazırlanan web sayfalarında formlar oluşturulabilmektedir. Formlar ile web kullanıcısı bilgisi toplanabilir. Örneğin; metin alanları, açılabilir listeler, seçenek kutuları veya kontrol kutuları hazırlanabilir.

Input Etiketi: Bir form oluşturmak için gerekli en önemli

etikettir. input olarak yazılır.

Button Etiketi: Web sayfasına buton eklemek için kullanılır. Örnek kullanımı aşağıdaki gibidir:

button type=”button” onclick=”alert(‘Anadolu Üniversitesi’)” Tıkla /button

“Action” Etiketi ve “Submit” Özelliği: Web sayfasında kullanıcıların giriş yaptığı bilgi ve seçimlerinin başka bir sayfaya gönderilmesi için action kullanılır. Gönderme işlemi için type=“submit” özelliği kullanılır. Kullanıcının giriş yaptığı bilgi yönlendirilen sayfada kullanılır.

Datalist Etiketi: Etiketin kullanımında input etiketi için önceden tanımlanmış seçenekler listesini belirtir. Web sayfasından kullanıcılar veri girdiklerinde önceden tanımlanmış seçeneklerin açılır listeleri görüntülenir.

Keygen Etiketi: Kullanıcıların kimliğini doğrulamak için güvenli bir yol sağlamaktır. keygen etiketi, bir form içerisinde bir anahtar çifti (key-pair) jeneratörü belirtir. Form gönderildiğinde biri özel diğeri genel olmak üzere iki anahtar oluşturulur. Özel anahtar kullanıcının bilgisayarında saklanır, genel olanı ise sunucuya gönderilir. Genel anahtar, kullanıcının ileride tekrar kullanabilmesi için bir istemci sertifikası oluşturmak için kullanılır.

Output Etiketi: Yapılan bir hesaplamanın sonucunu gösterir.

Arpanet (Amerikan Gelişmiş Savunma Araştırmaları Dairesi - Advanced Research Projects Agency Network): Araştırmacıları ve araştırmalarını bir ağ üzerinden birbirine bağlamak için geliştirilmiş bir ağ yapısıdır. İnternetin ortaya çıkışını sağlamıştır. Paket anahtarlama ilk kez burada kullanılmıştır.

DNS (Alan Adı sistemi - Domain Name System): Ağda yer alan her bilgisayarın IP adresine göre hiyerarşik bir adlandırma sistemidir. FTP (File Transfer Protocol - Dosya Gönderme Protokolü): Web sunucu ve kullanıcı bilgisayarı arasında dosya aktarımı yapmak için geliştirilen bir protokoldür (iletişim kuralıdır).

HTTP (Hyper Text Transfer Protocol -Hiper Metin Aktarım Protokolü): Web sayfalarının sunucu ve son kullanıcı bilgisayar arasında nasıl aktarılacağını düzenleyen ve kontrolü sağlayan sistemdir. Kısaca iletişim kuralıdır. İstek-cevap bilgisayarların birbirleriyle konuşmaları için kullanılan temel metotlardan birisidir. İstek-Cevap kullanılırken ilk bilgisayar bir istek gönderir ve ikinci bilgisayar da bu isteği yanıtlar.

HTTPS (Hypertext Transfer Protocol Secure, Güvenli Hiper-Metin Aktarım Protokolü): Hiper metin aktarım iletişim kuralının (HTTP) güvenli ağ protokolü ile birleştirilmiş olanıdır. Klasik HTTP protokolüne SSL protokolünün eklenmesi ile elde edilir.

IMAP (Internet Message Access Protocol; -İnternet Mesaj Erişim Protokolü): Bir e-posta iletişim protokolüdür.

IP (Internet Protokol): İnternet ağındaki her bilgisayarın bir adresine verilen isimdir. IP adresleri kullanıcıların kullanımı için site adı olarak adreslendirilir.

İnternet: Interconnected Networks isminin kısaltması olarak kullanılan ve ağların birleşmesinden oluşan bir ağ yapısıdır. Bilgisayarların birbirine bağlı olduğu bir ağ yapısından oluşmaktadır.

İstemci (Client): Sunucu bilgisayarlara bağlanarak onlardan veri çeken ve bunu web tarayıcısında sunan bilgisayarlara denir.

Paket Anahtarlama (Packet Switching): Paket anahtarlama uygun boyuttaki bloklar içerisinde tüm verilerin aktarıldığı bir dijital ağ iletişimi yöntemidir.

POP3 (Post Office Protocol 3 - Postane Protokolü 3): OSI referans modelinin uygulama katmanında çalışan bir e- posta iletişim protokolüdür.

Router (Yönlendirici): IP paketlerini, bir network’ten başka bir network’e ileten cihazlara router denir.

RSS (Rich Site Summary - Zengin Site Özeti): RSS sistemi haber sağlayıcıları, bloglar ve podcastlar tarafından kullanılan ve yeni eklenen içeriğin kolaylıkla takip edilmesini sağlayan bir web sayfası bildirimcisidir. Kullandığı dosya biçimleri .rss ve .xml’dir.

Server (sunucu): Bilgisayar ağlarında, diğer ağ bileşenlerinin (kullanıcıların) erişebileceği, kullanımına ve/veya paylaşımına açık kaynakları barındıran bilgisayardır. Kısaca web sayfalarını barındıran bilgisayardır.

Servis Sağlayıcılar: İnternetle ilgili çeşitli servisleri kullanıcılara sunan şirketlerdir. Kısaca internet bağlantısı sağlayan kurumlardır.

SSL (Secure Sockets Layer - Güvenli Giriş Katmanı): SSL, sunucu ile alıcı iletişimi esnasında verilerin şifrelenerek aktarılmasını sağlar.

SMTP (Simple Mail Transfer Protocol - Basit Posta Aktarım Protokolü): Web üzerinde e-posta akışını sağlayan yani sunucu - istemci arasındaki iletişim sürecini belirleyen protokoldür.

TCP / IP (Transmission Control Protocol/Internet Protocol): İletim Kontrol İletişim Kontrolü olarak çevrilebilir. İnternetin temeli olarak görülmektedir. Bilgisayar ağlarında biriler arasında organizasyonu sağlayarak sorunsuz veri iletişimi sağlayan iletişim protokolleridir.

URL (Standart Kaynak Konumlandırıcı - Uniform Resource Locator): Web’de bir kaynağa bir standarda göre verilen karakterlerdir.

Web Sayfası: Web tarayıcısı üzerinden görüntülenen sayfalardır. İçinde metin, ses, animasyon, video gibi çoklu ortam nesnelerini barındırabilir.

Web Tarayıcısı: Web sayfalarını görüntülememizi sağlayan yazılımlardır. Standart web tarayıcısı; metin veya çoklu ortam dosyalarını açabilir, kaydedebilir, HTML’den HTTP’ye bütün protokolleri ve standartları destekler, açılan sayfada aranan nesneyi bulabilir, sık kullanılanlar ve geçmiş listesi yapabilir, genel ağa dosya yükleme ve genel ağdan dosya indirme yapabilir, e-posta ve metin editörleriyle bütünleşebilir. Linkleri (bağlantı) izleyebilir. Dosya sistemlerini okuyabilir, bağlayabilir, kaydedebilir. Çokluortam dosyalarını oynatabilir veya kaydedebilir, sayfanın çıktısını alabilir, çevrimdışı çalışabilir.

WWW (World Wide Web): İnternet üzerinde yayınlanan birbirleriyle bağlantılı hiper-metin dokümanlarından oluşan bir bilgi sistemidir.