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>
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.
Określenie rozmiarów zdjęcia na stronie.
HTML5 umożliwia dodanie opisu pod obrazkiem.