HTML5 Kazan Kullanarak Dakikalar İçinde Web Sitesi Nasıl Oluşturulur

Yeni bir web sitesi oluştururken, bugünlerde HTML5 uyumlu olmasını istersiniz. Ancak, HTML5'in inceliklerini sıfırdan öğrenmek için gereksiz zaman harcamak istemezsiniz, ya?

Neyse ki, HTML5 Kazan şablonu yardımcı olabilir. HTML5 web sitesi oluşturmak için birkaç dakika içinde kullanabileceğiniz basit bir ön uç şablonu. Ancak, karmaşık ve tam özellikli bir sitenin temeli olarak kullanabileceğiniz kadar da güçlü..

Bu HTML5 Boilerplate öğreticisi, şablonda ne olduğunu, nasıl kullanılacağı hakkında bilmeniz gereken temel bilgileri ve daha fazla bilgi edinmek için bazı kaynakları gözden geçirecektir. Ayrıca sadece birkaç satır HTML içeren çok basit bir site oluşturmak için şablonu nasıl kullandığımı da göstereceğim..

HTML5 Kazan Şablonu

Şablonu HTML5 Kazan bölümünden indirdiğinizde, bir dizi klasör ve dosya alırsınız. ZIP dosyasının içeriği:

css --- main.css --- normalize.css doc img js --- main.js --- plugins.js --- satıcı --- jquery.min.js --- modernizr.min.js .editorconfig .htaccess 404.html browserconfig.xml favicon.ico humans.txt icon.png dizin.html robots.txt site.webmanifest tile.png tile-wide.png

Buradaki şablondaki her öğenin üzerinden geçmeyeceğiz, yalnızca temel öğeler. Tüm dosyaları kullanacak kaynaklara sahip olduğunuzdan emin olmak için, yardım belgelerine başlayacağız..

HTML5 Boilerplate Yardım Belgeleri

Boilerplate, GitHub'da barındırılan yardım belgelerine sahiptir. Teknik sorularınız olduğunda veya bir şeyin neden olduğu gibi tasarlandığını merak ettiğinizde bu büyük bir yardımdır..

Belgelerdeki hemen hemen her şey, şablonun doc klasöründe de bulunur. Boilerplate sitenizi nasıl oluşturacağınıza karar vermede büyük yardımı olan birçok Markdown (.md) dosyası göreceksiniz..

Her şeyi okumak istiyorsanız, TOC.md ile başlayın ve oradan diğer Markdown dosyalarına bağlantıları izleyin. Belirli bir konuda yardım arıyorsanız, alakalı gibi görünen dosyayı bulun; use.md başlamak için iyi bir yer.

HTML5 Boilerplate CSS ile Başlarken

HTML5 Boilerplate şablonu iki CSS dosyasıyla birlikte gelir: main.css ve normalize.css.

İkinci dosya, normalize.css, farklı tarayıcıların öğeleri tutarlı şekillerde oluşturmasına yardımcı olur. Nasıl çalıştığı hakkında daha fazla bilgi edinmek için GitHub'daki normalize.css projesine göz atın..

Bu arada, main.css, sitenizi CSS ile biçimlendirmeniz gereken herhangi bir kodu koyacağınız yerdir. 10 Dakikada Öğrenebileceğiniz Basit CSS Kodu Örnekleri 10 Dakikada Öğrenebileceğiniz 10 Basit CSS Kodu Örneği 10 Dakikada Öğreneceğiz CSS becerilerinizi pratik edebilmeniz için bir satır içi stil sayfası oluşturma. Sonra 10 temel CSS örneğine geçeceğiz. Oradan, hayal gücünüz sınırdır! . Şablonla birlikte verilen 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 hoş bir şekilde görüntülenir.

Kendi CSS'inizi eklemek istiyorsanız, bunu Yazarın Özel Stilleri bölümüne ekleyebilirsiniz. Örnek sayfamız için biraz bağlantı stili ekleyeceğim:

Baz CSS'de yer alan bir dizi faydalı yardımcı sınıf 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ı baskı ayarları için destek bulacaksınız.

Bu öğelerin tümü CSS'deki yorumlarla açıkça açıklanmaktadır:

Genel olarak, temel CSS ile başlayabilirsiniz.

Şablona Kendi HTML'nizi Eklemek

Boilerplate'de iki HTML dosyası var: 404.html ve index.html.

Dizin sayfası, ana sayfanızı (veya tek sayfanızı, basit bir çağrı cihazına gidecekseniz) oluşturacağınız yerdir. Tek Bir Sayfa Web Sitesi: 3 Neden İdealiniz İçin Çalışabilir? Tek Bir Sayfa Web Sitesi: 3 Neden, Fikriniz İçin Çalışabilir?).

Dizin sayfasını tarayıcıda açarsanız, tek bir metin satırı görürsünüz. Ancak HTML’ye bakmak, kodda daha çok gizlendiğini ortaya çıkarır. Değişim konusunda gerçekten endişelenmen gereken tek şey Google Analytics kodu. Rehberiniz Google Analytics'e Rehberiniz Google Analytics'e Ziyaretçilerinizin nereden geldiği, hangi tarayıcıların kullandığı, hangi arama motorlarını kullandıkları hakkında herhangi bir fikriniz var mı? , sayfalarınızdan hangisi en popüler olanıdır? (metni bul “UA-XXXXX-Y” 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ı JavaScripts içerir. Başlarken, bunların hiçbiriyle uğraşmanıza gerek kalmaz.

Ancak, önceden doldurulmuş olmalarını sağlamak, sitenizin HTML’den 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 yerleştirin. İş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 yazacağınızdan emin değil misiniz? Bu harika 404 sayfa tasarım örneklerini inceleyin Harika 404 Hata Sayfası Nasıl Yapılır ve 10 Örnekler Harika 404 Hata Sayfa Nasıl Yapılır ve 10 Örnekleri Akıllıca tasarlanmış bir 404 hata sayfası sıkıcı bir web sitesi ile unutulmaz bir web sitesi arasındaki fark olabilir. .

Favicon Ekleme (ve Diğer Simgeler)

Favicon'unuzu değiştirmek ister misiniz? Sonra favicon.ico değiştirmeniz gereken dosyadır.

Henüz bir tane yoksa, bir tane oluşturmanız gerekir. Bir çevrimiçi favicon jeneratörü kullanabilir veya kendinizinkini tasarlayabilirsiniz. Yalnızca 16 x 16 piksel olduğundan ve .ico dosya türüne sahip olduğundan emin olun.

Bazı düşünceleri favicon'a koymak iyi bir fikirdir. Bu ünlü favorileri kullan Favori Simgeleriniz: Kalabalıktan Ayrılan 14 Favicons Favori Simgeleriniz: 14 Kalabalıktan Öne Çıkan Favicons Favicons'u fark etmeye başladığınızda, ne kadar farklı olduklarının farkına varırsınız. Çoğu sıkıcı, öngörülebilir ve anında unutulabilir. Ancak bazıları kalabalığın arasından sıyrılacak kadar iyidir. beyin fırtınasını yönlendirmek için. Yeni favicon'u eklediğinizde, bunun favicon.ico olarak adlandırıldığından 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 touch simgeleri için kullanılır. Bir web uygulaması oluşturursanız, bir iPhone veya iPad kullanıcısı uygulamayı ana ekranına eklediğinde bu simge kullanılır.
• tile.png ve tile-wide.png Windows içindir “toplu iğne” işlevsellik ve Windows 10'da görünecek.

Tüm bu durumlar için simgeler sağlamak iyi bir fikirdir, ancak bir web uygulaması oluşturmuyorsanız, daha düşük bir öncelik olabilir.

Daha Fazla İşlevsellik Ekleme

HTML'nizi ve favicon'unuzu (eklemek istediğiniz herhangi bir CSS'nin yanı sıra) ekledikten sonra siteniz yayınlanmaya hazırdır. HTML5 Boilerplate'i kullanmak bu kadar kolay. Sunucunuza yükleyin, bitirdiniz!

İşte sayfamız neye benziyor:

Gördüğünüz gibi, sadece birkaç satırlık metin tamamen işlevsel (biraz rahatsız edici ise) bir web sitesi oluşturdu. Çok değil, ama sadece birkaç dakika sürdü. Ve HTML5 ile oldukça genişletilebilir. Bu Boilerplate şablonunun gücü budur.

Fakat isterseniz, Boilerplate şablonu ile yapabileceğiniz daha birçok şey var. Aradığınız belirli bir şey varsa, yardım belgelerinde bulmanız için iyi bir şans var..

HTML5 ile neler yapabileceğinizi bilmiyorsanız, ancak öğrenmek istediğiniz bir sürü web tasarım öğretmeni var Bir Web Sitesi Tasarımı Eğitimine mi ihtiyacınız var? Bu 10 Muhteşem Kaynakları Kullanın Bir Web Sitesi Tasarımı Eğitimine mi ihtiyacınız var? Kullanın Bu 10 Müthiş Kaynak Web tasarımı, sahip olmak için mükemmel bir beceridir - kendi web sitenizi yaratmanıza izin verir ve yeni bir kariyere mükemmel bir yol olabilir. İşte temelleri öğrenmek için nasıl. sana yardım etmek için.