HTML Elemanları ve Biçimlendirmeler | Mobilhanem

HTML Elemanları ve Biçimlendirmeler | Mobilhanem

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 elementleri






<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>

<!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.

Bu bir paragraftır.

<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

H etiketleri

H etiketleri

H etiketleri

H etiketleri
H etiketleri

<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.

İlk satır
ikinci satır

<p>İlk satır <br/>

ikinci satır

</p>

etiketi yazının veya etiketin bir alt satıra geçmesini sağlar.

Etiket Anlamı
Kalın yazmak.
Sağa yatık (italik) yazmak.
Altı çizili yazmak.
Üstü çizili yazmak.
Üs yazmak.
Alt hizada yazı yazmak.
Büyük yazı.
Küçük yazı.

Yukarıdaki etiketleri kullanarak, yazıları biçimlendirebiliyoruz.  Örnek olarak

Bu bir örnek paragraf cümlesidir.
Bu bir örnek paragraf cümlesidir.
büyük yazı
Küçük yazı

<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.

Bu 1. örnek yazı..
Bu 2. örnek yazı..
Bu 3. örnek yazı..

<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

Yorum Yap
0 Yorum yapan