Jak wstawić plik audio w formacie mp3 na stronę WWW?

 audio

Jak wstawić plik wideo w formacie mp4 na stronę WWW?

wideo

W pierwszym i drugim przypadku gdybym osadzał na stronie np. audio, które mam w folderze z plikiem audio.html to mógłbym wpisać <source src="/muza.mp3" type="audio/mpeg">

Podobnie jest gdy stronę mam już na serwerze w Internecie. Nie linkuję wtedy raczej obcych stron i plików na innych serwerach.

Dlaczego więc tutaj tak zrobiłem? Chodzi to żebyście po wpisaniu poleceń mieli widoczny lub słyszalny efekt w swojej przeglądarce.

 Jak wstawić plik wideo z youtube na stronę WWW?

Pod wybranym filmem na youtube.com kliknij Udostępnij. Następnie Umieść.

Skopiuj całą ramkę iframe, która wyświetliła się w okienku do swojego pliku i umieść ją między znacznikami body.

<meta charset="UTF-8">

To polecenie, które powinno znaleźć się w części head, rozwiązuje ono problem wyświetlania polskich liter.

Deklaracji dokumentu html dokonujemy na samym początku strony internetowej, na samej górze, w pierwszej linii kodu html. Deklaracja ta informuje przeglądarkę o rodzaju dokumentu, który ma przetworzyć. Obecnie w html5 zapis deklaracji został skrócony i wygląda następująco.

<!DOCTYPE html>

Reasumując poprawna osnowa dokumentu + deklaracja HTML + polskie znaki wygląda tak:

<!DOCTYPE html>
<html lang="pl-PL">
<head>
<meta charset="UTF-8">
</head>
<body>
<body>
</html>

HTML (ang. HyperText Markup Language, hipertekstowy język znaczników) to podstawowy język projektowania stron internetowych. Nie jest to język programowania. Obowiązującym obecnie standardem HTML jest HTML5.

Znacznik (tag) jest to specjalny tekst umieszczony w nawiasach ostrych - np.: <b>. Jest on częścią składni języka HTML i pozwala sterować wyglądem strony. Dzięki niemu możesz np. ustalić kolor tła, rodzaj formatowania tekstu, wstawić obrazek czy tabelę itd. Znacznik nie jest widoczny na ekranie. Widoczne są tylko efekty jego działania (np. wstawienie obrazka).

Poniższe znaczniki są podstawowe dla dokumentów HTML i powinny występować na każdej poprawnej, zgodnej z HTML5 stronie internetowej.

Szkielet (osnowa) dokumentu HTML
<html> <head> </head> <body> </body> </html>

 

Wyjaśnienie znaczenia powyższych znaczników:

  • <html></html> ten znacznik określa ramy dokumentu HTML, a więc jego początek i koniec;
  • sekcja <head></head> tworzy tak zwany nagłówek dokumentu. W tym przykładzie jest on pusty ale powinien obowiązkowo zawierać kilka informacji. W wersji minimum są to: strona kodowa, tytuł, oraz słowa kluczowe i opis strony;
  • sekcja <body></body> to tak zwane ciało dokumentu, tutaj umieszczamy treść. O ile sekcja head pełni rolę czysto informacyjną i jej zwartość (poza tytułem, który przeglądarka wyświetla na pasku tytułu) można obejrzeć tylko w źródle strony, o tyle zawartość body jest w całości wyświetlane w oknie przeglądarki.

Przedstawione niżej znaczniki HTML występują na wielu stronach internetowych ale nie wszystkie są zalecane przez najnoiwsza scecyfikację HTML5. Warto je jednak poznać.

<title> </title> Ten znacznik wykorzystuje się do wpisania tytułu strony wyświetlanej na pasku tytułowym przeglądarki

<br> - zejście do nowej linii
<b> </b> - pogrubienie
<i> </i> - pochylenie, kursywa, italik
<u> </u> - podkreślenie
<hr> - linia pozioma
<img src="/nazwapliku.jpg"> - wstawianie obrazka, którego plik źródłowy znajduje się w tym samym folderze (katalogu) co plik html strony, zwróć uwagę na wielkość liter w nazwie, brak polskich znaków, spacji, a szczególnie na rozszerzenie nazwy pliku graficznego (najczęściej jpg lub png lub gif)
<a href="https://www.wp.pl">WP</a> - wstawienie linku do strony wp.pl znajdującej się w internecie, zwróć uwagę na literki https (nie wszystkie strony mają protokół https, mogą mieć http); link do strony lokalnej nie musi mieć "https://www" wystarczy sama nazwa pliku i jego rozszerzenie, najczęściej html

<body bgcolor="green"> - ustalenie koloru tła strony na zielony

<font size="7">napis</font> ustalenie wielkości fontów na maksymalną 

<font color="red"> - ustalenie koloru czcionki na czerwony
<font face="arial"> - ustalenie kroju czcionki na Arial

<img src="/nazwapliku.jpg" width="300"> - ustalenie wielkości obrazka na 300 pikseli

<p> </p> - paragraf, akapit

<p align="center">treść akapitu</p> - wyśrodkowanie akapitu

<p align="right">treść akapitu</p> - akapit do prawej

<p align="left">treść akapitu</p> - akapit do lewej

<p align="justify">treść akapitu</p> - akapit wyjustowany

Pierwsza strona serwisu www zawsze musi nazywać się index.html bo inaczej przeglądarka nie znajdzie strony, mimo poprawnego adresu.

lista uporządkowana

<ol> </ol> - znacznik otwierający i zamykający listy uporządkowanej, domyślna lista jest numerowana cyframi arabskimi

<li></li> - każda kolejna pozycja listy zaczyna się i kończy takim znacznikiem

<ol type="a"> - taki znacznik otwierający dla listy uporządkowanej uruchamia numerowanie małymi literami alfabetu łacińskiego

<ol type="A"> - j.w. ale wielkie litery

<ol type="I"> - j.w. ale cyfry rzymskie

lista nieuporządkowana

<ul> </ul> - znacznik otwierający i zamykający listy nieuporządkowanej, domyślna lista posiada punktor - czarna kropka

<li></li> - każda kolejna pozycja listy zaczyna się i kończy takim znacznikiem

<ul type="circle"> - taki znacznik otwierający listy nieuporządkowanej spowoduje wyświetlenie punktora - biała kropka

<ul type="square"> - taki znacznik otwierający listy nieuporządkowanej spowoduje wyświetlenie punktora - czarny kwadrat

<ul type="disc"> - taki znacznik otwierający listy nieuporządkowanej spowoduje wyświetlenie punktora - czarna kropka (domyślny)

tabelka

Utwórz tabelę wg powyższego wzoru.

<table> </table> - polecenie do utworzenia tabeli

<table border="1"> - tabelka obramowana; domyślne obramowanie nie wygląda tak jak na obrazku wzorcowej tabeli, taka ramka wymaga użycia CSS

<tr> </tr> - znacznik rozpoczyna i kończy wiersz tabeli

<td></td> - znacznik rozpoczyna i kończy komórkę tabeli

<td colspan="2"></td> - takie polecenie spowoduje połączenie dwóch sąsiednich komórek tabeli w jedną

<td rowspan="3"></td> - to polecenie spowoduje połączenie trzech sąsiednich komórek w danej kolumnie, połączona komórka jest długa na trzy wiersze tabeli

© 2020 classroom.pl All Rights Reserved.
DMC Firewall is developed by Dean Marshall Consultancy Ltd