2. CODIGO HTML

EL CÓDIGO HTML

HTML es un lenguaje que se emplea para el desarrollo de páginas de internet. Está compuesto por una seríe de etiquetas que el navegador interpreta y da forma en la pantalla. HTML dispone de etiquetas para imágenes, hipervínculos que nos permiten dirigirnos a otras páginas, saltos de línea, listas, tablas, etc.  Es un código orientado a la elaboración de páginas web estática.   HTML   es el acrónicmo HyperText Markup Language («lenguaje de marcas de hipertexto»),

  1. Historia del desarrollo de 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 llamado W3C (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.

  1. Estructura básicas HTML

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.  La mayor parte de  estas etiquetas se abren y se cierra por ejemplo <br>…</br>, algunas no se cierran.

 

CODIGO DE LA ESTRUCTURA BASICA

<HTML>

<HEAD>

<TITLE>Título de la página

</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

 

 

  1. SIGNIFICADO DE LAS ETIQUETAS HTML

 

<HTML>…</HTML>: Indica al navegador que este archivo es un documento HTML. </HTML> significa el final del documento.

<HEAD>…</HEAD>  Principio del encabezado. El encabezado puede contener otro material adicional que no es mostrado en la página. Pueden ser comentarios y meta-tags que proveen información a los navegadores y motores de búsqueda acerca del documento. </HEAD> significa el final del encabezado.

<TITLE>…</TITLE> Este indica el inicio del título de su página de inicio, el cual no se muestra en el documento. </TITLE> indica el fin del título.

<BODY>…<\BODY>Le indica al navegador que aquí empieza el cuerpo del </BODY> indica el fin del cuerpo del documento.

 

  1. Etiquetas para publicación de texto

 

<u></u>                Define la texto subrayado

<center></center> Centrar texto o imagen

<b></b>                 Define letra estilo negrita

<Font  color=”red”>     Color del texto es rojo.

<b></b>                 Fuente estilo negrita

<h1>  </h1>          Tamaño de los encabezado. Ayuda a ser mejor encontrado por  los

Buscadores.

 

ATRIBUTOS

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á:

<A HREF=”http://www.crispin.19dediciembre.com”>Pagina principal del Inst. 19 de Diciembre de 1881</A>

En este caso la etiqueta A presenta un atributo HREF cuyo valor es http://www.crispin.19dediciembre.com

Igualmente una etiqueta podría presentar varios atributos:

<HR ALIGN=LEFT NOSHADE SIZE=5 WIDTH=50%>

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.

Etiqueta Font

ATRIBUTOS:

Face=”arial”             tipo de fuente

Size=”5″

 

Etiqueta A

ATRIBUTOS: REF

<a href=”/mailto: alguien@gmail.com“>

Mandar email</a>                                         Enviar correo electrónico

<a href=”http://www.google.com/”> <img src=”/../graficos/google.gif”></a>       Enlace a un sitio con imagen de icono

<a href=”video/upn.docx”>DESCARGAR </a> Descargar documento de Word. Coloque .doc si la versión del documento es creada con Word previa a la versión 2007

LISTAS EN HTML LISTAS ORDENADAS

 

            ETIQUETA                                      RESULTADO

<OL>
<LI>Lunes</LI>                                 1. Lunes
<LI>Martes</LI>                                2. Martes
</OL>
ETIQUETA                                      RESULTADO

<OL TYPE=”I”>
<LI>Lunes</LI>                                 I.    Lunes
<LI>Martes</LI>                               II.  Martes
</OL>

 

<OL TYPE=”a”>
<LI>Lunes</LI>                                 a. Lunes
<LI>Martes</LI>                               b. Martes
</OL>

 

<OL TYPE=”A”>
<LI>Lunes</LI>                                 A. Lunes
<LI>Martes</LI>                               B. Martes
</OL>

 

LISTAS NO ORDENADAS
<UL>
<LI>Lunes</LI>                                  . Lunes                       .
<LI>Martes</LI>                                . Martes.                     .
</UL>

 

<ul style=”color:blue”>             Son viñetas de color azul

<li>vita

<li>lina

</ul>

 

<ul type=”square”>                  Son viñetas  tipo cuadrado

<li>vita

<li>lina

</ul>

 

<ul type=”circle”>                     Son viñetas  tipo circulo

<li>vita

<li>lina

</ul>

 

ETIQUETAS QUE NO TIENEN CIERRE

<p>               Define un párrafo Ejemplo del uso de la etiqueta <p> </p>

<!– –>                   Define un comentario en un código HTML. No lo muestra en el navegador.

<br>              Define un salto de línea

<hr>              Define una línea horizontal

<I>                Define letra cursiva

  1. Etiquetas de identificación

<BODY background=”images/fondoA.gif”>…</BODY>     Imagen de fondo para una pàgina

<BODY background=”#003399″>…</BODY>                     Color del fondo.

<BODY bgcolor=”#FFFF00″>                               Color de fondo

<marquee></marquee>                                               Marquesina

<meta name=”author” content=”Jorge Perez”>   Identifica al autor de la web

<BLINK></BLINK>                                              Hace parpadear el texto.

  1. Etiquetas multimedios

INCERTAR IMAGEN          <img src=”http://www.virtualnauta.com/imagenes/paisaje.jpg”>

MIDI FONDO                  <BGSOUND SRC=”audio/ahora.mid” LOOP=INFINITE>

<EMBED> loop indica Número de veces que se reproduce el archivo de sonido. Para permanente se usa INFINITE o -1.

MP3 DE FONDO              <bgsound src=”audio/himno.mp3″ loop=”-1″>

REPRODUCTOR mp3       <embed src=”audio/himno. mp3″ autostart=”false” loop=”true”>

REPRODUCTO video AVI <embed src=”video/lop.avi” autostart=”false” loop=”true”>

<a href=”musica/himno19.MP3″>regueton</a>   reproducir mp3 en navegador y descargar.

 

 IMÁGENES

Formatos de imagen
Los formatos de imagen que se usan regularmente en los documentos en HTML, son el GIF, JPEG Y BITMAP. Al seleccionar el formato, hay que considerar particularmente el peso (kilobytes) y la calidad de una imagen (cantidad de colores).

 

<img src=”../images/clipart/ft_tiendita.jpg” width=”300″ height=”225″ border=”4″ align=”right” hspace=”5″>                             Dependerá del directorio

 

ALINEACION DE LA IMAGEN

 <img scr=”imagenes/logo_animales.gif” align=”middle”>     Inserta imagen  definida con alineación  middle

puede ser cambiado por

 align=”middle” Alinear en medio.
 align=”absmiddle” Alinear perfectamente en medio.
 align=”bottom” Alinear abajo.
 align=”left” Alinear hacia la izquierda.
 align=”right” Alinear hacia la derecha.

 

INSERTAR IMAGEN DEFINIENDO SU TAMAÑO

 

<img src=”../images/clipart/ft_tiendita.jpg” width=”300″ height=”225″ border=”4″ align=”right” hspace=”5″>

ENLACES

Vínculo externo
Recordemos que todos los sitios en la Internet tiene una dirección o URL (Universal Ressource Locator o en español, Localizador Universal de Recursos). Los vínculos externos son enlaces entre sitios distintos y se indican colocando el URL de la página a dónde queremos enviar al usuario.
Los URL, generalmente son expresados de esta manera:
href=”http://www.google.com.mx”

<A href=”URL o dirección o ruta de acceso al documento”>…</A>

href=”http://www.19dediciembre.com”

href=“archivo.html”

 

ENLACES ANCLADOS

 

<BODY bgcolor=”#FFFFFF” text=”#333333″ link=”#CC3300″ vlink=”#FF6600″ alink=”#CC3300″>
<!–Este es el punto de anclaje o ancla–>
<A name=”arriba”></A>

ALINEACION DE LA IMAGEN:  EL ALIN DE ARRIBA PUEDE SER CAMBIADO POR ESTAS OPCIONES

 align=”middle” Alinear en medio.
 align=”absmiddle” Alinear perfectamente en medio.
 align=”bottom” Alinear abajo.
 align=”left” Alinear hacia la izquierda.
 align=”right” Alinear hacia la derecha.

IMAGEN CON VINCULO

<A href=“nombrearchivo.htm”><IMG src=“nombreimagen.gif/jpeg”></A>

 PASOS PARA LA ELABORACIÓN DE  UNA PÁGINA WEB EN HTML

 Cree una carpeta en el disco D: o en el C: y dele un nombre (si usa dos nombres se le puede hacer complicado a la hora de indetificar los vínculos) por ejemplo proyecto. No use nombres con tildes y ñ.   No utilice el escritorio de su pc para hacer le directorio. Esto para que la ruta del documento no se pierda al migrar la página.

  1. Dentro de la carpeta de directorio se crean carpetas dedicadas para guardar archivos según el tipo: imágenes, multimedios, documentos, etc. Coloque dentro del directorio imágenes, textos, las que deben tener un nombre sin ´ y ñ.
  2. Abril un bloc de notas
  3. Redacte la estructura básica tal cual se indica anteriormente.
  4. Guarde el archivo, siendo éste la primera página use el nombre de index.html (note que se hace todo el minúscula y sin espacios. Las siguientes páginas deben llevar otros nombres siempre y cuando respetando no tener ñ ni ´.
  5. Se debe usar archivos comprimidos para evitar que la web no sea tan pesada
  6. Todos los archivos que se usen en la página web deben estar en el directorio.
  7. Deben usarse imágenes y colores de fondo de acuerdo al tema y a la imagen de la empresa.
  8. Una vez guardado el archivo de bloc de nota se va a generar un archivo con ícono de navegador que tenga por defecto. Sigan trabajando en el bloc de notas para agregar texto e imágenes según las etiquetas que se le indican

PARA ELABORAR EL TRABAJO DE ESTE APARTADO DEBES DESCARGAR LA LISTA DE TAREAS I PARCIAL

Descarga el archivo   en formato de impresión sobre este tema

descarga

TUTORIALES SOBRE HTML

INICIO DEL PAGINA

CREACIÓN DE TABLAS

TEXTOS E IMÁGENES 

EDICIÓN DE TEXTO

CREACIÓN DE ENLACES

PUEDES SEGUIR LOS TUTORIALES DESDE YOUTUBE.COM

Be the first to comment

Deja un comentario.

Tu dirección de correo no será publicada.


*