Dodano 2017-06-30 18:11:16 przez Daniel
Tak jak standardowo na początku nauki programowania w dowolnym języku do tego stworzonego także i w języku strukturalnym, którym jest HTML zaczniemy od stworzenia podstawowej strony, na której się dzieje niewiele poza wyświetlaniem napisu. Dlaczego nazwałem HTML językiem strukturalnym? Ponieważ nie jest to język za pomocą, którego można napisać jakikolwiek program. HTML odpowiada za stworzenie struktury dokumentu. Chodzi tutaj o rozmieszczenie elementów. Przesadnym by tutaj było nawet określenie że HTML odpowiada za wygląd strony, ponieważ jest to prawda tylko częściowo. Za pomocą tego języka tworzymy strukturę dokumentu a wygląd nadajemy za pomocą opisanych w kolejnych częściach kaskadowych arkuszy stylów CSS.
Mam na myśli tutaj pierwszą stronę internetową. Prawdę mówiąc nie wymaga to żadnego oprogramowania, oznacza to że aby stworzyć stronę internetową wystarczy zwykły edytor tekstu taki jak notatnik w standardzie Windows. Wystarczy po prostu otworzyć notatnik, wpisać kawałek kodu i zapisać z rozszerzeniem .html , no i mamy pierwszą stronę internetową z tym że trzeba ją jeszcze wrzucić na serwer, aby można ją było zobaczyć z każdego miejsca z dostępem do internetu.
Jednak jako że wykorzystywanie w tym celu notatnika jest nie profesjonalne i niewygodne, będziemy wykorzystywać jeden z najlepszych darmowych programów do tego celu NetBeans, którego instalację i pierwszy start opisałem TUTAJ.
Aby stworzyć pierwszą stronę internetową otwieramy program NetBeans, i w lewym górnym rogu rozwijamy „Plik” gdzie znajdziemy „New Project”. W tym momencie należy kliknąć tę właśnie opcję aby utworzyć nowy projekt html. Otworzy się okno jak poniżej:
Tutaj mamy do wyboru różnego rodzaju projekty w lewym oknie. Do wyboru jest HTML5/JavaScript, PHP oraz samples. Wprawdzie w tym momencie nie interesuje na JavaScript ale jako że pierwsza z opcji zawiera HTML5 to wybieramy właśnie ją. Po wyborze pokazuje się kilka opcji do wyboru po prawej, w tym momencie wybieramy pierwszą z nich. Po czym klikamy „Następny” na dole.
Następny krok to wybór nazwy projektu i miejsca na dysku, w którym się znajduje. Jeśli zainstalowałeś NetBeans zgodnie ze wskazówkami zawartymi na tej stronie to powinieneś osiągnąć widok podobny jak na obrazku powyżej. Nie trzeba tu chyba wiele tłumaczyć. W tym miejscu można kliknąć „Następny” ale w zasadzie można też kliknąć „Zakończ” wówczas utworzy się nowy pusty projekt HTML. W przypadku przejścia dalej, kolejnym krokiem jest wybór szablonu, jako że jest to bardzo podstawowy kurs mający na celu zapoznanie użytkownika z absolutnymi podstawami nie korzystamy tutaj z szablonów. Dalej są narzędzia, można odznaczyć, program domyślnie tworzy pliki dzięki, którym można znacznie usprawnić pracę, szczególnie jeśli posiada się dwa monitory :), ale póki co najprzydatniejsza informacja jest taka że w przyszłości można sprawić by strona sama się odświeżała w przeglądarce po każdej zmianie w pliku projektu.
Po utworzeniu projektu na starcze otrzymujemy podstawowy szablon jak na obrazku poniżej.
Kolejna część tej części to omówienie powyższego kodu.
Na samym początku każdego dokumentu HTML powinien się znajdować znacznik DOCTYPE określający typ dokumentu. Z punktu widzenia zwykłego użytkownika odwiedzającego stronę nie ma to za bardzo znaczenia ale dla przeglądarek i zapewne dla Google już trochę ma dlatego tez na początku każdego projektu HTML umieszamy
<!DOCTYPE html>
Dalej mamy znaczniki odpowiedzialne za umieszczanie komentarzy <!– –>, dzięki którym możemy umieścić w kodzie dowolny komentarz, który później nie będzie widoczny dla osoby odwiedzającej naszą stronę. No chyba że taka osoba trochę się zna i zajrzy do kodu źródłowego strony, najeżdżając myszką na dowolny element i klikając zbadaj lub pokaż źródło strony. Ogólnie komentarze najczęściej wykorzystuje się w większych plików do zaznaczania i opisu w którym miejscu zaczyna się i kończy jakaś konkretna sekcja. Można w ten sposób także „schować” dowolną część strony przed oczami gościa. Komentarze umieszcza się tak jak widać w szablonie startowym.
<!-- Jakiś komentarz na przykład początek sekcji artykułu -->
Następnym elementem jest znacznik html. Każdy dokument html musi być zawarty w znacznikach html, jest to kwestia obowiązkowa.
<html>
<!-- Reszta dokumentu -->
<//html>
Absolutnie każdy dokument HTML jest podzielony na sekcje head i body czyli głowę i ciało dokumentu. Można sobie skojarzyć że głowa myśli a ciało wygląda. W sekcji head ustawia się wszystkie meta tagi (o których w części następnej) określa się tytuł strony, słowa kluczowe, opis widoczny w wyszukiwarce i wiele więcej zachowań strony. Sekcja body to cała treść strony widoczna dla użytkownika. idąc dalej..
<html>
<head>
<!-- część logiczna dokumentu -->
</head>
<body>
<!-- część prezentacyjnna dokumentu -->
</body>
</html>
W tym właśnie momencie narzuca się podstawowa kwestia w programowaniu, może niezbyt istotna z punktu widzenia funkcjonalności programu, strony czy wyglądu dla użytkownika ale szalenie ważna dla programisty, są nią WCIĘCIA. Wcięcia to takie cztery spacje przed każdą linijką kodu elementu umieszczonego w innym elemencie. Bez wcięć kod jest praktycznie nieczytelny i szybko się pogubisz, jest to jeden z głównych powodów używania IDE (czyli specjalnych programów do programowania :)). Zawsze rób wcięcia, NetBeans ci w tym pomoże.
Warto wiedzieć że w NetBeans możesz automatycznie sformatować kod zaznaczając kod i wciskając kombinację klawiszy alt + shift + F
Jeśli chodzi o body czyli ciało dokumentu to w tej części nie ma co wiele omawiać. W podstawowym szablonie IDE NetBeans widać znacznik div. Div to podstawowy box/pudełko/opakowanie, ogólnie podstawowy element w HTML5, dla którego określa się jakieś parametry i umieszcza się w nim inne elementy. Taka podstawowa jednostka dokumentu.
<div>Jakiś tekst na stronie</div>
Większość kursu będzie o sekcji body i elementach w niej się znajdujących.
Z podstawowych elementów głowy dokumentu (head) jest znacznik title, który określa tytuł strony. To co umieścimy w title będzie się wyświetlało zarówno w zakładce przeglądarki (tam na górze gdzie są pootwierane kraty) jak i w wyszukiwarce. Znaczniki meta będziemy omawiać w kolejnej części.
<head>
<title>Moja strona</title>
</head>
No i to na tyle części merytorycznej. Od razu na starcie możemy sobie usunąć komentarz na początku dokumentu oraz zmienić tytuł i zawartość strony.
Teraz nie pozostało nic innego jak uruchomić nasze dzieło. Po pierwsze przechodzimy do miejsca na dysku, w którym zapisaliśmy projekt w moim przypadku jest to C:/xammp/htdocs/HTML5_1
i teraz ważne żeby zwrócić uwagę na to że tworząc projekt NetBeans tworzy się pewna struktura katalogów w tym przypadku odrazu wchodzimy do folderu o nazwie public_html. Powinien się tam teraz znajdować plik o nazwie index.html klikamy go dwa razy lub prawym -> otwórz za pomocą -> i tutaj wybieramy nasza przeglądarkę.
Drugi sposób jest znacznie prostszy lepszy i przyjemniejszy po prostu klikamy zielony przycisk w NetBeans:
Oczywiście jest jeszcze trzeci sposób, polegający na kliknięciu prawym na projekcie a następnie „run”. Jako że zazwyczaj grzebię w nieskończonej ilości projektów i plików to jak już wybieram sposób nr 3.
No i to na tyle w tej części. Ostateczny efekt naszej pracy nie jest zbyt zaskakujący.
No ale czego można się spodziewać po kilku linijkach kodu.