Jak zrobić stronę internetową w HTML i CSS (pełna budowa) | We.Inc
Zbuduj kompletną jednostronicową witrynę w HTML i CSS: szkielet, nagłówek, hero, sekcje, formularz kontaktowy, stopka, responsywny układ i publikacja, z podglądem na żywo.
Jak zrobić stronę internetową w HTML i CSS
Utwórz folder z dwoma zwykłymi plikami tekstowymi: index.html na treść i styles.css na wygląd. Zacznij index.html od standardowego szkieletu (doctype, html, head, body), podłącz arkusz stylów w head, dodaj nagłówek, główne sekcje i stopkę, a potem otwórz plik w przeglądarce. Aby opublikować stronę, wgraj folder na dowolny hosting statyczny.
Pełna budowa w sześciu krokach
Krok
Plik
Co dodajesz
1. Szkielet
doctype, html lang, head z charset, viewport i title
2. Struktura
header, nav, main z sekcjami, footer
3. Treść
Nagłówki, akapity, obraz z tekstem alternatywnym, formularz
4. Styl
Font, kolory, odstępy, wyśrodkowana szerokość treści
5. Układ
Flexbox dla nagłówka, grid dla kart, jedno media query
6. Publikacja
Oba
Wgraj folder na hosting statyczny
To cała budowa, a nie tylko pierwszy plik. Napiszesz stronę małej firmy od pustego folderu do responsywnego układu, a kreator poniżej pozwala wpisać własną nazwę i dane i zobaczyć, jak gotowa strona się aktualizuje. Każdy fragment jest kompletny, więc możesz skopiować dwa końcowe pliki i od razu je otworzyć.
Utwórz nowy folder na komputerze i w dowolnym edytorze zwykłego tekstu utwórz w nim index.html i styles.css.
Wypełnij pola kreatora poniżej, aby ukształtować stronę, a potem skopiuj dwa wygenerowane pliki do swojego folderu.
Kliknij dwukrotnie index.html, aby otworzyć go w przeglądarce. Edytuj, zapisuj i odświeżaj, żeby zobaczyć każdą zmianę.
Przeczytaj sekcje z krokami, aby zrozumieć, co robi każda część kodu, i zmieniać ją pewnie.
Gdy będziesz zadowolony, opublikuj folder jednym ze sposobów hostingu opisanych na końcu.
Używaj edytora kodu, na przykład VS Code, a nie edytora tekstu, który dodaje formatowanie nieczytelne dla przeglądarek.
Nazwij stronę główną index.html. Większość hostingów automatycznie serwuje ten plik, gdy ktoś odwiedza adres folderu.
Nazwy plików pisz małymi literami bez spacji, na przykład about-us.html, bo wiele serwerów rozróżnia wielkość liter.
Przed publikacją sprawdź pracę w pasku urządzeń narzędzi deweloperskich przeglądarki przy wąskiej szerokości telefonu.
Przepuść stronę przez walidator HTML. Wyłapuje niezamknięte tagi, które przeglądarki po cichu zgadują.
Najczęściej zadawane pytania
Czy za coś trzeba płacić, żeby zrobić stronę w HTML?
Nie. Do pisania plików potrzebujesz tylko edytora tekstu i przeglądarki, obie są darmowe. Kilka hostingów statycznych ma darmowe plany dla małych stron; zwykle jedynym kosztem jest własna domena, jeśli jej chcesz.
Po co mi tag meta viewport?
Bez niego przeglądarki w telefonach układają stronę w szerokiej szerokości desktopowej i ją pomniejszają, więc tekst robi się malutki. width=device-width każe im używać prawdziwej szerokości ekranu i dzięki temu media queries działają poprawnie.
Czy strona tylko w HTML może mieć formularz kontaktowy?
HTML rysuje formularz, ale coś musi odebrać wysłane dane. Na hostingu statycznym skieruj action formularza do usługi obsługującej formularze lub do wbudowanej funkcji formularzy Twojego hostingu. Najprostszą alternatywą jest link mailto:.
Jak dodać więcej stron?
Utwórz kolejny plik, na przykład about.html, z tym samym nagłówkiem i stopką, dodaj do niego link <a href="about.html">About</a> i używaj jednego styles.css dla obu. Każda strona powinna mieć własny title i h1.
Czy zamiast tego użyć frameworka?
Nie przy pierwszej stronie. Czysty HTML i CSS ładują się szybko, nie wymagają budowania i uczą, co każdy framework produkuje pod spodem. Po framework sięgnij, gdy potrzebujesz wspólnych komponentów na wielu stronach lub zachowania jak w aplikacji.
Tagi semantyczne naprawdę pracują
header, nav, main, section i footer to nie tylko ładniejsze nazwy dla div. Czytniki ekranu udostępniają je jako punkty orientacyjne, między którymi można skakać, a wyszukiwarki używają ich, by odróżnić główną treść od powtarzających się menu.
Użyj jednego h1 dla tematu strony i h2 dla każdej sekcji. Konspekt nagłówków wypisany osobno powinien czytać się jak spis treści.
Układ, który najpierw działa na telefonach
Domyślnie napisz jednokolumnowy układ telefonu, bo bloki i tak układają się pionowo. Potem dodaj jedno media query z min-width, które włącza kolumny, gdy jest miejsce.
Ogranicz szerokość tekstu przez max-width na kontenerze i wyśrodkuj go przez margin-inline: auto. Linie pozostają wygodne na szerokich ekranach bez dodatkowych reguł.
Publikacja folderu
Hosting statyczny serwuje pliki w niezmienionej postaci, a to wszystko, czego potrzebuje strona w HTML i CSS. Typowe opcje pozwalają przeciągnąć folder do panelu albo podłączyć repozytorium Git, żeby każdy push aktualizował stronę na żywo.
Po wgraniu otwórz adres na telefonie, kliknij każdy link i raz wyślij formularz, aby potwierdzić, że do Ciebie dociera.
Krok 1: szkielet strony
Każda strona HTML zaczyna się od tych samych kilku linii. Doctype utrzymuje przeglądarki w trybie standardów, lang mówi czytnikom ekranu, w jakim języku czytać, a tag viewport sprawia, że telefony używają swojej prawdziwej szerokości.
Punkt startowy index.html
Zapisz to, otwórz w przeglądarce i masz już poprawną stronę z tytułem karty.
Kroki 2 i 3: struktura i treść
Wewnątrz body header zawiera nazwę i menu, main zawiera sekcje, a footer zamyka stronę. Wynik na żywo poniżej nie ma jeszcze stylów, co pokazuje, jak czytelny jest sam dobry HTML.
Nagłówek, hero, karty, formularz kontaktowy i stopka
Edytuj tekst, a wynik się zaktualizuje. Zwróć uwagę na etykiety formularza: kliknięcie etykiety ustawia fokus w jej polu.
Umieść to w styles.css obok index.html. Ustawia czytelną typografię, wyśrodkowaną kolumnę, nagłówek flex i siatkę kart, która na szerszych ekranach ma trzy kolumny.
Kompletny arkusz stylów
Owiń wnętrze header, main i footer w <div class="wrap">, aby wyśrodkować treść, tak jak robi to wynik kreatora.
Krok 6: publikacja
Sposoby na umieszczenie statycznego folderu w sieci
Droga
Dobre dla
Co robisz
Hosting statyczny z przeciąganiem
Twojej pierwszej strony
Wgrywasz folder w panelu hostingu
Hosting statyczny połączony z Git
Stron, które będziesz dalej edytować
Robisz push do repozytorium; hosting wdraża ponownie
Hosting współdzielony
Stron, które potrzebują też poczty lub PHP
Wgrywasz przez menedżer plików lub SFTP do folderu publicznego
Kreator stron
Całkowitego pominięcia kodu
Opisujesz stronę i edytujesz wizualnie
Piekarnia Przystań
Świeży chleb na zakwasie, pieczony przed świtem.
Wiejski chleb na zakwasie
Żytni z ziarnami
Weekendowe wypieki
Zbuduj swoją stronę
Wpisz nazwę firmy, slogan i trzy oferty. Podgląd i oba pliki aktualizują się podczas pisania i są gotowe do skopiowania.