Comunidad de diseño web y desarrollo en internet online

NO VEO MIS IMÁGENES

Citar            
MensajeEscrito el 04 Feb 2014 11:40 am
Ya advierto que es el primer curso de HTML y CSS que hago. Ahora el problema es que no consigo que se vean mis imágenes, y eso que sigo todo el proceso que el tutor (grabado en tutorial de vídeo) me dice. Aquí os dejo el ejemplo. En la etiqueta src he añadido la dirección que la imagen sigue. Es decir, el nombre de la carpeta donde se encuentra, que a su vez es la misma carpeta donde se encuentra el index, cuyo html os muestro, y el nombre de la imagen con su extensión de formato .jpg

HTML:

Código HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JAVIER NOGUEIRAS</title>
<meta name="description"content="desarrollador fotógrafo, realizador para web" />
<meta name="keywords"content="fotografía, video, desarrolo web, fotografía de producto, vídeo de producto" />
<meta name="author" content="Javier Nogueiras" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" />

</head>
<body>

<div id="header">
<div id="nav">
<ul>
<li><a href="index.html">Inicio</li>
<li><a href="dessarrollo.html">Desarrollo</li>
<li><a href="realizacion.html">Realización</li>

</ul>
</div>
<div id="wrapper">wrapper
<div id="main"><img src="portal javier nogueiras/blancoynegro.jpg" /></div>
<div id="footer">&copy; 2014 Todos los derechos reservados</div>

</div>

</body>



</html>


Y ESTE ES EL CSS:

Código CSS :

#header{
border: 1px solid black;
width: 100%;
heigth: 120px;
background: #202020;
}
#wrapper{
border: 1px solid black;
width: 700px;
heigth:auto;
margin: 0px auto;
}
#main{
border: 1px solid black;
height: 300px
}
#footer{
height: 40px
border: 1px solid black;
font-size: 14px;
text-align: center;
}

#wrapper #main img{
width:700px;
height: 300px
}

Por Maerbale

3 de clabLevel



 

safari
Citar            
MensajeEscrito el 04 Feb 2014 04:01 pm
si la imagen está en la misma carpeta que el html... solo la tienes que llamar, no hacer referencia a esa carpeta.

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Web Developer

chrome
Citar            
MensajeEscrito el 04 Feb 2014 04:53 pm
Lo siento, Nacho, gracias pero no acabo de entender. Cuál es la diferencia entre "llamar" y "hacer referencia"?

Por Maerbale

3 de clabLevel



 

safari
Citar            
MensajeEscrito el 04 Feb 2014 08:13 pm
Lo que tienes que hacer es en src="" de la etiqueta imagen, escribir la ruta correcta. Eso quiere decir que no necesitas poner el nombre de la carpeta donde tienes TODOS los archivos, si no simplemente el nombre de la carpeta que contiene la imágenes.

Si creaste una sub-carpeta para guardar tus imágenes que se llama "imagenes" y ésta está dentro de la carpeta principal, entonces la ruta será:

Código HTML :

<img src="images/nombre-imagen.jpg"/>


Si no creaste la carpeta "imagenes", la ruta será:

Código HTML :

<img src="nombre-imagen.jpg"/>


Espero resuelvas tu problema.

Slds!

Por jap_solo

21 de clabLevel



Genero:Masculino  

Maquetador Docente Web

chrome
Citar            
MensajeEscrito el 04 Feb 2014 09:38 pm
Maerbale: cuando publiques código, antes de empezar a colocarlo escribe [ luego y sin dejar espacios y en minúscula, el nombre del lenguaje, ejemplo css, a continuación y de nuevo sin dejar espacios escribe ]. Entonces pega tu código y al final repites la operación, pero pones una / después de [

Por favor confirma que entendiste, gracias.

Ahora lo que nasho te dice es que si el archivo index.html y tu imagen están en el mismo lugar, entonces en src no tienes que escribir el nombre de la carpeta, sólo escribe el nombre completo de la imagen.

Por otro lado y si incluyes una carpeta para las imágenes, asegurate de que el nombre esté bien escrito.

Saludos.

Por Aoyama

BOFH

6224 de clabLevel

6 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Bastard Operators From Hell

Webdesigner & Developer, en mis ratos libres bebo café por litros.

firefox
Citar            
MensajeEscrito el 04 Feb 2014 10:59 pm
Eso mismo... clase de rutas:

Al empezar con un proyecto, creas o eliges una carpeta que contendrá todos los archivos, a esa carpeta la llamamos raíz o root.

Según tu código, tu carpeta raíz es "portal javier nogueiras". Todos los archivos que vayas a crear estarán dentro de ella. Es la carpeta de tu proyecto.

Existen 2 tipos de rutas, absolutas y relativas.

Las rutas absolutas son muy simples, ya que siempre hacen referencia a tus archivos a partir de la raíz.

*Hacer referencia es ubicar el archivo dentro de tus carpetas, hasta encontrarlo y poderlo abrir o simplemente seleccionar.

Una ruta absoluta online, siempre lo precede "http://". Generalmente se ocupa para linkear a otros sitios, pero también se puede con tu sitio o proyecto.

P.ej. Mi sito es cristalab.com, el dominio apunta a la carpeta raíz, por lo que para hacer refenencia a esa carpeta, hay que insertar "http://cristalab.com"

Si quiero llamar un html sería:
http://cristalab.com/foros.html
*Es un ejemplo....

Si tengo una imagen dentro de una carpeta, entonces primero tengo que llamar a la carpeta y después a la imagen:
http://cristalab.com/images/F_dormido.jpg

Del mismo modo que llame a la carpeta images, puedes llamar (acá llamar lo ocupo para decir que estoy seleccionando, o en caso de las carpetas abriendo) a todas las que gustes.


Para las rutas relativas, se entra y se sale de las carpetas. Algunas referencias comienzan desde raíz, todo depende de en que lugar esté guardado el archivo que manda llamar al otro.

Si tengo en raíz mi html y quiero llamar una imagen que también se encuentra en raíz, al estar en la misma carpeta solo tengo que llamar (con su nombre y extensión) a la imagen:
"logo.png"

Si la imagen se encuentra dentro de una carpeta llamada images, primero tengo que entrar en la carpeta para poder llamar a la imagen:
"images/logo.png"

En el sentido de entrar, hay que llamar a la carpeta y agregar una diagonal al final de su nombre.

Si tengo en raíz una carpeta llamada "css" y otra llamada "images", ambas carpetas son hermanas, están dentro de la misma carpeta (raíz).

Si quiero desde un css, que esta dentro de su carpeta, llamar a una imagen, tengo que salir primero de la carpeta "css", con eso llego a raíz y posteriormente entro en la carpeta images:
"../images/logo.png"

Con 2 puntos se sale de la carpeta.

Espero te sirva.

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Web Developer

chrome
Citar            
MensajeEscrito el 06 Feb 2014 02:50 pm
Conseguido. Gracias #jap_solo, #nasho, y #aoyama. Ahora bien, #aoyama, no he entendido las normas de escritura del foro ¿podrías poner un ejemplo ilustrativo?
Gracias de nuevo a los tres.
Saludos,
Maerbale.

Por Maerbale

3 de clabLevel



 

safari
Citar            
MensajeEscrito el 06 Feb 2014 08:07 pm

Maerbale escribió:

Conseguido. Gracias #jap_solo, #nasho, y #aoyama. Ahora bien, #aoyama, no he entendido las normas de escritura del foro ¿podrías poner un ejemplo ilustrativo?
Gracias de nuevo a los tres.
Saludos,
Maerbale.


No es una norma de escritura en sí, sólo te pido que uses de forma correcta las herramientas de código. Si usas el editor en lugar de la respuesta rápida podrás ver un botón (Junto al botón de Flash) que te sirve para escribir código. No obstante te doy un ejemplo:

Si escribes:

Código :

[cplusplus]
if (g_pD3DXSprite && g_pTexture)
{
        g_pD3DXSprite->Begin( D3DXSPRITE_ALPHABLEND );
        g_pD3DXSprite->Draw(g_pTexture, NULL, NULL, &vecPos, 0xffffffff);
        g_pD3DXSprite->End();
}
[/cplusplus]


Generas :

Código C++ :

if (g_pD3DXSprite && g_pTexture)
{
        g_pD3DXSprite->Begin( D3DXSPRITE_ALPHABLEND );
        g_pD3DXSprite->Draw(g_pTexture, NULL, NULL, &vecPos, 0xffffffff);
        g_pD3DXSprite->End();
}


Espero que te quede claro.

Por Aoyama

BOFH

6224 de clabLevel

6 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Bastard Operators From Hell

Webdesigner & Developer, en mis ratos libres bebo café por litros.

firefox
Citar            
MensajeEscrito el 06 Feb 2014 09:13 pm
Juraría que así ha sido (lo de quedarme claro, quiero decir). Lo averiguaremos en mi próxima consulta.
Gracias de nuevo.

Por Maerbale

3 de clabLevel



 

safari

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.