Nagłówki HTML h1, h2, h3

Stronę tą wyświetlono już: 247 razy

Wstawianie nagłówków na stronie

Nagłówki stosowane są do podzielenia treści zawartej na stronie na mniejsze podsekcje. Ważne jest zachowanie hierarchii nagłówków, tak jak zachowuje się hierarchię układu książki na: tytuł, nazwa rozdziału, nazwa podrozdziału itd.

Listing 1
  1. <h1>Wstęp do HTML-a<h1>
  2. <h2>Znaczniki tekstu</h2>
  3. <h3>Znaczniki nagłówków</h3>
  4. <!-- treść -->
  5. <h3>Znacznik akapitu</h3>
  6. <!-- treść -->
  7. <h3>Znaczniki: pogrubienia, pochylenia i podkreślenia</h3>
  8. <!-- treść -->
  9. <h2>Wstawianie grafiki na stronie</h2>
  10. <!-- treść -->

Powyższy kod wyświetli następujący wynik:

Wstęp do HTML-a

Znaczniki tekstu

Znaczniki nagłówków

Znacznik akapitu

Znaczniki: pogrubienia, pochylenia i podkreślenia

Wstawianie grafiki na stronie

Zmiana styli wyświetlania

Style nagłówków powinny zostać zapisane w pliku CSS w następujący sposób:

Listing 2
  1. h1{ // dla znacznika h1
  2. font-size:25px; /* ustaw rozmiar czcionki na 25 px */
  3. color: gray; /* ustaw kolor czcionki na szary (można też użyć zapisu ogólnego #ffffff <- biały */
  4. font-weight: /* pogrubienie tekstu: normal, bold, bolder, lighter lub wartości od 100 do 900 co 100 */
  5. margin-top: 0.67em; /* szerokość górnego marginesu względem ustawień tego parametru dla rodzica */
  6. margin-bottom: 0.67em; /* szerokość dolnego marginesu względem ustawień tego parametru dla rodzica */
  7. margin-left: 0; /* szerokość lewego marginesu */
  8. margin-right: 0; /* szerokość prawego marginesu */
  9. }

Powyższy kod należy zapisać do pliku z rozszerzeniem .css i kodowaniem ASCII, a następnie załączyć go na swojej stronie w nagłówku dla HTML-4 w następujący sposób:

Listing 3
  1. <link rel = "stylesheet" type = "text/css" href = "style.css"/>

natomiast dla HTML-5 wystarczy:

Listing 4
  1. <link rel="stylesheet" href="style.css" />

Oczywiście zamiast style.css powinno podać się ścieżkę do własnego pliku z stylami .css.

Komentarze