Programación Web

¿Que es un lenguaje de Marca?

Un lenguaje de marcas es un conjunto de palabras o marcas que se colocan junto al texto de un documento para especificar una propiedad del mismo.

Ejemplo: <negrita>Diseño de páginas web</negrita> <título>Diseño de páginas web</título>

Tipos de marcado: físico y semántico. Por ejemplo, para enfatizar caracteres se puede utilizar el estilo físico I o el estilo semántico EM.

	Estilo físico	Estilo semántico
Sintaxis	<I>texto en itálica</I>	<EM>texto enfatizado</EM>
Resultado	texto en itálica	texto enfatizado

¿Que es HTML?

HTML, siglas de HyperText Markup Language («lenguaje de marcas de hipertexto»), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia para la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, entre otros. Es un estándar a cargo de la W3C, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Es el lenguaje con el que se definen las páginas web.

¿Qué tipo de datos básicos tiene el lenguaje HTML?

Mayúsculas y minúsculas

En la definición de cada atributo se incluye información sobre la importancia que tiene para sus valores la distinción entre mayúsculas y minúsculas. Esta información se presenta de acuerdo con la siguiente leyenda:

CS. El valor distingue entre mayúsculas y minúsculas (es decir, los agentes de usuario interpretan "a" y "A" de manera diferente).
CI. El valor no distingue entre mayúsculas y minúsculas (es decir, los agentes de usuario interpretan "a" igual que "A").
CN. No puede haber diferencias entre mayúsculas y minúsculas, p.ej., porque es un número o un carácter del conjunto de caracteres del documento.
CA. La definición del elemento o atributo ya da la información sobre la distinción entre mayúsculas y minúsculas.
CT. Consultar la definición del tipo para detalles sobre la distinción entre mayúsculas y minúsculas.

Si el valor de un atributo es una lista, estas claves se aplican a todos los valores de la lista, a menos que se indique lo contrario.

Tipos básicos de SGML

La definición del tipo de documento especifica la sintaxis de los contenidos de los elementos y los valores de los atributos de HTML por medio de palabras (tokens) SGML (p.ej., PCDATA, CDATA, NAME, ID, etc.).

CDATA es una secuencia de caracteres tomados del conjunto de caracteres del documento y puede incluir entidades de caracteres. Los agentes de usuario deberían interpretar los valores de atributos como sigue:

Reemplazar las entidades de caracteres con caracteres.
Ignorar los avances de línea.
Reemplazar cada retorno de carro o tabulación con un espacio simple.

Para algunos atributos de HTML 4 con valores de atributo CDATA, la especificación impone restricciones más fuertes al conjunto de valores legales para el atributo, restricciones que no pueden expresarse por el DTD.

Aunque los elementos STYLE y SCRIPT usan CDATA para su modelo de datos, para estos elementos los agentes de usuario deben tratar CDATA de manera diferente. El código y las entidades deben tratarse como texto sin formato y pasarse a la aplicación tal y como están. La primera aparición de la secuencia de caracteres "</" (delimitador de apertura de etiqueta final) se trata como si finalizara el contenido del elemento. En documentos válidos, esta sería la etiqueta final del elemento.

Las palabras ID y NAME deben comenzar con una letra ([A-Za-z]) que puede estar seguida por un número cualquiera de letras, dígitos, ([0-9]), guiones ("-"), subguiones ("_"), dos puntos (":"), y puntos (".").

IDREF e IDREFS son referencias a palabras ID definidas por otros atributos. IDREF es una palabra simple e IDREFS es una lista de palabras separadas por espacios.

Las palabras NUMBER deben contener al menos un dígito ([0-9]).

Cadenas de texto

Ciertos atributos (%Text; en el DTD) toman por valor un texto que se supone debe ser "legible por humanos".

URIs

Esta especificación utiliza el término URI tal y como se define en [URI].

Los URIs relativos se convierten en URIs completos a partir de un URI base. La [RFC1808], sección 3, define el algoritmo normativo para este proceso.

Los URIs se representan en el DTD con la entidad paramétrica %URI;.

En general los URIs hacen distinción entre mayúsculas y minúsculas. Puede haber URIs, o partes de URIs, donde la diferencia no importe (p.ej., nombres de máquinas), pero la identificación de éstas puede no ser fácil. Los usuarios deberían considerar que en los URIs se distingue siempre entre mayúsculas y minúsculas (para quedarse del lado de la seguridad).

Colores

El tipo de valor de atributo "color" (%Color;) se refiere a las definiciones de colores según se especifican en [SRGB]. Un valor de color puede ser o bien un número hexadecimal (anteponiendo un signo "#") o uno de los siguientes dieciséis nombres de colores. En los nombres de colores no se distingue entre mayúsculas y minúsculas.

Así, los valores de color "#800080" y "Purple" se refieren ambos al color púrpura.

Notas sobre el uso de colores

Aunque los colores pueden añadir cantidades significativas de información a los documentos y hacerlos más legibles, considere las siguientes pautas cuando incluya color en sus documentos:

El uso de elementos y atributos HTML para especificar colores está desaprobado. Se aconseja utilizar hojas de estilo en su lugar.
No utilice combinaciones de colores que puedan causar problemas a personas con dificultades para distinguir colores.
Si usa una imagen de fondo o establece un color de fondo, asegúrese de que establece también los colores de los distintos textos.
Los colores especificados con los elementos BODY y FONT y con bgcolor en las tablas tienen apariencias diferentes en plataformas diferentes (p.ej., estaciones de trabajo, Macs, Windows, y paneles LCD frente a CRTs), por lo que no debería basar un efecto específico completamente en ellos. En el futuro, el soporte del modelo de color [SRGB] junto con los perfiles de color ICC debería mitigar este problema.
Cuando sea posible, adopte las convenciones comunes para evitar confusiones.

Longitudes

HTML especifica tres tipos de valores de longitud para los atributos:

Píxeles (Pixels): El valor (%Pixels; en el DTD) es un entero que representa un número de píxeles del lienzo (papel, pantalla). Así, el valor "50" significa cincuenta píxeles.
Longitud (Length): El valor (%Length; en el DTD) puede ser o bien un %Pixel; o bien un porcentaje del espacio horizontal o vertical disponible. Así, el valor "50%" significa la mitad del espacio disponible.
Multilongitud (MultiLength): El valor (%MultiLength; en el DTD) puede ser un %Length; o una longitud relativa . Una longitud relativa tiene la forma "i*", donde "i" es un entero. Los agentes de usuario, cuando reparten espacio entre los elementos que compiten por ese espacio, adjudican primero las longitudes en píxeles y en porcentajes, y después dividen el espacio sobrante entre las longitudes relativas. Cada longitud relativa recibe una porción del espacio disponible que es proporcional al entero que precede al "*". El valor "*" es equivalente a "1*". Así, si hay disponibles 60 píxeles de espacio después de haber adjudicado el agente de usuario el espacio en píxeles y en porcentajes, y las longitudes relativas que deben asignarse son "1*", "2*" y "3*", se asignarán 10 píxeles al 1*, 20 píxeles al 2* y 30 píxeles al 3*Los valores de longitud son neutros frente a la distinción entre mayúsculas y minúsculas.

Tipos de contenido (tipos MIME)

Nota. Un "media type" o "tipo de medios" (definido en [RFC2045] y [RFC2046]) especifica la naturaleza de un recurso vinculado. Esta especificación emplea el término "content type" ("tipo de contenido") en lugar de "media type" (tipo de medios) de acuerdo con el uso actual. Además de esto, en esta especificación, "media type" se puede referir a los medios en que un agente de usuario representa un documento.

Este tipo está representado en el DTD por %ContentType;.

Los tipos de contenido no hacen distinción entre masyúculas y minúsculas.

Ejemplos de tipos de contenido son "text/html", "image/png", "image/gif", "video/mpeg", "text/css", y "audio/basic".

Códigos de idioma

El valor de los atributos cuyo tipo es un código de idioma (%LanguageCode; en el DTD) se refiere a un código de idioma de los especificados en [RFC1766], sección 2. Para información sobre especificación de códigos de idioma en HTML, consulte la sección sobre códigos de idioma. No se permite espacio en blanco dentro del código de idioma.

Los códigos de idioma no distinguen entre mayúsculas y minúsculas.

Codificaciones de caracteres

Los atributos "charset" (%Charset; en el DTD) se refieren a una codificación de caracteres según se describe en la sección sobre codificaciones de caracteres. Los valores deben ser cadenas (p.ej., "euc-jp") del registro IANA (ver [CHARSETS] para una lista completa).

Los nombres de codificaciones de caracteres no distinguen entre mayúsculas y minúsculas.

Los agentes de usuario deben seguir los pasos descritos en la sección sobre especificación de codificaciones de caracteres para determinar la codificación de caracteres de un recurso externo.

Caracteres individuales

Ciertos atributos necesitan un carácter individual del conjunto de caracteres del documento. Estos atributos son del tipo %Character; en el DTD.

Los caracteres individuales pueden especificarse mediante referencias de caracteres (p.ej., "&").

Fechas y horas

La [ISO8601] permite muchas opciones y variaciones en la representación de fechas y horas. La especificación actual usa uno de los formatos descritos en el perfil [DATETIME] para la definición de cadenas fecha/hora legales (%Datetime; en el DTD).

El formato es:

AAAA-MM-DDThh:mm:ssDZH

donde:

AAAA = año con cuatro dígitos

MM = mes con dos dígitos (01=enero, etc.)

DD = día del mes con dos dígitos (de 01 a 31)

hh = hora con dos dígitos (de 00 a 23) (NO se permite am/pm)

mm = minuto con dos dígitos (00 a 59)

ss = segundo con dos dígitos (00 a 59)

DZH = desginador de zona horaria

El designador de zona horaria es uno de los siguientes:

Z. indica UTC (Coordinated Universal Time, Tiempo Universal Coordinado). La "Z" debe ser mayúscula.
+hh:mm indica que la hora es una hora local que está hh horas y mm minutos por delante del UTC.
-hh:mm indica que la hora es una hora local que está hh horas y mm minutos por detrás del UTC.

Deben estar presentes exactamente los componentes mostrados aquí, y exactamente con esta puntuación. Obsérvese que la letra "T" aparece literalmente en la cadenas (debe ser mayúscula), para indicar el comienzo de la hora, según se especifica en [ISO8601]

Si una aplicación generadora no conoce la hora con precisión de segundos, puede usar el valor "00" para los segundos (y para los minutos y para las horas si es necesario).

Nota. [DATETIME] no trata la cuestión de segundos bisiestos.

Tipos de vínculos

Los autores pueden usar los siguientes tipos de vínculos reconocidos, enumerados aquí junto con sus interpretaciones convencionales. En el DTD, %LinkTypes; se refiere a una lista de tipos de vínculos separados por espacios. No se permiten caracteres de espacio en blanco dentro de los tipos de vínculo.

Estos tipos de vínculo no hacen distinción entre mayúsculas y minúsculas, es decir, "Alternate" tiene el mismo significado que "alternate".

Los agentes de usuario, los motores de búsqueda, etc. pueden interpretar estos tipos de vínculos de diferentes maneras. Por ejemplo, los agentes de usuario podrían proporcionar acceso a los documentos vinculados por medio de una barra de navegación.

Alternate Designa una versión alternativa del documento en que aparece el vínculo. Cuando se usa con el atributo hreflang, implica que hay una versión traducida del documento. Cuando se usa conjuntamente con el atributo media, implica que hay una versión diseñada para un medio (o medios) diferentes.
Stylesheet Se refiere a una hoja de estilo externa. Véase la sección sobre hojas de estilo externas para más detalles. Se usa junto al tipo de vínculo "Alternate" para ofrecer hojas de estilo alternativas seleccionables por el usuario.
Start Se refiere al primer documento de un conjunto de documentos. Este tipo de vínculo dice a los motores de búsqueda qué documento es considerado por el autor como el punto de inicio de un conjunto.
Next Se refiere al siguiente documento en una secuencia lineal de documentos. Los agentes de usuario pueden optar por precargar el documento marcado como "next", para reducir el tiempo de carga aparente.
Prev Se refiere al documento anterior en una serie ordenada de documentos. Algunos agentes de usuario también soportan el sinónimo "Previous".
Contents Se refiere a un documento que sirve como tabla de contenidos. Algunos agentes de usuario también soportan el sinónimo ToC (de "Table of Contents").
Index Se refiere a un documento que proporciona un índice para el documento actual.
Glossary Se refiere a un documento que proporciona un glosario de términos que pertenecen al documento actual.
Copyright Se refiere al aviso de copyright del documento actual.
Chapter Se refiere a un documento que actúa como capítulo en una colección de documentos.
Section Se refiere a un documento que actúa como sección en una colección de documentos.
Subsection Se refiere a un documento que actúa como subsección en una colección de documentos.
Appendix Se refiere a un documento que actúa como apéndice en una colección de documentos.
Help Se refiere a un documento que ofrece ayuda (más información, vínculos a otros recursos informativos, etc.)
Bookmark Se refiere a una señal de lectura. Una señal de lectura (bookmark) es un vínculo a un punto de entrada importante dentro de un documento extenso. Se puede utilizar el atributo title, por ejemplo, para dar un rótulo a la señal de lectura. Obsérvese que pueden definirse varias señales de lectura en cada documento.

Los autores pueden querer definir tipos de vínculos adicionales no descritos en esta especificación. Si hacen esto, deberían usar un perfil (profile) citando las convenciones usadas para definir los tipos de vínculos. Véase el atributo profile del elemento HEAD para más detalles.

Descriptores de medios

La siguiente es una lista de los descriptores de medios reconocidos (%MediaDesc; en el DTD).

screen Para pantallas no paginadas de computadora.
tty Para medios que utilicen una cuadrícula de caracteres de ancho fijo, como teletipos, terminales y dispositivos portátiles con posibilidades limitadas de representación.
tv Para dispositivos tipo televisión (baja resolución, en color, desplazamiento limitado).
projection Para proyectores.
handheld Para dispositivos de mano (pantalla pequeña, monocromos, gráficos por mapas de bits, ancho de banda limitado).
print Para material paginado, opaco, y para documentos que se ven en una pantalla en modo de presentación preliminar a la impresión.
braille Para dispositivos táctiles braille.
aural Para sintetizadores de voz.
all Apropiado para todos los dispositivos.

En versiones futuras de HTML pueden introducirse nuevos valores, y podrían permitirse valores parametrizados. Para facilitar la introducción de estas extensiones, los agentes de usuario deben ser capaces de analizar el atributo media como sigue:

El valor es una lista de entradas separadas por comas. Por ejemplo,

media="screen, 3d-glasses, print and resolution > 90dpi"

se transforma en:

"screen"

"3d-glasses"

"print and resolution > 90dpi"

Cada entrada se trunca justo hasta antes del primer caracter que no sea una letra US ASCII [azA-Z] (ISO 10646 hex 41-5a, 61-7a), un dígito [0-9] (hex 30-39), o un guión (hex 2d). En el ejemplo, esto da:

"screen"

"3d-glasses"

"print"

Se hace entonces un emparejamiento con el conjunto de tipos de medios definidos arriba, teniendo en cuenta la diferencia entre mayúsculas y minúsculas. Los agentes de usuario pueden ignorar las entradas que no resulten emparejadas. En el ejemplo nos quedamos con screen y con print.

Nota. Las hojas de estilo pueden incluir variaciones dependientes del medio en su interior (p.ej., la estructura CSS @media). En estos casos puede ser apropiado usar "media=all".

Datos de scripts

Los datos de scripts (%Script; en el DTD) pueden aparecer como contenido del elemento SCRIPT y como valor de los atributos de eventos intrínsecos. Los agentes de usuario no deben evaluar los datos de script como código HTML, sino que deben pasarlos tal y como están como datos para un motor de scripts.

La importancia de la distinción entre mayúsculas y minúsculas en los datos de scripts depende del lenguaje de programación del script.

Obsérvese que los datos de scripts que estén contenidos en un elemento no pueden contener referencias de caracteres, pero los datos de scripts que sean el valor de un atributo sí pueden contenerlas. El apéndice proporciona más información sobre la especificación de datos no HTML.

Datos de hojas de estilo

Los datos de hojas de estilo (%StyleSheet; en el DTD) pueden aparecer como contenido de un elemento STYLE y como valor de un atributo style . Los agentes de usuario no deben evaluar los datos de estilo como código HTML.

La importancia de la distinción entre mayúsculas y minúsculas en los datos de estilo depende del lenguaje de la hoja de estilo.

Obsérvese que los datos de hojas de estilo que estén contenidos en un elemento no pueden contener referencias de caracteres, pero los datos de hojas de estilo que sean el valor de un atributo sí pueden contenerlas. El apéndice proporciona más informacion sobre la especificación de datos no HTML.

Nombres de marcos destino

Excepto los nombres reservados enumerados a continuación, los nombres de marcos destino (%FrameTarget; en el DTD) deben empezar con un carácter alfabético (a-zA-Z). Los agentes de usuario deberían ignorar otros nombres de destino.

Los siguientes nombres de destino están reservados y tienen significados especiales.

_blank

El agente de usuario debería cargar el documento designado en una ventana nueva y sin nombre.

_self

El agente de usuario debería cargar el documento en el mismo marco que el elemento que hace referencia a este destino.

_parent

El agente de usuario debería cargar el documento en el FRAMESET padre inmediato del marco actual. Este valor es equivalente a _self si el marco actual no tiene padre.

_top

El agente de usuario debería cargar el documento en la ventana original completa (cancelando así todos los demás marcos). Este valor es equivalente a _self si el marco actual no tiene padre.

Palabras Reservadas de HTML

<html>: define el inicio del documento HTML, le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML. Esto es así de facto, ya que en teoría lo que define el tipo de documento es el DOCTYPE, que significa la palabra justo tras DOCTYPE el tag de raíz.

· <script>: incrusta un script en una web, o llama a uno mediante src="url del script". Se recomienda incluir el tipo MIME en el atributo type, en el caso de JavaScript text/javascript.

· <head>: define la cabecera del documento HTML; esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario como, por ejemplo, el título de la ventana del navegador. Dentro de la cabecera <head> es posible encontrar:

· <title>: define el título de la página. Por lo general, el título aparece en la barra de título encima de la ventana.

· <link>: para vincular el sitio a hojas de estilo o iconos. Por ejemplo:<link rel="stylesheet" href="/style.css" type="text/css">.

· <style>: para colocar el estilo interno de la página; ya sea usando CSS u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo externo usando la etiqueta <link>.

· <meta>: para metadatos como la autoría o la licencia, incluso para indicar parámetros http (mediantehttp-equiv="") cuando no se pueden modificar por no estar disponible la configuración o por dificultades con server-side scripting.

· <body>: define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes. Dentro del cuerpo <body> es posible encontrar numerosas etiquetas. A continuación se indican algunas a modo de ejemplo:

· <h1> a <h6>: encabezados o títulos del documento con diferente relevancia.

· <table>: define una tabla.

· <tr>: fila de una tabla.

· <td>: celda de una tabla (debe estar dentro de una fila).

· <a>: hipervínculo o enlace, dentro o fuera del sitio web. Debe definirse el parámetro de pasada por medio del atributo href. Por ejemplo:<a href="http://www.example.com" title="Ejemplo" target="_blank" tabindex="1">Ejemplo</a> se representa como Ejemplo).

· <div>: división de la página. Se recomienda, junto con css, en vez de <table> cuando se desea alinear contenido.

· <img>: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la imagen. Por ejemplo: <img src="./imágenes/mifoto.jpg" />. Es conveniente, por accesibilidad, poner un atributo alt="texto alternativo".

· <li><ol><ul>: etiquetas para listas.

· <b>: texto en negrita (etiqueta desaprobada. Se recomienda usar la etiqueta <strong>).

· <i>: texto en cursiva (etiqueta desaprobada. Se recomienda usar la etiqueta <em>).

· <s>: texto tachado (etiqueta desaprobada. Se recomienda usar la etiqueta <del>).

· <u>: Antes texto subrayado. A partir de HTML 5 define porciones de texto diferenciadas o destacadas del resto, para indicar correcciones por ejemplo. (etiqueta desaprobada en HTML 4.01 y redefinida en HTML 5)13 14

La mayoría de etiquetas deben cerrarse como se abren, pero con una barra («/») tal como se muestra en los siguientes ejemplos:

· <table><tr><td>Contenido de una celda</td></tr></table>.

· <script>Código de un script integrado en la página</script>

Programación Web

domingo, 28 de septiembre de 2014

Completar ejercicio

Traducción de "Bullets Points", Html y Css, puntos claves

miércoles, 24 de septiembre de 2014

Validacion de mi página

Evaluaciones de la práctica del tutorial

lunes, 22 de septiembre de 2014

Tutorial de HTML, Actividad 8

miércoles, 10 de septiembre de 2014

Actividad 7

domingo, 7 de septiembre de 2014

Actividad 6