Zawartość
Witamy w przewodniku Creative Bloq, jak używać standardowego szablonu HTML. Jeśli chodzi o tworzenie strony internetowej, podstawowe fundamenty są zawsze bardzo podobne. Dlatego zamiast zaczynać każdą nową stronę od zera, sensowne jest użycie standardowego szablonu HTML, który zawiera podstawową strukturę HTML. To szybki i łatwy sposób na rozpoczęcie tworzenia dowolnej witryny, który pozwoli zaoszczędzić dużo czasu i wysiłku. (Jeśli zaczynasz witrynę od zera, sprawdź nasze ulubione narzędzia do tworzenia witryn).
Rzuć okiem na kod HTML witryny lub strony, a gwarantujemy, że zobaczysz wiele takich samych tagów HTML (jeśli chcesz dowiedzieć się więcej, zapoznaj się z naszym przewodnikiem po tagach HTML), które stanowią podstawową strukturę każdego środowiska internetowego. Każda kiedykolwiek utworzona strona internetowa będzie się uruchamiać z rozszerzeniem html> i jest prawie pewne, że zobaczysz najważniejsze tagi, takie jak head>, title>, body>, p> i wiele więcej.
I nie chodzi tylko o tagi HTML, o których musisz pomyśleć. Projektanci stron internetowych i programiści będą musieli radzić sobie z dziwactwami poszczególnych przeglądarek. Jedna przeglądarka będzie renderować niektóre tagi HTML inaczej niż inna, co oznacza, że układ strony może wyglądać inaczej w różnych przeglądarkach. Sprawdź nasz doskonały post dotyczący układu strony internetowej, aby uzyskać kilka niezbędnych wskazówek, jak prawidłowo zaprojektować projekt. I starannie wybieraj między usługami hostingowymi, aby upewnić się, że Twoja witryna jest na właściwym miejscu.
Uwzględniono również CSS i JavaScript. Ponownie, nie wszystkie przeglądarki interpretują je w ten sam sposób. Ale prawie wszystkie te problemy można wyeliminować za pomocą standardowego szablonu HTML. A najlepsze jest to, że zanim zaczniesz swój najnowszy projekt, wiesz, że po prostu zadziała. Idealny sposób na rozpoczęcie każdego projektu.
Co to jest szablon HTML?
Płyty kotłowe są podobne do szablonów w tym sensie, że zapewniają elementy potrzebne do stworzenia podstawy kompilacji. Zwykle szablon HTML to zbiór plików stanowiących podstawę każdej witryny internetowej i został utworzony przez profesjonalistów z branży, którzy doświadczyli tych samych problemów i nie chcą, aby inni musieli przechodzić przez te same problemy.
Szablony szablonów zwykle zawierają szereg typów plików związanych z kompilacjami internetowymi, w tym dokumenty HTML, podstawowe arkusze stylów CSS, niezbędny kod JavaScript, obrazy zastępcze i dokumentację dotyczącą korzystania z tego, co właśnie pobrałeś.
Popularne szablony HTML
Aby znaleźć się na drodze do nieba HTML5, warto zacząć od HTML5 Boilerplate. Opisuje się jako „najpopularniejszy internetowy szablon frontendowy” i jest eleganckim i prostym szablonem HTML, który zawiera wszystkie niezbędne pliki i zasoby potrzebne do natychmiastowego rozpoczęcia tworzenia.
Najnowsza wersja HTML5 Boilerplate (v7) jest wyposażona w plik index.html, który zawiera tagi obsługujące podstawowe opcje mobilne, Google Analytics i link do Normalize.css, który pomaga wyeliminować niespójności w przeglądarkach. Aby dowiedzieć się, jak działa HTML5 Boilerplate, obejrzyj wideo, które umieścili na swoim kanale YouTube. Ma kilka lat, ale daje ogólne pojęcie o tym, jak działa szablon.
Inną bardzo popularną opcją do zbadania jest Bootstrap. To jest „biblioteka komponentów frontendu” i jest to znacznie bardziej wszechstronna oferta niż platforma HTML5 Boilerplate.Oferuje opcje układu, treści, czcionek, typografii i elementów interfejsu, takich jak przycisk, karuzela, podpowiedzi i wiele innych.
Jeśli jednak nie chcesz wszystkiego, możesz pobrać tylko te elementy, które chcesz zbudować. Słowo ostrzeżenia, Bootstrap jest bardzo popularnym wyborem dla wielu projektantów stron internetowych i programistów, więc staraj się być nieco bardziej pomysłowy podczas korzystania z jego szablonów. Nie chcesz wyglądać jak każda inna witryna.
Korzystanie z HTML5 Boilerplate
Po pobraniu ten darmowy standardowy szablon o otwartym kodzie źródłowym zapewnia podstawę strony html (index.html), kilka arkuszy stylów CSS, kluczowe pliki JavaScript, folder img do umieszczania obrazów, stronę 404, pliki konfiguracyjne i inne dokumentacja.
Przy pierwszym pobieraniu dobrym pomysłem jest zrobienie kopii, aby mieć jako punkt odniesienia czystą, nieedytowaną wersję plików.
Aby rozpocząć, najpierw zastąp plik favicon.ico i icon.png pliki z Twoim logo - pojawią się jako ulubiona ikona Twojej witryny i ikona, gdy witryna zostanie zapisana na czyimś ekranie głównym iOS. Generator online może pomóc w tworzeniu nowych obrazów.
W kodzie HTML znajduje się zbiór tagów, z którymi będziesz się dobrze zaznajomić, i kilka rzeczy, z którymi nie jesteś zaznajomiony. Na przykład Modernizr może być czymś, czego nie znasz. To jest „kod JavaScript, który automatycznie wykrywa dostępność technologii internetowych nowej generacji”. Dzięki temu Twoja witryna będzie zawsze aktualna. Ostatni element skryptu dotyczy Google Analytics, można go usunąć, ale jeśli go używasz, po prostu dodaj własny kod Google Analytics.
Najlepiej zostaw wszystko tak, jak znalazłeś i skoncentruj się na ciało> tag, ponieważ jest tam zawartość. Dodaj zawartość po otwarciu ciało> tag, a najlepiej przed skrypt> tagi, które pojawiają się bezpośrednio po p> tagi. Upewnij się, że strona ma rozszerzenie tytuł> i wypełnij 'zawartość' wartość w 'opis' metatag. To daje wprowadzenie do tego, o czym jest strona, co jest dobre dla SEO.
Zwróć również uwagę, że wszystkie łącza są względne w tym dokumencie, więc jeśli zaczniesz zagnieżdżać strony internetowe w folderach, może być konieczna zmiana ich na łącza względne lub bezwzględne. Na przykład, script src = "js / plugins.js"> może być konieczne script src = "http://www.mysitename.com/js/plugins.js">. Ponadto dobrą praktyką jest dodawanie komentarzy, jeśli wprowadzasz jakiekolwiek większe zmiany w kodzie HTML. Więc kiedy wrócisz, możesz sobie przypomnieć, jakie zmiany zostały wprowadzone.
Edycje CSS
Gdy zdobędziesz doświadczenie, warto rozważyć niestandardową kompilację przy użyciu programu Initializr, zachowując potrzebne komponenty i rezygnując z tych, których nie masz. Ponadto, jeśli tworzysz witrynę WordPress, zapoznaj się z pustym motywem specyficznym dla WordPress, takim jak HTML5 Blank. Te pliki do pobrania i usługi są bezpłatne, więc możesz je przeglądać i eksperymentować w wolnym czasie.
Mimo to, cokolwiek zrobisz, odrobina pracy i dochodzenia teraz powinna zaoszczędzić ci dużo czasu później, kiedy po prostu wyciągniesz swój standardowy szablon (bezpiecznie schowany w chmurze), aby uzyskać pęknięcie na nowej stronie internetowej.
Ta treść pierwotnie ukazała się w magazynie sieciowym.
