Webes szabványok

Ismerd meg a webes szabványok világát, és tedd jobbá a webet!

Az itt található ingyenes leírásokkal megismerheted a webes szabványokat, és a legjobb módszereket a webfejlesztéshez.

Töltsd le az Operát

Hírcsatornák

Tartalom

A kezdetek
  1. Bevezető a webes szabványokba
A szabványok világa
  1. Az internet és a web története, a webes szabványok evolúciója
  2. Hogyan működik az internet?
  3. A webes szabványok modellje — HTML, CSS és JavaScript
  4. Szép álom, de mi a valóság?
Webdesign fogalmak
  1. Információs Architektúra — egy website tervezése
  2. Mi kell egy jó weblaphoz?
  3. A színek elmélete
  4. Egy site keretének felépítése
  5. Színsémák és designtervek
  6. Tipográfia a weben
HTML alapok
  1. A HTML alapjai
  2. A HTML head eleme
  3. Megfelelő doctype választása a HTML dokumentumokhoz
A HTML felépítése
  1. Szöveges részek megjelölése HTML-ben
  2. HTML listák
  3. Képek a HTML-ben
  4. HTML hivatkozások — építsük fel a webet!
  5. HTML táblázatok
  6. HTML űrlapok — az alapok
  7. Kevéssé ismert szemantikus elemek
  8. Általános tárolók — a div és a span elemek
  9. Több lap létrehozása navigációs menüvel
  10. A HTML validálása
Hozzáférhetőség
  1. A hozzáférhetőség alapjai
  2. A hozzáférhetőség tesztelése
CSS
  1. CSS alapok
  2. Öröklődés és kapcsolódás
  3. Szöveg stílusozása CSS-sel
  4. A CSS elrendezés modell — box, border, margin és padding
  5. Háttérképek CSS-ben
  6. Listák és hivatkozások stílusozása
  7. Táblázatok stílusozása
  8. Űrlapok stílusozása
  9. Float és clear
  10. Statikus és relatív pozícionálás CSS-ben
  11. Fix és abszolút pozícionálás CSS-ben

Hozzászólások

  • Peraaa: Kár, hogy nem folytattad a fordítást, sokat tanultam belőle. (2015.03.15. 22:17) Költözés
  • Janus12 (törölt): Király a leírás! (2009.09.09. 13:36) Általános tárolók — a div és a span elemek
  • Karbonade: @Edorn: Szerintem erről a 33-as leírásban lesz szó (táblázatok stílusozása). Amíg nincs hozzá ford... (2009.06.25. 16:38) HTML táblázatok
  • Karbonade: @dreambarker: Igazából időhiány miatt lassult le, ha megint lesz rá időm, folytatom a fordítást. (2009.06.10. 15:01) Megfelelő doctype választása a HTML dokumentumokhoz
  • kajla: @Karbonade: Köszönöm, ez nagy megtiszteltetés! :) (2009.04.03. 22:30) Segíts te is a fordításban!
  • anyu(ha): További olvasnivalóhoz ajánlat: css.maxdesign.com.au/index.htm (2008.10.15. 19:25) HTML listák
  • Karbonade: Természetesen nem a nép butítása a célom, éppen ellenkezőleg :) Úgyhogy ha valaki vállalja a lekto... (2008.09.19. 17:43) A HTML <head> eleme
  • HTML Info: Mivel a trackback nem jutott idáig, csak így gyalog: htmlinfo.hu/2008/09/17/webszabvany-blog/ (2008.09.17. 19:13) A HTML alapjai
  • lacacsoki: Sommerset nem is olyan borús ha van cider... köszi a hasznos postot! Üdv :D (2008.09.17. 13:55) Tipográfia a weben
  • Karbonade: Köszi, javítom. Sőt az egyes szám-többes szám sem egyezik. (2008.09.03. 10:38) Egy site keretének felépítése

Címkék

Szöveges részek megjelölése HTML-ben

Karbonade • 2008.09.28

Ez a bejegyzés a webes szabványok tizenötödik leírása. Az eredeti, angol nyelvű cikket Mark Norman Francis írta.

Bevezető

Ebben a leírásban megismerkedhetsz a HTML alapszintű használatával, mégpedig hogy hogyan adhatod meg a jelölésekkel a dokumentumod különböző részeinek az értelmét.

Megnézzük az általános strukturális elemeket, mint például a címsorok, a paragrafusok vagy a beágyazott idézetek és kódok. Ezután néhány belső tartalommal is megismerkedünk, mint a rövid idézetek és a kiemelések, majd a végén még gyorsan átnézünk néhány régimódi megjelenítési elemet is. A leírás felépítése a következő:

Megjegyzés: Minden példakód után találsz egy „Próbáld ki élőben” hivatkozást, amelyre ha rákattintasz, elvisz egy oldalra, ahol azonnal láthatod, hogyan jelenik meg élesben a bemutatott kód, valamint megnézheted a hivatkozott oldal forrását is, ahol az összes példakódot megtalálod.

Space — az űr a legvégső határ

Van egy nagyon fontos pont, amit tisztáznunk kell, mielőtt még a szövegekről beszélnénk, mégpedig a szavak közötti üres helyekről. A HTML írásakor a forráskód ún. „fehér karaktereket” is tartalmaz — ezek azok a karakterek, amelyek egy üres területtel elválasztják egymástól a szavakat. A leggyakoribb ilyen fehér karakter a space (szóköz), amelyet a szóköz billentyű lenyomásával tudsz beírni, de ilyen még a tabulátor és az új sor karakter is.

A HTML-ben a fehér karakterek többszörös megjelenése (szinte) minden esetben egyetlen szóköz karakternek számít. Például:

<h3>Kezdetben    teremté
                az      Úr </h3>

Próbáld ki élőben

a böngészőben ugyanúgy lesz értelmezve, mint a következő:

<h3>Kezdetben teremté az Úr</h3>

Az egyetlen hely, ahol ez nem így történik, az a pre elem, amelyről még fogunk beszélni ebben a leírásban.

Ez sokszor zavaró lehet az olyanoknak, akik először szerkesztenek HTML dokumentumot, mikor megpróbálnak egy szöveget kitolni néhány extra szóköz karakterrel, vagy nagyobb helyet szeretnének a mondatok, esetleg a bekezdések között. A dokumentum vizuális megjelenését viszont nem a HTML forrásban kell befolyásolni, hanem használj helyette stíluslapokat, ahogy azt a sorozat egy későbbi részében be fogjuk mutatni.

Blokk szintű elemek

Ebben a részben végigvesszük a gyakoribb, szövegek formázására használható blokk szintű elemek szintaxisát és használatát.

A lap szakaszcímei

Miután a lapot felosztottad több logikus szakaszra, minden szakaszt be kell vezetned egy megfelelő címsorral. Erről már volt szó korábban a Mi kell egy jó weblaphoz? leírásban.

A HTML 6 címsor szintet definiál, h1, h2, h3, h4, h5 és h6 (a magasabb fontosságútól az alacsonyabbig). Általánosságban, a h1 szokott lenni az egész lap fő címsora, ez vezet be mindent. A h2 ezután szakaszokra bontja a lapot, a h3 alszakaszokra, és így tovább.

Nagyon fontos, hogy a dokumentumot a különböző szintű címsorokkal oszd fel szakaszokra, alszakaszokra, al-alszakaszokra, mivel ez sokkal érthetőbbé teszi a lapot a képernyőolvasók és az automatikus folyamatok számára (mint amilyen például a Google indexelő robotja).

Ha ezt a lapot vesszük alapul, akkor ez is egy jó példa a címsorok felépítésére:

<h1>Szöveges részek megjelölése HTML-ben</h1>
  <h2>Bevezető</h2>
  <h2>Space — az űr a legvégső határ</h2>
  <h2>Blokk szintű elemek</h2>
    <h3>A lap szakaszcímei</h3>
    <h3>Általános bekezdések</h3>
    <h3>Más források idézése</h3>
    <h3>Előformázott szöveg</h3>
  <h2>Inline elemek</h2>
[…és így tovább…]

Próbáld ki élőben

Általános bekezdések

A bekezdések (vagy paragrafusok) a legtöbb dokumentum építőkövei. A HTML-ben a bekezdést a p elem jelöli, amelynek nincsenek speciális attribútumai. Például:

<p>Ez egy nagyon rövid bekezdés. Csak két mondatból áll.</p>

Próbáld ki élőben

Sok könyvben és cikkben egy paragrafusban csak egy mondat lehet. Bár a „paragrafus” értelme (az írott terminológiát tekintve) elég nyilvánvaló, a weben sokszor sokkal rövidebb szövegeket is meg szoktak jelölni paragrafusként, mivel a szerző szerint ez sokkal „szemantikusabb”, mint a div elem használata (erről fogunk beszélni a későbbiekben az Általános tárolók leírásban).

A paragrafus a weben egy vagy több mondat csoportja, éppen úgy, mint az újságokban vagy a könyvekben. A webes sokkal jobb, ha ezekhez használjuk a paragrafus elemet, és nem hagyunk a szövegben egyedül csak úgy szövegrészeket. Ha csak néhány szóról van szó, vagy nem egy teljes mondatról, akkor ezeket nem kell feltétlenül paragrafusként megjelölnöd.

Más források idézése

Nagyon gyakran a cikkek, blogbejegyzések vagy a webes dokumentumok idéznek kisebb-nagyobb részeket más dokumentumokból. A HTML-ben a hosszabb idézeteket — például teljes mondatokat, bekezdéseket, listákat — a blockquote elemmel jelölhetjük.

A blockquote elem nem tartalmazhat sima szöveget, hanem csak egy másik blokk szintű elem lehet benne. Ugyanazokat a blokk szintű elemeket használd az idézetben is, mint az eredeti környezetben. Ha egy bekezdést idézel, használd a paragrafus elemet, ha egy lista elemeit, akkor készíts listát, és így tovább.

Ha az idézet egy másik weboldalról származik, akkor megadhatod a forrást a cite attribútumban a következőképpen:

<p>A HTML 4.01 az egyetlen olyan HTML verzió, amelyet egy új
weblap létrehozásakor használhatsz, a specifikáció szerint:</p>
<blockquote cite="http://www.w3.org/TR/html401/">
<p>Ez a dokumentum érvényteleníti a HTML 4.0 korábbi verzióit, 
bár a W3C továbbra is elérhetővé teszi ezeket a 
specifikációkat és a hozzájuk tartozó DTD-ket a W3C weboldalán.</p>
</blockquote>

Próbáld ki élőben

Előformázott szöveg

Minden olyan szöveget, amelyben a szöveg behúzása és a fehér karakterek (amelyeket a leírás elején említettünk) fontos szerepet kapnak, a pre elemmel kell megjelölnünk.

A legtöbb webböngészőben az előformázott szöveg pontosan úgy jelenik meg a felhasználónak, ahogy a forrásban szerepel, gyakran fix szélességű (monospace) betűtípussal, így a szöveg úgy néz ki, mintha írógépből származna. Ez a programozók hagyatéka, akik fix szélességű betűkkel dolgoznak, és eleinte leginkább ők használták az előformázott szöveget.

Ebben a példában egy példakódot láthatsz a perl programozási nyelvből:

<pre><code class="language-perl">
            # vegig beolvassa a megnevezett fajlt
            sub slurp {
                my $filename = shift;
                my $file     = new FileHandle $filename;
                
                if ( defined $file ) {
                    local $/;
                    return <$file>;
                }
                return undef;
            };
        </code></pre>

Próbáld ki élőben

A fenti példában szereplő code elemről részletesebben is fogunk beszélni a Kevéssé ismert szemantikus elemek részben.

Inline elemek

Ebben a részben átnézzük a leggyakoribb, szövegek formázásához használt inline (soron belüli) elemek szintaxisát és használatát.

Rövid idézetek

A mondaton vagy bekezdésen belüli rövid idézeteket a q elemmel jelölhetjük. Hasonlóan a blockquote elemhez, ez is tartalmazhat egy cite attribútumot, amelyben megadhatsz egy webcímet, ahonnan az idézet származik.

A rövid idézetek legtöbbször idézőjelben szerepelnek. A HTML specifikáció szerint az idézőjeleket ebben az esetben a kliens eszköz (vagyis a böngésző) kell elhelyezze a dokumentumban, a dokumentum által beállított nyelv alapján. A CSS-ben módosíthatod a felhasznált idézőjeleket — erről egy későbbi cikkben lesz szó, a Szöveg stílusozása CSS-sel leírásban.

Egy példa a q elem használatára:

<p>Ez nem végződött túl jól a számomra. Hát igen,
       <q lang="fr">c'est la vie</q>, ahogy a franciák mondják.</p>

Próbáld ki élőben

Kiemelés

A HTML-ben két módszer van arra, ha egy szövegrészt ki akarunk emelni az olvasónak, például hibákat, figyelmeztetéseket vagy megjegyzéseket. A vizuális böngészőkben ezt egy eltérő színt vagy betűtípust, esetleg félkövér vagy dőlt megjelenést jelent. A képernyő-felolvasók használói számára a kiemelés eredmény egy más hangtónus vagy egyéb hangjelzés lehet.

Az olyan szövegre, amelyet ki akarsz emelni, használhatod az em elemet, mint az alábbi példában:

<p><em>Megjegyzés:</em> a bojlert ki kell húzni 
            éjszakára. </p>

Próbáld ki élőben

Ha a teljes bekezdést ki kell emelned, de a bekezdésen belül is van olyan rész, amelyet ismét kiemelnél, akkor használd a strong elemet, amely egy erősebb kiemelést jelent, hasonlóan az alábbi példához:

<p><em>Megjegyzés: a bojlert ki <strong>kell</strong> húzni
        minden éjszaka, különben felrobban -
        <strong>és mind meghalunk</strong></em>.</p>

Próbáld ki élőben

Dőlt kiemelés

Az általános vélekedés szerint a dőlt kiemelés nem a szöveg értelmét jelöli, ilyenformán az i elem használata nem ajánlott (hasonlóan a leírás következő szakaszában bemutatott megjelenítési elemekhez).

Van viszont néhány olyan helyzet, amikor a tartalom dőlt kiemelése vitathatóan bár, de helyes lehet. Vannak olyan esetek, amikor egy kifejezés dőlt kiemelése a legegyszerűbb módszer ahelyett, hogy egy egyébként máshol nem használt speciális elemet vezetnénk be rá. Ilyenek lehetnek például a hajók nevei, a tévésorozatok, könyvek vagy filmek címei, technológiai fogalmak és más rendszertani megnevezések.

Az érvelés szerint a dőlt kiemelés ebben a helyzetben azt jelenti, hogy a megjelölt szöveg különleges, és a környezet mutatja meg, hogy mennyire különleges a többi részhez viszonyítva. Valóban, a HTML 5 specifikáció vázlatában jelenleg ez áll:

Az i elem olyan szövegrészt jelöl, amelyet más hangon vagy hangszínnel mondunk, vagy egyéb módon eltér a normál kiejtéstől […] Az i elemet csak legvégső esetben használjuk, amikor más semmilyen más elem nem megfelelő.

Mivel az i elem megjelenését is módosítani lehet CSS-ben, hogy ne legyen dőlt, így a „dőlt kiemelés” jelentése ebben a környezetben csak annyi, hogy „valami más”. Én ezt személy szerint nem tartom elfogadhatónak, de már éppen elég precedens van a használatára ebben a formában.

Megjelenítési elemek — soha ne használd őket

A HTML specifikáció tartalmaz néhány olyan elemet is, amelyet általában „megjelenítési” elemnek neveznek, mivel kizárólag arra vonatkoznak, hogy a megjelölt szövegrész hogyan jelenjen meg, és nem arra, hogy mit jelent.

A legtöbb ilyen elemet már érvénytelenként jelölték meg a specifikációban. Ez azt jelenti, hogy van egy más, újabb módszer is, amellyel ugyanazt az eredményt érhetjük el.

Most részletesebben bemutatjuk ezeket az elemeket, de ennek főleg történelmi okai vannak — a modern weblapokon soha ne használd őket. Ezeknek az elemeknek a hatását más módon is elérheted; erről később még fogunk beszélni a Szöveg stílusozása CSS-sel és a Kevéssé ismert szemantikus elemek részekben.

font face="…" size="…"
A közrefogott szöveget a böngésző egy másik betűtípussal jeleníti meg — viszont a betűtípusokat inkább a CSS-ben add meg.
b
A megjelölt szöveg félkövér — ez az esetek többségében azt jelenti, hogy ki akarod emelni a szöveget, úgyhogy használd helyette az em vagy a strong elemeket, amelyekről már beszéltünk korábban.
s és strike
A megjelölt szöveget áthúzza egy vonallal — ha ez csak egy megjelenítési hatás, akkor inkább CSS-ben add meg. Ha viszont azt jelöli, hogy a szöveg törölve lett a dokumentumból, vagy már nem érvényes, akkor használhatod helyette a del elemet, amelyről még később itt is lesz szó.
u
A közrefogott szöveget aláhúzza — ez szinte mindig egy vizuális hatás, így inkább CSS-ben valósítsd meg.
tt
A jelölt szöveg „írógéppel” készült, vagy fix szélességű betűtípussal jelenik meg — ezt megoldhatod CSS-sel, vagy egy pontosabb szemantikus jelöléssel, mint például a fent bemutatott pre elemmel.
big és small
A megjelölt szöveg kisebb vagy nagyobb lesz — ezt inkább CSS-ben valósítsd meg.

Összefoglaló

Ebben a leírásban azokról az elemekről beszéltünk, amelyeket a leggyakrabban használnak szöveges részek megjelölésére. A következő leírásban egy másik típusú tartalomról fogunk beszélni: a listákról.

A szerzőről

Mark Norman Francis

Mark Norman Francis már azelőtt az internettel foglalkozott, hogy a web megszületett volna. Jelenleg a Yahoo!-nál a világ legnagyobb weboldalán dolgozik mint kezelőfelület-tervező, új módszereket és kódolási szabályokat dolgoz ki, valamint nemzetközi támogatást nyújt a minőségi webfejlesztéshez.

A Yahoo! előtt a Formula One Management, a Purple Interactive és a City University vállalatoknál dolgozott különböző minőségben, többek között mint webfejlesztő, CGI programozó és rendszertervező. A http://marknormanfrancis.com/ oldalon blogol.

Fotó: Andy Budd.

A bejegyzés trackback címe:

https://webszabvany.blog.hu/api/trackback/id/tr47683255

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.

Nincsenek hozzászólások.