HTML: Hiper Metin İşaretleme Dili
HTML (HyperText Markup Language), web'in en temel yapı taşıdır. Web içeriğinin anlamını ve yapısını
tanımlar. HTML'nin yanı sıra diğer teknolojiler genellikle bir web sayfasının görünümünü/sunumunu
( CSS ) veya işlevselliğini/davranışını ( JavaScript ) tanımlamak için kullanılır.
"Hipermetin", tek bir web sitesi içinde veya web siteleri arasında web sayfalarını birbirine bağlayan
bağlantıları ifade eder. Bağlantılar, Web'in temel bir unsurudur. İnternete içerik yükleyerek ve bunu diğer
kişiler tarafından oluşturulan sayfalara bağlayarak, Dünya Çapında Web'in aktif bir katılımcısı olursunuz.
HTML, web tarayıcısında görüntülenmek üzere metin, resim ve diğer içerikleri açıklamak için
"işaretleme" kullanır. HTML işaretlemesi <head>, <title><p> <body>, <div> <header>, <h1> , <h2>,
<h3> , <h4> , <h3> , <h4> , <h4> , < h5 … <footer><article><section><p><div><span><img>
<aside><audio><canvas><datalist><details><embed><nav><search><output><progres
s><video><ul><ol><li>
HTML öğeleri, belgedeki diğer metinlerden "etiketler" ile ayrılır; bu etiketler, öğe adının `<p>` <ve `<div>`
etiketleriyle çevrelenmesinden oluşur >. Bir etiketin içindeki öğe adı büyük/küçük harf duyarlı değildir.
Yani, büyük harfle, küçük harfle veya karışık olarak yazılabilir. Örneğin, `<p>` etiketi `<p>` , `<p>` veya
başka herhangi bir şekilde <title>yazılabilir . Bununla birlikte, genel kabul gören ve önerilen
uygulama, etiketleri küçük harfle yazmaktır.<Title><TITLE>
Aşağıdaki makaleler HTML hakkında daha fazla bilgi edinmenize yardımcı olabilir.
Bu makalede
Başlangıç seviyesi eğitimleri
Rehberler
Nasıl yapılır
Referans
İlgili konular
Başlangıç seviyesi eğitimleri
Web geliştirme temel modüllerimiz, HTML temellerini kapsayan modern ve güncel eğitim materyalleri
içermektedir.
İlk web siteniz: İçerik oluşturma
Bu makale, web geliştirme konusunda tamamen yeni olan kişilere yönelik olarak HTML'nin ne olduğunu
ve nasıl kullanılacağını kısaca tanıtmaktadır.
HTML ile içerik yapılandırma
Bu modül, HTML dilinin temellerini ele aldıktan sonra, belge yapısı, bağlantılar, listeler, resimler, formlar
ve daha fazlası gibi önemli alanlara değinecektir.
HTML formları
Formlar, web'in çok önemli bir parçasıdır; kayıt olma ve giriş yapma, geri bildirim gönderme, ürün satın
alma ve daha fazlası gibi web siteleriyle etkileşim kurmak için ihtiyaç duyduğunuz işlevlerin çoğunu
sağlarlar. Bu modül, formların istemci tarafı/ön uç kısımlarını oluşturmaya başlamanıza yardımcı olur.
Rehberler
HTML kılavuzları, web'de HTML ile uygulama geliştirmenize yardımcı olur. Formlar, CORS, içerik ön
yükleme ve duyarlı görseller gibi konuları kapsarlar.
HTML sözdizimi ve sık kullanılan görevler için kısa rehber
Sık kullanılan HTML söz dizimi ve görevleri için hızlı başvuru kılavuzu.
HTML yorumlarını kullanma<!-- … -->
HTML yorumları, işaretlemeye açıklayıcı notlar eklemek veya tarayıcının belgenin belirli bölümlerini
yorumlamasını engellemek için kullanılır.
HTML form doğrulamasını ve Kısıtlama Doğrulama API'sini kullanma
HTML5, istemci tarafında form doğrulamasını kolaylaştırmak için kısıtlama doğrulamasını tanıttı. Temel
kısıtlamalar, form öğelerine öznitelikler eklenerek JavaScript'e gerek kalmadan kontrol edilebilir.
İçerik kategorileri
HTML, her biri belirli bağlamlarda kullanılmasına izin verilen ve diğerlerinde izin verilmeyen çeşitli içerik
türlerinden oluşur. Benzer şekilde, her bağlamın içerebileceği diğer içerik kategorileri ve bunlarda
kullanılabilen veya kullanılamayan öğeler kümesi vardır. Bu, bu kategorilere ilişkin bir kılavuzdur.
HTML'de tarih ve saat formatlarını kullanma
Bazı HTML öğeleri tarih ve/veya saat değerlerini kullanır. Bu kılavuz, bu değerleri belirten dizelerin
biçimlerini açıklamaktadır.
HTML'de mikro veri kullanımı
Mikroveri, web sayfalarındaki mevcut içeriğe meta verileri yerleştirmek için kullanılır. Arama motorları ve
web tarayıcıları, daha zengin bir tarama deneyimi sağlamak için mikroveriyi çıkarabilir ve işleyebilir.
HTML'de mikroformat kullanımı
Mikroformatlar, sosyal web uygulamaları, arama motorları, toplayıcılar ve diğer araçlar tarafından
kullanılmak üzere HTML'ye anlamsal bilgiler ve yapılandırılmış veriler yerleştirmek için kullanılan
standartlardır.
Alışılmışın dışındaki ve standart modları anlamak
Tuhaflık modu ve standartlar modu hakkında tarihsel bilgiler.
HTML'de duyarlı görseller kullanma
Farklı ekran boyutlarına, çözünürlüklere ve diğer özelliklere sahip cihazlarda iyi performans gösteren ve
farklı cihazlarda performansı artıran duyarlı görseller hakkında bilgi edinin.
Web'deki medya türleri ve formatları
<audio>`<audio>` ve `<video>` öğeleri, <video>harici yazılım desteğine ihtiyaç duymadan,
içeriğinizde ses ve video medyalarını doğrudan oynatmanıza olanak tanır.
Nasıl yapılır
HTML kullanarak terimleri tanımlayın.
HTML, satır içi veya yapılandırılmış sözlükler şeklinde, açıklama anlamlarını iletmek için çeşitli yollar
sunar. Bu makale, anahtar kelimeleri tanımlarken bunların nasıl doğru şekilde işaretleneceğini
göstermektedir.
Veri özelliklerini kullanın
HTML5, belirli bir öğeyle ilişkilendirilmesi gereken ancak tanımlanmış bir anlamı olması gerekmeyen
veriler için genişletilebilirlik göz önünde bulundurularak tasarlanmıştır. data-*Öznitelikler, standart,
anlamsal HTML öğelerinde ek bilgiler saklamamıza olanak tanır.
Tuvalde farklı kaynaklardan elde edilen görseller kullanın.
` <p>` veya `<img>` gibi CORS desteği sağlayan bazı HTML öğeleri, öğenin getirilen verileri için CORS
isteklerini yapılandırmanıza olanak tanıyan bir `<script>` özniteliğine
( özelliğine) sahiptir .<img><video>crossorigincrossOrigin
Bir resmin üzerine bir vuruş haritası ekleyin.
Görüntü haritaları, bir görüntünün farklı bölümlerine köprü bağlantıları eklenmesine olanak tanır. Bu
makale, bunların nasıl oluşturulacağını ve uygulanacağını göstermektedir.
Hızlı yüklenen HTML sayfaları oluşturun
Bu ipuçları genel bilgi ve denemelere dayanmaktadır. Optimize edilmiş bir web sayfası, ziyaretçileriniz
için daha hızlı yanıt veren bir site sağlamanın yanı sıra web sunucularınız ve internet bağlantınız
üzerindeki yükü de azaltır.
Web sayfanıza JavaScript ekleyin.
Bu makale, bir HTML dosyasına JavaScript kodu eklemenin nasıl yapılacağını açıklamaktadır.
Referans
HTML, her biri belirli sayıda öznitelikle değiştirilebilen öğelerden oluşur . HTML belgeleri
birbirine bağlantılarla bağlanır. HTML referans dokümantasyonunun tamamına göz atın .
HTML öğeleri
Tüm HTML öğeleri için referans .
HTML öznitelikleri
Tüm HTML özniteliklerine ilişkin referans. Öznitelikler, öğeleri yapılandıran veya davranışlarını çeşitli
şekillerde ayarlayan ek değerlerdir.
Küresel özellikler
Bu , standartta belirtilmeyenler de dahil olmak üzere tüm HTML öğelerinde belirtilebilen genel
özniteliklere ilişkin bir referanstır . Bu, standart olmayan öğelerin, belgeyi HTML5 uyumsuz hale
getirseler bile, bu özniteliklere izin vermeleri gerektiği anlamına gelir.
Öğeye göre özellikler
Giriş türleri
Web tabanlı formlar için etkileşimli kontroller oluşturmak amacıyla kullanılır.
Komut dosyası türleri
Öğenin temsil ettiği yazı tipi türünü belirtir.
meta adı
Sayfanın tamamı için ad-değer çiftleri halinde meta veriler sağlar.
Öznitelik değerleri
rel anahtar kelimeler
Bağlantılı kaynak ile geçerli belge arasındaki ilişkiyi tanımlar.
İlgili konular
CSS kullanarak HTML öğelerine renk uygulama
Bu makale, HTML içeriğine renk eklemek için CSS'nin kullanılabileceği çoğu yöntemi ele alıyor ve HTML
belgelerinin hangi bölümlerinin renklendirilebileceğini ve bunu yaparken hangi CSS özelliklerinin
kullanılacağını listeliyor.
Temel öğrenme modülleri
Temel modüllerimiz, her web geliştiricisinin iyi bir temele sahip olması gerektiğine inandığımız konuları
kapsar. Bu, modern en iyi uygulamaları takip eden temel, erişilebilir bir web uygulaması tasarlamak ve
oluşturmak ve kodlarını uygun araçlar kullanarak yönetmek ve dağıtmak için ihtiyaç duydukları tüm
bilgileri içerir.
Bu makalede
Önkoşullar
Modüller
Önkoşullar
Bu modül setine başlamak için önceden herhangi bir bilgiye sahip olmanız gerekmemekle birlikte,
bilgisayarınızı tanımanızı, gerekli temel uygulamaların (web tarayıcıları ve kod düzenleyici gibi) kurulu
olduğundan emin olmanızı ve daha önce yapmadıysanız web ve web teknolojileri hakkında biraz ön bilgi
edinmenizi öneririz. Tüm bu konular Başlangıç modüllerimizde ele alınmaktadır .
Özellikle daha önce hiç kodlama yapmadıysanız, web teknolojilerini çok nazikçe tanıtan ve basit bir web
sitesi oluşturma sürecinde size rehberlik eden " İlk Web Siteniz" modülünü öneririz.
Modüller
HTML ile içerik yapılandırma
Yüksek kaliteli, kullanılabilir ve erişilebilir bir web sitesi oluşturmak için, anlamsal HTML kullanarak içerik
yapınızı nasıl tanımlayacağınızı anlamanız gerekir. Bu modül, belge yapısı, bağlantılar, listeler, resimler,
formlar ve daha fazlası gibi önemli alanlara bakmadan önce HTML dilinin temellerini kapsar.
CSS stillendirme temelleri
CSS (Basamaklı Stil Sayfaları), web sayfalarının stilini ve düzenini oluşturmak için kullanılır; örneğin,
içeriğinizin yazı tipini, rengini, boyutunu ve aralığını değiştirmek, birden fazla sütuna bölmek veya
animasyonlar ve diğer dekoratif özellikler eklemek için. Bu modül, sözdizimi, özellikler ve teknikler de
dahil olmak üzere şu an için ihtiyacınız olan tüm CSS temellerini sağlar.
CSS metin stili
CSS dilinin temellerini ele aldıktan sonra, odaklanmanız gereken bir sonraki CSS konusu metin
biçimlendirme olacak; bu, CSS ile yapacağınız en yaygın şeylerden biridir. Burada yazı tipi, kalınlık,
italik, satır ve harf aralığı, gölge efektleri ve diğer metin özelliklerini ayarlama gibi temelleri inceleyeceğiz.
Modülü, sayfanıza özel yazı tipleri uygulama ve listeleri ve bağlantıları biçimlendirme konularını ele
alarak tamamlayacağız.
CSS düzeni
Önceki modüllerde, içeriğinizin yer aldığı kutuları nasıl biçimlendireceğimize ve manipüle edeceğimize
baktık. Şimdi ise kutularınızı birbirleriyle ve tarayıcı görüntüleme alanıyla ilişkili olarak doğru şekilde nasıl
yerleştireceğimize bakmanın zamanı geldi. Bu modül, kaydırma (float), konumlandırma, diğer modern
düzenleme araçları ve farklı cihazlara, ekran boyutlarına ve çözünürlüklere uyum sağlayacak duyarlı
tasarımlar oluşturmayı ele almaktadır.
JavaScript ile dinamik betikleme
JavaScript, öğrenilmesi gereken çok sayıda farklı özellik, stil ve teknik ile üzerine kurulu birçok API ve
araç içeren çok geniş bir konudur. Bu modül, çoğunlukla dilin temel unsurlarına ve bazı önemli çevre
konularına odaklanmaktadır; bu konuları öğrenmek size sağlam bir temel sağlayacaktır.
JavaScript çerçeveleri ve kütüphaneleri
JavaScript çerçeveleri, modern ön uç web geliştirmenin vazgeçilmez bir parçasıdır ve geliştiricilere
ölçeklenebilir, etkileşimli web uygulamaları oluşturmak için denenmiş ve test edilmiş araçlar sağlar.
Birçok modern şirket, çerçeveleri araçlarının standart bir parçası olarak kullanmaktadır, bu nedenle
birçok ön uç geliştirme işi artık çerçeve deneyimi gerektirmektedir. Bu makale serisinde, çerçeveleri
öğrenmeye başlamanıza yardımcı olacak rahat bir başlangıç noktası sunmayı amaçlıyoruz.
Erişilebilirlik
Kamu hizmetleri, eğitim, e-ticaret siteleri ve eğlence gibi web içeriklerine erişim bir insan hakkıdır. Hiç
kimse engellilik, ırk, coğrafya veya diğer insan özelliklerine dayanarak dışlanmamalıdır. Bu modül, web
sitelerinizi mümkün olduğunca erişilebilir hale getirmek için öğrenmeniz gereken en iyi uygulamaları ve
teknikleri ele almaktadır.
Geliştiriciler için tasarım
Bu modülün amacı, geliştiricileri tasarım odaklı düşünmeyle (yeniden) tanıştırmaktır. Tasarımcı olarak
çalışmak istemeyebilirler, ancak temel kullanıcı deneyimi ve tasarım teorisi bilgisi, rolü ne olursa olsun,
web sitesi geliştirme sürecinde yer alan herkes için faydalıdır. En azından, en teknik, "tasarımcı
olmayan" geliştirici bile tasarım özetlerini, şeylerin neden bu şekilde tasarlandığını anlamalı ve
kullanıcının bakış açısına girebilmelidir. Bu da portföylerinin daha iyi görünmesine yardımcı olacaktır.
Sürüm kontrolü
Sürüm kontrol araçları, kod tabanlarını yedeklemek ve üzerinde iş birliği yapmak için modern iş
akışlarının vazgeçilmez bir parçasıdır. Bu modül, Git ve GitHub kullanarak sürüm kontrolünün temellerini
size tanıtacaktır.