¿Qué es HTML?
HTML son las siglas de HyperText Markup Language (Lenguaje de
Macado de Hipertexto), ¿esto que significa?, pues bien hipertexto es una
palabra o frase en especial que “apunta” hacia otra página. Cuando hace clic
en uno de las ligas de una página, su navegador automáticamente lo lleva a
otra página sin preguntar. Debido a que los vínculos de hipertexto son una
característica muy importante del World Wide Web, las páginas web con
frecuencia son conocidas como documentos de hipertexto. Así que HTML
contiene la palabra hipertexto por ser la herramienta que se usa para crear
estos documentos. Sobre el marcado, HTML tiene unos cuantos códigos
simples para detallar cosas como hacer que el texto aparezca en negritas o
cursivas, crear listas con viñetas, insertar imágenes y, por supuesto vínculos
de hipertexto. Y la palabra lenguaje que es la que más nos provoca miedo
cuando escuchamos de HTML ya que creemos que necesitamos aprender
programación para poder construir nuestra página, más bien HTML es un
“lenguaje” en el sentido de que cuenta con una colección de “tags” para
definir estilos, como negritas y cursivas.
Los diez pasos para crear una página web perfecta
1.- Cree un nuevo archivo de texto
Muchas personas creen que para diseñar sus páginas web es
necesario tener un software de diseño de páginas web costoso o un
editor de alta calidad para obtener efectos interesantes. No es así, de
hecho cualquier programa que le permita generar texto sencillo (plano)
es suficiente, un ejemplo de estos editores es el accesorio NotePad que
viene incluido con Windows. Así que el primer paso para generar su
página web es abrir su editor de texto favorito y crear un archivo
nuevo. Para que su navegador reconozca su página debe guardar su
archivo con extensión .HTM o bien .HTML.
2.- Comprenda las etiquetas HTML
Las páginas web son relativamente sencillas. Solo hay que
escribir el texto y luego insertar los marcadores –etiquetas o tags- que
indican como queremos que se vean las cosas.
En general las etiquetas emplean el siguiente formato:
<etiqueta>Hola mundo</etiqueta>
1
La parte etiqueta especifica el tipo de efecto que deseamos. Por
ejemplo para poner el texto en negritas usamos la etiqueta <B>, así
que si deseamos que el texto Hola mundo aparezca en negritas
tenemos que poner:
<b>Hola mundo</b>
Todas las etiquetas HTML deben de tener su etiqueta de inicio y
de cierre, la etiqueta de cierre debe de llevar la diagonal (/) que indica
que es el fin de esa etiqueta.
3.- Diseñe la estructura básica de la página
Los archivos HTML siempre empezarán con la etiqueta <HTML>,
que se debe de escribir en la parte superior del archivo, y al final del
archivo debe escribir la etiqueta </HTML>, las cuales le indicarán al
navegador que se trata de una página web. Al principio nuestra página
web tendrá esta apariencia:
<html>
</html>
Las etiquetas que siguen, nos sirven para dividir el documento en
dos partes: el encabezado y el cuerpo. La sección de encabezado es
una introducción a la página. Para definir el encabezado, debemos
agregar la etiqueta <HEAD> inmediatamente después de la etiqueta
<html> y cerrar con la etiqueta </HEAD>. Ahora la página se verá así:
<html>
<head>
</head>
</html>
La sección del cuerpo es donde se pone el texto y todos los
demás elementos de nuestra página web. Para definir el cuerpo
debemos poner las etiquetas <BODY> y </BODY> después del de la
sección de encabezados (debajo de la etiqueta </HEAD>), como se
muestra a continuación:
<html>
<head>
2
</head>
<body>
</body>
</html>
4.- Agregue un buen título
El título es el nombre general de la página (no hay que
confundirlo con el nombre del archivo). Cuando vean su página en un
navegador, el título aparecerá en la barra de título del navegador (Fig.
1.1).
Para definir el título es necesario usar las etiquetas <TITLE> y
</TITLE>. Por ejemplo:
<TITLE>Página de prueba</TITLE>
El título siempre va en la sección del encabezado, por lo que el
documento debe ir así:
<html>
<head>
<title>Página de prueba</title>
</head>
<body>
</body>
</html>
esqueleto.htm
Fig. 1.1.- Vista de nuestra página en un navegador.
3
5.- Ponga textos
Ahora que ya tenemos el título de nuestra página es tiempo de
pensar en el texto que deseamos poner en nuestra página.
Básicamente, todo lo que tiene que hacer es escribir texto entre las
etiquetas <BODY> y </BODY>, así:
textos.htm
<html>
<head>
<title>Página de prueba</title>
</head>
<body>
Este texto aparecerá en la página.
</body>
</html>
Cuando desee poner un nuevo párrafo hay que usar las etiquetas
<P> y </P>. Por ejemplo:
parrafos.htm
<html>
<head>
<title>Página de prueba</title>
</head>
<body>
Este texto aparecerá en la página.
Segunda línea.
<p>Nuevo párrafo</p>
</body>
</html>
Como podemos ver en la Fig. 1.2, las primeras dos líneas
aparecerán juntas, a pesar de que se encuentran en líneas diferentes
en el texto original. Sin embargo, la tercera línea esta ubicada en su
propio párrafo gracias a las etiquetas <p> y </p>.
4
Fig. 1.2.- Uso de párrafos.
6.- Utilice formatos y encabezados
HTML cuenta con una gran cantidad de etiquetas que nos
ayudarán a decorar nuestra página. Ya hemos visto que con las
etiquetas <B> y </B> podemos poner un texto en negritas. También
se puede desplegar texto en cursivas con las etiquetas <I> y </I> y
puede hacer que sus palabras aparezcan como si las hubiera
introducido con una máquina de escribir insertándolas entre las
etiquetas <TI> y </TI>.
Al igual que en los capítulos de un libro, muchas páginas web
dividen su contenido en varias secciones. Para separarlas, se pueden
emplear encabezados, HTML cuenta con una serie de etiquetas de
encabezado que despliegan el texto en una fuente más grande y
negritas. Existen seis etiquetas de encabezado en total, que van desde
la <H1> (fuente más grande) hasta la <H6>, que emplea la fuente
más pequeña.
Podemos ver un ejemplo en el siguiente código y en la Fig. 1.3:
formato.htm
<html>
<head>
<title>Formato de texto y encabezados</title>
</head>
<body>
5
Podemos usar <b>negritas</b>. También podemos usar
<i>cursiva</i>. Y ¿por qué no? también <tt>texto tipo máquina
de escribir.</tt>
<p>Así como encabezados</p>
<h1>Encabezado H1</h1>
<h2>Encabezado H2</h2>
<h3>Encabezado H3</h3>
<h4>Encabezado H4</h4>
<h5>Encabezado H5</h5>
<h6>Encabezado H6</h6>
</body>
</html>
Fig. 1.3- Formato de texto y encabezados.
7.- Agregue enlaces a otras páginas
En HTML existen etiquetas para convertir un bloque de texto en
un vínculo (enlace, liga o link), estas etiquetas son <A> y </A> (la A
es por anchor, ancla en inglés). Esta etiqueta es un poco más compleja
que las demás, así que hay que verla con un poco de calma. Este es el
formato general que utiliza:
<a href=”dirección”>Texto del enlace</a>
Aquí la parte “dirección” es la dirección web de la página con la
que se quiere hacer un enlace, una dirección web puede ser por
ejemplo http://www.pecesama.net/html/.
6
La parte “Texto del enlace” es la palabra o frase que los
visitantes de nuestra página usarán para darle clic e ir hacia la página
que ya se especifico en la parte “dirección”. A continuación veamos un
ejemplo:
ligas.htm
<html>
<head>
<title>Página de prueba</title>
</head>
<body>
Este ejemplo incluye un vínculo a
<a href="http://www.pecesama.net/html/">la página de
pecesama.</a>
</body>
</html>
La Fig. 1.4 nos muestra como se verá la página desde un navegador.
8.- Cause impacto con las imágenes
Fig. 1.4- Uso de enlaces.
Es muy fácil agregar imágenes a nuestra página web. Ya sea el
logotipo corporativo, fotos de su artista favorito, dibujos o fotos de su
pareja y usted.
Existe ciertos aspectos implicados en el empleo de imágenes en
nuestra página (como el tipo de formato), eso lo veremos un poco más
adelante, por ahora solo veremos como usar la etiqueta <IMG> que le
indica al navegador que despliegue una imagen especifica. Este es su
formato general:
<img src=”imagen”>
7
Aquí, “imagen” es el nombre del archivo gráfico que desea
desplegar. Por ejemplo si el archivo se llama logo.gif, tendrá que usar
la siguiente etiqueta para desplegarlo:
9.- Analice la apariencia de su página con un navegador
<img src=”logo.gif”>
Antes de poner nuestra página a la vista de todos en Internet es
la visualice en su computadora para
importante que primero
asegurarse que todo esta en perfectas condiciones, no es necesario
tener conexión a Internet para verla solo basta con darle doble clic
sobre el archivo html que generamos y se abrirá en su navegador
favorito.
10.- Publique su página en Web
Cuando este satisfecho y seguro de que su página esta en
prefecto estado, entonces si es hora de ponerla en Internet, existen
muchas opciones para poder hacer esto, en la actualidad hay varias
compañías que nos ofrecen el servicio de forma gratuita, solo con la
condición de ponernos un poco de publicidad en nuestra página, por
ejemplo puede visitar geocities en el portal Yahoo! y ellos le indicarán
los pasos a seguir para poder pu
Crear cuenta
Comentarios de: ¿Qué es HTML? (0)
No hay comentarios