Budujemy prostą stronę internetową cz. 2

biuro strona kodowanie

Kategoria wpisu PHP, HTML, CSS Tagi: , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (1 głosów, średnia: 2,00 z 5)
Loading...

Reading Time: 3 minutes

W poprzedniej części kursu, która stanowiła coś w rodzaju wprowadzenia napisałam z jakiej technologi będę korzystać do zbudowania strony.

Wprowadzenie do budowy strony

Wprowadzenie do kursu

Zamieściłam także prosty projekt graficzny oraz linki o plików, które będą potrzebne do wykonania projektu. Niestety z pewnych względów pominęłam część poświęconą cięciu projektów.

Projekt jest jednak na tyle prosty, że nie ma potrzeby go ciąć.

prosty projekt strony internetowej

prosty projekt strony internetowej

Znajdziecie tam również linki do grafik, które zostaną użyte do wykonania witryny. Tym samym opuszczam przynajmniej częściowo etap pocięcia projektu strony.

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

Na początek zajmiemy się strukturą katalogową naszej strony. W tym celu tworzymy nowy katalog. Katalog może być utworzony praktycznie w dowolnym miejscu.

Nazwa katalogu nie powinna zawiać polskich znaków diakrytycznych oraz spacji (pustych znaków, przerw).

Chociaż lepiej mieścić go np. w katalogu serwera lokalnego. (Instalacja serwera lokalnego XAMP)

Struktura:

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

W naszym katalogu (nazwa jest dowolna) tworzymy teraz kolejne 3 katalogi o nazwach css (na pliki .CSS), js (na pliki .JS) oraz images (na grafiki – czasem nazywa się on img).

Następnie włączamy edytor kodu i z jego pomocą tworzymy na początek dwa pliki:

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

Z biblioteki bootstrap 4 pobieramy pliki i umieszczamy je w odpowiednich katalogach – pliki CSS do katalogu CSS a JS do katalogu JS

Szkielet strony

Otwieramy w edytorze oraz w dowolnej przeglądarce internetowej plik index.html. Aktualnie jest on pusty więc nic nam się nie pokażę.

Teraz będziemy to zmieniać. Wchodzimy w edytor i zaczynamy pisać.

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 jakiego kolwiek widocznego wyniku w przeglądarce wstawiamy między te znaczniki dowolny tekst np.

 

Jak widać na razie to niewiele.

Instalację skryptów JS znajdziecie w 6 części kursu poświęconej animacją na stronie.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *