Dodatki HTML

Teraz zajmiemy się takimi fajnymi rzeczami jak umieszczanie jednej strony w drugiej lub atrybutów globalnych. Ale zaczniemy od prozaicznej sprawy.

Komentarze

Po co komentarze w kodzie? Pisząc kod, w komentarzu możesz zaznaczyć, dlaczego użyłaś danego elementu. Możesz podzielić kod na części odpowiadające danej sekcji.  Komentarz, aby nie był wyświetlany na stronie, umieszczamy jak na przykładzie:

<!-- To jest komentarz -->

Atrybut ID

O atrybucie ID już pisałam w pierwszej części tego cyklu. Wspomniany post.
Pamiętaj! ID musi być unikalny na skalę całej strony. Zasada jest taka, że do nazwy ID używamy liter i / lub podkreślenia. Niedopuszczalne jest użycie cyfry lub innych znaków. ID jest jednym z globalnych atrybutów. Oznacza to, że możemy go używać do dowolnego elementu HTML.

Atrybut CLASS

To drugi atrybut globalny. Wskazujemy poprzez niego grupę danych elementów na stronie. Inaczej: przypisujemy klasę niektórym elementom. Wygląd elementów danej klasy zmieni się jedynie, gdy napiszemy dla tej klasy odpowiednią regułę CSS.
Możemy przypisywać po kilka klas w jednym elemencie. Wtedy rozdzielamy je za pomocą spacji.

<p class="red">
    Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. </p>
<p class="red orange">
   Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker</p>

Elementy Blokowe i Liniowe.

Block

Elementy blokowe to takie elementy, które wyświetlane są  od nowego wiersza. Są między innymi: <h1>, <p>, <ul>, <li>. Jest kilka zasad dotyczących elementów blokowych:

• Blok domyślnie zajmuje 100% szerokości swojego rodzica. Chyba że zdefiniujemy konkretną jego wartość (w pliku CSS).
• Możemy określić marginesy oraz wypełnienie (padding) bloku (w pliku CSS).
• Każdy element blokowy umieszczany jest jeden pod drugim tj. od nowego wiersza.

<div>

Ten znacznik pomaga grupować elementy i umieszcza je w jednym bloku np. sekcji <header>. Element <div>  jako element blokowy będzie wyświetlany od nowego wiersza. Dzięki regułom CSS nadamy wielkość tego elementu oraz jest możliwość zmiany wyglądu elementów wewnątrz niego.

Inline

Elementy liniowe charakteryzują się tym, że wyświetlane są w tym samym wierszu. Wypełniają linię w całej szerokości. I kilka właściwości tych elementów:

• Nie możemy użyć właściwości width i height w pliku CSS.
• Nie możemy nadać górnych (margin-top) ani dolnych (margin-bottom) marginesów.
• Nadanie margin-left (lewy) lub margin-right (prawy margines) oraz wypełnienie (padding) jest możliwe.
• Możemy określać ich wyrównanie w pionie (vertical-align).

<span>

Znacznik <span> ma takie samo zadanie jak <div>. Możemy im przypisać atrybuty ID oraz Class, aby nadać konkretne przeznaczenie elementu <span>. A jakie podstawowe zadania spełnia? 

1.  Grupuje elementy liniowe;
2.  Wyróżnia dany fragment tekstu (jeśli nie ma innego sposobu).

Ramki pływające.

O co chodzi? Fajna rzecz. Inline frame, czyli <iframe> to element pozwalający zamieścić okno na stronie, przez które zobaczymy inną stronę. Z pewnością już to widziałaś. Mapa Google to przykład <iframe>. Element ten posiada atrybuty:

• src – czyli adres strony, którą chcesz wyświetlić,
• height –  wysokość okna (w px),
• width – szerokość okna (w px),
• seamless – niewyświetlanie pasków przewijania.

<video>

Aby wstawić plik wideo na swoją stronę, musisz użyć znacznika <video></video>. Kontrolę nad odtwarzanym filmem zapewniają atrybuty:

• src – ścieżka dostępu do pliku,
• poster – wybiera obraz, jaki będzie wyświetlany w czasie pobierania danego pliku,
• width, height – standardowo wymiary okna odtwarzacza (w px),
• controls -wyświetla elementy sterujące filmem np.play,
• autoplay – automatycznie odtwarzanie filmu,
• loop – pętla, możemy zapętlić odtwarzanie filmu,
• preload – określa czy przeglądarka ma: – nie rozpoczynać wczytywania filmu nim nie nastąpi akcja użytkownika (none), – pobierać klip po wczytaniu strony (auto), – pobrać jedynie info o klipie (metadata).

<source>

Jeśli chcesz zmieścić klip w kilku formatach, użyj znacznika <source> (zamiast atrybutu src). Ten znacznik również posiada atrybuty: src – ścieżkę dostępu, type – typ formatu, codecs – określenie kodeka użytego do zakodowania klipu.

<video poster="image.jpg" width="400" height="400" preload controls loop>
  <source src="video/klip.mp4" type='video/mp4;codecs="anjs.323878, mp4a.38.4"' />
  <p> klip widep</p>
</video>

<audio>

Znacznik <audio> posiada identyczne atrybuty jak <video>. Podobnie jak przy znaczniku <video> możesz użyć kilku rozszerzeń pliku audio lub kilka różnych plików audio. Atrybuty do <source> przy audio to src oraz type.

I na tym zakończę już pierwsze kroki w HTML. Aby pogłębić wiedzę na ten temat, warto rozejrzeć się za darmowymi kursami na YouTube. Choćby takim jak:

I jeszcze niespodzianka. Dla wszystkich, którzy zapiszą się na newsletter prócz świeżych informacji o wpisach, dostępne będą zgrabne ściągi z wiadomościami o HTML-u.

Artykuł Elementy składowe III pochodzi z serwisu To co najważniejsze.