LOG IN
Usuario:

Contraseña:


Últimos temas
» [PHPBB3] Contenido por defecto en la respuesta rapida.
Mar Jul 17, 2018 7:30 pm por Ysamar

» [PHPBB3] Mejorar las Pestañas que aparecen en el perfil de un Usuario.
Dom Jul 01, 2018 12:12 am por Ysamar

» Navbar desplegable sencilla
Dom Jun 17, 2018 2:06 pm por Ysamar

» Modulo de Afiliados 40x40 [Todas las versiones]
Vie Jun 15, 2018 6:44 pm por Ysamar

» 2 Galeria Html Elegante
Miér Jun 13, 2018 8:57 pm por Ysamar

» [PHPBB3]Agregar amigos desde el perfil y dejar mensaje en su muro...
Miér Jun 13, 2018 8:02 pm por Ysamar

» Botón "ir al muro" (mensajes de los visitantes)
Miér Jun 13, 2018 7:49 pm por Ysamar

» ¿No quieres publicidad
Miér Jun 13, 2018 7:37 pm por Ysamar

» Efecto Lightbox automatico en imagenes [Foroactivo]
Miér Jun 13, 2018 7:27 pm por Ysamar

Estadísticas
Tenemos 2352 miembros registrados.
El último usuario registrado es Jhunky

Nuestros miembros han publicado un total de 41230 mensajes en 3360 argumentos.
Afiliados





No estás conectado. Conéctate o registrate

Ver el tema anterior Ver el tema siguiente Ir abajo  Mensaje [Página 1 de 1.]


1 Clase 5 - Enlaces e Imágenes el Vie Feb 03, 2012 10:23 pm

Curso WEBD: HTML – Clase 5

Antes que nada quiero pedir perdón por haber tardado tanto en hacer una nueva clase, por cuestiones de tiempo no había podido hacerla.


En esta nueva clase veremos Enlaces e Imágenes que sin duda alguna es algo que todo sitio debe tener. Utilizaremos la etiqueta para colocar enlaces y la etiqueta (no necesita cerrarse) para colocar imágenes.

Enlaces:
Su sintaxis es:
Código:
<a href="destino">Texto</a>
en la que tendremos como resultado un texto y al hacer clic nos llevará al destino.
Estos destinos pueden ser una página web, partes de una misma página, paginas del mismo sitio, archivos y direcciones de correo.


Enlaces a otro sitio web: estos pueden ser los más comunes. Escribiremos:
Código:
<a href="http://www.google.com.ar/">Google</a>
Google

Dentro del atributo href pondremos el url de un sitio web. Recuerden colocar el http:// porque sino será tomado como un enlace local. Veremos que sucede si colocamos:

Código:
<a href="www.google.com.ar/">Google</a>
Google

Como pueden ver, es interpretado como un enlace local.




Enlace local: Este tipo de enlace nos permite tener como destino una página de nuestro mismo sitio web.
Por ejemplo, podemos enlazar a la pagina de contacto de WD de la siguiente manera:
Código:
<a href="http://www.webdesignforo.net/contact">Contacto</a>
Contacto

Sin embargo, al ser este un enlace de nuestro sitio, podremos hacerlo de la siguiente manera:
Código:
<a href="/contact">Contacto</a>
Contacto

El resultado es exactamente el mismo, pero sin dudas hacerlo de la segunda forma es mucho más sencillo.




Enlace interno: los enlaces internos tienen como función dirigir, mediante su dirección, a una parte concreta de nuestro sitio web.
Para esto es necesario tener una etiqueta con un atributo id como podría ser
Código:
<div id="pun-foot">

Luego crearemos nuestro enlace colocando en el atributo href la almohadilla (#) + la id de nuestro destino:
Código:
<a href="#pun-foot">Ir abajo</a>
Pueden probarlo haciendo clic: Ir abajo




Enlace a un archivo: utilizado para descargar archivos directamente, funciona del mismo modo que un enlace a cualquier sitio web, con la diferencia que este archivo tendrá otra extensión como puede ser ".zip"
Código:
<a href="miarchivo.zip">Descarga el archivo</a>




Enlace a un correo: Aquí hay una diferencia con respecto a los otros tipos de enlaces. Colocaremos el atributo href seguido de malito: y finalmente el mail.
Ejemplo:
Código:
<a href="mailto:mi@mail.com">Contactar</a>
Contactar

La función está bien clara, de esta forma podremos mandar un mail de una forma más sencilla y directa a la dirección que se encuentra en el atributo href.






Imágenes: las imágenes se definen con la etiqueta (la cual no tiene un cierre) y dentro de ella colocamos una serie de atributos.
La sintaxis de una imagen es la siguiente:
Código:
<img src="tuimagen.png">


Podremos utilizar 3 formatos diferentes de imágenes: PNG, JPG y GIF. Recomiendo visitar los siguientes links si quieres saber más sobre estos formatos:
PNG - JPG - gif

A su vez, las imágenes pueden llevar dentro una serie de atributos, a continuación explicaré los más importantes:

WIDTH=”valor” le asigna un ancho a la imagen
HEIGHT=”valor” le asigna un alto a la imagen
ALT=”valor” contiene una descripción de la imagen

Ejemplo:
Código:
<img src="http://i41.servimg.com/u/f41/16/71/63/22/logo14.png" width="200" height="50" alt="hola">
hola

Bueno, con esto damos por finalizada la clase 5. Espero que les sirva a aquellas personas que se están iniciando en html, y a las que no pero pudieron aprender algo nuevo en esta clase Encantado
Un saludo

Ver perfil de usuario http://www.webdesignforo.net

2 Re: Clase 5 - Enlaces e Imágenes el Sáb Feb 04, 2012 12:21 am

Genial, esto es algo complicado, bueno eso supongo pero lo veo que esta mas desarollado que las demás clases en fin ahora mismo me la pongo a leer y gracias.

Ver perfil de usuario http://www.aikayweb.forumotion.com

3 Re: Clase 5 - Enlaces e Imágenes el Sáb Feb 04, 2012 11:03 am

Esta algo complicada pero aprendi algo nuevo bazinga muchas gracias por la clase haber que logro con lo que llevo hasta ahora xD

Ver perfil de usuario http://animepng.blogspot.com

4 Re: Clase 5 - Enlaces e Imágenes el Sáb Feb 04, 2012 5:47 pm

No se asusten con el largo de la clase, parece muy largo pero no lo es Sonrisa
además es una de los temas más sencillos, colocar un enlace o una imagen lo hacemos todos los días, usando el bbcode por ejemplo.

saludos

Ver perfil de usuario http://www.webdesignforo.net

5 Re: Clase 5 - Enlaces e Imágenes el Mar Feb 07, 2012 5:33 am

Perdón por llegar tarde profe!! *Tomo una silla y me siento*
jaja okno xD

Muchas Gracias Bazinga ;D

Ver perfil de usuario http://www.fuerzashinobi.net/

6 Re: Clase 5 - Enlaces e Imágenes el Lun Feb 20, 2012 8:22 pm

El enlace a otro sitio web también se puede hacer así:

Código:
[url=laurldelawebodelsitioquesea]el texto que quieras o el code de una imagen[/url]

Y se verá solo el texto que quieras o una imagen que te llevara a la url del sitio que pusiste

Esto recibe el nombre de hipervínculo

Ver perfil de usuario

7 Re: Clase 5 - Enlaces e Imágenes el Lun Feb 20, 2012 9:53 pm

Gracias por la clase. Sabia esto de enlaces de imagenes.

Un beso

Ver perfil de usuario

8 Re: Clase 5 - Enlaces e Imágenes el Dom Mar 04, 2012 2:11 am

Muy buena la clase, aprendí algunas cosas

Ver perfil de usuario

9 Re: Clase 5 - Enlaces e Imágenes el Sáb Mar 17, 2012 7:49 pm

Debes de comenzar con css, :$

Ver perfil de usuario

10 Re: Clase 5 - Enlaces e Imágenes el Dom Abr 01, 2012 10:35 am

Muy bueno, gracias tito, siempre enseñando a la gente Encantado


- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Mai Tuitah: @ElDelTKM
Mai Youtuf chanel: https://www.youtube.com/StormMadafaqas
Mai Tuenti: Storm Madafaqas Gfx
Mai Skaip: Madafaqas
Ver perfil de usuario http://www.webdesignforo.net/

11 Re: Clase 5 - Enlaces e Imágenes el Mar Abr 10, 2012 7:00 am

Recuerda qué para añadir una ruta de css style tienes que poner este código:
Código:
<link rel="stylesheet" href="css/estilo.css" type="text/css" />

y para javascript:
Código:
<script src="js/core.js" language="javascript" type="text/javascript"></script>

Ver perfil de usuario

12 Re: Clase 5 - Enlaces e Imágenes el Miér Abr 11, 2012 2:15 pm

Gracias por los tutoriales de los cursos, son de gran ayuda para los novatos como yo.

Ver perfil de usuario

13 Re: Clase 5 - Enlaces e Imágenes el Sáb Mayo 26, 2012 7:11 pm

Muy buena clase, utilizar imágenes y enlaces, es cosa de todos los días en el diseño web.

Ver perfil de usuario http://www.webdesignforo.net/

14 Re: Clase 5 - Enlaces e Imágenes el Dom Jun 03, 2012 10:48 am

Esta algo complicado pero aprendí barias cosas espero ver mas temas como estos ayudan mucho mil gracias..

Ver perfil de usuario

Contenido patrocinado


Ver el tema anterior Ver el tema siguiente Volver arriba  Mensaje [Página 1 de 1.]

Permisos de este foro:
No puedes responder a temas en este foro.