(X)HTML

Komentarze

  • 2008-04-18 18:24
  • 4 komentarze
  • 1777 odsłon
  • Oceń ten tekst jako pierwszy
Spis treści

     1 Komentarze
          1.1 Komentowanie a CDATA
          1.2 Komentarze warunkowe Internet Explorera
          1.3 Inne wskazówki


Komentarze


Komentarze występują w każdym języku, nawet tych znacznikowych, więc musiały się znaleźć w HTML-u także. Wersja liniowa tutaj nie istnieje, komentarz musi mieć początek i zakończenie:

<!--
  (treść komentarza)
-->


Jeśli używasz XHTML-a, musisz pamiętać, że w środku komentarza nie może występować ciąg znaków "--". Odpadają więc szlaczki oddzielające części kodu na Twojej stronie. Używaj "==" jeśli musisz. Podane niżej zapisy są błędne:

  1. <!----------------------------------------------------->
  2. <!-- ----------------------------------------------- -->
  3. <!-- tutaj nalezaloby cos dopisac -- ale nie wiem co -->

Ostatnia linijka technicznie znaczy tyle, że komentarz kończy się po "dopisać", potem są tylko atrybuty dla jakiegoś taga.

W zwykłym HTML można umieszczać komentarze przed znacznikiem <html/>, lecz w XML (XHTML z typem MIME application/xhtml+xml) tak być nie powinno.

Komentowanie a CDATA


Zwykło się używać komentarzy do zmuszenia starych przeglądarek, bez wsparcia dla CSS czy ECMAScript do pominięcia reguł i kodu. Rozważmy następujący przykład:

<style type="text/css">
<!--
  body { background-color: pink; }
-->
</style>


Ten kod nie powinien zostać zrozumiany przez nowoczesne przeglądarki, jako że definicja różowego tła dla body nie istnieje. Podobnie tutaj, mimo że autor chciał wykluczyć możliwość, że jakiś Netscape zrozumie opacznie znak <:

<script type="text/javascript">
<!--
  ?
  var task = document.getElementByID("taskbar").getElementsByTagName("a");
  if ((task.length < 10) && (task.length > 5)) {
   ?
-->
</script>


CSS nie stanowi wielkiego problemu (jednakże zalecam także podane niżej rozwiązanie), chyba że używasz tworów Microsoftu, jak parseExpression czy inne takie. Dla skryptów należałoby zacząć używać sekcji CDATA.

<script type="text/javascript">
//<![CDATA[
  ?
  var task = document.getElementByID("taskbar").getElementsByTagName("a");
  if ((task.length < 10) && (task.length > 5)) {
     ?
 //]]>
 </script>


Takie oznaczenie mówi parserowi XML, że w środku są zwyczajne dane. Można więc spokojnie używać <, >, &. Przed oznaczeniami CDATA występuje //, gdyż tak w JavaScript oznacza się komentarze liniowe, co wyklucza te linijki ze skryptu. Parser XML napotka jednak <![CDATA[ i przestanie. Rozpocznie znowu po ]]>, więc należy unikać jak ognia przypadku, gdzie w skrypcie mamy właśnie znaki ]]>.

Sekcja CDATA zostanie zrozumiana tylko gdy strona jest serwowana jako typ MIME odpowiedni dla XML lub XHTML (application/xhtml+xml lub application/xml).

Sekcje CDATA są o tyle bardziej interesujące, że przeglądarki interpretujące XML mają prawo usunąć z pliku wejściowego wszystkie komentarze już na samym początku procesu interpretacji.

Komentarze warunkowe Internet Explorera


Przeglądarka Microsoftu posiada "tylne drzwi", które umożliwiają ukrycie niektórych fragmentów kodu dla wszystkich przeglądarek dzięki zastosowaniu komentarza - Internet Explorer jednak te specjalne komentarze odpowiednio interpretuje, pozwalając na odkrywanie dla niego niektórych znaczników - co ułatwia tworzenie specjalnie dla niego przeznaczonych reguł CSS.

Komentarz warunkowy powoduje wskoczenie IE w tryb parsowania znaczników, które są w nim. Wygląda on trochę dziwnie:
<!--[if IE]>
  treść
<![endif]-->


W normalnej przeglądarce, ]> i <![ zostanie potraktowane jako część komentowanego tekstu i pominięta. IE jednak zamknie komentarz, jeśli spełnia warunek w [if]. Warunki zaczynają się właśnie od if potem następuje operator, IE oraz wersja. Gdy operator nie wystąpi, to jest to równoznaczne z operatorem =. Operatory:

  1. lt (lower than) mniejszy
  2. gt (greater than) większy
  3. lte (lower than equal) mniejszy równy
  4. gte (greater than equal) większy równy

Przykład wykorzystania przy ładowaniu stylu CSS z odpowiednim box-modelem dla Internet Explorera 5 i starszych:

<!--[if lte IE 5]>
  <link rel="stylesheet" href="ie5-boxmodel.css" />
<![endif]-->


Inne wskazówki


Komentowanie własnego kodu jest zawsze opłacalne. W przypadku HTML-a komentarze są pomijane w wyglądzie strony, ale zajmują miejsce (w odróżnieniu od programów, które mają wycinane komentarze podczas kompilowania), więc nie należy przesadzać.

Przydatne bardzo jest oznaczenie bloków znaczników, aby było od razu widać który znacznik co zamyka:

<div id="header">
 ...
</div><!-- id="header" -->
<div id="content">
 ...
<div class="entry">
<div class="head a0">
 ...
</div><!-- class="head" -->
</div><!-- class="entry" -->
 ...
</div><!-- id="content" -->


Gdy piszemy na początku strukturę strony, wszystko wydaje się proste do odróżnienia, zwłaszcza w edytorach kolorujących znaczniki, numerujących linijki i tak dalej. Ale gdy w entry pojawi się nagle masa tekstu, to można się pogubić. A najbardziej, jak mamy cztery zamykające </div> obok siebie.



Artykuł to zmodyfikowana wersja tekstu "Komentarze w HTML" Piotra Petrusa (udostępniony na licencji Creative Commons) opublikowany za wiedzą i zgodą autora.

4 komentarze

Alver1989 2016-11-24 12:04

Thanks for the share loved reading the article
http://www.screencast.com/t/2efF85Ms2n
http://www.screencast.com/t/NyE7NoERBy
https://www.rebelmouse.com/watchthefounderonline/
http://www.screencast.com/t/SVjGmcLLX
http://www.screencast.com/t/PSjwLZbKOc1
http://www.screencast.com/t/iNn1aJXcF0n
http://www.screencast.com/t/ldNWSyFG
http://www.screencast.com/t/FgvTI0GD
https://www.rebelmouse.com/watchthespacebetweenusonline/
https://www.rebelmouse.com/watchlightbetweenoceansonline/
http://www.screencast.com/t/XwOJNrkZ
https://www.rebelmouse.com/billylynnslonghalftimewalk/
http://www.screencast.com/t/F1BzpXMHCyN
https://www.rebelmouse.com/watchassassinscreedonline/
http://www.screencast.com/t/1fHBAqWs0r
http://www.screencast.com/t/jVHesf54bHHN
http://www.screencast.com/t/Q9rdMbcfG
http://www.screencast.com/t/7UkINEIM
http://www.screencast.com/t/ow8xOPQfk
https://www.rebelmouse.com/watchsnowdenonline/
http://www.screencast.com/t/s3c6xEHZ6oUg
https://www.rebelmouse.com/watchtheaccountantonline/
https://www.rebelmouse.com/watcharrivalonline/
http://www.screencast.com/t/jgUqS66GrdTT
https://www.rebelmouse.com/watchsingonline/
https://www.rebelmouse.com/watchinfernoonline/
http://www.screencast.com/t/Gn7s9p38MZu8
https://www.rebelmouse.com/watchrogueoneonline/
http://www.screencast.com/t/IxEXO6gGa
http://www.screencast.com/t/9RdJ3GVXGJ
http://www.screencast.com/t/sKEbBNowk0
https://www.rebelmouse.com/watchmanchesterbytheseaonline/
https://www.rebelmouse.com/watchgoldonline/
https://www.rebelmouse.com/watchbenhuronline/
https://www.rebelmouse.com/watchthegirlonthetrainonline/
http://www.screencast.com/t/OC6sjQDO4z
https://www.rebelmouse.com/watchdoctorstrangeonline/
https://www.rebelmouse.com/watchcollateralbeautyonline/
http://www.screencast.com/t/CoSk1Te3iHaW
http://www.screencast.com/t/FE4AZHDmex
https://www.rebelmouse.com/watchthemagnificentsevenonline/
https://www.rebelmouse.com/watchwardogsonline/
https://www.rebelmouse.com/watchpetesdragononline/
http://www.screencast.com/t/pSNHgWlTNzO3
https://www.rebelmouse.com/watchlalalandonline/
http://www.screencast.com/t/P3GEHY1k1
https://www.rebelmouse.com/watchpassengersonline/
http://www.screencast.com/t/7MMsycCfl
https://www.rebelmouse.com/watchsausagepartyonline/
http://www.screencast.com/t/lTRAdwj7Ovh
http://www.screencast.com/t/xyi8sAqIz
http://www.screencast.com/t/LvlwwYCCL
https://www.rebelmouse.com/watchspectralonline/
http://www.screencast.com/t/Xzn8hchmDlN
https://www.rebelmouse.com/watchmechanic2resurrection/
http://www.screencast.com/t/DNnrfBJ0KHZ
http://www.screencast.com/t/FmhFpFV0X
http://www.screencast.com/t/u0x27OXeTknJ
https://www.rebelmouse.com/watchamonstercallsonline/
http://www.screencast.com/t/FyuCVgiK9C
https://www.rebelmouse.com/watchdeepwaterhorizononline/
https://www.rebelmouse.com/missperegrinespeculiarchildren/
https://www.rebelmouse.com/watchmoanaonline/
https://www.rebelmouse.com/watchtrollsonline/
http://www.screencast.com/t/R49jBRCbfvxv
http://www.screencast.com/t/ZHL1LOhjI9
https://www.rebelmouse.com/watchstorksonline/
https://www.rebelmouse.com/fantasticbeastswheretofindthem/
https://www.rebelmouse.com/watchjackreacher2nevergoback/
https://www.rebelmouse.com/watchkuboandtwostringsonline/
https://www.rebelmouse.com/watchflorencefosterjenkins/
https://www.rebelmouse.com/watchtheedgeofseventeenonline/
Thanks for sharing wonderful blogs.

Ktos 2006-02-17 22:09

Okej, pogadam z nim :)

Ktos 2006-02-17 16:55

Sporo o komentarzach napisał Riddle http://riddle.jogger.pl/comment.php?eid=153257 , można by wykorzystać część (na Creative Commons jest ;))

Kooba 2006-02-17 17:06

no to skontaktuj sie z nim ;)