HTML

Vocabulario:

Ip: Es el identificador numérico de una página web, es único y representa la dirección donde está
el ordenador.

Dominio web / URL: (Uniform Resources Locator) Es el nombre asociado a la ip que utilizaremos
para solicitar recursos, en nuestro caso un sitio web.

DNS: (Domain Name System) Es un servidor cuya principal función es traducir el nombre de
dominio a su identificador único.

Sitio Web: Es un conjunto de uno o varios recursos web alojados en el mismo dominio.

Servidor Web: Es un ordenador cuyo objetivo es sevir recursos web.

Hosting: Es el almacenamiento del servidor web. El disco duro donde el servidor guarda los
recursos.

Petición: Es la acción de pedir recursos a un servidor.

<Etiquitas> </Etiquetas>
! = Estructura de HTML5

<!-- --> Comentario

Títulos y parrafos:
 H1
 H2
 H3 Títulos
 H4
 H5
 H6

<p> parrafo </p> Contenido

Etiquetas de sección de contenido:

<header></header> Encabezado de la página

<main></main> contenido principal de la página

<footer></footer> Pie de página

Section vs. article (contenedores)

<section></section> Contenedor genérico que agrupa contenido relacionado.

<article></article> Contenedor que presenta contenido independiente.

<aside></aside> Representar contenido relacionado pero que no forma parte del contenido
principal

Elementos de bloque y de líneas

Elementos de bloques Ocupan todo el ancho disponible, aunque su contenido no lo ocupe.

Elementos de Líneas Ocupan solo su contenido. <span></span>

<em></em> Énfasis 2

<strong></strong> Más énfasis 1

<small></small> Menos énfasis que el texto normal -1 (Vale menos que los textos que no tienen
etiquetas)

<br> Forza un salto de línea

<wbr> Salto de línea si hiciera falta (También da salto si hay -)

<Time></time> Presentar un contenido de hora/fecha (Primero año-mes-día) (datetime)

<i> (Italic)

<b> (Bold) Stiles

<u> (Underline)

<sup> Letras en la parte de arriba (Potencia).

<sub> Letras en la parte de abajo (Como en química).

Otras etiquetas de bloque

<address></address> Se utiliza para aportar información de contacto para el article más cercano o
para todo el body.

<blockquote></blockquote> Se utiliza para marcar las citas a otros autores o documentos. Se

puede incluir el atributo cite para poner un enlace al document original o Fuente. (bloque para
cita)

<pre></pre> Se utiliza para tener código preformateado que necesita ser representado igual que
se escribió.
<div></div> Se usa como division del documento, semánticamente no significanada, es un
contenedor genérico que se usa generalmente para dar estilos a través de CSS o para usar algo
denominado “delegación de eventos” en JavaScript.

<hr></hr> Horizontal rune, se utiliza para decirle al navegador que se va a cambiar de tema.

Otras etiquetas de líneas

<span></span> Es un contenedor de línea, equivalente a div, se suele usar para encerrar palabras
o pequeños textos y darles estilo a través de CSS o localizarlos desde JavaScript. Semanticamente
so significa nada.

<q></q> Es el equivalente a blockquote, significa quote, pore so el bloque se llama block – quote.
Sirve para poner citas pero en linea.

<code></code> Sirve para encerrar código que queremos representar visualmente, suele ir unido
con la etiqueta <pre></pre>.

Atributos
Los atributos son los valores adicionales que configuran los elementos y/o ajustan su
comportamiento.

Hay dos tipos de atributos:

Comunes: Su sintaxis es -> atributo = ”valor”

Booleanos: Su sintaxis es -> atributo

Algunos atributos globales están disponibles para la mayoría de etiquetas en HTML.

class -> Éste atributo se usa para dar estilos a través de CSS

Id -> Es un identificador único que se utiliza para seleccionar el element desde Js y para hacer
navegación a através de anclas. (No se pueden repetir)

title -> Es un atributo que ayuda a la accesibilidad mostrando una descripción del elemento al que
pertenece. (Mensaje a la hora de colocar el cursor sobre un elemento) tooltip

data-* -> Es un atributo que permite guardar algún valor en la etiqueta HTML.
Enlaces
Enlaces (Links) Su objetivo es conectar una página web con otra página web, con un recurso tanto
interno como externo, o con otro sitio web.

Tienen el atributo obligatorio href, donde le especifica la ruta del recurso o sitio.

Tanbién tiene el atributo target, que configura cómo queremos visualizar el recurso o sitio
solicitado.

<a href=””><a> (Elementos de lineas)

Rutas relativas y rutas absolutas

Rutas absolutas Tienen un protocolo, http o https y son unicas en la red. Se suelen utilizar para
rutas externas. <a href=”https…….”>

Rutas relativas Pueden ser relativas al punto donde nos encontramos o relativas a la raiz del
proyecto.

Buscar por rutas <a href=”(Ruta1/Ruta2/Ruta3…..)”>

No usan protocolo

Recurso en el mismo nivel, solo se pone el nombre del archivo. <a href=”(archivo)”>

Buscar un recurso desde de raiz <a href=”/(el archivo que este detro de la carpeta principal)”>

Index.html siempre va a ser la pagina principal por defecto

Todos los <a href=” (pueden llevar rutas) ></a>

Atributos de los enlaces

target -> define donde se abrirá el recurso solicitado. Por general cuando se usan rutas absolutas
se da el valor de

1. “_blank” (se abre en una nueva pestaña)

2. “_self” (valor por defecto, es como no hacer nada)

Cuando se trata de rutas relativas a la raiz el atributo target no se usa practicamente nunca.

Download -> Atributo booleano, sirve para descargar el recurso solicitado (el recurso siempre
debe estar en el mismo servidor)
Navegación a través de anclas
<nav></nav> Para navegar en partes especificas de la pagina.

<nav>

<li> <a href=”#(nombre del identificador)”>nombre que parecera en el navegador </a></li>

</nav>

(Y el id va con el contenedor de información)

<section id=”(nombre del identificador)”>

(Info del contenedor)

</section>

Las listas
Sirven para listar contenido. Tipos de listas:

<ul></ul> (unordered list) Se utilizan cuando el orden de los elementos no influye. (lista de
compra)

<ol></ol> (ordered list) Se utilizan cuando el orden de los elementos es importante (tops)

Cada elemento de la lista se representa con la etiqueta <li></li>, tanto las <ul> como las <ol>.

Se pueden construir listas anidadas teniendo en uno de los <li> otro <ul>/<ol> según sea
necesario.

<dl> </dl> (definition list) Se utiliza para hacer una lista de definiciones (diccionario)

Cada elemento de una lista de definición lleva dos etiquetas:

<dt> (Definition term) El término que vamos a definer.

<dd> (Definition description) La descripción del término.

Atributos de las listas

<ol> </ol> type: Estilo de la numeración (1, A, a, I, i).

Start: Inicio de las secuencias (un número).

<ul><</ul> type: Estilo de los items (disc, square, circle)

Tablas
SIrven para mostrar contenido tabulado.

La estructura básica de una table se compone de:

<table></table> Etiqueta que encierra una tabla.

<tr></tr> (table row) Etiqueta que construye una fila.

<td></td> (table data) Etiqueta que construye una celda.

El número de celdas dentro de un tr establecerá el número de columnas de la tabla.

<caption></caption> después de table, es opcional.

Estructura completa de una tabla

Las cabeceras de las tablas se establecen con la etiqueta <thead></thead>

Dentro de la etiqueta thead va una etiqueta <tr> normal y en el caso de las celdas se establecen
con <th></th> (Para encabezados).

Si se hace uso de la etiqueta thead. El cuerpo de la tabla debe ir dentro de una etiqueta
<tbody></tbody> para representar el cuerpo de la tabla.

De forma opcional se puede colocar un <tfoot></tfoot> para establecer un pie de tabla (Como
suma de cantidades o total.)

Atributos de la tablas
Para hacer que las celdas ocupen más de una fila o más de una columna:

Rowspan -> Sirve para que una celda ocupe más de una fila, el valor por defecto es 1.

Colspan -> Sirve para que una celda ocupe más de una columna, el valor por defecto es 1.
Selección de columnas
Cuando se quiere selecionar una columna, se usa la etiqueta <colgrup></colgrup> que permite
selccionar una columna en concreto. Cada etiqueta <col> equivaldrá a una columna siguiendo el
mismo orden que tienen en la tabla.

Si se necesita que una etiqueta col agrupe más de una columna, se usa el atributo span, que
funciona igual que rowspan y colspan.

Formularios
Permiten interactuar con los usuarios

La estructura básica de un formulario se compone de 4 elementos:

<form></form> Es la etiqueta que engloba el formulario.

<label></label> Sirve para escribir el nombre del campo a rellenar, debe tener el atributo for al cual se le
indica un id que lo que hará será emparejar el label con su input correspondiente.

<input></input> Sirve para crear un campo que permitirá al usuario interactuar.

<button></button> Crea un botón que permitirá enviar el formulario.

Para enviar información se usa action=”” como atributo.

Asociar inputs y label: id -> para el input / for -> para el label

Tipos de input:

Button vs type button

Button -> (Tipo boton) Se comporta igual que un botón <button> Para poner nombre se utiliza
value=”

Submit -> Se utiliza para enviar el formulario

 Visualmente son iguales

 Un input type button no sirve para enviar formularios / Un button si
 Input type button es para poner un boton en el formulario y que haga una operación a
través de Js
 Si se quiere mandar el formulario con input se usa submit
Input tipo fecha
Date -> Se utiliza para introducer una fecha

Datetime -> Obsoleto

Datetime-local -> Fecha y hora, no funciona en firefox (se puede usar date y luego time)

Time -> Se utiliza para introducir una hora

Month ->Se utiliza para introducir un mes

week -> Se utiliza para introducir el número de la semana del año

Hidden -> Campo oculto, puede contener valor pero no se mostrará

Input para móviles

Search -> Se utiliza para las barras de búsqueda

Tel -> Se utiliza para introducir números telefónicos

Email -> Se utiliza para introducir un email

Password -> Se utiliza para contraseñas

url -> Se utiliza para introducir URLs

Más tipos de input

Color -> Se utiliza para especificar un color

Number -> Se utiliza para valores numericos

Range -> Se utiliza para establecer un rango (Crea barra para seleccionar un rango) 100

Atributo: step=”de cuanto en cuanto se mueve la barra” min=””/max=”” es para el valor de la

barra.

Reset ->Se utiliza para resetear el formulario

Text -> Valor por defecto

Inputs de seleción
Radio –> Permite seleccionar una única opción de una lista de opciones relacionadas.

Checkbox -> Permite seleccionar varias opciones de una lista de opciones relacionadas.

atributos:

 name=”” para relacionar los inputs y sean una misma categoría.

 Checked: marca por defecto
 Value=”” valor del elemento. Es el valor que recibe el servidor

-----------------------------------------------------------------------------------------------------------------------------------

<Select> Crea una lista de opciones donde podemos seleccionar una o varias opciones.

Cada opción irá dentro de una etiqueta <option> </option>

 Manteniendo control y presionando las opciones se seleccionan distintas opciones

Si hay muchas opciones se pueden ordenar por categorías a través de la etiqueta <optgroup> con
el atributo label para nombrar la categoría.

<select name=””>

<optgroup label=”…”>

<option>

<option>

<option>

</optgroup>

Input:

Data list -> similares a los selects pero incluye un filtro de búsqueda.

<input type=”list” list=”….. (atributo)”

<data list id=”…” (que corresponda con la lista del input)>

<option value=”…” >(NOMBRE)</option>

Más elementos de formularios
fieldset -> Se utiliza para agrupar elementos dentro de un formulario.

legend -> Representa una etiqueta para el contenido del fieldset.

file ->Se utiliza para cargar archivos y enviarlos desde un formulario.

meter -> Representa un valor dentro de un rango conocido.

Atributos:

 Min – max – value – low –high - optimun

progress -> Representa el progreso de una tarea.

textarea -> Se utiliza para introducir texto en un Formulario.

Atributos de los formularios

Placeholder ->Da una pista de lo que el usuario tiene que introducir.

Required -> Hace que un campo sea obligatorio.

Readonly -> Hace que un campo sea de solo lectura, pero si se envía. Necesita value en input.

Disabled -> Desactiva el campo, no se podrá escribir en él.

Min – max -> Establece el mínimo y máximo de un campo numérico.

Minlenght maxlenght -> Establece el mínimo y máximo de caracteres de un campo de texto.

Selected -> Equivale a checked en los selects, para establecer una opción por defecto.

Autofocus -> Para poner el foco por defecto al cargar el formulario.

Get vs Post
Method=” GET/POST”
¿Qué es el contenido embebido?
 Es todo el contenido que nos traemos desde fuera.
 Estos archivos son los que más peso añaden a un sitio web.
 Los tipos más conocidos son: imágenes, audio, vídeo, iframes.

Imágenes
Los formatos de imágenes se clasifican en 2 tipos:

Vectoriales:

 Svg(recomendado)

Mapa de bits:

 Jpg
 Png 8 y 24 (si se necesita transparencia)
 Gif (si se necesita una imagen animada)
 Webp (el formato que menos pesa) (transparencia y animaciones)

<img> -> src=”…”(Ruta de la imagen) / alt=”…” (Atributo obligatorio)(Representa la imagen)