astkhq.cc

Tēma

Attēli un saites ​

Attēli ​

Lai ievietotu attēlu tīmekļa lapā, tiek izmantota birka <img>. Tomēr, lai attēls pareizi parādītos, ir jānorāda arī vairāki atribūti.

Atribūtu nozīme ​

Piemērs: <img src="image.jpg" alt="nosaukums" width="500px" height="600px">

  • <img> - birka, kas ievieto attēlu;
  • src="..." - attēla faila ceļš vai interneta adrese;
  • alt=".." - alternatīvais teksts, kas tiek rādīts, ja attēlu nevar ielādēt;
  • width="...px" - attēla platums px;
  • height="...px" - attēla augstums px.

Attēlu var ievietot divos veidos: no lokāla faila vai no interneta.

Attēls no lokāla faila ​

Attēla fails atrodas tajā pašā mapē, kur fails index.html.

index.html
html
<img src="image-example1.png">

🖥️ Iznākums

image-example1

Attēls no interneta ​

Tiek izmantota saite uz attēlu internetā.

index.html
html
<img src="https://docusaurus.io/img/docusaurus.svg">

🖥️ Iznākums

image-example1

🚧 Uzmanību!

Ievietojot attēlu no interneta, pārliecinies, ka ievieto saiti uz pašu attēlu, nevis uz rakstu vai mājaslapu.

Saites beigās parasti jābūt attēla faila paplašinājumam, piemēram: .jpg, .jpeg, .png, .svg, .webp utt.

✅ Pareizi:

html
<img src="https://docusaurus.io/img/docusaurus.svg">

❌ Nepareizi (tā ir saite uz lapu, nevis uz attēlu):

html
<img src="https://docusaurus.io/img/docusaurus">

Saites ​

Lai izveidotu saiti uz citu lapu vai resursu, tiek izmantota birka <a href="..." target="_blank">...</a>.

Atribūtu nozīme ​

  • <a>...</a> - saites birka, kurā iekšpusē tiek rakstīts saites teksts;
  • href="..." - adrese, uz kuru novirza saite, piemēram, google.com;
  • target="_blank" - nosaka, kā saite tiek atvērta:
    • _self vai nekas - tajā pašā pārlūka logā,
    • _blank - jaunā cilnē.

Prakses piemērs ​

index.html
html
<a href="https://astkhq.cc" target="_blank">Click me</a>

Noderīgi materiāli ​

HTML Links
https://www.w3schools.com/html/html_links.asp
HTML Images
https://www.w3schools.com/html/html_images.asp