tag etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

Ders_6 HTML Temel İçerik Elemanları

HTML Sayfasının Temel İçerik Tagları

Aşağıda bir html sayfası hazırlarken, kullanılan temel elemanları göreceğiz. Bu elemanlar <body> başlama ve </body> bitiş taglarının arasına yazılır ve sayfamızın yapısını oluşturur.

Önemli bir tavsiye:

Bu ve bundan sonraki derslerin verimli olması için bir html editörü ile pratik yapmak doğru bir tercih olacaktır.

Editörde boş bir sayfa açıp, bu sayfayı kapatmadan, html uzantısı ile kaydetmelisiniz. Daha sonra, bu boş sayfaya öğreneceğimiz kodları yazmalısınız. Hemen ardından, sayfanızdaki değişiklikleri kaydetmelisiniz.

Editörünüzü kapatmadan, html dosyanızı kaydettiğiniz yerde bulup, bir web tarayıcısında açmalı ve sayfanızın tarayıcı çıktısını görmelisiniz. Bunun için dosyanın üzerine çift tıklamanız yeterli olacaktır.

Başlıklar

İnsanlar bir metni okumaya karar vermeden önce genellikle başlığına bakarlar. Sayfamızda yer alacak bir metine başlık eklemek oldukça kolaydır.

Bir başlık <h1> ve </h1> tagları arasında ilan edilen bir html elemanıdır. Bu taglardaki "h" header=başlık kelimesinden gelir. "1" ise başlığın font büyüklüğünü ifade eden bir saydır. Başlıkların font büyüklüğü <h1> den <h6> ya doğru azalır. Html 6 farklı büyüklükte başlık yazabilmemize izin verir.
Aşağıdaki örneği inceleyelim:

<html>

<body>

<h1>bu h1 başlığıdır</h1>

<h2>bu h2 başlığıdır</h2>

<h3>bu h3 başlığıdır</h3>

<h4>bu h4 başlığıdır</h4>

<h5>bu h5 başlığıdır</h5>

</body>

</html>

Bu html dökümanın tarayıcıdaki görünümü aşağıdaki gibi olacaktır:

bu h1 başlığıdır

bu h2 başlığıdır

bu h3 başlığıdır

bu h4 başlığıdır

bu h5 başlığıdır

Paragraflar

Paragraflar, satır başı ile başlayan metin parçalarıdır. Bir paragraf elemanı, <p> tagı ile başlar ve </p> tagı ile biter.

Aşağıdaki örneği inceleyelim:

<html>

<body>

<p>bu bir paragraftır</p>

<p>bu başka bir paragraftır</p>

</body>

</html>

HTML Linkleri

Bir kelimeye, bir başlığa, veya bir resme link verilebilir. Link elemanı <a> tagı ile başlar ve </a> tagı ile biter. Vereceğimiz linkin adersi ise href özelliği (attribute) ile belirtilir. Bir link elementinin genel yapısı şöyledir.

<a href="link adresi">Linke sahip olacak metin</a>

Aşagıda bir örnek verilmiştir.

<html>

<body>

<a href="http://www.google.com.tr">google için tıklayınız</a>

</body>

</html>

yukarıdaki kod söyle görünecektir:

google için tıklayınız

Tagların içine bir takım html özellikleri (attribute) yerleştirerek, html elemanına farklı özellikler katmak mümkündür.

HTML Sayfasına Bir Görüntü (Fotoğraf-Resim) Eklemek

Html görüntü dosyaları, <img> tagı içerisinde tanımlanır ve çağırılır. Bu tagın bitiş tagı yoktur.

<img> tagının genel yapısı şöyledir:

<img src="resmim.jpg" alt="resim" width="104"

height="142">

Bu yapıda;

src özelliği resmin yoludur.
alt özelliği, fareyi resmin üzerinde beklettiğimizde sarı bir kutucuk içerisinde ortaya çıkacak yazıdır.
width resmin genişliğidir.
height ise resmin yüksekliğidir.
Yukarıdaki örnekte, resmin genişliği 104 piksel, yüksekliği 142 piksel olarak ayarlanmıştır.

Resim dosyası, html doyası ile aynı klasör içinde değilse yolu da değişir. Örneğin resim dosyası, html dosyasının bulunduğu yerde ama "resimler" adlı bir klasörün içinde olsaydı, o zaman src özelliği:

src="resimler/resmim.jpg"

şeklinde yazılmalıydı.

sonraki ders için tıklayınız

Ders_2 HTML Tag İfadeleri

HTML "tag" İfadeleri

HTML dökümanları, HTML diline özgü ifadelerle oluşturulur. HTML diline özgü bu ifadelere "tag" yani etiket adı verilir. (Biz "etiket" değil de "tag" demeyi tercih edeceğiz.)

Bir benzetme olarak, Html konuşmak için kullandığımız bir dilse, bu dildeki her bir cümleye bir html elemanı (element) denir. Her bir html elemanı da, tag ile başlar tag ile biter diye düşünebiliriz.

Bir internet sayfasında; başlıklar, paragraflar, resimler, videolar, linkler ve daha bir çok türde içerik bulunmaktadır. HTML tagları, bu içerikleri oluşturmamızı sağlar.

Taglar; küçüktür (<) ve büyüktür (>) işaretleri arasına yazılan tag adlarından oluşur. Bu büyük-küçük işaretlerinin içinde / işareti de varsa, bu tag bitiş (kapama) tagıdır yoksa başlangıç (açma) tagıdır.

Örneğin;

<p> tagı, web tarayıcısına, bir paragrafın başladığı,
</p> tagı ise yine web tarayıcısına bir paragrafın bittiği mesajını verir.

Örneğin, html editöründeki;

<p> bu bir paragraftır </p>

kodunun web tarayıcıdaki çıktısı;

bu bir paragraftır

şeklinde olacaktır. Çünkü, web tarayıcılarında, tagların kendileri görünmez. Taglar, tarayıcılara rehberlik ederler. Tarayıcılar da (mesela google chrome) sayfamıza, bu taglara göre şekil verip bize gösterir.

Tarayıcı, sayfayı okurken, <p> tagına geldiğinde, bir paragrafın başladığını anlar ve bu tagdan sonra yazılan metni bir paragraf olarak yansıtır, ta ki bu tag bitene kadar...

Yine örnek olarak;
<h1> tagı, web tarayıcısına, bir başlık yazmaya başladığımızı,
</h1> tagı, da bu başlığın bittiğini ilan eder.

Dolayısıyla;

<h1> bu bir başlıktır</h1>

kodu, tarayıcımızda

bu bir başlıktır

şeklinde görünecektir.

Anlaşılacağı üzere, herhangi bir tagın başladığını <tag> yazarak, bittiğini ise </tag> yazarak ilan etmiş oluyoruz. Tagların hemen hepsi için bu durum geçerlidir.

Aşağıda bazı önemli taglar ve hangi amaçla kullanıldıkları belirtilmiştir:

<html> ve </html> arası : Her sayfanın bir başı ve sonu vardır. Bir html sayfasının da başı ve sonunu bu iki tag belirler. Web tarayıcısı bu iki tagın arasındaki herşeyi HTML verisi olarak yorumlar.
<head> ve </head> arası : Web tarayıcısına, hazırladığımız internet sayfası ile ilgili ön bilgi verilen aralıktır. Mesela sitenin dilinin Türkçe olduğunu, sayfanın genel başlığını, sayfanın google'da hangi kelimeler ile aranacağını... bu iki tag arasında ilan ederiz. Web tarayıcısı buradaki bilgileri kullanır fakat internet sayfasının içeriğinde doğrudan göstermez.
<title> ve </title> arası: Başlık vermeye yarar. Bu başlıklar, sayfamızın içeriğinde değil de web tarayıcının adres çubuğunun üst tarafında (en üstte) görünür.
<body> ve </body> arası: İşte internet sayfamızda görünecek içerik bu ikisinin arasına yazılır. Html dökümanının gövdesidir, sayfalarımızın içeriğini (menüler, yazılar, videolar, slaytlar) burada oluştururuz.
<h1> ve </h1> arası: İçerik oluştururken başlıklar bu iki tagın arsına yazılır.
<p> ve </p> arası: İçerik oluştururken paragraflar bu iki tagın arasına yazılır.

HTML kodu dediğimizde aslında çok çeşitli başlangıç ve bitiş tagları ve bu tagların arasına yazılmış bir takım metinlerden bahsetmiş oluyoruz.

Aşağıda basit bir HTML dökümanı örneği verilmiştr:

<!DOCTYPE html>
<html>
<head>
<title> burası sayfa başlığı</title>
</head>
<body>

<h1>burada büyük puntolu bir başlık var.</h1>
</body>

<p>burada bir paragraf var.</p>

</html>

Yukarıdaki html sayfasının tarayıcıdaki görüntüsü şöyle olacaktır:

burada büyük puntolu bir başlık var.

burada bir paragraf var.

sonraki ders için tıklayınız