HTML pixka bat

Blogsoviet Wiki(e)tik

Hona jo: nabigazioa, bilatu

Edukiak

[aldatu] — Eta zer demontre da HTML?

HTML web orriak egiteko hizkuntza da, web orrien oinarria, badakizu kodea, programatzaileak eta hori guztia. Ikusi sakonago euskarazko wikipediak dioena. Ez, ez izutu. Testuari formatua emateko balioko digun hizkuntza sinplea da.


[aldatu] — Eta zertarako behar dut nik HTML kodeak ikastea?

  • Beharrezkoa ez da, baina blogarientzako oinarrizko HTML piska bat ikastea ez dator gaizki. Adibidez komentarioak uzteko garaian zerbait kursiban edo negritan jartzeko, balioko digu.
  • Wordpresseroentzako ere ondo dator gure blogeko egituran errepikatzen diren gauza txikiak aldatzeko.
  • Gure blogean argazkiak.org eta flickrreko irudiak, euskaltube eta youtubeko bideoak etab. txertatzeko kodea ematen digutenean adibidez, pertsonalizatu ahal izateko.


[aldatu] — HTML orri bat egiten

  • HTML orriak testu planoko orriak dira, blocdenotas, wordpad, gedit, vi, nano, textedit... edo edozein testu editorekin sor dezakezu HTML orri bat.
  • HTML orrien oinarria etiketak dira, testua normal idazten da eta zerbaiti formtua eman nahi zaionean bi etiketen artean sartzen da, irekiera etiketa eta itxiera etiketa, etiketak <> zeinuen artean dihoaz. Itxiera etiketak, itxiera dela adierazteko barra / bat ematen du.
Adibidez: <i>etiketen tarteko testu hau kursiban joango da, nabigatzaile batekin irekiz gero</i>
Adibidez: <b>etiketen tarteko testu hau negritan joango da, nabigatzaile batekin irekiz gero</b>
  • HTML orri baten egitura. Nabigatzaile bati testu planoko dokumentu bat HTML orri bat dela adierazteko ondorengo etiketak jartzen zaizkio dokumentu orri:
    • <html></html> : Bi etiketa hauen artean joango da HTML dokumentu guztia
    • <head></head> : Head etiketen barruan, joaten da orriaren titulua, eta gero programazioko zenbait gauza, javascriptak, css estilo orriak etab. Badakizue "programatzaileentzako gauza hoiek". :)
    • <title></title> : Web orri batean sartzerakoan gure nabigatzaileak leihoaren gainkaldean hartzen duen testua.
    • <body></body> : Web orria bera, testuak, irudiak etab.


Egitura horrela geratuko litzateke 
 <html>

  <head>
   <title>
    Nabigatzailearen lehioko tituluak hartzen duen testua
   </title>
  </head>

  <body>
    Hemen joango litzateke web orria bera. Kaixo Mundua! Hau nere HTML orria da.
  </body>

 </html>


Egin froga, ireki testu editore bat eta aurreko testu hau pegatu. Gero gorde html edo htm luzapenarekin froga.html edo horrelako zerbait eta ireki nabigatzailearekin.


[aldatu] — HTML etiketa erabilienak

  • Negrita <b></b> edo <strong></strong>
  • Kurtsiba <i></i> edo <em></em>
  • Testu txikia <small></small>
  • Espazio berdineko tipoak <tt></tt>
  • Parrafoa <p></p>
  • Estekak edo linkak. Egitura berezia dute <a href="www.nora.bidali">Link testua</a>
- Hau idatziz gero: 
<a href="http://www.blgosoviet.com">Blogsovietera esteka</a>
- Beste hau ikusiko genuke, eta esteka www.blogsoviet.com helbidera izango luke:
Blogsovietera esteka
  • Titularren hierarkia <h1></h1>, <h2></h2>, <h3></h3> .... Adidibidez:

H1.png


[aldatu] — Irudi eta bideoak txertatzen

  • Irudi bat txertatzeko etiketa bakarra erabiltzen da, ez dago irekiera eta itxiera etiketarik. Etiketa <img> da.
Ezaugarri ezberdinak ditu eta garrantzitsuena src da, irudiaren helbidea ematen digun ezaugarria.
Irudia gure HTML dokumentuaren karpeta berdinean badago, helbide erlatiboa erabili daiteke: 
<img src="irudia.jpg">


Irudia sareko beste zerbitzari batean badago, helbide absolutoa: 
<img src="http://wiki.blogsoviet.com/blogsoviet_logo.png">


Irudia txertatzeko kodea argazkiak.org edo flickr.com bezelako leku batetik hartzen badugu img etiketaren barruan width eta height ezaugarriak ere izan ditzake, ez badauzka guk jarri diezazkiokegu, pixeletan irudiaren tamaina haundiagotu/txikiagotu dezakegu gure blogaren zabalerara egokitzeko. Irudia haunditzen badugu kalitatea galtzen dela kontutan hartuz. 
<img src="http://wiki.blogsoviet.com/blogsoviet_logo.png" width="270" height="270">
Blogsoviet logo.png


Irudi bera baina 300 pixeleko zabalera eta altuerara haundituz: 
<img src="http://wiki.blogsoviet.com/blogsoviet_logo.png" width="300" height="300">
Blogsoviet logo.png


  • Irudi bat aurrez aipatu dugun <a href=""></a> etiketa tartean sartzen badugu, irudi horrek esteka bezela funtzionatuko du.
www.blogsoviet.com helbidera esteka jartzeko kodea honela litzateke: 
<a href="http://www.blogsoviet.com"><img src="http://wiki.blogsoviet.com/blogsoviet_logo.png"></a>
Blogsoviet logo.png
"http://wiki.blogsoviet.com/index.php?title=HTML_pixka_bat"(e)tik jasota
Tresna pertsonalak