
Doctype (Document Type Declaration), Türkçesiyle Belge tipi; internet sayfaları hazırlarken sayfanızın hangi türe ait olduğunu internet tarayıcısına bildirmek amacıyla kullanılan bir bildirme etiketidir. Bu etiket sayesinde sayfanızı tasarlarken hangi HTML sürümünü kullandığınızı internet tarayıcılarına bildirebilir ve internet sitenizin tüm internet tarayıcılarında ideal görüntülenmesini sağlayabilirsiniz.


``` html
<!DOCTYPE html>

<html>

<head>

<title>Başlık - WM Aracı</title>

</head>

<body>

<a> Sayfa içeriği </a>

</body>

</html>
```


<b>HTML5 için Doctype kodu</b>

``` html
<!DOCTYPE html>
```
<b>Doctype HTML5</b>

HTML5 günümüz açısından standartlara hem en uygun hem de en çok kabul gören yeni nesil HTML sürümüdür. HTML5 ile kodlar artık eski standartlardan sıyrılıyor ve hem çok daha sade hem de kullanışlı bir hal alıyor. Yukarıda da örneklerini görmüş olduğunuz üzere HTML5 ile kodlanan bir sayfa için Doctype belirlemek son derece kolay ve zahmetsizdir. HTML5’de Doctype tanımlaması yapmak için html etiketinden önce !DOCTYPE html etiketini yazmanız, tarayıcılara sayfanın HTML5 standartlarıyla hazırlandığını bildirmek için yeterli olacaktır.


Doctype Nedir? Doctype HTML ve Doctype HTML5?


<b>XHTML nedir?</b>

XHTML, XML standartlarında yazılmış HTML dosyalarıdır.

<b>Neden XHTML?</b>

Çoğu web sayfasında HTML etiketleri düzgün kullanılmamaktadır.

Aşağıdaki HTML kodları tarayıcıda çalışacaktır.

``` html
<html>
<head>
<title>Hatalı HTML kullanımı</title>
<body>
 <h1>Bu bir başlık
<p>Bu bir paragraf
</body>
```

Fakat HTML kurallarına uyulmamıştır. Bazı tarayıcılar bilgisayarda çalışır bazıları cep telefonunda ya da diğer küçük cihazlarda çalışırlar. Tüm cihaz ve tarayıcılarda düzgün HTML görünümü için XHTML kullanılmalıdır.

``` html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Sayfa başlığı</title>
</head>
<body>
sayfa içeriği
</body>
</html>
```


<b>XHTML etiketleri düzgün olmalıdır.</b>

Aşağıdaki HTML etiketleri çalışacaktır fakat hatalı kullanılmıştır.

``` html
<b><i>Bu yazı kalın ve italik</b></i>
```

XHTML etiketleri kullanılması zorunludur.

``` html
<b><i>Bu yazı kalın ve italik</i></b>
```

<b>XHTML etiketleri kapatılmalıdır.</b>

Yanlış kullanım

``` html
  <p>Bu bir paragraf
  <p>Bu başka bir paragraf
```
Doğru kullanım

``` html
<p>Bu bir paragraf</p>
<p>Bu başka bir paragraf</p>
```

<b>XHTML özellikleri küçük harf ile yazılmalıdır.</b>

Yanlış kullanım

``` html
<table ID=tablo1>
```
Doğru kullanım

``` html
<table id="tablo1">
```
<b>XHTML özellikleri tırnak ile yazılmalıdır.</b>

Yanlış kullanım

``` html
<table ID=tablo1>
```
Doğru kullanım

``` html
<table id="tablo1">
```


HTML ile XHTML kullanımı


Javascript uygulamalarında herhangi bir veri tabanı kullanmıyorsak, Session Storage ve Local Storage'ı kullanabiliriz. Bu iki kavramın çalışma mantığı aynıdır.

<b>Farkları Nedir?</b>

Local Storage'ı kullandığımız zaman değerleri silmezsek eğer sabit olarak kalır. Browser'ı kapatsak bile silinmez. Session Storage ise oturum açık kaldığı sürece çalışır. Yani browser'ı kapattığımız zaman veriler silinir.


<b>Session Storage Kullanımı</b>


``` js
// Save data to sessionStorage
sessionStorage.setItem('key', 'value');

// Get saved data from sessionStorage
let data = sessionStorage.getItem('key');

// Remove saved data from sessionStorage
sessionStorage.removeItem('key');

// Remove all saved data from sessionStorage
sessionStorage.clear();
```

<b>Sayfa yenilemelerinde metin kaydetme</b>

Aşağıdaki örnek, bir metin alanının içeriğini otomatik olarak kaydeder ve tarayıcı yenilenirse, hiçbir yazının kaybolmaması için metin alanı içeriğini geri yükler.

``` js
// Get the text field that we're going to track
let field = document.getElementById("field");

// See if we have an autosave value
// (this will only happen if the page is accidentally refreshed)
if (sessionStorage.getItem("autosave")) {
  // Restore the contents of the text field
  field.value = sessionStorage.getItem("autosave");
}

// Listen for changes in the text field
field.addEventListener("change", function() {
  // And save the results into the session storage object
  sessionStorage.setItem("autosave", field.value);
});
```

<b>Local Storage Kullanımı</b>

``` js
myStorage = window.localStorage;
```

Aşağıdaki kod parçası, geçerli etki alanının Local Storage nesnesine erişir ve kullanarak ona bir veri ekler.

``` js
localStorage.setItem('myCat', 'Tom');
```

tanımlanan localStorage'ı görmek için:

``` js
const cat = localStorage.getItem('myCat');
```

localStorage ögeyi kaldırmak için:

``` js
localStorage.removeItem('myCat');
```

Tüm localStorage ögeleri kaldırmak için sözdizimi aşağıdaki gibidir:

``` js
localStorage.clear();
```


SessionStorage ve LocalStorage


<h3>Id ve Class arasındaki fark nedir?</h3>



<ul>
  <li>İkisininde nasıl kullanılacağını World Wide Web Consortium (W3C) topluluğu belirler.</li>
  <li>ID, kimlik anlamına gelir ve tekildir, eşi benzeri yoktur, örneğin bir sayfada id=”x” ise x ten bir tane vardır, sayfanın başka yerinde id=”x” kullanmanız hata almanız veya yanlış yapmanız demektir.
  </li>
  <li>Class ise Id nin gibi tek sefer kullanmak gerekmez, aynı sayfa içinde birden fazla kullanabilirsiniz.
  </li>
  <li>Class’ın birden fazla kullanılmasının amacı sayfa içerisinde farklı yerlerde aynı özelliklerde elementrler var ise tek noktadan özellikleri belirlenip yönetilebilir.
  </li>
  <li>Class ve Id kullanımı kod değiştirme ve yönetmede bizlere çok büyük kolaylıklar sağlar.
  </li>
  <li>Javascript ve CSS de class’lar “.” işareti ile gösterilirken IDler # işareti ile gösterilir.
  </li>
  <li>Div içerisinde ID ise id=”ozellik” şeklinde kullanılır.
  </li>

</ul>










Class ve Id


<ul>
  <li><b>static:</b> Hiçbir özellik belirtilmediyse
  </li>
  <li><b>fixed:</b>  Sabit, tarayıcıya göre hareket etmeyen element
  </li>
  <li><b>relative:</b>  Normal olması gereken pozisyona göre konum belirlemek
  </li>
  <li><b>absolute:</b>  Koordinat belirleyerek sayfada bir yere yerleştirmek
  </li>

</ul>


<h3>Relative</h3>

``` css
#Kutu {
border:1px solid black;
margin:0 auto;
width:100px;
}

.goreceliResim {
position:relative;
left:-20px;
}
```


goreceliResim stilinin uygulandığı bir resmi, Kutu isimli div elemanı içerisine yerleştirdiğimizde resim normalde olması gereken yerden 20px daha solda yerleşecektir.


<h3>Absolute</h3>

Bu tarz belirlenen pozisyonlar RELATIVE'den farklı olarak alan kaplamazlar. Yani sayfamızdan soyutlanmışlardır. Bağımsız hareket eden ve sadece tek bir başlangıç noktasını dikkate alan elementler gibi düşünülebilir.

"Absolute" özellikli elementler diğer elementlerin üzerine geçebilir ve onları kapayabilir. bulunduğu div yada div'ler içerisinde absolute yok ise bağımsız hareket eder.


``` css
h2
{
position: absolute;

      left: 100px;
      top: 150px;
}
```

relative özellik olmadığından body'e göre hareket eder.

<h3>Static</h3>

Position özelliği verilmemiş gibi davranır. Özellikleri sıfırlar.


<h3>Fixed</h3>

Position fixed özelliği genellikle header ile kullanılıyor. Yazdığımız html kodunun sabit kalması için kullanılır

``` css
   p.fixed
   {
      position: fixed;

      top: 30px;
      right: 5px;
   }
```

Yukarıdaki kod çalıştırılırsa "fixed" özelliğine sahip P elementinin sağdan 5 piksel üstten 30 piksel noktasında sabit bir şekilde kaldığını göreceğiz.

Bu tarz elementler bir diğerinin üzerine geçebilir ve diğerini kapatabilir.


<h3>z-index</h3>

CSS'de de z-index özelliği ile  bir HTML elementinin diğerinin üzerinde ya da altında görünmesini sağlayabiliriz.

``` css
img
{
position: absolute;

      left: 0px;
      top: 0px;

      z-index: -1;
}
```

Yukarıda -1 değeri ile belirttiğimiz resim diğer tüm elementlerin altında görünecektir. Çünkü diğer elementlerde bu değer belirtilmediyse 0 (sıfır) olarak algılanacaktır. Buna karşın bu element -1 olduğu için alt katman kabul edilecektir.

Negatif değerler en alt katmanı pozitif değerler üst katmanları ifade eder. Örneğin biri -2 biri -5 olan iki z-index özelliğine sahip elementten daha büyük olan -2 özelliğine sahip element daha üstte görünecektir.

Css Position ve z-index Özellikleri



<h3>Inline element</h3>

Aşağıdaki kodda her şey yan yana sıralanır. Buda inline element olduğunu gösterir.

``` html
lorem <a href="">link</a> <span>span</span> <b>bold</b> <i>italic</i>
```


<h3>Block element</h3>


``` html
<div>Div</div>
<p>Paragraf</p>
<h1>Başlık</h1>
```

Bu kodda html etiketleri  satır atlar.

<h3>İnline Block element</h3>

Block elemente width, height veremezsin ancak html etiketine inline-block özelliği eklersek width, height özelliklerini verebiliriz.

Block elements ve Inline elements


Next.js server side rendering yaparken kullanılan bir framework'tür. Next.js kullanmak istemeyip kendiniz yapmak isterseniz webpack, babel ve express ile ilgili tanımlamaları yapılandırmaları yapmamız gerekebilir.
Next.js ile uygulamalarımız hem daha performanslı hem de SEO uyumlu olmuş oluyor.

<b>SSR ve CSR</b>


Kelime anlamı olarak CSR (Client Side Rendering), yazdığımız kodların kullanıcı tarafında render edilmesi anlamına geliyor ki bununla alakalı yazının devamında söyleyeceklerim olacak. SSR (Server Side Rendering) ise yazdığımız kodların sunucu tarafında render edilmesi anlamına geliyor.

<b>Next.js bize neler sunuyor?</b>

Next’in varsayılan CSS yaklaşımı styled.jsx olarak adlandırılıyor. Yani stillendirmek istediğiniz elementin alt etiketini <style/> olarak belirleyerek üst elemente stil verebiliyorsunuz ve bu stillendirmelerin hepsini derleyerek tek bir dosya altında tutuyor. Yani basit mantıkla inline css yazıyorsunuz ama işiniz bittiğinde o sizin için bir style.css çıkartmış oluyor. Yani şu şekilde;

``` js
const MyComponent = _ =>
<div>
  <p>Alttaki stil sadece bu yazıya özeldir!</p>
  <style jsx>{`p { color: red; }`}</style>
</div>
```
HTML çıktısı ise şuna benzer bir şey oluyor;

``` js
<p data-jsx="123456789">Alttaki stil sadece bu yazıya özeldir!</p> <style>p[data-jsx="123456789"]</style>
```



<b>Routing / Pages</b>


Next.js’in sihirli işlerinden birisi de Route mantığı. Proje dizinindeki pages klasörü içerisine eklemiş olduğumuz her bir dosya tarayıcıda o isimle bir url oluşturuyor. Mesela ./pages/iletisim.js adında bir dosyanız varsa, hiç bir ek ayara gerek duymadan tarayıcınızdan siteadi.com/iletisim adresine gittiğinizde direkt olarak dosyaya ulaşmış oluyorsunuz.
Ayrıca dinamik parametreli bir url yapısına ihtiyacınız var ise o da şu şekilde;

``` js
/pages
∟ /users
∟ index.js
[username].js
```

Üstteki hiyerarşi de user klasörümüz ve altında bir de index bulunmakta. index.js içerisinde kullanıcı listemiz olduğu varsayarsak tarayıcımızdan siteadi.com/users adresine gittiğimizde kullanıcı listemizi ekrana basmış olacağız. Fakat içerisindeki kullanıcılara da dinamik olarak parametre ile erişmek istersek köşeli parantez yardımımıza koşuyor. Bu kullanım users klasörü altında dinamik değişken bir url yapımız olduğunu ve users/alicelebi şeklinde bir parametre isteği ile çalışması gerektiğini söylüyoruz.
Tüm bunların dışında bir de Next.js’in getInitialProps adında bir lifecycle hook’u bulunmakta. Bu sayede sayfalardan componentlere kolay bir şekilde props gönderebiliyorsunuz.

Code Splitting
Next.js otomatik olarak code splitting işlemini yapıyor. Peki nedir bu code splitting. Aslında çevirisine bakarsak ne olduğunu açıkça söylüyor. Kod bölme işlemi. Yani herhangi bir sayfanın sadece ihtiyacı olan kod bloklarını çalıştırıyor ve bunu her seferinde kendisi otomatik yapıyor.


Next.js nedir? Faydaları nelerdir?


---
title: A Long-expected Party
excerpt: Gandalf arrives in the Shire for Bilbo's Farewell Birthday Party. Bilbo leaves the Shire permanently.
date: "2021-03-02"
---

Placeat consequuntur ullam aut sapiente illo velit. Eius facere ut molestias totam laborum pariatur quam. Praesentium quo veritatis expedita animi.

Quite anything glass benefit. Such form clearly top tend can require my. Federal degree sort performance region maintain.

Ut dignissimos sapiente culpa rerum pariatur consequatur. Corporis suscipit ad corrupti aut. Expedita culpa aut deleniti officiis.

Porro eum id sit quia expedita. Alias expedita asperiores. Corporis ex eum atque cum ea.
