Category: Programavimo pamokos

Formos ir įvestis HTML

Yra daugybė atvejų, kada be formų sunku apsieiti. Tai ne tik sudėtingos apklausos, bet ir elementari kontaktų forma. Šiame straipsnyje apžvelgsime, kokius įvesties būdus siūlo HTML.

Formos ir įvestis HTML

Formos 

Forma – puslapio dalis, kurioje galimi formos elementai. Tai elementai, leidžiantys vartotojui įvesti informaciją (teksto laukeliai, išsiskleidžiantys meniu, varnelės ir pan.). Forma pradedama <form> žyma:

<form>
.
įvesties elementai
.
</form> 

Įvestis

Dažniausiai naudojama formose žyma yra <input>. Įvesties tipas nustatomas “type”atributu. Dažniausiai naudojamus tipus apžvelgsime žemiau Taip pat atributu “name”laukeliui suteikiamas pavadinimas.

Tekstinis laukelis

Tokie laukeliai naudojami, kai norima, kad vartotojas įvestų raides, skaičius, simbolius ir pan.:

<form>
Vardas:
<input type=”text” name=”vardas” />
<br />
Pavardė:
<input type=”text” name=”pavarde” />
</form>

Naršyklėje tai atrodys taip:

Tekstiniai laukeliai

Pažymėtina, kad pati forma yra nematoma. Taip pat standartiškai dauguma naršyklių tekstiniuose laukeliuose talpina 20 simbolių.

“Radio buttons”

Šie mygtukai naudojami, kai vartotojas turi pasirinkti vieną iš riboto skaičiaus pasirinkčių:

<form>
<input type=”radio” name=”lytis” value=”vyras” /> Vyras
<br />
<input type=”radio” name=”lytis” value=”moteris” /> Moteris
</form>

Naršyklė tai rodys taip:

Radio buttons

Varnelės

Varnelės naudojamos, kai norite, kad vartotojas pasirinktų vieną ar daugiau iš numatytų pasirinkčių:

<form>
Mėgstu apelsinus:
<input type=”checkbox” name=”vaisiai” value=”Apelsinai” />
<br />
Mėgstu mandarinus:
<input type=”checkbox” name=”vaisiai” value=”Mandarinai” />
<br />
Mėgstu obuolius:
<input type=”checkbox” name=”vaisiai” value=”Obuoliai” />
</form> 

Naršyklėje ši forma atrodys taip:

Varnelės

Formos “action” atributas ir siuntimo mygtukas 

Kai vartotojas paspaudžia “Siųsti”, formos duomenys siunčiami į serverį. Formos “action”atributu nurodoma, kokiam failui siųsti formos turinį, o tas failas dažniausiai vienaip ar kitaip apdoroja tą informaciją.

<form name=”prisijungimas” action=”html_formos_siuntimas.asp” method=”get”>
Vartotojo vardas:
<input type=”text” name=”vartotojas” />
<input type=”submit” value=”Siųsti” />
</form>

Tai atrodys štai taip:

Siuntimo forma

Jei įrašysite ką nors į laukelį ir paspausite “Siųsti”, įvesti duomenys bus nukreipti į dokumentą “html_formos_siuntimas.asp”.

Formų žymės 

<form> Forma
<input> Įvesties laukelis
<textarea> Kelių eilučių ilgio teksto įvedimo laukelis
<label> Uždeda etiketę pasirinkčiai
<fieldset> Įrėmintas laukelis
<legend> Įrėminto laukelio antraštė
<select> Sukuria išsiskleidžiantį meniu
<optgroup> Pasirinkčių grupė
<option> Pasirinktis išsiskleidžiančiame meniu
<button> Mygtukas
<isindex> Nenaudotina. Paieškomas indeksas
Kategorijose: HTML Pamokos, Programavimo pamokos

Sąrašai HTML

HTML galima kurti sąrašus su numeracija ir be jos, taip pat terminų sąrašus. Visus šiuos tris būdus apžvelgsime šiame straipsnyje.

HTML sąrašai

Sąrašai be numeracijos

Sąraše be numeracijos punktai žymimi taip vadinamais bullets (mažais skrituliukais, apskritimais, kvadratukais ir pan.). Sąrašą be numeracijos pradedame <ul> žyma, o kiekvieną naują eilutę skiriame <li> žyma:

<ul>
<li>Pirma eilutė</li>
<li>Antra eilutė</li>
</ul>

Štai kaip tai atrodys naršyklėje:

  • Pirma eilutė
  • Antra eilutė

Sąraše galima naudoti tekstą, įterpti paragrafus ir naujas eilutes, horizontalias linijas bei paveikslėlius.

Sunumeruotas sąrašas

Sąrašuose su numeracija punktai žymimi skaičiais. Sąrašas pradedamas <ol> žyma, kiekviena nauja eilutė taip pat skiriama <li> žyma:

<ol>
<li>Pirma eilutė</li>
<li>Antra eilutė</li>
</ol>

Štai kaip tai atrodys naršyklėje:

  1. Pirma eilutė
  2. Antra eilutė

Tokiame sąraše taip pat galima naudoti įvairius elementus: paragrafus, naujas eilutes, horizontalias linijas, paveikslėlius, nuorodas, kitus sąrašus ir pan.

Terminų sąrašas 

Terminų sąrašas nuo kitų skiriasi nuo to, kad jame punktai skiriami ne po vieną, o poromis, t. y., terminas ir jo apibūdinimas. Sąrašą pradedame žyma <dl> (angl. definition list – terminų sąrašas), terminus skiriame žyma <dt> (angl. definition term – terminas), o aprašymus – <dd>(angl. definition description – termino apibūdinimas):

<dl>
<dt>Pirmas terminas</dt>
<dd>Pirmo termino apibūdinimas</dd>
<dt>Antras terminas</dt>
<dd>Antro termino apibūdinimas</dd>
</dl>

Štai kaip tai atrodys naršyklėje:

Pirmas terminas
Pirmo termino apibūdinimas
Antras terminas
Antro termino apibūdinimas

Žyma <dd> gali susidėti iš įvairių elementų, kaip tekstas, paveikslėliai, paragrafai, nurodos ir pan.

Sąrašų žymos 

Žyma Apibūdinimas
<ol> Numeruotas sąrašas
<ul> Sąrašas be numeracijos
<li> Nauja eilutė sąraše
<dl> Terminų sąrašas
<dt> Terminas terminų sąraše
<dd> Termino apibūdinimas terminų sąraše
<dir> Nenaudotina. Vietoj to naudokite <ul>
<menu> Nenaudotina. Vietoj to naudokite <ul>
Kategorijose: HTML Pamokos, Programavimo pamokos

Lentelės HTML

Standartinės lentelės – puikus būdas grupuoti ir pateikti informaciją. Šiame straipsnyje trumpai pristatome, kaip tai padaryti HTML.

Lentelės HTML

Lentelės kuriamos naudojant <table> žymą. Jos dalinamos į stulpelius (<tr> žyma) ir eilutes (duomenų langelius) (<td> žyma). Raidės TD žymi table data – informacija lentelėje, t. y., duomenų langelio turinį, kurį gali sudaryti tekstas, paveikslėliai, formos, kitos lentelės ir t. t.

<table border=”1″>
<tr>
<td>Pirmas stulpelis, pirmas langelis</td>
<td>Pirmas stulpelis, antras langelis</td>
</tr>
<tr>
<td>Antras stulpelis, pirmas langelis</td>
<td>Antras stulpelis, antras langelis</td>
</tr>
</table> 

Tokia lentelė atrodo taip:

Pirmas stulpelis, pirmas langelis Pirmas stulpelis, antras langelis
Antras stulpelis, pirmas langelis Antras stulpelis, antras langelis

 

Lentelės “Border” (kraštinių) atributas
Jei nenurodomas šis atributas, lentelė neturės kraštinių. Kartais tai gali būti naudinga, tačiau daugeliu atvejų kraštinės yra reikalingos. Norėdami, kad kraštinės būtų rodomos, panaudokite “border” atributą:

<table border=”1″>
<tr>
<td>Pirmas stulpelis, pirmas langelis</td>
<td>Pirmas stulpelis, antras langelis</td>
</tr>
</table>

Lentelių antraštės

Lentelės antraštė sukuriama naudojant <th> elementą. 

<table border=”1″>
<tr>
<th>Lentelės antraštė</th>
<th>Dar viena antraštė</th>
</tr>
<tr>
<td>Langelis</td>
<td>Langelis</td>
</tr>
<tr>
<td>Langelis</td>
<td>Langelis</td>
</tr>
</table> 

Lentelė atrodys taip:

Lentelės antraštė  Dar viena antraštė
Langelis Langelis
Langelis Langelis
Kategorijose: HTML Pamokos, Programavimo pamokos

Paveikslėliai HTML

Supažindiname su paveikslėlių elementu HTML.

Paveikslėliai HTML

Paveiksėliams HTML atvaizduoti naudojamas <img> elementas. Šis elementas neturi galinės žymos ir susideda tik iš atributų. Nuoroda į paveikslėlį pateikiama src (angl. source – šaltinis) atributo pavidalu:

<img src=”/paveikslėlis.jpg” /> 

Šiuo atveju paveikslėlis egzistuoja tame pačiame kataloge, kaip ir puslapis. Jei norime paimti paveikslėlį iš “www.pavyzdys.lt” katalogo “pavyzdys”, sintaksė tokia:

<img src=”http://www.pavyzdys.lt/pavyzdys/paveikslelis.jpg” />

Paveikslėlis dokumente rodomas ten, kur jį patalpinsite. Pavyzdžiui, jei paveikslėlio elementą įdėsite tarp dviejų paragrafų, naršyklė rodys pirmą paragrafą, tada paveikslėlį ir antrą paragrafą.

“Alt” atributas 

Šis atributas naudojamas nurodyti alternatyvųjį tekstą paveikslėliui. Jis rašomas taip:

<img src=”/paveikslelis.jpg” alt=”Alternatyvusis tekstas” /> 

Alternatyvusis tekstas puslapyje rodomas, kai nepavyksta užkrauti paveikslėlio arba naršyklė jų nerodo. Todėl tai gera priemonė siekiant padaryti puslapį informatyvesnį.

Patarimas. Jei dokumente bus 10 paveikslėlių, iš viso reiks užkrauti 11 failų, norint peržiūrėti puslapį, taip? Todėl paveikslėlius naudokite tik tada, kai to reikia.

Paveikslėlių žymos

Žyma  Apibūdinimas 
<img /> Paveikslėlis
<map> Grafinis žemėlapis
<area> Nuoroda grafiniame žemėlapyje
Kategorijose: HTML Pamokos, Programavimo pamokos

Svarbiausios HTML žymos

Šis straipsnis – tarsi paruoštukė. Tai, ką tikrai reikia žinoti, viename lape.

Svarbiausios HTML žymos

Paprasčiausias HTML dokumentas

<html>
<head>
<title>Dokumento pavadinimas rašomas čia</title>
</head>
<body>
Visas dokumento turinys rašomas čia.
</body>
</html> 

Antraštės

<h1>Didžiausia antraštė</h1>
<h2>Mažesnė antraštė</h2>

<h6>Mažiausia antraštė</h6>

Teksto elementai 

<p>Paragrafas</p>
<br /> (nauja eilutė)
<hr /> (horizontali linija)
<pre>Iš anksto suformatuotas tekstas</pre>

Loginiai stiliai 

<em>Pasviras tekstas</em>
<strong>Pastorintas tekstas</strong>
<code>Kompiuterinis kodas</code> 

Fiziniai stiliai 

<b>Pastorintas tekstas</b>
<i>Pasviras tekstas</i>

Nuorodos ir paveikslėliai 

<a href=”http://nuoroda.lt/”>Nuorodos tekstas</a>
<a href=”http://nuoroda.lt/”><img src=”/paveikslelis.jpg”></a>
<a href=”mailto: elektroninis@pastas.lt“>El. laiško siuntimas</a> 

Sąrašas be numeracijos

<ul>
<li>Pirmas punktas</li>
<li>Antras punktas</li>
</ul>

Sąrašas su numeracija

<ol>
<li>Pirmas punktas</li>
<li>Antras punktas</li>
</ol> 

Terminų sąrašas

<dl>
<dt>Pirmas terminas</dt>
<dd>Paaiškinimas</dd>
<dt>Antras terminas</dt>
<dd>Paaiškinimas</dd>
</dl> 

Lentelė

<table border=”1″>
<tr>
<th>Antraštė</th>
<th>Antra antraštė</th>
</tr>
<tr>
<td>Langelis</td>
<td>Antras langelis</td>
</tr>
</table> 

Rėmeliai

<frameset cols=”25%,75%”>
<frame src=”/pirmas.html”>
<frame src=”/antras.html>
</frameset> 

Kiti elementai 

<!–Čia galite rašyti komentarą–>

<blockquote>
Citata iš kokio nors šaltinio.
</blockquote>

<address>
Vardas Pavardė<br>
Gatvė namas<br>
</address> 

Kategorijose: HTML Pamokos, Programavimo pamokos

HTML žymos

Pateikiame HTML žymų lentelę abėcėlės tvarka.

HTML žymos

Žyma  Aprašymas 
<!–…–> Komentaras
<!DOCTYPE> Dokumento tipas
<a> Nuoroda
<abbr> Santrumpa
<acronym> Akronimas
<address> Dokumento autoriaus kontaktinė informacija
<applet> Nenaudotina. Apletas
<area /> Nustato erdvę grafiniame žemėlapyje
<b> Paryškintas tekstas
<base /> Nustato, kur standartiškai nukreipti visas nuorodas puslapyje
<basefont /> Nenaudotina. Nustato standartinį puslapio teksto šriftą, jo dydį ir spalvą.
<bdo> Teksto krypties nustatymas
<big> Didelis tekstas
<blockquote> Ilga citata
<body> Dokumento “kūnas” (pagrindinis turinys)
<br /> Nauja eilutė
<button> Sukuria mygtuką
<caption> Antraštė
<center> Nenaudotina. Teksto centrinė lygiuotė
<cite> Citata
<code> Kompiuterinis kodas
<col /> Nustato vieno ar kelių lentelės stulpelių atributo reikšmės
<colgroup> Stulpelių grupė (formatavimui)
<dd> Termino aprašymas terminų sąraše
<del> Perbrauktas (ištrintas) tekstas
<dir> Nenaudotina. Katalogų sąrašas
<div> Apibrėžia tam tikrą dokumento erdvę
<dfn> Terminas
<dl> Terminų sąrašas
<dt> Terminas terminų sąraše
<em> Pasviras tekstas
<fieldset> Apskliaustiems elementams sukuria rėmelį
<font> Nenaudotina. Teksto šrifto, spalvos, dydžio nustatymas
<form> Nustato vartotojo HTML įvesties formą
<frame> Nustato rėmelį rėmelių rinkinyje
<frameset> Rėmelių rinkinys
Nuo <h1> iki <h6> HTML antraštės
<head> Informacija apie dokumentą
<hr /> Horizontali linija
<html> Apibrėžia HTML dokumentą
<i> Pasviras tekstas
<iframe> Rėmelis eilutėje
<img /> Paveikslėlis
<input /> Įvesties būdas
<ins> Įklijuotas tekstas
<isindex> Ieškotinas indeksas
<kbd> Kompiuterinis tekstas
<label> Etiketė elementui
<legend> Antraštė šalia einančiam elementui
<li> Sąrašo punktas
<link /> Nustato ryšį tarp dokumento ir išorinių šaltinių
<map> Sukuria grafinį žemėlapį
<menu> Nenaudotina. Sukuria meniu sąrašą
<meta /> HTML dokumento informacija
<noframes> Alternatyvus atvaizdavimas naršyklėms, nerodančioms rėmelių
<noscript> Alternatyvus atvaizdavimas naršyklėms, nerodančioms skriptų
<object> Objektas iš kito puslapio
<ol> Sąrašas su numeracija
<optgroup> Grupė susijusių nustatymų pasirinktame sąraše
<option> Nustatymo sukūrimas pasirinktame sąraše
<p> Naujas paragrafas
<param /> Nustato objekto parametrą
<pre> Iš anksto suformatuotas tekstas
<q> Trumpa citata
<s> Nenaudotina. Perbrauktas tekstas
<samp> Kompiuterinio kodo pavyzdys
<script> Nurodo skriptą
<select> Sukuria išsiskleidžiantį sąrašą
<small> Mažas tekstas
<span> Teksto segmentas dokumente
<strike> Nenaudotina. Perbrauktas tekstas
<strong> Paryškintas tekstas
<style> Stiliaus nustatymai
<sub> Apatinis indeksas
<sup> Viršutinis indeksas
<table> Lentelė
<tbody> Dokumento tekstą perkelia į lentelę
<td> Langelis lentelėje
<textarea> Tekstas dėžutėje
<tfoot> Dokumento apačios tekstą perkelia į lentelę
<th> Lentelės antraštė
<thead> Sugrupuoja antraštės turinį į lentelę
<title> Dokumento antraštė
<tr> Eilutė lentelėje
<tt> Teletaipo tekstas
<u> Nenaudotina. Pabrauktas tekstas
<ul> Sąrašas be numeracijos
<var> Kintanti teksto dalis
<xmp> Nenaudotina. Iš anksto suformatuotas tekstas
Kategorijose: HTML Pamokos, Programavimo pamokos

Nuorodos HTML

Nuoroda – tai dokumento adresas internete. Šis trumpas straipsnelis apie tai.

Nuorodos HTML

Žiniatinklio terminais, nuoroda yra dokumento, patalpinto internete, adresas. Dokumentas gali būti bet koks: HTML puslapis, tekstinis failas, garsinis ar video failas ir kt. Nuoroda rašoma tarp <a> </a> žymų:

<a href=”https://www.ipamokos.lt”>iPamokos.lt</a>

Čia “href” atributas nurodo dokumento/svetainės adresą.

“Target” atributas 

Šiuo atributu nustatoma, kur atsidarys puslapis, į kurį veda nuoroda. Norėdami, kad nuoroda atsidarytų naujame naršyklės lange ar kortelėje, įveskite tokį kodą:

<a href=”https://www.ipamokos.lt” target=”_blank”>iPamokos.lt</a> 

“Name” atributas 

“Name” atributas vartojamas, kai norima nustatyti nuorodos pavadinimą. Skaitytojui jis nematomas:

<a name=”pavadinimas”>Tekstas</a>

Norėdami sukurti nuorodą, pridėkite groteles:

<a name=”#pavadinimas”>Tekstas</a>

Pavyzdžiai:

  • <a name=”patarimai”>Patarimų skiltis</a>
  • <a name=”#patarimai”>Peršokti į patarimų skiltį</a>
  • <a href=”http://www.puslapis.lt/straipsnis.html#patarimai”>Peršokti į patarimų skiltį kitame puslapyje</a>
Kategorijose: HTML Pamokos, Programavimo pamokos

Stiliai HTML

Stiliaus atributas yra naujiena HTML. Tai – CSS integravimas į HTML kodą.

Stiliai HTML

Stiliai HTML leidžia apipavidalinti įvairius elementus. Jie buvo pristatyti tik HTML 4 versijoje, todėl yra šiokia tokia naujiena. Stilius galima taikyti naudojantis stiliaus atributu arba iš atskiros CSS stilių lentelės.

HTML stilių pavyzdžiai

style=”background-color:yellow”
style=”font-size:10px”
style=”font-family:Times”
style=”text-align:center”

Vengtinos žymos ir atributai

HTML 4 versijoje kai kurios žymos ir atributai vadinami vengtinais. Tai reiškia, kad ateityje išeisiančiose HTML ir XHTML versijose jie jau bus nebegalimi. Todėl rašydami kodą stenkitės nenaudoti tokių žymų ir atributų.

Šių žymų ir atributų reikėtų vengti:

Žyma  Aprašymas
<center> Centruotas tekstas
<font> ir <basefont> Šrifto nustatymai
<s> ir <strikeout> Perbrauktas tekstas
<u> Pabrauktas tekstas
Atributas  Aprašymas
align Lygiuotė
bgcolor Fono spalva
color Teksto spalva

 

Jų vietoje derėtų naudoti stilius.

Stilių pavyzdžiai

  • Puslapio fono spalva: <body style=”background-color:yellow”> 
  • Šriftas, jo spalva ir dydis: <p style=”font-family:arial; color:black; font-size:20px”>
  • Teksto lygiuotė: <h1 style=”text-align:center”>
Kategorijose: HTML Pamokos, Programavimo pamokos

Teksto formatavimas HTML

Trumpai apie teksto formatavimą HTML.

Teksto formatavimas HTML

HTML naudoja įvairias žymas, pvz. <b> ar <i>, kurios reiškia pastorintą ar pasvirą tekstą. Šios žymos vadinamos formatavimo žymomis.

Teksto formatavimo žymos

Žyma  Apibūdinimas 
<b> Pastorintas tekstas
<i> Pasviras tekstas
<u> Pabrautas tekstas
<s> Perbrauktas tekstas
<strong> Pastorintas tekstas
<big> Didelis tekstas
<em> Pabrėžtas tekstas
<small> Mažas tekstas
<sub> Apatinis indeksas
<sup> Viršutinis indeksas
<ins> Įkeltas tekstas
<del> Ištrintas tekstas
<strike> Perbrauktas tekstas


“Kompiuterio išvesties” žymos

Žyma  Apibūdinimas 
<code> Kompiuterinis kodas
<kbd> Klaviatūros tekstas
<samp> Kodo pavyzdys
<tt> Teletaipo tekstas
<var> Kintamasis
<pre> Iš anksto suformatuotas tekstas
<listing> Nenaudotinas. Naudokite <pre>
<plaintext> Nenaudotinas. Naudokite <pre>
<xmp> Nenaudotinas. Naudokite <pre>

Citatos, apibrėžimai ir pan.

Žyma Apibūdinimas
<abbr> Santrumpa
<acronym> Akronimas
<address> Adresas
<bdo> Teksto kryptis
<blockquote> Ilga citata
<q> Trumpa citata
<cite> Citata
<dfn> Apibrėžimas
Kategorijose: HTML Pamokos, Programavimo pamokos

HTML paragrafai

HTML dokumentai skirstomi į paragrafus. Šiame straipsnelyje trumpai juos ir apžvelgsime.

HTML paragrafai

Paragrafai rašomi tarp <p> </p> žymų:

<p>Paragrafo tekstas</p>
<p>Kito paragrafo tekstas</p>

Nepamirškite galinės paragrafo žymos

Dauguma naršyklių paragrafą atvaizduos teisingai net jei ir pamiršite parašyti galinę žymą:

<p>Paragrafo tekstas
<p>Kitas paragrafas

Vis dėlto, norėdami išvengti klaidų ir netikslumų, nepamirškite uždaryti paragrafų žymų.

Nauja eilutė HTML

Norėdami tik perkelti tekstą į naują eilutę, o ne kurti naują paragrafą, naudokite <br /> žymą:

<p>Paragrafas, kuriame<br />tekstas perkeltas į naują eilutę</p>

<br> ar <br />?

XHTML, XML ir vėlesnėse, nei 4 HTML versijose elementai be galinės žymos nebus leidžiami. Todėl būkite pragmatiški ir vietoj <br> naudokite <br />, nors naršyklės šias dvi žymas ir atvaizduoja vienodai.

HTML – ne Word’as, Enter ir Space klaviškai čia nepadės

HTML dokumento atvaizdavimas priklauso nuo daugybės faktorių: ekrano raiškos, lango dydžio, naršyklės ir kt. Tarpų ir naujų eilučių Enter ir Space klavišais čia sukurti nepavyks, vienas, du ar dvidešimt Space ar Enter paspaudimų HTML kode reikš vieną ir tą patį – vieną tarpelį.

Naudingos HTML žymos

Žyma Apibūdinimas
<br /> Nauja eilutė
<p> Naujas paragrafas
Kategorijose: HTML Pamokos, Programavimo pamokos

HTML antraštės

Trumpas straipsnelis, kuriame paaiškinama, kaip HTML rašomos antraštės.

HTML antraštės

 

HTML antraštės nustatomos naudojant žymas nuo <h1> iki <h6>. <h1> – didžiausia antraštė,<h6> – mažiausia.

<h1>1 antraštė</h1>
<h2>2 antraštė</h2>
<h3>3 antraštė</h3>

Antraščių svarba

HTML antraštes naudokite tik puslapių antraštėms. Nenaudokite jų norėdami parašyti didelį ar pajuodintą tekstą. Paieškos sistemos naudoja antraščių žymas analizuodamos jūsų puslapio struktūrą ir turinį, todėl norint pasiekti geriausius rezultatus, būtina taisyklingai naudoti šias žymas.

Pirmąją antraštę patartina naudoti kaip pagrindinę, mažesnės svarbos informacijai išskirti naudoti antrąją ir t. t.

HTML linijos

Norėdami sukurti horizontalią liniją per visą dokumentą, naudokite <hr /> žymą:

<p>Pirmas paragrafas</p>
<hr />
<p>Antras paragrafas</p>
<hr />

HTML komentarai

Norėdami parašyti suprantamesnį kodą, naudokite HTML komentarus. Naršyklė jų neatvaizduoja, tad jie padeda tik susigaudyti puslapio kode. Komentarai rašomi taip:

<!– Čia rašomas komentaras –>

Kaip pažiūrėti puslapio kodą?

Ar kada besižvalgant po svetainę teko pagalvoti “ėė, kaip jie padarė šitą??”. Tai sužinoti išties nesudėtinga (žinoma, jei kodas nėra specialiai slepiamas). Tiesiog spauskite dešinį pelės klavišą puslapyje ir pasirinkite “Rodyti puslapio kodą” (“View page source”) ar pan.

Kategorijose: HTML Pamokos, Programavimo pamokos

HTML atributai

Šiame straipsnyje rašoma apie HTML atributus, kurie suteikia papildomos informacijos apie elementus.

HTML atributai

  • HTML elementai gali turėti atributus.
  • Atributai suteikia papildomos informacijos apie elementus.
  • Atributai visada nustatomi pradinėje žymoje.
  • Atributai rašomi vardo ir reikšmės poromis: vardas=”reikšmė”.
Pavyzdys. HTML nuorodos nustatomos <a> žyma. Adresas žymoje nurodomas kaip atributas:

<a href=”/nuoroda.html”>Nuorodos tekstas</a>

Kabutės atributo vardui būtinos

Atributus visada derėtų įterpti tarp kabučių. Dažniausiai naudojamos dvigubos kabutės (“), tačiau leistinos ir viengubos (‘). Kai kuriais retais atvejais, privaloma naudoti viengubas kabutes, jei atributo reikšmėje jau yra dvigubos kabutės:

name=””Henrikas “Henytė” Daktaras”

Atributams naudokite mažąsias raides

Atributus galima rašyti ir didžiosiomis, ir mažosiomis raidėmis. Vis dėlto, World Wide Web (W3C) konsorciumas HTML 4 versijoje pataria naudoti mažąsias raides, o vėliau jos bus privalomos.

Keletas standartinių atributų

Pateikiame keletą HTML atributų, dažniausiai naudojamų HTML elementuose:

Atributas Reikšmė Aprašymas
 class  class_rule arba style_rule  Elemento klasė
 id  id_name  Unikalus elemento ID
 style  style_definition  Stilius eilutėje
title tooltip_text Tekstas užvedus kursorių
Kategorijose: HTML Pamokos, Programavimo pamokos

HTML elementai

HTML dokumentai sudaryti iš HTML elementų ir informacijos derinio. Šiame straipsnyje paaiškinama HTML elementų sintaksė.

HTML elementai

HTML elementas yra viskas nuo pradinės iki galinės žymos:

Pradinė žyma  Elemento turinys Galinė žyma 
 <p>  Paragrafo turinys </p>
 <a href=”/nuoroda.html”> Nuorodos tekstas </a>
 <br />

 

HTML elementų sintaksė

  • Elementas prasideda pradine žyma.
  • Elementas baigiasi galine žyma.
  • Elemento turinys – viskas tarp pradinės ir galinės žymų.
  • Kai kurios HTML žymos neturi turinio.
  • Tušti elementai uždaromi pradinėje žymoje.
  • Dauguma HTML žymų gali turėti atributus.
Dukteriniai HTML elementai
Dauguma HTML elementų gali turėti dukterinius elementus (skliausti kitus HTML elementus):
<html>
<body>
<p>Paragrafas</p>
</body>
</html>

Tokios konstrukcijos ir sudaro HTML dokumentus.

Nepamirškite galinės žymos

Dauguma naršyklių teisingai atvaizduos tekstą net jei pamiršite uždaryti žymą:

<p>Paragrafo tekstas
<p>Paragrafo tekstas

Nepaisant to, primygtinai patariama naudoti ir galinę žymą, kad kodas nebūtų klaidingas ir atitiktų standartus.

Žymos mažosiomis raidėmis

Nėra jokio skirtumo, didžiosiomis ar mažosiomis raidėmis rašysite HTML žymas. <P> reiškia tą patį, ką <p>. Nemažai svetainių HTML žymos parašytos didžiosiomis raidėmis. Vis dėlto, World Wide Web (W3C) konsorciumas rekomenduoja HTML 4 naudoti mažąsias raides rašant žymas, o vėlesnėse versijose net reikalauja tai daryti.
Kategorijose: HTML Pamokos, Programavimo pamokos

HTML pagrindai

Trumpai apžvelgiamos pagrindinės HTML žymos.

HTML pagrindai

 
HTML antraštės
HTML antraštės nustatomos naudojant žymas nuo <h1> iki <h6>:
<h1>Čia jūsų antraštė</h1>
<h2>Čia jūsų antraštė</h2>
<h3>Čia jūsų antraštė</h3>
HTML paragrafai
HTML paragrafai nustatomi naudojant <p> žymą:
<p>Jūsų paragrafas</p>
<p>Dar vienas paragrafas</p>
HTML nuorodos
HTML nuorodos nustatomos naudojant <a> žymą:
<a href=”https://www.ipamokos.lt”>Jūsų nuoroda</a>
HTML paveikslėliai
Paveikslėlių įterpimui HTML kode naudojama <img> žyma:
<img src=”/paveikslėlis.jpg” width=”100″ height=”200″>
Čia width reiškia paveikslėlio plotį taškais (pikseliais), height – aukštį.

 

Kategorijose: HTML Pamokos, Programavimo pamokos

Teksto numeracija

Šioje pamokoje sužinosite, kaip sunumeruoti sąrašus, kad šie atrodytų tvarkingai.
Norėdami pakeisti ar įvesti numeravimą tekste, naudokitės <LI> žyme:

○ <LI TYPE=CIRCLE> – apskritimo formos žymė
● <LI TYPE=DISC> – skritulio formos žymė
 <LI TYPE=SQUARE> – kvadratinė žymė

Taip pat galima įvesti skaitinę numeraciją. Naudokite <OL> žymę:

<OL TYPE=”1″>

1. Jūsų tekstas bus sunumeruotas arabiškais skaičiais (1, 2, 3)
2. Jūsų tekstas bus sunumeruotas arabiškais skaičiais (1, 2, 3)
3. Jūsų tekstas bus sunumeruotas arabiškais skaičiais (1, 2, 3)

<OL TYPE=”A”>

A. Jūsų tekstas bus sunumeruotas didžiosiomis raidėmis pagal abėcėlę (A, B, C)
B. Jūsų tekstas bus sunumeruotas didžiosiomis raidėmis pagal abėcėlę (A, B, C)
C. Jūsų tekstas bus sunumeruotas didžiosiomis raidėmis pagal abėcėlę (A, B, C)

<OL TYPE=”a”>

a. Jūsų tekstas bus sunumeruotas mažosiomis raidėmis pagal abėcėlę (a, b, c)
b. Jūsų tekstas bus sunumeruotas mažosiomis raidėmis pagal abėcėlę (a, b, c)
c. Jūsų tekstas bus sunumeruotas mažosiomis raidėmis pagal abėcėlę (a, b, c)

<OL TYPE=”I”>

I. Romėniška numeracija didžiosiomis raidėmis (I, II, III)
II. Romėniška numeracija didžiosiomis raidėmis (I, II, III)
III. Romėniška numeracija didžiosiomis raidėmis (I, II, III)

<OL TYPE=”i”>

i. Romėniška numeracija mažosiomis raidėmis (i, ii, iii)
ii. Romėniška numeracija mažosiomis raidėmis (i, ii, iii)
iii. Romėniška numeracija mažosiomis raidėmis (i, ii, iii)

Taip pat galite nurodyti, nuo kurio skaičiaus pradėti:

<OL TYPE=”1″ START=3>

3. pradės nuo skaičiaus 3 (ar kito, kurį įvesite)
4. kitas po to einantis skaičius
5. kitas po to einantis skaičius

Kategorijose: HTML Pamokos, Programavimo pamokos

Šrifto keitimas

Taip pat, kaip teksto dydį ar spalvą, galite pakeisti ir šriftą, naudodamiesi <FONT></FONT>žymės FACE atributu.
Tačiau yra ir “kabliukas”. Kad viskas veiktų, kaip pridera, šriftas turi būti įrašytas puslapį peržiūrinčio žmogaus kompiuteryje. Jei to nebus, naršyklė tiesiog atvaizduos standartinį šriftą.

Taigi kaip tai veikia? Lygiai taip pat, kaip FONT SIZE ar FONT COLOR. Pavyzdžiai:

<FONT FACE=”Courier”>Štai Courier šriftas</FONT>
<FONT FACE=”Arial”>Štai Arial šriftas</FONT>
<FONT FACE=”Times”>Štai Times šriftas</FONT>
<FONT FACE=”Verdana”>Štai Verdana šriftas</FONT>
<FONT FACE=”Comic Sans MS”>Štai Comic Sans MS šriftas</FONT>
<FONT FACE=”Georgia”>Štai Georgia šriftas</FONT>
<FONT FACE=”Impact”>Štai Impact šriftas</FONT>
<FONT FACE=”Trebuchet MS”>Štai Trebuchet šriftas</FONT>

Taip pat į atributą galima įrašyti keletą šriftų. Tokiu atveju, jei kompiuteryje nebus pirmojo, rodys antrąjį, jei nebus antrojo – trečiąjį ir t.t. Štai kaip tai atrodys, jei naudosime Arial, Verdana ir Times šriftus:

<FONT FACE=”Arial, Verdana, Times”>Tekstas čia</FONT>

Šrifto dydį, spalvą ir šrifto stilių galima pakeisti viena žyme:

<FONT SIZE=”4″ COLOR=”Blue” FACE=”Courier”>
Štai 4 dydžio tekstas mėlynu Courier šriftu
</FONT>

Štai taip paprastai galima padaryti savo puslapio tekstą išvaizdesnį ir patrauklesnį akiai.

Kategorijose: HTML Pamokos, Programavimo pamokos

Šrifto spalvos keitimas

Trumpa pamokėlė, kaip pakeisti šrifto spalvą HTML dokumente.
HTML dokumente pakeisti viso ar dalies teksto spalvą yra taip pat lengva, kaip ir pakeisti dydį. HTML spalvos užrašomos 6 ženklų kodais (pvz. 000000 – juoda, FFFFFF – balta). Naudodami <FONT></FONT> žymės COLOR atributą galite nustatyti kokią tik norite šrifto spalvą. Pamėginkime pakeisti spalvą į RAUDONĄFONT žymėje galima naudoti ir pagrindinių spalvų pavadinimus (pastaba: ne visos naršyklės tai palaiko):

<FONT COLOR=”red”>Štai raudonas tekstas</FONT>

Taip pat galima naudoti šešiaženklį kodą. Kadangi raudonos spalvos kodas yra FF0000, tai rašysime taip:

<FONT COLOR=”#FF0000″>Štai raudonas tekstas</FONT>

PASTABA: prieš spalvos kodą nepamirškite padėti grotelių (#).

Spalvą ir dydį galima keisti vienoje žymėje:

<FONT SIZE=”4″ COLOR=”Red”>
Štai 4 dydžio raudonas tekstas
</FONT>

Kategorijose: HTML Pamokos, Programavimo pamokos

Šrifto dydžio keitimas

Trumpai aprašome, kaip HTML dokumente keisti šriftų dydžius.
Norėdami pakeisti viso ar dalies teksto šrifto dydį HTML dokumente, naudokite <FONT></FONT> žymės SIZE atributą. Štai pavyzdys:

<FONT SIZE=”5″>
Šio teksto dydis – 5
</FONT>

FONT SIZE žymė turi septynis teksto dydžius, 1 – mažiausias, o 7 – didžiausias. Jei nenurodysite dydžio, jis bus atvaizduojamas standartiniu 3 dydžiu.

Šio šrifto dydis – 7
Šio šrifto dydis – 6
Šio šrifto dydis – 5
Šio šrifto dydis – 4
Šio šrifto dydis – 3
Šio šrifto dydis – 2
Šio šrifto dydis – 1

Kitas būdas keisti teksto dydį yra naudojant <BIG></BIG> ir <SMALL></SMALL> žymes, kurias atpažįsta Netscape (nuo 2.0 iki 4.0) ir Internet Explorer (nuo 3.0 iki 4.0). <BIG></BIG>žymė ir <SMALL></SMALL> atitinkamai vienu dydžiu padidina arba sumažina tekstą. Štai pavyzdys:

<BIG>Šis šriftas vienu dydžiu didesnis</BIG>
<SMALL>Šis šriftas vienu dydžiu mažesnis</SMALL>

Kategorijose: HTML Pamokos, Programavimo pamokos

Kas yra HTML?

HTML – kas tai yra? Kas yra HTML teksto redaktorius? Kaip išsaugoti HTML dokumentą? Visi šie klausimai atsakyti šiame straipsnyje. 

Kas yra HTML?

HTML (Hypertext Markup Language „Hiperteksto žymėjimo kalba“) – tai kompiuterinė žymėjimo kalba, naudojama pateikti turinį internete. Naudojama internetinių puslapių atvaizdavimui naršyklėse.

Iš pradžių HTML gali atrodyti bauginančiai, bet kai tik pradėsite jausti sistemą, nebeliks dėl ko jaudintis – su dešimčia kodavimo komandų galėsite patenkinti 99 proc. savo poreikių. Taip pat, dauguma dabartinių HTML redaktorių dabar turi begales funkcijų, todėl Jums nereikės vargintis rašyti ilgus puslapius kodo.

Kaip paruošti HTML dokumentą?

Yra keletas būdų, kaip galima paruošti HTML dokumentus:

  • naudoti HTML redaktorių, kaip HTML Assistant, kuriame integruotos pagrindinės HTML komandos, todėl nereikia jų kiekvieną kartą užrašinėti;
  • naudoti HTML redaktorių, integruotą į Word’ą (Microsoft Internet Assistant for Word);
  • sukurti ASCII tekstinį failą (su Notepad ar kitu paprastu teksto redaktoriumi, galinčiu sukurti ASCII failą);
  • paversti RTF (Rich Text Format) failą į HTML (daugelyje pažangių teksto redaktorių yra galimybė išsaugoti failus RTF formatu).

HTML redagavimui ir konvertavimui sukurta daugybė mokamų ir nemokamų programų. Tačiau kad ir koks tobulas bebūtų teksto redaktorius, mūsų nuomone, vistiek reikalingas žmogiškas prisilietimas, kad viskas veiktų preciziškai tiksliai. Tačiau redaktoriai gerokai palengvina darbą – juose yra įrankių juostos su daugeliu komandų, todėl nereikia vargintis rašyti jų patiems.

HTML failų formatas

HTML failus galima išsaugoti dviem formatais – .html ir .htm. Didelio skirtumo nėra, seniau naudotas .htm, nes formatus galėdavo sudaryti tik 3 raidės, dabar populiaresnis .html. Mes taip pat rekomenduojame naudoti .html.

Dokumento kodo peržiūrėjimas

Dauguma naršyklių leidžia peržiūrėti puslapio kodą. Tai galite padaryti paspaudę dešiniu pelės mygtuku puslapyje ir pasirinkę “Pirminis tekstas”, “Peržiūrėti puslapio kodą” ar pan.

Kategorijose: HTML Pamokos, Programavimo pamokos

Duomenų įrašymas į failą

Anksčiau populiariausias būdas saugoti informaciją būdavo kaupti ją paprastame *.dat ar tekstiniame faile. Duomenys buvo skaitomi iš jo ir rašomi į jį, kol neatsirado greitesnis būdas – duomenų bazės. Nors duomenų bazių vartojimas vis populiarėja, failų skaitymas ir rašymas į juos yra naudingi.

Pagrindinės funkcijos skaitymui bei rašymui: fopen(), fgets(), fputs(), fclose(), feof(); Jų pilnai pakanka darbui su failais.

fopen() funkcija

fopen – atidaro failą (skaitymui, rašymui arba papildimui). fopen(string failo_pavadinimas, string mode); mode – kokiai “sesijai” atidaryti failą. O “sesijos” yra štai tokios:

‘r’ – atidaro failą tik skaitymui, žymeklį pastato failo pradžioje,
‘r+’ – atidaro failą skaitymui ir rašymui, žymeklį pastato failo pradžioje,
‘w’ – atidaro failą rašymui, žymeklį pastato failo pradžioje, failo dydį nunulina (ištrina visus buvusius duomenis), o jei failas neegzistuoja – sukuria jį,
‘w+’ – atidaro failą skaitymui ir rašymui, žymeklį pastato failo pradžioje, faila nunulina, o jei failo nėra, jį sukuria,
‘a’ – atidaro failą tik rašymui, pastato žymeklį į failo pabaigą, jei failas neegzistuoja – sukuria jį,
‘a+’ – atidaro failą ir skaitymui ir rašymui, pastato žymeklį į failo pabaigą, jei failas neegzistuoja – sukuria jį.

Pavyzdžiai:

$fp = fopen(“/home/katalogas/file.txt”, “r”);
$fp = fopen(“http://www.mano.lt”, “r”);
$fp = fopen(“ftp://vartotojas: slaptazodis@mano.lt/”, “w”);

Atidarius failą, atlikus savo veiksmus, būtinai reikia jį uždaryti, pasinaudojus funkcija fclose();, pvz.:

fclose($fp);
fputs(); – įrašo duomenis į failą,
fgets(); – nuskaito nurodyto ilgio eilutę į string tipo kintamąjį,
$string = fgets($fp,255); // nuskaito visą eilutę

Pavyzdys:

$fp = fopen(“/katalogas/failas.txt”, “r”);
while ($bf = fgets($fp, 4096)) {
echo $bf;
}
fclose($fp);

Nuskaito visas failo eilutes ir išveda į ekraną. Bet ciklą galime pakeisti paprastesniu:

$fp = fopen(“/katalogas/failas.txt”, “r”);
while (!feof($fp)) {
$bf = fgets($fp, 4096)
echo $bf;
}
fclose($fp);

Dabar ciklas vykdomas tol, kol prieinama failo pabaiga.

Padarykime paprasčiausią puslapio skaitliuką, kad pamatytume, kaip gi iš tiesų veikia aukščiau aprašytos funkcijos:

<?php
$filename = “skait.dat”; /* Priskiria kintamajam failo pavadinimą */
$fp = @fopen($filename,”r”); // Atidaro failą skaitymui
if ($fp) { /* Jei failas atidarytas, vykdomas sąlygos sakinys */
$counter=fgets($fp,10); /* Į kintamąjį nuskaitoma skaitliuko reikšmė */
fclose($fp); // Uždaromas failas
} else {
$counter=0; /* Jei failo nebuvo, skaitliukui priskiriamas nulis */
}
$counter++; /* Skaitliuko reikšmė padidinama vienetu */
echo $counter; // Išspausdinama reikšmė
$fp = fopen($filename,”w”); /* Ir toliau į failą įdedama nauja skaitliuko reikšmė, padidinta vienetu. */
if ($fp) {
$counter=fputs($fp,$counter);
fclose($fp);
}
?>

Štai taip savo puslapiui galima pasigaminti skaitliuką. Jei puslapis dažnai lankomas, galite susidurti su problema, kad du lankytojai ateis vienu metu, tuo pačiu vienas skaitys, kitas rašys, o tai negalima, todėl skaitliuko duomenys bus neteisingi. Kad tai išpręstume, galima naudoti funkciją flock(). Ši funkcija laikinai sustabdo antro vartotojo darbą ir palaukia, kol pirmasis baigs dirbti su failu, tada antrajam vartotojui leidžiama pradėti dirbti. Patariama kuo dažniau naudoti šią funkciją dažnai lankomuose puslapiuose.

Pavyzdys:

$failas = @fopen(‘skait.dat’,’r’);
flock = ($naujas_failas,2);
$count = fgets($file, 255);
$count++;
flock = ($naujas_failas,3);
fclose($file);

Šiuo atveju jūs esate apsaugoti nuo galimo duomenų praradimo.

Tekstiniai failai – puiki duomenų bazių alternatyva pradedančiajam. Jam nebūtinas nei specialus palaikimas, nei labai didelės PHP žinios. Todėl paprastiems projektėliams pilnai turėtų pakakti ir duomenų saugojimo faile.

Informacijos perskaitymas iš tekstinio failo

<?php
$failas=”duomenys.txt”;
$duomenys = fopen($failas, “r”);
$informacija = fread($duomenys, filesize($failas));
fclose($duomenys);
echo $informacija;
?>

Naujas įrašymas ištrinant visus senus duomenis

<?php
$informacija=”Tekstas, įrašomas į failą”;
$failas=”duomenys.txt”;
$duomenys=fopen($failas, “w”);
fwrite($duomenys, “$informacija”);
fclose($duomenys);
?>

Įrašymas neištrinant senų duomenų, o tęsiant sąrašą toliau

<?php
$informacija=”Tekstas, įrašomas į failą”;
$failas=”duomenys.txt”;
$duomenys=fopen($failas, “a”);
fwrite($duomenys, “$informacija\n”);
fclose($duomenys);
?>

Tekstinė duomenų bazė

Pavyzdys: Jonas|19|192|77

Pateikta eilutė apibūdina asmens vardą, amžių, ūgį ir svorį.

Taigi, duomenys.txt struktūra turi būti tokia: tekstas0|tekstas1|tekstas2|tekstas3. Kodo fragmento esmė tokia, kad yra perskaitoma eilutėje surašyta informacija ir išskirstoma į atskirus atitinkamus kintamuosius $laukelis[$i]. Šiuo būdu jau įmanoma sukurti panašią į duomenų bazės lentelę:

<?php
$failas=”duomenys.txt”;
$simboliu_skaicius = count($failas);
$stulpelis = file($failas);
for($i=0; $simboliu_skc > $i; $i++){
$laukelis = explode(“|”, $stulpelis[$i]);
}
echo “$laukelis[0] $laukelis[1] $laukelis[2] $laukelis[3]”;
?>

Kintamasis, į kurį įveda informacija, turėtų būti toks: $informacija=”Mindaugas|20|185|70″;

Tekstinė duomenų bazė

Pavyzdys:

Mindaugas|20|185|70
Kristina|20|174|50
Rimantas|50|190|80
[..]
Vaida|19|171|53

duomenys.txt
 failo sukūrimas yra toks:

<?php
$vardas=”vardas”;
$amzius=”amžius”;
$ugis=”ūgis”;
$svoris=”svoris”;
$informacija=$vardas.”|”.$amzius.”|”.$ugis.”|”.$svoris;
$failas=”duomenys.txt”;
$duomenys=fopen($failas, “a”);
fwrite($duomenys, “$informacija\n”);
fclose($duomenys);
?>

Kategorijose: PHP pamokos, Programavimo pamokos