Css Resim Filitreleri 1

Blurlanmış Arkaplan

Merhaba Ben Ahmet

Çok güzel fotoğraf çekerim.

Css İle Yanıp Sönen Resim Oluşturma

<style>
img {
  animation: haunted 3s infinite;
}

@keyframes haunted {
  0% {
    filter: brightness(0%);
  }
   1% {
    filter: brightness(10%);
  }
  2% {
    filter: brightness(20%);
  }
  48% {
    filter: brightness(20%);
  }
  50% {
    filter: sepia(1) contrast(2) brightness(200%);
  }
  60% {
    filter: sepia(1) contrast(2) brightness(200%);
  }
  62% {
    filter: brightness(20%);
  }
  96% {
    filter: brightness(20%);
  }
  96% {
    filter: brightness(400%);
  }
}
</style>

CSS Pseudo Classes

/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}



Örnek Link
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.
Note: a:active MUST come after a:hover in the CSS definition in order to be effective.

---

Text-Shadow

.golge {
  text-shadow: 2px 2px grey;

The text-shadow Özelliği

 text-shadow: 2px 3px 4px #111;

Beyaz Yazıya Text Shadow

Css3 Background-Clip

  border: 10px dotted black;
  padding: 15px;
  background: lightblue;
  background-clip: padding-box;

The background-clip Özelliği

The background-clip property defines how far the background should extend within an element.
background-clip: border-box (this is default):

The background extends behind the border.

background-clip: padding-box:

The background extends to the inside edge of the border.

background-clip: content-box:

The background extends to the edge of the content box.

Css3 Background-Origin

background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoiszB5CfNRPLuFWkd76rUGPXaHVfLoqOVUV22n-Z0Nbx5-QTmKucTZ4_eos9wXHaT1e8jEprnLahFTYDlInVXgOykIhJw1DO7JbU0Xp-9FEtIZ2uPyqbx2Sh6d751yqpZKi8lrAlbwK8/s1600/paper.gif');
background-repeat: no-repeat;
background-origin: content-box;

background-origin: padding-box (default):

Hello World

The background image starts from the upper left corner of the padding edge.

background-origin: border-box:

Hello World

The background image starts from the upper left corner of the border.

background-origin: content-box:

Hello World

The background image starts from the upper left corner of the content.

Css3 Border Yeni Özellikler

1- Border Radius

Yeni gelen özellikle beraber herbir köşeye ayrı radius değeri verilebilmektedir.

}
  border: 2px solid red;
  padding: 10px;
  border-radius: 2em / 5em;
}

#example2 {
  border: 2px solid red;
  padding: 10px;
  border-radius: 2em 1em 4em / 0.5em 3em;
}
Online olarak https://www.cssmatic.com/border-radius

border-radius: 2em / 5em:

CSS3 web tasarımda çok güzel özellikler getirmiştir.Bunlardan biride border-radius yani oval köşe bir çok yerde kullanabiliriz bunu. Hemen kodlara geçelim. 4 köşeyide aynı oranda oval yapmak için kodumuz border-radius bir örnek yapalım.

border-radius: 2em 1em 4em / 0.5em 3em:

NOT : css3 de kodları aynısını başına webkit moz o koyarak yazıyoz tarayıcı uyumu için.Yani her css3 kodu nu 4 kere yazıyoz.Bunu yapmazsanız daha sonra tarayıcı uyumsuzlukjları çıkar.

---

a) border-left-color

 border-style: solid;

 border-left-color: #92a8d1;

A heading with a colored left border

The border-left-color can be specified with a hexadecimal value.

b) border-right-style

.dotted1 {
  border-right-style: dotted;
}

.dotted2 {
  border-style: solid;
  border-right-style: dotted;
}

A heading with a dotted right border

A div element with a dotted right border.

---

c) border-image

border: 10px solid transparent;
border-image:url('border.png') 2% round ;

En büyük siteyi yaptım..80% round

En büyük siteyi yaptım..50% round

En büyük siteyi yaptım.. 30% round

En büyük siteyi yaptım..9% round

En büyük siteyi yaptım.. 2% round

---

border: 10px solid transparent;
border-image:url('border.png') 2% space;

En büyük siteyi yaptım..80% space

En büyük siteyi yaptım..50% space

En büyük siteyi yaptım.. 20% space

En büyük siteyi yaptım..9% space

En büyük siteyi yaptım.. 2% space

---

border: 10px solid transparent;
border-image:url('border.png') 2% stretch;

En büyük siteyi yaptım..80% stretch

En büyük siteyi yaptım..50% stretch

En büyük siteyi yaptım.. 20% stretch

En büyük siteyi yaptım..9% stretch

En büyük siteyi yaptım.. 2% stretch

---

Resmi 9 parçaya bölüp. Ona göre köşelerinden uzaltıp kısaltma işi yapmaya yarıyor.

---

1

Html5 Yeni İnput Tipleri

Html5 Yeni İnput Tipleri

color-->
date-->
datetime-->
email-->
number-->
month-->
search-->
range-->
tel-->
time-->
url-->
week-->

---

Readonly İnput Özelliği

<form action="/action_page.php">
  Email: <input type="text" name="email"><br>
  Şehir: <input type="text" name="country" value="Sadece Okunabilir" readonly><br>
  <input type="submit" value="Gönder">
</form>

Sonuç:

Email:
Şehir:

---

Disabled İnput Özelliği
<form action="/action_page.php">
  Ad: <input type="text" name="fname"><br>
  Soyad: <input type="text" name="lname" disabled><br>
  <input type="submit" value="Gönder">
</form>

---

Size İnput Özelliği
 <input type="text" name="fname" size="40">

---

 Maxslenght İnput Özelliği
<form >
  Username: <input type="text" name="usrname" maxlength="3"><br>
  <input type="submit" value="Submit">
</form>
Sonuç:

Username:

---

Autofocus  İnput Özelliği
inputa otomatik odaklanır.

<form >
  Ad: <input type="text" name="fname" ><br>
  Soyad: <input type="text" name="lname" autofocus><br>
  <input type="submit">
</form>

Ad:
Soyad:

---

autocomplete İnput Özelliği
on ve off değeri var. Tıklanıldığında önceki girilen değerleri getirir. Hatırlatma gibi...
<form autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

Sonuç:

First name:
Last name:
E-mail:

---

formtarget İnput Özelliği

_blank
_self
_parent
_top
framename

---

file İnput Özelliği
<h1>Doysa özelliği</h1>

<h3>Tek dosya seçimi </h3>
<form >
  Select a file: <input type="file" name="myFile"><br><br>
  <input type="submit">
</form>

<h3>Çoklu Seçim</h3>
<form action="/action_page.php">
  Select files: <input type="file" name="myFile" multiple><br><br>
  <input type="submit">
</form>
Sonuç:

Tek dosya seçimi

Select a file:

Çoklu Seçim

Select files:

---

pattern İnput Özelliği
<form>
  Ülke Kodu: <input type="text" name="country_code" pattern="[A-Za-z]{2}" title="2 hatfli ülke kodu girin">
  <input type="submit">
</form>
Sonuç:

Ülke Kodu:

---

placeholder İnput Özelliği
<form >
  <input type="text" name="fname" placeholder="Ad"><br>
  <input type="text" name="lname" placeholder="Soyad"><br>
  <input type="submit" value="Submit">
</form>
Sonuç:

Html5 Yeni Form Elemanları

Yeni Form Elemanları

1-Datalist

<input list="browsers" name="browser" />
  <datalist id="browsers">
    <option value="Internet Explorer">
    </option><option value="Firefox">
    </option><option value="Chrome">
    </option><option value="Opera">
    </option><option value="Safari">
  </option></datalist>
  <input type="submit" />

2-Keygen

HTML Olay Özellikleri

HTML standart özellikler, nesnelere (html etiketleri) işlevsel özellikler kazandırır.

Aşağıdaki standart özellikler herhangi bir HTML etiketinde kullanılabilir. 

Not: Kırmızı ile belirtilen satırlan mevcut html özellikleridir. Siyah renkli kısımlar html5.

---

Pencere Olay Özellikleri

Özellik	Değer	Tanımı
onafterprint	script	Belge yazdırıldıktan sonra bir script çalıştırır.
onbeforeprint	script	Belge yazdırılmadan önce bir script çalıştırır.
onbeforeunload	script	Belge boşaltılmadan önce bir script çalıştırır.
onerror	script	Hata ile karşılaşıldığında bir script çalıştırır.
onhaschange	script	Belge değiştirildiğinde bir script çalıştırır.
onload	script	Belge yüklenmesi tamamlandığında bir script çalıştırır.
onmessage	script	Mesaj tetiklendiğinde bir script çalıştırır.
onoffline	script	Çevrimdışı olduğunda bir script çalıştırır.
ononline	script	Çevrimiçi olduğunda bir script çalıştırır.
onpagehide	script	Pencere gizlendiğinde bir script çalıştırır.
onpageshow	script	Pencere görünür olduğunda bir script çalıştırır.
onpopstate	script	Pencere geçmişi değişikliklerinde bir script çalıştırır.
onredo	script	İleri işlemi yapıldığında bir script çalıştırır.
onresize	script	Tarayıcı penceresi boyutlandırıldığında bir script çalıştırır.
onstorage	script	Web depolama alanı güncellendiğinde bir script çalıştırır.
onundo	script	Geri işlemi yapıldığında bir script çalıştırır.
onunload	script	Belge kapatıldığında bir script çalıştırır.

---

Form Olayları

Özellik	Değer	Tanımı
onblur	script	Nesne odağını kaybederse bir script çalıştırır.
onchange	script	Form nesnelerinde bir değişiklik olduğunda bir script çalıştırır.
oncontextmenu	script	Nesne üzerinden içerik menüsü çağırıldığında bir script çalıştırır.
onfocus	script	Nesne odaklandığında bir script çalıştırır.
onformchange	script	Form nesneleri değiştirildiğinde bir script çalıştırır.
onforminput	script	Form nesnelerine kullanıcı girişi olduğunda bir script çalıştırır.
oninput	script	Nesneye kullanıcı girişi olduğunda bir script çalıştırır.
oninvalid	script	Nesneye geçersiz giriş olduğunda bir script çalıştırır.
onreset	script	Form reset butonuna basıldığında bir script çalıştırır. HTML5 desteklenmiyor.
onselect	script	Kullanıcı seçim işlemi yaptığında bir script çalıştırır.
onsubmit	script	Form submit butonuna basıldığında bir script çalıştırır.

---

Klavye Olayları

Özellik	Değer	Tanımı
onkeydown	script	Kullanıcı bir tuşa basarken bir script çalıştırır.
onkeypress	script	Kullanıcı bir tuşa bastıktan sonra bir script çalıştırır.
onkeyup	script	Kullanıcı bir tuşu bıraktıktan sonra bir script çalıştırır.

---

Fare Olayları

Özellik	Değer	Tanımı
onclick	script	Fare tuşuna basıldığında bir script çalıştırır.
ondblclick	script	Fare tuşuna iki kere basıldığında bir script çalıştırır.
ondrag	script	Nesnenin sürüklenme esnasında bir script çalıştırır.
ondragend	script	Nesnenin sürüklenmesi bittiğinde bir script çalıştırır.
ondragenter	script	Sürüklenen nesne hedef nesnenin üzerine geldiğinde bir script çalıştırır.
ondragleave	script	Sürüklenen nesne hedef nesnenin dışına çıktığında bir script çalıştırır.
ondragover	script	Sürüklenen nesne hedef nesnenin üzerinde sürüklendikçe bir script çalıştırır.
ondragstart	script	Nesne sürüklenmeye başladığında bir script çalıştırır.
ondrop	script	Sürüklenen nesne hedef nesne üzerinde bırakıldığında bir script çalıştırır.
onmousedown	script	Nesne üzerinde fare ile basılmasında bir script çalıştırır. Fare tuşu bırakılmaz.
onmousemove	script	Nesne üzerinde fare işaretçisi hareket ettirildiğinde bir script çalıştırır.
onmouseout	script	Fare işaretçisi nesne üzerinden ayrıldığında bir script çalıştırır.
onmouseover	script	Fare işaretçisi nesne üzerine geldiğinde bir script çalıştırır.
onmouseup	script	Nesne üzerinde basılan fare tuşu bırakıldığında bir script çalıştırır.
onmousewhell	script	Fare yuvarlağı döndürüldüğünde bir script çalıştırır.
onscroll	script	Nesneye ait scrollbar hareket ettirildiğinde bir script çalıştırır.

---

Media Olayları

Özellik	Değer	Tanımı
onabort	script	Aktif işlem iptal edildiğinde bir script çalıştırır.
oncanplay	script	Nesne oynatmaya hazır olduğunda bir script çalıştırır.
oncanplaythrough	script	Nesne tamamı ile yüklenip oynatmaya hazır olduğunda bir script çalıştırır.
ondurationchange	script	Nesne video, ses uzunluğu değiştiğinde bir script çalıştırır.
onemptied	script	Dosya kullanamaz duruma geldiği takdirde bir script çalıştırır.
onended	script	Nesnenin oynama süresi bittiğinde bir script çalıştırır.
onerror	script	Nesne yüklenirken bir hata ile karşılaşırsa bir script çalıştırır.
onloadeddata	script	Medya verisi yüklendikten sonra bir script çalıştırır.
onloadedmetadata	script	Medya bilgileri yüklendiğinde bir script çalıştırır.
onloadstart	script	Medya herşeyden önce yüklenmeye başladığında bir script çalıştırır.
onpause	script	Medya ara verildiğinde (pause) bir script çalıştırır.
onplay	script	Medya oynatmaya hazır olduğunada bir script çalıştırır.
onplaying	script	Medya oynatılmaya başladığında bir script çalıştırır.
onprogress	script	Tarayıcı medya verisini işlerken bir script çalıştırır.
onratechange	script	Oynatma hızı değiştirildiğinde bir script çalıştırır.
onreadystatechange	script	Hazır medya değiştirildiğinde bir script çalıştırır.
onseeked	script	Seeking özelliği false olarak değiştirilir ve bir script çalıştırılır.
onseeking	script	Seeking özelliği true olarak değiştirilir ve bir script çalıştırılır.
onstalled	script	Tarayıcı herhangi bir nedenle medya verisi getiremediğinde bir script çalıştırır.
onsuspend	script	Tarayıcı medya içeriğini indirmeye çalışıp, karşılık alamadığında bir script çalıştırır.
ontimeupdate	script	Medya oynatıcı ile pozisyon değiştirildiğinde bir script çalıştırır.
onvolumechange	script	Medya sesi değiştirildiğinde bir script çalıştırır.
onwaiting	script	Medya duraklatıldıktan sonra tekrar oynatıldığında bir script çalıştırır.

HTML5 Yeni Elementler

<article> Web sayfasında ki bir makaleyi tanımlar.

<aside> Web sayfanızın veya bir bölümün sağ tarafını gösteri.

<bdi> Metnin dışındaki diğer metinden farklı bir yönde biçimlendirilebilecek bir bölümünü izole eder.

<details>Kullanıcının görüntüleyebileceği veya gizleyebileceği ek ayrıntıları tanımlar.

<dialog>  Bir iletişim kutusu veya pencere tanımlar

<figcaption> Bir <figure> öğesi için bir başlık tanımlar.

<figure> Kendi kendine yeten içeriği tanımlar.

<footer> Bir belge veya bölüm için altbilgi tanımlar.

<header> Bir belge veya bölüm için bir başlık tanımlar.

<main> Bir belgenin ana içeriğini tanımlar.

<mark> İşaretli / vurgulanan metni tanımlar.

<meter>  Bilinen bir aralıktaki skaler ölçümünü tanımlar (bir ölçer)

<nav> Menü bağlantılarını tanımlar.

<progress> Bir görevin ilerlemesini temsil eder.

<rp> Ek açıklamalarını desteklemeyen tarayıcılarda ne gösterileceğini tanımlar.

<rt> Karakterlerin bir açıklaması / telaffuzunu tanımlar (Doğu Asya tipografisi için)

<ruby> Bir açıklama tanımlar (Doğu Asya tipografisi için)

<section> Belgedeki bir bölümü tanımlar.

<summary> Bir <details> öğesi için görünür bir başlık tanımlar.

<time> Bir tarih / saat tanımlar

<wbr> Olası bir satır sonu tanımlar.

Yapısal HTML5 Etiketleri 

<section>  Nedir Ne işe yarar?

Dilimizde kesim, kısım gibi bir anlama gelir. HTML5 ile gelen yeni bir etikettir. Bazen tasarımda o kadar çok <div> kullanırız ki bu div'lerin birbirleri ile karışmaması için <section> etiketi kurtarıcı niteliktedir.

<section>
    <div>
        <p>Birinci section birinci paragraf</p>
    </div>
    <div>
        <p>Birinci section ikinci paragraf</p>
    </div>
    <div>
        <p>Birinci section üçüncü paragraf</p>
    </div>
</section>
<section>
    <div>
        <p>İkinci section birinci paragraf</p>
    </div>
    <div>
        <p>İkinci section ikinci paragraf</p>
    </div>
    <div>
        <p>İkinci section üçüncü paragraf</p>
    </div>
</section>

---

<article>  Nedir Ne işe yarar?
Bu etiket de HTML5 ile gelen yeni bir etikettir. Article dilimizde makale anlamına gelmektedir. Sitemizde yer alan metinsel içerik bu etiket içinde yer alır. <section> etiketi ile birlikte kullanılması tavsiye edilir.

<div>
    <section>
        <h3>Deneme Yazısı</h3>
        <article>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida est sed
               orci suscipit fringilla. Nulla hendrerit elementum nunc, non luctus justo
               vehicula ac. Etiam ac imperdiet nisl. Ut tempor mi quis sagittis facilisis.
               Donec nec ante vel elit fermentum dapibus. In hac habitasse platea dictumst.
               Nulla facilisi. Interdum et malesuada fames ac ante ipsum primis in faucibus.
               Morbi id enim tortor.
            </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida est sed
               orci suscipit fringilla. Nulla hendrerit elementum nunc, non luctus justo
               vehicula ac. Etiam ac imperdiet nisl. Ut tempor mi quis sagittis facilisis.
               Donec nec ante vel elit fermentum dapibus. In hac habitasse platea dictumst.
               Nulla facilisi. Interdum et malesuada fames ac ante ipsum primis in faucibus.
               Morbi id enim tortor.
            </p>
        </article>
    </section>
</div>

---

<aside> Nedir Ne işe yarar?

HTML5 ile gelen yeni bir etikettir. Sayfanın sidebar olarak tanımlanan yan tarafını belirtir. Sayfanın ya sağındadır ya da solundadır. Genellikle blog sitelerinde kullanılır. İçeriğinde kategoriler bölümü, aram kutusu, anketler, sabit bağlantılar ve reklam alanı ( banner ) yer alır.
<aside>
    <div>
        <h3>Kategoriler</h3>
        <ul>
            <li>Kategori 1</li>
            <li>Kategori 2</li>
            <li>Kategori 3</li>
        </ul>
    </div>
</aside>

---

<header> Nedir Ne işe yarar?
Sitemizin logosu, sosyal medya düğmeleri, dahili arama motoru, ticari sitelerde "üye girişi", "sepetim" gibi bağlantıların yer aldığı etikettir. Bu etiket de HTML5 ile birlikte gelmiştir. Daha önceden header yerine div'lere id vermek zorundaydık. Artık tek yapmamız gereken <header> yazmak.

Şu örnekte ne demek istediğimi anlayacaksınız:
<div id="header">
    <p>Eskiden böyle header oluştururduk.</p>
</div>
<header>
    <p>Şimdi sadece <header>'ı kullanmamaız yeterli.</p>
</header>

---

<footer>  Nedir Ne işe yarar?
Sitemizin yapım yılı, telif hakları gibi ayrıntılarının yer aldığı kısımdır. Sayfanın en altında yer alır. Ticari sitelerde referans adresleri, "hakkımızda", "iletişim" gibi bağlantılar ile diğer bazı önemli site içi bağlantılar bu kısımda kullanılır.

<footer>
    <address>
        <small>2013 | © Tüm hakları saklıdır. | <a href="#">deneme.com</a></small>
    </address>
</footer>
Footer etiketinin içinde <small> ve <address> etiketlerinin kullanılması yerindedir.

---

Not:<header> ve footer etiketleri sadece alt ve üst gruplar için değil <section> , <article>, <aside> etiketinin içerisinde de kullanılabilir. Altta ki resimi incelerseniz bu yapı zihninizde canlanacaktır.

---

<hgroup> Nedir Ne işe yarar?

Başlık Etiketlerini gruplamak için kullanılır.

<hgroup>
<h1>Başlık Etiketi 1</h1>
<h2>Başlık Etiketi 2</h2>
<h3>Başlık Etiketi 3</h3>
<h4>Başlık Etiketi 4</h4>
<h5>Başlık Etiketi 5</h5>
<h6>Başlık Etiketi 6</h6>
</hgroup>

---

<nav> Nedir Ne işe yarar?
Açılımı navigation'dır. Dilimizde navigasyon (yönlendirme) anlamına gelir. HTML5 ile gelen yeni bir etikettir. Sitemizdeki menü <nav> elementi içine yazılır.

Şu örnekte <nav>'i daha iyi kavrayabilirsiniz:
<nav>
    <ul>
        <li><a href="#">Ana Sayfa</a></li>
        <li><a href="#">Hakkımızda</a></li>
        <li><a href="#">Çalışmalarımız</a></li>
        <li><a href="#">Referanslar</a></li>
        <li><a href="#">İletişim</a></li>
    </ul>
</nav>

---

Not: xhtml den html5 e geçince kod yapımız aşağıdaki gibi olmaktadır. 

---

<figure> Nedir Ne işe yarar?
Dilimizde figür, şekil gibi bir anlama gelmektedir. HTML5 ile gelmiştir. Sitemizde yer alan görsellerin bu etiket içinde yer alması tavsiye edilmektedir.

Örnek kullanımı şu şekildedir:

<figure>
    <img src="https://css3html5x.blogspot.com/img/gun_batimi.jpg" alt="gün batımı"/>
</figure>

---

<meter> Nedir Ne işe yarar?
<meter value="2" min="0" optimum="50" low="20" max="10">Disk seviyesi</meter><br>
<meter min="0" optimum="50" low="60" high="80" max="100" value="88">Disk seviyesi</meter><br>
<meter value="0.6">60%</meter><br>
<meter value="9" min="0" max="10">2 out of 10</meter><br>
Sonuc:
Disk seviyesi
Disk seviyesi
60%
2 out of 10

---

<progress> Nedir Ne işe yarar?
Yüklenme oranını gösterir. Javascript ile birlikde loading ekranı yapılabilir.

Downloading progress:
<progress value="22" max="100"></progress>

---

 <time> Nedir Ne işe yarar?
Web sitemizdeki saat ve tarih alanlarını belirtmek için kullanılır. Google arama motorları için önemlidir. Görsel olarak bir farklılık olmaz.
<time>Bugün</time>
<time>Pazartesi</time>
<p>We open at <time>10:00</time> every morning.</p>
<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>

---

<details> ve  <summary> Nedir Ne işe Yarar?
<details> Detay anlamına gelir.  <summary> ise özet demek. Hide ve show özelliklerine denk gelmektedir. Javascript ile yapılan özellik html5 le beraber yapılabilir bir yapıya geldi.
<details>
  <summary>Detay İçin Tıklayınız</summary>
  <p>Tüm hakları saklıdır</p>
  <p>2019 Htm5 ve Css3 yeni gelen özellikler.</p>
</details>

Detay İçin Tıklayınız

Tüm hakları saklıdır
2019 Htm5 ve Css3 yeni gelen özellikler.

Detay 2 Open özelliği

Detay 2 açık olarak gelir
Open kullanımını öğreniyoruz.

---

<bdi> Nedir Ne işe Yarar?
<bdi> etiketi farklı yönde başlayan bir metni diğer metinlerden ayırır. (Örn: Arapça, ibranice)
Metin yönü farklı içerik oluştururken sayfa düzenin sağlanması için bu etiketi kullanmak fayda sağlar.

<ul>
<li>User <bdi>hrefs</bdi>: 60 points</li>
<li>User <bdi>jdoe</bdi>: 80 points</li>
<li>User <bdi>إيان</bdi>: 90 points</li>
<li>User 100 points إيان</li>
<li>User 100 إيان points </li>
 </ul>

---

<main> Nedir Ne işe Yarar?
<div id="main"> ifadesinin yerine html5 te <main> etiketi kullanılır. Tek seferde kullanılması gerekir.

<main>
  <h1>Web Browsers</h1>
  <p>Google Chrome, Firefox, and Internet Explorer are the most used browsers today.</p>

  <article>
    <h1>Google Chrome</h1>
    <p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p>
  </article>

  <article>
    <h1>Internet Explorer</h1>
    <p>Internet Explorer is a free web browser from Microsoft, released in 1995.</p>
  </article>

  <article>
    <h1>Mozilla Firefox</h1>
    <p>Firefox is a free, open-source web browser from Mozilla, released in 2004.</p>
  </article>
</main>

---

<wbr> Nedir Ne işe Yarar?
<wbr> etiketi kelime arası satır sonu eklemek için kullanılır.
İpucu: Bir kelime çok uzunsa ve tarayıcı kelimeyi yanlış yerde alt satıra geçirebilir. Bu etiket bu düzenlemeyi sağlar.

<p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p>

This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongwordthatwillbreakatspecificplaceswhenthebrowserwindowisresized.