HTML eta CSS eduki sortzaileentzat
?
1 like?426 views
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 Udazkeneko Multimedia 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/
- 4. http://www.aiaraldea. com/albisteak/amurrio? page=5 Protokoloa (eskema izena) Adibidez: ¡ñ http ¡ñ https ¡ñ ftp
- 10. edukia vs. itxura CC-by Edward Dalmulder http://www.flickr.com/photos/edwarddalmulder/3603423112/
- 12. web vs. papera CC-by Travis Modisette http://www.flickr.com/photos/tramod/4696766887/
- 13. web vs. papera Irakurri edo eskaneatu Jakob Nielsen PhD
- 14. web vs. papera Web orriek 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
- 22. etiketa habiaratuak <etiketa> edukia 1 <besteetiketa> edukia 2 </besteetiketa> </etiketa>
- 26. HTML Hyper Text Markup Language
- 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 ixten ez duzun bakoitzean Jaungoikoak katukume bat hitzen du!!!
- 31. HTML Hyper Text Markup Language CC-by-sa Jack Newton http://www.flickr.com/photos/jdn/2328826931/
- 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>
- 35. <iframe ¡ñ src ¡ñ width ¡ñ height <iframe src=/slideshow/html-eta-css/29241314/"/player.vimeo.com/video/79628420" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
- 36. <audio ¡ñ src ¡ñ controls ¡ñ autoplay <audio src=/slideshow/html-eta-css/29241314/"horse.ogg" controls> Your browser does not support the audio element. </audio>
- 37. <video
- 38. <object ¡ñ data ¡ñ width ¡ñ height
- 39. HTML Tresna gehiago CC-by Alvin Chua http://www.flickr.com/photos/siomuzzz/2577041081/
- 40. taulak <table border="1"> <tr> <th>Goiburua 1</th> <th>Goiburua 2</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. formularioak
- 42. kopiatu eta itsatsi Microsoft Word! The Found Animals Foundation http://www.foundanimals.org/photos/image/47-max-the-brown-tabby-and-burt-the-grey-kitten-cat-argument/
- 45. Beste formatuak ¡ñ Markdown ¡ñ JSON
- 46. Markdown Heading <h1>Heading</h1> ======= Heading <h2>Sub-heading</h2> Sub-heading ----------Paragraphs are separated by a 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
- 49. CSS <style> body {color:red;} h1 {color:#00ff00;} p.ex {color:rgb(0,0,255);} </style>
- 51. CSS - Hautatzaileak Elementu html etiketak (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> <link rel="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 */
- 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 */ ¡ñ ¡ñ