İnternetin başlangıcından bu yana, HTML, dünya çapında web’in çalışmasını ve istediğimiz şekilde görünmesini sağlamak için çok önemli olmuştur. HTML’nin ne olduğuna ve her gün gördüğünüz sayfalara nasıl dönüştüğüne bir göz atalım.
İnternetin Omurgası
HTML, “köprü metni biçimlendirme dili” anlamına gelir. Bir web tarayıcısının görüntüleyebileceği sayfalar oluşturmak için kullanılan bir kodlama dilidir. Şu anda bu makaleyi okuduğunuz sayfa da dahil olmak üzere internette bulduğunuz web sayfalarının çoğu bir HTML dosyası olarak saklanır. Web siteleri, bir yerde bir sunucuda depolanan bir grup ilgili HTML sayfasıdır. Bu yüzden dile sıklıkla “internetin omurgası” denir.
İnternette bir sayfaya her gittiğinizde, esasen sunucuda depolanan bir HTML dosyası talep ediyorsunuz. Ardından, Chrome veya Firefox gibi kullandığınız tarayıcı HTML’yi ayrıştırır ve size tasarlandığı şekilde görüntüler.
HTML’nin evrenselliği ve çok yönlülüğü onu dünyadaki en popüler işaretleme dili yapar. Çoğu ön uç web geliştiricisi, HTML’de nasıl kod yazılacağını öğrenerek başlar. Sürükle ve bırak araçları ve WYSIWYG düzenleyicileri, tarayıcıların bunları ayrıştırabilmesi için sonunda HTML’ye çevrilir.
İLGİLİ: İşaretleme Dili Nedir?
HTML Nasıl Çalışır?
Herhangi bir programlama dili gibi, HTML de öne bakan görsele dönüşmeden önce bir dizi komut ve metin bloğu gibi görünür. Bu sayfadaki HTML’nin nasıl göründüğünü merak ediyorsanız ve bir masaüstü veya dizüstü bilgisayardaysanız, bu sayfada herhangi bir yere sağ tıklayıp “Sayfa Kaynağını Görüntüle”yi seçin (seçenek tarayıcınıza bağlı olarak değişebilir). ). Sizi dev bir kod duvarına götürmeli.
Çoğu HTML, bir sayfadaki farklı öğeleri ayıran HTML kodu parçacıkları olan “öğe blokları” kullanılarak oluşturulur. Örneğin, bu makalenin gövdesi, menü, aşağıdaki öneriler ve sayfanın altbilgisi gibi bir öğe bloğudur. Bu öğeler, farklı davranabilecekleri için kendi yollarıyla kodlanmıştır.
HTML sayfaları oluşturmanın çok önemli bir parçası Basamaklı Stil Sayfalarının (CSS) kullanılmasıdır. Bunlar, bir sayfanın belirli öğelerinin nasıl görünmesi gerektiğini tanımlayan belgelerdir. Örneğin, resimlerin ne kadar büyük olması gerektiği, bir sayfada hangi yazı tiplerinin görünmesi gerektiği ve bir web sayfasının yeniden boyutlandırıldığında veya uzatıldığında nasıl yanıt vermesi gerektiği. Bunların hepsi çekici, uyumlu ve şık web siteleri oluşturmak için çok önemlidir. Son on yılda web sitelerinin daha iyi görünmeye başladığını fark ettiyseniz, bunun en büyük nedeni CSS kullanımının artmasıdır. CSS hakkında daha fazla bilgiyi buradan okuyabilirsiniz.
HTML ile ilgili en iyi şeylerden biri, JavaScript veya JS aracılığıyla dinamik komut dosyaları çalıştırma yeteneğidir. Bu komut dosyaları dinamik öğeler oluşturabilir. Örneğin, belirli web sitelerinde, bir resmin üzerine gelmek, onu yakınlaştırmanıza olanak tanır. Bu efekti bir JavaScript öğesinde kodlayarak yapabilirsiniz.
İLGİLİ: Google Chrome’da JavaScript Nasıl Devre Dışı Bırakılır (ve Etkinleştirilir)
HTML Temelleri
HTML, tonlarca farklı etiket ve blok içeren oldukça karmaşık bir dil olsa da, internette gezinirken işinize yarayabilecek birkaç HTML kodu vardır. İşte karşılaşabileceğiniz birkaç temel HTML etiketi.
<a href="https://www.howtogeek.com">How-to Geek</a>
Nasıl Yapılır?
sen kullan <a> bağlantı oluşturma komutu. URL, bağlantının gösterileceği yerdir ve “Nasıl Yapılır” yazan metin, bir son kullanıcıya nasıl görüneceğidir.
<b>bold</b> <i>italic</i> <u>underline</u>
gözü pek italik altını çizmek
kullanabilirsiniz <b>, <i>, ve <u> standart metin biçimlendirme seçeneklerini uygulamak için: kalın, italik ve altı çizili metin.
<img src="https://www.howtogeek.com/752587/what-is-html/picture.jpg">
NS <img> etiketi, bir resmi bir sayfaya gömmek için kullanılır. Görüntüyü aynı etki alanından çeker veya harici bir etki alanına yönlendirebilirsiniz. Yeniden boyutlandırma ve alternatif metin gibi bazı ek özelliklerle de özelleştirebilirsiniz.
<h1>heading 1</h1> <p>paragraph</p>
Yukarıdakiler başlık ve paragraf etiketleridir. Microsoft Word’ün metni başlıklara ve gövde metnine göre sıralamanıza izin vermesine benzer şekilde, HTML de metni varsayılan başlık ve paragraf seçeneklerine göre biçimlendirebilir. Bu biçimler, CSS stil sayfası kullanılarak tanımlanır.
<p style="color:edr;">red paragraph</p>
Ayrıca "style" metni, metin rengi, arka plan rengi ve yazı tipi boyutu gibi çeşitli stil ayarlarıyla özelleştirmek için öznitelik.
Daha fazla HTML biçimlendirme seçeneği öğrenmekle ilgileniyorsanız, W3Schools’un ücretsiz kaynaklarına göz atın. Web sayfalarınızı oluşturmaya başlamak için kullanabileceğiniz HTML etiketlerinin tam listesini bulacaksınız.
İLGİLİ: “Duyarlı Tasarım” Nedir ve Nasıl Kullanırsınız?
