HTML:
Estructura de una Página Web (código)
<!DOCTYPE html> Indica que la versión corresponde a HTML5.
<html lang= “es”> Es la etiqueta principal que engloba al resto de las etiquetas, el atributo
lang define el tipo de lenguaje.
<head> Es la cabeza del documento que contiene los metadatos de la página web.
<meta charset="utf-8"> Indica al navegador qué tipo de caracteres contiene la página,
con el atributo charset vamos a indicar el conjunto de caracteres que vamos a usar y con el
valor "utf-8" abarcamos a la mayoría de los sistemas de escritura.
<title> Indica el título de la página Web, que se visualiza en la barra de título del
navegador.
<body> Es el cuerpo del documento donde va a estar todo el contenido que vamos a
mostrar.
Etiquetas:
<b></b> texto en negrita
<strong></strong> Resaltar el texto fuertemente
<u></u> texto subrayado
<br> salto de línea
<p></p> Párrafo
<h1></h6> Títulos o etiquetas van del uno al 6
Estructura etiquetas: <etiqueta – atributo = valor > contenido </etiqueta>
Listas:
<ul></ul> Lista desordenada
<ol></ol> lista ordenada
<li></li> Elemento de la lista, puede ser hijo de ul o ol
<dl></dl> Lista de definición, agrega un sub termino a un elemento de la lista
<dt></dt> elemento de la lista de definición
<dd></dd> sub elemento de <dt></dt>
Enlaces:
Usamos <a></a> con el atributo href
Absoluto: es un enlace que incluye todas las partes de una URL.
URL absoluta: [Link]
Relativo: hace referencia a un recurso que se encuentra en una posición relativa a nuestra URL.
URL relativa: /ruta1/ruta2/[Link]
Enlaces internos:
Enlaces internos (anclas): Se utiliza para indicar un elemento dentro de la misma
página, dirigiéndose a un sector específico. Para utilizarlo necesitamos el enlace
propiamente dicho y el nombre (name) del ancla al cual debemos dirigirlo.
<a href="#abajo">Ir abajo</a>
Atributos de enlaces:
download: Especifica cuál es el objetivo que se descargará cuando un usuario haga clic en el
hipervínculo.
href: Especifica la URL de la página a la que se dirige el enlace.
target: Especifica dónde abrir el documento vinculado. Algunas de las opciones son:
blank: Abre el documento vinculado en una nueva ventana o pestaña
self: Abre el documento vinculado en el mismo marco en el que se hizo clic
(predeterminado).
title: Especifica información adicional sobre un elemento. La información generalmente se
muestra como un texto de información sobre herramientas cuando el mouse se mueve sobre
el elemento.
Enlaces locales
Permiten vincular nuestra página con otra página del mismo Sitio Web.
<a href="[Link]">contenido</a>
Enlaces a direcciones de correo y archivos
Permiten vincular nuestra página con el cliente de correo predeterminado en la computadora
Enlace a correo:
<a href="[Link]
Enlaces a archivo:
<a href="mi_fichero.zip">Descarga mi_fichero.zip</a>
Tipos de elementos:
Los elementos en bloque comienzan en una nueva línea y los elementos en línea pueden
comenzar en cualquier parte de una línea.
En línea:
<br>, <a>, <img>, <span>, <b>, <strong>, <mark>, <sub>, etc
En bloque: <div>, <p>, <h1>..<h6>, <ul>, <ol>, <li>, <table>, <form>, etc.
Imágenes
Para mostrar una imagen en una página tenemos dos formas de hacerlo. Una es usando el
elemento <img> y otras es mediante CSS
<img src="[Link]" />
Alt = es para colocar un texto cuando la imagen no esta disponible o personas que no pueden
ver.
Con height y width podemos definir el alto y el ancho de la imagen
<img src="images/[Link]" alt="La cabeza y el torso de un esqueleto de dinosaurio; tiene
una cabeza grande con dientes largos y afilados" width="400" height="341" />
Podemos utilizar una imagen como enlace combinando las etiquetas <a> e <img>
Favicon:
Un favicon es la pequeña imagen que se muestra en la pestaña del navegador o en la lista de
marcadores (favoritos). El tamaño en la barra de direcciones es de 16x16 píxeles. Para
agregarlo debemos tener la imagen .png que deseamos colocar como ícono en formato .ico,
que se puede convertir desde [Link] y luego agregar en el head de nuestro
documento HTML lo siguiente:
Audios
La etiqueta <audio> acepta como atributos:
● preload: es usado en el elemento audio para almacenar temporalmente
(buffering) archivos de gran tamaño.
● src: puede ser una URL del archivo de audio o la ruta al archivo local
● controls: muestra los controles estándar para audio en una página web
● autoplay: hace que el audio se reproduzca automáticamente
● loop: hace que el audio se repita automáticamente
● muted: especifica que la salida de audio debe estar silenciada
Iframe
Se utiliza para incrustar otro documento HTML que se cargará en forma independiente en la
página actual. Podemos agregar: contenidos de terceros, interfaces de usuario, videos de
YouTube, mapas de Google Maps y banners de publicidad desde otro sitio.
<iframe src="url" title="description"></iframe>
width y height: ancho y alto.
● frameborder: 0: sin borde y 1: con borde
● scrolling: habilita las barras de desplazamiento si el contenido no cabe en el iframe. Con
“yes” aparecen siempre, con “auto” aparecen sólo si es necesario y con “no” no aparecerán
nunca.
Formularios
Un formulario HTML es una sección de un documento que contiene texto, código, elementos
especiales llamados controles: casillas de verificación (checkboxes), botones de opción (radio
buttons), menúes, etc.; y rótulos (labels) en esos controles.
Se utiliza la etiqueta contenedora <form>, que incluye todos los campos necesarios para su
funcionamiento.
Formularios: atributos action y method
La etiqueta <form> admite diversos atributos. Entre ellos:
● action: define el tipo de acción que sellevará a cabo (enviar a un mail oprocesar su contenido
con un script).También podemos indicar la URL a la que se enviará la petición HTTP con toda la
información del formulario.
● method: indica si la petición HTTP
será GET o POST.
Formularios: <label>
<label>: se usa para especificar la etiqueta (o nombre) del campo del formulario. Es
información para el usuario. Admite el atributo for, que debe tener el mismo valor que el
atributo id del campo (input, select o textarea) al que hace referencia la etiqueta.
Formularios: <input>
Atributos del tag <input>:
type: este valor puede tener muchos valores: text, email, checkbox, color, date, file,
hidden, etc. en función del tipo de campo que queramos.
Id: este atributo es obligatorio si en el elemento label tiene un atributo for, en tal caso
deberá contener un identificador único en la página.
name: representa el nombre asignado al campo cuando se envía la petición HTTP.
size: define el tamaño de la caja de texto en número de caracteres visibles.
maxlength: indica el tamaño máximo del texto, en número de caracteres, que puede
ser escrito en el campo.
value: representa el valor que se asignará al campo cuando se envíe la petición HTTP.
Permite asignar un valor por defecto al campo.
Formularios: <input type=”password”>
Ocultar texto para contraseñas: Utilizamos el atributo type con el valor “password” para
generar un campo input que oculte el texto que se está ingresando. Se utiliza, por ejemplo,
para el ingreso de contraseñas. Reemplaza cada caracter ingresado por un asterisco.
Clave: <input type="password" name="clave " size="25">
Formularios: <input type=”checkbox”
Los checkboxes permiten seleccionar algunas opciones de una lista.
Se crean utilizando en un input el atributo type con el valor “checkbox” Para que funcionen
como una unidad, cada uno de estos input deben tener su atributo name con el mismo valor.
El atributo value contiene el valor que contendrá ese campo cuando la opción correspondiente
esté seleccionada.
Formularios: <input type=”radio”
Los radiobutton o simplemente radio, permiten seleccionar una opción de una lista.
Se crean utilizando en un input el atributo type con el valor “radio”.
Para que funcionen como una unidad, cada uno de estos input deben tener su atributo name
con el mismo valor.
El atributo value contiene el valor que contendrá ese campo cuando la opción correspondiente
esté seleccionada
Formularios: botones
Los botones que vemos en los formularios también son un input. Se crean configurando el
atributo type con el valor “submit” o “reset”.
Un input del tipo “submit” permite, al ser pulsado, que el formulario envíe los datos de sus
campos a la dirección determinada por el atributo target de la etiqueta form.
Un input del tipo “reset” borra el contenido de todos los campos del formulario al ser pulsado.
Formularios: <fieldset>
<fieldset>: define una sección en un formulario y permite agrupar sus campos.
El elemento <legend> puede contener a otros elementos o se puede utilizar para definir un
título.
id: igual que el elemento input.
name: igual que el campo input.
value: igual que el atributo value del campo input
Formularios: <textarea>
Los campos de texto amplios, que permiten el ingreso de varias líneas de texto, también son
un input.
Utilizado para comentarios multilínea o consultas, tienen el atributo type con el valor
“textarea”. Nos permiten definir rows (filas), columns (columnas). En lugar de utilizar value
escribimos entre las etiquetas textarea.
Consulta: <textarea name="comentario" rows="10" cols="40">Escribe tu
consulta...</textarea>
Formularios: <select> y <option>
Las listas desplegables crean una lista de opciones, cada una contenida dentro de un elemento
<option>.
Se crean como un input con su atributo type fijado en “select”.
size: indica el número de valores mostrados a la vez en la lista.
multiple: permite la selección simultánea de varios elementos de la lista.
id, value y name se comportan igual que el resto de los tipos de input vistos.
Formularios: atributos opcionales
En muchos de los campos definidos en un formulario podemos añadir otros atributos que
modifican su comportamiento:
required: el formulario no se podrá enviar hasta que ese campo tenga contenido.
placeholder: si queremos que aparezca un texto de ayuda para rellenar el campo.
value: para introducir un valor por defecto en el campo.
readonly: si queremos que sea de sólo lectura.
Etiquetas semánticas
<header> Se coloca en el body y es la cabecera visual de la página o de una sección
(logotipo, título, etc.). No confundir con <head>, que es el encabezado del documento
HTML.
<nav> Apartado de navegación (enlaces de secciones, categorías, etc...). También
permite dividir en categorías una sección.
<main> Contenido principal del body
<footer> Pie de página (del documento completo) o de una sección.
<section> Define una sección en un documento
<aside> Agrupación de contenido no relacionado con el tema principal del documento.
Suele usarse para agregar publicidad.
<article> Artículo. Parte principal de un escrito (posts en blogs, artículos en diarios,
mensajes en foros, comentarios, etc.)
<address> Agrupación con la información de contacto del autor del artículo o
documento.