Przygotowanie do egzaminu praktycznego E14/K2 #1 – HTML I CSS

Zgodnie z nową podstawą programową egzaminy E12 i E13 zostają połączone w jedną kwalifikacje – K1, natomiast E14 zostaje przemianowane na kwalifikację K2, o wdzięcznej nazwie „Programowanie, tworzenie i administrowanie stronami internetowymi i bazami danych”. Z tego wynika, że egzamin, który nas interesuje nie zmienił się znacząco. Przyjrzyjmy się jednak wymaganiom stawianymi przez CKE. Uczeń, który chce zaliczyć egzamin praktyczny powinien umieć:

1.Tworzenie stron i aplikacji internetowych

  • tworzyć projekt graficzny i strukturę witryny internetowej
  • wykonywać strony internetowe zgodnie z projektami
  • identyfikować systemy zarządzania treścią
  • stosować edytory spełniające założenia WYSIWYG
  • posługiwać się hipertekstowymi językami znaczników (HTML)
  • posługiwać się kaskadowymi arkuszami stylów (CSS)
  • stosować elementy grafiki komputerowej do tworzenia stron internetowych
  • stosować elementy multimedialne na stronach internetowych
  • stosować skrypty wykonywane po stronie serwera i klienta przy tworzeniu aplikacji internetowych
  • stosować reguły walidacji stron internetowych
  • testować i publikować witryny internetowe
  • zamieszczać opracowane aplikacje w Internecie

 

2.Tworzenie i administrowanie bazami danych

  • posługiwać się podstawowymi pojęciami dotyczącymi baz danych
  • projektować relacyjne bazy danych
  • stosować lokalne i sieciowe systemy zarządzania bazami danych
  • korzystać z podstawowych funkcji strukturalnego języka zapytań
  • posługiwać się strukturalnym językiem zapytań do obsługi baz danych
  • tworzyć strukturę tabel i powiązań między nimi
  • importować dane do bazy danych i eksportuje dane z bazy danych
  • tworzyć formularze, zapytania i raporty do przetwarzania danych
  • modyfikować i rozbudowuje struktury baz danych
  • zarządzać systemem bazy danych
  • pobierać dane z aplikacji i przechowuje je w bazach danych
  • tworzyć kopie baz danych i odtwarza bazy danych z kopii
  • kontrolować spójność baz danych
  • dokonywać naprawy baz danych

 

3. Programowanie aplikacji

  • stosować podstawy algorytmiki
  • stosować zasady algorytmicznego rozwiązywania problemów
  • stosować podstawowe zasady programowania
  • wykorzystywać środowisko programistyczne: edytor i kompilator
  • korzystać z wbudowanych typów danych
  • tworzyć własne typy danych
  • stosować instrukcje, funkcje, procedury, obiekty, metody wybranych języków programowania
  • tworzyć własne funkcje, procedury, obiekty, metody wybranych języków programowania
  • kompilować i uruchamia kody źródłowe
  • stosować gotowe rozwiązania programistyczne
  • testować tworzoną aplikację i modyfikuje jej kod źródłowy
  • dokumentować tworzoną aplikację

 

Znajomość programów

  • Program do obróbki grafiki rastrowej (polecam GIMP/Adobe Photoshop)
  • Program do obróbki grafiki wektorowej (polecam Affinity Designer/Inkscape/DrawPlus/Adobe Illustrator)
  • Edytor tekstu (polecam Visual Studio/Notepad++)
  • XAMPP

 

Brzmi strasznie, prawda? Jednak nie są one takie straszne, część z tych wrogo brzmiących nazw oznacza po prostu posługiwanie się notatnikiem bądź też umiejętności naciskania odpowiedniego przycisku. Należy też wspomnieć, że egzaminy obejmują same podstawy i rzeczy, które mamy wykonać są zazwyczaj banalne. W dodatku podczas egzaminu istnieje kilka prostych metod, które pozwolą nam „oszukiwać”, szczegółowe informacje znajdziecie w treści artykułu ;). W tym artykule zajmiemy się rozpracowaniem pierwszego podpunktu, mianowicie tworzenia stron i aplikacji internetowych, lecz tymczasowo pominiemy umieszczanie skryptów na stronie (tym zajmiemy się w części dotyczącej PHP/JavaScript). Tak więc zaczynajmy!

 

Język HTML i CSS

Spis treści:

1.Tworzenie projektu graficznego i struktury strony
2.Wykonywanie strony internetowej zgodnie z projektami
3.Identyfikowanie systemów zarządzania treścią
4.Stosowanie edytorów spełniających założenia WYSIWYG
5.Posługiwanie się hipertekstowymi językami znaczników (HTML)
6.Stosowanie elementów grafiki internetowej do tworzenia stron internetowych
7.Stosowanie elementów multimedialnych na stronach internetowych
8.Stosowanie skryptów wykonywanych po stronie serwera i klienta przy tworzeniu aplikacji internetowych
9.Stosowanie reguł walidacji stron internetowych
10.Testowanie i publikowanie witryn internetowych
11.Zamieszczanie opracowanych aplikacji w internecie
12.CSS
13.Teoria w praktyce. Kilka prostych ćwiczeń.

 

1.Tworzenie projektu graficznego i struktury strony

Tego podpunktu chyba nie muszę tłumaczyć, całość rozbija się tak naprawdę o umiejętność stworzenia schematu rozmieszczenia na stronie elementów. W języku HTML strony buduje się za pomocą znaczników, które mają swoich rodziców i dzieci. Tłumacząc na ludzkie – element kluczowy ma w swojej strukturze elementy podrzędne. Można to w bardzo prosty sposób zobrazować nawet na przykładzie podpunktów, które umieściłem wyżej. W tym wypadku napis „Znajomość programów” jest rodzicem, a podpunkty pokroju „Program do obróbki grafiki rastrowej” jest jego dzieckiem. Jednak to dziecko również mogłoby mieć swoje dzieci, gdybym użył kolejnych podpunktów z nazwami programów zamiast umieszczenia ich w nawiasie. W takim wypadku „Program do obróbki grafiki rastrowej” byłby dzieckiem „Znajomość programów”, ale również rodzicem „Gimp”, „Photoshop”. Profesjonalnie taką strukturę nazywamy DOM (Document Object Model). Jednak gdyby to dalej sprawiało tobie problem, służę grafiką ilustracyjną.

 

2.Wykonywanie strony internetowej zgodnie z projektami

Pod tym podpunktem kryje się po prostu wykonanie strony według rysunku na arkuszu i wytycznych. Może się zdarzyć, że witryna, która zostanie wykonana według wytycznych będzie różniła się od tej, która znajduje się na rysunku. W takim wypadku należy zignorować obrazek, najczęściej znajduje się dopisek, który mówi nam, że resztę wartości CSS należy pozostawić w wartości domyślnej. W związku z tym nie należy dopisywać nawet marginesów, które nie zostały wspomniane w zadaniu.

 

3.Identyfikowanie systemów zarządzania treścią (CMS)

CMS (content managment system) to, jak sama nazwa wskazuje, systemy zarządzające treścią na stronach. Wyjaśniając w bardzo prosty sposób służą chociażby do dodawania użytkowników, postów, obrazków i tym podobnych. Ich zaletą jest to, że nie trzeba wprowadzać treści na strony przez pliki .php bądź .html, lecz robimy to za pomocą przygotowanego panelu zarządzania. Z bardziej znanych mogę wymienić takie jak WordPress, Joomla, Drupal oraz Concrete 5. W jaki sposób rozpoznać, że strona używa danego CMSu? Jest na to sporo sposobów, CMS można rozpoznać po adresie panelu administracyjnego, strukturze linków, nazwach pól formularzy, lokalizacji katalogu z szablonem i wielu innych cechach. Można to sprawdzić klikając prawym przyciskiem myszy na puste pole strony (tło) i wybrać „Pokaż źródło”. Naszym oczom zostanie ukazany plik index.php, po przestudiowaniu którego możemy określić nazwę CMSu. Czasami również w stopce strony znajdziemy takie informacje, może być to nawet napis „Powered by *NAZWA*”.

 

4.Stosowanie edytorów spełniających założenia WYSIWYG

Bardzo często pytanie o skrót „WYSIWYG” na egzaminie teoretycznym jest przerażające dla zdających. Rozwinięciem skrótu jest „what you see is what you get”, co na polski w luźnym tłumaczeniu oznacza „dostaniesz to, co widzisz”. Programy spełniające założenia WYSIWYG prezentują na monitorze komputera dane tekstowe bądź graficzne w sposób jak najbardziej zbliżony do efektu uzyskanego po ich wydrukowaniu lub wyeksportowaniu do któregoś z formatu plików. Takim edytorem graficznym jest chociażby wspomniany wcześniej gimp, a edytorem tekstowym notepad++. Jak już wspomniałem – straszne nazwy dla banalnych rzeczy ;).

 

4.Posługiwanie się hipertekstowymi językami znaczników (HTML)

Dotarliśmy do podpunktu, który będzie wymagał o wiele większej uwagi. Zakładam, że najbardziej podstawowe umiejętności związane z językiem HTML, takie jak chociażby budowa kodu macie przyswojone. Jeżeli nie, to na stronie w3schools możecie to nadrobić. Ja natomiast postaram się skupić na najważniejszych umiejętnościach do opanowania oraz przedstawieniu wam podpowiedzi, które ułatwią wam napisanie prostej strony na egzaminie (ćwiczenia oraz zastosowanie tych znaczników i atrybutów znajdziecie poniżej).

Na początku rozwieję często pojawiające się wątpliwości. Na egzaminie nie ma znaczenia, z której wersji języka HTML będziesz korzystać. Możesz użyć znacznika <article> zamiast znacznika <div> bez żadnych konsekwencji. Nawet w sytuacji, kiedy polecenie sugerowało użycie właśnie jego. Ja zajmę się opisaniem języka HTML w wersji 5, lecz pominę bardziej „skomplikowane” znaczniki, czyli takie, które można zastąpić jednym (przykład: <main><article><section> można zastąpić <div>’em).

 

Najważniejsze znaczniki, które musisz znać:

 

<!doctype> – Znacznik języka HTML5, używany jest do zadeklarowania używania tej wersji języka na samym początku dokumentu. Dokładna konstrukcja powinna wyglądać w ten sposób <!doctype HTML>. Uwaga! Należy otworzyć znacznik <html> zaraz po nim.

<html> – Kolejny znacznik deklarujący używanie języka HTML, lecz w przeciwieństwie do <!doctype> jest on drukowany przez przeglądarkę (to oznacza, że pojawi się w inspektorze). Dzięki tej własności możemy już w nim kodować własności lub eventy JavaScriptu.

<head> – Ten znacznik jest przeznaczony do umieszczania w nim informacji dla przeglądarki takich jak umiejscowienie pliku .css, nazwa strony, słowa kluczowe (tagi), imię autora, ścieżka plików .js, opis strony, kodowanie znaków (które odpowiada między innymi za znaki specjalne bądź obsługę polskich znaków) lub kod php/js*.

*Kod php oraz js można wpisywać prawie w dowolnym miejscu struktury HTML. Head służy do umieszczenia kodu, który chcemy, aby wykonał się wraz z załadowaniem strony.

<meta> – Dzięki temu znacznikowi nasza strona będzie zawierać informację o autorze, swój opis, słowa kluczowe bądź też kodowanie znaków. Te dane nie będą wyświetlały się na stronie, lecz właśnie w metadanych. Jego konstrukcja wygląda w następujący sposób:

<meta name="description" content="Moja strona jest super!"> – Pole name="description" oznacza, że chcemy wprowadzić do metadanych opis strony. Content, czyli zawartość, służy do wprowadzenia opisu.

<meta charset="UTF-8"> – Ustawienie charset'u, czyli zestawu znaków, na „UTF-8” sprawi, że strona będzie obsługiwała polskie znaki.

Tez znacznik jest bardzo ważny do zapamiętania, na każdym arkuszu, który przejrzałem należało ustawić autora oraz opis strony. Jednak jest on prosty do zapamiętania, o ile zna się język angielski. W polu name wpisujemy nazwę informacji, którą chcemy wprowadzić do metadanych stosując nazewnictwo angielskie (autor = author, opis = description), zaś samą informację wpisujemy w pole content="*opis*"

<style> – Znacznik, w którym definiujemy wygląd strony, czyli wprowadzamy kod css. Jednak nie radzę wprowadzać kodu .css do pliku .html, gdyż na większości egzaminów jest wymóg wprowadzenia go w osobnym pliku. Aby załadować css’y z osobnego pliku, należy użyć znacznika <link rel="stylesheet" type="text/css" href="style.css"> w przypadku, kiedy plik .css znajduje się w tym samym katalogu co index.html.

<php><script> – znaczniki te odpowiadają za zdefiniowanie kodu php bądź javascript. Od tego momentu, do momentu zamknięcia znacznika będzie wykonywany kod php/javascript. Można je umieszczać w dowolnym miejscu dokumentu za znacznikami HTML lub w atrybucie (o tym poniżej).

<body> – Znacznik, od którego rozpoczynamy budowanie struktury naszej strony. Od tego znacznika również zaczynają się predefiniowane wartości CSS. To oznacza, że znacznik od tej pory każdy kolejny znacznik może mieć domyślnie ustawione marginesy, które mogą popsuć wygląd naszej strony. Wcześniejsze znaczniki są „puste”.

<header> – Znacznik używany jako zastępca div’a do zdefiniowania nagłówka strony. Jest to div, który został domyślnie przystosowany do bycia używanym jako nagłówek (ma inne domyślne wartości w css’ach). Oczywiście, jak już wspomniałem wcześniej, nikt nie zabroni wam robić nagłówka div’em.

<div> – Standardowy znacznik do tworzenia jakiejkolwiek zawartości. Domyślnie jest zdefiniowany jako pudełko z marginesami zewnętrznymi.

<audio> – Znacznik służący do umieszczania plików audio na stronie. O nim powiem więcej poniżej.

<video> – Jego konstrukcja jest identyczna, jak w przypadku znacznika audio, lecz służy do umieszczania plików wideo (mp4, flv, wmv). Jak w przypadku audio, nim zajmiemy się za chwilę.

<img> – Znacznik służący do umieszczania zdjęć na stronie.

<p> – Podstawowy znacznik przeznaczony od umieszczania w nim tekstu. Używamy go w następujący sposób: <p>Tekst</p>.

<h1> – Znacznik używany do pisania nagłówków, charakteryzuje się domyślnie większą czcionką od znacznika <p>i kolejnych znaczników <h2-6>.

<span> – Znacznik, który nie ma absolutnie żadnych predefiniowanych wartości. Jest świetny do wstawiania tekstu, kiedy nie chcesz mieć żadnych marginesów, które mogą zepsuć twój design.

<a> – Znacznik, który umieszczamy przed <div> bądź <p>,<img> a zamykamy za nimi. Nakłada się on na ten element i sprawia, że po kliknięciu w niego przeniesie nas do podanej w atrybucie hrefznacznika <a> strony.

<ol> – Znacznik definiujący listę numerowaną. Mówiąc prościej – gdybym pisał spis treści do tego artykułu w HTMLu, wyglądałoby on tak: <ol>Spis treści:<li>1.Podpunkt</li><li>2.Podpunkt</li></ol>.

<ul>– Ten znacznik różni się od <ol> tym, że definiuje listę listę „kropkowaną”, czyli zamiast „1.Podpunkt”,”2.Podpunkt” po użyciu znacznika <li> będą pojawiać się ” Podpunkt” „* Podpunkt”.

<li> – Znacznik odpowiadający za tworzenie podpunktów w listach, musi być dzieckiem <ul> lub <li>.

<table> – Znacznik definiujący tabelę.

<td> – Komórka danych w tabeli.

<tr> – Wiersz w tabeli.

<th>– Komórka nagłówkowa w tabeli (zajmuje całą szerokość).

Jak widzicie na egzaminie nie musicie znać zbyt dużej ilości znaczników (w porównaniu do ogólnej ilości znaczników oferowanych przez HTML5). Jeżeli jednak ktoś chce się wybić ponad poziom egzaminu klikając w ten link zostaniecie przeniesieni na stronę z „cheet sheetem” dla początkujących, który zapozna was z większą ilością znaczników.

 

Najważniejsze atrybuty, które musisz znać:

onclick – Atrybut ten zazwyczaj jest wykorzystywany do wykonania kodu php/javascript po naciśnięciu na element, który zawiera ten atrybut.

alt – Odpowiada za nadanie elementowi opisu alternatywnego. W przypadku, kiedy naszemu obrazkowi z różnych przyczyn nie uda się załadować wyświetli się na jego miejscu opis alternatywny. Dzięki temu, można korzystać z nawigacji graficznej, nawet pomimo braku obrazka.

id – Do identyfikacji poszczególnych elementów używamy tzw. identyfikatorów w skrócie id. Id to atrybuty elementów html, które pozwalają je odróżniać. Zapisujemy je skrótem id i przypisujemy do nich wartości tak jak do innych atrybutów, używając do tego znaku = oraz " ". Atrybut id jest unikalnym identyfikatorem elementu html. Znaczy to, że daną wartość atrybutu id możemy przypisać jedynie jednemu elementowi html. Id jest wykorzystywane przez języki javascript oraz php do wskazywania, których elementów ma dotyczyć kod lub które elementy mają spowodować wydarzenie. Id mogą również służyć jako tzw. selektory języka CSS. Selektory są to odwołania w języku CSS do konkretnych elementów html. Ale o CSS będziemy mówić później.

class – Klasy są zbliżone do identyfikatorów, również możemy dzięki nim rozróżniać poszczególne elementy html. Tak samo jak id są one atrybutem wszystkich elementów html. Używamy ich stosując słowo class. Zalecane jest używanie ich jako selektor CSS, gdyż mogą się powtarzać oraz można aplikować kilka klas do jednego elementu HTML, natomiast identyfikatory zostawić do obsługi Javascript/PHP.

src – Atrybut definiuje adres zawartości elementu. Może to być adres grafiki do wstawienia, strony WWW lub skryptu do wykonania. W przypadku <button onclick="mojafunkcja()">Guzik</button> po naciśnięciu przycisku „Guzik” zostanie wykonana „mojafunkcja”.

rel – Atrybut ten wskazuje w jaki sposób plik zewnętrzny wiąże się ze stroną. W przypadku <link rel="stylesheet" href="css/main.css"> wartość atrybutu to „stylesheet”, czyli plik ze stylami.

href – Serwisy internetowe składają się zwykle z podstron, a zadaniem href jest po naciśnięciu na element, który zawiera ten atrybut, przekierowanie do danej podstrony. Możemy w ten atrybut wpisać lokalizację naszej podstrony na dysku (<a href="/podstrony/podstrona2.html"></a>) bądź w internecie (<a href="https://pixeloop.pl/kontakt"></a>). Ale to nie wszystko, jest on stosowany również do wskazywania źródeł obrazków, stylesheetów i wszystkich innych zasobów (przykład znajdziecie w opisie znacznika rel).

 

A teraz informacja dla osób, które nie uważają oszukiwania na egzaminach za uwłaczające ich kodeksowi moralnemu. Rozpoczynacie egzamin na czystym obrazie systemu z zainstalowanymi kilkoma programami, w tym programem XAMPP. W folderze głównym XAMPPa znajduje się podfolder htdocs, w którym umieszczacie wasze pliki strony. Nie usuwajcie folderów, które były zainstalowane w tym folderze razem z programem, gdyż szperacjąc w nich znajdziecie pliki .php z wieloma przydatnymi konstrukcjami stron html oraz kodem php, który może być nawet odpowiedzią na wasze pytania z egzaminu 😉

 

6&7. Stosowanie elementów grafiki internetowej oraz multimediów do tworzenia stron internetowych

Podpunkt został teoretycznie omówiony w poprzednim podpunkcie, teraz czas na odrobinę praktyki. Za sentencją „Stosowanie elementów grafiki internetowej oraz multimediów” kryje się umiejętność umieszczania obrazków, plików audio oraz wideo na witrynie internetowej. Teraz omówię te elementy bardziej dogłębnie, zaczniemy od obrazków.

<img src="ścieżka dostępu" alt="opis alternatywny" border="1px solid black" />

Jak już wspomniałem wcześniej, selektor <img> służy do umieszczania plików graficznych na stronie. Ścieżkę dostępu możemy podać na dwa sposoby, albo jako lokalizację na serwerze (w naszym przypadku w folderze xamppa) albo jako hyperlink, gdy obrazek jest już umieszczony gdzieś w internecie. Oto kilka możliwych ścieżek:

<img src="plik.jpg" alt="opis alternatywny" border="1px solid black" /> – W przypadku, kiedy obrazek znajduje się w tym samym folderze co index.php.
<img src="katalog/plik.jpg" alt="opis alternatywny" border="1px solid black" /> – W przypadku, kiedy obrazek znajduje się w podfolderze, a plik index.php w głównym katalogu.
<img src="../plik.jpg" alt="opis alternatywny" border="1px solid black" /> – W przypadku, kiedy obrazek znajduje się w głównym katalogu, a plik index.php w podkatalogu
<img src="https://pixeloop.pl/wp-content/uploads/2018/01/logo_alpha1.png" alt="opis alternatywny" border="1px solid black" /> – W przypadku, kiedy obrazek znajduje się na innej stronie internetowej.

Kilka ważnych informacji na temat plików graficznych:

W nazwach plików lepiej nie używać:

  • wielkich liter
  • znaków, np.: \ / : * ? " < > |
  • spacji (jeśli musisz, w zamian używaj podkreślnika „_„)
  • polskich liter (ą, ć, ę, ł, ń... itd.)

UWAGA! Znacznika <img> nie zamykamy poprzez </img>, lecz stosujemy konstrukcję <img />.

 

Teraz kilka słów o znaczniku <audio>, o którym również wspomniałem w poprzednim podpunkcie. Zacznijmy od konstrukcji, która wygląda następująco:

<audio controls>
<source src="ścieżka/nazwapliku.mp3" type="audio/mp3">
</audio>

controls służy do wywołania podstawowego panelu kontrolnego pliku dźwiękowego, a podawanie ścieżki wygląda identycznie, jak w przypadku znacznika <img>. Jedyne o czym należy pamiętać to o podaniu rozszerzenia pliku audio w type="audio/rozszerzenie".

<video> opiera się na identycznej konstrukcji, co <audio>, więc nie widzę sensu omawiania go. Na wszelki wypadek zaprezentuję wam podstawową konstrukcję:

<video width="400" controls>
<source src="film.mp4" type="video/mp4">
</video>

 

8.Stosowanie skryptów wykonywanych po stronie serwera i klienta przy tworzeniu aplikacji internetowych

O tworzeniu skryptów, zarówno JavaScript jak i PHP powiemy sobie w następnym artykule, gdyż jest to zbyt obszerny materiał, żeby opisywać go w jednym podpunkcie. Teraz wspomnę jedynie o kilku zasadach umieszczania tych kodów w składni języka HTML. Jak już wspomniałem wcześniej, w celu dołączenia osobnych plików JavaScript do pliku .html używamy znacznika <script src="mojskrypt.js"></script>, a w przypadku chęci użycia kodu php z innego pliku .php używamy <?php include 'innyplik.php'; ?>. Tą informację wrzuciłem jako ciekawostkę, na egzaminie raczej nie będzie od was wymagane wykonywanie kodu z innego pliku php. W przypadku, kiedy nie mamy polecenia zapisywania kodu JavaScript/PHP w osobnych plikach możemy śmiało napisać cały kod w naszym pliku index.php/index.html.

 

9.Stosowanie reguł walidacji stron internetowych

Walidacja strony to najprościej mówiąc sprawdzenie jej pod kątem poprawności kodu. W ten sposób sprawdzamy, czy nasz kod jest zgodny ze standardami W3C. Warto jednak wspomnieć, że walidacja nie ma wpływu na odczucia użytkownika wyświetlającego stronę, jednak ma już dla robotów. Brak znacznika </a>, czyli zamknięcia odnośnika może znacząco wpłynąć na to, co zobaczy robot. Gdy popełnimy literówke w kodzie, której żaden użytkownik nie zauważy, np.: <descripion> (<description>) nie pozwoli robotowi odczytać opisu naszej strony. Najprawdopodobniej jedynym walidatorem dostępnym na egzaminie będzie ten w przeglądarce. Jeżeli użyjecie klawisza f12 (chrome) lub shift+f2 (firefox) wyświetlą wam się narzędzia deweloperskie, które zawierają konsolę błędów.

 

10&11.Testowanie oraz zamieszczanie opracowanych stron/aplikacji w internecie

Jest to banalnie proste, przynajmniej jeżeli przyjmujemy „internet” jako xamppa – jak to jest na egzaminie. Wystarczy włączyć w panelu xamppa jeden moduł – Apache (dodatkowo MySQL, jeżeli nasza strona korzysta z baz danych), a następnie umieścić nasze pliki (np.: index.php, obrazek.jpg, style.css, kod.js) w folderze C:\xampp7\htdocs\. Xampp służy jako środowisko dla testerów/programistów, którzy chcą szybko przetestować skrypty na swoim lokalnym komputerze, bez konieczności uruchamiania ich na serwerze.

 

12. CSS

CSS jest wykorzystywany do stylowania stron internetowych – przykładowo, do zmiany czcionki, koloru, rozmiaru i odstępów treści, dzielenia jej na kolumny lub dodania animacji oraz innych dekoracji. CSS to tak naprawdę najprostsza część egzaminu, gdyż wszystkie parametry, które musicie ustawić zostaną podane na arkuszu. Bardzo częsta jest również podany dodatkowy komunikat, który brzmi „Wszystkie pozostałe własności przybierają wartości domyślne”. Tłumacząc to najprościej jak się da – do arkuszów styli wpisujecie jedynie to, co zostało podane na kartce. Jak już wcześniej wspominałem może to spowodować taką sytuację, że wasza strona będzie wyglądała inaczej niż ta, która ukazuje się wam w obrazku poglądowym na arkuszu. Ten fakt jednak powinniście zignorować, jak sama nazwa wskazuje jest to obrazek poglądowy, a komunikat wyraźnie was informuje, że nie należy wpisywać nic poza tym o co was proszą. Na moim egzaminie elementy drukowały się w osobnych linijkach zamiast „przyklejać się” do siebie (co przeczyło obrazkowi), a i tak otrzymałem za CSS’y maksymalną ilość punktów. Zajmiemy się teraz najważniejszymi własnościami oraz umiejętnościami związanymi z CSS.

 

Piorytetyzacja klas i identyfikatorów

W języku CSS mamy trzy możliwości wskazania znacznika, któremu chcemy zmodyfikować style. Na przykład weźmiemy znacznik <p>, a nasza struktura w języku HTML będzie wyglądała w następujący sposób:

<div><p>tekst</p></div>

Najważniejszy piorytet w CSSie ma identyfikator (id). Oznacza to, że przypisując znacznikowi klasę z wartością font-size: 15px, lecz również id z wartością font-size: 22px, nasz tekst umieszczony w znaczniku <p> przybierze wielkość 22px. ID definiujemy za pomocą hashtaga, a klasę za pomocą kropki. Trzecim sposobem, posiadającym najniższy piorytet, jest zadeklarowanie ścieżki według struktury HTML. W pliku stylów będzie to prezentowało się tak:

#ID { font-size: 22px; }
.klasa { font-size: 15px; }
div p { font-size: 11px; }

Dlaczego więc, jak wcześniej wspomniałem, do definiowania stylów znacznika najlepiej używać klas? Najważniejszym z powodów jest możliwość powtarzania klas w wielu znacznikach, w przeciwieństwie do ID, które muszą być unikalne. Ważnym czynnikiem faworyzującym klasy jest możliwość zastosowania ich kilku w jednym znaczniku oddzielając je od siebie spacją (<p class="klasa1 klasa2">). W sytuacji, kiedy musimy pokolorować kilkanaście elementów na stronie jednym kolorem stworzenie klasy .red pozwoli nam zaoszczędzić czas, a w dodatku plik styli będzie mniejszy, niż gdybyśmy dla każdego elementu tworzyli osobną klasę z parametrem background-color: red; (co skutkuje szybszym ładowaniem się strony i większą przejrzystością pliku).

 

Pozycjonowanie elementów

Pozycjonowanie statyczne (position: static;)

Element HTML, który ma ustawioną pozycję static może zostać umiejscowiony na stronie za pomocą parametrów top, right, bottom, left. Każdy element umieszczony na stronie ma nadane pozycjonowanie statyczne domyślnie i jest ona przeznaczona dla elementów, które nie mają mieć żadnych specjalnych zasad pozycjonowania. Dlatego też nie ma większego sensu nadawania takiego formatowania elementom na stronie.

Pozycjonowanie względne (position: relative;)

Pozycjonowanie relatywne zachowuje się tak samo jak statyczne do momentu, w którym nie doda się jej żadnych dodatkowych właściwości. Ustawienie którejkolwiek z wartości top, right, bottom bądź left sprawi, że element zostanie przesunięty z jego oryginalnej pozycji w podanym kierunku o podaną wartość. Natomiast inne elementy nie zostaną dopasowane tak, aby pasowały do luk pozostawionych przez element. Najprościej rzecz biorąc dzięki ustawieniu tego parametru możemy nałożyć nasz element na inne relatywne elementy bądź też odsunąć go od nich bez burzenia układu naszej strony.

Pozycjonowanie stałe (position: fixed;)

Pozycjonowanie stałe bazuje na całej dostępnej przestrzeni naszej strony i przykleja element do wybranego miejsca ekranu za pomocą parametrów  top, right, bottom, left oraz sprawia, że element zawsze będzie znajdował się w wybranym przez nas miejscu, nie bacząc nawet na przesuwanie witryny w dół.

Pozycjonowanie bezwzględne (position: absolute;)

Pozycjonowanie bezwzględne zachowuje się jak pozycjonowanie stałe, lecz z tą różnicą, że jest przyklejane do najbliższego w strukturze HTML (na przykład rodzica) elementu pozycjonowanego (każdego oprócz statystycznego) zamiast do ekranu. Jeżeli jednak taki nie istnieje używa w zamian znacznika <body>, wtedy zachowuje się w dokładnie taki sam sposób jak pozycjonowanie stałe.

Wyświetlanie elementu (display: wartość;)

Ta własność określa tryb wyświetlania pudełka danego elementu. W języku HTML każdy element jest pudełkiem, w zależności od ustawień wysokości bądź też szerokości może przybierać różne kształty. Wartością ‚display’ może być jedna z poniższych wartości (jest ich znacznie więcej, ale te powinny wam wystarczyć):

  • none : Ta wartość wyłącza wyświetlanie i drukowanie elementu.
  • inline : Element będzie wyświetlony w linii (sąsiadująco z innymi).
  • block : Sprawia, że element będzie zachowywał się jak gdyby był blokiem (odstęp z góry i z dołu).
  • inline-block : Sprawia, że elementy z tą wartością będą zachowywały się jak block oraz sąsiadowały ze sobą (będą ustawiały się dokładnie obok siebie dopóki starczy im miejsca w linii).
  • list-item : Sprawia, że element będzie się zachowywał, jak gdyby był podpunktem.

Przyklejanie elementów do krawędzi (float: left; / float: right;)

Po zakodowaniu parametru float: left; nasz element będzie dążył do pozostawania jak najbliżej lewej krawędzi ekranu, ignorując wszelkie marginesy oraz inne elementy.

Pozycjonowanie tekstu (text-align: left/center/right;)

Pozycjonowanie tekstu będzie wyrównywać tylko i wyłącznie tekst do lewej strony/środka/prawej strony rodzica, w którym jest umieszczony.

Wyśrodkowywanie elementów za pomocą marginesów (margin-left: auto; / margin-right: auto;)

Technika ta jest bardziej zaawansowana. Możemy ją stosować, gdy mamy zamiar wyrównać element <div>, bądź każdy inny, który przybiera postać boxu. W praktyce wygląda to tak, że element jest środkowany na stronie a jego boki są wypełniane przez marginesy. Oczywiście dalej można po jego bokach umieszczać elementy. Należy wtedy odpowiednio ustawić parametr float tych elementów oraz ustawić w hierarchii HTML element znajdujący się po środku na końcu. Oto przykładowy kod, który pozwoli wam to dogłębniej przeanalizować:

 

Stylizowanie elementów

Tło

Własność background służy do ustawiania poszczególnych wartości tła. Najważniejsze dla nas będą cztery ustawienia:

background-color – Odpowiada za ustawienie koloru tła. Mogą to być wartości hexadecymalne [#FF01EE], w systemie RGB [(255,123,111)], bądź słownie [red]. Przykład: background-color: red; / background-color: rgb(255,255,255); / background-color: #FFBBAA;.

background-image – Dzięki temu poleceniu za tło naszego elementu ustawimy obrazek. Podawanie ścieżki obrazka działa w dokładnie taki sam sposób, jak w znaczniku <img>, lecz zamiast własności src stosujemy url. Przykład: background-image: url("https://adres.pl/obrazek1.jpg");

background-repeat – Kiedy nasz obrazek będzie zbyt mały, aby pokryć całą szerokość naszego elementu możemy zastosować to polecenie, aby określić, czy ma się on rozciągać bądź też powtarzać. Na egzaminie przydadzą się nam dwie wartości: no-repeat, która sprawia, że obrazek nie będzie powtarzany oraz repeat, działająca w przeciwny sposób.

background-size – Jak sama nazwa wskazuje to polecenie odpowiada za rozmiar naszego tła. Głównie nadaje mu się wartości podane w procentach bądź pikselach.

 

Czcionki

Własność font służy do ustawienia wyglądu naszego pisma na stronie.

font-size – Własność ta określa rozmiar naszego pisma. Wartości możemy ustawić w wielu jednostkach miar, lecz na egzaminie najprawdopodobniej będą podane w px. Przykład: font-size: 15px.

font-family – Nazwa rodziny czcionek. Na przykład: „Times” i „Helvetica” są rodzinami czcionek. Nazwy rodziny czcionek, zawierające białe znaki, powinny być ujęte w cudzysłowy. Zdefiniowane są następujące rodzaje czcionek: serifsans-serifcursivefantasymonospace. Nazwy rodzajów są słowami kluczowymi i nie muszą być brane w cudzysłowy. Przykład: font-family: Courier, "Nazwa czcionki".

color – Jak sama nazwa wskazuje własność ta odpowiada za kolor czcionki. Definiowanie koloru odbywa się w dokładnie taki sam sposób jak w przypadku background-color. Przykład: color: white; / color: #FFBB00; / color: rgb(255,111,211);.

font-weight – Określa grubość czcionki. Możemy ją zdefiniować wartościami normal, bold, bolder, lighter, lub liczbą z przedziału od 100 do 900. Jeśli wybrana waga jest niedostępna, wtedy dla wartości 600-900 używana jest najbliższa dostępna większa wagi, a dla wartości 100-500 używana jest najbliższa dostępna mniejsza waga. Oznacza to, że dla czcionek, które mają tylko wagi normalną i pogrubioną, wartości 100-500 stają się wagą normalną, a 600-900 pogrubioną. Przykład: font-weight: 500; / font-weight: bold;

 

Odstępy (zewnętrzne i wewnętrzne)

margin – Własność margin określa odstępy zewnętrzne elementu, czyli te, które kolidują z innymi obiektami poza granicami naszego elementu. Możemy ustawiać marginesy dolne, lewe, prawe oraz górne osobno oraz jednocześnie. Są na to dwie metody. Jeżeli nie chcemy pisać 4 linijek kodu a mamy za zadanie ustawić każdy margines o różnej wielkości możemy to zrobić poleceniem margin: 15px 14px 13px 12px;, gdzie wartość 15px będzie odpowiadała marginesowi dolnemu, 14px lewemu, 13px prawemu a 12px górnemu lub korzystać z własności margin-left, margin-right, margin-bottom, margin-top. Jeżeli natomiast chcemy, aby każdy margines miał taką samą wartość wystarczy własność margin: 20px;. Dozwolone są wartości ujemne.

padding – Dzięki tej własności ustawiamy odstępy wewnątrz elementu. Przyda nam się to w chociażby takiej sytuacji, kiedy mamy wewnątrz naszego tekst, a chcemy aby odstawał od granic strony o podaną wartość. Tak samo jak w marginesie, możemy ustawić padding dolny, lewy, prawy oraz górny. Do paddingu również stosują się takie same zasady aplikowania wartości jak w marginesie.

 

Ramki

Własność border służy do ustawienia wyglądu obramowania naszego elementu. Może być zastosowana do ustawienia własności border-width, border-style, border-color w jednej linijce, podobnie jak w przypadku marginesów. Przykładowo możemy napisać border: 2px solid black; zamiast border-width: 2px; border-style: solid; border-color: black;/#000000;/rgb(0,0,0);. To nie koniec podobieństw z ustawieniami marginesów, również w przypadku border możemy ustawić osobne style dla obramowania górnego, dolnego, lewego oraz prawego. Wtedy nasza konstrukcja będzie wyglądać tak: border-top-color: black;. Zatrzymajmy się jeszcze na chwilę przy stylowaniu obramowania, można ustawić następujące style:

  • none : Brak obramowania, ustawia szerokość na 0. Jest to domyślna wartość.
  • hidden : Tak samo jako ‚none’, oprócz konfliktu rozdzielczości obramowania dla elementów tabeli.
  • dashed : Serie kresek lub fragmentów linii.
  • dotted : Serie kropek.
  • double : Dwie proste linie, które dają w sumie liczbę pikseli zdefiniowaną jako border-width.
  • groove : Efekt wyrzeźbienia.
  • inset : Sprawia wrażenie, że blok jest zapadnięty.
  • outset : Przeciwieństwo ‚inset’. Sprawia, że blok wydaje się trójwymiarowy (wysunięty).
  • ridge : Przeciwieństwo ‚groove’. Obramowanie wydaje się trójwymiarowe (zapowiadane).
  • solid : Pojedyncza, prosta, ciągła linia.

 

Podpunkty

Przykład listy z podpunktami kropkowanymi możecie zaobserwować powyżej. Jak już wspominałem przy okazji HTML, do stworzenia jej użyłem znaczników <ul> oraz <li>. Jednak zamiast kropek możemy używać numeracji rzymskiej, arabskiej, kwadratów bądź też obrazków. Styl punktowania zmieniamy dla znaczników <li> dzięki zastosowaniu własności list-style, a może ono przyjąć wartości:

  • circle : puste w środku kropki.
  • disc : wypełnione kolorem kropki.
  • square : kwadraty.
  • upper-roman : duże liczby rzymskie.
  • decimal : liczby arabskie.

Jeżeli jednak, zamiast znaków, chcemy wstawić obrazki musimy użyć własności list-style-image, po czym dodać źródło naszego obrazka za pomocą url. Przykładowo: list-style-image: url("https://adres.pl/obrazek1.jpg");.

 

 

13.Trochę ćwiczeń, czyli teoria w praktyce.

 

Tabelki

Stylizowanie tabelek nie jest może najbardziej przyjemnym zajęciem na świecie, lecz na 90% na egzaminie będziecie musieli to zrobić. Właśnie dlatego zaczniemy ćwiczenia od stworzenia prostej tabelki. Na początku stwórzmy prostą tabelkę zawierającą 4 rzędy i 3 kolumny. Korzystając z wcześniej nabytej przez nas wiedzy dotyczącej znaczników HTML rozpoczynamy tworzyć tabelkę znacznikiem  <table>, a następnie dodamy nagłówek z nazwą naszej tabelki za pomocą znacznika definiującego nagłówek w tabelce (<th>), niech będzie to „Pracownicy”. Skoro nasza tabelka ma dotyczyć pracowników oraz posiadać 4 rzędy, a pierwszy został zapełniony przez nazwę tabelki, musimy stworzyć trzech pracowników i wypełnić pozostałe komórki danymi dotyczącymi ich. Musimy otworzyć znacznik odpowiadający za tworzenie rzędów w tabelce (<tr>) i dodać trzy komórki z danymi (<td>), a następnie powtórzyć tą czynność dwa razy. Po wypełnieniu ich danymi powinno to wyglądać w następujący sposób:

<table>
<th>Pracownicy</th>
<tr>
<th>Imię i nazwisko</th>
<th>Stanowisko</th>
<th>Pensja</th>
</tr>
<tr>
<td>Amelia Kowalska</td>
<td>Sprzątaczka</td>
<td>1900 zł</td>
</tr>
<tr>
<td>Jerzy Kuma</td>
<td>Sprzedawca</td>
<td>2000 zł</td>
</tr>
<tr>
<td>Andrzej Majewski</td>
<td>Ochroniarz</td>
<td>2200 zł</td>
</tr>
</table>

Naszym oczom po wprowadzeniu kodu powinna ukazać się prosta, tekstowa tabelka. Musicie przyznać, że nie wygląda ona najlepiej. Czas ją trochę odpicować dzięki pomocy CSS’ów. Zacznijmy od rozciągnięcia jej na cały dostępny obszar roboczy, czyli najprościej mówiąc ekran. W tym celu musimy wybrać ciało naszej tabelki, czyli znacznik <table>, w naszym pliku styli a następnie wpisać własność width: 100%. Możemy również zmienić czcionkę stosowaną w naszej tabelce, niech będzie to czcionka arial z rodziny sans-serif. Skoro nasza tabelka rozciąga się już na cały obszar roboczy i ma ustawioną odpowiednią czcionkę zajmijmy się komórkami w niej zawartymi. Niech nasze komórki <td> oraz <th> posiadają ramkę o szerokości 1px, wyglądzie prostej lini (solid) o kolorze #313131. Stwórzmy jeszcze odrobinę przestrzeni w komórkach dzięki odstępom wewnętrznym, czyli paddingowi o wartości 10px i wyśrodkujmy tekst. Po wykonaniu operacji nasz kod powinien wyglądać w ten sposób:

table {
font-family: arial, sans-serif;
width: 100%;
}

td, th {
border: 1px solid #313131;
padding: 10px;
text-align: center;
}

 

Tworzenie układu strony i elementów na niej.

Zajmijmy się teraz tworzeniem układu strony, czyli tak zwanym „layout’u”. Tym razem postarajcie się zrobić to bez moich podpowiedzi (nie martwcie się, w razie problemów poniżej umieszczam rozwiązanie i pomoc), przedstawię wam jedynie wymagania na wzór egzaminu.

Stwórz prostą witrynę składającą się z nagłówka, lewej, środkowej i prawej kolumny. W nagłówku ma być zawarty wyśrodkowany napis „Prosta strona”, a w środkowej kolumnie ma znajdować się tabelka (uwcześniej wykonana).

Wymagania odnośnie CSS:

  • Kolor tekstu w nagłówku: biały,
  • Tekst w nagłówku ma być wyśrodkowany,
  • Obszar roboczy ma mieć ustawioną stałą szerokość 800px,
  • Kolumna lewa ma mieć rozmiar 200px, środkowa 400px, prawa 200px,
  • Kolor tła RGB nagłówka: #000000;
  • Wysokość każdej kolumny ma wynosić 400px,
  • Kolor tła lewej kolumny powinien być czerwony, środkowej #FFFF99, prawej rgb(0, 0, 255),

Końcowy efekt pracy powinien wyglądać jak na obrazku.

 

W razie kłopotów zamieszczam przykładowe rozwiązanie (umiejscowienie elementów można osiągnąć na wiele sposobów):

body, html {
width: 800px;
height: auto;
}
header {
background-color: #000000;
}
table {
font-family: arial, sans-serif;
width: 400px;
}
td, th {
border: 1px solid #313131;
padding: 10px;
text-align: center;
}
div {
background-color: #FFFF99;
display: inline-block;
margin: 0;
}
.left {
float: left;
width: 200px;
height: 400px;
background-color: red;
}
.right {
width: 200px;
height: 400px;
float: right;
background-color: rgb(0, 0, 255);
}
.middle {
width: 400px;
height: 400px;
margin-left: auto;
margin-right: auto;
}
h1 {
text-align: center;
color: white;
}

 

<body>
<header>
<h1>Prosta strona</h1>
</header>
<div class="left">
</div>
<div class="right">
</div>
<div class="middle">
<table>
<th>Pracownicy</th>
<tr>
<th>Imię i nazwisko</th>
<th>Stanowisko</th>
<th>Pensja</th>
</tr>
<tr>
<td>Amelia Kowalska</td>
<td>Sprzątaczka</td>
<td>1900 zł</td>
</tr>
<tr>
<td>Jerzy Kuma</td>
<td>Sprzedawca</td>
<td>2000 zł</td>
</tr>
<tr>
<td>Andrzej Majewski</td>
<td>Ochroniarz</td>
<td>2200 zł</td>
</tr>
</table>
</div>
</body>

 

Na ten wpis to wszystko. W następnym zajmiemy się omówieniem baz danych. Przewiduję, że pojawi się on w następnym tygodniu. Jeżeli macie jeszcze jakieś pytania lub potrzebujecie dodatkowych wyjaśnień napiszcie w komentarzu! Sugestie na temat przyszłych poradników lub obecnego również chętnie przyjmę! 😉

PS. Z powodu coraz większej ilości użytkowników postanowiłem założyć fanpage na facebooku oraz stworzyć newsletter (niedługo powinien się pojawić na stronie) aby udostępnić wam jak najwięcej możliwości śledzenia nowości na pixeloopie. Po kliknięciu w ten odnośnik zostaniecie przeniesieni do mojego fanpage’a, śledzenie go to najszybszy aktualnie sposób na informację o pojawieniu się nowego wpisu (w najbliższym czasie będą to wpisy z kategorii przygotowanie do egzaminu praktycznego E14).

Dodaj komentarz

*Wypełnij wszystkie pola poprawnie

BYĆ MOŻE TO CIĘ ZAINTERESUJE

Dodane przez Alex Pietrzak | 24 maja 2018
Funkcje natychmiastowe w JavaScript
Funkcja natychmiastowa IIFE, czyli Immediately-Invoked Function Expression jest, naprościej mówiąc, samowykonującą się funkcją w języku Javascript. Na czym to polega i kiedy nam się może przydać? Zanim jednak powiem, dlaczego...
Dodane przez Alex Pietrzak | 27 stycznia 2018
Kiedy powinienem używać jednostek rem, em, % i pikseli?
Niedawno przeglądając internet znalazłem całkiem interesujące pytanie odnośnie jednostek miar, mianowicie kiedy powinno się używać poszczególnych z nich? Szybki flashback uświadomił mi, że sam miałem ten problem kiedy zaczynałem swoją...
Dodane przez Alex Pietrzak | 19 stycznia 2018
Bootstrap 4 w końcu wydany!
Po niezliczenie wielu publikacjach wersji alpha i beta oraz przesuwaniu daty oficjalnej premiery w końcu jest, bootstrap 4 miał wczoraj oficjalną premierę. Jednak dla osób, które korzystały z którejś z...