HTML
¿Qué es y para qué sirve?
HTML es el lenguaje de marcado estándar para páginas web.
Con HTML puedes crear tu propio sitio web.
HTML = Hyper Text Markup Language : significa Lenguaje de Marcado
de Hipertexto.
HTML es el lenguaje de marcado estándar para crear páginas web.
HTML describe la estructura de una página web.
HTML consta de una serie de elementos.
Los elementos HTML le indican al navegador cómo mostrar el
contenido.
Los elementos HTML etiquetan las partes del contenido, como "este
es un encabezado", "este es un párrafo", "este es un enlace", etc.
¿Cómo es su sintaxis?
Todo documento HTML tiene que empezar con una declaración de
document
del tipo : <!DOCTYPE html>.
• Le debe seguir a todo document de contenido HTML la etiqueta
<html> que
cerrará el document con </html>.
• Hay una parte no visible del document que guarda datos del mismo
que se
representa con la etiqueta <head> y cierra con </head>
• Toda la parte visible del documento comenzará con la etiqueta
<body> y
terminar con el cierre </body>.
Ejemplo:<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> Encabezado </h1>
<p> Párrafo <p>
</body>
</html>
Elementos
El elemento HTML es todo, desde la etiqueta de inicio hasta la
etiqueta de cierre
El elemento <html> es el elemento raíz y define todo el documento
HTML.
Tiene una etiqueta de inicio <html> y una etiqueta de cierre
</html>.
Dentro del elemento <html> se encuentra el elemento <body>
Las etiquetas HTML no distinguen entre mayúsculas y minúsculas:
<P> significa lo mismo que <p>.
• Estos, generalmente, se definen con una etiqueta de entrada (<>) y
otra de
salida(</>).
<etiqueta>Aquí va el contenido</etiqueta>
• Este contenido será el mismo desde el inicio de la etiqueta hasta su
cierre.
<p>Todo este contenido será un párrafo.</p>
• Hay elementos que pueden anidar, es decir puede haber elementos
que
contengan otros elementos.
<!DOCTYPE html>
<html> define todo el documento. Etiqueta de apertura. Anida
el <body>
<head> Define el contenido de metadata (datos sobre los
datos) y se ubica entre el <html> y el <body>.
</head>
<body> Define el cuerpo del documento. Anida a la etiqueta
<h1> Encabezado </h1>
<p> Párrafo <p>
Definen el contenido de un encabezado
y un párrafo.
</body>
</html> Define todo el documento. Etiqueta de cierre.
Encabezados
• Los encabezados en HTML están definidos con las etiquetas desde
<h1> hasta <h6>.
• <h1> define el encabezado más importante
• <h6> define el encabezado menos importante
<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
Parrafos
• Estos se definen con la etiqueta <p>
<p>Esto es un párrafo</p>
<p>Este es otro párrafo</p>
Links
• Definidos con la etiqueta <a>
• href guarda la dirección a la que dirigirá el link
<a href=“[Link] es un enlace</a>
Botones
• Estos se definen con la etiqueta <button>
<button>Presioname</button>
Imágenes
• Las imágenes se definen con la etiqueta <img>.
• src (source file – Fuente de archive), alt (alternative text – texto
alternativo), width (ancho) y height (alto)
proveen los atributos de la etiqueta.
• No tiene etiqueta de cierre.
<imgsrc=“[Link]” alt=“mi imagen” width=“200” height=“200”>
Listas
• Las listas se definen con la etiqueta <ul> (unordered list- viñetas) o
con <ol>
(ordered list - números), seguidas de la etiqueta <li> (items de la
lista).
<ul>
<li>Leche</li>
<li>Aceite</li>
<li>Café</li>
</ul>
<ul>
<li>Leche</li>
<li>Aceite</li>
<li>Café</li>
</ul>
Ejemplo:
<!DOCTYPE html>
<html>
<body>
<h1>resumen
<p> armando un parrafo </p>
<button> salir </button>
<ol>
<li>unidad 1</li>
<li>unidad 3</li>
<li>unidad 2</li>
</ol>
</html>
Atributos de los elementos
Los atributos HTML proporcionan información adicional sobre los
elementos HTML.
Todos los elementos HTML pueden tener atributos.
Los atributos proporcionan información adicional sobre los elementos.
Los atributos siempre se especifican en la etiqueta de apertura.
Los atributos suelen presentarse en pares nombre/valor, como por
ejemplo: nombre="valor".
a y href
La etiqueta <a> define un hipervínculo. El atributo href especifica la
URL de la página a la que conduce el enlace:
<a href="[Link] W3Schools</a>
Img y src
La etiqueta <img> se utiliza para insertar una imagen en una página
HTML.
El atributo src especifica la ruta a la imagen que se mostrará
1. URL absoluta: Enlaza a una imagen externa alojada en otro sitio
web. Ejemplo: src="[Link]
Nota: Las imágenes externas pueden estar protegidas por derechos
de autor. Si no obtienes permiso para usarlas, podrías estar
infringiendo las leyes de derechos de autor. Además, no puedes
controlar las imágenes externas; pueden ser eliminadas o
modificadas repentinamente.
2. URL relativa: Enlaza a una imagen alojada dentro del sitio web. En
este caso, la URL no incluye el nombre del dominio. Si la URL
comienza sin una barra, será relativa a la página actual. Ejemplo:
src="img_girl.jpg". Si la URL comienza con una barra, será relativa al
dominio. Ejemplo: src="/images/img_girl.jpg". Consejo: Casi siempre
es mejor usar URL relativas. No se romperán si cambias de dominio.
alt
El atributo `alt` obligatorio para la etiqueta `<img>` especifica un
texto alternativo para una imagen, en caso de que esta no pueda
mostrarse por algún motivo. Esto puede deberse a una conexión
lenta, a un error en el atributo `src` o a que el usuario utilice un lector
de pantalla.
style
El atributo style se utiliza para añadir estilos a un elemento, como
color, fuente, tamaño, etc.
lang
Siempre debes incluir el atributo `lang` dentro de la etiqueta
`<html>` para declarar el idioma de la página web. Esto ayuda a los
motores de búsqueda y a los navegadores.
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
title
El atributo `title` define información adicional sobre un elemento.
El valor del atributo `title` se mostrará como una información
emergente al pasar el ratón por encima del elemento
comillas
El estándar HTML no requiere comillas alrededor de los valores de los
atributos.
Sin embargo, el W3C recomienda el uso de comillas en HTML y las
exige para tipos de documentos más estrictos como XHTML.
Resumen de atributos
Todos los elementos HTML pueden tener atributos.
El atributo `href` de `<a>` especifica la URL de la página a la que
apunta el enlace.
El atributo `src` de `<img>` especifica la ruta a la imagen que se
mostrará.
Los atributos `width` y `height` de `<img>` proporcionan
información sobre el tamaño de las imágenes.
El atributo `alt` de `<img>` proporciona un texto alternativo para
una imagen.
El atributo `style` se utiliza para añadir estilos a un elemento, como
color, fuente, tamaño, etc.
El atributo `lang` de la etiqueta `<html>` declara el idioma de la
página web.
El atributo `title` define información adicional sobre un elemento.
CSS
¿Qué es y para qué sirve?
CSS = Cascading Style Sheets
CSS es el lenguaje que usamos para dar estilo a una página web.
CSS significa Hojas de Estilo en Cascada.
CSS describe cómo se deben mostrar los elementos HTML en pantalla,
papel u otros medios.
CSS ahorra mucho trabajo. Puede controlar el diseño de varias
páginas web a la vez.
Las hojas de estilo externas se almacenan en archivos CSS.
¿Cómo es su sintaxis?
Una regla CSS consta de un selector y un bloque de declaración:
Selector CSS
El selector apunta al elemento HTML que se desea estilizar.
El bloque de declaración contiene una o más declaraciones separadas
por punto y coma.
Cada declaración incluye el nombre de una propiedad CSS y su valor,
separados por dos puntos.
Varias declaraciones CSS se separan con punto y coma, y los bloques
de declaración se encierran entre llaves.
Selectores (tipos y diferencias)
Los selectores CSS se utilizan para "encontrar" (o seleccionar) los
elementos HTML que deseas estilizar.
Podemos dividir los selectores CSS en cinco categorías:
Selectores simples (seleccionan elementos según su nombre, ID o
clase)
Selectores combinadores (seleccionan elementos según una relación
específica entre ellos)
Selectores de pseudoclase (seleccionan elementos según un estado
determinado)
Selectores de pseudoelementos (seleccionan y estilizan una parte de
un elemento)
Selectores de atributo (seleccionan elementos según un atributo o su
valor)
Modelo de caja(Border- Margin- Padding)
Border
Las propiedades CSS border permiten especificar el estilo, el ancho y
el color del borde de un elemento.
La propiedad `border-style` especifica el tipo de borde que se
mostrará.
Se permiten los siguientes valores:
`dotted`: Define un borde punteado.
`dashed`: Define un borde discontinuo.
`solid`: Define un borde sólido.
`double`: Define un borde doble.
`groove`: Define un borde ranurado 3D. El efecto depende del valor
de `border-color`.
`ridge`: Define un borde estriado 3D. El efecto depende del valor de
`border-color`.
`inset`: Define un borde insertado 3D. El efecto depende del valor de
`border-color`.
`outset`: Define un borde saliente 3D. El efecto depende del valor de
`border-color`.
`none`: Define un borde sin borde.
`hidden`: Define un borde oculto.
Margins
Las propiedades de margen de CSS se utilizan para crear espacio
alrededor de los elementos, fuera de los bordes definidos.
Los márgenes definen la distancia entre el borde de un elemento y los
elementos circundantes.
Con CSS, tienes control total sobre los márgenes. CSS cuenta con
propiedades para establecer el margen de cada lado de un elemento
(superior, derecho, inferior e izquierdo), y una propiedad abreviada
para definir todas las propiedades de margen en una sola declaración.
CSS incluye propiedades para especificar el margen de cada lado de
un elemento:
margin-top: establece el margen superior de un elemento.
margin-right: establece el margen derecho de un elemento.
margin-bottom: establece el margen inferior de un elemento.
margin-left: establece el margen izquierdo de un elemento.
Todas las propiedades de margen pueden tener los siguientes valores:
auto: el navegador calcula el margen.
length: especifica un margen en px, pt, cm, etc.
%: especifica un margen en porcentaje del ancho del elemento
contenedor.
inherit: especifica que el margen se herede del elemento padre.
Consejo: También se permiten valores negativos.
Padding
Las propiedades de relleno CSS se utilizan para generar espacio
alrededor del contenido de un elemento, dentro de los bordes
definidos.
Con CSS, tienes control total sobre el relleno. Existen propiedades
para definir el relleno de cada lado de un elemento (superior,
derecho, inferior e izquierdo), y una propiedad abreviada para definir
todas las propiedades de relleno en una sola declaración.
CSS incluye propiedades para especificar el relleno de cada lado de
un elemento:
padding-top: establece el relleno superior de un elemento.
padding-right: establece el relleno derecho de un elemento.
padding-bottom: establece el relleno inferior de un elemento.
padding-left: establece el relleno izquierdo de un elemento.
Todas las propiedades de relleno pueden tener los siguientes valores:
length: especifica el relleno en px, pt, cm, etc.
%: especifica el relleno en porcentaje del ancho del elemento
contenedor.
inherit: indica que el relleno debe heredarse del elemento padre.
Nota: No se permiten valores negativos.
Display (diferencias entre Block- Inline y Flexbox)
Display
La propiedad `display` es una propiedad CSS importante para
controlar el diseño. Especifica si un elemento HTML se trata como un
elemento de bloque o en línea. Cada elemento HTML tiene un valor
de `display` predeterminado, que depende de su tipo. El valor
predeterminado para la mayoría de los elementos es `block` o
`inline`. La propiedad `display` se utiliza para cambiar el
comportamiento de visualización predeterminado de los elementos
HTML.
Valor Descripcion
inline Muestra un elemento como un elemento en línea.
block Muestra un elemento como un elemento de bloque.
contents Oculta el contenedor, convirtiendo a sus elementos secundarios en hijos del
elemento del siguiente nivel en el DOM.
flex Muestra un elemento como un contenedor flexible de nivel de bloque.
grid Muestra un elemento como un contenedor de cuadrícula de nivel de bloque.
inline- Muestra un elemento como un contenedor de bloque en línea. El elemento en sí se
block formatea como un elemento en línea, pero se le pueden aplicar valores de altura,
anchura, relleno y margen.
none El elemento queda completamente oculto en el flujo del documento (no ocupa
espacio).