Aptallar için Temel HTML Rehberi

Son güncelleme tarihi 17 Kasım 2021


Yirmi yıl önce, sadece bir hobi blogger olsanız bile, kendinizi korumak veya sitenize basit bir işlev eklemek için bazı web kodlamaları bilmeniz gerekiyordu. Ancak artık o kadar çok düzenleyici ve eklenti var ki HTML'nin temellerini bilmek bile artık gerekli değil.

Bununla ilgili sorun şu ki, birkaç temel bilgiyi bilmiyorsanız, blogunuzda kolayca gerçek bir sorun yaşayabilirsiniz ve küçük bir sorunu çözmek için pahalı bir geliştirici tutmanız gerekir. Sadece bu da değil, blogunuzda özel bir metin widget'ı eklemek gibi değişiklikler oluşturmak biraz bilgi gerektirir.

HTML Kodu.
HTML "kodları".

İçerik düzeni sorunu yaşıyorsanız doğru görünmüyorsa, HTML bilgisi sizi tekrar izleyebilir.

İşte blogcular ve non-techie online işletme sahipleri için HTML kılavuzumuzun bazı versiyonları.

HTML, günümüz internetinin bel kemiğidir. Milyonlarca web sitesi birlikte interneti oluşturdu. HTML nerede tüm bu web sitelerinin yapı taşı.

Başlamadan önce…

1. HTML nedir?

HTML kısaltmasıdır Hyper Text MArkupe Language. Web tarayıcıları için içerikleri etiketlemek için standart bir dildir.

HTML, "Öğeler" ile temsil edilir. Öğeler aynı zamanda "Etiketler" olarak da bilinir.

2. HTML neden gereklidir?

Web tarayıcıları yalnızca desteklenen bir dilde yazıldığında bir web sitesi oluşturabilir. HTML, en yaygın biçimlendirme dilidir ve web tarayıcılarına en yüksek düzeyde kabul görür.

Bu yüzden HTML'ye ihtiyacınız var.

3. HTML büyük / küçük harfe duyarlı mı?

HTML büyük / küçük harfe duyarlı değildir. Ancak en iyi uygulama, uygun vakalarla HTML yazmaktır.

İlk HTML Dosyanızı Oluşturmak için Adımlar

Bilgisayarınızdaki Not Defteri'ni kullanarak temel bir HTML dosyası oluşturabilirsiniz. Ancak birçok kod satırı yazmak acı verici olacaktır.

Kod Düzenleyici'ye ihtiyacınız var. İyi bir kod editörü, büyük kodları yazmayı ve organize etmeyi kolaylaştıracaktır.

Kullanıyorum ve tavsiye ederim Notepad + + web dilleri yazmak için (ücretsiz ve açık kaynak). Kullanabileceğiniz diğer editörler var Altlime Metin, Atom vb.

Yapman gerekenler işte burada:

  1. Bir kod düzenleyici kurun
  2. Onu aç
  3. Yeni bir dosya oluştur
  4. Bir .html dosyası olarak kaydedin

Gitmeye hazırsın!

Kod düzenleyici Atom örneği
Kod düzenleyici - Atom

1. Merhaba Dünya!

Aşağıdaki kodu kopyalayıp yeni HTML dosyanıza yapıştırın ve kaydedin. Şimdi web tarayıcınızda çalıştırın.

Kodu:

İlk web sayfam Selam Dünya!

Çıktı:

Tebrikler! İlk HTML dosyanızı oluşturdunuz. Bu noktada bunu anlamak zorunda değilsin. Kısa süre içinde ele alacağız.

HTML yapısını anlama

Her HTML dosyasının ortak bir çıplak yapısı vardır. Her şeyin başladığı yer burası. Ve her büyük kod sayfası bu yapıya göre kırpıldıktan sonra gelir.

Öyleyse bunu "Merhaba Dünya!" Dan anlamaya çalışalım. kodu. Aşağıdaki öğeler, her HTML dosyası için zorunlu parçalardır.

  • = Tarayıcıya bunun bir HTML dosyası olduğuna dair bir beyandır. Bunu önce belirtmelisiniz etiket.
  • = Bu, bir HTML dosyasının kök öğesidir. Yazdığın her şey arasında ve .
  • = Bu, bir tarayıcı için meta bilgi parçasıdır. Bu etiketin içindeki kodların görsel çıkışı yoktur.
  • = Bu, bir web tarayıcısının oluşturduğu kısımdır. Bir web sitesinde tam olarak gördüğünüz şey, aralarında kodların oluşturulmasıdır. ve .

2. HTML Etiketleri

HTML, yüzlerce farklı etiketin işbirliğidir. Nasıl çalıştıklarını öğrenmelisin. Ayrıca onları doğru şekilde kullandıklarından emin olmalısınız.

HTML etiketlerinin genellikle bir açılış ve bir kapanış etiketi vardır. Açılış etiketi, küçüktür (<) ve büyüktür (>) işaretiyle çevrili anahtar kelimeye sahiptir. Kapanış etiketinde her şey aynıdır ancak küçüktür (<) işaretinden sonra fazladan bir eğik çizgi (/) bulunur.

(2a) Kafa Etiketleri

Tüm baş etiketleri arasına gider ve . Web tarayıcısı ve arama motorları için meta bilgiler içerirler. Temelde görsel çıktıları yoktur.

Başlık etiketi, tarayıcı sekmesinde görünen bir web sayfasının başlığını tanımlar. Bu bilgi, web programları ve arama motorları tarafından kullanılır. HTML dosyası başına en yüksek bir başlığa sahip olabilirsiniz.

Kodu:

İlk web sayfam
Başlık Etiketi - HTML örnekleri
Başlık etiketi tarayıcınızın üstünde görünür.

Bağlantı etiketi, HTML sayfanızı harici kaynaklara bağlar. Ana kullanımı HTML sayfasını CSS stil sayfalarına bağlamaktır. Kendiliğinden kapanan bir etikettir ve sona ihtiyacı yoktur . Burada rel, dosya ile ilişkiyi ve src, kaynak anlamına gelir.

Kodu:

Meta, bir html dosyasının meta bilgilerini sağlayan başka bir kendi kendine kapanış etiketidir. Arama motorları ve diğer web servisleri bu bilgileri kullanır. Sayfanızı arama motorları için optimize etmek istiyorsanız, meta etiketler zorunludur.

Kodu:

<meta name="description" content="This is the short description that search engines show"

Komut dosyası etiketi, sunucu tarafındaki bir komut dosyasını eklemek veya harici bir komut dosyasına bağlantı oluşturmak için kullanılır. Açılış etiketinde iki özellik olabilir. Biri tür ve diğeri kaynaktır (src).

Kodu:

Noscript etiketi, bir web tarayıcısında komut dosyaları devre dışı bırakıldığında çalışır. Web sayfalarında komut dosyalarına izin vermeyen bir sayfayı kendileriyle uyumlu hale getirir.

Kodu:

Eyvah! Komut dosyaları devre dışı bırakıldı.

(2b) Vücut Etiketleri

Tüm vücut etiketleri arasına gider ve . Görsel çıktıları var. Burası en çok işin yapıldığı yerdir. Ana sayfa içeriğinizi yapılandırmak için bu etiketleri kullanmanız gerekir.

-e

Bunlar başlık etiketleridir. En önemli başlık şu şekilde etiketlenmiştir: ve en az önemli olan . Bunları doğru hiyerarşide kullanmalısınız.

Kodu:

Bu bir h1 başlığıdır Bu bir h1 başlığıdır Bu bir h1 başlığıdır Bu bir h2 başlığıdır Bu bir h2 başlığıdır Bu bir h2 başlığıdır

Çıktı:

Etiketleri Biçimlendirme

Bir html dosyasındaki metin, birçok biçimlendirme etiketi kullanılarak biçimlendirilebilir. İçeriğinizden bir kelimeyi veya çizgiyi vurgulamak istediğinizde gerekli olacaktır.

Kodu:

Metninizi birçok şekilde vurgulayabilirsiniz. Kalın , altı çizili , italik , işaret , alt simge , üst simge ve daha fazlası!

Çıktı:

Bazı kodları, yorum etiketini kullanarak rending'den saptırabilirsiniz. Kod kaynak kodunda görünecek, ancak oluşturulmayacaktır. Bu etiketin ana kullanımı, gelecekteki başvurular için html dosyalarının belgelenmesidir.

Örnek:

You can comment out any code by surrounding them in this way -->

(2c) Diğer Önemli HTML Etiketleri

Anchor neredeyse her yerde kullanılan paha biçilmez bir etikettir. En az bir bağlantı bağlantısı olmadan herhangi bir web sayfasını çevrimiçi göremezsiniz.

Yapı aynı. Açılma ve kapanma kısmı vardır . Tutturmak istediğiniz metin ve arasında yer alır.

Kullanıcının nereye tıkladıktan sonra nereye ve nasıl gideceğini tanımlayan bazı özellikler vardır.

  • ahref = ”" = Hedef linki tanımlar. Bağlantı çift tırnak arasında gider.
  • target = ”" = URL'nin yeni bir tarayıcı sekmesinde mi yoksa aynı sekmede mi açılacağını tanımlar. target = ”_ blank” yeni sekme içindir ve target = ”_ self” aynı sekmede açmak içindir.
  • rel = ”" = Mevcut sayfanın linklenen sayfa ile ilişkisini tanımlar. Bağlantı verilen sayfaya güvenmiyorsanız, rel = ”nofollow” tanımlayabilirsiniz.

Kodu:

Google'a gitmek için burayı tıklayın . Yeni bir sekmede açılacaktır. Buraya tıklayın . Ayrıca sizi Google'a götürecek ancak mevcut sekmede açılacaktır.

Çıktı:

Resim etiketi, görüntü tabanlı web sitelerinin çoğunu hayal edemediğiniz başka önemli bir etikettir.

kendi kendine kapanan bir etikettir. Geleneksel kapanışa ihtiyaç duymaz. . Doğru kullanmadan önce bilmeniz gereken bazı özellikler vardır.

  • src = ”“ = Bu, görüntünün kaynak bağlantısını tanımlamak içindir. Bağlantıyı çift tırnak işareti arasına koyun.
  • alt = ”" = Alternatif metin anlamına gelir. Resminiz yüklenmediğinde, bu metin kullanıcılara eksik görüntü hakkında bir fikir verecektir.
  • genişlik = ”" = Bir görüntünün genişliğini piksel cinsinden tanımlar.
  • Yükseklik = ”" = Bir görüntünün yüksekliğini piksel cinsinden tanımlar.

Örnek:

Bu, Ağustos 2014'teki Googleplex'tir. Bu görüntünün genişliği 500 piksel ve yüksekliği 375 pikseldir.

Çıktı:

İpuçları: Tıklanabilir bir resim mi eklemek istiyorsunuz? Resim kodunu bir etiketle sarın . Nasıl gittiğini gör.

veya

Liste etiketi, bir öğe listesi oluşturmak içindir. sıralı listeler (numaralı liste) anlamına gelir ve sırasız listeler (madde işaretleri) anlamına gelir.

İçindeki liste öğeleri veya ile etiketlendi . li, liste anlamına gelir. İstediğin kadar alabilirsin ebeveynin içinde istediğin gibi veya etiket.

Kodu:

Bu sıralı bir listedir: Madde 1 Öğe 2 Öğe 3 Bu sırasız bir listedir: Madde 1 Öğe 2 Öğe 3

Çıktı:

Tablo etiketi bir veri tablosu oluşturmak içindir. Tablo başlıklarını, satırlarını ve sütunlarını tanımlayan birkaç iç düzey etiketi vardır.

dış üst koddur. Bu etikette tablo satırı anlamına gelir, tablo sütunu anlamına gelir ve tablo başlığı anlamına gelir.

Kodu:

İsim Yaş Meslek Jo 27 İşadamı Carol 26 Hemşire Simone 39 Profesör

Çıktı:

Not: Birincinin içindeki değerler başlıklardır. Yani kullandık metne kalın metin efekti uygular.

Tablo Gruplaması

Tablo işlevlendirme öğelerini kullanarak bir tablonun işlevselliğini genişletebilirsiniz. Birden çok sayfaya ayrılan büyük tablolar oluşturmanız gerektiğinde zamanlar olacaktır.

Tablo verilerinizi başlık, gövde ve altbilgi halinde gruplamak, bağımsız kaydırmaya izin verebilirsiniz. Üstbilgi ve gövde bölümü tablonuzun bulunduğu her sayfaya yazdıracaktır.

Tablo gruplandırma etiketleri:

  • = Bir tablonun başlıklarını sarmak için. Tablonun her bölünmüş sayfasına yazdırır.
  • = Bir tablonun ana verilerini sarmak için. İstediğin kadar alabilirsin gerek duyduğunuz kadar. Bir etiketi, ayrı bir veri grubu anlamına gelir.
  • = Bir tablonun altbilgi bilgilerini kaydırmak için. Tablonun her bölünmüş sayfasına yazdırır.

Lütfen gruplamayı kullanmak zorunlu değildir. Daha büyük tabloları daha okunabilir hale getirmek için kullanabilirsiniz. Bazı özel geliştiriciler bu etiketleri CSS Seçici olarak kullanıyor.

Örnek tablomuzu şu şekilde gruplayabiliriz: , ve :

Kodu:

İsim Yaş Meslek John 27 İşadamı Carol 26 Hemşire Simone 39 Profesör Toplam Kişi: 3

Çıktı:

Form öğesi, web sayfaları için etkileşimli formlar oluşturmak için kullanılır. Bir HTML formu birkaç ardışık öğe içerir. Örneğin: , vb.

Formdaki action özelliği çok önemlidir. Bilgileri işlemek için sunucu tarafına veya üçüncü tarafa ait bir sayfaya işaret eder. İşleme için öncelikle bir yöntem tanımlamanız gerekir.

İki yöntemden birini kullanabilir veya alabilirsin. Get, iletinin bilgileri ileti gövdesinde gönderdiği URL biçimindeki tüm bilgileri gönderir.

Formlar için birçok girdi türü vardır. En temel girdi türü metindir. Olarak yazılmıştır . Türler ayrıca radyo, onay kutusu, e-posta vb. Olabilir. Gönder düğmesi oluşturmak için altta gönderme türü bir giriş olmalıdır.

etiketi, etiket oluşturmak ve bunları girdilerle ilişkilendirmek için kullanılır. Etiketleri girdilerle ilişkilendirme kuralı, for = ”” etiket özniteliği ve girdinin id = ”” özniteliğinde aynı değere sahip olmasıdır.

Kodu:

İsim: Soyadı: Kısa Özgeçmiş: Cinsiyet: Erkek Kadın

Çıktı:

Not: Bilgiyi işlemek için herhangi bir sunucuya bağlı olmadığından, boş bir değere eylem işaret ettim.

3. HTML Nitelikleri

Nitelikler, HTML etiketleri için bir tür değiştiricidir. HTML etiketlerine yeni yapılandırmalar ekler.

Bir özellik, attributename = ”” gibi görünür ve açılış HTML etiketinde bulunur. Özniteliğin değeri çift tırnak arasında yer alır.

id = ”” ve sınıf = ””

kimlik ve sınıf HTML etiketlerinin tanımlayıcılarıdır. Farklı adlar tanımlayıcıları kullanarak farklı HTML öğelerine atanır. Birden çok öğe için bir sınıf tanımlayıcısı kullanabilirsiniz. Ancak, birden çok öğe için tek bir kimlik tanımlayıcısı kullanamazsınız.

Kodu:

Bu ana başlık

href = ””

href, Hypertext Reference'ın kısaltmasıdır. Kullanıcıları referans bağlantılarına yönlendirirler. Bağlantı etiketi , kullanıcıları bir hedef URL'ye göndermek için href kullanır.

Kodu:

Google

src = ””

src kaynak anlamına gelir. HTML dosyasında kullandığınız bir medya veya kaynağın kaynağını tanımlar. Kaynak, yerel veya üçüncü taraf URL'si olabilir.

Kodu:

alt =””

alt alternatif anlamına gelir. Bir HTML öğesi yüklenemediğinde kullanıma sunulan yedek bir metindir.

Kodu:

style = ””

HTML etiketlerinde stil özniteliği sıklıkla kullanılır. HTML etiketinde CSS işi yapar. Stil özellikleriniz çift tırnak arasında gidip gelir.

Kodu:

Bu başka bir başlık

4. Kod Ekranı: Blok - Satır İçi

Bazı öğeler her zaman yeni bir satırda başlar ve mevcut tüm genişliği alır. Bunlar "Blok" öğeleridir.

Ör: , , - , form vb.

Bazı öğeler yalnızca gerekli alanı kaplar ve yeni bir satırda başlamaz. Bunlar "Satır içi" öğelerdir.

Ör: ,, ,, vb.

CSS stillerini kullanırken blok öğelerini satır içi olarak ayırmanız gerekir. Bu HTML kılavuzunda, çok gerekli değil.

Kodu:

İlk web sayfam Bu bir H2 başlığıdır. Blok ekranlıdır. Bu başka bir H2 başlığıdır. Burada alt çizgi etiketinin Satır içi görünümü vardır.

Çıktı:

5. HTML'de çift tırnak ve tek tırnak

Bu soru çok açık. HTML'de ne kullanmalısınız? Tek teklif veya çift fiyat teklifi mi? İnsanlar hem kullanıyor hem de hangisi doğru görünüyor?

HTML'de, tekli fiyat teklifi ve çiftli fiyat teklifi aynıdır. Çıktıda bir fark yaratmıyorlar.

Tercih ettiğin birini kullanabilirsin. Ancak, kodların her ikisinde de karıştırmak kötü bir uygulama olarak kabul edilir. Bunlardan herhangi biri ile tutarlı olmalısınız.

6. Anlamsal HTML ve Anlamsal Olmayan HTML

Semantik HTML, HTML5 olarak da adlandırılan HTML'nin en son sürümüdür. Anlamsal olmayan HTML ve XHTML'nin geliştirilmiş sürümüdür.

HTML5 neden daha iyi? Önceki sürümlerde, HTML öğeleri id / sınıf adlarıyla tanımlanıyordu. Örneğin: makale olarak kabul edildi.

HTML5'te, etiketi, herhangi bir id / sınıf tanımlayıcısına ihtiyaç duymadan kendisini bir makale olarak temsil eder.

HTML5 için, şimdi arama motorları ve diğer web uygulamaları bir web sayfasını daha iyi anlayabilir. Semantik web siteleri SEO için daha iyi olduğu kanıtlanmıştır.

İşte bazı popüler HTML5 etiketlerinin listesi:

  • = Bu, görüntüleyenlerinizi göstermek istediğiniz ana içeriği sarmalamak içindir.
  • = Bu, başlık veya yazar meta gibi bir içeriğin başlık kısmını işaretlemek içindir.
  • = Görüntüleyenlerinize kullanıcı tanımlı veya bağımsız bir içerik belirtir.
  • = Başlık, altbilgi veya kenar çubuğu gibi herhangi bir kodu gruplandırabilir. Bir div'in semantik şekli olduğunu söyleyebilirsin.
  • = Bu, altbilgi içeriğinizin, feragatnamenizin veya telif hakkı metninizin ait olduğu yerdir.
  • = Ses dosyalarını herhangi bir eklenti sorunu olmadan eklemenizi sağlar.
  • = Beğen , bu etiketi kullanarak eklenti sorunları olmadan video ekleyebilirsiniz.

Basit bir HTML5 yapısı şöyle görünür:

İlk web sayfam Menü 8 Menü 1 Bu makalenin başlığı John Doe tarafından yayınlandı Makalenin içeriği buraya gelecek Telif hakkı 2 John Doe

7. HTML Doğrulaması

Web profesyonellerinin çoğu bitirdikten sonra kodlarını doğrular. İyi çalışıyorken bir kodu doğrulamak neden gereklidir?

Kodlarınızı doğrulamak için iki olası neden vardır:

  1. Kod çapraz tarayıcı ve çapraz platform uyumlu hale getirmenize yardımcı olacaktır. Kod geçerli tarayıcınızda herhangi bir hata göstermeyebilir, ancak başka birinde olabilir. Kod doğrulama bunu düzeltir.
  2. Arama motorları ve diğer web programları, içinde hatalar varsa sayfanızı taramayı durdurabilir. Herhangi bir büyük hatanın olmadığını doğrulayarak onaylayabilirsiniz.

W3C Validator Kod doğrulama için en popüler hizmettir. Kodları doğrulamak için çeşitli yöntemleri vardır. Bir dosyayı yükleyebilir veya doğrulama motorunda doğrudan kodu girebilirsiniz.

8. Diğer Yararlı Kaynaklar

HTML sürekli öğrenen bir konudur. Daha güncel HTML sürümleri daha çabuk gelebilir. Bu yüzden güncellenmiş ve pratik yapmaya devam etmelisiniz. Uygulama, as HTML’dir.

İşte size bazı yararlı kaynaklar: