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

← Ankstesnis keitimas Vėlesnis pakeitimas →

Ištrintas turinys Pridėtas turinys

Inline

22:15, 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:

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

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

@@ 1 eilutė: / 1 eilutė: @@
 Č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.
-{{Gcheck}}
 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:
 *http://notepad-plus.sourceforge.net/
@@ 37 eilutė: / 36 eilutė: @@
 == Antraštės elementai ==
 *<title>...</title> trumpas dokumento aprašymas, rekomenduojamas ilgis ne daugiau 64 simboliai.
-*<base href="url"> standartinė struktūra visiems nebaigtiesms url puslapyje.
+*<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
@@ 47 eilutė: / 46 eilutė: @@
 == Pastraipų kūrimas ==
 <pre><p>...</p></pre> paprasto teksto pastraipa.
-<pre><address>...</address></pre> adreso informacijos blokai
+<pre><address>...</address></pre> adreso informacijos blokai.
-<pre><blockquote>...</blockquote></pre> blokų išryškinimai jie turi turėti viduje dar ir pastraipas ar kitas struktūras.
+<pre><blockquote>...</blockquote></pre> blokų išryškinimai. Jie turi turėti viduje dar ir pastraipas ar kitas struktūras.
-<pre><banner>...</banner></pre> tai pastaviai ekane išsilaikanti informacija
+<pre><banner>...</banner></pre> tai pastaviai ekrane išsilaikanti informacija.
-<pre><note role="...">...</note></pre> prideda užrašus prierašus (footnote, sidenote) ir pan.
+<pre><note role="...">...</note></pre> prideda užrašus, prierašus (footnote, sidenote) ir pan.
-<pre><pre>...</pre></pre> išlaiko toki tekstą koks jis buvo prarašytas, teik pat tarpų ten pat nauja eilutė ir t.t., tai labai naudinga
+<pre><pre>...</pre></pre> išlaiko toki tekstą koks jis buvo prarašytas, teik pat tarpų, ten pat nauja eilutė ir t.t., tai labai naudinga
-<pre><hr></pre> horizontali linija
+<pre><hr></pre> horizontali linija,
 <pre><fig src="url"></pre> sukuria rėmelį paveikslėliui, o
 <pre><caption>...</caption>
-<credit>...</credit></pre> panaudojama tuomet paveiklėlio aprašui ir viskas užbaigiama su </fig>.
+<credit>...</credit></pre> panaudojama tuomet paveikslėlio aprašui ir viskas užbaigiama su </fig>.
 == Sąrašai ==
-<pre><lh>...</lh></pre> sąrašo antraštė
+<pre><lh>...</lh></pre> sąrašo antraštė.
-<pre><ol>...</ol></pre> sunumeruotas sąrašas
+<pre><ol>...</ol></pre> sunumeruotas sąrašas.
-<pre><ul>...</ul></pre> sąrašas su taškais
+<pre><ul>...</ul></pre> sąrašas su taškais.
 <pre><dl>...</dl></pre> apibudinimų sąrašas ir tuomet jame punkto apibūtinimas <pre><dt>...</dt></pre> apibūdinimas. Dažnesnė forma:
 <pre><DL>