1 / 40

PREDSTAVITEV INFORMACIJ NA SPLETU

PREDSTAVITEV INFORMACIJ NA SPLETU. 3f. Spletni sestavek. Zgradba: zaokroženi sklopi Vhodna stran (index.html) Oblika in velikost strani Logična zgradba - povezovanje. Spletni naslov. http://skg.stanislav.si/comenius/2006/index.htm

jenna-mckay
Download Presentation

PREDSTAVITEV INFORMACIJ NA SPLETU

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. PREDSTAVITEV INFORMACIJ NA SPLETU 3f

  2. Spletni sestavek • Zgradba: • zaokroženi sklopi • Vhodna stran (index.html) • Oblika in velikost strani • Logična zgradba - povezovanje

  3. Spletni naslov • http://skg.stanislav.si/comenius/2006/index.htm protokol spletni naslov računalnika mapa podmapa ime datoteke

  4. Urejanje spletnih strani Tvorjenje in urejanje: • Beležnica (Notepad, Textpad) • tsWebEditor, PSPad • Označevalni jezik HTML (Hyper Text Markup Language) • View SOURCE – pregled ukazov trenutne strani v HTML

  5. HTML – črta in besedilo Več o besedilih : PRIMERI

  6. HTML – tabele <table border="1" cellpadding="5"> <tr align="center" valign="baseline"> Več o tabelah : PRIMERI

  7. HTML – seznami Več o seznamih : PRIMERI

  8. HTML – slike <img src="smesko.png" width="70" height="200" alt="Smeško širine 70 in višine 200"> Več o slikah : PRIMERI

  9. HTML – povezave <ahref=http://skg.stanislav.si>ŠKG </a> <a href="test.html"><img src="smesko.png" alt="Smeško"></a> Več o povezavah : PRIMERI

  10. HTML – enostaven primer

  11. HTML – enostaven primer

  12. Povezave – Nauči se HTML • http://baza.svarog.org/racunalnistvo/tecaj_html.php • http://www.ctk.uni-lj.si/Publikacije/2000/HTML-online/ • http://zaversnik.fmf.uni-lj.si/gradiva/html/ • Spletne predstavitve (Roman Turk): http://www.gimvic.org/predmeti/gradiva/navodila-strani/index.html

  13. PrimeriBesedila, slike, povezava • značke <h1>, <h2>, <p>, <hr>,<br>,&nbsp; • <img> , <a href> • Vaja1 • Vaja1_dodane lastnosti

  14. PrimeriSeznami • značke <ol>, <ul>, <li, <dl>,<dt>,<dd>; • Vaja2 • Vaja_Seznami

  15. PrimeriSeznami • Naredite sami • Vaja3

  16. PrimeriTabele • Značke <table>, <tr>, <td>, <th>, • Lastnosti: border, align, width, cellspacing, cellpadding

  17. PrimeriTabele • Značke <colgroup>, <col>, <row>, <caption>,<thead>,<tfoot>,<tbody> • Lastnosti: span, colspan, rowspan

  18. PrimeriTabele • Poskusite sami? • Skoki na FMF • Rešitev – vodeno

  19. PrimeriOkvirji (Frame) • Vaja2a

  20. Določanje blokov <frame> 1. • <html> • <frameset rows="20%,*"> • <frame src="Vaja2a_glava.html"> • <frameset cols="20%,*"> • <frame src="Vaja2a_menu.html"> • <frame src="Vaja2a_okno.html" name="okno"> • </frameset> • </frameset> • </html> Vsebina datoteke Vaja2a.html (definicije razporeditve) Vaja2a_glava.html Vaja2a_okno.html “okno” Vaja2a_menu.html

  21. Povezave v okvirjih <frame> 2. • <a href="Vaja2a_okno.html#menu1" target="okno"><h4>Naštevanje</h4> </a> • <a href=http://skg.stanislav.si target=_blank width=100%>ŠKG </a> • <a href=http://zaversnik.fmf.uni-lj.si/Gradiva/CSS/ target=_blank>CSS gradiva</a> Vsebina zgoraj Vsebina na levi Vsebina na desni “OKNO”

  22. Uporaba slogov (CSS) • http://zaversnik.fmf.uni-lj.si/Gradiva/CSS/ Opise pripravimo na posebni datoteki (običajno ji damo končnico css), ter jo z elementom LINK vključimo v glavo dokumenta HTML. Na tak način lahko vključimo tudi več datotek z opisi stilov: • <link rel="StyleSheet" type="text/css" href="oblika.css">

  23. Uporaba slogov (CSS) - Primeri • * { color: blue } • p {font-family:"Times new roman"; font-size:12px; color: black} • h1 {font-family:"verdana, comic sans MS"; font-size:"24px"; color:"#004080"} • td {text-align:"right"} • h2 {font-family:"verdana, comic sans MS"; font-size:"18px"; color:"#00366C"} • hr {width:"100%"; size:"3"} • body {background-color:"#97CBFF"} • ul {type:"disc"} • a { font-size: 18px; } • a:link {color:#573A28; } • a:active { color: #FFFF00; } • a:visited { color: #C0C0C0; } • h2 { font-size: 36px; font-family: verdana; text-align: center; color: #573A28; }

  24. Domača naloga • Pripravi obliko osebne spletne strani (datoteko CSS) • Na • //informatika.skofijc.si • v svoji mapi naredi podmapo Osebna stran • Svojo osebno stran prenesi (postavi) v mapo Osebna stran. • V mapi Osebna stran moraš imeti: • Datoteko s slogi CSS • Vhodno stran osebne strani in strani z vsebino • Nadaljuj s pripravo osebne strani (to je že del maturitetne seminarske naloge)

  25. Naloga – enotna predstavitev • Pripravimo spletno mesto MATURA IZ INFORMATIKE Predstavitev maturantov • Vsak vnese svoje podatke v predlogo (obliko najdete na informatika.skofijc.si v datoteki dijak_skg.html) • Datoteko preimenuj v ImePriimek.html (npr. JanCelar.html) • Stran prenesi na informatika.skofijc.si (ne v svojo mapo)

  26. Določanje blokov – značka <div> 1. • <divstyle="float: left; width: 25%;"> • Znotraj je vsebina na levi • </div> • <divstyle="float: left; width: 75%;"> • Znotraj je vsebina na desni • </div> Vsebina na levi Vsebina na desni

  27. Določanje blokov – značka <div> 2. • <divstyle="width: 100%; height: 25%"> • Znotraj je vsebina zgoraj • </div> • <div> • <div style="float: left; width: 25%;"> • Znotraj je vsebina na levi • </div> • <div style="float: left; width: 75%;"> • Znotraj je vsebina na desni • </div> • </div> Vsebina zgoraj Vsebina na levi Vsebina na desni

  28. Vaja • Naredite svojo spletno stran z ukazi <div>

  29. Večpredstavnost (zvok in video) • Shranjeni v svojih datotekah • Predvajati se začnejo preden so v celoti naloženi računalnik • Vsak večpredstavni predmet zahteva za prikaz poseben program (predvajalnik) – tudi to moramo navesti oz. dati povezavo za prenos <a href=“film.avi">Film</a> <a href=“pozdrav.wav">Pozdrav</a>

  30. Obrazci • Omogočajo interaktivnost spletne strani (dvosmerno komuniciranje) • Sestavljeni so iz dveh delov: • HTML zapis strani (polja za vpis, gumbi, tipke …) • Navodila za obdelavo posameznih podatkov

  31. Obrazci <form> • <form method="post" action=mailto:helena.medvesek@guest.arnes.si" enctype="text/plain"> DEFINICIJE TIPOV ZA VNOS PODATKOV (znotraj značk form) • </form>

  32. Obrazci type="text" • <p><b> Okence za vnos besedila (text)</b> <br><br> • <input type="text" name="ime" size="15" value="Ime"> • <input type="text" name="priimek" size="20" value="Priimek"><br> • <input type="text" name="ulica" size="20" value="Ulica"><br> • <input type="text" name="kraj" size="20" value="Kraj"> <br><br>

  33. Obrazci type="checkbox" • <p><b> Za eno ali več izbir (checkbox)</b> <br> • <input type="checkbox" name="tip1" checked> knjige<br> • <input type="checkbox" name="tip2"> revije<br> • <input type="checkbox" name="tip3" checked> stripi<br> • <input type="checkbox" name="tip4"> e-viri<br> <br>

  34. Obrazci type=“radio" • <p><b> Za samo eno izbiro (radio)</b> <br> • <input type="radio" name="skupina1" value=1izbira checked> knjige<br> • <input type="radio" name="skupina1" value=2izbira> revije<br> • <input type="radio" name="skupina1" value=3izbira> stripi<br> • <input type="radio" name="skupina1" value=4izbira> e-viri<br><br>

  35. Obrazci type=“password" • <p><b> Za vnos gesla (password)</b> <br> • <input type="password" name="geslo"><br><br>

  36. Obrazci type=“select" • <p><b> Seznami elementov (select) - izbira enega elementa</b> <br> • <select name="spisek1"> • <option> knjige </option> • <option> revije </option> • <option selected> stripi </option> • <option> e-viri </option> • </select> <br> <br>

  37. Obrazci type=“select multiple" • <p><b> Seznami elementov (select) - izbira več elementov</b> <br> • <select name="spisek2" multiple size="4""> • <option> knjige </option> • <option> revije </option> • <option selected> stripi </option> • <option> e-viri </option> • <option selected> TV oddaje </option> • </select> <br> <br>

  38. Obrazci type=“textarea" • <p><b> Vpis daljšega besedila (textarea)</b> <br> • <textarea name="zapis" rows=4 cols=50></textarea> <br><br>

  39. Obrazci Prenos ali izbris • <input type="submit" value="Vpis"> • <input type="reset" value="Preklic">

  40. Vključitev sestavka v splet • remote site = oddaljeno spletiščenpr. informatika.skofijc.si ali IP … • zrcalna slika postavitve spletne strani na lokalnem spletišču • Potrebujemo prijavno ime in geslo • Uporabljamo protokol FTP • Windows explorer: • ftp://info2007@skofijc.si • Username: info2007 • Psw: infoinfo

More Related