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

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.

önerdi.

• 1984 yılında ENQUIRE’i geliştirdi ve birbirine
bağlı (hyper text) sayfalar ilk defa ortaya çıkmış
oldu.

ö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?

• Elementler (tag) HTML sayfalarının yapı taşlarıdır.

HTML nedir?


• Tarayıcılar elementleri göstermezler fakat sayfa içeriğini yorumlamak için
kullanırlar.

HTML nedir?


• 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

• PHP, Ruby, Java, Python, C# ve nihayet JS
(NodeJS) vb. kodlarıma göre istekleri
değerlendirip dönüş yaparım.
WWW

İstek - Request - Web sayfası lütfen?Yanıt - Response - İşte istediğin web sayfası - HTML

yorumlayabilirim.


WWW
1

İstek - Request - Web sayfası lütfen?Yanıt - Response - İşte istediğin web sayfası - HTML

yorumlayabilirim.


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

• <p>My ﬁrst paragraph.</p>

• Element


• Bazı elemelerin kapanışı yoktur. <img /> ve <br> gibi…

• Element



• Attribute
• Elemenler hakkında ek bilgiler içerirler.

• Element



• Attribute

• id, class, src, href, style, lang

• Element



• Attribute

• id, class, src, href, style, lang

• <a href=“https://www.example.com">This is a link</a>

İlk HTML Sayfamız

<!DOCTYPE html>

İlk HTML Sayfamız
<!DOCTYPE html>

<html lang="en">
</html>

İlk HTML Sayfamız
<!DOCTYPE html>
<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
<!DOCTYPE html>
<html lang="en">
>
<head>

<meta charset="UTF-8">
</head>
</html>

İlk HTML Sayfamız
<!DOCTYPE html>
<html lang="en">
>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
</html>

İlk HTML Sayfamız
<!DOCTYPE html>
<html lang="en">
>
<head>

<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
</html>

İlk HTML Sayfamız
<!DOCTYPE html>
<html lang="en">
>
<head>

<title>Document</title>
</head>
</html>

İlk HTML Sayfamız
<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
</body>
</html>

İlk HTML Sayfamız
<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
</body>
</html>
Herkes bir HTML sayfası oluştursun :)

Temel HTML Elementleri
<h1>Başlık 1</h1> 
<h6>Başlık 3</h6>

<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>

<h6>Başlık 3</h6>
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>

<h6>Başlık 3</h6>
qui.</p>
<ul> 
<li>2 yumurta</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>

<h6>Başlık 3</h6>
qui.</p>
<ul> 
<li>2 yumurta</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>
</ul>
</body>
</html>
•html kök element. (root)

<html>
<head></head>
<body>
<ul> 
<li>2 yumurta</li>
</ul>
</body>
</html>
•ul li’lerin ebeveyn (parent) elementi.

<html>
<head></head>
<body>
<ul> 
<li>2 yumurta</li>
</ul>
</body>
</html>
•li’ler ul’nin çocukları (children) elementi.

<html>
<head></head>
<body>
<ul> 
<li>2 yumurta</li>
</ul>
</body>
</html>
•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
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
Target Blank Attribute (Yeni Sekmede Açmak İçin)
<a href="http://www.google.com" target="_blank" >Google</a>

<a> Anchor Elementi
Absolute Path
Mailto (E-Posta Göndermek İçin)
<a href=“mailto:example@gmail.com”>E-posta</a>

<a> Anchor Elementi
Absolute Path
<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="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
• 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.



• 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;
}

p {
color: red;
}

p {
color: red;
}
p {
color: red;
text-decoration: underline;
}

p {
color: red;
}
p {
color: red;
}
a {
color: blue;
}

p {
color: red;
}
p {
color: red;
}
a {
color: blue;
}
ul li {
text-align: center;
}
Descendent Selector

p {
color: red;
}
p {
color: red;
}
a {
color: blue;
}
ul li {
text-align: center;
}
a:hover {
color: red;
}
Descendent Selector

p {
color: red;
}
p {
color: red;
}
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>
<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>
<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>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>
External

<html lang="en">
<head>
</head>
<body>
</body>
</html>
External
Stilleri external dosyaya taşıyalım…

<html lang="en">
<head>
</head>
<body>
<h1 style="font-size: 50px; color: blue;”>Başlık 1</h1>
</body>
</html>
Inline

<html lang="en">
<head>
</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.


• 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.



bakabiliriz.

• inline stiller teknik olarak elemente en son eklendiği için önceki stilleri
ezecektir. (Mecbur kalınmadıkça kullanılmamalı.)



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;
}

a {
color: #7403AB;
}
• 256 x 256 x 256 = 16,777,216 Adet Farklı Renk

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.



• 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.





• Inline Level Elementler:

• İçeriği kadar alan kaplar.

• a, img, input, label inline level elementlere örnektir.

Box Model - Padding
p {
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;
}

Box Model - Padding
p {
padding-top: 50px;
padding-left: 50px;
}
p {
padding: 50px 30px;
}
top, bottom
right, left

Box Model - Padding
p {
padding-top: 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-left: 50px;
}
p {
padding: 50px
}
p {
padding: 50px 30px;
}
p {
padding: 50px 30px 100px;
}
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, 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-color: red;
}
p {
border-width-bottom: 5px;
border-style-bottom: solid;
border-color-bottom: red;
}

Box Model - Border
p {
border-width: 5px;
border-color: red;
}
p {
border: 5px solid red;
}
p {
}

Box Model - Border
p {
border-width: 5px;
border-color: red;
}
p {
}
p {
border-bottom: 5px solid red;
}
p {
}

Box Model - Border
p {
border-width: 5px;
border-color: red;
}
p {
}
p {
border-bottom: 5px solid red;
}
p {
}
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
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
padding: 0;
border: 0;
margin: 0;
}
• Dökümana ilk eklenmesi gereken stiller bunlardır.

CSS Reset
padding: 0;
border: 0;
margin: 0;
}
• Normalize CSS bu iş için idealdir.

CSS Reset
padding: 0;
border: 0;
margin: 0;
}
• 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;
}
<ul class="products" >
<li>product 1</li>
<li>product 2</li>
<li>product 3</li>
<li>product 4</li>
</ul>

<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>

<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>

.products li {
padding: 10px;
color: red;
font-size: 20px;
}
<li>product 1</li>
<li>product 2</li>
<li>product 3</li>
<li>product 4</li>
</ul>
ul li {
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>

.products li {
padding: 10px;
color: red;
font-size: 20px;
}
<li>product 1</li>
<li>product 2</li>
<li>product 3</li>
<li>product 4</li>
</ul>
ul li {
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

• Bir kutu olarak düşünebiliriz.

<div> Elementi


• Box model’de block level elementtir.

<div> Elementi


• 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>

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;
}

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;

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

• text-align css özelliği ile elementlerin içindeki inline olan her şeyi
hizalayabiliriz.

hizalayabiliriz.

• Buna inline, inline-block elementler ve yazılar dahildir.

hizalayabiliriz.

<h1 class="heading">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>

hizalayabiliriz.

h1 {
text-align: left;
}

hizalayabiliriz.

h1 {
text-align: center;
}
h1 {
text-align: left;
}

hizalayabiliriz.

h1 {
text-align: center;
}
h1 {
text-align: left;
}
h1 {
text-align: right;
}

hizalayabiliriz.

h1 {
text-align: center;
}
h1 {
text-align: left;
}
h1 {
text-align: right;
}
h1 {
text-align: justify;
}

hizalayabiliriz.

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)


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



• SEO için önem taşır.

Resimler - Images


• 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
images)

• Daha çok tasarım maksatlı
kullanılan, sitenin içeriğini
anlamamızı doğrudan
etkilemeyen resimlerdir.

Resimler - Images
images)


• Sitenin anlatımını ya da
tasarımı güçlendirir.

Resimler - Images
images)



• Sayfaya arkaplan
(background) resmi olarak
uygulanmalıdır.

Resimler - Images
images)



• 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

• Bunlar ikonlardır. (icon)

Resimler - Images


• Sayfa arayüzünde yardımcı olarak kullanılırlar.

Resimler - Images


• 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
alternative text  
Erişilebilirlik maksatlı eklenmelidir.

Resimler - Images
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.


• Bunun için CSS ﬂoat ö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>


Quidem, magni.</p>
</div>
.img-box img {
width: 200px;
float: left;
}


Quidem, magni.</p>
</div>
.img-box img {
width: 200px;
float: left;
}
float: right;
float: none;
float: inherit;

<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>
</div>
.box p {
width: 500px;
float: left;
}
Problem?
.box’dan sonra gelen elementler de kaymaya başladı.

<div class="box">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam animi ratione, provident cum optio
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam animi ratione, provident
<div class="clearfix"></div>
</div>
Çözüm

<div class="box">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam animi ratione, provident cum optio
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam animi ratione, provident
<div class="clearfix"></div>
</div>
.box .clearfix {
clear: both;
}
Çözüm

<div class="box">
</div>
Çözüm 2

<div class="box">
</div>
.box {
overflow: auto;
}
Scrollbar çıkabilir, çünkü overﬂow scrollbar’ın belirmesi özelliğini kontrol eder.
Çözüm 2

<div class="box">
</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

<div class="box">
</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
• Fontları ve font stillerini CSS ile kontrol ederiz.

Fontlar
body {
font-family: 'Source Sans', Verdana, sans-serif;
}

Fontlar
body {
}
Yedek fontlar

Fontlar
body {
}
.box p {
font-weight: bold;
font-size: 20px;
font-style: italic;
text-transform: uppercase;
line-height: 30px;
}
Yedek fontlar

Fontlar
body {
}
.box p {
font-weight: bold;
font-size: 20px;
font-style: italic;
line-height: 30px;
}
Yedek fontlar
Bu sayıları da kullanabiliriz

Fontlar
body {
font-family: ‘Cihan Sans', Verdana, sans-serif;
}
.box p {
font-weight: bold;
font-size: 20px;
font-style: italic;
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


• 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">


<input type="text">
<input type="file">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>


<input type="text">
<input type="file">
<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;
}

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>
<a class="menu-link" href="/css/">CSS</a>
</li>
<a class="menu-link" href="/js/">JavaScript</a>
</li>
<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?

• This made it impossible for search engines to identify the correct web page content.

Neden Semantic Web?

• 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?

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?

will become easier.
Verinin uygulamalar, kurumlar ve topluluklar tarafından paylaşılıp kullanılmasına olanak tanır.

Neden Semantic Web?

will become easier.
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

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

More Related Content

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

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