Home-theater-designers
Bugünlerde yeni bir web sitesi oluştururken onun HTML5 uyumlu olmasını isteyeceksiniz. Ancak HTML5'in inceliklerini sıfırdan öğrenmek için gereksiz zaman harcamak da istemezsiniz, değil mi?
Neyse ki, HTML5 Genel Bilgi şablonu yardım edebilir. Sadece birkaç dakika içinde bir HTML5 web sitesi oluşturmak için kullanabileceğiniz basit bir ön uç şablonu. Ama aynı zamanda onu karmaşık, tam özellikli bir sitenin temeli olarak kullanabileceğiniz kadar güçlüdür.
işte sıkılınca yapılacak eğlenceli şeyler
Bu HTML5 Genel Bilgisi öğreticisi, şablonda neler olduğunu, onu nasıl kullanacağınız hakkında bilmeniz gereken temel bilgileri ve daha fazla öğrenme için bazı kaynakları gözden geçirecektir. Ayrıca size, yalnızca birkaç satır HTML içeren çok basit bir site oluşturmak için şablonu nasıl kullandığımı da göstereceğim.
HTML5 Genel Şablon Şablonu
Şablonu HTML5 Boilerplate'den indirdiğinizde, bir dizi klasör ve dosya alırsınız. İşte ZIP dosyasının içeriği:
css
---main.css
---normalize.css
doc
img
js
---main.js
---plugins.js
---vendor
---jquery.min.js
---modernizr.min.js
.editorconfig
.htaccess
404.html
browserconfig.xml
favicon.ico
humans.txt
icon.png
index.html
robots.txt
site.webmanifest
tile.png
tile-wide.pngBurada şablondaki her öğenin üzerinden geçmeyeceğiz, sadece temel bilgiler. Yine de, tüm dosyaları kullanacak kaynaklara sahip olduğunuzdan emin olmak için yardım belgeleriyle başlayacağız.
HTML5 Standart Yardım Belgeleri
Kazan plakası bir koleksiyona sahiptir GitHub'da barındırılan yardım belgeleri . Teknik sorularınız olduğunda veya bir şeyin neden olduğu gibi tasarlandığını merak ettiğinizde bu çok yardımcı olur.
Belgelerdeki hemen hemen her şey, şablonun doc klasöründe de bulunur. Boilerplate sitenizi nasıl oluşturacağınızı bulmada büyük yardımcı olan bir dizi Markdown (.md) dosyası göreceksiniz.
Her şeyi okumak istiyorsanız, TOC.md ile başlayın ve oradan diğer Markdown dosyalarına giden bağlantıları izleyin. Belirli bir sorunla ilgili yardım arıyorsanız, ilgili gibi görünen dosyayı bulun; use.md, başlamak için iyi bir yerdir.
HTML5 Boilerplate'in CSS'si ile Başlamak
HTML5 Standart Şablon şablonu iki CSS dosyasıyla birlikte gelir: main.css ve normalize.css.
İkinci dosya olan normalize.css, farklı tarayıcıların öğeleri tutarlı yollarla oluşturmasına yardımcı olur. Nasıl çalıştığı hakkında daha fazla bilgi edinmek için GitHub'da normalize.css projesi .
Bu arada, main.css, ihtiyacınız olan herhangi bir kodu gireceğiniz yerdir. sitenizi CSS ile biçimlendirin . Şablona dahil edilen standart CSS, geliştiriciler ve HTML5 Boilerplate topluluğu tarafından yürütülen araştırmaların sonucudur. Okunabilir ve farklı tarayıcılarda güzel bir şekilde görüntüleniyor.
Kendi CSS'nizi eklemek istiyorsanız, Yazarın Özel Stilleri bölümüne ekleyebilirsiniz. Örnek sayfamız için biraz bağlantı stili ekleyeceğim:
Temel CSS'ye dahil edilmiş bir dizi faydalı yardımcı sınıf da vardır. Bazıları standart tarayıcılardan ve ekran okuyuculardan (veya bazı kombinasyonlardan) öğeleri gizler.
Ayrıca main.css'de duyarlı tasarım ve yardımcı yazdırma ayarları için destek bulacaksınız.
Bu öğelerin tümü, CSS'deki yorumlarla açıkça açıklanmıştır:
Genel olarak, temel CSS ile başlayabilirsiniz.
Şablona Kendi HTML'nizi Ekleme
Boilerplate iki HTML dosyası içerir: 404.html ve index.html.
Dizin sayfası, ana sayfanızı (ya da tek sayfalık basit bir sayfa kullanacaksanız tek sayfanızı) oluşturacağınız yerdir.
Dizin sayfasını bir tarayıcıda açarsanız, tek bir metin satırı görürsünüz. Ancak HTML'ye bakmak, kodda çok daha fazla saklandığını ortaya çıkarır. Gerçekten değiştirme konusunda endişelenmeniz gereken tek şey Google Analytics kodudur ('UA-XXXXX-Y' metnini bulun ve kendi izleme kodunuzla değiştirin).
Dizin sayfasındaki HTML'nin geri kalanı, web uygulamaları için bilgiler, eski tarayıcılar için bildirimler ve kullanışlı JavaScript'ler içerir. Başlarken, bunların hiçbiriyle uğraşmanıza gerek yok.
Ancak önceden doldurulmuş olmaları, sitenizin HTML5'ten en iyi şekilde yararlanmaya hazır olduğundan emin olmanın iyi bir yoludur.
Sayfanızı oluşturmak için HTML'nizi dosyadaki etiketlerin arasına ekleyin. İşte kendim hakkında ekleyeceğim bazı temel bilgiler:
Daha fazla sayfa oluşturmak ister misiniz? Bu dosyanın kopyalarını oluşturun ve yeniden adlandırın, böylece tüm HTML'yi kopyalayıp yapıştırmanız gerekmez. Ardından içeriğinizi ekleyin.
404 sayfanızı özelleştirmek istiyorsanız, HTML dosyasını değiştirmeniz yeterlidir. 404 sayfanıza ne koyacağınızdan emin değil misiniz? Bu harika 404 sayfa tasarım örneklerine göz atın.
Favicon (ve Diğer Simgeler) Ekleme
Favicon'unuzu değiştirmek mi istiyorsunuz? O zaman favicon.ico, değiştirmeniz gereken dosyadır.
Henüz bir tane yoksa, bir tane oluşturmanız gerekir. Çevrimiçi bir favicon oluşturucu kullanabilir veya kendinizinkini tasarlayabilirsiniz. 16 x 16 piksel olduğundan ve .ico dosya türüne sahip olduğundan emin olun.
youtube'da video önerilerinden nasıl kurtulurum
Favicon'unuza biraz düşünmek iyi bir fikirdir. Beyin fırtınanıza rehberlik etmesi için bu ünlü favori simgeleri kullanın. Yeni favicon eklediğinizde adı favicon.ico olduğundan emin olun.
Sitenizin kök dizininde üç resim daha olduğunu fark edebilirsiniz: icon.png, tile.png ve tile-wide.png. Bunlar ne için?
- icon.png, Apple dokunmatik simgeleri için kullanılır. Bir web uygulaması oluşturursanız, bir iPhone veya iPad kullanıcısı uygulamayı ana ekranlarına eklediğinde bu simge kullanılacaktır.
- tile.png ve tile-wide.png, Windows'un 'sabitleme' işlevi içindir ve Windows 10'da görünür.
Tüm bu durumlar için simgeler sağlamak iyi bir fikirdir --- ancak bir web uygulaması oluşturmuyorsanız, bu daha düşük bir önceliğe sahip olabilir.
Daha Fazla İşlevsellik Ekleme
HTML'nizi ve bir favicon'u (ve eklemek isteyebileceğiniz herhangi bir CSS'yi) ekledikten sonra siteniz yayınlanmaya hazırdır. HTML5 Boilerplate'i kullanmak işte bu kadar kolay. Sunucunuza yükleyin ve işiniz bitti!
İşte sayfamız nasıl görünüyor:
Gördüğünüz gibi, sadece birkaç satırlık metin tamamen işlevsel (biraz mülayim olsa da) bir web sitesi oluşturdu. Çok değil ama sadece birkaç dakika sürdü. Ve HTML5 ile oldukça genişletilebilir. Bu, Standart Şablon şablonunun gücüdür.
Ancak isterseniz, Standart Şablon şablonuyla yapabileceğiniz daha pek çok şey var. Aradığınız belirli bir şey varsa, bunu yardım belgelerinde bulma ihtimaliniz yüksek.
HTML5 ile neler yapabileceğinizden emin değilseniz ancak öğrenmek istiyorsanız, size yardımcı olacak çok sayıda web tasarımı eğitimi var.
Paylaş Paylaş Cıvıldamak E-posta Windows 11'i Uyumsuz Bir PC'ye Yüklemek Tamam mı?Artık Windows 11'i eski bilgisayarlara resmi ISO dosyasıyla yükleyebilirsiniz... ama bunu yapmak iyi bir fikir mi?
Sonrakini Oku İlgili konular- Programlama
- HTML5
- Kodlama Eğitimleri
Dann, şirketlerin talep ve potansiyel müşteri yaratmasına yardımcı olan bir içerik stratejisi ve pazarlama danışmanıdır. Ayrıca dannalbright.com'da strateji ve içerik pazarlaması hakkında bloglar yazıyor.
Dann Albright'dan Daha FazlaHaber bültenimize abone ol
Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!
Abone olmak için buraya tıklayın