ayuda con html pls

Iniciado por Sam X, 10 Diciembre 2021, 22:45 PM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

Sam X

10 Diciembre 2021, 22:45 PM
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) 

EdePC

#1
10 Diciembre 2021, 23:28 PM
Siempre ayúdate de las Herramientas de Desarrollador que ofrece el Navegador Web, por ejemplo en la parte de Console puede mostrarte los errores o advertencias que ha encontrado, luego en la parte de Elements puedes hacer ediciones de código temporal para hacer pruebas.

Puedes acceder a las herramientas de desarrollador del navegador dado Click derecho > Inspeccionar, o Ctrl + Shift + I, o F12, o desde el Menú.

Yo creo que estás poniendo mal la ruta al archivo, lo normal es usar rutas relativas, pero uno puede darse una idea si muestras el código que estás usando

@XSStringManolo

#2
11 Diciembre 2021, 02:20 AM
Cita de: Sam X en 10 Diciembre 2021, 22:45 PM
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:
Código (html) [Seleccionar]
<!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.html


Algo 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.

Sam X

#3
25 Diciembre 2021, 13:04 PM
Muchas gracias ;-)
Imprimir
Ir Arriba Páginas1
Acciones del Usuario