HTML un CSS iesācējiem

HTML un CSS iesācējiem (daļa 05): Teksti izrotāšana

Visi pamācības video HTML un CSS iesācējiem

Atsevišķus vārdus vai pilnīgas frāzes ir ļoti viegli padarīt kursīvu un treknrakstu. Vispirms par treknrakstu. Tam ir pieejamas divas HTML elementu opcijas: b un strong.

Laipni lūgti vietnē <b>PSD-Tutorials.de</b>!
<br />
Laipni lūgti vietnē <strong>PSD-Tutorials.de</strong>!

Pārlūkot iznākumu pārlūkprogrammā sniedz šādu attēlu:

HTML un CSS iesācējiem (daļa 05): Tekstus sakārtot visai.

Apgalvot var, ka abas elementu opcijas nodrošina identisku attēlojumu. Bet kāpēc tad pastāv divas atšķirīgas opcijas? Patiesībā mājaslapām ir citi attēlojuma veidi kā zināmajiem standarta pārlūkprogrammām. Pieminam lasītājus neredzīgajiem vai mobilajiem ierīcēm. Ar HTML elementiem, kas piedāvāti W3C, tiek veicināta semantika. Tātad, b tagam tagad faktiski nav jānozīmē treknraksta teksts. Drīzāk b nozīmē vizuāli uzsvērtu tekstu, kas neuzrāda paaugstinātu svarīgumu. Tas varētu būt, piemēram, produkta nosaukumi vai atslēgasvārdi dokumentos.

strong tags līdz šim apzīmēja izteiktāku uzsvaru. em savukārt tika izmantots, lai uzsvērtu svarīgu tekstu (emfatiski). strong iepriekšējās HTML versijās bija em pastiprinājums. HTML5 abiem tagiem piešķir citu nozīmi.

Vispirms teksts ar parasto uzsvaru.

<p>
   Kaķi ir mīlīgas radības.
</p>



Tagad atkārtoti tāds pats teksts, šoreiz uzsvērots pirmajā vārdā.

<p>
   <em>Kaķi</em>
   ir mīlīgas radības.
</p>



Izmantojot em, uzsvērums tiek likts uz vārdu Kaķi. Tas varētu būt noderīgi diskusijās, kurās tiek apspriests, vai suņi vai kaķi ir saldāki.

Tagad šajā piemērā varētu pielietot em tagu arī vārdam ir.

<p>
   Kaķi
   <em> ir </em>
   mīlīgas radības.
</p>



Šajā konkrētajā gadījumā tas varētu būt atbilde diskusijā, kur kāds apgalvo, ka kaķi vispār nav nekādi saldi.

Faktiski ar em izrotātas daļas pārlūkā tiek parādītas kursīvā stilā. Tādu pašu vizuālo efektu var panākt, izmantojot i tagu.

Pēc HTML5 darba projekta, i tags tagad vairs nenozīmē kursīvu tekstu.

<p>
   Silti sveicināti vietnē
   <i>PSD-Tutorials.de</i>
</p>



Šo elementu tieši no tagad vēlamies, lai nodibinātu citu garu. Piemēram, i tags ir interesants, lai apzīmētu tehniskus izteikumus vai taksonomiskās norādes.

Viss šķiet teorētiski, zinu. Pamatā jums vajadzētu censties ievērot HTML5 norādes. Tomēr neviens jums par to nedolcēs galvu, ja izmantosiet strong vietā b.

<p>
 <em>Rindkopa ar em</em><br />
 <i>Rindkopa ar i</i><br />
 <strong>Rindkopa ar strong</strong><br />
 <b>Rindkopa ar b</b>
</p>



Galvenais, šeit ir jārīkojas pārlūka ražotājiem.

HTML un CSS iesācējiem (5. daļa): Teksta veidošana pievilcīgāku



Zīmējot ar minētajiem elementiem aprīkotus tekstus, galvenokārt par izskatu atbild CSS.

Akronīmi ar abbr

Akronīma izcelšanai tiek izmantots tas pats elements, kas līdz šim bija paredzēts saīsinājumiem, proti, abbr.

Vācu-Austrijas birojs
<abbr title="Pasaules Tīmekļa Konsorcija">W3C</abbr>
Kops aprīlis 2009. gada savu būtenu ir izveidojis Potsdamas Augstskolā.



Pārlūkprogrammas, kas pareizi interpretē abbr elementu, atzīmē iekļauto tekstu ar pasvītrojumu.

HTML & CSS iesācējiem (daļa 05): Teksta noformēšana

Papildus jāpiešķir abbr elementam title atribūts. Tur parasti ieraksta pilnu terminu akronīmam. Kad apmeklētājs virza peles kursoru pāri akronīmam, izteiciens tiek rādīts rīka padomā.

Adrešu uzrādīšana ar address

Par adrese elementu var atzīmēt adreses informāciju.

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



Pārlūki parasti attēlo address elementa saturu kursīvā stilā.

HTML un CSS iesācējiem (daļa 05): Tekstu izrotāšana

Izcelt programmēšanas kodu ar code

Elementu code tiek izmantots, lai izceltu programmēšanas kodu. Šajā ziņā salīdzinot ar iepriekšējām HTML versijām nav notikušas nekādas izmaiņas. Joprojām code tiek izmantots šim nolūkam.

<pre>
Tas ir HTML galvenes sadaļa:
  <code>
    <html>
     <head>
     <title></title>
     </head>
  </code>
</pre>



Parasti code kombinē ar pre elementu, lai saglabātu tās programmēšanas koda atstarpes.

HTML5 specifikācija iesaka izmantot code elementam class atribūtu. Šim atribūtam var piešķirt valodu, kas tiek izmantota code elementā. Šeit ir daži tipiski piemēri, kā šāds izceltājpiemērs varētu izskatīties:

language-html

language-css

language-javascript

language-php

language-pascal

Vai pārlūki šos norādījumus ievēros, W3C nav noteicis.

<pre>
  Tas ir HTML galvenes sadaļa:
  <code class="language-html">
    <html>
      <head>
        <title&ampgt;</title>
      </head>
  </code>
</pre>



Patiešām, šobrīd class atribūtam nav redzamu ietekmi pārlūkprogrammā. Tomēr cilvēki varēs uzzināt, kādā valodā ir programmēšanas kods, ja viņi apskata lapas avotkodu.

Maziem burtiem ar mazs

Elementu mazs sākotnēji izmantoja, lai attēlotu tekstu mazākos burtos. HTML5 nolūkā mazs noteikts pie mazāk būtiskajiem tekstiem. Šie teksti varētu ietvert, piemēram, šādu informāciju:

• Autortiesību informācija

• Atbildības izslēgšana

• Licences noteikumi

• Lietošanas noteikumi

W3C skaidri norāda, ka mazs nevajadzētu izmantot garu tekstu.

<small>
  Autortiesības pieder PSD-Tutorials.de vietnei<br />
  4eck Media GmbH & Co. KG<br />
  Hauptstraße 20<br />
  17309 Viereck
</small>

Tekstu pasvītrot ar u

Jūs varat izcelt vārdus, izmantojot u elementu. Šeit ir piemērs:

<p>Laipni lūgti vietnē <u>PSD-Tutorials.de</u></p>

Rezultāts pārlūkprogrammā izskatās šādi:

HTML un CSS iesācējiem (5. daļa): Teksta noformēšana



Iespējams, šis ir vēlamais efekts, kad rezultāts tiek aplūkots. Tomēr šajā gadījumā ir viens "bet". Tiešsaistes tekstos pasvītroti teksti parasti tiek uzskatīti par hipersaitiem. Ja jūs izceļat tekstu vai vārdu ar pasvītrojumu, apmeklētāji var domāt, ka tā ir saite. Mēģinot uz to noklikšķināt, tas protams neizdosies. Tāpēc jums vajadzētu atturēties no pasvītrošanas.