Agencja interaktywna | Strony WWW | Pozycjonowanie | Social Media

Projektujemy i budujemy strony internetowe, pozyskujemy klientów, zwiększamy sprzedaż i promujemy Twoją markę w sieci Internet.

1.4 Tworzenie list i nagłówków

Zrozumienie znaczenia oraz zastosowanie list nienumerowanych i numerowanych oraz umiejętność tworzenia nagłówka za pomocą znacznika <h1>.

Znaczenie list nienumerowanych <ul> oraz list numerowanych <ol>

Listy nienumerowane <ul>

Listy nienumerowane (<ul>) służą do grupowania elementów w sposób nieuporządkowany. Każdy element listy jest oznaczony znacznikiem <li>. Na przykład:

<ul>
  <li>Pierwszy element</li>
  <li>Drugi element</li>
  <li>Trzeci element</li>
</ul>

Listy numerowane <ol>

Listy numerowane (<ol>) działają podobnie jak listy nienumerowane, z tą różnicą, że każdy element jest numerowany. Przykład:

<ol>
  <li>Pierwszy element</li>
  <li>Drugi element</li>
  <li>Trzeci element</li>
</ol>

Jak tworzyć wcięcia list

Aby nadać listom czytelność i logiczną strukturę, możemy wykorzystać wcięcia. Wcięcie jest osiągane poprzez umieszczenie listy wewnątrz odpowiedniego kontenera (na przykład <div>) oraz zastosowanie odpowiednich stylów CSS. Wcięcie powoduje, że lista nabiera własnego stylu.

<div>
  <ul>
    <li>Pierwszy element</li>
    <li>Drugi element</li>
    <li>Trzeci element</li>
  </ul>
</div>


Tworzenie zagnieżdżonych list w HTML

W HTML możemy tworzyć zagnieżdżone listy, czyli listy zawierające elementy różnych poziomów hierarchii. Aby stworzyć listę z pierwszym i drugim poziomem zagnieżdżenia, możemy wykorzystać kombinację znaczników <ul> (list nienumerowanych) i <li> (elementy listy). Oto przykładowy sposób tworzenia takiej listy:

<ul>
  <li>Pierwszy poziom
    <ul>
      <li>Drugi poziom - Element 1</li>
      <li>Drugi poziom - Element 2</li>
    </ul>
  </li>
  <li>Pierwszy poziom
    <ul>
      <li>Drugi poziom - Element 3</li>
      <li>Drugi poziom - Element 4</li>
    </ul>
  </li>
</ul>

W powyższym przykładzie mamy listę nienumerowaną <ul> na pierwszym poziomie, a wewnątrz każdego elementu listy mamy kolejną zagnieżdżoną listę <ul> reprezentującą drugi poziom zagnieżdżenia. Elementy drugiego poziomu są zdefiniowane za pomocą znaczników <li>.

Wynikowy wygląd listy będzie następujący:

  • Pierwszy poziom
    • Drugi poziom – Element 1
    • Drugi poziom – Element 2
  • Pierwszy poziom
    • Drugi poziom – Element 3
    • Drugi poziom – Element 4

Dzięki temu mechanizmowi możemy tworzyć listy z różnymi poziomami zagnieżdżenia, co jest przydatne do strukturyzowania i prezentowania danych na stronie internetowej.

Tworzenie nagłówka za pomocą Znacznika <h1>

W języku HTML, nagłówki są używane do hierarchicznej organizacji treści na stronie internetowej. Są one oznaczone za pomocą znaczników <h1> do <h6>, gdzie <h1> reprezentuje najwyższy poziom nagłówka, a <h6> najniższy.

Aby stworzyć nagłówek za pomocą znacznika <h1>, wystarczy otoczyć treść nagłówka odpowiednim znacznikiem. Na przykład:

<h1>To jest Nagłówek Poziomu 1</h1>

Ten znacznik tworzy nagłówek poziomu 1 i zazwyczaj jest używany dla najważniejszych tytułów na stronie, takich jak tytuł artykułu lub główny nagłówek strony.

Pamiętaj, że istnieją również znaczniki <h2>, <h3>, <h4>, <h5> i <h6>, które służą do tworzenia nagłówków niższego poziomu. Oto przykład:

<h2>To jest Nagłówek Poziomu 2</h2>
<h3>To jest Nagłówek Poziomu 3</h3>
<!-- i tak dalej -->

Korzystając z tych znaczników, możesz nadawać odpowiednią strukturę i znaczenie treści na swojej stronie internetowej.

Zadzwoń