Nasza kochana grafika
Jak wstawiać obrazki?
Przy wstawianiu grafiki będziemy zawsze wstawiać znacznik <IMG>. Samo wstawienie tego tagu nie spowoduje nic (tak na prawdę to może spowodować tylko błąd). Wewnątrz tego znacznika będziemy wstawiać kolejne parametry takie jak:
SRC="nazwa_obrazka.gif" - dzieki tej właściwości przeglądarka wie jaki plik ma wyświetlić. Należy pamiętać, że przeglądarki interpretują tylko dwa typy grafiki - gif, jpg. Jeżeli obrazek znajduje się w tym samym katalogu co dokument HTML nie trzeba podawać ścieżki, w przeciwnym wypadku tak.
WIDTH="30" Height="50" - polecenia określają szerokość obrazka (Width), oraz wysokość (Height). W przypadku jeżeli nie zostaną zadeklarowane obrazek przyjmie naturalne wielkości.
ALT="opis" - parametr spowoduje, że po najechaniu myszą na obrazek pokarze się się tekst
VSPACE="5" HSPACE="10" - właściwości ustawiają odstęp od tekstu w poziomie (HSPACE), oraz w pionie (VSPACE).
BORDER="5" - znaczniki powodują wyświetlenie ramki wokół obrazka.
ALIGN="left" - jak już możliwie zauważyłeś wstawiony w powyższy sposób obrazek rozdziela tekst. Aby to zmienić, i aby tekst otaczał grafikę należy zastosować właściwość - ALIGN. Może ona przyjmować właściwości "left", "center", "right", "justify", "top", "middle", "bottom", "absmiddle", "absbottom", "texttop", "baseline".
Koniec teorii, trochę praktyki
Myślę, że już masz dosyć ciągłej teorii. Stworzymy teraz swoją pierwszą stronę. Będzie to strona o tobie (czyt. o mnie). Tak więc zaczynamy.
1) Na początek utwórz główną strukturę dokumentu. W znaczniki <TITLE> <TITLE> wpisz - Strona o mnie.
2) Ustaw kolor tła
3) Stworzymy teraz nagłówek strony. Będzie on wyśrodkowany. W sekcji <BODY> wstaw kod:
<FONT SIZE="6" COLOR="maroon" FACE="Verdana"><CENTER>Znajdujesz się na stronie o mnie</CENTER></FONT><BR><HR><BR> 4) Wstawimy teraz obrazek ze zdjęciem:
<IMG src="zdjecie.gif" border="2" HSPACE="30" ALT="To jest moje zdjęcie" ALIGN="left">
5) Przydałoby się teraz jeszce grzecznie powitać gościa i napisać coś o sobie:
<FONT SIZE="4" COLOR="black" FACE="Arial"> <CENTER><B>Cześć !!!</B><I></I></CENTER></FONT><BR><HR><BR> <FONT SIZE="3" COLOR="black" FACE="Arial">Nazywam się <B>...............</B>, mam XX lat. Interesuję się komputerami. Właśnie nauczyłem się tworzyć proste strony internetowe. Oprocz tego lubie zwierzeta.</FONT>
6) Zapisz stronę i zobacz jej efekt, jeżeli nie jesteś czegoś pewien możesz przeanalizować poniższy kod źródłowy:
Przy wstawianiu grafiki będziemy zawsze wstawiać znacznik <IMG>. Samo wstawienie tego tagu nie spowoduje nic (tak na prawdę to może spowodować tylko błąd). Wewnątrz tego znacznika będziemy wstawiać kolejne parametry takie jak:
SRC="nazwa_obrazka.gif" - dzieki tej właściwości przeglądarka wie jaki plik ma wyświetlić. Należy pamiętać, że przeglądarki interpretują tylko dwa typy grafiki - gif, jpg. Jeżeli obrazek znajduje się w tym samym katalogu co dokument HTML nie trzeba podawać ścieżki, w przeciwnym wypadku tak.
WIDTH="30" Height="50" - polecenia określają szerokość obrazka (Width), oraz wysokość (Height). W przypadku jeżeli nie zostaną zadeklarowane obrazek przyjmie naturalne wielkości.
ALT="opis" - parametr spowoduje, że po najechaniu myszą na obrazek pokarze się się tekst
VSPACE="5" HSPACE="10" - właściwości ustawiają odstęp od tekstu w poziomie (HSPACE), oraz w pionie (VSPACE).
BORDER="5" - znaczniki powodują wyświetlenie ramki wokół obrazka.
ALIGN="left" - jak już możliwie zauważyłeś wstawiony w powyższy sposób obrazek rozdziela tekst. Aby to zmienić, i aby tekst otaczał grafikę należy zastosować właściwość - ALIGN. Może ona przyjmować właściwości "left", "center", "right", "justify", "top", "middle", "bottom", "absmiddle", "absbottom", "texttop", "baseline".
Koniec teorii, trochę praktyki
Myślę, że już masz dosyć ciągłej teorii. Stworzymy teraz swoją pierwszą stronę. Będzie to strona o tobie (czyt. o mnie). Tak więc zaczynamy.
1) Na początek utwórz główną strukturę dokumentu. W znaczniki <TITLE> <TITLE> wpisz - Strona o mnie.
2) Ustaw kolor tła
3) Stworzymy teraz nagłówek strony. Będzie on wyśrodkowany. W sekcji <BODY> wstaw kod:
<FONT SIZE="6" COLOR="maroon" FACE="Verdana"><CENTER>Znajdujesz się na stronie o mnie</CENTER></FONT><BR><HR><BR> 4) Wstawimy teraz obrazek ze zdjęciem:
<IMG src="zdjecie.gif" border="2" HSPACE="30" ALT="To jest moje zdjęcie" ALIGN="left">
5) Przydałoby się teraz jeszce grzecznie powitać gościa i napisać coś o sobie:
<FONT SIZE="4" COLOR="black" FACE="Arial"> <CENTER><B>Cześć !!!</B><I></I></CENTER></FONT><BR><HR><BR> <FONT SIZE="3" COLOR="black" FACE="Arial">Nazywam się <B>...............</B>, mam XX lat. Interesuję się komputerami. Właśnie nauczyłem się tworzyć proste strony internetowe. Oprocz tego lubie zwierzeta.</FONT>
6) Zapisz stronę i zobacz jej efekt, jeżeli nie jesteś czegoś pewien możesz przeanalizować poniższy kod źródłowy:
<HTML>
<HEAD>
<TITLE>Strona o mnie</TITLE>
<META http-equiv="content-type" content="text/html; charset=iso-8859-2">
</HEAD>
<BODY BGCOLOR="yellow">
<FONT SIZE="6" COLOR="maroon" FACE="Verdana">
<CENTER>Znajdujesz się na stronie o mnie</CENTER></FONT><BR><HR><BR>
<IMG src="zdjecie.gif" border="2" HSPACE="30" ALT="To jest moje zdjęcie" ALIGN="left">
<FONT SIZE="4" COLOR="black" FACE="Arial">
<CENTER><B>Cześć !!!</B><I></I></CENTER> </FONT><BR><HR><BR>
<FONT SIZE="3" COLOR="black" FACE="Arial">Nazywam się
<B>...............</B>, mam XX lat. Interesuję się komputerami.
Właśnie nauczyłem się tworzyć proste strony internetowe. Oprocz tego lubie zwierzeta.</FONT>
<BR><BR><HR>
</BODY>
</HTML>
<HEAD>
<TITLE>Strona o mnie</TITLE>
<META http-equiv="content-type" content="text/html; charset=iso-8859-2">
</HEAD>
<BODY BGCOLOR="yellow">
<FONT SIZE="6" COLOR="maroon" FACE="Verdana">
<CENTER>Znajdujesz się na stronie o mnie</CENTER></FONT><BR><HR><BR>
<IMG src="zdjecie.gif" border="2" HSPACE="30" ALT="To jest moje zdjęcie" ALIGN="left">
<FONT SIZE="4" COLOR="black" FACE="Arial">
<CENTER><B>Cześć !!!</B><I></I></CENTER> </FONT><BR><HR><BR>
<FONT SIZE="3" COLOR="black" FACE="Arial">Nazywam się
<B>...............</B>, mam XX lat. Interesuję się komputerami.
Właśnie nauczyłem się tworzyć proste strony internetowe. Oprocz tego lubie zwierzeta.</FONT>
<BR><BR><HR>
</BODY>
</HTML>
Materiał dodany przez użytkownika: alphan