Na stronie używamy cookies. Korzystanie z witryny oznacza zgodę na ich wykorzystywanie. Szczegóły znajdziesz w Polityce Prywatności.

Nie możesz znaleść dodatku który chciałbyś umieścić na swojej stronie lub blogu? Napisz do nas - postaramy się przygotować taki dodatek i poinformujemy Cię o tym na maila:

Dodatki
Liczniki
Pogoda

Elementy blokowe na stronie internetowej

Elementy blokowe to takie fragmenty strony, które zajmują samodzielne miejsce, tzn, nie można ich umieścić obok siebie. Zawsze będą występowały jeden pod drugim.
W języku HTML jest wiele elementów blokowych. Poniżej zostaną one pokrótce przedstawione.

Akapity
<p>
Akapit jest podstawowym elementem zawierającym tekst i służy do wydzielania fragmentów zawierających jakąś myśl.
<p>treść akapitu</p>

Nagłówki <h1>...<h6>
Nagłówki służą do dzielenia tekstu na części, podobnie jak książka dzieli się na rozdziały. <h1> to nagłówek najwyższego poziomu, <h6> najniższego poziomu. Nagłówki różnią się od siebie wielkością i atrybutami czcionki.
<h1> nagłówek </h1>

Znacznik końca wiersza <br />
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. Znacznik końca wiersza jest pustym elementem, zatem nie może mieć żadnej zawartości i zamykającego znacznika </br>.

Linia pozioma <hr />

Służy do wizualnego oddzielania od siebie fragmentów strony www. Domyślnie linia zajmuje 100% szerokości strony.
<p>tekst</p>
<hr />
<p>tekst</p>

Listy
Jest kilka rodzajów list.
Lista wypunktowana
Tworzy się ją za pomocą znacznika <ul>, wewnątrz którego umieszcza się pozycje listy w znacznikach <li>.
<ul>
<li>pozycja 1
<li>pozycja 2
<li>pozycja 3
</ul>
W języku html nie jest wymagany znacznik zamykający , ale już w XHTML tak.
Lista numerowana
Tworzy się ją za pomocą znacznika <ol>, wewnątrz którego umieszcza się pozycje listy w znacznikach <li>, podobnie jak w liście wypunktowanej.
<ol>
<li>pozycja 1
<li>pozycja 2
<li>pozycja 3
</ol>

Lista definicji
Tworzy się ją za pomocą znacznika <dl>, wewnątrz którego umieszcza się nagłówek w znaczniku <dt> i pozycje listy w <dd>.
<dl>
<dt>nagłówek 1
<dd>pozycja 1
<dt>nagłówek 2
<dd>pozycja 2
</dl>

Lista zagnieżdżona
Zagnieżdżanie polega na umieszczaniu jednej listy wewnątrz drugiej.
<ul>nagłówek 1
<li>pozycja 1.1
<li>pozycja 1.2
<ul>nagłówek 1.2
<li>Pozycja 1.2.1
</ul>
<li>pozycja 1.3
</ul>

Tekst preformatowany <pre>
Tekst preformatowany to tekst napisany czcionką o stałej szerokości znaku. W tym elemencie uwzględniane są dodatkowe spacje, tabulatory i znaki końca linii. Tekst nie jest również automatycznie zawijany. Tekst między znacznikami <pre> i </pre> jest wyświetlany dokładnie tak, jak został zapisany w kodzie.
<pre> Tekst tekst
tekst</pre>

Blok cytowany
<blockquote>
Służy do oznaczania cytatów. Tekst zawarty między parą znaczników <blockquote> i </blockquote> ma jednakowe marginesy z lewej i prawej strony.
<blockquote> cytat </blockquote>

Adres <address>

Ten blok nie uwzględnia tabulatorów, dodatkowych spacji ani znaków końca linii. Najczęściej jest automatycznie napisany czcionką pochyłą. Pomiędzy znacznikami <address> i </address> mogą być jedynie elementy liniowe. Jeśli adres ma się składać z kilku linijek należy używać znacznika <br />.
<address>
Netstel Software <br />
ul. Zbożowa 3/18 <br />
Kraków
</address>

Blok dokumentu <div>
Znacznik <div> wydziela większy blok , np. fragment tekstu, a następnie można nadać mu jakiś rodzaj formatowania, np. wyśrodkowanie, kolor itd.
<div>
<h1> nagłówek</h1>
<p> krótki tekst</>
</div>

Obramowanie i grupowanie pól formularza <fieldset>
Służy do grupowania pól formularza i obramowania go. Wygląd takiego obramowania jest zależny od używanej przeglądarki. Efekt obramowania możemy uzyskać przy użyciu stylów CSS dlatego polecenie fieldset stosowane jest wraz ze znacznikiem <legend>, który nadaje tytuł ramki.
<fieldset>
<legend>formularz</legend>
<label for="imie">Imię: </label>
<input type="text" id="imie"><br>
<label for="nazwisko">Nazwisko: </label>
<input type="text" id="nazwisko"><br>
</fieldset>
fieldset.jpg

Ocena:
2
Twoja ocena:
Więcej w tej kategorii

Powiadomienia o nowych dodatkach