He estado intentando desde hace horaaaasss poder meter una imagen en una pagina web con html pero no sale
estoy haciéndolo en visual studio code con esta etiqueta: <img scr="aquí inserto el nombre de la imagen"> pero no sale nada, y tambien pongo la ruta de en que parte esta guardada la imagen pero sigue igual
(guardo la imagen con .jpg)
Tienes que poner la ruta. Hay 2 tipos de rutas, absolutas y relativas.
La absoluta es la ruta completa de la ubicación en el disco duro o la página web:
<img src="C:\MANOLO\imagenes\coche.jpg" alt="deportivo en un fondo oscuro de noche">
Este tipo rutas no son recomendadas porque una vez que subas la página web, y yo entre en ella, mi navegador intentará encontrar la imagen del coche en mi disco y no la va a encontrar.
Otra opción de las rutas absolutas sería:
<img src="
https://example.com/imagenes/coche.jpg" alt="deportivo en un fondo oscuro de noche">
Esta es una buena opción si estás aplicando numerosas políticas y cabeceras de seguridad y estás enfocando la web para usar siempre en un dominio.
Lo mas recomendado son las rutas relativas. Una ruta relativa se sigue desde la ubicación del html que tienes abierto. Te recomiendo estructurar tus webs básicas de la siguiente forma:
paginasWeb/
paginasWeb/concesionario/
paginasWeb/comercio/
paginasWeb/concesionario/index.html
paginasWeb/concesionario/javascript/
paginasWeb/concesionario/javascript/librerias/
paginasWeb/concesionario/javascript/librerias/miLibreria.js
paginasWeb/concesionario/javascript/index.js
paginasWeb/concesionario/css/librerias/
paginasWeb/concesionario/css/librerias/normalize.css
paginasWeb/concesionario/css/index.css
paginasWeb/concesionario/recursos/
paginasWeb/concesionario/recursos/fuentes/
paginasWeb/concesionario/recursos/iconos/
paginasWeb/concesionario/recursos/iconos/favicon.ico
paginasWeb/concesionario/recursos/imagenes/
paginasWeb/concesionario/recursos/imagenes/coche.jpg
paginasWeb/concesionario/recursos/imagenes/moto.jpg
Al tener una estructura similar a esta, en el index.html puedes hacer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Avoid GET request to favicon.ico
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
-->
<link rel="icon" href="./recursos/iconos/favicon.ico">
<title>Concesionario - Pagina Principal </title>
<link rel="stylesheet" href="./css/index.css" media="all">
<meta name="theme-color" content="#000000">
</head>
<body>
<img src="./recursos/imagenes/coche.jpg" alt="deportivo en un fondo oscuro de noche">
<div id="app"></div>
<script src="./javascript/main.js"></script>
</body>
</html>
A la hora de subir la página a un servidor, puedes subir el contenido de la carpeta concesionario y la web te funcionará directamente. Si subes la carpeta concesionario en sí, te quedará
http://example.com/concesionario/index.html en lugar de
http://example.com/index.htmlAlgo que vas a necesitar para hacer páginas web en tu pc, es un llamado servidor de desarrollo. Hay decenas de ellos muy buenos.
Lo más común al principio es utilizar Apache para desarrollar en local. Es uno de los mas simples de utilizar y bien documentados.
Otro muy común también es nginx.
Yo personalmente uso la terminal de linux para programar. Entonces uso comandos para todo.
Para levantar un servidor de desarrollo muy muy simple, ligero y básico yo uso el comando python -m http.server 3000. Tengo un alias en el archivo ~/.bashrc tal que alias pserv='python -m http.server $1';
Entonces cuando quiero ver la web del concesionario abro la terminal y me voy a la carpeta de concesionario escribiendo: cd paginasWeb/concesionario
Activo el servidor con el comando: pserv 3000
Y la veo en el navegador poniendo la url:
http://localhost:3000/Si necesito un servidor de desarrollo un poco mas completo utilizo http-server.
En un módulo de node. Para usarlo necesitas instalar el gestor de paquetes de node:
apt-get install node
npm install --global http-server
Una vez instalado puedes correrlo escribiendo el comando: http-server
Es muy simple y la vez tiene un montón de opciones que puedes ver con el comando: http-server --help
Yo utilizo termux en un Android 7+ para desarrollar. Por si alguien no tiene pc o no sabe/no quiere instalar linux en el pc.
Autor
En línea
