HTML
CSS
Rutas
Los enlaces de internet están formados por una serie de rutas
(también conocidos con el término inglés ‘path’), donde se le
indica la dirección a la que tiene que ir el navegador cuando
pulsamos sobre ese link.
Podemos encontrar dos tipos de rutas distintas:
Ruta Absoluta Ruta Relativa
https://google.com ../img/foto.jpg
img/foto.jpg
Enlaces
La etiqueta <a> se usa para definir un destino o un origen de un enlace.
Externos
<a href="http://google.com" target="_blank">Ir a Google</a>
Locales
<a href="contacto.html"> Escribinos</a>
Internos (anclas)
<a href="#servicios"> Nuestros Servicios </a>
Correo - Teléfono
<a href="mailto:[email protected]"> Envianos un mail! </a>
Whatsapp
<a href=" https://wa.me/5492617135478?” target="_blank"> Whatsapp </a>
Teléfono
<a href=“tel:+5492617135478"> Llamanos </a>
Más ejemplos en W3SCHOOL
Imágenes
En el caso de las imágenes solo se invocan, es decir, solo se
llaman. Veamos la estructura de la etiqueta IMG.
<img
src="" Ruta / Origen del archivo de imagen
alt="" Descripción de la imagen / Ayuda al SEO
width="" Ancho de imagen (No es obligatorio)
height="" Alto de imagen (No es obligatorio)
/>
<img src="img/pizza.jpg" alt=“pizza-8-porciones" width="360">
Videos
Si usamos la etiqueta <video> podemos incluir etiquetas <source>
para formatos alternativos y proporcionar mayor compatibilidad.
<video width=“640" height=“480“ >
<source src=“video.mp4“ type=“video/mp4” />
<source src=“video.webm“ type=“video/webm” />
<img src=“imagen.png“ alt=“Video no soportado” />
<p> Su navegador no soporta contenido multimedia </p>
</video>
Mas info: Hacé clic acá
Videos
Otra forma de usar la etiqueta <video> utilizar los siguientes
atributos.
<video width=“640" height=“480“ type=“video/mp4” controls=“” >
<video width=“640" height=“480“ type=“video/mp4” autoplay=“” >
<video width=“640" height=“480“ type=“video/mp4” loop=“” >
Mas info: Hacé clic acá
Iframe
Si usamos la etiqueta <iframe> podemos incrustar o embeber parte
de otra página web en nuestra propia página. Por ejemplo google
maps.
<iframe src=https://www.google.com/maps/embed?pb=!1m.
(…)..
width="600"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy">
</iframe>
Cascading Hojas de estilo en cascada.
Compuestas de REGLAS, SELECTORES
Style y DECLARACIONES.
Sheets
Sirven para “estilizar” nuestro contenido HTML. Podemos
cambiar colores, fondos, tipografías, anchos, altos, etc. Así
como también generar animaciones y transiciones.
Tenemos 3 métodos para vincular HTML con CSS
Interno
Externo
<style>
<link>
</style>
En línea
<p style=”propiedad: valor;”>...</p>
Vinculación Externa de CSS
<head>
<link href=”css/styles.css” rel=”stylesheet”>
</head>
Ruta o path donde se Relación entre documentos
encuentra mi archivo HTML y CSS
(siempre va igual)
Selectores de CSS
La declaración indica "que hay que hacer" y el selector
indica "a quién hay que hacérselo".
Por lo tanto, los selectores son imprescindibles para
aplicar de forma correcta los estilos CSS en una
página. Tenemos:
Etiquetas
Selectores de etiqueta que afectan a todas las
etiquetas que se describen.
etiqueta
p{
...
}
Clase
Selectores de clase afectan a todas las etiquetas que
tengan como atributo la clase descrita.
DATO IMPORTANTE: las clases empiezan con .
clase
.negrita {
...
}
ID
Selectores de clase afectan a todas las etiquetas que
tengan como atributo el ID descrito.
DATO IMPORTANTE: las clases empiezan con #
ID
#unico {
...
}
Combinados
Selectores combinados afectan a todos los que
cumplan con la condición.
Ej combinados
h2.negrita {
...
}
Descendientes
Selectores descendientes son aún más específicos.
Veamos el ejemplo
Descendientes
ul li,negrita {
...
}
Los selectores de CSS siempre priorizan
los selectores más específicos para
aplicar los estilos.
