HTML Dili’nin Genel Özellikleri Abdullah KUZU Anadolu Üniversitesi Eğitim Fakültesi BÖTE Mart,

HTML Nedir? İşaretleme dili (HyperText Markup Language) Belirteçler (tags) W3 konsorsiyumu Geliştiriciler: Netscape ve Microsoft HTML 2.0, 3.0, 3.2, 4.0, 4.01 … Stiller (başlık, paragraf, listeler vb.) Özellikler (kalın, italik vb.)

Gerekli Araçlar Metin editörleri ASCII (American Standart Code for Information Interchange) editörü ASCII Not defteri HTML Editörleri/Yardımcıları FrontPage, Dreamweaver vb. HTML Çeviriciler MS Word, MS Excel, MS PowerPoint vb.

Çevirici Kullanmanın Üstünlükleri Belirteçleri hatırlamak gerekmez Kapatılmamış belirteç kalmaz Yazım hataları olmaz İstenilen kelime işlemci kullanılabilir

Çevirici Kullanmanın Zayıf Yönleri HTML dilinin tüm özellikleri desteklenmez Stil özellikleri eklendiği için kodu okumak zorlaşır

Metin Editörü Kullanmanın Üstünlükleri HTML dilinin tüm özellikleri kullanılabilir Yeni eklenen bir özelliği kullanabilmek için çevrici programın versiyon geliştirmesi beklenmez

HTML Dosyasının Özellikleri Dosya uzantısı =.htm /.html Komut yazımı Zemin rengi sarı Taşıyıcı içeriği

HTML Dosyasının Özellikleri (devam) Belirteçlerin yazımında büyük-küçük ayrımı yoktur. Boşluklar (space), Alt satıra inme (Enter), Sekme’nin önemi yoktur.

HTML Dosyasının Özellikleri (devam) Benim ilk sayfam ile Benim ilk sayfam arasında fark yoktur

Zorunlu Belirteçler

Basit bir HTML sayfası HTML Öğreniyorum -- HTML Öğreniyorum Diğer kodlar ve metinler...

Giriş Tanımlayıcıları Dökümanı HTML dökümanı olarak tanımlar Olmasa da tarayıcı bunu HTML dökümanı olarak yorumlar

…. Her doküman bu belirteçle başlar ve biter Tarayıcıya HTML dökümanı olduğunu belirtir Dökümanın başında ya da sonunda olduğunu belirtir

... Doküman ile ilgili bilgiler barındırır Dokümanın tarayıcıdaki görünümünü etkilemez Özellikler ile kullanılabilir Doküman için temel URL adresini tanımlar. Tarayıcının doküman içinde metinsel arama yapabilmesini sağlar. Dokümanlar arasındaki ilişkileri tanımlar. Doküman hakkında genel bilgi tanımları yapılır. Stil elemanlarını destekleyen tarayıcılar için kullanılan stili belirler. Dokümanın başlığını belirtir.

Özellikleri Dokümanın kendi URL adresini belirtir Sadece belirteci içinde kullanılır Doküman içerisinde göreceli olarak belirtilmiş bağlantılara bu adres üzerinden ulaşılır. Belirtilmemişse, tarayıcı dokümana ulaşmak için kullandığı adresi kullanır Bir adet özelliği vardır: HREF:

Özellikleri (devam) Sunucu tarafından işlenir Doküman üzerinde arama yapılabileceğini belirtir Dokümanın indexli olduğunu belirtir Tarayıcıda iki çizgi arasında gösterilir. Arama yapılacak kelime yazılır ve Enter/Return’a basılır Yazılan kelime URL olarak yorumlanır, boşluklara “+” ifadesi konulur Sunucuya gönderilir CGI bu URL’yi işler ve tarayıcıya gönderir. Tek bir özelliği vardır: PROMPT

Özellikleri (devam) Doküman ve diğer objeler arasındaki ilişki kurar Tek taraflıdır Dokümanda kullanılan stil elemanlarını ve konumlarını belirtmekte kullanılabilir Özellikleri: REL, REV, METHODS, TITLE, HREF Bu HTML dokümanında stil kağıtları (style sheet) kullanılmıştır. Sayfayı oluşturan resim ve metin bilgileri

Özellikleri (devam) … Tarayıcının başlık kısmında görülecek ismi belirtir Okunabilmesi açısından kısa, yeterince açık ve anlamlı olmalıdır BOTE Anadolu’ya Hoşgeldiniz.

Özellikleri (devam) dokümanda diğer HTML belirteçleri tarafından tanımlanmamış meta bilgilerini tanımlar Internet arama motorları, anahtar kelime kısmında yazacağınız kelimeler ile sayfayı tanımlar

Özellikleri (devam) (devam) Expires: Sat, 06 Jan :00:01 GMT From: Reply-to:

Özellikleri (devam) … Stil sayfalarının kurallarını içerir. <!— H1={font-size=18pt; text-transform=capitalize} P {font-size=12pt} -->

Özellikleri BACKGROUND Sayfanın tümünde zemin olarak görünmesini istediğimiz resim dosyasının adresi yazılır... Sayfayı oluşturan resim ve metin bilgileri...

Özellikleri (devam) BGCOLOR Zemine bir resim koymadan zeminin rengini değiştirmek için kullanılır Renk değeri hexadecimal ya da ismi ile (blue, green vb.) belirtilir Sayfayı oluşturan resim ve metin bilgileri

Özellikleri (devam) LEFTMARGIN Sayfanın solunda boşluk bırakır (sadece IE) Doküman sayfanın sol kenarından, 40 pixel uzaklıktadır. Değer olarak “0” girilirse sola dayalı olarak görülür

Özellikleri (devam) LINK, VLINK, ALINK Bağlantı verilen metnin rengini belirler LINK: Bağlantı verilen yazının rengi VLINK: ziyaret edilmiş bağlantılar ALINK: Aktif durumdaki bağlantılar Sayfayı oluşturan resim ve metin bilgileri

Özellikleri (devam) TEXT Dokümanda normal olarak yazılmış metnin rengini belirler Sayfayı oluşturan resim ve metin bilgileri

Özellikleri (devam) TOPMARGIN Sayfanın tarayıcı ile arasındaki üstten boşluğu belirler (yalnız IE) Metni tarayıcı penceresinin tepesinden 40 pixel aşağıdan başlatır. Değer olarak “0” girilirse sayfa tarayıcı pencersinde yukarı dayalı olarak görünür.

Paragraf Başlıkları 6 değişik paragraf başlığı bulunmaktadır 1. Başlık 2. Başlık 3. Başlık 4. Başlık 5. Başlık 6. Başlık

Paragraf ve Listeler …… Paragraf başı yapılacak Paragraf başı yapıldı. Lütfen satırlar arasındaki boşluklara dikkat ediniz!

Listeler 5 farklı liste seçeneği vardır Numaralı veya sıralı listeler (ordered list) İşaretli veya sırasız listeler (unordered list) Tanım listeleri (definition list) Menü listeleri (menu list) Dizin listeleri (dikey veya yatay olarak hizalanmış kısa liste elemanları içerir) (directory list)

Listeler (devam) Numaralı veya Sıralı Listeler Başlarında sıra numaraları vardır. Liste maddesi eklenince sayı otomatik olarak eklenir. İç içe kullanılabilir. Not: belirteci tek taraflıdır. Kapatma belirteci kullanılmaz!

Listeler (devam) Numaralı veya Sıralı Listeler Görsel Araçlar: Video Projektörler DataShow Tepegöz

Listeler (devam) Numaralı veya Sıralı Listeler TYPE özelliği kullanılarak numaralandırma tipi seçilebilir (TYPE=A)Büyük Harfler. Örneğin; A, B, C... (TYPE=a)Küçük Harfler. Örneğin; a, b, c... (TYPE=I)Büyük Roma Rakamları. Örneğin; I, II, III... (TYPE=i)Küçük Roma Rakamları. Örneğin; i, ii, iii... (TYPE=1)Sayılar. Örneğin; 1, 2,

Listeler (devam) Numaralı veya Sıralı Listeler START özelliği ile istenilen sayıdan başlatılır İstediğiniz dosyayı yüklemek için tıklayınız. Bu diyalog kutusunda dosyanızı kaydetmek için bir isim veriniz. Dosyayı yüklemek için OK butonuna basınız.

Listeler (devam) İşaretli veya Sırasız Listeler Başlarında özel bir karakter vardır. İç içe kullanılabilir. TYPE Özelliği kullanılarak özel karakter değiştirilebilir TYPE=disc TYPE=circle TYPE=square

Listeler (devam) İşaretli veya Sırasız Listeler Görsel Araçlar: Video Projektörler DataShow Tepegöz

Listeler (devam) Tanım Listeleri Diğer metinlere göre ötelenmiş olarak görünürler. Konuşma metinleri de bu şekilde gösterilebilir. Kavram (Not DT kullanılabilir) Kavramın tanımı Not: ve belirteçleri tek taraflıdır. Kapatma paragrafı kullanılmaz!

Listeler (devam) Tanım Listeleri İletişim: Sözcüklerin, resimlerin, figürlerin, grafiklerin vb. sembollerin kullanılarak bilgi, düşünce, duygu ve becerilerin aktarılması süreci

Listeler (devam) Menü Listeleri Kısa paragraflar içerir. Liste maddeleri başında numara olmaz.

Listeler (devam) Menü Listeleri İşletim Sistemleri: WindowsNT Unix Linux OS2 TOS

Listeler (devam) Dizin Listeleri Liste maddeleri, sütunlar şeklinde yazılır Kısa liste elemanları için (max: 24 karakter) kullanılır.

Listeler (devam) Dizin Listeleri HTML Liste Çeşitleri: Numaralı Listeler Numarasız Listeler Tanım Listeleri Menü Listeleri Dizin Listeleri

Açıklama Belirteci Deneme Dosyası Açıklama olarak yazılan bölüm ekranda görülmez.

Bağların Oluşturulması Nerelere bağ oluşturulabilir? Yerel diskteki başka sayfalara İnternet üzerindeki diğer sayfalara Aynı sayfa üzerindeki başka bölümlere

Bağların Oluşturulması (devam) Bağ belirteci …… NAME HREF TITLE TARGET Özellikler TARGET: _blank _self _parent _top

Bağların Oluşturulması (devam) Yerel Diskteki Başka Sayfaya Bilgisayar Ağları Klavye ve Tuş Grupları Bilgisayar Donanımı Paint ile Resim Yapmak Anasayfaya Dön

Bağların Oluşturulması (devam) Yerel Diskteki Başka Sayfaya Link Anlamı HREF=“menu.html"Dosya aynı dizindedir. HREF=“konular/menu.html"Dosya “konular" adlı dizinin altındadır. HREF=“konular/lisans/menu.html"Dosya bir altdizinin altındadır HREF="../menu.html"Dosya bir üst dizindedir HREF="../../menu.html"Dosya iki üst dizindedir

Bağların Oluşturulması (devam) İnternet Üzerinde Başka Sayfaya ODTÜ Boğaziçi Üniversitesi Hacettepe Üniversitesi Anadolu Üniversitesi

Bağların Oluşturulması (devam) İnternet Üzerinde Başka Sayfaya (devam) Bir FTP sitesine bağlantı oluşturur. FTP sitesine bağlı olarak kullanıcı adı ve şifre yazarak girmeniz gerekebilir. HTML ile ilgili sorular Bir Usenet Haber grubuna bağlantı oluşturur. Bu bağlantıyı çalıştırdığınızda bir makineye telnet oturumu açar.

Bağların Oluşturulması (devam) Aynı Sayfada Başka Bölüme Hedef ismi verilir Bölüm 1 Bağ belirtecine hedef ismi yazılır Aynı dosya içindeki 1. Bölüm Hedef başka bir dosya içindeyse Farklı dosya içindeki 1. Bölüm

Bağların Oluşturulması (devam) Aynı Sayfada Başka Bölüme Konu 1 Konu 2 Konu 3 Konu 1 Burada ilk konu anlatılmaktadır... Sayfanın başındaki "Konu 1" bağına tıklandığında bu satır ekrandaki ilk satır olacak şekilde aynı dosya tekrar yüklenecektir... Konu 2 Burada ikinci konu anlatılmaktadır... Sayfanın başındaki "Konu 2" bağına tıklandığında bu satır ekrandaki ilk satır olacak şekilde aynı dosya tekrar yüklenecektir... Konu 3 Burada üçüncü konu yer almaktadır... Sayfanın başındaki "Konu 3" bağına tıklandığında bu satır ekrandaki ilk satır olacak şekilde aynı dosya tekrar yüklenecektir...