Como Escribir Correctamente Una Página Web

8/20/2019 Como Escribir Correctamente Una Página Web

http://slidepdf.com/reader/full/como-escribir-correctamente-una-pagina-web 1/5

Como Escribir Correctamente Una Página Web

Juego de caracteres: La codificación de caracteres es el método que permiteconvertir un carácter de un lenguaje natural en un símbolo de otro sistema derepresentación, como un número o una secuencia de pulsos eléctricos en unsistema electrónico, aplicando normas o reglas de codificación.

Tips Para No Cometer Errores Debido Al Mal Uso De Los Juegos De

Caracteres:

1. Utiliar siempre el mismo juego de caracteres en todo lo que se !aga esdecir todos los fic!eros que compongan el sitio "eb deben estar almacenados en el mismo juego de caracteres.

#. $l juego de caracteres recomendado es el U%&'( sin )*+ o -*'((/'1Latim10 -*'((/'1 Latim1.

Como indicar el uego de caracteres en !TML

-e indica con la etiqueta meta c!arset23utf'(04

N"TA: $l #"M $#%te "rder Mar&' es un carácter que indica la ordenación de losb5tes en un flujo de caracteres Unicode. $s un carácter Unicode que ocupa 6b5tes 5 que en !e7adecimal se e7presa como (E) ## #)* 5 se representa (+ ,,

-* como carácter.

.8a5 muc!os programas que no se llevan bien con el carácter #"M.

Tablas En !TML

/table,/0table,: etiqueta que indica el inicio 5 cierre de una tabla.

/tr,/0tr,: representa una nueva fila de la tabla. -e requiere una etiqueta 9tr3 por cada fila de la tabla.

/td,/0td,: etiqueta que se traduce en una célula de datos en una tabla.

/t1,: celda de cabecera.

/t1ead,: agrupa filas de cabecera.

/tbod%,: agrupa filas del cuerpo de la tabla.

/t2oot,: agrupa filas de pie de tabla.

/caption,: a:ade un título sobre la tabla.

/td colspan3 (4 de columnas*, /0td,: sirve para combinar celdas mediante launión de columbnas.

/td ro5span3 (4 de 2ilas*, /0td,: sirve para combinar c7eldas mediante la uniónde filas.



/colgroup, /0colgroup, % /col0,: son etiquetas que sirven para dar estilos por columnas.

6mágenes en !TML

/img , /0img,: etiqueta para insertar imágenes en 8%+L.

;tributos obligatorios de la etiqueta /img,:

7src: indica la ruta en la que se encuentra la imagen ejem< img src2 9img0logo.gif3alt2 9Logo de la empresa3 04

'alt: te7to alternativo que se debe mostrar cuando la imagen no se !a terminadode mostrar o no se puede mostrar por algún motivo.

;tributos opcionales de la etiqueta /img,:

75idt1 % 1eigt1: sirven para definir las dimensiones de la imagen.

7longdesc: indicar la U=L de una página en la que se proporciona una descripciónampliada de la imagen.

'$l formato de imágenes que se pueden mostrar depende solamente de si elnavegador puede o no mostrarlas. 8%+L no impone ninguna limitación en estecaso.

Mapa de 6magen: son imágenes en las que se !an definidos ciertas onas activasque son enlaces a otras páginas.

'+apa de imagen en el cliente<

/map name3 ( *,: define el mapa de imagen con sus distintas onas activas.>ermite relacionar el mapa de imagen con la imagen correspondiente.

/img usemap: ( *0,: representa la imagen del mapa 5 en esta se utilia el atributo9usemap* para definir el nombre del mapa que se quiere utiliar.

-e pueden utiliar 6 tipos de figura geométricas para definir un mapa de imagen,estas son< rectángulo, circulo 5 polígono 5 se definen con la siguiente etiqueta<

/área s1ape3*rect8circule8pol%* coords 3 ( ( 1re23 ( ( alt3 ( ( 0,

's!ape2 9rect3 coords2 971, 51, 7#, 5#3

's!ape2 9circle3 coords2 97,5,r3

's!ape2 9pol53coords2 971, 51, 7#, 5#... 7n, 5n3

Usos de los mapas de imagines: mapas geográficos, barra de navegación 5página principal de una página "eb.



!TML: 9alidacin Del Cdigo;

-irve para saber si un código fuente de una página "eb posee errores.

-iempre se debe indicar con que versión de 8%+L se está trabajando 5 esto se!ace mediante la etiqueta /< D"CT=PE,, los D"CT=PE recomendadas se

pueden conseguir en la página del ?6@. $l D"CT=PE debe escribirse en laprimera línea del código fuente.

!TML>

/can?as, /0can?as,: permite definir un área dentro de una página "eb en la quese puede dibujar mediante un ;> para Aava-cript.

@9: es un lenguaje de etiquetas basado en B+L que permite crear gráficosvectoriales.

eolocaliBacin para Ja?a@cript: permite obtener la localiación del usuario.

Cac1: permite indicar aquellos recursos de una página "eb o de una aplicación"eb que se desea que se almacene de forma local.

Web Wor&ers: permite crear múltiples !ilos de ejecución que se ejecutan enparalelo.

.J@"N: es un formato de intercambio de datos 5 se emplea para serialiar estructuras de datos en Aava-cript.

De !TML a !TML>

$n 8%+L C 5 en B8%+L 1 e7istían # enfermedades terribles, la /span, mana 5la /di?, itis, que son abusos de estas # etiquetas durante la codificación delcódigo 8%+L. $n 8%+L se !an creado diversas etiquetas que a5udan acombatir el abuso de las # etiquetas antes mencionadas, estas son< /1eader,8

/na?,8 /main,8 /articule,8 /section,8 /aside,8 /2igure, % /2ooter,;

La barra de navegación de una página que en 8%+L se implementa con laetiqueta /na?, "eb posee un conjunto de enlaces que deben ser estructuradoscomo una lista ordenada o no ordenada.

La etiqueta /2igure, sirve para etiquetar imágenes, fragmentos de códigos o unacita.

La etiqueta /2ooter, sirve para !acer el pie de página de la página "eb.

)ormularios en !TML >

8%+L permite definir los formularios de manera nativa de tal manera que nosiempre sea imprescindible el uso de Aava-cript para implementarlos. %ambién el!ec!o de utiliar comandos nativos para la realiación de formularios a5uda a queel desarrollador no tenga que preocuparse por problemas de compatibilidad con



distintos navegadores, además esto supone un a!orro de tiempo 5 de anc!o debanda 5a que el formulario puede ser revisado antes de ser enviado al servidor.

Nue?os ?alores del atributo (T=PE* del elemento (input*

• url: se usa en aquellos campos que deban contener una dirección "eb 5 es

automáticamente validado cuando el formulario es enviado.

• tel: se usa para definir campos en los que se deba introducir un número de

teléfono, debe ser complementado con el atributo pattern que permite definir el tipo de numero de teléfono de acuerdo al país donde se esté rellenando elformulario.

• email: se usa para definir campos es los que se debe introducir una

dirección de correo valida.

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

numérico.

• color: se usa para definir campos en los que el usuario puede definir

colores dentro de una paleta de colores.

• searc1: se usa para definir campos de búsqueda en formato de te7to.

• range: se usa para definir el rango de un valor numérico que se va a

introducir.

datetime: permite seleccionar datos de !orario inclu5endo ona !oraria.

• datetime7local: mismo que el anterior pero no inclu5e ona !oraria

• date< permite seleccionar una fec!a inclu5endo día, mes 5 a:o.

• mont1: permite seleccionar un mes 5 un a:o específicos.

• 5ee&: permite seleccionar una semana 5 un a:o específicos.

• time: permite al usuario seleccionar la !ora introduciendo !ora 5 minutos.



Nue?os atributos para el elemento 6NPUT Fue se pueden emplear en los

controles de los 2ormularios

autocomplete: permite seleccionar si la opción de autocompletado esta

activa o no dentro de un campo de un formulario.

• auto2ocus: permite seleccionar en que campo del formulario se colocara

automáticamente el foco cuando se carga la página.

min: sirve para delimitar un rango de valores numéricos.

maG: Ddem a min.

step: permite definir los intervalos de valores numéricos validos en un

campo

pattern: permite validar un elemento input en base a una e7presión regular

las cuales son modelos a patrones que describen las combinaciones decaracteres que se pueden introducir en el campo de te7to.

• place1older < permite que se muestre una pista o un ejemplo de lo que se

debe introducir en el campo de entrada.

• reFuired< es un atributo booleano 5 le indica al usuario que debe rellenar el

espacio del formulario de manera obligatoria antes de enviarlo.

Principales causas por las Fue una página 5eb no se ?e igual en todos losna?egadores

)allos de los na?egadores;

Problemas de compatibilidad entre los na?egadores;

@oporte de !TML por los na?egadores;

Errores en el cdigo !TML;

Como Escribir Correctamente Una Página Web

Documents

Transcript of Como Escribir Correctamente Una Página Web