Embed Size (px)
Citation preview
Kurs Html dla początkujących
Nazywam się Małgorzata Jaskłowska, od ok. 10 lat pracuje jako webdesigner. Tworzenie stron
Małgorzata Jaskłowska http://sekretystronwww.pl, http://zdrowienatopie.pl
www, blogow jest moją pasją. Mam kilka własnych stron www i blogów:http://sekretystronwww.plhttp://zdrowienatopie.plhttp://kocidom.waw.pl Moje kursy online:
Multimedialny blog
Jak łatwo przygotować zdjęcia dla twojego bloga
Małgorzata Jaskłowska http://sekretystronwww.pl, http://zdrowienatopie.pl
Spis treści:Tworzenie strony www w html
Tworzenie strony www w htmlZ czego składa się strona www
Jakie elementy zawiera strona wwwJak wygląda szkielet strony www
Z czego składa się szkielet strony wwwCo będzie potrzebne aby stworzyć stronę wwwTekst na stronie www
Znaczniki blokoweZnaczniki linioweSeparatory - znaczniki, które oddzielają tekst i tworzą pustą linieInne znaczniki
LinkiObrazki, zdjęciaKomentarzeNagłówek strony www czyli <head> </head>Zakończenie
Małgorzata Jaskłowska http://sekretystronwww.pl, http://zdrowienatopie.pl
Tworzenie strony www w htmlCzym jest język html? Jest to język który opisuje wygląd zewnętrzny strony internetowej. Czy przy pomocy tego języka można stworzyć stronę www - odpowiedź brzmi i tak i nie. Obecnie html/css właściwie nie służy do tworzenia stron. Raczej służy do projektowania wyglądu zewnętrznego strony, szaty graficznej, motywów tzw. skórek. Strona taka będzie stroną statyczną. Obecnie żyjemy w dobie Web 2.0, która ponoć się zbliża do końca ale jeszcze się nie skończyła. Jaka jest różnica między Web 1.0 a Web 2.0? Strony internetowe Web 1.0 były (i są nadal) tworzone przez webdesignerów, zaś użytkownicy mogli je oglądać czyta i nic więcej. Taką stronę można zrobić przy pomocy html/css. Web 2.0 są to strony, w którzch tworzeniu aktywnie biorą udział użytkownicy. Po zalogowaniu sie użytkownik może dodać własną treść do strony. Są to takie serwisy jak:
● media społecznościowe jak Facebook lub YouTube, ● social bookmarking np. wykop.pl gdzie ludzie dodają ciekawe linki● blogi gdzie oglądający mogą wpisywać własne komentarze● i różne inne
Takie strony muszą być oparte o oprogramowanie działające na serwerze, przeważnie napisane w języku php. W tym przypadku html/css tylko tworzy szatę graficzną takiej strony. Dlatego obecnie aby posiadać własną stronę www nie trzeba się uczyć html/css. Wystarczy ściągnąć i zainstalowac oprogramowanie np. wordpress, joomla lub inne.
Tworzenie strony www w html Aby stworzyć stronę www wystarczy ją napisać w zwykłym notatnku windows przy pomocy języka html. Strona www posiada tzw. źródło - czyli zwykły plik tekstowy, który musi być zapisany z rozszerzeniem .htm lub .html aby przeglądarka odczytała go i wyświetliła jako stronę www. Żeby się zorientować o co chodzi otwórz sobie dowolną stronę www np. w przeglądarce google chrome, następnie kliknij gdziekolwiek prawym przyciskiem myszy i z opcji, które się pojawią wybierz “wyświetl źródło strony”.Zobaczysz wtedy zwykły plik tekstowy, w którym tekst otoczony jest różnego rodzaj znacznikami znajdującymi się w znakach < >. Znaczniki te opisują jak ma wyglądać
Małgorzata Jaskłowska http://sekretystronwww.pl, http://zdrowienatopie.pl
tekst na stronie www. Prócz tego znaczniki nic nie robią, tylko mówią przeglądarce jak ma wyświetlać dany tekst lub obrazek. Ok, od razu zacznijmy eksperymentować. Nie musisz na razie korzystać z serwera, gdyż zwykłą stronę w html możesz zrobić i obejrzeć na dysku. Wystarczy do tego jakiś edytor tekstu - notatnik windows, edit pad, editpad++. W żadnym wypadku nie używaj Worda ani żadnego rozbudowanego edytora tekstu. Każdy plik tekstowy z rozszerzeniem .htm lub .html zostanie uznany przez przeglądarkę za stronę www i poprawnie odczytany. Strony internetowe mogą mieć też rozszerzenie .php ale są to strony korzystające z oprogramowania napisanego w języku php. To oprogramownanie działa na serwerze, dlatego aby taką stronę wyświetlić musisz ją przesłać na serwer obsługujący php lub zainstalować na dysku specjalne środowisko imitujące serwer. Ale to nie jest tematem tego kursu. Cwiczenie 1Otwórz notatnik windows, utwórz nowy plik, wpisz w nim cokolwiek np. ala ma kota i zapisz go pod nazwą jakąkolwiek np. index z rozszerzeniem .htm. A teraz otwórz tę stronę w jakiejś przeglądarce. Strona się pojawia i jest na niej twoje zdanie. A teraz wklej do tego pliku jakiś większy tekst - zrób ładne odstępy miedzy wierszami, zapisz i obejrzyj ponownie. Tekst jest zbity, bez żadnych akapitów, odstępów itp. I teraz widzisz do czego są potrzebne znaczniki html/css. Aby tekst ładnie sformatować, zrobić akapity, odstępy, listy punktowane, pogrubienia, kolory itp potrzebne są znaczniki html/css. Wygląda to tak, że każdy fragment tekstu, ,który chcemy sformatować, musi być otoczony znaczkami. Czyli musi mieć na początku i na końcu znaczniki. Przeglądarka będzie wiedziała, że tekst od znacznika początkowego do znacznika końcowego ma się wyświetlić tak jak tego wymaga dany znacznik. <znacznik> ala ma kota </znacznik> Znaczkiki otoczone są < >, zaś końcowy znaczkim ma jeszcze ukośnik </ >.
Małgorzata Jaskłowska http://sekretystronwww.pl, http://zdrowienatopie.pl
Ćwiczenie 2Jakikolwiek fragment tekstu otocz znaczkami <b> a na końcu </b>Odśwież go w przeglądarce i zobaczysz że ten fragment jest pogrubiony. Znaczników html jest w gruncie rzeczy dość mało i praktycznie nie da sie zrobić ładnej strony tylko w samym html. Ponadto wraz z wejściem w życie css, wiele znacznikow wyszło z użycia. One jeszcze pokutują i przeglądarki czytają je, ale praktycznie nie powinno się ich używać. Co to jest css?Jest to język opisu znaczników! Każdy znacznik można bardzo dokładnie opisać. Obowiązuje zasada, że strona www musi zawierać tylko niezbędne elementy, zaś cały opis jej wyglądu znajduje się w osobnym pliku czyli stylach css. Do znaczników dodaje się klasy lub identyfikatory z jakąś nazwą. W pliku style.css te klasy lub idy są opisane. W ten sposób kod strony jest przejrzysty.
Z czego składa się strona wwwStrona www ma swój wygląd zewnętrzny, który widzimy w przeglądarce oraz źródło, które jest zwykłym plikiem tekstowym zawierającym elementy strony opisane znacznikami. Do tego dochodzi plik stylów oraz ewentualnie różne dodatkowe pliki oprogramowania, które tworzą stronę dynamiczną.
Jakie elementy zawiera strona wwwNa stronie www można umieścić:
● tekst + linki● obrazki + animacje np. flash● multimedia - dzwięk, filmiki itp - zdecydowanie lepiej umieszczać to na
Youtube, a na stronie tylko link do nich● skrypty
Jak wygląda szkielet strony wwwStrona www dzieli się na dwie części czyli haed i body i otoczona jest znacznikiem html.
Małgorzata Jaskłowska http://sekretystronwww.pl, http://zdrowienatopie.pl
Podstawowy szkielet strony wygląda tak: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Bez tytułu 1</title></head><body></body></html> Cwiczenie 3Skopiuj powyższy kod do swojego pliku index.htm tak aby tekst znalazł sie pomiędzy znacznikami <body> a </body>. Wyświetl stronę. Nic się nie zmieniło. Wygląda tak jak poprzednio. Ale jest to już prawdziwa strona www.
Z czego składa się szkielet strony www
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> - Doctype umieszcza się na początku kodu strony, określa jakim językiem jest zrobiona strona. Musi być na samym początku. Nie może być żadnego znaku ani spacji przed tym.
2. <html xmlns="http://www.w3.org/1999/xhtml"> - znacznik <html> i </html> otaczają całą stronę
3. <head> i </head> są wewnątrz znaczników <html> i stanowią nagłówek. Nie jest on wyświetlany i użytkownik tego nie widzi. Wewnątrz wstawia się różne informacje dla przeglądarki i dla wyszukiwarek.
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> - meta tag określjący kodowanie polskich liter
5. <title>Bez tytułu 1</title> - tylut strony. Jest to bardzo ważne, gdyż ten tytuł pokazuje się w wynikach wyszukiwania oraz na górnym pasku przeglądarki
1. </head> - kończący znacznik head2. <body> i </body> - właściwa część strony. To co znajduje się pomiędzy tymi
znacznikami zostanie wyświetlone przez przeglądarkę3. </html> - końcowy znacznik html
Co będzie potrzebne aby stworzyć stronę www
Małgorzata Jaskłowska http://sekretystronwww.pl, http://zdrowienatopie.pl
● Przeglądarka: IE, FireFox, Chrome, Avant browser, Opera - tworząc stronę www musisz zainstalować kilka przeglądarek (koniecznie 3 pierwsze) i porównać wygląd strony we wszystkich. Niestety może się on różnić i czasem wymaga sporo pracy doprowadzenie do stanu pożądanego - czyli takiego kiedy strona wygląda dokładnie tak samo we wszystkich przeglądarkach.
● Edytor tekstu - notatnik, notepad++ ● FTP - program, który przesyła pliki na serwer lub pobiera z serwera. Jednak stronę www
napisaną w html/css można otworzyć także na dysku komputera, dlatego na razie ftp nie będzie potrzebny
● program graficzny do zdjęć - pixlr, irfanview, gimp, photoshop - do zmniejszania i edytowania zdjęć
● coś do wstawienia na stronę czyli teksty oraz zdjęcia, grafiki - własne, darmowe lub płatne
Tekst na stronie www Jak już pisałam tekst bez znaczników pojawia sie na stronie www jako zbity blok tekstu. Żeby ten tekst ładnie sofrmatować mamy do dyspozycji znaczniki blokowe i liniowe. Znacznik wstawia się na początku i na końcu wyrazu, litery lub fragmentu tekstu, który chcemy sformatować. Znacznik końcowy ma ukośnik. np. <p> Ala ma kota </p> Znaczniki mogą się zagnieżdżać, to znaczy można wstawić jeden w drugi. np. <p> Ala ma <b>kota</b> </p>Tutaj zdanie jest w osobnym akapicie a w środku jest jeden pogrubiony wyraz. Ważne aby znaczników nie przeplatać. Błąd: <p> Ala ma <b>kota </p> </b> Znaczniki pisze się małymi literami.
Znaczniki blokowe Traktują one tekst jako blok czy akapit i wszystko co jest dalej przenoszą do nowej linii. Czyli po zamykającym znaczniku blokowym tworzy się nowa linia.
● znacznik akapitu p, div - <p> </p>, <div> </div> - jedyne co robią to traktują w środku jako akapit i kolejny tekst przenoszą do nowej linijki
● nagłówki czyli h1, h2, h3, h4, h5, h6 - są to znaczniki którymi oznacza się nagłówki tekstu. Znacznik ten powiększa tekst, pogrubia i to co jest dalej przenosi do nowej linijki.
Małgorzata Jaskłowska http://sekretystronwww.pl, http://zdrowienatopie.pl
Największy tekst daje h1, potem coraz mniejszy aż do h6. Nagłówki warto stosować ze względu na pozycjonowanie, gdyż wyszukiwarki odczytują tekst zawarty w znacznikach h jako ważny. Dlatego też warto aby ten tekst zawierał słowa kluczowe. Wstawia się je: <h1> </h1>
● hr - znacznik który tworzy poziomą linię, stosowaną do oddzielania elementów, wstawia się go <hr> </hr>
Znaczniki liniowe Nie przenoszą następnego tekstu do nowej linii.
● strong, b - służą do pogrubiania● span - ten znacznik sam w sobie nic nie robi. Jeśli chce się jakiś fragment tekstu
sformatować przy pomocy stylu używa się tego znacznika aby określić jaki to ma być tekst.
Separatory - znaczniki, które oddzielają tekst i tworzą pustą linie● <br /> - po prostu rozdziela tekst jedną linijką. O ile p wstawia nową linie, br tylko
przenosi do nowego wiersza● <hr> </hr> - tworzy linię pozioma, która rozdziela tekst
Inne znaczniki ● listy wypunktowane numerowane lub nienumerowane
lista nienumerowana <ul><li> rzecz 1 </li><li> rzecz 2 </li></ul>
lista numerowana <ol><li> rzecz 1 </li><li> rzecz 2 </li></ol>
● tabelki - służą do tworzenia tabel. Kiedyś tabelki służyły do budowania całego układu strony www, gdyż bardzo ładnie można było dzięki nim podzielić stronę na pionowe kolumny. Oczywiście nadal można to robić, gdy przeglądarka odczyta to poprawnie. Jednak jest to nie wskazane. Do tworzenia układu strony używa się div i styli. Ale o tym potem. Tabelek obecnie używa się zgodnie z przeznaczeniem do robienia tabel i zestawień.
Małgorzata Jaskłowska http://sekretystronwww.pl, http://zdrowienatopie.pl
● index górny dolny index górny <sup> </sup> np. 2 m<sup>2</sup>index dolny <sup> </sub> np. H<sup>2</sub>O
● spacja - przeglądarka czyta tylko jedną spację, czyli nie można sobie poprzesuwać tekstu spacjami. Aby dodać więcej spacji stosuj znak specjalny
● formularze - przy pomocy html można na stronie www wstawić najróżniejsze rodzaje formularzy
Ćwiczenie 4Po prostu wstaw sobie te znaczniki do swojego tekstu na swojej stronie i zobacz co się dzieje. Skopiuj sobie listę numerowaną i nienumerowaną.
LinkiLinki to jest główna idea stron www. Strony powinny łączyć się ze sobą linkami. Strona www składa się ze strony głównej i postron i podpodstron polączonych linkami. Link musi zawierać adres strony, żeby przeglądarka wiedziała gdzie ma tej strony szukać. Linki mogą być:
● względne - czyli zawierać tylko adres pliku. Stosuje się je do linków wewnątrz serwisunp. <a href=”jakasstrona.htm”> anchor text </a> - jeśli plik jakasstrona.htm jest w tym samym katalogu<a href=”katalog/jakasstrona.htm”> anchor text </a> - jeśli plik jakasstrona.htm jest w podkatalogu<a href=”../jakasstrona.htm”> anchor text </a> - jeśli plik jakasstrona.htm jest w katalogu nadrzędnym. Dwie kropki mowia że ma szukać o jeden katalog wyżej. <a href=”../katalog/jakasstrona.htm”> anchor text </a> - jeśli plik jakasstrona.htm jest w katalogu nadrzędnym i podkatalogu. Dwie kropki mowia że ma szukać o jeden katalog wyżej, a następnie wejść do jego podkatalogu.
● bezwzględne - zawierają adres serwera. Stosuje się do linków zewnętrznych. Wewnętrzne też można tak oznaczać jak ktoś chce. np. <a href=”http://www.jakasdomena.pl/katalog/jakasstrona.htm”> anchor text </a>
● kotwice - czyli link rowadzący do czegoś na tej samej stronie Anchor text - jest to tekst lub może też być obrazek, który jest klikalny. Po kliknięciu przechodzimy na inną stronę. Ważne jest aby jako anchor text używać słowa kluczowe.
Obrazki, zdjęciaNa stronie www można wstawić zdjecia w formatach .jpg, .gif, .png. Zdjęcia powinny być
Małgorzata Jaskłowska http://sekretystronwww.pl, http://zdrowienatopie.pl
raczej małe i warto je wykadrować. Obecnie łącza są tak dobre, że nie trzeba się martwić wielkością plików obrazkowych. Obrazek powinien być na tyle mały żeby mieścił się na stronie. W galeriach można dawać duże obrazki ale też nie tak duże żeby sie nie mieściły na ekranie i zmuszały oglądającego do przewijania w poziomie. Obrazek wstawiamy na stronę kodem: <img src=”obrazek.jpg” /> W cudzysłowach podajemy adres obrazka aby przeglądarka mogła go znaleźć. Tworzy się to tak samo jak w przypadku linków. Ważną rzeczą jest tekst alternatywny, który kiedyś służył do tego aby pokazywał się opis obrazka jeśli ktoś wyłączy wyświetlanie obrazków. Obecnie jest on ważny jeśli chodzi o pozcjonowanie stron. <img src=”obrazek.jpg” alt=”na tym obrazku jest costam” />
Komentarze Komentarz w kodzie jest to coś czego przeglądarka nie przeczyta i co nie pojawi się na stronie. Używa się go aby czasowo ukryć jakaś część strony. Głównym zadaniem komentarza jest dodawanie opisów kodu. Jeśli kod jest skomplikowanyi chcemy żeby ktoś inny go łatwiej odczytał stosujemy komentarze. <!-- ten teks nie pojawi się na stronie //-->
Nagłówek strony www czyli <head> </head>To wszystko co umieszcza się wewnątrz znaczników <head> </head> to są informacje dla przeglądarki, wyszukiwarek. Są to tzw. meta tagi. Jest ich dużo, różnych. Opiszę tu najważniejsze i najczęściej stosowane.
● kodowanie polskich znaków● odwołania do arkusza stylów● tytuł <title> </title> - bardzo ważny ze względu na pozycjonowanie, powinien być inny
dla każdej podstrony. Jest to tytuł, który pojawi się w wynikach wyszukiwania.● description czyli opis - pojawia się w wynikach wyszukiwania jako krótki opis strony
Zakończenie
Małgorzata Jaskłowska http://sekretystronwww.pl, http://zdrowienatopie.pl
Opisałam tu podstawowe znaczniki html. Niektóre, rzadziej używane, tylko wspomniałam, a nie których w ogóle nie wymieniłam, gdyż wyszły już z użycia. Jak widać przy pomocy html można zrobić stronę www ale będzie ona wyglądała bardzo ubogo. Html to podstawa, na której buduje się stronę przy pomocy styli. O stylach będzie w kolejnym poradniku. Obecnie, w zasadzie html/css służą do tworzenia szaty graficznej strony, motywów. Można przy pomocy html/css zrobić mini stronę składającą się ze strony głównej i paru podstron czy pojedyńczą squeeze page. Jednak aby stworzyć bardziej rozbudowaną stronę warto korzystać z gotowych systemów zarządzania treścią, napisanych w języku php, jak np. Wordpress lub joomla.
Małgorzata Jaskłowska http://sekretystronwww.pl, http://zdrowienatopie.pl
Dodatkowe źródła informacji:
Multimedialny blog
Jak łatwo przygotować zdjęcia dla twojego bloga Pierwsza strona internetowa w języku HTMLJak wstawić link na blog za pomocą kodu HTML (darmowy) Jak wstawić link graficzny na blog za pomocą kodu HTML (darmowy)Pozycjonowanie stron Tworzenie stron www w joomla Zarabiaj na stronie w joomla Strategie wygrzwania w sieci
Małgorzata Jaskłowska http://sekretystronwww.pl, http://zdrowienatopie.pl
