10 Dakikada Öğrenebileceğiniz 17 Basit HTML Kodu Örneği

10 Dakikada Öğrenebileceğiniz 17 Basit HTML Kodu Örneği

Modern web siteleri genellikle kullanıcı dostu arayüzlerle oluşturulmuş olsa da, bazı temel HTML'leri bilmek faydalıdır. Aşağıdaki 17 HTML örnek etiketini (ve birkaç ekstrayı) biliyorsanız, sıfırdan temel bir web sayfası oluşturabilir veya WordPress gibi bir uygulama tarafından oluşturulan kodu değiştirebilirsiniz.





Etiketlerin çoğu için çıktılı HTML kodu örnekleri sağladık. Bunları çalışırken görmek istiyorsanız, makalenin sonundaki örnek HTML dosyasını indirin. Onunla bir metin düzenleyicide oynayabilir ve değişikliklerinizin ne yaptığını görmek için bir tarayıcıya yükleyebilirsiniz.



1.

Oluşturduğunuz her HTML belgesinin başında bu etikete ihtiyacınız olacak. Bir tarayıcının HTML okuduğunu ve en son sürüm olan HTML5'i beklediğini bilmesini sağlar.





Bu aslında bir HTML etiketi olmasa da yine de bilmekte fayda var.

2.

Bu, bir tarayıcıya HTML okuduğunu söyleyen başka bir etikettir. Etiket, DOCTYPE etiketinden hemen sonra gelir ve onu dosyanızın hemen sonunda bir etiketle kapatırsınız. Belgenizdeki diğer her şey bu etiketler arasında gider.



3.

etiketi, dosyanızın başlık bölümünü başlatır. Buraya giren şeyler web sayfanızda görünmüyor. Bunun yerine, arama motorları için meta veriler ve tarayıcınız için bilgiler içerir.

Temel sayfalar için etiket, başlığınızı içerecektir ve hepsi bu kadar. Ancak ekleyebileceğiniz birkaç şey daha var ve bunları birazdan gözden geçireceğiz.



Dört.

Bu etiket sayfanızın başlığını belirler. Yapmanız gereken tek şey başlığınızı etikete koymak ve bunu şu şekilde kapatmaktır (bağlamı göstermek için başlık etiketlerini de ekledim):


My Website

Bu, bir tarayıcıda açıldığında sekme başlığı olarak görüntülenecek olan addır.



5.

Başlık etiketi gibi meta veriler de sayfanızın başlık alanına yerleştirilir. Meta veriler öncelikle arama motorları tarafından kullanılır ve sayfanızda ne olduğuyla ilgili bilgilerdir. Bir dizi farklı meta alan vardır, ancak bunlar en yaygın kullanılanlardan bazılarıdır:

  • tanım : Sayfanızın temel bir açıklaması.
  • anahtar kelimeler : Sayfanıza uygun bir dizi anahtar kelime.
  • yazar : Sayfanızın yazarı.
  • görüş alanı : Sayfanızın tüm cihazlarda iyi görünmesini sağlamak için bir etiket.

İşte bu sayfa için geçerli olabilecek bir örnek:




Sayfanızın mobil ve masaüstü cihazlarda iyi görüntülendiğinden emin olmak için 'viewport' etiketinde içerik olarak her zaman 'width=device-width, initial-scale=1.0' olmalıdır.

6.

Başlık bölümünü kapattıktan sonra gövdeye ulaşıyorsunuz. Bunu etiketle açıp etiketle kapatıyorsunuz. Bu, dosyanızın hemen sonunda, etiketten hemen önce gelir.

Web sayfanızın tüm içeriği bu etiketler arasında yer alır. Kulağa geldiği kadar basit:


Everything you want displayed on your page.

7.

Biraz Daha Az Büyük Başlık


Alt Başlık

Sonuç:

Gördüğünüz gibi, her seviyede küçülüyorlar.

8.

Paragraf etiketi yeni bir paragraf başlatır. Bu genellikle iki satır sonu ekler.

Örneğin, önceki satırla bu satır arasındaki aralığa bakın. bu ne bir

etiket yapacak.

Your first paragraph.


Your second paragraph.

Sonuç:

İlk paragrafınız.

İkinci paragrafınız.

Ayrıca CSS stillerini kullan metin boyutunu değiştiren bunun gibi paragraf etiketlerinizde:

This is 50% larger text.

Sonuç:

9.

Satır sonu etiketi, tek bir satır sonu ekler:

The first line.

The second line (close to the first one).

Sonuç:

Benzer şekilde çalışmak,

etiket. Bu, sayfanızda yatay bir çizgi çizer ve metin bölümlerini ayırmak için iyidir.

10.

Bu etiket önemli metni tanımlar. Genel olarak, bu cesur olacağı anlamına gelir. Ancak, yapmak için CSS kullanmak mümkündür. metin farklı şekilde görüntülenir.

telefon ekranını düzeltmek için ucuz yerler.

Ancak güvenle kullanabilirsiniz. kalın metne.

Very important things you want to say.

Sonuç:

Söylemek istediğin çok önemli şeyler.

aşina iseniz metni kalınlaştırmak için etiket, yine de kullanabilirsiniz. HTML'nin gelecekteki sürümlerinde çalışmaya devam edeceğinin garantisi yok, ancak şimdilik çalışıyor.

on bir.

Beğenmek ve , ve ilişkilidir. NS etiketi, vurgulanan metni tanımlar, bu da genellikle italik hale getirileceği anlamına gelir. Yine, CSS'nin vurgulanmış metni farklı şekilde gösterme olasılığı vardır.

An emphasized line.

Sonuç:

Vurgulanan bir çizgi.

NS etiketi hala çalışıyor, ancak yine de HTML'nin gelecekteki sürümlerinde kullanımdan kaldırılması olasıdır.

12.

NS , veya bağlantı etiketi, bağlantılar oluşturmanıza olanak tanır. Basit bir bağlantı şöyle görünür:

MUO'ya git

'href' özelliği, bağlantının hedefini tanımlar. Çoğu durumda, bu başka bir web sitesi olacaktır. Ayrıca resim veya PDF gibi bir dosya da olabilir.

Diğer faydalı nitelikler arasında 'hedef' ve 'başlık' bulunur. Hedef özniteliği neredeyse yalnızca yeni bir sekmede veya pencerede bir bağlantı açmak için kullanılır, bunun gibi:

Go to MUO in a new tab

Sonuç:

Yeni bir sekmede MUO'ya gidin

'title' özelliği bir araç ipucu oluşturur. Nasıl çalıştığını görmek için aşağıdaki bağlantının üzerine gelin:

Hover over this to see the tool tip

Sonuç:

Araç ipucunu görmek için fareyle bunun üzerine gelin

13.

Sayfanıza bir resim gömmek istiyorsanız, resim etiketini kullanmanız gerekir. Normalde bunu 'src' özniteliği ile birlikte kullanırsınız. Bu, görüntünün kaynağını şu şekilde belirtir:

Sonuç:

discord sunucusu nasıl bulunur

'Yükseklik', 'genişlik' ve 'alt' gibi başka nitelikler de mevcuttur. Bunun nasıl görünebileceği aşağıda açıklanmıştır:

the name of your image

Tahmin edebileceğiniz gibi, 'yükseklik' ve 'genişlik' nitelikleri görüntünün yüksekliğini ve genişliğini belirler. Genel olarak, görüntünün doğru ölçeklenmesi için bunlardan yalnızca birini ayarlamak iyi bir fikirdir. Her ikisini de kullanırsanız, uzatılmış veya ezilmiş bir görüntü elde edebilirsiniz.

'alt' etiketi, tarayıcıya, görüntü görüntülenemiyorsa hangi metnin görüntüleneceğini söyler ve herhangi bir görüntüye eklemek iyi bir fikirdir. Birinin özellikle yavaş bir bağlantısı veya eski bir tarayıcısı varsa, yine de sayfanızda ne olması gerektiği hakkında bir fikir edinebilirler.

14.

    Sıralı liste etiketi, sıralı bir liste oluşturmanıza olanak tanır. Genel olarak, bu, numaralı bir liste alacağınız anlamına gelir. Listedeki her öğenin bir liste öğesi etiketine ihtiyacı vardır (

  1. ), böylece listeniz şöyle görünecek:


    1. First thing

    2. Second thing

    3. Third thing

    Sonuç:

    1. İlk şey
    2. İkinci şey
    3. Üçüncü şey

    HTML5'te kullanabilirsiniz

      sayıların sırasını tersine çevirmek için Ve start niteliği ile başlangıç ​​değerini belirleyebilirsiniz.

      'type' özelliği, tarayıcıya liste öğeleri için hangi tür sembolün kullanılacağını söylemenizi sağlar. Listeyi aşağıdaki gibi belirtilen sembolle görüntülenecek şekilde ayarlayarak '1,' 'A', 'a', 'I' veya 'i' olarak ayarlanabilir:

        on beş.

          Sırasız liste, sıralı muadilinden çok daha basittir. Bu sadece madde işaretli bir liste.


          • First item

          • Second item

          • Third item

          Sonuç:

          • İlk eşya
          • İkinci öğe
          • Üçüncü öğe

          Sırasız listelerin de 'tür' nitelikleri vardır ve bunu 'disk', 'daire' veya 'kare' olarak ayarlayabilirsiniz.

          16.

          Biçimlendirme için tabloları kullanmak hoş karşılanmasa da, sayfanızdaki bilgileri bölümlere ayırmak için satırları ve sütunları kullanmak isteyeceğiniz birçok durum vardır. Bir tablonun çalışması için birkaç etiket gerekir. İşte örnek HTML kodu:














          1st column 2nd column
          Row 1, column 1 Row 1, column 2
          Row 2, column 1 Row 2, column 2

          NS

          ve
          etiketleri tablonun başlangıcını ve sonunu belirtir. NSetiketi tüm tablo içeriğini içerir.

          Tablonun her satırı biretiket. Her satırdaki her hücre yasütun başlıkları için etiketler veyasütun verileri için etiketler. Her satırdaki her sütun için bunlardan birine ihtiyacınız var.

          Sonuç:

          1. sütun2. sütun
          1. satır, 1. sütun1. satır, 2. sütun
          2. satır, 1. sütun2. satır, 2. sütun

          17.

          Başka bir web sitesinden veya kişiden alıntı yaparken ve alıntıyı belgenizin geri kalanından ayırmak istediğinizde blok alıntı etiketini kullanın. Yapmanız gereken tek şey, alıntıyı blok alıntı etiketlerini açıp kapatmaktır:

          The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.

          Sonuç:

          Web'i hayal ettiğim gibi, henüz görmedik. Gelecek hala geçmişten çok daha büyük.

          Kullanılan tam biçimlendirme, kullandığınız tarayıcıya veya sitenizin CSS'sine bağlı olabilir. Ama etiket aynı kalıyor.

          HTML Kodu Örnekleri

          Bu 17 HTML örneği ile basit bir web sitesi oluşturabilmelisiniz. Nasıl çalıştıklarına dair bir fikir edinmek için hepsini şu anda çevrimiçi bir metin düzenleyicide test edebilirsiniz.

          HTML'de daha küçük dersler için, kodlama için bazı mikro öğrenme uygulamalarını deneyin. Kısa sürede hızlanmanıza yardımcı olacaklar.

          Paylaş Paylaş Cıvıldamak E-posta Temel Kodlama Öğrenmek İster misiniz? Boş Zamanınızda 5 Küçük Kodlama Uygulamasını Deneyin

          Temel kodlamayı öğrenmek istiyor ancak çok az zamanınız mı var? Bu küçük boyutlu kodlama uygulamaları, yoğun gününüzün sadece birkaç dakikasını alacaktır.

          Sonrakini Oku           İlgili konular
          • Programlama
          • Wordpress
          • HTML
          • Web Geliştirme
          • Kodlama Eğitimleri
          Yazar hakkında Andy Betts(221 Makale Yayınlandı)

          Andy, 15 yıldır teknoloji hakkında yazan eski bir basılı gazeteci ve dergi editörüdür. Bu süre zarfında sayısız yayına katkıda bulundu ve büyük teknoloji şirketleri için metin yazarlığı çalışmaları yaptı. Ayrıca medya için uzman yorumu sağladı ve endüstri etkinliklerinde panellere ev sahipliği yaptı.

          Andy Betts'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