Listeler

sıralı listeler

1. liste öğesi
2. liste öğesi
3. liste öğesi

sırasız listeler

• liste öğesi
• liste öğesi
• liste öğesi

liste içinde liste

• liste öğesi
• liste öğesi
• liste öğesi
  1. alt liste öğesi
  2. alt liste öğesi
  3. alt liste öğesi
• liste öğesi

stil örnekleri

1. standart sırasız liste
   • elma
   • armut
   • kivi
2. kare işaretli sırasız liste
   • elma
   • armut
   • kivi
3. çember işaretli sırasız liste
   • elma
   • armut
   • kivi
4. daire işaretli sırasız liste
   • elma
   • armut
   • kivi

• standart sıralı liste
  1. birinci madde
  2. ikinci madde
  3. üçüncü madde
• roma rakamı ile liste
  1. birinci madde
  2. ikinci madde
  3. üçüncü madde
• küçük roma rakamı ile liste
  1. birinci madde
  2. ikinci madde
  3. üçüncü madde
• harf ile liste
  1. birinci madde
  2. ikinci madde
  3. üçüncü madde
• küçük harf ile liste
  1. birinci madde
  2. ikinci madde
  3. üçüncü madde
• roma rakamı ile 5 ten başlayan liste
  5. birinci madde
  6. ikinci madde
  7. üçüncü madde

tanım listesi

sözlük benzeri tanımları yapılabildiği liste stilidir. dl etiketi ile liste başlatılır. Dt etiketini içine tanımlanacak terim yazılır.

tanımın yazılması

dd etiketini içine tanım yazılır.

en başa dön

Emmet ile daha hızlı html yazmak

Emmet Cheat Sheet

>

> eklersek içinde öğe koyar ul>li

• Lorem, ipsum dolor.

+

+ eklersek kardeş element ekleriz ul>li+li

• Lorem, ipsum dolor.
• Lorem ipsum dolor sit.

^

içindeyken ^ eklersek üst seviyeye ekler ul>li>lorem2^^p>lorem5>

• Lorem, ipsum.

Lorem ipsum dolor sit amet.

*

* sonuna geldiğinin sayısını belirtir ul>li*3>lorem3

• Lorem, ipsum dolor.
• Quos, nulla dolores.
• Reiciendis, beatae esse.

lorem

lorem: rasgele metin oluşturur p>lorem

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis maiores, quia quae odio placeat a nisi commodi voluptatibus, error nihil ex totam culpa suscipit repellendus, quas excepturi eius vitae velit.

loremin yanına sayı ekleyerek harf sayısı kısıtlanabilir p>lorem3

Lorem, ipsum dolor.

.

class oluşturmak içinmiş

Lorem.

nokta ile başlanırsa div etiketini açar

#

id oluşturmak içinmiş

Lorem.

Lorem.

Örnekler

Açıklamalar kaynak kodun içerisinde

$

$ işareti sıralı artış sağlar

1. Lorem.
2. Corrupti, ipsa!
3. Culpa, sit eveniet.

en başa dön

Görsellerle çalışmak

img etiketi: detay için kaynak koduna bak

mozilla developer image bilgi sayfası

internetten kullanmak

lorem picsum

istenilen ölçüye uygun rasgele resim getiren bir web sitesi

lorem picsum

klasörden kullanmak

görsele link vermek

link için görünecek metin kısmına resim için gereken kod yazılır

map ve area

görselin farklı alanlarına farklı linkler eklemek için kullanılır. Detayı için googlelamak önerilir

onload eventi kullanımı

resim yüklendiğinde çalışacak fonksiyonu belirlemek için kullanılır.

Picture elementi kullanmak

farklı şartlarda farklı görselleri yüklemek için kullanılabilir. Örnek olarak ekran boyutu değiştiğinde görselin değişmesi sağlanabilir

en başa dön

Button

buton eklemek için kullanılır. Henüz bu butonun bir işlevi yok.

en başa dön

iframe

iframe etiketi başka bir kaynaktan belge kopyalamak için kullanılır.
örn: youtube: vidoyu sağ tıklayıp yerleştirme kodunu kopyala dedikten sonra kendi dosyanızda istediğiniz yere ekleyebilirsiniz

en başa dön

meta

meta kavramının anlaşılabilmesi için okuyun

en başa dön

Estetik

bu bölümde bazı kısımları farklı renkte farklı büyüklükte ve farklı arka plan rengi ile yazmayı öğrendik

Bazı şeyleri daha dar alana yazabilirim

style özelliğini etiket olarak kullanmak

head alanının içine etiket olarak yazıldığında tüm sayfayı etkiler

en başa dön

input kullanımı

lütfen adınızı yazın

en başa dön

Kayan yazılar: Marquee Tag

kayan yazı örneği

Sınırlı alanlı kayan yazı

sınırlı alanda kayıyorum

farklı yöne kayan yazı

tersten kayıyorum

star wars yazısı

uzun zaman önce
çok uzak bir galakside

diğer özellikler

kay ve dur
ping pong
gecikmeli yazı
hızlı yazı
3 kere kay ve kaybol
etrafı boşluklu yazı en başa dön

Tablolar

FirstName	LastName	Age
Murat	Gokduman	33
Bora	Gokduman	4

en başa dön

Linklerle Çalışmak

başka bir sayfaya git

buraya gidilecek
buraya gidilecek (yan sekmede)

aynı projeye referans vermek

iletişim sayfasına git

aynı sayfada bir yere link vermek

link verilecek yere ID atanması gerekiyor. ID ye href ile ulaşmak için başına # konulur

en başa dön

mail at

drmuratgokduman.gmail.com

telefon et

tel no en başa dön

Blok ve İnline Element

BLOK ELEMENT

bulunduğu satırın tamamını kaplar

INLINE ELEMENT

bulunduğu kadar alan kaplar

DIV

içine aldığı her şeyi blok haline getirir. Başka bir çzellik eklemez

SPAN

mevcut özelliği değiştirmeden inline olarak bölmeye yarar

BR

satırı böler ve alt satıra geçirir

HR

fiziksel olarak bölmek için çizgi çeker

---

Blok ve inline listesi için tıklayınız

---

en başa dön

Etiket Özellikleri

özellik_adı="özellik" kalıbı ile etiketin içine yazılır

ID

içine dahil olduğu etiketin benzersiz olduğunu gösterir
birden fazla, aralarında boşluk olan kelime kullanılamaz
ID bir etikette sadece bir tane olur. Bir kodda tek bir etikete verilir.

CLASS

Sınıflandırma için kullanılır. Özellik atamak için kullanılabilir

Yazana özel etiket özellikleri

html için anlamı olmayan, kodu yazanın daha sonra anlam kazandıracağı (javascript vs ile) etiket özellikleridir.
data-bizim_eklediğimiz_özellik kalıbi ile yazılır.

en başa dön

Semantic(Anlamlandırılmış) HTML Etiketleri

div ile aynı görevi gören ancak sitemizdeki yerine göre adlandırılmış etiketlerdir. Kodu anlamayı kolaylaştırır

Header

ilgili bölümün br başlık olduğunu belirtir

Nav

Linkler için ayrılmış bölümdür. Linkleri buraya yazmak zorunlu değildir

Section

Dökümanı bölmek için kullanılır

Figure

İçeriğinde resim, gösterim, diyagram, kod listeleri vs. gibi nesnelerin olduğunu belirtir. Ana akış ile ilgili olsa da, konumu ana akıştan tamamen bağımsızdır. Çıkarılırsa dokümanın akışını engellemez.

Figcaption

Figure içeriğine başlık koymak için kullanılır

Aside

başka bazı içerikleri tanımlar. İçeriği, üst içerik hakkında olmalıdır.

Article

bir makale elementidir. Bir makale web sayfasının geri kalanından bağımsız olarak dağıtılabilmelidir.
Genelde bu elementin kullanabildiği yerler forum mesajları, blog gönderileri, haber metinleri, yorumlar gibi makale içeren metinlerdir.

Aside

Yan sütunda yer alması planlanan yan bilgiler buraya alınır

Footer

doküman ya da kısım için alt bilgilerini belirtir.
Genelde dokümanın yazarını, telif haklarını, kullanım gizliği, iletisim vs. gibi bilgileri içerir ve bir dokümanda bir kereden fazla kullanılabilir.