Jak utworzyć podstawowy szkielet strony internetowej w HTML? Część 2.

Poprzednia część artykułu znajduje się na stronie: http://www.szkoleniowia.pl/jak-utworzyc-podstawowy-szkielet-strony-internetowej-w-html/

 

Jak widzimy, zastosowaliśmy wcięcia w naszym szkielecie, korzystając z klawisza „tab”. Takie rozsunięcie kodu HTML pozwoli na dużo wygodniejsze posługiwanie się znacznikami. Być może na tę chwilę jest to zbyteczna, wizualna fanaberia, jednak posiadając coraz dłuższy kod będzie to niezbędny element samego kodu. Należy pamiętać, że jest to jedynie nasze wsparcie, zaś znaki spacji czy entera między powyższymi znacznikami nie będą widoczne na stronie.

Dodajmy w naszym szkielecie dwa słowa:

<!DOCTYPE HTML>

<html>

  • <head>
  • </head>
  • <body>
    • Witam serdecznie!
  • </body>

</html>

 

Od tego momentu, jeśli zapiszemy nasze postępy możemy otworzyć nasz utworzony plik index.html, klikając na niego dwukrotnie. Powinien on otworzyć się w naszej domyślnej przeglądarce i zaprezentować słowa „Witam serdecznie!” na białym tle.

Jeśli wszystko działa, to możemy przejść dalej.

Skorzystajmy ze znacznika nagłówka <h1>.

<!DOCTYPE HTML>

<html>

  • <head>
  • </head>
  • <body>
    • <h1>Witam serdecznie!</h1>
  • </body>

</html>

 

I odświeżmy samą stronę. Tym razem tekst na stronie, powinien ukazać nam się pogrubiony i większą czcionką. Tekst, który znajduje się na stronie możemy ukazać w sześciu różnych konfiguracjach.

<!DOCTYPE HTML>

<html>

  • <head>
  • </head>
  • <body>
    • <h1>Witam serdecznie!</h1>
    • <h2>Witam serdecznie!</h2>
    • <h3>Witam serdecznie!</h3>
    • <h4>Witam serdecznie!</h4>
    • <h5>Witam serdecznie!</h5>
    • <h6>Witam serdecznie!</h6>
  • </body>

</html>

Dzięki temu, możemy zaprezentować tekst w sześciu różnych wielkościach i pogrubieniach. Powyższe znaczniki możemy określić jako znaczniki od pierwszego do szóstego stopnia. Dla większej przejrzystości usuńmy część tych znaczników i przejdźmy do kolejnego. Uwzględnijmy znacznik paragrafu, który pozwala na zaznaczenie nowego akapitu.

<!DOCTYPE HTML>

<html>

  • <head>
  • </head>
  • <body>
    • <h1>Witam serdecznie!</h1>
    • <p>Na najświeższej stronie Internetowej!</p>
  • </body>

</html>

W części przeglądarek, mogą pojawić się problemy z wyświetlaniem polskich znaków w naszej przeglądarce. Wykorzystamy tutaj specjalny znacznik, który umieścimy w środku znaczników <head></head>.

 

<!DOCTYPE HTML>

<html>

  • <head>
    • <meta charset=”UTF-8”>
  • </head>
  • <body>
    • <h1>Witam serdecznie!</h1>
    • <p>Na najświeższej stronie Internetowej!</p>
  • </body>

</html>

 

W tym momencie wszystko powinno wyświetlać się prawidłowo.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *