HTML Dilinin Genel zellikleri Abdullah KUZU Anadolu niversitesi
HTML Dili’nin Genel Özellikleri Abdullah KUZU Anadolu Üniversitesi Eğitim Fakültesi BÖTE Mart, 2004 www. ebiltek. com
HTML Nedir? n n n n İşaretleme dili (Hyper. Text Markup Language) Belirteçler (tags) W 3 konsorsiyumu Geliştiriciler: Netscape ve Microsoft HTML 2. 0, 3. 2, 4. 01 … Stiller (başlık, paragraf, listeler vb. ) Özellikler (kalın, italik vb. ) www. ebiltek. com
Gerekli Araçlar n Metin editörleri n n n HTML Editörleri/Yardımcıları n n ASCII (American Standart Code for Information Interchange) editörü Not defteri Front. Page, Dreamweaver vb. HTML Çeviriciler n MS Word, MS Excel, MS Power. Point vb. www. ebiltek. com
Çevirici Kullanmanın Üstünlükleri n n Belirteçleri hatırlamak gerekmez Kapatılmamış belirteç kalmaz Yazım hataları olmaz İstenilen kelime işlemci kullanılabilir www. ebiltek. com
Çevirici Kullanmanın Zayıf Yönleri n n HTML dilinin tüm özellikleri desteklenmez Stil özellikleri eklendiği için kodu okumak zorlaşır www. ebiltek. com
Metin Editörü Kullanmanın Üstünlükleri n n 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
HTML Dosyasının Özellikleri Dosya uzantısı =. htm /. html Komut yazımı <body bgcolor=yellow > Zemin rengi sarı </body> <başlama belirteci (özellik) > Taşıyıcı içeriği </bitiş belirteci> www. ebiltek. com
HTML Dosyasının Özellikleri n n (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
HTML Dosyasının Özellikleri n n <H 1> Benim ilk sayfam </H 1> ile <h 1>Benim ilk sayfam</H 1> arasında fark yoktur www. ebiltek. com (devam)
Zorunlu Belirteçler <HTML> <HEAD>. . . </HEAD> <BODY>. . . </BODY> </HTML> www. ebiltek. com
Basit bir HTML sayfası <HTML> <HEAD> <TITLE>HTML Öğreniyorum</TITLE> </HEAD> <BODY> <H 1> -- HTML Öğreniyorum -- </H 1>. . . Diğer kodlar ve metinler. . . </BODY> </HTML> www. ebiltek. com
Giriş Tanımlayıcıları n n Dökümanı HTML dökümanı olarak tanımlar Olmasa da tarayıcı bunu HTML dökümanı olarak yorumlar <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2. 0//EN"> <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 0 Transitional//EN"> www. ebiltek. com
<HTML> …. </HTML> n n n 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
<HEAD>. . . </HEAD> n n n <BASE> 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. <ISINDEX> Tarayıcının doküman içinde metinsel arama yapabilmesini sağlar. <LINK> Dokümanlar arasındaki ilişkileri tanımlar. <META> Doküman hakkında genel bilgi tanımları yapılır. <STYLE> Stil elemanlarını destekleyen tarayıcılar için kullanılan stili belirler. <TITLE> Dokümanın başlığını belirtir. www. ebiltek. com
<HEAD> Özellikleri <BASE. . . > n n n Dokümanın kendi URL adresini belirtir Sadece <HEAD> 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: <BASE HREF="http: //www. metu. edu. tr/"> www. ebiltek. com
<HEAD> Özellikleri (devam) <ISINDEX …> n n n n n 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 <HEAD> <ISINDEX PROMPT=“Arama kelimesi gir: ”> </HEAD> www. ebiltek. com
<HEAD> Özellikleri (devam) <LINK …> n n 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 <HTML> <HEAD> <TITLE>Bu HTML dokümanında stil kağıtları (style sheet) kullanılmıştır. </TITLE> <LINK REL="stylesheet" TYPE="text/css" HREF="formal. css" TITLE="formal"> </HEAD> <BODY> Sayfayı oluşturan resim ve metin bilgileri </BODY> </HTML> www. ebiltek. com
<HEAD> Özellikleri (devam) <TITLE> … </TITLE> n n 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 <HEAD> <TITLE> BOTE Anadolu’ya Hoşgeldiniz. </TITLE> </HEAD> www. ebiltek. com
<HEAD> Özellikleri (devam) <META …> n n 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 <META HTTP-EQUIV="Keywords" CONTENT="anahter kelimeler. . . "> www. ebiltek. com
<HEAD> Özellikleri (devam) <META …> (devam) <META HTTP-EQUIV="Expires" CONTENT="Sat, 06 Jan 1990 00: 01 GMT"> <META HTTP-EQUIV="From" CONTENT="boteb 1@tutor. fedu. metu. edu. tr"> <META HTTP-EQUIV="Reply-to" CONTENT=boteb 2@tutor. fedu. metu. edu. tr > Expires: Sat, 06 Jan 1990 00: 01 GMT From: boteb-1@tutor. fedu. metu. edu. tr Reply-to: boteb-2@tutor. fedu. metu. edu. tr www. ebiltek. com
<HEAD> Özellikleri (devam) <STYLE> …</STYLE> n Stil sayfalarının kurallarını içerir. <STYLE TYPE=“text/css”> <!— H 1={font-size=18 pt; text-transform=capitalize} P {font-size=12 pt} --> </STYLE> www. ebiltek. com
<BODY> Özellikleri BACKGROUND Sayfanın tümünde zemin olarak görünmesini istediğimiz resim dosyasının adresi yazılır. . . <BODY BACKGROUND="imagename. gif"> Sayfayı oluşturan resim ve metin bilgileri </BODY>. . . www. ebiltek. com
<BODY> Özellikleri (devam) BGCOLOR n n 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 <BODY BGCOLOR="#rrggbb"> Sayfayı oluşturan resim ve metin bilgileri </BODY> www. ebiltek. com
<BODY> Özellikleri (devam) LEFTMARGIN n Sayfanın solunda boşluk bırakır (sadece IE) <BODY LEFTMARGIN="40"> Doküman sayfanın sol kenarından, 40 pixel uzaklıktadır. </BODY> n Değer olarak “ 0” girilirse sola dayalı olarak görülür www. ebiltek. com
<BODY> Özellikleri (devam) LINK, VLINK, ALINK n n 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 <BODY LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb"> Sayfayı oluşturan resim ve metin bilgileri </BODY> www. ebiltek. com
<BODY> Özellikleri (devam) TEXT n Dokümanda normal olarak yazılmış metnin rengini belirler <BODY TEXT="#rrggbb"> Sayfayı oluşturan resim ve metin bilgileri </BODY> www. ebiltek. com
<BODY> Özellikleri (devam) TOPMARGIN n Sayfanın tarayıcı ile arasındaki üstten boşluğu belirler (yalnız IE) <BODY TOPMARGIN="40"> Metni tarayıcı penceresinin tepesinden 40 pixel aşağıdan başlatır. </BODY> n Değer olarak “ 0” girilirse sayfa tarayıcı pencersinde yukarı dayalı olarak görünür. www. ebiltek. com
Paragraf Başlıkları 6 değişik paragraf başlığı bulunmaktadır <body> <H 1> 1. Başlık <H 2> 2. Başlık <H 3> 3. Başlık <H 4> 4. Başlık <H 5> 5. Başlık <H 6> 6. Başlık </body> </H 1> </H 2> </H 3> </H 4> </H 5> </H 6> www. ebiltek. com
Paragraf ve Listeler <P> …… </P> <H 2> Paragraf başı yapılacak </H 2> <P> Paragraf başı yapıldı. Lütfen satırlar arasındaki boşluklara dikkat ediniz! </P> www. ebiltek. com
Listeler n 5 farklı liste seçeneği vardır n n n 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
Listeler (devam) Numaralı veya Sıralı Listeler n n n Başlarında sıra numaraları vardır. Liste maddesi eklenince sayı otomatik olarak eklenir. İç içe kullanılabilir. <OL> <LI> </OL> Not: <LI> belirteci tek taraflıdır. Kapatma belirteci kullanılmaz! www. ebiltek. com
Listeler (devam) Numaralı veya Sıralı Listeler <P> Görsel Araçlar: </P> <OL> <LI> Video Projektörler <LI> Data. Show <LI> Tepegöz </OL> www. ebiltek. com
Listeler (devam) Numaralı veya Sıralı Listeler n 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, III. . . (TYPE=i) Küçük Roma Rakamları. Örneğin; i, iii. . . (TYPE=1) Sayılar. Örneğin; 1, 2, 3. . . www. ebiltek. com
Listeler (devam) Numaralı veya Sıralı Listeler n START özelliği ile istenilen sayıdan başlatılır <OL TYPE=a START=3> <LI>İstediğiniz dosyayı yüklemek için tıklayınız. <LI>Bu diyalog kutusunda dosyanızı kaydetmek için bir isim veriniz. <LI>Dosyayı yüklemek için OK butonuna basınız. </OL> www. ebiltek. com
Listeler (devam) İşaretli veya Sırasız Listeler n Başlarında özel bir karakter vardır. <UL> <LI> </UL> n n İç içe kullanılabilir. TYPE Özelliği kullanılarak özel karakter değiştirilebilir TYPE=disc TYPE=circle TYPE=square www. ebiltek. com
Listeler (devam) İşaretli veya Sırasız Listeler <P> Görsel Araçlar: </P> <UL> <LI> Video Projektörler <LI> Data. Show <LI> Tepegöz </UL> www. ebiltek. com
Listeler (devam) Tanım Listeleri n n Diğer metinlere göre ötelenmiş olarak görünürler. Konuşma metinleri de bu şekilde gösterilebilir. <DL> <TD> Kavram (Not DT kullanılabilir) <DD> Kavramın tanımı </DL> Not: <TD> ve <DD> belirteçleri tek taraflıdır. Kapatma paragrafı kullanılmaz! www. ebiltek. com
Listeler (devam) Tanım Listeleri <DL> <TD> İletişim: <DD> Sözcüklerin, resimlerin, figürlerin, grafiklerin vb. sembollerin kullanılarak bilgi, düşünce, duygu ve becerilerin aktarılması süreci </DL> www. ebiltek. com
Listeler (devam) Menü Listeleri n n Kısa paragraflar içerir. Liste maddeleri başında numara olmaz. <MENU> <LI> </MENU> www. ebiltek. com
Listeler (devam) Menü Listeleri <P> İşletim Sistemleri: </P> <MENU> <LI> Windows. NT <LI> Unix <LI> Linux <LI> OS 2 <LI> TOS </MENU> www. ebiltek. com
Listeler (devam) Dizin Listeleri n n Liste maddeleri, sütunlar şeklinde yazılır Kısa liste elemanları için (max: 24 karakter) kullanılır. <DIR> <LI> </DIR> www. ebiltek. com
Listeler (devam) Dizin Listeleri <P> HTML Liste Çeşitleri: </P> <DIR> <LI> Numaralı Listeler <LI> Numarasız Listeler <LI> Tanım Listeleri <LI> Menü Listeleri <LI> Dizin Listeleri </DIR> www. ebiltek. com
Açıklama Belirteci <! …… -> <HTML> <BODY> <! Bu satır açıklama belirtecini göstermek amacıyla yazılmıştır -> <H 2> Deneme Dosyası </H 2> Açıklama olarak yazılan bölüm ekranda görülmez. </BODY> </HTML> www. ebiltek. com
Bağların Oluşturulması Nerelere bağ oluşturulabilir? n n n Yerel diskteki başka sayfalara İnternet üzerindeki diğer sayfalara Aynı sayfa üzerindeki başka bölümlere www. ebiltek. com
Bağların Oluşturulması (devam) Bağ belirteci <A> …… </A> <A NAME="ilk_bag" HREF=“konu 1. htm" TITLE=“Bağlar“ TARGET=“main”> </A> NAME HREF Özellikler TITLE TARGET www. ebiltek. com TARGET: _blank _self _parent _top
Bağların Oluşturulması (devam) Yerel Diskteki Başka Sayfaya <UL> <LI> <A HREF=“aglar. htm”> Bilgisayar Ağları </A> <LI> <A HREF=“klavye. htm”> Klavye ve Tuş Grupları </A> <LI> <A HREF=“donanim. htm”> Bilgisayar Donanımı </A> <LI> <A HREF=“paint. htm”> Paint ile Resim Yapmak </A> </UL> <P> <A HREF="anasayfa. htm"> Anasayfaya Dön </A> </P> www. ebiltek. com
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
Bağların Oluşturulması (devam) İnternet Üzerinde Başka Sayfaya <A HREF="http: //www. anadolu. edu. tr"> Anadolu Üniversitesi </A> <A HREF="http: //www. metu. edu. tr"> ODTÜ </A> <A HREF="http: //www. boun. edu. tr"> Boğaziçi Üniversitesi</A> <A HREF="http: //www. hun. edu. tr"> Hacettepe Üniversitesi</A> www. ebiltek. com
Bağların Oluşturulması (devam) İnternet Üzerinde Başka Sayfaya (devam) <A HREF="ftp: //. . . "> Bir FTP sitesine bağlantı oluşturur. FTP sitesine bağlı olarak kullanıcı adı ve şifre yazarak girmeniz gerekebilir. <A HREF="mailto: . . . "> <A HREF="mailto: boteb@metu. edu. tr? subject= HTML ile ilgili"> HTML ile ilgili sorular</A> <A HREF="news: . . . "> Bir Usenet Haber grubuna bağlantı oluşturur. <A HREF="telnet: //. . . "> Bu bağlantıyı çalıştırdığınızda bir makineye telnet oturumu açar. www. ebiltek. com
Bağların Oluşturulması (devam) Aynı Sayfada Başka Bölüme n Hedef ismi verilir <A NAME="bolum 1"> Bölüm 1 </A> n Bağ belirtecine hedef ismi yazılır <A HREF="#bolum 1"> Aynı dosya içindeki 1. Bölüm </A> n Hedef başka bir dosya içindeyse <A HREF=“printers. htm#bolum 1" > Farklı dosya içindeki 1. Bölüm </A> www. ebiltek. com
Bağların Oluşturulması (devam) Aynı Sayfada Başka Bölüme <A HREF="#konu 1"> Konu 1 </A> <A HREF="#konu 2"> Konu 2 </A> <A HREF="#konu 3"> Konu 3 </A><p> <b><A NAME="konu 1"> Konu 1 </A> </b> 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. . . <p> <b><A NAME="konu 2"> Konu 2 </A> </b> 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. . . <p> <b><A NAME="konu 3"> Konu 3 </A> </b> 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
- Slides: 51
