: Home / HTML / CSS / kurs HTML / Grafika na stronie

Warning: file_get_contents(http://graph.facebook.com/http://youthcoders.net/html-css/kurs-html/15-grafika-na-stronie.html): failed to open stream: HTTP request failed! HTTP/1.0 403 Forbidden in /var/www/old-yc/plugins/content/addthis.php on line 38
Grafika na stronie
Ocena użytkowników: / 0
SłabyŚwietny 
Wpisany przez Patryk yarpo Jar   
piątek, 18 września 2009 02:37

Na naszej stronie ciągle jeszcze czegoś brakuje... Grafiki!

Już naprawiamy. Do wstawiania grafiki służy znacznik:

<img src="/źródło pliku graficznego" alt="tekst widoczy, jeśli nie uda się wyświetlić grafiki" title="tekst widoczny po najechaniu myszką na grafikę" align="left | right | center">


Można jeszcze doliczyć takie artybuty jak: width (szerokość), height (wysokość), style (definicja stylów - o tym później). Atrybut align jest tu użyty "tymczasowo". Na nowocześnie tworzonych stronach nie powinno się go używać (patrz: CSS, float). Dla wygody jednak użyjemy go tu.

Wstawmy zatem jakieś zdjęcie do kontaktu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

    <title>Kontakt</title>

    <meta http-equiv="content-type" content="text/html;charset=utf-8">

</head>

<body>

    <h1>Kontakt</h1>

    <p><img src="/img/kontakt.jpg" alt="Zdjęcie" title="To jest grafika">

        <a href="mailto:zdzisio(a)serwer.pl">zdzisio(a)serwer.pl - napisz</a><br>

        tel. 99887766</p>

    <p><a href="/index.htm">Powrót do strony głównej</a></p>

</body>

</html>

Być może zastanawiasz się, co to znaczy:
src="/img/kontakt.jpg"

Jest to ścieżka do pliku. Można to przeczytać jako "w katalogu, w którym znajduje się plik, w którym jesteś (kurs html youthcoders - bo tam powinien być zapisany plik kontakt.htm) znajdź katalog `img', a w nim plik `kontakt.jpg'".

Gdyby zdarzyło się, że chcesz przejść do katalogu nadrzędnego, należałoby użyć `..", do jeszcze wyższego `../../'. Do wyższego i tem znaleźc jakiś katalog `../../katalog/podkatalog/plik.jpg' itd. Oczywiście nie tyczy się to tylko obrazków. Zagadnienie ścieżek względnych i bezwzględnych tyczy się wszystkich rodzajów plików.

Zadanie dla ciebie:
Stwórz w katalagu `kurs html youthcoders' katalog `img' i umieść w nim dowolny plik graficzny. Nazwij ten plik `kontakt.jpg' (lub inaczej, ale wtedy dokonaj też odpowiednich zmian w kodzie). Pamiętaj o nazenictwie. Mała litera to nie to samo co wielka litera! Ku ścisłości - pod Windowsem tak. Pod linuksem (a większość serwerów w internecie jest postawionych na linuksie), plik kontakt.JPG i kontakt.jpg to dwa _różne_ pliki.
 

Tags:

Zobacz podobne artykuły

< Poprzednia   Następna >
 

Dodaj komentarz


Kod antysapmowy
Odśwież