viernes, 6 de marzo de 2015

[Tutoriales] HTML útil: links e imágenes.


Holii!!! Hoy os vengo a dar un par de nociones de HTML que vienen bien, y que es muy útil de saber para los bloggeros. La verdad es que estas son cosas que se van aprendiendo poco a poco, así que sobre todo esta entrada va dirigida a los bloggeros que han empezado de hace poco, que seguro que les viene bien. Además, seguramente en vez de hacer una super entrada larguísima, iré haciendo varias intercaladas con otros tutoriales. Por hoy, solo pondré links e imágenes, que son super básicos. Así que, empecemos!



Links


Y empezamos con los links. Primero, empecemos por como poner un link en html, algo que os puede sevir, por ejemplo, para poner un link en el gadget de reconocimiento, en el que normalmente solo puedes poner un numero de carácteres (que no te pone), así que a veces es un rollo si tienes que poner una dirección.

Para hacerlo debes utilizar la etiqueta <a>:

<a href="URL de tu link" target="_blank" title="Texto(tooltip)">Texto</a>
Fácil, ¿no? Bueno, el texto que está en rojo, os explico, es para poner si el link se abre en una pestaña nueva o en otra diferente. _blank es para que se abra en una nueva, y _self, para que se cargue en la misma. También hay dos atributos más, que son _top y _parent, pero no estoy muy segura de para que son. Lo que está en violeta, es el title, ¿y eso qué es? Pues es algo así como un texto descriptivo, y te aparece en el tooltip. Se puede utilizar tanto en imágenes como en link. Además, como veréis, la etiqueta href, es la que sirve para poner el link en si.

Debes tener en cuenta que siempre debes cerrar la etiqueta, con </a>, sino, no se verá!!! Si tu link falla, este puede ser uno de los problemas.

Imágenes


Vamos con las imágenes. Voy ha enseñaros como poner imágenes con HTML, cosas que os pueden servir para cualquier gadget html.

Solo tienes que utilizar la etiqueta <img>:

<img src="URL de tu imagen" alt="Texto" title="texto" width="100px" height="100px"/>
Bien, os explico todo. Primero, como veis, src, sirve para la dirección de la imagen, y aquí también ponemos el title, pero tenemos cosas nuevas. Primero, la etiqueta alt, (en rojo) que sirve algo así como un texto de emergencia, que sale cuando no se puede mostrar la imagen. También tenemos el width (ancho) y height (alto), en violeta, que son para controlar el alto y ancho de la imagen, aunque esto no es necesario. 

En esta etiqueta debes tener en cuenta que <img>, no se cierra con </img>, sino que directamente, al final de todo, antes de >, se pone la barra: <img src="" alt="" title=""/>


Y eso es todo, espero que os sirva, la próxima vez, traeré más cosas, como por ejemplo, como poner listas, usar el <span> y las etiquetas <b>, <i>, <u> y <strike>.


Beshus y hasta mañana!!

4 comentarios:

  1. Esta le tuto, yo no sabía hacerlo y lo estaba buscando en google (en serio, eres vidente? creí q yo era la única... TIENES UN DIARIO DEL FUTURO EN PLAN YUNO?!! y me acosas? XDDDDDD)
    bESHOS y muchas gracias

    ResponderEliminar
    Respuestas
    1. xD No te acoso, pero quizás tenga un diario del futuro....

      Beshus!!

      Eliminar
  2. esas cosas donde mejor se aprenden es cuando administras un foro que tienes que currartelo mazo XDDD

    ResponderEliminar
    Respuestas
    1. Supongo que sí, yo sobre todo las he aprendido por necesidad, buscando por ahí ^^

      Beshus!

      Eliminar

Holiii!!!! Si vas a dejarme un comentario, ten en cuenta las siguientes reglas:
-Nada de spam, si eso, me mandan un correo o me piden publi.
-Nada de insultos
-Nada de críticas ofensivas, cada uno tiene su propia opinión.

Aquí tenéis emoticonos para los coments:

(✿◠‿◠) (◡‿◡✿) (◕‿◕✿) (✖╭╮✖) (≧◡≦) (¬_¬) (◑‿◐) (◕‿-) ✖‿✖ (-’_’-) (╥_╥) (╯_╰) (╯3╰) (o_-) (¬‿¬) (◣_◢) (∪ ◡ ∪) (≧ω≦) o(≧o≦)o (⋋▂⋌) (॓_॔) (╯ಊ╰) (─‿‿─) ‹(•¿•)› (╯︵╰,) (︶︹︺) (∩︵∩) (。◕‿◕。) (⊙_◎) (~ ̄▽ ̄)~ (︶ω︶) (+_+) (。♥‿♥。) (✿ ♥‿♥) ♥╣[-_-]╠♥ ٩(͡๏̯͡๏)۶ ٩(-̮̮̃•̃)۶ ٩(̾●̮̮̃̾•̃̾)۶ ٩(-̮̮̃-̃)۶ (u_u) (*_*) (º_º) ٩(×̯×)۶ (ñ_ñ) (∩▂∩) (¬▂¬)ヽ(o`皿′o)ノ(・∀・ )( ̄(エ) ̄)( ̄へ ̄)(  ゚,_ゝ゚)(ι´Д`)ノ(・ェ-)ლ(́◉◞౪◟◉‵ლ)щ(ಠ益ಠщ)(ノಠ益ಠ)┻━┻。◕ ‿ ◕。ಠ_ಠ( °٢° )ʘ‿ʘಥ⌣ಥಥ‿ಥ(ΘεΘ;)(n˘v˘•)¬(✪㉨✪)ヽ(๏∀๏ )ノ(╹ェ╹)╮(─▽─)╭щ(ಥДಥщ)≖‿≖(ノ◕ヮ◕)ノ*:・゚✧(⊙ヮ⊙)ᕦ(ò_óˇ)ᕤᕙ(⇀‸↼‶)ᕗ(◡ಠ(•⊙ω⊙•)‘︿’( ´∀`)☆(≧ω≦)(´ー`)(つд`)( ̄。 ̄)(*~▽~)( ^▽^)σ)~O~)(=゜ω゜)(´ω`)(ノ_・。)(-_- )ノ(´ヘ`;)(^^;)( ´∀` )

Beshus mis gatitos!!