Podstawowe komendy HTML są bardzo pomocne w każdej pracy z komputerem. Nie tylko programisty. Praca w administracji, księgowości, marketingu, czy w audycie wymaga narzędzi. Te czasem bywają kapryśne. W takich momentach warto znać podstawowe komendy HTML i umieć je wykorzystać.
Czym są komendy HTML?
HTML to prosty język do tworzenia stron internetowych. Budzi uśmiech na twarzy osób, które pamiętają jeszcze początki rozpowszechniania się Internetu w Polsce. Barwne strony, animacje i różnorodne czcionki tworzyły niezwykle kreatywne strony internetowe, zupełnie różne od stylu, który dominuje współcześnie.
Choć HTML nadal tworzy szkielet stron internetowych, to wspierają go inne narzędzia. CSS (odpowiedzialny za wygląd strony), JavaScript (definiujący reakcje strony) i gotowe systemy, jak np. WordPress.
Komendy HTML to takie instrukcje/znaczniki dla strony, które określają, jak dana strona internetowa ma wyglądać i działać. Przykładowo, wyznaczają miejsce, w którym ma się znajdywać akapit tekstu, gdzie zdjęcie, a gdzie ma być umieszczony link w tekście.
Podstawowe komendy HTML w codziennej pracy
W dzisiejszym świecie nasze życie toczy się w dużej mierze właśnie w sieci. Dlatego nawet osoby, które nie mają związku z programowaniem, czy informatyką w ogóle – powinny znać podstawowe komendy HTML. To istotne, szczególnie gdy chcemy samodzielnie wprowadzać drobne zmiany na swojej stronie www. Warto jednak pamiętać, że podstawy przydają się także w zawodach niezwiązanych bezpośrednio z programowaniem, ponieważ coraz więcej narzędzi opiera się na pracy z dokumentu HTML.
Przykładowo pracownik marketingu może edytować newsletter lub opis na stronie www. Nauczyciel przygotować materiały dydaktyczne zapisane w języku HTML, a pracownik biurowy poprawić układ treści w prostym dokumencie HTML. Dzięki temu łatwiej odnaleźć się w środowisku cyfrowym i sprawniej wykonywać codzienne obowiązki związane z obsługą dokumentu HTML.
HTML – podstawowe komendy i ich zastosowanie
Podstawy HTML to najczęściej używane znaczniki, które odpowiadają za strukturę strony i jej poprawne wyświetlanie w przeglądarce. Warto je poznać.
- <html> – określa początek i koniec dokumentu HTML. Bez niego przeglądarka może mieć problem z interpretacją całej strony.
- <head> – sekcja nagłówkowa, w której umieszczamy m.in. tytuł dokumentu, informacje o kodowaniu znaków czy linki do arkuszy stylów CSS.
- <title> – odpowiada za tytuł strony widoczny na karcie przeglądarki. Ważny także pod kątem SEO i słów kluczowych.
- <meta> – pozwala określić m.in. kodowanie znaków oraz dodatkowe informacje o stronie, które wpływają na jej poprawne wyświetlanie.
- <body> – zawiera właściwą treść strony, czyli wszystko to, co widzi użytkownik.
- <h1> – <h6> – służą do definiowania nagłówków, czyli tytułów rozdziałów i sekcji; pomagają uporządkować treść.
- <p> – umożliwia tworzenie akapitów, co znacząco poprawia czytelność tekstu.
- <br> – wstawia pojedyncze złamanie linii. Przydatne, gdy chcemy ręcznie kontrolować układ tekstu.
- <a> – tworzy linki (odnośniki) do innych stron lub sekcji; niezbędny w nawigacji.
- <img> – pozwala wstawić obrazek. Używany wszędzie tam, gdzie treść wymaga elementów wizualnych.
- <div> – uniwersalny kontener do grupowania elementów. Często używany wraz z arkuszami stylów CSS do stylizacji i układu strony.
- <span> – podobny do <div>, ale stosowany do mniejszych fragmentów tekstu, np. gdy chcemy zmienić rozmiar czcionki lub wyróżnić fragment.
- <style> lub <link> – umożliwiają podpięcie arkuszy stylów CSS, które odpowiadają za wygląd strony (np. kolory, wyrównanie tekstu).
- </html> – oznacza koniec dokumentu HTML. Jego brak może powodować błędy w renderowaniu strony.
Bardziej zaawansowane komendy HTML
Gdy opanujemy podstawy HTML, warto przejść krok dalej i poznać znaczniki oraz atrybuty, które pozwalają precyzyjniej kontrolować poszczególne elementy strony i ich zachowanie.
- <!DOCTYPE html PUBLIC> – starsza deklaracja typu dokumentu. Dziś rzadziej używana, ale możena ją spotkać w starszych projektach. Określa sposób interpretacji kodu przez przeglądarkę.
- <ul> oraz <ol> – służą do tworzenia list. <ol> to lista uporządkowana (numerowana), przydatna np. w instrukcjach.
- <li> – pojedynczy element listy.
- <table>, <tr>, <td> – pozwalają tworzyć tabele, czyli zestawienia danych w wierszach i kolumnach. Przydatne przy prezentacji danych liczbowych lub porównań.
- <form> – umożliwia tworzenie formularzy, np. do kontaktu lub rejestracji użytkownika.
- <input> – pole formularza, które może mieć różne typy (tekst, hasło, checkbox). Daje możliwość zbierania danych od użytkownika.
- <label> – opisuje pola formularza, poprawiając użyteczność i dostępność strony.
- <section>, <article> – pomagają logicznie dzielić treść na sekcje i artykuły, co ułatwia organizację i zrozumienie struktury strony.
- <nav> – definiuje sekcję nawigacyjną, czyli menu strony.
- <footer> – oznacza dolną część strony, często zawierającą informacje kontaktowe lub prawa autorskie.
- <font> (przestarzały) – kiedyś używany do zmiany wyglądu tekstu, np. font size, font weight czy font family. Dziś jego funkcję przejęły arkusze CSS, które pozwalają tworzyć tekst o różnej wielkości i stylu w bardziej nowoczesny sposób.
Gdzie wpisujemy komendy HTML?
Komendy HTML wpisuje się do pliku z rozszerzeniem .html. Sprawdzi się do tego choćby notatnik. Można jednak użyć specjalnie do tego celu przeznaczonych edytorów kodu. Kod musi znajdować się między znacznikami <html> a </html>. Zapisany plik wystarczy uruchomić w przeglądarce, aby zobaczyć utworzony wygląd strony.