Download to read offline
Uploaded byInaki Ibarrola
HTML eta CSS eduki sortzaileentzat
Blog edo Web atari batean edukia argitaratu behar duzu eta HTML ikusten duzun bakoitzean buruko-mina sortzen dizu? Bideo edo txio bat txertatzen saiatu zara eta orria irakurtezina bihurtu al duzu inoiz? Kurtso honetan Web-ean argitaratzeko oinarri-oinarrizko kontzeptuak azalduko dira: * Papera eta Web-aren arteko 7 ezberdintasunak * HTML eta inguruko siglak, nola irakurri eta idatzi * Zure edukia aberastu kanpoko baliabideak txertatuz * Nola eman itxura zure edukiei * Nola lapurtu beste orrien edukiak eta formatuak
HTML eta CSS eduki sortzaileentzat
- 1. HTML eta CSS eduki sortzaileentzat UdazkenekoMultimedia Eskolak Aiaraldea Komunikazio Leihoa CC-by-sa Iñaki Ibarrola Atxa, 2013 CC-by-sa Fernando Mafra http://www.flickr.com/photos/f_mafra/3174777361/in/set-72157612210858159/
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10. edukia vs. itxura CC-byEdward Dalmulder http://www.flickr.com/photos/edwarddalmulder/3603423112/
- 11.
- 12. web vs. papera CC-byTravis Modisette http://www.flickr.com/photos/tramod/4696766887/
- 13. web vs. papera Irakurriedo eskaneatu Jakob Nielsen PhD
- 14. web vs. papera Weborriek eskaneatzeko erraza den testua erabili behar dute ● hitz gakoak nabarmendu ● azpizenburu esanguratsuak ● zerrendak ● Ideia bakarra paragrafo bakoitzeko ● piramide iraulia ondorioekin hasiz ● Paperean erabilitako hitz kopuru erdiaren baino gutxiago
- 15. Markaketa lengoaiak (edo etiketadun) adibidez: HTML,XML , SGML, TeX...
- 16. Aiaraldea Nerbioi kalea 1,3 esk. Laudio , Araba , 01400 94 656 85 54
- 17. Aiaraldea izena Nerbioi kalea 1,3 esk. kalea zenbakia solairua eskua Laudio , Araba , 01400 herria herrialdea 94 656 85 54 telefonoa posta kodea
- 18.
- 19.
- 20.
- 21.
- 22. etiketa habiaratuak <etiketa> edukia 1 <besteetiketa> edukia2 </besteetiketa> </etiketa>
- 23.
- 24.
- 25.
- 26. HTML Hyper Text MarkupLanguage
- 27.
- 28. oinarrizko egitura ● html ●head ○ title ● body
- 29. oinarrizko formatua ● ● ● ● ● ● ● ● ● p br <!-- iruzkinak--> h1-h6 ul > li ol > li strong, b em, i dl ○ dt ○ dd ● abbr ● pre
- 30. etiketa bat ixtenez duzun bakoitzean Jaungoikoak katukume bat hitzen du!!!
- 31. HTML Hyper Text MarkupLanguage CC-by-sa Jack Newton http://www.flickr.com/photos/jdn/2328826931/
- 32.
- 33. <a href ○ ○ ○ ○ web lotura mailto: tel: etab. target ○ _self (lehenetsia) ○_blank <a href=”http://www.aiaraldea.com”>Aiaraldea Komunikazio leihoa</a> <a href=”http://berria.info” target=”_blank”>Berria</a> <a href=”mailto:harremanak@aiaraldea.com”>Bidali eposta mezua</a> <a href=”tel:946568554”>Deitu telefonoz</a>
- 34.
- 35. <iframe ● src ● width ●height <iframe src="//player.vimeo.com/video/79628420" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
- 36. <audio ● src ● controls ●autoplay <audio src="horse.ogg" controls> Your browser does not support the audio element. </audio>
- 37.
- 38. <object ● data ● width ●height
- 39. HTML Tresna gehiago CC-by AlvinChua http://www.flickr.com/photos/siomuzzz/2577041081/
- 40. taulak <table border="1"> <tr> <th>Goiburua 1</th> <th>Goiburua2</th> </tr> <tr> <td>1. ilara, 1. gelaxka</td> <td>1. ilara, 2. gelaxka</td> </tr> <tr> <td>2. ilara, 1. gelaxka</td> <td>2. ilara, 2. gelaxka</td> </tr> </table> Goiburua 1 Goiburua 2 1. ilara, 1. gelaxka 1. ilara, 2. gelaxka 2. ilara, 1. gelaxka 2. ilara, 2. gelaxka
- 41.
- 42. kopiatu eta itsatsi Microsoft Word! TheFound Animals Foundation http://www.foundanimals.org/photos/image/47-max-the-brown-tabby-and-burt-the-grey-kitten-cat-argument/
- 43.
- 44.
- 45.
- 46. Markdown Heading <h1>Heading</h1> ======= Heading <h2>Sub-heading</h2> Sub-heading ----------Paragraphs are separated bya blank line. <p>Paragraphs are separated by a blank line.</p> <p>Text attributes <em>italic</em>, <strong>bold</strong>, <code>monospace</code>.</p> **bold**, `monospace`. <p>Shopping list:</p> Shopping list: <ul> <li>apples</li> <li>oranges</li> <li>pears</li> </ul> * oranges Paragraphs are separated by a blank line. Text attributes italic, bold, monospace. Text attributes *italic*, * apples Sub-heading * pears <p>Numbered list:</p> Shopping list: ● apples ● oranges ● pears Numbered list: Numbered list: 1. apples 2. oranges 3. pears The rain---not the reign---in Spain. <ol> <li>apples</li> <li>oranges</li> <li>pears</li> </ol> 1. apples 2. oranges 3. pears The rain—not the reign—in Spain. <p>The rain—not the reign—in Spain.</p>
- 47. { “Aiaraldea”, “izena”: “helbidea”: { “Nerbioi kalea”, “zenbakia”:1, “solairua”: 3, “eskua”: “esk”, “herria”: “Laudio”, “herrialdea”: “Araba”, “postakodea”: “01400” “kalea”: }, “telefonoa”: { “finkoa”, “zenbakia”: “946568554” “mota”: } } JSON
- 48.
- 49. CSS <style> body {color:red;} h1 {color:#00ff00;} p.ex{color:rgb(0,0,255);} </style>
- 50.
- 51. CSS - Hautatzaileak Elementu htmletiketak (span, div, p, etab.) Id #elementu-id (<div id=”elementu-id”></div>) Klase .elementu-klasea (<div class=”elementu-klasea”></div>)
- 52. CSS - Txertatu Kanpotik <head> <linkrel="stylesheet" type="text/css" href="estiloa.css"> </head> Barrutik <head> <style> p {margin-left:15px;} body {background-color:blue;} </style> </head> Lerroan <p style="color:red;margin-left:10px;">paragrafoa.</p>
- 53. CSS - Koloreak Propietateak ●color ● background-color Balioak Izena: (red, blue, green, etab) Hexadezimala: #ff000 RGB: rgb(255, 0, 0) http://www.colorpicker.com/
- 54. CSS - Testua text-align: ●left; ● center; ● right; ● justify; text-decoration: ● ● ● ● none; line-through; underline; overline; text-transform: ● uppercase; ● lowercase; ● capitalize; text-indent: ● 50px
- 55. Serifarik gabe CSS -Letra-tipoa CSS - Letra-tipoa Serifarekin
- 56. CSS - Letra-tipoa font-family: ●font-family:"Times New Roman", Times, serif; font-style: ● normal; ● italic; ● oblique; font-variant: ● normal ● small-caps font-weight: ● ● ● ● ● normal bold bolder lighter inherit
- 57. CSS - Neurriak px(pixels, absolutua) em (letra-tipoaren tamaina, erlatiboa) % (ehunekoa, erlatiboa)
- 58. CSS - Letra-tipoa font-size: ●h1 {font-size:2.5em;} /* 40px/16=2.5em */ ● h2 {font-size:1.875em;} /* 30px/16=1.875em */ ● p {font-size:0.875em;} /* 14px/16=0.875em */
- 59.
- 60. CSS - Loturak a:link{color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ ● a:hover {color:#FF00FF;} /* mouse over link */ ● a:active {color:#0000FF;} /* selected link */ ● ●
- 61.
- 62.