Diferencia entre revisiones de «HTML Básico - Lección 1»

De Wikiversidad
Contenido eliminado Contenido añadido
Talueses (discusión | contribs.)
<!-- Mejorando la introducción -->
Talueses (discusión | contribs.)
<! -- Agregando historia al contenido -->
Línea 14: Línea 14:


'''HTML''' es una aplicación '''SGML''' conforme al estándar ''ISO8879''.
'''HTML''' es una aplicación '''SGML''' conforme al estándar ''ISO8879''.


== Historia ==

Para comenzar, diremos que hoy por hoy, HTML es un estándar para la web. Consolidado por el consorcio [[w:W3C|W3C]].

La invención del HTML permitió el uso de un modelo de contenido almacenado en un servidor central, que podía ser mostrado en un terminal local mediante un navegador. Esto simplificó el acceso al contenido y habilitó la posibilidad de mostrar contenido "enriquecido" (como un sofisticado texto formateado y visualización de imagenes).

En 1989 existían dos técnicas que permitían vincular documentos electrónicos, por un lado los hipervínculos (enlaces) y por otro lado un poderoso lenguaje de etiquetas denominado SGML. Por entonces, Tim Berners-Lee, quien trabajaba en el Centro Europeo de Investigaciones Nucleares [[w:CERN|CERN]] da a conocer a la prensa que estaba trabajando en un sistema que permitirá acceder a ficheros en línea que funcionaba sobre redes de computadoras o máquinas electrónicas basadas en el protocolo TCP/IP. Inicialmente fue desarrollado para que se pueda compartir fácilmente información entre científicos de distintas universidades e institutos de investigación de todo el mundo.15

A principios de 1990, define por fin el HTML como un subconjunto del conocido SGML y crea algo más valioso aún, el World Wide Web.

Tim Berners-Lee, creó el proyecto World Wide Web (Tejido o Telaraña Mundial), así como un sistema que facilitaba la lectura de información, mediante un programa de navegación. Éste sería el primer navegador Web, llamado WorldWideWeb, y desarrollado durante la segunda mitad del año 1990; siendo tiempo después rebautizado como Nexus para evitar confusiones por su nombre que era igual al de la tecnología que representaba. Le siguieron otros dos navegadores: el Line Mode Browser y el ViolaWWW. Este último, desarrollado en 1992, fue el primer navegador en popularizarse entre los primeros usuarios de la World Wide Web.16

Luego, Pei-Yuan Wei presentó el ViolaWWW,17 que funcionaría en modo texto y sobre un sistema operativo UNIX.

Los trabajos para crear un sucesor del HTML, denominado HTML +, comenzaron a finales de 1993. HTML+ se diseñó originalmente para ser un superconjunto del HTML que permitiera evolucionar gradualmente desde el formato HTML anterior. A la primera especificación formal de HTML+ se le dio, por lo tanto, el número de versión 2 para distinguirla de las propuestas no oficiales previas. Los trabajos sobre HTML+ continuaron, pero nunca se convirtió en un estándar, a pesar de ser la base formalmente más parecida al aspecto compositivo de las especificaciones actuales.



== Comenzando ==
== Comenzando ==

Revisión del 17:41 21 ene 2015

Nota: Este curso esta basado en el estándar XHTML del consorcio W3C.

Comenzaremos definiendo qué es el HTML, es el lenguaje básico de casi todo el contenido web. Específicamente, HTML es el lenguaje con el que se escribe la estructura y la semántica del contenido de un documento web. El cual es acrónimo de Lenguaje de Marcado de Hiper Texto (HyperText Markup Language) HTML. La mayor parte de lo que ves al usar cualquier navegador web, está escrita, fundamendalmente, usando HTML.

Básicamente HTML consta de texto plano (ASCII) y una serie de etiquetas (Tags) con la cual luego se le da forma y definición al contenido a mostrar. Los navegadores se encargan de interpretar el código HTML que se escribe, y mostrar éstos a los usuarios finales que es lo que en conjunto con otras tecnologías, da como resultado páginas web, que no es más que; el resultado del código Que no es más que, escribir/comunicarnos en un lenguaje específico. En este caso, HTML HTML interpretado.

HTML es una aplicación SGML conforme al estándar ISO8879.


Historia

Para comenzar, diremos que hoy por hoy, HTML es un estándar para la web. Consolidado por el consorcio W3C.

La invención del HTML permitió el uso de un modelo de contenido almacenado en un servidor central, que podía ser mostrado en un terminal local mediante un navegador. Esto simplificó el acceso al contenido y habilitó la posibilidad de mostrar contenido "enriquecido" (como un sofisticado texto formateado y visualización de imagenes).

En 1989 existían dos técnicas que permitían vincular documentos electrónicos, por un lado los hipervínculos (enlaces) y por otro lado un poderoso lenguaje de etiquetas denominado SGML. Por entonces, Tim Berners-Lee, quien trabajaba en el Centro Europeo de Investigaciones Nucleares CERN da a conocer a la prensa que estaba trabajando en un sistema que permitirá acceder a ficheros en línea que funcionaba sobre redes de computadoras o máquinas electrónicas basadas en el protocolo TCP/IP. Inicialmente fue desarrollado para que se pueda compartir fácilmente información entre científicos de distintas universidades e institutos de investigación de todo el mundo.15

A principios de 1990, define por fin el HTML como un subconjunto del conocido SGML y crea algo más valioso aún, el World Wide Web.

Tim Berners-Lee, creó el proyecto World Wide Web (Tejido o Telaraña Mundial), así como un sistema que facilitaba la lectura de información, mediante un programa de navegación. Éste sería el primer navegador Web, llamado WorldWideWeb, y desarrollado durante la segunda mitad del año 1990; siendo tiempo después rebautizado como Nexus para evitar confusiones por su nombre que era igual al de la tecnología que representaba. Le siguieron otros dos navegadores: el Line Mode Browser y el ViolaWWW. Este último, desarrollado en 1992, fue el primer navegador en popularizarse entre los primeros usuarios de la World Wide Web.16

Luego, Pei-Yuan Wei presentó el ViolaWWW,17 que funcionaría en modo texto y sobre un sistema operativo UNIX.

Los trabajos para crear un sucesor del HTML, denominado HTML +, comenzaron a finales de 1993. HTML+ se diseñó originalmente para ser un superconjunto del HTML que permitiera evolucionar gradualmente desde el formato HTML anterior. A la primera especificación formal de HTML+ se le dio, por lo tanto, el número de versión 2 para distinguirla de las propuestas no oficiales previas. Los trabajos sobre HTML+ continuaron, pero nunca se convirtió en un estándar, a pesar de ser la base formalmente más parecida al aspecto compositivo de las especificaciones actuales.


Comenzando

La mayor parte de la Web no es nada diferente de lo que hay en tu computadora - es justo un grupo entero de archivos clasificados en un grupo de directorios.

Los archivos HTML no son más que simples archivos de texto, así que para comenzar a escribir en HTML, no necesitas más que un simple editor de textos.

El Bloc de Notas es un editor de textos común (en Windows este se encuentra generalmente bajo el menú Programas > Accesorios ). Si estas en linux puedes usar gedit o nano.

Digita esto en tu editor de textos:

Esta es mi primera pagina Web

Ahora crea una carpeta llamada 'html' en la Unidad C (o en cualquier otro lugar de tu elección) y guarda el archivo como 'miprimerapagina.html'. Es importante que la extensión '.html' este especificada - de otro modo algunos editores de textos, tales como el Bloc de notas, lo guardarían automáticamente como '.txt' .

Para mirar archivos HTML, no necesariamente necesitas estar en Internet. Abre un navegador web tal como Firefox , Internet Explorer o Google Chrome y en la barra de la dirección, donde generalmente digitas la dirección web, escribe la localización del archivo que guardaste (por ejemplo, 'c:\html\miprimerapagina.html') y teclea Enter. Alternativamente, ve al menú Archivo del navegador, seleccionar Abrir, y navega por el archivo.

Guau. Ahi esta. Tu primera pagina Web. Excitante. Y todo lo que tomó fue digitar algunas palabras.

Hemos dicho que utilices un editor de texto básico, tal como el Bloc de notas, pero puedes estar tentado a utilizar un programa de software dedicado tal como Macromedia Dreamweaver o Microsoft Frontpage.

Debes tener mucho cuidado al usar estos programas, especialmente si eres un principiante, porque lanzan a menudo un código innecesario o no estándar para 'ayudarte'.

Si desas aprender en serio HTML, debes leer con anterioridad, de modo que por lo menos tengas una idea básica de lo qué estás haciendo. Los programas tales como éstos nunca te darán el mismo control sobre un pagina Web que la codificación a mano.

Etiquetas, Atributos y Elementos

Aunque los fundamentos del HTML son texto plano, necesitamos un poco más para hacer un documento válido de HTML.

Etiquetas

La estructura básica de un documento HTML incluye etiquetas, que rodean el contenido y aplican características a este.

Cambia tu documento de modo que se parezca a este:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>
<body>
      Esta es mi primera pagina web
</body>
</html>

Ahora guarde el documento nuevamente, vaya de nuevo al navegador y seleccione "Recargar" (que actualizara la página).

El aspecto de la página no habrá cambiado, pero el propósito del HTML es agregar significado, no presentación, y en este ejemplo ahora ha definido algunos elementos fundamentales de una pagina Web.

La primera linea en la parte superior que inicia <!DOCTYPE... le indica al navegador que es lo que estas haciendo. Puedes pensar que aun no sabes lo que realmente estas haciendo pero es importante agregar esta directiva. Si no lo haces los navegadores actuaran en "modo caprichoso" y cambiaran de una manera muy peculiar. No te preocupes por esto todavia tu puedes aprender mas acerca de "tipos de documentos" en el Tutorial Avanzado de HTML si realmente lo deseas. Por el momento solo recuerda agregar esta linea al inicio de tus paginas web y sonríe.

Volviendo al punto, <html> es la etiqueta de apertura y le indica al navegador que el contenido entre esta y la etiqueta de cierre </html> es un documento HTML. El contenido entre <body> y </body> es el contenido principal de el documento que aparecera en la ventana del navegador.

Etiquetas de cierre

Los </body> y los </html> cierran sus respectivas etiquetas . TODAS las etiquetas HTML deben ser cerradas. Aunque versiones anteriores de HTML perezoso permitieron que algunas etiquetas no fueran cerradas, los estándares más recientes requieren que todas las etiquetas sean cerradas. Este es un buen hábito a conseguir de todos modos.

No todas las etiquetas tienen etiquetas de cierre como este ( <html></html>). Algunas etiquetas, que no engloben contenido alrededor se cerrarán en sí mismas. La etiqueta de romper-linea por ejemplo, luce como esto: <br /> . Veremos estos ejemplos más adelante. Todo lo que necesitas recordar es que todas las etiquetas deben cerrarse y la mayoría (ésto con contenido entre ellas) tienen el formato de etiqueta de apertura → contenido → etiqueta de cierre.

Es importante que si abres varias etiquetas, las cierres en orden inverso al que las has abierto. En el ejemplo anterior, la etiqueta <body> se abre y se cierra dentro de la etiqueta <html> . La mayoría de los navegadores no dan problema si esto no se toma en cuenta (por ejemplo, si usas <b><i> texto </b></i> para mostrar un texto en negrita y cursiva, o si usas una etiqueta <br /> sin cerrarla), pero es necesario para tener un código bien formado.

Atributos

Las etiquetas pueden tener también atributos, que son partes de información adicional. Los atributos se encuentran entre la etiqueta de apertura y su valor siempre va entre comillas. Esto luce como <etiqueta atributo= " valor " > Contenido </etiqueta>. Hablaremos de etiquetas con atributos más adelante.

Elementos

Las etiquetas no son más que marcas al principio y al final de un elemento. Los elementos son los textos que componen las paginas Web. Dirías, por ejemplo, que todo lo que esta entre e incluido en las etiquetas <body> y </body> es el elemento cuerpo. Como otro ejemplo, mientras que ' <title> ' y ' </title> ' son etiquetas, ' <title> Wikipedia </title> ' es el elemento título.

Títulos de Pagina

Todas las paginas HTML deben tener un titulo de pagina.

Para agregar un título a tu página, cambia el código de modo que se parezca a este:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>
<head>
	<title> Mi primera pagina web </title>
</head>
<body>
      Esta es mi primera pagina web
</body>
</html>

Hemos agregado dos nuevos elementos, este comienza con la etiqueta head y la etiqueta titulo (y note como ambas también se cierran).

El elemento head (el cual comienza con la etiqueta <head> y termina con la etiqueta </head> ) aparece antes del elemento cuerpo (que inicia con <body> y termina con </body> ) y contiene la información acerca de la página. La información en el elemento head no aparece en la ventana del navegador.

Veremos después que otros elementos pueden aparecer dentro del elemento head, pero el más importante de ellos es el elemento título.

Si miras este documento en el navegador (guardar y recargar como antes), verás que "mi primera pagina web" aparecerá en la barra de título de la ventana (no el área de contenido real). El texto que pusiste entre las etiquetas del título se ha convertido en el título del documento (sorpresa!). Si agregas esta página a tus 'favoritos' (o 'marcadores', dependiendo de tu navegador), verías que el título también se usa allí.

Proyecto: Diseño Web
Anterior: Diseño Web — HTML Básico - Lección 1 — Siguiente: HTML Básico - Lección 2