Konfiguracja CSS i HTML dla Twojej strony internetowej: Poradnik

Preslav Dobrev2022-10-28 · 4 min read

Konfiguracja CSS i HTML dla Twojej strony internetowej: Poradnik

Tworzenie stron internetowych to pierwszy krok do rozpoczęcia przygody z web developmentem. Jedną z pierwszych rzeczy, których muszą nauczyć się entuzjaści tworzenia stron, jest to, jak skonfigurować CSS i HTML dla witryny. Tworząc podstawową stronę wprowadzającą, początkujący może zapoznać się z podstawami projektowania stron, szlifować swoje umiejętności programistyczne i nauczyć się współpracować z programistami.

Ten samouczek przeprowadzi Cię przez podstawy konfiguracji plików HTML i CSS dla Twojej strony internetowej. Zaczynajmy!

Wymagania wstępne

Podstawowa znajomość HTML i CSS.

Krok 1 – Wstępna konfiguracja

Na początku utworzymy nowy katalog projektu i nazwiemy go demo-projekt :

mkdir demo-project

1	mkdir demo-project

Następnie przejdź do bieżącego katalogu za pomocą polecenia cd :

cd demo-project

1	cd demo-project

W folderze projektu dodajmy następujące pliki, które będą nam potrzebne do uruchomienia naszej podstawowej strony internetowej:

index.html : Ten plik będzie zawierał cały kod HTML.
styles.css : Tutaj będziemy przechowywać wszystkie pliki CSS służące do stylizowania naszej strony.
images : Wszystkie niezbędne obrazy muszą być przechowywane w tym folderze.

Skoro już utworzyliśmy nasz katalog projektu i dodaliśmy niezbędne pliki, przejdźmy dalej i dodajmy zawartość HTML w naszym index.html w kolejnym kroku.

Krok 2 – Dodawanie zawartości HTML do pliku index.html File

W pliku index.html , który utworzyliśmy w poprzednim kroku, dodamy wstępny kod HTML. Te podstawowe linie HTML posłużą jako instrukcje dla przeglądarki, ale nie będą wyświetlane na stronie internetowej.

Dodaj następujący blok kodu w swoim pliku index.html :

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Witaj w CloudSigma!</title>
<link rel="stylesheet" href="css/styles.css">
</head>

<body>
</body>

</html>

<!DOCTYPE html>

<head>

<title>Witaj w CloudSigma!</title>

</head>

<body>

</body>

</html>

Uwaga: Upewnij się, że plik index.html jest pusty przed dodaniem tych bloków kodu. Rozważ również zmianę tytułu wyróżnionego w sekcji <title> .

Zrozummy użyte pojęcia:

<!DOCTYPE html> : Jest to deklaracja informująca przeglądarkę o typie HTML użytym w dokumencie HTML.
- Ponieważ dostępnych jest wiele wersji standardów HTML, określenie DOCTYPE ułatwia przeglądarkom bezproblemową identyfikację wersji HTML. Na przykład w tym poradniku używamy najnowszej wersji HTML5.
<html> : Ten tag informuje przeglądarkę, że zawartość w nim zawarta musi być traktowana jako HTML. Otwierając plik <html> , upewnij się, że zamkniesz go za pomocą tagu </html> . Ten tag obsługuje atrybuty lang , dzięki czemu możesz określić język strony internetowej. W naszym samouczku ustawiliśmy język angielski za pomocą tagu języka en .
- Odwiedź IANA Language Subtag Registry, aby sprawdzić inne języki dostępne do użycia.
<head> : Tworzy to sekcję w dokumencie HTML i zawiera informacje o stronie internetowej. Nie ma tu jednak szczegółowych treści, a przeglądarka nie wyświetla żadnych informacji w tej sekcji nagłówka (head).
<meta charset="utf-8"> : Określa zestaw znaków dokumentu. Musi być w formacie Unicode, tj. UTF-8, obsługującym większość rozpoznawanych języków pisanych.
<title> : Tag <title> informuje przeglądarkę o nazwie strony internetowej. Tytuł pojawia się na karcie przeglądarki oraz gdy strona jest wyświetlana w wynikach wyszukiwania.
<link rel="stylesheet" href="css/styles.css"> : Informuje przeglądarkę, aby zidentyfikowała arkusz stylów zawierający style CSS.
<body> : Ten tag zawiera główną zawartość strony internetowej. Używając tagu <body> , upewnij się, że zamkniesz go za pomocą tagu </body> .

Krok 3 – Stylizowanie za pomocą CSS

W pliku styles.css pliku, dodaj style zgodnie z potrzebami swojego projektu. W tym przykładzie dodaj następujące linie kodu w swoim styles.css pliku:

body {
background-color: red;
}

h1 {
color: yellow;
text-align: centre;
}

p {
font-family: verdana;
font-size: 25px;
}

body {

background-color: red;

}

h1 {

color: yellow;

text-align: centre;

}

p {

font-family: verdana;

font-size: 25px;

}

W końcu stworzyliśmy podstawowe pliki HTML i CSS, których będziemy potrzebować do uruchomienia naszej strony internetowej. Dodatkowo możesz dodać obrazy i przechowywać je w folderze images. Zapisz i zamknij plik. Następnie otwórz index.html plik w swojej ulubionej przeglądarce internetowej, a na ekranie zobaczysz podstawową stronę.

Podsumowanie

W tym samouczku wprowadzającym poznaliśmy podstawy konfiguracji HTML i CSS oraz stworzyliśmy elementarną stronę internetową. Teraz nadszedł czas na tworzenie nowych stron, ich dopracowanie, dodanie zawartości i podlinkowanie wszystkiego z paska nawigacyjnego. W kolejnym kroku spróbuj dodać więcej treści do index.html pliku i ostyluj go za pomocą CSS.

Ponadto istnieją inne samouczki HTML i CSS, które można znaleźć na naszym blogu:

Miłego kodowania!

Preslav Dobrev

Autor · CloudSigma

Preslav Dobrev jest projektantem kreatywnym w CloudSigma, skupiającym się na spójnej tożsamości biznesowej przy wykorzystaniu tradycyjnych i innowacyjnych kanałów marketingowych. Biegle łączy wizję artystyczną ze strategicznym marketingiem, tworząc wywierające wpływ narracje marki.