Yeni Başlayanlar için HTML Eğitimi

Nihai Kılavuz

Artem Minayev
Güncelleme: 4 Ekim 2023
15 dak. Okundu
FirstSiteGuide okuyucularımız tarafından desteklenmektedir. Sitemizdeki bağlantılar aracılığıyla satın aldığınızda komisyon kazanabiliriz. Devamını Oku
Yeni Başlayanlar için HTML Eğitimi

Web yöneticisi olmak ve öğrenmek istiyorsanız İnternet sitesi nasıl oluşturulur, HTML'yi kavrama olasılığını oldukça yıldırıcı bulabilirsiniz.

Ancak ziyaret ettiğiniz web sitesi açılış sayfalarının büyük çoğunluğu HTML öğeleri kullanılarak yazılmış ve yapılandırılmış olacağından bu kaçınılması mümkün olmayan bir şeydir. Aslında HTML artık Bilinen tüm web sitelerinin %74'ünden fazlası tarafından kullanılıyorBu dil aynı zamanda sitenizin tasarımından sunduğu içeriğin kalitesine kadar her şeyin geliştirilmesine de yardımcı olur.

Bu kılavuzda, web sitenizi kodlarken kullandığınız bireysel öğelerin örneklerine bakmadan önce, HTML'nin temel ilkelerini ve potansiyel uygulamalarını inceleyeceğiz.

HTML nedir?

Basit bir ifadeyle, HTML standart işaretleme dilini temsil eder çevrimiçi web sayfaları oluşturmak için. Hyper Text Markup Language anlamına gelir ve en temel işlevi, bireysel açılış sayfalarının yapısını, düzenini ve sunumunu oluşturmaktır. Web tarayıcıları HTML dilini doğrudan görüntülemese de görünür, erişilebilir ve kullanımı kolay bir site oluşturmaya yardımcı olmada önemli bir rol oynar.

HTML aynı zamanda yavaş yavaş web sayfalarını oluşturan, içeriğin sunumunu yapılandıran ve web sitenize hayat veren bir dizi bireysel öğe tarafından da desteklenir. Bu öğeler, başlıklar, paragraflar ve benzer örnekler gibi alternatif içerik parçalarını tanımlayan 'etiketler' içinde oluşturulur ve bulunur.

Web sitenize renk, bağlantı ve değişken tipografi eklemek için bunların nasıl kişiselleştirilebileceğine de bakarken, bu unsurları ve yapılarını aşağıda daha ayrıntılı olarak inceleyeceğiz.

Web Teknolojilerinin Zaman Çizelgesi:

  • 1991 – Html
  • 1994 – HTML2
  • 1996 – CSS1 + JavaScript
  • 1997 – HTML4
  • 1998 – CSS2
  • 2000 – XHTML1
  • 2002 – Masasız Web Tasarımı
  • 2005 – AJAX
  • 2009 – HTML5

HTML nerede kullanılır?

HTML kullanan popüler web siteleri:

  • Wikipedia.org
  • Google.com
  • YouTube.com
  • Facebook.com
  • Yahoo.com
  • Baidu.com
  • Reddit.com

Gördüğümüz gibi HTML'in en yaygın uygulaması, web sitenizi oluşturan bireysel açılış sayfalarının tasarımıdır. Bu, popüler kodlama aracının tek uygulaması değildir; ancak ek kullanımlarını anlamak, yeni bir web yöneticisi olarak dilden en iyi şekilde yararlanmanıza yardımcı olacaktır. İşte HTML'in uygulanabileceği diğer yollardan bazıları:

  • Mevcut bir sayfada özelleştirilebilir öğeler oluşturun. Eğer izin vermeyi planlıyorsan blog gönderileri yorumları veya kullanıcı tarafından oluşturulan içeriğin web sitenizde yayınlanması, bunu sağlamak için HTML kod parçalarını kullanabilirsiniz. Bu öğeler, moderatör olarak koyduğunuz kısıtlamalara bağlı olarak kullanıcıların anahtar kelimeleri vurgulamasına, bağlantıları yerleştirmesine ve yorumları biçimlendirmesine olanak tanır.
  • E-posta için ek içerik oluşturun. E-posta ayrıca, bağlantılar, metin ve yalnızca düz metinde bulunamayacak çeşitli diğer öğeleri içeren zengin metin mesajlarının dili olarak HTML'yi de kullanır. Dolayısıyla, web sitenizle ilgili bir e-kitabı e-posta yoluyla paylaşmak istiyorsanız, mesajınızın etkisini optimize etmek için HTML'den yararlanabilirsiniz.
  • Bilgisayarınızda yüklü olan çevrimdışı yardım belgelerini anlayın. İlginç bir şekilde HTML, çevrimdışı erişilebilen bilgisayar tabanlı yardım belgelerinin formatı olarak kullanılıyor. Bu nedenle, temel HTML bilgisi, donanımınızla ilgili sorunları anlamanıza ve bunları daha hızlı çözmenize yardımcı olabilir; bu da, web sitenizin çevrimdışı olduğu durumlarda daha hızlı geri yükleyebilmenizi sağlayabilir.

HTML sayfa yapısı

Bir HTML sayfası oluşturmadan önce temel bilgilerin yerinde olması gerekir.

Tipik olarak bir sayfa üç yapısal öğeden oluşacaktır:

  1. Başlık: Başlık, sitenizdeki tüm sayfalarla alakalı içeriği içerir, bir logo gibi veya web sitesi adı ve bir navigasyon sistemi. Başlık her sayfada görülür.
  2. Ana gövde: Bu, bir web sayfasındaki en büyük alanı kaplar. Görüntülenen sayfaya özel içerik içerir.
  3. Altbilgi: Alt bilgi içeriği genellikle iletişim bilgilerini, teslimat adresini veya yasal bildirimleri içerir. Üst bilgi gibi alt bilgi de her sayfada görünür ancak altta konumlandırılır.

İşte bu temel yapısal unsurlar bir araya geldiklerinde nasıl görünüyorlar:

Buraya bir metin veya kod koyabilirsiniz.
Şunun için Google Analytics izleme kodu:
örnek.

Sayfanızın ana gövdesi gider
Burada. Metin ve resimlerle doldurun!

İçeriği estetik olarak yapılandırmak için başlık etiketlerini ve paragraf etiketini kullanmanın başka bir örneğini burada bulabilirsiniz. Ayrıca, bir sayfanın ana gövdesinin altına içerik için bir alt bilgi etiketi ekledik:

Buraya bir metin veya kod koyabilirsiniz.
Şunun için Google Analytics izleme kodu:
örnek.

İlk Başlığım

Web siteme hoş geldiniz!

iletişim bilgileri buraya gelebilir

HTML etiketleri

Herhangi bir HTML kodunun başlangıç ​​noktası, tüm önemli öğeleri oluşturmak ve web sayfalarınızı yapılandırmanıza yardımcı olmak için kullanılabilen ayrı etiketlerdir.

Önde gelen HTML Etiketi teknolojileri Web'de paylaşın

  • HTML5 Kanvas Etiketi – %0.27  
  • HTML5 Ses Etiketi – %0.29  
  • HTML5 Video Etiketi – %0.69
  • HTML5 SVG Etiketi – %3.1  
  • HTML5 Gömme Etiketi – %6.54  

Aşağıda, belirli sayfa içi öğeler oluşturmak için bunlardan nasıl yararlanılabileceğini keşfetmeden önce en yaygın etiketlere göz atacağız:

Başlık etiketleri

Web sayfaları dahil tüm çevrimiçi belgeler bir başlıkla başlar. Bunlar, HTML etiketleri kullanılarak oluşturulur ve dil şu anda altı adete kadar değişken boyutlu öğeye izin verir; bu da içeriğinizi ek başlıklar, alt başlıklar ve vurgulanan kalın metin satırlarıyla yapılandırmanıza olanak tanır. Başlığınıza başlamak için ilgili metnin önüne şu ifadeyi koymanız yeterlidir: , , , , veya İstenilen boyuta göre etiket.

Daha sonra metni kapsüllemek için başlığın sonuna bir kapatma etiketi uygulamanız gerekir; bu etiket, HTML formatında aşağıdaki gibi görüntülenecektir:

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

Onaylandıktan sonra bu, web sitenizin açılış sayfasında aşağıdaki estetiğe dönüşecektir:

Bu başlık 1

Bu başlık 2

Bu başlık 3

Bu başlık 4

Bu başlık 5
Bu başlık 6

Burada, tarayıcının başlıktan önce ve sonra bir satır eklemesi gibi, değişken başlıkların çeşitli boyutları da açıkça görülmektedir. Ayrıca başlık metninin sonundaki kapanış etiketinin biraz farklı bir estetiğe sahip olduğunu fark edeceksiniz, ancak bunu bir sonraki bölümde belirli öğeleri tanımlamak için etiketleri kullanmaya inceleyeceğimizde ele alacağız.

Paragraf etiketleri

Benzer bir prensip, şu şekilde gösterilen başlangıç ​​paragraf etiketlerine de uygulanır: . Bu, içeriğinizi yapılandırmanıza ve ilgili paragraflara bölmenize olanak tanır; bu da daha kolay ve daha kusursuz bir okuma deneyimine dönüşür. Bir kez daha, Efektin tamamlanması için sondaki alternatif kapanış etiketi uygulanmadan önce ilgili metnin başına etiketi yerleştirilmelidir. Ancak başlık etiketlerinin aksine, paragrafta yer alan metnin boyutunu değiştirebilecek sayısal bir değişiklik yoktur.

Örneğin:

<p>Your First Paragraph</p>

<p>Your Second Paragraph</p>

<p>Your Third Paragraph</p>

HTML formatının dışında bu, bitmiş web sayfanızdaki metni aşağıdaki gibi parçalayacaktır:

İlk Paragrafınız

İkinci Paragrafınız

Üçüncü Paragrafınız

Satır sonu etiketleri

İlk örnekler en temel HTML etiketlerini temsil eder, ancak farklı bir format ve alternatif kapanış biçimleri kullanan başka örnekler de vardır. Örneğin, metnin hangi satırlarının kesildiği ve sonraki satırda devam ettiği konusunda bir ayrım yaratan satır sonlarını kullanın. HTML alanında satır sonları ve paragraflar arasında temel bir fark vardır; ikincisi metin içeren standart blok öğeleri iken, birincisi mevcut bir metin içinde ayrım yaratır. eleman.

Bu nedenle satır sonları HTML'de boş bir öğeyi temsil eder ve bu nedenle açılış veya kapanış etiketleriyle tanımlanmaz. Bunun yerine, şu şekilde tasvir edilirler: mevcut etikete eklenebilecek etiket metni bölmek ve potansiyel olarak önemli bilgi parçalarını vurgulamak için öğeler. Karakter arasındaki tek boşluk ve eğik çizgi çok önemlidir, aksi takdirde etiket HTML biçiminde tanınamaz.

İşte bir örnek:  

Günaydın
Sorgunuz için çok teşekkür ederiz. Başka bir şeye ihtiyacımız olursa sizinle iletişime geçeceğiz.
Saygılarımla
Bay J olanlar

Uygulandıktan sonra metni aşağıdaki gibi parçalayacaktır:

Günaydın,

Sorgunuz için çok teşekkür ederiz. Başka bir şeye ihtiyacımız olursa sizinle iletişime geçeceğiz.

Saygılarımızla

Bay Jones

Gördüğünüz gibi, değer kattıkları ve bilgilerin anlaşılmasını kolaylaştırdıkları sürece, mevcut bir paragraf öğesi içinde istediğiniz sıklıkta satır sonları uygulayabilirsiniz. Ayrıca, içinde yer alan metnin düzenini değiştirmek için kullanılan satır sonu etiketleriyle birlikte, açılış ve kapanış paragraf etiketlerinin değişmeden kaldığını da göreceksiniz.

Bu, web sayfalarınızın ve içeriğinizin görsel düzenini tanımlamada önemli bir rol oynayan mevcut öğeleri değiştirmek için HTML etiketlerinin nasıl kullanılabileceğini gösteren örneklerden biridir.

Yatay çizgiler

Benzer şekilde, içinde kullanılabilecek başka etiketler de vardır. öğesini veya web sayfanızdaki metin gövdelerini daha da ayırmak için kullanın. En yaygın kullanılanlardan biri, çevrimiçi bir belgenin alternatif bölümleri arasına görsel, yatay bir çizgi çizen boş bir öğe oluşturmaya yardımcı olan etiket. Örneğin okuyucuyu yeniden odaklamak veya yalnızca yeni bir görsel öğe eklemek için iki metin gövdesi arasına bir çizgi yerleştirmek isteyebilirsiniz. HTML'de böyle bir mola şu şekilde oluşturulur:

<p>Your First Paragraph</p>

<hr />

<p>Your Second Paragraph</p>

Burada, hr karakterleri arasındaki kesme ve eğik çizgi, boş bir öğenin yapısını vurgularken, bir kez daha efekti tamamlamak için herhangi bir kapatma etiketi gerekli değildir. Bu, aşağıdaki görseli yaratacaktır:

İlk Paragrafınız

________________________________________

İkinci Paragrafınız

Resim etiketleri

Resim etiketleri aynı zamanda HTML'deki boş öğeleri de temsil eder; bu da bir kez daha bunların bir kapanış etiketi içermediği anlamına gelir. Yalnızca siteye yerleştirdiğiniz görselin URL'sine ilişkin öznitelikler içerdiklerinden, yalnızca şu şekilde tanımlanırlar: etiketi öğenin başlangıcında kullanın. Bunlar web sitenizin herhangi bir yerine yerleştirilebilir, ancak bunların paragraf veya başlık gibi mevcut öğelere dahil edilmesi alışılmadık bir durum değildir. Tipik bir HTML resim etiketinin kendisini nasıl sunacağı aşağıda açıklanmıştır:

Ayrıca görseliniz için, yavaş yükleme süreleri veya ekran okuyucu kullanımı durumunda insanların görselinizi görüntülemesine yardımcı olacak alternatif bir metin de sunmalısınız. Bu şekilde, tarayıcı bir görsel bulamazsa alternatif özelliğin değerini izleyicilere gösterecektir. Bu yine resim etiketini kullanır ancak farklı bir dizi özellik içerir:

HTML öğeleri

Daha önce, sayfa içi öğeleri tanımlamak için HTML etiketlerinin ne kadar basit kullanıldığına baktık ve aynı zamanda resim ve satır sonu etiketleri içeren boş öğeler kullanılarak bunların nasıl daha da özelleştirilebileceğini de araştırdık. Bu, etiketler ve öğeler arasındaki ilişkiyi ve bunların farklı öğeleri tanımlamak için nasıl kullanılabileceğini anlamamıza yardımcı olur. web sitenizdeki içerik türleri.

HTML dilinin tüm yönleri bir etiketle temsil edilirken, örneğin içerik içeren tanımlı bir öğenin hem başlangıç ​​hem de kapanış etiketi olması gerekir. Dolayısıyla başlıklar ve paragraflar HTML öğeleridir çünkü ilgili metni kapsüllemek ve genişletmek için başlangıç ​​ve kapanış etiketlerini kullanırlar. Buna karşılık, boş öğeler ya nitelik içerir ya da hiç içerik içermez; bu da bunların bir kapatma etiketine gerek kalmadan mevcut öğeler içinde kullanılmasına olanak tanır.

HTML öğelerini tanımlama

Başlık, paragraf gibi örnekleri kullanırken başlangıç ​​ve kapanış etiketlerinin doğru uygulanması çok önemlidir. Bu başlangıç ​​etiketidir (örneğin veya ) örneğin söz konusu öğeyi tanımlarken kapanış etiketi bu öğenin web sayfasının geri kalanında devam etmemesini sağlar. Kapanış özelliğini kullanamazsanız İstenilen paragrafın sonundaki etiket, örneğin metin, çirkin ve okunması son derece zor olan tek bir blok halinde görünecektir.

Tüm kapanış etiketleri, ilkinin ilgili karakterlerden önce bir eğik çizgi içermesi dışında başlangıç ​​etiketleriyle aynıdır. Yani bir durumda başlık, kapanış etiketi şu şekilde olacaktır: paragraflar için ise her zaman kullanacaksınız metindeki kesintiyi tanımlamak için. Bu, kodlama sırasında ayrıntılara dikkat edilmesini gerektirir ve başlıkları programlarken kullandığınız sayının (h1 veya h1 gibi) hem başlangıç ​​hem de kapanış etiketlerinde uygulandığına dikkat etmek önemlidir.

İç içe HTML öğelerini kullanma

Bu aşamada, HTML belgelerinin ve web sayfalarının, bir dizi varlık için yapı taşları görevi gören çeşitli öğelerden oluşan bir ağaç tarafından oluşturulduğu açıktır. Ayrıca bu öğelerin çevrimiçi içeriği yapılandırmak için nasıl oluşturulup kullanılabileceğini de inceledik ve buna şimdi iç içe HTML öğelerine bakarak devam edeceğiz.

Tıpkı boş öğeler ve bağımsız etiketler gibi (örneğin tanımlanmış HTML öğelerine dahil edilebildiği gibi iç içe öğeler de başlıklar ve paragraflar gibi içeriklerin içinde barındırılabilir. Bunlar arasında kalın ve italik harfler ve altı çizili metinler gibi örnekler yer alır ve içeriğinize kişilik kazandırmak ve okuyucunun dikkatini belirli ilgi noktalarına çekmek için uygulanabilirler.

HTML'de kalın, italik ve üstü çizili metin

Mevcut bir paragraf öğesindeki bir kelimeyi vurgulamak istediğinizi varsayalım. Bunu, standart içindeki basit etiketleri kullanarak kalın yaparak başarabilirsiniz. eleman. HTML kullanarak bunu aşağıdaki gibi programlayacaksınız:

Bu kelimenin kalın olmasını istiyorum.


Burada, iç içe geçmiş öğenin hem başlangıç ​​hem de kapanış etiketi vardır; bunların her biri, başlıklar ve paragraflarla ilişkili olanlara benzer bir formatı takip eder. Mevcut öğeler içinde sorunsuz bir şekilde kullanılabilirler ve bu durumda aşağıdaki sonuçları üretecektir:

Jeg vil Re-Tweet kalın olması gereken kelime.

Şimdi diyelim ki bu kelimenin tipografisini de italik olacak şekilde değiştirmek istiyorsunuz. Bu, basitçe şu şekilde kodlanması gereken başka bir iç içe geçmiş öğenin eklenmesiyle elde edilebilir:

kelimenin kalın olmasını istiyorum.

Gördüğünüz gibi, başlangıç ​​ve kapanış italik etiketleri basit bir şekilde eleman. Bu artık öğenin içindeki içeriği aşağıdaki gibi görünecek şekilde dönüştürecektir:  

Jeg vil Re-Tweet kalın olması gereken kelime.

Elbette bu kelimeyi farklı bir şekilde vurgulamayı tercih etmeye karar verebilirsiniz. Bu nedenle, üstü çizili ( ve etiketleriyle temsil edilen) gibi alternatif bir iç içe geçmiş öğe kullanabilirsiniz. Bu etiketler, aynı şekilde HTML'de şu şekilde görünen öğe:

Bu kelimenin üstü çizili olmasını istiyorum.

Bu durumda metin, belgenizde veya açılış sayfanızda aşağıdaki gibi görünecektir:  

Jeg vil Re-Tweet üstü çizili olacak kelime.

Bu, web sayfalarınızın yapısını ve içerdikleri içeriği tanımlayan etiketler tarafından oluşturulabilen öğelere dair bir fikir sunar. İçeriğinizi daha da tanımlamak için yalnızca bu değil, boş ve iç içe geçmiş öğeler de kullanılabilir.

HTML özellikleri

Etiketler, öğeleri oluşturan ve tanımlayan yapı taşlarıysa, HTML nitelikleri, bunların özelliklerini (stil, renk ve dil gibi) özelleştirmek için kullanılabilir. Tüm HTML öğelerinin, temel bilgileri sağlayan ve her zaman istatistik etiketi içinde belirtilen temel nitelikleri vardır. Genellikle çiftler halinde gelirler ve bu nedenle sıklıkla şu biçimde görünürler: name=”value.“

Basit bir ifadeyle ad, ayarlamak istediğiniz özelliği temsil ederken değer, dahil etmek istediğiniz belirli ölçütlerle ilgilidir.

HTML öğelerinize uygulanabilecek çok sayıda özellik vardır, ancak acemi web yöneticileriyle en alakalı olanlar şunlardır:

'Dil' özelliği

En temel tek nitelik, belgenin dilini ve öğelerini tanımlar. 'Lang' özelliği kullanılarak bildirilir ve kolayca gözden kaçırılsa da içeriğin ekran okuyucular ve arama motorları için daha erişilebilir olmasını sağlama avantajına sahiptir. Genellikle belgenin başında aşağıdaki formatta sunulacaktır:

Lang özelliğinden sonra ilk iki harf dili belirtir (bu örnekte İngilizcedir). Kısa çizgiden sonra gelen iki harf lehçeyi oluşturur, ancak bu her dilde mevcut olmayacaktır. Hedef kitlenize başarılı bir şekilde ulaşmak istiyorsanız bu özelliği doğru bir şekilde almanız önemlidir.

'Hizala' özelliği

HTML niteliklerinin formatına (ad=”değer”) zaten değinmiştik ve bunun en iyi örneği, öğelerinizin içindeki içeriği hizalamaya çalıştığınızda ortaya çıkar. Tüm paragrafları belirli bir sayfada ortalamaya karar verebilirsiniz; örneğin hizalama, ayarlamak istediğiniz özellik olacaktır. Sonuç olarak, metninizi sola veya sağa hizalama seçeneğiniz olmasına rağmen, 'orta' özelliğin değeridir.

Örneğin:

<p align="center" >This text is center aligned</p>

Bu, öğelerini sayfanın ortasındaki öğelere yerleştirin ve web sitenizin özel yapısına uygun tek tip bir düzen oluşturun (aşağıya bakın):

Bu metin ortaya hizalanmıştır

Bu metin ortaya hizalanmıştır

Bu metin ortaya hizalanmıştır

'href' özelliği

Görünür bir web sitesi oluşturacaksanız, hem gelen hem de giden bağlantıları dahil etmeniz önemlidir. Dahili açılış sayfalarına geri bağlantılar içeren bir bağlantı portföyü oluşturmak da geçerli bir stratejidir, dolayısıyla bunları HTML'de nasıl kodlayacağınızı öğrenmeniz gerekecektir.

HTML bağlantıları , hedef bağlantıyı ve URL'yi barındıracak ilişkili bağlantı metnini içeren etiketle tanımlanır. Site adresini belirten 'href' özelliğidir ancak bu, başlangıç ​​etiketinin bir parçası olarak dahil edilmiştir. HTML'de şu şekilde kodlanmıştır:

Google

Bu, başlangıç ​​ve kapanış etiketi arasındaki farkı açıkça vurgular ve açılış sayfanızda şu şekilde tercüme edilir:

Google  

'Renk' özelliği

Bu bir diğer önemli özelliktir; çünkü renk kullanımı web sitenize canlılık katarken, önemli kontrastlar ve güçlü bir tasarım estetiği yaratmanıza da yardımcı olur. HTML'de bir renk, adı kullanılarak belirtilebildiği gibi, bu amaca ulaşmak için bir RGB veya HEX değerinden yararlanmak da mümkündür. İlk seçenek takip edilmesi en kolay olanıdır ancak aynı zamanda sayfanızdaki başlıklara, paragraflara ve diğer öğelere de uygulanabilir.

Bu, ayarlamak istediğiniz değeri temsil eden renk seçiminizle birlikte bir stil özelliğidir. Örneğin ana başlığa kırmızı renk uygulandığında şu şekilde görünecektir:

Kırmızı kullanılarak ayarlanan metin rengi

Uygulandıktan sonra bu öğe web sitenizde aşağıdaki gibi görünecektir:

Kırmızı kullanılarak ayarlanan metin rengi  

Bir kez daha, öğeyi tanımlayan başlangıç ​​ve kapanış etiketleri arasında net bir ayrım vardır ve bu, HTML'de uygulanması en kolay özelliklerden biridir. Ayrıca, HTML niteliklerinin name=”value biçimini daha da vurgulayarak öğrenme sürecini kolaylaştırır ve bunları web sitenizde çok daha kolay bir şekilde uygular.

Kendin test et

HTML ve onun bireysel unsurları hakkında temel bir anlayışa sahip olduktan sonraki adım, bazı basit projeler üstlenmek ve teorik bilgilerinizi pratik zorlukları çözmek için uygulamaktır.  

Aşağıda ayrıntıları verilen alıştırmada, bir metni öne çıkardık ve HTML kullanarak çeşitli yönleri biçimlendirmemizi istedik. Kendi web sitenizi kodlamaya hazırlanırken görevi tamamlamak için kılavuzu ve şimdiye kadar öğrendiklerinizi kullanın.

<h1>Main Header

<p>Welcome to our website, Example.com! We hope you enjoy reading our content , feel free to reach out to us. </p>

<p>Thanks for visiting! </p>

<p>Learn more. </p>

Sorular:

  1. Başlık öğesini doğru kapanış etiketiyle tamamlayın.
  2. Başlığı kalın yapın.
  3. Başlığın altına yatay bir çizgi ekleyin.
  4. Renk özelliğini kullanın ve 'Ziyaret ettiğiniz için teşekkürler' ifadesini yeşil renkle gölgelendirin
  5. Bu köprüyü ekle (https://www.w3schools.com/html/) "Daha fazla bilgi edinin" bağlantı metnine ekleyin.
  6. Paragrafları sola hizalamak için sayfanın başında name=”value” biçimini kullanın

HTML dili istatistikleri ve gerçekleri

  1. HTML, head ve body öğeleri 1990'ların ortasından bu yana HTML spesifikasyonunun bir parçası olmuştur ve birkaç yıl öncesine kadar bunlar, HTML belgelerine yapı kazandırmak için kullanılan birincil öğelerdi. Ancak son birkaç yılda HTML5'in bir HTML belgesinin yapısına zengin anlamsal anlam eklemek için kullanılabilecek bir dizi yeni etiket eklemesiyle durum önemli ölçüde değişti.
  2. HTML belgelerinin bir Belge Türü Bildirimi (gayri resmi olarak bir "doctype") ile başlaması gerekir. Tarayıcılarda doctype, oluşturma modunu tanımlamaya yardımcı olur. HTML5 bir DTD'yi tanımlamaz; bu nedenle HTML5'te doctype bildirimi daha basit ve daha kısadır.
  3. Mobil tarayıcılar HTML5'i tamamen benimsemiştir, bu nedenle mobil kullanıma hazır projeler oluşturmak, daha küçük dokunmatik ekranları tasarlamak ve oluşturmak kadar kolaydır; Duyarlı Tasarımın popülerliği de buradan gelmektedir. Mobil cihazlar için optimizasyon yapmanıza da olanak tanıyan bazı harika meta etiketler vardır.  
  4. İçerik geliştiricilerin %78'i yapının mobil uygulama oluşturmaya uygun olduğunu düşünüyor, %68'i ise her türlü uygulamayı tasarlamaya uygun olduğunu söylüyor.
  5. HTML5 ayrıca daha iyi bir kullanıcı deneyimi ve daha güçlü, daha dinamik bir web uygulaması oluşturmanıza olanak tanıyan bir dizi harika API ile birlikte gelir; burada yerel API'lerin kısa bir listesi verilmiştir:
    • Sürükle ve Bırak (DnD)
    • Çevrimdışı depolama veritabanı
    • Tarayıcı geçmişi yönetimi
    • Belge düzenleme
    • Zamanlanmış medya oynatma
  6. HTML5 tek bir şirket tarafından kontrol edilmiyor. En iyi özelliklerinden biri açık standart olmasıdır. Geliştiriciler, yaratıcılıklarının akmasına izin verme ve mümkün olduğu kadar çok işlev ve özellik ekleme özgürlüğüne sahiptir.
  7. Diğer tarayıcılarla karşılaştırıldığında, her Google Chrome güncellemesinin HTML5 desteğini içerdiğinden emin olabilirsiniz. Ayrıca YouTube'un varsayılan oynatıcısı artık HTML5'tir ve Google'ın Flash reklamları artık HTML5'e dönüştürülmektedir.
  8. HTML5'in geliştiriciler tarafından kullanımı (bölgeye göre):
    • Kuzey ve Latin Amerika – %70
    • Güney Amerika – %61
    • ASPAC-%60
    • Avustralya -% 60
    • Avrupa -% 59
    • Afrika – %50

Sonuç

HTML ancak 1991 gibi yakın bir tarihte oluşturulmuş olsa da (kodlama dilinin ilk versiyonu 1995'te piyasaya sürüldü), hızla işlevsel ve görsel olarak çekici web sitelerinin tasarımında ufuk açıcı bir araç haline geldi. HTML'nin etki düzeyi de gelişmeye devam ediyor; en son sürüm (HTML5) dünya çapında giderek artan sayıda web sitesi tarafından benimseniyor.

Bu bağlamda, HTML'nin temel unsurlarını ve bunların nasıl uygulanacağını öğrenmek, başarılı, görünür ve sonuçta rekabetçi bir web sitesi oluşturmada atacağınız en önemli adımdır.

2 yorum “Yeni Başlayanlar İçin HTML Eğitimi”

  1. Ephraim Ugochukwu

    Gerçekten harika. HTML'yi kolayca anlayabildim. Bu harika yazı için teşekkürler

Yorum bırak

E-posta hesabınız yayımlanmayacak. Gerekli alanlar işaretlenmişlerdir. *

Bunu bir arkadaşına gönder