Interneto puslapių kūrimas/HTML apžvalga: Skirtumas tarp puslapio versijų

Iš Wikibooks.
Ištrintas turinys Pridėtas turinys
S ~sutvarkyta
70 eilutė: 70 eilutė:


== Eilutės elementai ==
== Eilutės elementai ==
<pre><abbrev>...</abbrev></pre> nurodo santrumpą.

<pre><acronym>...</acronym></pre> nurodo akronimą.

<pre><au>...</au></pre> nurodo autoriaus vardą.
<pre><cite>...</cite></pre> nurodo citatą.
<pre><code>...</code></pre> nurodo kompiuterio programinį kodą.
<pre><del>...</del></pre> nurodo sunaikintą, bet aiškumo dėlei paliktą tekstą. Dauguma naršyklių tai supranta kaip išbraukimą tiesiog.
<pre><dfn>...</dfn></pre> labai retai naudojamas elementas. Skirtas apibrėžimui.
<pre><em>...</em></pre> ''emphasis''. Dažniausiai tiesiog paverstu šriftu tai atvaizduojama neršyklėje.
<pre><ins>...</ins></pre> rodo naujai įterptą tekstą.
<pre><kbd>...</kbd></kbd> tai ką reiktų surinkti klaviatūroje!? Tiesiog naršyklėje rodomas kitoks šriftas.
<pre><lang>...</lang></pre> atskiria teksto dalį parašytą kita kalba nei visuma.
<pre><person>...</person></pre> norodo žmonių vardus.
<pre><q>...</q></pre> norodo tiesioginę kalbą. Gramatiniais dalykais kabutės ir t.t. tada pasirūpina naršyklė.
<pre><samp>...</samp></pre> norodo simbolių pavyzdžius.
<pre><s>...</s></pre> nurodo išbraukimą.
<pre><strong>...</strong></pre> stiprus pabrėžimas, dažniausiai pajuodinama.
<pre><sub align="...">...</sub></pre> apatinis indeksas. Kaip kad formulėse: H<sub>2</sub>O.
<pre><sup align="...">...</sup></pre> viršutinis indeksas. Kaip kad matematikoje laipsnis: 2<sup>2</sup>.
<pre><var>...</var></pre> kintamųjų vardai.


[[kategorija:Interneto puslapių kūrimas]]
[[kategorija:Interneto puslapių kūrimas]]

22:48, 12 rugpjūčio 2007 versija

Č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 sitemoje didelė dalis teksto redaktorių gali tai padaryti. Windows XP skirtą tokį dalyką gali būti sunku rasti nemokamai todėl pasiūlysiu:

Paskui viskas išsaugoma *.html formatu ir galima atidaryti čia pat su naršykle ir pažiurė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 nera 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>Auksciausia antraštė</h1> 
    <p>Pirma pastraipa.</p> 
    <ul> <!-- sužymetas 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

  • <hn>...</hn> 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 toki tekstą koks jis buvo prarašytas, teik 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>

apibudinimų sąrašas ir tuomet jame punkto apibūtinimas

<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 nerš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>

norodo žmonių vardus.

<q>...</q>

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

<samp>...</samp>

norodo 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: H2O.

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

viršutinis indeksas. Kaip kad matematikoje laipsnis: 22.

<var>...</var>

kintamųjų vardai.