Kategorie: Porady, Programy, Tutoriale, Web design
Witam! Ten wpis rozpoczyna caÅ‚Ä… seriÄ™ artykułów dotyczÄ…cych tworzenia stron internetowych. Przeznaczony jest on dla osób, które chciaÅ‚yby zacząć przygodÄ™ z webmasterkÄ…. PoczÄ…tkowo zajmiemy siÄ™ podstawami jÄ™zyków – tj. xHTML oraz CSS. DziÄ™ki temu artykuÅ‚owi napiszesz swojÄ… pierwszÄ… stronÄ™ WWW, a w kolejnych częściach pokaże Ci jak jÄ… udoskonalić, nie tylko pod wzglÄ™dem użytecznoÅ›ci, ale również wizualnym.
Będziesz zaskoczony jakie to proste. Jestem pewien, że zawarte tu informacje okażą się przydatne, a Ty wkrótce stworzysz profesjonalną, zgodną ze standardami stronę internetową. Gotowy? Do dzieła!
Edytor tekstu
Tworzenie stron internetowych jest bardzo proste, można je pisać choćby w systemowym notatniku. IstniejÄ… także programy przygotowane do tworzenia stron, które wszystko zrobiÄ… za Ciebie – jednak w ten sposób niczego siÄ™ nie nauczysz. O wiele lepiej jest to robić w jakimÅ› dobrym edytorze tekstu. Daje to przede wszystkim peÅ‚nÄ… kontrolÄ™ nad kodem strony. Od poczÄ…tku mojej przygody z tworzeniem stron używaÅ‚em programu Notepad++, dlatego też i Tobie polecam ten program. Niech nie zmyli CiÄ™ fakt, że jest on darmowy – to dodatkowa zaleta zaraz po wszechstronnoÅ›ci.
Po ściągnięciu Notepada zainstaluj go i uruchom. Kliknij: Język > H > HTML. Zaznacz także przycisk Zawijaj wiersze.
Zrobione? To zaczynamy!
Ogólna struktura
Plik .html przedstawia się następująco:
O co chodzi? Już śpieszę z wytłumaczeniem. Kolor niebieski to wszelkie znaczniki otwierające i zamykające daną sekcję (<html> i </html>, <head> i </head> itd.), zielony to tylko komentarze w kodzie, nie są wyświetlane na stronie, służą one jedynie oznaczeniu jakiejś części kodu.
Doctype
Zgodnie ze standardami, każdy dokument html musi mieć zadeklarowany typ dokumentu, czyli tzw. Doctype. Ten kawałek kodu wpisujemy na samej górze, jeszcze przed < html>. Jako, że działamy na xHTML, będziemy używać:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Nie można także zostawić elementu <html> tak jak jest. Musimy zamienić go na:
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl">
Teraz Twój kod powinien wyglądać tak:
Jeśli będziesz zaczynał robić swoje kolejne strony, zawsze zaczynaj od powyższego kodu.
Ważne!
PamiÄ™taj, aby wszystkie elementy (p, br, hr, a itp. – o których za chwilÄ™) pisać maÅ‚Ä… literÄ….
Sekcja head
Przejdziemy teraz do sekcji head. Dzisiaj pokaże Ci element title. Jest to po prostu tytuł Twojej strony. Wyświetlany jest on w oknie przeglądarki. Jak to działa? Sprawdź sam, napisz:
<title>Moja pierwsza strona WWW</title>
… zapisz dokument i odÅ›wież przeglÄ…darkÄ™. PowienieneÅ› teraz zobaczyć:
Właściwa treść strony
Mamy już szkielet dokumentu, mamy zadeklarowany jego typ i tytuł strony. Zacznijmy pisać właściwą treść strony. Cała zawartość stronki musi znajdować się w sekcji body.
Akapity
Napisz zatem kilka zdaÅ„ (nie masz pomysÅ‚u co napisać? Skorzystaj z gotowego tekstu, który wpisuje przy projektowaniu stron – lipsum.pl). Nieistotne co tam bÄ™dzie napisane – ważne, żebyÅ› miaÅ‚ jakiÅ› tekst, na którym bÄ™dziesz mógÅ‚ pracować. OK, mam już jakÄ…Å› treść. Jak sam widzisz jest to zbity tekst. NiezbÄ™dne jest podzielenie go na kilka akapitów. Do tego sÅ‚uży nam element p. WiÄ™c do dzieÅ‚a:
Pamiętaj, żeby zawsze zamykać wszystkie otwarte elementy (w tym przypadku <p> i </p>)
Załamanie lini
Zastosowanie elementu p podzieliło nam tekst na akapity. Musisz wiedzieć, że tekst automatycznie przenosi się do nowej linijki. Co jeśli chcemy wymusić przeniesienie jakiegoś zdania do nowej linijki? Enter nam nie pomoże. Tutaj rozwiązaniem jest element br. Tego elementu ani nie otwieramy, ani nie zamykamy. Po prostu piszemy:
<br />
Przykład:
Spowoduje to przejście kolejnego zdania do nowej linijki:
Pozioma linia
Jeśli chiałbyś wyraźnie zaznaczyć przejście do nowego akapitu, możesz użyć elementu hr. Jest to pozioma linia. Podobnie jak w przypadku elementu br, nie otwieramy ani nie zamykamy jej. Co robimy?
<hr />
Sprawdź jak to działa, wpisz gdzieś w tekście:
…a otrzymasz:
Odnośniki
Nieodłączną częścią stron internetowych są oczywiście odnośniki, czyli linki. Jak zrobić linka na stronie? Do tego służy element a. Składa się on jakby z dwóch części: 1. adres, do którego prowadzi link; 2. wyświetlany napis (bądź obrazek), po którego kliknięciu przenosi nas do podanego adresu.
Ważne!
JeÅ›li podajesz adres do strony, która nie jest na Twoim serwerze, musisz podać peÅ‚ny adres, np. http://www.skix.pl. Jeżeli chcesz zrobić tylko odnoÅ›nik do Twojej podstrony, wystarczy wpisać tylko jej nazwÄ™ wraz z rozszerzeniem, np. podstrona.html – ten plik musi znajdować siÄ™ w tym samym katalogu (folderze), co plik, na którym klikniesz w link.
Umieść więc dowolny link na swojej stronie, np.
W przeglÄ…darce wyÅ›wietli siÄ™ tylko napis: “Link do SkiX’a”, który po klikniÄ™ciu przekieruje CiÄ™ na moje portfolio.
Obrazki
Teraz pokażę Ci jak wstawić obrazek na stronce. Możliwe jest wyÅ›wietlanie różnych obrazków w różnych formatach. Ja jednak najczęściej używam plików .png oraz .jpg i Tobie także tak radzÄ™. Teraz konkrety… Oto ogólna i wymagana struktura kodu, która wyÅ›wietli nam obrazek w przeglÄ…darce:
<img src="adres_obrazka" alt="tekst alternatywny" width="szerokość w pixelach" height="wysokość w pixelach" />
src – adres obrazka
Podobnie jak w przypadku odnośników, podajemy pełny adres (gdy obrazek nie jest na naszym serwerze) lub tylko samą nazwę obrazka wraz z rozszerzeniem, np. obrazek.png, gdy znajduje się w katalogu ze stroną.
alt – tekst alternatywny
To tekst, który wyÅ›wietla siÄ™ gdy obrazek siÄ™ nie zaÅ‚aduje (bo na przykÅ‚ad ktoÅ› ma wyÅ‚Ä…czone pokazywanie obrazków). Wymagana jest obecność atrybutu alt nawet jeÅ›li nie chcesz nic wpisywać – wtedy zostawiasz tylko:
<img src="adres_obrazka" alt="" width="szerokość w pixelach" height="wysokość w pixelach" />
width – szerokość
Jest to po prostu szerokość obrazka wyrażona w pixelach. Wpisujemy tylko samą liczbę.
height – wysokość
Analogicznie do szerokoÅ›ci – podajemy wysokość obrazka.
Element img, tak jak br i hr kończy się znakami />
Przykład:
<img src="http://blog.skix.pl/wp-content/themes/skix/art/logo.png" alt="SkiX - logo" width="135" height="135" />
Odnośniki obrazkowe
Umiesz umieścić na swojej stronie linki oraz obrazki. Może by to jakoś ze sobą połączyć? Nic prostszego!
<a href="adres_strony"><img src="adres_obrazka" alt="tekst alternatywny" width="szerokość w pixelach" height="wysokość w pixelach" /></a>
Przykład:
Wyświetli Ci się w przeglądarce obrazek, po którego kliknięciu przeniesie Cię na moją stronę.
Gratulacje!
Udało Ci się opanować podstawy kodowania stron!
W kolejnych częściach tego artykuÅ‚u przedstawiÄ™ Ci wiÄ™cej informacji – m.in.:
- » dodawanie favicona – ikonki strony
- » edycja dokumentu html z poziomu pliku css
- » ustawianie różnych elementów na stronie
…i wiele wiele innych!
Masz jakieÅ› pytania?
Napisz!
Komentarze:
05-01-2010, 15:43
Grubo SkiX. Dawaj dalej. SiÄ™ nauczÄ™:P
06-01-2010, 19:55
Zajefajny poradnik, czekam na więcej może coś sam kiedyś stworze.. :D
06-01-2010, 21:22
Wszystko fajnie, tylko dlaczego XHTML skoro on nie jest już rozwijany? Aby XHTML był poprawnie interpretowany (chodzi mi tu o żółty ekran śmierci w Firefoksie :) ) powinien być wysyłany ze specjalnymi nagłówkami z serwera (tylko wtedy niestety IE tego nie obsługuje).
Poza tymi drobnymi uwagami tekst całkiem porządny :) Dla mnie wielki , bo w internecie krążą same denne poradniki na ten temat.
08-02-2010, 12:05
Super Podanik zrobilem i zareypiiscie wyszlo Pozdro;D!
11-02-2010, 13:35
Dzięki wielkie tego szukałem XD Na razie wszystko dobrze mi wyszło. Czekam na więcej. Pozdro :D
22-02-2010, 09:18
Ciekawy artykuł :) Oby tak dalej!
Loading ...