HyperText Markup Language kelimelerinin başharflerinin kısaltması olan HTML, internetin görsel yüzünün oluşturulmasına yarayan bir işaretleme dilidir. "<" ve ">" işaretleri ile belirlenen etiketlerin (Tag) belli kurallara bağlı kalınarak kullanılmasıyla yayınlanmak istenen metin, resim, tablo gibi öğeler biçimlendirilerek sayfa üzerine yerleştirilirler.
Etiketler, "<" işareti ile başlayan, ">" işareti ile sona eren ve HTML'nin bölümlerini tanımlayan özel metinlerdir. Mesela <P> etiketi bir paragraf tanımlar. <B> etiketi ise yazılacak metnin "bold", yani kalın olarak yazılacağını bildirir. Genellikle etiketler açıldıktan sonra kapatılmalıdırlar, yoksa biçimlendirmede istenmeyen sonuçlara sebep olabilirler. Mesela <B> etiketi ile kalın yazılmak istenen metnin başlangıcı işaretlendikten sonra kalın yazılmak istenen metnin sonu </B> etiketi ile belirtilmelidir. Bazı etiketlerin </ > ile kapatılması zorunlu iken bazılarının kapatılmalarına gerek yoktur.
Mesela, satır atlamaya yarayan <BR> etiketi kapatılmazken, eğik (italik) yazmaya yarayan <i> etiketi kesinlikle kapatılmalıdır.
HTML'de etiketlerin küçük-büyük harf duyarlılığı yoktur. Yani <B> etiketi ile <b> etiketi aynı anlama gelmektedirler.
» Özellikler
Bir etiketin özelliği onun farklı birçok niteliğini tanımlar. Mesela resim yüklemeye yarayan <IMG> etiketinin SRC özelliği yüklenecek resmin yerini belirlerken WIDTH özelliği yüklenen resmin hangi genişlikte gösterileceğini tanımlar.
Örnek : <IMG src="http://www.websitesi.com/images/resim.jpg" width="50">
Özellikler başlangıç etiketinde tanımlanırlar ve genel yazılış biçimi şöyledir:
Özellik-İsmi="Özellik-Değeri"
Özelliğin değeri tek tırnak veya çift tırnakla belirtilebilir. Özelliğin isminin küçük-büyük harf duyarlılığı yoktur fakat değerinin küçük-büyük harf duyarlılığı olabilir.
» Özel Karakterler
Bazı karakterler, HTML tarafından özel bir amaç maksadıyla ayrılmışlardır ve bunların düzgün yazılabilmesi için & ve ; ile işaretlenmeleri gerekir. Örneğin < (küçüktür) işareti HTML tarafından etiket başlangıcı olarak algılanır ve sayfaya yazılması için < şeklinde ifade edilmesi gerekir. Özel karakterler kısaltma ile ifade edilebildiği gibi kendisine denk gelen sayılarla da ifade edilebilir.
HTML kodunda sayfada fiziksel olarak gözükmeyecek fakat programcıya rehberlik edecek yorumlar ve açıklamalar "<!---->" etiketi ile yapılır. Yorum bir satırlık da olabilir, birden fazla satırdan da oluşabilir. Yorum etiketlerinin içinde "--" kullanılmamalıdr.
Örnek :<!-- ÖRNEK BİR AÇIKLAMA -->
» HTML Sayfaları'nın Genel Yapısı
HTML Sayfasının başında <HTML> etiketi bulunur. HTML sayfasının sonunda ise </HTML> etiketi bulunmalıdır. HTML sayfasının başlık kısmı yani sayfanın yapısı ile ilgili bilgiler (başlık, dil, anahtar kelimeler, pencere başlığı vb.) <HEAD> </HEAD> etiketleri arasında bulunmalıdır. Pencere başlığında görünecek metin, sayfanın HEAD kısmında <TITLE> </TITLE> etiketleri arasında belirtilir. Sayfanın asıl görünen gövdesi, yani yayınlanması amaçlanan içerik ise HEAD kısmından sonra <BODY> </BODY> etiketleri arasında bulunmalıdır.
Tüm HTML sayfalarında olması gereken iskelet yapı:
Başlıklar, HTML sayfasında diğer metinlerden daha çarpıcı bir biçimde (kalın ve daha büyük font ile) sunulmak istenen ve arkasından gelen bloğun veya paragraf(lar)ın ismi olarak yer alan metinlerdir. HTML'de H harfi ve yanına gelen 1'den 6'ya kadar rakamdan oluşan etiketlerle belirtilirler. <H1> </H1> en büyük fontla yazılan başlığı belirlerken <H6> </H6> da en küçük boyutta yazılacak başlığı belirler.
<SUB> etiketi : (Subscript) Bu etiket ile satırın alt kısmına yazı yazılır. Bu cümledeki açık yeşil renkli kısım SUB etiketi ile yazılmıştır.
<SUP> etiketi : (Superscript) Bu etiket ile satırın üst kısmına yazı yazılır. Üslü sayıların gösteriminde kullanılabilir. Bu cümledeki açık yeşil renkli kısım SUP etiketi ile yazılmıştır.
SUB ve SUP etiketleri ile matematiksel denklemlerin yazılması daha kolaydır. Mesela; normalde bilgisayar kodlaması ile 5*X1^3+3*X2^2-7*X1-14=0 olarak gösterilebilen denklem, HTML ile 5X13+3X22-7X1-14=0 şeklinde daha anlaşılır bir şekilde gösterilir.
<STRIKE> etiketi : Metnin üstünü çizmek için kullanılır. Bu cümledeki açık yeşil renkli kısım STRIKE etiketi ile biçimlendirilmiştir.
<U> etiketi : (Underline) Metnin altını çizmek için kullanılır. Bu cümledeki açık yeşil renkli kısım U etiketi ile biçimlendirilmiştir.
<I> etiketi : (Italic) Metni eğik olarak yazmak için kullanılır. Bu cümledeki açık yeşil renkli kısım I etiketi ile biçimlendirilmiştir.
<B> etiketi : (Bold) Metni daha kalın yazmak için kullanılır. Bu cümledeki açık yeşil renkli kısım B etiketi ile biçimlendirilmiştir.
<SMALL> etiketi : Metni geçerli metin boyutundan daha küçük yazmak için kullanılır. Bu cümledeki açık yeşil renkli kısım SMALL etiketi ile biçimlendirilmiştir.
<BIG> etiketi : Metni geçerli metin boyutundan daha büyük yazmak için kullanılır. Bu cümledeki açık yeşil renkli kısım BIG etiketi ile biçimlendirilmiştir.
<S> etiketi : (Strong) Metni daha göze çarpar şekilde yazmak için kullanılır. Vurgulamanın nasıl yapılacağı sisteme bağlıdır. Bu cümledeki açık yeşil renkli kısım S etiketi ile biçimlendirilmiştir.
<EM> etiketi : (Emphasis) Metni daha vurgulu şekilde yazmak için kullanılır. Vurgulamanın nasıl yapılacağı sisteme bağlıdır. Bu cümledeki açık yeşil renkli kısım EM etiketi ile biçimlendirilmiştir.
<P> etiketi : (Paragraf) Paragraf açmak ve kapamak için kullanılır. Paragrafın alt ve üst satırları, paragraf dışındaki metinden dikey olarak bir miktar ayrılır. P etiketini kapatma zorunluluğu yoktur. P etiketinin align özelliği ayarlanarak paragraf sağa (right), sola (left), ortaya (center) veya her iki tarafa da (justify) hizalı olarak biçimlendirilebilir. Aşağıda bu özelliklerin kullanımı gösterilmektedir.
Örnek : P align="left"
Isı, sıcaklık, ağırlık, nem oranı, ışık şiddeti, ses şiddeti vs. gibi büyüklükler hep analog olarak değişirler. Dijital sistemlerin dış dünya ile bağlantılarını sağlamak için; ölçülen fiziksel büyüklüklerin dijital sistemin anlayabileceği sayısal değerlere dönüştürülmeleri gerekir. Çeşitli transdüserlerle (ısı sensörü, ışık sensörü, basınç sensörü, sıcaklıkla değeri
değişen direnç, fototransistör vs.) gerilime dönüşen fiziksel büyüklükler analog sistemlerde direkt olarak kullanılabilirler (işlenebilirler)...
Örnek : P align="right"
Isı, sıcaklık, ağırlık, nem oranı, ışık şiddeti, ses şiddeti vs. gibi büyüklükler hep analog olarak değişirler. Dijital sistemlerin dış dünya ile bağlantılarını sağlamak için; ölçülen fiziksel büyüklüklerin dijital sistemin anlayabileceği sayısal değerlere dönüştürülmeleri gerekir. Çeşitli transdüserlerle (ısı sensörü, ışık sensörü, basınç sensörü, sıcaklıkla değeri
değişen direnç, fototransistör vs.) gerilime dönüşen fiziksel büyüklükler analog sistemlerde direkt olarak kullanılabilirler (işlenebilirler)...
Örnek : P align="center"
Isı, sıcaklık, ağırlık, nem oranı, ışık şiddeti, ses şiddeti vs. gibi büyüklükler hep analog olarak değişirler. Dijital sistemlerin dış dünya ile bağlantılarını sağlamak için; ölçülen fiziksel büyüklüklerin dijital sistemin anlayabileceği sayısal değerlere dönüştürülmeleri gerekir. Çeşitli transdüserlerle (ısı sensörü, ışık sensörü, basınç sensörü, sıcaklıkla değeri
değişen direnç, fototransistör vs.) gerilime dönüşen fiziksel büyüklükler analog sistemlerde direkt olarak kullanılabilirler (işlenebilirler)...
Örnek : P align="justify"
Isı, sıcaklık, ağırlık, nem oranı, ışık şiddeti, ses şiddeti vs. gibi büyüklükler hep analog olarak değişirler. Dijital sistemlerin dış dünya ile bağlantılarını sağlamak için; ölçülen fiziksel büyüklüklerin dijital sistemin anlayabileceği sayısal değerlere dönüştürülmeleri gerekir. Çeşitli transdüserlerle (ısı sensörü, ışık sensörü, basınç sensörü, sıcaklıkla değeri
değişen direnç, fototransistör vs.) gerilime dönüşen fiziksel büyüklükler analog sistemlerde direkt olarak kullanılabilirler (işlenebilirler)...
<DIV> etiketi : (Division) HTML elemanlarını gruplamak için kullanılır. P etiketi gibi align özelliği ile hizalama usülü belirlenebilir fakat align özelliğinin kullanımdan çıkarılması (depracated) sebebiyle hizalamanın CSS kullanarak yapılması daha uygundur. DIV, şu anda web sitelerinde, özellikle CSS kullanarak konumunun hassas bir şekilde belirtilebilmesinden dolayı çok kapsamlı bir şekilde kullanılmaktadır. Eskiden tablolarla yapılan sayfa düzenleme işlemi artık DIV etiketi ile yapılmaktadır.
Örnek : DIV style="text-align:justify;"
Isı, sıcaklık, ağırlık, nem oranı, ışık şiddeti, ses şiddeti vs. gibi büyüklükler hep analog olarak değişirler. Dijital sistemlerin dış dünya ile bağlantılarını sağlamak için; ölçülen fiziksel büyüklüklerin dijital sistemin anlayabileceği sayısal değerlere dönüştürülmeleri gerekir. Çeşitli transdüserlerle (ısı sensörü, ışık sensörü, basınç sensörü, sıcaklıkla değeri
değişen direnç, fototransistör vs.) gerilime dönüşen fiziksel büyüklükler analog sistemlerde direkt olarak kullanılabilirler (işlenebilirler)...
<SPAN> etiketi : Satır içi biçimlendirme için kullanılır. Metin içinden düzenlenecek herhangi bir kısım SPAN etiketi ile diğer metinden ayrılır ve biçimlendirilir.
Örnek :
Isı, sıcaklık, ağırlık, nem oranı, ışık şiddeti, ses şiddeti vs. gibi büyüklükler hep analog olarak değişirler. Dijital sistemlerin dış dünya ile bağlantılarını sağlamak için; ölçülen fiziksel büyüklüklerin dijital sistemin anlayabileceği sayısal değerlere dönüştürülmeleri gerekir. Çeşitli transdüserlerle (ısı sensörü, ışık sensörü, basınç sensörü, sıcaklıkla değeri değişen direnç, fototransistör vs.) gerilime dönüşen fiziksel büyüklükler analog sistemlerde direkt olarak kullanılabilirler (işlenebilirler)...
<PRE> etiketi : (Preformatted text) Etiketler arasına ne yazıldıysa courier fontu ile (boşluklar ve satır atlamalar da dahil) aynen gösterir. Program kodlarının web sayfalarında yayınlanması için uygundur.
Örnek :
class Hayvan
{ private:
int Yas;
float Agirlik;
public:
void HareketEt() {cout << "hareket etmekte...\n";}
void konus() {cout << "konusmakta...\n";}
void ye() {cout << "yemek yemekte...\n";}
}
<NOBR> etiketi : (Nobreak) Satır atlamaları iptal ederek kesintisiz yazar.
<BLOCKQUOTE> etiketi : Alıntı yapılmış blok metin yazar.
<TT> etiketi : (Typewriter Text) Daktilo fontu ile yazmak için kullanılır..
Örnek : Dijital sistemlerin dış dünya ile bağlantılarını sağlamak için; ölçülen fiziksel büyüklüklerin dijital sistemin anlayabileceği sayısal değerlere dönüştürülmeleri gerekir.
<UL> etiketi ile başlatılır ve </UL> ile kapatılır.
Listeyi oluşturacak maddeler (elemanlar), kapatılması zorunlu olmayan <LI> (List Item) etiketi ile eklenir.
<UL> veya <LI> etiketinin type özelliğine verilen değerlerle her elemanın başına gelecek şekiller ayarlanır. Bunlar;
daire (type="disc"),
çember (type="circle"),
kare (type="square") gibi sembollerdir.
Mesela, Güneş Sistemi'ndeki gezegenleri listeleyelim :
<OL> etiketi ile başlatılır ve </OL> ile kapatılır. Listeyi oluşturacak maddeler (elemanlar), kapatılması zorunlu olmayan <LI> (List Item) etiketi ile eklenir. <OL> etiketinin type özelliğine verilen değer ile elemanların nasıl numaralandırılacağı ayarlanır. Numaralandırma;
normal artan sayılar ile (type="1"),
büyük harfler ile (type="A"),
küçük harfler ile (type="a"),
küçük Roma rakamları ile (type="i")
ve büyük Roma rakamları ile (type="I") yapılabilmektedir. <OL> etiketinin start özelliğine verilen değer ile numaralandırmanın hangi değerden başlayacağı da belirlenebilmektedir. Ayrıca <LI> etiketinin value özelliğine verilen değer ile numaralandırmaya istenen değerden devam edilebilir.
Mesela, Güneş Sistemi'ndeki gezegenleri listeleyelim :
<DL> etiketi ile başlatılır ve </DL> ile kapatılır. Tanım listeleri, sözlüklerde olduğu gibi herbir elemanın açıklanması gerekiyorsa kulanılmaktadır. Açıklaması yapılacak maddeler, <DT> (Definition Term) etiketi ile eklenir. Açıklama ise; <DD> (Data Definition) etiketi ile yapılır.
Web'de gezerken bazı durumlarda farklı sayfalara, dokümanlara geçiş yapmak gerekebilir. Bu da anchor denen <A> </A> etiketi ile sağlanmaktadır. Bağlanılacak doküman, <A> etiketinin HREF özelliği ile belirlenir. İzafi Bağlantı ve Mutlak bağlantı olmak üzere iki çeşit bağlantı vardır. Mutlak bağlantıda, bağlanılacak dokümanın adresi tam olarak yazılır, izafi bağlantıda ise sadece ana dizin içerisindeki konum yazılır.
HTML'de zengin metin biçimlendirme seçeneklerinin yanında, sayfada anlatılmak isteneni ifade etmede çok önemli bir yeri olan resimlerin kullanılması için de değişik seçenekler mevcuttur. Temel olarak HTML'de resimler <IMG> etiketi ile sayfaya yerleştirilir. <IMG> etiketinin özelliklerinin ayarlanması ile yerleştirilecek resmin yeri belirlenir ve sayfaya hangi biçimde oturtulacağı belirlenir. <IMG> etiketinin ayarlanılabilen özellikleri şunlardır:
SRC : (Source) Bu özellik ile yüklenecek resmin yeri bellirtilir. Günümüzdeki tarayıcılar jpg, gif, bmp, png gibi birçok resim formatını desteklemektedir.
WIDTH ve HEIGHT : Yüklenecek resmin, width özelliği ile tarayıcıda gösterileceği eni, height özelliği ile ise yüksekliği belirlenmektedir.
BORDER : Resmin etrafında gösterilecek çerçevenin kalınlığı bu özellik ile belirlenir. Eğer BORDER="0" olarak ayarlanırsa resmin etrafına çerçeve yerleştirilmez.
ALIGN : Resmin sayfadaki metne göre yerini belirler. ALIGN özelliği; top | middle | bottom | left | right değerlerini alabilir. top, middle ve bottom metnin dikey olarak resmin neresine yerleştirilceğini, left ve right ise resmin çevreleyen metnin neresine yerleştirileceğini belirtir.
HSPACE ve VSPACE : Resim ile çevreleyen metin arasında ne kadar boşluk olacağını piksel cinsinden belirtir. (HSPACE: Horizontal Space, Yatay boşluk; VSPACE: Vertical Space, Dikey boşluk)
ALT : (Alternative Text) Resmin yüklenmeme durumunda resmin yerine gösterilecek metin bu özellik ile ayarlanır.
Bu metnin dikey konumu, ALIGN özelliği ile ayarlanmıştır.
1 nci resim : <IMG SRC="resim.gif" ALIGN="right" HSPACE="10" VSPACE="5"> 2 nci resim : <IMG SRC="resim.gif" ALIGN="left" HSPACE="15" VSPACE="15">
Seri iletimde veri bitleri karşı tarafa tek hat üzerinden sırayla yollanır. İletimin koordinasyonu için (başlatılması, sona ermesi, bilginin alındığının onaylanması, hata durumu vs.) gerekli olan bitler de aynı hat üzerinden belli bir sıra yollanır. Kısacası seri iletimde aynı anda tek bit iletimi gerçekleşir. Paralel iletimde ise bitler karşı tarafa n-tane hat üzerinden yollanır. Yani aynı anda n-adet bit karşı tarafa gönderilebilir. Bu n-adet hattan bir kısmı veri için, bir kısmı da iletimin koordinasyonu için ayrılabilir. Paralel iletim, aynı anda iletilebilen bit sayısının fazlalığından dolayı seri iletimden daha hızlıdır. Fakat seri iletim için gereken hat sayısı daha az olduğundan dolayı seri iletimin maliyeti daha azdır ve paralel iletimden çok daha uzun mesafelere seri iletimle veri yollanabilir. Son yıllara kadar, bir bilgisayarın içinde, paralel iletişim tekniği, avantajlarından dolayı daha çok kullanılıyordu. Fakat günümüzde seri iletimin hızı da geliştirilen tekniklerle bir hayli artırıldığı için seri iletim bir çok çevre birim çeşidi tarafından tercih edilen bir teknik olarak yerini almaktadır. Mesela hız faktörü sabit disklerde çok önemli olduğu için, bugüne kadar sabit disklerde paralel iletim tekniği (IDE) kullanılıyordu. Oysa yeni üretilen sabit diskler çok hızlı bir seri iletim standardı olan SATA tekniğini kullanmaya başlamışlardır.
<BODY></BODY> etiketi, HTML sayfalarının görünen kısmının sınırlarını çizen etiketlerdir. <BODY> etiketinin özellikleri ayarlanarak sayfanın çeşitli nitelikleri değiştirilebilirler. Günümüzde <BODY> etiketinin özelliklerinin ayarlanması ile sayfa ayarlarının yapılması pek tavsiye edilmemektedir, çünkü artık bu nitelikler CSS (Cascaded Style Sheets) tekniği kullanılarak ayarlanmaktadırlar. Fakat burada yine kısaca da olsa bu özelliklerden bahsedeceğim.
text="black" Sayfanın metin rengi link="blue" Sayfadaki tüm linklerin (bağların) rengi vlink="fuchsia" (Visited Link) Ziyaret edilmiş linklerin rengi alink="#CCBBG0" (Active Link) En son kullanılan linkin rengi bgcolor="#000000" (Background color) Arka plan rengi background="resim.gif" Arka plan resmi
Her ne kadar font ayarları da artık CSS (Cascaded Style Sheets) tekniği kullanılarak yapılsa da, modası geçmiş (deprecated) <FONT> etiketinin SIZE, COLOR, FACE özellikleri ayarlanarak da biçim düzenlemesi yapılabilmektedir.