Temel HTML Kodunu Anlamak için 5 Adım

Temel HTML Kodunu Anlamak için 5 Adım

HTML, bildiğimiz gibi web'in hayati bir parçasıdır. Ve birkaç web tasarımcısı elle HTML yazarak sayfalar oluştursa da, bu konuda biraz bilgi sahibi olmak yine de kullanışlıdır.





HTML'nin gerçekte ne olduğu, bazı temel kavramlar ve diğer dillerle nasıl etkileşime girdiği dahil olmak üzere dilin bazı temellerine bakacağız. Bunu bir 'aptallar için HTML' hızlandırılmış kursu olarak düşünün.



HTML Temelleri: HTML Nedir?

HTML'nin kısaltması Köprü Metni Biçimlendirme Dili . Ve bazen programlama dilleriyle karıştırılsa da bu doğru değil.





Olarak işaretleme dili , HTML yalnızca sayfaların görüntü düzenini oluşturmanıza izin verir. Gerçek Programlama dili Java veya C++ gibi, mantık ve yürütülen komutları içerir.

Basit olmasına rağmen, HTML, web'deki her sayfanın belkemiğidir. Metnin kalın olarak gösterilmesinden, resim eklenmesinden ve diğer sayfalara bağlantı verilmesinden sorumludur. Daha fazlasını açıklayan bir HTML SSS'miz var.



Tarayıcınızdaki çoğu web sayfasına sağ tıklayıp Sayfa kaynağını göster veya arkalarındaki HTML'yi görmek için benzer. Bu muhtemelen HTML olmayan birçok kod içerecektir, ancak bunu eleyebilirsiniz.

İşaretleme veya programlama dilleri konusunda sıfır deneyiminiz olsa bile, HTML hakkında biraz bilgi edinmek sizi daha bilinçli bir web kullanıcısı yapacaktır. HTML'nin nasıl çalıştığını anlamanıza yardımcı olacak beş temel adımı inceleyelim. Yol boyunca örnekler vereceğiz.



Adım 1: Etiket Kavramını Anlamak

HTML bir sistem kullanır etiketler belgenin farklı öğelerini sınıflandırmak için.

Çoğu etiket, etkilenen metni içlerine sarmak için çiftler halinde gelir. İşte basit bir örnek (



etiket metin yapar gözü pek ; Bunu birazdan daha fazla tartışacağız.)

This is some bold text .

Kapanış etiketinin nasıl bir eğik çizgiyle (/) başladığına dikkat edin. Bu, önemli olan bir kapanış etiketi anlamına gelir. Bir etiketi kapatmazsanız, baştan itibaren her şey bu özelliğe sahip olacaktır.

kıyafet bulmanıza yardımcı olan uygulama

Ancak, tüm etiketlerin bir çifti yoktur. olarak adlandırılan bazı HTML öğeleri boş elemanlar , içeriği yoktur ve kendi başlarına var olurlar. Bir örnek


bir satır sonu olan etiket. Bu tür etiketleri bir eğik çizgi ekleyerek 'kapatabilirsiniz' (ör.


) ama kesinlikle gerekli değildir.

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

Uygun bir HTML belgesinin doğru bir şekilde düzenlenmesi için belirli etiketlerin tanımlanmış olması gerekir. Bunlar önemli parçalar:

  • Her HTML belgesi |__+_| ile başlamalıdır. kendini böyle ilan etmek. Böylece, kapanış etiketi, |__+_| , bir HTML dosyasındaki son öğedir.
  • Sonraki |__+_| bölümü, sayfa başlığı, sayfada çalışan çeşitli komut dosyaları ve benzeri bilgileri içerir. Adından da anlaşılacağı gibi, bu genellikle ilk |_+_| etiket. Son kullanıcı bu etiketlerdeki içeriğin çoğunu görmez.
  • Son olarak, |__+_| etiketi, okuyucunun gördüğü sayfa metnini (artı çok daha fazlasını) tutar. Burada resimler, bağlantılar ve daha fazlasını bulacaksınız.

Beri

bölümü bir HTML belgesinin büyük kısmını oluşturur, izlenecek yolumuzun geri kalanı onunla ilgili öğelere bakar.

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

Şimdi, HTML belgelerini oluşturan bazı yaygın etiketlere bakalım. Tabii ki, her unsuru kapsamak mümkün değil, bu yüzden en önemlilerinden bazılarını gözden geçireceğiz. biz kapattık daha birçok HTML örneği bunlar seni tatmin etmiyorsa

Bu etiketler oldukça basit görünüyorsa, HTML'nin 1993'te oluşturulduğunu unutmayın. Web, o zamanlar ilk aşamalarında çok fazla metin tabanlıydı.

Basit Metin Biçimlendirme

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

  • |_+_| etiketler metin yapar gözü pek .
  • |_+_| etiketler ('vurgu' anlamına gelir) italik yapmak Metin.

HTML ayrıca eskileri de destekler

kalın için etiket ve

italikler için. Ancak, yukarıdakileri kullanmak tercih edilir.

Kısacası,

ve

bir şeyin nasıl anlaşılması gerektiğini gösterirken, ikinci etiketler size yalnızca nasıl görünmesi gerektiğini söyler. Bu eski etiketler, görme engelliler tarafından kullanılan ekran okuyucular için daha erişilebilirdir.

Paragraf ve Diğer Bölümler

HTML'ler

etiketi, belgenin bir bölümünü tanımlamanıza olanak tanır. Genellikle bu, bir bölümü belirli bir şekilde biçimlendirmek için CSS ile eşleştirilir (aşağıya bakın).

NS

etiketi, metni paragraflara bölmenizi sağlar. Tarayıcılar otomatik olarak bunlardan önce ve sonra biraz boşluk bırakarak metni doğal olarak ayırmanıza izin verir.

Belgenize başlıklar ekleyebilir ve aşağıdakileri kullanarak takip etmeyi kolaylaştırabilirsiniz.

vasıtasıyla

etiketler. H1 en önemli başlıktır, H6 ise en az önemlidir. Neredeyse her MakeUseOf makalesi, bilgileri düzenlemek için H2 ve H3 başlıklarını kullanır.

İsabet Girmek HTML belgenize satır sonları eklemek aslında onları görüntülemeyecektir. Bunun yerine, kullanabilirsiniz

satır sonu eklemek için.

İşte tüm bunları kullanan bir örnek:

Adım 4: Resim Ekleme

Görüntüler çoğu web sayfasının hayati bir parçasıdır. Bunları HTML ile kolayca ekleyebilir ve hatta onlar için farklı özellikler belirleyebilirsiniz.

kullanarak bir resim eklersiniz.

etiket. Bunu ile birleştirerek

öznitelik, görüntünün nereden yüklenmesini istediğinizi belirlemenizi sağlar.

Bir diğer önemli özelliği

işletim sisteminizden bir iso görüntüsü oluşturun

etiketler

. Alternatif metin, görüntüyü ekran okuyucular için veya görüntünün düzgün yüklenmemesi durumunda tanımlamanıza olanak tanır. Alt metnini görmek için fareyi bir görüntünün üzerine getirebilirsiniz.

Kullan

ve




görüntünün göründüğü piksel sayısını belirtmek için öğeler.

Hepsini bir araya getirin ve bir resim etiketi şöyle görünür:


Example Heading


This is one paragraph.


This is a second
paragraph split between two lines.



World Wide Web, diğer sayfalara bağlantılar olmadan pek bir web olmazdı. Kullanmak

etiketi, herhangi bir metin üzerinde diğer sayfalara bağlantı verebilirsiniz.

İçinde

src

etiket,

nitelik, nereye bağlantı kurduğunuzu söyler. URL'yi yapıştırmanız yeterli olacaktır. kullanabilirsiniz

alt

Birisi bağlantının üzerine geldiğinde görünen bir parça metin eklemek için öğe.

Temel bir bağlantı şöyle görünür:

width

NS

height

etiketinin başka birçok olası öğesi vardır, ancak bunlara burada girmeyeceğiz.

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

HTML'nin temellerine ve nasıl bir web sayfası oluşturduğuna baktık. Ancak tahmin edebileceğiniz gibi, HTML tek başına modern web için yeterli değildir. Basit HTML web sayfaları, çoğu web sitesinin statik metinden başka bir şey olmadığı 'Web 1.0' günlerinde yaygındı.

Ama şimdi elimizde çok daha fazlası var. CSS (Cascading Style Sheets), HTML'de hazırladığınız metnin nasıl görünmesi gerektiğini açıklamak için kullanılan bir dildir. hatırla

Dr. Phil

tartıştığımız etiket? Bunun (ve diğer etiketlerin) içinde bir

bağlanmak. Ardından, eşlik eden CSS belgenize bunun nasıl yapılacağına ilişkin talimatlar yazabilirsiniz.

Bakmalısın.

Bu stil öğelerini HTML kodunuzda satır içinde tanımlayabilirsiniz, ancak bu, bakımı çok daha zor olduğu için kötü bir uygulama olarak kabul edilir. ile daha fazla bilgi edinin bu basit CSS örnekleri . Ayrıca kontrol et CSS dosyalarınızı nasıl optimize edersiniz .

JavaScript

HTML'nin içeriği tanımladığını ve CSS'nin görünümü belirlediğini gördük. Web için hayati önem taşıyan üçlünün son üyesi olan JavaScript, web sayfalarının her seferinde yeni bir sayfa yüklemeden insanların eylemlerine yanıt vermesini sağlar.

Örneğin, JavaScript, bir web sitesinin, girdiğiniz parolanın, siz göndermeye çalışmadan önce, parolanın gereksinimlerini karşılamadığı konusunda sizi uyarmasına olanak tanır. Bir web tasarımcısı, bir slayt gösterisinde görüntüler arasında geçiş yapmak veya kullanıcıdan girdi istemek için JavaScript kullanabilir.

Bunlar sadece birkaç temel örnek. JavaScript, çok şey yapabilen bir betik dilidir ve HTML ve CSS'den nispeten daha karmaşıktır. Görmek JavaScript'e genel bakışımız çok daha fazlası için.

Web tasarımının tüm kapsamına bakmak bu makalenin kapsamı dışındadır, ancak HTML'nin bugün bildiğimiz web sayfalarını oluşturmak için diğer dillerle etkileşime girdiğini söylemek yeterlidir.

HTML'nin Evrimi

HTML'nin statik olmadığını not etmek önemlidir. HTML, en sonuncusu HTML 5 olmak üzere çeşitli revizyonlardan geçmiştir. Özellikle, bu standart Adobe Flash gibi tescilli formatlara güvenmek yerine yerel video yerleştirmeyi destekler.

HTML'nin yeni yinelemeleri ayrıca belirli arkaik etiketlerin zaman zaman kullanımdan kaldırıldığını bildirir. Bunlar gibi korkunç etiketler içerir

href

ve

title

(sırasıyla kaydırma ve flaş metni) 1990'ların web sitesi tasarımında yaygın olarak görülür. Bu nedenle, standartların zamanla değiştiğini unutmayın.

Biraz HTML Bilgisi Uzun Bir Yol Giderir

Bir HTML belgesinin nasıl çalıştığına dair kısa bir tur attık. Artık web sayfalarının nasıl yapılandırıldığının temellerini biliyorsunuz. Web sayfaları oluşturmaya devam etmeseniz bile, her gün kullandığınız web hakkında biraz daha bilinçlisiniz.

hangi anakartın olduğunu nasıl öğrenebilirim

Daha fazla bilgi edinmek için web geliştirme becerilerinizi temel araçlarla yükseltin ve ardından kontrol edin ilk web sitenizi nasıl tasarlayacağınızla ilgili kılavuzumuz .

İmaj Kredisi: Belyaevskiy/ Depositphotos

Paylaş Paylaş Cıvıldamak E-posta VirtualBox Linux Makinelerinizi Güçlendirmek için 5 İpucu

Sanal makinelerin sunduğu düşük performanstan bıktınız mı? İşte VirtualBox performansınızı artırmak için yapmanız gerekenler.

Sonrakini Oku İlgili konular
  • Programlama
  • HTML
  • Web Geliştirme
  • JavaScript
  • Webmaster araçları
  • Programlama
  • HTML5
Yazar hakkında Ben Stegner(1735 Makale Yayınlandı)

Ben, MakeUseOf'ta Editör Yardımcısı ve Onboarding Müdürüdür. 2016 yılında tam zamanlı yazmak için BT işinden ayrıldı ve bir daha arkasına bakmadı. Yedi yılı aşkın bir süredir profesyonel bir yazar olarak teknik eğitimleri, video oyunu önerilerini ve daha fazlasını ele alıyor.

Ben Stegner'dan Daha Fazla

Haber bültenimize abone ol

Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!

Abone olmak için buraya tıklayın