Yazar: Samed GÖZÜTOK

CSS align-items

align-items:

Obje içindeki nesneleri kenarlardan itibaren dikey ortalama yapar.

Örnek:

div {
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;
}

 

See the Pen RWyOOJ by W3TR (@w3tr) on CodePen.

CSS Sözdizimi

 

Değer Açıklama Örnek
stretch  Öğeler ana objeye sığacak kadar uzatılır.
center  Öğeler ana objenin merkezine konumlandırılır.
flex-start  Öğeler ana objenin başında konumlandırılır.
flex-end  Öğeler ana objenin sonunda konumlandırılır.
Baseline  Öğeler ana objenin başında konumlandırılır. .
initial  Varsayılan değerine bu özelliğini ayarlar.
inherit  Bir üst elementinin değerini alır.(Kalıtsallık)

Tarayıcı Desteği

 
21.0 20.0 11.0 7.0 -webkit 12.1
Posted on by Samed GÖZÜTOK 0

CSS align-content

align-content:

Ana objenin içindeki diğer objeleri dikey eksen üzerinde hizalamasını yapar.

Not: Bu özelliğin etki etmesi için ana obje içindeki nesnelerin birden fazla olması gerekmektedir.

Örnek :

div {
    width: 70px;
    height: 300px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
}

See the Pen CSS align-content: stretch ; by W3TR (@w3tr) on CodePen.

CSS Sözdizimi

Değer Açıklama Örnek
stretch Öğeler ana objenin içine sığacak şekilde sıralanır. İlk öğe en üst konuma bitişik başlar.
center Öğeler ana objenin merkezine konumlandırılır.
flex-start Öğeler ana objenin başında konumlandırılır. Hepsi ardı ardına sıralanır.
flex-end Öğeler ana objenin sonunda konumlandırılır. Hepsi ardı ardına sıralanır.
space-between Öğeler üst ve alt kısımlar öncelik olmak üzere konumlandırılır. Bu iki öğe için üst ve alt 3 öğe için üst alt ve orta kısımlara konumlandırılırlar.
space-around Öğeler obje içerisinde eşit olarak dikey olarak ortalanırlar.

Tarayıcı Desteği
21.0 -webkit 28.0 11.0 9.0
7.0 -webkit		 12.10
Posted on by Samed GÖZÜTOK 0

HTML <wbr> Tag

Örnek

<p>
ajax öğrenmek için önce xml e aşina <wbr>sadddddddddddddddddddddddddddddddddddddddddddddddddddddasddddddddddddddddddddddddddddddddddddddddddddddddasdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddasdddddddddddddddddddddddddddddddddddddddddddddddddd<wbr> olmak gerekir
</p>

Bu etiket kelime aralarına satır sonu eklemekte kullanılmaktadır. Kelime çok uzunsa tarayıcı yanlış yerde alt satıra geçirebilir <wbr> bu gibi durumları düzeltmek için kullanılır.

Codepen Ön izleme

 

<p>
ajax öğrenmek için önce xml e aşina <wbr>sadddddddddddddddddddddddddddddddddddddddddddddddddddddasddddddddddddddddddddddddddddddddddddddddddddddddasdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddasdddddddddddddddddddddddddddddddddddddddddddddddddd<wbr> olmak gerekir
</p>

See the Pen HTML wbr tag by W3TR (@w3tr) on CodePen.

Posted on by Samed GÖZÜTOK 0

HTML <video> Tag

Örnek

<video width="320" height="240" controls>
  <source src="http://w3tr.com/file/kus.mp4" type="video/mp4">
  Tarayıcınız video elementini desteklemiyor.
</video>

Bu etiket film klibi , video akışı ve diğer video ortamlarını tanımlamak için kullanılır.

Codepen Ön izleme

<video width="320" height="240" controls>
  <source src="http://w3tr.com/file/kus.mp4" type="video/mp4">
  Tarayıcınız video elementini desteklemiyor.
</video>

See the Pen HTML video tag by W3TR (@w3tr) on CodePen.

Nitelikler

Nitelik Değer Açıklama
autoplay autoplay Videonun otomatik olarak oynatılacağını belirtmek için kullanılır.
controls controls Video kontrol nesnelerinin gözükeceğini belirtmek için kullanılır.
height pixels Video dosyasının yüksekliğini belirtmek için kullanılır.
loop loop Video dosyasının her bittiğinde tekrar oynatılacağını belirtmek için kullanılır.
muted muted Videonun sessiz olacağını belirtmek için kullanılır.
poster URL Videonun dosyası için bir kapak belirtmek için kullanılır.
preload auto
metadata
none		 Sayfa yüklendiğinde videonun yüklenip yüklenmeyeceğini belirtmek için kullanılır.
src URL Video dosyasının konumunu URL olarak belirtmek için kullanılır.
width pixels Video dosyasının genişliğini belirtmek için kullanılır.
Posted on by Samed GÖZÜTOK 0

HTML <ul> Tag

Örnek

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JAVA</li>
</ul>

Bu etiket sırasız listeler oluşturmak için kullanılmaktadır. Liste öğeleri tanımlamak için <li> etiketi kullanılmaktadır.

Codepen Ön izleme

 

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JAVA</li>
</ul>

See the Pen HTML ul tag by W3TR (@w3tr) on CodePen.

Nitelikler

Nitelik Değer Açıklama
compact compact HTML5 tarafından desteklenmiyor.Listenin normalden daha küçük halde olacağını belirtmek için kullanılır.
type disc
square
circle		 HTML5 tarafından desteklenmiyor.işaretcinin türünü belirtmek için kullanılır.
Posted on by Samed GÖZÜTOK 0

HTML <u> Tag

Örnek

<p>Bu bir <u>paragraf</u>.</p>

Bu etiket normal metinlerden farklı metinlerin açıklamasını tanımlamak için kullanılır. Örneğin : yanlış yazılmış veya çince özel kelimeler olabilir.

Codepen Ön izleme

 

<p>Bu bir <u>paragraf</u>.</p>

See the Pen HTML u tag by W3TR (@w3tr) on CodePen.

Posted on by Samed GÖZÜTOK 0

HTML <track> Tag

Örnek

<video width="320" height="240" controls>
  <track src="altyazı.vtt" kind="altyazı" srclang="tr" label="türkce">
</video>

Bu etiket medya dosyaları için metin parçaları tanımlamak için kullanılır. <audio> ve <video> medyaları oynatılırken altyazı, başlık gibi metinler görüntülemekte kullanılır.

Codepen Ön izleme

 

<video width="320" height="240" controls>
  <track src="altyazı.vtt" kind="altyazı" srclang="tr" label="türkce">
</video>

See the Pen HTML track tag by W3TR (@w3tr) on CodePen.

Nitelikler

Nitelik Değer Açıklama
default default
kind captions
chapters
descriptions
metadata
subtitles		 Element türünü belirtmek için kullanılır
label text Elementin ünvanını belirtmek için kullanılır.
src URL Element dosyasının URL sini belirtmek için kullanılır. Zorunlu.
srclang language_code Elementin veri dilini belirtmek için kullanılır.
Posted on by Samed GÖZÜTOK 0

HTML <tr> Tag

Örnek

<table>
  <tr>
    <th>Ay</th>
    <th>Gider</th>
  </tr>
  <tr>
    <td>Ocak</td>
    <td>100 TL</td>
  </tr>
</table>

Bu etiket HTML tablosunda satır tanımlamak için kullanılır.

Codepen Ön izleme

 

<style>
  table ,th,td {border: 1px solid #000;}
</style>
<table>
  <tr>
    <th>Ay</th>
    <th>Gider</th>
  </tr>
  <tr>
    <td>Ocak</td>
    <td>100 TL</td>
  </tr>
</table>

See the Pen HTML tr tag by W3TR (@w3tr) on CodePen.

Nitelikler

Nitelik Değer Açıklama
align right
left
center
justify
char		 HTML5 tarafından desteklenmiyor.Çevresindeki elementlere göre konumlandırmak için kullanılır.
char character HTML5 tarafından desteklenmiyor.Bir karakter için hücre içeriğini hizalamakta kullanılır.
charoff number HTML5 tarafından desteklenmiyor.Tbody içerisindeki içerik belirtilen karakter karakter sayısıyla aynı hizada olacağını belirtmek için kullanılır.
valign top
middle
bottom
baseline		 HTML5 tarafından desteklenmiyor.Tbody içerisindeki elemanların dikey olarak hizalanacağını belirtmek için kullanılır.
Posted on by Samed GÖZÜTOK 0