Jak zrobić komentarze w HTML i innych językach webowych

Jeśli chodzi o programowanie w jakimkolwiek języku, bardzo ważną kwestią jest wstawianie komentarzy w pisanym kodzie. Komentarze są fragmentem kodu, który potrzebny jest tylko programistom, gdyż interpretery go pomijają, przez co nie ma on w ogóle wpływu na działanie skryptu lub programu. Ma za to niebagatelne znaczenie dla przejrzystości kodu. Komentarze wplata się między linijki kodu i opisuje za co dany fragment odpowiada, co wykonuje. Dzięki temu gdy w przyszłości ktoś będzie aktualizował skrypt lub go poprawiał, będzie wiedział co miał na myśli pierwotny twórca.

Webmaster programujący stronę internetową operuje na wielu różnych językach programowania i plikach pomocniczych. Są to m.in. pliki w HTML, CSS, PHP, SQL czy .htaccess w których poza właściwym kodem, warto umieszczać komentarze dotyczące pisanego skryptu. Niestety sposób robienia komentarzy, różni się w zależności od używanego języka programowania, dlatego poniżej instrukcje jak zrobić komentarze w HTMLu oraz innych językach i plikach, które jako webmaster na pewno będziesz tworzył lub edytował.

Komentarze w HTML (oraz XML)

Wstawianie komentarzy w pliku strony napisanej w języku HTML, przydatne jest najczęściej, aby zaznaczyć coś co się zaczyna lub kończy w danym fragmencie kodu. Wstawia się go między znakami <! – – a – – >, poniżej przykład:

<!-- Komentarz w HTML -->

Dzięki temu można np. oznaczyć w której linijce kodu dodałeś odniesienie do pliku CSS.

<!-- Tutaj dodany plik CSS -->
<link rel="stylesheet" href="css/style.css">

Co ważne, w HTMLu powyższy sposób komentowania jest wieloliniowy, a nie jak w innych językach jednoliniowy. Dzięki czemu można zmieścić większe opisy:

<!-- To jest dłuższy komentarz
do tworzonego kodu strony w HTML -->

Oczywiście powyższe komentarze nie będą interpretowane i prezentowane przez przeglądarkę internetową z której korzysta przeglądający stronę. Natomiast jeśli ktoś wejdzie w źródło strony, będzie je widział, więc warto mieć to na uwadze.
Co ciekawe w języku znaczników XML, wstawianie komentarze wygląda w identyczny sposób co w HTML.

Komentarze w CSS

Umieszczanie komentarzy w plikach kaskadowych arkuszy stylów CSS, również jest przydatne do opisywania selektorów czy reguł stylów. Robi się to w podobny sposób co w HTML, tylko że tag otwierający i zamykający jest trochę inny:

/* – otwieranie komentarza

*/ – zamknięcie komentarza

i tak to będzie wyglądało w praktyce:

/* Komentarz w pliku CSS */

Komentarz w CSS również można dzielić na kilka linijek, możesz np. wyłączyć (wziąć w komentarz) nieużywane funkcje, dzięki czemu ten fragment CSS będzie nieaktywny, ponieważ będzie komentarzem:

/*
selektor {
  color: green;
  font-size: 20px;
}
*/

Komentarze w PHP i JavaScript

Wstawianie komentarzy w języku PHP oraz JavaScript jest identyczne. Identyczne również jak w C/C++, ale ten język programowania nie jest webowy, więc nas nie interesuje. Są dwa sposoby, żeby zrobić komentarz w plikach .php lub .js:

  1. Wieloliniowy otwierający się znakami /* i zamykający znakami */ (podobnie zresztą jak w CSS)
  2. Jednoliniowy otwierający się znakami //

Poniżej przykłady użycia:

/* To jest komentarz w pliku PHP lub JavaScript */

// To jest komentarz w jednej linii

Odnośnie drugiej metody, to warto pamiętać, że komentarz rozpoczyna się od dwóch ukośników i rozciąga się do końca linii w której te ukośniki się znajdują. Należy też pamiętać że komentarzy wieloliniowych nie można w sobie zagłębiać, czyli nie można wstawiać komentarza w komentarz.

Komentarze w SQL

W języku bazodanowym SQL, podobnie jak np. w PHP, istnieją dwa sposoby wstawiania komentarzy w kod źródłowy. Pierwszy jest identyczny jak w PHP, JavaScript czy CSS, czyli otwierany i zamykany przez gwiazdkę i ukośnik:

/* Pierwszy sposób na komentarz w SQL */

Oczywiście tą metodą możesz wstawiać dłuższe komentarze w wielu liniach kodu. Natomiast drugim sposobem, jest wstawianie komentarzy w jednoliniowych, które poprzedza się dwoma znakami myślnika – –. Tak to będzie wyglądało w kodzie:

-- Druga metoda komentarzy w SQL

Komentarze w .htaccess (i robots.txt)

Plik .htaccess co prawda jest tylko plikiem konfiguracyjnym, a nie typowo związany z jakimś językiem programowania, ale niemal każdy webmaster będzie operował. W tym pliku również można dodawać komentarze, więc informacja jak to zrobić, zapewne przyda się każdemu, zwłaszcza przy bardziej rozbudowanych plikach.
Komentarze w plikach htaccess wstawia się poprzedzając znakiem hash #, poniżej przykład:

# Komentarz w pliku .htaccess
# dalsza część komentarza

Jak widzisz na powyższym przykładzie, każda linia komentarza powinna być poprzedzona haszem. Powyższa metoda działa również w plikach robots.txt.


Jak sprawdzić kolor na stronie www?

Na stronach internetowych poza gotowymi grafikami, często używane są różnego rodzaju elementy graficzne, belki menu, sekcje, tła itp. Mają one określone kolory, które najczęściej ustawia się w kaskadowych arkuszach stylu CSS. Czasami jako webmasterowi spodoba Ci się dany kolor z konkretnego elementu na innej stronie i chciałbyś się dowiedzieć jaki to jest kolor. A konkretniej przydałby się kod koloru w HTML, który można by użyć u siebie przy tworzeniu strony www.

Jaki kolor został użyty na stronie internetowej można sprawdzić w każdej chwili, sprawdzając w przeglądarce internetowej. Na poniższym przykładzie została użyta przeglądarka Opera, aczkolwiek nic nie stoi na przeszkodzie, żeby to była inna np. Firefox czy Chrome, jedynie opis funkcji w menu może się nieznacznie różnić.

Najeżdżasz kursorem na dany element strony, którego kolor chcesz sprawdzić i klikasz prawym przyciskiem myszy, następnie z menu kontekstowego wybierasz Zbadaj element.

zbadaj element

Wyświetli się specjalna konsola dla developerów, w której można sprawdzić wiele aspektów technicznych strony, którą badamy. Jeśli wybrałeś opcję na konkretnym elemencie, to wyświetli się jego fragment kodu źródłowego (w HTML), a poniżej w sekcji Style znajdziesz jaki kolor został użyty w CSS.

sprawdzanie koloru na stronie

W przykładzie na powyższych screenach, badany był kolor belki menu na tej stronie (rankhost.pl), dzięki czemu dowiedzieliśmy się, jaki to jest kolor zapisany w kodzie HTML – #54397E, czyli ciemnofioletowy.

Jak widać, w konsoli sprawdzisz wiele innych kolorów z danej strony np. kolor tła. Jeśli natomiast dany element strony jest grafiką (np. w formacie JPEG), to musisz użyć zewnętrznego programu np. Peacock Color Picker, do którego link umieściliśmy w dodatkach dla webmasterów na naszej stronie.