Merhaba arkadaşlar,
Daha önce sizlere HTML5 hakkında kısa bir bilgi vermiştim. Bugün de sizlere hazır bir HTML5 taslağı veriyorum. Bu taslak sayesinde birçok işlemden anında feragat edebileceksiniz. Artık siz buna ister taslak deyin ister framework.
Aşağıdaki HTML5 Framework'ü veya Taslağı sayesinde yeni bir sayfa oluşturduğunuzda içini doldurmak için ekstra zaman kaybetmeyeceksiniz. Aşağıdaki taslak üzerinden html tasarımınıza rahatlıkla başlayabilirsiniz. Kullanılan etiketler hakkında kısa açıklamalarda da bulundum.
İşte HTML5 Framework'ü:
<!DOCTYPE HTML> <html lang="tr"> <head> <meta charset="utf-8" /> <title>www.trkodlama.com</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <link rel="stylesheet" href="stil.css" /> <meta name="generator" content="http://www.trkodlama.com"> </head> <body> <section> <!-- section etiketi sayfanızı bölümlendirmeye yarar --> <header> <!-- header etiketi sayfalarınızın başlık kısımlarını belirtir --> <nav> <!-- nav etiketi menülerinizin bulunduğu kısmı belirtir --> </nav> </header> </section> <section> <article> <!-- article etiketi yazı alanlarını belirtmek için kullanılır --> <p>TR Kodlama </p> <p>Güncel Programlama Makaleleri</p> <figure> <img src="resim.png" /> <figcaption>Deneme resim</figcaption> <!-- figcaption etiketi resime açıklama eklemek için kullanılır --> <!-- figure etiketi resim eklemenizi sağlar --> </figure> <small>Küçük yazım</small><!-- small etiketi yazıyı herhangi bir stil belirtmeden küçük yazdırmanızı sağlar --> <mark>Vurgulu www.trkodlama.com</mark><!-- mark etiketi yazılarınızı vurgulu yazmanızı sağlar --> </article> </section> <section> <aside> <!-- aside etiketi sağ ve sol bloklarınızı belirlemede kullanabilirsiniz --> <p>TR Kodlama Forumu</p> <p>Programlama Destek Forumu</p> </aside> </section> <section> <footer> <!-- footer etiketi sitelerinizin alt kısmıdır. nav etiketini burda da kullanabilirsiniz. --> <p>http://www.trkodlama.com</p> </footer> </section> </body> </html>
Bu framework'ün çalışan demosuna buraya tıklayarak ulaşabilirsiniz.
Umarım işinize yarar, kolay gelsin,
HTML 5 Nedir?
HTML5; HTML, XHTML ve HTML DOM için yeni bir standarttır.
Önceki HTML versiyonu 1999 çıkmıştır. Fakat o zamandan beri web çok değişti.
HTML5'in üzerinde hala çalışılmaktadır. Fakat bir çok modern tarayıcılar az da olsa HTML5 desteğine sahiptir.
HTML5 Nasıl Başladı?
HTML5 World Wide Web Consortium (W3C) ve Web Hypertext Application Technology Working Group (WHATWG) ortaklığıdır.
2006 yılında WhATWG web formları ve uygulamaları üzerine ve W3C'de XHTML 2.0 üzerine çalışıyorlardı. Daha sonra bir anlaşmaylar yeni bir HTML versiyonu çıkarmaya karar verdiler.
HTML5 için alınan bazı kararlar
Yeni Özellikler
Tarayıcı Desteği
HTML5 daha resmi olarak çıkmadığı için tarayıcıların henüz tam HTML5 desteği bulunmamaktadır.
Fakat bazı büyük tarayıcılar(Firefox, Chrome, Safari ve Internet Explorer gibi) kısmen de olsa son sürümlerinde HTML5 desteği sağlamaktadır.
Kendi Düşüncelerim
HTML5 gerçekten oldukça gelişmiş bir HTML sürümü. Sitelerimizde özellikle formlarda yaptığımız neredeyse bütün JavaScript işlemlerimizi birkaç yeni parametre (attribute) ile halletmemizi sağlıyor.
Harici eklenti desteğini minimuma indirmek için ellerinden geleni yapmışlar.
Bu dersimizde sizlere asp ile tablo, sütun, blok oluşturmayı öğreteceğim. Bunlar ilerde sizlerin çok kullanacağı temel bilgilerdendir. Eğer bunları öğrenmez veya tam öğrenemezseniz asp kullanmayı bilseniz bile bunu sayfaya yansıtamaz ve görsellik/ tasarım adına hiçbirşeyi yapamazsınız.
Tablo nedir ? Tablo web sitenizi oluşturmak için ana hatları ile arayüzü belirlemeye yarar. Tablo oluşturmadan ne sütun ne de blok oluşturabilirsiniz. Önce basit bir tablo oluşturalım.
Örnek :
<table border="1" height="100" width="100"> <tr> <td> Örnek bir tablo, sütun ve blok </td> </tr> </table>
- Yukarda "border" tablonun çerçevesini, "height" uzunluğunu, "width" ise enini belirliyor. Bunları "<tr>" veya "<td>" yani blok ve sütun içinde girebilirsiniz. Yani sütunun ve blokun boyunu, enini örnek tablodaki gibi belirleyebilirsiniz. Örnek verecek olursak...
Örnek :
<table border="1" height="200" width="200"> <tr> <td width="100"> Örnek tablo, blok ve sütundur. Bu sütunun eni 100'dür </td> <td width="100"> Örnek tablo, blok ve sütundur. Bu sütunun eni 100'dür </td> </tr> </table>
- Burada 200 birimlik bir tablo ve içerisinde 1 blok, 2 sütun (100 birimlik, tablo 2 eş sütuna bölünmüş) göreceksiniz. Sütunlar blokla beraber kullanılır. Bir blokta hiç sütun kullanmayabilirsiniz. Yani "<td>" ve "</td>" kısımlarını çıkarabilir sadece bloka veri koydurabilirsiniz. Bu sadece bloku 1 parça olarak gösterecek ve herhangi bir bloku bölme/sütunlama yapmayacaktır.
- Sütunların enini ve boyunu değiştirdik. Blokların enini ve boyunu değiştirmemiz de mümkün. "height" ve "width"'i kullanarak blokun görsel yönden ayarlarını yapmak mümkün. Örnek verecek olursak eğer :
Örnek :
<table border="1" height="200" width="200"> <tr width="100" height="100"> <td> Örnek tablo, blok ve sütundur. Bu blokun eni 100'dür </td> </tr> <tr width="100" height="100"> <td> Örnek tablo, blok ve sütundur. Bu blokun eni 100'dür </td> </tr> </table>
- Burada 2 adet blok oluşturduk. Bu blokların her biri 100 birim eninde ve 100 birim genişliğinde. Kodları *.html dosyası olarak kaydedip tarayıcınızla çalıştırdığınızda tablonun 2 bloktan oluştuğunu görebilirsiniz. Bu blokların içerisinde 1'er adet sütun var. Dilerseniz bunları 2'şer sütun veya istediğiniz kadar sütun şeklinde göstertebilirsiniz. Size 2'şer sütunlu olanını da göstereyim haydi
Örnek :
<table border="1" height="200" width="200"> <tr width="100" height="100"> <td width="50"> Bu blokun eni 100'dür ve sütunlar 50 birimdir </td> <td width="50"> Bu blokun eni 100'dür ve sütunlar 50 birimdir </td> </tr> <tr width="100" height="100"> <td width="50"> Bu blokun eni 100'dür ve sütunlar 50 birimdir </td> <td width="50"> Bu blokun eni 100'dür ve sütunlar 50 birimdir </td> </tr> </table>
- Şimdi tablo, blok ve sütun oluşturmayı öğrendiğimize göre sırada bunları görsel olarak iyileştirme yani süsleme/şekillendirme var. Bunları nasıl yapacağız sorularını şimdiden duyar gibiyim. Acele etmeyin geliyoruz yavaş yavaş. Önce tablonun arka plan rengini belirleyelim. Beyaz değilde kırmızı olsun. Örnek aşağıda hemen gözatalım
Örnek :
<table bgcolor="red" border="1" height="100" width="100"> <tr> <td> Bu bir bgcolor örneğidir</td> </tr> </table>
- Yukarıda "height" ve "width"'e ek olarak "bgcolor" özelliğini ekledik. Bu özellik sayesinde tablomuzun içerisine renk verebiliyoruz. Ben kırmızı rengini seçtim. Sizler ise daha farklı renkler deneyebilirsiniz. "red" yerine "blue", "green" vb. yazabilirsiniz. Ama genel olarak daha fazla renk istiyorsanız, html'de renk kodlarından yararlanmalısınız. Örnek olarak "#FFFFFF" başına işareti gelecek şekilde renge ait kod numarasını giriyoruz. "FFFFFF" 6 haneli, bu beyaz renk kodudur öte yandan "#000000" ise siyah renk kodudur. Eğer dreamweaver gibi web tasarım programları kullanıyorsanız size ufak bir ekranda renkler ve üzerine geldiğiniz rengin kodu çıkacaktır. Rengi mouse ile tıkladığınız takdirde "bgcolor" kısmına renk kodunu otomatik olarak girecektir.
- Tablomuz değilde sütunumuz ya da blok'a renk vermek istiyorsan "bgcolor" özelliğini blok veya sütun için girmemiz gerekecek. Şimi size bir örnek yazalım
Örnek :
<table border="1" height="100" width="100"> <tr> <td bgcolor="blue" width="50"> Bu bir backcolor örneğidir </td> <td bgcolor="green" width="50"> Bu bir backcolor örneğidir </td> </tr> </table>
- Örnekteki 2 sütuna farklı renkler verdim. Baştakine mavi sondakine ise yeşil renk. Bu sütunları renklendirdi. "bgcolor" kullanarak bloklarınıza da renk verdirebilirsiniz.
- Bir başka komut/özellik ise "style"'dir. "style" sayesinde css ayarları vermeniz mümkün. Tabii css işinizi kolaylaştırmak için var "style" hakkında hiçbirşeye değinmiyorum çünkü css'ye geçtiğimizde css komutlarını/özelliklerini "style"'da kullanabileceksiniz.
- Öğrenmeniz gerek diğer bir özellik "bordercolor" özelliğidir. Bu özellik ile oluşturduğunuz tablonun "border" değeri 0'dan farklıysa, çerçeve yani border'in rengini belirlemek mümkün. "bordercolor" özelliği ile dilediğiniz renkte çerçeve oluşturabilirsiniz. Renk kodları html'de hep aynıdır değişmez, "#renkkodu" şeklinde kullanılır, bu daha doğrudur.
Örnek :
<table border="1" height="100" width="100" bordercolor="red"> <tr> <td> Bu bir bordercolor örneğidir </td> </tr> </table>
- Tablomuzun "border" değeri 0'dan farklı 1'dir. Böylece çerçevenin rengini değiştirebileceğim. Ben kırmızı yaptım. Sizde deneyip kırmızı olduğunu görebilirsiniz. Farklı renkler kullanmanız mümkün.
- Tablomuza ek bir başka özellik olarak "align"'i kullanabiliriz. Tablomuzun konumunu belirlememizde bize yardımcı olacaktır. Sağa yaslama, sola yaslama ve ortalama gibi biçimleri mevcut. Sağa yaslamak isterseniz "align="Right"", sola yaslamak isterseniz "align="Left"" ve ortalamak isterseniz "align="Center"" yapmanız yeterli olacaktır. Örneğimizi inceleyelim
Örnek :
<table border="1" height="100" width="100" align="center"> <tr> <td> Bu bir align örneğidir </td> </tr> </table>
- Yukardaki örnekte tablomuzun ortaladık. Peki sütunumuzu veya blokları ortalayamaz mıyız ? Tabii ki bunlarda mümkün. Sütunu ortalarsanız içindeki veriler ortalanacaktır, blok ortalandığında ise sütunlarda ortalanacağından bloktaki tüm veriler ortada hizalanacaktır. Örneğe bakalım
Örnek :
<table border="1" height="100" width="100"> <tr align="center"> <td> Bu bir align örneğidir </td> </tr> </table>
- Burda blok ortaladık ama eğer 2 sütun oluşturup birini ortalayıp diğerini ortalamadan aradaki farkı görmek isterseniz size bu örneğide gösterelim.
Örnek :
<table border="1" height="100" width="100"> <tr> <td width="50" align="center"> Bu bir align örneğidir </td> <td width="50"> Bu bir align örneğidir </td> </tr> </table>
- Örnekte ilk sütun ortalandı ve içindeki verilerde ortalandı ama ikinci sütunda ortalama yapmadığımızdan sola yaslanmış bir hal aldı. Şimdi her iki sütunuda ortalayalım.
Örnek :
<table border="1" height="100" width="100"> <tr> <td width="50" align="center"> Bu bir align örneğidir </td> <td width="50" align="center"> Bu bir align örneğidir </td> </tr> </table>
*Not: Unutmayınız, tablosuz blok ve bloksuz sütun olmaz!
- İşte bu kadar basit. 2 sütunda ortalandı. Ne kadar kolay değil mi ?
Şimdilik size aktarmam gerektiğini düşündüklerim bunlar. Diğer derslerde gene beraber asp yolunda ilerlemek üzere hoşçakalın.
Html dosyalarını incelediğinizde her zaman <>, </> gibi karakterler ve bazı terimlerle karşılaşırsınız. Bunun nedeni html bilgilerinde bu karakterler arası yazılan yazıların "TAG" olmasıdır. Örnek olarak <html>, </html> bir tag'dır. Bu taglar arası tag ne özellik içeriyorsa o özelliği yaptırabilirsiniz.
<head>, </head> tagı arasında yer alan Başlık bölümüdür.
<title>, </title> tagı <head> tagı arasında bulunur ve web sitenizin başlığını bu tagın arasına yazarak belirleyebilirsiniz.
<body>, </body> tagı arasında yer alan Gövde bölümüdür.
Örnek :
<html> <head> <title>Trkodlama.com</title> </head> <body> Trkodlama programcılarına ... . . . </body> </html>
Yukarıdaki örneği not defterine yazıp *.txt olarak değilde, *.html olarak kaydeder ve açarsanız sayfanın başlığının "Trkodlama.com" olduğunu ve sayfada "Trkodlama programcılarına ..." altında ise "..." yazdığını göreceksiniz.
Unutmayınız ki <..> açılan her tag (etiket) </..> olarak kapatılmalıdır. Yani eğer bir tag başlatıyorsanız o tagı kullandıktan sonra kapatmalısınız. Aksi halde istemediğiniz görsel/şekilsel bozukluklar meydana gelebilir.
Eğer özel Türkçe karakterler kullanmak istiyorsanız web sayfanızda (ç,ı,ş,ğ,ö,ü) sayfanızın <head>, </head> tagı içine ve en başa şu kodu yazarsınız ;
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-9">
Bu kod sayesinde özel Türkçe karakterleri (ç,ı,ş,ğ,ö,ü) kullanabilirsiniz. Sunucudan gelen verileri gösteren web sayfanız tamamıyla html'dir. Asp olarak çalışır web tarayıcınıza html olarak gözükür. Bunu denemek için istediğiniz bir web sayfasını açın ve tarayıcınızda o sayfaya fare yardımıyla "Sağ Tuş" ile bir kere tıklayın. Ardından "Kaynağı Görüntüle/View Source" tıklayın ve karşınıza açılan not defterini inceleyin. Herşeyin html bilgisi olduğunu göreceksiniz.
<b>, </b> tagı, arasına yazılan yazıları kalın yapar.
<u>, </u> tagı, arasına yazılan yazıları altı-çizili yapar.
<i>, </i> tagı, arasına yazılan yazıları italik yapar.
<marquee>, </marquee> tagı, arasına yazılan yazıları sağdan-sola doğru kaydırır.
<br> tagı, yazınızda bir alt satıra geçmenize olanak tanır.
<p>, </p> tagı, arasına yazılan yazının altına bir boş satır bırakır.
Aşağıda kullanabileceğiniz 6 tane başlık tagı yer alıyor. En büyükleri <h1>, en küçükleri ise <h6>'dır.
<h1>, </h1> tagı, arasına yazılan yazının html dilinde hazır en büyük yazı olmasına olanak tanır.
<h2>, </h2> tagı, arasına yazılan yazının html dilinde <h1>'e göre biraz daha küçük olmasına olanak tanır.
<h3>, </h3> tagı, arasına yazılan yazının html dilinde <h2>'ye göre biraz daha küçük olmasına olanak tanır.
<h4>, </h4> tagı, arasına yazılan yazının html dilinde <h3>'e göre biraz daha küçük olmasına olanak tanır.
<h5>, </h5> tagı, arasına yazılan yazının html dilinde <h4>'e göre biraz daha küçük olmasına olanak tanır.
<h6>, </h6> tagı, arasına yazılan yazının html dilinde hazır en küçük yazı olmasına olanak tanır.
<sup>, </sup> tagı, arasına yazılan yazının üst simge içermesine olanak tanır.
<sub>, </sub> tagı, arasına yazılan yazının alt simge içermesine olanak tanır.
<code>, </code> tagı, arasına yazılan yazının bilgisayar kodu biçiminde yazılmasına olanak tanır.
<blockquote>, </blockquote> tagı, arasına yazılan yazının alıntı biçiminde yazılmasına olanak tanır.
<font>, </font> tagı, arasına yazılan yazının her türlü özelliğinin belirlenmesine olanak tanır (renk, boyut, yazı şekli vb.). Bu özellikler <font color="#000000"> gibi yazılarak yapılır tek başına bir işe yaramaz.
Şimdilik en basitinden size aktaracaklarım bunlar. Diğer derslerde görüşürüz.
Başlıklar bir web sitesinin olmazsa olmazlarıdır. Bu nedenle herhangi bir sayfanızda en az bir tane başlık kullanmalısınız, bu sayede ziyaretçilerinizin o anda neyi okuduğunu bilmesini sağlarsınız. HTML size 6 tane önce de hazırlanmış başlık etiketi imkanı sunuyor. Fakat incelediğim birçok web sayfası başlıkları şu şekilde belirliyor:
<div id="baslik" class="baslik">İşte Burası Başlığım</div>
Bu şekilde baslik ID'si ve baslik class'ı ile isteği sonucu üretiyor. Fakat h1 etiketi kullanmıyor:
<h1>oldukça büyük, kalın ve çirkin</h1>
Elbette eğer siz h1 etiketlerine stil vermezseniz haliyle büyük, kalın ve çirkin görünecektir. Halbuki div'i stillendireceğiniz h1'i stillendirmeniz daha mantıklı. En azından SEO açısından. Web sayfalarınızda bir tane h1 etiketi arama motoru botlarının dikkatini çok fazla çeker. Fakat bir tanesi de yeterlidir.
Neden DIV yerine Başlık Etiketini Kullanalım
Başlıklarınıza Stil Oluşturalım
Başlık etiketlerinizi "büyük, kalın ve çirkin" olmaktan kurtarmak için öncelikle nasıl görünmesini istiyorsak o şekilde stillendirelim. Bu nedenle bir web sitesi üzerinde çalıştığım zaman öncelikle paragraf, h1, h2 ve h3 stillerini belirlerim. Örneğin yeni bir sitenizin stil dosyası başlangıçta bu olabilir:
body, html { margin: 0; padding: 0; }
p { font: 1em Arial, Geneva, Helvetica, sans-serif; }
h1 { font: bold 2em "Times New Roman", Times, serif; }
h2 { font: bold 1.5em "Times New Roman", Times, serif; }
h3 { font: bold 1.2em Arial, Geneva, Helvetica, sans-serif; }
Bundan sonraki adımda başlık etiketinizin font türünü ve font rengini düzenleyin. Bu sayede sayfa yapınıza biraz daha uygun hale gelecektir.
h1 {
font: bold italic 2em/1em "Times New Roman", "MS Serif", "New York", serif;
margin: 0;
padding: 0;
color: #e7ce00;
}
Çerçeveler Başlıklarınızı Çıplaklıktan Kurtarır
Çerçeveler başlıklarınızı geliştirmek için muhteşem bir yoldur. Fakat her başlığınızda çerçeve olmasına da gerek yoktur. Önemli olan sitenizle uyum içinde olmasıdır.
h1 {
font: bold italic 2em/1em "Times New Roman", "MS Serif", "New York", serif;
margin: 0;
padding: 0;
color: #e7ce00;
border-top: solid #e7ce00 medium;
border-bottom: dotted #e7ce00 thin;
width: 600px;
}
Yukarıdaki örnekte başlığın üstüne düz bir çizgi altına ise noktlar kümesinden oluşan bir çizgi ekledim.
Başlığınıza bir arka plan resmi eklmek çok şık bir görüntü katabilir
Birçok web sitesinin üst kısmnıda başlık kısmı yer alır. Genellikle site başlığı ve grafik. Birçok tasarımcı bunları iki farklı element olarak ele alır ve o şekilde hazırlar. Neden siz de öyle yapasınız ki? Şimdi başlığımızın arkasına bir de resim yerleştirelim:
h1 {
font: bold italic 3em/1em "Times New Roman", "MS Serif", "New York", serif;
background: #fff url("baslik_arka.jpg") repeat-x bottom;
padding: 0.5em 0 90px 0;
text-align: center;
margin: 0;
border-bottom: solid #e7ce00 0.25em;
color: #e7ce00;
}
Hayalim de eklediğim resmin yüksekliği 90px idi. O nedenle padding: 0.5em 0 90px 0; yaptım. Bu sayede alttan 90 piksellik padding verdim. Daha farklı yöntemlerde var. Line-height, margin gibi.
Umarım anlatabilmişimdir.
Kolay gelsin
Merhaba arkadaşlar,
Bugünkü yazımda bir CSS elementine birden fazla nasıl background ekleyebileceğinizden bahsedeceğim. Bu özellik CSS3 ile birlikte kullanılabiliyor. Å?öyle bir örnek ile buna neden ihtiyaç duyabileceğimizi anlatalım.
Bir kutunuz var ve köşelerinin sizin koyduğunuz resimlerden oluşmasını istiyorsanız. Bunun için iki CSS elementi belirliyordunuz ve ayrı ayrı işleme sokuyordunuz. Bu özellik sizi bu ayrımcılıktan kurtarıyor. Lafı fazla uzatmadan nasıl yapıldığını inceleyelim:
/* CSS dosyamız */
.elementAdi{
background-image: url("sol_ust.gif"), url("sag_ust.gif"), url("resim3.gif");
background-position: top left, top right, bottom center;
background-color: #FFFFFF, #FFFFFF, #DDDDDD;
}
Yani her eklediğiniz değeri virgül ile ayırarak yazıyorsunuz. Ama sıralama önemlidir. Yani sol_ust.gif için top left geçerli olacaktır.
Kolay gelsin
Güncel Programlama Makaleleri by TR Kodlama © 2009 is licensed under a Creative Commons Alıntı-TicariOlmayan 3.0 Unported License.
