Elementy HTML w części "body" dokumentu HTML

W poprzedniej części kursu CSS zapoznaliśmy się ze strukturą dokumentu HTML, z jego częścią head oraz częścią body.

W tej części kursu CSS poznamy kilka elementów HTML, które możemy umieszczać w części body dokumentu HTML.

Elementy HTML, które zostaną przez nas umieszczone w części body dokumentu HTML, oddziałują w pewny sposób na siebie nawzajem, układają się jeden pod drugim lub jeden obok drugiego, ponieważ jest to ich domyślną właściwością.

Za pomocą języka CSS możemy sprawić, aby elementy HTML układały się jeden na drugim, możemy również sprawić, aby elementy HTML, które domyślnie układają się jeden pod drugim, zmieniły swoje położenie i znajdowały się jeden obok drugiego. Zmianą domyślnego ułożenia elementów HTML zajmiemy się jednak w innych częściach tego kursu CSS, ponieważ jak na razie nie znamy jeszcze składni języka CSS.

Wyobraźmy sobie karton, do którego możemy włożyć każdy przedmiot, na przykład piłkę, słoik, żywność, czy też inne kartony z kolejnymi przedmiotami.

Takim elementem w języku HTML, w którym możemy umieścić każdy inny element HTML, jest element div. Natomiast element, w którym powinniśmy umieszczać większe ilości tekstu, to element p, czyli akapit. W elemencie p możemy umieszczać między innymi takie elementy HTML, których przeznaczeniem jest zmiana wyglądu części tekstu.

Przykładowy układ elementów HTML został zaprezentowany poniżej:

<div>
  <p>
    ten element - p - został umieszczony w elemencie - div
  </p>
</div>

Język HTML udostępnia nam kilka elementów przeznaczonych do formatowania wyglądu tekstu. Pod spodem zostały omówione niektóre z nich.

  • Element b pogrubi tekst, który zostanie w nim umieszczony.
  • Element i pochyli tekst, który zostanie w nim umieszczony.
  • Element u podkreśli tekst, który zostanie w nim umieszczony.
  • Element span sam w sobie nie zawiera żadnych cech, które zmieniają wygląd tekstu, ponieważ to my sami musimy te cechy, czyli właściwości CSS, dla niego określić, za pomocą języka CSS.

Elementy HTML przeznaczone do formatowania wyglądu tekstu możemy umieszczać w każdym innym elemencie HTML, w którym możemy umieścić tekst.

Wspomniane elementy, które służą do formatowania wyglądu tekstu, są traktowane przez przeglądarkę internetową jako część tekstu, dlatego są one wyświetlone obok siebie, w jednej linii, tak samo jak zwykły tekst.

<div>
  <p>
    ten element - p - został umieszczony w elemencie - div<br>
    <b>element - b - z pogrubionym tekstem</b><br>
    <i>element - i - z pochylonym tekstem</i>
    <u>element - u - z podkreślonym tekstem</u><br>
    <span style="color:red;">element - span - z nowym kolorem tekstu</span>
  </p>
</div>

W naszym przykładowym układzie elementów HTML możemy zauważyć element br, inaczej mówiąc polecenie br. Wspomniany element br służy do przełamania wiersza tekstu, dzięki czemu tekst występujący po elemencie br zostanie umieszczony w następnej linii.

Od tej pory nasz układ elementów HTML składa się z większej ilości elementów, które po wyświetleniu w oknie przeglądarki internetowej prezentują się następująco:

ten element - p - został umieszczony w elemencie - div
element - b - z pogrubionym tekstem
element - i - z pochylonym tekstem element - u - z podkreślonym tekstem
element - span - z nowym kolorem tekstu

W naszym przykładzie, element i oraz u są wyświetlone w jednej linii, ponieważ po elemencie i nie został umieszczony element br. Natomiast element span znalazł się pod elementem u, ponieważ po elemencie u został umieszczony element br.

Zapis style="color:red;", który pojawił się w elemencie span, sprawia, że tekst, który zostanie umieszczony w tym elemencie, będzie koloru czerwonego. Wspomniany zapis zostanie wyjaśniony bardziej szczegółowo w następnej części kursu CSS.

Po wyświetlaniu naszego układu elementów HTML w oknie przeglądarki internetowej zobaczyliśmy tekst na białym tle. Nasz przykładowy układ elementów HTML niewiele nam mówi o obszarze, jaki zajmują jego poszczególne elementy HTML.

Gdzie są granice naszych elementów HTML? Czyli ich szerokość oraz wysokość?

Przykład, który został umieszczony poniżej, odpowiada nam na te pytania.

ten element - p - został umieszczony w elemencie - div
element - b - z pogrubionym tekstem
element - i - z pochylonym tekstem element - u - z podkreślonym tekstem
element - span - z nowym kolorem tekstu

Do każdego z elementów HTML, w naszym przykładowym układzie elementów HTML, został dodany różny kolor tła, dzięki czemu możemy zauważyć granice poszczególnych elementów. Domyślnie, prawie każdy element języka HTML swoim kształtem przypomina prostokąt. Strona internetowa jako całość, to zbiór takich prostokątów wyświetlanych na różne sposoby, w różnych miejscach.

Granice elementów odpowiadających za formatowanie wyglądu części tekstu, czyli elementów wyświetlanych w linii (np. elementów b, i, u oraz span), określa zawartość jaka w nich się znajdzie. Natomiast granice elementów wyświetlanych w bloku (np. elementów div oraz p) określa szerokość ich elementu rodzica lub własna zawartość, o czym dokładniej powiemy sobie w jednej z innych części tego kursu CSS.

Język HTML oferuje nam o wiele więcej różnego typu elementów HTML, nie tylko elementów HTML, które poznaliśmy do tej pory, jednak jako że jest to kurs języka CSS, więc to głównie na języku CSS będziemy się skupiać. Jeżeli, w którejś z części pojawi się element HTML, który do tej pory nie został omówiony, to jego przeznaczenie zostanie przeze mnie wyjaśnione.

Do rozwikłania został nam zapis style="color:red;" jednak tym zagadnieniem zajmiemy się w następnej części tego kursu CSS, dzięki czemu poznamy pierwszy ze sposobów, za pomocą którego będziemy mieli wpływ na wygląd poszczególnych elementów HTML w dokumencie HTML.