HTML

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

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;
}

HTML

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML

Cargado por

Copyright:

Formatos disponibles

HTML

VALIDADOR DE CDIGO HTML

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

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

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

<img src=valor usemap=#NombreMapa>

<audio autoplay controls loop muted preload=valor >

preload=none, auto y metadata.

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

accept-charset=UTF-8 Eespecifica juego de caracteres

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

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

<datalist> Lista de opciones predefinidas

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

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

También podría gustarte