Temel HTML Biçimlendirme Etiketleri

Temel HTML Biçimlendirme Etiketleri

Temel HTML Biçimlendirme Etiketleri

HelloHtml klasörümüzde yer alan index.html dosyasını açalım.

<body> etiketi içerisinde işlem yapacağız. Eğitim boyunca etiket ve parametre isimlerini küçük harflerle yazmaya devam edeceğim. Temel biçimlendirme etiketleri ve parametre değerleriyle eğitimimize devam ediyoruz.

<h1>…<h6> Başlık Etiketleri

Web tasarım ve programlama sürecinde sürekli kullanacağımız başlık etiketleri HTML dilinin vazgeçilmezidir. Kullanımı ve ekran görüntüsü aşağıdaki şekildedir. Tekrar hatılatmakta fayda görüyorum sadece etiket adını yazıp Enter tuşuna başmanız yeterli VS Code etiketimizi hızlı bir şekilde oluşturacaktır.

<h1>Başlık 1</h1>
<h2>Başlık 2</h2>
<h3>Başlık 3</h3>
<h4>Başlık 4</h4>
<h5>Başlık 5</h5>
<h6>Başlık 6</h6>

<p> Paragraf Etiketi

Html’in vazgeçemediği bir diğer etikettir. Paragraf oluşturmak amacıyla kullanılır. Paragraf için lorem yazıp Enter ile içerik otomatik getirebiliriz. Hadi <h1> ve <p> etiketlerini birlikte kullanalım.

<h1>Paragraf Etiketi</h1>

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem ad sunt obcaecati dolore libero rem nesciunt cupiditate velit repellat, et, ducimus impedit, nihil corporis labore numquam voluptates maiores explicabo ullam.</p>

<br> ve &nbsp; Etiketleri

Html’de 1 karakter boşluk bırakmak için &nbsp; 1 satır boşluk bırakmak için ise <br> etiketi kullanılır.

Mehmet&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Kasım<br>Sular

<b><i><u> Etiketleri

Bu etiketler metin biçimlendirmede kullanılmaktadır.  <b> (bold) metni kalın yapmak, <i> (italic) metni italik yapmak, <u> (underline) metni altıçizili yapmak amacıyla kullanılmaktadır. <i> etiketini ilerki derslerde CSS işlemlerinde icon tanımlamak için de yoğunlukla kullanacağız. CSS kullanımının yaygınlaşması sonrası popülaritesi azalmış fakat halen kullanılmaya devam edilen etiketlerdir.

<b>Kalın Metin</b> <br>
<i>İtalik Metin</i> <br>
<u>Altıçizili Metin</u>

<font> Etiketi

Metnin renk, yazıtipi ve boyut özelliklerini değiştirebileceğimiz bir biçimlendirme etiketidir. CSS kullanımının yaygınlaşması sonrası popülaritesi azalmış çok fazla kullanılmayan bir etikettir. size, color ve face parametrelerine sahiptir.

face: Bu parametre ile sayfamızda istediğimiz tarayıcı tarafından desteklenen popüler yazıtiplerini kullanabiliriz.

size : 1-7 arası değerler alır

color : renklerin İngilizce karşılıkları (red, green, blue, yellow, brown, pink vb. ) şeklinde değer alabildiği gibi aynı zamanda hexodecimal RGB renk kodu (#fa567c) şeklinde de değer alabilmektedir.

RGB Hexodecimal Renk Kodları

Web, Mobil ve masaüstü yazılım geliştirme süreçlerinde de karşılaşacağımız bu renklendirme sistemi mantığını basit bir şekilde anlatmaya çalışalım.  #fa567c şeklinde karşılaşacağımız bu renk düzeninde;

#'den sonraki ilk 2 karakter R (Red-Kırmızı) rengi,

3. ve 4. karakterler G (Green-Yeşil) rengi,

5. ve 6. karakterler B (Blue-Mavi) rengi temsil etmektedir.

Her karakter alanı 0-f arasında 16lık (hexodecimal) sayı değeri alır. Grafik tasarımda da karşımıza çıkan bu düzende Her toplam renk değeri (0-255  / 00 - ff) arasında değer alır. Yani kırmızı için #ff0000 , yeşil için #00ff00, mavi için #0000ff, siyah için #000000 ve beyaz için #ffffff 16lık renk kodlarını kullanabiliriz.

<font size="3" color="red" face="Verdana">
Bu yazı <b>size :</b> <u>3</u>
<b>renk :</b> <u>kırmızı</u> ve
<b>yazıtipi :</b> <u>verdana</u>
özelliklerine sahiptir.
</font>