Trochę o kolorach i grafice
Witaj po raz kolejny. Dziś rozmawiali będziemy na temat wstawiania multimediów na stronie internetowej. Zacznijmy od najprostszych tj. jak wstawić tło na stronie:)Tło na stronie można ustawić jako jednolity kolor lub jako grafikę. Popatrzmy na poniższe przykłady:
<!-- przyklad_4_1.html -->
<html>
<head>
<title>Przykład 1 rozdział 4.</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body bgcolor="red">
To jest strona w kolorze czerwonym
</body>
</html>
<!-- przyklad_4_2.html -->
<html>
<head>
<title>Przykład 2 rozdział 4.</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body background="http://www.wp.pl/i/ivar/F/201109/1317123607.png">
To jest strona z obrazkiem WP w tle :p
</body>
</html>
Widzimy tu dwa przykłady. W pierwszym ustalamy kolor tła za pomocą atrybutu bgcolor znacznika body. Na drugim ustalamy grafikę tła za pomocą atrybutu background tego samego znacznika. Jak widać jest to bardzo proste. Gdyby w drugim przypadku chodziło nam o grafikę na serwerze należałoby podać ścieżkę bezwzględną.
Przyjmijmy teraz, że mamy katalog główny HTML. W tym katalogu mamy różne katalogi, między innymi katalog GRAFIKA. W katalogu HTML umieszczamy plik index.html w którym chcemy aby tłem była grafika z katalogu GRAFIKA. Drzewo katalogów wygląda tak
HTML
|-index.html
|–GRAFIKA
| |
| |_ _ moja_grafika.jpg
|
…
Ścieżka do naszego pliku wygląda więc następująco : GRAFIKA/moja_grafika.jpg. Całość prezentuje się więc tak:
<body background=”GRAFIKA/moja_grafika.jpg”>
Nauczyliśmy się więc już jak wstawiać tło na stronę. A co gdyby sytuacja była odwrotna a drzewo katalogów wyglądałoby tak:
UPPER
|–HTML
| |
| |_ _ index.html
|
|–GRAFIKA
| |
| |_ _ moja_grafika.jpg
|
…
W tym momencie musimy użyć operatora “..” który mówi nam “PRZEJDŹ DO FOLDERU NADRZĘDNEGO”. Ścieżka do pliku moja_grafika.jpg wyglądała by tak:
../GRAFIKA/moja_grafika.jpg
a całość:
<body background=”../GRAFIKA/moja_grafika.jpg” >
Teraz umiemy także tworzyć ścieżki do plików BRAWO!
Wstawianie grafiki
Oprócz grafiki tła możemy także na stronie umieszczać różnorakie zdjęcia. Służy do tego znacznik IMG. Posiada on następujące atrybuty:
- src – ścieżka do obrazka, może być na serwerze zewnętrznym lub lokalnym,
- width – opcjonalnie, jeśli chcemy aby grafika miała inną szerokość niż w rzeczywistości (w pixelach),
- height – opcjonalnie, jeśli chcemy aby grafika miała inną wysokość niż w rzeczywistości (w pixelach).
Całość natomiast wygląda w sposób następujący:
<img src="ścieżka_do_obrazka" width="szerokość" height="wysokość" />
Widzimy też, że img nie posiada znacznika </img> zamykającego. Sam w sobie jest znacznikiem domykającym. Czas na jakiś przykład:
<!-- przyklad_4_3.html -->
<html>
<head>
<title>Przykład 3 rozdział 4.</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<img src="http://www.ripplants.nl/images/Ananasvrucht.jpg" /><br />
To jest zdjęcie w normalnej rozdzielczości, a poniżej zdjęcie z ustaloną przeze mnie:<br />
<img src="http://www.ripplants.nl/images/Ananasvrucht.jpg" width="500" height="600" /><br />
</body>
</html>
Możemy także wstawiać dowolny film za pomocą znacznika embed. Nie jest to jednak zalecane, więc przedstawię inną (lepszą ?) metodę.
UMIESZCZANIE WIDEO
Aby umieścić wideo na stronie musimy wykonać poniższe kroki
- Założyć konto na youtube
- Zuploadować (wrzucić) na serwer yt. za pomocą naszego konta konkretny filmik jaki chcemy umieścić na naszej stronie
- Wejść na stronę tego filmiku na youtube.
- Kliknąć w przycisk UDOSTĘPNIJ
- Kliknąć w przycisk UMIEŚĆ
- Pojawi się kod podobny do tego:1 <iframe width="560" height="315" src="http://www.youtube.com/embed/9Xy2InXXIkk" frameborder="0" allowfullscreen></iframe>
Przekopiować ten kod i umieścić w dowolnym miejscu w sekcji BODY
Umieszczanie tła muzycznego
Umieszczanie tła muzycznego jest niezalecane. Aby to zrobić można użyć standardu IE lub technologii FLASH. Niemniej jednak, FLASH nie jest tematem tego kursu, a korzystanie ze standardu IE w pisaniu stron internetowych pod wiele przeglądarek jest niewskazane, gdyż nie działałoby to zapewne poprawnie. Tak więc nie należy umieszczać tła muzycznego i nie zostanie przedstawione tu nic co ma z tym cokolwiek wspólnego (inną rzeczą jest to, że można to zrobić w sposób identyczny jak umieszczenie wideo na stronie).
PRACA DOMOWA
- Utwórz stronę internetową na której umieścisz obraz “Słoneczniki” znaleziony w google. Do powyższych słoneczników dodaj stosowny opis. Postaraj się w sposób szczegółowy wyróżnić Autora, Rok powstania oraz najważniejsze informacje. Informacje możesz zasięgnąć z wikipedii.
-
Utwórz stronę na której umieścisz dowolne wideo. Postaraj się aby miała tematyczne tło i znalazła się na niej jakaś konkretna treść.
Brak komentarzy:
Prześlij komentarz