Inicio > Desarrollo Web I > Actividades > Actividad HTML > Solución

Solución

1. Historia del HTML

La historia completa de HTML es tan interesante como larga, por lo que a continuación se muestra su historia resumida a partir de la información que se puede encontrar en la Wikipedia.

El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador del CERN(Organización Europea para la Investigación Nuclear) propuso un nuevo sistema de "hipertexto"para compartir documentos.

Los sistemas de "hipertexto" habían sido desarrollados años antes. En el ámbito de la informática, el"hipertexto" permitía que los usuarios accedieran a la información relacionada con los documentos electrónicos que estaban visualizando. De cierta manera, los primitivos sistemas de "hipertexto"podrían asimilarse a los enlaces de las páginas web actuales.

Tras finalizar el desarrollo de su sistema de "hipertexto", Tim Berners-Lee lo presentó a una convocatoria organizada para desarrollar un sistema de "hipertexto" para Internet. Después de unir sus fuerzas con el ingeniero de sistemas Robert Cailliau, presentaron la propuesta ganadora llamada WorldWideWeb (W3).

El primer documento formal con la descripción de HTML se publicó en 1991 bajo el nombre HTML Tags (Etiquetas HTML) y todavía hoy puede ser consultado online a modo de reliquia informática.

La primera propuesta oficial para convertir HTML en un estándar se realizó en 1993 por parte del organismo IETF (Internet Engineering Task Force). Aunque se consiguieron avances significativos (en esta época se definieron las etiquetas para imágenes, tablas y formularios) ninguna de las dos propuestas de estándar, llamadas HTML y HTML+ consiguieron convertirse en estándar oficial.

En 1995, el organismo IETF organiza un grupo de trabajo de HTML y consigue publicar, el 22 de septiembre de ese mismo año, el estándar HTML 2.0. A pesar de su nombre, HTML 2.0 es el primer estándar oficial de HTML.

A partir de 1996, los estándares de HTML los publica otro organismo de estandarización llamadoW3C (World Wide Web Consortium). La versión HTML 3.2 se publicó el 14 de Enero de 1997 y es la primera recomendación de HTML publicada por el W3C. Esta revisión incorpora los últimos avances de las páginas web desarrolladas hasta 1996, como applets de Java y texto que fluye alrededor de las imágenes.

HTML 4.0 se publicó el 24 de Abril de 1998 (siendo una versión corregida de la publicación original del 18 de Diciembre de 1997) y supone un gran salto desde las versiones anteriores. Entre sus novedades más destacadas se encuentran las hojas de estilos CSS, la posibilidad de incluir pequeños programas o scripts en las páginas web, mejora de la accesibilidad de las páginas diseñadas, tablas complejas y mejoras en los formularios.

La última especificación oficial de HTML se publicó el 24 de diciembre de 1999 y se denomina HTML 4.01. Se trata de una revisión y actualización de la versión HTML 4.0, por lo que no incluye novedades significativas.

Desde la publicación de HTML 4.01, la actividad de estandarización de HTML se detuvo y el W3C se centró en el desarrollo del estándar XHTML. Por este motivo, en el año 2004, las empresas Apple, Mozilla y Opera mostraron su preocupación por la falta de interés del W3C en HTML y decidieron organizarse en una nueva asociación llamada WHATWG (Web Hypertext Application Technology Working Group).

La actividad actual del WHATWG se centra en el futuro estándar HTML 5, cuyo primer borrador oficial se publicó el 22 de enero de 2008. Debido a la fuerza de las empresas que forman el grupo WHATWG y a la publicación de los borradores de HTML 5.0, en marzo de 2007 el W3C decidió retomar la actividad estandarizadora de HTML.

De forma paralela a su actividad con HTML, W3C ha continuado con la estandarización de XHTML, una versión avanzada de HTML y basada en XML. La primera versión de XHTML se denomina XHTML 1.0 y se publicó el 26 de Enero de 2000 (y posteriormente se revisó el 1 de Agosto de 2002).

XHTML 1.0 es una adaptación de HTML 4.01 al lenguaje XML, por lo que mantiene casi todas sus etiquetas y características, pero añade algunas restricciones y elementos propios de XML. La versión XHTML 1.1 ya ha sido publicada en forma de borrador y pretende modularizar XHTML. También ha sido publicado el borrador de XHTML 2.0, que supondrá un cambio muy importante respecto de las anteriores versiones de XHTML.

2. Estructura de una página en html

Todos los documentos Html tienen la estructura que se muesta a continuación, aunque la etiqueta

puede ser sustituida por para un tipo de páginas que dividen la ventana del navegador en varios cuadros (frames).

...Aquí iría el contenido de la página

Vamos a analizar más detenidamente las distintas secciones que componen la página

Entre las etiquetas

y se suelen colocar otras opcionales, como por ejemplo:

En este caso las etiquetas le indican a los buscadores el contenido de nuestras páginas (description) y algunas palabras clave (keywords) para su localización.

La cabecera es la sección comprendida entre

y . En ella se encuentra necesariamente el título (entre las etiquetas

y ).

El título de la página debe describir su contenido por ejemplo:

no valdría en cambio

ya que esto no dice nada por si solo

Dentro de la cabecera también se suele incluir código en JavaScript, que se reconoce porque va comprendido entre las etiquetas

El cuerpo (body) del documento html es normalmente lo más importante. Es aquí donde debemos colocar el contenido de nuestra página: texto, fotos, etc.

El cuerpo está delimitado por las etiquetas

y La etiqueta suele contener algunos atributos, a saber:

BGCOLOR parámetro usado para especificar el color de fondo de la página. El color se define como una terna de números (#rrggbb) en base hexadecimal en el orden rojo, verde, azul (Red, Green, Blue). También se puede usar el nombre en inglés de los colores predefinidos en los navegadores.

Sintaxis:

o

Una buena ayuda para la seleccion de colores con #rrggbb la puedes encontrar en: Paleta de Colores

TEXT, parametro usado para definir el color del texto por omision. Su formato es el mismo que el de BGCOLOR. Si no se pone nada es negro.

LINK, VLINK, ALINK, parámetros usados para especificar el color por omision de: texto con enlace, enlace ya visitado y enlace activo.

Los colores por omision son LINK=blue, VLINK=purple y ALINK=red. El formato es el mismo que BGCOLOR.

BACKGROUND, parámetro usado para especifica la ruta y nombre de archivo (URL) de la imagen que será usanda como fondo del documento. Esta se verá como mosaico para cubrir toda la ventana si es pequeña (lo habitual).

Sintaxis:

Es conveniente especificar la ruta de modo relativo, esto quiere decir que si cambiamos el directorio completo donde están nuestras páginas, desde C:\ a C:\webs por ejemplo, la ruta especificada debe seguir siendo válida.
Por ejemplo si la página desde la que hacemos el enlace se encuentra en el directorio Aprendiendo Html y queremos poner como fondo la imagen fondo.gif, que se encuentra en gifs, se debe poner:

Si la página estuviese en ejemplos se pondría:

Fíjate en ../ pues es lo que indica al navegador que debe acudir al directorio superior

3. Que es una etiqueta y cual es su sintáxis para su manejo en html?

1 - Etiquetas del lenguaje HTML

Las Etiquetas

El lenguaje HTML es un lenguaje de marcas, estas marcas serán fragmentos de texto destacado de una forma especial que permiten la definición de las distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas estructuras del lenguaje. A estas marcas las denominaremos etiquetas y serán la base principal del lenguaje HTML. En documento HTML será un fichero texto con etiquetas que variarán la forma de su presentación.

Una etiqueta será un texto incluido entre los símbolos menor que < y mayor que >.. El texto incluido dentro de los símbolos será explicativo de la utilidad de la etiqueta. Por ejemplo:

Letra Negrita, del inglés Bold (negrita).

Definirá una tabla.
Inclusión de una IMaGen.
       Existe normalmente una etiqueta de inicio y otra de fin, la de fin contendrá el mismo texto que la de inicio añadiéndole al principio una barra inclinada /. El efecto que define la etiqueta tendrá validez para todo lo que este incluido entre las etiquetas de inicio y fin, ya sea texto plano o otras etiquetas HTML.

     Elementos Afectados por la Etiqueta

     Por ejemplo, con la etiqueta siguiente:

Texto que será en negrita.

Obtendremos:

     Texto que será en negrita

     Algunas etiquetas no necesitarán la de fin, serán aquellas en las que el final este implícito, por ejemplo

párrafo,
salto de línea ó inclusión de una imagen. Definen un efecto que se producirá en un punto determinado sin afectar a otros elementos.

     El uso de mayúsculas o minúsculas en las etiquetas es indiferente, se interpretarán del mismo modo en ambos casos, pero lo normal es expresarlas en mayúsculas para que destaquen con más nitidez del texto normal.

Atributos de las Etiquetas

     Las etiquetas pueden presentar modificadores que llamaremos atributos que permitirán definir diferentes posibilidades de la instrucción HTML. Estos atributos se definirán en la etiqueta de inicio y consistirán normalmente en el nombre del atributo y el valor que toma separados por un signo de igual. El orden en que se incluyan los atributos es indiferente, no afectando al resultado. Si se incluyen varias veces el mismo atributo con distintos valores el resultado obtenido será imprevisible dependiendo de como lo interprete el navegador. Cuando el valor que toma el atributo tiene más de una palabra deberá expresarse entre comillas, en otro caso no será necesario.

     Un ejemplo de atributo será:

     Pagina'>https://www.uca.es">Pagina principal de la UCA

     En este caso la etiqueta A presenta un atributo HREF cuyo valor es https://www.uca.es.

     Igualmente una etiqueta podría presentar varios atributos:



--------------------------------------------------------------------------------

     En este caso la etiqueta HR presenta cuatro atributos. El segundo atributo NOSHADE es un caso especial que no presenta valor. El orden en que se especifiquen los atributos no afectarán al resultado final.

Etiquetas correctas

Todo texto que se encuentre entre los caracteres < y > se considerará una etiqueta, si la etiqueta no fuera una de las validas del lenguaje HTML no será tenida en cuenta, sin causar ningún tipo de error. Dejándose el texto o las etiquetas a las que afectaba como si no existiera la etiqueta extraña. Cuando se comete un error sintáctico al expresar una etiqueta o un atributo no se producirá ningún error, simplemente no de obtendrá el efecto que deseábamos.

 El lenguaje HTML es un lenguaje que evoluciona muy rápidamente y cada nueva versión de los programas navegadores presenta etiquetas nuevas que causan efectos más espectaculares o atributos nuevos de las etiquetas ya existentes. Esto causa que los programas más antiguos no entiendan estas nuevas etiquetas y por tanto las considere erróneas y no realice la acción que deseábamos. Dándose el caso de atributos que son validos solo para un único navegador.

 Cuando creemos código HTML hay que hacerlo lo más estándar posible para permitir que el documento pueda ser visto de forma efectiva por distintos navegadores en maquinas distintas. Por tanto debemos renunciar a efectos espectaculares que solo tienen validez en un navegador e intentar comprobar como se ve el documento en una variedad de navegadores, ya que las personas que se conectan a nuestras páginas no tendrán en la mayoría de los casos el mismo que nosotros. Tambien es interesante como se vería el documento en los distintos tamaños de la ventana del navegador, teniendo en cuenta que todos no tienen un monitor con la misma resolución.

 En este manual se han tratado de incluir las características más estándar de HTML y en caso de tratarse de instrucciones más particulares se indicará convenientemente.

4. Etiquetas básicas que maneja html con ejemplos

Etiquetas HTML

Esta es una lista de etiquetas utilizadas en el código HTML idioma. Cada etiqueta comienza con un abridor de etiqueta (a menos que) y termina con una etiqueta más cerca (signo mayor que). Muchas etiquetas tienen etiquetas de cierre que idénticos excepto por una barra después de la apertura de la etiqueta correspondiente. (Por ejemplo, el TÍTULO etiqueta).

Algunas etiquetas toman parámetros, llamados atributos. Los atributos se dan después de la etiqueta, separados por espacios. Algunos atributos tienen un efecto, sólo con su presencia, otros son seguidos por un signo igual y un valor. (Vea el ancla etiqueta, por ejemplo). Los nombres de etiquetas y atributos no distinguen entre mayúsculas y minúsculas: pueden estar en minúsculas, superior, o mezclado con exactamente el mismo significado.(En este documento están generalmente representados en mayúsculas.)

Actualmente los documentos HTML se transmiten sin las etiquetas normales encuadre SGML, pero si estas se incluyen analizadores se ignore.

Título

El título de un documento se da entre las etiquetas de título:
 
 <title></title>

El texto entre la apertura y el cierre de etiquetas es un título para el nodo de hipertexto. Sólo debe haber un título en cualquier nodo. Se debe identificar el contenido del nodo en un contexto bastante amplio, y debe encajar perfectamente en una línea.

El título no es estrictamente parte del texto del documento, pero es un atributo del nodo. No puede contener anclas, marcas de párrafo, o resaltado. el título se puede utilizar para identificar el nodo en una lista de historial, para etiquetar la ventana que muestra el nodo, etc No se muestra normalmente en el texto de un documento en sí. Contraste títulos con títulos .

Siguiente ID

Obsoleto: sólo Browser NeXT. Puede ser ignorado. Esta etiqueta tiene un atributo único, que es el número de la siguiente identificador numérico de todo documento que se asignarán (no es bueno SGML). Tenga en cuenta que al modificar un documento, los identificadores de anclaje de edad no deben ser reutilizados, ya que puede haber referencias almacenadas en otro lugar que apuntan a ellos. Esto se lee y se genera por los editores de hipertexto. Escritores humanos de HTML suelen utilizar identificadores alfa mnemotécnicos. Software Browser puede ignorar esta etiqueta. Ejemplo de uso:
 <nextid 27=""> </nextid>
Dirección base

Anclas especifican direcciones de otros documentos, en una de relativa a la dirección del documento actual. Normalmente, la dirección de un documento es conocido en el navegador, ya que se utiliza para acceder al documento. Sin embargo, es un documento que se envía por correo, o es de alguna manera visible con más de una dirección (por ejemplo, a través de su nombre de archivo y también a través de su número de catálogo del servidor de nombre de la biblioteca), el navegador tiene que saber la dirección de base para deducir correctamente externa direcciones de documentos.

El formato de este tag no se especifica. ACTUALMENTE NO UTILIZADO

Anclas

El formato de un ancla es la siguiente:
<nextid 27=""> <a href="XXX" name="xxx"> ... </a><a href="XXX" name="xxx"> </a></nextid>
El texto entre la etiqueta de apertura y la etiqueta de cierre es o bien el inicio o destino (o ambas) de un enlace. Atribuciones de la etiqueta de anclaje son los siguientes.
HREFSi el atributo HREF está presente, el anclaje es el texto senstive: el inicio de un enlace. Si el lector selecciona este texto, que debe presentarse con otro documento cuya dirección de red se define por el valor del atributo HREF. El formato de la dirección de red se especifica en otra parte . Esto permite que la forma HREF = # identificador para hacer referencia a otra ancla en el mismo documento. Si el anclaje está en otro documento, el atributo es un nombre relativo , en relación con la dirección de documentos (o especificado dirección base si lo hay).NOMBREEl nombre del atributo permite el anclaje de ser el destino de un vínculo. El valor del parámetro es la parte de una dirección de hipertexto que sigue a la almohadilla .TIPOUn tipo de atributo puede dar a la relación descrita por el enlace hyertext. El tipo se expresa por una cadena para la extensibilidad. Cuerdas de tipos con una semántica particular, serán registradas por el equipo de W3. La relación por defecto si ninguna otra se le da no es válida.
Todos los atributos son opcionales, aunque uno de NOMBRE y HREF es necesario que el ancla sea útil.

ISINDEX

Esta etiqueta informa al lector de que el documento es un documento de índice. Además de la lectura, el lector puede utilizar una búsqueda por palabra clave.

Formato:
<nextid 27=""> 
 <isindex>
 </isindex>
 </nextid>
El nodo puede ser consultada con una búsqueda por palabra clave sufijando la dirección de nodo con un signo de interrogación, seguido de una lista de palabras clave separadas por signos +. Ver el formato de dirección de red .

Plaintext

Esta etiqueta indica que todo el texto siguiente debe ser tomada literalmente, hasta el final del archivo. Texto sin formato está diseñado para ser representado de la misma manera que en el ejemplo de texto XMP, con carácter ancho fijo y saltos de línea significativas. Formato:
<nextid 27=""> <plaintext> </plaintext></nextid>
Esta etiqueta permite al resto de un archivo para ser leído de manera eficiente sin analizar. Su presencia es una optimización. No existe una etiqueta de cierre.

Secciones de ejemplo

Estos estilos permiten texto de caracteres de ancho fijo para ser embebido absolutamente como es en el documento. El formato es:
<plaintext><nextid 27=""> <listing> ... </listing> </nextid></plaintext>
El texto entre esas etiquetas es ser retratado en una fuente de ancho fijo, por lo que se mantendrá ningún tipo de formato realizado por el espaciado de caracteres en las líneas sucesivas. Entre los códigos de apertura y de cierre:
El texto puede contener cualquier carácter imprimible Latina ISO, incluyendo la apertura de la etiqueta, con tal de que no contiene la etiqueta de cierre en su totalidad.
Límites de línea son importantes, y se han de interpretar como una acción para el inicio de una nueva línea.
El ASCII Horizontal Tab (HT) carácter debe ser interpretado como el número distinto de cero positivo más pequeño de los espacios que dejará el número de caracteres hasta ahora en la línea como un múltiplo de 8.Su uso no se recomienda sin embargo.

La etiqueta LISTADO es retratado de manera que al menos 132 caracteres caben en una línea. La etiqueta XMP es retratado en una fuente para que al menos 80 caracteres que caben en una línea, pero lo demás es idéntica a la cotización. Los ejemplos de marcas se dan aquí usando la etiqueta XMP.

Párrafo

Esta etiqueta indica un nuevo párrafo. La representación exacta de este (sangría, interlineado, etc) no se define aquí, y puede ser una función de otras etiquetas, hojas de estilo, etc El formato es simplemente
<listing><plaintext><nextid 27=""> 
  
 </nextid></plaintext></listing>
(En términos de SGML, elementos de párrafo se transmiten en forma minimizada).

Encabezamientos

Varios niveles (al menos seis) de la partida son compatibles. Tenga en cuenta que un documento de hipertexto tiende a necesitar menos niveles de encabezamiento que un documento normal cuya única estructura viene dada por la anidación de las partidas. H1 es el más alto nivel de partida, y se recommened para el inicio de un nodo de hipertexto. Se sugiere que el primer título sea uno adecuado para un lector que ya está navegando en la información relacionada, en contraste con el título de la etiqueta que debe identificar el nodo en un contexto más amplio.
<listing><plaintext><nextid 27=""> 
 <h1>, </h1>
 <h2>, </h2>
 <h3>, </h3>
 <h4>, </h4>
 <h5>, </h5>
 <h6>
  </h6>
 </nextid></plaintext></listing>
Estas etiquetas se mantienen tal como se define en la guía del CERN SGML. Su definición es completamente histórico, derivado de la AAP conjunto de etiquetas. Una diferencia es que los documentos HTML permiten rúbricas que se terminaron mediante etiquetas de cierre:
<listing><plaintext><nextid 27=""> Encabezamiento 
 <h2>Segundo nivel </h2>
 </nextid></plaintext></listing>
Dirección

Esta etiqueta es para información de direcciones, firmas, etc, normalmente en la parte superior o inferior de un documento. normalmente, es cursiva y / o justificado a la derecha o la sangría. El formato es:
<listing><plaintext><nextid 27=""> Texto <dirección> ... </dirección> </nextid></plaintext></listing>
Destacando

Las etiquetas de frases resaltadas pueden ocurrir en texto normal, y pueden ser anidados. Para cada etiqueta de apertura debe seguir una etiqueta de cierre correspondiente. ACTUALMENTE NO UTILIZADO.
<dirección><listing><plaintext><nextid 27=""> <hp1> ... <hp2> ... </hp2></hp1> etc </nextid></plaintext></listing></dirección>
Glosarios

Un glosario (o lista de definición) es una lista de los puntos de cada uno de los cuales tiene un título corto junto a él. Aparte de glosarios, este formato es útil para la presentación de un conjunto de elementos con nombre para el lector. El formato es el siguiente:
<hp1><hp2><dirección><listing><plaintext><nextid 27=""> 
 <dl>
 <dt>
 Plazo </dt>
 </dl>
 <dl>
 <dd>
 definición pagagraph 
 <dl>
 <dt>
 Term2 </dt>
 </dl>
 <dl>
 <dd>
 Definición de term2 </dd>
 </dl>
 </dd>
 </dl>
 </nextid></plaintext></listing></dirección></hp2></hp1>
Listas

Una lista es una secuencia de párrafos, cada uno de los cuales está precedido por una marca o el número de secuencia especial. El formato es:
<hp1><hp2><dirección><listing><plaintext><nextid 27=""> Lista 
 <ul>
 <li>elemento 
 <ul>
 <li>otro elemento de la lista ... </li>
 </ul>
 </li>
 </ul>
 </nextid></plaintext></listing></dirección></hp2></hp1>
La lista de etiquetas de apertura debe ser seguida inmediatamente por el primer elemento de la lista. La representación de la lista no se define aquí, pero una lista con viñetas para listas desordenadas, y una secuencia de párrafos numerados para una lista ordenada sería muy apropiado. Otras posibilidades para la visualización interactiva incluyen paneles de navegación desplazables embebidos.

Nómina de Apertura de las etiquetas son:
ULUna lista de los párrafos multilínea, normalmente separadas por un espacio blanco.MENÚUna lista de los párrafos más pequeños. Normalmente una línea por cada elemento, con un estilo más compacto que UL.DIRUna lista de elementos cortos, menos de una línea. Estilo típico es el de organizar en cuatro columnas o proporcionar un navegador, etc
la etiqueta de cierre debe, obviamente, que coincida con la etiqueta de apertura.

5. Manejo de tablas en Html, Realizar un ejemplo
Tablas en html.docx (13,7 kB)

Solución

Buscar en el sitio

Contacto