HTML DERSLERİ 1

Genel Tanımlar

Bilgisayar ağı nedir?

En az iki bilgisayarın kendi aralarında iletişim kurabildikleri altyapıdır.

İnternet nedir?

Birçok bilgisayarın birbirine bağlı bir şekilde birbiri ile iletişim kurabildiği çok geniş bir bilgisayar ağıdır. www’nin açılımı world wide web’tir. Dünya çapındaki bilgisayar ağı olarak çevirebiliriz. İnternet’in Türkçe karşılığı örütbağ olarak belirlenmiştir.

İnternet nasıl çalışır?

İnternete bağlı bir bilgisayarda bulunan dosyalara, (gerekli izinler verildiyse) internete bağlı diğer bilgisayarlar tarafından, sırayla kurulacak ağ bağlantıları yolu ile kolayca erişilebilir. Örneğin kendi bilgisayarımızda oluşturduğumuz bir ödev dosyasını internet ortamına taşırsak, isteyen herkesin (internete bağlı olmaları koşuluyla) bu ödev dosyamıza erişebilmelerine izin verebiliriz. Peki bu nasıl olanaklı oluyor?

Bilgisayar ağı yapılarında iki tipte bilgisayar bulunmaktadır. Birincisi istemci bilgisayar, ikincisi ise sunucu bilgisayar olarak adlandırılır. İnternette paylaşmak istediğimiz dosyalarımızı öncelikle bir sunucu bilgisayara yüklememiz gerekmektedir. Bu bilgisayarlar 24 saat boyunca her an internete bağlı bulunan özel ve gelişmiş bilgisayarlardır. İstemci bilgisayarlar sunucu bilgisayarlar üzerindeki herhangi bir içeriğe ulaşmak için öncelikle bir istekte bulunurlar. Bu istekte bulunma ve isteğe yanıt alma işleminin hatasız yürütülebilmesi için isteğin ve yanıtın hangi bilgisayarlardan geldiğinin bilinmesi gerekir. Bunun için de internete bağlanmış olan her cihazın (bilgisayar, telefon, tablet, televizyon hatta buzdolabı vs.) kendine ait bir numarası olması gerekliliği ortaya çıkmıştır. İşte bu numara IP adresi olarak tanımlanır.

Siz de internete bağlandığınızda arama çubuğuna ip adresim nedir diye yazarsanız http://www.ipadresimnedir.com/ gibi bir sayfadan, o anda internete hangi IP numarası ile bağlandığınızı öğrenebilirsiniz. IP numaranızın 192.168.38.107 gibi 4 bloklu bir sayı olduğunu göreceksiniz. Bu sizin bilgisayarınızın internete bağlandığı, sadece kendisine ait olan IP numarasıdır. Sizin internete bağlı olduğunuz esnada, başka hiçbir bilgisayar bu IP numarasını kendisi için kullanamaz. Böylece hangi isteğin hangi bilgisayardan yapıldığı ve hangi sunucu bilgisayarın bu isteğe karşılık verdiği belirlenmiş olur.

Alan Adı Nedir?

Günümüzde bütün büyük işletmelerin ve hatta kişilerin bile kendilerine ait internet siteleri (web siteleri de denmektedir) bulunmaktadır. Yukarıdaki bilgilerimiz ışığında düşünürsek bir web sitesine bağlanabilmek için o web sitesinin içeriğinin bir sunucu bilgisayarda bulunması ve bu bilgisayarın IP numarası bilinmesi gerekmektedir. Ama biz herhangi bir web sitesine bağlanırken tarayıcımızın adresine IP numarası yazmak yerine doğrudan doğruya sitenin adını yazıyoruz. Örneğin http://www.tbmm.gov.tr gibi. İşte yazdığımız bu adresler alan adları olarak isimlendirilir. Biz bir siteye bağlanmak için ilgili sitenin alan adını tarayıcımızın adres satırına yazınca, arka planda yapılan işlemlerle, biz farkında olmadan, önce o alan adının hangi IP adresine karşılık geldiği belirlenir ve kendi istemci bilgisayarımızdan, ilgili sunucu bilgisayara yönlendirilmiş oluruz. Sunucu bilgisayar gelen isteğe karşılık vererek istekte bulunulan içeriği (web sayfasını) bize geri gönderir. Geri gelen içerik bilgisi bizim ekranımızda görüntülenir.

Web sayfası nedir?

Bütün web siteleri bir veya daha fazla web sayfasından oluşur. Web sayfaları çok çeşitli dosya uzantılarıyla oluşturulabilir fakat en temel şekliyle html dosya uzantısıyla oluşturulur. Örneğin index.html, iletisim.html gibi. HTML açılımı hyper text markup language’dır. Yüksek yazım işaretleme dili olarak Türkçe’ye çevirebiliriz. Burada dikkatimizi çekecek olan tanım işaretleme dili olmalıdır. Bilgisayar dünyasında bir de programlama dili tanımı vardır ve yazılımlar, bu programlama dilleri ile geliştirilirler. İşaretleme dili ise programlama amaçlı değil, tasarım amaçlıdır. Örneğin bir word belgesinde yaptığımız tüm yazım ve stil değişikliklerini HTML etiketleri sayesinde oluşturabiliriz.

HTML etiketi nedir?

Herhangi bir kelime işlem programında bir kelimeyi italik (yatık) yapmak için önce kelimeyi seçip, sonra italik ikonuna tıklamamız yeterlidir. HTML dosyası içinde ise kelimeyi <i>italik (yatık yazı) olacak </i> şeklinde “i” etiketi ile işaretlememiz yeterlidir. İşte işaretleme dili denmesinin nedeni budur. Yazacağımız bu kod sayesinde tarayıcılar kaynak kodumuzdan;

<i>italik (yatık yazı) olacak </i> satırını okuduğunda, ekrana 
italik (yatık yazı) olacak
şeklinde yazdıracaktır.

Yukarıdaki örnekte de görüldüğü gibi her html etiketi;

<etiket_adı> şeklinde açılıp
içerik yazıldıktan sonra
</etiket_adı> şeklinde kapatılır.

Örneğin bir paragraf içindeki yazının bir bölümünü kalınlaştırmak için aşağıdaki şekilde kodlama yapılmalıdır.

<p> paragraf etiketi ve <b> kalınlaştırma (bold) etiketi olmak üzere;

<p>Bu satır örnek olması açısından <b>paragraf</b> olarak kodlanmıştır.</p>

Yukarıdaki satır aşağıdaki gibi görüntülenecektir.
Tarayıcıdaki görünümü;
Bu satır örnek olması açısından paragraf olarak kodlanmıştır.

Temel HTML etiketleri

Her html sayfası <html> etiketi ile açılır ve </html> etiketi ile sonlandırılır. HTML sayfa yapısı iki bölümden oluşur.
1. Sayfanın <head> (baş) bölümü
2. Sayfanın <body> (vücut) bölümü
<head> bölümü sayfanın başlık bilgilerinin bulunduğu <title> etiketini barındırır.
<body> bölümü ise sayfanın görsel anlamda tüm içeriğini barındırır.

Bir web sayfasında temel etiketler aşağıda yer almaktadır. Bu etiketleri notepad ile kendiniz yazarak dosyayı txt yerine html uzantılı olarak masaüstüne index.html olarak kaydedip tarayıcınızla açarak sayfa başlığını ve sayfa içeriğini gözlemleyin.

	<html>
		<head>
			<title>
			Sayfa Başlığı - İlk Sayfam
			</title>
		</head>
		<body>
		Sayfa içeriği
		</body>
	</html>

Şekil 1

Türkçe karakterlerin doğru görüntülenemediğini fark ediyoruz. Bunun nedeni tarayıcıya bunu henüz bildirmemiş olmamızdır. Sayfamızın <head> bölümü <title> etiketi dışında bir de <meta> olarak adlandırılan çeşitli etiketleri barındırır. Bu meta etiketlerden bir tanesi sayfamızın karakter kodlaması ile ilgilidir ve Türkçe karakterleri desteklemesi için aşağıdaki özel şekliyle kullanılabilir. <meta charset="UTF-8"> Bu satırı sayfamıza aşağıdaki gibi eklersek sorunumuz düzelecektir.

	<html>
		<head>
			<meta charset="UTF-8">
			<title>
			Sayfa Başlığı - İlk Sayfam
			</title>
		</head>
		<body>
		Sayfa içeriği
		</body>
	</html>

Şekil 2

Not: Etiketlerin genel kullanımı
(etiket açılış) <etiket_adi>
içerik yazıları burada olur.
</etiket_adi> (etiket_kapanış) şeklindedir.

Fakat meta etiketinde gördüğünüz gibi, bu kullanımın geçerli olmadığı bazı özel etiketler de bulunmaktadır. Bu kullanımda, meta etiketi ile karakter kodlaması, bu etikete charset özelliği verilerek ve değeri UTF-8 yapılarak belirlenmiştir. UTF-8 Türkçe karakterlerle uyumlu bir karakter kodlamasıdır.

Görüldüğü gibi Türkçe karakterler artık düzgün görüntülenmekte ve <head> bölümü içinde <title> etiketi arasına aldığımız sayfa başlığı, sayfa sekmesinde “Sayfa Başlığı – İlk Sayfam” olarak yer almış,
<body> bölümü içine yazdığımız “Sayfa içeriği” yazısı tarayıcı penceremiz içinde görüntülenmiştir.

Şimdi size kötü bir haberim var. Zaman zaman kodlama hatası yapacağız. Bundan maalesef kaçışımız yok. Ama sonra dönüp hatamızı bulup düzelteceğiz. Biz elimizden geldiğince hatasız kodlama yapmaya çalışsak da yapacağımız hatalarda sayfamızın istediğimiz sonuçları üretmediğini görürüz. Yukarıdaki kodda örneğin <body> etiketini hatalı olarak, bilerek <body şeklinde yazalım ve sayfamızı görüntüleyelim.(1) (sondaki > işareti kaldırdık.) Bazı tarayıcılar ufak tefek hataları görmezden gelse de çoğu bu hatadan dolayı sayfayı görüntüleyemeyecektir. Bu nedenle tekrarlıyorum, kodlarımızı elimizden geldiğince hatasız yazmaya çalışalım.

(1) Çocuklar için Web Tasarımı Doç.Dr. Selçuk ÖZDEMİR (Sayfa 24) 2.Basım Eylül 2013