HTML & CSS pradedantiesiems.

HTML ir CSS pradedantiesiems (5 dalis): Tekstų grožinimas

Visi pamokos vaizdo įrašai

Atskiri žodžiai arba visi fragmentai gali būti labai lengvai kursyvuojami ir paryškinami. Pirmiausiai aptarsime paryškinimo variantą. Šiam tikslui yra du HTML elementai - b ir strong.

Sveiki atvykę į <b>PSD-Tutorials.de</b>!
<br />
Sveiki atvykę į <strong>PSD-Tutorials.de</strong>!

Naršyklėje rezultatas atrodo taip:

HTML ir CSS pradedantiesiems (Dalis 05): Tekstų gražinimas

Mūsų pastebėjimai leidžia matyti šią vaizdinę informaciją:

Matyti, kad abu elementai teikia tą pačią rodymą. Tačiau kodėl egzistuoja du skirtingi elementai? Iš tikrųjų tinklalapiuose yra kitų atvaizdavimo būdų, nei žinomų standartinių naršyklių. Pavyzdžiui, pagalvokite apie skaityklę neįgaliesiems ar mobilius įrenginius. HTML W3C siūlomi elementai skirti semantikai paremti. Taigi, dabar b elementas iš tikrųjų nebereiškia, kad tekstas bus paryškintas. Vietoj to, b reiškia tekstą, kuris yra vizualiai paryškintas, neturintis didelės svarbos. Pavyzdžiui, tai gali būti produkto pavadinimai ar raktiniai žodžiai dokumentuose.

Elementas strong anksčiau reiškė stipresnį paryškinimą. em buvo naudojamas reikšmingam, svarbiam tekstui. HTML5 priskiria kitą reikšmę abiem elementams.

Pirmiausia, tekstas su įprastu paryškinimu.

<p>
   Katės yra mieli gyvūnai.
</p>



Dabar toks pat tekstas, tačiau su paryškinimu ant pirmo žodžio.

<p>
   <em>Katės</em>
   yra mieli gyvūnai.
</p>



Naudotas em paryškinimui ant žodžio Katės. Pavyzdžiui, tokioje diskusijoje, kur kalbama, ar šunys ar katės yra milesni.

Dabar pavyko ta patiems elementams panaudoti em ant žodžio yra.

<p>
   Katės
   <em> yra </em>
   mieli gyvūnai.
</p>



Šitą galėtų būti atsakymas diskusijoje, kur niekas nepripažįsta, kad katės yra mieli.

Iš tiesų naršyklėje su em paryškinti fragmentai bus rodomi kursyvu. Tokį pat optinį efektą pasieksime naudodami i elementą.

Pagal HTML5 darbo projektą, i elementas dabar nereiškia kursyvo.

<p>
   Nuostabiai atvykę į
   <i>PSD-Tutorials.de</i>
</p>



Rather šį elementą dabar reiškia, kad norima perteikti kitokią nuotaiką. Įdomu, kad i elementas, pavyzdžiui, naudingas pažymint techninius terminus ar taksonomines sąvokas.

Viskas yra labai teorinė, aš tai suprantu. Principiškai turėtumėte laikytis HTML5 reikalavimų. Bet kita vertus, niekas jums nenupjovė galvos, jei vietoj b naudosite strong.

<p>
 <em>Eilutė su em</em><br />
 <i>Eilutė su i</i><br />
 <strong>Eilutė su strong</strong><br />
 <b>Eilutė su b</b>
</p>



Pabaigoje tai turi spręsti naršyklės gamintojai.

HTML & CSS pradedantiesiems (Dalis 05): Tekstų pagražinimas



Pavartojant minėtus elementus, teksto dizainui atsakingas CSS.

Akronimai su abbr

Akronimui pažymėti naudojamas tas pats elementas, kuris anksčiau buvo skirtas trumpiniams - abbr.

Vokietijos-Austrijos biuras, priklausantis
<abbr title="Pasaulinė pasaulio plėtros konsorcija">W3C</abbr>
nuo balandžio mėnesio 2009 m. yra įsikūręs Potsdamo aukštojoje mokykloje.



Naršyklės, teisingai interpretuojančios abbr elementą, atvaizduoja įtrauktą tekstą pabrauktu.

HTML ir CSS pradedantiesiems (dalis 05): Tekstų išdailinimas

Be to, abbr turėtų būti suteiktas title atributas. Čia įrašomas trumpinio pilnas reikšmė. Jei lankytojas nusileidžia su pelės rodykle ant trumpinio, išraiška yra matoma įrankių patarimo lange.

Adreso informacija su address

Naudodami address elementą galite žymėti adresų informaciją.

<address>
  4eck Media GmbH & Co. KG<br />
  Hauptstraße 20<br />
  17309 Viereck<br />
</address>



Naršyklės įprastai kursyvuoti parodo address elemento turinį.

HTML ir CSS pradedantiesiems (dalis 05): Tekstų gražinimas

Programos kodą pažymėti naudojant code

Code elementas naudojamas pažymėti programos kodą. Šiuose HTML versijose palyginti su ankstesnėmis nieko nepasikeitė. Vis dar code naudojamas šiam tikslui.

<pre>
Das ist ein HTML-Kopfbereich:
  <code>
    <html>
     <head>
     <title></title>
     </head>
  </code>
</pre>



Paprastai code elementą derina su pre elementu, kad programos kodo atitraukimai būtų išlaikyti.

HTML5 specifikacija rekomenduoja code elementui naudoti class atributą. Šis atributas gali būti priskirtas programos kodo naudojamai kalbai code srityje. Čia keletas tipinių pavyzdžių, kaip tokie žymėjimai gali atrodyti:

language-html

language-css

language-javascript

language-php

language-pascal

Ar ir kaip naršyklės įgyvendina šiuos nurodymus, nėra nustatyta W3C.

<pre>
  Das ist ein HTML-Kopfbereich:
  <code class="language-html">
    <html>
      <head>
        <title></title>
      </head>
  </code>
</pre>



Akivaizdu, kad šiuo metu class atributas nieko nepakeičia naršyklėje. Tačiau žmogus, žvelgdamas į puslapio šaltinio kodą, gali sužinoti, kokiai kalbai programos kodas yra pagrįstas.

Mažosiom raidėmis su small

Small elementas iš prigimties buvo naudojamas mažesniam nei įprastam tekstui parodyti. HTML5 versijoje mažosios raidės aiškiai skirtos paryškinti šį mažame šriftelyje esantį tekstą. Toks mažame šriftelyje esantis tekstas, pavyzdžiui, gali būti:

• Autorių teisių informacija

• Atskaitomybės išimtys

• Licencijos sąlygos

• Bendrieji pardavimo sąlygos

W3C aiškiai nurodo, kad small neturėtų būti naudojamas ilgiems teksto blokams.

<small>
  Copyright by PSD-Tutorials.de<br />
  4eck Media GmbH & Co. KG<br />
  Hauptstraße 20<br />
  17309 Viereck
</small>

Patvarkyti tekstą su small

Jūs galite pabraukti žodžius naudodami u elementą. Štai pavyzdys:

<p>Willkommen bei <u>PSD-Tutorials.de</u></p>

Rezultatas naršyklėje atrodys taip:

HTML ir CSS pradedantiesiems (dalis 05): Tekstų grožinimas



Peržiūrėjus rezultatą, iš tikrųjų bus pasiektas norimas efektas. Tačiau reikia pasakyti, kad tai turi savo minusų. Internete pabraukti tekstai žinomi kaip hiperlinkai. Jeigu pabrauktą tekstą ar žodį nurodysite, lankytojai gali manyti, kad tai yra hiperlinkas. Bet bandymas jį paspausti žlugs. Todėl geriau atsisakyti pabraukimo.