HTML5'i Kullanmaya Başlayın

Bu kılavuz ücretsiz PDF olarak indirilebilir. Şimdi HTML5 ile Başlayın. Bunu kopyalayıp arkadaşlarınızla ve ailenizle paylaşın.

instagram viewer

ve

etiketler çok ürkütücü değildir ve bazı kaynak kodlarında ellerinizi kirletmekten korkmazsınız.

İkinci olarak, bu kılavuz CSS'nin ne olduğunu ve nasıl çalıştığını bildiğinizi varsayar. Tasarım dahileri olmanızı beklemiyoruz ya da CSS spesifikasyonunun tamamını elinizin arkasından bilmeniz beklenmiyor. Bununla birlikte, bir web sayfasındaki bir öğeye stil uygulayabilmeli, bir CSS dosyasına bağlanabilmeli ve bir kimlik ile sınıf arasındaki farkı ve her birine stilin nasıl uygulanacağını bilmelisiniz.

Yukarıda başınızı kaşıyorsanız endişelenmeyin. HTML ve CSS ile ilgili en iyi şeylerden biri, gerçekten, gerçekten kolay olmasıdır. Aslında, MakeUseOf inanılmaz bir XHTML kılavuzu Konuşmayı öğrenin "İnternet": xHTML RehberinizXHTML dünyasına hoş geldiniz - Genişletilebilir Köprü Metni Biçimlendirme Dili - herkesin birçok farklı işlevle web sayfaları oluşturmasına izin veren bir biçimlendirme dili. İnternetin ana dili. Daha fazla oku bu da sizi gerçekten hızlı bir şekilde hızlandıracak.

Bu kılavuzu okuduktan sonra aşağıdaki makalelere de göz atmak isteyebilirsiniz:

• Kalite Kodlama Örneklerine Sahip 8 Web Sitesi Kaliteli HTML Kodlama Örnekleri İçin 8 En İyi Web Sitesiİyi tasarlanmış ve kullanışlı HTML kodlama örnekleri ve öğreticiler sunan bazı harika web siteleri vardır. İşte sekiz favorimiz. Daha fazla oku
• Harika Web Tasarımcılarını Takip Eden 6 Blog Takip Edilecek 6 En İyi Web Tasarım Blog'u Daha fazla oku

Ayrıca modern bir metin düzenleyicisine ve tarayıcıya da ihtiyacınız olacak. Internet Explorer'ın IE 9'dan daha eski herhangi bir sürümü ve Safari, Chrome ve Firefox, HTML5'in bir parçası olan ve bunu izlemenizi engelleyebilecek birçok özellikle mücadele edecek kılavuz.

Sonuç olarak, modern bir tarayıcı indirmeniz önerilir. Google Chrome'u öneriyorum ve her örnekte kullanacağım.

Bunun ötesinde, ihtiyacınız olan tek şey öğrenme isteğidir. Oh, ve bir metin editörü.

1.2 Web Geliştirme İçin Metin Editörleri

Metin düzenleyiciniz, kodunuzu yazmak için kullanacağınız şeydir. Bir metin düzenleyicinin ne olduğunu merak ediyor olabilirsiniz.

Öncelikle bir kelime işlemci değil. Microsoft Word ve Apple’ın Pages gibi programlar web geliştirmeye tamamen uygun değildir. Çünkü HTML, CSS ve Javascript dosyalarınıza web tarayıcınızın okumasını zorlaştıran ek bilgiler eklerler.

Bir metin düzenleyici, karakterleri bir metin dosyasına vurur, başka bir şey değil. Bu, ekstra biçimlendirmesi olmayan ve seçtiğiniz herhangi bir uzantıyla kaydedilebilen dosyalar oluşturmanıza olanak tanır.

Bilgisayarınız zaten bir tane ile geliyor. Bir Windows PC kullanıyorsanız, Notepad muhtemelen yüklemiş olduğunuz metin editörüdür.

Mac bilgisayarlarda durum biraz farklıdır. OS X dört farklı metin editörüyle geliyor. Bunlara Vim, Emacs, Pico ve Nano denir. Ancak, Not Defteri'nden farklı olarak, hepsi terminalde çalışır.

Bu, web geliştirmede yeni olan ve yazılım geliştirmede yeni olan kişiler tarafından kullanılmaması gereken insanlar için biraz korkutucu. Bunları bu kılavuzda kullanmayacağız. Bununla birlikte, yazılım ve web geliştirmeye biraz daha güvendiğinizde, kesinlikle bir göz atmaya değer gayret Vim Metin Düzenleyicisine Şans Vermek İçin En Önemli 7 NedenYıllarca bir metin düzenleyicisini birbiri ardına denedim. Siz söyleyin, denedim. Bu editörlerin her birini iki aydan uzun bir süre birincil günlük editörüm olarak kullandım. Her nasılsa, ben ... Daha fazla oku ve Emacs. Her ikisi de güçlü metin editörleridir ve uzmanlaştığınızda size çok fazla zaman kazandırabilir.

Linux'ta varsayılan metin düzenleyicisi dağıtımlar arasında değişiklik gösterir. Ubuntu'da, muhtemelen gedit gedit: En Çok Dolu Düz Metin Editörlerinden [Linux ve Windows]Düz metin düzenleyicileri düşündüğünüzde, aklınıza gelebilecek ilk şey Windows 'Not Defteri uygulamasıdır. İş tanımının tam olarak ne yaptığını yapar - düz bir metin için düz özellikler ... Daha fazla oku , Not Defteri'nden çok farklı olmayan oldukça hoş bir metin editörüdür.

Ancak bu derste kodumuzu üç farklı araç kullanarak yazacağız.

İlk olarak Yüce Metin 2 Platformlar Arası Kod Düzenleme Gereksinimleriniz için Yüce Metin 2'yi deneyinSublime Text 2, yakın zamanda duyduğum bir platformlar arası kod editörüdür ve beta etiketine rağmen gerçekten etkilendiğimi söylemeliyim. Bir kuruş ödemeden tam uygulamayı indirebilirsiniz ... Daha fazla oku . Dürüst olmak gerekirse bu son derece yeterli tavsiye edemez. Yeni bir geliştirici için hayatı kolaylaştıran her şeyle birlikte gelir. İlk olarak, belirli kısımları renklendirerek kodunuzun okunmasını kolaylaştıracaktır. İkincisi, dosyalar arasında kolayca geçiş yapmanızı ve dosyaların tüm projelerini yönetmenizi sağlar. Dosyalar arasında geçiş yapmak ve birden çok kod parçasını anında düzenlemek için idealdir.

Üçüncüsü Javascript konsolu Chrome Geliştirici Araçları veya Firebug ile Web Sitesi Sorunlarını AnlamaŞimdiye kadar jQuery öğreticilerimi takip ettiyseniz, bazı kod sorunlarıyla zaten karşılaşmış olabilirsiniz ve bunları nasıl çözeceğinizi bilmiyor olabilirsiniz. İşlevsel olmayan bir kod parçasıyla karşılaştığında, çok ... Daha fazla oku Google Chrome'da yerleşiktir. Bu, Javascript yazmamızı ve hemen çalıştığını görmemizi sağlar ve temel programlama kavramlarını açıklamak için kullanılacaktır.

İkincisi Codepen.io adlı bir web sitesidir. Bu olağanüstü web sitesi, HTML, CSS ve Javascript'i tarayıcıda kodlamanıza izin verir ve kullanımı ücretsizdir. Ayrıca değişikliklerinizi anında görmenizi sağlar.

2. Anlamsal İşaretleme

Bu bölümde, Anlamsal İşaretleme ve kodunu içeriğine göre nasıl düzenleyeceğiniz hakkında bilgi edineceksiniz.

Yakın zamana kadar, HTML kodu genellikle

Bu işe yaradı, ancak iyileştirme için yer vardı. İle ilgili sorun

Anlamsal işaretleme HTML5'teki yeni bir özelliktir. "Div" etiketiyle aynı şekilde çalışan, ancak bir sayfanın ortak bölümlerini etiketlemek için kullanılan yeni etiketler getirir.

Peki, nasıl çalışırlar? Aşağıdaki kodu düşünün.

Bu kod parçasında bir gezinme çubuğu, bir başlık ve bir listemiz var. Bu, düşündüğünüzde devam etmeniz muhtemel çoğu web sitesinden çok farklı değildir.

MakeUseOf ile ilgili bir makaleye göz atalım. Sayfanın tamamen diğer makalelere gitmek için ayrılmış bir kısmı olduğunu fark edeceksiniz. Ayrıca, sayfanın makale oluşturan kelimeleri içeren başka bir bölümünün olduğunu da fark edeceksiniz. Sayfanın üst kısmına doğru, MakeUseOf logosunu ve diğer bazı bağlantıları içeren bir başlık göreceksiniz.

Bunu düşündüğünüzde, birçok web sitesi bu sözleşmeleri izler. Çoğu web sitesinin navigasyon için ayrılmış bir bölümü vardır. Genellikle bir içerik gövdesi vardır. Büyük olasılıkla bir başlıkları var.

Anlamsal etiketler, bir web sitesinin çoğu web sitesinde yaygın olarak bulunan bölümlerini tanımlamanızı sağlayan etiketlerdir. Sayfaya hiçbir şey eklemezler, ancak etiketleri içeriklerine göre gruplandırmanıza ve bu gruplara stil uygulamanıza izin verir.

Yani, daha önce sahip olduğumuz kodu hatırlıyor musunuz? Buna biraz Anlamsal işaretleme eklenmiş olarak bakalım.

Gördüğünüz gibi, kodu okumak çok daha kolay. Hangi parçaların hangileri olduğunu biliyorsunuz ve belirsizlik yok. Bu önemlidir, çünkü iyi ve temiz kod yazmayı kolaylaştırır. Hiç profesyonel bir web tasarımcısı olmaya karar verirseniz, bu her şeyden önce olur - ürettiğiniz işi kimin okuyacağını asla bilemezsiniz.

Şimdi daha anlamsal işaretleme etiketlerine bakalım.

2.1 Bölüm

Bölüm gerçekten kullanışlı bir etiket. Başlık veya başlık ile işaretlenmiş büyük bilgi ve içerik alanlarını yakalamak için kullanılır. Bunu bir kitaptaki bir bölüm gibi düşünün. Bir bölümün bir başlığı vardır ve ayrıca resimler, diyagramlar, grafikler ve kelimeler içerebilir. Tüm bunları içermek için bir bölüm etiketi kullanılır.

2.2 Makale

Makale etiketi kulağa benzediği için kullanılır; Blog yazısı veya haber öyküsü gibi içerikler içerir. Bu içerik blogun geri kalanından ayrılabilmeli ve yine de tutarlı bir anlam ifade etmelidir.

2.3 Kenara

Bu etiket, web sayfasının ayrılmaz bir parçası olmayan ancak bununla ilgili içerik için ayrılmıştır. Bu, bir haber ya da bir blogdaki bir kullanıcının biyografisi ile ilgili bir grup gerçek olabilir.

2.4 Üstbilgi

Birçok web sayfasında, sayfanın üstünde bir logo, siteyle ilgili bazı bilgiler ve belki de bazı bağlantılar içeren bir çubuk bulunur. Anlamsal işaretlemede, tüm bunları içermek için bir Başlık etiketi kullanırsınız.

2.5 Gezinme

Bu öğe web sitenizin gezinme kısmı için ayrılmıştır. Bu, diğer web sitelerine veya web sitesindeki diğer sayfalara bağlantılar içerir. MakeUseOf bağlamında, bu sayfanın başlığın altındaki kısmı olabilir.

2.6 Altbilgi

Bu etiket, sayfanın alt kısmı için ayrılmıştır. Burada, bazı iletişim bilgilerini, telif hakkı bilgilerini, bir haritayı veya "benimle ilgili" sayfanıza bazı bağlantılar koyabilirsiniz.

2.7 Kendinizi Test Edin

• Anlamsal İşaretleme nedir ve ne için kullanılır?
• Bir web sayfası hazırlıyorum ve benimle ilgili bir biyografi içeren bir anlamsal etiket kullanmak istiyorum. Hangisini kullanacağım?

3. Formlar

Biraz web tasarımı yaptıysanız, muhtemelen HTML'de basit bir formun nasıl oluşturulacağını biliyorsunuzdur. Gerçekten zekiyseniz, muhtemelen formunuzdan aldığınız bilgileri nasıl alacağınızı ve onunla nasıl bir şeyler yapacağınızı biliyorsunuz, böyle bir veritabanına koyun.

Formlar çok önemlidir. İnternette yaptığımız şeylerin çoğunun temelidir. Favori sosyal ağınızda bir durum güncellemesi oluşturduğunuzda, Amazon'dan bir şey satın aldığınızda veya bir e-posta gönderdiğinizde, muhtemelen bir HTML formu kullanmış olursunuz.

Muhtemelen bilmediğiniz şey, HTML5'te form oluşturma şeklimizin kökten değiştiğidir. Ayrıca önemli ölçüde daha iyi. Bu bölümde, şimdi sadece düz eski biçimlendirme ile yapabileceğiniz bazı harika şeylere bakacağız.

HTML5'te form yazmanın yeni yolu hakkında bu kadar harika olan şey nedir? Öncelikle, yalnızca formun işaretlemesini değiştirerek, gönderebilmek için bazı alanların doldurulması gerektiğinden emin olabilirsiniz. Buna ek olarak, bunu yapmak için artık JavaScript veya PHP dağları yazmak zorunda değilsiniz. Son derece kolay.

İkinci olarak, kullanıcılarınızın formunuza yalnızca belirli türde bilgiler gönderebilmesini sağlayabilirsiniz. Diyelim ki posta listeniz için bir web siteniz var ve yalnızca kişilerin gerçek e-posta adresleri gönderebilmelerini mi istiyorsunuz? Bunu sadece HTML5 kullanarak yapabilirsiniz. Gerçekten inanılmaz derecede güçlü.

Üçüncü olarak, belirli alanlara yer tutucu vererek formlarınızın daha iyi görünmesini sağlayabilirsiniz. Bu, kullanıcılarınıza bir form için ne beklediğinize ilişkin bir örnek gösterebileceğiniz için onları daha sezgisel hale getirecektir.

3.1 Bir Formun Geliştirilmesi

Şimdi bir forma bakalım ve nasıl daha iyi hale getirebileceğimizi görelim.

Bu form oldukça basit. Bir ad, bir e-posta ve favori bir renk alır ve kullanıcının bunu göndermesine izin verir. İçinde hangi bilgilerin bulunduğuna dair bir doğrulama içermez ve kullanıcıların bu formu bazı boş alanlarla göndermelerini engelleyen hiçbir şey yoktur. Tüm bunları değiştirelim.

Dolayısıyla, yapmak isteyeceğimiz ilk şey, e-posta alanının yalnızca bir e-posta almasını sağlamaktır. Her türlü gizli Regex kodu oluşturmanız gerekeceğinden, bu gerçekten oldukça zor bir işti. Artık değil. Yalnızca giriş türünü "metin" ten "e-posta" ya değiştirmeniz yeterlidir. Bu formu anlamsız bir şekilde göndermeye çalıştığınızda, bir e-posta gönderdiğinizden şikayet eder ve ısrar eder.

3.2 Giriş Türleri ve Modelleri

Gereksinim duyabileceğiniz başka giriş türleri de vardır. Bunlar telefon numaraları, web adresleri, arama formları ve hatta renk seçicileri içerir! HTML5 sürekli olarak geliştikçe, yakın gelecekte daha fazla girdi türü belirleyebileceğimiz anlamına gelir.

Ayrıca, bölgeye göre değişen telefon numaraları gibi şeyler için girişler için düzen belirtebilirsiniz. Bunlar, 'Normal İfadeler' adı verilen bir şey kullanılarak oluşturulur ve oldukça karmaşıktır, ancak ölçülemeyecek derecede güçlüdür.

Ayrıca, alanımızda bir e-posta örneği sunmak isteyeceğiz, bu nedenle kullanıcının ne sunması gerektiği konusunda bir belirsizlik yoktur. Bunu yapmak gerçekten çok kolay. Örnek bir e-posta adresiyle yeni bir "yer tutucu" özelliği oluşturun.

"Favori Renk" alanımızın zorunlu olduğundan emin olacağız. E-posta giriş etiketindeki son köşeli parantez (>) içinde, ‘zorunlu’ yazmanız yeterlidir. Bu kadar. Şimdi, formunuzu değersiz göndermeye çalıştığınızda, bir hata mesajı oluşturur.

Bu hata mesajlarıyla ilgili gerçekten inanılmaz olan şey, kullanıcının bunları yazmak veya kod oluşturmak için herhangi bir kod yazmak zorunda olmamasıdır. Bir alanı zorunlu kılmak için değiştirirsiniz ve sadece çalışır. Bununla birlikte, isterseniz özelleştirmek mümkündür.

Bu, HTML5'teki formların gücüne inanılmaz derecede kısa bir girişti. Daha fazlasını okumak isterseniz, bu bağlantıları ziyaret etmenizi öneririz.

Daha fazla okuma:

• CSS Hileleri - Anlamsal işaretleme yazalım
• HTML5 Doctor - Anlambilim Hakkında Konuşalım

3.3 Kendinizi Test Edin

Gelecek hafta doğum gününüz ve ne kadar pasta oluşturmanız gerektiğini bilmek için bir kayıt formu oluşturmak istiyorsunuz. Metin düzenleyicinizi açın ve aşağıdaki alanlarla bir form oluşturun.

• ad
• E
• Telefon numarası
• Alerjiler

Ad, e-posta ve telefon numarası alanlarının zorunlu olduğundan ve E-posta ve Telefon Numarası alanlarının "e-posta" ve "tel" giriş türleriyle ayarlandığından emin olun. 'Polen, yumurta, kiş' değeri ile alerji alanı için bir yer tutucu oluşturun.

Formla oynayın. Zorunlu alanları boş olarak göndermeyi ve telefon numarası alanına sayısal olmayan karakterler eklemeyi deneyin. E-posta alanına, e-posta adresi olmayan bir şey ekleyin. Ne oluyor?

4. medya

Bir web sayfasına video veya ses eklemenin tek yolunun Flash, Shockwave veya SilverLight gibi bir şey kullanmak olduğu bir zaman vardı.

Bu ideal değildi. İlk olarak, bu çerçevelerin hiçbiri mobil cihazlarda bu kadar iyi çalışmadı. Akıllı telefonlar ve tabletlerin modern dünyası için donanımlı değillerdi.

Ayrıca, tescilli biçimlerdi. Sonuç olarak, Linux ve OS X kullanıcıları platformları için mevcut olmadığı için oldukça ikinci sınıf bir deneyim yaşayabilir veya medya hizmetlerini tüketmeleri bile engellenebilir.

Sonunda yavaş olma eğilimi vardı. Güçsüz veya daha eski bir bilgisayarda olsaydınız, bu çerçeveleri kullanarak video izleme konusunda iyi bir deneyiminiz olmazdı. Flash bunun için özellikle kötü şöhretliydi.

4.1 HTML5 Video ve Sesi Nasıl Başartırır?

HTML5, web geliştiricilerinin web sayfalarına yalnızca birkaç satır kodla video ve ses eklemelerine izin vererek bunu değiştirdi. Mobil cihazlarda bir tedavi ve her modern web tarayıcısında çalışır.

Sonuç olarak, YouTube, Vimeo ve Netflix gibi büyük şirketler HTML5 devriminden yararlanıyor. Neden onlara katılmıyorsun?

4.2 Kodekler Hakkında Her Şey

Bu bölümde, web sayfalarınıza ses ve video eklemek için HTML5'in gücünü nasıl kullanacağınızı öğreneceksiniz.

İlk olarak, bir uyarı ile başlamam gerekecek. HTML5 videoyu her modern web tarayıcısında kullanabilmenize rağmen, her web tarayıcısında aynı şekilde çalışmaz. Her tarayıcı tarafından kullanılan codec bileşenleri değişiklik gösterir. Internet Explorer'da MP4 video kullanmakla sınırlısınız. Chrome biraz daha cömerttir ve WebM, MP4 ve Ogg Theora videosunu kullanmanızı sağlar. Opera biraz daha kısıtlayıcıdır ve yalnızca Theora ve WebM videolarını kullanmanızı sağlar.

Sonuç olarak, web sayfanıza nasıl video eklediğiniz konusunda biraz zeki olmanız gerekir. Şimdi nasıl çalıştığını görelim.

4.3 Video ile Başlatma

Başlamak için, biraz açılış ve kapanış oluşturmanız gerekecek

Videonuzun yüklenmesini beklerken, sitenizi ziyaret eden kişi videoyla ilgili bir resim görebilir. Bunu yapmak için video etiketlerinize bağlamak istediğiniz resmin değerine sahip bir 'poster' özelliği verin. Böyle görünmeli.

Yapmak isteyeceğimiz bir sonraki şey, bir yedek oluşturmak. Ne anlama geliyor? Diyelim ki, daha eski, daha az harika tarayıcılardan birini kullandınız. Bu eski tarayıcıların birçoğu HTML5 videoyu desteklemediğinden HTML5 video oynatamaz. Onlara, tarayıcılarını yükseltmek isteyeceklerini ve bunu yapana kadar videonuzu izleyemeyeceklerini bildiren bir mesaj bırakmak istersiniz.

Bunu yapmak için mesajınızı video etiketlerinizin içine yazmanız yeterlidir. Başka bir şey gerekmez. Bunu yaptıktan sonra, şuna benzeyen bir kod bırakacaksınız.

Şimdi biraz video ekleyelim. Bunu Google Chrome'da test edeceğim, bu yüzden bir MP4 filmine bağlayacağım. Bunu yapmak için, bir Kaynak etiketi oluşturuyorum ve buna, eklemek istediğim videonun bir değerine sahip olan bir src özniteliği veriyorum.

Sayfam artık web tarayıcımda açılmaya hazır. Gerçekten çok büyük bir filmle bağlantı kurdum ve bunun sonucunda açıldığında sadece posteri görebiliyorum.

4.4 Ses Ekleme

Ses, web sayfanıza, videoyu sayfamıza nasıl eklediğimizi anımsatan bir şekilde eklenebilir.

İlk olarak, bazı ses etiketleri oluşturur. Bu ses etiketleri bir "kontroller" özelliği içerir. Bu, sayfayı ziyaret eden kullanıcıya çalınan sesi duraklatma, çalma ve hızlı ileri alma olanağı verir.

Ardından, bağlamak istediğiniz MP3 dosyasına bir kaynak etiketi eklersiniz. Codec uyumluluğu konusunda endişelenmenize gerek yok. En son web tarayıcıları MP3 seslerini çalma özelliğine sahiptir, ancak her ne olursa olsun bir '.ogg' ve '.wav' dosyası da dahil etmek iyi bir uygulamadır.

Son olarak, eski tarayıcılar için bir yedek oluşturabilirsiniz. Bu, videonuz için yedek oluşturduğunuz şekilde yapılır.

Sonuç biraz buna benzer.

Bunu web tarayıcınızda açtığınızda, bunun gibi görünmesi gerekir.

4.5 Kendinizi Test Edin

• Video etiketlerinizde poster bulundurmanın amacı nedir?
• Internet Explorer'da hangi codec bileşenlerini kullanamazsınız?
• Biraz ses duraklatmak isteseydim, ‘ses’ etiketinize hangi özelliği eklersiniz?

Daha fazla okuma:

• HTML5 Rocks Videosu

5. CSS3 Dönüşümleri ve Animasyonları

CSS geleneksel olarak web sayfasının düzeni ve tasarımı CSS Öğrenmenin ve Tek Başına CSS Büyücüsü Olmanın 5 AdımıCSS, web sayfalarının son on yılda gördüğü en önemli değişikliktir ve stil ile içeriğin ayrılmasına yol açtı. Modern bir şekilde, XHTML semantik yapıyı tanımlar ... Daha fazla oku . Bu hala doğrudur, ancak en son yinelemesinde, öğelerin ve görüntülerin animasyonlarını ve dönüşümlerini işleme yeteneği kazanmıştır.

İnsanlar dijital bir saat oluşturmaktan tam bir Pong oyunu yazmaya kadar CSS3 ile inanılmaz şeyler yaptılar. Birisi Mad Mad'e giriş kredilerini yeniden oluşturmak için bile kullandı. Gerçekten güçlü bir teknolojidir ve uzmanlaştığında web sayfanıza inanılmaz bir işlevsellik eklemek için kullanılabilir.

Bu bölümde size bir özet vereceğim CSS3'e Giriş Online CSS Öğrenmek için En İyi 5 Site Daha fazla oku ve sayfanıza nasıl şaşırtıcı efektler ekleyeceğinizi gösterir.

İlk olarak, codepen.io'ya gidin ve yeni bir kalem oluşturun. Bunu, bu bölüm boyunca çalışma alanımız olarak kullanacağız.

Basit olarak başlayacağız ve üzerine geldiğinde görüntüyü 3 derece döndüren basit bir görüntü dönüşümü oluşturacağız. Her şeyden önce, bir div etiketi oluşturun ve ona bir kimlik verin. Aşağıdaki örnekte, ona bir "muo" kimliği verdim.

5.1 CSS Hover Efektleri

Bu div'e, seçtiğiniz bir resmi ekleyin. MakeUseOf için logonun bir kopyasını ekledim.

Daha sonra bazı stil sayfası kuralları yazmanız gerekir. Aşağıdaki örnekte, resme yer açmak için üst ve sol kenar boşluğu oluşturdum. "#Muo: hover" ile başlayan meraklı görünümlü bir stil sayfası kuralı da ekledim. O nedir?

Bir stil sayfası kuralına, örneğin bir öğeye, kimliğe veya sınıfa ": fareyle üzerine gelindiğinde" eklediğinizde, fareniz öğeyi yönettiğinde tarayıcıya etkili bir şekilde bu stilini uygulamasını söylersiniz. Çok havalı, değil mi?

"#Muo: hover" kuralının içinde "-webkit-transform: rotate (3deg)" yazan bir satır var. Tahmin ettiğiniz gibi, bu tarayıcıya bu div öğesini üç derece döndürmesini söylüyor.

Ancak, bu etiketin yalnızca Chrome ve Safari'de çalıştığını belirtmek gerekir. Kodunuzun Firefox veya Internet Explorer 9 ve sonraki sürümlerinde çalışmasını istiyorsanız, CSS dosyanızı aşağıdaki satırları içerecek şekilde değiştirmek istersiniz.

Şimdi, görüntünün üzerine geldiğinizde şöyle görünür:

5.2 Görüntüleri Yeniden Boyutlandırmak için CSS3'ü Kullanma

Öyleyse neden orada durmalıyım? Bir görüntüyü büyütmek veya daraltmak için ‘dönüşüm’ yöntemini de kullanabileceğinizi biliyor muydunuz? CSS dosyamızı aşağıdaki satırları içerecek şekilde değiştirelim.

Gördüğünüz gibi, şimdi yeni bir dönüşüm kuralı ekledik, ancak bu sefer "ölçek" adı verilen bir şey yapmasını söylüyoruz. Bu, görüntünün boyutunu artırmanın gerçekten güzel bir yoludur. İki parametre alır (bu parantezler arasında gördüğünüz sayılar) ve öğenin yüksekliğini ve genişliğini artırdığınız miktarı temsil eder.

Koddan da görebileceğiniz gibi, MakeUseOf div logosunun boyutunu% 50 artıracağım. Üzerine gelip bu işleri test edebilirsiniz. Artık "MakeUseOf" logosunun artık çok daha geniş olduğunu göreceksiniz.

Bu, CSS3 dönüşümlerine çok nazik bir girişti. CSS3 gerçekten çok yeni olmasına rağmen, şimdi onunla çok ilginç manipülasyonlar yapabileceğinizi görebilirsiniz.

5.3 Kendinizi Test Edin

• Fareyle üzerine geldiğinizde bir öğeye nasıl stil uygularız?
• CSS3 kullanarak bir görüntüyü nasıl döndürürsünüz?
• CSS3 kullanarak bir görüntüyü nasıl ölçeklendirirsiniz?
• Dönüşüm yönteminizi ‘translate (50px, 50px)’ geçerseniz ne olur?

Daha fazla okuma:

HTML5 Kayalıkları - Sunum

6. Sadece Yeterli Javascript

Web tarayıcınızda komut dosyası kullanmak istiyorsanız, JavaScript JavaScript Nedir ve Nasıl Çalışır? [Açıklanan Teknoloji] Daha fazla oku . Ne yazık ki bunun iki yolu yok. Bu bir çok hayranı olan dil Geliştiriciler İçin 5 Kapsamlı JavaScript Kod Kütüphanesi Seçeneği Daha fazla oku ve birçok detraktör de. Diller ilerledikçe birçok siğil vardır. Dil hakkında en dikkate değer kitaba ‘Javascript: İyi Parçalar’ denmesinin bir nedeni vardır.

Tek bir bölümde Javascript'i nasıl kullanacağınızı öğretmek imkansız olacaktır. Buradaki amaç bu değil. Amaç, çizim ve animasyon yapmak için Canvas adlı bir teknolojiyi kullanmakla ilgili bir sonraki bölümü anlayabilmeniz için yeterli Javascript öğretmektir.

6.1 Konsola Erişim

Bunu yapmak için, Google Chrome'un her kopyasında yerleşik olan Javascript konsolunu kullanacağız. Buna erişmek için herhangi bir web sayfasını sağ tıklayıp Element Öğeyi Denetle ’düğmesine basabilirsiniz. Ardından "Konsol" u tıklayın. Bunu görmelisin.

Herhangi bir tomurcuklanan geliştiricinin yazdığı ilk programın 'Merhaba Dünya' programı olması gelenekseldir. Bu, 'Merhaba Dünya' ifadesini basan basit bir programdır, başka bir şey değil. Konsolunuza ‘console.log (“ Merhaba dünya! ”); Yazın.

6.2 İlk Programınız

Peki, tam olarak ne yaptık? Öncelikle, "console.log" adı verilen bir şey çağırdık. Bu, bilgisayara söylediğiniz her şeyi yazdıran yerleşik bir kod parçasıdır. Daha sonra bazı parantezler ekledik ve "Merhaba Dünya" çift tırnak içine aldık. Buna 'geçme argümanları' denir ve geçtiğimiz argüman türüne dize denir. Harfleri ve özel karakterleri içeren bir şey yapmak istediğinizde, tek tırnak kullanmanız yeterlidir. Ancak, sayıları kullanarak herhangi bir şey yapmak istiyorsanız, aşağıda görüldüğü gibi genellikle tırnak işareti kullanmanıza gerek yoktur.

6.3 JavaScript'teki Değişkenler

Ayrıca değişkenleri "console.log" a da iletebilirsiniz. Değişkenler kulağa karmaşık geliyor, ama gerçekte hepsi bilgi yığınları koymak için bir alan. Bunlar genellikle rakam veya harflerdir. Bunu yapmak için, bir değişkeni "var" anahtar kelimesini kullanarak bildirir, ona bir ad verir ve ardından eşittir işaretiyle ona bir değer verirsiniz. Bu yüzden, "merhaba" adlı bir değişken oluşturacağım ve sonra ona "Merhaba Dünya!" Değerini vereceğim. Daha sonra bunu console.log dosyasına geçireceğim.

Tırnak işaretlerini kullanarak console.log'a nasıl "merhaba" iletmediğime dikkat edin. Çünkü konsola "merhaba" değil "merhaba" içeriğini yazdırmak istedim.

6.4 İşlevler Ne Yapar?

Aynı kod parçasını tekrar tekrar yazmak biraz sıkıcı olabilir, bu yüzden fonksiyonları yazıyoruz. Fonksiyonlar düşündüğünüzden daha kolaydır. Tüm bunlar, aynı kodu tekrar yazmadan tekrar kullanabileceğimiz kod parçalarıdır. Aşağıda, ‘sup’ adlı bir işlev oluşturduk ve daha sonra ekrana kaydedilen parantez kullanarak bir argüman aktarıyoruz. Konsola "sup" ("Merhaba dünya!"); "Göndererek" sup "adını veriyoruz.

6.5 Bir Eylemi ‘İçin’ Döngüsüyle Tekrarlama

Aynı işlemi belirli sayıda yapmak istediğinizi varsayalım. Bu yüzden bir ‘for’ döngüsü kullanıyoruz. İlk başta korkutucu görünüyorlar, ancak anladıktan sonra bunu yapmak çok kolay. ‘For ()’ yazarak işe başlıyorsunuz.

Bu parantezlerde kaç kez bir eylem gerçekleştirdiğimizi sayan bir değişken oluşturmak isteyeceğiz. Böylece, var için (var i = 0;) ’gibi görünen bir şey elde ederiz.

Daha sonra bir koşula uymadığımı kontrol etmek istiyoruz. Bu durumda, 10'dan az olduğunu görmek istiyoruz. Noktalı virgülden sonra "i <10" yazarız. Döngümüz şimdi şöyle görünüyor: ‘for (var i = 0; i <10;).

Eğer i 10'dan küçükse, bunu tek tek eklemek ve sonra bir şey yapmak istiyoruz. Bu yüzden ‘i = i + 1’ koyuyoruz. Döngümüz neredeyse bitti: ‘for (var i = 0; i <10; i = i + 1) ’. Son bölümün noktalı virgülün nasıl olmadığına dikkat edin.

Bundan sonra, bir eylem yapmak isteyeceğiz. Bu nedenle, son parantezlerden sonra, bazı süslü parantezler yazıyoruz ve aralarında konsol yapacağız. İ'nin değerini log. Bu, dokuza kadar sayan bir sayaç oluşturacaktır.

Bakacağımız son iki programlama yapısı ‘if’ ifadeleri ve ‘while’ döngüleridir.

6.6 İfadeler

"İf" ifadesi, belirli bir ölçüt karşılandığında eylem gerçekleştirir. İnşaattaki 'for' döngülerine benzerler ve aşağıdaki gibi çalışırlar. "Çizburger" adı verilen bir değişkeniniz olduğunu ve "lezzetli" değerine sahip olup olmadığını görmek istediğinizi varsayalım. Eğer öyleyse, ekrana 'yum, çizburger' kaydetmek istiyorsunuz. Bunu yapmak için böyle bir şey yazardınız.

"İf (çizburger ==" lezzetli ")" yazdığımı not et. Eşitliği kontrol etmek için çift veya üçlü eşittir ve bir değer atamak için tek eşittir.

6.7 Döngüler

Son olarak, bir 'while' döngüsü bir ölçüt karşılanırken bir eylem yürütür. Bu yüzden 'yum, cheeseburgers' giriş yapmak istediğinizi düşünün, çizburgerler de lezzetli. Bunu yapmak için aşağıdakileri yazarsınız.

Bunun sonsuz bir döngüye gireceğini belirtmek gerekir ve değişmesi muhtemel olmayan bir değer üzerinde işlem yapmaktan kaçınmalısınız. Bu, tarayıcınızın kilitlenmesine veya kodunuzun çalışmamasına neden olabilir.

Daha önce de belirttiğim gibi, bu Javascript'teki programlama yapılarına çok kısa bir girişti. Büyük de olsa bu büyüleyici konu hakkında daha fazla bilgi edinmeniz teşvik edilir.

6.8 Kendinizi test edin

• 30'dan geriye saymak istiyorum. Bunu yapacak bir 'for' döngüsü yazın.
• "Makeuseof" adlı bir değişken oluşturmak ve ona "awesome" değerini vermek istiyorum. Bu nasıl yapılır?
• Arandığında 'MakeUseOf Is Awesome' yazdıran bir işlev oluşturmak istiyorum. Bu işlevi yazın.

Daha fazla okuma:

• “Javascript: İyi Parçalar” ile Douglas Crockford
• MDN Javascript Rehberi

7. Yaratıcı Tuval

Canvas, Flash veya Silverlight kullanarak başvurmanıza gerek kalmadan resim çizmenizi ve animasyonlar oluşturmanızı sağlayan harika bir teknolojidir. İnsanlar bunu saç kurutma makinesi simülatörü ve çeşitli video oyunları da dahil olmak üzere tuhaf ve harika şeyler oluşturmak için kullandılar. Bu harika ve anlaşılmaz derecede büyük bir teknoloji parçası, bu derste size kısa bir giriş yapacağım.

Canvas'ın yalnızca modern web tarayıcılarında çalıştığını belirtmek gerekir. IE, Chrome veya Firefox'un eski bir sürümünü kullanıyorsanız, bu bölümü takip edemeyebilirsiniz. Bu durumda, bu eğiticiyi oluşturduğum web tarayıcısı olan Google Chrome'un en son sürümünü indirmeyi düşünmelisiniz.

7.1 Tuval Üzerine Başlarken

Her şeyden önce, web tarayıcınızı açmanız ve codepen.io'ya gitmeniz gerekecek. Yeni bir kalem oluşturun.

Şimdi, bir tuval öğesi ilan etmek zorunda kalacağız. İki açılış ve kapanış Canvas etiketi oluşturun. Onlarda, üç özellik geçmelisiniz. Bunlar, Canvas öğesinin genişliği ve yüksekliğiyle birlikte verdiğiniz kimliktir. Daha önce bazı video eklediğinizde olduğu gibi bir yedek mesaj eklemeniz gerekir.

Şimdi, ekrana bir şeyler çizecek bazı Javascript kodları yazmak isteyeceğiz. Temelden başlayıp basit bir kırmızı kare oluşturacağız.

Bir değişken oluşturacağız (buna ‘demo’ adını verdim), ardından tuval öğesini seçip bu değişkene atayacağız. Bunu yapmak için document.getElementByID () yöntemini kullanır ve seçmek istediğiniz öğenin kimliğini iletirsiniz.

Komut dosyamızdaki ikinci satır, ‘bağlam’ adı verilen başka bir değişken oluşturur ve ardından ‘demo.getContext (‘ 2d ’)’ öğesini çağırır. Bu, tarayıcıya 2 boyutlu bir resim üzerinde çalışacağımızı söyledi, sonra ekrana çizmek için ihtiyacımız olan gerekli işlevleri geçti.

Üçüncü ve dördüncü çizgiler ekrana çizim yapan çizgilerdir. Üçüncü satır bir dikdörtgeni kırmızı renkle doldururken, dördüncü satır onu konumlandıran ve uzunluğunu ve genişliğini tanımlayan fillRect'i çağırır.

Bu etkileyici değil. Biraz daha gelişmiş bir şey yapalım ve MakeUseOf'u yepyeni bir logo oluşturmak için Javascript ve Canvas'ın büyüsünü kullanalım.

7.2 Şekiller ve Metin

Dördüncü satırımızı silelim ve dikdörtgeni sol üst köşeye yerleştiren ve tuvalimizin uzunluğu boyunca uzatan bir satırla değiştirelim.

İlk iki argüman şeklin x ve y eksenini nereye yerleştirmek istediğimizi tanımlar. Şimdilik bu ikisini "0" olarak ayarlayalım. Üçüncü argüman şeklin genişliğini ifade eder. Bunu "200" olarak ayarlayalım ve dördüncü argümanı "50" olarak bırakalım. Şimdi buna benzeyen bir şeye sahip olmalısınız.

Bu harika bir başlangıç, ancak MakeUseOf'tan hiç bahsetmiyor. Yani, biraz metin ekleyeceğiz. "Makeuseof" içeren bir değişken oluşturalım ve bu değişkene "MakeUseOf" adını verelim.

Daha sonra başka bir bağlam değişkeni oluşturmak isteyeceğiz. Buna "bağlam2" deyin ve 2d olduğundan emin olun. Metnimizi yazmak için kullanacağımız budur.

Metnimizin mavi renklendirilmesini ve kırmızı karemizin üzerine yerleşmesini isteyeceğiz. Yani, daha önce olduğu gibi, ona bir 'mavi' dolgusu vermek isteyeceğiz. Şimdi metnimizin özelliklerini seçeceğiz. 20 piksel genişliğinde, kalın biçimlendirilmiş ve Arial yazı tipi kullanmasını istiyoruz. Bağlam2'de font'u çağırırız ve buna "kalın 20 piksel arial" değerini atarız.

Bu metnin önceki kırmızı kutumuzu kaplamasını istediğimizden, bağlam2'de ‘textBaseLine’ ifadesini çağırmalı ve en üste bir değer vermeliyiz. Bu tamamlandıktan sonra, context2 üzerinde ‘fillText’ diyoruz ve metnimizi ve metnimizi yerleştirmeyi düşündüğümüz x ve y koordinatlarını içeren değişkeni iletiyoruz. Kodumuzun sonucu böyle bir şeydir.

Kod tarafından üretilen görüntü şöyle görünür.

7.3 Tuval Üzerine Bir Söz

Bu Canvas için inanılmaz temel bir giriş olsa da, aynı zamanda inanılmaz derecede büyük bir teknoloji ve önyükleme için inanılmaz derecede güçlü bir teknoloji olduğunu anlamalısınız. Bu kılavuz, bu yeni teknolojiyi kullanarak grafik yapmaya giriş niteliğindedir.

7.4 Kendinizi Test Edin

• Oluşturduğunuz resme aşağıdaki sloganı ekleyin: “Şimdiye kadarki en iyi teknoloji sitesi!”
• On yineleme için çalışan bir "for" döngüsü oluşturun. Çiziminizi bir seferde bir piksel olan tuvalin altına getirip getiremeyeceğinize bakın.
• Çiziminizi bir işleve sarın. Eğer aramazsan ne olur?

Daha fazla okuma:

• HTML5 Rocks - Tuvali web uygulamalarınıza entegre etme.
• Treehouse - Tuval ile Beraberlik nasıl

8. Sıradaki nerede?

HTML5'te bulunan yeni teknolojilere ilişkin inanılmaz kısa kılavuzumu okuduğunuz için teşekkür ederiz. HTML5'in geleceğin teknolojisi olduğu yadsınamaz. Yazılması kolay ve ölçünün ötesinde güçlü olduğu için çoğu teknoloji tarafından benimseniyor. İnsanlar onunla her zaman inanılmaz şeyler yapıyorlar ve gelecekte bu insanlardan biri olacağınızdan şüphem yok. HTML5'in vahşi ve harika dünyasına yolculuğunuzun bir parçası olmaktan onur duyuyorum.

Öğrenmeye devam etmenizi rica ediyorum. Kodlamaya devam edin. Seviye atlamaya ve geliştirmeye devam edin ve hiçbir zaman harika ürünler yaratmak için bu kısa kılavuzda sunulan teknolojileri kullanacaksınız.