NOTLAR 1
NOTLAR
1-Paragraf Etiketleri
! işareti konulup Enter bastığında otomatik Doctype (structure) yapısını
verir.
<title>…</title> etiketi En üst kısımdaki Ana Sayfa adı yazılır.
<p>…</p> paragraf etiketidir.
<br> etiketi kapanışı yoktur. Alt satıra geçmek için kullanılır.
<p style="border: solid red ;">KAAN</p> (ETRAFINI KIRMIZI KUTU İLE
ÇERÇEVELEME)
<head>/ etiketi içerisinde <style>/ etiketi ile paragraf genişliği
ayarlanabilir.
2-Metinlerin Biçimlendirilmesi
<b>/ etiketi kalın yazmak için kullanılır.
<big>/ etiketi büyük, <small>/ etiketi küçük yazmak için kullanılır.
<i>/ etiketi italik yazmak için kullanılır.
<strong>/ etiketi güçlü yazmak için kullanılır. <b>/ etiketi ile aynı fakat
arama motorları açısından daha güçlüdür.
<em>/ etiketi italik yazmak için kullanılır. <i>/ etiketine göre daha
güçlüdür.
<sub>/ etiketi x 2 gibi ifadeler için 2 yazılan konumda kullanılır.
<sup>/ etiketi x 2 gibi ifadeler için 2 yazılan konumda kullanılır.
<ins>/ etiketi paragrafta bir güncelleme olduğunda kullanılır.
<del>/ etiketi yazının üstünü çizer.
3-Başlıklar
<h1>/ , <h2>/ , <h3>/ … başlık etiketleridir.
ALT + SHİFT + F kısayolu düzenleme sağlar. Beautify açık olması gerekir.
<h1 style="border:1px solid rebeccapurple; width: 50%;" >
Matematiksel İfadeler</h1>
Yukarıdaki durum <b>/ etiketinde paragrafın sadece çevresini kaplayacak
şekilde etkiler.
<hr> etiketi satır altı çizgi oluşturmak için kullanılır.
<!-- --> etiketi yorum yapmak için kullanılır ve sitede görünmez.
4-META ETİKETİ VE HTML E. ÖZNİTELİKLERİ
NOTLAR 2
UTF-8 Türkçe karakter desteklemesi için gereklidir.
Viewport hem tablet hem telefon hem de bilgisayar desteklemesi için
gereklidir.
<meta http-equiv="reflesh" content="5"> 5 saniyede bir yenilemesini
sağlar.
W3School sitesi etiketler konusunda yardımcı olur.
Align=”center” metin hizalama gibi benzeri özelliklerin kullanımlarını
anlatır.
<style>
p{
border: 1px solid rgb(93, 94, 170); width: 50%;
}
</style>
Yukarısı bir örnektir. <Head>/ etiketi içerisinde kullanılır.
5-IMG RESİM ETİKETİ
Görsel eklemek için img etiketi kullanılır. Örn;
<img src="img/[Link]" width="50%" alt="Resim bulunamadı">
<img src="[Link]" width="50%" alt="Resim bulunamadı">
[Link] sitesi üzerinden görsel bulunabilir.
İmg içinde title=”” etiketi resim üzerinde açıklama yapar.
6-LİNK EKLEME-a ETİKETİ
<a>/ etiketi link ekleme etiketidir ve <a href=””></a> biçiminde
görünür.
<a href="[Link] Google'a git. </a>
Target=”_blank” etiketi açılan sayfayı yeni bir sekmede açmak için
kullanılır. Örn;
<a href="İLETİŞİ[Link]">İletişim</a>
<a href="İLETİŞİ[Link]" target="_blank" >İletişim </a>
Eğer resim üzerinden yeni bir sekmede link açılmak isteniyorsa;
<a href="İLETİŞİ[Link]" target="_blank">
<img src="img/[Link]" width="25%" alt="resim
bulunamadı.">
</a>
7-SIRALI VE SIRASIZ LİSTELER-OL VE UL
ETİKETLERİ
<ul>/ etiketi sırasız listeler için kullanılır.
Listelemek için içerisinde <li>/ etiketi kullanılır.
NOTLAR 3
<ol>/ etiketi sıralı listeler için kullanılır. Ve yine içerisinde liste yapmak için
<li>/ etiketi kullanılır.
Eğer sıralama stili değiştirilmek istenirse head etiketi içerisine eklenir.
Örn;
<style>
ul{
list-style: square;
}
</style>
Unordered style list veya ordered style list web sitesinden listeleme
biçimleri kullanılabilir.
Bir diğer şekilde ise içerisinde type=”” etiketi ile biçimlendirilebilir.Örn;
<OL type="I"></ol>
Boyutunu ayarlamak için head etiketi içerisinde;
body{
font-size: 24px;
}
Start=”” etiketi <ol>/ etiketi içinde sıralamanın başlangıcını belirlemek için
kullanılır.
Tersten sıralama yapmak için reversed start=”” etiketi kullanılır.
8-TABLO OLUŞTURMA-TABLE ETİKETİ
<table>/ etiketi tablo oluşturmak için kullanılır.
<thead>/ ve <tbody>/ etiketleri başlık oluşturmak için kullanılır.
<tr>/ etiketi yeni bir satır ve sütun oluşturmak için kullanılır.
<th>/ ve <td>/ etiketi veri oluşturmak için kullanılır.
<table>/ etiketi içersinde border=”” ile çizgi genişliği ve width=”” ,
height=”” ile sitede kapladığı alan ayarlanabilir.
<tr>/ etiketi içerisinde bgcolor=”” ile renk ayarı yapılabilir.
<th>/ veya <td>/ etiketi içerisinde colspan=”” etiketi içinde sayı
belirterek o sütun altındaki satırı birleştirir. Yani o sayı kadar sütunluk yer
kaplıyor. rowspan=”” etiketi ise o sayı kadar satırlık yer kaplar.
9-İNLİNE VE BLOCK ETİKETLERİ
İnline elementi içerisinde block elementi kullanılamaz. Kullanılırsa hata
verir fakat hatayı göstermez.
<div>/ etiketi sayesinde yanyana değil alt alta blocklar halinde
biçimlendirir.
10-FORM ETİKETİ
<input type="text" name="" id="" value="İsminizi giriniz">
NOTLAR 4
Value=”” etiketi textde yazılı biçimde görünür. Yazılan her şey urlde yer
alır.
placeholder=”” etiketi yazının arka planda görünmesini sağlar.
<input type="submit" value="Gönder">
Submit tipinde gönder biçiminde görüntü oluşur. Value=”” etiketi içinde
yazar.
<input type="password" name="sifre" id="">
radio=”” tipi seçim için kullanılı[Link] farklı bir stildir.
<input type="radio" name="gender" value="Erkek"> Erkek
<br><br>
<input type="radio" name="gender" value="Kadın"> Kadın
Name=”” kısmı aynı olursa tek bir seçim, farklı olursa hepsi birden aynı
anda seçim yapılabilir.
<form method="get">
Method=”” url bağlantısında değişiklik yapar.
Get yerine post yazılırsa gizlilik sağlar.
<form action="[Link]
Action=”” url bağlantısına gönderim yapar.
<select name="" id="">
Select seçim yapmanız için oluşturulur.
<option value=""></option>
Option seçimler yazılır.
10-RENKLER VE KULLANIMLARI
Colorhexadecimal web sitesinden renk seçilebilir.
Arka plan rengi oluşturmak için istenen stilin etiketini açıp backround-color
veya color ile renk oluşturulabilir.
Rgb renk skalasını rgba yapınca saydamlık oluşur.
11-SEMANTİK ELEMENTLER
w3school semantic web sitesi üzerinden anlamsal etiketler bulunabilir.