Pierwszy projekt
Przedstawię teraz sposób tworzenia nowego projektu w aplikacji Netbeans 7.1.2. Jest to dosyć istotne by każda osobna strona była nowym projektem. Z tego względu wykonaj następujące czynności:- Uruchom Netbeans'a (Możliwe, że musisz uruchomić "jako administrator")
- Wybierz File » New Project » PHP » PHP Application
- Project name : Lekcja 1
- Sources Folder : Twoja_Lokalizacja_Folderu\Lekcja1
- PHP Version : PHP 5.3
- Default Encoding : UTF-8
- Dalej NEXT, NEXT, FINISH
Następnie należy dodać nowy plik do projektu:
- File » New File » Other » HTML File » NEXT
- File Name : przyklad_x_y.html (X- lekcja, Y- przykład)
- Finish
Trochę teorii
Sekcja – jest to słowo tak dwuznaczne, przynajmniej dla mnie. W pewnym sensie przeprowadzimy tu sekcję strony internetowej i spróbujemy dowiedzieć się, co ona posiada. Hmmm… posiada na pewno… – SEKCJE.! UWAGA !
Podczas tej lekcji będę używał tzw. komentarzy przy przykładowych kodach źródłowych. Oznacza się je jako <!– Tekst komentarza –>. Nie powodują komplikacji na stronie, zostają ominięte przez przeglądarkę.
HTML
Pierwsza podstawowa sekcja całego dokumentu HTML. Jest określona znacznikami:<!-- przykład_1_1.html -->
<html>
<!-- Tu jest kod strony html, tzn powinien być, ale łogry zjadły... -->
</html>
Widzimy znacznik otwierający – <html> oraz znacznik zamykający – </html>. Jak nie trudno zauważyć zgodnie z moją zasadą z wpisów wcześniejszych znacznik zamykający od otwierającego różni się tylko slashem. Nas interesuje przestrzeń pomiędzy nimi. Jest to przestrzeń dokumentu HTML. Te dwa znaczniki określają konkretne granice – początek i koniec strony (kodu źródłowego).
HEAD
O sekcji head przeczytasz więcej w następnym wpisie tego kursu, a na tą chwilę powiem Ci jak ona wygląda:<!-- przyklad_1_2.html -->
<html>
<head>
<!-- To jest sekcja HEAD -->
</head>
<!-- A to poprzednio wspomniana część dalsza sekcji HTML -->
</html>
Jak nietrudno zauważyć sekcja HEAD – nagłówkowa – zawiera się w HTML. Jest to naturalne. Jej głównym zadaniem jest przekazanie przeglądarce takich informacji jak wygląd strony, strona kodowa (o tym kiedy indziej), mała ikonka obok adresu i tym podobnych. W sekcji nagłówkowej znajduje się wiele przydatnych znaczników. Wrócimy do niej później.
BODY
Cel naszej nauki – sekcja BODY. Najpierw krótki przykład:<!-- przyklad_1_3.html -->
<html>
<head>
<!-- nagłówek -->
</head>
<body>
<!-- ciało strony -->
</body>
</html>
Jak możesz przeczytać powyżej sekcja BODY to ciało strony. Wszystkie elementy, układ, linki, grafiki są właśnie tutaj i to w tej sekcji projektuje się całą stronę internetową. Ona będzie interesowała nas najbardziej. Zwróć także uwagę, że zniknął nasz komentarz odnośnie sekcji HTML. Otóż prawda jest taka, że sekcja HTML zawiera jedynie 2 sekcje <HEAD> oraz <BODY> Nie może zawierać nic więcej. Zwróć także uwagę na wcięcia jakie wykonałem w ostatnim przykładzie. Powodują one, że kod staje się czytelniejszy, a co za tym idzie – łatwiejszy do późniejszej edycji i zrozumienia. Staraj się robić wcięcia tak, aby kolejne zagnieżdżone strefy/znaczniki/sekcje były o 1 TAB dalej. Dzięki temu pisanie strony będzie naprawdę dużo bardziej przyjemne.
Praca domowa:
Przeczytaj ten fragment jeszcze raz i postaraj się wyłowić najważniejsze szczegóły. Która z w/w sekcji będzie interesowała Cię najbardziej i dlaczego? Odpowiedz sobie na to pytanie.
Brak komentarzy:
Prześlij komentarz