HTML Boilerplate nasıl kullanılır
Sitenizi daha hızlı ve her seferinde standartlara uygun oluşturmak için HTML Boilerplate kullanın.
HTML Boilerplate’in nasıl kullanılacağına ilişkin oluşturulan kılavuzumuza hoş geldiniz. Bir web sitesi oluşturmaya gelince, temel her zaman genellikle çok benzerdir. Bu nedenle, her yeni sayfaya sıfırdan başlamak yerine, temel HTML yapısını içeren bir HTML standart metni kullanmak mantıklıdır. Bu, herhangi bir siteyi oluşturmaya başlamanın hızlı ve kolay bir yoludur ve çok fazla zaman ve emek tasarrufu sağlayacaktır.
Bir sitenin veya sayfanın HTML koduna bir göz atın ve herhangi bir web deneyiminin temel yapısını oluşturan aynı HTML etiketlerinin çoğunu (daha fazla bilgi edinmek istiyorsanız, HTML etiketleri kılavuzumuza bakın) göreceğinizi garanti ederiz. Şimdiye kadar oluşturulan her web sayfası <html> etiketiyle başlayacak ve <head>, <title>, <body>, <p> gibi temel etiketleri ve sonrasında daha fazlasını içerecektir.
Ve düşünmeniz gereken sadece HTML etiketleri değil. Web tarayıcıların tuhaflıkları ile uğraşmak zorunda kalınacağı da düşünülmelidir. Bir tarayıcı, belirli HTML etiketlerini diğerinden farklı bir şekilde işler; bu, bir sayfanın düzeninin farklı tarayıcılarda farklı görünebileceği anlamına gelir.
CSS ve JavaScript de dikkate alınmalıdır. Yine, tüm tarayıcılar bunları aynı şekilde yorumlamaz. Ancak, bu sorunların neredeyse tamamı bir HTML şablonu kullanılmasıyla ortadan kaldırılabilir. Ve en iyi yanı, en son projenize başlamadan önce bunun işe yarayacağını bilmenizdir.
HTML Boilerplate nedir?
HTML şablonu, bir yapının temelini oluşturmak için gereken öğeleri sağlaması açısından şablonlara benzer. Tipik olarak, bir HTML standart şablonu, herhangi bir web sitesi için bir temel sağlayan ve aynı sorunları yaşayan ve başkalarının da aynı sorunları yaşamasını istemeyen endüstri profesyonelleri tarafından oluşturulmuş bir dizi dosyadır.
Kaynaklar genellikle HTML belgeleri, temel CSS stil sayfaları, temel JavaScript, resimler ve yeni indirdiklerinizi nasıl kullanacağınıza ilişkin belgeler dahil olmak üzere web yapılarıyla ilişkili bir dizi dosya türü içerir.
Popüler HTML Şablonları
Kendinizi HTML cennetine giden yola sokmak için , HTML 5 Boilerplate ile başlamak harika bir seçenektir. Kendisini ‘web’in en popüler ön uç şablonu’ olarak tanımlar ve hemen oluşturmaya başlamanız için gereken tüm temel dosyaları ve varlıkları içeren şık ve basit bir HTML şablonu sunar.
HTML5 Boilerplate’in en son sürümü, temel mobil seçenekleri barındırmak için etiketler içeren bir index.html dosyası, Google Analytics ve tarayıcı tutarsızlıklarını gidermeye yardımcı olan Normalize.css bağlantısı ile donatılmıştır. HTML5 Boilerplate’in nasıl çalıştığı hakkında bir fikir edinmek için YouTube kanallarına koydukları videoya bakın. Birkaç yaşında, ancak standart kuralların nasıl çalıştığına dair genel bir fikir veriyor.
Keşfedilecek bir başka popüler seçenek de Bootstrap ‘tır. Bu bir ‘ön uç bileşen kitaplığıdır’ ve HTML5 Boilerplate çerçevesinden çok daha kapsamlı bir içeriğe sahiptir. Düzen, içerik, yazı tipleri, tipografi ve düğme, döngü, araç ipuçları ve çok daha fazlası gibi ön uç bileşenleri için seçenekler sunar.
Ancak, her şeyi istemiyorsanız, yalnızca istediğiniz öğeleri indirebilirsiniz. Bootstrap birçok web tasarımcısı ve geliştiricisi için çok popüler bir seçimdir, bu nedenle şablonlarını kullanırken biraz daha yaratıcı olmaya çalışın.
HTML5 Boilerplate kullanma
İndirildiğinizde, bu ücretsiz, açık kaynaklı ortak şablon size bir html sayfası (index.html), birkaç CSS stil sayfası, önemli JavaScript dosyaları, görüntüleri yerleştirmek için bir img klasörü, bir 404 sayfası, yapılandırma dosyaları ve ilgili belgeleri sunacaktır.
İlk indirmede bir kopya çıkarmak iyi bir fikirdir, bu nedenle referans olarak dosyaların temiz, düzenlenmemiş bir sürümüne sahip olursunuz.
Başlamak için önce favicon.ico ve icon.png dosyalarını logonuzla değiştirin. Bunlar sitenizin favicon’u ve siteniz birinin iOS ana ekranına kaydedildiğinde simge olarak görünecektir. Çevrimiçi bir favicon oluşturucu, yeni görüntüler oluşturmanıza yardımcı olabilir.
HTML’de aşina olacağınız bir etiket koleksiyonu ve aşina olmadığınız bazı şeyler vardır. Örneğin, Modernizr aşina olmadığınız bir şey olabilir. Bu, “yeni nesil web teknolojilerinin kullanılabilirliğini otomatik olarak algılayan JavaScript kodu” dur. Bu, sitenizin olabildiğince güncel kalmasını sağlamaya yardımcı olur. Son komut dosyası öğesi Google Analytics içindir, bu kaldırılabilir, ancak kullanırsanız kendi Google Analytics kodunuzu eklemeniz yeterlidir.
İdeal olarak, her şeyi bulduğunuz gibi bırakın ve <body> etiketine odaklanın çünkü içeriğin gideceği yer burasıdır. İçeriği <body> açılış etiketinden sonra ve ideal olarak <p> etiketlerinden hemen sonra gelen <script> etiketlerinden önce ekleyin. <title> ise sitenin ne hakkında olduğunu, SEO için iarama motorlarına gösterecek yi bir başlangıç sağlayacaktır.
Ayrıca, bu belgedeki tüm bağların göreceli olduğunu ve bu nedenle, web sayfalarını klasörlerde iç içe geçirmeye başlarsanız, bunları kökü temel alan veya mutlak bağlar olarak değiştirmeniz gerekebileceğini unutmayın. Örneğin, <script src = “js / plugins.js”> , <script src = “http://www.mysitename.com/js/plugins.js”> olması gerekebilir . Ayrıca, HTML’de büyük değişiklikler yaparsanız yorum eklemek iyi bir uygulamadır. Böylece geri döndüğünüzde, hangi değişikliklerin yapıldığını kendinize hatırlatabilirsiniz.
CSS düzenlemeleri
HTML5 Boilerplate’de bulunan iki CSS belgesinden normalize.css’ye dokunmanıza gerek yoktur. Bu, web siteniz söz konusu olduğunda tüm tarayıcıların düzgün bir oyun alanında başlamasını sağlayan sıfırlama belgesidir. Aksine, main.css, seçimler için bazı temel stiller, yatay kurallar, resimler ve formlar, öğe görünürlüğü için yardımcılar ve duyarlı web tasarımı ve yazdırma için @media kuralları dahil olmak üzere, belge terimlerinin ‘varsayılanlarını’ içerir .
Buradaki her şey güncelleme içindir. Ancak bunu yapmanız gerekip gerekmediğini dikkatlice düşünün. Yazarın özel stilleri (yani, sizinki) için ayrılmış bir alan vardır veya tamamen ayrı bir CSS belgesi oluşturabilir ve bunu HTML’nize de ekleyebilirsiniz.
Seçiminiz ne olursa olsun, sonraki HTML5 Boilerplate güncellemelerini nasıl yapacağınız konusunda dikkatli olun. Varsayılan main.css stillerinden herhangi birini düzenlerseniz, HTML5 Boilerplate’in gelecekteki sürümlerinde yapılan değişiklikler (bu, dosyalar değiştirilerek veya dosyaların bazı kısımları değiştirilerek eklenir) sitenize yansımaması durumu söz konusu olabilir. Bu nedenle, herhangi bir değişiklik için yorumları tekrar kullanın, böylece daha sonraki güncellemeleri çok daha kolay yapabilirsiniz.
Alternatif standart HTML şablon seçenekleri
Deneyim kazandıktan sonra, Initializr kullanarak, ihtiyacınız olan bileşenleri koruyan ve ihtiyaç duymadıklarınızı ortadan kaldıran özel bir yapı düşünmeye değer. Ayrıca, bir WordPress sitesi oluşturuyorsanız, HTML5 Blank gibi WordPress’e özgü boş bir temayı deneyebilirsiniz. Bu indirmeler ve hizmetlerin tümü ücretsizdir, böylece boş zamanlarınızda bunları inceleyebilir ve deneyebilirsiniz.
İlgili Makaleler:
- Başarılı Portföy web sitesi oluşturmak için 10 ipucu
- Kod Yazmayı Öğrenmek İsteyenler İçin En İyi 9 Online Kodlama Oyunu
- Web Tasarımı için Bilmeniz Gereken 7 trend
