Jak kodować stronę internetową

Jak kodować stronę internetowąChcesz dowiedzieć się, jak stworzyć stronę internetową z HTML i CSS?


Jesteś we właściwym miejscu. W tym przewodniku przedstawiamy wszystkie kroki, aby przejść z pustego ekranu do działającej witryny zoptymalizowanej i jednocześnie ładnie wyglądającej.

Ale najpierw czym jest HTML i CSS?

Cóż, możesz po prostu wyszukać oba terminy w Wikipedii, ale te definicje nie są zbyt przyjazne dla czytelników. Uprośćmy trochę:

  • HTML (Hypertext Markup Language) określa strukturę i zawartość strony internetowej – gdzie rzeczy idą, w jaki sposób są ułożone i co jest na stronie
  • CSS (Kaskadowe arkusze stylów) określa stylizacja / prezentacja strony internetowej i jej elementów

Tak naprawdę nie możesz mieć jednego bez drugiego – oba razem tworzą ostateczną stronę internetową, jej wygląd i zawartą na niej zawartość.

Uwaga; kiedy mówimy „strona internetowa”, mamy na myśli pojedynczy dokument HTML – pojedynczą stronę, która jest częścią Twojej witryny. Natomiast „strona internetowa” jest kompletna – cała twoja strona ze wszystkimi indywidualnymi stronami internetowymi.

Jak stworzyć stronę internetową za pomocą HTML i CSS (spis treści):

  1. Naucz się podstaw HTML
  2. Zrozumieć strukturę dokumentu HTML
  3. Poznaj selektory CSS
  4. Złóż razem arkusz stylów CSS
  5. Zdobądź Bootstrap
  6. Wybierz projekt
  7. Dostosuj swoją stronę za pomocą HTML i CSS
  8. Dodaj treść i obrazy
  9. Dostosuj kolory i czcionki
  10. Utwórz dodatkowe strony

Całkowity czas na stworzenie strony internetowej: 4-5 godzin
Poziom umiejętności: Pośredni

Jeśli uważasz, że jest to zbyt skomplikowane, zalecamy utworzenie witryny za pomocą WordPress lub wybranie jednego z twórców stron. Możesz również sprawdzić listę wybranych najlepszych IDE do tworzenia stron internetowych. 

Contents

Zanim zaczniesz, zbierz swoje zasoby:

Pierwszą rzeczą, której potrzebujesz, nawet przed utworzeniem strony internetowej z HTML i CSS, jest serwer WWW (hosting). Nie martw się jednak; nie musisz kupować własnej maszyny. Wiele firm hostingowych sprzedaje prostą usługę hostingową na swoich komputerach. Wystarczy wyszukać w Google „hosting” i wybrać coś, co nie jest zbyt drogie.

Po posortowaniu serwera następną rzeczą, której potrzebujesz, jest nazwa domeny. Nazwa domeny to nazwa witryny w sieci. Na przykład nazwa domeny tej witryny to websitesetup.org.

Jeśli masz zarówno nazwę domeny, jak i serwer, możesz połączyć je ze sobą.

Pełne ujawnienie informacji: Zarabiamy prowizję, jeśli ostatecznie kupisz Bluehost za pośrednictwem naszych linków polecających w tym przewodniku. Pomaga nam to utrzymać konfigurację witryny i działanie oraz aktualność. Dziękuję za wsparcie.

Aby rozwiązać ten problem bez żadnego problemu, zalecamy zarejestrowanie się w firmie takiej jak Bluehost.

Zajmą się całą konfiguracją dla Ciebie. Oznacza to, że będą: (za) załóż konto hostingowe dla siebie, (b) zarejestruj nazwę domeny w swoim imieniu, (do) skonfiguruj wszystko do współpracy, oraz (re) daje dostęp do łatwego w obsłudze pulpitu nawigacyjnego.

Śmiało i zarejestruj się Bluehost, poczekamy. Gdy wrócisz i skonfigurujesz serwer internetowy i będziesz gotowy do pracy, przewiń do następnego kroku.

P.S. Jeśli chcesz po prostu eksperymentować z witryną HTML na swoim komputerze, i nie zamierzaj upubliczniać tego, użyj lokalnego serwera sieciowego. Ten, który polecamy i lubimy używać, nazywa się XAMPP. Ma wersje na komputery Mac i PC i jest łatwy w użyciu. Oto przewodnik jak zainstalować go na swoim komputerze.

1. Naucz się podstaw HTML

Głównym elementem struktury HTML jest HTML etykietka.

Tag na przykład wygląda następująco:

COŚ

Tutaj mamy do czynienia z etykietka. Ten będzie pogrubienie fragment tekstu między tagiem otwierającym () i tag zamykający (). W tym przypadku jest to fragment tekstu COŚ.

Ale są też inne tagi, żeby wymienić tylko kilka:

  • ... zaznaczy kursywą tekst między znacznikami otwierającym i zamykającym
  • ... podkreśli to
  • ...

    jest akapitem tekstu


  • ...

    jest głównym nagłówkiem na stronie

Oprócz tych prostych tagów istnieją również bardziej złożone tagi. Na przykład, jeśli chcesz zbudować listę taką jak poniżej:

  • Przedmiot 1
  • Pozycja 2
  • Pozycja 3

… Możesz to zrobić za pomocą następującego kodu HTML:

  • Przedmiot 1
  • Pozycja 2
  • Pozycja 3

Lub, jeśli chcesz dodać link do innej strony, takiej jak ta:

To jest link do naszej strony głównej

… Możesz to zrobić za pomocą tego fragmentu kodu:

To jest link do mojej strony głównej

Przeczytaj to, aby uzyskać pełna lista tagów HTML. Stanie się przydatny podczas tworzenia witryny z HTML i CSS.

2. Zrozumieć strukturę dokumentu HTML

Pomyśl o swojej stronie HTML, jakby była zbudowana z Legos. Kładzie się na sobie różne cegły, aby uzyskać większą strukturę.

Ale zamiast klocków Lego otrzymujesz tagi HTML…

Oto najprostsza struktura dokumentu HTML:





Witaj świecie!


Witaj świecie!

Moja pierwsza strona internetowa.

Możesz wziąć powyższy kod, skopiować i wkleić go do nowego pliku, zapisać dokument jako index.html, i będzie to idealnie poprawna strona HTML.

Wyjaśnijmy poszczególne części tego kodu:

  • – wstępna deklaracja dokumentu
  • – kolejna deklaracja; mówi, że następny będzie dokument HTML napisany w języku angielskim
  • – oznacza początek głowa Sekcja; głowa sekcja jest miejscem, gdzie idą wszystkie podstawowe parametry strony; większość z nich nie będzie wyświetlana na ekranie; po prostu określają, co się dzieje pod maską
  • – określa, jakiego zestawu znaków używa się do napisania dokumentu; nie trzeba poświęcać na to zbyt wiele czasu; po prostu użyj tej deklaracji w obecnej postaci
  • Witaj świecie! – tytuł strony; tak zobaczą ludzie na pasku tytułowym przeglądarki, np .:

tytuł w przeglądarce internetowej podczas tworzenia strony internetowej z HTML i CSS

  • – oznacza początek ciało Sekcja; tutaj idzie cała zawartość strony; jest to główna część dokumentu HTML; podkreślmy to, że w tej sekcji znajdziesz wszystkie treści, które mają pojawić się na stronie

  • Witaj świecie!

    – główny nagłówek na stronie

  • Moja pierwsza strona internetowa.

    – prosty akapit tekstu

  • – tag zamykający całego dokumentu HTML

Ważna uwaga tutaj. Praca nad plikiem HTML w podstawowej aplikacji tekstowej lub złożonym procesorze tekstowym, takim jak MS Word, nie jest dobrym doświadczeniem. Aby ułatwić sobie życie, zainstaluj narzędzie o nazwie Wzniosły tekst. Ma wersje na komputery Mac i PC i jest bezpłatny.

Dlaczego to jest lepsze? Między innymi pokoloruje składnię pliku HTML. Oznacza to, że wizualnie odróżnia tagi HTML od treści tekstowych, parametrów tagów i innych wartości. Zasadniczo wszystko stanie się czytelne. Oto jak wygląda nasza prosta struktura HTML w Sublime Text:

wysublimowana składnia jest świetna podczas tworzenia strony internetowej z HTML i CSS

Dobra, wracając do tematu. Możesz wziąć to nowe index.html plik, skopiuj go do głównego katalogu serwera, a następnie przejrzyj tę stronę, przechodząc do niego za pomocą przeglądarki internetowej. Nie bądź jednak zbyt podekscytowany; ta strona będzie raczej brzydka (patrz poniżej).

ta strona jest brzydka

Okej, więc strona jest brzydka, jak to zrobić?

3. Poznaj selektory CSS

Podobnie jak HTML ma swoje tagi, CSS ma selektory.

Selektory opisują, jak dany element powinien zachowywać się pod względem wyglądu. Oto przykład selektora CSS:

p {
rozmiar czcionki: 18px;
}

Ten selektor wskazuje, że cały HTML

tagi w dokumencie będą miały rozmiar czcionki 18px.

Jednak bardziej praktycznym sposobem korzystania z selektorów CSS nie jest ograniczenie wszystkich znaczników danego typu do określonego stylu, ale raczej tworzenie różnych „klas” i przypisywanie ich do znaczników jeden po drugim..

Na przykład selektor klasy w CSS wygląda następująco:

.normalny tekst {
rozmiar czcionki: 18px;
}

Zwróć uwagę na kropkę (.) przed nazwą klasy (tekst normalny). Po zdefiniowaniu klasy „normal-text” możemy teraz przypisać tę klasę do określonych tagów HTML, które chcemy uzyskać rozmiar 18 pikseli.

Na przykład:

Ten tekst będzie miał 18 pikseli.

Poświęćmy jeszcze minutę na wyjaśnienie wszystkich elementów powyższego fragmentu kodu CSS:

  • .tekst normalny – definicja klasy; wszystko po nazwie klasy oraz między nawiasami otwierającymi i zamykającymi {} określa, jak będą wyglądały elementy przypisane do tej klasy
  • rozmiar czcionki – przykładowa właściwość CSS
  • 18px – wartość przypisana do właściwości

Oprócz powyższego istnieje mnóstwo właściwości CSS rozmiar czcionki. Tutaj jest pełna lista jeśli jesteś ciekawy.

4. Ułóż arkusz stylów CSS

Dokument HTML jest bardzo strukturalny – każdy element ma swoje miejsce, a kolejność elementów ma kluczowe znaczenie dla ostatecznej budowy i wyglądu danej strony internetowej. Dokument CSS jest o wiele mniejszy.

Dokumenty CSS są często nazywane arkusze stylów. Zasadniczo arkusz stylów CSS jest listą wszystkich definicji klas używanych w odpowiednim dokumencie HTML. Kolejność definicji klas nie jest tak istotna przez większość czasu (przynajmniej w przypadku prostych projektów).

Sposób złożenia arkusza stylów CSS polega na zdefiniowaniu każdej klasy jeden po drugim, a następnie przetestowaniu, czy wynik w projekcie strony jest tym, czego chciałeś.

To brzmi jak żmudna praca i tak jest.

Ułatwimy Ci jednak pracę, a nie zmuszymy Cię do nauki projektowania HTML i CSS ręcznie. Zamiast uczyć wszystkiego od podstaw, weźmiemy żywy organizm i podzielimy jego elementy.

Tutaj zaczyna się gra o nazwie Bootstrap.

5. Pobierz / zainstaluj Bootstrap

Bootstrap to zestaw narzędzi typu open source do tworzenia stron internetowych z HTML i CSS.

W języku angielskim Bootstrap dba o podstawową strukturę dokumentu HTML i arkusza stylów CSS. Zapewnia platformę, która zapewnia, że ​​główne rusztowanie twojej strony jest gotowe i zoptymalizowane do dalszego rozwoju.

Zasadniczo, Bootstrap pozwala nie zaczynać od zera, a zamiast tego przejść bezpośrednio do zabawnej części. Dzięki temu nie musisz pracować nad często nudnymi wczesnymi etapami tworzenia strony internetowej z HTML i CSS.

Istnieją dwie ścieżki:

  • Opcja (za): naucz się Bootstrap – przejdź do strony głównej Bootstrap, pobierz główny pakiet Bootstrap i zacznij na nim budować.
  • Opcja (b): skorzystaj ze skrótu – zdobądź pakiet startowy do Bootstrap z ładnym wyglądem i już zbudowaną stroną demonstracyjną.

Opcja (za) na początku może mieć trochę krzywej uczenia się, ale nie jest to wcale gorszy sposób na stworzenie strony internetowej z HTML i CSS. Po opanowaniu podstawowej struktury Bootstrap łatwiej będzie Ci budować nowe strony i sprawiać, by wyglądały dokładnie tak, jak chcesz. The Dokumentacja bootstrapu to świetne miejsce na rozpoczęcie tej ścieżki.

Pójdziemy z Opcją (b) dla tego przewodnika. Robimy to z kilku powodów, szef:

Zaczynając od gotowej struktury oszczędza wiele wysiłku, próbując zrozumieć podstawowe potrzeby dokumentu HTML. Pozwala to skupić się na ciekawych rzeczach – takich jak układanie treści i poprawianie wyglądu.

Krótko mówiąc, uczenie się w ten sposób zapewni szybszy efekt, który naszym zdaniem jest tym, czego chcesz.

6. Wybierz projekt

Podczas tworzenia witryny z HTML i CSS możesz swobodnie korzystać z dowolnego szablonu Bootstrap. Wszystkie powinny działać podobnie.

Jednak w tym przewodniku użyjemy jednego z szablonów do Uruchom Bootstrap. Mają duży wybór darmowych szablonów, które są zoptymalizowane, działają bezproblemowo, a także są bardzo dobrze zaprojektowane.

Temat, którego będziemy używać, nazywa się Twórczy. Ostateczny efekt, który zamierzamy, będzie wyglądał mniej więcej tak:

końcowa strona główna po utworzeniu strony internetowej z HTML i CSS

Na początek, szablon Kreacji, kliknij Darmowe pobieranie przycisk po prawej stronie (włączony ta strona) i zapisz pakiet zip na pulpicie.

Rozpakuj pakiet i przenieś jego zawartość do głównego katalogu lokalnego serwera WWW lub konta hostingowego.

Teraz otwórz tę lokalizację za pomocą przeglądarki internetowej. Zobaczysz standardową wersję szablonu:

uruchom szablon bootstrap

Wygląda już całkiem ładnie, ale teraz nadszedł czas, aby nauczyć się korzystać z HTML i CSS, aby zrobić dokładnie to, co chcesz.

7. Dostosuj swoją stronę za pomocą HTML i CSS

Najpierw popracujmy nad stroną główną projektu. To pokaże nam, jak zastąpić grafikę, teksty i ogólnie wszystko dostroić.

Krótko powyżej omówiliśmy sekcję główną dokumentu HTML. Przyjrzyjmy się temu dokładniej tutaj.

Po otwarciu index.html plik Twojej strony Bootstrap w Sublime Text, zobaczysz taką sekcję nagłówka (usunęliśmy wszystkie nieistotne rzeczy z tego kodu dla przejrzystości *):






Kreatywny - uruchom motyw Bootstrap





* Oprócz powyższego istniał również kod do ładowania czcionek Google, ikon czcionek Awesome i modułu lightbox dla obrazów wyświetlanych na stronie.

Większość deklaracji tutaj już wiemy, ale jest kilka nowych:

  • Po pierwsze, wszystko pomiędzy nawiasy kwadratowe to komentarz HTML. Nie pojawia się na ostatniej stronie.
  • – jest to jeden z własnych tagów deklaracji Bootstrap. Określa rozmiar rzutni witryny.
  • – ta linia ładuje arkusz stylów CSS szablonu Creative, a także zawiera domyślny arkusz stylów Bootstrap.

Zmodyfikujmy tę ostatnią deklarację – linię ładującą CSS – aby ułatwić jej późniejszą pracę.

Zmień tę linię na:


To tylko niewielka różnica – załaduje nieskróconą wersję tego samego arkusza CSS. Ta wersja jest po prostu łatwiejsza do modyfikacji.

Teraz przewiń w dół do samego końca index.html plik. Przed zamknięciem zobaczysz następujące wiersze ciało etykietka:

        

Są odpowiedzialni za ładowanie plików JavaScript, które obsługują niektóre bardziej wizualne interakcje projektu. Na przykład po kliknięciu przycisku O w górnym menu, przejdziesz płynnie do bloku about na tej samej stronie – odbywa się to między innymi za pomocą JavaScript. Nie musimy teraz mieć kłopotów ze zrozumieniem tego kodu. Zostawmy to na inny czas.

Zamiast tego popracujmy nad dodaniem własnych treści do strony:

8. Dodaj zawartość i obrazy

Pierwszą rzeczą, którą chcesz zrobić, jest zmiana tytułu strony.

1. Zmień tytuł

Znaleźć tytuł tag w sekcji nagłówka i zamień tekst między tagami na coś własnego:

Moja strona HTML

2. Dostosuj sekcję Bohatera

Część bohatera nazywamy tym blokiem:

sekcja bohatera

Byłoby fajnie mieć w sobie naszą własną treść. Aby zmodyfikować ten blok, wróć do swojego index.html plik i znajdź tę sekcję:

...


...

Dowiedz się więcej

Cały blok kodu kontroluje zawartość sekcji bohaterów.

Oto kilka nowych tagów:


  • – jest to tag określający, że cała sekcja jest nagłówkiem strony; ten tag ma kilka braci i sióstr w formie
    tag i
    etykietka
  • – jest ogólnym znacznikiem CSS, który wskazuje, że poniżej znajduje się osobna sekcja (aka podział) w dokumencie HTML; jego użycie ułatwia wizualne rozróżnienie poszczególnych sekcji na stronie

Zauważysz również, że niektóre inne tagi (które już znamy) wyglądają na nieco bardziej złożone, z przypisanymi do nich wieloma klasami CSS. Na przykład:

...

Klasy przypisane do

tag tutaj jest tekst-wielkie litery tekst-białe czcionki-waga-pogrubienie.

Klasy te zostały utworzone przez Bootstrap i twórcę motywu kreatywnego. Dobrą wiadomością jest to, że Ty również możesz z nich swobodnie korzystać podczas tworzenia strony internetowej z HTML i CSS.

Szczerze mówiąc, możesz dostosować dowolny tag dodany do struktury strony, przypisując mu dowolną liczbę klas.

Jeśli chcesz zobaczyć pełną listę dostępnych klas, możesz otworzyć główny creative.css plik, który znajduje się w css podkatalog tematu Kreatywny.

Zrozumienie wszystkich tych klas może początkowo wydawać się zastraszające, ale w rzeczywistości jest o wiele łatwiejsze niż się wydaje.

Na przykład jedna z klas przypisanych do niektórych akapitów w naszym index.html plik jest font-weight-light. Kiedy wskoczysz do creative.css plik i Ctrl + F. szukając nazwy tej klasy, zobaczysz, że po prostu ją ustawia grubość czcionki parametr taki jak:

.font-weight-light {
grubość czcionki: 300;
}

Modyfikowanie domyślnych tekstów w index.html plik jest bardzo prosty. Wystarczy znaleźć tag, który chcesz edytować, i zmienić zawartość między tagami otwierającymi i zamykającymi.

Na przykład, aby zmienić główny nagłówek, po prostu zmień to:

Twój ulubiony ...

Do czegoś takiego:

Podziwiaj moją stronę HTML!

Możesz zrobić to samo ze wszystkimi akapitami i innymi tagami na stronie.

Ważne jest to, że możesz także swobodnie dodawać nowe akapity. Na przykład możemy wziąć akapit, który już znajduje się na stronie, zrobić jego kopię i wkleić tuż pod oryginalnym akapitem; tak:

Uruchom Bootstrap może ...

Ustęp 2

Teraz, z zadbanymi tekstami, zastąpmy obraz w tle.

Jest to nieco bardziej skomplikowane, ponieważ wymaga przejścia do pliku arkusza stylów CSS i dokonania modyfikacji. Jak widać w kodzie HTML Szczyt masztu sekcja, żaden tag nie wskazywałby włączenia obrazu na stronę w jakikolwiek sposób. Wszystko to odbywa się za pośrednictwem CSS.

Gdy spojrzysz jeszcze raz na cały blok obsługi kodu Szczyt masztu w sekcji zobaczysz, że jest przypisany do klasy o nazwie szczyt masztu. Ten wiersz kodu obsługuje przypisanie klasy:

The szczyt masztu klasa to ta, która umieszcza obraz w tle całego bloku.

Otwórzmy creative.css plik ponownie i poszukaj klasy „masthead”:

header.masthead {
wyściółka: 10rem;
padding-bottom: calc (10rem - 72px);
tło: gradient liniowy (do dołu, rgba (92, 77, 66, 0,8) 0%, rgba (92, 77, 66, 0,8) 100%), url ("../ img / bg-masthead.jpg" );
pozycja tła: środek;
powtarzanie w tle: brak powtarzania;
załącznik w tle: przewiń;
rozmiar tła: okładka;
}

Ten kod robi różne fantazyjne rzeczy na obrazie (np. Dodawanie nakładki, cieniowanie itp.), Ale ważną częścią jest to: URL („../ img / bg-masthead.jpg”). Jest to linia wskazująca, gdzie znaleźć obraz tła. Będzie w img podkatalog.

Aby zmienić ten obraz tła, weź dowolny obraz, skopiuj go do img podkatalog, a następnie skopiuj i wklej jego nazwę w miejsce oryginału bg-masthead.jpg plik. Krótko mówiąc, zmień to: URL („../ img / bg-masthead.jpg”) do tego: adres URL („../ img / YOURFILE.jpg”).

3. Dostosuj inne bloki na stronie

Gdy przejdziesz przez index.html plik, zauważysz, że na stronie jest już wiele różnych sekcji. Mamy sekcję dotyczącą nawigacja, i o blok usługi, za teczka, za wezwanie do działania, za kontakt blok i stopka.

Chociaż we wszystkich tych sekcjach jest inna treść, same sekcje mają podobną strukturę. Wszystkie mają z grubsza ten sam zestaw tagów HTML – tylko różne klasy CSS przypisane do nich.

Najlepszym sposobem na zmodyfikowanie strony, aby dopasować ją do swoich potrzeb, jest przechodzenie przez bloki jeden po drugim i eksperymentowanie poprzez zmianę rzeczy.

Oprócz modyfikowania tekstów możesz także przenosić całe sekcje (części między

tagi). To prawda, że ​​musisz to zrobić ręcznie (wycinając, a następnie wklejając elementy na miejsce), nadal jest to łatwe do zrobienia.

Biorąc to pod uwagę, istnieją dwie dość podstawowe modyfikacje, o których jeszcze nie rozmawialiśmy. Omówmy teraz:

9. Dostrój kolory i czcionki

Zmiana kolorów lub czcionek jest bardzo łatwa w HTML i CSS. Najprostszą rzeczą, jaką możesz zrobić, jest przypisanie stylizacji do znacznika HTML. Na przykład:

Czerwony tekst

W HTML kolory są reprezentowane przez ich wartości szesnastkowe; „# FF0000” jest czerwony. Oto tabela wszystkich pozostałych standardowe kolory.

Lepszym sposobem przypisywania kolorów jest zrobienie tego za pomocą arkusza stylów CSS. Na przykład, aby uzyskać taki sam efekt jak powyższy kod, możemy umieścić to w naszym arkuszu stylów CSS:

p.red {
kolor: # FF0000;
}

A następnie użyj następującego fragmentu kodu HTML w głównym dokumencie:

Czerwony tekst

Ta druga metoda polega zasadniczo na tym, jak się robi w Bootstrap.

Aby zmienić kolor dowolnego tekstu na stronie, najpierw znajdź znacznik odpowiedzialny za stylizację tego tekstu, a następnie przejdź do arkusza stylów i zmodyfikuj odpowiednią klasę lub utwórz nową klasę.

Oto przykład; powiedz, że chcesz zmienić kolor nagłówka z napisem „Do Twojej dyspozycji”. Obecnie jest czarny, a kod go obsługuje:

Do usług

Najlepszym sposobem na zmianę koloru jest utworzenie nowej klasy o nazwie powiedzmy, .tekstowo-pomarańczowy i ustaw tam wartość koloru, tak:

.tekstowo-pomarańczowy {
kolor: # f4623a! ważne;
}

* The !ważny upewni się, że to ustawienie kolorów zastąpi wszelkie inne ustawienia kolorów, które pojawiły się przed nim.

Teraz możemy wrócić do naszego nagłówka i zmienić jego kod na:

Do usług

Po tych zmianach nagłówek będzie teraz pomarańczowy:

pomarańczowy h2

Aby zmienić czcionkę i jej rozmiar, możesz zrobić coś bardzo podobnego. Ale najpierw przykład, jak wygląda blok definicji czcionek w CSS:

.SOMECLASS {
rodzina czcionek: „Merriweather”, Roboto, sans-serif;
rozmiar czcionki: 18px;
}
  • wczytaj czcionki Merriweather, Roboto, i domyślny system sans-serif czcionka (przeczytaj to, aby dowiedzieć się o czcionkach bezpiecznych dla sieci)
  • ustaw rozmiar czcionki na 18px

Tego rodzaju definicję można umieścić w dowolnej klasie CSS, podobnie jak definicja koloru. W rzeczywistości definicje czcionek i kolorów często znajdują się w deklaracjach tej samej klasy.

Wracając do naszego poprzedniego przykładu, aby zmienić rozmiar czcionki dla nagłówka z napisem „Do Twojej dyspozycji”, możemy najpierw stworzyć klasę taką jak ta:

.text-xxl {
rozmiar czcionki: 50px;
}

A następnie przypisz tę klasę do nagłówka:

Do usług

�� Podczas zmiany kolorów lub czcionek w szablonie wykonanym przez Bootstrap najpierw przejrzyj arkusz stylów CSS, aby znaleźć klasy, które mogą już zapewniać alternatywne rozmiary lub kolory. Użyj tych, o ile są dostępne.

10. Utwórz dodatkowe strony

Po dostosowaniu strony głównej nadszedł czas, aby zacząć pracę nad dodatkowymi stronami, a następnie połączyć je ze stroną główną.

Tworząc stronę internetową z HTML i CSS, możesz zbudować dowolną liczbę podstron, a następnie połączyć je wszystkie razem.

Oto niektóre z typowych stron, których potrzebuje większość witryn:

  • o stronie
  • kontakt
  • teczka
  • Produkty i usługi
  • zespół
  • zasady (polityka prywatności, warunki itp.)

1. Zacznij od układu

Tworząc nową stronę internetową, pierwszą decyzją, którą musisz podjąć, jest wybór układu.

Podczas tworzenia strony internetowej z HTML i CSS nic nie powstrzymuje cię przed tworzeniem cokolwiek układ, który chcesz. Jedyną trudnością jest połączenie go w całość.

HTML i CSS mogą być trudne w obsłudze, gdy zaczynasz od pustego ekranu, dlatego też tutaj będziemy używać Bootstrap. Najpierw pokażemy Ci kilka zasad tworzenia układu, a następnie pokażemy, jak to zrobić za pomocą Bootstrap.

Sposób, w jaki możesz myśleć o układzie swojej strony internetowej, to rozważyć sekwencję pojedynczych bloków – jeden na drugim. Coś takiego (zauważ cztery wyraźne bloki):

układ podczas tworzenia strony internetowej z HTML i CSS

Wspaniałą rzeczą w Bootstrap jest to, że obsługuje on podstawowe zasady układu i szczegóły wyglądu, dzięki czemu możesz skupić się na umieszczeniu tych bloków we właściwych miejscach.

W tej części przewodnika utworzymy nową stronę „o”.

Na początek stworzymy bardzo prosty projekt układu. Coś takiego jak ten powyżej.

  • u góry znajduje się menu nawigacyjne,
  • blok nagłówka o pełnej szerokości poniżej menu,
  • główna sekcja zawartości na środku, zapakowana w środek ekranu (nie na całej szerokości),
  • i stopka.

Teraz zbudujmy ten układ w HTML.

2. Zbuduj nową stronę

Najłatwiejszym sposobem rozpoczęcia pracy na nowej stronie jest zduplikowanie istniejącej strony i użycie jej jako szablonu. Właśnie to zrobimy.

Utwórz kopię pliku index.html plik i zmień jego nazwę about.html.

Aby ułatwić odróżnianie stron na tym wczesnym etapie, edytuj nowy about.html zgłoś i zmień zawartość </code> etykietka. Na przykład, <code><title>O mnie.

Teraz przejrzyjmy plik po linii i zdecyduj, co zostawimy i co usuniemy:

  • The nawigacja menu (poniżej ). Prawdopodobnie chcesz zachować tę sekcję, aby ujednolicić nawigację na wszystkich stronach.
  • The główny bohater sekcja (poniżej ). Ten nie będzie nam potrzebny zgodnie z naszym projektem układu. Możesz przejść dalej i usunąć całą sekcję.
  • The o sekcja (poniżej ). Ponownie wykorzystamy tę sekcję jako główny blok nagłówka.
  • The usługi Sekcja, teczka Sekcja, wezwanie do działania sekcja i kontakt sekcja (wszystko pomiędzy i ). W ogóle nie potrzebujemy tych sekcji. Możesz iść dalej i usunąć je.
  • The stopka sekcja i wszystko pod nią (poniżej ). Musimy to zachować.

To sprawia, że ​​nasz obecny kod jest dość prosty. Zasadniczo jest to tylko to:



























Brakuje nam tutaj główna zawartość Sekcja. Aby go zbudować, ponownie wykorzystamy sekcję about.

Śmiało i zrób kopię sekcji about. Ten:

...


...

Teraz zmień pierwsze dwa wiersze na:

Ponieważ nie potrzebujemy

nagłówek i

element, po prostu je usuńmy. Jedyne, co pozostanie w całym tym bloku, to akapit tekstu. Tak jak:

Akapit tekstu.

Gdy zapiszesz plik i przejdziesz do niego za pomocą przeglądarki, zobaczysz, że zasadniczo masz dwa bardzo podobne bloki, jeden pod drugim, z tym samym kolorem tła:

o nagłówku strony

Lepiej byłoby mieć białe tło w głównej sekcji treści. Aby to zmienić, jedyne, co musimy zrobić, to usunąć bg-podstawowe klasa od głównej

etykietka. Innymi słowy, dodaj tag do tego:

Tak jest lepiej:

o nagłówku strony 2

Dodajmy do strony kilka fikcyjnych akapitów, aby wypełnić ją jeszcze bardziej, a może dodatkowo nagłówek:

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

Podrubryka

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Oto jak to wygląda na stronie:

o wersecie 1

Jeśli nie chcesz, aby tekst był wyśrodkowany, po prostu usuń centrum tekstowe klasa z jednego z

tagi.

o wersecie 2

Jeśli chcesz nadać nieco blasku tym blokom tekstu, możesz utworzyć nowe klasy CSS (jak poprzednio) i przypisać je do akapitów w bloku. Możesz też zajrzeć do bieżącego arkusza stylów i zobaczyć, jakie klasy są już w tym celu dostępne. Oto te, które przypisaliśmy do

i

tagi:

Lorem ipsum dolor sit amet...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

Podrubryka

A oto efekt:

o werset 3

Jeszcze jedną rzeczą do zrobienia jest dodanie zdjęcia gdzieś na stronie.

Oto jak wygląda przykładowy tag graficzny w HTML:


Dość proste, prawda? Jedynym parametrem jest ścieżka do pliku obrazu. Aby utrzymać porządek, możesz umieścić swój obraz w img katalog ponownie (tak jak to robiłeś kiedyś z tym tłem). W takim przypadku tag obrazu będzie:


To powiedziawszy, znacznik obrazu w tej konkretnej konfiguracji jest dość ograniczony. Aby uczynić go nieco bardziej dopracowanym, przypiszmy mu kilka klas Bootstrap. Szczególnie:


Te dwie klasy nadadzą obrazowi zaokrąglone rogi, a także upewnią się, że rozmiar obrazu nie przekracza rozmiaru bloku, w którym się znajduje.

Możesz teraz dodać taki tag gdzieś w głównej sekcji treści na stronie about. Na przykład tutaj:

Lorem ipsum dolor sit amet...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

Podrubryka

A oto efekt końcowy na stronie:

o wersecie 4

Oto nasza strona o całej okazałości:

o stronie kompletnej

3. Link do nowej strony

Po ukończeniu nowej strony połączmy ją teraz ze stroną główną ( index.html plik). Oczywiście najlepszym miejscem na dodanie tego linku jest menu nawigacyjne (poniżej ).

W szczególności poszukaj tej linii:

O

Zamierzamy to zmienić na to:

O

O tym jeszcze nie rozmawialiśmy, ale tag to tag link w HTML. Za jego pomocą możesz połączyć się z dowolną stroną internetową, podając adres tej strony w href parametr. Tekst linku – klikalna część linku – będzie tekstem między otwarciem a zamknięciem tagi.

Gdy odświeżysz teraz stronę główną, zobaczysz nowy link wskazujący stronę o stronie.

Dalsza lektura:

Na tym etapie w zasadzie zbudowałeś prostą witrynę składającą się z dwóch stron – a strona główna i an o strona.

Teraz powinieneś spłukać i powtórzyć, tworząc nowe strony, dostosowując je, dodając do nich treść, a następnie łącząc wszystko z menu nawigacyjnego.

Podczas wykonywania tych kroków warto też nauczyć się zasad HTML i CSS, przejrzeć listę kontrolną, a także nauczyć się Bootstrap oraz jego struktur i klas. Niektóre zasoby do tego:

  • Ściągawka HTML5
  • Ściągawka CSS
  • Ściągawka JavaScript
  • Samouczek HTML
  • Samouczek ładowania początkowego
  • Ściągawka do bootstrapu

Mastering Bootstrap, najprawdopodobniej najlepsza obecnie dostępna ścieżka do budowania zoptymalizowanych i pięknych stron internetowych z HTML i CSS.

Jeśli masz pytania dotyczące tworzenia witryny z HTML i CSS, nie wahaj się przesłać ich w komentarzach.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map