Insertar imágenes

Friday, March 18, 2022 4:57 PM

Para poder insertar imágenes dentro de un HTML:

• Se debe utilizar el elemento "img".
• La sentencia aparece como <img src="" alt"">
○ Donde SRC es el source o el origen de donde viene la imagen. (Clase 3 en mi carpeta HTML)
En este caso es imagenes/luna.png.
 Ese nombre se usa ya que es una ruta relativa, no se deben colocar todos las carpetas
de donde se encuentra el archivo.
○ Donde ALT tiene dos funciones:
 Cuando la foto no abre se coloca un texto alternativo para dar una breve descripción.
 Dar una descripción de la imagen.
• También se puede hacer que la imagen sea un enlace, que cuando le damos click se abra la página.
○ Para esto se usa el <a> pero en sus atributos en vez de colocar un texto se pone el elemento
img
○ También podemos usar un atributo Title="Lo que se quiera decir" para que cuando el ratón
se quede sobre lo que sea en la página aparezca un texto que explique.
Proceso para hacer de bocetado a maquetado: Además de hacer todos estos pasos hay que saber que
hay que usar una hoja de estilos y demás cosas que he aprendido antes. Todo esta parte se puede ver
en el archivo plantilla
• Bocetado: Dibujar mi página web.
• Maquetado: Realizar un prototipo (Mockup).
○ Para esto se puede usar la aplicación AdobeXD.
 Hacer el Body por medio de rectángulos.
□ Header (Parte de arriba de la página).
□ Contenido central (La parte de la mitad).
□ Footer (Parte de debajo de la página).
• Pasamos al HTML:
○ Lo primero que hacemos es centrar el BODY que es lo que queremos con el elemento
margin auto
○ Para hacer el header usamos el elemento <header> </header>.
 Tener presente que este elemento es diferente al h1.
 Para ponerle medidas se usan los elementos:
□ Height XXpx: Ponerle altura al contenedor.
 Para cambiar colores y letras:
□ Background-color: Cambiar el color de la caja.
 Para crear barras de navegación:
□ Se usa el elemento <nav></nav>
□ Para crear los cuadros dentro de la barra de navegación con <a></a>
 Para acomodar los elementos y distribuir contenido:
□ Se usa el elemento display:flex;
 Para manejar separación y alineados:
□ Justify-content:start: Esto sirve para que se vaya todo al lado izquierdo, es el
predeterminado.
□ Justify-content:end: Esto sirve para que se vaya todo al lado derecho.
□ Justify-content:center: Esto sirve para que se vaya todo al centro.
□ Justify-content:space-between: Esto sirve para que se acomode uno elemento a
un lado y el otro elemento que tenemos al otro lado. (Para crear espacios entre
todos los elementos que hayan en la casilla de header o cualquier otra)
 Forma de alinear en VERTICAL:
□ Para esto se usa el elemento de line-height XXpx (A esto se le debe colocar la

Clase 3 página 1
 □ Para esto se usa el elemento de line-height XXpx (A esto se le debe colocar la
misma altura que la cara que estamos modificando)
 Para poder desplazar el código usamos un identificador:
◊ El atributo que usamos para dar un identificador se usa ID.
 Luego de esto pasamos a la hoja de estilos y usamos el
ID(identificador) para poder modificarlo de la siguiente
manera
– #logo{}: De esta forma se usa en CSS para modificar
variables específicas
 Luego usamos el padding-top XXpx para poder
bajarlo lo que queramos.
 Si queremos cambiar un elemento pero no queremos que se parezca a
otros se usa el identificador:
◊ Se usa el atributo CLASS Este es igual que al ID pero el ID es solo
para un elemento único el CLASS es para más de uno.
 Cuando ya marcamos el elemento con el atributo class y le
damos su nombre pasamos al CSS y lo debemos colocar por
fuera de la cajita donde está, ejemplo: si está en el header lo
colocamos abajo del header a la misma altura pero por fuera.
 Para identificar el class en CSS se debe usar un
punto .Nombre_de_la_class_creada.
 Modificar unos elementos que están dentro de otro elemento
□ Para esto vamos a la hoja de estilos en CSS y por ejemplo ponemos el primer
elemento y con un espacio el elemento que está dentro de ese elemento,
ejemplo nav a{}:none;
 Con el elemento color le cambiamos el color a la letra.
 Para poder cambiar la separación dentro de un elemento usamos
◊ Margin XXpx; -- Separación hacia fuera de la caja pero no
incrementa el ancho de la caja.
◊ Padding XXpx; -- Separación hacia dentro de la caja e incrementa los
tamaños de las caja es decir que si medía 300px si hago un padding
de 50 mediría 400px.
 Por lo tanto, para que eso no afecte se coloca una cosa en la
hoja de estilos de la siguiente manera.
– *{box-sizing:border-box}
 Para cambiar el subrayado es con el elemento text-decoration
○ Para hacer el contenido central se haría con el elemento <main> </main>
 Para ponerle medidas se usan los elementos:
□ Min-height XXpx: Ponerle altura al contenedor, en este se usa este elemento y
no el otro porque este nos permite no dañar la página con el OVERFLOW o el
desbordamiento (Que si no cabe las palabras en los px que tenemos se pasa a
otras) En cambio con el min si se pasa de los px la cajita se expande.
 Para cambiar colores y letras:
□ Background-color: Cambiar el color de la caja.
○ Para hacer el footer se haría con el elemento <footer></footer>
 Para ponerle medidas se usan los elementos:
□ Height XXpx: Ponerle altura al contenedor.
 Para cambiar colores y letras:
□ Background-color: Cambiar el color de la caja.

Clase 3 página 2