LÜTFEN BEKLEYİN
Bu websitesi siz ziyaretçilere daha iyi bir web deneyimi sunabilmek amacıyla çerez denilen depolama yapılarını kullanır. Siteyi kullanarak ilgili verilerin depolanmasını ve işlenmesini kabul etmiş olursunuz. Detaylı bilgi için Kullanım Şartları, Gizlilik ve Çerez Politikası sayfalarını inceleyebilirsiniz.
Dili Değiştir (İçerik farklı olabilir) :
MENU ARAMA
Ana Sayfa \ Makaleler \ Eğitim \ Tasarım \ Html

HTML NEDİR?

Yayınlanma Tarihi : 01 Ağustos 2020 - 22:05
Son Güncelleme : 07 Ağustos 2020 - 22:33

Html nedir?

Html (Hyper Text Markup Language), "Zengin Metin İşaretleme Dili" anlamına gelen ve Google Chrome, Mozilla Firefox, Opera, Microsoft Edge gibi web tarayıcılarının yorumlayabildiği bir tasarım dilidir. Dikkat ederseniz programlama dili ifadesini kullanmadım, çünkü adından da anlaşılacağı üzere bir programlama dili değil, işaretleme yani verileri belirli bir düzen içerisinde gösterme dilidir. Bu yüzden ben ona tasarım dili demeyi daha doğru buluyorum. Bir dilin programlama dili adını alabilmesi için kendi başına operasyonel faaliyetler yürütebilmesi gerekir. Mesela içine sayı girebildiğimiz 2 tane metin kutusu ve bir tane de butonumuz olsun. Javascript ya da başka herhangi bir programlama dili kullanmadığınız sürece bu metin kutuları ve buton ile en basitinden bir dört işlem dahi yaptıramayız. Metin kutularının içine sayıları gireriz, butona basarız ama hiçbirşey olmaz, onlar bize bakar biz onlara. :-) Neden? Çünkü html'in işi bu olmadığı gibi ona dört işlem yaptırabileceğimiz, yani al şu iki sayıyı topla veya çarp gibi matematiksel işlemleri belirtebileceğimiz bir alfabesi yok, dolayısıyla bizi hiçbir şekilde anlayamaz.

Html, web dünyasında etiket (tag) olarak adlandırılan elemanlar ile yazı, resim, video vb. gibi verileri bir web tarayıcısı aracılığıyla belirli bir düzen içerisinde sunulmasını sağlar. Bu etiketlerin bir bütün olarak oluşturduğu dökümana da html dosyası denir.

Bir html dökümanı, temel olarak aşağıdaki etiketlerden oluşur.

<html>
<head>
</head>
<body>
</body>
</html>

Dikkat ederseniz etiketler ikişer tane; bunlardan biri açılış diğeri kapanış etiketidir. Veriler bu iki etiket arasına yazılır. Kapanış etiketlerinde açılış etiketlerinden farklı olarak etiket isminin solunda "/" karakteri vardır. Bu örnekte, <html></html> etiketleri arasındaki <head></head> ve <body></body> etiketlerini görüyoruz. Buradaki iç içe geçme durumunu şöyle izah edeyim; öncelikle bir html dökümanı her zaman <html> etiketi ile açılır ve </html> etiketi ile kapanır. Diğer bütün etiketler <html></html> etiketleri arasına yazılır ve alt etiket olarak da adlandırılabilir. <head></head> etiketleri, tarayıcıya ve arama motorlarına sayfa ile ilgili bir takım bilgileri veren verileri içine alır. Mesela <head><title>Hoş Geldiniz</title></head> ifadesinde <title>Hoş Geldiniz</title> kısmı, hem tarayıcı sekmesinde hem de arama motorlarındaki sonuç sayfalarında "Hoş Geldiniz" metninin gözükmesini sağlar. <head></head> etiketleri arasında <title></title> ile birlikte en çok <meta></meta>, <link></link>, <script></script> etiketlerini görürsünüz. Nadiren <style></style> şeklinde stil etiketlerini de görmeniz mümkündür.

Bazı etiketlerin kullanımında kapanış etiketi kullanılmayabilir. Örneğin arama motorlarının bir sayfayı indexleyip sayfa içindeki güncellemeleri takip etmesini sağlayan <meta name="robots" content="index, follow" /> etiketi gördüğünüz gibi <meta></meta> şeklinde kapatılmamıştır. Buna benzer şekilde sayfada bir satır aşağı inmeyi sağlayan <br> etiketi, sayfada bir resim gösterilmesini sağlayan <img> etiketi gibi etiketler de kapanış etiketi olmadan kullanılabilir. Elbette kapanış etiketleriyle birlikte kullanılmasında da bir sakınca yoktur.

Gelelim <body></body> etiketlerine. Bir internet sitesini ziyaret ettiğinizde karşınıza gelen sayfada gördüğünüz herşey <body></body> etiketleri arasına yazılmış verilerdir. Diğer bir deyişle bir web sayfasında ziyaretçilere göstermek isteyeceğiniz herşeyi <body></body> etiketleri arasına yazmanız gerekmektedir. Bu etiketler içinde birşey yoksa sadece boş bir sayfa görürsünüz.

Html, internet kullanıcılarına verileri en iyi şekilde sunabilme adına sürekli geliştirilen bir standarta sahiptir. Burada geliştirilmekten kasıt, yeni etiketlerin (html elemanları da diyebiliriz) yaratılması ve bunların web tarayıcıları tarafından da desteklenmesi olarak açıklanabilir. Bu bağlamda html, her yeni geliştirmede bir sürüm numarası almış ve bugün 5. sürüme (HTML5'e) ulaşmıştır.

Hadi gelin sizinle çook basit bir html dosyası yani bir web sayfası yaparak html'in ne olduğunu iyice anlayalım.

1. Adım : Bilgisayarınızdaki not defteri uygulamasını açın. (Mac kullanıcıları varsayılan metin editörünü kullanabilir.)

html nedir 1.adım

2. Adım : Karşımızda boş bir not defteri var, şimdi bunu yavaş yavaş html dosyasına yani bir web sayfasına dönüştürelim. Öncelikle bunun bir html dosyası olacağını söylemek için <html></html> etiketlerimizi yazalım.

html nedir 2.adım

3. Adım : Şimdi sayfamız için tarayıcı sekmesinde gözükecek bir başlık ekleyelim. Bunun için öncelikle arasına başlık etiketleri gireceğimiz<head></head> etiketlerini <html></html> etiketlerimizin arasına ekleyelim.

html nedir 3.adım

4. Adım : Şimdi <title></title> etiketleri ile başlığımızı belirleyelim. Mesela "web siteme hoş geldiniz" diyebiliriz. İstediğiniz ifadeyi kullanabilirsiniz.

html nedir 4.adım

5. Adım : Şimdi <body></body> etiketlerimizi ekleyelim ama içine birşey yazmayalım.

html nedir 5.adım

6. Adım : Şimdi bu dosyayı web tarayıcılarının anlayacağı cinse yani html formatına dönüştürelim. Dosya menüsünden Farklı Kaydet'i seçelim.

html nedir 6.adım

7. Adım : Dosya adı olarak herhangi bir isim verip sonuna .html yazıp kayıt türünü "Tüm Dosyalar" olarak seçtikten sonra dosyayı masaüstüne kaydedin. 

html nedir 7.adım

8.Adım : Bu işlemden sonra masaüstünüzde verdiğiniz isimde ve varsayılan web tarayıcınızın simgesi şeklinde bir dosya göreceksiniz. İşte bu, oluşturduğumuz html dosyamız yani web sayfamızdır.

html nedir 8.adım

9.Adım : Şimdi dosyaya çift tıklayıp sayfamızı tarayıcıda görüntüleyelim. Gördüğünüz gibi tarayıcı sekmesinde başlığımızı görebiliyoruz ancak <body></body> etiketlerimizin arasına birşey yazmadığımızdan karşımızda boş bir sayfa var.

html nedir 9.adım

10. Adım : Şimdi sayfanın ortasına adımızı büyük puntolarla yazalım. Bu küçük örneğimizde bunun için genellikle ana başlıklar için kullanılan <h1></h1> etiketlerini kullanacağız. Masaüstüne kaydettiğimiz html dosyamıza sağ tıklayıp "Birlikte aç" menüsünden "Not Defteri"ni seçelim.

html nedir 10.adım

11.Adım : <body></body> etiketleri içinde <h1></h1> etiketleri arasına adımızı yazalım. Metni sayfanın ortasına almak için "align" parametresine "center" değeri verdikten sonra klavyede sol alt köşedeki Ctrl tuşuna basılı tutup bir defa S tuşuna basarak (Ctrl+S) veya dosya menüsünden "Kaydet"i seçerek dosyamızı kaydedelim. Dosyayı kaydettikten sonra yine çift tıklayarak tarayıcıda görüntüleyelim.

html nedir son adım

Sonuç : İşte en basit haliyle html yani bir web sayfası budur. Html'in içindeki onlarca eleman, bunların kendilerine has parametre ve değerleri ile ek stil ve javascript fonksiyonlarının kombinasyonuyla bugün birbirinden güzel tasarımlı ve zengin içerikli web sayfaları oluşturulabilmektedir. Beğendiğiniz veya merak ettiğiniz bir web sayfasının html içeriğini görüntülemek için ilgili sayfa üzerinde herhangi bir boş alanda sağ tıklayarak "Sayfa kaynağını görüntüle"ye (bazı tarayıcılarda sadece "Kaynağı görüntüle" diye de geçebilir) tıklamanız yeterlidir.

html nedir örnek

65
2 (3 %)
Bu makale sevdiklerinizin de uzun süredir aradığı bir gönderi olabilir. Paylaşarak onları mutlu edebilirsiniz.
YORUMLAR 0
Henüz yorum yapılmamış. Aşağıdaki formu kullanarak ilk yorumu siz yapın.

YORUM YAZ

Konuyla ilgili düşüncelerinizi paylaşarak siz de katkıda bulunabilirsiniz.
Adınız
Avatar
Değiştir
Varsayılanı Geri YükleKapat (X)

E-Posta (Yayınlanmayacak, sadece yorumunuz yayınlandığında veya cevaplandığında bildirim alacaksınız.)
Website (İsteğe Bağlı)
Yorumunuz
Profiliniz bu tarayıcı için otomatik olarak kaydedilecektir.
HIZLI ERİŞİM


ÖNE ÇIKANLAR

SON MAKALELER
ÇOK BEĞENİLENLER
ÇOK YORUMLANANLAR
HABER
İNCELEME
DİJİTAL PAZARLAMA
TASARIM

HTML
CSS
PHOTOSHOP
PROGRAMLAMA

C#
JAVASCRIPT/JQUERY
.NET MVC
SQL
FLIGHT SIMULATOR

FLIGHT SIMULATOR X (FSX)
FLIGHT SIMULATOR 2020
HAYATTAN NOTLAR

FUTBOL
SEYAHAT
ÇÖZÜM MERKEZİ

TÜM ÇÖZÜMLER
TASARIM
YAZILIM
VERİTABANI
DONANIM
WINDOWS
OFİS
WEB
DİJİTAL PAZARLAMA
BİLGİ

HAKKIMDA
İLETİŞİM


Kaan Çamur MERHABA, BEN KAAN ÇAMUR. BİLGİSAYARLAR VE DİJİTAL TEKNOLOJİLER ÜZERİNDE ÇEŞİTLİ UZMANLIKLARIM BULUNMAKTADIR. BAŞTA BU ALANLAR OLMAK ÜZERE BİRÇOK KONUDA EDİNDİĞİM BİLGİ VE TECRÜBELERİ SİZLERLE PAYLAŞMAK AMACIYLA DİJİTAL DÜNYADAKİ BU EVİMİ İNŞA ETTİM. İNANIYORUM Kİ BURADA İŞİNİZE YARAYACAK VE SİZİ MUTLU EDECEK BİRÇOK İÇERİK BULACAKSINIZ. SİZ MUTLU OLURSANIZ BEN DE OLURUM, BU YÜZDEN BANA MUTLU OLDUĞUNUZU BİLDİRİN. :-)
YENİ GÖNDERİLERDEN HABERDAR OLMAK İSTER MİSİNİZ?
E-POSTA  :  
VEYA TAKİP EDİN

COPYRIGHT © 2020 KAAN ÇAMUR. TÜM HAKLARI SAKLIDIR.

BU WEB SİTESİNDEKİ TÜM MATERYAL VE GÖNDERİLER TELİF HAKKI KANUNLARINCA KORUMA ALTINDADIR.

KULLANIM ŞARTLARIGİZLİLİKÇEREZ POLİTİKASIİLETİŞİM