HTML KODLAR
Web sayfaları html dili ile yazılır. Bu dil web sayfasını tasarlarken gereken tasarımı kullanmamız için gereklidir. Aslında web sayfası sadece bir tasarımdır. Html de bu tasarımı kolaylaştırmak için bir araçtır. Web sayfasına yazı, resim, müzik, animasyon, hiper text bağlantılar gibi öğeleri en güzel bir biçimde yerleştirmek için kullanılır. Bir html sayfasının formatı;tagını kullanacağız.
tagının bitiş imini kullanmak gerekmemektedir. Browser
tagını gördüğü an yeni bir paragraf başlatacaktır. Yani bir satırdan yeni bir paragrafa devam eden yazıları yazacaktır. Şimdide bunu bir deneyelim.
Yeni bir paragrafı okuyorsunuz.
Bir başka bir paragraf daha
Yani her
yeni paragraf başlatır.
Bir deneme daha.
Paragraf denememizi yazın ve deneme3.html olarak kayıt edin. Şimdi deneme3.html yi çalıştırın. Dikkat ederseniz browser her gördüğü
tagından sonra bir satır boşluk bırakıyor ve yeni bir paragrafa başlıyor. Önemli bir nokta dikkat edin. Şimdi bu yazdığımız sayfayı kontrol edin Artık birkaç deneme daha yaparsanız iyi olur.
tagı bizim için iyi bir kontrol aracıdır. Sayfa üzerinde hakimiyetimizi artırır. Yazıları kontrol etmek için daha birçok tag var. Şimdi bunlardan yeni birini inceleyelim. Satır sonu yapmak için
tagını, yazıyı ortalamak için
sadece bir alt satıra geçer
Dikkat ettiniz mi, bir satır boşluk bırakmıyor
sadece bir alt satıra geçiyor.
Önemli bir fark. Evet
tagı sadece satır sonu yapar. Yani bir alt satıra geçer. Yeni bir paragraf başlatmaz.
tagından bu yönden ayrılı. Hemen yandaki kodları yazın ve deneme4.html olarak kayıt edin. Sonra deneme4.html dosyasını çalıştırın. Dikkat edin satır sonu tagından hemen sonra bir alt satırdan yazı nasıl başlıyor. Birkaç deneme yapın.
ve
tagları arasındaki farkı hissedin. İki tagı aynı anda kullanan birkaç deneme yapın. Şimdi Deneme4.html yi çalıştıralım.
Br tagını da öğrendiğimize göre center tagına geçebiliriz.
Aynı şekilde istediğimiz
Aynı şekilde yazım kuralları da önemlidir. Bu bağlamda bir web sayfası tasarlarken bizler bazı kurallara
uymak ve sayfayı en güzel şekilde tasarlamak mecburiyetindeyiz.
Bu durumda tasarım yaparken kullanacağımız bazı taglar geliştirilmiştir. bu taglar bize tasarım kolaylığı sağlamaktadır. Doğru şekilde kullanıldığında çok güzel etkiler verirler.
Yandaki satırları inceleyelim. Html ile açılış yaptık bu bir html belgesi olduğunu belirtir. Sonra head ile açıklama satırları geliyor. Biz sadece title ile başlığı yazdık. İlk resimli sayfamız /title tagını kapattık. Sonra /head tagını kapattık. Body ile sayfayı yazmaya başladık. Img tagı bir resmi sayfaya yerleştireceğimizi anlattı src ise resmin bulunduğu yeri browsere tanıtıyor. Burada sayfamızla aynı dizinde olan bir resmi kullandığımız için sadece resmin adını ve uzantısını yazdık. resim.gif bu bir gif formatında ki bir resim. Tabii ki bu resim benim sayfamda bulunuyor. Siz başka bir resmi kullanabilirsiniz. O zaman sizin resminizin adını yazmak zorunda kalırsınız. Eğer bu sayfadaki resmi kullanmak isterseniz denemeyi çalıştırın resmin üzerine gelin sol tıklayın ve sürükleyerek web sayfam dizinine bırakın. Sayfayı resden.html olarak kayıt edebilirsiniz. Şimdi sayfayı çalıştırın.
İlk resimli sayfamızı çalıştırdığımıza göre şimdi alt parametresini tanıyalım. Sayfaları dolaşırken resimler görürüz, eğer otomatik resim göstericiyi kapatırsak bu resimleri göremeyiz. O zaman resmin yerinde bir simge oluşur. Peki bu neyin simgesi. Bu durumda eğer resmin bir adı olsa bu addan bir fikir edinebiliriz. Alt parametresi bu durumlar için kullanılır. Alt parametresini
Border parametresi ile resmi bir çerçeve içerisine alır. Çerçeve kalınlığı parametre değeri büyüdükçe artar. Sıfır ( 0 ) değeri kullanılırsa çerçeve yok anlamına gelir.
şeklinde kullanılır. Hemen bu kodları yazalım ve resden2.html olarak kayıt edelim ve çalıştıralım. Resmin bir çerçeve içine alındığını görelim. Border değerini değiştirerek sonucunu görün. Çeşitli border değerlerine dikkat edin.
resim sola yanaşık
Align parametresi resmi sayfanın değişik bölümlerine yerleştirmeye yarar. Bu parametre ile left kullanılırsa resim sola yanaşık gösterilir. Sonra gelen yazılar ise hemen resmin sağına yazılır. right parametresi kullanılırsa resim sağa yanaşık gösterilir ve peşinden gelen yazılar resmin soluna yazılır. Şimdi bu parametreleri uygulamalı olarak görelim.
resim sola yanaşık.
resim sağa yanaşık.
resim sağa yanaşıkBu parametreler kullanılarak resmin etrafında kayan yazılar oluşturulabilir. Bu güzel bir efekttir. Şimdi sağa ve sola yanaşık resimleri görelim. Bu konuyu da anladığımıza göre artık diğer parametrelere geçebiliriz. Daha sonra ise resimlerin kullanımıyla ilgili önemli noktalara değineceğiz. Şimdi resmin genişlini ve yüksekliğini belirleyelim. Aslında resmin genişliği ve genişliğini belirlemesekte olur. Fakat eğer sayfamızı izleyen bir kişi resimleri otomatik izlemeyi kapatmış veya salt metinsel bir browser kullanıyorsa sayfamızın görünüşü bozulabilecektir. Resmin boyutlarını belirlersek inceleyici ( browser ) belirttiğimiz büyüklük kadar bir alanı boş bırakacaktır.
Resmin yüksekliğini belirleyen parametre height="piksel olarak değeri" dir. Resmin genişliğini belirleyen parametre width="piksel olarak değeri" Bu değerleri img tagı içerisinde kullandığımızda otomatik resim gösterici çalışmasa da resmin ebatları kadar alan boş bırakılacaktır. Ayrıca burada bir resim olduğunu ifade eden bir sembol ve bu sembolün içerisinde eğer belirtiksek alt parametresi ile belirlediğimiz açıklama gözükecektir. Bu parametrelerin diğer bir kullanım alanı da resmin boyutlarını değiştirmektir. Resim bu parametreler oranında yerleştirileceği için parametreleri büyülttükçe resim otomatik olarak büyük gösterilecektir. Parametreler küçüldükçe resim otomatik olarak küçültülecektir. Şimdi yandaki kodları yazın ve kayıt edin. Sonra çalıştırın.
Aynı resim üzerinde height ve width değerlerini değiştirerek birkaç deneme yapın resmin nasıl büyüyüp küçüldüğünü görün.
Sayfaya resim ekleme ile ilgili anlatacağım şimdilik bu kadar. Fakat anlatılacak çok şey var ve ilerde anlatılacak. Web sayfasının en önemli konusu olan linklere geçelim.
Sayfaya link ekleme
Bu bölümde hazırladığımız web sayfamıza gerekli gördüğümüz yerlerine uygun linkleri nasıl ekleyeceğimizi göreceğiz. Evet bir web sayfasının en önemli özelliği etkileşimli olmasıdır.
Link için kullanacağımız tag a dır. Bu tagında birçok önemli parametresi var. Şimdi bir link için ne yapmamız gerekir görelim.
Buradan ikinci sayfaya geçebilirsiniz Öncelikle birinci sayfamızı yazalım ve bir.html olarak kayıt edelim. Sonra yeni bir sayfa tanımlayalım ve iki.html olarak kayıt edelim. Burada ördüğümüz gibi link tagı Tıklanacak yazı şeklinde yazılır. Burada a link tagı href ise bu taga eklenmiş bir parametredir. Bu parametre gidilecek sayfanın yerini ve adını belirler. Öncelikle kodlarımızı yazdıksa bir kontrol edelim. Bu denemede a tagının nasıl çalıştığını gördük. href parametresini anlamaya çalışalım. Href browsere gidilecek sayfa ve adresini verir. Gidilecek sayfa adresi için birkaç konum vardır. Şimdi bunları tek tek inceleyelim.
Buradan birinci sayfaya geçebilirsiniz Gidilecek sayfa bulunduğumuz sayfa ile aynı klasörde ( aynı yerde ). Bu durumda link verirken yapmamız gereken sadece yeni html dosyasının adını yazmaktır. Tıklanacak metin gibi. Gidilecek sayfa bulunduğumuz sayfanın bir alt klasöründe. Yani bulunulan klasörün içinde bulunan başka bir klasörde. Bu durumda link verirken gidilecek klasöre gidilecek adı ve html dosyasına yeni.html adı verirsek. Tıklanacak metin şeklinde bir bağlantı yapmamız gerekir. Gidilecek dosya bulunulan klasörün bir üst klasöründe ise. Yani bulunulan klasör gidilecek klasörün içinde ise. Tıklanacak metin şeklinde bir ifade kullanırız. Gidilecek html dosyası başka bir adreste ise bu durumda. Gidilecek adresin tam yolunu ve dosya adını yazmamız gerekir. Mesela counter.com adlı sayfaya link verecek isek şu şekilde bir link kullanırız. Link adı buraya Burada dikkat etmeniz gereken nokta gidilecek adresin tam yolunu ve gidilecek html dosyasını doğru yazmaktır. Şimdi de a tagının yeni bir parametresini görelim. Target parametresi ile gidilecek sayfanın hangi pencerede (browser) gösterileceğini belirleyebilirsiniz. Şu anda öğreneceğimiz parametre _blank parametresidir. Bu parametre ile gidilecek sayfanın yeni bir pencerede açılması sağlanır. Kullanımı; Bedava Online şeklindedir. Link tagını kullandığımızda, tıklanacak metin kısmı altı çizgili ve farklı bir renkte görülür. Bu renk önceden tanımlı olarak mavidir.
Renk nasıl. Bu tanımlamayı değiştirmek için body tagı içinde link parametresini kullanabiliriz. Bu parametre:
şeklindedir.Ayrıca gidilmiş bir linkin rengini belirlemek için vlink parametresi: &body link="renk tanımı" vlink="renk tanımı"> şeklinde kullanılır. Yandaki kodları yazın ve kayıt edin. Bu dosyayı çalıştırın. Renk nasıl adlı link ilk çalıştığında rengi yeşildir. Bu linki tıklayalım. Yeni bir sayfa açılacak. Tekrar geri gelelim. Şimdi Renk nasıl linkine bakalım. Artık mavi rengine dönmüş olmalıdır. Burada rengin nasıl belirlendiğini öğrenmek istersek, bilgisayarda renk tanımı RGB dir. Yani Red-Green-Blue ( Kırmızı-Yeşil-Mavi ) açılımına sahip olan bu tanım bilgisayarda rengi tanımlar. Bu konuyu biraz araştıralım çünkü önemli bir konu ve renk kullanımı önemli bir konudur. Renk tanımı yapılırken bu üç ana rengin tonları kullanılır. Bu renklerin değerleri 000'dan başlar 255'e kadar uzanır. 000 iken bu renk tonu hiç kullanılmaz. 255 iken ise bu renk tonu maksimum düzeyde kullanılır. Bu değerleri şu şekilde tanımlayabiliriz: Kırmızı 000, yeşil 192, mavi 192 bu renk tanımını bir görelim. yeşilin bir tonu Kırmızı 255, yeşil 255, mavi 064 bu renk tanımını bir görelim. sarının bir tonu Kırmızı 000, yeşil 000, mavi 256 bu renk tanımını bir görelim. mavinin bir tonu Renklerin oranlarını değiştirerek nasıl yeni renkler oluşturulduğunu gördük. Dikkat etmemiz gereken bu oranları html dosyası içinde kullanırken ondalık olarak değil onaltılık (hexadesimal) sistemde kullanmamız gerektiği. Bunun için ya başlat/programlar/donattılar/hesapmakinesi 'den hesap makinesini çalıştırıp bilimsel mod da önce onluk düzeyde istediğimiz renk oranını yazıp sonra onaltılık düzene çevireceğiz ki bunu her renk oranı için tek tek yapacağız. Yada Paint Shop Pro 'da renk tanımlaması yaparken beğendiğimiz rengin değerini html code yazan kutucuktan öğrenebiliriz. On altılık düzende renk değeri 00'dan FF'e kadar değişir. Yukarıdaki değerleri onaltılık kodda verirsek: Kırmızı 00, yeşil C0, mavi C0 bu renk tanımını bir görelim. yeşilin bir tonu Kırmızı FF, yeşil FF, mavi 40 bu renk tanımını bir görelim. sarının bir tonu Kırmızı 00, yeşil 00, mavi FF bu renk tanımını bir görelim. mavinin bir tonu Bu konuda değişik değerler vererek denemeler yapın anlamadığınız yer varsa bana sorabilirsiniz. Artık link olarak bir resmin kullanılmasını görebiliriz. Bu önemli bir özellik. Sayfa tasarlarken görsel etkilerden faydalanmayı sağlar. Evet link olarak bir resim kullanabiliriz.
.
Linklerde resim kullanmak için tıklama da kullandığımız yazı yerine img tagı ile bir resim koyuyoruz. Yapmamız gereken sadece bu kadar. Yandaki kodları incelersek a href den sonra
şeklinde bir resmi sayfaya yerleştirdik. Aslında buraya bir anahtar kelime yazmamız gerekiyordu. Bu şekilde biz kelimeler yerine resim kullanmış olduk. Yine ile linkimizi kapatalım. İşlem tamam. Bir deneyelim mi?.
Bir resme link verdik ama dikkat edilirse resmin etrafında bir çerçeve belirdiğini göreceksiniz. Bu çerçeve her zaman hoş görüntü vermiyor. Çerçeveyi kaldırmak için yapmamız gereken img tagını border=0 parametresi ile beraber kullanmak. Bu şekilde bir kullanım resmin etrafındaki çerçeveyi kaldırmaya yetiyor. İki link arasındaki çerçeve farkına dikkat! Linkler ile ilgili yeni bir konuya geçebiliriz. Fakat şunu unutmayın web sayfası tasarlayacak iseniz bol miktarda deneme yapın ve her konuyu anlayın. Anlamadığınız yerde soru sormaya çekinmeyin. Yeni konumuz bir sayfanın içinde herhangi bir yere link vermek. Bir konuyu anlatırken sayfanın içinde herhangi bir yere link verebilirsiniz. Bunun için de a tagını kullanacağız. Bu tagın yanında name parametresi kullanılacak. Bir örnekle bu konuya giriş yapalım. Şu anda çalıştığımız sayfanın başına dönelim. Öncelikle link vereceğimiz yere bir isim veriyoruz. Bu sayfada sayfa başına giris_bolumu adı verdim. Sayfanın başlangıcına kodunu giriyoruz. Bu bir etikettir. Bu bölüme gitmek içinse tıklanacak metin şeklinde bir link veriyoruz. Burada dikkat etmemiz gereken # karakterinin mutlaka kullanılması gerektiği. Bu karaktere AltGr+3 ile ulaşabiliriz. Eğer başka bir sayfada bulunan bir etikete tanımlanmış bir bölüme link vermek istersek bu durumda yapmamız gereken sayfanın yolunu da href etiketi ile belirtmek. web de hangi protokoller kullanılır şeklinde bir kod girmemiz gerekecek. Bir deneyin.
Meta Taglarının Kullanımı
Web sayfası hazırlarken dikkat etmemiz gereken bir konu da meta taglarıdır. Aslında direk olarak web sayfamızın görünümüne etki etmezler. Hatta bir görüntü oluşturmazlar. Meta tagları browser, web server için yazılan taglardır. Peki bu tagların ne önemi var.
Mesela ayarları İngiliz klavyeye göre hazırlanmış bir browser Türkçe karakterleri tanımayacaktır. Bunun sonucu olarak ta özenle hazırladığınız sayfayı ziyaret eden insanlar sayfanızdan belki de bir şey anlamayacak ve terk edeceklerdir. Bu gibi bir durumu engellemek için browsere ben Türkçe karakterler kullandım bunu göster demeniz gerekmektedir. Bunun yolu da meta taglarından geçmektedir.
Aramam motorları sizin sayfalarınızı kayıt ederken meta taglarına bakarlar. Böylece sayfanızın konusunu ve nelerle ilgili olduğunu, kimin hazırladığı, hazırlanan dili kayıtlarına geçerler.
Bu sebeple önemli olan meta taglarını göreceğiz.
Meta tagları
HTML Kodları
Html kodları "<" ve ">" arasına yazılıp "" ve ">" biterler..
Örnekler
// Html sayfası olduğunu belirttik.
// Bu kısım sayfa yapısını belirtir. Sayfanın renkleri, başlığı vb. burada belirtilir.
// Yeni paragraf açtık. Merhaba HTML sayfası. KALIN ITALIK Kalın ve italik// Hem kalın hem de italik bir yazı.
// Paragrafı kapattık. // Sayfayı kapatma



Msn İndir
