Kaba kaynaklar html. HTML5 Tarifleri: Somut örneklerle HTML5 kodlamasına dalın. Komite çalışmalarının dış taraflarla iletişimi ve belgelerin saklanması alanındaki politika

Dünyada kim hepsinden daha tatlı, allık ve çekici? Kaba bir şey düşünmeyin, sadece biçimlendirme dilinin yeni bir sürümünü kastediyorum - HTML5. Modern tarayıcıların en son sürümleri bazı HTML5 özelliklerini zaten anlıyor, bu da onu projelerinizde kullanmaya başlamanın zamanı geldiği anlamına geliyor.

HTML5 nedir?

İlk bakışta HTML5, biçimlendirme dilinin yalnızca yeni bir sürümüdür. Ancak şimdi, bu terim farklı bir şey ifade ediyor. Gerçekten modern web uygulamaları geliştirmek için vazgeçilmez olduğundan, aynı CSS3'ten bahsetmeden HTML5'i düşünmek tek kelimeyle saçma. JavaScript'i unutmamalıyız. HTML5 standardında açıklanan zengin API'ye bir çağrı uygular. Yukarıdakilerin hepsini özetleyen bir tanım kendini gösteriyor: HTML5, web uygulamaları geliştirmek için kullanılan bir dizi modern teknolojiler / standartlar (JS, HTML5, CSS3 vb.).

Bir damla tarih

HTML5 birdenbire ortaya çıkmadı. Gelişimi 2007 yılında başladı. Geliştirme sürecinden W3C konsorsiyumundan özel olarak oluşturulmuş bir grup sorumluydu. Ancak HTML5'in birçok özelliği, Web Uygulaması 1.0 standardının bir parçası olarak icat edildi ve 2004'ten beri üzerinde çalışılıyor. Yani gerçekte, HTML5 ilk bakışta göründüğü kadar genç bir teknoloji değildir.

HTML5 spesifikasyonunun ilk taslak versiyonu 22 Ocak 2008'de kullanıma sunuldu. Üç yıl geçti, ancak şartnamenin son versiyonu hala hazır değil ve önümüzdeki bir veya iki yıl içinde zamanında olması muhtemel değil. Bu üzücü an, geliştiricileri projelerinde yeni özellikleri dikkatli bir şekilde uygulamaya zorlar. Spesifikasyon kolayca değişebilir ve tüm modern tarayıcılar (FireFox 4, Google Chrome 10, IE9, Opera 11) yeni özellikleri tam olarak desteklemez.

Sağlıklı Tarifler

HTML5'in teorisi hakkında çok uzun süre konuşabilirsiniz, ancak değerlendirme listemizin adı "Kodlama", bu nedenle standardın olanaklarını pratikte hissetmenizi öneririm. Süper orijinal tarifler yaratmaya zahmet etmedim, ancak gerçekten yararlı olan ve şu anda sitelerinizde kullanabileceğiniz ve kullanmanız gereken şeylerden örnekler vermeye karar verdim. O zaman hadi gidelim.

1 numaralı tarif: Sürükle ve Bırak'ı sonuna kadar açın

Güzel şeylerden biri (muhtemelen bu kadar çok enerji içeceği kullanmamalıydınız, çünkü "çip" kelimesi olmalı - ed.) HTML5, Dosya API'sini ve Sürükle ve Bırak API'sini kullanma yeteneğiydi.

Onların yardımıyla, kullanıcının bilgisayarından sunucuya güzel bir dosya aktarımı düzenleyebilirsiniz. Daha önce dosyaları göndermek için her zaman "Gözat" düğmesi olan bir alan olduğunu hatırlıyor musunuz? Bastıktan sonra, aktarım için bir dosya seçmenin gerekli olduğu standart bir dosya seçimi iletişim kutusu belirdi. Bu yöntemi çağırmak uygun bir dile dönüşmez. Özellikle indirme kuyruğuna birden fazla dosya eklemek söz konusu olduğunda.

Kısa bir süre sonra, zanaatkarlar, daha fazla işlevsellik sağlayan, ancak ciddi bir dezavantajı olan - kurulu bir flaş ihtiyacı olan aplikatörleri flaş üzerinde şekillendirmeye başladılar. Ek olarak, her iki durumda da kullanıcının fareyi sayfaya sürükleyip bırakarak aktarılacak dosyaları ekleme yeteneği yoktu.

Ancak sistemde sürekli Sürükle Bırak teknolojisi kullanılmaktadır. Şahsen, her zaman sadece gerekli dosyaları seçmek ve fareyi hafifçe kaydırarak sayfaya atmak istemişimdir. Bu, standart bir iletişim kutusu kullanarak bir dosyayı taramaktan çok daha uygundur.

HTML5 kendi ayarlamalarını yaptı ve artık hiçbir şey bir dosyayı bir sayfaya aktarmak için tam teşekküllü bir Sürükle ve Bırak düzenlemenizi engellemiyor. Bu özelliği ilk uygulayanlar Gmail'deki Google çalışanlarıydı. gmyla kullanıyorsanız, muhtemelen dosyaları mektuba eklemek için sürükleyebileceğiniz bir alan fark etmişsinizdir. Şahsen ben bu işlevi aktif olarak kullanıyorum ve şimdi size aynısını projeniz için nasıl karıştıracağınızı göstereceğim. Projemiz üç dosyadan oluşacak: sample.html, style.css ve scripts.js. Elbette kendimizi bir html dosyasıyla sınırlayabilirdik, ancak o zaman kodun okunamaz olduğu ortaya çıkardı. HTML'yi JS veya CSS ile karıştırmanıza gerek yok. Her şeyi dosyalara bölmek ve ardından onlarla sakince çalışmak daha iyidir. Öncelikle uygulamamızın yapısını hazırlayalım. Bir sample.html dosyası oluşturun ve içine şunu yazın:

media="all" href="style.css" />

Dosyalarınızı buraya sürükleyin

JavaScript kodu yazmanın rahatlığı için jquery kitaplığını ekledim. Bundan sonra, gelecekteki html belgesinin yapısını açıkladı. Rezalet etmesi basit - kullanıcının dosyaları sürükleyip bırakması gereken alanı tanımlamamız gerekiyor. Yalnızca bir div kabına ihtiyaç duyar. Şimdi sayfayı bir tarayıcıda açarsanız, iyi bir şey görmezsiniz. Alanımızı görsel olarak görünür kılmak için CSS ile stillendirmemiz gerekiyor. style.css dosyasını açın ve içine aşağıdaki kodu yazın:

#kutu(
genişlik: 500 piksel
yükseklik: 300 piksel;
kenarlık: 2 piksel kesikli #000000;
arka plan rengi: #FCFFB2;
metin hizalama: merkez;
renk: #3D91FF;
yazı tipi boyutu: 2em
yazı tipi ailesi: Verdana, sans-serif;

moz-sınır yarıçapı: 8 piksel;
-webkit-sınır yarıçapı: 8 piksel;
}
# etiket (
konum: göreli;
üst: %2;
}

"Kutu" tanımlayıcısı, dosyaları almak için gelecekteki kapsayıcımızdır (kullanıcının belgeleri bu alana sürüklemesi gerekir). Kullanıcının kaçırmaması için alanı büyütüyorum ve çerçeveleme seçeneği olarak kesikli çizgileri seçiyorum - noktalı çizgiler. Düzenli noktalı çizgiler iyi görünmüyor, bu yüzden özelliklerin değerlerini hemen ayarlıyorum: -moz-border-radius ve -webkitborderradius. Artık oluşturulan sayfayı tarayıcıda açabilir ve genel görünümü değerlendirebilirsiniz.

Ancak, şimdi bir şeyi sürüklemeye çalışırsanız, ilginç bir şey olmayacak. Sürüklenen dosya basitçe bir web tarayıcısında açılır ve o kadar. Küçük bir JavaScript kodu, durumu düzeltmeye yardımcı olacaktır:

$(belge).ready(işlev() (

//olay işleyicileri ekle

Var mybox = document.getElementById("kutu")

Mybox.addEventListener("dragent", dragEnter, false);

Mybox.addEventListener("dragexit", dragExit, false);

Mybox.addEventListener("dragover", dragOver, false);

Mybox.addEventListener("bırak", bırak, yanlış);
});
fonksiyon dragEnter(evt) (

Evt.stopPropagation();

Evt.preventDefault();
}
fonksiyon dragExit(evt) (

Evt.stopPropagation();

Evt.preventDefault();
}
fonksiyon dragOver(evt) (

Evt.stopPropagation();

Evt.preventDefault();
}
fonksiyon düşüşü(evt) (

Evt.stopPropagation();

Evt.preventDefault();

Varfiles = evt.dataTransfer.files;

varcount = dosyalar.uzunluk;

Eğer (say > 0)

HandleFiles(dosyalar);
}
işlev tanıtıcıDosyalar(dosyalar) (

//ilk dosyayı al

//Birden fazla ile çalışmanız gerekiyorsa

//dosyalar, sonra burada bir arama düzenlemeniz gerekir

var dosya = dosyalar;

Document.getElementById("etiket").innerHTML =
"Yakalandı: " + dosya.adı;

varreader = yeni FileReader();

Reader.onprogress = handleReaderProgress;

Reader.readAsDataURL(dosya);
}
işlev tanıtıcıOkuyucuİlerleme(evt) (

If(evt.lengthComputable)(

(evt.loaded = evt.total) ise (

alert("Yükleniyor...");
}
}
}

İlk bakışta, kod hantal ve anlaşılmaz görünebilir, ancak JavaScript ve jQuery'ye en azından biraz aşina olanlar, neler olduğunu hemen anlamalıdır. En başta, oluşumu beni ilgilendiren olayları tanımlarım. Her biri için ayrı bir işlev tanımlıyorum. Örneğin, kullanıcı fare imlecini sürüklenmekte olan öğenin dışına hareket ettirdiğinde, dragExit olayı gerçekleşir. Kullanıcı bir dosyayı sürüklediyse, handleFiles() işlevi kontrolü ele alır.

İçinde kasıtlı olarak ilk dosyaya (dosyalara) atıfta bulunuyorum ve onunla çalışmaya başlıyorum. Lütfen kullanıcının aynı anda birkaç dosyayı sürükleyebileceğini unutmayın. Uygulamanız bu tür durumlarla başa çıkabiliyorsa, o zaman tüm dosyalar dizisinin bir listesini düzenleyeceğiz. handleFiles() işlevi, tüm eğlencenin gerçekleştiği yerdir.

İlk önce, kullanıcının etkin noktaya sürüklediği dosyanın adını etiket öğesinde ("Dosyalarınızı buraya sürükleyin" i hatırladınız mı?) Görüntülüyorum ve ardından FileReader () türünde bir nesne kullanarak okumaya başlıyorum. Bununla ilgili daha fazla bilgiyi şu makalede okuyabilirsiniz: html5rocks.com/tutorials/file/dndfiles . Her ihtimale karşı, FileReader() türünde bir nesne için bir onProgress olay işleyicisi tanımlıyorum. Bu olay, bir veri yığını her okunduğunda çağrılır. İşleyicinin kendisinde bir koşul belirledim: indirilen veri miktarı dosyanın boyutuna eşitse, okuma başarıyla tamamlandı ve mutlu bir mesaj görüntüleyebilirsiniz.

Tarif #2: Bira için, video izleyin, rock dinleyin

HTML5'in ortaya çıkmasından önce, web'de video izlemek her türlü flash oynatıcı kullanılarak gerçekleştiriliyordu. Bu, bir videoyu bu şekilde izlemenin sakıncalı olduğu anlamına gelmez. Yalnızca güvenlikle ilgili sorunlar var (son zamanlarda, Flash Player yalnızca güvenlik açıklarıyla dolup taşıyor) ve eklentinin kendisini yükleme ihtiyacı. HTML5 standardı, video ve ses içeriğini oynatmak için yerleşik yetenek olan zarif bir çözüm sunar.

Muhtemelen, birçok kişi zaten etiketlerden bahsettiğimi tahmin etmiştir.

Burada bir video olmalı. Bu metni görürseniz, tarayıcınız yeni standardı desteklemiyor demektir.

Etiket örneğinde

Ne için yararlı olabilir? Alternatif olarak, şirketinizin/projenizin logosunu bu tür bir resim olarak ekleyebilirsiniz. Etiket

3. Tarif: Şu anda neredesiniz (coğrafi konum belirleme API'sı)

Geolocation API - kullanıcının koordinatlarını belirlemek için bir programlama arayüzü. Elde edilen verilere dayanarak, örneğin Google Haritalar'da kullanıcının konumunu işaretlemek kolaydır. Bu özellik nerelerde kullanılabilir? Evet, birçok yer! Örneğin, popüler Twitter mikroblog hizmetinin geliştiricileri, Twitter istemcisinin web arayüzünde Geolocation API'sini kullanır. Kullanıcının konumu hakkında bilgi almasına izin verirse, o anda bulunduğu şehir tüm tweet'lerine eklenecektir.

Artık "GAPI konum bilgilerini nereden alıyor?" Sorusunun canınızı sıktığından hiç şüphem yok. Casus uyduların ve diğer Bond eşyalarının davaya dahil olduğunu düşünmeyin bile. Her şey çok daha yavan - analiz için bir bilgi paketi, IP adresi, en yakın Wi-Fi etkin noktaları, GPS (bir cihazınız varsa), GSM hücre kimliği vb. Yukarıda listelenen kaynaklardan yaklaşık koordinatlar elde etme teorisi ve uygulamasıyla ilgileniyorsanız, o zaman ][ dosyasını açmanızı ve teorik kısmı iyice analiz ettiği ve ayrıca bir genel bakış sunduğu Step'in bu konuyla ilgili makalesini bulmanızı tavsiye ederim. ilgili yazılımın Şimdi bir GAPI kullanma örneğine bakalım. Her şey son derece basit ve net:

Enlem: Bilinmeyen

Boylam: Bilinmeyen

Koordinatları almaya çalışmadan önce, tarayıcının GAPI'yi desteklediğinden emin olmanız gerekir. Coğrafi konum yöntemi doğru dönerse, o zaman her şey yolundadır ve koordinatları almayı deneyebilirsiniz. Bunu yapmak için gezgin nesnesinin getGurrentPosition yöntemini kullanıyoruz. Başarılı olursa, doğrudan belgeye gidecek koordinatları alacağız.

Tarif #4: Tarayıcıdaki Veritabanı

Web uygulamaları geliştirirken veritabanlarını kullanmaya alışkınız. MySQL, SQLite her programcının aşina olduğu ürünlerdir. HTML'nin beşinci sürümü bize başka bir hediye getiriyor - bağımsız bir SQLite veritabanı kullanma yeteneği. Durmak!

Görünüşe göre tüm veriler kullanıcının bilgisayarında saklanacak mı? Evet kesinlikle. Güvenli değil diye bağırmana gerek yok. Belirli projeler için bu özellik kullanışlı olabilir. Ne yazık ki, tüm tarayıcılar bu veritabanıyla çalışmanıza izin vermiyor.

Örneğin, IE9 ve FF4'ün henüz böyle bir fırsatı yok, bu nedenle çipi yalnızca Google Chrome'da pratikte tanıyabilirsiniz. Gerçek kod örneği vermeyeceğim, sadece genel çalışma prensibini göstereceğim:

this.db = openDatabase("xakep", "1.0", "test", 8192);
tx.executeSql("tablom yoksa oluştur" +
"checkins(id integer birincil anahtar artan, field_number_one string)",
, function() ( console.log("İstek başarıyla tamamlandı"); ));
);

Yukarıdaki örneğe daha yakından baktığınızda, genel olarak gömülü veritabanıyla çalışmanın normal SQLite ile tamamen aynı olduğunu fark edeceksiniz: veritabanını açıyoruz, sorgu metnini hazırlıyoruz ve çalıştırıyoruz.

HTML5.Kapatma()

Projelerinizde HTML5 kullanıp kullanmamak size kalmış. Bence şimdi tam zamanı. Profesyonel olarak web sitesi geliştirmeyle ilgileniyorsanız, HTML5 özelliklerini hemen şimdi gömmek için tembel olmayın. Elbette uyumluluğa dikkat etmeyi unutmayın - hem modern tarayıcılar hem de eski tarayıcılar için destek uygulayın. Bunun için ihtiyacınız olan her şeye sahipsiniz. Yavaşlamayın ve projelerinizi diğerlerinden ayırmaya çalışmayın. İyi şanlar!

Nasıl sigortalanır?

Bu makale boyunca, modern tarayıcıların şu anda çeşitli miktarlarda HTML5 özelliklerini desteklediğini söyledim. Bu yüzden dikkatli olmanız ve çok egzotik şeyler kullanmamaya çalışmanız gerekiyor. Hemen şu soru ortaya çıkıyor: "Belirli bir tarayıcının hangi HTML5 özelliklerini desteklediğini nereden biliyorsunuz?". Bunu yapmanın birkaç yolu var ama benim favorim küçük JavaScript kitaplığı Modernizr (modernizr.com).

Kitaplık tamamen ücretsiz olarak dağıtılır ve onu projenize bağladığınızda, tarayıcınızın desteklediği HTML5 özelliklerinin bir listesini hemen görüntüler. Bir kitaplığın işlevselliğini test etmek için onu hemen indirmeniz ve projenize bağlamanız gerekmez. Sadece kütüphanenin resmi web sitesine gitmeniz gerekiyor ve yürüteçinizin neyi destekleyip neyin desteklemediğini hemen göreceksiniz. Google Chrome ve Internet Explorer 9 kullanarak siteyi ziyaret etmenin ekran görüntülerine bakın. Şirketle ilgili iyi makalelere ve övgü dolu makalelere rağmen, Microsoft'un rpg'si açıkça Google Chrome'dan daha az özelliği destekliyor.

HTML5, Flash'ı taşıyacak

HTML5'in en ilginç özelliklerinden biri, animasyon oluşturma yeteneğidir. Bu, HTML5 ve CSS3'ü karıştırarak elde edilir.

Bu tür animasyonlar oldukça hoş görünür ve birçok durumda Flash'ın yerini alabilir. Çok yakında olmayacağını güvenle söyleyebilirim, çünkü artık Flash'ta ustalaşmak, anlaşılmaz HTML5/CSS3 kodunu (IMHO) anlamaktan daha kolaydır. Yine de, böyle bir özellik hakkında bilgi sahibi olmalısınız. Aşağıdaki bağlantıları incelemenizi ve animasyon olasılığını gösteren güzel demoları kendi gözlerinizle görmenizi şiddetle tavsiye ederim.

Canvas'ın özelliklerini gösteren hoş bir demo: feedtank.com/labs/html_canvas ;
Google'dan yerleşik bir arama çubuğuna sahip güzel bir 3B kutu: ;
Fareye bir kez tıklayın ve sayfa toplarla dolmaya başlayacaktır. Daha fazla tıklama - daha fazla top. Sayfayı ağzına kadar doldururken - keskin bir şekilde sürüklemeye çalışın. Çok komik görünüyor: mrdoob.com/projects/chromeexperiments/ball_pool ;
Sadece çeşitli kimyasal bileşikleri gösteren harika bir demo. Kesinlikle göz atmaya değer: alteredqualia.com/canvasmol ;
Hiç bir patolog gibi hissetmek ve insan vücudunun gizemlerini keşfetmek istediniz mi?

Cevabınız evet ise, bu bağlantı tam size göre. Google, WebGL, HTML5, CSS3 ve Flash teknolojilerinin karışımından harika bir demo yaptı. Kokteylin sonucu, iç organların yapısını görebileceğiniz 3 boyutlu bir insan vücudunu gösteren etkileşimli bir uygulama oldu. Onu ilk gördüğümde elimden bırakamadım.

Size yardımcı olmak için, bilmeniz gerekenleri size söyleyecek, sıkıştığınızda size yardımcı olacak ve becerilerinizi kısa sürede geliştirmenizi sağlayacak bir dizi kaynağı bir araya getirdik.

01. HTML Hile Sayfası

Bu inanılmaz derecede yararlı HTML hile sayfası, tüm HTML öğelerinin tam listesini, açıklamaları, kod örnekleri ve canlı ön izlemeleri içerir. Etiketleri alfabetik olarak veya kategoriye göre düzenleyebilir ve hatta daha sonra başvurmak üzere PDF olarak indirebilirsiniz.

02. CSS Hile Sayfası

CSS'ye yeni başlıyorsanız, yalnızca birçok etiketi ve teknik terimi hatırlamak son derece göz korkutucu olabilir. Yine de bunun sizi ertelemesine izin vermeyin; İhtiyacınız olan öğeleri hızlı bir şekilde bulmak için bu yardımcı hile sayfasını yer imlerine ekleyin veya yazdırın.

03. CSS Hileleri

2007'de kullanıma sunulduğunda, bu site tamamen CSS ile ilgiliydi. Şimdi biraz genişledi, ancak CSS ve HTML hakkında takılıp kalmanız için hala pek çok yararlı bilgi ve öğretici var. Kesinlikle görülmeye değer.

04. CSS Sihirbazı

CSS öğrenmesi kolay ama ustalaşması zor. Harry Roberts" CSS Sihirbazı, BEM metodolojisi ve yeniden düzenleme gibi (en zor kısımlardan olan) ölçeklenebilir ve bakımı yapılabilir CSS yazmanın en ince ayrıntılarına ilişkin en iyi makalelerden bazılarına sahiptir.

05. CodePen'in Yıllık En İyi Kalemleri

HTML/CSS öğrenmenin en iyi yollarından biri, keşfettiğiniz harika demoları incelemektir ve CodePen'in yıllık En İyi Kalemleri bunun için harikadır. Demolar harikadan "Bunun mümkün olduğunu bile bilmiyordum"a kadar değişir. CodePen'in koda dalmak için entegre kullanıcı arayüzü de kullanışlıdır.Benzer bir şekilde, gönderimize de göz atmak isteyebilirsiniz.

06. Web Tasarım Haftası

Hem HTML hem de CSS sürekli olarak gelişmektedir. En son metodolojiler ve özelliklerden haberdar olmak için bu e-posta bültenini öneriyoruz. Haftada bir gelir, bu da onu gerçekten okumanız için yeterlidir.

07. Duyarlı Tasarım Haftalık

Duyarlı, bu günlerde web tasarımcılarının araç setinin hayati bir parçasıdır ve güncel kalmanıza yardımcı olmak için Justin Avery, her hafta saatlerini en iyi yanıt veren web tasarım içeriğini seçmek ve endüstri liderleriyle röportaj yapmak için harcıyor ve her hafta bir haber bülteni olarak gönderiyor. Cuma (Ayrıca tarihindeki gönderimizi de beğenebilirsiniz.)

08. CSS şekilleriyle dikdörtgen olmayan düzenler oluşturun

Son güncelleme 09 Kasım 2019 06:54:54 (UTC/GMT +8 saat)

HTML nedir?

HTML, Hyper Text Markup Language anlamına gelir ve web sayfalarının yanı sıra bir web tarayıcısında görüntülenebilen diğer belge türleri oluşturmak için kullanılır.

HTML, World Wide Web Consortium tarafından belirlenen ve sürdürülen bir standarttır.

Buluşundan bu yana, HTML farklı sürümler aracılığıyla gelişmiştir. HTML'nin mevcut sürümü HTML 4.01'dir.

HTML'nin bir sonraki sürümü, geliştirme aşamasında olan ancak geliştiricilerin bazı özelliklerini kullanmaya başladığı HTML 5'tir.

Sonraki sayfalarda HTML 4.01'i ayrıntılı olarak tartışacağız. Hangisini öğrenerek, kendi başınıza web sayfaları oluşturabileceksiniz.

Basit bir web sayfasının HTML kodu

Örnek bir HTML sayfası

Bu örnek bir HTML sayfasıdır

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at nisi velit, aliquet iaculis est. Curabitur porttitor nisi vel lacus euismod egestas. Ha habitasse platea dictumst'ta. Sagittis magna eu odio interdum mollis'te. Phasellus sagittis pulvinar facilisis. Donec vel odio volutpat tortor tortor torcomodo. Donec araç vulputate sem, vel iaculis urna molestie eget. Sed pellentesque adipiscing tortor, condimentum elit elementum sed. Mauris dignissim elementum nunc, non elementum felis condimentum eu. In the turpis quis erat imperdiet vulputate. Pellentesque mauris turpis, dignissim sed iaculis eu, euismod eget ipsum. Vivamus mollis, viverrayı besliyor. Morbi, porta eget nisl euismod'da. Sed semper, totor eu molestie iaculis, felis massa vestibulum massa, vitae suscipit arku nunc quis ante. Phasellus aliquam elit ve nisl condimentum commodo. Nunc congue nibh aliquam enim aliquet nec feugiat diam condimentum. Süspansiyon gücü. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam, ciddi nunc ultrises'de çok fazla pellentesque biriktirir. Çeşitli ekranlar farklı şekillerde olabilir.

Siteden HTML öğrenin

Bu örnek bir HTML sayfasıdır

w3resource HTML eğitimlerinin özellikleri

Tüm HTML 4.01 öğelerini veya etiketlerini ve niteliklerini ele aldık. Çünkü HTML öğrenmek için anlamanız gereken HTML öğeleri (veya etiketleri) ve nitelikleridir. HTML eğitimlerimizde bir HTML etiketini veya öğelerini tartışırken, daha iyi anlamanıza yardımcı olmak için aşağıdaki özellikleri kullandık:

1. Açık ve basit bir açıklama ile başladık.

2. Nasıl yazılacağını hatırlamanız için bir Sözdizimi verdik.

3. Uygulamalı olarak nasıl yazılacağını gösteren bir Kullanım.

4. Kullanım Sonucunu gösterdik.

5. HTML etiketlerinde öğeyi kapatmak için bir bitiş etiketi olabilir veya olmayabilir, bu nedenle Başlangıç ve bitiş etiketlerinin gerekli olup olmadığını her zaman gösterdik.

6. HTML öğesinin hangi Kategoriye ait olduğu, yani metin için veya başlık için veya formlar oluşturmak için vb.

7. HTML etiketinin başka hangi öğeleri veya ne tür içeriği içerebileceği.

8. HTML etiketinin başka hangi öğeler içinde bulunabileceği.

9. Bu etiketin farklı Nitelikleri, açıklamaları ve örnekleri.

10. Bu HTML etiketinin bir örneği.

11. Bu örneğin sonucu.

12. Örneği bir tarayıcıda görüntüleyin.

13. Bu etiketin Farklı tarayıcılarda nasıl göründüğü.

Bu güncel konuya devam etmeye karar verdim. Bunları öğrenmenize yardımcı olmak için en iyi html ve css kaynaklarının bir listesini hazırladım. Kendim de bir web yöneticisi olarak başladığımda, bu kadar yüksek kaliteli ve faydalı kaynakları gerçekten özlediğimi hatırlıyorum.

İlk olarak, bazı tanımlar:

Html (İngilizce "Köprü Metni İşaretleme Dili"nden - köprü metni biçimlendirme dili), web sayfaları için standart biçimlendirme dilidir.

Css (İngilizce "Basamaklı Stil Sayfalarından" - basamaklı stil sayfalarından), bir web sayfasının görünümünü açıklayan bir teknolojidir.

Html ve css bilgisi olmadan sitenizi çalıştırmak çok sorunlu olacaktır - bir istatistik sayacı veya aynı banner bile çalışmayacaktır. Yardım için uzmanlara koşmayın veya forumlarda konu üstüne konu açmayın. Sadece almanız ve öğrenmeniz gerekiyor.

Kendi tecrübelerime dayanarak söyleyebilirim ki html ve css 1 ayda öğrenilebilir. Tabii ki, profesyonel yüksekliklerden bahsetmiyorum - dilerseniz onlara kendiniz ulaşacaksınız.

Bence html, css ve web sitesi tanıtımı dahil diğer konuları öğrenmenin en iyi yolu kendi web sitenizi başlatmak ve üzerinde pratik yapmaktır. Bu arada o zamanlar severek oluşturduğum Counter-Strike oyunu için haritalar üzerinde oluşturduğum ilk siteyi görebilirsiniz. İşte eski Globator tarafından ilk 10, TCI ve PR'nin ne olduğunu henüz bilmediği ve güneşte dikkatsizce üç boyutlu haritalar oluşturarak eğlendiği o günlerde oluşturulan haritalar ve ekran görüntüleri. html ve css'i pratikte öğrenerek bu siteyi bir ayda oluşturdum.

Html ve css öğrenmek için teknik uzman olmanıza gerek yok. Örneğin, ben genellikle bir hümanistim ve matematikte temelde "2" 🙂 vardı. Böylece herkes html ve css öğrenebilir. Listelediğim kaynaklar da uygundur, böylece istediğiniz zaman html ve css kullanarak ilginizi çeken herhangi bir anı bulmak için kullanabilirsiniz.

Html ve css öğrenmek için web siteleri

Kendi çalıştığım bir siteden html ve css öğrenmek için yararlı kaynaklardan bir seçim yapmaya başlayacağım. Bunlar, Valentina Akhmetzyanova namı diğer Wild tarafından yazılmış Wild html dersleridir. Gerekli tüm noktaları o kadar neşeli ve ilginç bir şekilde anlattı ki, derslerinin yardımıyla html ve css öğrenmek heyecan verici bir deneyime dönüşüyor. Bu arada blog için siteyi okuyabilirsiniz. Bir webmaster olarak çalışmak için gerekli seviyede html ve css öğrenmek için vahşi dersler yeterlidir.

Photoshop konusunda kendimi daha da geliştirirsem kim olacağımı hayal edebiliyor musunuz? Gerçek bir canavar olurdum! Ama SEO ve vejetate ile iletişime geçtim, bu harfleri soğuktan bükülmüş parmaklarla yazarak 🙂 . Şaka bir yana burası da sıcak ve yemekler güzel 🙂 .