O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

znaczniki XHTML

HTML podręcznikZnaczniki to podstawowy budulec stron internetowych. Zastanawiam się czy lepiej porównać je do cegieł czy do zaprawy i chyba zdecyduję się na zaprawę bo cegłami w tym porównaniu będzie treść strony. Bez odpowiedniego spoiwa treść może nadal być dostępna ale raczej trudna do odczytania. To właśnie znaczniki układają treść w odpowiednie formy. Mówią one przeglądarce jaki to rodzaj treści tak aby mogła ona zdecydować o sposobie wyświetlania.

Czasami można spotkać się z określeniem tag HTML. Znaczy to mniej więcej to samo więc można tych słów używać jak synonimów.

TAG = ZNACZNIK

Oczywiście innym znaczeniem tag jest słowo-klucz i związane jest ze sposobem opisu treści notki (patrz chmurka tagów). Te dwa znaczenia są niezależne i nie są ze sobą powiązanie. To trochę jak ze słowem zamek, z kontekstu trzeba wywnioskować o który zamek/tag chodzi. Ja określenia tag html używam raczej rzadko i zazwyczaj wprowadzam go tak jak przed chwilą, wraz ze skrótem HTML.

W dzisiejszej notce opiszę budowę znacznika, sposób zagnieżdżania znaczników, sposób zapisu informacji dodatkowych w postaci atrybutów a także na koniec omówię atrybuty standardowe: id, class, style, title, lang, dir.

Budowa znacznika

W większości przypadków znacznik składa się z części otwierającej i zamykającej, które różnią się od siebie ukośnikiem. Jest kilka wyjątków, są to znaczniki, które nie mogą zawierać innych znaczników ale także one powinny kończyć się rodzajem zamknięcia.

Dla znaczników obowiązują małe litery. W starszych stronach można zetknąć się ze znacznikami pisanymi dużymi literami ale takie rozwiązania aktualnie sa niezalecane i mogą przysparzać problemów. Piszemy więc małymi literami.

Każdemu znacznikowi otwierającemu MUSI odpowiadać znacznik zamykający. Znacznik otwierający składa się z ostrych nawiasów i nazwy znacznika umieszczonej pomiędzy nimi. Znacznik zamykający jest niemal identyczny tylko nazwa poprzedzona musi być ukośnikiem.

budowa znacznika

Wyjątkami są znaczniki nie mogące posiadać zamknięcia dlatego, że nic więcej zawierać w sobie nie mogą, żadnych innych znaczników. budowa znacznika imgPrzykładem takiego znaczniku będzie ilustracja. Może mieć ona różne atrybuty (wręcz powinna) ale nie może zawierać w sobie innych elementów. No bo jak wstawić tekst w ilustrację tak aby jedna ilustracja otaczała tekst. Ilustracja to po prostu odwołanie do adresu URL umieszczone w takim znaczniku, który powie przeglądarce, że to co jest pod tym adresem trzeba wyświetlić jako ilustrację. Swego rodzaju zamknięciem jest dodanie ukośnika na koniec znacznika otwierającego.

Zagnieżdżanie znaczników

Znaczniki mogą się zawierać w sobie. Nie wszystkie we wszystkich, czasem dozwolona jest tylko określona kolejność ale opiera się ona na semantyce czyli znaczeniu. Link to najczęściej pojedyncze słowo lub obraz, dość często fraza, czasami zdanie ale niezwykle rzadko cały akapit a już niespotykane są linkujące akapity (jeden link, kilka akapitów). Oznacza to, że znacznik akapitu może otaczać znacznik linku ale w drugą stronę jest to już niespotykane. Kolejność znaczników jest więc intuicyjna. Istotne jest aby znaczniki zamykające dodawać analogicznie od otwierających, w odwrotnej kolejności: abc-cba.

znaczniki zagnieżdżenie

Nie należy też mieszać znaczników, robić jakiś przekładańców. Spróbuj zdjąć skarpetki zanim zdejmiesz buty. Każdy znacznik musi być zamknięty we właściwej kolejności w przeciwnym razie może dojść do konfliktu, którego efekty mogą być przeróżne od lekko niepokojących po zupełną ostateczność czyli niewyświetlanie się treści.

Atrybuty znaczników

Znaczniki poza swoją nazwą zamkniętą w ostrych nawiasach mogą zwierać dodatkowe informacje: atrybuty. Atrybut to coś co może wyróżnić dany znacznik, jakiś parametr zawierający dodatkowe informacje, dodać mu jakoś cechę specyficzną. Przykładowo otoczenie słowa znacznikiem a oznacza link ale bez odpowiedniego atrybutu jest to tylko informacja logiczna dla przeglądarki. Aby ten nasz element zadziałał jako odnośnik trzeba dodać atrybut href i jego wartość w postaci adresu URL.

atrybut adresu linku

Podobnie znacznik img odnosi się do ilustracji ale dopiero z atrybutem src ma sens bo ten atrybut właśnie służy do wprowadzenia adresu pliku obrazu.

atrybut adresu dla ilustracji

Każdy znacznik ma swoje własne specyficzne atrybuty, inne będą one dla linku, inne dla ilustracji a jeszcze inne dla przycisku. Jest jednak kilka atrybutów standardowych, które w zależności od potrzeby można dodać do dowolnego znacznika. Będą to: id, class, style, title, lang, dir.

Atrybuty wprowadza się poprzez ich nazwę, następnie znak równości (=) i wartość atrybutu koniecznie umieszczoną w cudzysłowie (nieprawdziwym). Dopuszczalny jest zarówno pojedynczy jak i podwójny jednak stosować go należy konsekwentnie. Jeżeli otworzyliśmy cudzysłów podwójny to i taki mamy zamknąć. Atrybuty zarówno od nazwy znacznika jak i innych atrybutów oddzielamy spacją.

Atrybuty standardowe

Zacznijmy od końca: lang i dir związane są z językiem. Piszę po polsku i używając alfabetu łacińskiego więc wystarczające są dla mnie definicje języka w nagłówku html strony i dlatego nigdy tych znaczników nie używałam.

atrybut języka

atrybut kierunku tekstu

Title to atrybut tytułu, można go dodać każdemu znacznikowi, nie tylko ilustracjom czy linkom ale także przykładowo akapitowi, liście, wzmocnieniu (pogrubieniu). Title wyświetla się zazwyczaj w postaci dymku po najechaniu kursorem na element, któremu jest przypisany. Sposób prezentacji title zależy od przeglądarki.

atrybut tytułu

Atrybut style służy do dodawania stylów lokalnych, czyli wyglądu specyficznego tylko dla tego miejsca i sytuacji. Po więcej informacji o różnych sposobach implementacji CSS zapraszam do starszej notki. O możliwych stylach, które można tak lokalnie wykorzystać, zapraszam do całej kategorii o CSS i ewentualnie tagu: właściwości CSS.

atrybut stylu lokalnego

Jeżeli chodzi o wygląd elementów najbardziej przydatnym atrybutem jest jednak class. Nazwę klasy wybieramy sobie sami. Możemy jej użyć tylko raz albo dodać atrybut klasy o tej samej wartości do wielu elementów. Następnie tą stworzoną przez nas klasę możemy dowolnie opisać w edycji CSS.

kubekPrzykładowo na moim blogu, w notkach nie wszystkie ilustracje mają ramki. Niektóre są wstawiane bez odstępów, tła i ramki. Aby za każdym razem nie musieć opisywać stylu dla ilustracji (przy każdej pojedynczej ilustracji na nowo), ustaliłam wygląd podstawowy dla znacznika ilustracji w notce: to są te wszystkie ilustracje w ramkach, o ten styl uznałam za podstawowy i najczęściej przeze mnie używany. Niektórym ilustracjom dodaję jednak atrybut klasy, który następnie opisałam w arkuszu stylów jako pozbawiony ramek, odstępu i tła. I po sprawie. Jak chcę dodać ilustrację bez ramki to dodaję jej specjalną klasę i voila.

atrybut klasy smll

Ostatni z atrybutów standardowych, które można dodać do każdego znacznika to id. Ma on dwie magiczne role, zupełnie niezależne od siebie. Po pierwsze identyfikatora można używać jako kotwicy.

Kotwica to taki adres miejsca w treści. Normalnie możemy podać link do strony, do pojedynczej notki. Ale co jeżeli chcemy wskazać (podlinkować) tylko fragment treści. Albo chcemy umożliwić czytelnikom ominięcie jakiegoś fragmentu tekstu i przejście od razu do jakiejś dalszej jego części. Umożliwia tu umieszczenie małego spisu treści np na początku lub na końcu bardziej rozbudowanej notki. Tak działa kotwica, którą dodaje się poprzez atrybut name przy znaczniku linku. Dokładnie w ten sam sposób działa atrybut id przy dowolnym znaczniku a jego zalety są jeszcze większe.

Identyfikatora można używać w podobnej roli jak klasę czy do opisu wyglądu. Jeżeli jakiemuś elementowi na stronie dodamy id to nie tylko możemy do niego linkować ale także bardzo indywidualnie opisać jego wygląd w arkuszu stylów. Dlatego właśnie na jednej stronie id o określonej nazwie może pojawić się tylko raz. Ma być jak numer PESEL, bardzo indywidualny.

Jeżeli chcesz zobaczyć jak to działa to zapraszam do notki na stylowym blogu. W czwartym akapicie znajduje się trzypunktowa lista. Jej linki odnoszą się do zawartości tamtej notki więc po kliknięciu w nie zostaniesz przeniesiony do jej dalszej części.

atrybut identyfikatora


Na dzisiaj to tyle. Dziękuję za uwagę i zapraszam do innych notek o HTML. Pamiętaj tylko, że HTML (albo dokładniej jak na bloksie XHTML) buduje stronę, stawia jej ściany, wstawia okna. Natomiast za wygląd tych elementów (kolor ścian czy rodzaj szła w oknach) odpowiedzialny jest arkusz stylów. Korzystając z HTMLowych porad, kursów i podręczników wybieraj najnowsze jak to możliwe. No chyba, że chcesz budować stronę będącą internetowym odpowiednikiem staropolszczyzny, dość urokliwe ale nie do końca zrozumiałe.

Daj, ać ja pobruszę, a ty poczywaj

HTML4 może stanowić podstawę jednak bloks zbudowany jest w XHTML. Jeżeli więc masz wątpliwości używaj rzeczy odpowiednich dla XHTML. Jednocześnie spoglądaj na HTML5, który właśnie powstaje. Jeżeli coś było dopuszczalne lecz jest teraz niezalecane to nie stosuj tego. Po co przysparzać sobie kłopotów.

niedziela, 22 stycznia 2012, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...