Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Kupası
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Nedir: HTML

HTML’nin açılımı ‘HyperText Markup Language’dir ve World Wide Web’deki tüm sayfaları tanımlamak için kullanılan koddur. Web tarayıcılarına web sayfalarındaki içeriğin nasıl görüntüleneceğini söyler.

HTML hakkında bilgi sahibi olmak kullanışlı olsa da, bir WordPress web sitesi oluşturmak için gerekli değildir.

Bununla birlikte, HTML’nin nasıl düzenleneceğini bilmek, ileri düzey özelleştirme ve sorun giderme için yararlı olabilir.

Glossary Entry for HTML

HyperText Markup Language (HTML) Nedir?

Her web sayfası HTML kodu ve genellikle CSS ve JavaScript kodu kullanılarak oluşturulur. Bu da HTML’i tüm web siteleri için çok önemli kılmaktadır.

Daha önce HTML’nin ‘HyperText Markup Language’ anlamına geldiğini söylemiştik. Bunu biraz açalım:

  • HyperText, web sayfalarınıza bağlantılar ekleyebileceğiniz anlamına gelir. Bu bağlantılar sizi kendi web sitenizdeki veya diğer web sitelerindeki ilgili sayfalara götürebilir. Ayrıca mevcut sayfanın bir bölümünden diğerine atlamanızı sağlarlar.
  • İşaretleme, belgenizin farklı bölümlerini açıklamak veya tanımlamak için kullanabileceğiniz özel kodlar veya etiketler anlamına gelir. Metnin nasıl görüntülenmesi gerektiği veya içeriğin türü hakkında talimatlar verirler.

Kısacası HTML, bir web sayfasının temel yapısını oluşturmak için kullanılan bir dildir.

HTML Kodu Örnekleri

HTML işaretlemesi, köşeli parantezler içine alınmış bir etiket sistemi kullanır. Bu etiketler paragraflar, başlıklar, bağlantılar, resimler ve daha fazlası gibi çeşitli öğeleri tanımlar.

İşte birkaç örnek.

Bir web sayfasındaki her paragraf aşağıdaki gibi paragraf etiketleriyle çevrelenir:

<p>This is a paragraph of text in HTML.</p>

Web sitenizde bunun gibi 6 seviyeye kadar başlık oluşturmak için HTML etiketlerini de kullanabilirsiniz:

<h1>This Is a Main Heading</h1>
<h2>This Is a Subheading</h2>

HTML’de bunun gibi bağlantı etiketlerini kullanarak bağlantılar oluşturabilirsiniz:

<a href="https://www.example.com">click on this anchor text</a>

Ayrıca HTML kullanarak, görüntünün URL’sini ve aşağıdaki gibi bir açıklama belirterek bir web sayfasına görüntü ekleyebilirsiniz:

<img src="image.jpg" alt="A description of the image">

HTML işaretlemesi yeni başlayanlar için zor görünebilir. Bir web sitesi oluşturmadan önce HTML’yi anlamanız gerekip gerekmediğini merak ediyor olabilirsiniz.

WordPress Web Sitesi Oluşturmak İçin HTML’den Anlamanız Gerekiyor mu?

İnternetin ilk günlerinde HTML kodu kullanarak statik web siteleri oluşturmak yaygındı. Ancak artık durum böyle değil.

Günümüzde çoğu web sitesi, HTML kodunu anlamaya gerek kalmadan bir web sitesi oluşturucu kullanılarak oluşturulmaktadır. WordPress en popüler web sitesi oluşturucusudur ve tüm web sitelerinin %43’üne güç sağlamaktadır.

Paragraflar, başlıklar ve daha fazlasını oluşturmak için sizi karmaşık HTML etiketlerini kullanmaya zorlamak yerine, WordPress kullanımı kolay bir blok editörü sağlar.

Bu, blokları içerik alanına sürükleyerek bir web sayfası oluşturmanıza olanak tanır. Örneğin, paragraflar, başlıklar, listeler, resimler ve çok daha fazlası için bloklar vardır.

Block Editor

WordPress’te web sayfaları oluşturmanın bir başka yolu da sürükle ve bırak sayfa oluşturucu eklentisi kullanmaktır. Bu araçlar, herhangi bir kod yazmadan özel WordPress web sitesi tasarımları oluşturmanıza olanak tanır.

SeedProd piyasadaki en iyi sayfa oluşturucu eklentisidir ve açılış sayfaları, çok yakında sayfaları ve hatta eksiksiz özel WordPress temaları gibi özel sayfaları kolayca oluşturmanızı sağlar.

Adding a headline to a custom landing page

İster WordPress blok düzenleyicisini ister bir sayfa oluşturucu eklentisini kullanın, web siteniz için gereken HTML kodu perde arkasında sizin için otomatik olarak oluşturulur.

Bir web sitesinin nasıl kodlanacağına ilişkin kılavuzumuzda (yeni başlayanlar için tam kılavuz) web sitesi oluşturucular ve sıfırdan web sitesi kodlama hakkında daha fazla bilgi edinebilirsiniz.

WordPress’te HTML Kodu Ekleme veya Düzenleme

Bir web sitesi oluşturmak için HTML’den anlamanız gerekmese de, web sitenizdeki sorunları giderirken veya gelişmiş özelleştirme yaparken biraz HTML bilgisi kullanışlı olabilir.

WordPress blok düzenleyicisini kullanırken, üç noktalı menüden ‘HTML olarak düzenle’yi seçerek belirli bir blok için HTML kodunu görüntüleyebilir ve düzenleyebilirsiniz.

Choose the edit as HTML option from the Options dropdown menu in the block toolbar

Bir yazıya veya sayfaya yeni HTML eklemek de kolaydır.

Bir Özel HTML bloğunu içerik alanına sürükleyin ve ardından HTML kodunuzu ekleyin.

Paste the discord widget shortcode into the HTML block

WordPress kod düzenleyicisinde HTML’nin nasıl düzenleneceğine ilişkin kılavuzumuzda daha fazla bilgi edinebilirsiniz.

Web sitenizde HTML kodunu kullanmanın bir başka yolu da telif hakkı veya ticari marka sembolü gibi özel karakterler eklemektir.

Bloğun HTML’sini düzenlemeniz ve ardından bir telif hakkı © sembolü eklemek için &copy; veya ticari marka ™ sembolü eklemek için &trade; yazmanız yeterlidir.

Daha fazla bilgi edinmek için WordPress yazılarına özel karakter ekleme kılavuzumuza bakın.

Diğer web sitelerinde kullanılan HTML kodunu da merak ediyor olabilirsiniz. Google Chrome ve Mozilla Firefox gibi modern web tarayıcıları, bir web sayfasının arkasındaki HTML ve CSS kodunu incelemenize olanak tanıyan yerleşik araçlara sahiptir.

Inspect HTML and CSS

Bu, kendi web siteniz için ilham ararken faydalı olabilir. Ayrıca, sitenin yalnızca kendi web tarayıcınızda nasıl görüneceğini etkileyeceğinden, kodu düzenleyerek güvenle deneme yapabilirsiniz.

Ayrıntılar için Inspect Element’in temelleri hakkındaki kılavuzumuza bakın.

HTML ve CSS Arasındaki Fark Nedir?

Modern web tarayıcılarının herhangi bir web sayfasının arkasındaki HTML ve CSS kodunu incelemenize izin verdiğinden bahsetmiştik. Bu iki kod türü arasındaki farkı merak ediyor olabilirsiniz.

HTML bir web sayfasının yapısını ve içeriğini tanımlar ancak bu öğelerin nasıl görüneceğini tanımlamaz. Bu, ‘Basamaklı Stil Sayfaları’ anlamına gelen CSS’nin işidir.

CSS, web sitenizi şekillendirmenize yardımcı olan bir dildir. Örneğin, kullanıcının web tarayıcısının sayfanın arka plan rengini, başlıkların ve paragraf metinlerinin hangi renk ve boyutta görüntüleneceğini, metnin nasıl hizalanacağını ve çok daha fazlasını bilmesini sağlar.

Seçtiğiniz WordPress teması, web siteniz için kullanılan CSS’yi tanımlayacaktır. Ancak CSS kodunu özelleştirerek web sitenizin görünümünü değiştirebilirsiniz.

WordPress sitenize nasıl kolayca özel CSS ekleyebileceğinize ilişkin kılavuzumuzda daha fazla bilgi edinebilirsiniz.

Umarız bu makale WordPress’te HTML hakkında daha fazla bilgi edinmenize yardımcı olmuştur. Faydalı WordPress ipuçları, püf noktaları ve fikirleriyle ilgili makaleler için aşağıdaki Ek Okuma listemize de göz atmak isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!