HTML Belgesinin Yapısı: HTML'nin Temel Yapısını Öğrenin

Yayınlanan: 2020-12-14

HTML, tarayıcı verileri aracılığıyla internette erişilebilen belgeler için standart bir işaretleme dili olarak kullanılmıştır. HTML, yapılandırılmış bir biçimde bir araya getirildiğinde, herkesin uygun internet erişimiyle görüntüleyebileceği bir web sayfası oluşturan bir dizi kısa öğe, etiket ve koddan oluşur.

İnsanların çalışma şeklini değiştirdi. HTML ve CSS, javascript ile birlikte bir web sayfasındaki öğeleri oluşturmak ve işlemek için kullanılır, HTML, yaratıcıların, oluşturma sürecinde tam özelleştirme özgürlüğü vererek her öğe için farklı roller tanımlamasına izin verir.

HTML, Hiper Metin İşaretleme Dili anlamına gelir ve web sitelerinde görüntülenen web sayfalarını tasarlamak için kullanılır.

Bir araya getirildiğinde bir web sayfası oluşturmaya yardımcı olan üç ana yön vardır.

  • HTML yapısı — yapısal öğeleri destekler
  • CSS stili — tasarıma yardımcı olur ve bu yapısal öğelere bir stil verir
  • JS etkileşimi — bu öğeler arasındaki etkileşimi sağlar

HTML yapısında, içeriği işaretlemek için öğeler ve etiketler birbirleriyle eşleştirilir.

İnternette bulunan her sayfa HTML etiketleri içerir. Bu etiketler, içeriğin her zaman denetlenebilen ve değiştirilebilen açık ve açık bir bakış açısıyla çevrimiçi olarak görüntülenmesine yardımcı olur. İşleri daha basit bir şekilde açıklamak için, programda elemanların ve etiketlerin nasıl kullanıldığını açıklayalım.

Açılış ve kapanış öğeleri değişir, ancak etiketler aynı kalır. Cümlelerin önüne ve sonuna eklenen etiketler, sayfada biçimlendirilmelerini sağlar. İdeal bir web sayfası üç ana ve temel bölümden oluşur:

  • Başlık
  • Kafa
  • Gövde

Head öğesi , baş bölümünün başlangıcını/başlığını vurgulamak için kullanılır. Başlık bölümü her zaman sayfa hakkında bir açıklama olarak yardımcı olur. Başlık etiketlerinin içindeki içerik, yani başlık, sayfanın içeriğini tanımlamak için kaynak olarak kullanılan şeydir.

Head öğesinde kullanılabilecek tüm etiketler aşağıda listelenmiştir:

  • <taban>
  • <bağ>
  • <meta>
  • <noscript>
  • <script>
  • <stil>
  • <başlık>

Örneğin:

<BAŞ>

<TITLE> HTML'de Merhaba dünya Örneği<TITLE>

</HEAD>

Blok düzeyindeki öğeler , bir paragraf, alt başlıklar veya oluşturulacak bazı listeler olsun, bir web sayfasının belirli bölümlerini tanımlamak için kullanılır.

Paragraf: <P>ve </P>

Birinci düzey başlık:<H1>İkinci düzey başlık:<H2>ve </H2>

Yatay kural:<HR> Merkezleme:<CENTER>

Altbilgi : Bunu belirtmek için özel bir etiket yoktur, ancak yine de yazarla iletişime geçilmesi gereken bölümlerin belirlenmesine yardımcı olması için web sayfasında bir altbilgi bulunması önerilir. Bir bültene abone olmak için bir SSS bölümü veya bir e-posta içerebilirler.

<HTML>

<BAŞ>

<TITLE>Bir Ayakkabı Şirketi <TITLE>

</HEAD>

<BODY>

<H1>İnanılmaz Ayakkabılara Hoş Geldiniz! </H1>: </H2>

<IMG SRC= ”.http://example.com/images /image1.jpg”><HR>

<CENTER> Neden <A HREF =..http://www.example1.com/..>Örnek Web Sitesini ziyaret etmeyesiniz?

</A>

</CENTER>

</BODY>

</HTML>

Yukarıdaki bölüm, bir HTML yapısının bir web sayfasındaki ana öğeleri açıkladı.

Şimdi, HTML kaynağına doğru ilerliyoruz ve program yapısını ve öğelerini anlamak için onu nasıl kullanabileceğimizi anlamaya çalışıyoruz.

Yeni başlayan biri olarak, bu, diğer sayfaların nasıl geliştirildiğini anlamanıza çok yardımcı olur ve kendi web sayfanız için özelleştirilmiş bir sürüm oluşturmak için referans olarak kullanılabilirler.

Web sayfasında herhangi bir yerde sağ düğmeyi tıklayın ve ardından 'sayfa kaynağını görüntüle'yi seçin. Bu, sayfanın kaynak kodunu içeren bir pencere açacaktır.

Bir sayfayı incelemek için

Web sayfasının herhangi bir yerinde sağ düğmeyi tıklayın ve ardından o belirli web sayfasını oluşturmak için kullanılan öğelerin listesini ve türlerini görmek için 'İncele'yi seçin. Stil paneli aracılığıyla değiştirilebilen hem HTML hem de CSS içerir.

HTML'nin temel yapısı ve etiketleri açıklandıktan sonra, şimdi HTML'de içerik yazmak için gereken temel öğeleri anlamaya doğru ilerleyeceğiz.

<p> Bu etiket, bir paragrafa ihtiyaç duyulduğunda bir web sayfasında kullanılır ve onu bitirmek için </p> etiketi kullanılır.

<br> Bu etiket satırları kesmek için kullanılır ve çoğunlukla tek satır yazmak için kullanılır, ister kişi ister adres olsun.

<hr> Bu etiket, web sayfasının içeriğini iki bölüme ayırmak için kullanılır.

Buradaki tüm etiketler, örnek bir web sayfası kodunda uygulanmaktadır.

Öğrenin: 21 Web Geliştirme Projesi Fikirleri

GİRİŞ

<html>

<kafa>

<title></title>

</head>

<body>

<h1>HTML'nin Yapısı</h1>

<p>

upGrad Education tarafından<br>

<saat>

Temel bilgileri öğrenin <br>

<saat>

upGrad Education tarafından<br>

</p>

</body>

</html>

Öznitellikler

Bahsedilen tüm etiketler için, ek bilgiye ihtiyaç duyulduğunda bir öznitelik kullanılır. Nitelikler, 'değer' ve 'ad' olmak üzere iki parametre ile tanımlanır.

Burada 'name' parametresi, atanmış sayılan mülkün adını alacak bir işleve sahiptir. Ve 'değer' parametresi, öğeyle hizalanan özellik adlarının değerini almak için benzer bir işleve sahiptir.

<img> Bu nitelik, web sayfasına bir resim eklemek/gömmek için kullanılır. Bu etiket, görüntü yolunu belirlemeye yardımcı olacaktır. <yükseklik> ve <genişlik> sırasıyla görüntünün yüksekliğini ve genişliğini belirtir.

<alt> Bu öznitelik, bağlantıdaki bir hata veya başka bir nedenle resim yüklenemediğinde uygulanır. Alt etiketi, resim için bir altyazı görevi görür.

Dünyanın En İyi Üniversitelerinden Yazılım Mühendisliği Kurslarına Kaydolun . Kariyerinizi hızlandırmak için Yönetici PG Programları, Gelişmiş Sertifika Programları veya Yüksek Lisans Programları kazanın.

Okuyun: 8 Heyecan Verici Tam Yığın Proje Fikirleri ve Konuları

Örnek vermek

<html>

<body>

<h2>src Özelliği</h2>

<p>HTML görüntüleri img etiketiyle tanımlanır ve görüntü kaynağının dosya adı src özniteliğinde belirtilir:</p>

<img src=”img_101.jpg” alt=”boş bir resim” genişlik=”500″ yükseklik=”600″>

</body>

</html>

Metin stilini, boyutunu, yazı tipini ve metinle ilgili diğer işlevleri değiştirmek için <style> etiketi kullanılır.

Örnek vermek

<html>

<body>

<h2>Stil Özelliği</h2>

<p>Özellik, renk gibi stilleri değiştirmek için kullanılır:</p>

<p style=”color:red;”>Bu kırmızı bir paragraftır.</p>

</body>

</html>

Metin değiştirme uygulamaları ile HTML, bu etiketleri kullanarak metni özelleştirilmiş isteklere değiştirmek için etiketler de sağlar.

  • <b> – kalın metin
  • <strong> – Önemli metin
  • <i> – İtalik metin
  • <em> – Vurgulanmış metin
  • <mark> – İşaretli metin
  • <small> – Daha küçük metin
  • <del> – Silinen metin
  • <ins> – Eklenen metin
  • <sub> – Alt simge metni
  • <sup> – Üst simge metni

Makaleyi özetlemek için aşağıdaki HTML özelliklerini ve temellerini öğrendik:

  • HTML yapısı
  • Etiketler, öğeler ve türleri
  • Temel etiketler ve uygulamaları

Tüm bu özellikler, etiketler ve nitelikler, HTML ihtiyacını anlamaya yardımcı olur.

Full-stack yazılım geliştirme hakkında daha fazla bilgi edinmek istiyorsanız, upGrad & IIIT-B'nin çalışan profesyoneller için tasarlanmış ve 500+ saatlik sıkı eğitim, 9+ proje sunan Full-stack Yazılım Geliştirmede Yönetici PG Programına göz atın. ve görevler, IIIT-B Mezunları durumu, pratik uygulamalı bitirme projeleri ve en iyi firmalarla iş yardımı.

Geleceğin Kariyerine Hazırlanın

Yazılım Mühendisliği Yüksek Lisans Programına Hemen Başvur