---HTML ---Dersleri---

[Admin]

Selamun Aleykum arkadaşlar eğer derslerimizi düzenli şekilde takip ederseniz dersler sonunda html biliyor olarak çıkarsınız.
Bu konuda elimden gelen yardımı yapmaya çalışacağım


DERS-1

Önce html nedir bir tanıyalım Nasıl bir şey çalışma mantığı vb.

Hypertext Markup Language (HTML ) belgelerin birbirlerine nasıl bağlanacaklarını ve belge içindeki metin ve resimlerin nasıl yerleşeceklerini belirleyen ve etiket (tag ) denilen kod parçalarından oluşan bir sistemdir. Belgeleri birbirlerine bağlamak için kullanılan Hypertextler oldukça güçlüdürler. Internet üzerinde yaşayan World Wide Web (Kısaca WWW ya da Web ), HTML sisteminin arkasında etkileşimli, çok platformlu, multimedia ve client/server uygulamaları yaratmak için kullanılır.

Web, formatlı metinler, ses ve resimlerden oluşan "yaşayan" belgelerden oluşur. Bu belgeler Webspace denen alanları oluşturur. Bir webspace tipik olarak,home page etrafında biriken linkli sayfalardan oluşur. Bu linkler webspace içinden bir iç adres ya da dış kaynaklı bir adres olabilir. Bir home page ise bilgi paylaşımını sağlamak için kullanılan bir sanal buluşma ortamı durumundadır.

Aslında HTML bir programlama dili değildir. Programlama dili, bir seri prosedür ve açıklamadan oluşur ve genelde dış bir veriye ulaşmayı amaçlar. Bir HTML belgesi ise, başlı başına verinin kendisidir. HTML veriler içine yerleştirilen "tag" parçaları, metnin, dolayısıyla belgenin, okuyan tarayıcı (browser )tarafından verileri nasıl işleyeneceğini belirler.

Geleneksel yayıncılıkta, yazar içeriği editöre verir ve editör bu içeriği düzenleyerek, basım için hazırlar. En son işlem olarak belge basılır. Bu işlem Web ve HTML yardımı ile yazar ve editör aynı kişidir ve oluşturulan belgeler Web server üzerinden yayınlanır. Bir başka fark, yapılan iş okuyuculara dağıtılmaz,okuyucular tarafından ziyaret edilir. Yaratılan belgeler okuyucunun tarayıcısında, bilgisayarın ortamına göre ve yaratıcının istediği şekilde görüntülenir.

Teknik olarak HTML, Standard Generalized Markup Language (SGML ) Document Type Definition (DTD ) olarak tanımlanır. SGML ilk olarak IBM tarafından 1960ların sonlarında, değişik bilgisayar ortamlarında belge taşıma sorununa çözüm olarak GML (General Markup Language ) olarak geliştirilmiştir. Zaman içinde GML, SGML olarak International Standards Organization (ISO ) tarafından standart haline getirildi. (Referans numarası: ISO8879:1986 )

Bir SGML belgesi üç ana parçaadan oluşur. İlk parça, tag ile normal metni birbirlerinden ayırmak için hangi karakter setinin kullanılacağını tanımlar. İkinci parça, etiketlerin uygun olarak kullanılacağı belge tipini tanımlar. Üçüncü parça ise, belgenin asıl metnini ve işaret etiketlerini içerir. Bu üç parçanın hepsiaynı fiziksel dosya içinde olmak zorundadırlar. Bütün HTML tarayıcıları aynı SGML karakter setini ve belge tipini kabul ederler, böylece kullanıcı yalnız metin içeriğini düşünür.

Bütün HTML etiketleri "<" ve ">" işaretleri arasına yazılır. Bazıları tek olarak kullanılır, <P> gibi, bazıları ise açma-kapama olarak kullanılırlar,>B>Dikkat! >/B>gibi.

Dikkat etmeniz gereken nokta: Bütün başlama kodları "<" ve ">" işaretleri arasında, bitirme kodları da "</" ve ">" işaretleri arasında olmalıdır. Bunların eksik yazılması, sayfanın biçimsiz görünmesine neden olur

Örnek:
Kod Alanı:


<TITLE> Ornek Web Sayfasi </TITLE>
<option>Seçiminizi Yapın: </option>





HTML kodlarını görebilmek için Internet Explorerda View menüsünden Source (Görünüm/Kaynak ) menüsünü tıklayın. Acılan Txt dosyasında (Not Defteri ) HTLM kodlarını görebilirsiniz. Dosya/Farklı Kaydet.. menüsünden .htm veya .html uzantılı olarak HTML dosyası yaratabilirsiniz

[Admin]

Ders-2 Temel Kavramlar


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 Windowsun Notepadi 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 Windowsun
Notepadi. 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 browserda iyi görünürken bir
başka browserda 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ığı browsera 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.



Bu kadar genel bilgi yeter. Bir sonraki konuda


ilk HTML sayfamızı yapıyoruz.

[Admin]

SA arkadaşlar yöneticilerden bi aksilik çıkmadı deslere devam ediyorum.İnş. ilerde videolu anlatımlarıda eklerim.

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:


Kod Alanı:
<font color="blue"> <head>
<title>Ylk 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 Tamama basın.



Notepadi 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:




<img src= "http://img118.imageshack.us/my.php?image=41493346hj7.gif>



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


Şimdi de bu belgeyi nasıl oluşturduğumuzu
birlikte inceleyelim. Birşey dikkatinizi çekti mi Yngilizce 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:


<font color=blue><html>...gif">

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.

<font color="blue"><head>...</head>

<font color="blue"><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, meta ve title gibi etiketler burada yeralır. Meta
etiketlerine ileride değineceğiz.

<font color="blue"><bOdy>...</bOdy> arası ise sayfamızın gövde bölümü. Ekranda gösterilecek
kısımlar bu tagler arasında yeralıyor.


<font color="blue"><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.
Yşin ilginç tarafı hiçbir kod yazmadan sadece Sayfama Hoşgeldiniz yazıp
kaydetsek ve browserda böyle görüntülesek de aynı neticeyi elde edecektik.


Sonraki bölümde metin biçimlendirmeye yarayan
etiketleri öğreneceğiz.

[Admin]

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>




HTMLde 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 Netscapein 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. Notepadi
açıyor ve şu kodları yazıyoruz;



Kod Alanı:

<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:



Kod Alanı:

<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>






Etiketleri kullanma mantığımızı anlamış
olmalısınız. Biçimlendirmek istediğimiz metnin başına ilgili etiketi yazıyoruz
ve metnin sonunda da ilgili etiketi sonlandırıyoruz. Etiket biz
sonlandırmadığımız müddetçe etkisini göstermeye devam ediyor. Eğer hala
tereddütleriniz varsa örnekler üzerindeki kodların yerlerini değiştirerek
kaydedin ve diğer taraftan browserınızın refresh/reload (yenile ) tuşuna
basarak değişiklikleri gözlemleyin.


<img src= "http://img253.imageshack.us/myimage=75706729nl8.gif>


Yeni öğrendiğimiz kodlara bir göz atalım:



<center>....</center>
Aradaki metinleri sayfaya göre ortalar. center



<b>....</b>
Aradaki metni koyu bold yazar.




<i>....</i>
Aradaki metni eğik italic yazar.




<u>....</u>
Aradaki metni altı çizili underline
olarak yazar.




<h1>....<h6>
Başlık heading etiketi. h1 en büyük, h6
en küçük.



<p>....</p>
Aradaki metin paragraf özelliği kazanır.
Sonlandırıldığında, takib eden metin bir satır boşluk bırakılarak ve satır
başına yazılır.

Başladığınız etiketi
sonlandırmayı sakın unutmayın !


Burada bilmeyenler için küçük bir bilgi; bir
html dökümanını açtığımızda ve ekran üzerinde farenin sağ tuşuna tıklayıp
kaynağı görüntüle/view sourceu seçtiğimizde Internet Explorer için Notepad,
Netscape için kendi Source Viewerı açılacak ve bize o sayfanın kodunu
gösterecektir.

Şu ana kadar yazılarımızın font ayarını
browserın varsayılan fontuna bıraktık. Bir sonraki konuda, metinlerde
istediğimiz fontu nasıl kullanacağımızı göreceğiz.

[Admin]

Fontlar ve 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; HTMLde
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. Ystisnai etiketlerden birisi bu: <br> etiketi sonlandırılmıyor.




Buna bir örnek verelim;



Kod Alanı:

<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.




Kod Alanı:

<html>
<head>
<title>Renkler ve Mevsimler</title>
</head>
<body>
<font face="tahoma" size="5" color="#008000">Ylkbahar</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

Yeşil-green



Bu renkleri yukarıdaki örnek üzerinde deneyin,
renk kodunu silin ve rengin ingilizce karşılığını yazın.