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

... konulu sunumlar: "HTML Dili’nin Genel Özellikleri Abdullah KUZU Anadolu Üniversitesi Eğitim Fakültesi BÖTE Mart, 2004 www.ebiltek.com."— Sunum transkripti:

1 HTML Dili’nin Genel Özellikleri Abdullah KUZU Anadolu Üniversitesi Eğitim Fakültesi BÖTE Mart, 2004 www.ebiltek.com

2 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.) www.ebiltek.com

3 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. www.ebiltek.com

4 Ç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 www.ebiltek.com

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

6 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 www.ebiltek.com

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

8 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. www.ebiltek.com

9 HTML Dosyasının Özellikleri (devam) Benim ilk sayfam ile Benim ilk sayfam arasında fark yoktur www.ebiltek.com

10 Zorunlu Belirteçler...... www.ebiltek.com

11 Basit bir HTML sayfası HTML Öğreniyorum -- HTML Öğreniyorum --... Diğer kodlar ve metinler... www.ebiltek.com

12 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 www.ebiltek.com

13 …. 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 www.ebiltek.com

14 ... 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. www.ebiltek.com

15 Ö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: www.ebiltek.com

16 Ö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 www.ebiltek.com

17 Ö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 www.ebiltek.com

18 Ö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. www.ebiltek.com

19 Ö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 www.ebiltek.com

20 Özellikleri (devam) (devam) Expires: Sat, 06 Jan 1990 00:00:01 GMT From: boteb-1@tutor.fedu.metu.edu.trboteb-1@tutor.fedu.metu.edu.tr Reply-to: boteb-2@tutor.fedu.metu.edu.tr www.ebiltek.com

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

22 Ö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... www.ebiltek.com

23 Ö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 www.ebiltek.com

24 Ö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 www.ebiltek.com

25 Ö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 www.ebiltek.com

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

27 Ö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. www.ebiltek.com

28 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 www.ebiltek.com

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

30 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) www.ebiltek.com

31 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! www.ebiltek.com

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

33 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, 3... www.ebiltek.com

34 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. www.ebiltek.com

35 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 www.ebiltek.com

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

37 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! www.ebiltek.com

38 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 www.ebiltek.com

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

40 Listeler (devam) Menü Listeleri İşletim Sistemleri: WindowsNT Unix Linux OS2 TOS www.ebiltek.com

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

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

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

44 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 www.ebiltek.com

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

46 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 www.ebiltek.com

47 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 www.ebiltek.com

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

49 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. www.ebiltek.com

50 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 www.ebiltek.com

51 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... www.ebiltek.com