Jak stworzyć stronę internetową w kilka minut za pomocą HTML5 Boilerplate

Jak stworzyć stronę internetową w kilka minut za pomocą HTML5 Boilerplate

Kiedy tworzysz nową witrynę, w dzisiejszych czasach chcesz, aby była zgodna z HTML5 . Ale nie chcesz też tracić niepotrzebnie czasu na poznawanie zawiłości HTML5 od podstaw, prawda?





Na szczęście Szablon schematu HTML5 może pomóc. Jest to prosty szablon front-end, którego możesz użyć do stworzenia witryny HTML5 w kilka minut. Ale jest też na tyle potężny, że można go wykorzystać jako podstawę złożonej, w pełni funkcjonalnej witryny.



jak grupować karty w chrome

W tym samouczku HTML5 Boilerplate omówimy elementy zawarte w szablonie, podstawy, które musisz wiedzieć o tym, jak z niego korzystać, oraz niektóre zasoby do dalszej nauki. Pokażę Ci również, jak wykorzystałem szablon do stworzenia bardzo prostej witryny z zaledwie kilkoma wierszami kodu HTML.





Szablon schematu HTML5

Po pobraniu szablonu z HTML5 Boilerplate otrzymujesz szereg folderów i plików. Oto zawartość pliku ZIP:

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.png

Nie będziemy tu omawiać wszystkich elementów szablonu, tylko podstawy. Aby jednak upewnić się, że masz zasoby do korzystania ze wszystkich plików, zaczniemy od dokumentów pomocy.



Dokumentacja pomocy dotyczącej płyt kotłowych HTML5

Boilerplate ma kolekcję dokumenty pomocy hostowane na GitHub . Jest to duża pomoc, gdy masz pytania techniczne lub zastanawiasz się, dlaczego coś zostało zaprojektowane tak, jak było.

Prawie wszystko w dokumentacji jest również zawarte w folderze doc szablonu. Zobaczysz wiele plików Markdown (.md), które są bardzo pomocne w ustaleniu, jak zbudować witrynę Boilerplate.



Jeśli chcesz przeczytać wszystko, zacznij od TOC.md i podążaj za odnośnikami do innych plików Markdown. Jeśli szukasz pomocy w konkretnym problemie, znajdź plik, który wydaje się być powiązany; use.md to dobre miejsce na rozpoczęcie.

Zaczynając od CSS w HTML5 Boilerplate

Szablon HTML5 Boilerplate zawiera dwa pliki CSS: main.css i normalize.css.



Drugi plik, normalize.css, pomaga różnym przeglądarkom renderować elementy w spójny sposób. Aby dowiedzieć się więcej o tym, jak to działa, sprawdź projekt normalize.css na GitHub .

Tymczasem main.css to miejsce, w którym umieścisz dowolny kod, którego potrzebujesz sformatuj swoją stronę za pomocą CSS . Standardowy CSS zawarty w szablonie jest wynikiem badań przeprowadzonych przez programistów i społeczność HTML5 Boilerplate. Jest czytelny i ładnie wyświetla się w różnych przeglądarkach.

Jeśli chcesz dodać własny kod CSS, możesz dodać go do sekcji Style niestandardowe autora. Dodam trochę stylu linków do naszej przykładowej strony:

Istnieje również wiele przydatnych klas pomocniczych zawartych w podstawowym CSS. Niektóre z nich ukrywają elementy ze standardowych przeglądarek i czytników ekranu (lub niektórych kombinacji).

Również w main.css znajdziesz wsparcie dla responsywnego projektowania i pomocnych ustawień drukowania.

Wszystkie te elementy są jasno wyjaśnione w komentarzach w CSS:

Ogólnie rzecz biorąc, możesz zacząć od podstawowego CSS.

Dodawanie własnego kodu HTML do szablonu

Boilerplate zawiera dwa pliki HTML: 404.html i index.html.

Strona indeksu to miejsce, w którym utworzysz swoją stronę główną (lub jedyną stronę, jeśli masz zamiar zrobić prosty jednostronicowy ).

Jeśli otworzysz stronę indeksu w przeglądarce, zobaczysz pojedynczy wiersz tekstu. Ale zaglądanie do kodu HTML ujawnia o wiele więcej kryjówek w kodzie. Jedyne, o co naprawdę musisz się martwić, to kod Google Analytics (znajdź tekst „UA-XXXXX-Y” i zastąp go własnym kodem śledzenia).

Reszta kodu HTML na stronie indeksu zawiera informacje o aplikacjach internetowych, powiadomienia dla starych przeglądarek i przydatne skrypty JavaScript. Kiedy zaczynasz, nie powinieneś z tym wszystkim zadzierać.

Jednak ich wstępne wypełnienie to dobry sposób na upewnienie się, że Twoja witryna jest przygotowana na maksymalne wykorzystanie HTML5.

Aby utworzyć stronę, wstaw kod HTML między tagami w pliku. Oto kilka podstawowych informacji, które dodam o sobie:

Chcesz utworzyć więcej stron? Utwórz kopie tego pliku i zmień ich nazwy, aby nie trzeba było kopiować i wklejać całego kodu HTML. Następnie dodaj swoją treść.

Jeśli chcesz dostosować swoją stronę 404, po prostu zmodyfikuj plik HTML. Nie wiesz, co umieścić na swojej stronie 404? Sprawdź te wspaniałe przykłady projektów stron 404 .

Dodawanie favicon (i innych ikon)

Chcesz zastąpić faviconę? Następnie favicon.ico to plik, który musisz zastąpić.

Jeśli jeszcze go nie masz, musisz go utworzyć. Możesz skorzystać z internetowego generatora favicon lub zaprojektować własny. Upewnij się tylko, że ma rozmiar 16 x 16 pikseli i typ pliku .ico.

ile mogę zarobić wydobycia bitcoina

Dobrym pomysłem jest zastanowienie się nad faviconem. Użyj tych słynnych favicon, aby poprowadzić burzę mózgów. Upewnij się, że po dodaniu nowej favicon nosi ona nazwę favicon.ico.

Możesz zauważyć, że w katalogu głównym witryny znajdują się trzy inne obrazy: icon.png, tile.png i tile-wide.png. Po co to jest?

  • icon.png służy do ikon dotykowych Apple. Jeśli tworzysz aplikację internetową, ta ikona będzie używana, gdy użytkownik iPhone'a lub iPada doda ją do swojego ekranu głównego.
  • tile.png i tile-wide.png są przeznaczone dla funkcji „przypinania” systemu Windows i pojawią się w systemie Windows 10.

Dobrym pomysłem jest zapewnienie ikon dla wszystkich tych przypadków — ale jeśli nie tworzysz aplikacji internetowej, może to mieć niższy priorytet.

Dodawanie większej funkcjonalności

Po dodaniu kodu HTML i favicon (jak również dowolnego kodu CSS, który możesz chcieć dołączyć), Twoja witryna jest gotowa do opublikowania. Tak łatwo jest używać HTML5 Boilerplate. Prześlij go na swój serwer i gotowe!

Oto jak wygląda nasza strona:

Jak widać, zaledwie kilka linijek tekstu stworzyło w pełni funkcjonalną (choć nieco mdłą) stronę internetową. To niewiele, ale zajęło to tylko kilka minut. I jest bardzo rozszerzalny dzięki HTML5. Na tym polega siła szablonu Boilerplate.

Ale jeśli chcesz, możesz zrobić o wiele więcej z szablonem Boilerplate. Jeśli szukasz czegoś konkretnego, istnieje duża szansa, że ​​znajdziesz to w dokumentacji pomocy.

Jeśli nie masz pewności, co możesz zrobić z HTML5, ale chcesz się dowiedzieć, możesz skorzystać z wielu samouczków dotyczących projektowania stron internetowych.

Udział Udział Ćwierkać E-mail Czy można zainstalować system Windows 11 na niezgodnym komputerze?

Możesz teraz zainstalować system Windows 11 na starszych komputerach z oficjalnym plikiem ISO ... ale czy to dobry pomysł?

Czytaj dalej Powiązane tematy
  • Programowanie
  • HTML5
  • Poradniki kodowania
O autorze Potem Albright(506 opublikowanych artykułów)

Dann jest konsultantem ds. strategii treści i marketingu, który pomaga firmom generować popyt i leady. Prowadzi również bloga o strategii i content marketingu na dannalbright.com.

Więcej od Danna Albrighta

Zapisz się do naszego newslettera

Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!

Kliknij tutaj, aby zasubskrybować