Responsive Template Çalışmam

html, jquery, booststrap, less  ile yapılmıştır.

TEMAYA AİT DEMOYU BURADAN GÖREBİLİRSİNİZ

tema template

Html5 Ses ve Video Ekleme

Html5 ile gelen ses ve video etiketlerine ait en önemli özellikler.

Sitenize ses dosyası eklemek
<audio> </audio>  ses dosyası etiketidir.

Ses dosyası yolunu göstermek
<source src=""></source> ses dosyası kaynağını belirtir.

Ses etiketini ekranda göstermek veya gizlemek
Controls : etiketi audio etiketine ait görüntünün ekranda görünmesini sağlar bu etiketi eklemeseniz de audio ses özelliği çalışacaktır fakat ekranda ses etiketine ait hiçbir görüntü bulunmayacaktır, buda arkaplanda çalan ses efekti gibi olacaktır.

Ses dosyasını otomatik başlatmak
Autoplay: etiketi audio etiketinin sayfaya yüklendiği an otomatik çalışmasını sağlar.

Sesin tekrar başlaması
Loop: yüklemiş olduğunuz ses dosyası bittikten sonra tekrar başlamasını sağlar.

Örnek :
<audio autoplay="" controls="">
<source src="”ses.mp3″"></source>
</audio>

Sitenize video dosyası eklemek
<video> </video>  video dosyası etiketidir.

Video dosyası yolunu göstermek
<source src=""></source> video dosyası kaynağını belirtir.

Video etiketini ekranda göstermek veya gizlemek
Controls : etiketi video etiketine ait çerçeve görüntüsünün ekranda görünmesini sağlar bu etiketi eklemeseniz de video görüntüsü ekranda çalışacaktır fakat video etiketine ait hiçbir görüntü bulunmayacaktır.

Ses dosyasını otomatik başlatmak
Autoplay: etiketi audio etiketinin sayfaya yüklendiği an otomatik çalışmasını sağlar.

Sesin tekrar başlaması
Loop: yüklemiş olduğunuz ses dosyası bittikten sonra tekrar başlamasını sağlar.

Video boyutlandırma
Width: videolarınızı kullanacağınız alana göre boyutlandırmanızı sağlar.

Örnek:
<video autoplay="" controls="" width="”400″">
<source src="”video.flv”"></source>
</video>

html html5 html5 ses ekleme html5 video ekleme

CSS Box (kutu) Modeli

css ile nasıl kutu modelleyebiliriz, şimdi size bundan bahsedeceğim.

Border: kenar çizgisi, bordere vereceğiniz değerler border kalınlığını belirler, border alabileceği değerler: kalınlık, çizgi şekli, renk. Konuyla ilgili detaylı bilgiyi border konusundan bakabilirsiniz.

Border: bütün kenarlara çizgi uygular.
Border-left: sol kenara çizgi uygular.
Border-right: sağ kenara çizgi uygular.
Border-top: üst kenara çizgi uygular.
Border-bottom: alt kenara çizgi uygular
border:10px 20px: üst ve alt çizgi kalınlığı10px, sağ ve sol çizgi kalınlığı 20px olacaktır.
Border:1px 0 5px 2px: üst çizgi kalınlığı 1px, sağ çizgi yok, alt çizgi kalınlığı 5px, sol çizgi kalınlığı 2px olacaktır. Tabi çizgi şekli ve kalınlığı atamayada unutmamak gerekiyor.

Width ve height: orta alan genişliğini belirler. Width değeri vermediğiniz durumlarda kutu o anki alanın boşluğunu kaplayacak kadar sağa doğru uzayacaktır. Height değerini vermediğinizde ise kutuya eklediğiniz içerik kadar yükseklik değeri alacaktır.

padding: orta alan ile kenar çizgisi arasındaki boşluğu belirler bu alana yazı veya resim gibi herhangi bir şey eklenemez, border için vereceğiniz değer width ve height değeri üzerine eklenir,
padding: bütün kenar boşlukları
padding-left: sol kenar boşluğu
padding-right: sağ kenar boşluğu
padding-top:üst kenar boşluğu
padding-bottom: alt kenar boşluğu
padding:10px 20px, üst ve altan 10px, sol ve sağdan 20 px boşluk verecektir
padding:1px 0 5px 2px, üsten 1px, sağda yok, alttan 5px, soldan 2px boşluk verecektir.

Margin: kenar çizgisi veya kenar çizgisi kullanılmayan durumlarda kenar sınırı ile kutu etrafında bulunan başka etiketlerle olan boşluğu belirler,
margin: bütün kenar boşlukları
margin-left: sol kenar boşluğu
margin-right: sağ kenar boşluğu
margin-top: üst kenar boşluğu
margin-bottom: alt kenar boğluğu
margin:10px 20px, üst ve altan 10px, sol ve sağdan 20 px boşluk verecektir
margin:1px 0 5px 2px, üsten 1px, sağda yok, alttan 5px, soldan 2px boşluk verecektir.

css kodu

.kutu {
background-color:yellow;
width: 100px;
padding: 50px;
border: 50px solid red;
margin: 50px;
}

html kodu

&lt;div class="kutu"&gt; kutu &lt;/br&gt; kutu &lt;/br&gt; kutu &lt;/br&gt; kutu &lt;/div&gt;


çalışmalara ait örnek link:

css css box modeli css kutu modeli