5 Adımda Temel HTML Öğrenin | editorcum

5 Adımda Temel HTML Öğrenin

HTML, bildiğimiz webin hayati parçasıdır. Web tasarımcısı HTML’yi elle yazarak sayfalar oluştururken, bu konuda biraz bilgi sahibi olup sizde HTML kodları ile web sayfaları oluşturabilirsiniz. HTML’nin gerçekte ne olduğu, bazı temel kavramlar ve diğer dillerle nasıl etkileşime girdiği de dahil olmak üzere dilin bazı temellerini inceliyorum 🙂

HTML Nedir?

HTML, Köprü Metni Biçimlendirme Dili anlamına gelir. Ve bazen programlama dilleriyle doluyken, bu doğru değildir. İşaretleme dili olarak, HTML yalnızca sayfaların görüntü düzenini oluşturmanıza izin verir. Java veya C ++ gibi gerçek programlama dili, mantık ve yürütülen komutları içerir. Basit olmasına rağmen, HTML web’deki her sayfanın omurgasıdır. Metnin koyu olarak gösterilmesinden, resim eklemekten ve diğer sayfalara bağlantı vermekten sorumludur. Tarayıcınızdaki çoğu web sayfasına sağ tıklayabilir ve arkasındaki HTML’yi görmek için sayfa kaynağını görüntüle diyebilirsiniz.

Biçimlendirme veya programlama dilleri konusunda sıfır deneyiminiz olsa bile, HTML hakkında biraz bilgi edinmek sizi daha bilgili web kullanıcısı yapacaktır. HTML’nin nasıl çalıştığını anlamanıza yardımcı olmak için beş temel adımda ilerleyelim. Yol boyunca örnekler vereceğim.

Adım 1 : Etiketler Kavramını Anlamak ;

HTML, belgenin farklı öğelerini kategorilere ayırmak için etiket sistemi kullanır. Çoğu etiket, etkilenen metni içlerine sarmak için çiftler halinde gelir. İşte basit bir örnek <strong> etiketi metni kalınlaştırır.

Kapanış etiketinin eğik çizgiyle (/) nasıl başladığına dikkat edin. Bu önemli olan kapanış etiketini ifade eder. Etiketi kapatmazsanız, en başından itibaren her şey bu özelliğe sahip olacaktır.

Ancak, tüm etiketlerin çifti yoktur. Boş öğeler olarak adlandırılan bazı HTML öğelerinin içeriği yoktur ve kendi başlarına vardır. Bir örnek, satır sonu olan <br> etiketidir. Eğik çizgi ekleyerek (örneğin </br> gibi) bu etiketleri “kapatabilirsiniz” ancak kesinlikle gerekli değildir.

Adım 2: İskelet HTML Düzeni ;

HTML belgesinde belirli etiketlerin tanımlanmış olması gerekir, böylece doğru şekilde düzenlenir. Bunlar önemli parçalardır:

  • Her HTML dokümanı <!DOCTYPE html > ile başlar. Bu nedenle, kapanış etiketi , </html>, HTML dosyasındaki son öğedir.
  • Daha sonra <head> bölümü, sayfa başlığı, sayfada çalışan çeşitli komut dosyaları ve benzerleri gibi bilgileri içerir. Adından da anlaşılacağı gibi, bu genellikle ilk <html> etiketinden hemen sonra gelir. Son kullanıcı, bu etiketlerdeki içeriğin çoğunu görmüyor.
  • Son olarak, <body> etiketi, okuyucunun gördüğü sayfanın metnini tutar. Bu bölümde görüntüleri, bağlantıları ve daha fazlasını bulacaksınız.

Adım 3 : Biçimlendirme için Temel HTML Etiketleri ;

HTML belgelerini oluşturan bazı ortak etiketlere bakalım. Tabii ki, her bir öğeyi kapsamak mümkün olmadığından, en önemlilerinden bazılarını gözden geçirdim. Etiketler oldukça basit görünüyorsa, HTML’nin 1993’te tamamen eski haline getirildiğini unutmayın. Web o zamanlar ilk aşamalarında çok fazla metin tabanlıdır.

Basit Metin Biçimlendirme ;

HTML, Microsoft Word’de bulacağınız gibi temel metin stillerini destekler:

  • <strong> etiketi metni kalınlaştırır.
  • <em> etiketi metni italikleştirir.

HTML ayrıca eski <b> kalın etiketi ve <i> italik etiketlerini destekler fakat yukarıda ki etiketleri kullanmanızı tercih ederim.

Paragraf ve Diğer Bölümler ;

HTML <div> etiketi, belgenin bölümünü tanımlamanıza izin verir. Genellikle , bölümü belirli bir şekilde biçimlendirmek için CSS ile eşleştirilir. <p> etiketi metni paragraflara bölmenizi sağlar. Tarayıcılar bu metinlerden önce ve sonra otomatik olarak boşluk bırakarak metinleri bölmenizi sağlar. Belgenize başlıklar ekleyebilir <h1> , <h2> .. <h6> etiketleri ile başlık boyutlarını ayarlayabilirsiniz. <h1> en büyük başlığı ifade eder . HTML belgenize satır sonu eklemek için Enter tuşuna basıldığında aslında görüntülenmez. Bunun yerine, <br> satır sonu eklemek için kullanabilirsiniz.

Yukarıda bahsettiğim etiketleri kullandığım örnek:

Adım 4: Görüntüleri Ekleme ;

Resimler çoğu web sayfasının hayati parçasıdır. Onları HTML ile kolayca ekleyebilir ve hatta onlar için farklı özellikler belirleyebilirsiniz. <img> etiketini kullanarak resim eklersiniz. Bunu “src” parametresi ile birleştirmek, görüntünün nereden yüklenmesini istediğinizi belirtmenizi sağlar. <img> etiketinin diğer önemli özelliği “alt” parametresidir. “alt” metin, görüntüyü ekran okuyucular için veya görüntünün düzgün yüklenmemesi durumunda açıklamanıza olanak tanır. “alt” metnini görmek için resimlerin üzerine fare tıklayabilirsiniz. Görüntünün göründüğü piksel sayısını belirlemek için genişlik ve yükseklik öğelerini kullanın.

Hepsini bir araya getirirseniz, resim etiketi şöyle görünür:

Adım 5 : Bağlantı Ekleme ;

İnternet üzerinde, diğer sayfalara bağlantısı olmayan web sitesi olmazdı. <a> etiketini kullanarak herhangi bir metindeki diğer sayfalara link verebilirsiniz. <a> etiketinin içinde, “href” parametresi nereye bağlandığınızı gösterir. URL’yi yapıştırmanız yeterlidir.

Temel bağlantı kodu şu şekildedir :

<a> etiketinin birçok parametresi var fakat bu yazımda konuyu fazla uzun tutmayacağım. 🙂

HTML, CSS ve JavaScript ile Nasıl Bağlanır?

HTML’nin temeline ve web sayfasını nasıl oluşturduğuna baktık. Ancak tahmin edebileceğiniz gibi, HTML yalnızca modern web için yeterli değil. Basit HTML web sayfaları, “Web 1.0” günlerinde, çoğu web sitesinin statik metinden başka bir şey olmadığı durumlarda yaygındı.
Ama şimdi daha çok var. CSS , HTML’de hazırladığınız metnin nasıl görünmesi gerektiğini açıklayan dildir. Konuştuğumuz <div> etiketini hatırladın mı? Bunun içinde sınıf niteliği tanımlayabilirsiniz. Sonra, beraberindeki CSS belgenizde, o sınıfın nasıl görünmesi gerektiği konusunda kodlar yazabilirsiniz. Stil öğelerini HTML kodunuzda satır içi olarak tanımlayabilirsiniz, ancak , bakımı daha zor olduğu için kötü uygulama olarak kabul edilir.

2 Comments

Bir cevap yazın

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