Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

92 views

Published on

I did presentation about HTML and CSS at Front-End Camp 2018

Published in: Software
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Temel HTML ve CSS - Cihan BARAN
  2. 2. HTML Hyper Text Markup Language
  3. 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. 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. 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. 6. HTML nedir? • Açılımı: Hiper metin işaretleme dili. (Hyper text markup language)
  7. 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. 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. 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. 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. 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. 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. 13. Element ve Attribute • Element • h1, h2, h3, div, p, a, span, head, body, header, footer, section, table…
  14. 14. Element ve Attribute • Element • h1, h2, h3, div, p, a, span, head, body, header, footer, section, table… • <p>My first paragraph.</p>
  15. 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. 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. 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. 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. 19. İlk HTML Sayfamız <!-- döküman tipi HTML5'i işaret ediyor --> <!DOCTYPE html>
  20. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 37. <a> Anchor Elementi Absolute Path <a href="http://www.example.com/index.html">Anasayfa</a>
  38. 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. 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. 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. 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. 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 ^^
  43. 43. CSS Cascading Style Sheets
  44. 44. CSS - Cascading Style Sheets • Basamaklandırılmış Stil Sayfaları
  45. 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. 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. 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. 48. CSS - Cascading Style Sheets p { color: red; }
  49. 49. CSS - Cascading Style Sheets p { color: red; } p { color: red; text-decoration: underline; }
  50. 50. CSS - Cascading Style Sheets p { color: red; } p { color: red; text-decoration: underline; } a { color: blue; }
  51. 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. 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. 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. 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. 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. 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. 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. 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. 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. 60. CSS Kurallarının Önceliği • Sıralama olarak en son eklenen stil, öncekini ezer.
  61. 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. 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. 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. 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. 65. CSS - !important p { font-size: 30px !important; } Hepsini döver
  66. 66. Hexadecimal Sayılarla Renkler a { color: #7403AB; }
  67. 67. Hexadecimal Sayılarla Renkler a { color: #7403AB; }
  68. 68. Hexadecimal Sayılarla Renkler a { color: #7403AB; } • 256 x 256 x 256 = 16,777,216 Adet Farklı Renk
  69. 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. 70. Block Level vs Inline Level • Block Level Elementler: • Müsait olan tüm genişliği kaplar.
  71. 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. 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. 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. 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.
  75. 75. Box Model
  76. 76. Box Model - Padding p { padding-top: 50px; padding-right: 50px; padding-bottom: 50px; padding-left: 50px; }
  77. 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. 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. 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. 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. 81. Box Model - Border p { border-width: 5px; border-style: solid; border-color: red; }
  82. 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. 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. 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. 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. 86. CSS Reset html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, a { padding: 0; border: 0; margin: 0; }
  87. 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. 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. 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. 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. 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. 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. 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. 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. 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. 96. <div> Elementi • <div></div> elementi içine eklenen elementleri diğerlerinden ayırarak web sayfamızdaki elementleri gruplamamıza olanak sağlar.
  97. 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. 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. 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. 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. 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. 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. 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. 104. Element ve İçeriklerinin Ortalanması • text-align css özelliği ile elementlerin içindeki inline olan her şeyi hizalayabiliriz.
  105. 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. 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. 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. 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. 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. 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. 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. 112. Resimler - Images - <img/> • İçerik resimleri (Content images)
  113. 113. Resimler - Images - <img/> • İçerik resimleri (Content images) • Sitedeki metin (text) içerikler kadar önemlidir.
  114. 114. Resimler - Images - <img/> • İçerik resimleri (Content images) • Sitedeki metin (text) içerikler kadar önemlidir. • SEO için önem taşır.
  115. 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. 116. Resimler - Images • Sayfa düzeni resimleri (Layout images)
  117. 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. 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. 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. 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. 121. Resimler - Images • Kullanıcı arayüzü resimleri (UI Images)
  122. 122. Resimler - Images • Kullanıcı arayüzü resimleri (UI Images) • Bunlar ikonlardır. (icon)
  123. 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. 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. 125. Resimler - Images <img src="img/urun-1.jpg" alt="DSLR Fotoğraf Makinesi"> source - dosya kaynağı
  126. 126. Resimler - Images <img src="img/urun-1.jpg" alt="DSLR Fotoğraf Makinesi"> source - dosya kaynağı alternative text 
 Erişilebilirlik maksatlı eklenmelidir.
  127. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 142. Fontlar • Comic Sans kullanmayın :D
  143. 143. Fontlar • Comic Sans kullanmayın :D • Fontları ve font stillerini CSS ile kontrol ederiz.
  144. 144. Fontlar • Comic Sans kullanmayın :D • Fontları ve font stillerini CSS ile kontrol ederiz. body { font-family: 'Source Sans', Verdana, sans-serif; }
  145. 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. 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. 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. 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. 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. 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. 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. 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. 153. Formlar - Forms • CSS Attribute selector input[type=text] { border: 1px solid #7403AB; padding: 10px; }
  154. 154. Formlar - Forms • CSS Attribute selector input[type=text] { border: 1px solid #7403AB; padding: 10px; }
  155. 155. Stilleri .form-control gibi bir class üzerinden vermek
 Bkz: Bootstrap
  156. 156. label ve input elementlerini .form- group içine alıp gruplamak.
 Bkz. Bootstrap
  157. 157. HTML5 Elementleri <article></article> <aside></aside> <figure></figure> <figcaption></figcaption> <footer></footer> <header></header> <main></main> <nav></nav> <section></section>
  158. 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. 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. 160. HTML5 Elementleri <figure> <img src="pic_trulli.jpg" alt="Trulli"> <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption> </figure>
  161. 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. 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. 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. 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. 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. 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. 167. - SON -
 
 Dinlediğiniz İçin Teşekkürler Cihan BARAN
 Front-End Developer
 -
 Takibe takip twitter.com/c1hanbaran 
 instagram.com/c1hanbaran

×