W tej części tutorialu zajmiemy się podstawowymi znacznikami w sekcji body. Dowiecie się jak je stosować, jakich zasad przestrzegać, co należy robić, a czego unikać. Na początek trochę teorii.

Znacnziki w sekcji body możemy podzielić na dwie podstawowe kategorie:

• blokowe
• liniowe

Różnią się one sposobem wyświetlania informacji na stronie. Elementy blokowe domyślnie posiadają maksymalną możliwą szerokość wiec kolejne elementy zostaną Umieszczone pod nim. W przypadku elementów liniowych jest inaczej. NIE Można im ustawić szerokości większej niż mają w rzeczywistości dlatego caesto występują obok siebie.

Znaczniki mogą mieć dodatkowe atrybuty. Część z nich można zastosować do dowolnego znacznika (np ‘class’ czy ‘id’), a inne są przeznaczone tylko dla konkretnych elementów (np ‘src’ lub ‘href’). Ciężko jest to wytłumaczyć ‘na sucho’ dlatego najpierw zademonstruje kilka podstawowych znaczników, a następnie przejdziemy do praktycznych zastosowań.

p – znacznik blokowy . Używa się go do oddzielenia poszczególnych akapitów w tekście

treść akapitu

h1, h2 … -Znacznik blokowy. Zawiera w sobie tytuły i pod tytuły dokumentu. Posiada 6 stopini (h1, h2, h3, h4, h5, h6). Odpowiednie używanie tych znaczników na spory wpływ na SEO

tutuł

div – Znacznik blokowy. Podstawowy znacznik blokawy służący głównie do oddzielenia poszczególnych sekcj na stronie. Sam znacznik niewiele robi ale w połączeniu z CSS bardzo ułatwia nadanie odpowiedniego krztałtu stronie

zawartość

span – Jest to pusty znacznik liniowy nie posiadający żadnych domyślnych właściwości. Na tym etapie nie bedzie mial on zadnego konkretnego zastosowanka. Przyda sie natomiast gsy zaczniemy omawiać kaskadowe arkusze styli CSS

jakaś treść

br – znacznik liniowy stużący do załamania Linii. Jest to jednen z niewielu znaczników nie posiadajacgch znacznika końcowego

hr – znacznik blokowy wyświetlający podłużną linie. On równiez nie ma znacznika końcowego.

strong – znacznik liniowy, który domyśnie służy do pogrubienia tekstu zawartego wewnątrz znacznika

pogrubienie

a– znacznik liniowy, którego główną funkcją jest tworzenie linków zarówno zewnętrznych jak i wewnętrznych

jakaś treść

jakaś treść

tytuł

jak należy robić:

tytuł

Zastosowanie w praktyce:

Pamiętacie dokument index.html, który utworzyliśmy w poprzedniej części tutorialu?. To teraz skopiujcie poniższy kod, zastąpcie ten który jest wewnątrz tego pliku i otwórzczie w przeglądarce.

   
      
      
   
   
       

           
Moja strona
           
       
       

       

           
Ćwiczymy znaczniki HTML
           
Tak wygląda akapit z dowolną treścią wewnątrz. Może mieć on dowolną długość
           
Wewnątrz tego akapitu jest znacznik span który nic nie zmienia
           
To jest kolejny akapit z pogrubionym fragmentem tekstu wewnątrz zdania
           
A w tym akapicie znajduje się link do zewnętrznej strony
           
Ten akapit zawiera dużą ilość tekstu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel orci mattis, mattis mauris in, accumsan nunc. Praesent nec nisi malesuada, lobortis eros sit amet, porta elit. Aliquam dignissim ligula et leo viverra convallis. Phasellus eros augue, interdum et ultricies in, consectetur vitae dolor. Vivamus in porttitor lorem, vitae euismod orci. Praesent vel nulla adipiscing, dictum ligula eu, fringilla lacus. Pellentesque aliquet dapibus posuere. Vestibulum tortor sem, pulvinar in accumsan et, porta a augue. Quisque rhoncus magna eget tempor commodo. 
           

           
Obrazek też może być linkiem:
           
              
           
           

           
Tutaj mamy znacznik z nieprawidłową ścieżką do pliku:
           
           

           
poniżej będzie spory odstęp
           





           
można użyć dowolną liczbę znaczników 'br'
           
Znaczniki liniowe
           Znacznik span jest 
           znacznikiem liniowym 
           i mimo że tekst znajduje się 
           w kilku znacznikach 
           to w przeciwieństwie do
           znacnzika p pozostaje w jednej lini 
       
       

       

       

       

       
KONIEC
   

Są tutaj użyte wszystkie opisywane wcześniej znaczniki w różnych wariantach. To powinno wam pomóc zrozumiec dziąłanie HTML. Odpowiem teraz na kilka pytań, które zapewne już się wam zrodziły 😉

Oba znaczniki div mają dodany atrybut ‘class’. Ma to na celu tylko zademonstrowanie podziału strone na nagłówek i zawartość. Te znaczniki same w sobie nic nie wnoszą do tego dokumentu. Dopiero w połączeniu z CSS widać efekt.

Wcięcia w dokumencie html nie są obowiązkowe. Równie dobrze można by pousuwać wszystkie entery i tabulacje zmieniając dokument w jedną ciągłą linijke, a efekt końcowy byłby identyczny. Ma to na celu ułatwienie nam webmasterom odnalezienie się w dokumencie i przestrzeganie pierwszej zasady czyli odpowiednią kolejność zamykania znaczników. To jest krótki dokument jednak w przypadku prawdziwych stron często mają klika, a nawet kilkanaście tysięcy linijek. Wówczas te wcięcia mają olbrzymie znaczenie i od samego początku należy pamiętac o ich stosowaniu.

To by było na tyle. Następna częśc już w krótce. Jeżeli macie jakiekolwiek pytania zapraszam do komentarzy. Pozdrawiam !