Como Escribir Correctamente Una Pgina Web

Juego de caracteres: La codificacin de caracteres es el mtodo que permite

convertir un carcter de un lenguaje natural en un smbolo de otro sistema de
representacin, como un nmero o una secuencia de pulsos elctricos en un
sistema electrnico, aplicando normas o reglas de codificacin.
Tips Para No Cometer Errores Debido Al Mal Uso De Los Juegos De
Caracteres:
1. Utilizar siempre el mismo juego de caracteres en todo lo que se haga es
decir todos los ficheros que compongan el sitio web deben estar
almacenados en el mismo juego de caracteres.
2. El juego de caracteres recomendado es el UTF-8 sin BOM o ISO-8859-1
Latim1/ ISO-8859-15 Latim15.
Como indicar el juego de caracteres en HTML
Se indica con la etiqueta <meta charset=utf-8/>
NOTA: El BOM (Byte Order Mark) es un carcter que indica la ordenacin de los
bytes en un flujo de caracteres Unicode. Es un carcter Unicode que ocupa 3
bytes y que en hexadecimal se expresa como EF BB BF y se representa >>
como carcter.
*Hay muchos programas que no se llevan bien con el carcter BOM.
Tablas En HTML
<table></table>: etiqueta que indica el inicio y cierre de una tabla.
<tr></tr>: representa una nueva fila de la tabla. Se requiere una etiqueta tr por
cada fila de la tabla.
<td></td>: etiqueta que se traduce en una clula de datos en una tabla.
<th>: celda de cabecera.
<thead>: agrupa filas de cabecera.
<tbody>: agrupa filas del cuerpo de la tabla.
<tfoot>: agrupa filas de pie de tabla.
<caption>: aade un ttulo sobre la tabla.
<td colspan= # de columnas> </td>: sirve para combinar celdas mediante la
unin de columbnas.
<td rowspan= # de filas> </td>: sirve para combinar cxeldas mediante la unin
de filas.

<colgroup> </colgroup> y <col/>: son etiquetas que sirven para dar estilos por
columnas.
Imgenes en HTML
<img> </img>: etiqueta para insertar imgenes en HTML.
Atributos obligatorios de la etiqueta <img>:
-src: indica la ruta en la que se encuentra la imagen ejem: <img src= img/logo.gif
alt= Logo de la empresa />
-alt: texto alternativo que se debe mostrar cuando la imagen no se ha terminado
de mostrar o no se puede mostrar por algn motivo.
Atributos opcionales de la etiqueta <img>:
-width y heigth: sirven para definir las dimensiones de la imagen.
-longdesc: indicar la URL de una pgina en la que se proporciona una descripcin
ampliada de la imagen.
-El formato de imgenes que se pueden mostrar depende solamente de si el
navegador puede o no mostrarlas. HTML no impone ninguna limitacin en este
caso.
Mapa de Imagen: son imgenes en las que se han definidos ciertas zonas activas
que son enlaces a otras pginas.
-Mapa de imagen en el cliente:
<map name= >: define el mapa de imagen con sus distintas zonas activas.
Permite relacionar el mapa de imagen con la imagen correspondiente.
<img usemap: />: representa la imagen del mapa y en esta se utiliza el atributo
usemap para definir el nombre del mapa que se quiere utilizar.
Se pueden utilizar 3 tipos de figura geomtricas para definir un mapa de imagen,
estas son: rectngulo, circulo y polgono y se definen con la siguiente etiqueta:
<rea shape=rect,circule,poly coords = href= alt= />
-shape= rect coords= x1, y1, x2, y2
-shape= circle coords= x,y,r
-shape= poly coords= x1, y1, x2, y2... xn, yn
Usos de los mapas de imagines: mapas geogrficos, barra de navegacin y
pgina principal de una pgina web.

HTML: Validacin Del Cdigo.

Sirve para saber si un cdigo fuente de una pgina web posee errores.
Siempre se debe indicar con que versin de HTML se est trabajando y esto se
hace mediante la etiqueta <! DOCTYPE>, los DOCTYPE recomendadas se
pueden conseguir en la pgina del W3C. El DOCTYPE debe escribirse en la
primera lnea del cdigo fuente.
HTML5
<canvas> </canvas>: permite definir un rea dentro de una pgina web en la que
se puede dibujar mediante un API para JavaScript.
SVG: es un lenguaje de etiquetas basado en XML que permite crear grficos
vectoriales.
Geolocalizacin para JavaScript: permite obtener la localizacin del usuario.
Cach: permite indicar aquellos recursos de una pgina web o de una aplicacin
web que se desea que se almacene de forma local.
Web Workers: permite crear mltiples hilos de ejecucin que se ejecutan en
paralelo.
*JSON: es un formato de intercambio de datos y se emplea para serializar
estructuras de datos en JavaScript.
De HTML 4 a HTML5
En HTML 4 y en XHTML 1 existan 2 enfermedades terribles, la <span> mana y
la <div> itis, que son abusos de estas 2 etiquetas durante la codificacin del
cdigo HTML. En HTML 5 se han creado diversas etiquetas que ayudan a
combatir el abuso de las 2 etiquetas antes mencionadas, estas son: <header>,
<nav>, <main>, <articule>, <section>, <aside>, <figure> y <footer>.
La barra de navegacin de una pgina que en HTML 5 se implementa con la
etiqueta <nav> web posee un conjunto de enlaces que deben ser estructurados
como una lista ordenada o no ordenada.
La etiqueta <figure> sirve para etiquetar imgenes, fragmentos de cdigos o una
cita.
La etiqueta <footer> sirve para hacer el pie de pgina de la pgina web.
Formularios en HTML 5
HTML 5 permite definir los formularios de manera nativa de tal manera que no
siempre sea imprescindible el uso de JavaScript para implementarlos. Tambin el
hecho de utilizar comandos nativos para la realizacin de formularios ayuda a que
el desarrollador no tenga que preocuparse por problemas de compatibilidad con

distintos navegadores, adems esto supone un ahorro de tiempo y de ancho de

banda ya que el formulario puede ser revisado antes de ser enviado al servidor.
Nuevos valores del atributo TYPE del elemento input

url: se usa en aquellos campos que deban contener una direccin web y es
automticamente validado cuando el formulario es enviado.

tel: se usa para definir campos en los que se deba introducir un nmero de
telfono, debe ser complementado con el atributo pattern que permite definir
el tipo de numero de telfono de acuerdo al pas donde se est rellenando el
formulario.

email: se usa para definir campos es los que se debe introducir una
direccin de correo valida.

number: se usa para definir campos en los que se deba introducir un valor
numrico.

color: se usa para definir campos en los que el usuario puede definir
colores dentro de una paleta de colores.

search: se usa para definir campos de bsqueda en formato de texto.

range: se usa para definir el rango de un valor numrico que se va a

introducir.

datetime: permite seleccionar datos de horario incluyendo zona horaria.

datetime-local: mismo que el anterior pero no incluye zona horaria

date: permite seleccionar una fecha incluyendo da, mes y ao.

month: permite seleccionar un mes y un ao especficos.

week: permite seleccionar una semana y un ao especficos.

time: permite al usuario seleccionar la hora introduciendo hora y minutos.

Nuevos atributos para el elemento INPUT que se pueden emplear en los

controles de los formularios
autocomplete: permite seleccionar si la opcin de autocompletado esta
activa o no dentro de un campo de un formulario.

autofocus: permite seleccionar en que campo del formulario se colocara

automticamente el foco cuando se carga la pgina.

min: sirve para delimitar un rango de valores numricos.

max: dem a min.
step: permite definir los intervalos de valores numricos validos en un
campo
pattern: permite validar un elemento input en base a una expresin regular
las cuales son modelos a patrones que describen las combinaciones de
caracteres que se pueden introducir en el campo de texto.

placeholder: permite que se muestre una pista o un ejemplo de lo que se

debe introducir en el campo de entrada.

required: es un atributo booleano y le indica al usuario que debe rellenar el

espacio del formulario de manera obligatoria antes de enviarlo.

Principales causas por las que una pgina web no se ve igual en todos los
navegadores
Fallos de los navegadores.
Problemas de compatibilidad entre los navegadores.
Soporte de HTML por los navegadores.
Errores en el cdigo HTML.