Active Server Pages,ActiveServerPages+,ASP,ASP+,aspx,VBScript,IIS,internet,intranet,programming,programowanie,XML,Extensible Markup Language,kurs,opis,HTML,Hypertext Markup Language,JScript,JavaScript,wyszukiwarka,znajdz,instrukcja,Stelmik,Stelmi,free,darmo,zadarmo,free,serwer,server,www,konta,PHP,perl,klient,uslugi,asp,sklep internetowy,sklepy internetowe,e-sklep,esklep,tworzenie stron internetowych,strony internetowe,strony www,tworzenie stron www,strony internetowe,web page,webpage,creating,Krzysztof Stelmach,Krzysztof,Stelmach,www.stelmach.info,www.asp.z.pl
 
Create your own social network!
IP: 54.92.163.188 
 
 HTML / GRAFIKA
Szukaj:  
Nd, 22.07.2018r.
KURSY » języki - klient » HTML » Grafika
 

Grafika jest ważnym elementem na stronach WWW, gdyż ubarwia i uprzyjemnia ich przeglądanie. Należy pamiętać, że duża ilość odpowiednio dobranej grafiki bardzo dobrze wpływa na atrakcyjność strony w odbiorze. Jednak to właśnie grafika jest przyczyną zmniejszenia szybkości ładowania się strony. W sieci internetowej najczęściej spotykanymi typami plików graficznych są GIF i JPG, które charakteryzują się znaczną kompresją i niewielkimi rozmiarami.

1. Umieszczanie elementów graficznych w dokumencie HTML

Aby umieścić dowolny element graficzny należy wpisać

<IMG SRC="plik_graficzny">

Znacznik IMG jest skrótem od ang. Image (obraz) i określa miejsce w dokumencie HTML, w którym powinna znaleźć się grafika, natomiast atrybut SRC powinien zawierać nazwę źródłowego pliku graficznego.

Przykład:

<IMG SRC="foot.gif">

co w wyniku powinno wyglądać następująco:

Istnieje możliwość zastosowania wielu innych atrybutów, które umożliwiają m.in.:

a) zmiana rozmiaru obrazka jest realizowana przy pomocy atrybutów HEIGHT (wysokość) oraz WIDTH (szerokość). Jednostką jest piksel.

Przykład:

<IMG SRC="foot.gif" HEIGHT=50 WIDTH=150>

Powyższe polecenie automatycznie zmienia wysokość i szerokość obrazka.

b) zmiana rozmiaru grubości ramki wokół obrazka jest realizowana przy pomocy atrybutu BORDER, który podobnie jak w przypadku rozmiaru obrazu posiada wartość podaną w pikselach.

Przykład:

<IMG SRC="foot.gif" BORDER=5>

 

c) określenie odległości obrazka od pozostałych otaczających elementów poprzez użycie atrybutów VSPACE (vertical space) oraz HSPACE (horizontal space).

Przykład nr 1:

<IMG SRC="foot.gif" HSPACE=100>

Dowolny tekst.Dowolny tekst.

Przykład nr 2:

<IMG SRC="foot.gif" VSPACE=50>

d) zmiana położenia obrazka względem otaczających elementów jest realizowana za pomocą atrybutu ALIGN, który może przyjmować następujące wartości:

Wartość Efekt końcowy
ALIGN=LEFT Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst.
ALIGN=RIGHT Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst.
ALIGN=TOP Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst.
ALIGN=BOTTOM Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst.
ALIGN=ABSBOTTOM Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst.
ALIGN=MIDDLE Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst.
ALIGN=ABSMIDDLE Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst.
ALIGN=BASELINE Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst. Dowolny tekst.

Konstrukcja ma postać:

<IMG SRC="plik_graficzny" ALIGN=......>

Obrazek może być także umieszczony na środku wiersza dzięki parze znaczników <CENTER> </CENTER>.

Przykład:

<CENTER><IMG SCR="foot.gif"></CENTER>

Można także umieścić go wewnątrz tabeli wstawiając go między znaczniki <TD> </TD>. W ten sposób można w łatwy sposób tworzyć efektownie wyglądające obramowania.

2. Animacja MARQUEE

Efektownym elementem graficznym, obsługiwanym tylko przez przeglądarkę Internet Explorer firmy Microsoft jest animacja Marquee. Jest to "płynący" w poprzek ekranu napis. Przykład:

<MARQUEE>Płynący tekst</MARQUEE>

i wygląda to tak:

Płynący tekst

Znacznik posiada wiele atrybutów. Oto one:

BEHAVIOR=SCROLL powoduje, że tekst przemieszcza się od jednego brzegu strony do drugiego, po czym znika za nim i następnie wypływa ponownie zza pierwszego
BEHAVIOR=SLIDE powoduje, że tekst przemieszcza się od pierwszego brzegu, dociera do drugiego i zatrzymuje się
BEHAVIOR=ALTERNATE powoduje, że tekst przemieszcza się od pierwszego brzegu, dociera do drugiego i wraca z powrotem (odbija się)
BGCOLOR=kolor określa kolor tła; wartość koloru (kolor) można być podana w postaci numerycznej (np. #00FF77) lub słownej (Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua)
DIRECTION=LEFT określa początkowy kierunek ruchu jako kierunek w lewo
DIRECTION=RIGHT określa początkowy kierunek ruchu jako kierunek w prawo
LOOP=x określa ilość powtórzeń ruchu tekstu x razy
HEIGHT=x wymiary elementu, w którym przesuwa się napis; x może przyjmować wartości wyrażone w pikselach lub procentach wysokości ekranu
WIDTH=y wymiary elementu, w którym przesuwa się napis; y może przyjmować wartości wyrażone w pikselach lub procentach szerokości ekranu
HSPACE=x określa odległość elementu MARQUEE w poziomie od sąsiadujących elementów, np. tekstu, grafiki; akapity nad i pod animacją należy oddzielić od animacji znakiem końca akapitu <P> lub końca wiersza <BR>
VSPACE=y określa odległość elementu MARQUEE w pionie od sąsiadujących elementów, np. tekstu, grafiki; akapity nad i pod animacją należy oddzielić od animacji znakiem końca akapitu <P> lub końca wiersza <BR>
SCROLLAMOUNT=x określa szybkość przemieszczania się napisu; wartość x określa długość pojedynczego skoku wyrażoną w pikselach
SCROLLDELAY=x określa odstępu czasowe między kolejnymi skokami (szybkość przemieszczania się napisu); wartość x jest wyrażona w milisekundach

Przykłady:

<MARQUEE BGCOLOR="SILVER" BEHAVIOR="SCROLL" DIRECTION="RIGHT" SCROLLDELAY="100">

<MARQUEE BGCOLOR="YELLOW" SCROLLAMOUNT="5">

<MARQUEE BGCOLOR="AQUA" BEHAVIOR="ALTERNATE">

 
do góry ^ 
Jesteś 1937066 odwiedzającym
 
 
Copyright © 2003-2018 Krzysztof Stelmach, Wszelkie prawa zastrzeżone.
 
System reklamy Test