HTML Básico - Lección 1

Ortografía

Esta página o sección necesita una revisión de ortografía y gramática.
Puedes ayudar editándolo

El HTML (HyperText Markup Language), es el lenguaje de marcas de hipertexto usado para describir documentos con vínculos a otros recursos de la red. HTML define un conjunto de etiquetas usadas para marcar la estructura y semántica de una página web. HTML es el acrónimo anglosajón de Lenguaje de Marcado de Hiper Texto (HyperText Markup Language) HTML. La mayor parte de lo que ves al usar un navegador web está escrita, fundamendalmente, usando HTML.

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

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 dar inicio, 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 Los archivos HTML no son más que simples archivos de texto, con la extensión .html, así que para comenzar a escribir en HTML, principalmente lo que nos hace falta es, un simple editor de textos. HTML es un lenguaje de etiquetas. Con las cuales, le indica al navegador como tiene que mostrar el contenido. Cabe denotar acá que, HTML se encarga del propio contenido y su significado, mas no, de darle estilo.

Cualquier block de notas, en teoría, es apto para escribir código HTML. Un block de notas no es más que, un editor de texto común. - En sistemas operativos basados en Microsoft Windows se encuentra generalmente, en menú Programas > Accesorios. - Si se está bajo algún sistema operativo basado en GNU/linux se puedes usar gedit o nano, o en su defecto, Vim. - Si usas algún sistema operativo basado en OS x puedes usar TexEdit.

También existen editores de texto hechos para ayudar y mejorar el desarrollo en lenguajes de programación. tales como: NoteEdit, SublimeText, GNU Emacs, Microsoft Wordpad, TextPad, Vim, Notepad++, entre otros.

Una vez identificado cuál sistema operativo usas, inicia el editor de texto de tu preferencia y, realiza lo siguiente: Escribe ésto en tu editor de textos, cual si estuvieras redactando una carta cualquiera:

Esta es mi primera pagina Web

Puedes, opcionalmente, crear una carpeta bajo el nombre de tu preferencia y guardar allí, éste archivo con la extensión .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' .

Por ejemplo: "/nombreCarpeta/prueba.html"

Para mirar archivos HTML, no necesariamente necesitas estar/tener Internet. Abre un navegador web tal como Firefox , Internet Explorer, Google Chrome, Opera, Midori, o cualquier otro 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, ':\nombreCarpeta\prueba.html') y teclea Enter. Alternativamente, puedes, en el menú Archivo del navegador, seleccionar Abrir, y navega hasta la ruta del archivo creado.

Si todo va bien, ¡Guau, Ahí está! Tu primera página Web. ¡Genial! Y todo lo que tomó fue digitar algunas palabras. ¿Fácil, no?

Hemos dicho que utilices un editor de texto básico, tal como el Block de notas, pero, al adentrarte en el mundo de la programación web, vas a necesitar/querer un poco más de ayuda, y otras herramientas. Existen, además, otros editores para la realización de sitios web con características WYSIWYG (What You See Is What You Get, o en español: «lo que ves es lo que obtienes»). Estos editores permiten ver el resultado de lo que se está editando en tiempo real, a medida que se va desarrollando el documento. Como lo son: Macromedia Dreamweaver, KompoZer, Microsoft FrontPage, etc.

Debes tener mucho cuidado al usar estos programas, especialmente si eres un principiante, porque tienen una curva de aprendizaje un poco más fuerte o no estándar para 'ayudarte'.

Si deseas aprender a profundidad HTML, debes leer con anterioridad, de modo que por lo menos tengas una idea básica de lo que estás haciendo. Debes tener en cuenta que, programas tales como Dreamweaver nunca te darán el mismo control sobre un pagina Web que la codificación a mano.

Marcado HTML

Aunque los fundamentos del HTML en teoría es texto plano, recordemos que, también se basa en etiquetas. Necesitamos un poco más para hacer un documento válido de HTML.

El código HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>). El HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir o hacer referencia a otros tipos de documentos, imágenes, videos, etc.

Elementos

Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades básicas: atributos y contenido. Que luego definiremos. Cada atributo y contenido tiene ciertas restricciones para que se considere válido al documento HTML. Un elemento generalmente tiene una etiqueta de inicio por ejemplo, <etiqueta> y una etiqueta de cierre por ejemplo, </etiqueta>. Y dentro de éstas, el elemento propiamente.

Etiquetas

La estructura básica de un documento HTML incluye etiquetas, que rodean el contenido y aplican características a este. Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento.

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.

Para que veamos en ejemplo a lo que nos referimos, realiza esto;

Cambia tu documento que creaste hace poco, de modo que se parezca a lo siguiente:

<!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 debes guardar el documento nuevamente, ve de nuevo al navegador y seleccione "Recargar/actualizar".

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 todavía, 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 la cual indica al navegador que el contenido entre ésta y, la etiqueta de cierre </html> es un documento HTML. El contenido entre <body> y </body> es el contenido principal de el documento que aparecerá en la ventana del navegador.

Etiquetas de cierre

Todas las etiquetas HTML deben ser cerradas. Aunque versiones anteriores de HTML 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 seguir de todos modos. Los </body> y los </html> cierran sus respectivas etiquetas .

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: . Veremos éstos 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 texto para mostrar un texto en negrita y cursiva, o si usas una etiqueta sin cerrarla), pero es necesario para tener un código bien formado.

Atributos

A la información adicional que se le puede agregar a un elemento, se le conoce como atributo. Las etiquetas pueden tener también atributos. Los atributos se encuentran entre la etiqueta de apertura y su valor siempre va entre comillas. Esto luce como <etiqueta atributo= " valor " > Contenido </etiqueta> . No todos los atributos se pueden utilizar en todas las etiquetas. Por ello, cada etiqueta define su propia lista de atributos disponibles. Además, cada atributo también indica el tipo de valor que se le puede asignar. Si el valor de un atributo no es válido, el navegador ignora ese atributo.

Veamos un ejemplo:

<a> Link </a>
<a href="www.prueba.html"> Link </a>

Como vemos, en la primera línea se usa una etiqueta "<a>", seguido de la palabra 'link' y luego, la etiqueta de cierre. En la segunda línea del ejemplo, se muestra la etiqueta "<a>", seguido de un atributo llamado "href=", el cual hace referencia a una URL, luego de eso, la palabra 'link' y la etiqueta de cierre. Esa es la forma en que se usan los atributos.

La estructura de un documento HTML

Todas las paginas HTML deben tener una "estructura". También se establece el tipo de documento y las bases para diseñar un documento HTML compatible con el estándar XHTML. La cual, consta de las siguientes partes:

La declaración !Doctype

- Todo documento HTML correctamente escrito comienza con una declaración que define qué tipo de documento es. Ésta declaración se realiza utilizando la etiqueta que ya hemos visto <HTML !DOCTYPE...> y es la primera cosa en todo el documento. Está pensada para indicar el agente procesador (por ejemplo, navegador, motor de búsqueda, etc.) bajo qué estándar está diseñado el documento que está a punto de procesar.

Una declaración de documento normal para un documento de acuerdo con el estándar XHTML 1.0 estricto (el más recomendado) debería lucir así:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML>
<HEAD>
  <TITLE>Document Title</TITLE>
</HEAD>
<BODY>
  <p>Body</p>
</BODY>
<FOOTER>
  <p>Footer</p>
</FOOTER>
</HTML>

Proyecto: Diseño Web

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