Tworzenie Statycznych Stron Internetowych

Kurs Html

Kurs Css

Linki

• Wartości i Jednostki.
• Tabele.
• Listy.
• Hiperłącze.
• Grafika i multimedia.
• Formularze.
• Formularze do dowodu.
• Selektory
• Formatowanie stron za pomocą Html

Grafika i multimedia

formaty graficzne używane na stronach www

Obecnie na stronach www używa się najczęściej trzech formatów graficznych: GIF, JPG,PNG
Format GIF jest formatem 8 bitowym, zapisującym max 256 kolorów. nadaje się do zapisywania: grafiki z dóżymi powierzchniami o takiej samej barwie i niedużej liczbie szczegułów(nagłówki przyciski,paski itp.) głównym jego zaletą jest nieduży rozmiar oraz transparętność czyli przeźroczystośćktóra pozwala np. tło grafiki zapisać jako pszeźroczyste.GiF umożliwia również kożystania z przeplotu czyli wyczytywanie obrazu paternami: co 4 wiersz , co 2 wiersz , reszta. Daje to Wrażenie szybkiej ładowania strony .
Format JPG pasuje na palecie 24 bitowej z możliwością kompresji nadaje się do prezentowania fotografii. należy pamiętać że zbyt dóża kompresja może spowodować gorszą jakość grafiki. W sumie najpopularniejszym dzisiaj formatem graficznym.
PNG pozwala na zapisanie 48 bitowej pakiety kolorów i 16 bitowej palety szrości jest transparentny i posiada bezstratny mechanizm kompresji.

Wstawianie grafiki

Grafikę na strone www wstawiamy poleceniem <img> z atrybutem src po którym podajemy nazwę pliku z rozszeżeniem( Jeżeli jest w tym samym, folderze co plik do którego wstawiamy ), lub ścieżkę dostępu.

Atrybuty znacznika img

• scr - odpowiada za załadowanie grafiki na stronę
• alt - to tekst alternatywny wyświetlany przy błędzie ładowania grafiki
• width, height - szerokość i wyskokość grafiki możliw do podania w px oraz procentach ( rozmiaru ekranu). Należy unikać skalowania obrazów. Skalujemy przed publikacją.
• border - ramka, czarna o szerokości podawanej w pixelach
• hspace vspace - odsunięcie tekstu od obrazka
• img src="min_obrazek.gif" - polecenie tworzące miniature obrazka wraz z linkiem do niego
• algin - sterowanie otoczeniem tekstem; wartości: texttop, text, middle, bottom lub baseline

Skalowanie obrazka

Format

skalowanie 50%

Skalowanie 800x50

ramka 4 pixele

miniatura obrazu jako link do orginału (nie działa)

otaczanie tekstem

Otaczanie tekstem, różne warianty.Otaczanie tekstem, różne warianty. Otaczanie tekstem, różne warianty.Otaczanie tekstem, różne warianty.Otaczanie tekstem, różne warianty.Otaczanie tekstem, różne warianty.Otaczanie tekstem, różne warianty.Otaczanie tekstem, różne warianty.Otaczanie tekstem, różne warianty.Otaczanie tekstem, różne warianty.Otaczanie tekstem, różne warianty.Otaczanie tekstem, różne warianty.Otaczanie tekstem, różne warianty.Otaczanie tekstem, różne warianty.Otaczanie tekstem, różne warianty.Otaczanie tekstem, różne warianty.Otaczanie tekstem, różne warianty.Otaczanie tekstem, różne warianty.Otaczanie tekstem, różne warianty.Otaczanie tekstem, różne warianty.Otaczanie tekstem, różne warianty.Otaczanie tekstem, różne warianty.Otaczanie tekstem, różne warianty.Otaczanie tekstem, różne warianty.Otaczanie tekstem, różne warianty.Otaczanie tekstem, różne warianty.Otaczanie tekstem, różne warianty.Otaczanie tekstem, różne warianty.Otaczanie tekstem, różne warianty.

nowe

Html RecyklingPac ManStar

tła strony

na chwile obecną tylko strony definiuje się w css!
W html wygląda to tak:

Tło jednokolorowe

Do znacznika body wstawiamy atrybut bgcolor="nazwa kolor lub kod hex"

Grafika jako tło

Podobnie jak wyżej tylko: atrybut background="nazwa pliku z rozszeżeniem"

Multimedia

Animacja marquee

Animacja marquee to animowany tekst z wieloma możliwościami. wymyślony na potrzeby IE działa na innych przeglondarkach . W opcji podstawowej tekst przesuwa się od prawej do lewej.

Animacja podstawowa marquee

atrybuty animacji marquee

• behavior: tryb przesuwania tekstu; wartości:
  • scroll - od prawej do lewej,
  • slide - od prawej do lewej 1 raz potem nieruchomieje
  • alternate - od prawej do lewej potem odbija się i wraca na prawą,
  • bgcolor - kolor tła
  • direction - kierunek przesuwania tekstu
    • left - w lewo
    • right - w prawo
    • up - w górę
    • down - w dół
  • Loop - liczba powturzeń
  • scroollamout - skok o określoną liczbe pikseli
  • scrolldelay - opuźnienie, wartości w milisekundach

Przykłady :

Animacja marquee slide
Animacja marquee alternate
Animacja marquee bgcolor
Animacja marquee right
Animacja marquee right
Animacja marquee loop=3 Animacja marquee scrollamount=30 Animacja marquee scrolldelay=30

Obraz

Wstawianie wideo

Wstawiane dźwięku

Darmowy hosting zapewnia PRV.PL