Html öğreniyorum 1

tarafından ber_kaan Cuma Mayıs 29, 2009 2:47 pm

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ı;

Kod:: <HTML> <HEAD> <TITLE> SAYFA BAŞLIĞI</TITLE> <HEAD> <BODY> MERHABA </BODY> </HTML>

Şekilde görüldüğü gibidir. Html sayfası <html> ile başlar ve </html> ile biter. Bu sayfanın html formatında yazıldığını anlatır. Daha sonra sayfa ile ilgili açıklamaların bulunduğu bölüm gelir. Bu bölüm <head> ile başlar.</head> ile biter. Sayfaya bağlananlara gerekli bilgilerin verildiği bölümdür. Ekranda görülmez. Mesela browser in kullanacağı dil burada tanımlanır. Sadece <title> </title> bölümleri arasında kalan kısım görülür. Bu bölüm sayfanın başlığıdır ve browser in en üst kısmında görüntülenir. Sayfa başlığı konuyu tam bir şekilde anlatmalıdır. Arama motorlarında ( mesela altavista da ) bu kısım gösterilir. <body> </body> bölümleri arasında hazırlayacağımız sayfa bulunur. Bu bölüm bizim web sayfamızdır. Tasarımı burada yaparız. Yazılar, resimler, sesler, hiper linkler bu bölümde tanımlanır.

Kod:: <html> <head> <title>Yazı yazma </title> </head> <body> Bu kısma istediğiniz gibi yazı yazın. Sonra bu yazıların ekranda nasıl görüneceğini hep beraber göreceğiz. Satır sonlarında bir alt satıra otomatikman geçiş yapılacaktır. Hiç merak etmeyin. Deneyin ve görün. Yazı yazmaktan sakın korkmayın. </body> </html>

Bir web sayfasına yazı yazmak kolaydır. <body> </body> tagları arasına yazacağınız yazılar sayfada gösterilecektir. Hiç bir tag kullanmazsanız satır bittiğinde otomatikman bir alt satıra geçerek yazılar gösterilir. Şimdi bunu deneyelim. Not defterini açın. Kodları aynen yazın ve deneme2.html olarak web sayfam klasörüne kayıt edin. Şimdi web sayfam klasöründen deneme2.html dosyasını çalıştırın.

Bu şekilde birkaç deneme daha yapmanızda fayda var. Biraz deneme yapın ve nasıl olduğuna aşina olun. Eğer dikkat ettiyseniz birden fazla boşluk bıraktığınızda browser bunu görmeyecek ve tek bir boşluk olarak kabul edecektir. Ne kadar tab ve boşluk peş peşe kullanırsanız kullanın bu bir boşluk anlamına gelecektir. Denemelerinizde buna da bakın ve tam olarak kavrayın.

Browsere istediğimiz zaman satır sonu yapmasını nasıl anlatacağız. Evet biz tasarım yapıyor isek istediğimiz an satır sonu yapmak isteriz. Bunun için 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.

Kod:: <html> <head> <title>Paragraf oluşturma </title> </head> <body> Şimdi bu yazıları okuyorsunuz. Şu anda bir alt paragrafa geçecek Yeni bir paragrafı okuyorsunuz. Bir başka bir paragraf daha Yani her yeni paragraf başlatır. Bir deneme daha. </body> </html>

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 <center> </center> tagını inceleyeceğiz.

Kod:: <html> <head> <title>Paragraf oluşturma </title> </head> <body> Şimdi br tagını inceleyelim. p tagından farklı olarak paragraf yapmaz 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. </body> </html>

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.

Kod:: <html> <head> <title>Yazıyı ortalama</title> </head> <body> <center>CENTER TAGI</center> Dikkat ettiniz mi? başlık sayfayı ortalamış vaziyette. Aynı şekilde istediğimiz <center>yazıyı ortalayabiliriz.</center> </body> </html>

Evet bir kelimeyi, yazıyı veya bir resmi ortalamak için kullanacağımız tag center dır. Bu tagı /center ile bitirmek gereklidir. Ortalama satır üzerinde olur. Browser center tagını gördüğünde bir satır aşağı atlar ve satırı ortalayarak yazıyı ekrana getirir. /center tagını görünce bir satır aşağı atlar. Sonuç yazımız ortalandı. Şimdi yandaki denemeyi yazın ve denem5.html olarak kayıt edin. Sonra çalıştırın. Sonucu görün. Bir kaç deneme yapın.Artık deneme5.html yi çalıştırabilirsiniz. Sonuç ortada web sayfası tasarlarken yazılar üzerinde kontrolümüzü sağlayan bu tagları iyi anlamak gereklidir. Birkaç deneme daha yapın, hepsini bir arada kullanın. Bir deneme olarak aşağıdaki satırları yazın ve bu üç tagı bir arada nasıl kullanabiliriz görün