Kasutaja:Hennu/Html lehe loomine arvutile või iPhonele
Kood, mille tulemusena kuvatakse veebileht veebis. Näited ning üldülevaade.
Veebileht[muuda | muuda lähteteksti]
Veebileht on veebis (veebisaidil) asuv dokument. Sisu (pildid, tekst, hüpertekstlingid, video- ja audiofailid), esitusviis ja väljanägemine luuakse HTML-märgistuskeele(uuemal ajal XHTML) abil.
HTML[muuda | muuda lähteteksti]
HTML (inglisekeelne lühend sõnadest HyperText Markup Language 'hüperteksti ülestähendamise keel') on keel, milles märgendatakse veebilehti. HTML on SGML-i rakendus. HTML-dokumentide (failide) WWW-st allalaadimiseks ja vaatamiseks kasutatakse veebilehitsejat. Selline elektroonilise dokumendi märgendamise mõte on lahutada sisu, vaade jms objekti omadused üksteisest. Sisuliselt on see lihtsatest käsklustest (märgistest) koosnev programmimiskeel. Need määravad lehele sisestatud tekstide ja piltide kuvamise veebibrauseri aknas. Lisa:HTML
Üldine veebilehe loomine[muuda | muuda lähteteksti]
Veebilehte on võimalik luua mitmeil erinevail moel. On võimalus ise luua kujundus ning ise kodeerida HTML formaati, mis on ka kõige raskem variant. Teine võimalus on alla laadida internetist valmis kujundus koos koodiga ("template"), mis tuleb ise lihtsalt veebihaldus keskkonda üleslaadida. Kolmas võimalus sarnaneb teisele, kuid erinevuseks on see, et veebilehe haldaja pakub omaltpoolt kujundusi ning valides ühe, rakendub see automaatselt veebilehele.
Kujunduse tegemiseks vaja minev tarkvara[muuda | muuda lähteteksti]
Programme, millega luua kujundust, on samuti mitmed. Üks populaarsemaid on Adobe Photoshop (tasuline, kuid on võimalus kasutada 30-päevast tasuta perioodi "trial" Adobe Photoshop)
CSS (e Cascading Style Sheet)[muuda | muuda lähteteksti]
CSS ehk kaskaadlaadistikke kasutatakse veebilehtede väljanägemise ettemääramiseks. Kuigi CSS-koodi võib kirjutada vahetult HTML-i vahele, on reeglina mõistlikum/soovitatum lehekülg linkida eraldiasuva CSS-dokumendi külge (nt style.css) Näide CSS failist asub siin → CSS näide
HTML koodi kirjutamine[muuda | muuda lähteteksti]
HTML kirjutamine on lihtsaks tehtud spetsiaalsete programmidega, mis muudavad HTML koodi kirjutamise kiireks ning mugavaks. HTML-veebilehtede loomiseks sobib iga "puhas" tekstiredaktor, mis ei lisa kirjutatule automaatselt vormistust - näiteks WordPad (Windows) või TextEdit (MacOS). Word EI OLE veebiredaktor. On olemas ka WYSIWYG HTML-redaktorid, mis on ülesehitatud põhimõttel "Mida näed, seda ka saad" (WYSIWYG - What You See Is What You Get). Täpselt nagu tekstitöötlustarkvara puhul, muudab selline töömeetod ka veebilehtede loomise palju lihtsamaks. HTML-koodi koostamine toimub automaatselt ja veebidisainer saab keskenduda sisu ja kujundus loomisele. Parim on Adobe Dreamweaver CS4 (tasuline, kuid on võimalus kasutada 30-päevast tasuta perioodi "trial" Adobe Dreamweaver )
HTML lehe anatoomia[muuda | muuda lähteteksti]
HTML fail - index.html
HTML-koodis kirjutatud lehekülje koostisosad kujutavad endast vorminduskäsklusi. Tihti asuvad need algus- ja lõpumärgiste vahel:
<p>Tere kõigile</p>
(algusel puudub kaldkriips "/", lõpumärgisel PEAB olema kaldkriips "/"). Kasutatakse ka ühekordseid, n-ö isesulguvaid märgiseid: <img src="minupilt.jpg"> (See kood on siis pildi jaoks). HTML-lehekülg algab dokumendipäisega, mis selgitav veebibrauserile, mida oodata. Standardile vastav (X)HTML lehekül peaks algama nii:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www3.org/TR/1999/REC-html401-19991224/strict.dtd">
Kogu lehe sisu jääb algus- ja lõpumärgiste vahele nagu selles näites: <html>Lehekülje sisu</html>
Esimesena järgneb <html> algusmärgile päis, mis paigutatakse <head> märgiste vahele (<head>...</head>). See paneb paika lehe tiitli (ülapealkirja), millele järgneb metainformatsioon - võtmesõnad ja lehe kirjeldus:
<title>Minu Nimi - Minu koduleht</title>
<meta name="Description" content="Minu Nimi koduleht - muusika, videod, blogi."/>
<meta name="Keywords" content="muusika, kitarr, trumm"/>
<head> märgiste vahel võib asuda ka <link> märgis, mis viitab välisele kaskaadlaadistikule:
<link href="kujundus.css" rel="stylesheet" type="text/css"/>
Alles pärast kõike eeltoodut tuleb sisu, mida külastajad loodud leheküljel näevad! See jääb <body> märgiste vahele:
<body>Lehekülje sisu siia</body>
Sisumärgiste vahele võib jääda veel teisigi märgiseid - pealkirjad, alajaotused, nimistud, pildid, lingid jne. Need võivad välja näha näiteks nii:
<h1>...</hi> - lehekülje pealkiri (saab kasutada ka h2, h3, h3 ... h7 - sõltuvalt soovist(muudab kujundust)) <p>...</P> - tekstilõik <a>...</a> - siia vahele tuleb "ankur" (link) <li>...</li> - list
Lõpus tuleb "footer" ehk jalus. Siia tuleb tekst, mis on eraldatud sisust. Tavaliselt on kirjas looja nimi, copyright jms. Tähistatakse:
<div id="footer">...</div>
CSS identifikaator - Identifikaatori (id) kasutamine on mõttekas, kui sarnaselt kujundatavaid elemente on lehel vaid üks. Näiteks, kui sel on üks jalus, võib selle kujundamiseks luua laadistiku ja rakendada see käsklusega
<div id="footer">
Sama võtet võib kasutada ka päiste, navigeerimismenüüde, abitekstide jne kujundamisel.
Peale seda, kui kogu vajalik sisu on HTML-leheküljele paigutatud, tuleb sulgeda veel mõned lehe alguses avatud märgised, eelkõige <body> ja <html>. Selleks tuleb kirjutada: </body> </html>
HTML alused[muuda | muuda lähteteksti]
HTML-i alused: märgiste liigid[muuda | muuda lähteteksti]
HTML-märgiseid on kahte liiki. Ühed koosnevad kahest osas: <avav märk>Sisu</sulgev märk> Nende vahele jääb lehel kuvatav tekst. Pange tähele, et sulgemismärgise ette pannakse jagamismärk/kaldkriips "/". Teine liik on isesulguvad, näiteks tekstirida katkestav märgis:
HTML-i alused: kirjastiilid[muuda | muuda lähteteksti]
Tekstiosa esiletoomiseks võib selle teha paksuks (ingl.k. bold) või kasutada kaldkirja (ingl.k. italic). Nende kirjastiilide jaoks kasutatakse järgnevaid märgiseid:
<strong>See tekstiosa muutub paksuks</strong> <em>See tekstiosa kuvatakse kaldkirjas</em>
HTML-i alused: pealkirjad[muuda | muuda lähteteksti]
HTML võimaldab seitset pealkirjataset h1-st (lehe tiitel) kuni h7-ni (kõige madalama taseme alapealkiri). Praktikas leiavad rakendust esimesed kolm taset. Pealkirja loomiseks kirjutaga:
<h1>Pealkirja tekst</h1>
HTML-i alused: pildid[muuda | muuda lähteteksti]
Graafikamärgiste atribuutideks on allikas (fail, milles pilt sisaldub), kuva laius ja kõrgus ning soovi korral ka koos pildiga kuvatav ja seda kirjeldav alternatiivtekst ("alt");
<img src="images/mypic.jpg" width="320" height="240" alt"Mina siin"/>
("images/mypic.jpg" tähendab lokaliseerimist ehk pildiasukohta, pilt asub images kaustas ning pildi nimi on mypic.jpg (pildi laiendiga .jpg), width="320" on laius pikslites ja height="240" on kõrgus pikslites ja alt"Mina siin" on alternatiivtekst.
HTML-i alused: lingid[muuda | muuda lähteteksti]
Link koosneb kahest osast - külastajatele nähtav osa (hiirega klõpsatav tekst, pilt vms) ja aadress, millele veebilehitseja seepeale suunatakse. Neid mõlemaid alustab-lõpetab <a> märgis (ankurmärgis).
<a href="http://www.google.ee">Külastage googlet</a>
(esimene link on asukoht, kuhu veebilehitseja suunatakse, teine tekst, "Külastage googlet" on klikatav osa).
HTML-i alused: tabelid[muuda | muuda lähteteksti]
Tabelid sobivad ridadesse ja veergudesse jaotatava info (näiteks hinnakirjade) esitamiseks. Siintoodud lihtsas näites on kaks rida ("tr") ja kaks veergu ("td")
<table> <tr> <td>Kaup</td> <td>Hind</td> </tr> <tr> <td>Tööriist</td> <td>100kr</td> </tr> </table>
HTML-i alused: klass ja ID[muuda | muuda lähteteksti]
Mis vahe on klassil ja ID-l? Klassi saab rakendada paljudele lehel asuvatele elementidele, samas kui ID (identifikaator) leiab kasutust vaid ühe elemendi juures.
HTML-i alused: CSS ID loomine[muuda | muuda lähteteksti]
Identifikaatori loomiseks kirjutage laadistikku:
- idName { atribuudid }
Pange tähele, et enne ID nime seisab numbrisümbol (#)
HTML-i alused: CSS klassi loomine[muuda | muuda lähteteksti]
Klassi loomiseks kirjutage laadistikku:
.className { atribuudid } Klassi nime ette kirjutatakse alati punkt.
iPhone[muuda | muuda lähteteksti]
Mis on iPhone? Milleks seda kasutatakse? Rohkem informatsiooni iPhone kohta → iPhone
iPhone veebileht[muuda | muuda lähteteksti]
iPhone veebileht on veebileht, mis on iPhone "sõbralik", see tähendab, tüüpilist HTML koodi on muudetud, et see vastaks iPhone mõõtmetele ning eripärasustele (nt lehe pööramine vastavalt iPhone hoidmisele).
iPhone veebileht: päis[muuda | muuda lähteteksti]
1. <head> 2. <title>Minu leht</title> 3. <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> 4. <link rel="apple-touch-icon" href="images/ikoon.png"/> 5. </head> 6. <body onorientationchange="updateOrientation();"> 7. </body>
Tavalisest veebilehest erinevad ainult read 3,4 ja 6. Rida 3 "ütleb" Safarile, et veebileht oleks iPhone ekraani mõõtmetes. Need read sunnivad sisul mahtuma ekraani "sisse". Rida 4 on ikooni jaoks, mis tuleb, kui lisate lehe bookmarkidesse. Pilt peab olema 57x57 pikslit ning .png formaadis. Ei ole vaja lisada läiget/ümaraid ääri, iPhone teeb selle ise. Rida 6 on orientatsiooni jaoks. Iga kord, kui iPhone pöörad, käivitub javascript funktsioon ning leht pöördub vastavalt sinu iPhone suuanle (püsti olek võik pikali olek).
iPhone veebileht: sisu[muuda | muuda lähteteksti]
Enne javascripti ja CSSi minekut on vaja natuke redigeerida, et sa ei näe kõike korraga enne, kui veebileht on laadinud.
<div id="page_wrapper"> <h1>Minu Leht</h1> <div id="content_left"> <p>Sa hoiad nüüd oma telefoni vasakule</p> </div> <div id="content_right"> <p>Sa hoiad nüüd oma telefoni paremale</p> </div> <div id="content_normal"> <p>Sa hoiad nüüd oma telefoni otse</p> </div> </div>
Esimesena, "wrapperit", mis sisaldab veebilehe sisu. See on väga oluline, sest kui javascript muudab selle "wrapperi" klassi, mõjutab see mitmeid elemente. Järgmiseks on logo, mis on elementaarne. Viimaseks, on kõik sisu osad. Kuna kõik osad on unikaalsed, siis tuleks kasutada "ID", mitte klasse.
iPhone veebileht: CSS[muuda | muuda lähteteksti]
CSS on väga oluline, kui muutub sisu. Kasutades "ID" ja klasse, saab kindlustada, et nähakse ainult õiget sisu. Kõigepeal tuleb üles seada leht, et ükski iPhone vaikimisi stiil ei segaks vahele.
/*-----------------------------
RESET STYLES
-----------------------------*/
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6{
margin:0;
padding:0;
-webkit-text-size-adjust:none;
}
body{
font-size: 10px;
}
ul, li, ol, dl, dd, dt{
list-style:none;
padding:0;
margin:0;
}
a{
text-decoration:none;
}
Kõige olulisem rida on -webkit-text-size-adjust:none;, see takistab Safaril teksti suuruse muutmist, kui pööratakse iPhone. Vaikimisi oleks nii, et pikali hoides oleks tekst suurem, kuid selle tagajärjel ei mahuks mitmed sisu osad ekraani ulatusse.
/*-----------------------------
BASIC PAGE STYLING
-----------------------------*/
body{
background:#fff000;
font-family: Helvetica;
color:#999;
}
p{
font-size:12px;
padding-bottom:8px;
}
a{
color:#fff000;
text-decoration:none;
}
/*-----------------------------
HEADINGS
-----------------------------*/
h1{
display:block;
width:112px;
height:41px;
background-image:url(images/logo.gif);
text-indent:-5000px;
}
/*-----------------------------
BASIC LAYOUT
-----------------------------*/
#page_wrapper{
padding-top:20px;
background:#000 url(images/page_background.gif) repeat-x;
overflow:auto;
}
Need koodid lihtsalt muudavad teksti värvused ja suurused sobivaks, kaasa arvatud logo ja lehe "wrapperi" Fondiks on kasutatud Helvetica, mis on iPhones juba sees olemas. (Võib ka kasutada Ariel)
Järgmised koodid on "peidetud" ning on javascripti poolt kontrollitud. Esiteks, tuleb kõik peita vaikimisi. See tähendab, kui leht laeb, ei tule flash sisu ette enne, kui see on peidetud.
/*-----------------------------
ORIENTATION CLEVERNESS
-----------------------------*/
#content_left,
#content_right,
#content_normal,
#content_flipped{
display:none;
}
Järgmiseks, on suurused, et leht mahuks täpselt iPhone ekraanile.
.show_normal,
.show_flipped{
width:320px;
}
.show_left,
.show_right{
width:480px;
}
iPhone veebileht: orientatsioon[muuda | muuda lähteteksti]
Ilma selleta, orientatsiooni ei "märgata" laadimisel, vaid esimesel muutmisel.
window.onload = function initialLoad(){
updateOrientation();
}
Need on funktsioonid, mis teevad muutused lehele, et lubada erinevaid sisuelemente.
1. function updateOrientation(){
2. var contentType = "show_";
3. switch(window.orientation){
4. case 0:
5. contentType += "normal";
6. break;
7.
8. case -90:
9. contentType += "right";
10. break;
11.
12. case 90:
13. contentType += "left";
14. break;
15.
16. case 180:
17. contentType += "flipped";
18. break;
19. }
20. document.getElementById("page_wrapper").setAttribute("class", contentType);
21. }
Rida 1 on funktsioon, mis jookseb iga kord, kui telefoni pööratakse. See on, mida tegime enne ka sisu juures. Rida 2 muudab varieeruva sisu contentType vaikimisi show_-ks. Järgmised read "otsivad orientatsiooni", kuni "leiavad" (st, kui telefoni pööratakse) ning muudavad sisu vastavalt seadetele. Lõpuks javascript leiab page_wrapper div-i ja muudab klassi väärtuse contentType-ks. Siit edasi hakkab tööle CSS mis muudab lehe stiili.
iPhone veebileht: tuvastamine[muuda | muuda lähteteksti]
Lõpuks kood, mis tuleb lisada TAVALISE HTML
<head></head>
vahele, st kui minnakse veebilehele iPhone kaudu, siis automaatselt tuvastatakse iPhone ning suunatakse ümber iPhone "sõbralikule" veebilehele.
if ((navigator.userAgent.indexOf('iPhone') != -1) ||
(navigator.userAgent.indexOf('iPod') != -1)) {
document.location = "http://www.engageinteractive.co.uk/iphone/";
}
Orientatsiooni tuvastamise javascript fail asub siin:orientation.js