|
Września 2009
|
Wpisał %s Patryk yarpo Jar
|
piątek, 18 września 2009 02:43
HTML/CSS
/ kurs HTML
|
|
Udało się nam już trochę poukładać elementy na stronie. Pojawiły się też jakieś kolory. Jednak nadal tekst na stronie jest taki... domyślny :)
Zmieńmy to. Na tej lekcji pokażę jak w ąłtwy sposób zmienić wygląd tekstu na stronie. Zacznijmy zatem :)
Na początek, dodamy obramowanie oraz dodamy trochę odstępu między akapitami:
{codecitation}* { margin: 0; padding: 0; }
body { background: #fff url(img/background.png) 0 0 repeat-x; }
#wrapper { width: 1000px; margin: 10px auto; }
#menu { width: 200px; float: left; }
#content { width: 800px; float: left; background: red;}
p { border: 1px solid #000; margin: 12px; padding: 8px; text-align: justify; }
{/codecitation}
Jak widzisz, po raz kolejny - zmiana w pliku `arkusz.css' zmiania wygląd `index.htm' (a jeśli załączyłeś ten plik css do `kontakt.htm' to także wygląd tego pliku w przeglądarce ulega zmianie).
Co dodalismy? Odstęp między tekstem a obramowaniem o wielkości 8px, samo obramowanie 1px w kolorze czarnym (#000 = black) oraz margines o wielkości 12px. Cały tekst będzie wyjustowany.
Teraz powiększmy pierwszą literę każdego akapitu:
{codecitation}/* tu cały początek pliku arkus.css */
p { border: 1px solid #000; margin: 10px; padding: 10px; }
p:first-letter { font-size: 20px; color: #333; }
{/codecitation}
Ta nowa linia definiuje regułę dla pseudo elementu :first-letter (pierwsza litera). Pierwsza litera tekstu umieszczonego w znaczniku p będzie powiększona i wyświetlona w innym kolorze.
Co jednak, gdybyśmy chcieli wyróżnić jakiś drobny fragment tekstu? Dawniej używało się znacznika <font>. Dzisiaj jednak _NIE_ należy go używać. Znacznikiem zalecanym jest <span>. Read more
|
|
Zmieniony ( środa, 11 listopada 2009 16:41 )
|
|
|
Wpisał %s Patryk yarpo Jar
|
piątek, 18 września 2009 02:41
HTML/CSS
/ kurs HTML
|
|
Na poprzedniej lekcji nasza strona nabrała trochę barw. Teraz czas zająć się ułożeniem poszczególnych elementów na stronie.
Zaczniemy od ostylowania naszych warstw [nadal uważam, że słowo "pojemnik" mówi więcej:)]. Kod HTML nie zmieni się w porównaniu z poprzednią lekcją. Jednak wygląd strony ulegnie zmianie! Niemożliwe? Zobacz:).
{codecitation}* { margin: 0; padding: 0; }
body { background: #fff url(img/background.png) 0 0 repeat-x; }
#wrapper { width: 1000px; margin: 10px auto; }
#menu { width: 200px; float: left; }
#content { width: 800px; float: left; background: red;}
{/codecitation}
Po pierwsze warto zauważyć, że jeśli chcemy dopisać regułę do jakiegoś elementu z atrybutem id, dajemy #nazwa_id.
Pojemnikowi okalającemu wszystkie pozostałe pojemniki (#wrapper) ustalamy szerokość równą 1000pikseli. Wyśrodkowujemy cały pojemnik ustawiając margines lewy i prawy na wartość auto.
#menu i #content nadajemy odpowiednie szerokości, a także włączamy im "opływanie". Jest to jedna z technik ustawiania sposobu prezentacji treści na stronie (więcej można przeczytać w kursie CSS dostępnym na stronie serwisu).
Zapisz tak wyedytowany plik `arkusz.css' i odśwież stronę `index.htm' w przeglądarce. Coś się zmieniło? Zdziwiony?:)
Zaglądając w kod strony nic się nie zmieniło. A efekt wizualny zupełnie inny. Warto rozdzielać warstwę prezentacji (CSS) i strukturę dokumentu (HTML).
Już tradycyjnie, wprowadź podobne zmiany w pliku `kontak.htm'.
Read more
|
|
Zmieniony ( środa, 11 listopada 2009 16:41 )
|
|
|
Wpisał %s Patryk yarpo Jar
|
piątek, 18 września 2009 02:41
HTML/CSS
/ kurs HTML
|
|
Póki co tworzyliśmy samą strukturę strony, celowo odsuwając wygląd na dalszy plan. W kilku kolejnych lekcjach będziemy próbować to nadrobić. Jako, że to jest kurs HTMl, a nie CSS, nie będziemy się zbytnio rozwodzić - poznasz jedynie podstawy. W załóżeniu jednak powinny one ci pomóc w dogłębnym poznaniu stylów CSS.
Dodajmy trochę blasku do naszej strony. Na początek dodamy gradientowe tło. Niestety pópki co CSS (wersja 2.1) nie przewiduje automatycznego tworzenia gradientów. Jednak pozwala umieszczać grafikę w tle.
Umieścimy i będziemy odpowiednio duplikować taką grafikę:
Najpierw załączmy plik css do naszej strony index.htm.
{codecitation}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Moja pierwsza strona!</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="arkusz.css">
</head>
<body>
<div id="wrapper">
<div id="top">
<h1>To jest moja pierwsza strona!</h1>
</div>
<div id="menu">
<ul>
<li><a href="index.htm" title="Przejdź do strony głównej">home</a></li>
<li><a href="kontakt.htm" title="Skontaktuj się ze mną">kontakt</a></li>
</ul>
</div>
<div id="content">
<p>Tu umieść jakiś krótki wstęp.</p>
<p>Jeśli chciałbyś się ze mną skontaktować, to zajrzyj na stronę <a href="kontakt.htm">kontaktu</a>.</p>
</div>
</div>
</body>
</html>{/codecitation}
Skoro mamy już załaczony plik, warto byłoby umieścić w nim coś. Plik `arkusz.css' jest zwykłym plikiem tekstowym. Tyle, że zamiast rozszerzenia `.txt' ma rozszerzenie `.css'. Do jego edycji możesz używać dowolnego edytra tekstowego (nawet Notatnika). Ja polecam geany.
Najpierw pozbądźmy się jakichkolwiek odległości (padding) i marginesów ze strony:
{codecitation}/* zawartosc pliku arkusz.css */
* { margin: 0; padding: 0; }{/codecitation}
Taki wpis znaczy "dla każdego elementu na stronie ustaw co następuje". A następuje: usuń marginesy, usuń padding. Wynikiem tego będzie "skelejenie" wszsytkiego. Znikną ze strony białe luki. To dobrze, dzięki temu, będziemy mogli opisywać teraz to sami, a ustawienia domyślne nie będą nam nic psuć.
Zajmijmy się teraz kolejnymi regułami CSS (reguła CSS czyli `separator { właściwość1: wartość_a; właściwość2: wartość_b; ... właściwośćN: wartość_z; }' ). Zadeklarujmy wygląd ciała strony:
{codecitation}/* zawartosc pliku arkusz.css */
* { margin: 0; padding: 0; }
body { background: #fff url(img/background.png) 0 0 repeat-x; }{/codecitation}
Reguła dla body mówi: "ustaw tło o kolorze białym" (#fff to inny zapis koloru białego, w pełni zrozumiały dla przeglądarek). "Na ten kolor narzuć grafikę ze źródła `img/background.png'. Grafika powinna być ustawiona w punkcie 0 0 (tzn. w lewym górnym rogu ekranu) i być powielana w poziomie".
Zapisz powyższy kod w pliku `arkusz.css', umieść ten plik w katalogu `kurs HTML youthcoders'. A plik [załączony na górze tej lekcji] graficzny umieść w katalogu `kurs HTML youthcoders/img'. Następnie otw órz plik `index.htm' w dowolnej przeglądarce i zobacz efekt swojej pracy :).
Zadanie domowe:
Zrób to samo w pliku `kontakt.htm'.
Read more
|
|
Zmieniony ( środa, 11 listopada 2009 16:41 )
|
|
|
Wpisał %s Patryk yarpo Jar
|
piątek, 18 września 2009 02:41
HTML/CSS
/ kurs HTML
|
|
Jest kilka sposobów na połączenie stylów CSS z HTMLem.
1. Wykorzystanie artybutu style:
{codecitation}<dowolny_znacznik style="właściwość: wartość">zawartość znacznika</dowolny_znacznik>{/codecitation}
Przez `dowolny_znacznik' mam na myśli prawie dowolny znacznik. Np `title' nie powinien mieć stylów.
A teraz konkretne zastosowanie - zmiana koloru tła strony, oraz koloru czcionki w akapicie:
{codecitation}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Przykład</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body style="background: yellow">
<p style="color: red">Ten tekst będzie czerwony</p>
<p>Ten bedzie miał domyślny kolor (najprawdopodobniej czarny)</p>
</body>
</html>{/codecitation}
To rozwiązanie jest najprymitywniejszym i najgorszym. Dlaczego? Nawet jeśli chciałbyś, aby kilka akapitów miało taki sam styl, za każdym razem musisz dublować kod.
Gdy będziesz chciał zmienić 10 akapitów - musisz zmieniać kod w 10 miejscach. To jest rozwiązanie złe i używaj go w ostateczności.
2. Style w sekcji head
Skoro umieszczenie kodu CSS w atrybucie `style' jest złe, to co w zamian?
Można zawsze umieścić kod w sekcji head. Oto przykład:
{codecitation}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Przykład</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
body { background: yellow; }
p { color: black; } /* w większości przeglądarek to jest wartość domyślna */
p.mystyle { color: red; }
</style>
</head>
<body>
<p class="mystyle">Ten tekst będzie czerwony</p>
<p>Ten bedzie miał domyślny kolor (najprawdopodobniej czarny)</p>
<p class="mystyle">Ten tekst także będzie czerwony będzie czerwony</p>
</body>
</html>{/codecitation}
Jak widać na powyższym przykładzie mamy dwa akapity o kolorze czerwonym. Jednak jeśli chcielibyśmy zmienić kolor na niebieski, to zmiana ogranicza się do jednego miejsca!
A o to właśnie nam chodzi, aby zrobić wiele przy minimalnym wysiłku.
Nadal jednak czuję niedosyt... Przecież na wielu stronach chciałbym mieć takie same akapity. Czy na każdej muszę dublować kod? Nie... patrz niżej:)
3. Osobny plik ze stylami
Jest to najlepszy sposób na łączanie stylów css z kodem HTML. Jego główne zalety:
kod odpowiedzialny za prezentację jest trzymany w jednym miejscu,
więc dużo łatwiej jest nim zarządzać
raz wczytany nie jest więcej pobierany z serwera! (szybciej się ładuje strona)
możliwość wielokrotnego wykorzystania kodu (nawet na kilku różnych stronach, a.pl, b.pl itp.)
zmniejszenie rozmiaru pliku html
Widzisz już że to wrecz wspaniała rzecz, jednak nadal nie wiesz jak to zrobić :P. Już to naprawiamy, oto kod:
{codecitation}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Przykład</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="arkusz.css">
</head>
<body>
<p class="mystyle">Ten tekst będzie czerwony</p>
<p>Ten bedzie miał domyślny kolor (najprawdopodobniej czarny)</p>
<p class="mystyle">Ten tekst także będzie czerwony będzie czerwony</p>
</body>
</html>{/codecitation}
W pliku arkusz.css umieszczamy np.:
{codecitation}body { background: yellow; }
p { color: black; } /* w większości przeglądarek to jest wartość domyślna */
p.mystyle { color: red; }{/codecitation}
Powyższy kod CSS jest pełnym kodem. Nie musisz w jakikolwiek sposób rozpoczynać kodu CSS w osobnym pliku. Sam kod CSS - bez nagłowków itp.
Sposób z osobnym plikiem jest sposobem zdecydowanie najlepszym. Czasem zdarza się, że pozostałe dwa sposoby są warte rozpatrzenia. Jednak zakładaj, że są złe (a wyjątki - ja zawsze - się zdarzą).
Read more
|
|
Zmieniony ( środa, 11 listopada 2009 16:40 )
|
|
|
Wpisał %s Patryk yarpo Jar
|
piątek, 18 września 2009 02:40
HTML/CSS
/ kurs HTML
|
|
Może najpierw czym jest warstwa? Mylnie możesz sądzić, że to jakaś folia. Choć przy odpowiednim użyciu stylów CSS można warstw używać jak "folii", to jednak ja proponuję abyś uważał warstwę [znacznik div] za "pojemnik" .
Przez pojemnik rozumiem prostokąt o jakichś rozmiarach, w którym możesz umieścić co tylko chcesz. Co więcej taki pojemnik sam z siebie ma niewiele cech.
W pojemniku możesz trzymać jakbłka, truskawki, proszek do prania albo częsci rowerowe. Chodzi o to, że dzięki pojemnikowi są one zebrane razem. Nie zyskują nagle jakichkolwiek właściwości "dziedziczonych" z pojemnika.
Pamiętaj - prostokąt.
Przeróbmy zatem naszą stronę `index.htm', w taki sposób, aby pewne jej fragmenty powrzucać do pojemników.
{codecitation}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Moja pierwsza strona!</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
<div id="wrapper">
<div id="top">
<h1>To jest moja pierwsza strona!</h1>
</div>
<div id="menu">
<ul>
<li><a href="index.htm" title="Przejdź do strony głównej">home</a></li>
<li><a href="kontakt.htm" title="Skontaktuj się ze mną">kontakt</a></li>
</ul>
</div>
<div id="content">
<p>Tu umieść jakiś krótki wstęp.</p>
<p>Jeśli chciałbyś się ze mną skontaktować, to zajrzyj na stronę <a href="kontakt.htm">kontaktu</a>.</p>
</div>
</div>
</body>
</html>{/codecitation}
Jak widzisz mamy 4 pojemniki (warstwy):
wrapper
top
menu
content
Nazwy same mówią o tym, do czego mają służyć. Tak naprawdę, jeśli nie wykorzystuje się stylów CSS to warstwy bardzo niewiele dają.
Spokojnie - i do CSS dojdziemy w tym kursie (jako, że to kurs HTML, potraktujemy CSS bardzo pobieżnie, ale zawsze czegoś się nauczysz).
Zauważ, że tak naprawdę to niczego nie zmieniło na razie w sposobie prezentacji danych na stronie. Warstwy (znaczników div) używa się po to, aby pogrupować treść na stronie. Same z siebie niewiele formatują. Do tego służy CSS.
Teraz zapewne jesteś totalnie skołowany :P Spokojnie - w dalszej części się wszystko wyjaśni.
Zadanie dla ciebie:
Wprowadź podobną strukturę na stronie `kontakt.htm'
Read more
|
|
Zmieniony ( środa, 11 listopada 2009 16:40 )
|
|
|
Wpisał %s Patryk yarpo Jar
|
piątek, 18 września 2009 02:39
HTML/CSS
/ kurs HTML
|
|
Na poprzedniej lekcji zrobiłem delikatny wstęp teoretyczny do tabel. Teraz czas je wykorzystać w praktyce.
Użyjemy tabeli na stronie kontaktu, prezentując w niej urojone (po prostu wymyślimy jakieś liczby) statyski.
{codecitation}<!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>
<ul>
<li><a href="index.htm" title="Przejdź do strony głównej">home</a></li>
<li><a href="kontakt.htm" title="Skontaktuj się ze mną">kontakt</a></li>
</ul>
<p> <a href="mailto:zdzisio(a)serwer.pl">zdzisio(a)serwer.pl - napisz</a><br>
tel. 99887766</p>
<table>
<tr>
<td>Odebranych maili: </td>
<td>2,3 mln</td>
</tr>
<tr>
<td>Odebranych telefonów: </td>
<td>2 057</td>
</tr>
</table>
<!-- tu był link do strony głównej.
wyrzuciłem, skoro mamy już menu -->
</body>
</html>{/codecitation}
Oczywiście dane wzięte z sufitu. Ale tu nie chodziło o wiarygodność, a o przykład.
Być może zauważyłeś ten zapis:
{codecitation}<!-- jakaś treść -->{/codecitation}
Jest to komentarz. Nie ma on wpływu na strukturę strony. Nie ma on także żadnej reprezentacji graficznej. Jest to tylko informacja dla osoby przeglądającej kod. Jeśli wyświetlisz stronę w przeglądarce, nie zobaczysz ani śladu komentarza.
Read more
|
|
Zmieniony ( środa, 11 listopada 2009 16:39 )
|
|
|
Wpisał %s Patryk yarpo Jar
|
piątek, 18 września 2009 02:38
HTML/CSS
/ kurs HTML
|
|
Historia tabel w tworzeniu i kształtowaniu internetu z pewnością w przyszłości dorobi się setek publikacji. Ja w tym kurise postaram się podejść do tego tak, jak nalezy do tego podchdozić dzisiaj.
Spróbuję nie przesadzić w żadną ze stron - nie stawać ani po stronie webmasterw, którzy najchętniej w ogóle wyrzuciliby tabele na śmietnik (ah, nie bądźmy tacy srodzy, tabela czasem są bardzo przydatne). Nie stanę jednak także po stronie tych, którzy tabel używaliby do wszystkiego - otwieram lodówkę, a tam zamiast margaryny - tabelka.
Tabele służą do danych tabelarycznych. Choć są też niezwykle wygodnym (i bardzo niewłaściwym) narzędziem do formatowania treści na stronie.
Opisanie wszystkich za i przeciw stworzyłoby pokaźny artykuł, a może i nawet książkę. Przyjmijmy zatem, że zanim użyjesz tabeli zadasz sobie pytanie - czy gdybym to robił na kartce papieru, także rysowałbym tabelę? Jesli rysowałbyś, to użyj tabeli na stronie. Jeślnie nie - to wymyśl coś innego.
Dobrze, ale rozgadałem się o tym, aby tabel nie używać, a nawet nie zdążyłem pokazać czym są. Tabele składają się z wierszy, a każdy wiersz ma komórki:
{codecitation}<table>
<tr>
<td>1</td>
<td>2</td
</tr>
</table>{/codecitation}
Taki kod stworzy małą tabelę. Zawiera ona jeden wiersz (jeden znacznik tr) oraz dwie komórki w tym wierszu.
Gdybyśmy chcieli umieścić więcej wierzy, należałoby dodać więcej tr:
{codecitation}<table>
<tr>
<td>wiersz 1, komórka 1</td>
<td>wiersz 1, komórka 2</td
</tr>
<tr>
<td>wiersz 1, komórka 1</td>
<td>wiersz 2, komórka 2</td
</tr>
</table>{/codecitation}
Oczywiście jeśli dodałbyś jeszcze więcej komórek do wiersza to tabela miałaby więcej kolumn. Pamiętaj jednak, aby liczba komórek w wierszach była stała. Jeśli w jednym wierszu masz 3 komórki to wszystkie wiersze powinny mieć 3 komórki. Tak naprawdę można tworzyć nieregularne tabele. Ale to jest już torchę wyższa szkoła jazdy. Do tematu powrócę niedługo. Teraz zapraszam do kolejnej lekcji - wykorzystamy tabele w naszym projekcie!
Read more
|
|
Zmieniony ( środa, 11 listopada 2009 16:39 )
|
|
|
Wpisał %s Patryk yarpo Jar
|
piątek, 18 września 2009 02:38
HTML/CSS
/ kurs HTML
|
|
Listy są dosyć często spotykanym, elementem w życiu codziennym - lista przebojów, zakupów, transferowa.
Jest to jakaś struktura, w której prezentuje się dane. Widaomo, że są one ze soą jakoś powiązane. Listę łatwo odczytać (sprawdzanie obecności), jest czytelna (wszelkie wyniki egzaminów są publikowane na listach).
Jak więc stworzyć listę na stronie www?
Służy do tego zestaw znaczników:
{codecitation}<ul>
<li>Pierwsza pozycja na liście</li>
<li>Druga pozycja na liście</li>
</ul>{/codecitation}
Całą listę obiejmujemy między znaczniki ul (istnieje też znacznik ol dla list numerowanych. Jednak nie będę się nimi tu zajmował). Każda pozycja na liście występuje między znacznikami li.
Gdzie na naszej stronie możemy użyć listy? Nadal nie mamy menu. Zróbmy je:
{codecitation}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Moja pierwsza strona</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
<h1>Witam na mojej pierwszej stronie</h1>
<ul>
<li><a href="index.htm" title="Przejdź do strony głównej">home</a></li>
<li><a href="kontakt.htm" title="Skontaktuj się ze mną">kontakt</a></li>
</ul>
<p>Tu umieść jakiś krótki wstęp.</p>
<p>Jeśli chciałbyś się ze mną skontaktować, to zajrzyj na stronę <a href="kontakt.htm">kontaktu</a>.</p>
</body>
</html>{/codecitation}
Póki co wygląda to jakoś dziwnie i niezgrabnie. Póki co uczysz się tworzenia struktury dokumentu. Wygląd pozostawiamy sobie na deser :). Ale i nim się zajmiemy.
Zadanie dla ciebie wstaw taką samą listę menu na stronę kontaktu. Podpowiedź: po prostu skopiuj kod i wklej go w odpowiednie miejsce.
Zapraszam dalej.
Read more
|
|
Zmieniony ( środa, 11 listopada 2009 16:39 )
|
|
|
Wpisał %s Patryk yarpo Jar
|
piątek, 18 września 2009 02:37
HTML/CSS
/ kurs HTML
|
|
Na naszej stronie ciągle jeszcze czegoś brakuje... Grafiki!
Już naprawiamy. Do wstawiania grafiki służy znacznik:
{codecitation}<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">{/codecitation}
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:
{codecitation}<!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>{/codecitation}
Być może zastanawiasz się, co to znaczy:
{codecitation}src="img/kontakt.jpg"{/codecitation}
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.
Read more
|
|
Zmieniony ( środa, 11 listopada 2009 16:39 )
|
|
|
Wpisał %s Patryk yarpo Jar
|
piątek, 18 września 2009 02:35
HTML/CSS
/ kurs HTML
|
|
Internet nie byłby tym, czym jest, gdyby nie hiperłącza pozwalające połączyć wiele dokumentów w jedną stronę www.
Musisz wiedzieć, że gdy klikasz w jakiś link (zakładamy, że mamy do czynienia z prostą stroną napisaną w HTML) to zostaje wczytany osobny dokument.
Załóżmy, że mamy dwa dokumenty:
`index.htm' (tak nazywa się zwyczajowo pierwszy dokument witryny www)
`kontakt.htm'
Jeśli chcemy, aby na stronie index.htm znalazł się link do strony kontakt.htm to musimy w sekcji body wstawić taki kod:{codecitation}<a href="kontakt.htm" title="Skontaktuj się ze mną!">kontakt</a>{/codecitation}
Tak wyglądałby zatem cały kod z poprzedniej strony:
{codecitation}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Moja pierwsza strona</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
<h1>Witam na mojej pierwszej stronie</h1>
<p>Tu umieśc jakiś krótki wstęp.</p>
<p>Jeśli chciałbyś się ze mną skontaktować, to zajrzyj na stronę <a href="kontakt.htm">kontaktu</a>.</p>
</body>
</html>{/codecitation}
I teraz stwórzmy plik `kontakt.htm'. Możesz albo skopiować plik `index.htm' i zmienić mu nazwę, albo stworzyć nowy plik tekstowy i nadać mu odpowiednią nazwę. Gdy już posiadasz taki plik. Otówrz geany i umieść w tym pliku taki kod:
{codecitation}<!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> <a href="mailto:zdzisio@serwer.pl">zdzisio@serwer.pl - napisz</a><br>
tel. 99887766</p>
<p><a href="index.htm">Powrót do strony głównej</a></p>
</body>
</html>{/codecitation}
W powyższym kodzie widać, że w adresie podanym w atrybucie href występuje `mailto:'. Nakazuje to przeglądarce przekierować link na program pocztowy.
W ten sposób mamy 2 oddzielne pliki: stronę główną (`index.htm') i kontakt (`kontakt.htm'). Read more
|
|
Zmieniony ( środa, 11 listopada 2009 16:38 )
|
|
Strona 11 z 13
<< Początek < Poprzednia 11 12 13 Następna > Ostatnie >>
|
English
Arabic
Bulgarian
Croatian
Czech
Danish
Dutch
Finnish
French
German
Greek
Hindi
Italian
Japanese
Korean
Norwegian
Polish
Portuguese
Romanian
Russian
Spanish
Swedish
Catalan
Filipino
Hebrew
Indonesian
Latvian
Lithuanian
Serbian
Slovak
Slovenian
Ukrainian
Vietnamese
Albanian
Estonian
Galician
Hungarian
Maltese
Thai
Turkish
Persian
Afrikaans
Malay
Swahili
Irish
Welsh
Belarusian
Icelandic
Macedonian
Yiddish
Armenian
Azerbaijani
Basque
Georgian
Haitian Creole
Urdu
Chinese (S)
Chinese (T)
