2-Hafta Temel İşlemler * Html Komutlarının Yapısı * Açıklamalar * Htm Sayfasının Oluşturulması * Temel Html Komutları * Html Sayfalarının Düzenlenmesi * Html Sayfalarının İncelenmesi
Html Komutlarının Yapısı ve Yazım Kuralları *Html komutları temel olarak bir açılış tagı, bir kapanış tagı ve içerikten oluşur. Her açılış tagı mutlaka kapatılmalıdır. Aksi takdirde komut düzgün çalışmayabilir. Açılış ve kapanış tagı içinde kalan içerik komuttan etkilenir ve beklenen görevi yerine getirir. <p>Komut İçeriği</p> Açılış Tagı Kapanış Tagı
<p style=”değer”> Merhaba </p> Her html tagının kendine göre özellikleri vardır. Örneğin tagların «id» özelliği, ilgili taga bir isim verilmesini ve onun diğer taglardan ayırt edilmesini sağlar. Html taglarının «style» özelliği ise tagların görünümünü ve konumunu değiştirmeye yarar. Dikkat ederseniz özelliğe atanan değer tırnak içinde yazılır. Bu bilgiler ışığında tagların özellikleri de eklenince, bir önceki sayfada bulunan html komutunun yapısı aşağıdaki gibi olur. <p style=”değer”> Merhaba </p> Açılış Tagı Kapanış Tagı
<head> </head> <body> </body> </html> Html dilinde bazı komutların kapanış tagı yoktur. Örneğin <br/> komutu paragrafın alt satırdan devam etmesini sağlar ve kapanış tagı yoktur. Bu Komut içinde bulunan ”/” işareti tagın kapanmasını sağlar. Html komutları büyük veya küçük harfle yazılabilir fakat HTML5 standartına göre HTML komutları küçük harfle yazılmalıdır. HTML Komutları yan yana veya alt alta yazılabilir. Örneğin, aşağıda gördüğünüz kodlar aynı işi yapar; okunabilirliliği arttırdığı için alt alta yazmak tercih edilebilir. <html><head></head><body></body></html> <html> <head> </head> <body> </body> </html>
<!-- açıklama alanı --> Açıklamalar Eğer oluşturduğunuz web sayfası yada kodlarla ilgili bazı açılamalar yazmak istiyorsanız aşağıdaki tagı kullanabilirsiniz; Açıkama tagı içine yazılan kodlar tarayıcılar tarafından dikkate alınmaz. Açıklamalar sadece tasarımcıya yönelik yazılan hatırlatma metinleridir. Eğer bir sayfada birden fazla kişi çalışıyorsa yada sayfada kritik öneme sahip ve kolayca unutulabilecek bazı kodlar yazıyorsanız açıklama yazmakta fayda vardır. Böylece hem siz hemde diğerleri sizin yazdığınız kodları kolayca anlayabilir. Açıklama satırları aylar yada yıllar önce yazdığınız ve belki de artık unuttuğunuz kodlar hakkında ipucu verir. Açıklama kodları sayesinde daha önce yazdığınız kodları hatırlayıp üzerinde daha kolay güncelleme yapabilirsiniz. <!-- açıklama alanı -->
HTML Sayfası Oluşturma & Kaydetme Html’in başarılı olmasının en büyük nedenlerinden biri basitliğidir. Ücretsiz, basit bir editör ve basit birkaç komutla kendi web sitenizi oluşturabilirsiniz. Html’in başarılı olmasının bir diğer sebebi ise basit bir tarayıcıya sahip olan tüm cihazlarda çalışabiliyor olmasıdır. Yaptığınız Html sayfaları cep telefonlarında, tabletlerde, bilgisayarlarda ve diğer akıllı bir çok cihazda sorunsuz çalışabilir. Bu başlık altında en temel komutlardan oluşan bir HTML sayfası yapacağız ve sayfamızı tarayıcıda test edeceğiz. Web sayfalarında mutlaka bulunması gereken komutlardan biri <html> tagıdır. Her HTML sayfası <html> tagı ile başlayıp </html> tagı ile bitmelidir. HTML Sayfaları iki temel kısımdan oluşur; her HTML sayfasında bir başlık (head) bir gövde (body) kısmı bulunur. Başlık kısmı tarayıcılara ve arama motorlarına yönelik bazı komutları barındırırken, gövde kısmı ziyaretçilere yönelik komutları ve içeriği barındırır. Örnek olarak ; <html> <head> </head> <body> <p>Merhaba Dünya!</p> </body> </html>
Sayfa başlığı eklenmiş örnek kod; Oluşturduğunuz HTML sayfasının bir başlığa (title) sahip olmasını istiyorsanız <head> tagının içinde <title> tagını kullanmalısınız. <title> tagı arama motorları tarafından veritabanına eklendiği ve arama sonuçlarında görüntülendiği için çok önemlidir. Mutlaka her sayfaya bulundurduğu içerik ve ürünlerle ilgili başlık bilgisi koyulmalıdır. Böylece, sayfa içinde bulunan içerik ve ürünler arama sonuçlarında daha yukarıda listenelecektir. Konu ile ilgili makale için bu linki ziyaret edebilirsiniz; http://tasarimgalerisi.com/seo-uyumlu-site-basligi-nasil-olmali/ Sayfa başlığı eklenmiş örnek kod; SIRA SİZDE! 1- Masaüstünde “sağ tıklayın” ve “yeni” deyin 2- Not defterini seçin 3- Oluşturduğunuz not defterini açın ve soldaki kutuda bulunan kodları yazın. 4- “Dosya menüsü”nden “farklı kaydet” seçeneğini seçin 5- Dosyanıza isim verin. Mesela merhaba.html 6- “Kayıt türü” yazan yeri “tüm dosyalar” olarak seçin 7- Kaydedin. Masaüstünde (örnekteki isim için) merhaba.html diye bir internet sayfası oluşacaktır. <html> <head> <title>Sayfa Başlığı</title> </head> <body> <p>Merhaba Dünya!</p> </body> </html>
Temel HTML Komutları KOMUT AÇIKLAMA <!doctype html> Sayfanın HTML5 ile tasarlandığını belirtir. Sayfanın en başında bulunur. <html> </html> Sayfanın başlangıcı ve sonunu belirtir. <head> </head> Sunucu ve arama motorları ile ilgili bilgileri içerir. <body> </body> Ziyaretçiye gösterilecek içeriği barındırır. <title> </title> Sayfa başlığı. <html lang= ”tr”> Sayfanın dilini belirtir. Türkçe sayfalarda tr kullanılırken, ingilizce sayfalarda en kullanılır. <html> tagının bir özelliğidir. Yani, ayrı bir komut değildir. <meta charset= ”utf-8”> Türkçe karakterlerin düzgün görünmesini sağlar ve <head> tagının içine yazılmalıdır. <hx> </hx> İçeriklerin başlık bilgisini barındırır. Gazetelerin manşetleri gibi, başlık taglarıda web sayfalarındaki metinlerin manşetleridir. Okuyucuların dikkatini çekmek için kullanılır. <p> </p> Paragraf <br/> Aynı paragrafın alt satırına geçmenizi sağlar.
Yukarıdaki bilgilerin ışığında, iletişim bilgilerimizi barındıran web sayfasını hazırlıyalım. <!-- Sitenin İletişim Sayfası --> <!doctype html> <html lang="tr"> <head> <title>Firmamızın İletişim Bilgileri</title> <meta charset="utf-8" /> </head> <body> <h2>İletişim Bilgileri</h2> <p>Tasarım Galerisi Şirketi<br /> Çiçek Sokak No:61 Ümraniye/İstanbul<br /> Tel:123456789 Cep:0530123456<br /> http://www.tasarimgalerisi.com<br /> email:info@tasarimgalerisi.com</p> </body> </html> Kodları Yorumlayınız
<h1> <h2> <h3> <h4> <h5> <h6> Etiketleri H tagı, aslında headings kelimesinin kısaltmasıdır. Kod yazarken h olarak yazılır. Bu taglar, herhangi bir web sayfasında metini büyütmede kullanılır. Genellikle sayfalardaki başlıklar bu kodlar yardımcılığıyla yazılır. Hem daha şık görünür, hem de Google tarafından daha çok sevildiği bilinir. Bu h tagları, 1 – 6 rakamları aralığında yazılır. 7 ve üstü kullanılmaz. Ayrıca bu taglarda h1 tagı en büyük, h6 tagı en küçük puntolu yazıdır. Google, sayfaları indexlerken h1 tagını, h6 tagından daha çok önem verir. Örnek Kullanımı; <!-- Sitenin İletişim Sayfası --> <!doctype html> <html lang="tr"> <head> <title>Firmamızın İletişim Bilgileri</title> <meta charset="utf-8" /> </head> <body> <h1>Başlık Tagı 1</h1> <h2>Başlık Tagı 2</h2> <h3>Başlık Tagı 3</h3> <h4>Başlık Tagı 4</h4> <h5>Başlık Tagı 5</h5> <h6>Başlık Tagı 6</h6> </body> </html>
Web Sayfa Kaynak Kodlarının İncelenmesi İnternette gezerken karşımıza bir çok ilgi çekici siteye yada sayfaya rastlarız. Eğer bu sayfaların kodlarını inceleyip neler yapıldığını görmek istersek ilgili sayfaya sağ tıklayıp ”Sayfa Kaynağını Görüntüle” komutunu çalıştırabiliriz. Burada dikkat etmeniz gereken konu, bir resim veya flash animasyonu üzerine tıklamamaktır. Aksi takdirde kaynak kodlarına ulaşamazsınız. Örneğin www.tasarimgalerisi.com web sitesine girdikten sonra sayfa kaynağını görüntüle dedikten sonra aşağıdaki kodları görürsünüz. Sayfanın kodları açıldığında sadece HTML kodlarını değil, sayfa içinde kullanılan JavaScript ve diğer kodları da görebilirsiniz. İlgilendiğiniz sayfayı dahada yakından incelemek isterseniz bilgisayarınıza kaydedebilirsiniz. Sayfanın uygun bir yerinde ctrl+s kısayolunu kullanarak sayfayı kendi bilgisayarınıza kaydedebilirsiniz. Daha sonra bu sayfayı bir editör ile inceleyebilirsiniz. Sayfa ile beraber birde klasör gelmektedir. Bu klasörün içinde sayfa ile ilişkili resim CSS Javascript veya jquery gibi dosyalar bulunmaktadır.
Dosya Adları Dosyaların adında sadece küçük harf kullanın. Örneğin dosya adını Anasayfa yerine anasayfa yaparsanız hem daha hızlı yazarsınız hemde link verirken daha rahat edersiniz. Türkçe karakterler (ü,ö,ı,ş,ğ) kullanmayın. Sayfalara isim verirken, sayfanın yapacağı işe uygun isimler verin. Örneğin, eğer iletişim bilgilerini içeren bir sayfa oluşturacaksanız iletisim.html gibi bir dosya adı kullanabilirsiniz. Eğer sayfanıza birden falz kelimeden oluşan bir dosya adı verecekseniz kelimeler arasına tire (-) karakteri koyun. İçerisinde boşluk karakteri olan dosya adlarını kesinlikle kullanmayın. Örneğin iletisim bilgileri.html şeklinde bir dosya adı kullanmayın. İki kelime arasında alt çizgi (_) kullanabilirsiniz ama arama motorları (-) karakterini daha çok sever.