Rehber Pek bilmediğiniz HTML CSS JS özellikleri

HTML, CSS, JS bilmediğiniz özellikleri açıklayacağım.
HTML:
1. Iframe:
İframe özelliği başka bir sitenin kopyasını oluşturmaya yarar. Örnekler:

[CODE lang="html" title="Kod"] <iframe src="https://www.technopat.net" width="500px" height="500px"></iframe>
[/CODE]

Çıktı:



2. "" işareti:
Normalde HTML'de örnek:


Diye yazıyorum, ancak doğru kullanım şu şekilde olabilir:


3.abbr:
Sayfa kısaltmalarında kullanılır. Altında . . . . . çizgisi vardır.
Örnek:

[CODE lang="html" title="Kod"]<abbr title="Technopat">Technpat</abbr>, güzeldir.
[/CODE]

Çıktı:



4. üstü çizili:


Çıktı:



5. SUP etiketi:
Genelde üslü sayılarda kullanılır.

[CODE lang="html" title="Kod"]²[/CODE]

Çıktı:



6. Bonus:

İnput türleri:
<input type="text">
Buna yazı yazabilir, CSS ile özelleştirebilirsiniz.
Çıktı:



<input type="password">
Bunun içine şifrelerinizi yazabilirsiniz, tarayıcımız otomatik algılayacak ve şifre kaydedilsin mi diye soracak.
Çıktı:



<input type="submit">
Gönder butonu otomatik olarak oluşturulacaktır.
Çıktı:



<input type="button">
Resime gerek yok Button'un aynısı sadece focus özellikleri farklı.
<input type="reset">
Sıfırla yazısını görüyoruz.
Çıktı:



<input type="checkbox">
Bu butonu aktif edebilir ve aktif etmeyebilirsiniz.
Çıktı:



<input type="radio">
Checkbox ile aynı, sadece yuvarlak.
Çıktı:



<input type="hidden">
Gizliyor.
<input type="color">
Bunun üzerinden renk seçimi yapabiliyoruz!
Çıktı:



<input type="date">
Tarihi ayarlayabilmemizi sağlıyor.
Çıktı:



<input type="time">
Zamanı değiştirebiliyoruz.
Çıktı:



<input type="datetime-local">
Gün, ay ve zamanı ayarlayabiliyoruz.
Çıktı:



<input type="email">
E-mail'inizi yazmanızı sağlar.
<input type="file">
Dosya seçebilmemizi sağlar.
Çıktı:



<input type="image" src="">
Resim ekleyebilmemizi sağlar.
<input type="week">
Hafta'yı seçebilme imkanını sağlar.
Çıktı:



<input type="month">
Ay'ı seçebilmemizi sağlar.
Çıktı:



<input type="number">
Sayıyı yükseltme, indirme imkanı sağlar.
Çıktı:



<input type="range">
Seviyeyi ayarlayabilmemizi sağlar.
Çıktı:



<input type="search">
Arama yapabilmenizi sağlar. (arama motoru değil örneğin: localhost/mesela/mesela-search/merhaba%20tamam gibi özellikleri karşılayamaz)
HTML bitti, CSS bölümüne geçiş yapıyoruz!
1. Z-index:
Position uygulanan elemanların Z konumundaki yerini ayarlamak için kullanılır.
Kodlar:

[CODE lang="css" title="Kod"].deneme1 {
position: absolute;
width: 100%;
height: 200px;
background: red;
z-index: 2;
}
.deneme2 {
position: relative;
width: 100%;
height: 200px;
background: blue;
z-index: 1;
}[/CODE]

Çıktı:



Eğer ilk Z-index özelliğinin değerini 1 yapsaydım ne olurdu?

[CODE lang="css" title="Kod"].deneme1 {
position: absolute;
width: 100%;
height: 200px;
background: red;
z-index: 1;
}
.deneme2 {
position: relative;
width: 100%;
height: 200px;
background: blue;
z-index: 2;
}[/CODE]

Çıktı:



2.text transform:


Çıktı:



4

Gördüğünüz gibi yazı büyüdü.

Türler:
capitalize
uppercase
lowercase
3.Word-spacing:
Cümlenin arasındaki boşlukları belirler.

[CODE lang="css" title="Kod"] p {
word-spacing: 50px;
}[/CODE]

Çıktı:



4.letter-spacing:
Harflerin arasındaki boşlukları belirler.

[CODE lang="css" title="Kod"]p {
letter-spacing: 5px;
}[/CODE]

5. first child, nth child, last child:
Mesela 3 tane butonunuz var class vermeden 3'ne de farklı özellikler eklemek istiyorsunuz çözümü çok basit!

[CODE lang="css" title="Kod"]button:first-child {
background: red;
}
button:nth-child(2) {
background: blue;
}
button:last-of-type {
background: purple;
}

/*
HTML KODLARI:

<button>buton 1</button>
<button>buton 2</button>
<button>buton 3</button>

*/
[/CODE]

6.linear gradient:
Arkaplanın bir tarafını renkli bir tarafını başka renkli yapmak için kullanılan yöntem!

[CODE lang="css" title="Kod"]div {
width: 100%;
height: 100vh;
background:linear-gradient(to right, blue 50%, royalblue 70%);
}
[/CODE]

Çıktı:



CSS bitti, JS'e geçiyoruz! (CSS Popüler olanlar paylaşıldı)
1. push metodu:
Push metodu dizinin sonuna yeni eklenen değerlerdir.
Kod:

[CODE lang="javascript" title="Kod"]const adamlar = ['samet',"mehmet", "arda"]
adamlar.push('Gökhan')

console.log(adamlar)[/CODE]

Çıktı:



2.map metodu:
JavaScript'te dizi elemanlarını bir döngüye alıp tümüne işlem edip sonuçlarını yeni bir diziye eklemek için map metodunu kullanıyoruz.

[CODE lang="javascript" title="Kod"]const okul = [
{id:1,name:"Müdürün", maas:"2900₺"},
{id:1,name:"Öğretmenin", maas:"1529₺"},
{id:1,name:"Nöbetçinin", maas:"500₺"},
{ id: 1, name: "Kantincinin", maas: "500₺" }
]

console.log(okul.map(okulkisileri => okulkisileri.name + ' Maaşı 4' + okulkisileri.maas ))[/CODE]

Çıktı:



3.filter metodu:

[CODE lang="javascript" title="Kod"]let yaslar = [5, 10, 2, 9, 22, 39, 4]

console.log(yaslar.filter(yaslars => yaslars > 9))[/CODE]

Çıktı:



4.find metodu:

[CODE lang="javascript" title="Kod"]let yaslar = [5, 10, 2, 9, 22, 39, 4]

console.log(yaslar.find(yaslars => yaslars > 9))[/CODE]

Çıktı:

Rehber için teşekkürler

Bazıları gerekmediği için bilinmiyor, bazılarını ise bilmemek ayıp. Yine de elinize sağlık, teşekkürler.

Sadece HTML derslerine baktım ama input ve iframe pek bilinmeyen değil bence. CSS ve JS hakkında bilgim yok.

Üniversitenin ilk yıllarında biraz ilgilenip sonra salmıştım , ama hala bir dönüp öğrensem mi diye düşünüyorum. Güzel rehber ellerine sağlık hocam

HTML'de birkaç çok kullanılmayan tag var, bilinmese de olur. Onun dışındaki tüm her şeyi bilmek gerekiyor zaten. Yine de elinize sağlık.

Mesela CSS'te filter gösterilebilirdi. Web sitelerinde genel olarak kullanırız.

Hepsine bakmadım ama uğraştığınız belli oluyor elinize sağlık.

Rehber güzel olmuş ama grup grup şeklinde yazsaydınız okunuş sırası bakımından çok iyi olurdu.

Ufak tefek hatalar var ama yararlı. Radio butonu Checkbox ile aynı işlevde değil. Checkbox'ta aynı kategoriye ait item'lerden birden fazla seçebiliyorken Radio butonunda sadece 1 tane seçilebilir.

Bunları bilmeyen mi varmış?