Samdomanld
Baron
HTML Kodları Nereye Yazılır ve Nasıl Çalıştırılır?
Nereye yazılacağı konusunda pek çok alternatif vardır. Linux ve Windows kullanıcıları için ayrı ayrı cevaplayacağım.
Linux işletim sistemlerinden herhangi birini kullananlar için benim önerim Geany'dir. Geany'i indirmek için komut satırına apt-get install geany scite yazmanız yeterlidir. Tabi ki root değilseniz başına sudo yazacaksınız. Daha sonra sorulan soruya EVET, yani Y'yi seçerek indirmeye başlayabilirsiniz. Microsoft Windows kullanıcıları için ise Notepad++ gayet ideal bir programdır. bu linke girip en son sürümü indirebilirsiniz.
Tabi ki bu programlar başlangıç seviyesi içindir. Aslında başlangıç seviyesi demeyelim de, profesional olarak bu işi yapmayanlar için ideal programlardır diyelim.
Eğer bu işte ciddiyseniz Adobe Dreamviewear kullanabilirsiniz.
Nasıl çalıştıracağımız konusuna gelecek olursak da, açtığımız dosyaları öncelikle bir klasöre sonu .html olacak şekilde kaydediyoruz. Örnek olarak index.html. Daha sonra yazdığımız kodların oluşturduğumuz HTML sayfasında görünmesi için CTRL-S veya FILE>SAVE yapıp kaydediyoruz. Şimdi oluşturduğumuz HTML sayfasına çift tıklayarak tasarımımıza göz atabiliriz. Eğer sürekli Alt-Tab yapmak istemiyorsanız F5 tuşuna basmanız da yeterli olur. F5 yaparsak yazdığımız kodları hem kaydeder, hem de HTML sayfasını açar.
Ön Bilgi
Biraz HTML'in sürümlerinden ve bu sürümleri nasıl kullanabileceğimizden bahsedelim. Bunları her yerde bulabilirsiniz ama buraya da yazmamam için bir sebep yok sanırım.
Sürümler:
Yanlış hatırlamıyorsam, tarihler bu şekildeydi. Son sürüm olan HTML5, diğer tüm sürümleri içinde barındırır. Yani eskilerinde kullandığınız her şeyi onda da kullanabilirsiniz. Fakat eski bir sürüm HTML5'in özelliklerini içinde barındırmayabilir.
Eski bir sürüm ile son sürümü nasıl kullanacağımız göstereceğim. Tabi ki bizim için önemli olan HTML5 fakat aradaki farkı anlayabilmeniz için gösteriyorum.
-
XHTML 1.0 sürümü'nü kullanabilmek için, Geany sayfasının (Windows için, üstte yazdığım gibi Notepad++) başına altta verdiğim kodu yazıyoruz.
Gördüğünüz gibi çok uzun. Bunu akılda tutmak aşırı zor olsa gerek. Bunun yerine HTML5 sürümünde bize çok daha pratik ve akılda kalıcı bir şey sunmuşlar. Bu kod ise şu:
Evet, bu kadar.
Peki ne işe yarıyor bu şeyler?
Şu işe yarıyor: Bildiğiniz üzere tarayıcılar sürekli güncelleniyor. Google Chrome olsun, Opera olsun, Safari, Firefox falan bir sürü tarayıcı var. Ve yaptığımız tasarımlar, bu tarayıcılara güncelleme gelince bozulabiliyor. Yani görüntü olarak bozulabiliyor. Bu yüzden HTML sürekli yeni sürümler çıkartıyor.
Yukarıda verdiğim <!DOCTYPE html> kodunu, her zaman sayfamızın başına yazıyoruz.
Başlangıç 2 Notu: Listeleme yapımında ul yerine yanlışlıkla list yazmışım. Sizlerin de düzeltmesi gerekiyor list yazan yerleri. Ayrıca title'ları da değiştirmeyi unutmuşuz. Onlara da bir el atalım.
Ön Bilgi, Başlangıç 1 ve Başlangıç 2 kısımlarıyla HTML hakkında az da olsa bilgilendik. Sonraki derslerde görüşmek üzere.
Nereye yazılacağı konusunda pek çok alternatif vardır. Linux ve Windows kullanıcıları için ayrı ayrı cevaplayacağım.
Linux işletim sistemlerinden herhangi birini kullananlar için benim önerim Geany'dir. Geany'i indirmek için komut satırına apt-get install geany scite yazmanız yeterlidir. Tabi ki root değilseniz başına sudo yazacaksınız. Daha sonra sorulan soruya EVET, yani Y'yi seçerek indirmeye başlayabilirsiniz. Microsoft Windows kullanıcıları için ise Notepad++ gayet ideal bir programdır. bu linke girip en son sürümü indirebilirsiniz.
Tabi ki bu programlar başlangıç seviyesi içindir. Aslında başlangıç seviyesi demeyelim de, profesional olarak bu işi yapmayanlar için ideal programlardır diyelim.
Eğer bu işte ciddiyseniz Adobe Dreamviewear kullanabilirsiniz.Nasıl çalıştıracağımız konusuna gelecek olursak da, açtığımız dosyaları öncelikle bir klasöre sonu .html olacak şekilde kaydediyoruz. Örnek olarak index.html. Daha sonra yazdığımız kodların oluşturduğumuz HTML sayfasında görünmesi için CTRL-S veya FILE>SAVE yapıp kaydediyoruz. Şimdi oluşturduğumuz HTML sayfasına çift tıklayarak tasarımımıza göz atabiliriz. Eğer sürekli Alt-Tab yapmak istemiyorsanız F5 tuşuna basmanız da yeterli olur. F5 yaparsak yazdığımız kodları hem kaydeder, hem de HTML sayfasını açar.
Ön Bilgi
Biraz HTML'in sürümlerinden ve bu sürümleri nasıl kullanabileceğimizden bahsedelim. Bunları her yerde bulabilirsiniz ama buraya da yazmamam için bir sebep yok sanırım.
Sürümler:
- HTML 1991
- HTML+ 1993
- HTML 2.0 1995
- HTML 3.2 1997
- HTML 4.0.1 1999
- XHTML 1.0 2000
- HTML5 2012
- XHTML5 2013
- HTML5 2014
Yanlış hatırlamıyorsam, tarihler bu şekildeydi. Son sürüm olan HTML5, diğer tüm sürümleri içinde barındırır. Yani eskilerinde kullandığınız her şeyi onda da kullanabilirsiniz. Fakat eski bir sürüm HTML5'in özelliklerini içinde barındırmayabilir.
Eski bir sürüm ile son sürümü nasıl kullanacağımız göstereceğim. Tabi ki bizim için önemli olan HTML5 fakat aradaki farkı anlayabilmeniz için gösteriyorum.
-
XHTML 1.0 sürümü'nü kullanabilmek için, Geany sayfasının (Windows için, üstte yazdığım gibi Notepad++) başına altta verdiğim kodu yazıyoruz.
Code:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>Gördüğünüz gibi çok uzun. Bunu akılda tutmak aşırı zor olsa gerek. Bunun yerine HTML5 sürümünde bize çok daha pratik ve akılda kalıcı bir şey sunmuşlar. Bu kod ise şu:
Code:
<!DOCTYPE html>Peki ne işe yarıyor bu şeyler?
Şu işe yarıyor: Bildiğiniz üzere tarayıcılar sürekli güncelleniyor. Google Chrome olsun, Opera olsun, Safari, Firefox falan bir sürü tarayıcı var. Ve yaptığımız tasarımlar, bu tarayıcılara güncelleme gelince bozulabiliyor. Yani görüntü olarak bozulabiliyor. Bu yüzden HTML sürekli yeni sürümler çıkartıyor.
Yukarıda verdiğim <!DOCTYPE html> kodunu, her zaman sayfamızın başına yazıyoruz.
Şimdi ufak ufak başlayalım... HTML'in bir iskelet yapısı vardır. Bunu hiç bir zaman unutmamız gerekiyor. HTML her zaman <HTML> kodu ile başlar, </HTML> kodu ile biter. Bunun dışında HTML'in arasına yazacağımız <head></head> ve <body></body> kodları vardır. Bu iki kodun arasına sayfanın içeriğini yazıyor. Mesela head kodlarının arasına yazdıklarımız sayfanın içinde görünmez. Bunlar daha çok sayfanın işlevini belirler. Mesela arama motorlarına ne yazınca bizim web sitemiz karşımıza gelecek? gibi soruları cevaplar.
Örnek bir iskelet:
Bunu yazıp çalıştırdığımızda, karşımıza bembeyaz, boş bir sayfa çıkacak. İlk olarak <head> için bazı etiketleri göstereceğim. Unutmamanız gereken en önemli etiketlerden biri <meta charset="UTF-8"> etiketidir. Bu, sayfamızdaki Türkçe karakterlerin düzgün görünmesini sağlayacaktır. Eğer bunu yazmazsak "İ,ı,ö,ç,ü,ğ,ş" gibi Türkçe karakterler yerine saçma sapan şeyler çıkar. Bu kodu <head></head> kodlarının arasına yazıyoruz. Son hali şöyle olmalıdır:
İkinci olarak ise, yine <head> kodları arasına yazacağımız <title></title> kodudur. Bu ise, Web sayfamızın en üst kısmında yazacak yazıyı belirler. Örnek olarak web sitemizin ana sayfasında şunun yazması gerekir:
Bunu yazıp çalıştırın ve tarayıcınızın en üst kısmına bakın. Ne olduğunu daha iyi anlayacaksınız.
Şimdilik <head> kısmı için bunları bilmemiz yeterli. İlerleyen derslerde arama motoruna ne yazacağımızda sitemizin çıkma olayını falan göstereceğim. Şimdi <body>, yani sayfanın içeriğini düzenlemeye geçelim.
Yazı yazmayı/paragraf oluşturmayı göstereceğim. Bunları ilerideki derslerde CSS ile düzenleyeceğiz tabi ki. Ama HTML'de düz olarak yazacağız. Yani HTML'de görünüşü düzenlemiyoruz. Eski sürümlerde öyleydi fakat çok uğraştırıyordu. İleride daha iyi anlayacaksınız ne demek istediğimi... Şimdi <body> kodlarının arasına
Yazalım. Bunları yazıp çalıştırınca yukarıdan aşağıya doğru küçülen, kalın bir yazı ile karşılaşıyoruz. Bunları başlıklar için kullanıyoruz. Genelde <h1> ve <h2> kullanılır. Yani h1 ana başlık, h2 alt başlık şeklinde olur.
Sıra paragrafa geldi... Bunun için ise <p></p> kodunu kullanıyoruz. Örnek olarak bir şey vermek gerekirse aşağıdaki şekilde yapılabilir.
Python veya C kullananlar anlamıştır herhalde. Biraz programlama başlangıcı gibi oldu. Şimdi yazdığımız bu kodları birleştirelim.
Bu öğrendiğimiz bilgileri kullanarak düz bir metin sayfası oluşturabiliyoruzdur herhalde. Biraz da göresllik yani resim ekleyelim. Ben bu resmi kullandım. Siz de istediğiniz bir resmi kullanabilirsiniz. Resim eklemek için kullandığımız kod tam olarak şudur:
Tek tek açıklayalım bu kodların işlevini. <img kodu, eklediğimiz şeyin bir resim olduğunu bildiriyor. src=" " kodu ise source yani kaynak belirttiğimiz kod. Bu kısma istersek bir resmin internet adresini (yani http://images6.fanpop.com/image/photos/38200000/Game-of-Thrones-banner-harleyskywalker-38285704-1600-200.jpg) istersek de resmi indirip bulunduğu dizini yazabiliriz (resimler/banner.jpg). Bu kısımda kullanılan özellikle resmi indirip dizinini yazmak oluyor. Konuyu daha fazla açmak gerekirse index.html adındaki dosyamız neredeyse dizini o şekilde başlatıyoruz. Mesela resmimiz index.html dosyasıyla aynı dizinde. Bunun için direk resim.uzantısı şeklinde yazıyoruz. Öyle değil de resmimiz index.html dosyasının klasörünün içinde bulunan resimler klasöründe ise resimler/resim.uzantısı şeklinde yazıyoruz. index.html dosyasının bir önceki dosyasında ise ../resim.uzantısı yazıyoruz. Anladınız sanırım.
alt=" " kodu ise herhangi bir arama motorunda görsel/resim seçeneğini seçip arama yaptığımızda karşımıza eklediğimiz resmin çıkmasını sağlıyor. Örnek olarak alt="game of thrones, got, got banner, game of thrones banner". Örnekteki gibi kelimeleri veya cümleleri virgül ile ayırıyoruz. Bu kısımda ne yazarlarsa yazsınlar benim sitemdeki resim çıksın deyip de aklınıza gelen bütün kelimeleri yazmaya kalkmayın. Arama motorları o kadar çok kelime görünce resmi tehtit olarak algılıyor ve resminizi sonuçlara hiç çıkarmıyor. Cüzi bir miktarda kelime yazmalısınız.
Açıklamaların ardından img kodunu anlamışsınızdır herhalde. Örnek bir img kodu yazayım:
bu kodu nereye ekleyeceğinizi biliyorsunuz herhalde. Evet, body'nin arasına ekleyeceğiz.
Not: IMG kodununun sonuna sakın </img> yazıp da kodu kapatmaya çalışmayın. Çünkü img kodu kapatılmaz. Üstteki örnekte verdiğim gibi yazmanız yeterlidir.
Örnek bir iskelet:
Code:
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>Bunu yazıp çalıştırdığımızda, karşımıza bembeyaz, boş bir sayfa çıkacak. İlk olarak <head> için bazı etiketleri göstereceğim. Unutmamanız gereken en önemli etiketlerden biri <meta charset="UTF-8"> etiketidir. Bu, sayfamızdaki Türkçe karakterlerin düzgün görünmesini sağlayacaktır. Eğer bunu yazmazsak "İ,ı,ö,ç,ü,ğ,ş" gibi Türkçe karakterler yerine saçma sapan şeyler çıkar. Bu kodu <head></head> kodlarının arasına yazıyoruz. Son hali şöyle olmalıdır:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body></body>
</html>İkinci olarak ise, yine <head> kodları arasına yazacağımız <title></title> kodudur. Bu ise, Web sayfamızın en üst kısmında yazacak yazıyı belirler. Örnek olarak web sitemizin ana sayfasında şunun yazması gerekir:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ana Sayfa</title>
</head>
<body></body>
</html>Şimdilik <head> kısmı için bunları bilmemiz yeterli. İlerleyen derslerde arama motoruna ne yazacağımızda sitemizin çıkma olayını falan göstereceğim. Şimdi <body>, yani sayfanın içeriğini düzenlemeye geçelim.
Yazı yazmayı/paragraf oluşturmayı göstereceğim. Bunları ilerideki derslerde CSS ile düzenleyeceğiz tabi ki. Ama HTML'de düz olarak yazacağız. Yani HTML'de görünüşü düzenlemiyoruz. Eski sürümlerde öyleydi fakat çok uğraştırıyordu. İleride daha iyi anlayacaksınız ne demek istediğimi... Şimdi <body> kodlarının arasına
Code:
<h1>Deneme Başlık</h1>
<h2>Deneme Başlık</h2>
<h3>Deneme Başlık</h3>
<h4>Deneme Başlık</h4>
<h5>Deneme Başlık</h5>Sıra paragrafa geldi... Bunun için ise <p></p> kodunu kullanıyoruz. Örnek olarak bir şey vermek gerekirse aşağıdaki şekilde yapılabilir.
Code:
<p>Merhaba Dünya!</p>
Code:
<!DOCTYPE html>
<html>
<head>
<title>Ana Sayfa</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Deneme Başlık</h1>
<p>Merhaba Dünya!</p>
</body>
</html>Bu öğrendiğimiz bilgileri kullanarak düz bir metin sayfası oluşturabiliyoruzdur herhalde. Biraz da göresllik yani resim ekleyelim. Ben bu resmi kullandım. Siz de istediğiniz bir resmi kullanabilirsiniz. Resim eklemek için kullandığımız kod tam olarak şudur:
Code:
<img src="" alt="">alt=" " kodu ise herhangi bir arama motorunda görsel/resim seçeneğini seçip arama yaptığımızda karşımıza eklediğimiz resmin çıkmasını sağlıyor. Örnek olarak alt="game of thrones, got, got banner, game of thrones banner". Örnekteki gibi kelimeleri veya cümleleri virgül ile ayırıyoruz. Bu kısımda ne yazarlarsa yazsınlar benim sitemdeki resim çıksın deyip de aklınıza gelen bütün kelimeleri yazmaya kalkmayın.
Arama motorları o kadar çok kelime görünce resmi tehtit olarak algılıyor ve resminizi sonuçlara hiç çıkarmıyor. Cüzi bir miktarda kelime yazmalısınız. Açıklamaların ardından img kodunu anlamışsınızdır herhalde. Örnek bir img kodu yazayım:
Code:
<img src="resimler/banner.jpg" alt="en güzel banner, banner, banner resmi">Not: IMG kodununun sonuna sakın </img> yazıp da kodu kapatmaya çalışmayın. Çünkü img kodu kapatılmaz. Üstteki örnekte verdiğim gibi yazmanız yeterlidir.
Tekrar merhaba. Başlangıç 1'de ufak bir giriş yapmıştık. Bu derste ise yazıya link vermeyi ve listeleme yapmayı göstereceğim. Hadi başlayalım.
İlk olarak kendime şöyle bir şey hazırladım. Başlangıç 1 dersini okuduysanız bunu rahatlıkla yapabiliyor olmanız gerekiyor.
Şimdi yukarıdaki örneğe menü ekleyeceğiz. Yani Ana Sayfa, Hakkımızda, İletişim gibi linke tıklayınca o sayfaya giden statik bir site olacak. Unutmayın menü yapımında her zaman listeleme kullanılır. Listeleme ise SMF forumu da olmak üzere bir çok forumdaki liste kodları ile aynıdır. Yani şöyle:
Gördüğünüz gibi kodlar tamamiyle bu forumun liste kodları ile aynı. Tek fark [ parantezi yerine <> gibi parantezlerin kullanılması. Bu konu hakkında; düzenli ve düzensiz listeler var. Düzensiz listede sayı yerine nokta kullanılır. Düzenli listede ise 1, 2, 3 ... diye her [.li] kodlarında sayılar çıkar. Biz genel olarak yukarıdaki kodları kullanacağız. Şimdi yukarıdaki liste kodlarının bannerımızın bir altına yapıştıralım. Kodlarımız bu şekilde olmalı:
Sıra bu listeye link vermeye geldi. Link vermek için <li> kodundan sonra <a href="xx.html"> kodunu yazıyoruz. Buradaki xx ile klasörümüzdeki diğer sayfanın adresini belirtiyor. </a> koduyla da sonunu kapatmayı unutmayalım. Şimdi ana sayfamıza link vermek için şu kodları yazmamız gerekiyor. <li><a href="index.html">Ana Sayfa</a></li> Boş link vermek istersek de index.html yerine # işaretini kullanıyoruz. Yani href="#" şeklinde yazıyor. Şimdi menüdeki tüm listeye link verelim ve sayfanın son halini şu olacak şekilde yapalım:
Sayfamızı çalıştırdık ve ana sayfa dışında linklere tıklayınca hata ile karşılaştık. Bunun sebebi web sitemizin kök klasöründe sadece index.html dosyasının olması. Şimdi <p> içindeki yazıyı değiştirelim ve "Ürünlerimiz bu sayfada" yazalım ama direk kaydetmeyelim. Farklı kaydet yapıp kök klasörümüze urunlerimiz.html adıyla kaydedelim. Şimdi Ürünlerimiz ve Ana Sayfa arasında geçiş yapabiliriz. Bu işlemi menüdeki her link için uygulayalım. Sakın "bu ne biçim menü?" diye düşünmeyin. Şu an sadece başlangıç aşamasındayız. İleride CSS yapımına geçtiğimizde harika menüler yapacağız.
İlk olarak kendime şöyle bir şey hazırladım. Başlangıç 1 dersini okuduysanız bunu rahatlıkla yapabiliyor olmanız gerekiyor.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Ana Sayfa</title>
<meta charset="UTF-8">
</head>
<body>
<img src="resimler/banner.jpg" alt="en güzel banner, banner, banner resmi">
<h1> İlk Site Tasarımım</h1>
<p>İlk site tasarımıma hoş geldiniz. Bu sitenin tasarımını yapmaya daha yeni başladım. :)</p>
</body>
</html>Şimdi yukarıdaki örneğe menü ekleyeceğiz. Yani Ana Sayfa, Hakkımızda, İletişim gibi linke tıklayınca o sayfaya giden statik bir site olacak. Unutmayın menü yapımında her zaman listeleme kullanılır. Listeleme ise SMF forumu da olmak üzere bir çok forumdaki liste kodları ile aynıdır. Yani şöyle:
Code:
<list>
<li>Ana Sayfa</li>
<li>Ürünlerimiz</li>
<li>Hakkımızda</li>
<li>İletişim</li>
</list>
Code:
<!DOCTYPE html>
<html>
<head>
<title>Ana Sayfa</title>
<meta charset="UTF-8">
</head>
<body>
<img src="resimler/banner.jpg" alt="en güzel banner, banner, banner resmi">
<list>
<li>Ana Sayfa</li>
<li>Ürünlerimiz</li>
<li>Hakkımızda</li>
<li>İletişim</li>
</list>
<h1> İlk Site Tasarımım</h1>
<p>İlk site tasarımıma hoş geldiniz. Bu sitenin tasarımını yapmaya daha yeni başladım. :)</p>
</body>
</html>
Code:
<!DOCTYPE html>
<html>
<head>
<title>Ana Sayfa</title>
<meta charset="UTF-8">
</head>
<body>
<img src="resimler/banner.jpg" alt="en güzel banner, banner, banner resmi">
<list>
<li><a href="index.html">Ana Sayfa</a></li>
<li><a href="urunlerimiz.html">Ürünlerimiz</a></li>
<li><a href="hakkimizda.html">Hakkımızda</a></li>
<li><a href="iletisim.html">İletişim</a></li>
</list>
<h1> İlk Site Tasarımım</h1>
<p>İlk site tasarımıma hoş geldiniz. Bu sitenin tasarımını yapmaya daha yeni başladım. :)</p>
</body>
</html>Tekrardan merhaba. Son olarak menü ve listeleme yapımını öğrenmiştik. Bu derste de listeleme, link vermek ve resim eklemek ile ilgili bir kaç örnek yapıp, artı olarak tablo yapımını öğreneceğiz.
Kök klasörümüzdeki "urunlerimiz.html" sayfasıyla başlayalım. Burada Game of Thrones ürünleri satacağımız bir tablo yapacağız. Tablo yapımı SMF ve bir çok forum kodları ile aynı. Tek fark köşeli parantez yerine "<>" parantezlerini kullanıyoruz.
İlk olarak bu resimleri bilgisayarımıza indirip kök klasörümüzdeki resimler klasörüne atalım
http://store.hbo.com/imgcache/product/resized/001/001/640/catl/game-of-thrones-hodor-neon-t-shirt-371_1000.jpg?k=1ac1fd85&pid=1001640&s=catl&sn=hbo
http://store.hbo.com/imgcache/product/resized/000/371/743/catl/00371743-340460_1000.jpg?k=3ba9b530&pid=371743&s=catl&sn=hbo
http://store.hbo.com/imgcache/product/resized/000/962/336/catl/game-of-thrones-the-hounds-helmet-674_1000.jpg?k=34411b8c&pid=962336&s=catl&sn=hbo
http://store.hbo.com/imgcache/product/resized/000/956/363/catl/game-of-thrones-pop-television-dany-on-drogon-figurine_1000.jpg?k=b0297652&pid=956363&s=catl&sn=hbo
http://store.hbo.com/imgcache/product/resized/000/777/549/catl/game-of-thrones-monopoly-518_1000.jpg?k=d9af0e67&pid=777549&s=catl&sn=hbo
http://store.hbo.com/imgcache/product/resized/000/777/554/catl/game-of-thrones-risk_1000.jpg?k=ea9944fc&pid=777554&s=catl&sn=hbo
Ben dosya isimlerini sırasıyla tisort1.jpeg, tisort2.jpeg, oyuncak1.jpeg, oyuncak2.jpeg, oyun1.jpeg, oyun2.jpeg yaptım. Şimdi ise tablomuzu oluşturmaya başlayalım.
Tabloyu <table></table> kodları ile oluşturuyoruz. <table border="1"> şeklinde yazılınca tablonun kalınlığını ayarlamış oluyoruz. Örnekte daha iyi anlayacağız. İçerisinde ise <tr></tr>, <td></td> ve <th></th> kodlarını yazıyoruz. TR kodları tablonun bir alt satırını oluşturmanızı sağlıyor. TD yan yana sütunlar oluşturmayı sağlıyor. TH ise tablo içinde başlık yazmak için kullanılıyor. Şöyle bir tablo hazırladım ben:
style koduna takılmayın. O kısma CSS'ye geçince değineceğim. Sadece tablonun daha düzenli olması için yazdım o kodları. İçerisindeki sayılar ise hangi satırın kaçıncı sütunu olduğunu gösteriyor. Mesela 1. satırın 1. sütunu, 2. satırın 1. sütunu gibi. Onları yazmak zorunda değilsiniz. Sadece örnek olsun diye yazdım ben. Şimdi tablomuzu dolduralım. 1. satırın 1. sütununa Tişörtler yazalım. 1. satırın 2. sütununa Oyuncaklar. 1. satırın 3. sütununa ise Oyunlar yazalım. Son hali şöyle olacak:
Şimdi diğer alanlara resimlerimizi koyalım. 2. satırın 1. sütununa 1. tişörtü, 3. satırın 1. sütununa 2. tişörtü ekliyoruz. Diğer ürünleri de aynı şekilde ekliyoruz. Son olarak şöyle olması gerekiyor:
Sayfamızı açtık ve sürpriz... Resimler kocaman! Ufak bir ayarla resim boyutlarını küçültelim hemen. Tüm resimlerin "alt" kodunun soluna width="200px" yazalım. Bu sayede resimleri, en-boy oranını koruyarak istediğimiz boyuta getirmiş olduk.
Şimdi bu örneği biraz daha geliştirelim.
<table border="1" style="width:500px; height:250px;"> kodunun bir üstüne <a href="urunlerimiz-liste.html">Liste Görünümü</a> / <a href="urunlerimiz.html">Tablo Görünümü</a> yazalım. Kodları incelediğimizde urunlerimiz-liste.html adında yeni bir sayfa oluşturmak zorunda kalıyoruz. Hemen oluşturalım. Dosya>Farklı Kaydet>urunlerimiz-liste.html Şimdi tablomuzu silelim ve <ol></ol> kodlarıyla liste oluşturalım. <ol> mu? Hani<ul> koduyla yapıyorduk? İşte burada düzenli, düzensiz listeler devreye girdi. <ul> kodları düzensiz liste için kullanılır. Yani menü yapımı gibi şeylerde. <ol> ise düzenli listede kullanılır. Sıralama yapım falan... Şu şekilde bir tablo oluşturduk:
Gerisini de şimdiye kadar öğrendiğiniz bilgileri kullanarak siz yapın. Bir kaç ip ucu vermek gerekirse listedeki her şey için yeni bir html dosyası oluşturuyoruz ve bu html dosyalarına tablo ekleyerek ürünleri listeliyoruz.
Kök klasörümüzdeki "urunlerimiz.html" sayfasıyla başlayalım. Burada Game of Thrones ürünleri satacağımız bir tablo yapacağız. Tablo yapımı SMF ve bir çok forum kodları ile aynı. Tek fark köşeli parantez yerine "<>" parantezlerini kullanıyoruz.
İlk olarak bu resimleri bilgisayarımıza indirip kök klasörümüzdeki resimler klasörüne atalım
http://store.hbo.com/imgcache/product/resized/001/001/640/catl/game-of-thrones-hodor-neon-t-shirt-371_1000.jpg?k=1ac1fd85&pid=1001640&s=catl&sn=hbo
http://store.hbo.com/imgcache/product/resized/000/371/743/catl/00371743-340460_1000.jpg?k=3ba9b530&pid=371743&s=catl&sn=hbo
http://store.hbo.com/imgcache/product/resized/000/962/336/catl/game-of-thrones-the-hounds-helmet-674_1000.jpg?k=34411b8c&pid=962336&s=catl&sn=hbo
http://store.hbo.com/imgcache/product/resized/000/956/363/catl/game-of-thrones-pop-television-dany-on-drogon-figurine_1000.jpg?k=b0297652&pid=956363&s=catl&sn=hbo
http://store.hbo.com/imgcache/product/resized/000/777/549/catl/game-of-thrones-monopoly-518_1000.jpg?k=d9af0e67&pid=777549&s=catl&sn=hbo
http://store.hbo.com/imgcache/product/resized/000/777/554/catl/game-of-thrones-risk_1000.jpg?k=ea9944fc&pid=777554&s=catl&sn=hbo
Ben dosya isimlerini sırasıyla tisort1.jpeg, tisort2.jpeg, oyuncak1.jpeg, oyuncak2.jpeg, oyun1.jpeg, oyun2.jpeg yaptım. Şimdi ise tablomuzu oluşturmaya başlayalım.
Tabloyu <table></table> kodları ile oluşturuyoruz. <table border="1"> şeklinde yazılınca tablonun kalınlığını ayarlamış oluyoruz. Örnekte daha iyi anlayacağız. İçerisinde ise <tr></tr>, <td></td> ve <th></th> kodlarını yazıyoruz. TR kodları tablonun bir alt satırını oluşturmanızı sağlıyor. TD yan yana sütunlar oluşturmayı sağlıyor. TH ise tablo içinde başlık yazmak için kullanılıyor. Şöyle bir tablo hazırladım ben:
Code:
<table border="1" style="width:500px; height:250px;">
<tr>
<th>1.1</th>
<th>1.2</th>
<th>1.3</th>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
Code:
<table border="1" style="width:500px; height:250px;">
<tr>
<th>Tişörtler</th>
<th>Oyuncaklar</th>
<th>Oyunlar</th>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>Şimdi diğer alanlara resimlerimizi koyalım. 2. satırın 1. sütununa 1. tişörtü, 3. satırın 1. sütununa 2. tişörtü ekliyoruz. Diğer ürünleri de aynı şekilde ekliyoruz. Son olarak şöyle olması gerekiyor:
Code:
<table border="1" style="width:500px; height:250px;">
<tr>
<th>Tişörtler</th>
<th>Oyuncaklar</th>
<th>Oyunlar</th>
</tr>
<tr>
<td><img src="resimler/tisort1.jpg" alt="game of thrones tişört"></td>
<td><img src="resimler/oyuncak1.jpg" alt="game of thrones tişört"></td>
<td><img src="resimler/oyun1.jpg" alt="game of thrones tişört"></td>
</tr>
<tr>
<td><img src="resimler/tisort2.jpg" alt="game of thrones tişört"></td>
<td><img src="resimler/oyuncak2.jpg" alt="game of thrones tişört"></td>
<td><img src="resimler/oyun2.jpg" alt="game of thrones tişört"></td>
</tr>
</table>Şimdi bu örneği biraz daha geliştirelim.
<table border="1" style="width:500px; height:250px;"> kodunun bir üstüne <a href="urunlerimiz-liste.html">Liste Görünümü</a> / <a href="urunlerimiz.html">Tablo Görünümü</a> yazalım. Kodları incelediğimizde urunlerimiz-liste.html adında yeni bir sayfa oluşturmak zorunda kalıyoruz. Hemen oluşturalım. Dosya>Farklı Kaydet>urunlerimiz-liste.html Şimdi tablomuzu silelim ve <ol></ol> kodlarıyla liste oluşturalım. <ol> mu? Hani<ul> koduyla yapıyorduk? İşte burada düzenli, düzensiz listeler devreye girdi. <ul> kodları düzensiz liste için kullanılır. Yani menü yapımı gibi şeylerde. <ol> ise düzenli listede kullanılır. Sıralama yapım falan... Şu şekilde bir tablo oluşturduk:
Code:
<ol>
<li><a href="tisortler.html">Tişörtler</a></li>
<li><a href="oyuncaklar.html">Oyuncaklar</a></li>
<li><a href="oyunlar.html">Oyunlar</a></li>
</ol>Ön Bilgi, Başlangıç 1 ve Başlangıç 2 kısımlarıyla HTML hakkında az da olsa bilgilendik. Sonraki derslerde görüşmek üzere.
