HTML kalba
Plačiausiai naudojamų HTML komandų yra apie 30.Kai kurios komandos turi ir atributus,kurių pagalba galima reguliuoti tekstą.Pvz.:su komanda
.
Viršutinio lygio antraštė
.
Apatinio lygio antraštė
.
Nauja pastraipa
Nuoroda
href=”.” Dokumento adresas ar požymis,
kuriuo remiamasi
name=”.” Požymio vardas,į kurį kreipiamasi
Smulkus šriftas
Stambus šriftas
Užrašas eilutės viršuje(laipsnis)
Užrašas eilutės apačioje(koefic.)
Užbrauktas tekstas
Pabrauktas tekstas
Pastovaus pločio šriftas
Pasviręs šriftas(kursyvas)
Pastorintas šriftas
.
Teksto formatavimo sritis
align=”.” Teksto lygiavimas pagal centrą,
pagal kairijį arba dešinįjį klavišą
. Šriftai
size=”.” Šriftų dydis(nuo 1 iki 7))
color=”.” Šrifto spalva
face=”.” Šrifto pavadinimas
Šriftas nustatomas pagal nutylėjimą
visam puslapiui
. Sutvarkyti sąrašai
type=”.” Sutvarkyto sąrašo tipas
start=”.” Pradinė reikšmė,nuo kurios prasid-
eda sąrašo numeracija
. Nesutvarkyti sąrašai
type=”.” Nesutvarkyto sąrašo tipas
Išvardijimo punktas sutvarkytiems ir
nesutvarkytiems sąrašams
type=”.” Tipas kiekvienam išvardintam
sąrašo punktui
value=”.” Pradinė reikšmė kiekvienam išvar-
dintam sąrašo punktui
. Reikšmių sąrašas
Terminas,nustatomasis elementas,
kaip reikšmių sąrašo dalis
Atitinkami požymiai(aprašymas)
nustatomo elemento,kaip reikšmių
sąrašo dalies
Žymės puslapiuose ir perėjimas
prie jų
href=”.” Perėjimas paggal požymį
Vaizdų įterpimas į puslapį
src=”.” Grafinės bylos adresas ir pavadinimas
alt=”.” Trumpas tekstas grafinei bylai
align=”.” Vaizdinio lygiavimas
width=”.” Plotis pikseliais
height=”.” Aukštis pikseliais
lowsrc=”.” Kelias į grafinę bylą,kuri pasirodo
prieš pilną vaizdą
vspace=”.” Atstumas tarp teksto ir vaizdo
vertikalia kryptimi
hspace=”.” Atstumas tarp teksto ir vaizdo
horizontalia kryptimi
border=”.” Rėmelis aplink paveikslėlį
. Lentelės sudarymo žymė
border=”.” Rėmelis lentelei
cellspacing=”.” Atstumai tarp lentelės ląstelių
cellpadding=”.” Informacijos atstumas nuo ląstelės
krašto
width=”.” Lentelės arba ląstelės plotis
bgcolor=”.” Lentelės ar atskirų ląstelių fono spalva
background=”.” Lentelės ar atskirų ląstelių fono
vaizdas
. Žymė lentelės eilutei sudaryti
. Žymė lentelės ląstelei sukurti
Dauguma WWW informacijos kurimo programu, skirtu butent tokios informacijos patalpinimui i Interneta, atskiria vartotoja nuo realaus (fizinio) kuriamos informacijos vaizdo ir iš karto rodo informacija tokiame pavidale, kokiame ji matysis jau patalpinta i Interneto WWW serveri. Tokia technologija vadinama WYSIWYG (what you see is what you get). Tokiu budu, kuriant savo ar kito namu puslapi Internetui, visiškai nereikia žinoti kaiip visa Jusu kuriamo namu puslapio informacija yra perduodama iš WWW serverio visiems besikreipiantiems vartotojams ir kokiu budu ji užrašoma i byla ar bylas.
Taciau, norint profesionaliai kurti WWW puslapius, butina žinoti kaip realiai atrodo tai, ka rašai. Dabartiniai WYSIWYG redaktoriai realizuoja tik dali visu HTML kalbos galimybiu ir tam naudoja standartini, taciau ne visada efektingiausia kodavimo algoritma. Tada tenka paciam „apeiti“ šia papildoma siena, skiriancia nuo realios informacijos ir bandyti koreguoti tiesiogiai bylas, kuriose saugomas konkretus puslapis.
Taigi, kaip iš tikro atrodo informacija, talpinama WWW serveriuose ? Visa WWW puslapiuose esanti informacija susideda iš vieno ar daugelio HTML dokumentu – ASCII koduotu tekstiniu bylu, naudojanciu HTML (Hypertext Markup Language) kalba.
Pirmosios taisykles ir patarimai
WWW puslapio planavimas
Visu pirma, prieš pradedant kurti savo pirma puslapi, butina ji kruopšciai suplanuoti. Štai keletas klausimu, i kuriuos butina rasti atsakyma:
1. Kokia informacija noretumete patalpinti savo puslapyje?
2. Kokio stiliaus puslapi noretumete kurti: linksmas, pokštaujantis, netiketas, originalus, standartinis, rimtas, solidus ir tt..?
3. Ar Jums reikes rinkti informacija apie Jusu puslapio lankytojus?
4. Kokia bus Jusu puslapio bylu hierarchine struktura? Ši klausimas svarbus, nes jei bylos bus sugrupuotos pagal kažkokius kriterijus, tai po to bus daug lengviau perkelti savo puslapio atskirus dokumentus ar dalis kitur bei juos keisti.
5. Kokius Interneto šaltinius ir nuorodas naudosite savo puslapyje? Nagrinedami ši klausima Jus galesite supaprastinti savo puslapio struktura, sumažinti informacijos dubliavimo tikimybe ir padaryti savo puslapi „lengvesniu“.
6. Kokia bus Jusu WWW puslapio atskiru dokumentu hierarchija? Kaip jus organizuosite navigacija tarp puslapio dokumentu, kurie ju bus pagrindiniai – nuorodu dokumentai, o kurie tik infomacijos nešejai, kokiu budu sukurti paprasta navigacija tarp skirtingu dokumentu ir ju daliu?
Nepamirškit tu, kurie lankys Jusu puslapi !
Keletas pagrindiniu principu, kuriu neverta pamiršti:
1. Minimizuokite savvo puslapio dokumentu persiuntimo laika – ne visada puiki ir gausi grafika patraukia smalsuoli: jei po 10 minuciu jis tesulauks tik trecdalio puslapio, tai vargu ar jis bus jau toks sužavetas… Taigi, ypac pradinius savo puslapio dokumentus geriausia daryti kuo paprastesnius, bet paliekancius ispudi.
2. Informacija puslapyje turi buti lengvai pasiekiama – patartina svarbia informacija talpinti ne giliau nei antrame WWW puslapio lygyje. Vartotojas gali laukti dvieju Jusu dokumentu pasirodymo ekrane, bet vargu ar jis ryšis treciam bandymui, nebet jei ši informacija jam labai labai reikalinga.
3. Naudokite alternatyvius informacijos pateikimo budus – ne visos naršykles supranta ir teisingai interpretuoja specifines ar naujas HTML kalbos komandas, todel patartina šalia grafiniu nuorodu naudoti tekstines, šalia video bylu – grafines, šalia sudetingos strukturos HTML dokumentu – paprastesnius. Tokiu budu Jus padidinsite skaiciu vartotoju, kuriems bus pasiekiamas ir suprantamas Jusu puslapis.
4. Minimizuokite savo puslapiuose naudojamo garso kieki, nes garsines bylos yra dideles ir reikalauja didesnio greicio perdavimo liniju, todel gali smarkiai stabdyti puslapio siuntima Internetu vartotojui. Be to, ne visi megsta ar turi galimybe klausytis muzikos dirbdami su naršyklemis. Todel geriausia suteikti galimybe vartotojui paciam rinktis – reikalingas garsas ar ne.
5. Atidžiai ir atsargiai naudokite spalvas – spalvotas ar margas fonas gali visiškai užgožti teksta dokkumente, o spalvotas tekstas gali „paskesti“ fone. Visur reikalinga grožio, ižiurimumo bei komforto pusiausvyra.
6. Išskaidykite puslapyje naudojama grafika i atskirus dokumentus – kuo daugiau grafikos yra dokumente, tuo leciau jis atsiranda vartotojo ekrane ir tuo greiciau senka jo kantrybe. Todel patartina pateikti gausia grafika išskaidžius ja i prasmiškai susijusias dalis.
7. Suraskite kompromisa tarp naudojamos grafikos kiekio ir dydžio bei tiketinu vartotoju prisijungimo greicio bei noro pamatyti tai, ka Jus siulote savo puslapyje.
8. Dideles apimties grafika puslapyje pakeiskite sumažintomis kopijomis, kartu pridedami nuoroda i originala – kam reikia, tas susiras ir pažiures.
WWW puslapiu etiketas, priežiura ir autorystes teises
Kaip elgtis po to, kai Jusu puslapis jau atsidurs Internete:
1. „Neužmirškite“ savo puslapio – jei keiciasi informacija, kuri paskelbta puslapyje ar keiciasi nuorodos – koreguokite savo puslapi, nauja ir teisinga informacija ypac vertinama Internete.
2. Savo puslapyje idekite nuorodas i naujausiu naršykliu versiju puslapius, ypac, jei Jus naudojate naujas tu programu teikiamas galimybes. Tada vartotojas gales greitai „patobulinti“ savo programa, jei informacija Jusu puslapyje ji sudomins, bet bus nepasiekiama del naršykles senumo.
3. Informuokite vartotoja apie savo puslapio naujienas, problemas ir pataisymus – tai pades lengviau išspresti iškylancias problemas arba greiciau susiorientuoti puslapyje.
4. Jeigu perkeliate savo puslapi i kita serveri ar
vieta, patartina bent jau keleta menesiu palikti senoje vietoje „perkelimo“ puslapi trumpai informuojanti apie situacija ir automatiškai perkelianti vartotoja i naujaja vieta.
5. Geriausia, kad Jusu WWW puslapio pagrindines bylos vardas sutaptu su WWW serverio vartojamu pagal nutylejima vardu. Tai palengvins Jusu puslapio radima, nes nereikes speti puslapio vardo, o tereiks žinoti jo adresa.
Internetas ir autorystes teises
Pagrindine taisykle internete yra tokia: visa, kas yra pateikta Internete gali buti kopijuojama be kokiu tai apribojimu. Todel, jei Informacija puslapyje yra ssvarbi ar del kažkokios kitos priežasties negali buti laisva platinama, butina apie tai perspeti vartotojus
Vartotojui ir destytojui
Perskaite šia tema išmoksite sukurti savo prisistatyma Internete (Home Page). Prieš mokydamiesi pagalvokite, ka noretumete paskelbti Internete. Savo kompiuteryje galima tureti kuri nors HTML redaktoriu. Nepamirškte, kad jusu turima naršykle gali parodyti ir jusu kompiuteryje esanti HTML dokumenta.
Destytojui: sutrumpintame variante šios dalies nagrinejimas praleidžiamas. Specialistams reikia skirti visa likusi laika – apie 4 valandas teorijos, 6-8 val. praktikos darbu. Prieš mokantis ppatariame paruošti pateikiamos informacijos projektus. Užduoties pavyzdys: sukurti WWW puslapius, kurie pristatytu pasirinkta sriti (saves, klubo, temos, organizacijos pristatymas). Puslapyje turi buti ižanga, paaiškinanti pateikiamos informacijos užmoji, tikslus, kiekvieno šaltinio ryši su pateikiama informacija. Butinus panaudoti HTML elementus (nuorodos, remeliai, ggrafika, judantys elementai, garsas ir t.t.) apibrežia destytojas. Informacija turi buti išdestyta aiškiai ir patraukliai. Susitarti su kurio nors serverio administracija del vietos geriausio projekto paskelbimui.
Pagrindiniai HTML kalbos elementai
HTML dokumento struktura
HTML dokumenta sudaro keturios pagrindines dalys:
1. HTML – Visi HTML dokumentai prasideda nuoroda, kuri informuoja naršykle, kad dokumentas yra parašytas naudojant HTML kalbos elementus.
2. Head – Tai vadinamoji HTML „antrašte“, nurodanti ivairia technine informacija, pavyzdžiui dokumento autoriu, programa, su kuria dokumentas buvo kurtas, naudojama kodu lentele ir pan.
3. Title – Tai dokumento pavadinimas, kuris bus rodomas peržiuros programos lango titulineje eiluteje.
4. Body – Tai pagrindine HTML dokumento dalis, susidedanti iš HTML komandu ir teksto.
HTML kalba sudaro komandos, kurios nurodo peržiuros programai, kaip reikia vaizduoti teksta ir kkitus objektus. HTML komanda susideda iš vardo ir argumentu, „apskliaustu“ ženklais ‘<‘ ir ‘>’, pavyzdžiui
. Dažniausiai komandos turi ir savo pabaigos žyme, rodancia, kur baigiasi komandos veikimas ir susidedancia iš ženklo ‘/’ ir komandos vardo „apskliaustu“ ženklais ‘<‘ ir ‘>’, pavyzdžiui
. Komanda nurodo kaip turi atrodyti tekstas, esantis tarp komandos ir jos pabaigos žymes. Pats elementariausias HTML dokumento pavyzdys:
Mano pirmasis puslapis
Hello World !
Kaip matote, visos keturios dokumento dalys yra nurodomos HTML komandomis. Ju vvardai atitinka daliu angliškus pavadinimus. Kiekviena ju turi pabaigos žyme. Tai pagrindines HTML kalbos komandos. Pirmoji ju – yra privaloma. Visi HTML turi prasideti dokumentai prasideda komanda ir baigtis žyme ( galimi nukrypimai nuo šios taisykles, bet apie tai veliau).
Analogiškai kitas dokumento dalis atitinka komandos:
• Head – ir pabaigos žyme .
• Title – Cia rašomas pavadinimas ir .
• Body – Cia talpinama visa informacija ir kitos HTML komandos ir .
Pastaba: Tolimesnuose skyriuose grišime prie detalesnio šiu komandu nagrinejimo
Svarbiausi HTML dokumento elementai
Taigi, visu pirma HTML dokumente turi buti irašytos pagrindiniu strukturos elementu komandos , ir ir jas atitinkancios pabaigos žymes , ir . Informacija talpinama tarp komandos ir jos pabaigos žymes. Teksta Jus galite rašyti naudodami pati ivairiausia teksto formatavima – tarpus, tabuliacija, perkelima i kita eilute ar centravima, taciau tai ignoruos naršykle – ji demesi kreips tik i HTML komandas . Papildykime savo pavyzdi keletu fraziu:
Mano pirmasis puslapis
Hello World !
Na, rodos, ir viskas. Viso gero
Pavadinimai
Tekstas dažniausiai skirstomas i dalis ir kiekviena ju turi savo atskira pavadinima. Tai fraze, atskirta nuo kito teksto ir galbut rašoma didesnemis ir ryškesnemis raidemis, nei visas kitas tekstas. Pavadinimams yra išskirta atskira HTML komandu grupe vvadinama Headings . Komandos susideda iš raides ‘H’ ir skaiciaus nuo 1 iki 6. Didžiausias raides nurodo komanda
, o mažiausias –
. Komandos pabaigos žyme yra , cia i – skaicius nuo vieno iki šešiu. Taigi, štai kaip viskas atrodo (kartu su pavyzdžiu užrašyta ir komanda, kuria deretu naudoti):
Šis tekstas labai didelis< /H1>
O šis truputi mažesnis
Va šis toks pats, koki naudoju aš
O dabar pradedame mažeti
Visai visai maži
Na, ar matosi kas nors? Mažesnio pavadinimo vargu ar bereikia…
Pastraipos
HTML dokumente esanti teksta naršykle pati automatiškai dalija i eilutes pagal peržiuros lango ploti ir ignoruoja visus formatavimo simbolius. Teksto skirstymui i atskiras pastraipas naudojama komanda
(paragraph). Kiekviena nauja pastraipa turetu buti pradedamas ja. Pastraipos pabaigos žyme yra
, bet ji nera butina. Taigi, prisiminkime pavyzdi ir ji pataisykime taip:
Mano pirmasis puslapis
Hello World !
Na, rodos, ir viskas. Viso gero
Nuorodos
HTML dokumentai išsiskyre kaip atskira informacijos pateikimo grupe ne todel, kad taip galima patogiai perduoti teksta ir vaizdus, bet todel, kad jie turi nuorodas – aktyvius teksto elementus, kuriu pagalba galima pereiti iš vieno dokumento i kkita, nesvarbu, kur tas kitas yra: tame paciame kompiuteryje ar kitame pasaulio krašte, svarbu, kad jis egzistuoja ir yra teisingai nurodyta jo dislokacijos vieta. Vartotojui tai suteikia galimybe klavišo paspaudimu lengvai keliauti WWW puslapiais. Paprastai nuorodos (hyperlinks) išskiriamos iš teksto spalva ir pabraukimu, todel buna nesunkiai atpažistamos viso teksto fone. Nuorodoms formuoti naudojama komanda .
komanda atrodo taip:
. , o dokumente tai atrodys šitaip:
Mano antras puslapis .
Šiame pavyzdyje nuoroda yra i dokumenta, kuris yra tame paciame kompiuteryje ir tame paciame kataloge, kaip dokumentas, kuriame ši nuoroda rašoma. Taciau taip buna ne visada. Dažnai dokumentas buna kitame kataloge ar net kompiuteryje, todel naudojami keli nuorodu tipai:
• Reliatyvi nuoroda – nuoroda i dokumenta, esanti kitame kataloge, pradedant katalogu, kuriame yra dokumentas. Pavyzdžiui :
.
• Absoliuti nuoroda – nuoroda i dokumenta, esanti kitame kataloge, pradedant šakniniu katalogu. Pavyzdžiui:
.
• Bendroji nuoroda – nuoroda i dokumenta, dažniausiai (bet ne butinai) esanti kitame kompiuteryje, naudojant universalu informacijos šaltinio adresa (URL). Pavyzdžiui:
.
Teksto formavimas
Tekstą HTML dokumentuose galima ne tik skirstyti į pastraipas, bet ir naudoti daugumą teksto formavimo būdų, naudojamų šiuolaikinėse tekstų ruošimo programose, tokiose kaip Microsoft Word. Yra skiriami du teksto f
ormavimo būdai:
Loginis formatas – priklauso nuo naršyklės. Tekstas parašytas naudojant komandą H1 visada bus didesnis nei tekstas, parašytas naudojant komandą H2, bet koks tiksliai bus raidžių dydis priklauso nuo naršyklės ir bendu atveju gali būti skirtingai programai skirtingas.
Fizinis formatas – visiškai priklauso tik nuo WWW puslapio kūrėjo. Tarkime, Jūs galite fiksuoti, kad tam tikra teksto dalis bus rašoma naudojant 14 dydžio TimesLT šriftą. Tada nepriklausomai nuo peržiūros programos tekstas bus vaizduojamas būtent 14 dydžio TimeLT šriftu, žinoma jei ttoks šriftas yra vartotojo kompiuteryje. Priešingu atveju rezultatai gali būti įvairūs.
Visos teksto formavimo komados turi pradžios ir pabaigos žymes. Komanda lemia tik teksto, esančio tarp šių dviejų žymių, vaizdą. Tekste, esančiame tarp vienos komandos pradžios ir pabaigos žymių, galima naudoti kitas komandas.
Pagrindiniai teksto formavimo būdai
Pagrindiniai trys teksto stiliai yra jau seniai įprasti paryškintas (bold), kursyvas (italic) ir pabrauktas (underline). Na o juos atitinka komandos B, I ir U:
Komanda Pabaigos žymė Pavyzdys
Šis tekstas ryškesnis ir geriau mmatomas
Tai švelnus, „pasviręs“ tekstas
Pabrauktas tekstas, paprastai kas nos svarbaus
Šrifto pakeitimas
Paprastai visas tekstas HTML dokumente rodomas tokiu šriftu ir spalva, kokie būna nurodytas naršyklėje ar HTML dokumento komandoje
. Tačiau skirtingoms teksto dalims galima naudoti skirtingus ššriftus ir spalvas. Šrifto ir spalvos keitimui naudojama komanda , kurios pabaigos žymė yra . Štai pagrindiniai šios komandos atributai:
HTML komanda Trumpas aprašymas Pavyzdžiai
tekstas Tekstas bus vaizduojamas tokiu šriftu, koks nurodytas, jei toks šriftas yra vartotojo kompiuteryje MS LineDraw, Modern
tekstas Tekstas vaizduojamas spalva, nurodyta šešioliktainiu kodu (rrggbb). Spalvą galima nurodyti ir raktiniu žodžiu. geltona,
žalia,
raudona
tekstas Nurodo, kokio dydžio turi būti raidės. Leistini skaičiai nuo 1 iki 7. 1 atitinka 9 taškų dydį, o 7 – 36-ių. Dydis gali būti nurodomas ir reliatyviai: -3, -2, -1, +1, +2, +3 – nurodo kiek turi pasikeisti raidžių dydis, lyginant su naudojamomis. trys,
penki,
septyni
Galima rašyti ir keletą atributų vienoje komandoje. Pavyzdžiui, komandos < rezultatas bus toks:
Penkto dydžio mėlynas tekstas, rašytas „TimesLT“ šriftu
Pastaba: Jei šrifto, kurį nurodėte, vartotojo kompiuteryje nebus, tai laukiamo efekto nebus. Taigi, patariama nepiknaudžiauti šia galimybe.
Galima nurodyti ir šriftą, skirtą visam dokumento tekstui, išskyrus ribojamą komanda . Tai daroma komanda be pabaigos žymės, kurios atributai tokie pat, kaip ir komandos .
Loginiai formatai
Teksto, esančio tarp šių komandų pabaigos ir pradžios žymių, realus vaizdas gali keistis priklausomai nuo kompiuterio ir naudojamos naršyklės. Štai keletas komandų:
Komanda Paaiškinimas Pavyzdys <
tekstas Tai komanda, skirta cituojamam tekstui pažymėti. Paprastai tekstas būna parašytas kursyvu „Mokytis, mokytis ir dar kartą mokytis !“
tekstas Analogija poligrafiniam kursyvui. Paprastai tai tekstas kursyvu. typographic emphasis
tekstas Skirta tekstui, parašytam ar gautam iš vartotojo klaviatūros. Paprastai tai tekstas monospace šriftu. Keyboard – monospace font
tekstas Analogija paryškintam poligrafiniam kursyvui. Paprastai tai paryškintas tekstas. strong typographic emphasis
tekstas Paprastai nurodo kintamojo vardą. Tekstas dažniausiai parašytas kursyvu. Tokiu šriftu rašykite kintamųjų vardus
Fiziniai formatai
Tai teksto formatavimo komandos, kurios nepriklauso nuo peržiūros programų. Tarp jų yra jau aukščiau minėtos , ir komandos, o taip pat ir keletas kitų:
tekstas – tekstas taps truputį didesnis už aplinkinį.
tekstas – tekstas turėtų mirksėti. Ar mirksi? Jei ne, vadinasi Jūsų naršyklė „nesupranta“ šios komandos.
tekstas – tekstas taps truputį mažesnis už aplinkinį.
tekstas – tekstas bus perbrauktas, kaip neteisingas žodis tekste…
tekstas – tekstas bus truputį žemiau ir mažesnis už aplinkinį.
tekstas – tekstas bus truputį aukšciau ir mažesnis už aplinkinį.
tekstas – teletaipo teksto stilius – fixed-width typewriter font.
Teksto grupavimo komandos
Tai komandos, skirtos ne atskiru žžodžiu formatavimui, bet prasminiu teksto daliu išskyrimui i grupes. Šios komandos galioja visam tekstui nuo komandos pradžios iki jos pabaigos žymes. Viena ju – jau mineta pastraipos komanda
. Tai labai svarbus HTML dokumento formavimo irankiai. Štai keletas ju:
Labai svarbi komanda, suteikianti galimybe perkelti teksta i nauja eilute. Skirtingai nei komanda
ji nepalieka vertikalaus tarpo tar teksto iki komandos ir po komandos. Pavyzdys:
Štai pirma eilute
O štai antra eilute
WWW naršykles ignoruoja daugiau nei viena tarpa tarp raidžiu, kartais reikalinga iterpti horizontalius (paragrafo pradžios atitraukimas) ar vertikalius tarpus ir yra nepatogu naudotis tokiomis priemonemis kaip
komanda. Bendru atveju tarpas – tai tušcia vieta dokumente ir nors iš pirmo žvilgsnio tai atrodo paprasta, taciau ne taip jau lengva realizuoti be specialios komandos. Taigi, komanda butent ir skirta tarpams tekste formuoti. Ji turi keleta argmentu rinkiniu:
• – nurodo kokio tipo bus tarpas – vertikalus, horizontalus. Naudojama, jei tarpo dydis (SIZE) nurodomas takškais (vienas matavimas).
• – rodo, kad tarpo dydis bus matuojamas bloku, kurio aukštis ir dydis nurodytas. Šiuo atveju galima naudoti ir atributa ALIGN .
Pavyzdžiai:
Štai cia horizontalus 25 tašku ilgio tarpas – . Cia jis baigiasi.
O dabar tokio pat dydžio vertikalus tarpas – Ši eeilute turetu buti „atitraukta žemyn nuo viršutines.
Panaudosime atributa BLOCK, 25×25 dydžio tarpui sukurti: Pabaiga
Trumpa eilute.
…
Visas tekstas, esantis tarp šios komandos pradžios ir pabaigos žymes privalo buti vienoje eiluteje ir negali buti perskeltas i kelias. Paprastai teksta naršykle suskaido pagal žodžius i eilutes, taciau jei reikalinga, kad koks pavadinimas tarkime Vilniaus Universitetas nebutu perskeltas (viena eilute baigiasi Vilniaus, o kita prasideda Universitetas), tai reikia ji „apskliausti“ komanda ir jos pabaigos žyme, kurios nedera pamiršti. Analogiška rezultata galima pasiekti naudojant specialu simboli ‘ ‘, reiškianti vieta, kurioje negalimas perkelimas ar eilutes dalijimas, bet yra tarpas. Pavyzdys:
Tekstas tekstas tekstas, dar truputi teksto, kuo daugiau teksto, na o dabar pavadinimas: Vilniaus Universitetas .
Komanda, priešinga komandai , nes „sufleruoja“ naršyklei, kuriuo žodžiu ji gali perkelti teksta i kita eilute, jei to prireiktu. Naudojama tekste, esanciam tarp komandos ir jos pabaigos žymes, norint fiksuoti leistina perkelimo vieta tam tikrame teksto intervale. Pavyzdys (tekstas prasidedantis po kablelio yra „apskliaustas“ komandos ir jos pabaigos žymes):
Tekstas tekstas tekstas, dar truputi teksto, kuo daugiau teksto, na o dabar pavadinimas: Vilniaus Universitetas .
Na o ši komanda leidžia apsieiti be HTML komandu formatuojant teksta, nes daba
r tekstas bus pateiktas fiksuotu šriftu ir butent tokiame formate, kokiame pateiktas byloje. Keletas pastabu apie teksta ir kitu komandu naudojima tekste, esanciame šios komanos itakoje:
• visi eilutes perejimo ženklai interpretuojami kaip perejimai i nauja eilute;
• komanda
neatlieka savo vaidmens, o yra interpretuojama kaip perejimas i kita eilute;
• gali buti naudojamos nuorodos ir teksto formatavimo komandos;
• teksto grupavimo komandos nevartotinos, nes yra neveiksmingos.
• horizontalios tabuliacijos ženklas interpretuojams neteisingai, todel nevartotinas.
Pavyzdys:
Stai keletas tarpu: O dabartekstas….. O cia kita eeilute ir nepanaudota nei vienos HTML komandos !!! Tiesa, negalima naudoti spec. simboliu, todel nera lietuvisku raidziu 
…
…
Tekstas, esantis tarp komandos ir jos pabaigos žymes, bus centruojamas, t.y. atsidurs puslapio viduryje jo vertikaliu kraštu atžvilgiu. Pavyzdys:
Šis tekstas yra per pati viduriuka…
…
Tai labai patogi komanda, skirta dalies teksto orientacijai keisti: t.y. lygiuoti ji i kairiji/dešini krašta arba centruoti. Tekstas tarp komandos pradžios ir pabaigos žymiu yra pradedamas ir baigiamas nauja eilute. Taam yra naudojamas atributas ALIGN=“LEFT|CENTER|RIGHT“ . Ši atributa turi ir kitos teksto grupavimo komandos:
,
, …
. Pavyzdys:
Komanda
Šis tekstas lygiuojasi i kairiji kašta.
. Ir rezultatas:
Šis tekstas lygiuojasi i kairiji kašta. Šis tekstas yra puslapio centre Šis tekstas lyygiuojasi i dešiniji kašta.
…
Komanda skirta citatoms išskirti, tekstas truputi atitraukiamas nuo puslapio kraštu ir paprastai pradedamas ir baigiamas nauja pastraipa. Pavyzdys:
Manau , kad žodžiai Sumerk blakstienas – ir as ateisiu, –
Tau išbuciuosiu plaukus melsvus –
Be pareigu ir be jokiu teisiu, –
Kaip ir tas vejas – jaunas, gaivus. Yra iš Salomejos Neries eilerašcio.
…Tai komanda, skirta adresui, autoriui ar kitai tokio tipo informacijai rašyti. Visa informacija pradedama iš naujos eilutes ir baigiama taip pat nauja eilute. Tekstas viduje rašomas kursyvu. Pavyzdys:
Tekstas … po to adresas Mr. Cosmic Kumquat
SSL Trusters Inc.
1234 Squeamish Ossifrage Road
Anywhere
NY 12345
U.S.A. vel tekstas …
HR
Šia komanda galima linija atskirti viena teksto dali nuo kito (kas sekmingai daroma šiame dokumente). Galimi patys ivairiausi šios linijos variantai, naudojant atributus:
• – nurodo, kokio plocio turi buti linija. Štai keletas:
• – nurodo kokio ilgio bus linija: absoliuciu dydžiu, t.y. kiek tašku, arba santykiniu dydžiu – kiek procentu puslapio užims. Pavyzdžiai (10, 50 ir 100 %):
• – na tikriausiai aišku, kad nurodo koks bus lygiavimas: i kairi krašta, centruota linija ar i dešini krašta. Žinoma, tai naudinga tik tada, kai linija nera viso puslapio plocio. Pavyzdukai:
• – tai stora „neispausta“ linija be šešeliu – tiems kam reikia tikrai solidžios linijos:
• – galima nurodyti kokios spalvos bus linija vartojant spalvos varda arba šešioliktaini koda. Pavyzdžiai:
…
Komanda, skirta teksto „paslepimui“ – tekstas tarp komandos ir jos pabaigos žymes nebus matomas naršykles vartotojui. Ši komanda ekvivalenti komandai . Pavyzdžio nebus, nes Jus vis tiek jo nematysite (juk tam komanda ir skirta). Naudotina, norint paslepti komentarus ar nereikalingas šiuo monentu, bet gal dar praversiancias dokumento dalis. Pastaba: Jei pavyzdys aprašyme neatitinka to kas parašyta, tai dar nereiškia, kad jis neteisingas, gal tiesiog Jusu naršykle „nesupranta“ kai kuriu naudojamu komandu ar ju atributu. Patikrinkite tai.
Sarašai ir apibrežimai HTML dokumente
Dar vienas populiarus budas vaizdžiai pateikti informacija yra sudarineti sarašus, išvardijimus, vizualiai išskirtus savoku apibrežimus. Taigi, Jums neteks to daryti savarangiškai: sudarineti ir kiekviena karta koreguoti sarašu numeracija, keiciant ar pildant sarašus, nes specialiai tam yra skirta atskira HTML komandu grupe.
…
Tai nenumeruojamas sarašas. Bendras šios komandos formatas yra:
tekstas
tekstas
…
;
Sarašo pabaigos žyme rašyti butina. Sarašo elementams atskirti naudojama komanda , kuria prasideda kiekvienas naujas sarašo elementas. Komandoje arba naudojant atributa TYPE=“disc|square|circle“ galima pakeisti sarašo elemento simboli. Jei atributas naudojamas komandoje , tai jis galioja visiems sarašo elementams, jei su komanda , tai jis galioja tik elementams, esantiems po tos komandos. Kitas sarašas taip pat gali buti sarašo elementas. Jei atributas TYPE nenurodomas, tai elemento simbolis priklauso nuo sarašo gylio. Elemento simboliai gali buti triju tipu:
• – skritulio tipas. Komanda .
• – kvadrato tipas. Komanda .
• – apskritimo tipas. Komanda .
Sarašo elementai yra truputi atitraukti nuo kairiojo puslapio krašto ir juose galima naudoti kitas HTML komandas. Pavyzdys:
• Pirmasis elementas (nenumeruojama ir nera nurodyta kokio tipo simbolis).
Kita eilute . Va taip.
• O dabar pakeisime simboli i kvadratuka ir pridesime dar viena saraša:
o Cia jau kito sarašo elementas
• Pabaiga.
…
Tai numeruojamo sarašo komanda, kurios formatas visiškai toks pat kaip ir komandos :
tekstas numeris 1
tekstas numeris 2
…
Komanda turi papildoma atributa START=“numeris“ , kuriuo galima nurodyti, kuriuo numeriu pradeti numeracija. Tai pat komandoje galima naudoti atributa VALUE=“numeris“ , numeracijos pakeitimui, pradedant šiuo elementu. Tada naujoji numeracija galios visiems elementams, esantiems po komandos.
Dar vienu komandos atributu galima nurodyti, kokius simbolius naudosite numeracijai. Tai atributas TYPE=“kodas“ . Galimi keletas numeracijos tipu:
Kodas Stilius
1 arabiški numeriai 1, 2, 3, …
a mažosios raides a, b, c, …
A didžiosios raides A, B, C, …
i maži romeniški skaiciai i, ii, iii, …
I dideli romeniški skaiciai I, II, III, …
Kaip ir nenumeruojamuose sarašuose, numeruojamu sarašu elementai gali buti kiti sarašai. Na o dabar truksta tik pavyzdžio. Pavyzdys:
1. Romeniško stiliaus (maži skaiciai) sarašas, pradetas ketvirtu numeriu. Komanda .
2. Pakeiciame numeracija: pradedame numeruoti nuo dešimties –
3. Na rodos viskas aišku ?
…
Tai apibrežimu sarašas, skirtas savokoms kartu su ju apibrežimais vardinti. Apibrežimu saraša sudaro elementai, patys susidedantys iš dvieju daliu: savokos pavadinimo ir savokos apibrežimo. Pilnas (Definition List) komandos formatas yra toks:
(Definition term) Apibrežiamos savokos pavadinimas.
(Term Definition) Savokos apibrežimas.
… (toliau kartojamos „poros“ ir )
Po komandos galima rašyti tik teksta, be grupavimo kamandu, o po komandos – bet koki teksta su bet kokiomis komandomis teksto viduje. Kiekviena savoka pradedama iš naujos eilutes, o jos apibrežimas sudaro atskira, kiek atitraukta nuo vertikaliu puslapio kraštu teksta, taipogi prasidedanti iš naujos eilutes. Pavyzdys:
Pirmoji savoka Pirmosios savokos apibrežimas. Antroji savoka Antrosios savokos apibrežimas,
Antra eilute apibrežime.
Lenteles, lenteles, lenteles …
Dažnai naudojamas, kompaktiškas, malonus akiai ir lengvai suprantamas informacijos pateikimo budas yra lenteles. Lentelei naudojama komanda yra sudetinga ir todel ivairios jos variacijos leidžia gauti pacius ivairiausius rezultatus. Lentelems naudojama komanda , ja butinai turi užbaigti pabaigos žyme . Lentele sudaro eilutes ir lasteles. Tiek eilutems, tiek lastelems formuoti yra atskiros komandos, eilutems – komanda (Table Row) , su privaloma pabaigos žyme , o lastelems – (Table Data) ir atitinkamai . Komanda su pabaigos žyme yra skirta lenteles pavadinimui, o komanda (Table Header) su pabaigos žyme skirta atskiru stulpeliu pavadinimams. Taigi, bendra komandos forma yra:
;
Pavadinimas
< !– Stulpeliu pavadinimai –>
Pirmas stulpelis Antras stulpelis
< !– Pirma eilute –>
Duomenys Duomenys
…
O tokios komandos rezultatas bus:
Pirmas stulpelis Antras stulpelis
Pavadinimas
Duomenys Duomenys
…
Gal ir nelabai ispudinga iš pirmo žvilgsnio, bet visos komandos turi papildomus neprivalomus atributus, galincius neatpažistamai pakeisti lenteles vaizda. Komandos atributai:
ALIGN=“LEFT|CENTER|RIGHT“ Na jau turbut aišku, kad šis atributas leidžia „orientuoti“ lentele puslapyje: i kaire, centre, i dešine. WIDTH=“taškai|procentai“ Nurodo, kokio plocio turi buti lentele. Galimi du nurodymo budai: absoliutus ir relatyvus. Pirmu atveju nurodoma, kiek tiksliai tašku turi užimti lentele (WIDTH=250), antru – kiek procentu puslapio plocio turi užimti lentele (WIDTH=“50%“ – puse puslapio). BORDER Nurodo, kokio plocio (kiek tašku) turi buti lenteles ribojantys borteliai. Jei atributas nurodomas be konkreciu skaiciu ar nenurodomas, tai lenteles borteliai bus tokio plocio, kokie yra naršykleje pagal nutylejima (dažniausiai 1 taškas), na o jei bus nurodyta BORDER=0, tai bortelio iš viso nebus. CELLSPACING=“taškai“ Kiekviena lenteles lastele HTML dokumente gali buti atskirta nuo kitu lasteliu, o šis atributas ir nustato, kokio plocio bus skiriamoji lasteliu erdve. CELLPADDING=“taškai“ Nurodo koks turi buti atstumas tarp informacijos lasteles viduje ir lasteles bortelio. BGCOLOR=“spalvos_kodas“ Šiuo atributu galima pasirinkti ir lenteles fono spalva. BACKGROUND=“nuoroda i grafine byla“ Dar vienas budas pakeisti lenteles fona – tai nurodyti grafini vaizda. Abu paskutiniai atributai analogiški komandos atributams.
Štai komanda:
< !– Stulpeliu pavadinimai –>
Pirmas stulpelis Antras stulpelis
< !– Pirma eilute –>
Duomenys Duomenys
…
Ir jos rezultatas:
Pirmas stulpelis Antras stulpelis
Duomenys Duomenys
…
Kita lentelems skirta komanda yra . Jos paskirtis – suskirstyti lentele i eilutes; kiekviena lenteles eilute HTML dokumente turi prasideti komanda ir baigtis jos pabaigos žyme . Tik tokiu budu peržiuros programa gali teisingai sudalinti lentele i lasteles. Ši komada taipogi turi savo atributus: ALIGN=“LEFT|CENTER|RIGHT“ Nurodo kokia bus horizontalioji šios eilutes lasteliu turinio orientacija – link kairiojo/dešinio krašto ar lateles centre. VALIGN=“TOP|MIDDLE|BOTTOM|BASELINE“ Nurodo kokia bus vertikalioji šios eilutes lasteliu turinio orientacija – informacija bus viršuje, centre, apacioje ar visu eilutes lasteliu turinys „lygiuos“ savo apacia vienu lygiu. BGCOLOR=“spalvos_kodas“ Nurodo kokia bus šios eilutes lasteliu fono spalva.
Štai komanda:
Pirmas stulpelis Antras stulpelis
Duomenys Duomenys
Duomenys
Antra eilute Duomenys
…
Ir jos rezultatas:
Pirmas stulpelis Antras stulpelis
Duomenys Duomenys
Duomenys
Antra eilute Duomenys
… ir …
Komandos ir yra labai panašios, tiksliau komanda yra atskiras komandos atvejis, kai tekstas lasteleje yra paryškintas (Bold) ir jos turinys pagal nutylejima centruotas tiek horizontaliai, tiek vertikaliai. Pirmoji komanda, kaip jau mineta, „apskliaudžia“ lasteles ir tik nuo šios komandos priklauso, kiek bus lenteleje lasteliu. Pagal nutylejima, lasteles turinys šiuo atveju yra lygiuojamas prie kairiojo krašto ir centruojamas vertikaliai. Antroji komanda gali buti naudojama patogumui, nes dažniausiai lenteles turi „antraštes“. Taigi, abi šios komandos turi vienodus atributus, prapleciancius ju galimybes: ALIGN=“LEFT|CENTER|RIGHT“ Analogiškas aukšiau minetiems kitu komandu atributams, bet galioja vienos lasteles ribose. VALIGN=“TOP|MIDDLE|BOTTOM|BASELINE“ Analogiškas komandos atributui, bet galioja vienos lasteles ribose. WIDTH=“taškai|procentai“ Nurodo lasteles ploti taškais arba procentais, lyginant su visos lenteles plociu. Demesio: Pakeitus vienos lasteles ploti, keisis atitinkamai viso stulpelio lasteliu plotis. HEIGHT=“taškai|procentai“ Nurodo lasteles aukšti. Vienos lasteles aukscio koregavimas lems ir visos eilutes aukšti. NOWRAP Tai reikalavimas neskaidyti teksto lastelese i dalis taip, kad lentele tilptu i peržiuros langa. Analogiška rezultata galima pasiekti visa lasteles turini „apskliaudžiant“ komanda . COLSPAN=“skaicius“ Šis atributas naudojamas nurodyti, kiek stulpeliu turi aprebti konkreti lastele. Paprastai lasteles plotis yra vienas stulpelis, bet kartais reikalinga, kad ta pati lastele butu keliu stulpeliu procio. ROWSPAN=“skaicius“ Analogiška COLSPAN bet eiluciu atžvilgiu: nurodo kiek eiluciu aprebs konkreti lastele. BGCOLOR=“spalvos_kodas“ Nurodo, kokia bus šios lasteles fono spalva.
Štai komanda:
Pirmas stulpelis
Antras stulpelis Pirma stulpelio dalis
Antra stulpelio dalis Daug daug daug daug duomenu
Daug daug daug daug duomenu
Kiti duomenys Duomenys
Antra eiluteDuomenys Pirma eilute Antra eilute
Ir jos rezultatas:
Pirma stulpelio dalis Antra stulpelio dalis
Pirmas stulpelis Antras stulpelis
Daug daug daug daug duomenu Daug daug daug daug duomenu Kiti duomenys
Duomenys
Antra eilute Duomenys Pirma eilute
Antra eilute
…
Na ir paskutine lentelems skirta komanda, apie kuria dar nebuvo sneketa yra . Tai komanda, specialiai skirta lenteles pavadinimui. Pavadinimas gali buti lenteles viršuje (TOP) arba apacioje (BOTTOM). Komandos bendra forma yra:
Pavadinimas
Cia atributas ALIGN turi iprastine prasme ir reikšmes.
Lenteles formavimo schema
TABLE
Align
Width
Border
Cellspacing
Cellpadding
Bgcollor
Background CAPTION TR
Align
Valign
Bgcolor TD arba TH
Align Align
Valign
Width
Height
Nowarp
Colspan
Rowspan
Bgcolor
Pastaba: Jei pavyzdys aprašyme neatitinka to kas parašyta, tai dar nereiškia, kad jis neteisingas, gal tiesiog Jusu naršykle „nesupranta“ kai kuriu naudojamu komandu ar ju atributu. Patikrinkite tai. Be to, cia paminetos tik dalis komandu ir atributu, o skirtingos naršykles dažnai „supranta“ skirtingas komandas.
Grafiniai vaizdai HTML dokumente
Vien tik teksto, kad ir kaip gražiai „išdelioto“ puslapyje, dažnai nepakanka, kad WWW puslapis atrodytu taip gražiai kaip noretusi. Išeitis gana paprasta – naudoti grafinius vaizdus puslapio pagyvinimui ir svarbiausia informatyvumo padidinimui. Grafiniams vaizdams iterpti naudojama komanda (image). Ši komanda naudojama be pabaigos žymes. Grafinis vaizdas turi buti pateikiamas GIF, JPEG ar PNG formato bylose. Bendra komandos išraiška yra tokia:
Pagrindinis ir butinas komandos atributas yra SRC (source). Tai nuoroda, kokia byla bus rodoma kaip grafinis vaizdas dokumente. Byla nurodoma ne tik vardu, bet ir nuoroda i savo dislokacijos vieta. Štai pavyzdys:
Dar karta apie nuorodas ir
Kalbant apie nuorodas ir komanda nebuvo nurodytas pilnas šiu komandu formatas, nenorint apsunkinti pirmuju skyriu dideliu informacijos kiekiu, todel šiame skyriuje apie komandas bus papasakota truputi daugiau.
…
Ši komanda turi daugybe atributu ir skirta ne tik išskirti HTML dokumento kuna, kaip atskira jo strukturos elementa, bet ir nurodyti pagrindines dokumento charakteristikas. Trumpas atributu aprašymas: BGCOLOR=“spalvos kodas|vardas“ – nurodo, kokios spalvos bus viso HTML dokumento fonas. TEXT=“spalvos kodas|vardas“ – nurodo, kokios spalvos bus tekstas HTML dokumente (jei spalva nebus nurodyta kitaip). LINK=“spalvos kodas|vardas“ – nurodo, kokios spalvos bus „naujos“ nuorodos: nuorodos, kurios dar nebuvo aplankytos vartotojo (neužfiksuotos naršykles, kaip lankytos). VLINK=“spalvos kodas|vardas“ – nurodo, kokios spalvos bus „senos“ nuorodos: nuorodos, kurios jau buvo aplankytos vartotojo (užfiksuotos naršykles, kaip lankytos). ALINK=“spalvos kodas|vardas“ – nurodo, kokios spalvos bus „aktyvi“ nuoroda, t.y. nuoroda jos pasirinkimo momentu. BACKGROUND=“bylos_vardas|nuoroda“ – nurodo, kokia grafine byla bus naudojama kaip fonas HTML dokumentui. Paprastai tai nedidelis grafinis fragmentas,kartojamas tiek kartu, kol užpildo visa HTML dokumenta.
Jau buvo mineta, kad nurodant nuorodos dokumenta galima naudoti universalu šaltinio adresa (URL). Šis adresas susideda iš triju daliu: serverio tipo, serverio, dokumento ir dokumento vietos nurodymo. Pirmoji dalis naudojama todel, kad šiuolaikines peržiuros programos dažnai leidžia naudotis ne tik WWW o ir kitu serveriu resursais. Taigi, pagrindiniai tipai: .
/>Toje dokumento vietoje, iš kurios kreipiamasi rašoma nuoroda i reikiama vieta tokiu budu: dokumento pavadinimas nerašomas, o vietos vardas nurodomas toks, koks yra apibrežtas atributu NAME tik su ženklu ‘#’ priekyje:
.
Žinoma, toki konkrecios kažkokio HTML dokumento kreipimosi vietos nurodyma galima naudoti ir kreipiantis iš kito dokumento, tereikia po dokumento vardo parašyti ženkla ‘#’ ir vietos pavadinima. Pavyzdžiui:
Komanda
Atributas: ALIGN
ALIGN=LEFT
ALIGN=CENTER
ALIGN=RIGHT
ALIGN=JUSTIFY
Pavyzdys:
>
Žymė
Atributas: ALIGN
ALIGN=LEFT
ALIGN=CENTER
ALIGN=RIGHT
ALIGN=JUSTIFY
Pavyzdys:
Žymė
Pavyzdys:
Taip užrašytas tekstas
Žymės
Pavyzdys:
Žymė
Pavyzdys:
Žymės
pagalba galima už žymės esantį tekstą perkelti į kitą eilutę. Variantas
tolygus
SIZE=numeris – linijos pločiui nurodyti
WIDTH=skaičius arba procentai – nurodo linijos ilgį
ALIGN=left/right/center – nurodo linijos lygiavimą
NOSHADE – stora, neįspausta ir be „šešėlio“ linija
COLOR=spalvos vardas arba #rrggbb – nurodo linijos spalvą (ne visos naršyklės supranta).
Pavyzdžiai:
TEKSTO ŽYMĖJIMAS
HTML yra du teksto žymėjimo būdai – loginis ir fizinis. Loginis priklauso nuo konkrečios peržiūros programos (naršyklės). Pavyzdžiui, pavadinimas
Loginis teksto žymėjimas
Emphasize Emphasize
Strong Strong
Code Code
Sample Sample
Tekstui, kurį spausdins vartotojas Tekstui, kurį spausdins vartotojas
Variable Variable
Citation Citation
Abbreviation Abbreviation
Definition Definition
Fizinis teksto žymėjimas
Pajuodintas tekstas Pajuodintas tekstas
Kursyvas Kursyvas
Pabrauktas tekstas Pabrauktas tekstas
Fiksuoto dydžio šriftas Fiksuoto dydžio šriftas
Strikeout Strikeout
Definition Definition
Big Big
Small Small
Subscript Subscript
Superscript Superscript
Mirksintis tekstas Mirksintis tekstas
Šriftai
Šriftui nurodyti naudojama žymė .
Žymės atributai:
FACE
COLOR
SIZE
Standartinio šrifto keitimas į norimą:
Tekstas
Teksto nuspalvinimas:
Tekstas
(čia nurodomas spalvos šešioliktainis kodas arba tiesiog parašomas jos pavadinimas)
Raidžių dydžio keitimas:
Tekstas
(rašomas konkretus dydis, pvz. „6“, arba esamas didinamas ar mažinamas, nurodant „+i“ ar „-i“. Čia i-norimas skaičius).
Visam dokumentui šriftas nurodomas, naudojant žymę
be galinės žymės .
Pavyzdžiai:
TEKSTO FORMAVIMAS
Sąrašai ir apibrėžimai (Lists)
Labai populiarus būdas tvarkyti HTML dokumentus.
Nenumeruojamas sąrašas (Unnumbered List)
Numeruojamas sąrašas (Numbered List)
Papildomi komandos
START=“numeris“ (numeracija pradedama nuo nurodyto numerio)
TYPE=“kodas“ (nurodomi numeracijai naudojami simboliai).
Galimi kodai:
1 (arabiška numeracija),
a – mažosios raidės,
A – didžiosios raidės,
i – maži romėniški skaičiai,
I – dideli romėniški skaičiai.
Papildomas atributas VALUE=“numeris“, kai norima pakeisti numeraciją pradedant konkrečiu elementu.
Apibrėžimų sąrašas (Definition List)
Pavyzdžiai:
Nenumeruojamas sąrašas
• Elementas vienas
• Elementas du
Numeruojamas sąrašas
1. Elementas vienas
2. Elementas du
Apibrėžimų sąrašas
Apibrėžimas
Elementas vienas
Elementas du
Teksto centravimas
Žymė
Pavyzdys:
SIMBOLIŲ KODAVIMAS
Kai kuriuos simboliai HTML dokumentuose aprašomi specialiosiomis sekomis. Pavyzdžiui, < būtina užrašyti <, nes dalis vartotojų (dirbantys UNIX terpėje ar su Mac kompiuteriais) gali mūsų kompiuteriais rinkto teksto ir nesuprasti.
Matome
ekrane Apibrėžimas Specialioji
seka Skaitmeninė
seka
tarpelis
< mažiau negu < <
> daugiau negu > >
& ampersandas & &
“ kabutės “ “
‘ apostrofas ´ ‘
£ svaras £ £
¢ centas ¢ ¢
¥ jena ¥ ¥
§ paragrafas § §
© copyright © ©
® prekinis ženklas ® ®
× daugyba × ×
÷ dalyba ÷ ÷
paragrafas ¶ ¶
¼ viena ketvirtoji ¼ ¼
½ viena antroji ½ ½
¾ trys ketvirtosios ¾ ¾
¡ apverstas šauktukas ¡ ¡
± plius minus ± ±
µ mikro µ µ
« mažiau « «
» daugiau » »
¦ vertikalus brūkšnys ¦ ¦
Kai kurioms raidėms užrašyti taip pat naudojamos specialiosios sekos:
À À À à à à
Á Á Á á á á
   â â â
à à à ã ã ã
Ä Ä Ä ä ä ä
Å Å Å å å å
Ç Ç Ç ç ç ç
È È È è è è
É É É é é é
Ê Ê Ê ê ê ê
Ë Ë Ë ë ë ë
Ì Ì Ì ì ì ì
Í Í Í í í í
Î Î Î î î î
Ï Ï Ï ï ï ï
Ð Ð Ð ð ð ð
Ñ Ñ Ñ ñ ñ ñ
Ò Ò Ò ò ò ò
Ó Ó Ó ó ó ó
Ô Ô Ô ô ô ô
Õ Õ Õ õ õ õ
Ö Ö Ö ö ö ö
Ú Ú Ú ú ú ú
Ù Ù Ù ù ù ù
Û Û Û û û û
Ü Ü Ü ü ü ü
Ý Ý Ý ý ý ý
ÿ ÿ ÿ
Þ Þ Þ þ þ þ
ß ß ß
SPALVOS HTML DOKUMENTUOSE
Standartinis spalvos modelis, naudojamas internete, yra RGB. Spalva kompiuterio ekrane yra vienoks ar kitoks trijų spalvų – raudonos, žalios ir mėlynos – derinys.
Spalva HTML dokumente užrašoma šešioliktainiu kodu arba tiesiog įrašomas spalvos pavadinimas.
Spalvų kodų ir pavadinimų lentelė
Spalva ekrane Šešioliktainis kodas Spalvos pavadinimas
#000000 black
#FF0000 red
#008000 green
#0000FF blue
#FFFF00 yellow
#00FFFF cyan
#FF00FF magenta
#C0C0C0 silver
#FFFFFF white
Nuorodų į interneto svetaines, kuriose rašoma apie spalvas bei jų naudojimą HTML dokumentuose, o taip pat pateikiamos spalvų kodų ir pavadinimų lentelės, galima rasti skyriuje „Papildomi šaltiniai“.
RYŠIAI (Linking)
Žymė , be kurios HTML dokumentai būtų beveik beverčiai. Jos pagalba galima navigacija dokumento viduje, tarp skirtingų vienos interneto svetainės dokumentų bei tarp interneto tinklapių.
Atributai:
HREF=“dokumento adresas“
NAME=“pavadinimas dokumento viduje“
TARGET=“ _blank | _self | _parent | _top “
Atributas HREF
Ryšiai yra kelių tipų:
Reliatyvus ryšys – nuoroda į dokumentą, esantį kitame kataloge, pradedant katalogu, kuriame yra dokumentas:
Absoliutus ryšys – nuoroda į dokumentą, esantį kitame kataloge, pradedant šakniniu katalogu:
Bendrasis ryšys – nuoroda į dokumentą, naudojant URL (universalų informacijos šaltinio adresą):
Nuoroda į dokumentą, naudojant kitą protokolą:
Atributas NAME
Šis atributas, naudojamas vidinei navigacijai tarp konkretaus dokumento dalių arba „nušokimui“ į konkrečią vietą dokumente.
Vieta dokumente nurodoma taip:
GRAFIKA HTML DOKUMENTE
< IMG SRC = “ grafinio_failo_vardas “ >
Nėra pabaigos žymės. Grafinio vaizdo formatas gali būti:
GIF – Graphics Interchange Format
JPEG – Joint Photographic Experts Format
PNG – Portable Network Graphics
Atributai:
SRC = „failo vardas“ – grafinio failo vardas
ALT = „tekstas“ – alternatyvus tekstas.
ALIGN = “ left | right | top | middle | bottom “ – nurodo grafinio vaizdo padėtį dokumente
BORDER = “ n “ – rėmelio storis
WIDTH = “ n “ – nurodo grafinio vaizdo plotį HTML dokumente
HEIGHT =“ n “ – nurodo grafinio vaizdo aukštį HTML dokumente
VSPACE = “ n “ – nurodo, kiek tuščios vietos reikia palikti virš ir po grafiniu vaizdu
HSPACE =“ n “ – nurodo, kiek tuščios vietos reikia palikti šalia grafinio vaizdo
Pavyzdžiai:
…
< / BODY >
LENTELĖS
< TABLE > … < / TABLE >
Gana sudėtinga, bet teikianti dideles galimybes kuriant HTML dokumentus, priemonė. Lentelių pagalba galima labai įmantriai ir netikėtai komponuoti tinklapį.
Lentelę sudaro eilutės (žymė < TR > … < / TR >). Kiekviena eilutė sudaryta iš lentelės ląstelių (žymė < TD > … < / TD >). Ląstelės antraštei pažymėti naudojama žymė < TH > … < / TH >. Ląstelės užpildomos turiniu: tekstu, vaizdais, sąrašais, paragrafais, formomis, horizontaliomis linijomis, kitomis lentelėmis ir t.t.
Lentelės pavyzdys:
Lentelės, kurioje naudojama ląstelės antraštė, pavyzdys:
Lentelės antraštė
< CAPTION > … < / CAPTION >
Pavyzdys:
Lentelės atributai
ALIGN = LEFT | CENTER | RIGHT – Horizontali lentelės padėtis
WIDTH = n | % – Lentelės plotis
BORDER = n – Lentelės rėmelio plotis
CELLSPACING = n – Plotis tarp lentelės ląstelių
CELLPADDING = n – Atstumas iki rėmelio ląstelės viduje
BGCOLOR = „#rrggbb“ – Lentelės fono spalva
BACKGROUND = „grafinio failo adresas“ – Lentelės fonas (grafinis vaizdas). Atributas neveikia Netscape naršyklėje!
BORDERCOLOR = „#rrggbb“ – Lentelės rėmelio spalva
BORDERCOLORDARK = „#rrggbb“ – Lentelės rėmelio spalva
BORDERCOLORLIGHT = „#rrggbb“ – Lentelės rėmelio spalva
BGCOLOR = „#rrggbb“ – Lentelės fono spalva
Lentelės ląstelės ir atributai
ALIGN= LEFT | CENTER | RIGHT – Horizontali ląstelės turinio orientacija (taip pat ir . atributas)
VALIGN = TOP | MIDDLE | BOTTOM | BASELINE – Vertikali ląstelės turinio orientacija (taip pat ir . atributas)
HEIGHT = n | % – Ląstelės aukštis
WIDTH = n | % – Ląstelės plotis
NOWRAP – Reikalavimas neskaidyti ląstelėse teksto į dalis
COLLSPAN = n – Kiek stulpelių apjungia ląstelė
ROWSPAN = n – Kiek eilučių apjungia ląstelė
BGCOLOR = „#rrggbb“ – Ląstelės spalva (taip pat ir . atributas)
Pavyzdžiai:
Atributų BORDER, CELLPADDING, BGCOLOR, COLSPAN,
WIDTH ir HEIGHT naudojimas:
HTML PAŽENGUSIEMS
Reikalavimai gerai interneto svetainei
Ruošiantis kurti naują ar atnaujinti jau sukurtą interneto svetainę pirmiausia reikėtų:
• Numatyti, kas naudosis tinklapiais, t.y. nustatyti publikas
• Kritiškai įvertinti dabartinės (jei ji yra) svetainės struktūrą, turinį, patogumą naudoti
• Nustatyti svetainės prioritetus (ryšys su bibliotekos/institucijos funkcijomis ir veikla)
• Aplankyti ir kritiškai įvertinti kitų bibliotekų/institucijų interneto svetaines
• Išsinagrinėti specialistų rekomendacijas ir reikalavimus tinklapiams
• Išsinagrinėti ir maksimaliai atsižvelgti į tinklapių lankomumo gerinimo rekomendacijas
Svarbu, kad kiekviena biblioteka/institucija susikurtų savitą stilių, struktūrą, kad nesektų aklai kitų įstaigų pavyzdžiu.
Kad tinklapiai būtų informatyvūs ir patogūs vartotojui, reikėtų laikytis kai kurių bendrų tinklapių dizaino rekomendacijų:
• Tinklapiuose naudoti kalbą ir rašymo stilių, pažįstamą ir priimtiną to tinklapio vartotojams. Kalbėti su vartotoju jo kalba.
• Nenervinti vartotojų pernelyg didelės apimties tituliniu puslapiu. Geriau titulinį puslapį paversti vartais į į jūsų interneto svetainę.
• Vienas puslapis – viena išbaigta koncepcija/idėja jame, t.y. kiekvienas atskirai paimtas puslapis gali egzistuoti savarankiškai, ir jo turinys dėl to nenukenčia.
• Nenaudoti labai gilios (daugiau kaip 4 lygių) ir painios struktūros.
• Estetikos ir funkcionalumo balansas. Informacija svarbiau už iliustracijas.
• Jei reikia vartotojui pateikti ekrane didelės apimties paveikslą, bus geriau jei į didelį failą bus patenkama per mažesnį (thumbnail image).
• Šalia PDF failų reikėtų įdėti mažą paveiksliuką ar kaip kitaip atkreipti vartotojo dėmesį. Taip pat nereikėtų pamiršti nurodyti PDF failo dydžio. Tokiu būdu vartotojas numatys, kiek laiko jam teks laukti norimos informacijos.
• Ruošiamus tinklapius reikia patikrinti su keliomis skirtingomis naršyklėmis.
• Neskubėti diegti HTML ir kitų naujovių. HTML keičiasi kas 6-12 mėn., tad bus labai sunku tvarkyti tinklapius. Kita vertus, paskelbus naują HTML versiją net ir po metų dalis naršyklių jos nepalaiko. Rekomenduojama reguliariai apsilankyti W3C svetainėje ir susipažinti su visomis naujovėmis (http://www.w3.org/MarkUp/).
• Tinklapių vientisumo pojūtis ir vaizdas. Tą galima užtikrinti, naudojant šabloninius failus naujiems tinklapiams ruošti.
• Kiekviename puslapyje turėtų būti autoriniai duomenys (kas paruošė tekstą, kas HTML, copyright), el. pašto adresas pastaboms ir klausimams, sukūrimo ir atnaujinimo datos. labai gerai, kei kiekvieno puslapio apačioje nurodomas ir to puslapio pilnas adresas.
• Svetainės prieinamumą gerina navigacijos priemonės puslapiuose: grįžimas į titulinį puslapį, grįžimas atgal per viena puslapį ir pan.
• Jei jūsų tinklapių peržiūrai reikalinga speciali programinė įranga (video, audio, PDF failams), reikėtų pateikti nuorodą į tinklapį ar serverį, iš kur tas priemones galima atsisiųsti.
• Trumpas, logiškas ir pastovus interneto adresas.
• KOKYBĖ: informacijos, nuorodų, priežiūros.
• Nepamiršti vartotojų su negalia (regėjimo, klausos, motorikos).
Tinklapių prieinamumas:
• Tinklapiai turėtų būti lengvai ir patogiai prieinami 24 val., 7 dienas per savaitę, ištisus metus visiems vartotojams:
o su negalia
o sveikiems, bet
naudojantiems tekstines naršykles
turintiems lėtą ryšį
išjungusiems grafikos peržiūros režimą
• Naudoti ALT atributą visiems ne tekstiniams elementams. Tai būtina vartotojams, naudojantiems tekstines naršykles (pvz. Lynx)
• Naudoti alternatyvų tekstą Java skriptams, JAVA apletams, FLASHui
• Kad informacija puslapyje būtų lengviau randama, reikėtų naudoti antraštes, sąrašus, lenteles, aiškią puslapio struktūrą, stilius.
• Nuorodos į kitus šaltinius (virtualios bibliotekos ar pan.) turėtų turėti trumpas anotacijas.
• Jei puslapis paruoštas naudojant rėmelių technologiją (frames), būtina naudoti Noframes elementą.
• Antraštės turi būti prasmingos.
• Gerai subalansuota spalvinė gama.
HTML PAŽENGUSIEMS
Metaduomenys. Elementas
Tam, kad interneto svetainė būtų lengviau identifikuojama internete, būtina ją pačią aprasyti. Tam naudojami metaduomenys. Bendrąja prasme metaduomenys yra duomenys apie duomenis. Metaduomenys įrašomi puslapio antraštinėje dalyje … . Tai gali būti viena ar daugiau eilučių, kuriose nurodomas svetainės pavadinimas, sukūrimo ir atnaujinimo data, autorius, rekšminiai žodžiai, svetainės aprašymas ir kiti duomenys.
Šiuo metu dažniausiai interneto resursai aprašomi, naudojant Dublin Core formatą. Tai nuolat besivystantis, tačiau gana gerai išbaigtas ir patogus naudoti 15 elementų formatas. Plačiau apie jį galite pasiskaityti adresu http://www.dublincore.org/.
META elementas įrašomas HTML dokumento antraštėje, t.y. tarp ir žymių.
Metaduomenų eilutės pavyzdys:
Kuriant interneto svetainę lietuvių kalba, reikėtų nurodyti tokią metaduomenų eilutę:
Nenorint naudoti Dublin Core formato, galima svetainę aprašyti ir paprasčiau, pvz.:
HTML PAŽENGUSIEMS
Stiliai.
Atsiradus HTML 4.0, visas HTML dokumentų formatavimas gali būti aprašytas atskirame stiliaus faile. Be abejo, stilių galima aprašyti ir kiekvieno failo antraštėje. Šiame skyrelyje labai trumpai apžvelgsiu keletą stilių naudojimo HTML dokumentuose pavyzdžių.
Stilių sintaksė
selector {property: value}
selector {property1: value1; property2: value2}
Stilių pririšimas prie dokumento
Jei stiliai saugomi atskirame faile (*.css):
Jei stiliai nustatomi konkrečiai žymei:
Stilių naudojimas
Stiliaus selektoriumi negali būti žymės: HTML, HEAD, META, SCRIPT, STYLE.
Ryšių stiliaus pavyzdys:
A:LINK {
text-decoration: none;
}
A:HOVER {
text-decoration: none;
}
Stiliaus selektoriumi gali būti klasė:
P.large {font-size: 12pt}
P.small {font-size: 8pt}
Šių stilių naudojimas HTML dokumente:
Apie stilius galima pasiskaityti:
• Cascading Style Sheets
(http://www.w3.org/Style/CSS/)
• Guide to Cascading Style Sheets
(http://www.htmlhelp.com/reference/css/)
• CSS Tutorial
(http://www.w3schools.com/css/)
PAPILDOMA INFORMACIJA
• W3C – W3 Consortium – oficialus HTML standartas
(http://www.w3.org/MarkUp/)
• The Dublin Core Metadata Initiative
http://www.dublincore.org/
• Cascading Style Sheets home page
(http://www.w3.org/Style/CSS/)
• XHTML 1.0: The Extensible HyperText Markup Language (Second Edition). A Reformulation of HTML 4 in XML 1.0
(http://www.w3.org/TR/2001/WD-xhtml1-20011004/)
Interneto naršyklės:
• Internet Explorer 6
(http://www.microsoft.com/windows/ie/default.asp)
• Netscape 6
(http://home.netscape.com/browsers/6/index.html)
• Opera 6.0
(http://www.opera.com/)
• Web Browsers by Rating. CWSApps
(http://cws.internet.com/web.html)
HTML redaktoriai:
• 1stPage2000
(http://www.evrsoft.com/download/)
• HTML Editor PHASE 5 – Second Edition (vokiečių k.)
(http://www.meybohm.de/htmledit/index.html)
• TUCOWS. HTML Advanced Editors
(http://www.tucows.com/htmledit95.html)
• TUCOWS. HTML Editors for Beginners. WYSIWYG tipo redaktoriai
(http://www.tucows.com/htmlbeginner95.html)
HTML pradžiamoksliai:
• NCSA – A Beginners Guide to HTML
(http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html)
• WWW puslapių kūrimas (HTML)
(http://daugenis.mch.mii.lt/vpumedziaga/html/index.html)
• SELFHTML aktuell (vokiečių k.)
(http://selfaktuell.teamone.de/)
• Homepage and Web Design (vokiečių k.)
(http://www.webwunder.de/abc/weg2.htm)
Spalvų kodavimas:
• HTML Colors
(http://www.w3schools.com/html/html_colors.asp)
• Hexadecimal Color Values
(http://www.mrs.umn.edu/committees/wwwac/toolbox/color.html)
• RGB Color Values
(http://www.htmlhelp.com/cgi-bin/color.cgi?rgb=FFFFFF)
• 6 x 6 x 6 UND NOCH MEHR FARBEN (vokiečių k.)
(http://www.df-edv.de/service/farbtab/farbtab.htm)
RGB Color Values
Color Hex Code Color Hex Code Color Hex Code
Alice blue #F0F8FF Antique white #FAEBD7 Aqua #00FFFF
Aquamarine #7FFFD4 Azure #F0FFFF Beige #F5F5DC
Bisque #FFE4C4 Black #000000 Blanche dalmond #FFEBCD
Blue #0000FF Blue violet #8A2BE2 Brown #A52A2A
Burlywood #DEB887 Cadet blue #5F9EA0 Chartreuse #7FFF00
Chocolate #D2691E Coral #FF7F50 Cornflower blue #6495ED
Cornsilk #FFF8DC Crimson #DC143C Cyan #00FFFF
Dark blue #00008B Dark cyan #008B8B Dark goldenrod #B8860B
Dark gray #A9A9A9 Dark green #006400 Dark khaki #BDB76B
Dark magenta #8B008B Dark olive green #556B2F Dark orange #FF8C00
Dark orchid #9932CC Dark red #8B0000 Dark salmon #E9967A
Dark seagreen #8DBC8F Dark slate blue #483D8B Dark slate gray #2F4F4F
Dark turquoise #00DED1 Dark violet #9400D3 Deep pink #FF1493
Deep sky blue #00BFFF Dim gray #696969 Dodger blue #1E90FF
Firebrick #B22222 Floral white #FFFAF0 Forest green #228B22
Fuchsia #FF00FF Gainsboro #DCDCDC Ghost white #F8F8FF
Gold #FFD700 Goldenrod #DAA520 Gray #808080
Green #008000 Green yellow #ADFF2F Honeydew #F0FFF0
Hot pink #FF69B4 Indian red #CD5C5C Indigo #4B0082
Ivory #FFFFF0 Khaki #F0E68C Lavender #E6E6FA
Lavender blush #FFF0F5 Lawngreen #7CFC00 Lemon chiffon #FFFACD
Light blue #ADD8E6 Light coral #F08080 Light cyan #E0FFFF
Light goldenrod yellow #FAFAD2 Light green #90EE90 Light grey #D3D3D3
Light pink #FFB6C1 Light salmon #FFA07A Light seagreen #20B2AA
Light sky blue #87CEFA Light slate gray #778899 Light steel blue #B0C4DE
Light yellow #FFFFE0 Lime #00FF00 Lime green #32CD32
Linen #FAF0E6 Magenta #FF00FF Maroon #800000
Medium aquamarine #66CDAA Medium blue #0000CD Medium orchid #BA55D3
Medium purple #9370DB Medium sea green #3CB371 Medium slate blue #7B68EE
Medium spring green #00FA9A Medium turquoise #48D1CC Medium violet red #C71585
Midnight blue #191970 Mint cream #F5FFFA Misty rose #FFE4E1
Moccasin #FFE4B5 Navajo white #FFDEAD Navy #000080
Old lace #FDF5E6 Olive drab #6B8E23 Orange #FFA500
Orange red #FF4500 Orchid #DA70D6 Pale goldenrod #EEE8AA
Pale green #98FB98 Pale turquoise #AFEEEE Pale violet red #DB7093
Papaya whip #FFEFD5 Peach puff #FFDAB9 Peru #CD853F
Pink #FFC8CB Plum #DDA0DD Powder blue #B0E0E6
Purple #800080 Red #FF0000 Rosy brown #BC8F8F
Royal blue #4169E1 Saddle brown #8B4513 Salmon #FA8072
Sandy brown #F4A460 Sea green #2E8B57 Sea shell #FFF5EE
Sienna #A0522D Silver #C0C0C0 Sky blue #87CEEB
Slate blue #6A5ACD Snow #FFFAFA Spring green #00FF7F
Steelblue #4682B4 Tan #D2B48C Teal #008080
Thistle #D8BFD8 Tomato #FF6347 Turquoise #40E0D0
Violet #EE82EE Wheat #F5DEB3 White #FFFFFF
Whitesmoke #F5F5F5 Yellow #FFFF00 Yellow green #9ACD32
Priedas:
HTML dokumento struktūra
Pavadinimas
… kiti antraštės elementai
… dokumentas
Dažniausiai naudojami komandų atributai:
ALIGN – elemento išdėstymo orientacija kitų HTML dokumento elementų atžvilgiu arba HTML dokumente.
HREF – nuoroda į failą.
SRC – failas, kuriame yra informacija, reikalinga elementui sukurti.
TARGET – nuoroda į rėmelių dalį.
BORDER – rėmeliū aplink objektą storis.
WIDTH – elemento plotis.
HEIGTH – elemento aukštis.
HSPACE – horizontalus tarpas tarp elemento ir kitų HTML dokumento
elementų.
VSPACE – vertikalus tarpas tarp elemento ir kitų HTML dokumento
elementų.
ALT – tekstas, rodomas vietoje arba šalia elemento.
BGCOLOR – elemento fono spalva.
Pastaba. Jeigu atributai turi kitą reikšmę, jie aprašomi atskirai
komandų apibrėžime.
Antraštės elementai
Pavadinimas
Dokumento pavadinimas
Skriptai, hierarchinės stilių lentelės ir t.t. Atributai:
LANGUAGE – nurodo skripte naudojamą programavimo kalbą.
SRC – nurodo failą, kuriame yra naudojamas skriptas.
Naudojamų stilių lentelė. Atributai:
TITLE – pavadinimas.
TYPE – informacijos tipas.
Bazinė nuoroda ir rėmelių dalis.
Svarbi informacija apie HTML dokumentą, neperduodama kitu būdu. Atributai:
NAME – informacijos pavadinimas, tipas.
HTTP-EQUIV – informacijos tipas, naudojamas perduodant informaciją HTTP protokolu, gali pakeisti NAME.
CONTENT – pati perduodama informacija.
Nurodo ryšį tarp dokumentų. Atributai:
REL – nurodo, kokio tipo yra ryšys.
TYPE – nurodo kokio tipo yra dokumentas.
Dokumento formavimo elementai
.
