Web sayfaları oluşturmak HTML ile başlar. Onları güzelleştirmek ve etkileşimli hale getirmek daha sonra gelir. Ancak işlevsel statik web siteleri oluşturmaya başlamak için HTML'yi anlamanız gerekir. (Bu biçimlendirme diline hızlı bir giriş yapmak ister misiniz? Bizim okuyun HTML SSS.)

Dili öğrenmenin bir parçası olarak, HTML kelime dağarcığınıza eklemeniz gereken uzun bir öğe listesi vardır. Ve bu görev ilk başta göz korkutucu görünebilir, bu yüzden aşağıdaki hile sayfasını hazırladık. HTML öğelerini ihtiyaç duyduğunuz her an keşfetmeniz/anlamanız/geri çağırmanız için size kolay bir yol sunar.

Hile sayfası, web sayfalarını yapılandırmak, metni biçimlendirmek, formlar, resimler, listeler, bağlantılar ve tablolar eklemek için etiketleri ve nitelikleri kapsar. Ayrıca, yaygın olarak kullanılan özel karakterler için HTML5 ve HTML kodlarında tanıtılan etiketleri de içerir.

ÜCRETSİZ İNDİRİN: Bu hile sayfası şu şekilde mevcuttur: indirilebilir PDF dağıtım ortağımız TradePub'dan. Yalnızca ilk kez erişmek için kısa bir form doldurmanız gerekecektir. İndirmek HTML Essentials Hile Sayfası.

instagram viewer

HTML Essentials Hile Sayfası

... ... ... ... ...
Kısayol Eylem
Temel Etiketler
... Bir HTML belgesinin ilk ve son etiketi. Diğer tüm etiketler bu açılış ve kapanış etiketleri arasında yer alır.
... Belge için meta veri koleksiyonunu belirtir.
... Sayfanın başlığını tanımlar ve tarayıcının başlık çubuğunda görünür.
... Web sayfasında görüntülenecek tüm içeriği içerir.
belge bilgisi
Temel URL'den ve belgeye ilişkin tüm ilgili bağlantılardan bahseder.
Sayfa hakkında yazar, yayınlanma tarihi vb. gibi ek bilgiler için.
Stil sayfaları gibi harici öğelere bağlantılar.
CSS (Basamaklı Stil Sayfaları) gibi belge stili bilgilerini içerir.
Harici komut dosyalarına bağlantılar içerir.
Metin biçimlendirme
... VEYA
...
Metni kalın yapar.
... Metni italikleştirir ve kalın yapar.
... Metni italikleştirir ancak kalın yapmaz.
... Üstü çizili metin.
... Bir alıntının yazarına atıfta bulunur.
... Metnin silinmiş bir bölümünü etiketler.
... İçeriğe eklenmiş bir bölümü gösterir.
...
Alıntıları görüntülemek için. Genellikle ile kullanılır etiket.
... Daha kısa alıntılar için.
... Kısaltmalar ve tam formlar için.
...
İletişim bilgilerini belirtir.
... Tanımlar için.
... Kod parçacıkları için.
... Abonelik yazmak için
... Üst simge yazmak için.
... HTML5'te metin boyutunu küçültmek ve gereksiz bilgileri işaretlemek için.
Belge Yapısı
... Farklı seviyelerde başlıklar. H1 en büyüğü ve H6 en küçüğüdür.
...

İçeriği bloklara bölmek için.
... Sayfanın biçimlendirmesini bozmadan resim, simge, ifade gibi satır içi öğeleri içerir.

...

Düz metin içerir.

Yeni bir satır oluşturur.

Bölümün sonunu göstermek için yatay bir çubuk çizer.
Listeler
    ...
Sıralı ürün listesi için.
    ...
Sırasız öğe listesi için.
  • ...
  • Listedeki tek tek öğeler için.
    ...
    Tanımlı öğelerin listesi.
    ...
    Gövde içeriğiyle satır içi tek bir terimin tanımı.
    ...
    Tanımlanan terimin açıklaması.
    Bağlantılar
    ... Köprüler için bağlantı etiketi.
    ... E-posta adreslerine bağlantı için etiket.
    ... İletişim numaralarını listelemek için bağlantı etiketi.
    ... Aynı sayfanın başka bir bölümüne bağlantı vermek için bağlantı etiketi.
    ... Web sayfasının bir div bölümüne gider. (Yukarıdaki etiketin varyasyonu)
    Görüntüler

    Görüntü dosyalarını görüntülemek için.
    için öznitelikler etiket
    kaynak = ”url” Resmin kaynak yoluna bağlantı.
    alt=”metin” Fare görüntünün üzerine getirildiğinde görüntülenen metin.
    yükseklik=” ” Piksel veya yüzde cinsinden görüntü yüksekliği.
    genişlik=” ” Piksel veya yüzde olarak görüntü genişliği.
    hizala = ” ” Sayfadaki resmin göreli hizalaması.
    sınır=” ” Resmin kenarlık kalınlığı.
    ... Tıklanabilir bir haritaya bağlantı.
    ...
    Harita görüntüsünün adı.
    Bir görüntü haritasının görüntü alanı.
    için öznitelikler etiket
    şekil =” " Görüntü alanının şekli.
    kodlar=” ” Harita görüntü alanının koordinatları.
    Formlar
    ...
    Bir HTML formunun üst etiketi.
    için öznitelikler
    etiket
    eylem=”url” Form verilerinin gönderildiği URL.
    yöntem=” ” Form gönderme protokolünü (POST veya GET) belirtir.
    kod türü=” ” POST gönderimleri için veri kodlama şeması.
    otomatik tamamlama Form otomatik tamamlamanın açık mı yoksa kapalı mı olduğunu belirtir.
    yenilemek Formun gönderilmeden önce doğrulanıp doğrulanmayacağını belirtir.
    kabul-karakter kümeleri Form gönderimleri için karakter kodlamasını belirtir.
    hedef Form gönderme yanıtının nerede görüntüleneceğini gösterir.
    ...
    Formdaki ilgili öğeleri gruplar/
    Kullanıcının her form alanına ne girmesi gerektiğini belirtir.
    ... Fieldset öğesi için bir başlık.
    Kullanıcıdan ne tür bir girdi alınacağını belirtir.
    için öznitelikler etiket
    tip=”” Giriş türünü (metin, tarihler, parola) belirler.
    isim=”” Giriş alanının adını belirtir.
    değer=”” Giriş alanındaki değeri belirtir.
    boyut=”” Giriş alanı için karakter sayısını ayarlar.
    maksimum uzunluk=”” İzin verilen giriş karakterlerinin sınırını ayarlar.
    gereklidir Bir giriş alanını zorunlu kılar.
    genişlik=”” Giriş alanının genişliğini piksel cinsinden ayarlar.
    yükseklik=”” Giriş alanının yüksekliğini piksel cinsinden ayarlar.
    yer tutucu =”” Beklenen alan değerini açıklar.
    desen=”” Kullanıcının metninde kalıp aramak için kullanılabilecek normal bir ifadeyi belirtir.
    dk=”” Bir girdi öğesi için izin verilen minimum değer.
    maksimum =”” Bir giriş öğesi için izin verilen maksimum değer.
    engelli Giriş öğesini devre dışı bırakır.
    Kullanıcıdan daha uzun veri dizilerini yakalamak için.
    Kullanıcının aralarından seçim yapabileceği bir seçenekler listesi belirtir.
    için öznitelikler
    isim=”” Bir açılır liste için ad belirtir.
    boyut=”” Kullanıcıya verilen seçenek sayısı.
    çoklu Kullanıcının listeden birden çok seçenek seçip seçemeyeceğini ayarlar.
    gereklidir Form gönderimi için bir seçeneğin/seçeneklerin seçilmesinin gerekli olup olmadığını belirtir.
    otomatik odaklama Bir sayfa yüklendikten sonra bir açılır listenin otomatik olarak odaklanacağını belirtir.
    Bir açılır listedeki öğeleri tanımlar.
    değer=””
    Verilen herhangi bir seçenek için metni görüntüler.
    seçilmiş Görüntülenen varsayılan seçeneği ayarlar.
    Form gönderimi için bir düğme oluşturmak için etiket.
    Nesneler ve iFrame'ler
    ... Gömülü dosya türünü açıklar.
    için öznitelikler etiket
    yükseklik=”” Nesnenin yüksekliği.
    genişlik=”” Nesnenin genişliği.
    tip=”” Nesnenin içerdiği ortam türü.
    Dış bilgileri gömmek için bir satır içi çerçeve.
    isim=”” iFrame'in adı.
    kaynak =”” Çerçeve içindeki içeriğin kaynak URL'si.
    kaynak belge =”” Çerçeve içindeki HTML içeriği.
    yükseklik=”” iFrame'in yüksekliği.
    genişlik=” ” iFrame'in genişliği.
    iFrame'i özelleştirmek için ekstra parametreler ekler.
    ... Harici uygulamayı veya eklentiyi gömer.
    için öznitelikler etiket
    yükseklik=” “ Gömmenin yüksekliğini ayarlar.
    genişlik=” “ Gömmenin genişliğini ayarlar.
    tip=”” Yerleştirmenin türü veya biçimi.
    kaynak =”” Katıştırılmış dosyanın kaynak yolu.
    Tablolar
    ...
    Bir tablonun tüm içeriğini tanımlar.
    ...
    Tablonun açıklaması.
    Tablodaki her sütun için başlıklar.
    Tablo için gövde verilerini tanımlar.
    Tablonun altbilgisinin içeriğini açıklar.
    Tek bir satır için içerik.
    ... Tek bir başlık öğesindeki veriler.
    ... Tek bir tablo hücresi içindeki içerik.
    Biçimlendirme için sütunları gruplar.
    Tek bir bilgi sütunu.
    HTML5 Yeni Etiketler
    ...
    Web sayfası başlığını belirtir.
    ...
    Web sayfası alt bilgisini belirtir.
    ...
    Web sayfasının ana içeriğini işaretler.
    ...
    Bir makale belirtir.
    Bir sayfanın kenar çubuğu içeriğini belirtir.
    ...
    Web sayfasındaki belirli bir bölümü belirtir.
    ...
    Ek bilgileri açıklamak için.
    ... Yukarıdaki etiket için başlık olarak kullanılır. Kullanıcı tarafından her zaman görülebilir.
    ... Bir iletişim kutusu oluşturur.
    ...
    Grafikler ve şekiller dahil etmek için kullanılır.
    ...
    bir
    öğe.
    ... Metnin belirli bir bölümünü vurgular.
    Bir web sayfasındaki gezinme bağlantıları kümesi.
    ... Bir listeden veya menüden belirli bir öğe.
    ... Belirli bir aralıktaki verileri ölçer.
    ... Bir ilerleme çubuğu yerleştirir ve ilerlemeyi izler.
    ... Ruby ek açıklamalarını desteklemeyen metni görüntüler.
    ... Doğu Asya tipografi karakter ayrıntılarını görüntüler.
    ... Doğu Asya tipografisi için bir Ruby ek açıklaması.
    Saat ve tarihi tanımlar.
    İçerik içinde bir satır sonu.
    ¹HTML5 Karakter Nesneleri
    " VEYA
    "
    Alıntı işaretleri
    < VEYA
    &lt ;
    Küçüktür işareti (
    > VEYA
    >
    Büyüktür işareti (>)
    VEYA
    &nbsp ;
    Kırılmaz alan
    © VEYA
    &kopyala ;
    Telif hakkı sembolü
    ™ VEYA
    &ucircle ;
    Ticari marka sembolü
    @ VEYA
    &Uuml ;
    "at" sembolü (@)
    & VEYA
    &amp ;
    Ve işareti simgesi (&)
    • VEYA
    &ouml ;
    Küçük mermi
    ¹HTML karakteri yazarken noktalı virgülden önceki boşluğu yok sayın.

    Uygulamalı Deneyim için Bir Web Sitesi Oluşturun

    Bir kez anladın HTML kodunun temelleri ve CSS ve JavaScript hakkında çalışma bilgisine sahip, bir web sitesi oluşturmak için elinizi deneyin Web Sitesi Nasıl Yapılır: Yeni Başlayanlar İçinBugün size sıfırdan eksiksiz bir web sitesi yapma sürecinde rehberlik edeceğim. Bu kulağa zor geliyorsa endişelenmeyin. Her adımda sana rehberlik edeceğim. Devamını oku . Ayrıca, kaydettiğinizden emin olun. CSS3 özellikleri hile sayfası Temel CSS3 Özellikleri Hile SayfasıCSS3 özellikleri hile sayfamızla temel CSS sözdiziminde ustalaşın. Devamını oku ve JavaScript hile sayfası Nihai JavaScript Hile SayfasıBu hile sayfasıyla JavaScript öğelerini hızlı bir şekilde tazeleyin. Devamını oku gelecekteki kullanım için!

    Akshata, teknoloji ve yazmaya odaklanmadan önce manuel test, animasyon ve UX tasarımı konusunda eğitim aldı. Bu, en sevdiği iki etkinliği bir araya getirdi - sistemleri anlamlandırma ve jargonu basitleştirme. MakeUseOf'ta Akshata, Apple cihazlarınızdan en iyi şekilde yararlanmanız hakkında yazıyor.