OBRAZY, TABELE, ŁĄCZA i MULTIMEDIA

OBRAZY, TABELE, ŁĄCZA i MULTIMEDIA
SPIS TREŚCI
  • Przykłady – str. 1
  • Zadania – str. 2
  • Rozwiązania – str. 3

POZIOM 1 – SZKOŁA PODSTAWOWA

PRZYKŁADY

Przykład 1
Tworzenie tabeli składa się z trzech kroków:
a) <table></table>
b) nowy wiersz <tr></tr>
c) komórki w wierszu <td></td>

Poniższa tabela zbudowana jest z 2 wierszy i 4 kolumn a więc 8 komórek.


Przykład 2
Do tabeli można dodać nagłówek:
a) górny <th scope=”col”> Tekst</th>
b) boczny <th scope=”row”> Tekst</th>

Zadanie
Dodaj 3 lekcję (9:45-10:30) i 4 lekcję (10:45-11:30) plus wybrane przez siebie przedmioty.


Przykład 3
Tworzenie linku do strony zewnętrznej <a href=”adres_strony”>wyświetlany_tekst</a>
Jeżeli chcesz, aby strona otwierała się w nowym oknie dodaj parametr target=”_blank”
Wpisując adres strony, zwróć uwagę na różnicę pomiędzy http:// a https://


Przykład 4
Tworzenie linków wewnętrznych (do podstron własnej strony)
<a href=”nazwa_pliku”>wyświetlany_tekst</a>


Przykład 5
Tworzenie linku umożliwiającego wysłanie e-maila.


Przykład 6 – dodawanie filmu
1) W folderze zawierającym index.html utwórz nowy folder o nazwie video i skopiuj do niego film.
2) W pliku index.html wstaw kod z rysunku.

<video src="video/RLewandowski.mp4"
    width="600" height="400"
	preload="auto" 
	controls>
</video>

Oto wyjaśnienie poszczególnych wierszy:
1 – ścieżka do pliku,
2 – długość i szerokość okna wyświetlanego filmu,
3 – przeglądarka rozpocznie pobieranie video po zakończeniu wczytywania strony,
4 – przeglądarka wyświetli elementy sterujące odtwarzaniem (przyciski).

Pamiętaj, aby po dodaniu filmu trochę poeksperymentować, zmienić coś w kodzie np. rozmiar okna lub wyłączyć jedną z opcji preload/controls.

Pliki do przykładów i zadań można pobrać z Platformy edukacyjnej.

Znacznik video posiada wiele przydatnych parametrów.
3 – określa obraz, który będzie wyświetlany podczas wczytywania filmu,
4 – none oznacza, że przeglądarka nie powinna rozpoczynać wczytywania filmu, zanim użytkownik nie wybierze play
6 – loop odtwarza film w nieskończonej pętli.

<video src="video/RLewandowski.mp4"
    width="600" height="400"
    poster="images/bramkaRL.jpg"
	preload="none" 
	controls
    loop>
</video>
Obrazek po prawej to bramkaRL.jpg


Przykład 7
Utwórz folder o nazwie audio i skopiuj do niego plik mp3.

Po src wpisz ścieżkę do pliku. Słowo controls powoduje, że przeglądarka wyświetli przyciski sterujące odtwarzaniem.


Przykład 8
Trzy zasady tworzenia obrazów na stronie internetowej:
1. Zapisuj obrazy w odpowiednim formacie: jpg, png lub gif.
2. Zapisuj obrazy w takiej rozdzielczości w jakiej będą wyświetlane na stronie.
3. Większość monitorów wyświetla obraz w rozdzielczości 72 piksele na cal, zatem utworzenie obrazu o wyższej rozdzielczości sprawi, że będzie on się niepotrzebnie dłużej wczytywał.

Utwórz folder images i skopiuj do niego plik jpg.
a) po scr wpisz ścieżkę do pliku,
b) tekst w alt pojawi się na stronie w przypadku, gdy przeglądarka nie będzie mogła wyświetlić zdjęcia,
c) test w title wyświetli się po umieszczeniu kursora myszy na obrazku.

Obrazek posiada pusty atrybut alt; plik o nazwie image-682-1024x419.png
Rozdzielczość 871×581

Określenie rozmiarów zdjęcia na stronie.

Obrazek posiada pusty atrybut alt; plik o nazwie image-683-1024x322.png

HTML5 umożliwia dodanie opisu pod obrazkiem.

Obrazek posiada pusty atrybut alt; plik o nazwie image-684-1024x329.png

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.