SlideShare a Scribd company logo
Temel HTML ve CSS - Cihan BARAN
HTML
Hyper Text Markup Language
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.
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.
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.
HTML nedir?
• Açılımı: Hiper metin işaretleme dili. (Hyper text markup language)
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.
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.
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.
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
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
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
Element ve Attribute
• Element
• h1, h2, h3, div, p, a, span, head, body, header, footer, section, table…
Element ve Attribute
• Element
• h1, h2, h3, div, p, a, span, head, body, header, footer, section, table…

• <p>My first paragraph.</p>
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…
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.
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
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>
İlk HTML Sayfamız
<!-- döküman tipi HTML5'i işaret ediyor -->
<!DOCTYPE html>
İ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>
İ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>
İ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>
İ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>
İ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>
İ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>
İ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>
İ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 :)
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>
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>
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>
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>
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
Elementler Arası İlişkiler
<html>
<head></head>
<body>
<ul>

<li>2 yumurta</li>
<li>1 yemek kaşığı şeker</li>
<li>1 paket vanilya</li>
<li>2 su bardağı un</li>
</ul>
</body>
</html>
•html kök element. (root)
Elementler Arası İlişkiler
<html>
<head></head>
<body>
<ul>

<li>2 yumurta</li>
<li>1 yemek kaşığı şeker</li>
<li>1 paket vanilya</li>
<li>2 su bardağı un</li>
</ul>
</body>
</html>
•html kök element. (root)
•ul li’lerin ebeveyn (parent) elementi.
Elementler Arası İlişkiler
<html>
<head></head>
<body>
<ul>

<li>2 yumurta</li>
<li>1 yemek kaşığı şeker</li>
<li>1 paket vanilya</li>
<li>2 su bardağı un</li>
</ul>
</body>
</html>
•html kök element. (root)
•ul li’lerin ebeveyn (parent) elementi.
•li’ler ul’nin çocukları (children) elementi.
Elementler Arası İlişkiler
<html>
<head></head>
<body>
<ul>

<li>2 yumurta</li>
<li>1 yemek kaşığı şeker</li>
<li>1 paket vanilya</li>
<li>2 su bardağı un</li>
</ul>
</body>
</html>
•html kök element. (root)
•ul li’lerin ebeveyn (parent) elementi.
•li’ler ul’nin çocukları (children) elementi.
•li’ler birbirlerinin kardeşleri. (sibling)
<a> Anchor Elementi
Absolute Path
<a href="http://www.example.com/index.html">Anasayfa</a>
<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>
<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>
<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>
<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>
<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 ^^
CSS
Cascading Style Sheets
CSS - Cascading Style Sheets
• Basamaklandırılmış Stil Sayfaları
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.
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.
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;
}
CSS - Cascading Style Sheets
p {
color: red;
}
CSS - Cascading Style Sheets
p {
color: red;
}
p {
color: red;
text-decoration: underline;
}
CSS - Cascading Style Sheets
p {
color: red;
}
p {
color: red;
text-decoration: underline;
}
a {
color: blue;
}
CSS - Cascading Style Sheets
p {
color: red;
}
p {
color: red;
text-decoration: underline;
}
a {
color: blue;
}
ul li {
text-align: center;
}
Descendent Selector
CSS - Cascading Style Sheets
p {
color: red;
}
p {
color: red;
text-decoration: underline;
}
a {
color: blue;
}
ul li {
text-align: center;
}
a:hover {
color: red;
}
Descendent Selector
CSS - Cascading Style Sheets
p {
color: red;
}
p {
color: red;
text-decoration: underline;
}
a {
color: blue;
}
ul li {
text-align: center;
}
a:hover {
color: red;
}
ul li:first-child {
text-align: left;
}
Descendent Selector
Pseudo Selector
CSS’i nasıl ekleriz?<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
a {
color: #7403AB;
}
a:hover {
color: red;
}
ul li {
text-align: center;
}
ul li:first-child {
text-align: left;
}
</style>
</head>
<body>
</body>
</html>
Internal
CSS’i nasıl ekleriz?<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
a {
color: #7403AB;
}
a:hover {
color: red;
}
ul li {
text-align: center;
}
ul li:first-child {
text-align: left;
}
</style>
</head>
<body>
</body>
</html>
Internal
Önceden eklediğimiz elementlere biraz stil verelim.
CSS’i nasıl ekleriz?
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>
External
CSS’i nasıl ekleriz?
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>
External
Stilleri external dosyaya taşıyalım…
CSS’i nasıl ekleriz?
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 style="font-size: 50px; color: blue;”>Başlık 1</h1>
</body>
</html>
Inline
CSS’i nasıl ekleriz?
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 style="font-size: 50px; color: blue;”>Başlık 1</h1>
</body>
</html>
Inline
Kendi inline stillerinizi ekleyiniz ^^
CSS Kurallarının Önceliği
• Sıralama olarak en son eklenen stil, öncekini ezer.
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.
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.
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ı.)
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ı.)
CSS - !important
p {
font-size: 30px !important;
}
Hepsini döver
Hexadecimal Sayılarla Renkler
a {
color: #7403AB;
}
Hexadecimal Sayılarla Renkler
a {
color: #7403AB;
}
Hexadecimal Sayılarla Renkler
a {
color: #7403AB;
}
• 256 x 256 x 256 = 16,777,216 Adet Farklı Renk
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.
Block Level vs Inline Level
• Block Level Elementler: 

• Müsait olan tüm genişliği kaplar.
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.
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.
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.
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.
Box Model
Box Model - Padding
p {
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;
}
Box Model - Padding
p {
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;
}
p {
padding: 50px 30px;
}
top, bottom
right, left
Box Model - Padding
p {
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;
}
p {
padding: 50px
}
p {
padding: 50px 30px;
}
top, right, bottom, left
top, bottom
right, left
Box Model - Padding
p {
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;
}
p {
padding: 50px
}
p {
padding: 50px 30px;
}
p {
padding: 50px 30px 100px;
}
top, right, bottom, left
top, bottom
right, left
top
bottom
right, left
Box Model - Margin
p {
margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 50px;
}
p {
margin: 50px
}
p {
margin: 50px 30px;
}
p {
margin: 50px 30px 100px;
}
top, right, bottom, left
top, bottom
right, left
top
bottom
right, left
Box Model - Border
p {
border-width: 5px;
border-style: solid;
border-color: red;
}
Box Model - Border
p {
border-width: 5px;
border-style: solid;
border-color: red;
}
p {
border-width-bottom: 5px;
border-style-bottom: solid;
border-color-bottom: red;
}
Box Model - Border
p {
border-width: 5px;
border-style: solid;
border-color: red;
}
p {
border: 5px solid red;
}
p {
border-width-bottom: 5px;
border-style-bottom: solid;
border-color-bottom: red;
}
Box Model - Border
p {
border-width: 5px;
border-style: solid;
border-color: red;
}
p {
border: 5px solid red;
}
p {
border-bottom: 5px solid red;
}
p {
border-width-bottom: 5px;
border-style-bottom: solid;
border-color-bottom: red;
}
Box Model - Border
p {
border-width: 5px;
border-style: solid;
border-color: red;
}
p {
border: 5px solid red;
}
p {
border-bottom: 5px solid red;
}
p {
border-width-bottom: 5px;
border-style-bottom: solid;
border-color-bottom: red;
}
p {
border-radius: 5px;
}
CSS Reset
html, body, h1, h2, h3, h4, h5,
h6, p, ol, ul, li, a {
padding: 0;
border: 0;
margin: 0;
}
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.
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.
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.
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.
CSS - Class Selector
.products li {
border-bottom: 5px solid #54AB56;
padding: 10px;
color: red;
font-size: 18px;
margin-bottom: 20px;
}
<ul class="products" >
<li>product 1</li>
<li>product 2</li>
<li>product 3</li>
<li>product 4</li>
</ul>
CSS - Class Selector
<ul class="products" >
<li>product 1</li>
<li>product 2</li>
<li>product 3</li>
<li>product 4</li>
</ul>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
CSS - Class Selector
<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>
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>
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 :)
<div> Elementi
• <div></div> elementi içine eklenen elementleri diğerlerinden ayırarak web
sayfamızdaki elementleri gruplamamıza olanak sağlar.
<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.
<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.
<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.
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>
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;
}
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;
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
Element ve İçeriklerinin Ortalanması
• text-align css özelliği ile elementlerin içindeki inline olan her şeyi
hizalayabiliriz.
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.
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>
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;
}
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;
}
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;
}
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;
}
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!
Resimler - Images - <img/>
• İçerik resimleri (Content images)
Resimler - Images - <img/>
• İçerik resimleri (Content images)

• Sitedeki metin (text) içerikler kadar önemlidir.
Resimler - Images - <img/>
• İçerik resimleri (Content images)

• Sitedeki metin (text) içerikler kadar önemlidir.

• SEO için önem taşır.
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
Resimler - Images
• Sayfa düzeni resimleri (Layout
images)
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.
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.
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.
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.
Resimler - Images
• Kullanıcı arayüzü resimleri (UI Images)
Resimler - Images
• Kullanıcı arayüzü resimleri (UI Images)

• Bunlar ikonlardır. (icon)
Resimler - Images
• Kullanıcı arayüzü resimleri (UI Images)

• Bunlar ikonlardır. (icon)

• Sayfa arayüzünde yardımcı olarak kullanılırlar.
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.
Resimler - Images
<img src="img/urun-1.jpg" alt="DSLR Fotoğraf Makinesi">
source - dosya kaynağı
Resimler - Images
<img src="img/urun-1.jpg" alt="DSLR Fotoğraf Makinesi">
source - dosya kaynağı
alternative text 

Erişilebilirlik maksatlı eklenmelidir.
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
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;
}
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;
}
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.
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.
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>
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;
}
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;
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ı.
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
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
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
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
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
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!…
Fontlar
• Comic Sans kullanmayın :D
Fontlar
• Comic Sans kullanmayın :D
• Fontları ve font stillerini CSS ile kontrol ederiz.
Fontlar
• Comic Sans kullanmayın :D
• Fontları ve font stillerini CSS ile kontrol ederiz.
body {
font-family: 'Source Sans', Verdana, sans-serif;
}
Fontlar
• Comic Sans kullanmayın :D
• Fontları ve font stillerini CSS ile kontrol ederiz.
body {
font-family: 'Source Sans', Verdana, sans-serif;
}
Yedek fontlar
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
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
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
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
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">
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>
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>
Formlar - Forms
• CSS Attribute selector
input[type=text] {
border: 1px solid #7403AB;
padding: 10px;
}
Formlar - Forms
• CSS Attribute selector
input[type=text] {
border: 1px solid #7403AB;
padding: 10px;
}
Stilleri .form-control gibi bir class üzerinden vermek

Bkz: Bootstrap
label ve input elementlerini .form-
group içine alıp gruplamak.

Bkz. Bootstrap
HTML5 Elementleri
<article></article>
<aside></aside>
<figure></figure>
<figcaption></figcaption>
<footer></footer>
<header></header>
<main></main>
<nav></nav>
<section></section>
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>
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ı
HTML5 Elementleri
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
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.
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. 

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.
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.”
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.
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.
- SON -



Dinlediğiniz İçin Teşekkürler
Cihan BARAN

Front-End Developer

-

Takibe takip
twitter.com/c1hanbaran 

instagram.com/c1hanbaran

More Related Content

Similar to Temel (Basic) HTML ve CSS | Front-End Camp 2018

Web Site Tasarımı (HTML-Css) Dersi Güncelleme - 2018
Web Site Tasarımı (HTML-Css) Dersi Güncelleme - 2018Web Site Tasarımı (HTML-Css) Dersi Güncelleme - 2018
Web Site Tasarımı (HTML-Css) Dersi Güncelleme - 2018
Murat KARA
 
PHP'ye Giriş
PHP'ye GirişPHP'ye Giriş
PHP'ye Giriş
efedincer
 
Pratik seo uygulamaları
Pratik seo uygulamalarıPratik seo uygulamaları
Pratik seo uygulamaları
fsolak
 
Php sorulari
Php sorulariPhp sorulari
Php sorularisersld89
 
Php dokumani
Php dokumaniPhp dokumani
Php dokumanisersld89
 
Php teknikeri
Php teknikeriPhp teknikeri
Php teknikerisersld89
 
Php danismani
Php danismaniPhp danismani
Php danismanisersld89
 
Php tasarimi
Php tasarimiPhp tasarimi
Php tasarimisersld89
 
ASP.NET Core 1.0
ASP.NET Core 1.0ASP.NET Core 1.0
ASP.NET Core 1.0
Arda Cetinkaya
 
Php odev-sitesi
Php odev-sitesiPhp odev-sitesi
Php odev-sitesisersld89
 
Php en-iyi-kursu
Php en-iyi-kursuPhp en-iyi-kursu
Php en-iyi-kursusersld89
 
Php kitaplari
Php kitaplariPhp kitaplari
Php kitaplarisersld89
 
Php kursu-atasehir
Php kursu-atasehirPhp kursu-atasehir
Php kursu-atasehirsersld88
 
Php cevaplari
Php cevaplariPhp cevaplari
Php cevaplarisersld89
 
Php projeleri
Php projeleriPhp projeleri
Php projelerisersld89
 
Php ornekleri
Php ornekleriPhp ornekleri
Php orneklerisersld89
 
Php egitimi-atasehir
Php egitimi-atasehirPhp egitimi-atasehir
Php egitimi-atasehirsersld89
 
Php sitesi
Php sitesiPhp sitesi
Php sitesisersld89
 
Php en-iyi-egitimi
Php en-iyi-egitimiPhp en-iyi-egitimi
Php en-iyi-egitimisersld89
 
Php kursu-antalya
Php kursu-antalyaPhp kursu-antalya
Php kursu-antalyasersld88
 

Similar to Temel (Basic) HTML ve CSS | Front-End Camp 2018 (20)

Web Site Tasarımı (HTML-Css) Dersi Güncelleme - 2018
Web Site Tasarımı (HTML-Css) Dersi Güncelleme - 2018Web Site Tasarımı (HTML-Css) Dersi Güncelleme - 2018
Web Site Tasarımı (HTML-Css) Dersi Güncelleme - 2018
 
PHP'ye Giriş
PHP'ye GirişPHP'ye Giriş
PHP'ye Giriş
 
Pratik seo uygulamaları
Pratik seo uygulamalarıPratik seo uygulamaları
Pratik seo uygulamaları
 
Php sorulari
Php sorulariPhp sorulari
Php sorulari
 
Php dokumani
Php dokumaniPhp dokumani
Php dokumani
 
Php teknikeri
Php teknikeriPhp teknikeri
Php teknikeri
 
Php danismani
Php danismaniPhp danismani
Php danismani
 
Php tasarimi
Php tasarimiPhp tasarimi
Php tasarimi
 
ASP.NET Core 1.0
ASP.NET Core 1.0ASP.NET Core 1.0
ASP.NET Core 1.0
 
Php odev-sitesi
Php odev-sitesiPhp odev-sitesi
Php odev-sitesi
 
Php en-iyi-kursu
Php en-iyi-kursuPhp en-iyi-kursu
Php en-iyi-kursu
 
Php kitaplari
Php kitaplariPhp kitaplari
Php kitaplari
 
Php kursu-atasehir
Php kursu-atasehirPhp kursu-atasehir
Php kursu-atasehir
 
Php cevaplari
Php cevaplariPhp cevaplari
Php cevaplari
 
Php projeleri
Php projeleriPhp projeleri
Php projeleri
 
Php ornekleri
Php ornekleriPhp ornekleri
Php ornekleri
 
Php egitimi-atasehir
Php egitimi-atasehirPhp egitimi-atasehir
Php egitimi-atasehir
 
Php sitesi
Php sitesiPhp sitesi
Php sitesi
 
Php en-iyi-egitimi
Php en-iyi-egitimiPhp en-iyi-egitimi
Php en-iyi-egitimi
 
Php kursu-antalya
Php kursu-antalyaPhp kursu-antalya
Php kursu-antalya
 

Temel (Basic) HTML ve CSS | Front-End Camp 2018

  • 1. Temel HTML ve CSS - Cihan BARAN
  • 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.
  • 6. HTML nedir? • Açılımı: Hiper metin işaretleme dili. (Hyper text markup language)
  • 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>
  • 19. İlk HTML Sayfamız <!-- döküman tipi HTML5'i işaret ediyor --> <!DOCTYPE html>
  • 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 :)
  • 28. 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>
  • 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
  • 33. Elementler Arası İlişkiler <html> <head></head> <body> <ul>
 <li>2 yumurta</li> <li>1 yemek kaşığı şeker</li> <li>1 paket vanilya</li> <li>2 su bardağı un</li> </ul> </body> </html> •html kök element. (root)
  • 34. Elementler Arası İlişkiler <html> <head></head> <body> <ul>
 <li>2 yumurta</li> <li>1 yemek kaşığı şeker</li> <li>1 paket vanilya</li> <li>2 su bardağı un</li> </ul> </body> </html> •html kök element. (root) •ul li’lerin ebeveyn (parent) elementi.
  • 35. Elementler Arası İlişkiler <html> <head></head> <body> <ul>
 <li>2 yumurta</li> <li>1 yemek kaşığı şeker</li> <li>1 paket vanilya</li> <li>2 su bardağı un</li> </ul> </body> </html> •html kök element. (root) •ul li’lerin ebeveyn (parent) elementi. •li’ler ul’nin çocukları (children) elementi.
  • 36. Elementler Arası İlişkiler <html> <head></head> <body> <ul>
 <li>2 yumurta</li> <li>1 yemek kaşığı şeker</li> <li>1 paket vanilya</li> <li>2 su bardağı un</li> </ul> </body> </html> •html kök element. (root) •ul li’lerin ebeveyn (parent) elementi. •li’ler ul’nin çocukları (children) elementi. •li’ler birbirlerinin kardeşleri. (sibling)
  • 37. <a> Anchor Elementi Absolute Path <a href="http://www.example.com/index.html">Anasayfa</a>
  • 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; }
  • 48. CSS - Cascading Style Sheets p { color: red; }
  • 49. CSS - Cascading Style Sheets p { color: red; } p { color: red; text-decoration: underline; }
  • 50. CSS - Cascading Style Sheets p { color: red; } p { color: red; text-decoration: underline; } a { color: blue; }
  • 51. CSS - Cascading Style Sheets p { color: red; } p { color: red; text-decoration: underline; } a { color: blue; } ul li { text-align: center; } Descendent Selector
  • 52. CSS - Cascading Style Sheets p { color: red; } p { color: red; text-decoration: underline; } a { color: blue; } ul li { text-align: center; } a:hover { color: red; } Descendent Selector
  • 53. CSS - Cascading Style Sheets p { color: red; } p { color: red; text-decoration: underline; } a { color: blue; } ul li { text-align: center; } a:hover { color: red; } ul li:first-child { text-align: left; } Descendent Selector Pseudo Selector
  • 54. CSS’i nasıl ekleriz?<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> a { color: #7403AB; } a:hover { color: red; } ul li { text-align: center; } ul li:first-child { text-align: left; } </style> </head> <body> </body> </html> Internal
  • 55. CSS’i nasıl ekleriz?<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> a { color: #7403AB; } a:hover { color: red; } ul li { text-align: center; } ul li:first-child { text-align: left; } </style> </head> <body> </body> </html> Internal Önceden eklediğimiz elementlere biraz stil verelim.
  • 56. CSS’i nasıl ekleriz? <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> </html> External
  • 57. CSS’i nasıl ekleriz? <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> </html> External Stilleri external dosyaya taşıyalım…
  • 58. CSS’i nasıl ekleriz? <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1 style="font-size: 50px; color: blue;”>Başlık 1</h1> </body> </html> Inline
  • 59. CSS’i nasıl ekleriz? <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1 style="font-size: 50px; color: blue;”>Başlık 1</h1> </body> </html> Inline Kendi inline stillerinizi ekleyiniz ^^
  • 60. CSS Kurallarının Önceliği • Sıralama olarak en son eklenen stil, öncekini ezer.
  • 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ı.)
  • 65. CSS - !important p { font-size: 30px !important; } Hepsini döver
  • 66. Hexadecimal Sayılarla Renkler a { color: #7403AB; }
  • 67. Hexadecimal Sayılarla Renkler a { color: #7403AB; }
  • 68. Hexadecimal Sayılarla Renkler a { color: #7403AB; } • 256 x 256 x 256 = 16,777,216 Adet Farklı Renk
  • 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.
  • 76. Box Model - Padding p { padding-top: 50px; padding-right: 50px; padding-bottom: 50px; padding-left: 50px; }
  • 77. Box Model - Padding p { padding-top: 50px; padding-right: 50px; padding-bottom: 50px; padding-left: 50px; } p { padding: 50px 30px; } top, bottom right, left
  • 78. Box Model - Padding p { padding-top: 50px; padding-right: 50px; padding-bottom: 50px; padding-left: 50px; } p { padding: 50px } p { padding: 50px 30px; } top, right, bottom, left top, bottom right, left
  • 79. Box Model - Padding p { padding-top: 50px; padding-right: 50px; padding-bottom: 50px; padding-left: 50px; } p { padding: 50px } p { padding: 50px 30px; } p { padding: 50px 30px 100px; } top, right, bottom, left top, bottom right, left top bottom right, left
  • 80. Box Model - Margin p { margin-top: 50px; margin-right: 50px; margin-bottom: 50px; margin-left: 50px; } p { margin: 50px } p { margin: 50px 30px; } p { margin: 50px 30px 100px; } top, right, bottom, left top, bottom right, left top bottom right, left
  • 81. Box Model - Border p { border-width: 5px; border-style: solid; border-color: red; }
  • 82. Box Model - Border p { border-width: 5px; border-style: solid; border-color: red; } p { border-width-bottom: 5px; border-style-bottom: solid; border-color-bottom: red; }
  • 83. Box Model - Border p { border-width: 5px; border-style: solid; border-color: red; } p { border: 5px solid red; } p { border-width-bottom: 5px; border-style-bottom: solid; border-color-bottom: red; }
  • 84. Box Model - Border p { border-width: 5px; border-style: solid; border-color: red; } p { border: 5px solid red; } p { border-bottom: 5px solid red; } p { border-width-bottom: 5px; border-style-bottom: solid; border-color-bottom: red; }
  • 85. Box Model - Border p { border-width: 5px; border-style: solid; border-color: red; } p { border: 5px solid red; } p { border-bottom: 5px solid red; } p { border-width-bottom: 5px; border-style-bottom: solid; border-color-bottom: red; } p { border-radius: 5px; }
  • 86. CSS Reset html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, a { padding: 0; border: 0; margin: 0; }
  • 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.
  • 91. CSS - Class Selector .products li { border-bottom: 5px solid #54AB56; padding: 10px; color: red; font-size: 18px; margin-bottom: 20px; } <ul class="products" > <li>product 1</li> <li>product 2</li> <li>product 3</li> <li>product 4</li> </ul>
  • 92. CSS - Class Selector <ul class="products" > <li>product 1</li> <li>product 2</li> <li>product 3</li> <li>product 4</li> </ul> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul>
  • 93. CSS - Class Selector <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>
  • 94. 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>
  • 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!
  • 112. Resimler - Images - <img/> • İçerik resimleri (Content images)
  • 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
  • 116. Resimler - Images • Sayfa düzeni resimleri (Layout images)
  • 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.
  • 121. Resimler - Images • Kullanıcı arayüzü resimleri (UI Images)
  • 122. Resimler - Images • Kullanıcı arayüzü resimleri (UI Images) • Bunlar ikonlardır. (icon)
  • 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!…
  • 142. Fontlar • Comic Sans kullanmayın :D
  • 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>
  • 153. Formlar - Forms • CSS Attribute selector input[type=text] { border: 1px solid #7403AB; padding: 10px; }
  • 154. Formlar - Forms • CSS Attribute selector input[type=text] { border: 1px solid #7403AB; padding: 10px; }
  • 155. Stilleri .form-control gibi bir class üzerinden vermek
 Bkz: Bootstrap
  • 156. label ve input elementlerini .form- group içine alıp gruplamak.
 Bkz. Bootstrap
  • 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ı
  • 160. HTML5 Elementleri <figure> <img src="pic_trulli.jpg" alt="Trulli"> <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption> </figure>
  • 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