PLANTILLA HTML
Estructura de documento: <th> Columna de encabezamiento de tabla
<!DOCTYPE html> <tfoot> Pie de tabla
<html> <tbody> Cuerpo de tabla
<head> <caption> Título de tabla
<title>TITULO</title> <colgroup> Indicar agrupamiento de columnas de tabla
</head> <col span="NumCols" style="CSS">
<body> Grupo de columnas de tabla
CONTENIDO <td colspan="NumCols"> Abarca columnas desde td
</body> <th colspan=" NumCols"> Abarca columnas desde th
</html> <td rowspan="NumFilas"> Abarca filas desde td
Atributos comunes: <iframe src="enlace" width="ancho" height="alto"
name="texto" id="identificador" title="titulo" name="NombreMarco"> Marco
Comentarios: <!-- COMENTARIO --> <a href="enlace"target="NombreMarco"> Enlace en marco
Elementos: <form></form> Formulario
<pre> Preformateo = Espacio en blanco <input type="text" name="Nomb"> Introducir texto en form.
<h1> hasta <h6> Encabezados <input type="number" name="Nomb" min="m" max="M"
<b> Negrita value="V" step="S"> Introducir número
<u> Subrayado <input type="range" name="Nomb" min="m" max="M"
<i> Itálica value="V" step="S"> Introducir número con barra desp.
<cite> Cita (cursiva) <textarea name="Nomb" rows="x" cols="y">Título</textarea>
<em> Negrita o cursiva Introducir texto de varias líneas en form.
<strong> Negrita <input type="radio" name="Nomb" value="xxx" checked>
<sub> Subíndice Elegir un valor en form.
<sup> Superíndice <input type="checkbox" name="Nomb" value="xxx" checked>
<p> Párrafo Elemento checkbox en form.
<br/> Salto de línea <select name="name">...</select>
<blockquote> Sangría Lista desplegable de valores en form.
<q> Cita <option value="xxx" selected>Nombre</option>
<dl> Lista de definición Cada valor de la lista desplegable de form.
<dt> Término de lista de definición <input list="ListaX" name="Nomb">
<dd> Definición de término de lista de definición Introducir texto desde una lista de valores
<ol> Lista ordenada <datalist id="ListaX">...</datalist> Crear la lista
<ul> Lista sin ordenar <option value="xxx"> Cada opción/valor de la lista
<li> Entrada de lista (ya sea ordenada o sin ordenar) <label for="Nom"> Etiqueta de elemento con id="Nom" en form
<div> Sección <fieldset style="width:x">...</fieldset>
<a href="URL" target="_blank">Elemento</a> Hipervínculo Enmarca elementos de form.
<a href="[Link] Enlace a email <legend>Título</legend> Título de lo enmarcado
<a id="ancla"></a> Coloca ancla <input type="reset" value="Nomb"> Botón borrar en form.
<a href="#ancla">Texto</a> Enlace a ancla <input type="submit" value="Nomb"> Botón enviar en form.
<img src="./ruta/name" alt="descripc"/> Insertar imagen <form action="[Link]" method="GET / POST">
<map name="nombre"> Mapear imagen Página donde se envían los datos de form.
<img src="..." alt="..." usemap="#nombre" /> <input type="image" name="name" src="./[Link]">
<area shape="rect / circle / poly" coords="a,b,c,d" Botón como [Link] para enviar en form.
alt="nombre" href="enlace"> Área de mapeo <span> Aplicar estilo a una parte
<hr/> Línea horizontal <abbr title="Título">siglas</abbr> Abreviatura
<table> Tabla <audio controls>...<audio> Reproductor de audio
<tr> Fila de tabla <source src="./[Link]" type="audio/xxx">
<td> Columna de tabla Fichero que se reproduce
<thead> Encabezamiento de tabla <video controls>...</video>
PLANTILLA CSS
Estilo en fichero externo: <link...> dentro de <head> border-left-color: UnColor Color de borde izquierdo
<link rel="stylesheet" type="text/css" href="./ruta/[Link]" /> border-color: UnColor / hasta 4 colores Color bordes
Estilo en <head> de documento html: border-top-width: thin / medium / thick / UnValor
<style type="text/css">estilos</style> border-right-width: thin / medium / thick / UnValor
Estilo en un elemento de documento html: border-bottom-width: thin / medium / thick / UnValor
<elemento style="propiedad1: valor1; propiedad2: valor2; ... "> border-left-width: thin / medium / thick / UnValor
Regla de estilo: selector { propied1: valor1; propied2: valor2; ... } border-width: thin / medium / thick / UnValor
selector1 selector2 { prop1: valor1; prop2: valor2; ... } Grosor bordes superior derecho inferior izquierdo
color: NombreColor / #xxxxxx / rgb(xxx,xxx,xxx) Color de texto padding-top: valor Espacio entre borde superior y contenido
background-color: NombreColor / #xxxxxx / rgb(xxx,xxx,xxx) padding-right: valor Espacio entre borde derecho y contenido
Color de fondo padding-bottom: valor Espacio entre borde inferior y conteni
background-image: url("Imagen") Imagen de fondo padding-left: valor Espacio entre borde izquierdo y contenido
background-repeat: repeat / no-repeat / repeat-x / repeat-y padding: UnValor / hasta 4 valores
Repetir o no imagen de fondo width: valor / auto Anchura de elemento
background-attachment: scroll / fixed Imagen de fondo fija o no height: valor / auto Altura de elemento
background-position: PosX PosY Posición de imagen de fondo float: left / right Alinea a izda / dcha, resto es espacio libre.
Left/Right/Center Top/Bottom/Center clear: left / right / both Nada por izda / dcha / ambos
background: color image repeat attachment position display: inline / block Se comporta como en línea / bloque
Las 5 propiedades anteriores en una sola propiedad white-space: normal / nowrap / pre Trata espacios blancos
font-size: valor (Unidad CSS / %) Tamaño de fuente Deja uno / Deja uno y no salta línea / Respeta formato
font-family: "NombreFuente", NombFte Tipo de fuente list-style-type: disc/circle/square/decimal/lower-roman/
font-weight: normal / bold / bolder / lighter / 100...900 Grosor upper-roman/lower-alpha/upper-alpha/none
font-style: normal / italic / oblique Estilo de fuente Tipo de marcador de lista
font-variant: normal / small-caps Mayúsculas pequeñas list-style-image: url("Imagen") Imagen como marcador de lista
line-height: valor (Unidad CSS / %) Altura de interlineado list-style-position: outside / inside Posición de marcador de lista
font: style variant weight size/lineheight family list-style: type position image Las 3 propiedades anteriores
Las 6 propiedades anteriores en una sola propiedad top: valor Posición parte superior
text-decoration: none / underline / overline / line-through bottom: valor Posición parte inferior
Texto sub/sobrerayado, tachado left: valor Posición parte izquierda
text-align: left / right / center / justify Alineación horizontal right: valor Posición parte derecha
text-indent: valor (Unidad CSS / %) Indentación/tabulación position: static / fixed / relative / absolute
text-transform: none / uppercase / lowercase / capitalize Posición normal/fija (no scroll)/relativa/absoluta
Texto en mayús/minúsculas o capital z-index: valor Orden de elementos superpuestos
text-shadow: DespHoriz DespVerti Difumi color Sombra visibility: visible/hidden/collapse
word-spacing: normal / UnValor Espacio entre palabras Visible/Oculto y ocupa espacio/Oculto y no ocupa espacio
letter-spacing: normal / UnValor Espacio entre letras overflow: visible/hidden/scroll/auto Si supera límites:
vertical-align: baseline / sub/super / top/bottom / middle / No se corta/se corta/se corta con scroll/se corta, scroll si neces
text-top/text-bottom / % / UnValor Alineación vertical clip: rect(top,right,bottom,left) Sólo muestra la zona
margin-left: auto / UnValor Margen izquierdo Clases: .nombre_de_clase { propiedad1: valor1;...;}
margin-right: auto / UnValor Margen derecho selector.nombre_de_clase { propiedad1: valor1;...;}
margin-top: auto / UnValor Margen superior <elemento class="nombre_de_clase">...</elemento>
margin-bottom: auto / UnValor Margen inferior Estilos con #: #UnNombre { propiedad1: valor1;...;}
margin: auto/valor auto/valor auto/valor auto/valor <elemento id="UnNombre">...</elemento>
Las 4 propiedades anteriores en una sola propiedad Pseudoclases: selector:pseudoclase {propiedad1: valor1;... ;}
border-style: none / dotted / dashed / solid / double / groove / a:active { } Enlace activo selector:hover { } Ratón encima
ridge / inset / outset Estilo de bordes a:link { } Enlace no visitado a:visited { } Enlace visitado
border-top-color: UnColor Color de borde superior input:checked {} Checked en form. input:focus {} Foco en input.
border-right-color: UnColor Color de borde derecho [Link]:pseudoclase {} Distintos estilos para mismo elem.
border-bottom-color: UnColor Color de borde inferior Unidades CSS: px, em, %, mm, cm, in, pt