Skip to content

README.lv.md

Latest commit

 

History

History
360 lines (274 loc) · 8.21 KB

README.lv.md

File metadata and controls

360 lines (274 loc) · 8.21 KB

Tīmeklis un HTML

Vispārējā informācija

  1. Timotijs Džons "Tims" Bērnerss-Lī (angl.: Timothy John "Tim" Berners-Lee):

    • globālā tīmekļa izgudrotājs,
    • Vispasaules Tīmekļa konsorcija (W3C) pašreizējais vadītājs.
    • wikipedia.org
    • w3.org

  2. Vispasaules Tīmekļa konsorcijs (angl.: World Wide Web Consortium jeb W3C) (wikipedia.org):

    • standarti jeb "rekomendācijas"

  3. Hiperteksta iezīmēšanas valoda jeb HTML (no angļu: HyperText Markup Language):

    • tīmekļa lappušu izstrāde;
    • specifikāciju pamatā uztur W3C (wikipedia.org).

HTML

Sintakse

HTML-dokumentu iezīmē ar īpašiem atslēgvārdiem — tagiem.

Iezīmes (angl. tag) uzbūve

  • Simbols <
  • Taga nosaukums
  • Simbols >

Piemērs:

<taga_nosaukums>

Pāra un nepāra tagi

Pāra tagi:

<taga_nosaukums>…</taga_nosaukums>

Nepāra tagi:

<taga_nosaukums />

vai

<taga_nosaukums>

Abi ir pieļaujami, taču pirmais tiek uzskatīts par stingrāku.

Piemērs

Ar tagiem veido elementus.

Eksistē standarta tagu apkopojums:

taču ir pieļaujams izmantot nestandarta tagus.

Atribūti

Atriūtos norāda papildu parametrus tagam. Tie var ietekmēt elementa vizuālam izskatam. Atribūtus liek sākuma tagā, beigu tagā NEKAD neliek.

PAREIZI:

<taga_nosaukums atribūts="vērtība">…</taga_nosaukums>
<taga_nosaukums atribūts="vērtība" />
<taga_nosaukums atribūts="vērtība">

NEPAREIZI:

<taga_nosaukums atribūts="vērtība">…</taga_nosaukums atribūts="vērtība">
Karogatribūts (flags)

Atribūts bez vērtības.

<taga_nosaukums atribūts>…</taga_nosaukums>
<taga_nosaukums atribūts />
<taga_nosaukums atribūts>

Piemērs

Standarta elementi

Blokveida (block) elementi

Virsraksti
<h1>Pirmā līmeņa virsraksts</h1>
<h2>Otrā līmeņa virsraksts</h2>
…
<h6>Sestā līmeņa virsraksts</h6>

Eksistē tikai sešu līmeņu virsraksti. Pārējie HTML-elementi netiek numurēti.

Rindkopa
<p>… … …</p>
<p>… … …</p>
Horizontālais atdalītājs
<hr />
Vienkāršs bloks
<div>
	… … … … … …
	… … … … … …
	… … … … … …
</div>

Piemērs

Rindas (inline) elementi

<strong>stipri izcelts teksts</strong>
<em>izcelts teksts</em>
<span>sagrupēts teksts</span>
<br /> <!-- teksta pārnese -->

Par <strong> un <em> — sk. HTML5 Doctor

Piemērs

Elementi elementu iekšā

Inline-elements blokā

<p>Donec sed odio dui. <strong>Nulla vitae</strong> elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue <em>laoreet</em> rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>

Blokveida elementi blokā

<section>
	<h1>Hello world!</h1>
	<div>
		<p>Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
	</div>
</section>

Atstarpes

Jebkuras atstarpes un tab-simboli, jebkurā skaitā pārlūks attēlo ka vienu atstarpi.

Donec sed odio dui.       Nulla vitae elit libero,
a pharetra augue. 	Donec id elit non mi porta gravida at eget metus.

Rezultāts: Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.

Speciālie simboli

Angl. HTML entities

Uzbūve

  • &
    • nosaukums vai
    • # un numurs (decimālais) vai
    • #x un numurs (heksadecimālais)
  • ;

Piemērs

  • &cent; — ¢
  • &#162; — ¢
  • &#xA2; — ¢

Vērtīgas norādes:

HTML-dokumenta pamatstruktūra

<!doctype html>
<html>
	<head>
		<title>First web page</title>
	</head>
	<body>
		<h1>Hello world!</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
	</body>
</html>

Paskaidrojums:

  • <!doctype html> — HTML-dokumenta deklarācija, tiek rakstīta pirmajā rindiņā
  • <html> — saknes elements, kas satur <head> un <body>
  • <head> — galvene, domāta tehniskās informācijas iekļaušanai (pārlūkam, tīmekļa servisiem)
  • <body> — dokumenta pamatdaļa, kurā tiek iekļauta visa redzamā informācija
  • <title> — dokumenta virsraksts, kurš ir redzams cilnēs (tab) vai grāmatzīmēs (bookmark)

Kodējums

  • Unikods
  • Simbolu kopas
  • kodējumu HTML norāda (info):
    • <meta charset="utf-8" /> — HTML5
    • <meta http-equiv="content-type" content="text/html; charset=UTF-8"> — HTML4

Pašam failam ir jābūt iekodētam UTF-8 kodējumā. Atom to dara pēc noklusējuma.

Vienkāršo elementu apkopojums

  • h1 … h6 — blokveida satura elementi, virsraksti;
  • p — blokveida satura elements, rindkopa (paragrāfs);
  • div — vienkāršs blokveida elements (lapas uzbūvei);
  • hr — blokveida satura elements, horizontālā līnija;
  • a — rindas elements, enkurs, (norāžu (link) izveidošanai);
  • b, strong — rindas elements, treknraksts bez/ar uzsvaru (sk. HTML5 Doctor);
  • i, em — rindas elements, slīpraksts bez/ar uzsvaru (sk. HTML5 Doctor);
  • span — vienkāršs rindas elements.

Strukturētie elementi

Saraksti

  • numurēts ol
  • nenumurēts ul
<ol>
	<li>teksts</li>
	<li>teksts</li>
	<li>teksts</li>
	…
</ol>

<ul>
	<li>teksts</li>
	<li>teksts</li>
	<li>teksts</li>
	…
</ul>

Tabulas

Vienkārša struktūra

<table>
	<tr>
		<th>teksts</th>
		<th>teksts</th>
		<th>teksts</th>
	</tr>
	<tr>
		<td>teksts</td>
		<td>teksts</td>
		<td>teksts</td>
	</tr>
</table>

Pilna struktūra

<table>
	<thead>
		<tr>
			<th>teksts</th>
			<th>teksts</th>
			<th>teksts</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>teksts</td>
			<td>teksts</td>
			<td>teksts</td>
		</tr>
	</tbody>
</table>

Noderīgās saites

  1. w3.org
  2. html5doctor.com

Uzdevums #1

Sastādīt divus HTML dokumentus, katrā ar:

  1. Vienu virsrakstu
  2. Diviem apakšvirsrakstiem
  3. Divām rindkopām (attiecīgām apakšvirsrakstiem), kurās ir:
    • treknrakstā iezīmēti vārdi
    • slīprakstā iezīmēti vārdi
    • norāde uz otru dokumentu
    • norāde uz ārējo resursu, kas atveras jaunajā cilnē

Tekstam izmantot Lorem ipsum ģenerātoru, tādu kā generator.lorem-ipsum.info

Uzdevums #2

Izveidot web-lapas izkārtojuma pamatelementu (augošs uzdevums).

doctype html
html
|
+— head
|	|
|	+— title
|
+— body
	|
	h1 …
	|
	p …