Html Nedir ?(Açıklamalı Anlatım Web Dizayn)

**Prof. Dr. Sinsi** · 08-17-2012

HTML (HyperText Markup Language / Hareketli-Metin İşaretleme Dili) basitçe, browserlarla görebileceğimiz, internet dökümanları oluşturmaya yarayan bir çeşit dildir

Örneğin okuduğunuz bu sayfa HTML dili kullanılarak hazırlandı

Siz de browser'ınızı (Internet Explorer, Netscape Navigator,

) kullanarak bu sayfayı ekranınızda görüntülüyorsunuz

Tanımda geçen "internet dökümanı" ifadesinin yanısıra HTML ile oluşturduğunuz belgeleri harddiskinize kaydedebilir ve internet bağlantınız olmasa bile bu belgeleri görüntüleyebilirsiniz

HTML, programlama dilleri (c, pascal, basic,

) gibi bir programlama mantığı taşımadığından öğrenilmesi gayet kolay bir dildir

Dilden ziyade kabaca metinleri ya da verileri biçimlendirmek, düzenlemek için kullandığımız komutlar dizisi bile diyebiliriz HTML için

HTML Dersleri yazı dizimizi okuyarak bu dil hakkında hiçbir bilginiz olmasa bile yazı dizisinin sonunda öğrendiklerinizle siz de kendi sayfalarınızı hazırlayabileceksiniz

**Prof. Dr. Sinsi** · 08-17-2012

Bu sayfaya geldiğinize göre HTML öğrenme işinde ciddisiniz demektir

HTML nispeten kolay bir dildir dedik

Bu dilde binary veya hexadecimal kodlar yok

Herşey metin tabanlı ve bir HTML dökümanı oluşturmak için ihtiyacınız olan şey bir editör

Hatta sizde herhangi bir HTML editörü bulunmuyorsa bu işi Windows'un Notepad'i ile dahi halledebilirsiniz

Piyasada iki tip editör bulunuyor

Birisi metin tabanlı, kod yazmayı gerektiren fakat bunun yanısıra rutin bazı işlemleri kolaylaştıran editörler (HotDog, HomeSite

) diğeri WYSIWYG (What You See Is What You Get / Ne görürsen onu alırsın) tarzı denen kısaca görsel, kodlamayla uğraştırmayı gerektirmeyen editörler (FrontPage, Dreamweaver, NetObjects Fusion,

)

Benim yeni başlayanlara tavsiyem Windows'un Notepad'i

Bu işlerin nasıl yapıldığını öğrendikçe ilerde siz de görsel editörlere geçebilirsiniz

Çünkü bir yerde istenmedik sonuçlar çıkabilir ve kodlara müdahele etmeniz gerekebilir

Üstelik görsel editörler bazen istenmeyen kodlar ekliyorlar, bu da döküman boyutunun büyümesi demek

Burada şunu da belirtmek gerekiyor; browserlar arasındaki yorum farklarından dolayı sayfanız bir browser'da iyi görünürken bir başka browser'da hiç istemediğiniz bir şekilde görüntülenebilir

Hele yeni bazı teknikleri (css, dhtml gibi) sadece MS Internet Explorer 4 ve üstü desteklerken Netscape henüz bu teknikleri tam olarak desteklemiyor

Yine de piyasayı neredeyse yarı yarıya paylaşan bu iki browser'ın birbirlerine üstün olduğu yönleri var

Sonuçta, ne kadar fiyakalı bir sayfa da yapsanız elde ettiğiniz başarı sayfanızı ziyaret eden kişinin kullandığı browser'a mahkum

Hatta ziyaretçiniz browser'ına verdiği bir talimatla "yalnız şu fontu kullan", "grafikleri görüntüleme" şeklinde bir ayar yapmışsa emekleriniz boşa gitti demektir

Yine de bu kadar karamsar olmayalım

**Prof. Dr. Sinsi** · 08-17-2012

İşte ilk HTML sayfamızı yapıyoruz

Öncelikle çalışmalarınızı saklamak için kullanacağınız boş bir klasör oluşturup uygun bir ad verin, mesela html_ders olsun

Daha sonra bu ad bize lazım olacağından kolaylık olması için siz de yeni klasöre bu adı verebilirsiniz

Şimdi de bu klasörü açıp yeni bir metin belgesi oluşturun (sağ fare/Yeni/Metin belgesi)

Dosyayı çift tıklayarak açın ve şunları yazın:

<head>

<title>İlk Sayfam</title>

</head>

<body>

Sayfama Hoşgeldiniz

</body>

</html>

Şimdi dosyayı kaydedin (Dosya/Farklı Kaydet

)

Dosya adı kısmına şöyle yazın: "sayfa1

htm" (tırnaklar dahil) ve Tamam'a basın

Notepad'i kapatın, metin dosyasını silin ve oluşan yeni dosyayı açın

Dosya varsayılan browser'ınız (Internet Explorer, Netscape Navigator gibi) tarafından açılacaktır

Şöyle bir görüntü elde edeceksiniz:

Tebrikler ilk HTML sayfanızı yaptınız

Şimdi de bu belgeyi nasıl oluşturduğumuzu birlikte inceleyelim

Birşey dikkatinizi çekti mi? İngilizce bir takım kelimeler var ve bu kelimeleri küçük < ve büyük > sembolleri arasına yazdık

Bu ifadelere tag (etiket) deniyor

Etiketler etki etmesi istenilen metnin önüne ve arkasına yazılıyor

Önce etiketi yazıyoruz, sonra metni yazıyoruz daha sonra aynı etiketi önüne bir bölü işaretiyle tekrar yazıyoruz

Bu son yaptığımız etiketi sonlandırıyor

Bir kaç istisna dışında tüm etiketler belge içerisinde sonlandırılmak zorunda

Burada kullandığımız etiketler ve anlamları şöyle:

<html>

</html> Tarayıcıya HTML dosyasının başladığını ve bittiğini belirtiyor

Diğer tüm kodlar bu iki etiket arasına yazılır

<head>

</head>

<body>

</body> Bir HTML belgesi iki bölüme ayrılır: head (baş) ve body (gövde)

<head>

</head> etiketleri arasına sayfa hakkında bilgiler yazılır, ve title gibi etiketler burada yeralır

etiketlerine ileride değineceğiz

<body>

</body> arası ise sayfamızın gövde bölümü

Ekranda gösterilecek kısımlar bu tagler arasında yeralıyor

<title>

</title> Title sayfanın başlığını belirtiyor

Burada yazılanlar browser penceresinin başlığında browser adıyla beraber gösteriliyor

Dikkat ederseniz hazırladığımız sayfada sadece temel etiketleri kullandık

Yani metin biçimlendirmeye yarayan hiçbir etiket kullanmadık

Bu yüzden <body>

</body> arasına yazdığımız Sayfama Hoşgeldiniz yazısı browser'ın varsayılan metin ayarlarıyla gösteriliyor

İşin ilginç tarafı hiçbir kod yazmadan sadece Sayfama Hoşgeldiniz yazıp kaydetsek ve browser'da böyle görüntülesek de aynı neticeyi elde edecektik

**Prof. Dr. Sinsi** · 08-17-2012

Bu bölümde öğreneceğimiz etiketler:

Başlık etiketleri: <h1>

<h6>

Paragraf etiketi: <p>

</p>

Ortalama: <center>

</center>

Diğer etiketler: <b>

</b>,<i>

</i>,<u>

</u>

HTML'de metin stillerini üç şekilde belirleyebiliriz:

Düzenlemek istediğimiz metnin hemen önüne koyacağımız bir etiketle biçimleme stili

Buna in-line (satır içi) biçimlendirme denir

Sayfanın head (baş) kısmına koyulan stillere body (gövde) bölümden atıf yapılarak metin biçimleme

(Embedded-Gömülü biçimlendirme)

HTML dosyasının dışında başka bir stil dosyası oluşturarak stil için bu dosyayı kullanma

Buna Cascading Style Sheets-Yığılmalı Stil Kağıtları deniyor

Kısaca CSS

Bu teknik bize örneğin yüzlerce sayfanın stilini tek bir stil dosyası ile belirleme gibi geniş imkanlar veriyor

Birinci metotta her metin için ayrı ayrı stil belirtirken ikinci ve üçüncü metodlarda stil bir defa belirleniyor ve bu stilleri istediğimiz metne uygulayabiliyoruz

Burada önemli olan bir diğer husus da ilk metodu tüm browserlar sorunsuz yorumlayabiliyor fakat 2

ve 3

metodu Internet Explorer ve Netscape'in son sürümleri (yorum farklılıkları ile beraber) destekliyorlar

Burada konumuz birinci metoda göre biçimlendirmeyi öğrenmek

Başlık etiketlerinden başlıyoruz

Notepad'i açıyor ve şu kodları yazıyoruz;

<html>

<head>

<title>Başlık Etiketleri</title>

</head>

<body>

<h1>Başlık 1</h1>

<h2>Başlık 2</h2>

<h3>Başlık 3</h3>

<h4>Başlık 4</h4>

<h5>Başlık 5</h5>

<h6>Başlık 6</h6>

</body>

</html>

Sayfanın işleyişine baktığımızda, önce her zaman yapmamız gerektiği gibi <html>, <head>, <title> etiketlerini yerleştirdik

Sayfa başlığı olarak "Başlık Etiketleri"ni seçtik ve sayfanın gövde <body> kısmına istediğimiz metinleri yazdık ve bu metinleri <h1>'den <h6>'ya kadar olan biçimlendirme etiketlerinin arasına aldık

Browser metin biçimleme etiketleri olan <h1>

<h6> etiketleri arasındaki kelimelere belirli büyüklükler verdi

Şimdi de kendiniz <h1>

<h6> etiketlerinin yerlerini değiştirerek alıştırma yapın ve tam olarak bu işin nasıl olduğunu kavrayın

Hatta iyi bir deneme-yanılma olması açısından örneğin her seferinde değişik bir etiketi veya sonlandırma etiketini HTML kodundan silerek ne gibi etkiler oluşturduğunu gözlemleyin

Denemelerinizin bir kısmında hiçbir değişiklik olmadığını gözlemleyeceksiniz bunun sebebi, browser'ınızın otomatik olarak hatayı algılayıp düzeltmesidir

Diğer etiketleri toplu olarak kullanarak yeni bir HTML dosyası oluşturalım

Kodlar şu şekilde olsun:

<html>

<head>

<title>Başlık Etiketleri-2</title>

</head>

<body>

<h1><center>Sayfama Hoşgeldiniz</center></h1>

<p>HTML etiketleri ile, </p>

Yazıları

<b>koyu </b>

<i>italik </i>

ve

<u>altı çizili </u>

olarak yazabiliyorum

</body>

</html>

**Prof. Dr. Sinsi** · 08-17-2012

Font etiketinin kullanımı;

<font face="

" size="

" color="

">

</font>

face = yazıtipinin adı (arial, tahoma, verdana,

)

size = yazının büyüklüğü (1-7 arası)

color = yazının rengi (red, green gibi renklerin ingilizce karşılığı yada RGB renk değeri)

Bunlara font etiketinin parametreleri diyoruz

<font> etiketinin yanısıra öğreneceğimiz bir diğer etiket <br> etiketi

Önce bu etiketin kullanımını göreceğiz

<br> etiketi bir bakıma enter tuşunun görevini görüyor

Bunu biraz açıklayalım; HTML'de metinleri yazarken kullandığımız editörde bir alt satıra geçmek için Enter tuşunu kullanırız

Fakat HTML dilinde bunun hiçbir anlamı yoktur, tüm kodları ve metinleri tek satırda dahi yazsanız browser açısından farketmeyecektir

Bu yüzden metinleri bölmek, yani ikinci satıra atmak için <br> etiketini kullanıyoruz

İstisnai etiketlerden birisi bu: <br> etiketi sonlandırılmıyor

Buna bir örnek verelim;

<html>

<head>

<title>BR etiketi</title>

</head>

<body>

pazartesi

salı

çarşamba

<br>ocak<br> şubat<br> mart<br> nisan

</body>

</html>

Yukarıdaki örneğimizde "pazartesi, salı ve çarşamba"yı yazarken Enter tuşu ile bir alt satıra geçmemize rağmen browser bunu gözönüne almayarak tüm metni bir satırda yazdı

Fakat ikinci sefer ay adlarını tek bir satıra yazdığımız halde bu kez browser aradaki <br> etiketine bakarak bir sonraki metni satır başına aldı

Buradan da anlaşıldığı üzere metni bir alt satıra geçirmek için <br> etiketini kullanıyoruz

Bu etiketin bir özelliği de sonlandırılmaması

Şimdi font etiketinin kullanımını bir örnekle inceleyelim

Eğer kullanmak istediğiniz font bilgisayarınızda yüklü değilse font etiketi ile biçimlemek istediğiniz metin browser'ın varsayılan fontu ile gösterilecektir

Bu yüzden önce sisteminizde yüklü olan fontları inceleyin (Başlat/Ayarlar/Denetim Masası/Yazıtipleri)

Buradan yazıtiplerini açarak inceleyebilir ve beğendiklerinizi kullanabilirsiniz

Eğer benim örnekte kullandığım yazıtipleri (tahoma, comic sans ms, verdana, arial) sisteminizde yüklü değilse bunun yerine sizde yüklü olan istediğiniz bir fontu kullanabilirsiniz

<html>

<head>

<title>Renkler ve Mevsimler</title>

</head>

<body>

<font face="tahoma" size="5" color="#008000">İlkbahar</font>

<br>

<font face="verdana" size="5" color="#ff0000">Yaz</font>

<br>

<font face="arial" size="5" color="#ffff00">Sonbahar</font>

<br>

<font face="comic sans ms" size="5" color="#0000ff">Kış</font>

<br>

</body>

</html>

Her zamankinden farklı olarak ve ilk defa sayfamızda renk kullandık

Örnekte de gördüğünüz gibi bu işi renk kodlarıyla yaptık

Aslında bunun bir yolu daha var; o da renk kodu yerine rengin ingilizce adını yazmak (color="red" gibi)

Bu konuyu renkler bölümünde ayrıntılı olarak inceleyeceğiz

Burada yalnız bir kaç örnekle yetinelim:

Kırmızı-red

Mavi-blue

Siyah-black

Sarı-yellow

Lacivert-navy

**Prof. Dr. Sinsi** · 08-17-2012

Metin renklendirmeyi yüzeysel olarak fontlar konusunda öğrendik

Şimdi daha ayıntılı olarak ve bu işin mantığına inerek yeniden ele alacağız

Aynı zamanda sayfamıza artalan rengi vermeyi öğreneceğiz

Bu bölümde öğreneceğimiz konular:

Renk kodları

Artalanı renklendirmek

Renk Kodları

Fontlar konusunda, metnin rengini belirlerken <font color="

"> etiketini kullanmıştık ve color komutunun karşısına rengin ingilizce karşılığını yazabiliriz demiştik

Fakat bunun daha karmaşık olan bir başka yolu vardı; o da 16'lık sayı düzeninde renk kodu girmek

Önce sayı düzenleri nedir nasıl olur ona bakalım

Günlük hayatımızda kullandığımız sayı sistemine 10'luk sayı sistemi deniyor, tüm sayıları 0-9 arası toplam 10 rakamdan oluşan sembollerle ifade ediyoruz

10'luk sayı sisteminin yanısıra diğer sayı sistemleri de vardır

Bunlardan bilgisayar alanında kullanılan iki tanesi ikili (binary) ve onaltılı (hexadecimal) sayı sistemleridir

--------------------------------------------------------------------------------

İkili sayı sistemi nasıl olur? Bildiğiniz gibi günlük hayatta kullandığımız 10'lu sayı sisteminde 0-9 arası toplam 10 rakam vardır

Aynı şekilde ikili sayı sisteminde de toplam 2 rakam var (bunlar 0 ve 1) ve tüm sayılar bu iki rakamı kullanarak ifade edilebilir, nasıl mı? İşte burada işin içine matematik giriyor

Kısa ve öz olarak belirtmek gerekirse 10'luk düzendeki bir sayıyı ikilik düzene çevirmek için o sayı devamlı olarak 2'ye bölünür ve kalanlar soldan sağa doğru yanyana yazılır

--------------------------------------------------------------------------------

Gelelim asıl konumuz olan 16'lık sayı sistemine

Bu sayı sisteminde de toplam 16 rakam var bunlar;

0 1 2 3 4 5 6 7 8 9 A B C D E F

[10'un karşılığı A

15'in karşılığı F'dir

]

Etikette kullandığımız color=#xxxxxx ifadesi ise RGB (red-green-blue,kırmızı-yeşil-mavi) renklerinin karışım oranlarını belirtir

Bu renklerden herbirinin alacağı değer 00 ile FF aralığında olabilir (FF maksimum, 00 minimum karışımı verir)

Buna göre; #000000 siyah, #FF0000 kırmızı, #00FF00 yeşil, #0000FF mavi, #FFFFFF beyaz'dır

Diğer renkleri sayıları değiştirerek kendiniz deneyebilirsiniz

#000000=black(siyah)

#000080=navy(lacivert)

#0000FF=blue(mavi)

#008000=green(yeşil)

#008080=teal(koyu yeşil)

#00FF00=lime(parlak yeşil)

#00FFFF=aqua(turkuaz)

#800000=maroon(vişne çürüğü)

#800080=purple(mor)

#808000=olive(zeytuni yeşil)

#808080=gray(gri)

#C0C0C0=silver(gümüşi gri)

#FF0000=red(kırmızı)

#FF00FF=fuchsia(parlak pembe)

#FFFF00=yellow(sarı)

#FFFFFF=white(beyaz)

Artalanı Renklendirmek

Bu renklerle yalnızca metinleri değil sayfamızın artalananını da renklendirebiliriz

Bunun için <body bgcolor=#xxxxxx> etiketini kullanıyoruz

Daha doğrusu sayfamızın gövdesini belirtmek için yazdığımız <body> etiketini, <body bgcolor=#xxxxxx> şeklinde değiştiriyoruz

Renk kodlarını yazarken daima # işaretini kullanmayı unutmayın !

<body bgcolor="#ffcc00">

<font face="verdana" size="4" color="#ffffff">

<ol><h2><u>Günler</u></h2>

<font color="#0000ff">

<li>Pazartesi

<li>Salı

<li>Çarşamba

<li>Perşembe

<li>Cuma

</font>

<font color="#ff0000">

<li>Cumartesi

<li>Pazar

</font>

</ol>

</font>

</body>

**Prof. Dr. Sinsi** · 08-17-2012

Renkleri de öğrendikten sonra geldik en heyecanlı konuların bir diğerine, evet bu konuda sayfamıza ve artalana nasıl resim ekleyebileceğimizi öğreneceğiz

Bu konu aslında tablolar ve bağlantılarla da alakalı, bu yüzden burada genel olarak işleyeceğiz

Resim seçiminde, seçtiğimiz resmin gif yada jpg formatında olması zorunluluğu dışında herhangi bir kısıtlama yok

(telif hakları kanunu dışında tabi)

Resim ekleme işi gayet kolay

Yapmamız gereken browser'a sayfaya koyacağı resmin nerede olduğunu göstermekten ibaret

Her ne kadar şart olmasa da resmin pixel cinsinden en ve boy uzunluğunu belirtmeniz sayfanızın hayrına olacaktır

Kullanacağımız etiket şu şekilde olacak;

<img src="resmin bulunduğu yer ve adı" width="x" height="y">

Burada x resmin enini y ise boyunu belirtiyor

Bu bilgileri, resmi herhangi bir grafik editörüyle açarak öğrenebilirsiniz

Dikkat Edilecek Hususlar

Örneğin bu sevimli kediyi sayfamıza ekleyelim, peki işte size bir soru: bu resmin nerede olduğunu browser'a nasıl izah ederiz?

Diyelim ki resmimizin adı kedi

gif eni 65, boyu da 91 piksel, eğer bu resim html sayfamızla aynı dizinde duruyorsa sorun yok, kod aynen şu şekilde olmalı:

<img src="kedi

gif" width="65" height="91">

Fakat siz diyorsunuz ki; benim sayfamda kullanmak istediğim bir sürü resmim var ve bunları resim adlı bir alt klasörde topladım

Yani html dosyası c:html_ders dizininde resimler de c:html_ders
esim dizininde

Bu durumda browser'ınız o an çalışan html dosyasının bulunduğu klasörü kök dizin olarak kabul edecektir

Siz de buna göre resmin yolunu uyarlayacaksınız

Etiketi bu sefer şu şekilde kullanacağız;

<img src="resim/kedi

gif" width="65" height="91">

--------------------------------------------------------------------------------

Bölü işaretinin yönüne dikkat edin

Bu Windows'ta ya da Dos'ta dizinler için kullandığımız ters bölü işaretinin tersi, yani normal bölü işareti

HTML'de dizinler belirtilirken hep bu bölü işareti kullanılır

Ziyaret ettiğiniz Internet adreslerini hatırlayın

--------------------------------------------------------------------------------

Peki ya şu şekilde olsaydı; resim klasörünün altında başka bir klasör var ve kedi

gif dosyası o klasörde, diyelim ki klasörün adı da gifler olsun

Bu durumda kedi

gif'in harddiskimizdeki yolu da c:html_ders
esimgiflerkedi

gif şeklinde olacak

Etiket tahmin ettiğiniz gibi şu şekilde olmalı:

<img src="resim/gifler/kedi

gif" width="65" height="91">

Bu şekilde istediğimiz kadar alt dizine ulaşabiliriz

Fakat üst dizinlere nasıl ulaşacağız? O da kolay

Bu seferde html dosyamızı bir klasör oluşturup o klasörün içine koyalım, mesela klasörün adı da html olsun -umarım karıştırmazsınız

Kedicik bulunduğu gifler klasöründe kalsın

Son durum şöyle olacak;

c:html_dershtmldeneme

htm yolunda html dökümanımız,

c:html_ders
esimgiflerkedi

gif yolunda resim var

İzlememiz gereken yol şöyle: browser deneme

htm dosyasının bulunduğu klasörü kök dizin kabul etti

Önce bir üst dizine çıkmalıyız ardından resim dizinine oradan gifler dizinine girmeliyiz

Üst dizine çıkmayı

/ ifadesiyle belirtiyoruz

<img src="

/resim/gifler/kedi

gif" width="65" height="91">

Bu şekilde ardarda

/ ifadesiyle istediğimiz kadar üst dizine geçebiliriz

Eğer iki üste geçeceksek

/

/ ifadesi işimizi görecektir

Resmi Hizalama

Resim artık sayfamızda, fakat daima hep solda duruyor

Bir hizalama (align) komutuyla resmi sağa (right) ya da sola (left) alabiliriz

-iyi ama resim zaten solda değil miydi??

Bir metinle kullandığınızda ise buradaki gibi bir sonuç alabilirsiniz, hizalama komutu resmi bu sefer metni gözönüne alarak hizalayacaktır

<img src="resim

jpg" width="25" height="25" align="right">

Artalana Resim Koyalım

Artalanı renklendirmeyi öğrenmiştik: <body bgcolor="

"> ifadesiyle bu işi kolayca yapıyorduk

Bu ifadeyi şu şekilde yazarsak resmimiz artalana döşenecektir

<body bgcolor="

" background="

">

Kullandığımız resme yakın tonda bir rengi bgcolor ifadesinin karşısına yazmayı ihmal etmemek yine bizim hayrımızadır

Bunun yanında background ifadesinin karşısına yukarıda anlattığımız kurallar çerçevesinde istediğimiz resmi koyabiliriz

Fakat bu sefer en ve boy ifadesini kullanmamıza gerek yok

Seçtiğimiz resim browser tarafından tüm sayfayı kaplayacak şekilde sayfaya yerleştirilecektir

Resme alternatif metin eklemek

Resimlere alternatif olarak metin yazılabilir

Ziyaretçi eğer browser'ını sadece metinleri göstermek üzere ayarlamışsa, resim yerine alternatif açıklama görüntülenecektir

alt="

" parametresiyle açıklama ekliyoruz, bu açıklama aynı zamanda kullanıcı fare imlecini resim üzerine getirdiğinde sarı bir çerçeve içinde görüntülenir

<img src="resim

gif" alt="kum saati">

Son bir örnekle bu konuyu bitirelim,

Gökyüzünü artalana koyalım, dünyayı da ortalanacak şekilde sayfaya yerleştirelim

<body bgcolor="#666dfe" background="bulut

jpg">

<center>

<img src="world

gif" width="360" height="170" alt="harita">

</center>

Eğer hala yapmadıysanız resimlere sağ tıklayıp (Resmi farklı kaydet

/Save image as

) seçeneğiyle bu resimleri harddiskinize kaydedebilirsiniz

**Prof. Dr. Sinsi** · 08-17-2012

Geldik HTML'de en önemli unsurlardan birisi olan bağlantılara

Bağlantılar sayesinde hazırladığımız birçok sayfayı birbirleriyle ilişkili hale getirebiliriz

Bir tıklama bizi istediğimiz yere götürecektir

HTML'de metinlere ve resimlere bağlantı kazandırmak mümkündür

Örnek için bu sayfayı incelemeniz yeterli

Sol tarafta konuları veren bir menü bölümü var

Siz bu bağlantılardan birisini tıkladığınızda ilgili konu açılıyor, sayfa sonlarında da diğer derslere bağlantılar oluşturulmuş, bunlar tıklandığında ilgili sayfa açılıyor

Bu yolla başka neler yapılabilir? Ses, grafik dosyaları, sıkıştırılmış dosyalar, internet adresleri,

bunların hepsine bağlantı kazandırmak mümkün

Hatta yapacağımız bağlantı sayfa içinde, yani dahili bir bağlantı da olabilir

Şimdi yapmak istediğimiz bağlantıya göre kullanacağımız komutları inceleyim:

<a href="

">

</a>

Bu komutla oluşturduğumuz bağlantı ile yeni bir sayfa açabilir, kullanıcıyı farklı bir internet adresine yönlendirebilir, kullanıcının kendisine sunduğunuz bir dosyaya ulaşmasını sağlayabilirsiniz

Yani bu tanıma göre bildiğimiz bağlantıları oluşturmak mümkün

Şimdi aşağıdaki örnekleri birlikte inceleyelim, fakat öncelikle bir kuralı belirtelim; <a>

</a> etiketi arasına yazdığımız metinler bağlantı özelliğine sahip olacaktır, metnin bağlantı olduğu eğer aksi belirtilmemişse browser tarafından altı çizili ve mavi renkli gösterilir

Örnekler

<a href="meyve

gif">buraya tıklandığında meyve resmi açılacak</a>

Birinci örnekte "buraya tıklandığında meyve resmi açılacak" yazısına bağlantı özelliği kazandırdığımızdan, browser tarafından altı çizili mavi yazıyla gösterilecek ve kullanıcı fare imlecini yazı üzerine getirdiğinde imleç el şekline dönüşecektir

Kullanıcı bu linke tıkladığında browser o anda açık bulunan sayfa ile aynı dizinde bulunan meyve

gif resmini açacaktır

Tabii ki dosya farklı bir dizinde ise kullanıcı hata mesajıyla karşılaşır

<a href="midi

zip">midi dosyalarını çekmek için tıklayın</a>

İkinci örnekte aynı şekilde "sıkıştırılmış midi dosyalarını çekmek için tıklayın" yazısına bağlantı özelliği kazandırdık

Fakat dosya tipinden kaynaklanan bir fark var; ilk örnekte meyve

gif'e tıklandığında browser resmi açacaktır fakat bu örnekte browser kullanıcıya midi

zip dosyasını açmak mı yoksa diske kaydetmek mi istediğini soran bir pencere açar

Bunun sebebi browser'ın htm, txt, jpg, gif,

uzantılı dosyaları görüntüleyebilirken zip, doc, xls, mp3 gibi dosyaları açamamasıdır

<a href="sayfa2

htm">2

sayfaya gitmek için tıklayın</a>

Yine üçüncü örneğimizde oluşturduğumuz linke tıklandığında aynı dizinde bulunan sayfa2

htm isimli başka bir html dökümanı açılacaktır

<a href="resim/kedi

jpg">kedi resmi</a>

<a href="resim/bitki/karanfil

gif">işte çok güzel bir karanfil</a>

<a href="

/araba/bmw

jpg">otomobil resimleri</a>

Bu 3 örnekte altdizinlere/üstdizinlere verilen bağlantıya misaller görüyorsunuz, resimler konusunda gördüğümüz kurallar burada da geçerli

<a href="http://www

benimsitem

com/">tıklayın sitemi ziyaret edin</a>

Yedinci örnekte bir internet adresine link verdik

<a href="ftp://ftp

benimsitem

com/">tıklayın dosyaları indirin</a>

Bu ise bir ftp adresine verilen link örneği

<a href="mailto: mdurcan@webteknikleri

com">mail atın</a>

Buradaki linke tıklandığında kullanıcının ilgili mail programı açılacak ve mail'in send to (kime) kısmına, verdiğimiz mail adresi otomatik olarak yazılacaktır

<a href="#

">

</a>

<a name="

">

</a>

Sayfa içi (dahili) linkleri bu komutu kullanarak hazırlayabiliriz

Örneğin sayfanın üst kısmında sayfa indeksini gösteren bir menü olsun

Kullanıcı bu menüde istediği başlığa tıkladığında ilgili konu açılsın

Örnek sayfa için listeler linkini tıklayın

Böyle bir sayfa hazırlamak için yapacağımız şeyler:

"tıklandığında" açılacak konuyu işaretlemek <a name="

">

</a>

browser'a, hazırlayacağımız menüye "tıklandığında" bu işaretli konuya gitmesini bildirmek

<a href="#

">

</a>

"Listeler" sayfasının benzer bir örneğini yukarıda kodlarıyla birlikte görüyorsunuz

Sayfa içerisindeki başlıkları <a name>

</a> komutları arasına alıyoruz, name kısmına başlığı hatırlatıcı bir isim verebilirsiniz

Benim burada kullandığım <u> ve <b> etiketleri, önceden öğrendiğimiz gibi başlığı altı çizili ve koyu olarak yazıyor

Yine 1-2-3 başlıklarıyla oluşturduğumuz menü linklerini <a href> komutuyla hazırlıyoruz, yalnız bir farkla; name kısmında başlığa verdiğimiz hatırlatıcı ismi önüne # işaretini koyarak href kısmına yazıyoruz

İşte bu iş bu kadar kolay

Diyelim ki kullanıcı sayfadaki bir linki tıkladığında, başka bir sayfanın belli bir bölümünün açılmasını istiyoruz, bunun için linke tıklandığında açılacak yazıyı <a name>

</a> ile işaretledikten sonra bağlantı etiketini şu şekilde yazıyoruz:

<a href="sayfa2

htm#ilgiliyer">

Bu linke tıklandığında başka bir sayfanın ilgili kısmı açılacak

</a>

<a name="ilgiliyer">

Başka bir sayfadaki linke tıklandığında burası açıldı

</a>

Resimlere bağlantı özelliği kazandırmak

Metinlere bağlantı vermeyi öğrendik, peki sayfadaki resimlere nasıl link vereceğiz? Bunun için resmi yerleştirmek için kullandığımız:

<img src="

" width="x" height="y"> etiketini <a href>

</a> etiketinin arasına alıyoruz

İşte örnek;

<a href="sayfa1

htm"><img src="resim

gif" border="0"></a>

resim

gif tıklanacak resmi, sayfa1

htm resme tıklandığında açılacak sayfayı gösteriyor

Border komutu ise resimde bağlantı özelliği olduğunu belirten çerçeveyi kontrol ediyor, 0 (sıfır) değeri bu çerçeveyi tamamen yok eder

Bu komutu değişik sayılarla deneyebilirsiniz

Target parametresi

Son olarak bağlantının açılacağı pencereyi belirtmek için kullanılan target parametresini öğrenelim

Kullanımı :

<a href="

" target="

">

</a>

target="_blank" Bağlantı yeni bir pencerede açılır

target="_self" Bağlantı aynı pencere içerisinde açılır

target="_top" Bağlantı aynı pencere içerisinde en üstten itibaren açılır

target="_parent" Açılan bağlantı, o anda açık sayfayı oluşturmuş bir ana sayfa varsa onun yerine konur

target="çerçeve adı" Frame komutu ile çerçeve oluşturulmuşsa bağlantının adı verilen çerçevede açılmasını sağlar

**Prof. Dr. Sinsi** · 08-17-2012

Çerçeveler (frame), HTML'e sonradan eklenmiştir

Bu yüzden eski sürüm browser'lar çerçeve kullanılmış bir sayfayı görüntüleyemezler

(Microsoft Internet Explorer 3

0 ile Netscape Navigator 2

0 ve üstü sürümleri frameleri destekliyor)

Bunun yanında çerçeve kullanımına karşı düşmanca (!) tavır sergileyen tasarımcılar da hatırı sayılır miktarda ve hala birçok site, ziyaretçisine çerçeveli ve çerçevesiz sunum seçeneği sunuyor

Çerçeveler sayfanın bazı kısımlarını sabit bırakırken, diğer kısımlarını değiştirme imkanı verir

Bunun anlamı ise kullanılacak çerçeve miktarınca ek HTML sayfası oluşturmak demektir

Browser, çerçevenin bir bölümüne yerleştirilecek olan kaynak dosyayı bulamazsa hata mesajı verecektir

Aşağıdaki örneği inceleyelim:

Örneğimizde 3 adet html dosyası var

Bunlardan frame

htm dosyası çerçeve komutlarını içeriyor (yani ana dosya)

Bu komutlar browser'a, görüntülenmekte olan pencereyi ikiye bölmesini, bunlardan birisinde htm1

htm dosyasını, diğerinde htm2

htm dosyasını görüntülemesini bildiriyor

<body bgcolor="

"> etiketi ile htm1

htm dosyasının artalan rengi kırmızı, htm2

htm dosyasının artalanı ise mavi yapılmış, kolaylık olması açısından dosyaların adlarını görüntülemeleri için bunlar da yazılmış ve sonuç gördüğünüz gibi

Şimdi bu çerçeveyi birlikte oluşturalım:

frame

htm dosyası:

<html>

<head>

<title>Çerçeveler</title>

</head>

<frameset cols="*,*">

<frame name="sol" src="htm1

htm">

<frame name="sag" src="htm2

htm">

</frameset>

<noframes>

<body>

</body>

</noframes>

</html>

htm1

htm dosyası:

<html>

<head></head>

<body bgcolor="red">

<font size="7" color="#ffffff">htm1

htm</font>

</body>

</html>

htm2

htm dosyası:

<html>

<head></head>

<body bgcolor="blue">

<font size="7" color="#ffffff">htm2

htm</font>

</body>

</html>

--------------------------------------------------------------------------------

<frameset>

</frameset>

Çerçeve oluşturmada kullandığımız etiket: frameset, cols ifadesi açılacak çerçevelerin yan yana sütunlar şeklinde olacağını belirtiyor, buraya row yazarsak çerçeveler alt alta satırlar görünümünde açılacaktır

cols (sütunlar)

rows (satırlar)

cols="*,*" ifadesi ile açılacak çerçevelerin pixel cinsinden ebatlarını belirliyoruz, buraya örneğin cols="140,500" gibi sayı yazılabilir, cols="25%,75%" ile browser penceresinin o anki ebadına göre verilen % oranlarına göre şekil alması sağlanabilir yada * sembolü ile açılacak çerçevenin ebadı browser'a bırakılır, cols="140,*" ifadesi ilk pencerenin 140 pixel olacağını ikincinin ise ebadının browser'a bırakıldığını gösteriyor

Bu şekilde aynı zamanda açılacak çerçeve sayısını da belirtmiş oluyoruz

cols="

" ifadesine iki değer (ya da yıldız) verirsek bu iki çerçeve aç anlamındadır, 3 değer 3 çerçeve açar

frame name="

" src="

" etiketi çerçevelere, bağlantıların TARGET kısmında kullanabilmek amacıyla isim (name) vermeyi sağlıyor (bu konuya aşağıda değineceğiz)

src pencerede görüntülenecek html dosyasının yerini gösteriyor

Resimler bahsinde belirttiğimiz yer (kaynak) gösterme kuralları burada da geçerli

Açılacak çerçeve sayısı kadar frame name="

" src="

" etiketi kullanıyoruz

Eski sürüm browserların çerçeve etiketini tanımadıklarından bahsetmiştik, işte noframes kısmı bu browserlara hitap ediyor

body kısmını bu eski browserlar görüntüleyebiliyor

Buraya örneğin sayfanın çerçeve kullanılarak yapıldığını gösteren bir mesaj yazılabilir, böylece ziyaretçinin artık yeni sürüm bir browser kullanması gerektiğini hatırlatabilirsiniz

FRAMESET etiketi ile kullanabileceğimiz diğer parametreler şunlar;

frameborder="

" (yes, no) Çerçeveler arasındaki sınır çizgisinin görünüp görünmeyeceğini belirler

border="

" (sayı) Sınır çizgisinin kalınlığını (veya çerçeveler arası mesafeyi) belirler

FRAME etiketi ile kullanabileceğimiz parametreler;

marginwidth="

" marginheight="

" (sayı) Sayfanın solundaki (marginleft) ve üstündeki (margintop) kenar boşluklarını belirler

scrolling="

" (yes, no, auto) Kaydırma çubuklarının durumunu belirler

noresize Pencere boyutlarının sabit olmasını sağlar

Daha karmaşık Çerçeveler

Yan yana sütünlar ya da alt alta satırlar görünümünde çerçeveler açmayı öğrendik peki tablolarda gördüğümüz hücreleri birleştirme gibi bir özellik çerçevelerde de var mı? maalesef yok, fakat aynı görünümü elde etmek mümkün

Bu etkiyi sağlamak için FRAMESET etiketini açıp kaynak dosyaların hepsini belirtmeden yeni bir FRAMESET açıyoruz, içiçe açtığımız bu etiketlerin kaynak dosyalarını eksiksiz olarak belirtip, etiketleri sonlandırıyoruz

Örnekleri ve yanlarındaki kodları inceleyip, farklı çerçeve türlerini kendi bilgisayarınızda oluşturmaya çalışın,

--------------------------------------------------------------------------------

<frameset rows="*,*" cols="*,*">

<frame name="a" src="htm1

htm">

<frame name="b" src="htm2

htm">

<frame name="c" src="htm3

htm">

<frame name="d" src="htm4

htm">

</frameset>

--------------------------------------------------------------------------------

<frameset cols="150,*">

<frame name="a" src="htm1

htm">

<frameset rows="100,*">

<frame name="b" src="htm2

htm">

<frame name="c" src="htm3

htm">

</frameset>

</frameset>

<frameset rows="50%,50%">

<frameset cols="*,*">

<frame name="a" src="htm1

htm">

<frame name="b" src="htm2

htm">

</frameset>

<frame name="c" src="htm3

htm">

</frameset>

<frameset rows="*,*,*">

<frame name="a" src="htm1

htm">

<frameset cols="*,*">

<frame name="b" src="htm2

htm">

<frame name="c" src="htm3

htm">

</frameset>

<frame name="d" src="htm4

htm">

</frameset>

<frameset cols="*,*">

<frameset rows="*,*">

<frame name="a" src="htm1

htm">

<frame name="b" src="htm2

htm">

</frameset>

<frame name="c" src="htm3

htm">

</frameset>

Çerçeveler konusu ile birlikte HTML öğreniyorum yazı dizimiz sona erdi, buraya kadar öğrendiklerinizle internette siz de kendinize ait sayfalarınızı inşa edebilirsiniz, eğer bu konuda ciddi düşünüyorsanız bunun yolunun çok çalışmaktan geçtiğini sakın unutmayın, hoşunuza giden sitelerin dizayn mantığını anlamaya çalışın, hatta bunun için kaynak kodlarını inceleyin

Görsel editörleri kullanarak sayfalar hazırlayın ve sonra da editörün kodları nasıl oluşturduğuna bakın

Son olarak; iyi bir tasarımcı olmanın yolunun çok çalışmak ve devamlı araştırmakan geçtiğini unutmayın

Hepinize başarılar

08-17-2012	#1
Prof. Dr. Sinsi	Html Nedir ?(Açıklamalı Anlatım Web Dizayn) HTML (HyperText Markup Language / Hareketli-Metin İşaretleme Dili) basitçe, browserlarla görebileceğimiz, internet dökümanları oluşturmaya yarayan bir çeşit dildir Örneğin okuduğunuz bu sayfa HTML dili kullanılarak hazırlandı Siz de browser'ınızı (Internet Explorer, Netscape Navigator,) kullanarak bu sayfayı ekranınızda görüntülüyorsunuz Tanımda geçen "internet dökümanı" ifadesinin yanısıra HTML ile oluşturduğunuz belgeleri harddiskinize kaydedebilir ve internet bağlantınız olmasa bile bu belgeleri görüntüleyebilirsiniz HTML, programlama dilleri (c, pascal, basic,) gibi bir programlama mantığı taşımadığından öğrenilmesi gayet kolay bir dildir Dilden ziyade kabaca metinleri ya da verileri biçimlendirmek, düzenlemek için kullandığımız komutlar dizisi bile diyebiliriz HTML için HTML Dersleri yazı dizimizi okuyarak bu dil hakkında hiçbir bilginiz olmasa bile yazı dizisinin sonunda öğrendiklerinizle siz de kendi sayfalarınızı hazırlayabileceksiniz