Vieta manām pārdomām par tehnoloģijām (un ne tikai par tām), interesantākām tehnoloģiju un zinātnes ziņām un sasniegumiem, kā arī dažiem jokiem jautrākai dzīvei.

trešdiena, 2013. gada 24. aprīlis

HTML un CSS pamati: ievads

HTML ir vienkārša valoda un tai ir vēl vienkāršāka struktūra. Gluži tāpat kā visam ir sākums un beigas, tad arī HTML ir sākums un beigas - ir sākuma tags piemēram, šāds: <HTML> un tam ir šāds beigu tags </HTML>.  Kā šajā gadījumā var pamanīt, tagu nosaukumi nemainās, bet atšķirība ir tikai tajā faktā, ka noslēdzošam tagam ir slīpsvītra - /. Tā arī apzīmē noslēdzošā tagu un tā ir arī atšķirība.
Bet ir arī elementi, kuri ir tagi paši par sevi un tiem nav noslēdzošā taga, piemēram, <BR />, bet tad slīpā svītra taga beigās nozīmē, ka šis tags ir noslēgts.

Bet nu pievērsīsimies pašai HTML struktūrai.
HTML dokuments vienmēr sākas un beidzas ar tagiem <HTML> un </HTML>. Un sākumā ir tikai atverošais tags, kas vienmēr sākas ar <!doctype HTML>, lai pārlūkprogramma saprastu, kādas versijas HTML tiek izmantots šajā dokumentā.
Un viss šis dokuments sastāv no 2 lielām daļām - galvenes un dokumenta ķermeņa.
Galvene tiek ierobežota ar tagiem <HEAD> un </HEAD>. Šajā sadaļā tiek norādīta visa informācija, kas netiek tiešā veidā attēlota uz ekrāna, bet ir ietekme uz pašu lapu un informācijas attēlojumu tajā.
Šajā tagu blokā ir iespējams pievienot vēl citus tagus. Nepieminēšu un neaprakstīšu visus tagus, bet norādīšu tikai pašus nepieciešamākos, kas šeit būtu jāattēlo gandrīz vai obligātā veidā.

Pirmais  obligātais tags ir meta tags, kas norāda, kādā teksta kodējumā tiks attēlota HTML lapā, t.i., lai lapa tiktu attēlota pareizi un tajā netiktu attēloti dažādi ķeburi. Vislabāk ir norādīt kodējumu UTF-8, jo tajā gandrīz visās valodās varēs norādīt korektu tekstu. HTML datnē tas tiek rakstīts šādā izskatā: 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  

Otrais obligātais tags ir virsrakstu tags <TITLE> un </TITLE>. Tam pa vidu tiek rakstīts virsraksta teksts, kas tiek attēlots pārlūkprogrammas virsrakstjoslā. HTML datnē tas tiek rakstīts šādā izskatā:
<TITLE>Lapas virsraksts</TITLE>

Trešā lieta, ko var iekļaut HTML datnē, ir CSS stilu definīcijas, kas tiks izmantotas HTML lapas izdaiļošanā. Tas nav obligāti veicams darbs, jo šādus stilus ir iespējams rakstīt klāt pie katra taga pašā HTML datnē. Bet ir iespējams visu šo informāciju norādīt vienā datnē un tad nav nepieciešams katru reizi šo izdaiļošanu pievienot katram tagam klāt. Un šo datni norāda šajā speciālajā tagā.  HTML datnē tas tiek rakstīts šādā izskatā:
<link rel="stylesheet" type="text/css" href="datne.css" />

Un ceturtā lieta, ko es ieteiktu obligāti pievienot HTML lapai, ir JavaScript tags, kurā tiek norādīta datne, kas ir paredzēts dažādu JavaScript funkciju un mainīgu definēšanai un izmantošanai gan dažādu interaktivitāšu ieviešanai, gan arī dažādu datu apstrādei. HTML datnē tas tiek rakstīts šādā izskatā: 
<script type="text/javascript" src="datne.js"></script>

HTML lapas ķermenis tiek ierobežots ar tagiem <BODY> un </BODY>. Šajā tagu iedaļā mēs arī attēlojam visu to informāciju un izskatu, ko mēs redzam, kad atveram vaļā kādu mājaslapu. Un šeit būs ļoti daudz tagu, ko aprakstīt un apskatīt, bet to darīšu nākamajos rakstos.

Gandrīz katram tagam ir iesējams norādīt dažādus atribūtus, kas ir paredzēti gan tikai kādam konkrētam tagam un citiem tagiem tas nederēs, gan arī ir tādi atribūti, kas ir lietojami arī citos tagos. Šos atribūtus ieraksta atverošā tagā un tas izskatās šādā veidā:
<a id="manas_saites_ID" class="manas_saites_izskats" href="http://www.buldozers.lv">
Bet to apskatīsim pie katra taga atsevišķi un katram tagam tas arī tiks izskaidrots.

Bet kas tad tā par programmēšanu, ja nav norādīts kurā vietā to var darīt? Gan jau ir cilvēki, kam patīk izmantot dažādas izstrādes rīkus, kurā var veidot gan HTML lapas, gan arī CSS stilus un JavaScript programmas. Bet man pašam labāk patīk izmantot parastu teksta redaktoru Notepad++, kas ir bezmaksas produkts. Jo tas jau uzreiz pats automātiski saprot, ka grib rakstīt HTML datni un piedāvā atbilstošu formatējumu.
Bet, lai viss veidotos labi un pareizi un pārlūkprogrammā tiktu attēlots bez ķeburiem, ir jāievēro dažas svarīgas lietas. Zemāk norādīšu pamācību vienkāršāko veidu, kā pareizi izveidot HTML datni ar šo programmu.
1. Pats galvenais, tam ir jābūt uzinstalētam uz datora. Atveram to vaļā.
2. Norādām pareizo kodējumu datnei, kurā mēs veidosi HTML lapu. To var atrast izvēlnē un jānospiež uz Kodējums un pēc tam ir jāizvēlas Kodēt UTF-8 kodējumā. Kad būsim to izvēlējušies, tad programmas apakšējā joslā labajā pusē parādīsies uzraksts UTF-8.

3. Uzreiz saglabājam to kā HTML datni, lai programma saprot, ka mēs veidosim HTML lapu. Izvēlnē izvēlamies Fails un pēc tām Saglabāt (vai arī uz klaviatūras nospiežam Ctrl+S) un atvērtajā logā norādām vietu, kur gribēsim glabāt savas HTML datnes. Tad norādām datnes nosaukumu un tam obligāti ir jābeidzas ar .html.
Un obligāti pie Save as type jānorāda Hyper Text Markup Language file (*.html; *.htm)

4. Kad ir saglabāts, varam rakstīt mums jau zināmās lietas.
Beigās saglabājam šo datni un atveram to vaļā ar kādu pārlūkprogrammu.
Un mūsu pirmā HTML lapa ir gatava!

Ja ir ko teikt vai arī ir kādi jautājumi šajā sakarā, tad droši vari tos atstāt komentāru laukā.

4 komentāri:

  1. OK. Vienmēr norādam doctype.

    <!doctype html>

    Meta content-type (http hederu injekcija no html) ir visur strādājošs un daudz vienkāršāks html5 analogs:

    <meta charset="utf-8"/>

    "Mana pirmā lapiņa!" ieteiktu ielikt kādos nebūt tagos (<p> vai <h1>).

    Ievietojot css, js un pārējo "type" propertiju norādīt sen jau vairs nevajag. Tā ir lieka izšķērdība, jo javascripts vienmēr būs javascripts (kādreiz bija vbscripts un vēl pārītis), bet stailšīti vienmēr būs css (vismaz by default).

    AtbildētDzēst
    Atbildes
    1. Paldies par html taga aizrādījumu. Esmu papildinājis šo rakstu, lai šis tiktu ņemts vērā.

      Par pārējiem tagu ieteikumiem (meta, css un javascript) - tie ir neobligāti HTML5, bet ne HTML4. Iesākumā tiks apskatīti tikai HTML 4.01 elementi. Pēc tam jau arī skatīs HTML5, kad neliels pamats būs zināms.

      Par pirmo lapiņu - vēlāk to arī papildinās ar citiem elementiem un izskaistinās. Tagad ir tikai piemērs ar pliku tekstu, bez tagiem.

      Dzēst
  2. Bet ir editori kuros tu vari iesakt ar vienkarsu < html> tagu

    AtbildētDzēst
    Atbildes
    1. Rakstīt jau var un arī pārlūkprogrammas to saprot un visu attēlo kārtīgi.
      Tas !doctype tikai norāda un sniedz instrukcijas, kādas versijas HTML tiek izmantots šajā dokumentā.
      Ir ieteicams to norādīt, lai pārlūkprogramma zinātu, ar kādas versijas HTML dokumentu tai būs darīšana.

      Dzēst