Web izstrāde

HTML pamati

HTML veidne (ZIP)

Lejupielādēt Paraksti.online testa veidni

Gatavās veidnes

Praktiskais uzdevums

📝 noformēt tekstu ar HTML tagiem: https://www.w3schools.com/code/tryit.asp?filename=GQET97W2AB9Z

 Tīrs teksts

Teksta noformēšana

Teksta paragrāfus izvieto <p></p> tagos.

<p>Mobilais kases aparāts. Viss nepieciešamais darījumu reģistrēšanai – kase, maksājumu karšu terminālis, svītrkodu lasītājs un čeku printeris.</p>

Teksta sadalīšanai jaunā rindā izmanto break jeb <br> – to izmanto vienreiz, tam nav aizvēršanas taga. WordPress redaktorā tā ir kombinācija Shift + Enter.
Šis ir gada nozīmīgākais notikums.
Tā ir ikgadēja tradīcija mūsu valstī.
Non-breaking space &nbsp; – izmantot, lai novērstu teksta lauzšanu: 20&nbsp;000&nbsp;EUR

Šis ir gada nozīmīgākais notikums.<br>Tā ir ikgadēja tradīcija mūsu valstī.

Teksta noformēšana ar bold, italic un underline.

<strong>bold</strong>, <em>italic</em> un <span style="text-decoration: underline;">underline</span>

Underline izmantot tikai ļoti lielas vajadzības dēļ! Span un style atribūtus aplūkosim vēlāk.

Papildus var izmantot nosvītrotra teksta formatējumu, izmantojot tagus <del></del> vai <s></s>

Man lika griezties vērsties pie Jums!

Man lika <del>griezties</del> vērsties pie Jums!

 🐶 Emoji ikonas

Emoji ikonu attēlojumu nosaka pārlūkprogramma, vizuāli ikonas var atšķirties dažādās ierīcēs un pārlūkprogrammās. Emoji ikonas atliek vien iekopēt tekstā, lai tās tiktu attēlotas. Tie nav attēli, kurus vajag saglabāt.

Emoji ikonu saraksti

https://getemoji.com/

https://emojipedia.org/symbols/

Atdaloša līnija

Ievietot atdalošu līniju var ar tagu <hr>. Tas ir līdzīgi kā <br> tikai vienreiz un netiek noslēgts. Atdalošās līnijas var dažādi noformēt.

<hr>

Saišu ievietošana

Saites var tikt izvietotas gan uz iekšējiem, gan uz ārējiem resursiem, kā arī kā enkursaites (piemēram, manalapa.lv/sadala.html#parmums). Par saišu noformēšanu vairāk lasiet rakstā “Veidosim saprotamas saites labākai lietojamībai“.

href – adrese uz resursu. Tā var būt saite uz noteiktu lapu vai datni, piemēram, uz PDF dokumentu, kā arī uz īpašu saiti kā e-pasts (href=”mailto:edgars@picco.media”), tālrunis (tel:+3712917171) u.c.

rel=”nofollow” – saitēm, kuras ved uz ārējiem resursiem Google/SEO reputācijas dēļ, papildus tiek pievienots šāds atribūts. Pēc noklusējuma saitēm tas netiek pievienots un tā tiek uztverta par follow saiti.

title – dažkārt pievieno saitēm arī aprakstošo tekstu. Tas var iedot papildus atdevi Google optimizācijai, bet netiek plaši izmantots. Redzams ilgāk paturot peles kursoru uz saites.

saturs – teksts vai attēls, kuram šī saite tiek pievienota. Tā var būt gan resursa saites kopija kā https://www.delfi.lv, gan jebkāds cits teksts, piemēram, Delfi.lv. To mēdz dēvēt par enkurtekstu.

<a href="https://delfi.lv" rel="nofollow" target="blank" title="Latvijā lielākais ziņu portāls">Teksta saites piemērs</a>
Saite uz attēla

Saites elements ir primārais, tas «apvij» attēla kodu

<a href="https://delfi.lv"><img src="delfi-logo.png"></a>

Virsraksti (headings)

<h1>Lapas virsraksts</h1>
<h2>Otrā līmeņa virsraksts</h2>
<h3>3.līmeņa virsraksts</h3>
<h4>Vēl mazākas nozīmes virsraksts</h4>

Sarakstu noformēšana

HTML standartā ir divu veidu saraksti – ar numerāciju un ar iezīmēm (bullets).

Bez numerācijas – tiek izmantots <ul> tags kā ietvars, kur izvietot saraksta tagus <li>

  • Cēsis
  • Sigulda
  • Jūrmala
<ul>
  <li>Cēsis</li>
  <li>Sigulda</li>
  <li>Jūrmala</li>
</ul>

Ar numerāciju – tiek izmantots <ol> tags kā ietvars, kur izvietot saraksta tagus <li>

  1. Cēsis
  2. Sigulda
  3. Jūrmala
<ol>
<li>Cēsis</li>
<li>Sigulda</li>
<li>Jūrmala</li>
</ol>

Citāta izcēlums

Tam tiek izmantots <blockquote> tags.

Šis ir satura izcēlums un tādēļ te tiek izmantots citāts.

<blockquote>Šis ir satura izcēlums un tādēļ te tiek izmantots citāts. </blockquote>

Attēlu ievietošana

Attēlu ievieto ar <img> tagu, tas nav jāaizver. Jebkuram attēlam, lai to izmantotu, ir jāatrodas uz servera.
src – norāda uz attēla atrašanās vietu.

  • Relatīvā saite (relative URL) – saite uz savu serveri <img src=”/images/attels1.jpg“>
  • Absolūtā saite (absolute URL) – izmantota saite uz ārēju serveri <img src=”https://serveris.lv/images/attels1.jpg“>
    Šo sauc par hotlinking. Atsevišķi serveru īpašnieki to var aizliegt un bilde netiks ielādēta.
  • Saite uz attēla pieprasījumu https://loremflickr.com/320/320/cat (nav galā konkrēts fails ar paplašinājumu, piemēram, jpg, png u.c.)

Izmēri: ieteicams izmantot

  • Platums (width): width=”450″ – klāt neraksta px vai citas mērvienības, pēc noklusējuma tie ir pikseļi.
  • Augstums (heigth): height=”500″
<img src="/images/attels1.jpg" width="450" height="500">

Alternatīvais teksts

Paskaidro attēla saturu, izmanto īsu aprakstu – nozīmīgs pieejamībai un Google optimizācijai

<img src="https://loremflickr.com/200/200/dog" alt="Suns guļ uz grīdas">
ģeneratori attēlu vietām

Iframe (citas lapas satura ievietošana)

Visbiežāk iframe saturs tiek izmantots video satura ievietošanai lapā.
https://www.youtube.com/embed/_4kHxtiuML0

<iframe width="560" height="315" src="https://www.youtube.com/embed/_4kHxtiuML0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

DIV konteiners

<div> tags tiek izmantots, lai veidotu noteiktus blokus – tie ir noderīgi, lai vēlāk veidot dažādus izkārtojumus, kā arī stilus.

<div>
<p>Informācija par notikumu</p>
</div>

Digitālā mārketinga un lietotāju pieredzes eksperts. Saziņai: edgars@picco.media

Related Posts