Html öğrenmek çok basit bir iştir. Uygulama yaptıkça sizlerde kolaylığını fark edeceksiniz.
HTML: Hyper Text Markup Language (Hareketli- Metin İşaretleme Dili) deyiminin kısaltması olup bu kelimelerin baş harflerinden oluşmuştur.
Peki Nedir Html ?
- Html web sayfalarının Browser'larda (tarayıcılar) görüntülenmesini sağlayan dildir.
- Html bir programlama dili değildir.
- C,C++ ,Visual Basic gibi programlama dillerindekine benzer bir programlama mantığına sahip değildir.
- Bu yüzden öğrenmesi kolaydır.
- İnternette yayınlamak istediğiniz bilgileri browser'ların anlayacağı biçimde sayfaya yerleştiren komutlar dizisidir.
Html Tag'ı Ne Demek?
- Html bir diz komuttan oluşur.
- Bu kodların her birine tag debir diyebiliriz.
- Normal yazılardan ayırmak için "<" ve ">" işaretlerinin arasına yazılır.
Örnek:
Web sayfasında bir kelimenin veya cümlenin italik formatında yazılmasını istiyorsak bu cümlenin başına <i> tagını getirmeliyiz.
Basit Bir Web Sayfasında Bulunan Tag'lar?
Basit bir web sayfası
<html> -----------------> Her web sayfası bu satırla başlar ve </html> ile biter.
<head>
<title> Sayfa Başlığı </title> ------> Web sayfamızın başlığını bu tagın içine yazıyoruz.
</head>
<body> </body> ------> Web sayfamızda görünmesini istediğimiz içerikleri bu tagın içine yazıyoruz.
</html>
bu kodlardan oluşmaktadır.
Özetle;
<tittle> tagı tarayıcımızın sol üst köşesinde görünen sayfa başlığımızı gösterir.
<head> tagı sayfayla ilgili bilgileri web tarayıcısına gönderir.
<body> tagı web sayfasının içeriğinin yer alacağı tagdır.
Özetle;
<tittle> tagı tarayıcımızın sol üst köşesinde görünen sayfa başlığımızı gösterir.
<head> tagı sayfayla ilgili bilgileri web tarayıcısına gönderir.
<body> tagı web sayfasının içeriğinin yer alacağı tagdır.
Html kodlarını yazmak için bilgisayarınızda olan NOTEPAD (Not Defteri -Metin Belgesi) programını kullanabilirsiniz.
- Öncelikle yaptığımız çalışmaları bir klasör içerisinde toplayalım.
- Klasörümüze isim verelim (örnek, web sitenizin ismi )
- Notepad'i çalıştıralım.
- Başlat->Tüm Programlar-> Donatılar-> Not Defteri(Notepad)
- Programı çalıştırdıktan sonra yukarıda verdiğim kodları yazıyoruz.
- Bu kodlar her web sitesinde olması gereken standart kodlardır.
- Kodları yazdıktan sonra <body> tagının içine "Bu Sayfa Benim İlk Web Sayfam" yazalım.
- Yazdıktan sonra sayfayı kaydedelim.
- Web sayfalarının dosya uzantısı ".html"veya ".html" dir.
- Dosyamızın adını "ilksayfam.html" olarak kaydedelim.
- Web sayfamız için oluşturduğumuz klasöre girelim.
- Oluşan web sayfasını açalım.
- İlk Web Sayfamızın Görüntüledik artık yazı ile ilgili, özelliklere geçelim.
Yazı Tagları?
Web sitemizde yazı fontlarında değişiklik yapmak,yazı rengini,yazı şeklini değiştirmek için yazı taglarını kullanırız.
Örneğin; "Bu sayfa benim ilk web sayfam" yazısını kalın yazmak istiyoruz.
.
.
<body>
<b> Bu sayfa benim ilk web sayfam </b>
</body>
.
.
Yaptığımız değişikliği kaydettikten sonra tarayıcımıza gelip f5 yapıyoruz(sayfayı yeniliyoruz).
Sayfamızdaki yazıları italik yapmak için ise <i> tagını kullanıyoruz.
Notepad'de yazmış olduğumuz cümlenin sonuna gelip enter a bakıyoruz.
Alt satıra geçtikten sonra <i> tagının içine "Bu cümle italik olacak" yazıyoruz.
.
.
<body>
<b> Bu sayfa benim ilk web sayfam </b>
<i>Bu cümle italik olacak</i>
</body>
.
.
Html'in nasıl çalıştığını anladık.Sayfadaki ögelerin görünümünü değiştirmek istiyorsak, değiştirmek istediğimiz kısmın başına ve sonuna ilgili tagı yazıyoruz. Sondaki tagı yazarken yani açtığımız tagı kapatmak için "<" işaretinden sonra "/" işareti koymayı unutmuyoruz.
- Tag açarken <>
- Tag kapatırken </>
Bir yazının altının çizili olmasını istiyorsak <u> tagını kullanırız.
.
.
<body>
<b> Bu sayfa benim ilk web sayfam </b>
<i>Bu cümle italik olacak</i>
<u> Bu cümle altı çizili olacak </u>
</body>
.
.
Font Tagı
- Yazının fontunu değiştirmek için <font> tagını kullanıyoruz.
- Font denemelerimiz için yeni bir sayfa oluşturalım .
- Ben ikincisayfam.html adında bir sayfa oluşturdum sıra sizde :)
- Yazının fontunu Verdana yapacağız.
.
.
</head>
<body>
<font face ="verdana"> Bu cümlenin fontu verdana </font>
</body>
.
.
- Cümlenin fontunu ve rengini değiştirdik.
- Cümlenin fontunu,rengini değişirip harfleri büyüttük.
- Cümlenin fontunu,rengini değiştirip harfleri küçülttük.
.
.
<body>
<font face ="verdana"> Bu cümlenin fontu verdana </font>
<p><font face="verdana" color="FF0000" > Bu cümlenin rengi kırmızı. </font></p>
<p><font face="verdana" color="FF0000" size="5" > Bu cümlenin rengi kırmızı hemde büyük harfli .</font></p>
<p><font face="verdana" color="0000FF" size="1" > Bu cümlenin rengi mavi ve küçük harfli. </font></p>
</body>
.
.
Yeni sayfamızda dikkatiniz çeken bir şey oldu mu?
- Satırlarımız artık alt alta. :)
- Yeni bir tag kullandık ( <p> )
- <p> tagı paragraf yapmak için kullandığımız bir tagdır.
- <font> tagı gibi <p> tagının da birçok kullanım şekli vardır.
- Yazıyı paragrafa çevirmek, yazıyı ekranın sağına ve solona yaslamak ve ekranın ortasına yaslamak gibi.
- Bu tag ile yazıyı sayfanın iki yanına da yaslayabiliriz.
.
.
<body>
<p>Bu satır Solda görünecek</p>
<p align="right">Bu satır Sağda görünecek</p>
<p align="center"> Bu satır Ortada görünecek</p>
<p align="justfy"> Bu satır iki yana yaslanmış olacak.Uzun bir cümle kurmalıyım ki bunu fark edelim. Nasıl Sizce de kolay değil mi Html? :)</p>
</body>
.
.
Yorumlar
Yorum Gönder