Interneto puslapių kūrimas/HTML apžvalga

Čia mes be jokių apylankų kibsime į HTML ir pamėginsime ją išmokti. Geriausia mokykla yra realūs pavyzdžiai, todėl kai atsidarote puslapį ir matote įdomių elementų nepatingėkite pažiūrėti to puslapio kodą (pasiekiamas iš praktiškai kiekvieno naršyklės kaip "view code" ar pan. HTML galima rašyti su bet kokiu teksto redaktoriumi, bet patogiau jei spalvomis išryškinami atskiri objektai. Nes juk tekstas čia maišomas su nurodymais mašinai. Linux sistemoje tai gali padaryti dauguma teksto redaktorių. Windows XP sistemoje tam skirtą programą gali būti sunku rasti nemokamai todėl pasiūlysiu:

http://notepad-plus.sourceforge.net/

Paskui viskas išsaugoma *.html formatu ir galima atidaryti čia pat su naršykle ir pažiūrėti kaip tai atrodo.

Pagrindinės taisyklės HTML

Elementų ir atributų vardai yra laikomi vienodais nepaisant to ar jie didžiosiomis ar mažosiomis raidėmis parašyti. Atributų vertės nėra laikomos vienodomis jei nesutampa raidžių rėžimai.
Nauja byla pradedama su <!doctype...> toliau pagrindinė dalis kuri pradedama su <html>, o baigiama su </html>, o ją sudaro antraštė ir teksto dalis.
Antraštė pradedama su <head> ir baigiama su </head>
Teksto dalis pradedama su <body> ir baigiama su </body>
Komentarai arba truputį slaptos žinutes rašomos

Pavyzdys

  <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN"> 
  <html>
  <head> 
    <!-- Pavyzdėlis mūsų --> 
    <title>Čia antraštė</title> 
  </head>
  <body> 
    <h1>Aukščiausia antraštė</h1> 
    <p>Pirma pastraipa.</p> 
    <ul> <!-- sužymėtas sąrašas --> 
      <li><p>Pirmas punktas</p></li> 
      <li><p>antras punktas su hipertekstu 
          <a href="info.html">į</a> kitą bylą.</p></li> 
    </ul>
    <h2>Antro lygio antraštė</h2>
    <p>Kita pastraipa, <img alt="Paveikslėlis" 
       align="bottom" src="mypic.gif">  su paveikslėliu</p> 
   </body>
   </html>

Antraštės elementai

<title>...</title>

trumpas dokumento aprašymas, rekomenduojamas ilgis ne daugiau 64 simboliai.

<base href="url">

standartinė struktūra visiems nebaigtiems url puslapyje.

<isindex>

nurodo, kad tai skriptas kuris daro kažką, tarkim ieško.

<meta ...>

meta informacija jei ją teikia serveris. Atributai yra http-equiv, name, content

Skyrių antraštės

<h''n''>...</h''n''>

kur n tai skaičius nuo 1 iki 6. Jie dedami tarp paragrafų.

Pastraipų kūrimas

<p>...</p>

paprasto teksto pastraipa.

<address>...</address>

adreso informacijos blokai.

<blockquote>...</blockquote>

blokų išryškinimai. Jie turi turėti viduje dar ir pastraipas ar kitas struktūras.

<banner>...</banner>

tai pastaviai ekrane išsilaikanti informacija.

<note role="...">...</note>

prideda užrašus, prierašus (footnote, sidenote) ir pan.

<pre>...

išlaiko tokį tekstą, koks jis buvo parašytas, tiek pat tarpų, ten pat nauja eilutė ir t.t., tai labai naudinga

<hr>

horizontali linija,

<fig src="url">

sukuria rėmelį paveikslėliui, o

<caption>...</caption>
<credit>...</credit>

panaudojama tuomet paveikslėlio aprašui ir viskas užbaigiama su </fig>.

Sąrašai

<lh>...</lh>

sąrašo antraštė.

<ol>...</ol>

sunumeruotas sąrašas.

<ul>...</ul>

sąrašas su taškais.

<dl>...</dl>

apibūdinimų sąrašas ir tuomet jame punkto apibūdinimas

<dt>...</dt>

apibūdinimas. Dažnesnė forma:

<DL>
<DT>ugnis
<DD>karšta ir degina
<DT>vanduo
<DD>šaltas ir šlapias
</DL>

Visa tai galima naudoti kartu.

Eilutės elementai

<abbrev>...</abbrev>

nurodo santrumpą.

<acronym>...</acronym>

nurodo akronimą.

<au>...</au>

nurodo autoriaus vardą.

<cite>...</cite>

nurodo citatą.

<code>...</code>

nurodo kompiuterio programinį kodą.

<del>...</del>

nurodo sunaikintą, bet aiškumo dėlei paliktą tekstą. Dauguma naršyklių tai supranta kaip išbraukimą tiesiog.

<dfn>...</dfn>

labai retai naudojamas elementas. Skirtas apibrėžimui.

<em>...</em>

emphasis. Dažniausiai tiesiog paverstu šriftu tai atvaizduojama naršyklėje.

<ins>...</ins>

rodo naujai įterptą tekstą.

<kbd>...</kbd></kbd> tai ką reiktų surinkti klaviatūroje!? Tiesiog naršyklėje rodomas kitoks šriftas.
<pre><lang>...</lang>

atskiria teksto dalį parašytą kita kalba nei visuma.

<person>...</person>

nurodo žmonių vardus.

<q>...</q>

norodo tiesioginę kalbą. Gramatiniais dalykais kabutės ir t.t. tada pasirūpina naršyklė.

<samp>...</samp>

nurodo simbolių pavyzdžius.

<s>...</s>

nurodo išbraukimą.

<strong>...</strong>

stiprus pabrėžimas, dažniausiai pajuodinama.

<sub align="...">...</sub>

apatinis indeksas. Kaip kad formulėse: H₂O.

<sup align="...">...</sup>

viršutinis indeksas. Kaip kad matematikoje laipsnis: 2².

<var>...</var>

kintamųjų vardai.

<b>...</b>

pajuodinimas.

<big>...</big>

didelės raidės.

<br>

nauja eilutė.

<i>...</i>

pasvirusios raidės.

<small>...</small>

mažos raidės.

<tt>...</tt>

spausdinimo mašinėles tipo raidės.

<u>...</u>

pabraukta.

Hipertekstas

Priejome prie svarbiausios dalies - hiperteksto.

<a href="url#vieta">...</a>

tai tam tikri žodžiai, dažniausiai paryškinami mėlynai, ant kurių paspaudus pereinama į kitą dokumentą ar net į kitą puslapį. Nuoroda tai url, o #vieta tai tam tikra to puslapio vieta. #vieta labai dažnai nerašomas. Jei nerašysime url, o paliksime tik #vieta, tai sukursime nuorodą į to paties dokumento kitą vietą. Tai irgi naudinga.

<a id="vieta">...</a>

taip nurodoma #vieta.

Paveikslėliai

Išorinius paveikslėlius galima nurodyti kaip ir hipertekstą.

<img src="url" [align="..."] [alt="..."] [ismap|usemap]>...</img>

align vertės gali būti top, middle arba bottom. Moderniose naršyklėse alt nerodo nieko, bet dėl standarto reikėtų ten įrašyti tekstinę alternatyvą, kuri skirta toms naršyklės kurios nekrauna paveikslėlių.

<a href="http://puslapis.gg/cgi-bin/imagemap/mypic">
      <img src="http://puslapis.gg/mypic.gif" alt="Image map" ismap>
      </a>

taip sukuriamas paveikslėlis, ant kurio paspaudus pereinama į kitą dokumentą ar puslapį.

<img src="http://puslapis.gg/mypic.gif" alt="Image map" usemap="#mine">
      <map name="mine">
        <area name="circle" coords="10,20,..." href="url"<
      </map>

o taip apibūdintas paveikslėlis turi tik vieną paspaudimui "jautrią" vietą.

Formos

<form method="..." action="url">...</form>

taip sukuriama forma. Parametras method gali būti GET arba POST (pagal HTTP protokolą). URL čia turi būtinai nukrepti i CGI skriptą.

Formos elementai

Jie rašomi formos viduje ir bent keli yra būtini.

<textarea name="..." rows="n" cols="n">...</textarea>

teksto įvesties laukas.

<input name="..." type="..." [...]>

viena eilutė tekstui įvesti. Galimos type vertės:
text, checkbox, radio, hidden, password, reset, file, scribble, audio ir submit. Kiti galimi atributai:
align, checked, size, maxlength, src ir value. Pagal angliškus žodžius čia manau nesunku atsekti reikšmes.

<select name="..." [multiple]>...</select>

taip sukuriami meniu.

<option [value="..."]>...[</option>]

o taip punktai meniu viduje. Jei value nenaudojamas, tada pasirinkimas yra tai, kas yra turinyje.
Tai kiek painoka, todėl parodysiu pavyzdį.

Formos pavyzdys

<hr>
    <form method="GET" action="http://saitas.gg/cgi-bin/skriptas">
      <p>Name: <input name="vardas" type="text" size="20"><br>
         Naršyklė: <select name="opsys">
        <option>FireFox<option>IE6<option>IE7<option>Opera<option></select></p>
      <p><textarea name="comments" rows="4" columns="40"> 
         Parašyk čia nuomonę apie savo naršyklę</textarea></p>
      <p><input type="submit"> <input type="reset"></p>
    </form> 
  <hr>

Lentelės

<table [frame="..."] [border]>...</table>

taip sukuriama lentelė.

<caption>...</caption>

užrašoma antraštė lentelės.

<tbody>...</tbody>

pradedama formuoti lentelė. Šis parametras kaip ir tbody ar tfoot lentelės išvaizdos nekeičia daugumoje naršyklių.

<tr>...</tr>

atskiriamos taip eilutės.

<th>...</th>

išryškinti langeliai.

<td [colspan=x] [rowspan=x]>...</td>

paprasti langeliai.

Lentelės pavyzdys

<table border="1" width="600">
     <colgroup span="4" width="150">
     </colgroup>
<thead>
     <tr>
          <td>cell 1-1</td>
          <td>cell 1-2</td>
          <td>cell 1-3</td>
          <td>cell 1-4</td>
     </tr>
</thead>
<tbody>
     <tr>
          <td>cell 2-1</td>
          <td>cell 2-2</td>
          <td>cell 2-3</td>
          <td>cell 2-4</td>
     </tr>
     <tr>
          <td>cell 3-1</td>
          <td>cell 3-2</td>
          <td>cell 3-3</td>
          <td>cell 3-4</td>
     </tr>
</tbody>
<tfoot>
     <tr>
          <td>cell 4-1</td>
          <td>cell 4-2</td>
          <td>cell 4-3</td>
          <td>cell 4-4</td>
     </tr>
</tfoot>
</table>

Ir tai atrodo taip: http://www.htmlite.com/ATEX008.htm

Matematika

<math [model="..."]>...</math>

skirta formulėms.

<box>...</box> arba tiesiog ()

visi viduje esantys simboliai sujungiami į vieną visumą.

<root root="n">

n-tojo laipsnio šaknis.