Download presentation
Presentation is loading. Please wait.
1
Veebilahendused Oliver Olt Tallinn 2016
2
Mõisted (X)HTML – (Extensible) Hypertext Markup Language – (laiendatav) hüpertekst-märgistuskeel veebidokumendi loomiseks Hüpertekst - elektroonilises seadmes kuvatav tekst, milles viidatakse teistele tekstidele hüperlinkidega [wiki] Hüperlink - sihtobjektiga asenduv viide objektile [ÕS]
3
Veebilehitsejad 1991 – WorldWideWeb | 1992 – Erwise 1993 – Mosaic
1994 – Mosaic => Netscape 1995 – Internet Explorer 1996 – Opera 2003 – Safari 2004 – Netscape => Firefox 2008 – Chrome 2015 – Edge (Win10) WorldWideWeb töötas operatsioonisüsteemil NeXTStep, mis oli Mac OS eelkäijaks. Erwise oli Unixi rakendus
4
Ajalugu SGML (Standard Generalized Markup Language - Ühtlustatud Üldine Markeerimise Keel) 1991 – esimene veebileht 1995 – HTML 2.0 – esimene standard 1996 – CSS (Cascading Style Sheets) 1997 – HTML 3.2 1999 – HTML 4.01 2000 – XHTML 1.0 2014 – HTML 5
5
HTML 2.0 Rasvane kiri Kaldkiri Reavahetus Link Pilt
Pealkirjad ja päise tiitel Loendid Vorm (sisestuslahtrid, nupud) Metaandmed Kommentaar
6
HTML 3.2 Teksti joondamine Alla- ja läbijoonimine Üla- ja alaindeks
Teksti šrifti, suuruse ja värvi määramine Tabel Viidete/linkide asetamine pildi sisse Lõik ja elementide grupeerimine CSS-koodi kasutamise võimalus HTML-failis Java rakenduse ja skriptide võimalus
7
HTML 4.01 Raamid Tabeli jaotus päiseks, sisuks ja jaluseks
Teatud märgendite ja atribuutide asendamine CSS-iga Rohkem võimalusi CSS-i rakendamiseks CSS-failiga sidumise võimalus
8
HTML 5 uued elemendid: eemaldati raamid/paanid <frameset>
Multimeedia: <audio> <video> Lehe osad: <header> <section> <footer> 2D ja 3D graafika JavaScriptiga: <canvas> Vt W3Schools eemaldati raamid/paanid <frameset>
9
Märgendikeel <märgend>Mingi tekst</märgend>
<märgend atribuut=“atribuudi väärtus” />
10
HTML struktuur <html> <head> <title> Pealkiri
<body> <!--Veebilehe sisu --> </body> </html>
11
HTML õppematerjal HTML konspekt: http://tmk.edu.ee/~oolt/HTML.doc
HTML lisamaterjal:
12
CSS (Cascading Style Sheets)
CSS on mõeldud kodulehe kujundamiseks Sarnaneb tööpõhimõttelt Word dokumendi stiilidega (Styles and Formatting…) Eraldab kujunduse HTML failist
13
CSS eelised Võimaldab paremini ja täpsemalt kodulehekülge kujundada, rohkem võimalusi Stiililehte saab rakendada mitmele HTML-lehele: Kogu kodulehe kujunduse muutmiseks on vaja muuta ainult 1 faili Vähendab andmeliiklust HTML failid on lihtsamini loetavad ja kiiremini töödeldavad Iga ühesuguse elemendi parameetreid ei pea iga kord uuesti määrama, nt tabeli lahtrid.
14
CSS õppematerjal CSS konspekt: http://tmk.edu.ee/~oolt/CSS.doc
CSS lisamaterjal:
15
Tüüpiline kujundus [Logo] Alammenüü 1 Alammenüü 2 Alammenüü 3
Peamenüü 1 | menüü 2 | menüü 3 Lehe sisu Jalus (kontaktid, © jms) Tabelitel on suur roll kodulehe kujundamisel
![Tüüpiline kujundus [Logo] Alammenüü 1 Alammenüü 2 Alammenüü 3](http://slideplayer.com./slide/14007095/86/images/15/T%C3%BC%C3%BCpiline+kujundus+%5BLogo%5D+Alammen%C3%BC%C3%BC+1+Alammen%C3%BC%C3%BC+2+Alammen%C3%BC%C3%BC+3.jpg "Peamenüü 1 | menüü 2 | menüü 3. Lehe sisu. Jalus (kontaktid, © jms) Tabelitel on suur roll kodulehe kujundamisel.")
16
Tasuta veebiruumi pakkujad
zone.ee – 25 MB 000webhost.com – 1500 MB Host-ED – 10 GB
17
Veebilehe avaldamine FTP (File Transfer Protocol)
FileZilla WinSCP Esilehe faili nimi on “index.html” Koduleht salvestatakse reeglina kausta “public_html”, kuid võib erineda vastavalt serveri seadistusele
18
FileZilla
19
FileZilla
20
WinSCP
21
Visuaalsed HTML-redaktorid
Microsoft Frontpage ( ) Adobe Dreamweaver ( …) Microsoft Expression Web ( ) CKEditor (tasuta, veebipõhine)
22
Frontpage 2003
23
Dreamweaver
24
Microsoft Expression Web 4
25
Sisuhaldussüsteemid (CMS)
Wordpress Joomla! Drupal Eritellimusel arendatud CMS-id CKEditori kasutamise näide era CMS-is -
Similar presentations
