HTML

HTML Giriş – HTML Nedir ?

Merhabalar, bu makalemizde HTML’in ne işe yaradığını ve nasıl kullanıldığını göreceğiz. İlk olarak biraz HTML’ i (-eyç -ti -em -el) tanıyalım.

1.HTML Nedir ?

  • HTML’in açılımı Hyper Text Markup Language (Türkçe’si tam olarak bulunmamakla beraber “zengin metin işaret dili” deniliyor).
  • Bir HTML dosyası bir text dosyası olmakla beraber markup tags (işaretlenmiş etiketler) içerir.
  • Markup tag’lar web tarayıcınıza sayfanın nasıl gösterileceğini gösterir.
  • Bir HTML dosyası basit bir text editör ile oluşturulabilir.
  • Bir HTML dosyasının uzantısı htm veya html olmak zorundadır.

Genel olarak sıkça sorulan sorulardan biriside HTML’in bir dil olup olmadığı. HTML açılımını yaparken “Language” kelimesini görmüştük. İsminde dil kelimesi geçen bir ismi dil değildir diyemeyiz. HTML bir dildir ancak bir programlama dili değildir. Yani HTML kodlarıyla bir program yazamayız.Zira bu dili yorumlayabilen programlar aracılığıyla çalışan programlar yazılabilir. Programlama dili denilmemesinin nedeni tam olarak budur.

HTML günümüzde internet üzerinde veri paylaşımı için kullanılan en yaygın metin tabanlı dildir.Dilin Son Sürümü HTML5‘tir. Temel gereği yazı, görüntü, video gibi değişik verileri ve bunları içeren sayfaları birbirine basitçe bağlamak, buna ek olarak söz konusu sayfaların web tarayıcısı yazılımları tarafından düzgün görüntülenmesi için gerekli kuralları belirlemektir. Bu dili kullanmak için basit bir metin editörü (Örneğin, Not Defteri , Wim ,TexMate ,NotePad++, vb.) kullanabilirsiniz. Oluşturulan .html yada .htm uzantılı dosyanızı görüntülemek için bir tarayıcı/browser (Chrome,Firefox,Internet Explorer,Opera vb.) kullanmanız gerekir.

2.HTML Genel Yapısı

Web sitemizi oluşturmak için gerekli bazı HTML markup tag’ları gerekmektedir. Bu tag’lar kullanacağımız kodların yerinin belirlenmesinde rol oynar. HTML etiketleri (tag’ları) açılırken “<” ile “>” işaretleri arasına yazılır, Örneğin “<html>“,bu bir “html” açılış etiketidir.HTML etiketleri kapanırken ise “</” ile “>” işaretleri arasına yazılır, Örneğin, “</html>” , bu bir “html” kapanış etiketidir. Unutulmamalıdır ki açılan her etiket kapanması gerekir. Etiket kapatmamayı unutmamak için etiket atığınız anda etiketi kapatmanızı öneririm.

3.HTML İskeleti

[sourcecode language=”html”]
<html>
<head>
</head>
<body>
</body>
</html>
[/sourcecode]

Yukarıda bulunan etiketler HTML yazmak için olmazsa olmazlardandır,bu etiketler mutlaka olmalıdır. Kodun daha rahat okunması için kod aralarına 1 satır boşluk bırakıyoruz ve iç içe yazılan etiketleri de klavyede bulunan “Tab” tuşu ile ayırıyoruz.

html nedir Not Defteri NotePad

“<html>” etiketi ne işe yarar : Bu etiket tarayıcıya/browser’a bu kodun hangi dil ile yazıldığını bildirir.

“<head>” etiketi ne işe yarar : İçerisinde genel bilgiler ve sayfa bilgileri bulunur.Bu bilgiler tarayıcı tarafından okunmaktadır.(<head> etiketinin alt etiketleri : <title>, <base>, <link>,<meta> bunları daha sonra işleyeceğiz.)

“<body>” etiketi ne işe yarar : Sayfa içerisinde yani tarayıcınızda görüntülemek istediğini herşeyi / her hodu burada belirteceğiz.

4.Örnek HTML Dosyası

[sourcecode language=”html”]
<html>
<head>
<title>Sayfamızın Başlığı Burada Olacak</title>
</head>
<body>
<p>Body içerisinde yazacağımız herşey sayfamızda gözükücek</p>
</body>
</html>
[/sourcecode]

Yukarıda ki kodu kopyalayıp masaüstünüzde sağ tıklayarak “Yeni” deyip yeni bir “Not Defteri” dosyası oluşturalım ve oluşturduğumuz dosyanın içine girerek “Dosya > Farklı Kaydet” seçeneğine tıklayıp dosyanın adını “deneme.html” şeklinde değiştirip kaydedelim.Daha sonra kaydettiğimiz dosyayı sağ tıklayarak “Birlikte Aç > Not Defteri” ile açalım. Siteden kopyaladığımız kodu buraya yapıştırıp “Dosya > Kaydet” diyelim.Şimdi HTML dosyamız oluştu ve kullanıma hazır.Masaüstünde oluşturduğumuz dosyayı çift tıklayalım ve kodun sayfada nasıl gözüktüğünü inceleyelim.

Genel yapısı kısmından farklı olarak iki tane etiket kullandık.

“<title>” etiketi ne işe yarar : Bu etiket içine yazılan hermetin tarayıcının üstünde (durum çubuğunda) bilgi olarak yer alır.Bir nevi sayfanın adı diyebiliriz.

“<p>” etiketi ne işe yarar : Sayfa içerisine paragraf eklemimizi sağlar,içine yazılan yazılar paragraf stilinde gözükür.

“title” ve “p” etiketleri içerisinde yazan yazılarımızı düzenleyip kaydettikten sonra web tarayıcımızdaki görüntüyü değiştirebilirsiniz.

HTML Web Browser

Resim 2

Html ile alakalı daha detaylı bilgiye ulaşmak için w3schools sitesine bakabilirsiniz.Bu makalemizde HTML’e tam olarak giriş yaptık diyebiliriz.Örneklerle güçlendirdiğimiz bu konuyu etiketleri deneyerek de kolayca öğrenebilirsiniz.Bir makalemizin daha sonuna geldik.Bir sonraki makalemizde görüşmek dileğiyle.

download-indir

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir