W tym miejscu zebrałem najczęściej zadawane pytania dotyczące HTML podczas rekrutacyjnych, zwanych również kwalifikacyjnymi na stanowisko Frontend developera.
Zanim przejdę do pytań, pozwól, że pokrótce wyjaśnię czym jest HTML.
HTML rozszyfrowując oznacza HyperText Markup Language. Jest to język służący do tworzenia dokumentów hipertekstowych oraz opisywania struktury informacji zawartych wewnątrz strony. Aktualnie obowiązującą wersją HTML jest HTML 5. HTML opisuje strukturę stron internetowych.
HTML jest językiem interpretowanym przez przeglądarkę i mówi przeglądarce, co i jak wyświetlić.
Zapraszam również do Pytań rekrutacyjnych CSS i Pytań rekrutacyjnych JavaScript
Więcej pytań rekrutacyjnych z odpowiedziami znajdziesz w ebooku, który przygotowałem specjalnie dla Ciebie
Co to jest HTML?
HTML czyli HyperText Markup Language (pol. hipertekstowy język znaczników). W prostych słowach, HTML to technologia, służąca do tworzenia stron internetowych.
Gdyby rozbić tę nazwę na czynniki pierwsze, to składające się na nią słowa oznaczają po kolei:
HyperText (hipertekst) – zwany jest też hiperłączem. To tekst zawierający odniesienia do innego tekstu lub strony, co pozwala za jednym kliknięciem myszy przejść do dowolnego miejsca w sieci.
Markup (znacznik) – określany jest także jako tag. Używa się go do sterowania wyglądem strony i jej funkcjonalnościami. Za pomocą znaczników można np. zmienić kolor tła, wyboldować tekst czy wstawić grafikę.
Language (język) – to najprostsza do zrozumienia część akronimu. Jak każdy język, HTML składa się z unikalnej składni i alfabetu.
HTML jest językiem znaczników. Jego najważniejszą funkcją jest ustalenie (oznaczanie) struktury, układu i prezentacji zawartości strony internetowej (np. jej treści, nagłówków, obrazów). W połączeniu z innymi językami, takimi jak kaskadowe arkusze stylów (CSS) i JavaScript może tworzyć atrakcyjne wizualnie i interaktywne witryny.
jest to język służący do tworzenia dokumentów hipertekstowych oraz opisywania struktury informacji zawartych wewnątrz strony. Aktualnie obowiązującą wersją HTML jest W3C HTML 5. HTML opisuje strukturę stron internetowych, a CSS określa formę jej prezentacji w przeglądarce.
Uniwersalność i wszechstronność HTML sprawiają, że jest to najpopularniejszy język znaczników na świecie. Większość front-endowych programistów internetowych zaczyna od nauki kodowania właśnie w HTML.
Czym są znaczniki w HTML?
Znacznik HTML (tzw. tagi, elementy HTML) są częścią składni języka HTML, które zawierają informacje o strukturze i wyglądzie strony internetowej. Znacznik jest to specjalny i unikalny tekst umieszczony w nawiasach ostrych – np.: <p>, który oznacza paragraf czyli zwykły tekst. Jest on częścią składni języka HTML i pozwala sterować wyglądem strony. Dzięki niemu można wstawić obrazek, tekst, listę itd. Znacznik nie jest widoczny na ekranie. Widoczne jest tylko to co ma wyświetlać, i to co znalazło się pomiędzy znacznikiem otwierającym a zamykającym np. obrazek. Umieszczone w tagach dane wykorzystywane są również przez roboty pobierające zawartość witryny, w celu lepszego dopasowania wyników wyszukiwania do intencji użytkownika
Istnieją znaczniki otwierające (np.:<b>) oraz zamykające (np.: </b> ). Zauważ, że znacznik zamykający rozpoczyna się ukośnikiem (czyli znakiem: „/”) i ma taką samą nazwę jak otwierający. Pomiędzy znacznikami otwierającym i zamykającym może znaleźć się jakiś tekst, który chcemy np. poddać formatowaniu (w tym przypadku będzie to wytłuszczenie tekstu), <b> Tekst </b>
źródło:https://www.kurshtml.edu.pl/html/znaczniki,zielony.html
Czym są atrybuty w HTML?
Atrybuty zawierają dodatkowe informacje o elemencie, które nie są widoczne dla użytkowników. Na przykład <p class=”first-text”> </p> –
class jest nazwą atrybutu, a first-text jest jego wartością. Atrybut class pozwala nadać elementowi indentyfikator, który potem może być użyty do nadania stylu elementowi przez CSS lub do innych celów.
Atrybut zawsze powinien mieć:
Spację między nazwą tagu a nazwą atrybutu (lub innego atrybutu, jeśli dany element ma więcej atrybutów).
Nazwę atrybutu oraz znak równości.
Wartość podaną w cudzysłowie.
Czym są listy w HTML?
Listy HTML służą do grupowania zbioru powiązanych elementów i wyświetlania ich w uporządkowany sposób.
Gdy chcesz wstawić listę to najpierw musisz określić czy będzie to lista, która na początku przed każdym jej elementem będzie miała jakiś znaczek czy liczbę.
Jeśli każdy element listy ma mieć liczbę to musisz opakować zawartość takiej listy w tag <ol></ol> oznaczający ordered list
Każdy element listy zdefiniowany jest za pomocą znacznika <li> .
Jak wygląda podstawowa budowa strony w HTML?
Strona internetowa HTML jest ułożona w określonym układzie, który powinien być zgodny z semantyką. Oto podstawowe sekcje strony internetowej HTML określające różne części strony internetowej:
Na początku mamy :
- typ dokumentu
- tag <html> z podanym językiem dokumentu,
- znacznik head, który zawiera ważne informacje dla przeglądarek ale nie są one widoczne dla użytkownika
- znacznik body, w którym zawarta jest cała treść strony widoczna dla użytkownika
- header- definiuje nagłówek dokumentu lub sekcji
- main-Główna zawartość strony internetowej pomiędzy headerem a footerem
- footer- stopka dokumentu lub sekcji
Co to są formularze w HTML?
Formularze służą do zbierania informacji o użytkowniku po ich wypełnieniu. Następnie wiadomość z takiego formularza wysyłana jest na wskazany adres lub informacje zapisywane są w bazie danych.
Do najpopularniejszych należą formularze kontaktowe, dostępne na większości stron www.
Do czego służą komentarze w HTML?
Komentarze są używane w dokumentach HTML, aby robić ważne notatki i pomagać innym programistom poprzez wyjaśnienie czegoś w konkretnym miejscu. Nie są one wyświetlane w przeglądarce podczas wykonywania kodu ale należy pamiętać aby zostały usunięte przed wrzuceniem strony na serwer, żeby ktoś nie miał uciechy gdy sprawdzi stronę od strony kodu.
Składnia:
Co oznacza skrót HTML5?
HTML5 to najnowsza wersja HTML. Termin odnosi się do dwóch rzeczy. Jednym z nich jest sam zaktualizowany język HTML, który ma nowe elementy i atrybuty. Drugi to większy zestaw technologii, które współpracują z nową wersją HTML — na przykład nowy format wideo — i umożliwiają tworzenie bardziej złożonych i zaawansowanych witryn i aplikacji.
HTML5 wprowadził kilka nowych, znaczących semantycznie tagów. Należą do nich:
<section>, <header>, <footer> <nav>, <mark>, <figure>, <aside> <figcaption>, <data>, <time>, <output>, <progress>, <meter> i <main>.Ułatwiają one pisanie czystszego kodu, który wyraźnie oddziela styl od treści, co jest szczególnie ważne dla użytkowników korzystających z technologii wspomagających, takich jak czytniki ekranu.
Co to znaczy semantyczny HTML?
Semantyczny HTML to jeden ze stylów kodowania, w którym znaczniki przekazują nie tylko samą zawartość ale informują także co się w nich znajduje.
Na przykład: tagi (znaczniki) <b></b> i <i> </i> używane do pogrubiania i kursywy w HTML zastępowane są tagami <strong></strong> i <em></em> w semantycznym HTML.
Ma to znaczenie dla czytników ekranu, jest wspierane przez przeglądarki oraz jest obecnie standardem i tylko w taki sposób powinniśmy pisać kod HTML
Jakie jest zastosowanie HTML w tworzeniu stron internetowych?
HTML (Hypertext Markup Language) to język znaczników używany do tworzenia stron internetowych. Jest to najpopularniejszy język używany do wyświetlania treści w sieci.
Niezależnie od tego, czy zdajesz sobie z tego sprawę, czy nie, prawdopodobnie używasz go na co dzień. HTML może być używany do wyświetlania tekstu, obrazów, animacji, dźwięku, a nawet wideo. HTML składa się z tagów, które są otoczone nawiasami ostrymi. Tagi służą do opisu określonej informacji. Na przykład tag używany do wyświetlania nagłówka to: <h1> </h1>. To nie jedyny tag do wyświetlania nagłówków, mamy ich więcej h2,h3,h4… 😉
Jak współdziałają ze sobą HTML i CSS?
HTML i CSS współpracują ze sobą, tworząc wspólnie strony internetowe. HTML to kod strukturalny większości stron internetowych. HTML tworzy układ strony internetowej i różne jej elementy, takie jak: nagłówki, stopki, tekst i obrazy, które widzisz podczas przeglądania strony.
CSS (Cascading Style Sheets) jest nakładany na HTML i umożliwia modyfikowanie wyglądu i stylu struktury HTML. Ważne jest, aby pamiętać, że podczas edycji kodu HTML nie widać zmian w CSS z powodu separacji, ale zobaczysz zmiany, jeśli otworzysz stronę w innej przeglądarce.
Można pisać kod CSS od razu w HTML w sposób liniowy, bezpośrednio nadawać wygląda znacznikom HTML ale jest to odradzane podejście. Najlepiej kod CSS tak jak i JavaScript trzymać oddzielnie i odpowiednio je ze sobą połączyć poprzez podlinkowanie w html, do dokumentu zawierającego style czyli tego z rozszerzeniem .css i zawierającego wszystkie interakcje i prawdziwą magię z rozszerzeniem .js
Czy tagi(znaczniki) i elementy HTML to to samo?
Nie. Elementy HTML są definiowane przez znacznik otwierający, mogą zawierać pewną treść i znacznik zamykający.
Na przykład <h1> Nagłówek 1 </h1> jest elementem HTML, ale <h1> jest po prostu znacznikiem otwierającym, a </h1>
jest znacznikiem zamykającym.
Można powiedzieć że elementy zbudowane są z tagów.
Co to są puste elementy w HTML?
Elementy HTML, które nie mają tagów zamykających lub nie muszą być zamykane, są elementami pustymi, inaczej zwanymi void. Na przykład:
<br />, <img />, <hr /> Ułatwiają one pisanie czystszego kodu, który wyraźnie oddziela styl od treści, co jest szczególnie ważne dla użytkowników korzystających z technologii wspomagających, takich jak czytniki ekranu.
Co to jest atrybut „class” w HTML?
Atrybut class służy do określenia nazwy klasy dla elementu HTML. Wiele elementów w HTML może mieć tę samą wartość klasy. Jest również używany głównie do identyfikowania elementów z HTML w CSS. Chodzi o to że jak chcesz nadać jakiś wygląd konkretnemu elementowi HTML to musisz w jakiś sposób na niego wskazać, że właśnie o niego Ci chodzi.
Dzięki klasom możesz na przykład nadać elementowi <button> </button> taką samą klasę i stylując ten przycisk w CSS, każdy element z taką klasą będzie wyglądał tak samo.
Jaka jest różnica między atrybutem „id” a atrybutem „class” w elementach HTML?
Wiele elementów w HTML może mieć tę samą klasę natomiast id jest indywidualne i tylko jeden element w danym dokumencie html może mieć taki atrybut id. Nie może się on powtarzać tak jak w przypadku klas.
Wymień semantyczne znaczniki w HTML i podaj ich znaczenie
<header> : Przechowuje początkowe informacje o stronie internetowej, może być użyty więcej niż raz. Czyli może być użyty np. w sekcji <body> a później w elemencie <article>, wskazując na nagłówek artykułu.
<footer> : reprezentuje ostatnią sekcję strony.
<nav> : menu nawigacyjne strony HTML.
<article> : To zbiór informacji.
<section> : Jest używany wewnątrz bloku artykułów do zdefiniowania podstawowej struktury strony.
<aside>: zawartość paska bocznego strony, czyli tzw. sidebara.