Kayıtlar

Grid Sistemi Nedir?

Resim
  "Kapaklar ve içerik sayfalarını çizebilmek için Grid sistemi kullanılır." Grid kelime anlamı olarak belli bir hat, izlek, ızgara anlamındadır. Bir başka deyişle Grid, sayfa tasarımında kullanılacak elemanların düzenlenmesinde yardımcı yatay ve dikey çizgilerdir. Bu çizgiler kendi içinde bir sistem ve oransal ilişki içinde hazırlanırlar. Sayfa tasarımında da sayfa üzerine yerleştirilecek her elemanın sayfa yüzeyi ile olan ilişkisi dışında diğer elemanlarla olan ilişkisi de düşünülmeli ve ona göre tasarlanmalıdır. “Elemanları sayfa üzerinde konumlandırırken, herhangi bir formül yoktur, fakat mantıklı bir sonuca ulaşmak için Grid (ızgara) kullanılabilir. Çünkü Gridler sayfa üzerinde kullanılacak yazı, resim gibi elemanların yerleştirileceği yeri belirlemeye yardımcı olurlar.     Grid Sistemini Faydaları Grid bir alan üzerinde elemanları düzenlemede en kullanışlı yöntemdir.  Grid tasarıma düzen, sadelik ve plan aşamasında çeşitlilik sağla...
1 yorum
Devamı

HTML Kodları

Resim
HTML KODLARI <html></html> HTML kaynak dökümanı yaratır. HTML belgenin kendisi ile başlar ve kendisi ile biter. <head></head> Kaynağa ait veriler ve bazı genel komutlar içerir. Burada yer alanlar web sayfasında görünmez. <body></body> Burada yer alanlar, sayfada görünecek olanlardır. <title></title> Kaynak dökümana ad verir. Bu ad tarayıcını en üstünde görünür. <body bgcolor=?> Zemin (background) rengini belirler. <h1></h1> En büyük başlığı yazar. <h6></h6> En küçük başlığı yazar. <b></b> Koyu yazar. <i></i> İtalik yazar. <font color=?></font> Harf rengini belirler. <p></p> Yeni paragraf yaratır. <li></li> Numaralı ya da numarasız listedeki maddeleri belirler. <ul></ul> Sıra numarasız liste yaratır. <img src...
Yorum Gönder
Devamı

Web Tasarımı Menü Oluşturma

Resim
<!DOCTYPE html> <html> <head> <style> body {     margin: 0; } ul {     list-style-type: none;     margin: 0;     padding: 0;     width: 25%;     background-color: #609;     position: fixed;     height: 100%;     overflow: auto; } li a {     display: block;     color: #000;     padding: 8px 16px;     text-decoration: none; } li a.aktif {     background-color:#FF0;     color: white; } li a:hover:not(.active) {     background-colo:#300;     color: white; } .baslik { padding:20px; } .icerik {  margin-left:25%;     padding:1px 16px;     height:1000px; } </style> </head> <body> <ul>   <li><a class="akt...
Yorum Gönder
Devamı