To jest tekst i obrazek w jednej linii
Obrazek i tekst wypośrodkowane.
Więc chcesz zrobić swoją stronę internetową, ale nie masz o tym zielonego pojęcia. Nie szkodzi. To nie takie trudne. Oczywiście, opanowanie tej umiejętności w stopniu "profesjonalnym" wymaga czasu, ale gwarantuję Ci, że po 15 minutach spędzonych tu, ze mną, będziesz w stanie zrobić swoją pierwszą stronę.
Oczywiście, zawsze można "pójść na łatwiznę" i użyć programu, który pozwoli na zbudowanie strony bez znajomości kodów HTML, takich jak na przykład Netscape Composer lub Microsoft Word (Save As HTML). Ale o tym nie będę tutaj mówił.
HTML polega na wplataniu w tekst specjalnych kodów, które mówią o tym, w jaki sposób stronę pokazać w przeglądarce. Przeglądarka rozpoznaje te kody. Aby przeglądarka wiedziała, że dokument zawiera kody HTML, musi on zaczynac sie od wpisania <HTML> na samym początku tekstu. Wygodną rzeczą jest fakt, że struktura dokumentu html jest dość łatwa. Ja na przykład mam taki swój prosty wzorzec, pusty dokument, zawierający to wszystko, co musi się w nim znaleźć i zawsze od tego zaczynam. Podam Ci przykład i objaśnię, co jest co:
<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset="iso-8859-2"> <TITLE>Tu będzie tytuł strony</TITLE> </HEAD> <BODY BACKGROUND="moje_tło.jpg"> Tu będzie treść mojego dokumentu. </BODY> </HTML>
Mój dokument HTML to wszystko, co znajduje się między kodami <HTML> a </HTML>. Chyba łatwo zauważyć, że większość tych kodów występuje "parami" - pierwszy nazywany jest kodem "otwierającym" a drugi, z "/" na początku - "zamykającym". To coś, jak nawiasy, albo cudzysłów.
Dokument HTML składa się z dwóch części - nagłówka (HEAD) i treści (BODY). W nagłówku umieszczamy tytuł strony (który wyświetla się w górnym pasku ramki okienka przeglądarki, oraz dodatkowe informacje dla przeglądarki, np. w jakim języku napisana jest treść strony. W moim dokumencie, kod <meta (...) charset="iso-8859-2"> mówi przeglądarce, aby użyć polskiej czcionki do pokazania tekstu.
Treść dokumentu musisz umieścić pomiędzy kodami <BODY> i </BODY>. W moim przykładzie, kod <BODY> zawiera również informację o pliku graficznym do wyświetlenia jako tło strony. Zamiast parametru BACKGROUND można użyć BGCOLOR, w tym wypadku zamiast pliku z grafiką jako tło użyty będzie jednolity kolor (na przykład BGCOLOR="orange").
Prawda, że to proste? Dodatkową ciekawostką jest fakt, że zawsze można "podejrzeć", jak inni zrobili swoje strony - np. w Netscape, w menu "View" jest pozycja "Page Source", która pokazuje kody HTML składające się na oglądaną stronę.
I jeszcze jedna uwaga na początek. Kody HTML mogą być pisane dużymi albo małymi literami - nie ma różnicy. Należy jedynie zwracać uwagę na nazwy plików, na przykład plik grafiki z tłem strony - tu duże i małe litery mają znaczenie.
Możesz użyć dowolnego edytora, który zapisuje "czysty" tekst. Na przykład Notepad. Co prawda, Notepad ma brzydki zwyczaj dodawania rozszerzenia .txt do wszystkich plików, a Ty potrzebujesz zapisać plik z rozszerzeniem .html. Ja mam dwa ulubione, bezpłatne edytory tesktu, można je znaleźć na internecie: PFE, Programmer's File Editor (dostępny pod http://www.lancs.ac.uk/people/cpaap/pfe/) oraz Arachnophilia (dostępny pod http://www.arachnoid.com/arachnophilia/).
Po wpisaniu treści swojej strony i wyświetleniu jej w przeglądarce, zauważysz na pewno, że tekst ułożony jest zupełnie inaczej, niż przy wpisywaniu. Gdzie się podziały odstępy, nowe linie i paragrafy? Okazuje się, że przeglądarka ignoruje te rzeczy. A to dlatego, że do formatowania tekstu używamy kodów HTML. W ten sposób, możesz wpisać tekst "jak leci", bez uważania na odstępy i nowe linie. Do pokazania przeglądarce, jak chcesz, żeby tekst był wyświetlony, użyjesz kodów HTML. To też jest proste. Aby fragment tekstu tworzył paragraf, należy umieścić go pomiędzy kodami <P> oraz </P>. Jeśli chcesz zakończyć linię tekstu, użyj kodu <BR>.
UWAGA: kod <BR> jest jednym z niewielu kodów, który nie ma zamykającego "bliźniaka". Nie opisuje on bowiem fragmentu tekstu, a tylko mówi, że należy w tym miejscu złamać linię.
Oto przykład:
To jest tekst, który będzie wyświetlony jednym ciągiem, niezależnie od moich odstępów i końców linii. <P>Ten tekst wyświetli się jako jeden paragraf.</P> <P>A to już drugi paragraf</P> <BR> Tu jest<BR>nowa linia.A tak to wygląda w przeglądarce:
Ten tekst wyświetli się jako jeden paragraf.
A to już drugi paragraf
Tu z pomocą przyjdzie nam kod <FONT>. Ten kod wymaga podania parametrów czcionki do zastosowania we fragmencie tekstu pomiędzy kodami <FONT> a </FONT>. Aby zmienić kolor tekstu na zielony, wystarczy podać: <FONT COLOR="green">. Możesz użyć dowolnych nazw podstawowych kolorów (po angielsku), lub podać kolor jako tzw. kod RGB. Ale o tym później - na razie niech nam wystarczą kolory postawowe.
Rozmiar czcionki można zmienić poprzez podanie parametru SIZE: <FONT SIZE="+1"> zwiększy tekst o jeden rozmiar. Tekst można zwiększać, zmniejszać, lub podać absolutny rozmiar w punktach (bez znaku + albo -). Oczywiście w jednym kodzie FONT można podać oba parametry - kolor i rozmiar. Oto przykład:
To jest zwykły tekst<BR> <FONT COLOR="green" SIZE="+1">To jest tekst na zielono, powiększony o jeden rozmiar</FONT><BR> <FONT COLOR="magenta" SIZE="+3">Duży tekst w kolorze...hmmm...różowym?</FONT><BR> <FONT SIZE="-2"> Tekst zmniejszony bez "kolorowania"</FONT>A tak to wygląda "w praniu":
Oczywiście, jest jeszcze całe mnóstwo rzeczy. Ale tylko trzy rzeczy pozostały w tej lekcji, aby Twoja strona mogła zawierać wszystko, co internetrowe strony zwykle zawierają. Są to:
Aby wycentrować fragment tekstu, użyj kodów <CENTER> oraz </CENTER>. Bez nich tekst jest równany do lewej strony. Wygląda to tak:
To jest tekst równany do lewej strony<BR> <CENTER> Ten tekst jest pośrodku<BR> </CENTER> A ten znów z lewej.<BR>
Umieszczenie grafiki na stronie wymaga użycia kodu IMG. Parametrem podstawowym jest tu SRC, który wskazuje na nazwę pliku z grafiką do włączenia do strony. Robi się to tak:
To jest linia tekstu poprzedzająca obrazek<BR> <IMG SRC="cttequila_e0.gif"><BR> To jest tekst i obrazek w jednej linii <IMG SRC="angel.gif"><BR> <IMG SRC="baby_pissing.gif" ALIGN="middle"> Obrazek i tekst wypośrodkowane.
A to efekt końcowy:
To jest linia tekstu poprzedzająca obrazek
To jest tekst i obrazek w jednej linii
Obrazek i tekst wypośrodkowane.
Zauważ parametr ALIGN występujący przy trzecim obrazku. Bez niego tekst i obrazek wyrównywany jest do "podstawy".
Ostatnią rzeczą, ale badzo ważną, jest umieszczanie odnośników do innych stron. Mogą to być odnośniki do kolejnych "kartek" Twojej strony internetowej, "lokalnych", lub stron "zewnętrznych" - stron przyjaciół, znajomych, itp. Można także umieszczać odnośniki do poczty elektronicznej.
Odnośniki wskazuje się poprzez kod A HREF. Tak naprawdę, to A jest kodem odnośnika (od słowa ANCHOR), ale to też temat na późniejsze lekcje. Na razie musisz wiedzieć, że A HREF jest potrzebny, aby podać odnośnik do innego pliku HTML lub strony internetowej. Ten kod działa trochę inaczej, niż te, o których mówiliśmy do tej pory. Powoduje on, że treść aktualnego dokumentu HTML zastąpiona będzie w przeglądarce nowym dokumentem, tym wymienionym w odnośniku. W kodzie tym musisz podać adres nowego dokumentu oraz nazwę. Adres jest niewidoczny i służy przeglądarce do znalezienia pożądanego dokumentu. Nazwa jest wyświetlana na niebiesko z podkreśleniem i po kliknięciu na niej myszką ładuje nowy dokument. Przejdźmy do przykładów:
Oto przykład <A HREF="przyklad.html">lokalny</A>. Słowo "lokalny" wskazuje na dokument <I>przyklad.html</I><BR> Można też tak: <A HREF="przyklad.html">przyklad.html</A>. W tym przypadku nazwa jest taka sama jak adres.<BR> <BR> Odnośnik do strony zewnętrznej: <A HREF="http://www.tucows.com">Doskonałe archiwum programów komputerowych</A><BR> Oczywiście, jeśli chcesz, żeby adres był widoczny: <A HREF="http://www.tucows.com">http://www.tucows.com</A><BR> <BR> Odnośnik do poczty e-mail: <A HREF="mailto:[email protected]">Autor</A>. Po prostu słowo <B>mailto</B> oraz adres poczty po dwukropku.<BR>
A tak to wygląda w przeglądarce:
Oto przykład lokalny. Słowo "lokalny" wskazuje na dokument przyklad.html
Można też tak: przyklad.html. W tym przypadku nazwa jest taka sama jak adres.
Odnośnik do strony zewnętrznej: Doskonałe archiwum programów komputerowych
Oczywiście, jeśli chcesz, żeby adres był widoczny: http://www.tucows.com
Odnośnik do poczty e-mail: Autor. Po prostu słowo mailto oraz adres poczty po dwukropku.
I to by było na tyle w lekcji pierwszej. Są to informacje minimalne, niemniej jednak pozwalają na samodzielne zbudowanie swojej Pierwszej Strony Internetowej. Chętnie przeczytam Twoją opinię o tym materiale.
