Start (X)HTML Znaczniki blokowe i liniowe


Designed by:
Peery


Znaczniki blokowe i liniowe PDF Drukuj Email
Wpisany przez Webmaster   
wtorek, 07 grudnia 2010 14:50

Znaczniki blokowe i liniowe

Rozdział będzie poświęcony podstawowym elementom służącym do budowy dokumentów HTML. Składniki takie jak nagłówki, akapity, czy bloki pomogą stworzyć pierwszą stronę www.

 

 

Nagłówki - istnieje sześć poziomów nagłówków, które można stosować podobnie jak w gazecie. Nagłówki można dowolnie formatować za pomocą kaskadowych arkuszy stylów. Można zmienić kolor, wielkość, rodzaj czcionki, kolor tła, obramowanie, wyrównanie, itp.

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

Przykład wykorzystania nagłówków:

Nagłówek pierwszego stopnia

Nagłówek drugiego stopnia

Nagłówek trzeciego stopnia

Nagłówek czwartego stopnia

Nagłówek piątego stopnia
Nagłówek szóstego stopnia

Akapit - jeden z najważniejszych elementów formatujących tekst w dokumentach HTML. Wydziela fragmenty zawierające jakąś myśl. Podobnie jak nagłówki też może być formatowany za pomocą stylów.

<p></p>

Akapit 1

Akapit 2

Znacznik końca wiersza - służy do przełamywania wiersza i przenoszenia treści do następnego wiersza bez kończenia akapitu. Nowy wiersz jest wprowadzany bez dodatkowej interlinii, w przeciwieństwie do polecenia akapitu, które wprowadza dodatkowy odstęp między dwoma akapitami z tekstem.

<br>

Pierwsza linia tekstu
Druga linia tekstu

Pozioma linia - linia ciągnąca się przez całą szerokość okna lub elementu blokowego, może być formatowana za pomocą stylów (kolor, grubość, długość w pikselach lub procentach oraz wyrównanie względem marginesu)

<hr>


<hr style="height: 5px; color: green; width:50%; text-align:center">


Blok preformatowany - blok tekstu, w którym uwzględniane są białe znaki znajdujące się w kodzie źródłowym, np. dodatkowe spacje, punkty tabulacji, znaki końca akapitu itd., które są pomijane w innych poleceniach.

<pre></pre>

Pierwsza linia tekstu
Linia tekstu z dodatkowymi spacjami
tabulacja

Blok cytowany - element jest używany przy cytowaniu lub powoływaniu się na jakąś treść. Znacznik automatycznie uwzględnia tabulację.

<blockquote> </blockquote>

Pierwsza linia tekstu

Linia cytatu
Linia cytatu

Druga linia tekstu

Adres - polecenie jest stosowane w odniesieniu do bloku tekstu zawierającego imię i nazwisko, adres pocztowy, adres poczty elektronicznej. Znacznik automatycznie uwzględnia kursywę.

<address> </address>

Imię Nazwisko
Adres zamieszkania
Kod pocztowy, miejscowość
numer telefonu

Blok, sekcja dokumentu - podstawowy i fundamentalny element budowania dokumentów HTML. Większość stron opartych jest na blokach formatowanych za pomocą CSS'ów. W bardzo łatwy sposób je pozycjonować i grupować względem siebie.Polecenie pozwala wydzielić jakiś blok treści, grafików dokumencie i nadać jemu za pomocą kaskadowych arkuszy stylów pożądanego formatowania, np: kolor, czcionka, margines, położenie, itp.

<div> </div>

Obramowanie formularza - tworzy obramowanie elementów znajdujących się w jego wnętrzu. Dodatkowo stosując polecenie LEGEND możemy dodać do obramowania tytuł.

<fieldset>
<legend>Ankieta</legend>
<textarea rows="4" cols="20">Twoja opinia</textarea>
</fieldset>

Wynik polecenia:

Ankieta

Zakres - element wydzielający jakiś fragment dokumentu, lecz w przeciwieństwie do polecenia div pełni rolę elementu liniowego, np. pozwala wydzielić fragment akapitu i nadać mu za pomocą stylów inne formatowanie

<span> </span>

<p>Tekst zwykły, <span style="font-weight:bold; color:green">ten fragment jest pogrubiony i w zielonym kolorze</span>, natomiast <span style="font-style:italic; background-color:red">ten fragment jest pochylony i na czerwonym tle</span>, a tu jest koniec.</p>

Tekst zwykły ten fragment jest pogrubiony i w zielonym kolorze, natomiast ten fragment jest pochylony i na czerwonym tle, a tu jest koniec.

Komentarz - polecenie pozwala wstawić komentarz do kodu źródłowego dokumentu HTML. Treść komentarza nie jest wyświetlana na ekranie, stanowi tylko dodatkową informację dla osób czytających kod źródłowy.

<!--...-->

Tags:
 

Przydatne linki