Şuanda bu yazıyı okuduğunuza göre sizlerde teknolojinin bir köşesinden tutmak niyetindesiniz.
Öncelikle çok şanslı olduğunuzu söylemek isterim. Ben Html öğrenmek istediğim zaman hiç Türkçe kaynak yoktu diyebilirim. Artık internet alemi öyle bir hal aldı ki; Html bilmeyene kız bile vermiyorlar diyebilirim ( :
Eğer iş anlamında “Bilgisayar” sizin işiniz ise sizlere kötü bir haberim var. İş başvuru sitelerinde işverenler, işe alma kriterlerinde Html’i artık yazmıyorlar bile. Çünkü öyle birşey ki; Html bilmeden Css, Css bilmeden Javascript, onu bilmeden bir diğerine diğerine ve diğerine geçmek imkansız gibi birşey. Bu nedenle ilk aşamamız olan Html’i öğrenelim. Bütün konuları ekledikten sonra diğer alanlarla ilgili sitelerimizi de açıp (siz bu yazıyı okurken belki de o sitelerimizi bile açmışızdır.) Türkiye’nin teknoloji alanındaki eksikliğini gidermek için elimizden geleni yapacağımıza söz veriyoruz ( :
Unutmayın; konuları sırasıyla okuyup,dinleyip, uyguladığınız zaman Html’i öğrenmeniz 10 günü geçmeyecektir.
Hadi Bismillah..
Html'e İlk Adım - 1 (Video-Yazı Ders)
- Html Nedir?
–Açılımı Hyper Text Markup Language. Bunun tam Türkçe’si bulunmamakla beraber “çok yere açılan metin” denilebilir.
–Web sayfaları oluşturmak için kullanılan ana dildir.
–Önceden tanımlanmış, biçimlenmiş etiketleri kullanır.
–Bir programlama dili değil, bir işaretleme dilidir.
Html dosyaları, .html veya .htm uzantılı olmak zorundadır.
- Her ne kadar videoda Visual Studio programının üzerinden anlatım yapıyor olsam da basit bir notepad ile de Html kodlarınızı yazıp,görüntüleyebilirsiniz.
NOT: Aşağıda Xhtml’den de bahsettim. Şimdilik aşağıdakileri çok kafanıza takmayın. Ön bilgi olması açısından yazdım.
- Xhtml Nedir?
•XHTML (eXtensible Hyper Text Markup Language) yani Html’in hem genişletilmiş hem de daha işlevsel olan bir versiyonudur diyebiliriz.
•Html ve Xml yapılarının World Wide Web Consortium (W3C) tarafından 2001 yılında birleştirilerek XHTML 1.0 olarak duyurulmasıyla ortaya çıkmıştır.
•Xml (eXtensible Markup Language) ise genişletilmiş işaretleme dilidir. Şimdilik Xml’in varolan etiketlerle değil kullanıcının tanımladığı etiketlerle oluşturulduğunu bilmemiz yeterlidir.
- Neden XHTML? -
•Html’de uyulması gereken kurallar daha gevşektir. Bu nedenle çoğu zaman düzgün bir şekilde gösterilemeyen sayfalar ortaya çıkmaktadır.
•Xhtml’de ise belirli katı kurallar bulunmaktadır. Böylece hem görüntü hem de hız açısından daha iyi sayfalar oluşturulur.
•Örneğin; DOCTYPE etiketi kullanmak zorunludur.
•Arama motorları açısından da indekslemenin daha çabuk olması ve daha üst sıralarda yer alınabilmesi için Html’den daha katı kurallara sahip olan Xhtml kullanmak daha iyi olacaktır.
- XHTML’de Uyulacak Kurallar -
•Açılan tüm etiketler kapatılmalıdır.
•Tüm etiketler ve özellikleri küçük harfle yazılmalıdırlar.
•Etiket özelliklerine değerler, çift tırnak içerisinde yazılmalıdırlar.
•Etiket özellikleri değer almadan tek başlarına kullanılamazlar.
•İç içe girmiş yani birbiri içerisine yuvalanmış elemanlarda etiketin kapanış sırasına dikkat edilmelidir.
•Html biçimlendirme etiketlerine genellikle Html etiketleri denir.
•Her Html etiketi önce açılır ve sonra kapatılır (istisnalar hariç).
•<etiket>…</etiket> ifadesi gibi önce başlangıç etiketi yazılır ve sonra / işareti eklenerek bitiş etiketi yazılır.
•Html etiketleri büyük/küçük harfe duyarlı değildir, yani <etiket> ve <ETİKET> aynı görevi görür.
•? Eğer Web’de gezintiye çıkarsanız bir çok sitenin kaynak kodunun büyük harflerle yapılmış olduğunu göreceksiniz. Fakat biz her zaman küçük harf kullanırız. Neden?
•World Wide Web Consortium (W3C) HTML 4 versiyonu ile beraber küçük harf kullanımını önerir. Ayrıca XHTML (yeni nesil HTML) dili de bunu kullanmanızı şiddetle önerir.
•<html> ve </html> etiketleri: Tarayıcıya bir Html dosyasının başlatılacağını söyler. Html dökümanınızdaki son etiket ise </html>’dir. Bu da tarayıcıya Html dosyasının sonunun geldiğini söyler.
•<head> ve </head> etiketleri: Arasında kalan kısım, arkaplan bilgilerini içerir. Tarayıcı penceresinde görüntülenmez. Başlık gibi..
•<title> ve </title> etiketleri: Arasında kalan kısım, dökümanınızın başlık bilgilerini içerir. Başlık tarayıcı penceresinin en üstünde görüntülenir.
•<body> ve </body> etiketleri: Arasında kalan kısım, tarayıcı penceresinde görüntülenecek olan kısmı içerir.
•BAŞLIKLAR: h1,h2,h3,h4,h5,h6 etiketleri ile tanımlanırlar. h1 en büyük puntoyu, h6 en küçük puntoyu belirtir.
•PARAGRAFLAR: <p>..</p> etiketleri ile tanımlanır. Otomatik olarak paragraf etiketlerinin öncesinde ve sonrasında bir satır atlar.
•ALT SATIRA GEÇME: <br/> etiketi kullanılır. Bu etiketin başlangıç etiketi yoktur. Çoğu zaman sadece <br> etiketi de kullanılır ancak bu özellik gelecek nesil HTML (XML ve XHTML) dilinin ilk kuralını bozmaktadır. Bu yüzden <br/> etiketini kullanmanız tavsiye edilir.
•ARAYA ÇİZGİ ÇEKME: <hr/> sayfada yatay bir çizgi çizer. Ve <br/> etiketi gibi başlangıç etiketi yoktur.
•YORUM SATIRI: <!– yorum satırı –> Html kaynak kodu içerisine programcılar tarafından hangi satırın ne iş gördüğünü anlatmaları için kullanılır. Bu satırlar, sayfa browser’da görüntülenirken dikkate alınmazlar.
- Html’de Nitelikler -
•Nitelikler, Html öğelerine ek özellikler eklenmesini sağlar.
•Nitelikler daima isim/değer çiftleri arasında gelir: özellik=«değer».
•Nitelikler daima başlangıç etiketi içerisinde belirtilir.
•Niteliklerin değerleri her zaman tırnak içerisinde olmalıdır.
•<table border=«1»> ile tabloya kenarlık verilebilir.
•Kenarlık eklendiğinde hücreler arasında varsayılan olarak bir miktar boşluk bırakılır. İşte bu boşluklar, tablonun cellspacing özelliği ile kontrol edilir. Varsayılan 1’dir. 0 yaparsak kaybolur.
•Hücre içindeki yazılar ile hücre duvarları arasında bir miktar boşluk bulunur. Bu boşluklar cellpadding ile verilir.
•Bazı durumlarda yazıları sola, ortaya, sağa, aşağı, yukarı yazdırmak isteyebiliriz.
•Bunun için yatayda align özelliğinin left-center-right değerlerini kullanırız.
•Tablodaki başlıkları kalın yapmak için <td> yerine <th> etiketi kullanılır.
Bu dersimiz videosuz olacaktır çünkü videolu anlatımlık birşey yoktur. Aşağıda renk kodları bulunmaktadır. Bunlar vasıtasıyla yazılarınıza veya sitenizin istediğiniz kısımlarına renk verebilirsiniz.
Standard Renk İsimleri 16 tanedir. Direk rengin ismini yazarak renklendirme yapabilirsiniz.
HTML renkleri hexadecimal değerler veya RGB (reg green blue – kırmızı yeşil mavi) kombinasyonu ile belirtilebilir.
En düşük değer 0 (hex #00) ve en yüksek değer de 255′tir (hex #FF).
Aşağıdaki tablodan renk değerlerine bakabilirsiniz.
