HTML
Prof. Ana Chicala
¿QUÉ ES HTML?
HTML significa lenguaje de marcado de hipertexto
HTML describe la estructura de una página Web
HTML consta de una serie de elementos
Los elementos HTML le dicen al navegador cómo mostrar el
contenido
Los elementos HTML etiquetan piezas de contenido como
"este es un encabezado", "este es un párrafo", "este es un
enlace", etc.
¡Pasemos a la acción!
1
La <!DOCTYPE html>declaración define que este
documento es un documento HTML5
El <html>es el elemento raíz de una página HTML. Lorem ipsum dolor sit
amet, consectetur
El <head> contiene metainformación sobre la adipiscing elit. Sed
non orci hendrerit
augue interdum
página HTML. lacinia at egestas
dolor. Vivamus
El <title> especifica un título para la página HTML
elementum pulvinar
tempus.
(que se muestra en la barra de título del
navegador o en la pestaña de la página)
El <body> define el cuerpo del documento y es
un contenedor de todos los contenidos visibles,
como encabezados, párrafos, imágenes,
hipervínculos, tablas, listas, etc.
El <h1> elemento define un encabezado grande
El <p> elemento define un párrafo.
¿QUÉ ES UN ELEMENTO HTML?
Un elemento HTML se define mediante una etiqueta de inicio, algo de
contenido y una etiqueta de finalización
< nombre de la etiqueta > El contenido va aquí... < /nombre de la etiqueta >
Nota: algunos elementos HTML no tienen contenido. Estos elementos se
denominan elementos vacíos. ¡Los elementos vacíos no tienen una etiqueta final!
Los elementos HTML se pueden anidar (esto significa que los elementos pueden
contener otros elementos).
ATRIBUTOS DE UN ELEMENTO
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 inicio
Los atributos generalmente vienen en pares de nombre/valor como:
nombre="valor"
ATRIBUTOS DE UN ELEMENTO
El href de <a>especifica la URL de la página a la que va el enlace
El 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 alt de <img>proporciona un texto alternativo para una imagen.
El style se usa para agregar estilos a un elemento, como color, fuente, tamaño y más
El lang de la <html>etiqueta declara el idioma de la página web.
El title define alguna información adicional sobre un elemento.
ATRIBUTOS DE UN ELEMENTO
Cada elemento HTML tiene un valor de visualización predeterminado, según el tipo de
elemento que sea.
Hay dos valores de visualización: bloque y en línea.
Elementos a nivel de bloque:
Siempre comienza en una nueva línea y los navegadores automáticamente agregan
algo de espacio (un margen) antes y después del elemento.
Un elemento a nivel de bloque siempre ocupa todo el ancho disponible (se extiende
hacia la izquierda y hacia la derecha tanto como puede).
ATRIBUTOS DE UN ELEMENTO
Elementos en línea
Un elemento en línea no comienza en una nueva línea.
Un elemento en línea solo ocupa el ancho necesario.
EL ATRIBUTO STYLE
Se utiliza style para diseñar elementos HTML
Property es una propiedad CSS. Value es un valor CSS.
ENLACES EN HTML
El atributo más importante del <a> elemento es el hrefatributo, que indica el destino
del enlace.
target especifica dónde abrir el documento vinculado.
_self- Por defecto. Abre el documento en la misma ventana/pestaña en la que se hizo clic.
_blank- Abre el documento en una nueva ventana o pestaña.
_parent- Abre el documento en el marco principal.
_top- Abre el documento en el cuerpo completo de la ventana
URL Absolutas vs URL relativas
IMAGENES EN HTML
Se utiliza para incrustar una imagen en una página web.
El elemento <img> está vacía, contiene solo atributos y no tiene una etiqueta de cierre.
La <img>etiqueta tiene dos atributos obligatorios:
src: especifica la ruta a la imagen.
alt: especifica un texto alternativo para la imagen.
Utilice HTML width y height o CSS width y height propiedades para definir el tamaño de la imagen.
TABLAS EN HTML
TABLAS EN HTML
LISTAS EN HTML
Una lista desordenada comienza con la <ul>etiqueta. Cada elemento de la lista comienza con la
<li>etiqueta.
Una lista ordenada comienza con la <ol>etiqueta. Cada elemento de la lista comienza con la
<li>etiqueta.
CLASS EN HTML
El atributo HTML class especifica uno o más nombres de clase para un elemento.
Los elementos HTML pueden pertenecer a más de una clase.
CSS y JavaScript utilizan clases para seleccionar y acceder a elementos específicos.
El class atributo se puede utilizar en cualquier elemento HTML.
El nombre de la clase distingue entre mayúsculas y minúsculas.
Diferentes elementos HTML pueden apuntar al mismo nombre de clase
ID EN HTML
El id atributo se utiliza para especificar una identificación única para un elemento HTML.
El valor del id atributo debe ser único dentro del documento HTML.
CSS y JavaScript utilizan el atributo para diseñar/seleccionar un elemento específico
El id atributo también se utiliza para crear marcadores HTML.
Los marcadores HTML se utilizan para permitir a los lectores saltar a partes específicas de
una página web.
JavaScript puede acceder a un elemento con una identificación específica con el metodo
getElementById()
.
FORMULARIOS EN HTML
Permiten a un usuario enviar información a un servidor web.
La etiqueta <form> es una etiqueta “contenedora” de diferentes tipos de elementos de entrada
como: campos de texto, botones, casillas de verificacion, etc
El atributo action define la acción que se realizará cuando se envíe el formulario.
El atributo target especifica dónde mostrar la respuesta que se recibe después de enviar el
formulario.
El atributo method especifica el método HTTP que se utilizará al enviar los datos del formulario.
El atributo autocomplete especifica si un formulario debe tener activado o desactivado el
autocompletado
.
FORMULARIOS EN HTML
El elemento HTML <input>es el elemento de formulario más utilizado.
.
FORMULARIOS EN HTML
La etiqueta <label> define una etiqueta para muchos elementos del formulario.
Ayuda a los usuarios que tienen dificultades para hacer clic en regiones muy pequeñas, porque
cuando el usuario hace clic en el texto dentro del <label>elemento, alterna el botón de
opción/casilla de verificación.
El atributo for de la etiqueta <label> debe ser igual al atributo id del elemento <input> para
unirlos.
.
FORMULARIOS EN HTML
El elemento <form> puede contener uno o más de los siguientes elementos:
.
FORMULARIOS EN HTML
.
BUENAS PRACTICAS
Declarar siempre el tipo de documento
Utilice nombres de elementos en minúsculas
Cerrar todos los elementos HTML
Utilice nombres de atributos en minúsculas
Citar siempre valores de atributos
Especifique siempre alt, ancho y alto para las imágenes
Espacios y signos iguales
Líneas en blanco y sangría
Nunca te saltes el elemento <title>
MUCHAS
GRACIAS
[Link]