İÇİNDE modern dünya bazen kendi web sitenize sahip olmak bir telefon numarasına veya adrese sahip olmak kadar önemlidir E-posta. Ne yazık ki, herkes kendi başına güzel bir profesyonel web sitesi yapamaz ve bazen bir eğri bile çalışmaz. Herkesin karşılayamayacağı için programcılardan sipariş vermek de ideal bir çözüm değildir.

Bu durumdan kurtulmaya yardım edin ücretsiz html Web sitelerinin şablonları. HTML site şablonu, hazır bir dizi statik sayfalar belirli bir site için. Bu şablonu kullanarak, temel HTML biçimlendirme bilgisi ile sadece birkaç saat içinde basit bir web sitesi oluşturabilirsiniz. HTML bölümünde, eğer birkaç saat daha ders çalışırsanız bu bilgiyi edineceksiniz ve CSS bölümünde zaman ayırmazsanız, HTML site şablonlarının tasarımını tamamen kontrol edebilecek ve tamamen özelleştirebileceksiniz. ihtiyaçlarınız için.

Web sitesi şablonlarının tartışılmaz bir diğer avantajı, çoğu durumda profesyoneller tarafından yazılmış olmalarıdır. Profesyonel bir site şablonu, yalnızca güzel ve modern dizayn, aynı zamanda kod yazıldığı gibi. Arama motorları sitenizin nasıl yazıldığına, kodun SEO optimizasyonlu olup olmadığına bakar ve buna göre arama sonuçlarındaki konumunuzu düşürür veya arttırır. Bu nedenle iyi bir sitenin sadece güzel ve modern olması değil, aynı zamanda kod açısından da iyi yazılmış olması önemlidir.

Ücretsiz indir HTML Şablonları site ve projelerinizi mümkün olan en kısa sürede oluşturun.

Tam ünvan - Hiper Metin İşaretleme Dili. Web sayfalarının ve belgelerin oluşturulması sırasında yaygın olarak kullanılan bir hiper metin biçimlendirme dilidir. HTML yolculuğu ilk yarıda başladı 90'lar. O zamanlar son derece ilkeldi, ama şimdiden basit sayfalar web için. O zamandan beri, dil sürekli gelişiyor ve bugün zaten çok şey öğrendi. Bizim alıştığımız HTML olmasaydı, web siteleri de olmazdı. Hemen hemen tüm web siteleri bir dereceye kadar HTML kullanır.

Günümüzün mevcut standardı HTML5 2014 yılında resmi olarak piyasaya sürüldü. Bu, dilin yeni bir düzeye ulaşmasını sağlayan devrim niteliğinde bir standarttır.

HTML5'teki yenilikler:

• DOM yapısının geliştirilmesi sırasında ayrıştırma algoritması değişti;
• Ses, video ve diğerleri gibi yeni etiketler ortaya çıktı. Bu arada, artık yalnızca HTML kullanarak bir web oynatıcı oluşturabilirsiniz. Daha önce kullanmak zorunda Adobe Flash oyuncu;
• HTML öğelerini kullanma kurallarının ve anlambiliminin bir bölümünü yeniden tanımlama.

Global olarak bakıldığında, HTML5 sonraki sürüm dil, ancak uygulama geliştirme için eksiksiz bir platform. Önceden yetenekleri bir yapı inşa etmekle sınırlıydı, bugün çok daha akıllı. Standardın yayınlanmasıyla birlikte, dilin kapsamı büyük ölçüde genişledi. Geleneksel web geliştirme yönüne ek olarak, oluşturmak için kullanılır. bilgisayar programları Windows 8 ve daha yeni sürümlerde ve tüm popüler platformlarda akıllı telefonlar için uygulamalar geliştirmek için.

Her şey, HTML5'in iki temel alanda uygulanmaya başladığı gerçeğine geldi:

• HTML dilinin güncellenmiş hali olarak;
• Değişken karmaşıklıkta web uygulamaları oluşturabileceğiniz işlevsel bir platform olarak. Doğru, yarat tam uygulama saf HTML5'te çalışmayacak, JavaScript ve CSS3 bunun için hala kullanılıyor.

HTML5'i kim modernize ediyor? Dil üzerinde W3C veya tam adla çalışılıyor - World Wide Web Konsorsiyumu belirli geliştiricilerden bağımsızlığını koruyan uluslararası bir kuruluştur. Ayrıca HTML5 için spesifikasyonlar, tanımlar ve standartlar üretir. Orijinal ve eksiksiz spesifikasyon, bağlantıdaki resmi web sitesinde mevcuttur ( İngilizce olarak mevcuttur). Kuruluş dil üzerinde çalışmalarını tamamlamadı, aksine hala geliştiriyor.

Tarayıcı Desteği

HTML5 spesifikasyonunun ve bu teknolojinin belirli tarayıcılarda uygulanmasının farklı kavramlar olduğunu anlamak önemlidir. Aktif geliştirme aşamasındaki birçok web tarayıcısı, bu sürümün yayınlanmasından önce bile HTML5 özelliklerini yavaş yavaş uygulamaya başladı. Bugün, en yeni tarayıcılar HTML5'in tüm özelliklerini desteklemektedir. Tam destek şu kişiler tarafından sağlanır: Chrome, IE 11, Firefox, Kenar, Opera. Nispeten eski sürümler, IE 8 ve altı gibi daha yeni standartları desteklemez. sürümde IE9 Ve 10 standartlar zaten uygulandı, ancak yalnızca kısmen.

Tarayıcılar genellikle yeni standartla çalışabilir, ancak özellikleri farklı şekilde ele alabilir veya yalnızca bir hata verebilir. Bu nedenle, çapraz tarayıcı geliştirirken, tarayıcıların tüm özelliklerini dikkate almanız gerekir. İLE şimdiki an web tarayıcılarından standart destek zaten iyi bir seviyede.

Tarayıcının mevcut sürümünün HTML5'i desteklediğinden emin olmak için küçük bir test yapabilirsiniz.

Çalışmak için neye ihtiyacın var?

HTML5 altında geliştirme sırasında ne işe yarar? Anahtar araç, gelecekteki web sayfasının kodunun yazılacağı bir metin düzenleyicidir. En popüler ve çok yönlü editörlerden biri Notepad++'dır. Resmi web sitesinde tamamen ücretsiz olarak mevcuttur. Ücretsiz dağıtıma ek olarak, gerekli tüm işlevlere sahiptir, birçok faydalı eklentiye sahiptir, etiketlerin açılmasını ve kapanmasını vurgular.

Ayrıca iyi bir editörçoğunluk desteği ile işletim sistemleri Visual Studio Kodudur. MacOS, Windows ve Linux üzerinde çalışabilir. Olasılıklara göre bu yazılım Notepad++'dan biraz daha üstün.

İkinci önemli araç bir web tarayıcısıdır, kodu test etmek için kullanışlıdır. Tanınmış bir geliştiriciden herhangi bir tarayıcı yapacaktır. Platformlar arası bir uygulama oluşturmanız gerekiyorsa, tüm popüler web tarayıcılarını sisteme yüklemeniz gerekecektir.

veya ders çalışmak HTML dersleri bağımsız ve ücretsiz

Web sitenizi internette mi oluşturmak istiyorsunuz? - Çok iyi! HTML dersler bu konuda size yardımcı olacaktır.

Köprü Metni İşaretleme Dili veya kısaltılmış HTML- W3C konsorsiyumunun bir ürünü olan belgelerin hiper metin biçimlendirme dili - hemen hemen tüm mevcut web sayfalarının temelini oluşturur ve bu da onu site oluşturma araçları hiyerarşisinde ilk sıraya yerleştirir. Bu bölümdeki derslerin çalışılmasına özellikle dikkat edilmelidir.

• HTML Dersleri Bunlar, web sayfalarının nasıl oluşturulacağına ilişkin eğitimlerdir.
• HTML Dersleri- İnternet sitelerinin geliştirilmesinde ustalaşmaya yönelik ilk adım.
• HTML Dersleri ve web tasarım dersleri tamamen farklı kavramlardır.

Yeni, modern HTML dersleriözel dizayn edildi yeni başlayanlar için.

Sözdizimi HTML oldukça basit ve anlaşılması kolay, ancak bu, öğrenme sürecinin sorunsuz ve hatasız geçeceği anlamına gelmez. Onlardan korkmanıza gerek yok - kaçınılmazlar. Hata yaparak, gelecekte nasıl hareket etmemeniz gerektiği hakkında bilgi edinirsiniz, bu bilgi biraz çabaya, zamana değer ve bu nedenle özellikle değerlidir. Bilgi ve tecrübe bu şekilde biriktirilir.

İlk sayfalarınızı oluştururken, daha önce bilmediğiniz ve belki de varlığından bile haberdar olmadığınız bir dünyayı - başka olasılıklar dünyasını - Web dünyasını keşfettiğiniz düşüncesinin tadını çıkaracaksınız.

Dikkat olmak! Yeni bir aktiviteye bağımlı hale gelebilirsiniz.

Yeni HTML Dersleri | HTML kodu örneği

Öğelerini düşünün:

Bir belgenin başlangıcını ve sonunu tanımlayan etiketler.

Servis bölümü. İşte tarayıcılar için komutlar, arama robotları için talimatlar, uzak dosyalara bağlantılar, komut dosyaları.

Belgenin ana başlığını tanımlayan etiketler.

Bu bölüm, web sayfasının görünen kısmının tamamını içerir.

Tarayıcıda Merhaba Dünya! :

Çalışmak için HTML Not defteri gerekli. İçinde kodu manuel olarak yazacağız. Belki de hepsi bu kadar ... Kodun yorumlanmasıyla uğraşıyor yazılım web tarama için, yani Internet Explorer, Firefox, Opera, Chrome ve diğer tarayıcılar.

derslerde bu kurs sunulacak HTML5, XHTML ve CSS eklentileri. Bu kombinasyon, öğrenme için idealdir ve materyalin gelişimini önemli ölçüde hızlandırmanıza olanak tanır.

Şu anda, spesifikasyon W3C konsorsiyumunun resmi web sitesinde zaten mevcut. HTML5. Beşinci versiyonun geliştirilmesi 2007'de başladı, XML ve aslında, yeni unsurlar ve niteliklerle tamamlanmıştır, XHTML-yemek. Beşinci versiyon HTML daha fazla işlevsellik sunar ve etkileşimli siteler ve web uygulamaları oluşturma sürecini basitleştirir. Ayrıca, HTML5 multimedya içeriğinin web sayfasının içine yerleştirilmesini sağlayan ek öğeler içerir.

Yeni HTML henüz bir öneri statüsü almamıştır ve bu aşamada etiketleri yalnızca bazı tarayıcılar tarafından tanınır. Ancak buna rağmen, bugün HTML 5 dersleri mevcuttur.

Post Scriptum: İnternet, "Köprü Metni Aktarım Protokolü" - Köprü Metni Aktarım Protokolü veya kısaca HTTP - hiper metin belgeleri biçiminde veri aktarımı için bir protokol aracılığıyla köprülerle birbirine bağlanan sonsuz sayıda sayfadan oluşur. Nedir HTML? HTML - Hiper Metin İşaretleme Dili veya köprü metni biçimlendirme dili belgeleri.

Bu makale olduğunu iddia etmiyor kapsamlı rehber HTML belgelerinin işaretleme dilinde. HTML'nin temellerini açıklar - temel prensipler, kavramları ve tanımları ile bu teknolojiye hakim olduktan sonra, HTML kodlamayı öğrenme konusunda kolayca ilerleyebilirsiniz.

serin

İğnele

Dersi çalışmak için arşivi gerekli dosyalarla birlikte indirin.

HTML bir işaretleme dilidir belgeler. Doğru telaffuz - HTMEL.

Hiç bir Word belge düzenleyicisinde veya benzeri bir yerde çalıştınız mı? Ofis uygulamaları? muhtemelen bunu biliyorsun bu tür düzenleyici, metin düzenleme, öğeleri düzenleme, resim ekleme vb. için zengin özelliklere sahiptir.

Neden, kelime işlemciler hakkında HTML hakkında bir makale yazıyorsunuz? Ama neden. Bir ofis editörünün ne olduğunu anlarsanız? Bu, belgeleri düzenlemek ve görüntülemek için bir uygulamadır.

Buradaki anahtar kelime belge . Yani, bir programda bir belge yaratır, düzenler ve görüntüleriz. bu durum- ofis editöründe. Böyle bir belgeyi Notepad gibi basit bir metin düzenleyicide açarsak, birçok garip sembol ve işaret göreceğiz. Bu semboller karmaşası insanlık için anlaşılmaz ama bilgisayarlar için anlaşılabilir. Bu iç dil sayesinde, Word belgesi düzenleyicinin kendisinde belirli bir yapı ve görünüm alır ve belge tüm ihtişamıyla biçimlendirilmiş metin ve yerinde resimlerle karşımıza çıkar.

HTML bir işaretleme dilidir tarayıcı için. Word "burada tarayıcı ve belge HTML sayfasıdır. Bu çok temeldir. HTML teknolojileri web belgelerinin biçimlendirme dilini programlama dilleriyle karıştırmamak için anlaşılması gereken . Adı kendisi için konuşur HTML kullanarak Biz işaretlemek, öğenin, görüntünün veya metnin sayfada nerede gösterileceği ve hangi sırayla yan yana görüneceği.

Evet, ofis uygulamalarında basit yazma ve metin biçimlendirmenin programlama ile hiçbir ilgisi yoktur. Ama dikkatli okuyucu fark edecek önemli detay- bir kelime işlemcide görsel düğmeler ve menüler kullanarak metin ve resimleri yazar, düzenler ve biçimlendiririz, ancak HTML kodu neden elle yazılır? Neden bir belge için işaretleme yazmanın bu kadar çok teknik detayını inceleyelim?

Aslında, Word'e benzer şekilde HTML sayfaları oluşturabileceğiniz ve düzenleyebileceğiniz birçok düzenleyici vardır. Yani kaynak HTML kodu bizim için gizlidir ve içine girmeyiz.

HTML için bir tür Word. Çok görsel editörler arandı:

WYSIWYG editörler - Wşapka Y sen S ee i s Wşapka Y sen G et. Yani, Rusçaya çevrilirse: gördüğümüz şey, elde ettiğimiz şeydir.

Ben onlara "serseriler" diyorum. Bu, fonetik olarak doğru olmasa da, bu buluşun yararsızlığını açıkça göstermektedir. Yeni başlayanlar, ilk sitelerini oluşturmak için genellikle bu tür editörleri kullanır. Tabii ki, bu uygundur - ilk bakışta, nahoş ve karmaşık şeyleri etiketlerin, tasarım stillerinin ve diğerlerinin çalışmasına girmeye gerek yoktur. Editörün kendisi, eylemlerimizi otomatik olarak HTML koduna dönüştürecektir.

Ama dedikleri gibi, hiçbir şey olmuyor. Daha spesifik olarak, bu yaklaşımın çok ciddi dezavantajları vardır. Arka arkaya herkesin HTML sayfaları tasarlamak için görsel düzenleyicileri kullanmasını engelleyen nedir? Gerçek şu ki, bu şekilde oluşturulan sayfalar genellikle çok fazla ek koda, anlamsal açıdan çok fazla hataya sahiptir. Şimdi, elbette, hiçbir sorun yok Yüksek hızlı internet bağlantı ve 400 kb ile 100 kb sayfa boyutundaki fark hız için önemli değildir, ancak optimize edilmiş ve doğru yazılmış bir HTML kodu birçok sorunu ortadan kaldırır ve birçok avantaj sağlar:

• Yetkili HTML kodunun üzerinde olumlu bir etkisi vardır. Arama motoru optimizasyonu, bir siteyi bir arama robotu tarafından tarama hızı. Burada üretilen kilobaytlarca kod kabul edilemez ve hatta zararlıdır;
• WYSIWYG düzenleyicisi tarafından oluşturulan HTML kodunda birçok anlamsal hata vardır. Yani, böyle bir düzenleyici tarafından oluşturulan etiketler, örneğin listeleri kullanmanın gerekli olduğu yerlerde başka amaçlar için kullanılır.
  , düzenleyici ihtiyacımız olmayan başka bir etiket oluşturacaktır. Elbette editöre bağlıdır, ancak burada WYSIWYG araçlarını kullanarak bir metin alanında basit metin düzenleme değil, site oluşturmak için karmaşık çözümler kastediyoruz.
  • Çok sayıda gereksiz etiket oluşturulur ve belgenin yapısı şişirilir. Diyelim ki böyle bir programda bir öğeyi önce sağa, sonra sola, sonra merkeze taşıdınız - her eylem kaynak HTML kodunda bir iz bırakır. Editör bir programdır ve sonuç olarak tam olarak ne elde etmek istediğinizi bilemez, hepsini hesaba katarak tonlarca kod üretir. seçenekler belgenin tarayıcıdaki davranışı.
  • Kural olarak, HTML kodunun görsel tasarımı için editörler hızla eski hale gelir. Ve profesyonellerin ilgisizliği nedeniyle, genellikle desteklerini kaybederler ve geliştirmede dururlar. Ve HTML gelişiyor. Vuzivugi dışında her şey gelişir. Dolayısıyla yeni özellikler ve çözümler içeren doğru ve güncel kod üretemezler.
  • Bu tür projeleri desteklemek ve geliştirmek ilahi bir cezadır. Kalıpları kullanma hakkında ve yeniden kullanmak hiçbir konuşma kodu olamaz.

  Yani HTML'yi sadece kalemlerle yazacağız. HTML'nin görsel olarak düzenlenmesi için yeterli araçlar henüz icat edilmedi ve ortaya çıkmaları pek mümkün değil. HTML biçimlendirme dilini öğrenmesi ve anlaması kolaydır ve HTML kodu yazmak için birçok otomasyon aracı vardır, ancak diğer derslerde bununla ilgili daha fazla bilgi vardır.

  WYSIWYG editörüyle biraz uğraştıktan sonra, genç HTML guruları bu beyhude görevi bırakıp yoluna devam ediyor.

  HTML belge yapısı

  Sınıflar için Sublime Text düzenleyicisini indirip kurmanızı tavsiye ederim. HTML öğrenmenin ilk aşamalarında ruh halinizi bozmak istemiyorsanız, Windows için HTML düzeni için yerleşik Not Defteri'ni kullanmanızı şiddetle tavsiye etmiyorum.

  HTML belge kodunu manuel olarak yazmaya karar verdik, yani dizgi. HTML düzeni- işlem HTML oluşturma belge. Sıradan insanlarda ve bilgili çevrelerde - sadece düzen. Herhangi bir belgenin bir yapısı ve belirli yapım kuralları vardır. Kod hangi öğelerden oluşur, HTML'nin yapısı nedir?

  Bilgisayarda bir başlangıç ​​şablonu oluşturalım - dosya index.html, bir düzenleyici ile açın ve aşağıdaki kodu içine yapıştırın:

  Belge Gövdesi HTML belgelerinin uzantısına sahip olduğunu unutmayın. .html.

  Yani, örnekten sırayla.

  - belge türü (doküman türü)

  Bu yapı, tarayıcının doğru bir şekilde "anlaması" için her zaman belgenin başında belirtilir. HTML sürümü bir belge oluştururken kullanılır.

  HTML'nin sürekli gelişmesi nedeniyle, herhangi bir yazılım ürünü gibi birkaç sürümü vardır. Şimdiki versiyonu HTML - beşinci ve örnekte verilmiştir doktip güncel.

  Prensipte, belge türlerini incelemenin bir anlamı yoktur, çünkü HTML5'in piyasaya sürülmesiyle bu tasarım standart hale geldi. Sitenin düzenini oluşturmaya her başladığınızda belgenin başına yapıştırmanız yeterlidir.

  - belgenin başlangıcı

  Doctype'dan sonra gördüğümüz ilk etiket .

  HTML etiketi- bir HTML belgesinin yapısal biçimlendirme birimi. HTML kodu, etiket adı verilen yapı taşlarından oluşur. Her etiketin kendi işlevi vardır ve HTML biçimlendirme dilini öğrenmek, nihayetinde belgedeki etiketleri ve özelliklerini öğrenmekle ilgilidir.

  HTML öğrenmenin ilk bakışta göründüğü kadar zor bir iş olmadığını belirtmek isterim. Belge işaretlemede kullanılan etiketleri öğrenmek beyne çok fazla yük bindirmiyor.

  Böylece, belge işaretlemesi etiketiyle başlar. ve bir kapanış etiketi ile biter. Diğer etiketleri veya öğeleri içeren her etiket kapatılmalıdır kapanış etiketi. Örneğin, , ,

  , vb.

  Etiket belgenin tüm yapısını içerdiği ve geri kalan öğeleri sardığı için gereklidir.

  Etiket

  Sonraki, görüyoruz etiket henüz bizim için net olmayan diğer unsurları içeren . Diğer öğeleri içerir - bu, öğelerin veya etiketlerin yapının açılış ve kapanış etiketleri arasında olduğu anlamına gelir:

  <тег>içerik veya diğer etiketler

  Etiket bir HTML belgesinin meta bilgilerini, yani belgenin kendisinde görüntülenmeyen, ancak önemli olan ve belgenin nasıl görüneceğini ve davranacağını büyük ölçüde belirleyen bilgileri depolamak için tasarlanmıştır.
  Bu etiket belgede gereklidir.

  Etiket

  başlık