HTML Cheat Sheet [Updated] - Download PDF for Quick Reference

HTML significa Hyper Text Mark-up Language

Se utiliza para: crear páginas web (documentos) que se muestran en la World Wide Web (sitios web). Las páginas pueden ser una mezcla de texto, imágenes, vídeos y otros elementos. Se puede crear con: notepad, TextPad o cualquier editor de texto.

Se guarda como: Archivos .html

Hoja de trucos HTML

Aquí compartimos con vosotros la hoja de trucos HTML completa:

Estructura básica

<!DOCTYPE html><html> <head> <title></title> </head> <body> body tags and main content </body></html>

Los elementos principales en HTML son las etiquetas. Las etiquetas estructuran y presentan los datos de diferentes formas.

Cabecera

<h1>Heading 1</h1><h2>Heading 2 </h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6 </h6>

Párrafo

Span

La etiqueta Span se utiliza para estilizar los elementos en línea.

<span style = "color:green”> Address </span>

– imprime la palabra ‘Dirección’ en el color especificado (aquí verde). El atributo style se utiliza para dar estilo a los elementos HTML.

Caracteres

Formato

Cuerpo

<body> – el contenido principal se encuentra en el cuerpo. Dentro de <body> puede haber muchas secciones. Atributos –

Metadatos

name = «» – puede ser nombre como palabra clave, autor, descripción etc…
content = «» – el valor correspondiente a los nombres anteriores

Ejemplo – <meta name=»keywords» content=»Qué es HTML, Cómo aprender HTML»>

Secciones y divisiones

<div></div> nueva sección; las etiquetas div anidadas son muy comunes cuando se requieren múltiples subsecciones
<hr> – línea horizontal

<hr> tiene los siguientes atributos –

<hr size = «» width = «»/width = «%» color = «» align = «izquierda/centro/derecha»>
tamaño – grosor de la línea en píxeles
ancho – en píxeles o porcentaje (cualquiera)
color – color en valor hexadecimal
alineación – alineación; izquierda, derecha o centro

Tablas

<table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr></table>

<table> – crea una tabla,
<tr> – crea una fila,
<td> – crea una columna,
<th> – crea columnas de cabecera

<table> atributos –

<td> atributos

Ejemplo –

<colgroup> <col span="1" style="background-color:green"> <col style="background-color:blue"></colgroup>

La primera columna se resaltará en verde, mientras que las demás columnas se resaltarán en azul.

Formas (HTML Cheat Sheet)

La mayor parte del contenido dinámico como las entradas del usuario, el envío de una página, el llenado de un formulario ocurren dentro de esta etiqueta. Es un grupo de entradas relacionadas.

<form> <input> <select><option></option></select> <textarea></form>

<form> atributos de la etiqueta –

<input> atributos de la etiqueta –

<select></select> – Selecciona las opciones de la lista desplegable <select> etiqueta Atributos:

<option></option> – elementos individuales de la lista desplegable <option> etiqueta Atributos:

valor=»» – Valor de la opción seleccionada o valor por defecto establecido
<textarea>mucho texto como descripción </textarea> -. Área grande para entradas de texto

<textarea> Atributos de la etiqueta:

iframe

<iframe src=»»></iframe> – incrusta otro documento dentro del documento actual (página) en un marco.
Atributo «src» – ubicación del documento a incrustar

Enlaces

Enlaces HTML, también llamados como hipervínculos están definidos por la etiqueta ‘a’ – <a></a>. Atributos –

href = «» – la url que se visitará al hacer clic en el enlace
target = «» – especifica dónde abrir el enlace – _blank (nueva pestaña/ventana), _self (misma ventana/pestaña), _parent (en el marco padre), framename – abrir en un marco concreto.
Title = «» – da información sobre el elemento
Id = «» – para crear marcadores en la página que pueden ser utilizados como valor en el atributo href.

Ejemplos –

Estilos

Para el estilo, hay muchos atributos que se utilizan con varias etiquetas. Los atributos son –

<style> text-align= "” – align text; left, right, center background-color = "” – background color of the element color=”” – for color of texts font-family = "” – for various fonts font-size = "” size of the font border = "” – border thickness and color for a table</style>

Estos elementos de estilo se juntan en un CSS.

Listas

Hay dos tipos de listas – ordenadas y desordenadas. <ol></ol> – lista ordenada Atributos –

type=»» – la numeración de la lista – A, a, I, 1, i
start = «» – valor inicial
<ul></ul> – lista desordenada

Atributos –

tipo = «» – tipo de bala – cuadrado, círculo, disco
<li></li> – valor individual en la lista