Będzie to mój pierwszy mniej ogólny wpis na temat podstaw tworzenia stron internetowych na tym blogu. Zakładam też, że wyposażyłeś się już w jeden z polecanych przeze mnie programów do kodowania. Na tę chwilę tylko on będzie nam potrzebny.
Zaczynamy! Strona, jej struktura (a konkretniej markup ) budowana jest za pomocą takich oto znaczników < …>. Otwiera się w ten sposób < …> a zamyka w ten < ⁄…>. Miejsce kropek to nazwa etykiety (np. <p>Tekst</p>-paragraf), za pomocą której określany jest typ treści, jaki chcemy umieścić na swojej stronie. Między nimi umieszczamy nasz kontent. Za ich pomocą definiujemy również całą strukturę dokumentu. Same znaczniki to bardzo rozległy temat. Postaram się wytłumaczyć i opisać tylko te, których będę używał w swoim mini tutorialu. Zaczniemy od struktury całej strony która wygląda tak – Przejdź do strony. Warto zapoznać się z treścią. Ja natomiast przedstawię wam krótki kod struktury strony internetowej.
Prosty przykład strony WWW w HTML-u z ustawieniem języka polskiego:
1 2 3 4 5 6 7 8 9 10 |
<!doctype html> <!-- opisuje rodzaj dokumentu otwieramy html --> <html lang="pl" dir="ltr"> <!-- informujemy że strona jest w języku polskim --> <head> <!-- otwieram sekcje head --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- definujemy rodzaj kodowania --> <title>Tytuł strony</title> <!-- tytuł strony --> </head> <!-- zamykamy sekcje head --> <body> <!-- otwieramy sekcje body --> <h1>Nagłówek pierwszego poziomu</h1> <!-- tu jest przykładowy nagłówek oznaczamy <h1> --> </body> <!-- zamykamy sekcje body --> </html> <!--zamykamy html --> |
Kod ten możemy spokojnie skopiować do naszego kompilatora. Tu komentarze są troszkę rozjechane ale po skopiowaniu wszystko powinno być ok. Musimy również uważać, zeby nie skopiować żadnego numeru linijki. Języki programowania są bardzo ścisłe. Brak przecinka, znaku, niepotrzebna spacja może zniwelować nasz cały wysiłek. Szkielet ten przedstawia w sposób uproszczony strukturę strony html. Jeżeli ktoś jest zainteresowany specyfikacją szkieletu najnowszego standardu html5, zapraszam na stronę.
Przejdź do strony ze schematem.
Tekst zawarty w znaczniku z wykrzyknikiem (np. <!– zamykamy sekcje body –>) oznacza komentarz. Nie należy do kodu. Służyć ma tylko jego opisowi. Po skopiowaniu możesz spróbować zapisać plik na dysku (z rozszerzeniem html) i uruchomić stronę za pomocą przeglądarki
Na stronie powinno Ci się wyświetlić:
Nagłówek pierwszego poziomu
Brawo! Właśnie stworzyłeś stronę z jednym nagłówkiem. Pozostałe znaczniki to struktura, która nie jest wyświetlana. W następnej lekcji dodamy tekst który wyedytujemy oraz kilka elementów body. Opowiem także o metatagach, które znajdą się w sekcji head.
Stay tuned 🙂