Budujemy prostą stronę internetową cz. 2

biuro strona kodowanie

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



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.

Budujemy prostą stronę internetową cz. 1

Zamieściłam także prosty projekt graficzny.

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 i konfiguracja darmowego serwera na komputerze – XAMPP

Struktura:

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

– images

W naszym katalogu 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.

Budujemy prostą stronę internetową cz. 3

Przeczytaj również

Budujemy prostą stronę internetową cz. 5 To już przed ostatnia część mojego kursu. Omówię w niej ostatnie dwie części budowanej strony internetowej. W 6 ostatniej części pokażę animacje ja...
Struktura strony w HTML5 Struktura prostej strony wykonanej w technologi HTML5 jest dosyć prosta. Elementy występujące w HTML5 Do najczęściej używanych elementów blokowy...
Budujemy prostą stronę internetową cz. 4 Witam w kolejnej 4 części kursu w tej części pokażę jak zbudować kolejne 3 sekcje strony według mojego projektu. Linki do poprzednich części kursu ...
Właściwość CSS – resize Dzięki właściwość CSS resize użytkownik zyskuje możliwość zmiany rozmiaru danego pola (np. div lub textarea). Właściwość resize jest ściśle powiąza...