Samouczek HTML – Wstawianie multimediów i grafiki

W HTML można wstawiać różne multimedia – obrazy, dźwięki, filmy i inne elementy. Poniżej opisałem podstawowe znaczniki i ich parametry.

1. Znacznik <img> - czyli wstawianie obrazów

znacznika <img> używamy do wstawiania grafik na strony WWW

Przykład:

<img src="obraz.jpg" alt="Opis obrazu" width="300" height="200">

Jego atrybuty:

• src - adres pliku graficznego
• alt - teskt alternatywny (wyświetlany gdy obraz się nie właduje)
• width, height - szerokość i wysokość obrazu

2. Znacznik <embed> - czyli wstawianie zewnętrznych plików

Za pomocą znacznika <embed> możemy wstawić różne pliki, m.in. filmy, pdf, animacje

Przykład:

<embed src="animacja.mp4" width="250px" height="140px" type="video/mp4">

Jego atrybuty:

• src - ścieżka do pliku
• type - typ obiektu (np. video/mp4)
• width, height - szerokość i wysokość obiektu

3. Znacznik <object> - osadzanie obiektów multimedialnych

Znacznik ten jest podobny do znacznika <embed>, ale bardziej uniwersalny

Przykład:

<object data="inwokacja.pdf" width="600px" height="400px">

</object>

Atrybuty znacznika:

• data - adres pliku
• form - definiuje formy należące do obiektu
• name - określa nazwę obiektu
• width, height - szerokość i wysokość obiektu

4. Znacznik <audio> - odtwarzanie dźwięku

Pozwala odtwarzać pliki dźwiękowe (np. MP3, OGG)

Przykład:

<audio controls>

<source src="muzyka".mp3 type="audio/mpeg">

</audio>

Atrybuty znacznika:

• controls - pokazuje przyciski odtwarzania (play,pauza, itd.)
• autoplay - automaczyczne odtwarzanie po załadowaniu
• loop - odtwarzanie w pętli
• muted - wyciszony dźwięk przy starcie
• preload - ile danych ma być wczytane ("auto", "metadata", "none")

5. Znacznik <video> - odtwarzanie filmów

Znacznik służy do osadzania plików wideo (np. MP4, WebM)

Przykład:

<video width="600" controls poster="miniatura.jpg">

<source src="film.webm" type="video/webm">

</video>

Atrybuty znacznika:

• controls - pokazuje przyciski odtwarzania
• autoplay - automatyczne odtwarzanie
• loop - zapętlanie filmu (powtarzanie)
• muted - start z wyciszonym dźwiękiem
• poster - miniatura przed odtworzeniem (obrazek)
• width, height - szerokość i wysokość

6. Znacznik <iframe> - wstawianie stron i filmów z internetu

Znacznik Pozwala wstawić inną stronę internetową, mapę, film z YouTube...

Musimy pamiętać o tym że chcąc wyświetlić np. filmik musimy w jego linku dodać /embed

Potrzebujemy również odpowiednie wtyczki w przeglądarce

Przykład:

<iframe src="inwokacja.pdf" width="560" height="315" title="Film z Youtube" frameborder="0" allowfullscreen>

</iframe>

Atrybuty znacznika:

• src - link do zasobu
• width, height - szerokość i wysokość
• title - opis zawartości
• frameborder - czy ma być widoczna ramka (0-nie, 1-tak)
• allowfullscreen - pozwala na tryb pełno-ekranowy

7. <SVG> - tworzenie i wyświetlanie grafiki wektorowej

Za pomocą <SVG> możemy tworzyć i wyświetlać na naszej stronie grafikę wektorową (np. koła, kwadraty)

Przykład:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Atrybuty znacznika:

• width, height - wysokość i szerokość
• x - Pozycja "x" lewego górnego rogu prostokąta
• y - Pozycja "y" lewego górnego rogu prostokąta
• rx - Promień "x" rogów prostokąta (używany do zaokrąglania narożników). Wartość domyślna to 0
• ry - Promień y rogów prostokąta (używany do zaokrąglania narożników). Wartość domyślna to 0

Kształty w SVG:

• kwadrat <rect>
• koło <circle>
• elipsa <ellipse>
• linia <line>
• polilinia <polyline>
• wielokąt <polygon>
• ścieżka <path>

8. Znacznik <Canvas> -