Saban K.Merhabalar, mobilhanem.com için hazırladığım HTML5, CSS3 eğitim setine hoşgeldiniz. Bu dersimizde html elemanları ve biçimlendirmeleri öğrenmeye çalışacağız.
Biçimlendirmeleri kullanarak ekranda çıkacak yazılara kalınlık, yana yaslanma, üstü veya altı çizme gibi birçok özellik tanımlayacağız. Ayrıca font biçimlendirmelerine de göz atacağız. Font biçimlendirmeleriyle yazılarımıza renk, boyut ve yazı tipi özellikleri tanımlayacağız.
HTML elementlerine geçmeden önce bir önceki dersimizde öğrendiğimiz temel html etiketlerini yazarak sayfamızı oluşturalım.
index.html adında bir dosya açıp, aşağıdaki kodları yazıyoruz.
<html> <head> <meta charset="UTF-8" /> <title>HTML elementleri</title> <meta name="description" content="Bu yazıda html ve css hakkında detaylı bilgiler paylaşacağız." /> <meta name="keywords" content="html nedir?, css nedir?" /> <meta name="author" content="@mobilhanem" /> <meta name="robots" content="index, follow"> </head> <body> <!--Bu alana aşağıda öğreneceğimiz etiketler gelecek--> </body> </html>
Yorum Etiketi (<!– –>)
<!--Bu alana aşağıda öğreneceğimiz etiketler gelecek-->
<!– –> bu etiket kodlarımız arasında yorumlar bırakmamıza olanak sağlar. Sayfa görünümüne herhangi bir etkisi yoktur. Sadece kod kısmında yeşil renkte görünür.
Paragraf Etiketi (p)
<p>Bu bir paragraftır.</p>
Önceki dersimizde de öğrendiğimiz üzere, sayfa içinde paragraflar oluşturmamızı sağlar. Varsayılan olarak kapsayıcının ekranın %100’ünü kapsar. CSS ile bu genişlik değiştirilebilir.
H etiketleri (h1, h2…,h6)
<h1>H etiketleri</h1> <h2>H etiketleri</h2> <h3>H etiketleri</h3> <h4>H etiketleri</h4> <h5>H etiketleri</h5> <h6>H etiketleri</h6>
H etiketini genel olarak başlıklarda kullanırız. Html’nin özel etiketlerinden biridir. Varsayılan olarak h1 ile h6 arasında boyut farklılıkları vardır. Yukarıdaki kodları denediğinizde h1’in en büyük h6’nında en küçük boyutta olacağını göreceksiniz.
Satır Etiketi (<br/>)
<p>İlk satır <br/> ikinci satır </p>
<br/> etiketi yazının veya etiketin bir alt satıra geçmesini sağlar.
Biçimlendirmeler
| Etiket | Anlamı |
| <b> | Kalın yazmak. |
| <i> | Sağa yatık (italik) yazmak. |
| <u> | Altı çizili yazmak. |
| <del> | Üstü çizili yazmak. |
| <sup> | Üs yazmak. |
| <sub> | Alt hizada yazı yazmak. |
| <big> | Büyük yazı. |
| <small> | Küçük yazı. |
Yukarıdaki etiketleri kullanarak, yazıları biçimlendirebiliyoruz. Örnek olarak
<p> <b>Bu</b> <i>bir örnek paragraf</i> <u>cümlesidir</u>. <del>Bu</del> <sup>bir örnek paragraf</sup> <sub>cümlesidir</sub>. <big>büyük yazı</big> <small>Küçük yazı</small> </p>
Şeklinde bu etiketleri kullanabiliriz.
Font Biçimlendirmeleri
<font face="Arial" size="20" color="red">Bu 1. örnek yazı..</font><br /> <font face="Verdana" size="18" color="blue">Bu 2. örnek yazı..</font><br /> <font face="Times New Roman" size="15" color="#999">Bu 3. örnek yazı..</font><br />
Ayrıca yukarıdaki font biçimlendirmelerini kullanarak yazılarımızın yazı tipini, boyutunu, rengini değiştirebiliriz.
Bu dersimizde html elemanlarını, yazı ve font biçimlendirmelerini öğrendik. Bir sonraki html dersimizde görüşmek üzere hoş çakalın..
Mobilhanem’e özel indirim ile birlikte 24.99 TL‘ye Sıfırdan Web Tasarım: HTML5, CSS3 ve Bootstrap 4 Eğitim Setini şimdi satın alabilirsiniz!
Tüm HTML / CSS Dersleri için tıklayınız.
0
Ferhat Yaldıran
Emine Yılmaz
Slack Grubumuza Üye Oldunuz mu ?
Yorum Yaz