HTML en su forma modern es un tipo
de XML (parecido a los contenedores SVG y RSS que hemos discutido en
otros capítulos -- ia a la página sobre RSS
apra más detalles). Requiere sólo un par de elementos, y acepta
muchos otros elementos opcionales que le pueden añadir varias
propiedades al archivo.
El siguiente es un ejemplo de HTML para una página web:
<html>
<head>
<title>Ejemplo Pagina</title>
</head>
<body>
<h1>Introduccíon</h1>
<p>Algo texto que constitute un
<b>párrafo</b></p>
<img src="ejemploImagen.png">
<p>Algo texto con un enlace a <a
href="http://www.google.com">Google</a></p>
</body>
</html>
Cuando su navigador web tiene esta HTML, el procesará el y el resultado será algo como esto:
Puedes ver esta página en tu navegador a través de este enlace.
En el ejemplo anterior se usaron las siguientes etiquetas (tags), con los comandos que representan:
<html>...</html> - Todo el texto entre estos tags debe ser usado por el navegador como el código para la página web.
<head>...</head> - El encabezado del la página. Esta area
puede contener información sobre la página como por ejemplo el título o
otros elementos que no se muestran cuando la página aparece en el
navegador.
<title>...</title> - El título de la página; usualmente se
muestra en la barra superior del navegador (o en uno de los tabs)
mientras se está viendo la página.
<body>...</body> - La porción principal o el cuerpo de la
página. Aquí es donde se coloca el código que se va a mostrar.
<h1>...</h1> - Encabezado Nivel 1; esto se usa para indicar
el comienzo de una sección de texto con un tamaño grande de texto.
Puedes usar cualquier número del 1 al 6 -- el tamaño de texto disminuye
con cada número.
<p>...</p> - Un párrafo de texto. Incluye aquí tu redacción, así como imágenes, enlaces, y otro formateo.
<b>...</b> - Muestra el texto en negrillas (bold). Otras opciones son <u> para subrayar (underline) y <i> para itálicos (italics). Makes the text bold. Other formatting options are <u> for underline and <i> for italics.
<img src="ImagenNombre.jpg"> - Coloca una imagen en la página.
Hay muchas otras opciones que se pueden añadir para modificar la
imagen, pero esto es todo lo que necesitas para mostrar la imagen de
por sí.
<a href="OtraPagina.html">text...</a> - Crea un enlace a
otra página. La parte dentro de las comillas luego del href= es el
enlace a la otra página. Puede ser un enlace completo como
"http://media-intro.teeks99.com/Web/ExamplePage.html" o puede ser un
enlace relativo a donde la página actual se encuentra dentro de la
jerarquía del directorio del servidor. Si la otra pagina se encuentra
en la misma carpeta, el texto para el enlace puede ser simplemente
"EjemploPage.html". Si se encuentra en una subcarpeta, el texto podría
ser "NombreDeCarpeta/EjemploPagina.html", si está en una carpeta
superior en la jeraquía, podría ser "../EjemploPage.html". El texto que
va entre del bracket final (>) y el final del enlace (</a>) es
el texto que aparece en azul y subrayado en la página.
Con estos simples tags, puedes hacer sitios web inmensos y de gran
complejidad. Hay muchas otras propiedades útiles (tablas, formas,
audio, video, y más) que también son parte del lenguaje HTML que puedes
usar una vez tengas control de estas propiedades básicas.
Ademas de HTML simple también hay varios otros estilos de HTML
asícomo Cascading Style Sheets (CSS). Estas son usadas para controlar
la apariencia de las páginas y hasta de sitios web enteros a mayor
detalle. Luego, para añadir funcionalidad a un sitio web de manera que
algo ocurra cuando haces clic en un botón, existe un idioma de
programación llamado Java Script con inmenso poder para controlar
sitios web. Por su complejidad, estos temas no se cubrirán en este
curso; en su lugar, nos vamos a concentrar en los aspectos básicos de
diseño de páginas web para poder crear páginas tanto simples como
útiles.
