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

De Wikiversidad
Contenido eliminado Contenido añadido
/ jesus y sus compas/
Deshecha la edición 27790 de 201.143.202.214 (disc.)
Línea 90: Línea 90:


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 <span style="color:#6677ff"> <body> </span> y <span style="color:#6677ff"> </body> </span> es el elemento cuerpo. Como otro ejemplo, mientras que '<span style="color:#6677ff"> <title> </span>' y '<span style="color:#6677ff"> </title> </span>' son etiquetas, '<span style="color:#6677ff"> <title> Wikipedia </title> </span>' es el ''elemento'' título.
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 <span style="color:#6677ff"> <body> </span> y <span style="color:#6677ff"> </body> </span> es el elemento cuerpo. Como otro ejemplo, mientras que '<span style="color:#6677ff"> <title> </span>' y '<span style="color:#6677ff"> </title> </span>' son etiquetas, '<span style="color:#6677ff"> <title> Wikipedia </title> </span>' es el ''elemento'' título.
== Títulos de Pagina ==jesus
== Títulos de Pagina ==


Todas las paginas HTML deben tener un '''titulo''' de pagina.
Todas las paginas HTML deben tener un '''titulo''' de pagina.

Revisión del 07:01 23 jul 2008

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

HTML (Hyper Text Markup Language), acrónimo de Lenguaje de Marcado de Hiper Texto es un lenguaje de programación para diseñar paginas Web.

Básicamente HTML consta de texto plano (ASCII) y una serie de etiquetas (Tags).

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

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).

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 o Internet Explorer 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