Köprü Metni Biçimlendirme Dili (HTML), 1990'ların başından beri Web için temel bir teknoloji olmuştur. Tim Berners-Lee, HTML'yi 1989'da elektronik belgeleri kodlamanın basit ama etkili bir yolu olarak yarattı. Aslında, bir Web tarayıcısının asıl amacı, bu tür belgeler için bir okuyucu olarak hizmet etmekti. Yirmi yıl sonra, tarayıcının kendisi çevrimiçi medya dünyasına açılan bir portal haline geldi. Bu nedenle HTML5 yalnızca başka bir HTML revizyonu değil, Web sayfalarının nasıl çalıştığına ilişkin kapsamlı bir standarttır .
HTML5'i benzersiz yapan şeyin ne olduğunu daha iyi anlamak için saati biraz geriye alalım. 1994'te HTML hala ilk revizyonundaydı, Mosaic ve Netscape tarayıcı pazarına hakimdi ve çoğu insan World Wide Web denen bu yeni şeyi henüz deneyimlememişti. O yıl, HTML yaratıcısı Berners-Lee, World Wide Web Konsorsiyumu (W3C) olarak bilinen yeni kurulmuş bir Web standartları grubuna başkanlık etti.
W3C bugün saygın bir standartlar otoritesi olmasına rağmen, 1990'ların tarayıcı pazarındaki ticari oyuncular bu standartları büyük ölçüde görmezden geldi ve kendi yollarını alevlendirdi. 1995'te W3C, HTML standardının ikinci revizyonunu yayınlamıştı ve Web'de yeni olan Microsoft , Internet Explorer (IE) tarayıcısıyla zemin kazanıyordu. Microsoft standartları büyük ölçüde görmezden geldi ve Netscape, IE [kaynak: Harris]'e hükmetmeye başlarken saygın bir pazar payını korumak için mücadele etti.
Bu erken tarayıcı savaşları sırasında, Web geliştiricileri, sitelerini büyük tarayıcıların her yeni sürümüyle ve daha az kullanılan Opera ve Apple Safari tarayıcılarıyla uyumlu tutmaya zorlandı. W3C 1997'de HTML 3.2'yi ve ardından 1998'de HTML 4'ü yayınlamış olsa da, standartları takip etmek tarayıcıya özgü özelliklere ayak uydurmaktan daha az önemli görünüyordu. Bu, topluluk odaklı Mozilla Vakfı'nın trendi kırdığı 2003 yılına kadar devam etti. Orijinal Mozilla tarayıcısının piyasaya sürülmesinden ve ardından 2004'te Firefox tarayıcısından sonra Mozilla, IE'nin hakimiyetini hızla ele geçirdi. Ayrıca, bu yeni tarayıcılar bunu yaparken aslında mevcut W3C standartlarını takip etti.
Mozilla'nın Firefox'u eskiyen HTML 4 standardını kullanarak büyümeye devam ederken, Mozilla 2004'te Web Köprü Metni Uygulama Teknolojisi Çalışma Grubu (WHATWG) adlı bir grup oluşturmak için Apple ve Opera'ya katıldı. WHATWG'nin amacı, HTML geliştirmeyi canlı tutmaktır. Başlangıçta tereddüt etse de, W3C 2006'da HTML canlanmasına katıldı. WHATWG ve W3C birlikte HTML ve XHTML için mevcut spesifikasyonları birleştirdi ve yeni HTML5 spesifikasyonunu oluşturmak için bunları daha da geliştirdi. Bu spesifikasyon şu anda W3C [kaynak: W3C , WHATWG ] tarafından korunmakta ve yayınlanmaktadır .
Bu makale, bu yeni HTML5 teknolojisini incelemektedir. HTML5'e giren XHTML ve diğer teknolojilere bakacağız ve çekici, standartlara uygun Web içeriği oluşturmak için HTML5'in nasıl kullanılacağına ilişkin temel noktaları ele alacağız. Ayrıca, insanların Web'de HTML5 kullanmasının bazı heyecan verici yollarını da inceleyeceğiz. HTML5'in hedeflerine ve neden HTML'den çok daha fazlası olduğuna bakarak başlayalım.
- HTML5, HTML'nin Ötesine Geçiyor
- HTML5 Temel Teknolojileri
- Temel HTML İçeriği
- Formlar
- Anlamsal Öğeler
- Medya Öğeleri ve Flash Rekabeti
- Tuval
- CSS3 ile Görünüm Oluşturma
- Merkezi Bileşen Olarak JavaScript
- Web Uygulama Teknolojileri
- Çığır Açan Konsept Kanıtları
HTML5, HTML'nin Ötesine Geçiyor
Kendi başına HTML, metin, bağlantılar ve diğer pek az şey anlamına gelen statik belgeler sunmaya odaklanır. HTML 4 aracılığıyla, HTML standardı, bu amacı gerçekleştirmek için kullanılan HTML sözdizimi ile aynıydı. HTML5 standardı, tarayıcınıza yüklendiğinde bir Web sayfasının arkasındaki içeriği, stili ve uygulama arayüzlerini tanımlamak için çok daha geniş bir amaca sahiptir. Daha spesifik olarak, HTML5, Web sayfasının bilgisayarınızın belleğine yüklediği tüm öğelerle etkileşim kurmak için tek bir sözdizimi oluşturur.
Devam etmeden önce "HTML5" terimi hakkında açıklamamız gereken olası bir kafa karışıklığı noktası var. İşaretleme dilinin HTML5 adlı yeni bir sürümü var. Ancak bu dil, HTML5 adını paylaşan daha geniş standardın yalnızca bir parçasıdır. Bu makale, HTML5 dilinin merkezinde yer aldığı HTML5 standardının tüm bileşenlerini kapsar.
Bu ayrımı göz önünde bulundurarak, tarayıcı uzun süredir devam eden HTML 4 diline göre değil de daha yeni HTML5 standardına göre yazılmış bir sayfayı nasıl yükler? Sonuçta, Web sayfalarını arkalarındaki HTML hakkında endişelenmeden yüklemek için genellikle tarayıcılarımıza güveniriz. Cevap basit: Tarayıcının kendisi HTML5'i destekleyebildiği sürece, HTML revizyonları arasında ayrım yapmaya gerek kalmadan ona attığınız her şeyi halledebilir.
Bu sihri gerçekleştirmek için HTML5 standardı, ortak hedefler doğrultusunda birlikte çalışan birden çok teknolojinin yeni sürümlerini entegre eder. Bu hedefler aşağıdakileri içerir:
- Dili basit ve sezgisel tutmak
- Kodun okunması ve bakımının kolay olmasını sağlamak
- Sayfaları statik belgeler yerine etkileşimli uygulamalar olarak ele almak
- İçeriği şekillendirmek için Basamaklı Stil Sayfalarına (CSS) güvenmek
- JavaScript'i Web sayfaları için merkezi bir komut dosyası oluşturma bileşeni olarak tanıma
- PHP ve ASP gibi sunucu tarafı teknolojilerinden dinamik içeriği kucaklamak
Artık HTML5'in HTML işaretlemesinin kendisinden daha fazlası olduğunu bildiğinize göre, standarttaki temel teknolojileri inceleyelim.
HTML5 Temel Teknolojileri
Bir biçimlendirme dili, bir dosyadaki öğeleri işaretlemek için bir dizi etiket kullanır. İşaretleme, bu öğelerin ne olduğunu ve nasıl kullanılacağını tanımlayan bir tür modele dayanır. HTML her zaman belgeleri kodlamakla ilgili olduğundan, belge nesne modeli (DOM) adı verilen bir şeye dayanır. DOM, Web tarayıcı uygulamasının kendisinde bulunur. Bu nedenle, biçimlendirme dili, tarayıcıya zaten anladığı bir modele dayalı talimatlar vermenin bir yoludur.
DOM ve HTML arasındaki ilişkiyi daha iyi anlamak için DOM'yi bir kutu lastik damga olarak düşünün. Her damga, DOM içinde farklı bir öğedir. HTML ile yazılan her sayfa, kendi özel içeriğinizle doldurulmuş damgalardan yapılmış bir dizi baskıdan ibarettir. Web tarayıcısı, bu kutudaki damgalardan oluşturulan her şeyi görüntüleyebilir.
Teknik olarak DOM, HTML veya XML belgelerini işlemek için platformdan bağımsız bir yol sağlayan bir uygulama programlama arabirimidir (API). (Genişletilebilir İşaretleme Dili veya XML, HTML'ye benzer, ancak programcının bir belgede kullanabileceğiniz özelleştirilmiş bir öğeler kümesi eklemesine olanak tanır.) HTML5 standardı, DOM5 HTML olarak bilinen DOM'yi gerektirir. HTML5'teki büyümeye hazırlanan Chrome , Firefox , IE, Safari ve Opera tarayıcılarının en son sürümleri DOM5 HTML altındaki tüm sayfaları işleyebilir.
HTML5 için bir diğer önemli temel, ilişkili Çok Amaçlı İnternet Posta Uzantıları ( MIME ) türleridir. MIME, İnternet özellikli yazılımları ne tür içerik işlemeye çalıştığı konusunda uyarmak için bir İnternet Mühendisliği Görev Gücü (IETF) standardıdır. Bu, genellikle bir HTML belgesi veya MP3 ses dosyası gibi belirli bir dosya türüne karşılık gelir.
Web geliştiricileri, bir Web sayfasını kodlarken MIME türlerini belirtir. Bu, tarayıcıdan ilgili dosyaları türlerine göre uygun şekilde yüklemesini ister. Yeni HTML5 standardının temelini oluşturmak için DOM5 HTML'ye katılan iki MIME türü vardır: HTML MIME türü (metin/html) ve XML MIME türü (uygulama/xhtml+xml). HTML5, bu MIME türlerinin her ikisi için sözdizimindeki güncellemeleri içerir.
Kısacası, HTML5 standardındaki temel teknolojiler, DOM5 HTML ve HTML ve XML için HTML5 uyumlu MIME türleridir. Ardından, HTML5 kullanarak bir Web sayfasını nasıl bir araya getireceğimize geçelim.
Temel HTML İçeriği
En azından HTML5, temel HTML sözdiziminin 5. sürümünü içerir. Bu sayfadaki kenar çubuğundaki örnek kod, bu HTML kodunun temel bir Web sayfası için nasıl görünebileceğini gösterir. Web'de gezinirken, görüntülemekte olduğunuz sayfayı oluşturmak için yüklenen HTML'yi (ve diğer kodu) görmek için tarayıcınızdaki "Kaynağı görüntüle" veya benzer bir seçeneği kullanın. Örneğimizde gösterilen kodun tamamı aynı zamanda HTML 4 ile geriye dönük olarak uyumludur, yani HTML5'te bulunan yeni eklemelerin hiçbirine sahip değildir.
Tüm Web sayfalarında bulunmasa da, HTML dosyanızı örnekte gösterildiği gibi bir belge türü (doküman türü) bildirimi ile başlatmak iyi bir uygulamadır. Bu, tarayıcının belgeyi yorumlarken standart HTML beklemesi gerektiğini onaylar. Bazı geliştiriciler, belge türü tanımı (DTD) dosyalarını kullanan HTML standardının uzantılarına güvenir. Durum buysa, geliştirici DTD'nin konumunu bu doktipin bir parçası olarak belirtir.
Doküman tipinin yanı sıra, örnekte kalan kod standart HTML sözdizimidir. Bu sözdizimine aşina değilseniz, Web Sayfaları Nasıl Çalışır makalemize bakın .
Peki, HTML5'teki bu temel öğelerde yeni olan nedir? İşte liste ve ilerleyen sayfalarda her birine daha yakından bakacağız.
- Yeni ve güncellenmiş form öğeleri -- form yapısını düzenleme ve kullanıcıdan gelen form girdisini işleme
- Anlamsal öğeler -- bir Web sayfasındaki rolüne göre içeriğin tanımlanması
- Medya öğeleri -- üçüncü taraf tarayıcı uzantılarına ihtiyaç duymadan ses, video ve diğer etkileşimli ortamları gömme
- Ruby öğeleri -- Asya dilindeki Web sayfaları için uluslararasılaştırmayı destekler
Formlar
Formlar (kullanıcıların adlar, adresler vb. gibi belirli verileri girebildiği bir Web sitesinin bölümleri) HTML'de bulunan en eski öğelerin bir parçası olmasına rağmen, HTML5'ten önce birçok yararlı özellikten yoksundu. Bunu telafi etmek için, üçüncü taraf geliştiriciler, temel HTML formlarını neredeyse modası geçmiş gibi gösteren Web formu yazılımı oluşturdu. HTML5, yeni form öğeleri, giriş türleri ve mevcut öğeler için niteliklerle formlara yeni bir soluk getirdi.
Eski ve yeni sözdizimi arasında ayrım yapmadan, HTML5 kullanarak Web sayfanız için bir form oluşturmaya yönelik genel yaklaşımı inceleyelim. Başlamak için önerilen bazı adımlar:
- kullanarak bir form bloğu oluşturun.
- kullanarak form içinde bir alan bloğu atayın.
- kullanarak alan kümesindeki her alanı düzenleyin
- Her etiket etiketinin içine, görüntülenmesini istediğiniz alan adını artı alanın kendisi için etiket.
- Giriş etiketi içindeki type niteliğini kullanın () bu, tarayıcıdan kullanıcının girişini bu türe göre doğrulamasını ister. Bu, doğrulamayı ve yeniden giriş istemini işlemek için ek kod ihtiyacını ortadan kaldırır. HTML5 şu giriş türlerini içerir: tarih, saat, tarihsaat, tarihsaat-yerel, ay, hafta, sayı, e-posta, tel, url, aralık, renk ve arama. Özel bir doğrulama modeli oluşturmak için model niteliğini normal bir ifadeyle de kullanabilirsiniz.
- Bir girdi öğesi için gerekli özniteliği ekleyerek gerekli alanları belirtin.
- Belirli bir girdi öğesini formdaki ilk öğe olarak ayarlamak için otofokus özniteliğini kullanın. Burası, bir Web tarayıcısının, formu yükledikten sonra kullanıcının imlecini otomatik olarak yerleştireceği yerdir.
- Belirli bir alana ne girileceğine ilişkin metin ipuçları eklemek isterseniz yer tutucu özelliğini kullanın.
- ":required" ve ":invalid" için CSS stillerini ayarlayın, böylece kullanıcı, eksik bilgi veya belirli bir giriş türü için doğrulanmayacak giriş için görsel bir ipucuna sahip olur.
Form öğelerinin ve niteliklerinin tam listesi için güncel bir HTML5 başvuru kılavuzuna bakın. Ayrıca, bazı form alanları desteğinin Web tarayıcıları arasında farklılık gösterdiğini unutmayın. Web sitenizin desteklemesini istediğiniz her tarayıcı türünde formunuzu test ettiğinizden emin olun.
HTML form öğeleri sürüm 5'te daha fazla özelliğe sahipken, sonraki öğe türü HTML5'te tamamen yenidir.
Anlamsal Öğeler
HTML5'teki anlamsal öğeler, adından da anlaşılacağı gibi, belirli içeriğin anlamına atıfta bulunanlardır. Günümüzde çoğu Web sitesi tek bir sayfada birkaç farklı içerik türü içerdiğinden, yalnızca etiketleri kullanmak yeterli değildir. Web geliştiricilerinin, her bir içerik türünün nasıl görünmesi veya davranması gerektiği konusunda ayrı kurallar uygulaması gerekir.
Anlamsal öğeler olmadan, Web geliştiricileri
Zamanla, üstbilgiler, altbilgiler, menüler ve gezinme noktaları gibi belirli içerik türleri Web sitelerinde çok yaygın hale geldi. HTML5, bunları standart anlamsal öğeler ekleyerek birleştirir. Bu, bloğunuzu bir dizi dizi yerine yararlı semantik öğelere bölebileceğiniz anlamına gelir.
Aşağıda, her birinin kısa bir tanımını içeren semantik sayfa öğelerinin listesi bulunmaktadır. Her anlamsal öğe için geçerli niteliklerin ve alt öğelerin tam listesi için güvenebileceğiniz bir HTML5 referansı bulduğunuzdan emin olun.
Blok elemanları:
- bölüm -- daha büyük bir içerik bloğunu bölmeye yardımcı olmak için kullanılan genel bir sayfa bölümü
- makale -- orijinal olarak bir dış kaynaktan gelen, bazen bir toplayıcı komut dosyası kullanılarak sayfa yüklendiğinde dinamik olarak eklenen içerik
- üstbilgi ve altbilgi -- her sayfanın üstünde ve altında görünen bloklar
- hgroup -- başlık ve alt başlık gibi birden çok ilgili başlığın gruplandırılması
- menü -- komutların listesi (komut öğesine bakın) ve menünün davranışını belirleyen nitelikler
- nav -- kesinlikle Web sitesi gezintisi için olan bir bloğu tanımlar, genellikle sitedeki diğer sayfalara giden bazı sırasız bağlantı listeleri
- adres -- makale, bölüm veya tüm sayfa gövdesi gibi bir blok içindeki içeriğin yazarının iletişim bilgilerini içerir
- kenara -- içeriğin bir kenar çubuğu olarak ele alınması gerektiğini belirtir
Satır içi öğeler:
- özet ve ayrıntılar -- aynı içerik için bir bilgi/özet ile tam ayrıntılar arasında geçiş yapın
- şekil ve resim yazısı -- hangi medya öğelerini (img, svg veya canvas) dahil etmek için kullanılırsa kullanılsın, görüntülere ortak davranışı uygulamak için kullanılan öğeler
- saat -- tarayıcının gerektiğinde saat dilimi farklarını ayarlayabilmesi için biçimlendirilmiş bir takvim tarihini, saat saatini veya her ikisini temsil eden metin
- komut -- bir etiket ve bu etiketle etkileşim kurmak için klavyeyi veya fareyi kullandığınızda bu etiketle ilişkili davranış, genellikle bir menü bloğu içinde kullanılır
- dfn -- içerik içinde tanımlanan bir terim
- wbr -- birden çok satıra sarıldığında bir sözcük içindeki metni kesmek için kabul edilebilir bir yeri belirten bir etiket
Semantik öğeler, daha genel HTML öğelerine göre bir iyileştirme olarak oluşturuldu. Ancak bir sonraki yeni öğe türü, Web tarayıcılarındaki üçüncü taraf medya uzantılarının tamamen yerini almayı hedefliyor.
Uzay mı, Boşluk mu?
HTML 4 gibi diğer HTML sürümlerine atıfta bulunduğumuzda, sayıdan önce bir boşluk olduğunu, ancak HTML5 referanslarında boşluk olmadığını fark etmiş olabilirsiniz. Orada HTML toplumda bu çok konuda çok tartışma ve tartışma olmuştur, ama sonunda, hem etmiştir WHATWG ve W3C benimsenen resmi yazım olarak HTML5 tutarlı belgeleri tutmak.
Medya Öğeleri ve Flash Rekabeti
HTML5'in en çok konuşulan özelliklerinden biri, medyayı bir Web sayfasına yerleştirmeye yönelik yeni yaklaşımıdır . Bu makalenin ilerleyen bölümlerinde bu HTML5 özelliğinin bazı harika uygulamalarına göz atacağız. HTML5, bu yerleştirmeyi harici bir tarayıcı eklentisi gerektirmeden gerçekleştirir. Aşağıdakiler, HTML5'te bulunan medya öğeleridir:
- ses -- sayfaya sesi yerleştirir ve nasıl oynatılacağını belirtmek için öznitelikler içerir; desteklenen dosya biçimleri Web tarayıcıları arasında değişiklik gösterir
- video -- videoyu sayfaya gömer ve nasıl oynatılacağını belirtmek için öznitelikler içerir; desteklenen dosya biçimleri Web tarayıcıları arasında değişiklik gösterir
- kaynak -- bir kaynağı tanımlamak için ses veya video öğeleriyle birlikte kullanılır; tek bir öğe için birden fazla kaynak belirtilebilir
- embed -- diğer medya öğelerinde desteği olmayan içerik için ortam türünü gömer ve belirtir
- tuval -- JavaScript'in resim çizebileceği sayfanın bir bölümünü veya bilgisayar ekranını bir kenara koyar; yakında, bu önemli yeni özelliğin nasıl çalıştığı hakkında daha fazlasını öğreneceğiz
- svg -- SVG biçimlendirme diliyle kodlanmış vektör grafiklerini gömerek, grafik kalitesini kaybetmeden sayfanın yüklendiği alana göre dinamik olarak ölçeklenmesini sağlar
HTML5 geliştikçe, piyasa uzmanları bunun şu anda Adobe tarafından kontrol edilen Flash'ın yerini alıp almayacağını sorguladı. Flash, Web tarayıcınıza eklenti olarak ekleyebileceğiniz bir medya oynatıcıdır. Flash, bir sitenin farklı medya türlerini gömmesi için gereken tüm özelliklere sahip olduğundan, YouTube gibi siteler yıllardır buna bağımlıdır. Etkileşimli arayüzlerini güçlendirmek için tamamen Flash'a dayanan bazı Web uygulamaları bile vardır. 2007'de Flash'ın benimsenmesi o kadar yaygındı ki, merakla beklenen Apple iPhone'un piyasaya sürülmesinden sonra birçok tüketici, işletim sisteminin Apple iOS'un Flash'ı desteklemediğini duyunca üzüldü .
İnternetin tartışmasız en büyük markası olan Google , HTML5 ile uygulamalarını geliştirmeye ilk adımını attığında , Flash destekçileri bunu fark etti. HTML5'ten önce, Flash'ın egemenliğine yönelik tek tehdit, özel HTML/JavaScript alternatifleri oluşturmaya ve sürdürmeye istekli Web uygulaması geliştiricileriydi. HTML5 ile, Flash teknolojisine rakip olacak etkileşimli bir medya deneyimi oluştururken bu tür hantal özelleştirmeler artık gerekli değildir.
Peki kim kazanacak: Flash mı HTML5 mi? Kısa cevap, "Hiçbiri" dir. Her teknolojinin kendine has özellikleri, avantajları ve dezavantajları vardır. Ayrıca Adobe ve Google, Flash'tan HTML5'e dönüştürme araçları üzerinde çalıştı. Bu yazının yazıldığı sırada, HTML5'in statü kazanmasına rağmen, Flash'ın kendi popülaritesini bir süre daha koruyacak gibi görünüyor.
Canvas öğesini ve onu HTML5 Web sayfalarınızda nasıl kullanacağınızı açıklayacağımız sonraki sayfaya göz atın.
Tuval
HTML5'in en önemli yeni özelliklerinden biri tuvaldir. Tuval özelliği, bir Web sayfasının bir bölümünü tanımlamanıza , içine içerik çizmenize ve etkileşimli işlevsellik eklemenize olanak tanır . Tüm bunlar, HTML ve JavaScript kodunun bir kombinasyonu ile mümkündür . HTML5'te bir tuval oluşturmak için ihtiyaç duyacağınız üç bölüme bakalım:
Bölüm 1: kullanın
genişlik = "400"
yükseklik="300>
Bu metni görürseniz, tarayıcınız
HTML5 tuval desteğine sahip değildir.
2. Bölüm: İçeriği tuvale çeken JavaScript'i oluşturun. Daha sonra, bir HTML5 Web sayfasıyla ilişkili JavaScript kodunun nasıl ekleneceğini ve yönetileceğini öğreneceğiz. Burada, tuval nesneleri için kullanabileceğiniz bazı JavaScript örneklerine bakalım. Aşağıdaki kod, yukarıdaki tuval içinde bir dikdörtgen çizer:
function drawRectangle() {
var targetCanvas = document.getElementById("sampleCanvas");
var rectContext = sampleCanvas.getContext("2d");
rectContext.fillStyle = "mavi";
rectContext.fillRect(50, 25, 150, 100);
}
Bu işlev, tuvalinizin içine düz mavi bir dikdörtgen çizer. İki "var" satırı, kullanabileceğiniz değişkenler oluşturur. Birincisi (targetCanvas), HTML'deki kimliğini kullanarak hedeflediğiniz tuval öğesini tanımlar. İkincisi (rectContext), çizim için iki boyutlu bir bağlam oluşturur. Bağlamı, tuvalin üzerine yerleştirilmiş şeffaf bir cam tabakası olarak düşünün ve bu cam üzerine çizim yapmak için işlevleri çağıracaksınız.
"fillStyle" satırı, HTML'nin tanıdığı ve adlandırılmış renklerinden biriyle ilişkilendirdiği mavi rengi adıyla tanımlar. HTML veya CSS'de stil kodu yazarken yaptığınız gibi herhangi bir rengi, deseni veya degradeyi de kullanabilirsiniz. "fillRect" çizgisi, dikdörtgeni sol üstten bir ötelemeden başlayarak çizer; ilk iki sayı, tuvalin sol üst kısmı (0,0) koordinatlarındaymış gibi x ve y ofsetleridir. İkinci iki sayı sırasıyla dikdörtgenin genişliğini ve yüksekliğini gösterir.
Bölüm 3: HTML kodundan JavaScript işlevini çağırın. Bu iki parçayı birbirine bağlar. Web sayfası yüklenir yüklenmez işlevi çağırabilirsiniz; bu, sayfa yüklenir yüklenmez görünmesi gereken etkileşimli sayfa içeriklerini çizmek için tuval kullanıyorsanız mantıklıdır. Başka bir seçenek de HTML'de çizim olayını tetikleyen bir düğme, menü veya başka bir öğe oluşturmaktır. Aşağıdaki, yukarıdaki örnek komut dosyasını çalıştırmak için kullanabileceğiniz bir düğme örneğidir:
Dive Into HTML5 , Web sayfalarınız için tuval öğeleri oluşturmaya yönelik izlemesi kolay bir kılavuza sahiptir. Ayrıca, güvenilir bir HTML5 referansı, hem durağan hem de hareketli karmaşık grafikler çizmek için kapsamlı kaynaklar sağlamalıdır. Tuvali HTML5'te kapsamlı bir şekilde kullanmak istiyorsanız, JavaScript'te rahat programlama yapmanız gerekir. Ardından, CSS3'ün bir HTML5 Web sayfasının görünümünü ve verdiği hissi nasıl oluşturduğunu keşfedelim.
CSS3 ile Görünüm Oluşturma
Her HTML öğesinin, o öğenin görünümünü veya işlevini değiştirmek için kodda kullandığınız bir dizi özniteliği vardır. Stil ve ilgili nitelikler, öğenin boyutunu, rengini, yerleşimini, kenarlıklarını ve diğer fiziksel yönlerini ayarlar. Web'in ömrü boyunca, site geliştiricileri, stili içerikten ayırma uygulamasını yaygın olarak benimsedi. Bu ayrımı yaparak geliştiriciler aşağıdaki avantajlardan yararlanır:
- Daha az kod bakımı: Birden çok Web sayfasındaki birden çok öğe, her biri için stil kodunu tekrar etmeden aynı stilleri paylaşabilir.
- Zaman içinde daha kolay bakım: Yeni bir stile güncelleme yapmak veya mevcut olanı düzeltmek, her bir öğeyi bu kodu kullanarak güncellemek yerine yalnızca bir stil kodunu değiştirmek anlamına gelir.
Bu nedenle, stil HTML koduna göre yerleştirilebilse de, Web geliştiricileri için daha popüler olan seçenek, bir Web sitesiyle ilişkili tüm stil kodunu yönetmek için Basamaklı Stil Sayfalarını (CSS) kullanmaktır. Her sayfanın HTML'si, sayfa yüklendiğinde tarayıcınızın yüklemesi gereken bir veya daha fazla stil sayfasına başvurabilir. CSS dosyaları biçimindeki bu stil sayfaları, kullanarak girebileceğiniz şeyleri taklit etmek için tasarlanmıştır.
