Está en la página 1de 8

HTML

VALIDADOR DE CDIGO HTML


http://validator.w3.org
https://developers.google.com/structured-data/testing-tool/
https://www.google.com/webmasters/tools/submit-url?hl=es

LISTADO ETIQUETAS
https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos

ICONOS Y FAVICON
Iconos 16px,32px,%48px, 60px,128px,256px. Resolucin 72 la mnima.
Formato ico: image/x-icon | png: image/png | gif: image/gif | jpeg: image/jpeg

JUEGO DE CARACTERES
UNICODE CHARSET UTF-8 es la Unicode Transformation Format 8-bit representa
el cdigo de caracteres UNICODE. Compatible con ASCII. Permite visualizar los
caracteres de todos los idiomas.

Buena resolucin 960px. Unidad base 16px=1em=12pt = 100%

HTML
<html manifest= datos.appcache>

MARCADO SEMANTICO
Hay tres tipos principales de marcado semntico, los microdatos, los
microformatos y las extensiones RDFa. Los microdatos consisten en grupos de
pares nombre-valor. Estos grupos se denominan items y cada par nombre-valor es
una propiedad.

<div itemscope>
Ttulo: <span itemprop="ttulo"> Blade Runner </span>
Direccin: <span itemprop="autor">Ridley Scott </span>
Reparto: <span itemprop="reparto"> Harrison Ford,Rutger Hauer, Sean
Young, Edward James Olmos, Daryl Hannah </span>
Ao: <span itemprop="aos">1982.</span>
<meta itemprop="imagen" content="imagen_representativa.jpg">
</div>

<div itemscope itemtype="http://schema.org/Movie">


Direccin: <span itemprop="director" itemscope
itemtype="http://schema.org/Person"><span itemprop="name"> Ridley Scott
</span>
</div>
ETIQUETA META VIEPORT
width: device-width o nmero de pixels
height: device-height o valor en pixels
initial-scale: 0..1 (1 indica que es sin escala)
user-scale: yes/no (indica si el usuario puede cambiar la escala)
minimum-scale: 0..1 (escala mnima del viewport)
maximum-scale: 0..1 (escala mxima del viewport

HTML shiv
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

TEXTO
<b> </b> negrita (tambin sirve la etiqueta <strong> </strong>)
<i> </i> cursiva (tambin sirve la etiqueta <em></em>)
<u> </u> subrayado
<pre> preformateado. Respeta espacios, saltos de lnea y los retornos utilizados.
<blink> hace parpadear el texto (no para Explorer)
<blockquote> </blockquote> sangrado.

ANCLAS
<a name="miancla"></a>Texto con ancla define el ancla
<a href="#miancla">Enlace al ancla</a> lleva al ancla

ETIQUETAS META
<meta name="author" content="Darwin Chicaiza">
<meta name="keywords" content="palabras claves ">
<meta name="description" content="Descripcin">
<meta name="generator" content="WordPress 2.8.4" />
<meta name=aplication-name content= />
<meta http-equiv="content-type" >
<meta http-equiv="default-style">
<meta http-equiv="Refresh" content="5" url="http://es.gnome.org">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta charset=utf-8>

ATRIBUTO TARGET
Target=_blank._self, parent, _top, framename
LINK
<link href=valor hreflang=valor media=valor rel=valor sizes=valor
types=valor ></link>

Rel=alternate, autor, help, licence, next, prefetch, prev, stylesheet


<noscript></noscript>

ENLACES
<a href: >
target="_blank" Abrir otra pgina

ATRIBUTOS GLOBALES
Acceskey <Etiqueta accesskey=Carcter>
Class
Contenteditable <p contenteditable=true>Texto del prrafo</p>
Data <p data-nombre-dato=valor dato>Texto del prrafo</p>
Draggable arrastrar y soltar (drag and drop).
Hidden
Id
Lang=es
Spellcheck
Style
Tabindex
title

TABLAS
<table summary=tabla genrica>
cellpadding espacio entre el contenido de las celdas y el borde un nmero
cellspacing espacio entre celdas
colspan especifica el nmero de columnas por las que se extender la celda
rowspan especifica el nmero de filas por las que se extender la celda

RECURSOS EXTERNOS
<img .>: imgenes
Formato vectorial: SVG, (escalables sin perdida de calidad)
<video .>, <audio .>: video y audio
<iframe .>: pginas Web y otros objetos
<object .>: objetos. plugins, imgenes
<embed .>: aplicacin exterior, normalmente no-HTML

IMAGENES
<img alt=valor height=valor width=valor src=valor ismap usemap=valor>
Alt = Descripcin
Longdesc = indicar url pgina descripcin larga
Ismap = mapas de imagen servidor, es decir una imagen que puede tener zonas
seleccionables que sirven como enlaces.
Usemap = mapas de imagen cliente

<img src=valor usemap=#NombreMapa>


<map name="NombreMapa">
<area shape="rect" coords="0,0,82,126" href="valorenlace" alt=valor>
<area shape="circle" coords="90,58,3" href="valorenlace" alt=valor>
<area shape="polygon" coords="124,58,8" href="valorenlace" alt=valor>
</map>

<picture>
DETAILS
<details open>
<summary>Titulo del contenido</summary>
Contenido de la etiqueta
</details>

AUDIO

<audio autoplay controls loop muted preload=valor >


<source src=valor type=valor></source>
</audio>

preload=none, auto y metadata.

VIDEO
<video>
<source>
<audio>
<iframe> Pginas web y otros objetos
<object> objetos, plugins,imagenes
<embed> aplicacin exterior,no html

<video autoplay controls loop muted preload=valor src=valor poster=valor


<source src=valor type=valor></source>
</video>
FORMULARIOS
<form></form> | <fieldset></fieldset> | <legend></legend> | <label></label>

accept-charset=UTF-8 Eespecifica juego de caracteres


action=url Pgina a enviar
autocomplete=off Autocompletar el formulario
enctype=url-encoded Codificacin de los datos
method=POST Metodo HTTP de envio
name=valorNombre del campo
novalidate Navegador no debe validadr el formulario
target=_blank

<input type="text">
<input type="search"> para cajas de bsqueda.
<input type="number"> para adicionar o restar nmeros mediante botones.
<input type="range"> para seleccionar un valor entre dos valores predeterminados.
<input type="color"> seleccionar un color.
<input type="tel"> nmeros telefnicos.
<input type="url"> direcciones web.
<input type="email"> direcciones de email.
<input type="date"> para seleccionar un da en un calendario.
<input type="month"> para meses.
<input type="week"> para semanas.
<input type="time"> para fechas.
<input type="datetime"> para una fecha exacta, absoluta y tiempo.
<input type="datetime-local"> para fechas locales y frecuencia.
<input type="radio">
<input type="checkbox">
<input type="submit">
<input type="reset">
<input type="file">
<input type="hidden">

<textarea name="comentario" rows="10" cols="40"></textarea>

<select name="estacion">
<option value=primavera selected>Primavera</option>
<option>Verano</option>
</select>

<button type=button>Contenido del botn, Texto o imgenes</button>


<button type=submit> Botn

<datalist> Lista de opciones predefinidas


<keygen>
<output> Calculo matemtico

Value=
Readonly=
Disabled=
Size=40 numero caracteres
Maxlength= mximo permitido

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step

GET:
Si el envo del formulario es pasivo (como una consulta de motor de bsqueda), y
sin informacin sensible.

Al utilizar GET, los datos del formulario sern visibles en la direccin de la pgina:
action_page.php? Nombre = Mickey y apellido = Ratn

Nota GET es el ms adecuado para cortos perodos de datos. Limitaciones de


tamao se encuentran en su navegador.
POST:
Si la forma es la actualizacin de los datos, o incluye informacin confidencial
(contraseas).

POST ofrece mayor seguridad ya que los datos presentados no est visible en la
direccin de la pgina.

ATRIBUTOS PROPIOS
Los atributos data- se crearon para almacenar informacin extra en nuestros
elementos HTML, sin que esta sea visible, ni llene al elemento de clases.
La sintxis es simple y nos permite definir nuestros propios atributos:

<p id="productoX" data-categoria="Libro">


Juego de tronos
</p>

Acceder CSS
#productoX::before {
content: attr(data-nombre) ":";
font-weight:bold;
}
[data-categoria] {
color:green;
}

También podría gustarte