Rozdział dziesiąty
Multimedia
<audio> - służy do osadzania treści audio.
<audio src="path to file audio" controls>
<video> - służy do osadzania treści video.
<video src="path to file video" controls>
<iframe> - osadza inną stronę, fragment HTML w bieżącej.
<iframe width="560" height="315" src="https://www.youtube.com/embed/dXnk4ltoKgc"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope;
picture-in-picture" allowfullscreen></iframe>
element.play() - odtwarzanie w JS.
element.pause() - wstrzymanie odtwarzania.
element.currentTime - ustawia aktualny czas odtwarzania.
const video = document.querySelector('.video--js');
const playButton = document.querySelector('.play--js');
const pauseButton = document.querySelector('.pause--js');
const stopButton = document.querySelector('.stop--js');
playButton.addEventListener('click', e => {
video.play();
})
pauseButton.addEventListener('click', e => {
video.pause();
})
stopButton.addEventListener('click', e => {
video.pause();
video.currentTime = 0;
})
Bootstrap
Bootstrap - framework CSS i JS pozwalający na szybkie budowanie aplikacji. Jest bardzo popularny i wykorzystywany w wielu projektach i gotowych szablonach. Zawiera większość potrzebnych rzeczy i jeszcze więcej, o których kompletnie nie masz pojęcia i raczej ich nie wykorzystasz. Praca z nim głównie polega na "kopiuj - wklej gotowych elementów, plus swoje modyfikacje".
https://getbootstrap.com/Kombinatory
elementA + elementB - Selektor bezpośredniego rodzeństwa, elementB dostanie style, jeżeli znajduje się zaraz pod elementA.
<ul>
<li><a href=""></a></li>
<li class="item"><a href=""></a></li>
<li><a href=""></a></li> //Element dostanie style
<li><a href=""></a></li>
</ul>
.item + li {
background: blue;
}
elementA ~ elementB - ogólne rodzeństwo, wszystkie element(y)B znajdujące się pod elementA dostaną style.
<ul>
<li><a href=""></a></li>
<li class="item"><a href=""></a></li>
<li><a href=""></a></li> //Element dostanie style
<li><a href=""></a></li> //Element dostanie style
</ul>
.item ~ li {
background: blue;
}
elementA > elementB - bezpośrednie dziecko, wszystkie dzieci elementA dostaną style.
<ul class="list">
<li><a href=""></a></li> //Element dostanie style
<li class="item"><a href=""></a></li> //Element dostanie style
<li><a href=""></a></li> //Element dostanie style
<li><a href=""></a></li> //Element dostanie style
</ul>
.list > li {
background: blue;
}
[attr=value] - selektor atrybutu, wybieranie elementów po atrybutach.
<ul class="list">
<li><a href="site.html"></a></li> //Element dostanie kolor niebieski
<li class="item"><a href=""></a></li>
<li><a color="yellow"></a></li> //Element dostanie kolor żółty
<li><a color="red"></a></li> //Element dostanie kolor czerwony
<li><a color="orange"></a></li> //Element dostanie kolor pomarańczowy
</ul>
[href="site.html"] {
color: blue;
}
[color*="ello"] { //zawiera ciąg znaków
color: yellow;
}
[color^="re"] { //zaczyna się od ciągu znaków
color: red;
}
[color$="nge"] { //kończy się ciągiem znaków
color: orange;
}
https://flukeout.github.io