Budujemy prostą stronę internetową cz. 2

Czas czytania: 4 minut

Witam w drugiej części kursu gdzie pokazuję jak zbudować prostą stronę internetową.Ta część jest głównie dla osób, które nie koniecznie wiedzą gdzie mają umieścić konkretne pliki oraz od czego w ogóle zacząć. Poznamy więc strukturę katalogów jaka będzie obowiązywać.  Przyda to się nam nie tylko przy tym projekcie, ale także przy kolejnych.

Następnie zbudujemy prościutką stronkę wypisującą tylko jeden tekst -> „Moja strona”. To taki mój odpowiednik „Hello Word”.?

Wprowadzenie do budowy strony

Przed przystąpieniem do budowy strony warto byś otworzył pierwszą część kursu:

Wprowadzenie do kursu – cz. 1

Znajdziecie tam pliki, które będą potrzebne do wykonania strony:

 

prosty projekt strony internetowej
prosty projekt strony internetowej

 

Jeżeli szukacie w tym kursie informacji o tym jak pociąć szablon to muszę was zmartwić. Niestety z pewnych względów pominęłam w tym kursie część, w której pocięłam mój projekt na części.?

Projekt jest jednak na tyle prosty, że wydaje mi się, że kurs specjalnie na tym nie ucierpiał. Ogólnie myślę, że cięcie projektów to może być pomysł na inny wpis. Wszystkie pliki, których użyję w projekcie znajdziecie w pierwszej części kursu ewentualnie w kolejnych.

Warto tutaj wspomnieć, że w przypadku profesjonalnej strony internetowej projekt powinien zostać wykonany i zapisany np. w Adobe Photoshop z zachowaniem warstw. Tak byśmy mogli pobrać z niego gotową grafikę i inne elementy.

Struktura strony

Podczas budowy witryny internetowej bardzo istotne jest by mieć porządek. ? A przynajmniej starać się by go mieć. Przyda nam to się kiedy powiedzmy po kilku miesiącach wrócimy do naszej strony. Dlatego dość istotne jest by zarówno katalogi jak i pliki w naszej aplikacji miały czytelną strukturę, odpowiednie nazewnictwo oraz znajdowały się w odpowiednim miejscu.?

Na początek zajmiemy się strukturą katalogową naszej strony. Pokażę wam strukturę dla prostej strony w miarę jak aplikacja będzie rosła struktura katalogowa może ulegać „lekkim zmianą”. Pracę z katalogami zaczniemy od stworzenia nowego katalogu – będzie to nasz główny katalog gdzie.

Nazwa naszego głównego katalogu nie powinna zawiać polskich znaków diakrytycznych oraz spacji (pustych znaków, przerw). Katalog ten może być utworzony praktycznie w dowolnym miejscu. Chociaż lepiej mieścić go np. w katalogu serwera lokalnego, tak by w przyszłości nie musieć go nie wiadomo gdzie szukać. (Instalacja serwera lokalnego XAMP) ?

Struktura katalogów + podstawowe pliki:

Nasz-katalog/
– index.html
– css/
— style.css
– js/
– images/

Jak widać powyżej w naszym głównym katalogu tworzymy 3 katalogi o nazwach css (głównie na pliki .CSS ale też na np. .SCSS), js (na pliki .JS) oraz images (na grafiki – czasem nazywa się on img).

W katalogach tych tworzymy teraz 2 podstawowe pliki. Przyda nam się do tego edytor kodu osobiście korzystam Notepad++ i/lub Visual Studio Code. Najprościej będzie skorzystać z tego pierwszego.

edytor kodu HTML Notepad++

Kiedy będziemy już mieli edytor kodu tworzymy z jego pomocą 2 piki:

  • index.html – w naszym głównym katalogu
  • style.css – w katalogu css

Teraz z biblioteki Bootstrap 4 pobieramy 2 pliki i umieszczamy je w odpowiednich katalogach – pliki CSS do katalogu CSS a JS do katalogu JS. Chodzi o:

Szkielet strony

Plik index.html, który niedawno utworzyliśmy otwieramy teraz również w przeglądarce internetowej (nie polecam IE czy EDGE). Aktualnie plik niema zawartości więc będziemy mieli pustą kartę.

Zachwalę jednak to zmienimy. Wchodzimy w edytor i zaczynamy pisać.

<!doctype html>  <!-- tag informujący z jakiego języka będziemy korzystać -->
<html lang="pl"> <!-- tag otwierający -->
  <head> <!-- głowa strony -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Nowa strona</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">
  </head> <!-- zamknięcie głowy -->
  <body></body> <!-- ciało strony -->
</html>  <!-- tag kończący stronę -->

Jak widzicie zaczęłam stronę od dodania <!doctype html> czyli dosłownie tłumacząc – typ dokumentu HTML.

Następnie <html lang=”pl”> ten tag nie tylko otwiera stronę, ale zawiera także parametr lang dzięki, któremu informujemy w jakim języku będziemy pisać w tym wypadku jest to polski (pl).

Tag <head> otwiera nam „głowę” strony. W tym miejscu znaleźć się powinny elementy takie jak np. tytuł, opis strony (meta dane), linki łączące kaskadowe style z naszą stronę.

Dość istotne poza dodaniem styli CSS do strony są również:

  • <link href=”css/bootstrap.min.css” rel=”stylesheet”> – instalacja styli CSS z biblioteki Bootstrap 4
  • <meta charset=”utf-8″> – określenie kodowania witryny
  • <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”> – responsywność dla strony

Ostatnim elementem z kodu jest <body></body> – jak sama nazwa mówi jest to ciało strony. W tym właśnie miejscu a właściwie pomiędzy będziemy umieszczać kod strony.

W celu uzyskania jakiegokolwiek widocznego wyniku w przeglądarce wstawiamy między te znaczniki dowolny tekst np.

<body>
moja strona
</body>

 

Jak widać na razie to niewiele. Jednak dopiero zaczynamy a prawdziwa zabawa zacznie się w 3 części.

UWAGA: Instalację skryptów JS omówię dopiero w 6 części kursu poświęconej animacją na stronie.