3. HTML’in Kısa Tarihi
• Tim Berners-Lee 1980 yılında CERN’de
çalışırken bilim insanları arasında dökümanların
rahatça paylaşılabilmesi için etkili bir yöntem
önerdi.
4. HTML’in Kısa Tarihi
• Tim Berners-Lee 1980 yılında CERN’de
çalışırken bilim insanları arasında dökümanların
rahatça paylaşılabilmesi için etkili bir yöntem
önerdi.
• 1984 yılında ENQUIRE’i geliştirdi ve birbirine
bağlı (hyper text) sayfalar ilk defa ortaya çıkmış
oldu.
5. HTML’in Kısa Tarihi
• Tim Berners-Lee 1980 yılında CERN’de
çalışırken bilim insanları arasında dökümanların
rahatça paylaşılabilmesi için etkili bir yöntem
önerdi.
• 1984 yılında ENQUIRE’i geliştirdi ve birbirine
bağlı (hyper text) sayfalar ilk defa ortaya çıkmış
oldu.
• 1990 yılında Robert Cailliau ile beraber World
Wide Web’i meydana getirdiler.
7. HTML nedir?
• Açılımı: Hiper metin işaretleme dili. (Hyper text markup language)
• Elementler (tag) HTML sayfalarının yapı taşlarıdır.
8. HTML nedir?
• Açılımı: Hiper metin işaretleme dili. (Hyper text markup language)
• Elementler (tag) HTML sayfalarının yapı taşlarıdır.
• Tarayıcılar elementleri göstermezler fakat sayfa içeriğini yorumlamak için
kullanırlar.
9. HTML nedir?
• Açılımı: Hiper metin işaretleme dili. (Hyper text markup language)
• Elementler (tag) HTML sayfalarının yapı taşlarıdır.
• Tarayıcılar elementleri göstermezler fakat sayfa içeriğini yorumlamak için
kullanırlar.
• İçeriğin (metnin) nasıl yapılandırıldığını tanımlar.
10. Detaylardan Önce Büyük Resim
Web Sunucu - Web Server
İstemci - Client - Web Tarayıcı
• HTTP ile konuşurum.
• Sadece HTML, CSS ve JS kodlarını
yorumlayabilirim.
• Chrome, Opera, Safari, IE, Edge
• HTTP ile konuşurum.
• PHP, Ruby, Java, Python, C# ve nihayet JS
(NodeJS) vb. kodlarıma göre istekleri
değerlendirip dönüş yaparım.
WWW
11. Detaylardan Önce Büyük Resim
Web Sunucu - Web Server
İstemci - Client - Web Tarayıcı
İstek - Request - Web sayfası lütfen?Yanıt - Response - İşte istediğin web sayfası - HTML
• HTTP ile konuşurum.
• Sadece HTML, CSS ve JS kodlarını
yorumlayabilirim.
• Chrome, Opera, Safari, IE, Edge
• HTTP ile konuşurum.
• PHP, Ruby, Java, Python, C# ve nihayet JS
(NodeJS) vb. kodlarıma göre istekleri
değerlendirip dönüş yaparım.
WWW
1
12. Detaylardan Önce Büyük Resim
Web Sunucu - Web Server
İstemci - Client - Web Tarayıcı
İstek - Request - Web sayfası lütfen?Yanıt - Response - İşte istediğin web sayfası - HTML
• HTTP ile konuşurum.
• Sadece HTML, CSS ve JS kodlarını
yorumlayabilirim.
• Chrome, Opera, Safari, IE, Edge
• HTTP ile konuşurum.
• PHP, Ruby, Java, Python, C# ve nihayet JS
(NodeJS) vb. kodlarıma göre istekleri
değerlendirip dönüş yaparım.
HTML dosyasındaki CSS, JS, resim ve fontlar lütfen?
Hemen gönderiyorum… CSS, JS, Font, Resim, Resim…
WWW
1
2
13. Element ve Attribute
• Element
• h1, h2, h3, div, p, a, span, head, body, header, footer, section, table…
14. Element ve Attribute
• Element
• h1, h2, h3, div, p, a, span, head, body, header, footer, section, table…
• <p>My first paragraph.</p>
15. Element ve Attribute
• Element
• h1, h2, h3, div, p, a, span, head, body, header, footer, section, table…
• <p>My first paragraph.</p>
• Bazı elemelerin kapanışı yoktur. <img /> ve <br> gibi…
16. Element ve Attribute
• Element
• h1, h2, h3, div, p, a, span, head, body, header, footer, section, table…
• <p>My first paragraph.</p>
• Bazı elemelerin kapanışı yoktur. <img /> ve <br> gibi…
• Attribute
• Elemenler hakkında ek bilgiler içerirler.
17. Element ve Attribute
• Element
• h1, h2, h3, div, p, a, span, head, body, header, footer, section, table…
• <p>My first paragraph.</p>
• Bazı elemelerin kapanışı yoktur. <img /> ve <br> gibi…
• Attribute
• Elemenler hakkında ek bilgiler içerirler.
• id, class, src, href, style, lang
18. Element ve Attribute
• Element
• h1, h2, h3, div, p, a, span, head, body, header, footer, section, table…
• <p>My first paragraph.</p>
• Bazı elemelerin kapanışı yoktur. <img /> ve <br> gibi…
• Attribute
• Elemenler hakkında ek bilgiler içerirler.
• id, class, src, href, style, lang
• <a href=“https://www.example.com">This is a link</a>
20. İlk HTML Sayfamız
<!-- döküman tipi HTML5'i işaret ediyor -->
<!DOCTYPE html>
<!-- html kök elementi, lang dil attribute ile birlikte -->
<html lang="en">
</html>
21. İlk HTML Sayfamız
<!-- döküman tipi HTML5'i işaret ediyor -->
<!DOCTYPE html>
<!-- html kök elementi, lang dil attribute ile birlikte -->
<html lang="en">
<!-- head elementi sayfa ile ilgili üst veriyi içerir, ekranda görüntülenmeyen kısımdır. --
>
<head>
</head>
</html>
22. İlk HTML Sayfamız
<!-- döküman tipi HTML5'i işaret ediyor -->
<!DOCTYPE html>
<!-- html kök elementi, lang dil attribute ile birlikte -->
<html lang="en">
<!-- head elementi sayfa ile ilgili üst veriyi içerir, ekranda görüntülenmeyen kısımdır. --
>
<head>
<!-- Sayfada kullandığımız karakter seti Universal - Transformation Format - 8 Bit -->
<meta charset="UTF-8">
</head>
</html>
23. İlk HTML Sayfamız
<!-- döküman tipi HTML5'i işaret ediyor -->
<!DOCTYPE html>
<!-- html kök elementi, lang dil attribute ile birlikte -->
<html lang="en">
<!-- head elementi sayfa ile ilgili üst veriyi içerir, ekranda görüntülenmeyen kısımdır. --
>
<head>
<!-- Sayfada kullandığımız karakter seti Universal - Transformation Format - 8 Bit -->
<meta charset="UTF-8">
<!-- responsive görünüm için gerekli meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
</html>
24. İlk HTML Sayfamız
<!-- döküman tipi HTML5'i işaret ediyor -->
<!DOCTYPE html>
<!-- html kök elementi, lang dil attribute ile birlikte -->
<html lang="en">
<!-- head elementi sayfa ile ilgili üst veriyi içerir, ekranda görüntülenmeyen kısımdır. --
>
<head>
<!-- Sayfada kullandığımız karakter seti Universal - Transformation Format - 8 Bit -->
<meta charset="UTF-8">
<!-- responsive görünüm için gerekli meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Internet Explorer 9 desteği için kullanılan meta tag -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
</html>
25. İlk HTML Sayfamız
<!-- döküman tipi HTML5'i işaret ediyor -->
<!DOCTYPE html>
<!-- html kök elementi, lang dil attribute ile birlikte -->
<html lang="en">
<!-- head elementi sayfa ile ilgili üst veriyi içerir, ekranda görüntülenmeyen kısımdır. --
>
<head>
<!-- Sayfada kullandığımız karakter seti Universal - Transformation Format - 8 Bit -->
<meta charset="UTF-8">
<!-- responsive görünüm için gerekli meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Internet Explorer 9 desteği için kullanılan meta tag -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- sayfa başlığı, tarayıcı penceresinde gözüken isim -->
<title>Document</title>
</head>
</html>
26. İlk HTML Sayfamız
<!-- döküman tipi HTML5'i işaret ediyor -->
<!DOCTYPE html>
<!-- html kök elementi, lang dil attribute ile birlikte -->
<html lang="en">
<!-- head elementi sayfa ile ilgili üst veriyi içerir, ekranda görüntülenmeyen kısımdır. -->
<head>
<!-- Sayfada kullandığımız karakter seti Universal - Transformation Format - 8 Bit -->
<meta charset="UTF-8">
<!-- responsive görünüm için gerekli meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Internet Explorer 9 desteği için kullanılan meta tag -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- sayfa başlığı, tarayıcı penceresinde gözüken isim -->
<title>Document</title>
</head>
<!-- tüm içeriği barındıracak olan body tag -->
<body>
</body>
</html>
27. İlk HTML Sayfamız
<!-- döküman tipi HTML5'i işaret ediyor -->
<!DOCTYPE html>
<!-- html kök elementi, lang dil attribute ile birlikte -->
<html lang="en">
<!-- head elementi sayfa ile ilgili üst veriyi içerir, ekranda görüntülenmeyen kısımdır. -->
<head>
<!-- Sayfada kullandığımız karakter seti Universal - Transformation Format - 8 Bit -->
<meta charset="UTF-8">
<!-- responsive görünüm için gerekli meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Internet Explorer 9 desteği için kullanılan meta tag -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- sayfa başlığı, tarayıcı penceresinde gözüken isim -->
<title>Document</title>
</head>
<!-- tüm içeriği barındıracak olan body tag -->
<body>
</body>
</html>
Herkes bir HTML sayfası oluştursun :)
29. Temel HTML Elementleri
<h1>Başlık 1</h1>
<h2>Başlık 2</h2>
<h3>Başlık 3</h3>
<h4>Başlık 3</h4>
<h5>Başlık 3</h5>
<h6>Başlık 3</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto asperiores, dolorem distinctio expedita nihil
tempora facere, sit, doloremque quas placeat temporibus eius deleniti id debitis libero excepturi neque similique
qui.</p>
30. Temel HTML Elementleri
<h1>Başlık 1</h1>
<h2>Başlık 2</h2>
<h3>Başlık 3</h3>
<h4>Başlık 3</h4>
<h5>Başlık 3</h5>
<h6>Başlık 3</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto asperiores, dolorem distinctio expedita nihil
tempora facere, sit, doloremque quas placeat temporibus eius deleniti id debitis libero excepturi neque similique
qui.</p>
<ul>
<li>2 yumurta</li>
<li>1 yemek kaşığı şeker</li>
<li>1 paket vanilya</li>
<li>2 su bardağı un</li>
</ul>
31. Temel HTML Elementleri
<h1>Başlık 1</h1>
<h2>Başlık 2</h2>
<h3>Başlık 3</h3>
<h4>Başlık 3</h4>
<h5>Başlık 3</h5>
<h6>Başlık 3</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto asperiores, dolorem distinctio expedita nihil
tempora facere, sit, doloremque quas placeat temporibus eius deleniti id debitis libero excepturi neque similique
qui.</p>
<ul>
<li>2 yumurta</li>
<li>1 yemek kaşığı şeker</li>
<li>1 paket vanilya</li>
<li>2 su bardağı un</li>
</ul>
<ol>
<li>100 metre yürü</li>
<li>ikinci sokaktan sola dön</li>
<li>50 metre ilerden metroya bin</li>
<li>2 durak sonra in</li>
</ol>
32. Temel HTML Elementleri
<h1>Başlık 1</h1>
<h2>Başlık 2</h2>
<h3>Başlık 3</h3>
<h4>Başlık 3</h4>
<h5>Başlık 3</h5>
<h6>Başlık 3</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto asperiores, dolorem distinctio expedita nihil
tempora facere, sit, doloremque quas placeat temporibus eius deleniti id debitis libero excepturi neque similique
qui.</p>
<ul>
<li>2 yumurta</li>
<li>1 yemek kaşığı şeker</li>
<li>1 paket vanilya</li>
<li>2 su bardağı un</li>
</ul>
<ol>
<li>100 metre yürü</li>
<li>ikinci sokaktan sola dön</li>
<li>50 metre ilerden metroya bin</li>
<li>2 durak sonra in</li>
</ol>
Kendi HTML elementlerinizi ekleyin :D
38. <a> Anchor Elementi
Absolute Path
<a href="http://www.example.com/index.html">Anasayfa</a>
Relative Path (Mevcut sayfadaki dizin ya da server üzerinde olduğumuz varsayılır.)
<a href="users.html">Kullanıcılar</a>
39. <a> Anchor Elementi
Absolute Path
<a href="http://www.example.com/index.html">Anasayfa</a>
Relative Path (Mevcut sayfadaki dizin ya da server üzerinde olduğumuz varsayılır.)
<a href="users.html">Kullanıcılar</a>
Target Blank Attribute (Yeni Sekmede Açmak İçin)
<a href="http://www.google.com" target="_blank" >Google</a>
40. <a> Anchor Elementi
Absolute Path
<a href="http://www.example.com/index.html">Anasayfa</a>
Relative Path (Mevcut sayfadaki dizin ya da server üzerinde olduğumuz varsayılır.)
<a href="users.html">Kullanıcılar</a>
Target Blank Attribute (Yeni Sekmede Açmak İçin)
<a href="http://www.google.com" target="_blank" >Google</a>
Mailto (E-Posta Göndermek İçin)
<a href=“mailto:example@gmail.com”>E-posta</a>
41. <a> Anchor Elementi
Absolute Path
<a href="http://www.example.com/index.html">Anasayfa</a>
Relative Path (Mevcut sayfadaki dizin ya da server üzerinde olduğumuz varsayılır.)
<a href="users.html">Kullanıcılar</a>
Target Blank Attribute (Yeni Sekmede Açmak İçin)
<a href="http://www.google.com" target="_blank" >Google</a>
Mailto (E-Posta Göndermek İçin)
<a href="mailto:example@gmail.com">E-posta</a>
Download Attribute (Dosya İndirme)
<a href="logo-taze.svg" download>Logoyu İndir</a>
42. <a> Anchor Elementi
Absolute Path
<a href="http://www.example.com/index.html">Anasayfa</a>
Relative Path (Mevcut sayfadaki dizin ya da server üzerinde olduğumuz varsayılır.)
<a href="users.html">Kullanıcılar</a>
Target Blank Attribute (Yeni Sekmede Açmak İçin)
<a href="http://www.google.com" target="_blank" >Google</a>
Mailto (E-Posta Göndermek İçin)
<a href="mailto:example@gmail.com">E-posta</a>
Download Attribute (Dosya İndirme)
<a href="logo-taze.svg" download>Logoyu İndir</a>
Çeşitli <a> elementlerini ekleyip test edin ^^
44. CSS - Cascading Style Sheets
• Basamaklandırılmış Stil Sayfaları
45. CSS - Cascading Style Sheets
• Basamaklandırılmış Stil Sayfaları
• HTML içeriği (metni) yapılandırır.
CSS ise bu yapılandırılmış içeriğin nasıl görüneceğini belirler.
46. CSS - Cascading Style Sheets
• Basamaklandırılmış Stil Sayfaları
• HTML içeriği (metni) yapılandırır.
CSS ise bu yapılandırılmış içeriğin nasıl görüneceğini belirler.
• Yazıların rengi ve büyüklüğü, boşluklar, sayfa düzeni, gölgeler, arkaplan
resimleri, kenarlıklar ve daha pek çok şey.
47. CSS - Cascading Style Sheets
• Basamaklandırılmış Stil Sayfaları
• HTML içeriği (metni) yapılandırır.
CSS ise bu yapılandırılmış içeriğin nasıl görüneceğini belirler.
• Yazıların rengi ve büyüklüğü, boşluklar, sayfa düzeni, gölgeler, arkaplan
resimleri, kenarlıklar ve daha pek çok şey.
selector {
property: value;
}
61. CSS Kurallarının Önceliği
• Sıralama olarak en son eklenen stil, öncekini ezer.
• Dolayısıyla stil dosyalarının yüklenme ve <style> elementlerinin eklenme
sırası önem taşır.
62. CSS Kurallarının Önceliği
• Sıralama olarak en son eklenen stil, öncekini ezer.
• Dolayısıyla stil dosyalarının yüklenme ve <style> elementlerinin eklenme
sırası önem taşır.
• Bu yüklenme sırasına Chrome Dev Tools > Elements > Styles bölümünden
bakabiliriz.
63. CSS Kurallarının Önceliği
• Sıralama olarak en son eklenen stil, öncekini ezer.
• Dolayısıyla stil dosyalarının yüklenme ve <style> elementlerinin eklenme
sırası önem taşır.
• Bu yüklenme sırasına Chrome Dev Tools > Elements > Styles bölümünden
bakabiliriz.
• inline stiller teknik olarak elemente en son eklendiği için önceki stilleri
ezecektir. (Mecbur kalınmadıkça kullanılmamalı.)
64. CSS Kurallarının Önceliği
• Sıralama olarak en son eklenen stil, öncekini ezer.
• Dolayısıyla stil dosyalarının yüklenme ve <style> elementlerinin eklenme
sırası önem taşır.
• Bu yüklenme sırasına Chrome Dev Tools > Elements > Styles bölümünden
bakabiliriz.
• inline stiller teknik olarak elemente en son eklendiği için önceki stilleri
ezecektir. (Mecbur kalınmadıkça kullanılmamalı.)
• !important kullanılan stil deklerasyonu, sıralamaya bakmaksızın tüm stilleri
ezip kendi değerini uygular. (Mecbur kalınmadıkça kullanılmamalı.)
69. Hexadecimal Sayılarla Renkler
a {
color: #7403AB;
}
• 256 x 256 x 256 = 16,777,216 Adet Farklı Renk
• Dev Tools Color Picker’a biraz göz atalım.
70. Block Level vs Inline Level
• Block Level Elementler:
• Müsait olan tüm genişliği kaplar.
71. Block Level vs Inline Level
• Block Level Elementler:
• Müsait olan tüm genişliği kaplar.
• Kendinden sonra gelen elementler önceki elementin altına yerleşir.
72. Block Level vs Inline Level
• Block Level Elementler:
• Müsait olan tüm genişliği kaplar.
• Kendinden sonra gelen elementler önceki elementin altına yerleşir.
• h1, p, div, ul, li, body block level elemenlere örnektir.
73. Block Level vs Inline Level
• Block Level Elementler:
• Müsait olan tüm genişliği kaplar.
• Kendinden sonra gelen elementler önceki elementin altına yerleşir.
• h1, p, div, ul, li, body block level elemenlere örnektir.
• Inline Level Elementler:
• İçeriği kadar alan kaplar.
74. Block Level vs Inline Level
• Block Level Elementler:
• Müsait olan tüm genişliği kaplar.
• Kendinden sonra gelen elementler önceki elementin altına yerleşir.
• h1, p, div, ul, li, body block level elemenlere örnektir.
• Inline Level Elementler:
• İçeriği kadar alan kaplar.
• a, img, input, label inline level elementlere örnektir.
87. CSS Reset
html, body, h1, h2, h3, h4, h5,
h6, p, ol, ul, li, a {
padding: 0;
border: 0;
margin: 0;
}
• Varsayılan tarayıcı stillerini sıfırlamak için bir dizi reset stili elementlere uygulanır.
88. CSS Reset
html, body, h1, h2, h3, h4, h5,
h6, p, ol, ul, li, a {
padding: 0;
border: 0;
margin: 0;
}
• Varsayılan tarayıcı stillerini sıfırlamak için bir dizi reset stili elementlere uygulanır.
• Dökümana ilk eklenmesi gereken stiller bunlardır.
89. CSS Reset
html, body, h1, h2, h3, h4, h5,
h6, p, ol, ul, li, a {
padding: 0;
border: 0;
margin: 0;
}
• Varsayılan tarayıcı stillerini sıfırlamak için bir dizi reset stili elementlere uygulanır.
• Dökümana ilk eklenmesi gereken stiller bunlardır.
• Normalize CSS bu iş için idealdir.
90. CSS Reset
html, body, h1, h2, h3, h4, h5,
h6, p, ol, ul, li, a {
padding: 0;
border: 0;
margin: 0;
}
• Varsayılan tarayıcı stillerini sıfırlamak için bir dizi reset stili elementlere uygulanır.
• Dökümana ilk eklenmesi gereken stiller bunlardır.
• Normalize CSS bu iş için idealdir.
Siz de kendi reset stilleriniz CSS dosyanızın en üstüne ekleyiniz.
95. CSS - Class Selector
.products li {
border-bottom: 5px solid #54AB56;
padding: 10px;
color: red;
font-size: 20px;
margin-bottom: 20px;
}
<ul class="products" >
<li>product 1</li>
<li>product 2</li>
<li>product 3</li>
<li>product 4</li>
</ul>
ul li {
font-family: 'Roboto', sans-serif;
font-size: 18px;
font-weight: bold;
line-height: 1.6;
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
Benzer bir HTML yapısı oluşturup kendi stillerinizi class kullanarak veriniz :)
96. <div> Elementi
• <div></div> elementi içine eklenen elementleri diğerlerinden ayırarak web
sayfamızdaki elementleri gruplamamıza olanak sağlar.
97. <div> Elementi
• <div></div> elementi içine eklenen elementleri diğerlerinden ayırarak web
sayfamızdaki elementleri gruplamamıza olanak sağlar.
• Bir kutu olarak düşünebiliriz.
98. <div> Elementi
• <div></div> elementi içine eklenen elementleri diğerlerinden ayırarak web
sayfamızdaki elementleri gruplamamıza olanak sağlar.
• Bir kutu olarak düşünebiliriz.
• Box model’de block level elementtir.
99. <div> Elementi
• <div></div> elementi içine eklenen elementleri diğerlerinden ayırarak web
sayfamızdaki elementleri gruplamamıza olanak sağlar.
• Bir kutu olarak düşünebiliriz.
• Box model’de block level elementtir.
• Dolayısıyla width, height gibi CSS özellikleri alabilir.
100. Element ve İçeriklerinin Ortalanması
<div class="main-content">
<h1>Main Header</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo, laboriosam eum reiciendis
asperiores sapiente, sunt
fugit officia praesentium dolor numquam veritatis quasi iste? Corrupti quas dolores veniam
temporibus, itaque
laboriosam.
</p>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</div>
101. Element ve İçeriklerinin Ortalanması
<div class="main-content">
<h1>Main Header</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo, laboriosam eum reiciendis
asperiores sapiente, sunt
fugit officia praesentium dolor numquam veritatis quasi iste? Corrupti quas dolores veniam
temporibus, itaque
laboriosam.
</p>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</div>
.main-content {
width: 1170px;
padding: 15px;
margin: 50px auto;
}
102. Element ve İçeriklerinin Ortalanması
<div class="main-content">
<h1>Main Header</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo, laboriosam eum reiciendis
asperiores sapiente, sunt
fugit officia praesentium dolor numquam veritatis quasi iste? Corrupti quas dolores veniam
temporibus, itaque
laboriosam.
</p>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</div>
.main-content {
width: 1170px;
padding: 15px;
margin: 50px auto;
}
Sabit genişlikteki bir elementi,
sağdan ve soldan eşit ve otomatik genişlikte boşluk bırakarak ortaladık.
margin-left: auto; margin-right: auto;
103. Element ve İçeriklerinin Ortalanması
<div class="main-content">
<h1>Main Header</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo, laboriosam eum reiciendis
asperiores sapiente, sunt
fugit officia praesentium dolor numquam veritatis quasi iste? Corrupti quas dolores veniam
temporibus, itaque
laboriosam.
</p>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</div>
.main-content {
width: 1170px;
padding: 15px;
margin: 50px auto;
}
Sabit genişlikteki bir elementi,
sağdan ve soldan eşit ve otomatik genişlikte boşluk bırakarak ortaladık.
margin-left: auto; margin-right: auto;
Şimdi birlikte deneyelim
104. Element ve İçeriklerinin Ortalanması
• text-align css özelliği ile elementlerin içindeki inline olan her şeyi
hizalayabiliriz.
105. Element ve İçeriklerinin Ortalanması
• text-align css özelliği ile elementlerin içindeki inline olan her şeyi
hizalayabiliriz.
• Buna inline, inline-block elementler ve yazılar dahildir.
106. Element ve İçeriklerinin Ortalanması
• text-align css özelliği ile elementlerin içindeki inline olan her şeyi
hizalayabiliriz.
• Buna inline, inline-block elementler ve yazılar dahildir.
<h1 class="heading">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>
107. Element ve İçeriklerinin Ortalanması
• text-align css özelliği ile elementlerin içindeki inline olan her şeyi
hizalayabiliriz.
• Buna inline, inline-block elementler ve yazılar dahildir.
<h1 class="heading">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>
h1 {
text-align: left;
}
108. Element ve İçeriklerinin Ortalanması
• text-align css özelliği ile elementlerin içindeki inline olan her şeyi
hizalayabiliriz.
• Buna inline, inline-block elementler ve yazılar dahildir.
<h1 class="heading">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>
h1 {
text-align: center;
}
h1 {
text-align: left;
}
109. Element ve İçeriklerinin Ortalanması
• text-align css özelliği ile elementlerin içindeki inline olan her şeyi
hizalayabiliriz.
• Buna inline, inline-block elementler ve yazılar dahildir.
<h1 class="heading">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>
h1 {
text-align: center;
}
h1 {
text-align: left;
}
h1 {
text-align: right;
}
110. Element ve İçeriklerinin Ortalanması
• text-align css özelliği ile elementlerin içindeki inline olan her şeyi
hizalayabiliriz.
• Buna inline, inline-block elementler ve yazılar dahildir.
<h1 class="heading">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>
h1 {
text-align: center;
}
h1 {
text-align: left;
}
h1 {
text-align: right;
}
h1 {
text-align: justify;
}
111. Element ve İçeriklerinin Ortalanması
• text-align css özelliği ile elementlerin içindeki inline olan her şeyi
hizalayabiliriz.
• Buna inline, inline-block elementler ve yazılar dahildir.
<h1 class="heading">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>
h1 {
text-align: center;
}
h1 {
text-align: left;
}
h1 {
text-align: right;
}
h1 {
text-align: justify;
}
Sıra sizde!
113. Resimler - Images - <img/>
• İçerik resimleri (Content images)
• Sitedeki metin (text) içerikler kadar önemlidir.
114. Resimler - Images - <img/>
• İçerik resimleri (Content images)
• Sitedeki metin (text) içerikler kadar önemlidir.
• SEO için önem taşır.
115. Resimler - Images
• İçerik resimleri (Content images)
• Sitedeki metin (text) içerikler kadar önemlidir.
• SEO için önem taşır.
Content Image
HTML <img /> elementi ile eklenir.
Content Images - Thumbnail
117. Resimler - Images
• Sayfa düzeni resimleri (Layout
images)
• Daha çok tasarım maksatlı
kullanılan, sitenin içeriğini
anlamamızı doğrudan
etkilemeyen resimlerdir.
118. Resimler - Images
• Sayfa düzeni resimleri (Layout
images)
• Daha çok tasarım maksatlı
kullanılan, sitenin içeriğini
anlamamızı doğrudan
etkilemeyen resimlerdir.
• Sitenin anlatımını ya da
tasarımı güçlendirir.
119. Resimler - Images
• Sayfa düzeni resimleri (Layout
images)
• Daha çok tasarım maksatlı
kullanılan, sitenin içeriğini
anlamamızı doğrudan
etkilemeyen resimlerdir.
• Sitenin anlatımını ya da
tasarımı güçlendirir.
• Sayfaya arkaplan
(background) resmi olarak
uygulanmalıdır.
120. Resimler - Images
• Sayfa düzeni resimleri (Layout
images)
• Daha çok tasarım maksatlı
kullanılan, sitenin içeriğini
anlamamızı doğrudan
etkilemeyen resimlerdir.
• Sitenin anlatımını ya da
tasarımı güçlendirir.
• Sayfaya arkaplan
(background) resmi olarak
uygulanmalıdır.
Layout Image
CSS background özelliği ile eklenir.
123. Resimler - Images
• Kullanıcı arayüzü resimleri (UI Images)
• Bunlar ikonlardır. (icon)
• Sayfa arayüzünde yardımcı olarak kullanılırlar.
124. Resimler - Images
• Kullanıcı arayüzü resimleri (UI Images)
• Bunlar ikonlardır. (icon)
• Sayfa arayüzünde yardımcı olarak kullanılırlar.
• İçeriğin anlatımına doğrudan katkı sağlamazlar.
125. Resimler - Images
<img src="img/urun-1.jpg" alt="DSLR Fotoğraf Makinesi">
source - dosya kaynağı
126. Resimler - Images
<img src="img/urun-1.jpg" alt="DSLR Fotoğraf Makinesi">
source - dosya kaynağı
alternative text
Erişilebilirlik maksatlı eklenmelidir.
127. Resimler - Images
<img src="img/urun-1.jpg" alt="DSLR Fotoğraf Makinesi">
source - dosya kaynağı
alternative text
Erişilebilirlik maksatlı eklenmelidir.
Sıra sizde, sayfanıza en az bir resim ekleyin
128. Arka Plan Resimleri-Background Images
.main-content {
background-color: #7403AB;
background-image: url("../img/hideout.svg");
background-position: top left;
background-size: 30px;
background-repeat: repeat;
}
129. Arka Plan Resimleri-Background Images
.main-content {
background-color: #7403AB;
background-image: url("../img/hideout.svg");
background-position: top left;
background-size: 30px;
background-repeat: repeat;
}
.main-content {
background: #7403AB url("../img/hideout.svg") top left/30px repeat;
}
130. Floating Elements - Kayan Elementler
• Bazen ardışık inline level (img), block level (h1, div, p) ya da yalnızca block
level (div) elementleri sayfada yan yana konumlandırmak isteyebiliriz.
131. Floating Elements - Kayan Elementler
• Bazen ardışık inline level (img), block level (h1, div, p) ya da yalnızca block
level (div) elementleri sayfada yan yana konumlandırmak isteyebiliriz.
• Bunun için CSS float özelliğinden faydalanabiliriz.
132. Floating Elements - Kayan Elementler
• Bazen ardışık inline level (img), block level (h1, div, p) ya da yalnızca block
level (div) elementleri sayfada yan yana konumlandırmak isteyebiliriz.
• Bunun için CSS float özelliğinden faydalanabiliriz.
<div class="img-box">
<img src="img/logo-taze.svg" alt="Taze Logo">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis esse corrupti earum voluptatum pariatur hic,
quibusdam deleniti quidem odit quas cupiditate voluptates doloribus incidunt, quaerat laboriosam sequi quod.
Quidem, magni.</p>
</div>
133. Floating Elements - Kayan Elementler
• Bazen ardışık inline level (img), block level (h1, div, p) ya da yalnızca block
level (div) elementleri sayfada yan yana konumlandırmak isteyebiliriz.
• Bunun için CSS float özelliğinden faydalanabiliriz.
<div class="img-box">
<img src="img/logo-taze.svg" alt="Taze Logo">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis esse corrupti earum voluptatum pariatur hic,
quibusdam deleniti quidem odit quas cupiditate voluptates doloribus incidunt, quaerat laboriosam sequi quod.
Quidem, magni.</p>
</div>
.img-box img {
width: 200px;
float: left;
}
134. Floating Elements - Kayan Elementler
• Bazen ardışık inline level (img), block level (h1, div, p) ya da yalnızca block
level (div) elementleri sayfada yan yana konumlandırmak isteyebiliriz.
• Bunun için CSS float özelliğinden faydalanabiliriz.
<div class="img-box">
<img src="img/logo-taze.svg" alt="Taze Logo">
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis esse corrupti earum voluptatum pariatur hic,
quibusdam deleniti quidem odit quas cupiditate voluptates doloribus incidunt, quaerat laboriosam sequi quod.
Quidem, magni.</p>
</div>
.img-box img {
width: 200px;
float: left;
}
float: right;
float: none;
float: inherit;
135. Floating Elements - Kayan Elementler
<div class="box">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam animi ratione, provident cum optio veritatis omnis
tenetur aut sint officia! Molestiae repellendus rerum in praesentium? Molestiae sed amet quae itaque?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam animi ratione, provident cum optio veritatis omnis
tenetur aut sint officia! Molestiae repellendus rerum in praesentium? Molestiae sed amet quae itaque?</p>
</div>
.box p {
width: 500px;
float: left;
}
Problem?
.box’dan sonra gelen elementler de kaymaya başladı.
136. Floating Elements - Kayan Elementler
<div class="box">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam animi ratione, provident cum optio
tenetur aut sint officia! Molestiae repellendus rerum in praesentium? Molestiae sed amet quae itaque?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam animi ratione, provident
tenetur aut sint officia! Molestiae repellendus rerum in praesentium? Molestiae sed amet quae itaque?</p>
<div class="clearfix"></div>
</div>
Çözüm
137. Floating Elements - Kayan Elementler
<div class="box">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam animi ratione, provident cum optio
tenetur aut sint officia! Molestiae repellendus rerum in praesentium? Molestiae sed amet quae itaque?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam animi ratione, provident
tenetur aut sint officia! Molestiae repellendus rerum in praesentium? Molestiae sed amet quae itaque?</p>
<div class="clearfix"></div>
</div>
.box .clearfix {
clear: both;
}
Çözüm
138. Floating Elements - Kayan Elementler
<div class="box">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam animi ratione, provident cum optio veritatis omnis
tenetur aut sint officia! Molestiae repellendus rerum in praesentium? Molestiae sed amet quae itaque?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam animi ratione, provident cum optio veritatis omnis
tenetur aut sint officia! Molestiae repellendus rerum in praesentium? Molestiae sed amet quae itaque?</p>
</div>
Çözüm 2
139. Floating Elements - Kayan Elementler
<div class="box">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam animi ratione, provident cum optio veritatis omnis
tenetur aut sint officia! Molestiae repellendus rerum in praesentium? Molestiae sed amet quae itaque?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam animi ratione, provident cum optio veritatis omnis
tenetur aut sint officia! Molestiae repellendus rerum in praesentium? Molestiae sed amet quae itaque?</p>
</div>
.box {
overflow: auto;
}
Scrollbar çıkabilir, çünkü overflow scrollbar’ın belirmesi özelliğini kontrol eder.
Çözüm 2
140. Floating Elements - Kayan Elementler
<div class="box">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam animi ratione, provident cum optio veritatis omnis
tenetur aut sint officia! Molestiae repellendus rerum in praesentium? Molestiae sed amet quae itaque?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam animi ratione, provident cum optio veritatis omnis
tenetur aut sint officia! Molestiae repellendus rerum in praesentium? Molestiae sed amet quae itaque?</p>
</div>
.box::after {
content: '';
display: table;
clear: both;
}
Daha temiz ve modern bir çözüm mümkün
Pseudo Element ::before ve ::after
Çözüm 3
141. Floating Elements - Kayan Elementler
<div class="box">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam animi ratione, provident cum optio veritatis omnis
tenetur aut sint officia! Molestiae repellendus rerum in praesentium? Molestiae sed amet quae itaque?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam animi ratione, provident cum optio veritatis omnis
tenetur aut sint officia! Molestiae repellendus rerum in praesentium? Molestiae sed amet quae itaque?</p>
</div>
.box::after {
content: '';
display: table;
clear: both;
}
Daha temiz ve modern bir çözüm mümkün
Pseudo Element ::before ve ::after
Çözüm 3
Egzersiz, egzersiz, egzersiz!…
143. Fontlar
• Comic Sans kullanmayın :D
• Fontları ve font stillerini CSS ile kontrol ederiz.
144. Fontlar
• Comic Sans kullanmayın :D
• Fontları ve font stillerini CSS ile kontrol ederiz.
body {
font-family: 'Source Sans', Verdana, sans-serif;
}
145. Fontlar
• Comic Sans kullanmayın :D
• Fontları ve font stillerini CSS ile kontrol ederiz.
body {
font-family: 'Source Sans', Verdana, sans-serif;
}
Yedek fontlar
146. Fontlar
• Comic Sans kullanmayın :D
• Fontları ve font stillerini CSS ile kontrol ederiz.
body {
font-family: 'Source Sans', Verdana, sans-serif;
}
.box p {
font-weight: bold;
font-size: 20px;
font-style: italic;
text-transform: uppercase;
line-height: 30px;
}
Yedek fontlar
147. Fontlar
• Comic Sans kullanmayın :D
• Fontları ve font stillerini CSS ile kontrol ederiz.
body {
font-family: 'Source Sans', Verdana, sans-serif;
}
.box p {
font-weight: bold;
font-size: 20px;
font-style: italic;
text-transform: uppercase;
line-height: 30px;
}
Yedek fontlar
Bu sayıları da kullanabiliriz
148. Fontlar
• Comic Sans kullanmayın :D
• Fontları ve font stillerini CSS ile kontrol ederiz.
body {
font-family: ‘Cihan Sans', Verdana, sans-serif;
}
.box p {
font-weight: bold;
font-size: 20px;
font-style: italic;
text-transform: uppercase;
line-height: 30px;
}
Yedek fontlar
Bu sayıları da kullanabiliriz
px, %, em, rem gibi unit yani birimler mevcut
149. Formlar - Forms (Bitiyor…)
• Formlar server ile etkileşime geçip veri göndermemizi sağlar.
• Basit bir form:
<form>
<label for="user-name">Kullanıcı Adı:</label>
<input id="user-name" type="text" placeholder="Adınız giriniz.">
<input type="submit" value="Gönder">
</form>
<form>
<label for="user-name">Kullanıcı Adı:</label>
<input id="user-name" type="text" placeholder="Adınız giriniz.">
<button type="submit">Gönder</button>
</form>
ya da
150. Formlar - Forms (Bitiyor…)
• Formlar server ile etkileşime geçip veri göndermemizi sağlar.
• En çok kullanılan form elementleri:
<input type="text">
<input type="number">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="password">
<input type="submit">
151. Formlar - Forms (Bitiyor…)
• Formlar server ile etkileşime geçip veri göndermemizi sağlar.
• En çok kullanılan form elementleri:
<input type="text">
<input type="number">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="password">
<input type="submit">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
152. Formlar - Forms (Bitiyor…)
• Formlar server ile etkileşime geçip veri göndermemizi sağlar.
• En çok kullanılan form elementleri:
<input type="text">
<input type="number">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="password">
<input type="submit">
<textarea>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed, ex. Molestiae nemo architecto
earum nesciunt quibusdam incidunt
ratione aut culpa quisquam, eius natus tempora ut provident a perferendis? Nesciunt, libero.
</textarea>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
158. HTML5 Elementleri
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future
in which humans live
in harmony with nature.</p>
</article>
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future
in which humans live
in harmony with nature.</p>
</article>
159. HTML5 Elementleri
<nav class="main-nav">
<ul class="main-menu">
<li class="menu-item">
<a class="menu-link" href="/html/">HTML</a>
</li>
<li class="menu-item">
<a class="menu-link" href="/css/">CSS</a>
</li>
<li class="menu-item">
<a class="menu-link" href="/js/">JavaScript</a>
</li>
<li class="menu-item">
<a class="menu-link" href="/jquery/">jQuery</a>
</li>
</ul>
</nav>
Çoğu sitede kullanılan gerçek bir menü yapısı
161. Neden Semantic Web?
• With HTML4, developers used their own id/class names to style elements: header, top,
bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, etc.
162. Neden Semantic Web?
• With HTML4, developers used their own id/class names to style elements: header, top,
bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, etc.
• This made it impossible for search engines to identify the correct web page content.
163. Neden Semantic Web?
• With HTML4, developers used their own id/class names to style elements: header, top,
bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, etc.
• This made it impossible for search engines to identify the correct web page content.
• With the new HTML5 elements (<header> <footer> <nav> <section> <article>), this
will become easier.
164. Neden Semantic Web?
• With HTML4, developers used their own id/class names to style elements: header, top,
bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, etc.
• This made it impossible for search engines to identify the correct web page content.
• With the new HTML5 elements (<header> <footer> <nav> <section> <article>), this
will become easier.
• According to the W3C, a Semantic Web: "Allows data to be shared and reused across
applications, enterprises, and communities.”
165. Neden Semantic Web?
• With HTML4, developers used their own id/class names to style elements: header, top,
bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, etc.
• This made it impossible for search engines to identify the correct web page content.
• With the new HTML5 elements (<header> <footer> <nav> <section> <article>), this
will become easier.
• According to the W3C, a Semantic Web: "Allows data to be shared and reused across
applications, enterprises, and communities.”
Verinin uygulamalar, kurumlar ve topluluklar tarafından paylaşılıp kullanılmasına olanak tanır.
166. Neden Semantic Web?
• With HTML4, developers used their own id/class names to style elements: header, top,
bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, etc.
• This made it impossible for search engines to identify the correct web page content.
• With the new HTML5 elements (<header> <footer> <nav> <section> <article>), this
will become easier.
• According to the W3C, a Semantic Web: "Allows data to be shared and reused across
applications, enterprises, and communities.”
Verinin uygulamalar, kurumlar ve topluluklar tarafından paylaşılıp kullanılmasına olanak tanır.
En Özet: Web’i öyle bir tasarlayalım ki makineler de insanlar da anlasın ve kullansın.
167. - SON -
Dinlediğiniz İçin Teşekkürler
Cihan BARAN
Front-End Developer
-
Takibe takip
twitter.com/c1hanbaran
instagram.com/c1hanbaran