Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Beginner Web en 21 Enero 2019, 04:47 am



Título: Diseño web, insercion de tags html y botones rss
Publicado por: Beginner Web en 21 Enero 2019, 04:47 am
Hola quisiera saber como se coloca texto e imagenes  con codigo HTML como en esta pagina https://www.mabisy.com/blog-ayuda/como-insertar-un-codigo-html-o-un-tag (https://www.mabisy.com/blog-ayuda/como-insertar-un-codigo-html-o-un-tag) , tiene texto imagen texto y asi pero lo que yo quiero es colocar tags de imagenes svg , texto tag, texto , etc.
No se bien el orden o como colocarlas en HTML, solo se que el tag se coloca asi:
Código
  1. <img src='link de la iamgen' title='Un titulo cualquiera' />
Y otra cosa más ¿Como es que se  hace para que los botones de las redes sociales de la derecha de la misma pagina brillen al apuntar el raton sobre ellas? Los mios no brillan u.u
:huh:


Título: Re: Diseño web, insercion de tags html y botones rss
Publicado por: Embusterillo de bolsillo en 23 Enero 2019, 00:48 am
Hola @Beginner Web

No comprendí muy bien tu primera pregunta, ¿hablas de imágenes con captions, o simplemente de colocar imagen / texto / imagen / texto?

Si es así, realmente basta con algo así:
Código
  1. <p>primer parrafo</p>
  2. <p>segundo parrafo</p>
  3. <img src="link de la imagen en SVG si quieres" title="titulo de la imagen" />
  4. <p> tercer parrafo</p>
  5.  

Y ya, queda una estructura vertical simple... No sé si esa era tu pregunta.
Para dar orden determinado a etiquetas HTML, si buscas algo más complejo que una simple visualización vertical, entonces necesitarás aplicar CSS. Hay maneras básicas como float, lo cual hará que la imagen se haga hacia un lado y el texto al lado contrario. O bien, mi recomendación sería flexbox

Para tu segunda pregunta, es sencillo; buscas el selector :hover
https://www.w3schools.com/cssref/sel_hover.asp

Sirve para cualquier elemento HTML, no solo botones y vínculos; ¡y puedes aplicar cualquier parámetro CSS que quieras! (no solo cambiar el color de fondo, por ejemplo)

Ejemplo rápido con enlace:

Código
  1.  
  2. a {color:red;}
  3. a:hover {color:yellow;}
  4.  
  5. </head>
  6.  
  7. <a href="#">Un enlace</a>
  8.  
  9. </body>
  10. </html>
  11.  

La definición de etiquetas HTML en CSS tiene efecto en TODOS los elementos. Por lo que si deseas solamente tocar un elemento en particular, te recomiendo usar clases:

Código
  1.  
  2. a.lalolanda {color:red;}
  3. a.lalolanda:hover {color:yellow;}
  4.  
  5. </head>
  6.  
  7. <a class="lalolanda" href="#">Un enlace</a>
  8.  
  9. </body>
  10. </html>
  11.  

A veces el selector de la etiqueta en particular puede sobrar; por ejemplo, ahí arriba solo ".lalolanda" en la definición CSS habría funcionado. Pero depende de cuán específica quieras ser con el selector. Puede haber, por ejemplo "p.lalolanda" que solo afectaría a los "<p>" que se llamen "lalolanda" pero no a los "<a>" ¿me hago entender?...

Saludos.