HTML estas la marklingvo uzata por krei TTT-paĝojn. Jen iom da historio:
Standarta Ĝenerala Marklingvo (SGML) por logika strukturigo de teknikaj dokumentoj aperis en la jaro 1969. Fakte de tiu momento eblas kalkuli historion de HTML. SGML estas tute abstrakta marklingvo: ĝi neniel tuŝas aspekton de dokumento -- nur ĝian strukturon. Aspekton de tiu aŭ alia hierarkiero eblas ŝanĝi nur ekster la SGML-dokumento -- en la stila dosiero. SGML alportis kun si la ideon de disdivido inter enhavo kaj aspekto de dokumento.
En la jaro 1991 aperis HTML. Dekomence ĝi estis nur sublingvo de SGML, la markado estis plene logika kaj ne tuŝis aspekton. Tamen en la jaro 1994 aperis programero Navigilo de firmao Netskejp (Netscape). La firmao komencis aldoni al HTML proprajn markojn, kiuj certe funkciis nur en Navigilo kaj influis nur aspekton. Iom poste ekis konkurado inter firmaoj Netskejp kaj Majkrosoft -- kaj HTML plene "perdis sian vizaĝon".
Nun en Interreto konstante kreskas uzado de "nekutimaj" retumiloj: voĉaj, poŝtelelefonaj, poŝkomputilaj ka. Tiaj retumiloj simple ne povas "vidi" aspekton de "belaj" paĝaroj, kiuj tiel multiĝis en la nuntempa Reto. Sentante tion la Konsorco de TTT ekis laboron pri la nova marklingvo, kiu konservus riĉajn aspektigajn eblecojn de HTML 4.0 kaj samtempe revenus al la ideologio de SGML (disdivido inter la enhavo kaj aspekto). La nova lingvo jam aperis kaj ĝi nomiĝas XHTML 1.0. Por ricevi strukturigitajn paĝojn kun "akademia" aspekto sufiĉas nura XHTML, por aldoni deziratan aspekton necesas uzi ankaŭ stilfoliojn (stilajn dosierojn), kiuj alŝaltatas al la TTT-paĝo.
Se vi deziras legi plu pri la ideologio de SGML-HTML-XHTML, turnu vin al libro de Dmitrij Kirsanov "Veb-dizajn", Sankt-Peterburg, 1999 aŭ rekte al la oficiala priskribo de XHTML (ruslingve).
Por krei TTT-paĝon vi bezonos retumilon kaj tekst-redaktilon. Mi kutime uzas la plej disvastiĝintan en Rusio Esplorilon de Majkrosoft kaj redaktilon Notlibro (Notepad / Bloknot). Tre uzinda redaktilo estas UniRed de Jurij Finkel -- la redaktilo multe helpas al Esperantistaj retemuloj -- kaj ni ankoraŭ tuŝos tiun temon.
Do vi eniras la redaktilon, tuj konservas la novan (dume malplenan) dokumenton kiel iu_via_nomo.html, poste trovas ĝin inter dosieroj sur disko kaj alklakas dufoje -- aperos fenestro de retumilo kun adreso de la dosiero en la adres-linio. Certe la fenestro estos malplena, ĉar malplena estas la html-dosiero. Poste ni aldonados ŝanĝojn al la dosiero iu_via_nomo.html, konservados ĝin kaj en la retumilo renovigados la paĝon kaj vidos rezultojn. Povas ŝajni iom komplike dekomence, sed ja ni bezonas nur du fenestrojn samtempe... :)
Ni revenu al nia teksta redaktilo kun la dume malplena dokumento kaj aldonu kelkajn liniojn:
<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd" />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="eo" lang="eo">
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251" />
<title>Alvoko</title>
<link rel="stylesheet" type="text/css" href="stiloj.css" />
</head>
<body>
</body>
</html>
Fakte, se vi uzas UniRed-on, vi ricevos ĉi-kodon tuj, kiam vi alklakos menueron Dosiero/Nova/XHTML-paĝo
. Do vi eĉ povas ne kompreni tute, pri kio temas -- kaj tamen jam ion krei. Tutegale mi iom klarigu:
la unua linio estas bezonata nur, se via signokodo estas NE utf-8 (la plej populara versio de Unikodo,
internacia normo, kiu ebligas miksadon de pluraj alfabetoj). Se vi uzas UniRed-on, vi havas eblecon konservi dosierojn en utf-8, kaj vi eĉ provu. Tamen plej kutime en Rusio oni tajpas en "windows-1251" -- kaj tiam ĝuste tiu kodsigno devas esti en via unua linio. Mi eĉ konsilas uzi la enlandan kodsignon (en Rusio do "windows-1251") -- ĉar Unikodo, ve, dume ne iĝis plenagnoskita standarto: ekzemple rusiaj serĉ-serviloj ne jam kapablas serĉi en ruslingvaj tekstoj, koditaj en utf-8.
La dua linio prefere ne estu ŝanĝata. Ĝi ĉiam estas la sama. La tria rakontas pri tio, en kiu lingvo vi verkas la paĝon. Se estas la rusa -- anstataŭ "eo" metu tien "ru" (ambaŭfoje). Se estas la angla -- entajpu "en" ktp. Oni uzas "eo" por Esperanto.
Poste ni vidas la markon <head>. Ĝi markas komencon de la "kapo" de via dokumento -- ĉiu dokumento do havas "kapon" kaj "korpon" (<body>).
Bone komprenu, ke markoj funkcias same kiel kutimaj parentezoj -- se estas la komenca parentezo, devas esti ankaŭ la fina, la "fermanta". Finaj markoj aspektas tute same kiel la komencaj -- nur antaŭ
la kodvorto estas suprenstreko (tiel nomiĝas la signo /): trovu en nia teksta redaktilo la finajn markojn </head> kaj </body>.
En XHTML ĉiu marko devas havi la finan parton,
kvankam en HTML estis tolerataj ankaŭ neplenaj formoj. XHTML-markoj estas devige minusklaj.
Ene de la "kapo" ni trovas nur du liniojn: unu el ili (<meta ...>) fakte refaras
la laboron de la plej unua -- diras al la retumilo la signokodon, en kiu estas kodita la paĝo. <meta ...> estas tre interesa marko -- ja ĝi ne havas
"enhavon" (ion por entajpi inter la komenca kaj la fina marko) -- ĝia informo estas plene en la komenca marko mem! En tiuj
kazoj "neparaj" markoj havas spaceton kaj suprenstrekon antaŭ la fermanta parentezo: io... />. Memoru tion!
La dua linio ene de la "kapo" estas titolo. Atentu pri ĝi -- estas tre grava parto de via dokumento. La vortoj, kiujn vi enskribos inter <title> kaj </title>
aperos en la plej supra linio (kutime malhela) de la retumilo, kaj same -- sur la butono sube de ekrano (en Windows).
Serĉ-maŝinoj kutime konsideras la enhavon de titolo tre grava -- do indas tien meti la temon de via dokumento aŭ la temon de la paĝaro ĝenerale (ekz. ĉe REJM nun estas "Молодежь и эсперанто"
sur ĉiu ruslingva paĝo).
La marko <link...> diras al la retumilo, kie trovi la aspekton de la paĝaro -- ĝian fon-koloron, tiparan nomon kaj gradon ktp. Vi povas legi
plu pri la stilfolioj en alia artikolo.
Ĝis nun ni fakte faris nur devigajn aferojn -- kaj ne ricevis ion kontentigan krom la titolo de nia paĝo ("Alvoko" en la ekzemplo).
Sed ni jam atingis la markon <body> -- kaj jes ja ĝuste en ĝin ni tajpos la pensojn, kiujn ni
volas publikigi en la Reto por ke la homaro tion legu. Facile. Tajpu tuj. Poste konservu la dosieron kaj renovigu ĝin en la retumilo.
Vi vidos tekston. Tamen tute senstrukturan.
Ŝanĝi la situacion vi povas per strukturigaj markoj: <p> por alineo, <h1> por la plej gravaj titoloj, <h2> por la subtitoloj, <h3> por la sekva nivelo, <h4> kaj <h5>. Dume
ne zorgu pri la aspekto (kvankam dokumento uzanta neniajn aliajn markojn aspektas brile) -- la aspekton vi poste aldonos al la strukturo
pere de CSS (stilfolioj). Ne fogesu pri la finaj markoj! Ankaŭ sen ili ĉio bone montriĝos per Esplorilo -- sed vi ja ne volas
forgesi pri nevidantoj kaj pri "burĝoj" (Interreto en aŭtomobilo, Interreto en poŝo ktp.:).
Por emfazi vorton aŭ frazon uzu markojn <em> kaj <strong>. Ekzemple,
Mi volas emfazi la lastan <strong>vorton</strong> donos frazon:
Mi volas emfazi la lastan vorton.
Por fari ligon al aliaj TTT-paĝoj uzu markon <a>. Ekzemple <a href="http://www.tejo.org/ijk">IJK!!!</a> iĝos
ligilo al la paĝaro pri IJK!!!. Ne forgesu nur pri la prefikso http:// antaŭ la retaj adresoj.
Se vi volas, ke post alklako la paĝo (de IJK en nia ekzemplo) aperu en nova fenestro (do ne en la fenestro kun via dokumento), aldonu parametron target="_blank". Do:
<a href="http://www.tejo.org/ijk" target="_blank">IJK!!!</a>. Oni eĉ rekomendas fari tiel, se la ligo gvidas eksteren de via paĝaro -- ja vi ne
respondecas pri aliulaj paĝoj, eble la paĝo jam ne funkcias -- do via vizitanto ne komprenu tion kiel via eraro. :)
Jen vi jam povas tute facile fari paĝojn, similajn al tiu, kiun vi nun legas. Ja en ĉi-paĝo estas nur alineoj, titoloj, emfazoj kaj ligoj.
Ĉi-tie ni ne tuŝu la plenan riĉecon de kaskadaj stilfolioj. Nur mi rakontu pri la plej bezonataj linioj. Rememoru la markon
<link ... /> -- en ĝi estis menciita stil-dosiero stiloj.css. Nun ni kreu ĝin en la sama dosierujo, kie estas nia ekzempla
XHTML-dokumento. Kutime por krei stilfoliojn oni uzas plej primitivajn teksto-redaktilojn -- Notepad/Bloknot, ekzemple. Ene de la dosiero
skribu nur unu linion:
body {margin-right: 100px; margin-left: 100px; background-color: #eeeeee}
Per tio vi ricevos iom pli legeblan tekston. Onidire, estas scienca fakto, ke legi dokumenton kun marĝenoj (eĉ
surekrane) estas multe pli facile, ol sen ili. Do ni aldonis la dekstran (right-margin) kaj maldekstran (margin-left) marĝenojn po
100 bilderoj (px = pixel). Bildero aŭ piksel' estas
unu punkto de via ekrano. Nuntempe la plej kutimaj kvantoj de bilderoj sur ekrano estas 800x600 kaj 1024x768. La fonkoloro
estas "background-color" en CSS -- do ni faris ĝin iom griza, ĉar kelkaj homoj laciĝas de kretblanka fono -- ja ekrano fakte
estas lampo; malfacilas legi sur lampo, ĉu? :) Interalie, "#eeeeee" ne estas volapuka vorto por "griza" -- temas pri
komputila standarto RGB (Red/Green/Blue -- Ruĝa/Verda/Blua): post signo "#" ni havas po du
lokoj por ĉiu el la tri koloroj, en la lokojn eblas entajpi ciferojn aŭ latinajn literojn inter a kaj f. Vi povas iom eksperimenti kun via stilfolio por kompreni la sistemon: provu ŝanĝi la fonkoloron al ruĝa aŭ blua, trovu nekutimajn kolorojn.
Tamen ne forgesu, ke poste oni tion legos (aŭ ne legos, se estos io nelegebla). Same kiel pri XHTML-dokumentoj, vi devas konservi la
ŝanĝojn en la stilfolio antaŭ vi vidos ilin en via
retumilo.
Imagu nun, ke ni decidis farbi titolojn, fari ilin verdaj. Por tio necesos aldoni nur unun linion al nia stil-dosiero:
h1, h2, h3 {color: #004400}
Mi speciale emfazas, ke titoloj en ĉiuj viaj dosieroj iĝos verdaj. Imagu kiom da laboro vi havus, se vi devus ion alskribi antaŭ ĉiu titolo en deko da paĝoj! Kaj se ne en deko? Stilfolioj estas ege oportuna afero. Esploru pliajn eblecojn de CSS.
Kvankam multkoloraj bildoj apenaŭ aperos sur ekranoj de poŝtelefonoj kaj (des pli) ne sonos en la voĉ-retumiloj, vi povas ekvoli fari kelkajn ilustraĵojn por via teksto. Por meti bildon, kiu estas en via dosierujo (en la sama kun la XHTML-dokumento) uzu la sekvan kodon:
<img src="bildo.jpg" width="larĝo" height="alto" alt="priskribo de la bildo" />
Nur ne forgesu ŝanĝi la vortojn en krampoj al efektivaj valoroj. La krampoj, interalie, estas nepraj en XHTML (kvankam en Esplorilo ĉio funkcius ankaŭ sen ili). Ekzemplo de bildo en TTT-paĝo:
<img src="http://more.by.ru/img/ics/mail.gif" height="30" width="30" alt="Tre simpatia koverto" />
Ĉi-tia kodo montros malgrandan (30x30 bilderoj) koverton, kiu estas en la ĉefa paĝo de la paĝaro
By.Ru. La grandecon kaj adreson de ajna bildo en la Reto vi povas ekscii, alklakante la bildon per la dekstra butono de via muso (aperos menuo -- en ĝi trovu linion "trajtoj/свойства/properties"). Se vi volas, ke la bildo iom integriĝu en la teksto, aldonu parametron align kaj hspace|vspace:
<img src="bildo.jpg" width="larĝo" height="alto" alt="priskribo de la bildo" align="right" hspace="10" vspace="6" />
Vi povas, certe, ŝanĝi "right" (dekstre) al "left" (male) kaj "center" (centre). Parametroj hspace kaj vspace
difinas la spacon inter la bildorando kaj la tekstobloko: vertikalan kaj horizontalan.