Evet HTML derslerimizin 2.bölümüne hoşgeldiniz.Bugün yazılar ve yazılarımızı nasıl özelleştirebiliriz bunları öğreneceğiz.
İlk olarak geçen derste yazdığımız kodu hatırlatmak istiyorum sizlere ;
Bu kodu yazarak bir HTML sayfasının temel kalıbını, sayfa başlığı değiştirmeyi ve sayfa içerisinde görüntülenecek elementleri gördük.
Şimdi bu kod üzerinden giderek "Bu benim ilk dersim ve HTML öğrenmek istiyorum" şeklinde yazdığımız yazı üzerinde oynamalar yapalım.
Unutmayın ! Programlama dillerinin , script dillerinin ve web tasarım dillerinin en büyük ortak noktaları uygulamadan ve düzenli olarak tekrar edilmeden tam anlamı ile öğrenilemeyeceğidir.
Herkesin benim ile aynı fikirde olacağını düşünerek öğrenmesi en kolay dilin HTML olduğunu ve öğrenmesi en kolay dil olduğunu söyleyebilirim.
Hadi şimdi dersimize geçelim ;
ilk olarak girdiğimiz değerin yazı olduğunu tanımlayacak bir etikete ihtiyacımız olacak. HTML de yazı tanımlamasını yapan etiket <font></font> etiketidir.
Etiketin arasına yazılan değerin bir yazı olduğunu söyler. bu yüzden ilk başta "Bu benim ilk dersim ve HTML öğrenmek istiyorum" u yazı olarak tanımlayalım
Şimdi de etiketlere stil tanımalası yapmayı öğrenelim.Fark ettiğiniz gibi bütün etiketler ve değerler ingilizce, bu yüzden ingilizcenin önemini burada da görebiliyoruz
İlk olarak yazının büyüklüğünü değiştirelim.Bunun için etiket içerisine size(boyut) tanımlaması yapmalıyız.
etiket içerisine stil tanımlaması yaparken etiketin başlangıcına değer="" şekline ekleme yapılır. Biz burada yazı büyüklüğünü değiştirdik ve 5 değerini verdik.
Burada çok çeşitli tanımlama yapabilirsiniz. 6 çeşit ön-tanımlı yazı büyüklüğü vardır.Eğer siz size="" yazmazsanız otomatik olarak size="3" olarak yazılar yazılır.
1 en küçük 6 en büyük olmak üzere 6 farklı boyuttan oluşur..İsterseniz birkaç farklı yazı yazalım ve büyüklüklerini değiştirelim.
Burada örnek vermek amaçlı bir alt satırada ineceğiz ve bunu <br /> etiketi ile yapacağız
Gördüğünüz gibi birlikte yazı büyüklüklerini değiştirdik.Şimdi de isterseniz yazılarımızın renklerini değiştirelim.Bunun için color(renk) değerini kullanacağız.
color içerisine değerleri isterseniz ingilizce renk adı , hex kodu veya RGB kod olarak girebilirsiniz. Hadi şimdi hepsinden birer örnek yapalım
Gördüğünüz gibi yazılarımızda renklendi Göze biraz daha hoş görünmeye başladı değil mi ? Gelin şimdi de yazıları ortalamayı göterelim ve konumuzu burada bitirelim.
Bunun için center etiketini kullanmamız gerekiyor. "center" , içinde bulunan elementleri sayfaya ortalar.Hadi bütün yazıları ortalayalım.
Evet , yazılarımız ile ilgili genel tanımlamaları öğrendik. Bugünlük bu kadar , bir sonraki derste link eklemeyi ve tablo yapılarını göreceğiz.
Bir sonraki derste görüşmek üzere...
İlk olarak geçen derste yazdığımız kodu hatırlatmak istiyorum sizlere ;
dosyaismi.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>İlk Dersim</title>
</head>
<body>
Bu benim ilk dersim ve HTML öğrenmek istiyorum
</body>
</html>Bu kodu yazarak bir HTML sayfasının temel kalıbını, sayfa başlığı değiştirmeyi ve sayfa içerisinde görüntülenecek elementleri gördük.
Şimdi bu kod üzerinden giderek "Bu benim ilk dersim ve HTML öğrenmek istiyorum" şeklinde yazdığımız yazı üzerinde oynamalar yapalım.
Unutmayın ! Programlama dillerinin , script dillerinin ve web tasarım dillerinin en büyük ortak noktaları uygulamadan ve düzenli olarak tekrar edilmeden tam anlamı ile öğrenilemeyeceğidir.
Herkesin benim ile aynı fikirde olacağını düşünerek öğrenmesi en kolay dilin HTML olduğunu ve öğrenmesi en kolay dil olduğunu söyleyebilirim.
Hadi şimdi dersimize geçelim ;
ilk olarak girdiğimiz değerin yazı olduğunu tanımlayacak bir etikete ihtiyacımız olacak. HTML de yazı tanımlamasını yapan etiket <font></font> etiketidir.
Etiketin arasına yazılan değerin bir yazı olduğunu söyler. bu yüzden ilk başta "Bu benim ilk dersim ve HTML öğrenmek istiyorum" u yazı olarak tanımlayalım
dosyaismi.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>İlk Dersim</title>
</head>
<body>
<font>Bu benim ilk dersim ve HTML öğrenmek istiyorum</font>
</body>
</html>Şimdi de etiketlere stil tanımalası yapmayı öğrenelim.Fark ettiğiniz gibi bütün etiketler ve değerler ingilizce, bu yüzden ingilizcenin önemini burada da görebiliyoruz
İlk olarak yazının büyüklüğünü değiştirelim.Bunun için etiket içerisine size(boyut) tanımlaması yapmalıyız.
dosyaismi.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>İlk Dersim</title>
</head>
<body>
<font size="5">Bu benim ilk dersim ve HTML öğrenmek istiyorum</font>
</body>
</html>etiket içerisine stil tanımlaması yaparken etiketin başlangıcına değer="" şekline ekleme yapılır. Biz burada yazı büyüklüğünü değiştirdik ve 5 değerini verdik.
Burada çok çeşitli tanımlama yapabilirsiniz. 6 çeşit ön-tanımlı yazı büyüklüğü vardır.Eğer siz size="" yazmazsanız otomatik olarak size="3" olarak yazılar yazılır.
1 en küçük 6 en büyük olmak üzere 6 farklı boyuttan oluşur..İsterseniz birkaç farklı yazı yazalım ve büyüklüklerini değiştirelim.
Burada örnek vermek amaçlı bir alt satırada ineceğiz ve bunu <br /> etiketi ile yapacağız
dosyaismi.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>İlk Dersim</title>
</head>
<body>
<font size="1">Bu benim ilk dersim ve HTML öğrenmek istiyorum</font><br />
<font size="2">Bu benim ilk dersim ve HTML öğrenmek istiyorum</font><br />
<font size="3">Bu benim ilk dersim ve HTML öğrenmek istiyorum</font><br />
<font size="4">Bu benim ilk dersim ve HTML öğrenmek istiyorum</font><br />
<font size="5">Bu benim ilk dersim ve HTML öğrenmek istiyorum</font><br />
<font size="6">Bu benim ilk dersim ve HTML öğrenmek istiyorum</font><br />
</body>
</html>Gördüğünüz gibi birlikte yazı büyüklüklerini değiştirdik.Şimdi de isterseniz yazılarımızın renklerini değiştirelim.Bunun için color(renk) değerini kullanacağız.
color içerisine değerleri isterseniz ingilizce renk adı , hex kodu veya RGB kod olarak girebilirsiniz. Hadi şimdi hepsinden birer örnek yapalım
dosyaismi.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>İlk Dersim</title>
</head>
<body>
<font size="1" color="red">İngilizce Renk Kodu İle Renklendirildi</font><br />
<font size="2" color="skyblue">İngilizce Renk Kodu İle Renklendirildi</font><br />
<font size="3" color="green">İngilizce Renk Kodu İle Renklendirildi</font><br />
<font size="4" color="firebrick">İngilizce Renk Kodu İle Renklendirildi</font><br />
<font size="5" color="orange">İngilizce Renk Kodu İle Renklendirildi</font><br />
<font size="6" color="grey">İngilizce Renk Kodu İle Renklendirildi</font><br />
<font size="1" color="#b4eb34">HEX Kodu İle Renklendirildi</font><br />
<font size="2" color="#3b49b8">HEX Kodu İle Renklendirildi</font><br />
<font size="3" color="#210013">HEX Kodu İle Renklendirildi</font><br />
<font size="4" color="#49b85a">HEX Kodu İle Renklendirildi</font><br />
<font size="5" color="#8c1860">HEX Kodu İle Renklendirildi</font><br />
<font size="6" color="#6e5e4c">HEX Kodu İle Renklendirildi</font><br />
<font size="1" color="rgb(20, 219, 60)">RGB Kodu İle Renklendirildi</font><br />
<font size="2" color="rgb(255, 0, 0)">RGB Kodu İle Renklendirildi</font><br />
<font size="3" color="rgb(0, 255, 0)">RGB Kodu İle Renklendirildi</font><br />
<font size="4" color="rgb(0, 0, 255)">RGB Kodu İle Renklendirildi</font><br />
<font size="5" color="rgb(35, 18, 100)">RGB Kodu İle Renklendirildi</font><br />
<font size="6" color="rgb(43, 45, 47)">RGB Kodu İle Renklendirildi</font><br />
</body>
</html>Gördüğünüz gibi yazılarımızda renklendi
Göze biraz daha hoş görünmeye başladı değil mi ? Gelin şimdi de yazıları ortalamayı göterelim ve konumuzu burada bitirelim.Bunun için center etiketini kullanmamız gerekiyor. "center" , içinde bulunan elementleri sayfaya ortalar.Hadi bütün yazıları ortalayalım.
dosyaismi.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>İlk Dersim</title>
</head>
<body>
<font size="1" color="red"><center>İngilizce Renk Kodu İle Renklendirildi</center></font><br />
<font size="2" color="skyblue"><center>İngilizce Renk Kodu İle Renklendirildi</center></font><br />
<font size="3" color="green"><center>İngilizce Renk Kodu İle Renklendirildi</center></font><br />
<font size="4" color="firebrick"><center>İngilizce Renk Kodu İle Renklendirildi</center></font><br />
<font size="5" color="orange"><center>İngilizce Renk Kodu İle Renklendirildi</center></font><br />
<font size="6" color="grey"><center>İngilizce Renk Kodu İle Renklendirildi</center></font><br />
<font size="1" color="#b4eb34"><center>HEX Kodu İle Renklendirildi</center></font><br />
<font size="2" color="#3b49b8"><center>HEX Kodu İle Renklendirildi</center></font><br />
<font size="3" color="#210013"><center>HEX Kodu İle Renklendirildi</center></font><br />
<font size="4" color="#49b85a"><center>HEX Kodu İle Renklendirildi</center></font><br />
<font size="5" color="#8c1860"><center>HEX Kodu İle Renklendirildi</center></font><br />
<font size="6" color="#6e5e4c"><center>HEX Kodu İle Renklendirildi</center></font><br />
<font size="1" color="rgb(20, 219, 60)"><center>RGB Kodu İle Renklendirildi</center></font><br />
<font size="2" color="rgb(255, 0, 0)"><center>RGB Kodu İle Renklendirildi</center></font><br />
<font size="3" color="rgb(0, 255, 0)"><center>RGB Kodu İle Renklendirildi</center></font><br />
<font size="4" color="rgb(0, 0, 255)"><center>RGB Kodu İle Renklendirildi</center></font><br />
<font size="5" color="rgb(35, 18, 100)"><center>RGB Kodu İle Renklendirildi</center></font><br />
<font size="6" color="rgb(43, 45, 47)"><center>RGB Kodu İle Renklendirildi</center></font><br />
</body>
</html>Bir sonraki derste görüşmek üzere...
