HTML'de Yazı Tagları-1

Herkese Merhaba,
Bir önceki dersimizde basit bir web sitesindeki temel tagların nasıl olacağını incelemiştik. (bkz:Basit Bir Web Sitesinde Taglar) Bu dersimizde ise web sayfamızdaki yazılarda değişiklikler yapıp onları renklendirme,büyütme,küçültme,yazı karakterini belirleme vs. gibi özellikleri verebilmek için gerekli olan tagları öğreneceğiz.Bunun için bu bölümü dikkatle okumalısınız.

Yazının kalın gösterilmesini nasıl sağlarım?Yazının kalın yazılması ile ilgili resimli bir alıştırmayı "Tag Nedi?Ne Amaçla Kullanılır?" adlı dersimizde yapmıştık onun için üzerinden hızlı geçeceğim.(bkz:Tag Nedir?Ne Amaçla Kullanılır?)Adı geçen desimizde de belirttiğimiz üzere web sayfasında okuyucunun görmesini istediğimiz yazının başına ve sonuna aşağıdaki resimde gösterilen değişikleri yaptığımızda yazımız kalın görünecektir.

Şimdi masaüstümüzde bir klasör açalım ve klasörümüze 'htmlderslerim' adını verelim.Ardından Not Defterin'de ki sayfamızı Dosya>Farklı kaydet senmesinden istediğimiz bir ismi vererek yeni açmış olduğumuz 'htmlderslerim' isimli klasöre kaydedelim.Daha sonra 'htmlderslerim' isimli klasörden kaydetmiş olduğumuz dosyayı çift tıklayarak açtığımızda yazdığımız yazıların kalın olarak göründüğünü ve taglar içine yazdığımız komutların görünmediğini göreceksiniz.

Yukarıda da görüldüğü gibi yazdığımız yazı kalın olarak göründü.Artık html'de yazılarımızı kalınlaştırmanın nasıl yapılacağını öğrendiğimizi düşünüyorum.

Şimdi de sayfamızda yer alan kelimeleri nasıl italik yapacağımızı öğreneceğiz.Yazılarımızı italik yapmak için tagını kullanmanız gerekiyor.Bunun için NotDefterine az önce yazmış olduğumuz satırın sonuna gidip Enter'a basalım ve aşağıdaki ifadeyi yazalım.Artık HTML'nin mantığını az çok anladğınızı düşünüyorumçEğer sayfadaki öğelerin görünümünü değiştirmek istiyorsanız, değiştireceğiniz kısmın başına ve sonuna ilgili tagı yazmanız yeterli.Sondaki tagı yazarken dikkat etmeniz gereken yer, "<" işretinden sonra "/" işretini koymayı unutmamaktır.Gördüğünüz gibi daha evvel kalın yazma tagını vererek yazdığımız kısım kalın ve hemen ardından italik yazmatagını verdiğimiz kısım da italik olarak tarayıcımızda görüntülendi.

Bir ifadenin altı çizili bir şekilde görünmesini istiyorsanız yapmanız gereken kelimenin başına ve sonuna "<" ve ">" işaretleri arasına 'u' yazmaktır.Biraz önce yaptığımız işlemin aynısını şimdi alt çizgi tagı için yapalım; komutumuz aşağıdaki gibi olsun:

Şimdi yukarıda yaptığımız şekilde kaydediğ aynı şekilde tarayıcımız da açalım sayfamızı.

Artık yazılarımıza nasıl alt çizgi koyacağımızı da öğrendik."Bu kadar derste ne kadar az yol geldik, daha ancak yazıların altına çizgi çizebilmeyi öğrendik" diye düşünmeyin sakın.Buralar aslında hızla anlatıp geçebileceğim yerlerdi fakat eğer baştan itibaren buralara kadar olan kısmı iyi anlarsanız html'nin mantığını kaptınız demektir ve gerisini anlamanız çok daha kolay olacaktır emin olun.Yazı tagları ile ilgili dersimizin birinci kısmı bu kadar.Bu dersimizin 2. kısmında yazılarımıza karakterler vermeyi, onları renklendirmeyi, sayfa içindeki yerlerini ayarlamayı öğreneceğiz.

Tekrar görüşmek dileğiyle.

ÖNEMLİ NOT: LÜTFEN BU SİTEDE YAYINLANAN MAKALELERDEN KAYNAK GÖSTERMEKSİZİN ALINTI YAPMAYINIZ.

Basit Bir Web Sayfasında Taglar

Bir önceki dersimizde tagın ne olduğunu ve ne amaçla kullanıldığını resimli alıştırmalarla size göstermeye çalışmıştık (bkz: Tag nedir? Ne Amaçla Kullanılır?). Bu dersimizde bir önceki dersimizde mantığını kavratmaya çalıştığımız tagların basit bir web sitesinde neler olduğunu size göstereceğim.

Lafı çok uzatmadan konuya giriyorum.Web tasarımına başlamak için sabırsızlandığınızı biliyorum.Ama biraz daha sabretmeniz gerek.Bu derslerde vereceklerimizi iyi anlamalısınız ki sağlam temeller üzerine kurulmuş olsun bilgileriniz.

Basit bir web sayfası şu kodlardan oluşur;


Yukarıda vermiş olduğumuz kodlar basit bir html sayfasına aittir. Şimdi daha iyi anlaşılabilmesi için beraber bir alıştırma yapalım.Bir Not Pad sayfası açıp içine yukardaki komutları yazalım.Yukarıda da belirtildiği üzere "body" tagları arasına web sayfasında görüntülenmesini istediklerimizi yazacağımızı öğrendik.Öyleyse "body" tagları arasına ben 'bu bir denemedir' yazacağım; siz herhangi başka bir şey de yazabilirsiniz. "Sayfa Başlığı Buraya" yazan kısma da istediğiniz herhangi bir başlık yazabilirsiniz.Ben oraya sadece "Başlık" yazacağım.


Yukarıda ki kodları Not Pad'de açılan sayfamıza yazıp herhangi bir isimle .htm veya .html uzantılı oalrak kaydettikten sonra açtığımızda açılan sayfada sitenin browserın üst kısmında yazan başlığının yazdığım şekilde 'Başlık' olarak yazıldığını ve 'body' taglarının arasında yazılan yazının ise görüntülendiğini görmektesiniz.

Evet bu dersimizde de basit bir web sayfasında bulunan temel tagları gördük.Umarım verdiğimiz bilgiler ışında yaptığımız örneklerin faydası olmuştur.Bir sonraki dersimizde yazı taglarını inceleyeceğiz.

Afiyette kalmanız dileğiyle.

ÖNEMLİ NOT: LÜTFEN BU WEB SİTESİNDE YAYINLANAN MAKALELERDEN KAYNAK GÖSTEMEKSİZİN ALINTI YAPMAYINIZ.

Tag Nedir? Ne Amaçla Kullanılır?

HTML dilinin ne olduğunu ve mantığını daha önceki yazımız olan 'Web'e Giriş: HTML Mantığını Kavramak' isimli makalemizde anlatmaya çalışmıştık.Şimdi ise sıra HTML de kullanılan taglar hakkında konuşmaya geldi.

HTML, daha evvel de belirttiğimiz üzere bir dizi komuttan oluşmaktadır.Bu kodların herbirine tag denir. İsmini yukarıda belirttiğimiz makalemizde örneğini yaptığımız (anlatacağımız konuyu iyi kavrayabilmeniz için yukarıda adı geçen makaleyi şiddetle okumanızı tavsiye ediyorum) alıştırmada Not Pad'a yazdığımız yazıların .htm veya .html uzantılı olarak kaydettiğimizde web browser da görüntülendiğini görmüştük.İşte siz bir webmaster olarak web sitesi tasarlarken elbette ki bu yazdığınız yazıları düzenlemek, renklendirmek, yazı boyutunu ayarlamak gibi bir çok işlemi yapmak isteyeceksiniz.Bunları gerçekleştirebilmeniz için ise bir takım kodlara ihtiyacınız olacak.İşte ihtiyacınız olan bu kodlara tag denir(Kod dediğime bakıp korkmayın sakın, belki başka bir adı da vardır ben ilmiyorumdur.Öyle zor bir olay değil). Normal yazılardan ayrılması için, taglar "<" ve ">" işaretleri arasına yazılır.

Şimdi tag mantığını kavrayabilmeniz için hep beraber bir örnek yapalım:

HTML derleyicimizi açıyoruz. (Bu Dreamweaver,FrontPage veya NotPad olabilir.Ben buradaki örneğimi NotePad üzerinden yapacağım.Ancak adını verdiğimiz html derleyicilerden herhangi biri ile de bu işlemler aynı şekilde yapılabilir.) Açılan sayfaya "<" işaretini koyuyorum ve bilgisayara bir tag okuma emrini verceğimi söylüyorum.Mesela biz yazımızı kalın yazmak istiyoruz ve bunun için gerekli olan tagı okutacağız varsayalım.Öyleyse tagın içine kalın yazma kodu olan "b" harfini yazıyorum ve tagı kapatıyorum.Oluşan tagımız resimde görüldüğü gibi oluyor.

Ardından yazmak istediğimiz yazıyı yazıyoruz.Ben kalın yazılmasını istediğim sözcüğü "KALIN" olarak seçtim.Ardından da kalın yazılacak kısmın bittiğini bilgisayara bildirecek komutu vererek kalın yazılacak kısmı tamamlayacağım.

Sayfamıza yukarıda ki komutları yazdıktan sonra sayfamıza istediğimiz bir isim vererek .html veya .htm uzantılı bir şekilde kaydediyoruz.(Adı yukarıda geçen makalemizde .html uzantılı dosyalar oluşturulması konusuna ayrıntılı bir biçimde değinilmiştir.) Ardından kaydettiğimiz dosyayı çüft tıklayarak açtığımızda "KALIN" sözcüğünün koyu harflerle yazıldığını görmektesiniz.

Umarım yukarıda yaptığımız örnek tagların mantığının kavranması açısından faydalı olmuştur.Nasıl ki koyu yazmak için "b" tagını kullanıyorsak boşluk bırakmak, web sayfasının başlığını belirtmek, italik yazmak vs. gibi bir çok şeyin yapılmasını sağlayan bu taglardır.Taglar duruma göre değişir, bunları bulursunuz yazarsınız bunlar sorun değil. Önemli olan bu işin mantığını kavramanızdadır.Eğer bu kısmı anladıysanız gerisi çorap söküğü gibi gelecektir.Umarım yukarıdaki bilgiler de tagın ne olduğunuzu anlamanızı sağlamıştır.

Afiyette kalmanız dileğiyle...

ÖNEMLİ NOT: LÜTFEN BU SİTEDE YAYINLANAN MAKALELERDEN KAYNAK GÖSTERMEKSİZİN ALINTI YAPMAYINIZ.

Web'e Giriş: HTML Mantığını Kavramak

HTML, web sayfalarının browser'larda görüntülenmesini sağlayan dildir.Proglamlama dili olduğu söylenemez.Öğrenilmesi kolaydır.Çünkü PHP,ASP.NET,DELPHİ,Visual Basic,C,C++ gibi proglamlama dillerindeki programlama mantığına sahip değildir.

HTML, Hyper Text Markup Language (Hareketli Metin İşaretleme Dili) deyiminin kısaltılmasıdır. HTML dosyalarının aktarımı için HTTP (Hyper Text Transfer Protocol) kullanılır.HTML dosyaları sunucu bilgisayarın sabit diskinde .html ya da .htm uzantısı ile saklanır.Bir siteye girdiğimiz zaman bize görüntülenen ilk sayfa index.html, index.htm, index.asp, index.php ya da default.htm dosyalarından birisidir.

Şimdi HTML mantığını daha kolay anlayabilmeniz için sizinle birlikte bir örnek yapalım.HTML sayfalarının bir diğer özelliği özel bir editör programına (derleyici) ihtiyaç duymamanızdır.HTML sayfaları not pad kullanılarak bile yapılabilir.Öyleyse şimdi Not Pad'i açalım ve içine 'Bu benim ilk web sitesi deneyimim' yazalım.

Ardından üst menüden 'Dosya' butonunu ve oradan da 'Farklı Kaydet'i tıklayalım.Açılan pencereden dosyayı nereye kaydedeceğimizi seçtikten sonra dosya adına 'index.html' yazıp kaydedelim. Ardından sayfayı kaydettiğimiz yere gidip index.html sayfasını çift tıklıyoruz.Karşımıza web browserımızda açılan aşağıdaki gibi bir sayfa geliyor.

Bu örneği sizlerin hmtl mantığını daha kolay anlayabilmenizi sağlamak için yaptım.Elbette ki html dili veya web sitesi yapımı bu akdar kolay değil.Ancak gözünüzü korkutmuş da olmak istemiyorum.Kimse ana rahminde öğrenmiyor bu işi ve emin olun benim gibi bir çok kişi de kursa falan gitmeden kendi çabalarıyla öğreniyor.

Umarım yukarıda yaptığımız örnek de html mantığını biraz olsun anlamışsınızdır.Bundan sonraki yazılarımızda sizlerle html hakkında daha çok örnek çözecek ve html hakkında daha çok şey öğreneceğiz.Şimdilik hoşça kalın.

ÖNEMLİ NOT: LÜTFEN BU SİTEDE YAYINLANAN MAKALELERDEN KAYNAK GÖSTERMEKSİZİN ALINTI YAPMAYINIZ.

İyi Bir Web Sitesinin Kriterleri?

Bu yazımın öncelikle webmaster adayları için çok faydalı olacağı inancındayım.Çünkü bu işe yeni başlamış olan insanların en büyük sorunu işe nereden başlayacağını bilmemesi ve henüz yeteri kadar bilgi ve tecrübeye ulaşamamış olduğu için hazırladıkları web sitelerinde nelere dikkat edeceklarini bilmemelerinden bir çok sorunla karşı karşıya olmalarıdır.Bu yazacaklarımın bir bağlayıcılığı olmamakla birlikte tavsiye niteliğindedir.Ancak tabiki yaşanmış olan tecrübelere uymak ve onlara göre hareket etmek sizin yararınıza olcaktır.Lafı burda kesip konuya giriyorum.İşte kriteler:

• İlk olarak sitenin ismi ve başlığının birbiriyle uyumlu olmasına dikkat etmelisiniz.Çünkü, sayfanıza en büyük ziyaretçi kitlesi arama motorlarından(google,aol,msn,bing vs.) gelecektir.Unutmayın isterseniz dünyadaki en güzel şeyi yapmış olun eğer onu pazarlayamazsanız yaptığınız şeyin hiçbir değeri yoktur.İşte bunun sanal alemde ki en güzel ve en etkili yolu arama motorlarıdır.Çükü arama motorları internette ki en kullanıcıların bir şey ararken tercih ettikleri ilk yerdir.Arama motorlarında siteniz ne kadar çok ilk sırada çıkarsa sizde o kadar çok ziyaretçi kazanırsız.Arama motorlarının sizin internet sitenizi ilk sıralarda çıkarmasının ilk şartı sitenizi sevmesidir.Sizin sitenizi onlara sevdirmenin ilk kuralı ise sitenin ismi ve başlığının birbiriyle uygun olmasıdır.(Arama motorlarında sitenin üst sıralarda çıkartılması günümüzde uzmanlık isteyen bir konu durumuna gelmiş olup bu olaya kısaca SEO (Search Engine Optimization yani Türkçe anlamıylaArama Motorları Optimizasyonu) denmektedir.İlerleyen zamanlarda bu konuya da ayrıntılı değinmeye çalışacağız). Sitenizin isminin,başlığının ve içeriğinin birbiriyle uyumlu olmasının bir diğer önemli sebebi ise ziyaretçinin başlığına veya ismine aldanarak geldiği sitenin içeriğinin farklı olması durumunda o siteye bir daha gelmeme ihtimalinin yüksek olmasıdır.Bu konu da empati yapmak en doğrusu olacaktır.Kendinizin bir siteye girdiğini ve sitenin başlığını gördüğünüzde aradığınız şeyi tam buldum derken içeriğin apayrı bir şey olduğunu düşünün bir daha o siteye girmeyi düşünür müydünüz?
• Bir sayfa da animasyon kullanmak sayfayı zengin içerikli ve göze hitap etmesi bakımından hoş kılabilir.Ancak burda dikkat etmeniz gereken en önemli nokta animasyon işini fazla abartmamanızdır.Çünkü, fazla kullanılan animasyonlar ziyaretçinin ilgisini belli bir süre sonra dağıtır.
• Sayfanızın açılış hızı çok önemli bir kriterdir.Çünkü yavaş açılan sayfalar ziyaretçileri beklemekten sıkabilir ve bu da ziyaretçilerinizin kaçmasına ve bir daha geri gelmemesine sebep olabilir.Size bu konudaki tavsiyem resimlerin boyutunu en fazla 20kb yapmanızdır.Daha büyük boyutlu resimler sayfanın yüklenme süresini uzatır.
• Bir ziyaretçinin gözünde internet sitenizi güzel kılacak en önemli şeylerden biri de ziyaretçilerin istedikleri yere kolayca ulaşmalarını sağlamanızdır.Linklerinizi,bağlantı verilecek sayfaları ve ileri-geri butonlarını doğru seçmelisiniz.
• Pop-up menülerinizin sayısı fazla olmasın.Ard arda gelen ve insanın gözüne girecekmiş gibi açılan sayfalar sıkıntı yaratabilir.
• Sitenizde kullanacağınız temanın renk uyumuna dikkat edin.İnsanın gözünü yoracak çırtlak ve mat renklerden uzak durun.Zemin rengi özellikle ayrı bir önem arz ediyor.Zemin rengi konusunda tercihinizin genellikle mat renklerde olmasını tavsiye ediyorum.
• Geleceği parlak ve ziyaretçi çeken siteler en çok güncellenen sitelerdir.Bunu unutmayın.Güncellenmeyen site bir defalığına ziyaretçi çeker, ikinci defa ziyaretçi gelmez.Siteniz dinamik bir içeriğe sahip olsun.
• Web sitenizin adresi kısa olsun.Uzun olan adresler akılda kalıcı olmaz.Web site adreslerine domain denmektedir.Domainlerin ideal olanı kısa,akılda kalıcı ve sık kullanılan sözcüklerden oluşanıdır.Bu durum SEO konusunda da çok büyük bir önem arz etmektedir.Arama motorları bu konuda hassastır.Tabiki asıl kullanıcı ve hedef kitle olan insan beyni de hassastır.Ona hitap edecek bir domain adresi bulun.
• Sitenizin alt yapısı da bir diğer önemli bir noktadır.Esas olarak alt yapıyı ziyaretçi görmeyecektir.Ancak bir webmaster siteyi oluştururken heran güncellemeye açık veya sitedeki olası problemleri çözecek veya sitede şablonu üzerinde her an bir değişikliği rahatça değiştirebilecek şekilde o siteyi kurmalıdır.Bu da resimleri,alt bölümleri ve kategorileri klasörlerle ayrı olarak oluşturmanızdan geçer.Sitenizdeki herşey heran herşeye tekrar ulaşıp gerekli işlemleri yapabileceğiniz şekilde düzenlenmiş olsun.Ciddi tavsiyemdir.;)

Yukarda size iyi bir web sitesinin kriterlerini gücüm yettiğince anlatmaya çalıştım.Bir yanlışım veya eksiğim varsa affola.Elbette benim şuan aklıma gelmeyen başka kriterler de vardır.Aklıma geldikçe ve yeri geldikçe bunları sizlerle paylaşmaya devam edeceğim.

ÖNEMLİ NOT: LÜTFEN KAYNAK GÖSTERMEKSİZİN BU SİTEDE YAYINLANAN MAKALELERDEN ALINTI YAPMAYINIZ.