" " komutunu öğrendik amacı boşluk bırakmak. (Not: & işaretini & olarak
yazdım)<h1> başlık komutunu öğrendik h'nin yanındaki sayı arttıkça başlık boyutu
küçülüyor.<b> etiketini gördük amacı etiket içini kalın yapmak. Mesela;
<b>hey yo</b>
<i> etiketini gördük amacı italik yazmak;
<i>hey yo</i>
<u> etkiketini gördük amacı altı çizgili yazmak;
<u>hey yo</u>
<s> etiletini gördük amacı üstünü çizmek;
<s>hey yo</s>
<b><i>hey yo</i></b>
b ve i etiketi
kullanıldı
<del> etiketi üstüne çizgi atıyor örnek;
<del>hey yo</del>
<ins> etkiketi altı çizgili örnek;
<ins>hey yo</ins>
<font> etiketi tek başına işe yarımaz font etiketi içine yazılan
parametreler etiketin
içindeki
yazının
şeklini rengini vb. unsurları değiştirebiliralign komutunu öğrendik yazılan yazınınn konumunu değiştirmemize yarıyor örnek
kullanım; etiket
içinde
aling="center"
<sup> etiketi yazının üstünü yazar üst indistir örnek;
<sup>hey yo</sup>
<sub> etiketi yazaının altını yazar alt indistir örnek; <sub>hey
yo</sub>
<ol> ve <ul> etiketi
<ol> sayısal
sıralama yapar <ul> sembollu
siralama yapar.
örnek;
<ol>
<li>hey</li>
<li>yo</li>
</ol>
<ul>
<li>hey</li>
<li>yo</li>
</ul><ul> anlamı unordererd list düziz liste <ol> anlamı
ordered list düzenli liste demek.<ol> sıralamsının numarasını istediğimiz gibi değiştirebiliriz etiketi içine
type="A" veya 1 veya a
gibi gibi
değiştirilebilir, ve start yazıldıktan sonra yanına sayısal bir değer verildiğinde
mesela 3,
3den saymaya
başlayacak örnek
<ol type="A" start="5">
<li>hey</li>
</ol>
<ol type="1" start="6">
<li>yo</li>
</ol><ul> şeklinide değiştirebiliriz aynı şekilde
type="dics,circle" gibi sembol çeşitleri
yazılabilir.
örnek;
<ul type="circle">
<li>hey</li>
<li>yo</li>
</ul><ul> veya <ol>
eklenebilir.
<a> etiketi ve etiketinin içine
href="bağlantı" örnek <a
href="https://www.google.com" title="google">google</a> üsütüne geldiğinde açıklama vermek
istiyorsak <a>
etiketi içine title koymalıyız.
<a href="#son"> sayfanın tanımlanmış bir yerine götürür tanımlamak için
gitmek istediğimiz yerin
üstüne <a name="son"></a> yazmalıyız
hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo
<div> etikeini gördük özel durumlarda tanımlanmış bölge olarak geçiyor.<style> komutunu gördük. Title etiketinin altına yazdık, burada yapılmak
istenilern mesela her <p> etiketine
aynı özelliği vermek. Bu yapıldığında otomatik olarak bütün <p> etikletleri
(diğer etiketler içinde geçerli)
belirlenen özellikleri alacak. Örnek kullanım:
<style>
ul {
color: whitesmoke;
font-size: 18px;
font-family: Arial;
}
h1 {
color: yellowgreen;
padding-left: 100px;
border: 4px solid gray;
font-family: Arial;
}
</style>
border ile görebiliriz.
<div> için class olması gerek eğer class vermessek girdi en saf
halde gözükecektir. Classın amacı atadığımız
özellikleri bir çatı altında toplamakatır. classı style içinde "." ile isim veriyoruz. Örnek
kullanım:
<!-- CSS Dosyasında (.css) -->
.biçim {
color: white;
font-size: 50px;
}
<!-- HTML Dosyasında (.html) -->
<div class="biçim">
sayfada tanımlanmış bir bölge
</div>
<a> etiketinde alt çizgiyi kaldırmayı gördük. kodu şu:
a {
text-decoration: none;
}
justify özelliğini gördük amacı etikket içindeki metni 2 yana hizalamak örnek: (Bu
canlı bir demo, harika fikir!)hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo hey yo
a:link == link rengini değiştirme örnek kullanım:
a:link {
color: yellow;
}
a:visited == ziyaret edildiyse rengini değiştirmek için a:active == üstüne basıldığında rengini değiştirmek için a:hover mouse üstüne geldiğinde rengini değiştirmek için.
width ve height değeri girerek kutu modeli yapmayı öğrendik. <table> (Tablo) etiketini gördük.<tr> (Table Row - Tablo Satırı) ve
<td> (Table Data - Tablo Hücresi) etiketlerinin kullanılması gerektiğini
öğrendik.
<tr> etiketi yeni bir satır açar. <td>
etiketleri ise o satırın içine yan yana hücreler ekler.<table> etiketine
border="1" gibi bir özellik eklememiz gerekir.
bgcolor özelliği ile satır (<tr>) veya hücre
(<td>) arka plan rengi değiştirilebilir.width ve height özellikleri ile tablonun veya hücrelerin boyutu
ayarlanabilir.rowspan özelliğini gördük. Bir hücrenin dikeyde birden fazla satırı (örn:
rowspan="3") kaplamasını sağlar.
colspan ise bir hücrenin yatayda birden fazla sütunu kaplamasını sağlar.)
<form> etiketini öğrendik.<input> etiketi ile veri giriş alanları eklemeyi gördük.
<input> etiketinin type özelliğini değiştirerek farklı giriş
türleri (text, radio, checkbox vb.) oluşturmayı öğrendik.Basit Tablo Örneği
<!-- 2 satır ve 2 sütunlu, çizgili bir tablo -->
<table border="1" width="300">
<tr bgcolor="gray">
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
<tr>
<td>Satır 2, Hücre 1</td>
<td>Satır 2, Hücre 2</td>
</tr>
</table>
Rowspan (Satır Birleştirme) Örneği
<table border="1">
<tr>
<td rowspan="2">Bu hücre 2 satır kaplar</td>
<td>Hücre A</td>
</tr>
<tr>
<!-- (Buraya hücre gerekmez) -->
<td>Hücre B</td>
</tr>
</table>
Basit Form Örneği
<form>
<!-- Metin Girişi -->
İsim: <input type="text">
<!-- Şifre Girişi -->
Şifre: <input type="password">
<!-- Radio Buton (Sadece biri seçilir) -->
Cinsiyet:
<input type="radio" name="cinsiyet"> Erkek
<input type="radio" name="cinsiyet"> Kadın
<!-- Checkbox (Çoklu seçim) -->
Hobiler:
<input type="checkbox"> Spor
<input type="checkbox"> Müzik
<!-- Gönder Butonu -->
<input type="submit" value="Gönder">
</form>
<form> etiketini ve temel özelliklerini
öğrendik.action (verinin gönderileceği sunucu sayfası) ve method
(gönderim yöntemi, örn: "POST") gibi özelliklerini gördük.<input> etiketi ile veri giriş alanları (input fields) eklemeyi
öğrendik.<input> etiketinin type özelliğini değiştirerek
"text" (normal metin) ve "email" (eposta) gibi farklı giriş türleri
oluşturduk.placeholder (ipucu metni), required (zorunlu alan) ve
autocomplete="off" (otomatik tamamlamayı kapatma) gibi yardımcı özellikler ekledik.
<select> ve içindeki seçenekler
için <option> etiketlerini gördük.<script src="script.js"> komutuyla harici bir
.js dosyasını HTML sayfamıza bağlamayı öğrendik.alert() komutuyla kullanıcıya uyarı mesajı (pop-up) göstermeyi öğrendik.document.write() ve document.writeln() komutlarıyla doğrudan sayfanın
gövdesine (body) yazı yazdırmayı gördük.prompt() komutuyla kullanıcıdan veri girişi isteyen bir pencere açmayı öğrendik.
var anahtar kelimesi ile bir "değişken" tanımlamayı (örn: var sonuc)
ve prompt'tan gelen veriyi bu değişkende saklamayı öğrendik.HTML Form Kodu Örneği
<!-- Form verileri "kaydet.php" sayfasına "POST" metodu ile gönderilecek -->
<form action="kaydet.php" method="POST" name="kayit_formu">
<input type="text" name="ad" placeholder="Adınızı giriniz..." required autocomplete="off"> <br>
<input type="text" name="soyadad" placeholder="Soyadınızı giriniz..." required autocomplete="off"> <br>
<input type="email" name="eposta" placeholder="E-posta adresinizi giriniz" required autocomplete="off"> <br>
<!-- Açılır liste (Dropdown) -->
<select name="sehir">
<option value="00">Seçiniz</option>
<option value="01">Adana</option>
<option value="42">Konya</option>
<option value="45">Manisa</option>
<option value="35">İzmir</option>
<option value="33">Mersin</option>
</select>
<br>
<input type="button" value="KAYDET">
</form>
JavaScript (script.js) Kodu Örneği
/* Sayfa yüklenirken bir uyarı penceresi gösterir */
alert("sayfa yükleniyor...");
/* Sayfanın gövdesine metin yazar */
document.write("belgeninin gövdesine yazılacak yaz...");
document.writeln("belgeninin gövdesine yazılacak otototot yaz... <br>");
/* Kullanıcıdan adını girmesi için bir pencere açar */
var sonuc = prompt("Adınızı giriniz", "deneme");
/* Kullanıcının girdiği adı bir uyarı penceresinde gösterir */
alert(sonuc);
/* Kullanıcının girdiği adı sayfaya yazar */
document.write(sonuc);
text-transform: uppercase; ile metni otomatik olarak büyük harfe çevirmeyi
gördük.<a>) etiketinin "durumlarına" özel stil vermeyi öğrendik
(Pseudo-classes):
a:hover (Mouse üzerine gelince)a:active (Tıklandığı an)a:focus (Klavye ile seçilince)text-decoration: line-through; ile metnin üstünü çizmeyi öğrendik.border-radius özelliğine 4 farklı değer girerek (örn:
25px 5px 150px 40px) her köşeye ayrı ayrı ovallik vermeyi gördük.position: absolute; kullanarak elementleri sayfada serbestçe konumlandırmayı
öğrendik.overflow: scroll; özelliği ile bir kutunun içine sığmayan içeriğin kaydırma çubuğu
ile gösterilmesini sağladık.z-index kullanarak üst üste binen elementlerin hangisinin önde, hangisinin arkada
duracağını belirlemeyi öğrendik (Sayı büyüdükçe öne gelir).<script> etiketi içine function
(fonksiyon) yazmayı öğrendik.document.getElementById("lop") komutu ile HTML'deki bir elementi ID'sine göre
seçmeyi öğrendik..style.visibility = "hidden"; veya .style.color = "hotpink";).onclick="..." (Tıklanma olayı)onmouseover="..." (Mouse üzerine gelme olayı)onmouseout="..." (Mouse'un üzerinden ayrılma olayı)CSS Kod Örnekleri
/* Link durumları için pseudo-class'lar */
a:hover {
color: red;
font-size: 25px;
}
a:active {
color: green;
font-size: 35px;
}
/* 4 köşesi farklı border-radius ve overflow örneği */
#lop {
position: absolute;
width: 250px;
height: 250px;
background-color: aquamarine;
/* (Sırasıyla: sol-üst, sağ-üst, sağ-alt, sol-alt) */
border-radius: 25px 5px 150px 40px;
overflow: scroll; /* İçerik sığmazsa kaydır */
z-index: 5; /* Bu kutu üstte */
}
/* z-index karşılaştırması */
#lop2 {
position: absolute;
width: 500px;
height: 450px;
background-color: darkcyan;
z-index: 0; /* Bu kutu altta */
border-radius: 25px;
}
JavaScript (script) Kod Örneği
/* Bir elementi gizleyen fonksiyon */
function goster(){
/* "lop" ID'li elementi bul ve görünmez yap */
document.getElementById("lop").style.visibility = "hidden";
}
/* Bir elementi görünür yapan fonksiyon */
function gotur(){
/* "lop" ID'li elementi bul ve görünür yap */
document.getElementById("lop").style.visibility = "visible";
}
/* Mouse üzerine gelince çalışan fonksiyon */
function islem(){
var kutu2 = document.getElementById("lop2");
kutu2.style.color = "hotpink";
kutu2.style.zIndex = 999; /* Kutuyu en öne getir */
}
/* Mouse üzerinden ayrılınca çalışan fonksiyon */
function islemi(){
var kutu2 = document.getElementById("lop2");
kutu2.style.color = "black";
kutu2.style.zIndex = -5; /* Kutuyu en arkaya gönder */
}
HTML (Olay Tetikleyicileri) Örneği
<!-- Mouse olayları (hover) -->
<div id="lop2" onmouseover="islem()" onmouseout="islemi()">
tanımlanmış ikinci alan
</div>
<!-- Tıklama olayları (click) -->
<input type="button" value="GÖSTER" onclick="goster()">
<input type="button" value="GÖTÜR" onclick="gotur()">