Część 1 – Podstawy
Jak już pisałem, zajmiemy się na tym kursie stworzeniem własnej strony, coś w charakterze bloga. Ponieważ do bloga potrzebne jest używanie bardziej zaawansowanych języków php i MySQL, póki co zajmiemy się bardziej statyczną stroną domową w samym html-u i css.
Na początku będziemy pracować tylko na własnym komputerze. Jednak jak już strona nabierze kształtu nauczymy się jak przesłać, a wcześniej założyć konto na serwerze i opublikować własną witrynę.
A więc otwieramy notatnik (na pierwszą lekcję wystarczy) i zaczynamy. Na początek musimy wstawić deklarację zgodności. Chodzi o to aby przeglądarki wiedziały w jakim tak naprawdę języku piszemy i w zgodzie z jakimi regułami. Ponieważ powstało kilka kolejnych wersji html i nowsze xhtml, trzeba jasno zadeklarować czym my będziemy się posługiwać 🙂 A więc wstawiamy w pierwszej linijce poniższą linijkę (wystarczy skopiować):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
To po prostu odnośnik do odpowiedniej strony, skąd przeglądarka pobiera deklarację. Dodajemy to na początku każdego pliku html. Trzeba o tym pamiętać, bo bez tego przeglądarka może trochę się gubić na naszej stronie.
Mamy deklarację to czas na dokument właściwy. Rozpoczynamy od znacznika <html> który mówi przeglądarce że strona jest właśnie dokumentem html. Cała zawartość strony musi być pomiędzy znacznikiem <html> , a zamykającym </html>. Przy okazji warto wspomnieć, że jeśli chcemy pisać zgodnie ze standardami i mieć dobry kod , musimy pamiętać o zamykaniu każdego otwartego znacznika. Wprawdzie dzisiejsze przeglądarki umieją same domykać niedomknięte znaczniki ale warto robić to samemu, gdyż czasem to może spowodować poważne błędy w wyświetlaniu strony. Najlepiej wyrobić sobie nawyk wpisywania od razu obu znaczników (otwierającego i zamykającego) i potem pisać między nimi.
Znaczniki działają jak swego rodzaju pudełka. Zamykają w sobie tekst lub inne znaczniki i tylko na, rzeczach zamkniętych w pudełku (czyli miedzy znacznikami) wykonują jakieś działania. W tym wypadku w takim pudełku zamykamy całą stronę. Pudełko się zwie html więc tworzymy coś takiego :
</html>
Po znaczniku zamykającym </html> nie możemy już nic wpisywać bo przeglądarka nie potraktuje to jako części naszej strony. Po prostu znaczniki <html> definiują obszar całej strony.
No dobrze obszar mamy zdefiniowany czas na pewne podstawowe czesci witryny. Zdefiniujemy teraz obszar nagłówka. Nie będzie on właściwie widoczny na samej stronie, ale będzie stanowił ważną częśc naszej strony, przydatną nie tylko przeglądarce ale i wyszukiwarkom. Tak więc wpisujemy między znaczniki <html> kolejny (w podglądzie kodu będę pogrubiał kod który został dodany jako nowy, tak aby było widać czym się różni od poprzedniego):
<head>
</head>
</html>
<head>
<title>Strona domowa</title>
</head>
</html>
Tekst między znacznikiem <title> definiuje po prostu tytuł strony. To ważna cześć każdej strony bo to właśnie ten tekst widzimy w przeglądarce na pasku tytułu. W przypadku mojego bloga jest to np. The Sunrise. W naszym przypadku przeglądarka wyświetli Strona domowa. Oczywiście ten tekst może być dowolny. Całość między <title> a </title> będzie potraktowane jako tytuł. Nie warto jednak przesadzać z długością po za długie tytuły przeglądarka zwyczajnie przycina.
Tytuł jest też ważne dla wyszukiwarek takich jak choćby Google czy Onet. W wynikach wyszukiwania wyświetlany jest właśnie nasz tytuł 🙂
Teraz należałoby zadeklarować jakiego właściwie języka używamy na stronie:
<head>
<title>Strona domowa</title>
<meta http-equiv="Content-Language" content="pl" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
</head>
</html>
Znowu trochę zagmatwany kod ale też znów można go spokojnie przekopiować, bo na każdej stronie będziemy używać takiego właśnie kodu. Pierwsza dodana linijka mówi przeglądarce że piszemy w języku polskim a druga deklaruje kodowanie znaków jakie używamy. Ta druga jest szczególnie ważna bo bez niej nie mielibyśmy polskich znaków na stronie. UWAGA znaczniki te nie wymagają znacznika zamykającego. To są jakby dwa w jednym. Jak można zauważyć na końcu mamy /> co mówi przeglądarce ze to koniec znacznika. Jest jeszcze kilka znaczników które nie wymagają zamknięcia.
W nagłówku powinny być jeszcze inne znaczniki ale w tej chwili nie będą nam potrzebne. Potem do nich wrócimy. Czas zamknąć nagłówek (jeśli jeszcze tego nie zrobiliście. W kodzie przeze mnie pokazanym jest już zamknięty.) i zdefiniować obszar właściwej strony:
<head>
<title>Strona domowa</title>
<meta http-equiv="Content-Language" content="pl" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
</head>
<body> </body>
</html>
<h1>Witam na mojej stronie</h1>
<p>Witam na mojej stronie domowej. Mam nadzieję, że wam się spodoba</p>
</body>
Kolejnym użytym przez nas znacznikiem jest <p></p>. Definiuje on akapit. Tekst między tym znacznikiem będzie odsunięty od góry i od dołu od innych elementów. No dobrze ale warto by zobaczyć jak wygląda już nasza strona. Klikamy zatek w notatniku na Plik ->zapisz jako i wpisujemy index.html. To ważne aby nasz plik miał takie właśnie rozszerzenie – html. Bez tego przeglądarka nie rozpozna tego jako strony www. Aby obejrzeć utworzony plik otwieramy go po prostu w przeglądarce. Powinniśmy uzyskać efekt podobny do tego:
Elo;) No jak narazie te informacje duzo mi pomogły;) wielkie dzieki;) jestem w tym trochę"zielona" a potrzebna mi taka stronka do szkoły.. więc czekam na kolejną część;)) mam nadzieje że sie już niedługo pojawi;)))
Kiedy pojawi sie kolejna część??
Następna część pojawi się 15-16 stycznia.