: Home / HTML / CSS / kurs HTML / Styl kodowania

Warning: file_get_contents(http://graph.facebook.com/http://youthcoders.net/html-css/kurs-html/237-styl-kodowania.html): failed to open stream: HTTP request failed! HTTP/1.0 403 Forbidden in /var/www/old-yc/plugins/content/addthis.php on line 38
Styl kodowania
Ocena użytkowników: / 0
SłabyŚwietny 
Wpisany przez Patryk yarpo Jar   
środa, 11 listopada 2009 16:50

Jeśli zapytasz dowolnego programisty jaki styl kodowania uważa za najlepszy, każdy powie: "mój". To nawet logiczne. W końcu, gdyby jakiś inny styl kodowania był lepszy - on też by go używał :P

Pamiętaj: Napisanie kodu, który zrozumie komputer nie jest sztuką. Pisz kod zrozumiały dla czlowieka! 

Jeśli jednak chodzi o styl pisania kodu HTML, to pozwól mi zaproponować kilka zasad:

  1. Wszystkie znaczniki pisane małymi literami.
  2. Kolejność otwierania i zamykania znaczników.
  3. Wszystkie atrybuty (poza zdarzeniami posiadającymi "DOM" w nazwie) pisane małymi literami.
  4. Każda wartość artybutu pisana w cudzysłowie lub apostrofach.
  5. Wcięcia
  6. Komentarze

ad 1

<H1>sialala</h1><table><TR><td></TD></tr></TABLE>

przyznasz, że mniej czytalne niż:

<h1>sialala</h1>

<table>

    <tr>

        <td></td>

    </tr>

</table>

ad 2

Stary HTML pozwalał na konstrukcje tego typu:

<a href="/b.htm">To mój <b>link</a></b>

W tym wypadku jeszcze całkiem ławto się domyślić co jest gdzie, ale gdyby to było więcej kodu... XHTML wymuasza już odpowiednią kolejność zamykania znaczników. W HTMLu to nie jest wymuszane, ale świadczy o rozwadze i umiejętnościach webmastera.

<a href="/b.htm">To mój <b>link</b></a>

Od razu ładniej:)

Pamiętaj także o zamykaniu znaczników. W HTML można robić coś takiego:

<ul>

    <li>To jest pierwsza pozycja

    <li>To jest druga pozycja

<p>To jest akapit

To, że coś nie jest zakazane, nie znaczy że należy tego używać. Zawsze i bezwzględnie zamykaj znaczniki.

ad 3

Podobnie jak w przypakdu nazwy znacznika. Wielkie litery oznaczają krzyk w internecie. Nie krzycz - nie musisz. Przeglądarka i tak zrozumie.

ad 4

W HTML można zrobić coś takiego:

<table border=0>

Po raz kolejny przypomnę, to że można coś robić, nie znaczy że robić to trzeba! Zawsze obejhmuj w "uszy" wartości atrybutów. O ile w tak banalnym przypadku może się to wydawać zbędne, to już tu:

<img src="/a.jpg" alt="To jest dłuższy tekst">

Widać, żę cudzysłów jest potrzebny. Po to, aby uniknąć błędów w takich przypadkach po prostu zawsze używaj cudzysłowu / apostrofu.

<table border="0">

ad 5

Wcięcia pozwalają zawsze łatwiej zorientować się w kodzie. Stosowałem je w całym kursie, więc chyba nie muszę teraz pokazywać kolejnego przykładu. Usuń wszystkiew cięcia z jakiegoś kodu, a zrozumiesz dlaczego stosuje się je :). Bez nich wszystko strasznie się zlewa.

ad 6

Ja najczęściej stosuje je w takich sytuacjach:

<div id="main">

    <span class="item">Jednen</span>

    <span class="item">Dwa</span>

</div> <!-- #main -->

Dzięki temu widzę, jaki konkrentnie znacznik zamykam. W tym wypadku może się to wydawać zbyt oczywiste, jednak kiedy zaczniesz robić większe strony zobaczysz, że to dobre rozwiązanie.

Komentarz?

Składa się z 3 części

  • Sekwencja otwierająca komentarz:
    <!--
  • Zawartość komentarza (prawie dowolny ciąg znaków)
  • Sekwencja zamykająca:
    -->

Czyli np. tak:

<!-- komentarz może mieć więcej niż

jedną linię. Co więcej może zawierać znaczniki. Nic nie robią, tracą swoje właściwości. 

Można tego używać, np. kiedy chcesz na chwilę wyrzucić kawałek kodu ze strony. -->

XHTML?

Tak, tak, w internecie aż roi się od informacji jak wspaniały jest XHTML. Wg mnie (i nie tylko mnie) XHTML jest bardzo ciekawym rozwiązaniem w pewnych sytuacjach, co wcale nie znaczy, że sam w sobie rozwiązuje jakiekolwiek problemy. Co więcej - źle używany sprawia ich znacznie więcej niż źle używany HTML!. Zapisane tu zasady, praktycznie sprawiają, że jakościowo twój kod HTML nie będzie odbiegał od dobrego kodu XHTML. Za główne zalety XHTML uznaje się:

  • oddzielenie warstwy prezentacji od warstwy struktury
  • wprowadzenie porządku w kodzie
  • możliwość wykorzystania xmlopochodnych takich jak np. XSLT

Nic nie stoi na przeszkodzie, aby kod HTML spełniał dwa pierwsze kryteria. Z 3 trzebaby już się sporo nabawić, choć jest to możliwe po pewnej ingerencji w kod (ingerencja ta może zostać zautomatyzowana - kiedyś popróbuję i jeśli mi się uda, to przedstawię wyniki).

Tags:
 

Dodaj komentarz


Kod antysapmowy
Odśwież