Tutorial HTML dla MM-kowiczów

1. Wstęp

W związku z prośbami postaram się w jak najprostszy sposób pokazać, jak można na MM-ce swoje teksty wzbogacić o materiały wideo oraz o zdjęcia, wstawiając je w miejscu, w którym chcemy. Zdjęcia można, oczywiście, prezentować jako miniaturki pod tekstem, ale czasami autor na pewno chciałby przeplatać swój tekst ilustracjami i, choć są one wtedy w mniejszym rozmiarze, może to być logicznie uzasadnione.

Te instrukcje dotyczą zarówno wklejania na wpisach w blogu, jak i w wieściach.

2. Wklejanie materiału wideo

2a. Zamieszczanie materiału wideo z YouTube

Podczas wklejania materiałów wideo, najczęściej korzystamy z zasobów zamieszczonych na YouTube, stąd graficznie pokażę przykład z tego serwisu.

Gdy natrafiliśmy na YouTube na filmik, którym chcemy się podzielić z innymi MM-kowiczami, musimy znaleźć na stronie YouTube obok filmu kod HTML, który potem wkleimy do naszego materiału.

Znajduje się on tu:

W przybliżeniu:

A tekst wygląda tak:

<object width="425" height="344"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param></embed></object>

Nie zastanawiając się nad jego budową, mechanicznie zaznaczamy tekst, kopiujemy i wklejamy w swoim blogu lub w swojej wieści w miejscu, w którym ma być wideo. Generalnie to wszystko i nic więcej nie trzeba już robić. Wideo gotowe do publikacji.

Jest tylko jeden mały szkopuł. Powyższe wideo ma rozmiar 426 pikseli w podstawie. Jest to rozmiar pasujący do MM-ki. Może się jednak zdarzyć, że wideo jest większe. Wtedy będzie wystawać poza szerokość kolumny, co popsuje wygląd strony. Maksymalnym rozmiarem dla MM jest 470 pikseli w podstawie.

2b. Jak sprawdzić i jak zmienić rozmiar wideo?

We wklejanym tekście z YouTube należy znaleźć słówko "width", które oznacza szerokość (występuje ono pod koniec tekstu). Po tym słówku występuje liczba, która określa szerokość pliku wideo. Jeśli jest mniejsza lub równa 470, nie trzeba nic robić. Jeśli jest większa, należy zmienić ją na tę właśnie liczbę i skasować następującą po nim informację o wysokości wideo (w naszym przypadku jest to: height="344").

To już naprawdę wszystko.

2c. Zamieszczanie filmików z innych serwisów

Oczywiście, pliki wideo występują nie tylko na YouTube. W tym przypadku dodatkowym wyzwaniem jest znalezienie pola z kodem HTML, który musimy przekleić do naszego materiału.

Na portalu DAILY MOTION pole z tym kodem nazywa się "Wklejka na stronę:"

Na portalu WRZUTA jest to "Umieść na stronie HTML"

(zapraszam do podawania innych stron z filmami, to uzupełnię instrukcję)

3. Wklejanie zdjęć

3a. Tylko jeden kod HTML do zapamiętania

Jest to operacja trudniejsza, ponieważ wymaga zamieszczenia kodu HTML własnoręcznie. Należy więc zapisać sobie w notatniku konstrukcję takiego kodu, czyli skopiować z niniejszej instrukcji, a potem wykonywać czynność, którą opiszę w dalszej części.

Ten magiczny kod wygląda tak:

<img src="xxx" width="470">

To wszystko, co należy zapisać lub zapamiętać. Pozostaje jeszcze tylko jedna czynność: w miejsce "xxx" wkleić adres obrazka.

W kolejnych krokach opiszę, gdzie go znaleźć.

3b. Gdy zdjęcie jest na MM-ce

Zakładam, że wrzucenie zdjęcia na MM nie przysparza żadnych problemów i pożądane zdjęcie już jest umieszczone w wieści lub w blogu.* (objaśnienie gwiazdki na samym dole) Należy teraz uzyskać adres URL danego zdjęcia. Aby to zrobić, klikamy w miniaturę obrazka, po czym wyświetla się on nam na stronie. Kursorem najeżdżamy troszkę ponad dolną krawędź obrazka (dokładne umiejscowienie kursora jest bardzo ważne) i klikamy prawym klawiszem myszy. Ukazuje się nam menu z którego wybieramy "Właściwości".

Tak wygląda to w Internet Explorerze:

W powiększeniu:

Ukaże się nam wtedy następujące okienko:

W powiększeniu:

Zaznaczony czerwoną obwódką tekst jest szukanym przez nas adresem URL obrazka, który chcemy wstawić do tekstu. Kopiujemy go zaznaczając kursorem i wklejamy w miejsce iksów. Uwaga! Ten adres bezwzględnie musi być otoczony górnymi cudzysłowiami. Zastępując iksy należy zwrócić uwagę, żeby ich nie wykasować.

Przykładowy kod wygląda tak:

Tak wygląda to w Operze:

W powiększeniu:

Ukaże się nam wtedy następujące okienko:

W powiększeniu:

I tutaj wykonujemy te same czynności.

Zaznaczony czerwoną obwódką tekst jest szukanym przez nas adresem URL obrazka, który chcemy wstawić do tekstu. Kopiujemy go, zaznaczając kursorem i wklejamy w miejsce iksów. Uwaga! Ten adres bezwzględnie musi być otoczony górnymi cudzysłowami. Zastępując iksy, należy zwrócić uwagę, żeby ich nie wykasować.

Przykładowy kod wygląda tak:

W innych przeglądarkach wykonujemy analogiczne czynności.

3c. Gdy zdjęcie jest na innej stronie internetowej

W tym przypadku wykonujemy dokładnie te same czynności. Niestety mogą tu wystąpić trzy przypadki:
a) właściwości pliku otrzymamy, klikając prawym klawiszem myszy na dolnym brzegu obrazka (tak jak na MM)
b) właściwości pliku otrzymamy, klikając prawym klawiszem myszy w dowolnym miejscu obrazka
c) właściwości nie otrzymamy w żadnym przypadku, ponieważ zostało to zablokowane przez projektanta strony

Gdy już mamy adres URL obrazka, robimy to samo, co w przypadku grafik z MM-ki.

Uwaga! Podpinając się pod zdjęcia na zewnętrznych stronach internetowych, musimy mieć świadomość, że jeśli zdjęcie zniknie z tamtej strony, nie będzie go również widać na MM-ce.

3d. Żeby zdjęcie nie było za duże

Uważny uczeń zauważy w kodzie informację o szerokości zdjęcia. Wszystkie zamieszczane grafiki (jeśli nie są mniejsze, co jest rzadkością) mają szerokość 600 pikseli. Jest to za duży rozmiar, żeby zmieścił się w MM-kowej kolumnie. Tak samo jak przy wideo i tutaj musieliśmy zmniejszyć zdjęcie do 470 pikseli w podstawie. Jest to już zapisane w kodzie, więc nie trzeba sobie zaprzątać tym głowy. Oczywiście, można wpisać dowolną liczbę pikseli, jeśli chcemy, żeby zdjęcie było np. mniejsze niż 470 pikseli. Uwaga! Nie wpisywać większej liczby, ponieważ zdjęcie najdzie na kolumnę po prawej stronie.

4 . Inne przydatne kody HTML

4a. Wytłuszczenie druku

Aby wytłuścić dany fragment tekst, należy go otoczyć znacznikami <b> i </b>. Oto przykład, jak uzyskać tytuł niniejszego podrozdziału:

<b>Wytłuszczenie druku</b>

4b. Zmiana rozmiaru czcionki

Aby zmienić rozmiar czcionki w danym fragmencie tekstu, należy go otoczyć znacznikami <font size="x"> i </font>, gdzie "x" oznacza wielkość czcionki. Rozmiar czcionki określamy inaczej niż np. w Wordzie. Najczęściej wykorzystywane rozmiary to liczby z zakresu od 1 do 5, przy czym niniejszy tekst pisany jest czcionką o rozmiarze 2.

<font size="3">Troszkę większa czcionka</font>

4c. Zmiana koloru czcionki

Aby zmienić kolor czcionki danego fragmentu tekstu, należy go otoczyć znacznikami <font color="x"> i </font>, gdzie "x" oznacza kolor czcionki. Kolor czcionki określamy angielskimi słowami (tabela przykładowych kolorów pod przykładem) lub numerami w kodzie szesnastkowym (HEX). Jako że jest to tutorial na poziomie podstawowym pominę opis tej drugiej możliwości, prezentując przykład tylko dla słownego określania koloru.

<font color="red">To jest czerwony tekst</font>

A oto tabela przykładowych kolorów (jest ich jeszcze więcej i można pokombinować ze słownikiem :)

4d. Linkowanie do innych miejsc w internecie

Tytuł podrozdziału mówi o miejscach w sieci, ponieważ mogą to być strony www, pliki graficzne, pliki dźwiękowe, pliki wideo, pliki archiwów, itp.

Link tekstowy

Aby dany tekst (może to być także grafika) po jego kliknięciu prowadził do innego miejsca w Internecie, należy go otoczyć znacznikami <a href="x"> i </a>, gdzie "x" oznacza adres URL, do którego ma zawędrować internauta. O adresie URL pisałem przy linkowaniu zdjęć i może on mieć następująca postać:

a) dla stron www:
https://bydgoszcz.naszemiasto.pl

b) dla obrazków (kończy się np. na .jpg lub .gif lub .png):
http://gfx.mmka.pl/newsph/300002/339236.3.jpg

c) dla plików dźwiękowych kończy się np. np .mp3 lub .wma

d) dla filmów kończy się np na .avi lub .mpg

e) dla plików archiwów kończy się np. na .zip lub .rar

A wzór takiego linka wygląda tak:

<a href="xxx">link</a>

Zaprezentuję teraz konkretny przykład. Chcę, aby po kliknięciu słówka "tutaj" internauta przeszedł na stronę główna MM Bydgoszcz.

Oto odpowiednio przygotowany tekst

Jeśli chcesz przejść na stronę główną MM Bydgoszcz, kliknij tutaj.

Żeby uzyskać taki efekt, w wieści lub blogu musimy wkleić:

Jeśli chcesz przejść na stronę główną MM Bydgoszcz, kliknij tutaj</a>.

Link obrazkowy

Jak już pisałem powyżej do takie hyperlinka możemy użyć obrazka. Żeby to zrobić w miejscu tekstu, który ma nas zaprowadzić po kliknięciu w odpowiednie miejsce, wstawiamy obrazek. Robimy to dokładnie tak samo jak opisałem powyżej w przypadku wstawiania obrazków w wieściach .

Przykład:

Gdy kliknięcie , przejdziecie do profilu użytkownika pogoski.

Żeby uzyskać taki efekt, w wieści lub blogu musimy wkleić:

Gdy kliknięcie </a>, przejdziecie do profilu użytkownika pogoski.

_____________________

* Po napisaniu wieści można dodać zdjęcia nim wieść zostanie opublikowana. Umożliwia to powrót do wieści i zakotwiczenie tychże zdjęć. Podczas publikowania zdjęć we wpisie w blogu po wpisaniu tekstu jest on od razu widoczny na głównej stronie. Dopiero potem można dodawać zdjęcia. Dalej, po żmudnym dodawaniu zdjęć dopiero można przejść do ich wklejania do wpisu. Tym samym użytkownicy, czytający wpis, nie są świadomi, że oglądają go zubożonego o zdjęcia. Jest to problem nie do przejścia w obecnym kształcie MM-ki. Niestety.