İnternet Programlama-I HTML - CSS
CSS ile Site Dolaşım Menüsü Oluşturmak Yatay menüler, dünyadaki ilk Web siteleri var olduğundan beri kullanılan en işlevsel ve ziyaretçilerin en sık kullandığı fiziksel alanlardır. Neticede yatay menüler tüm sitenin ana başlık ve içeriklerine erişim olanağı sağlayan kilit noktalardan biridir. Dolayısıyla bu, site navigasyonu ne kadar problemliyse ziyaretçi o kadar sıkıntı çekecek, ne kadar başarılı ve estetikse ziyaretçi o kadar eğlenerek gezecek demektir.
CSS ile Site Dolaşım Menüsü Oluşturmak <html> <head> <title>KIRKLARELİ ÜNİVERSİTESİ</title> <style type="text/css"> /* az sonra buraya css kodlarımızı gireceğiz */ </style> </head> <body> <ul> <li><a href="http://babaeskimyo.klu.edu.tr">Babaeski MYO</a></li> <li><a href="http://luleburgazmyo.klu.edu.tr">Lüleburgaz MYO</a></li> <li><a href="http://pmyo.kirklareli.edu.tr">Pınarhisar MYO</a></li> <li><a href="http://shmyo.klu.edu.tr">Sağlık Hizmetleri MYO</a></li> <li><a href="http://sbmyo.klu.edu.tr">Sosyal Bilimler MYO</a></li> </ul> </body>
CSS ile Site Dolaşım Menüsü Oluşturmak
CSS ile Site Dolaşım Menüsü Oluşturmak <style type="text/css"> ul { margin:0; padding:0; } </style> </head>
CSS ile Site Dolaşım Menüsü Oluşturmak ul { margin:0; padding:0; } li { float:left;
CSS ile Site Dolaşım Menüsü Oluşturmak Tüm linkler böylece yan yana gelmiş oldu. Öte yandan fark ediyoruz ki, liste öğelerinin imleçleri halen oradalar. Liste öğelerinin imleçlerini kapatıyoruz: li { float:left; list-style-type:none; }
CSS ile Site Dolaşım Menüsü Oluşturmak Şimdi yapmamız gereken öncelikle link elementlerinin (a) tıklama alanlarını display:block özelliğiyle link alanı kadar kapsamak, ve elementlere biraz iç boşluk (padding) vererek hem okunabilir alanı ferahlandırmak, hem de bunu yaparak aynı zamanda linkler arası boşluk oluşturmaktır. Link elementlerine kutu seviyesi özelliği kazandırıp 5 piksellik iç boşluk uyguluyoruz: a { display:block; padding:5px; }
CSS ile Site Dolaşım Menüsü Oluşturmak Şimdi yapmamız gereken öncelikle link elementlerinin (a) tıklama alanlarını display:block özelliğiyle link alanı kadar kapsamak, ve elementlere biraz iç boşluk (padding) vererek hem okunabilir alanı ferahlandırmak, hem de bunu yaparak aynı zamanda linkler arası boşluk oluşturmaktır. Link elementlerine kutu seviyesi özelliği kazandırıp 5 piksellik iç boşluk uyguluyoruz: a { display:block; padding:5px; font:9.5pt Georgia; color:#000099; /*lacivert */ text-decoration:none; }
CSS ile Site Dolaşım Menüsü Oluşturmak a:hover { color:#CC6600; border-bottom:3px solid #CC6600; }
CSS ile Form Öğelerini Stillendirmek Eskiden bu yana, tasarladığımız Web sitelerinde teknik yetersizlik nedeniyle sınırlı seviyede görselleştirmeler yaparak hayata geçirdiğimiz öğeler arasında kuşkusuz ki interaktif formlar devamlı başı çekmiştir. Bunun sebebi, tarayıcıların form etiketinin altında bulunan form öğelerinin (text kutusu, radyo butonları, liste, menüler vb.) işletim sistemi standardında görüntülenmeleri ve o vakitler CSS ile tasarım geliştirmek sınırlar dahilinde olduğu için birçok kısıtlamaya sahip olmamızdı.
CSS ile Form Öğelerini Stillendirmek Bilindiği gibi, formlar kendilerini kapsayan ve interaktif veri transferi işleminde köprü görevi üstlenen kutu seviyesi <form> etiketiyle kapsanırlar. Bu etiketlerin içine giren öğelerin doğrudan stillendirilmesi ve kutu yapısında biçimlenmeleri birçok durumda tasarımlarımızı hayata geçirirken yeterli gelmeyebileceği için, formlar içindeki öğeleri gruplamamızı ve adımlara bölmemizi sağlayan bir başka kutu seviyesi element olan fieldset elementlerini kullanıyor olacağız.
CSS ile Form Öğelerini Stillendirmek Hazırlayacağımız İletişim Formumuzda veri giriş kriterleri şu şekilde olsun: Ad Soyadı E-mail Mesaj
CSS ile Form Öğelerini Stillendirmek Kriterlerimizden ilk üçünü bir fieldset alanı içine, mesaj bölümünü de bir başka fieldset içine alarak mantıksal bir gruplama yapacağız. Bu yöntem hem stillendirme yaparken daha yaratıcı fikirleri hayata geçirmemize yardımcı olacak, hem de ziyaretçinin bir sürü metin kutusu arasında kaybolmaması adına bir iyileştirme sağlayacaktır.
CSS ile Form Öğelerini Stillendirmek Veri kutularımızı her zamanki gibi textbox input ile oluştururken, birden fazla satıra sahip olabilecek mesaj metni gibi öğelerimiz için textarea form öğesini kullanacağız. Kriter başlıklarımızın ve onların veri giriş içeriklerinin erişilebilir olması için de onları label elementiyle kapsayacağız.
CSS ile Form Öğelerini Stillendirmek <html> <head> <title>CSS İle Biçimlenmiş İletişim Formu</title> <style type="text/css"> body { font:9.5pt "Trebuchet MS"; color:#666666; } </style> </head> <body> <form id="iletisim" method="post" action=""> <fieldset> <label for="ad"><span>Adınız:</span>
CSS ile Form Öğelerini Stillendirmek <label for="ad"><span>Adınız:</span> <input type="text" name="ad" id="ad" /></label> <label for="soyad"><span>Soyadınız:</span> <input type="text" name="soyad" id="soyad" /></label> <label for="e-mail"><span>E-Mail Adresiniz</span> <input type="text" name="email" id="email" /></label> </fieldset> <fieldset> <label for="mesaj"><span>Mesajınız:</span> <textarea name="mesaj" id="mesaj"></textarea></label> <div><input type="submit" value="Gönder" /></div> </form> </body> </html>
CSS ile Form Öğelerini Stillendirmek
CSS ile Fieldset İçindeki Öğeleri Stillendirmek Şimdi bu formların içindeki öğelerin içerik kısmını stillendirerek yapısal biçimlemelere geçmeden önce onları görsel olarak bu biçimlemelere hazır hale getireceğiz. Yapacağımız düzenlemeler, form içeriğimizi stilsiz standart halleri olan yan yana dizilim yapısından kurtararak başlık altına metin kutuları gelecek şekilde, düzgün bir görünümde sunmaktan ibaret olacak.
CSS ile Fieldset İçindeki Öğeleri Stillendirmek label, label span { /* label ve label içindeki span öğeler için selektör gruplama */ display:block;} label { padding:5px; }
CSS ile Fieldset İçindeki Öğeleri Stillendirmek span { font-weight:bold; } fieldset input, fieldset textarea { color:#666; padding:2px; border:1px solid #a1a1a1; width:250px; fieldset textarea { font:9.5pt "Trebuchet MS";
CSS ile Fieldset İçindeki Öğeleri Stillendirmek
CSS ile Fieldset İçindeki Öğeleri Stillendirmek Ziyaretçi fare işaretçisi ile metin kutusuna veri girişi yapmak için tıklayan ya da Tab tuşuyla metin kutularına erişerek yazmak istediğinde kutularımızın görünümünde bazı değişimler uygulayarak formumuzun etkileyiciliğini artırmaya çalışacağız. Bu bahsettiğim işlemler için daha evvelki uygulamalarımızda a elementi için de kullanmış olduğumuz pseudo class’lardan focus özelliğini kullanacağız. Ziyaretçi metin kutusuna veri girişi için tıkladığında kutularımızın çerçeve rengini siyaha çevirelim
CSS ile Fieldset İçindeki Öğeleri Stillendirmek fieldset input:focus, fieldset textarea:focus { border-color:#000; }
CSS ile Fieldset İçindeki Öğeleri Stillendirmek
CSS ile Fieldset İçindeki Öğeleri Stillendirmek Şimdi formumuzdaki fieldset elementlerinin çerçeve rengini ve aralarındaki boşluğu arttıralım. Fieldset’ler için çerçeve rengini 3 piksellik gri, boşluk oranını da her fieldset elementinden sonra dışa doğru alttan 15 piksel olacak şekilde ayarlayalım: fieldset { border:3px solid #999; margin-bottom:15px; }
CSS ile Fieldset İçindeki Öğeleri Stillendirmek
CSS ile Fieldset Çerçevesine Yazı Eklemek <body> <form id="iletisim" method="post" action=""> <fieldset> <legend>Bilgi Formu</legend> Yazıyı yazdıktan sonra style içine biçimlendirmesini yapalım legend { font:10.5pt "Trebuchet MS"; color:#666666; font-weight:bold; }
CSS ile Fieldset Çerçevesine Yazı Eklemek
CSS dosyasını harici olarak kullanmak @charset "utf-8"; /* CSS Document */ body { background: yellow; }
CSS dosyasını harici olarak kullanmak <html> <head> <title>Untitled Document</title> <link href="css/1.css" rel="stylesheet" type="text/css" /> </head> <body> bu benim ilk sayfam </body> </html>