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

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/

2. URLak
Interneteko
helbideak

3. http://www.aiaraldea.
com/albisteak/amurrio?
page=5

4. http://www.aiaraldea.
com/albisteak/amurrio?
page=5
Protokoloa
(eskema izena)
Adibidez:
● http
● https
● ftp

5. http://www.aiaraldea.
com/albisteak/amurrio?
page=5
Ostalari-izena

6. http://www.aiaraldea.
com/albisteak/amurrio?
page=5
Bide-izena

7. http://www.aiaraldea.
com/albisteak/amurrio?
page=5&gakoa=balioa
Parametroak

8. http://www.aiaraldea.com:80/
Portua
(ataka)
Adibidez:
● 80 (lehenetsia)
● 8080
● ...

9. http://ume.aiaraldea.
com/hitzaldiak.
html#hitzaldi3
Zatia

10. edukia vs. itxura
CC-by Edward Dalmulder
http://www.flickr.com/photos/edwarddalmulder/3603423112/

11. Praktika testu
prozesagailuan
(LibreOffice Writer)

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

18. <etiketa>edukia</etiketa>

19. <etiketa atributua="kaixo">
edukia
</etiketa>

20. edukirik ez!!
<etiketa atributua="kaixo">
</etiketa>

21. edukirik ez!!
<etiketa atributua="kaixo" />

22. etiketa habiaratuak
<etiketa>
edukia 1
<besteetiketa>
edukia 2
</besteetiketa>
</etiketa>

23. <kontaktua>
Aiaraldea</izena>
<izena>
<helbidea>
Nerbioi kalea</kalea>
<zenbakia>1</zenbakia>
<solairua>3</solairua>
<eskua>esk</eskua>
<herria>Laudio</herria>
<herrialdea>Araba</herrialdea>
<postakodea>01400</postakodea>
<kalea>
</helbidea>
<telefonoa mota="finkoa">
</kontaktua>
946568554</telefonoa>

24. irakurterraza?
<kontaktua><izena>Aiaraldea</izena><helbidea><kalea>Nerbioi
kalea</kalea><zenbakia>1</zenbakia><solairua>3</solairua><esku
a>esk</eskua><herria>Laudio</herria><herrialdea>Araba</herrial
dea><postakodea>01400</postakodea></helbidea><telefonoa mota="
finkoa">946568554</telefonoa></kontaktua>
:-(

25. lanera!!
CC-by R. Mitra
http://www.flickr.com/photos/tataimitra/8619346365/in/photostream/

26. HTML
Hyper Text Markup Language

27. http://liveweave.com

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/

32. ●
●
●
●
●
●
Loturak
Irudiak
IFrame
Audioa
Bideoa
Embed eta Object

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. <img
●
●
●
●
src
alt
width
height
<img
src=”http://www.aiaraldea.com/sites/default/files/irudiak/kartelaweb-04_1.jpg”
alt=”Aurtengo UMEren kartela”>

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. <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/

43. kopiatu
eta
itsatsi
http://www.websighthangouts.
com/how-to-paste-from-microsoftword/
http://word2cleanhtml.com/

44. kopiatu eta itsatsi

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&mdash;not the
reign&mdash;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. CSS
Cascading Style Sheets

49. CSS
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>

50. CSS
deklarazioa
(eragazupena)
p.ex {color:rgb(0,0,255);}
hautatzailea propietatea
balioa

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 */

59. CSS - Hutsuneak
line-height:
margin:
padding:

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. behaketa
CC-by-nc-sa leon_eye
http://www.flickr.com/photos/leon_eye/3342813702/

62. Behaketa
Chrome
F12