• Wprowadzenie
• Znaczniki
• Listy
• Tabele
• Linki
• Obrazy
• Formularze
• Pliki mp3
• Filmy

Najpierw tworzymy plik, nazywamy go i dajemy mu rozszerzenie ".html". Następnie możemy otworzyć go w różnych programach. Jeżeli nie chcesz pobierać nowej aplikacji, możesz skorzystać z notatnika. Jednak korzystanie z niego nie jest tak wygodne jak korzystanie z VSC albo notepad++, dlatego polecam zainstalowanie którejś z tych aplikacji.

Po stworzeniu pliku musimy zapisać w znakach "<>" słowa "!DOCTYPE html" (co informuje program, że będziemy pisać w HTML) oraz za DOCTYPE zapisujemy również w znacznikach slowo html, a w nim... okej rozumiem, to brzmi trochę skomplikowanie. W takim razie pokażę jak ma wyglądać kod, który tworzy pustą stronę.

Już tutaj widać różnicę między VSC czy notepad++, a notatnikiem. Notatnik nie ma kolorowych znaczników, nie podpowiada nazw, ani nie zamyka sam automatycznie znaczników.

Teraz, jak już zapisaliśmy powyższy kod, możemy zacząć tworzyć naszą stronę.

Od razu informuję, że w tym poradniku będziemy się uczyć tylko i wyłącznie HTML (dlatego wszystkie znaczniki - po za title - zapisujemy w środku znaczników body). CSS możecie nauczyć się z innego naszego poradnika, zaś poradnik o JavaScript nie został jeszcze stworzony.

Znacznik w HTML znajduje się w znakach "<>" i z reguły jest on po angielsku. Funkcją znaczników jest informowanie HTML jakiej funkcji chcemy użyć i jak ma wyglądać strona (pod względem ułożenia tekstu - za ozdoby (kolory grubości linii itp.) odpowiada CSS). Większość znaczników ma zamknięcie które zapisuje się w znakach "<>". W środku piszemy "/" oraz za nim nazwę zamykającego znacznika.

Są jednak WYJĄTKI!!! Niektóre znaczniki nie są zamykane. W dalszej części poradnika pojawi się informacja, jeżeli znacznik nie będzie zamykany.

• Znacznik Title:

  Znacznik Title (z ang. Title - tytuł) odpowiada za nadawanie tytułu karcie, w której otwarta jest strona - tytuł tej strony to "HTML".

• Znaczniki h:

  W HTML jest 6 znaczników h (z ang. Heading - nagłówek) - h1, h2, h3, h4, h5, h6. Im większa będzie liczba przy literze "h" tym mniejszy będzie stworzony nagłówek Wielkość każdego ze znaczników wygląda tak:.

  1. h1

  2. h2

  3. h3

  4. h4

  5. h5

  6. h6

• Znacznik p:

  Znacznik p (z ang. Paragraph - akapit) tworzy linijkę zwykłego tekstu bez pogrubienia. Przykład:

  Ala ma kota (tak wygląda paragraf w HTML).

• Znacznik br:

  Znacznik br (z ang. Break - przerwa) tworzy dodatkową przerwę na stronie:

  
  

  !UWAGA! Znacznika br nie zamyka się!!!

• Znacznik hr:

  Znacznik hr (z ang. Horizontal rule - pozioma linia) jest podobny do znacznika br z jedną różnicą, że znacznik hr tworzy poziomą linię oddzielającą. Przykład:

  ---

  !UWAGA! Znacznika hr nie zamyka się!!!

• Znacznik b:

  Znacznik b (z ang. Bold - pogrubiony) pogrubia napisany tekst. Przykład:

  Ala ma kota

  !UWAGA! Znaczniki h jako nagłówki od razu przy tworzeniu automatycznie zostają pogrubione - w tym przypadku rozmiar nie ma znaczenia.

• Znacznik i:

  Znacznik i (z ang. Italic - kursywa) trochę "pochyla" napis. Przykład:

  Ala ma kota.

• Znacznik u:

  Znacznik u (z ang. Underline - dolna linia) podkreśla poziomą linią napis. Przykład:

  Ala ma kota.

• Znacznik mark:

  Znacznik mark (z ang. Mark - zakreślić) "zakreśla" napis. Przykład:

  Ala ma kota.

• Znacznik del:

  Znacznik del (z ang. Delete - usunąć/skasować) przekreśla napis poziomą linią. Przykład:

  Ala ma kota.

• Znaczniki sup i sub:

  Znaczniki sup (z ang. Superscript - indeks górny) i sub (z ang. Subscript - indeks dolny) tworzą odpowiednio indeks górny oraz indeks dolny. Przykład:

  2⁶ = 64

  H₂O to związek chemiczny o nazwie woda.

• Znacznik span:

  Znacznik span (z ang. Span - zakres) informuje, że tekst w środku będzie w innym kolorze. Atrybut style określa kolor. Przykład:

  Prawa autorskie są ZASTRZEŻONE!!!

• Znacznik div:

  Znacznik div (z ang. Division - podział, sekcja) tworzy osobny "prostokąt/blok". Kolor można wybrać. Przykład:

  Tak wygląda blok stworzony przez div.

W HTML wyróżniamy 3 główne typy list: Listę nieuporządkowaną, Listę uporządkowaną oraz Listę definicji.

• Lista nieuporządkowana:

  Używana gdy chcemy coś wypunktować, ale kolejność punktów nie ma znaczenia. Przykład:

  Lista zakupów:

  • mleko

  • jajka

  • mąka

  Aby ją skonstruować potrzebne są 2 znaczniki: znacznik ul (z ang. Unordered list - lista nieuporządkowana) - który informuje HTML, że zaczynamy tworzyć listę i że będzie ona nieuporządkowana - oraz zancznik li (z ang. List item - element listy) który tworzy pierwszy/kolejny punkt w liście.




• Lista uporządkowana:

  Również używamy jej kiedy chcemy coś wypunktować, ale kiedy kolejność ma znaczenie. Przykład:

  Przepis na spaghetti:

  1. Przygotować składniki.

  2. Wstawić wodę na makaron.

  3. Wrzucić mięso na patelnię.

  4. ...

  W liście uporządkowanej znacznik li się nie zmienia, ale zamiast znacznika ul stosujemy znacznik ol (z ang. Ordered list - lista uporządkowana).




• Lista definicji:

  Używamy jej kiedy chcemy zdefiniować jakieś słowo/-a. Przykład:

  HTML

  Język służący do programowania stron.

  Wszystkie używane znaczniki w tej liście są nowe. Za pomocą znacznika dl (z ang. Description list - lista definicji) informujemy HTML jaką listę tworzymy. Znacznik dt (z ang. Definition term - termin definicji) służy do stworzenia słowa/słów, którego/których znaczenie chcemy opisać. Ostatnim znacznikiem jest znacznik dd (z ang. Description definition - definicja opisu), który tworzy wcięcie na definicję tego słowa/tych słów.

W HTML jest tylko jeden rodzaj tabeli, ale aż cztery główne znaczniki:

Przykład tabeli:

Aby stworzyć link (hiperłącze) w HTML treba użyć znacznika a (z ang. Anchor - kotwica), który informuje HTML, że tworzymy link. Dzięki temu, HTML zamieni stworzony napis na hiperłącze które będzie podkreślone i miało niebieski kolor - oznaczający link (po kliknięciu zostaniemy przekierowani w inne miejsce - jeżeli link działa prawidłowo).

Jednak znacznik a jedynie informuje HTML o tworzeniu linku. Prawidłowy link zamieszcza się w atrybucie znacznika a o nazwie href (z ang. Hypertext Reference - odnośnik hipertekstowy). Przykład:

Jednak ten link przenosi nas na wybraną stronę, ale w tej samej karcie. Jeżeli chcemy aby okno otworzyło się w nowej karcie, trzeba dodać atrybut target = "_blank". Przykład:

Do wstawiania obrazów potrzebny jest znacznik img (z ang. Image - obraz), który informuje HTML, że wstawiamy obraz.

Img również posiada atrybuty. O to najważniejsze z nich:

Przykład obrazu:

Jeżeli obraz się nie wyświetli, program pokaże napis "Heroes III of Might and Magic". Z kolei po najechaniu kursorem i poczekaniu, wyświetli się identyczny napis. Wymiary są ustawione automatycznie.

Jak się tworzy formularze w HTML?

Przykłady różnych form formularzy:

Aby zamieścić plik muzyczny trzeba użyć znacznika audio (z ang. Audio - dźwięk), a następnie w nim stworzyć znacznik source i wkleić ścieżkę do utworu. Przykład:

Pokazany powyżej blok dźwiękowy, nie zawiera źródła, przez co nie można go odtworzyć.