CURSO BÁSICO DE HTML
Luis José Sánchez González
INTRODUCCIÓN
Para crear una página web podemos optar por una de los siguientes métodos:
a) Utilizar una herramienta de diseño web como Screem, Blue Fish, Front Page o incluso un
procesador de textos como el Writer de OpenOffice o el Word de Microsoft.
Ventaja:
– Casi cualquiera puede hacer páginas web en poco tiempo.
Inconvenientes:
– Cada herramienta le da a la página un sutil toque personal y se suele notar cuál de ellas
se ha utilizado para su elaboración.
– Puede que la página no se vea bien en cualquier navegador, especialmente si se utilizan
herramientas de Microsoft.
– Por lo general, las páginas suelen quedar bastante cutres.
b) Escribir la página directamente en HTML (HyperText Markup Language).
Ventaja:
– Tienes control absoluto sobre lo que estás haciento.
– Sólo hace falta un sencillo editor de texto.
Inconvenientes:
– Hay que saber HTML.
– Es laborioso hacer cualquier cosa por insignificante que parezca por lo que se suele
emplear mucho tiempo en crear y mantener una página web.
c) Método mixto. Consiste en crear el esqueleto de la página con una herramienta y luego
modificarla a mano introduciendo o cambiando código HTML.
Ventaja:
– En principio parece que reúne las ventajas de los dos métodos anteriores.
Inconvenientes:
– En la práctica, aúna los inconvenientes de los dos métodos anteriores. Resulta más difícil
retocar el código generado por una herramienta de diseño que el código escrito por uno
mismo.
Luis José Sánchez González Curso de HTML
MÉTODO DE TRABAJO
Para crear una página web escribiendo código HTML sólo necesitamos un procesador de textos (cuanto
más simple mejor) y un navegador para ir viendo cómo van quedando las páginas. Como editores, en Linux
se puede utilizar por ejemplo el Kword y, en Windows, el bloc de notas. Como navegador, el que más te
guste (Opera, Internet Explorer, Nestcape Navigator,etc.), personalmente utilizo Opera.
El método de trabajo será simple, tendremos abierto tanto el editor de texto como el navegador, y en ambos
estará cargado el fichero sobre el que estamos trabajando. Iremos modificando el fichero en el editor e
iremos dándole al botón de actualizar del navegador para ver los cambios producidos.
PRIMERA PÁGINA
Escribiremos el siguiente código en el editor de texto y lo guardaremos como “primera.html”.
<HTML>
<BODY>
Esta es mi primera página.
</BODY>
</HTML>
Lo cargamos desde el navegador et voilà, ya tenemos hecha nuestra primera página web.
Las etiquetas <HTML> y </HTML> marcan respectivamente el principio y el final de un documento escrito en
HTML. Entre las etiquetas <BODY> y </BODY> se escribirá el cuerpo en sí de la página, lo que realmente
queremos que se muestre.
CABECERA, TÍTULO Y ALINEACIÓN DEL TEXTO
Vamos a elaborar un poco más la página anterior. Ahora podemos guardarla como “pagina02.html”.
<HTML>
<HEAD>
<TITLE>Segunda página del curso de HTML</TITLE>
<META AUTHOR="Luis José Sánchez González">
<META KEYWORDS="página web curso HTML">
<META DESCRIPTION="Esta página forma parte de un curso de HTML.
En ella se muestran conceptos básicos
como el título de una página
o la alineación del texto.">
</HEAD>
<BODY>
<CENTER>
<H1>Segunda Página.</H1>
Esta frase está centrada.<BR>
</CENTER>
<DIV ALIGN="LEFT">Esto está pegado<BR>
Luis José Sánchez González Curso de HTML
a la izquierda.</DIV><BR>
<DIV ALIGN="RIGHT">Y esta última frase está<BR>
pegada a la derecha.</DIV>
</BODY>
</HTML>
Entre las etiquetas <HEAD> y </HEAD> se puede especificar información que puede ser más o
menos relevante pero que no afecta al contenido, como por ejemplo el título de la página, su autor,
una serie de palabras clave por las que se puede encontrar la página si se da de alta en un buscador
y la descripción del contenido de la página.
Con <H1>, <H2>, <H3>, <H4>, <H5> y <H6> se indica el tipo de cabecera o título. <H1> muestra la
cabecera más grande y <H6> la más pequeña.
<BR> provoca un salto de línea.
Por último <CENTER> permite centrar un texto y <DIV ALIGN> nos permite alinearlo a la izquierda o
a la derecha.
FORMATO DEL TEXTO Y COLORES
Se puede cambiar tanto el color del fondo de la página como el del texto que contiene. El color se
puede indicar escribiendolo en inglés o bien especificando la cantidad de rojo, verde y azul. Para cada
color se utilizan dos dígitos en hexadecimal (desde el 00 hasta el FF). Por ejemplo, siqueremos
utilizar un color que tenga el máximo de rojo, mucho verde y casi nada de azul podríamos usar el
“#FF9912” (FF de rojo, 99 de verde y 12 de azul).
Las etiquetas <P> y </P> marcan el comienzo y el final de un párrafo.
<HTML>
<HEAD>
<META AUTHOR="Luis José Sánchez González">
</HEAD>
<BODY BGCOLOR="yellow">
<CENTER>
<H1>PÁGINA EN COLORES.</H1><BR>
<H2><FONT COLOR="green">ESTOY EN COLOR VERDE</FONT></H2><BR>
<H2><FONT COLOR="blue">ESTOY EN COLOR AZUL</FONT></H2><BR>
<P>
<FONT COLOR="red">Este párrafo está en color rojo. Esto es
letra <B>negrita</B>, <I>cursiva</I> y <U>subrayado</U>.</FONT>
</P>
<P>
<FONT COLOR="#F50099">Este párrafo debe salir en color violeta
(mezcla de rojo y azul).</FONT>
</P>
</CENTER>
</BODY>
</HTML>
Luis José Sánchez González Curso de HTML
HIPERENLACES
Mediante <A HREF=”enlace”> podemos crear un hiperenlace a otra página o a cualquier otro fichero.
<HTML>
<HEAD>
<META AUTHOR="Luis José Sánchez González">
</HEAD>
<BODY>
<CENTER>
<H1><FONT COLOR="green">ENLACES A SITIOS INTERESANTES.</FONT></H1><BR>
<P>
<FONT COLOR="red">Esta página contiene enlaces a sitios
muy interesantes.</FONT>
</P>
<A HREF="primera.html">Mi primera página web</A><BR><BR>
Buscadores:<A HREF="http://www.linux.org">www.linux.org</A><BR><BR>
Páginas generales:<A HREF="http://www.terra.es">Terra</A>
<A HREF="http://www.lycos.es">Lycos</A><BR><BR>
</CENTER>
</BODY>
</HTML>
Ejercicio
• Crea una página web temática con alguna información y enlaces sobre un determinado tema (ciencia,
moda, motor, música, etc.)
Luis José Sánchez González Curso de HTML
IMÁGENES
Para insertar una imagen dentro de nuestra página utilizaremos <IMG SRC=”nombre_de_la_imagen”>,
donde nombre_de_la_imagen será el nombre del fichero que contiene la imagen que queremos mostrar, por
ejemplo gato.jpg, coche_tunning.gif, pucca.bmp.
<HTML>
<BODY>
<CENTER>
<H1>MIS ANIMALES FAVORITOS</H1>
<BR>
<BR>
<IMG SRC="perro.jpg"><IMG SRC="gato.jpg"><IMG SRC="caballo.jpg">
</CENTER>
</BODY>
</HTML>
En el ejemplo anterior tenemos una página con 3 imágenes. Por supuesto, esas tres imágenes deben
estar en la misma carpeta en la que se encuentra la página. De no ser así habría que indicar la ruta
completa donde se encuentra ubicada la imágen.
Una imagen puede funcionar también como un hiperenlace. En el siguiente ejemplo podemos comprobar
cómo si pinchamos sobre la imagen, el navegador se va a la página indicada.
<HTML>
<BODY>
<CENTER>
<H1>COCHES DEPORTIVOS</H1>
<BR>
Haz click sobre el coche rojo para ir a la página oficial de Ferrari
<A HREF="http://www.ferrari.com"><IMG SRC="c_rojo.gif"></A><BR>
Haz click sobre el coche gris para ir a la página oficial de Porsche
<A HREF="http://www.porsche.com"><IMG SRC="c_gris.gif"></A>
</CENTER>
</BODY>
</HTML>
Luis José Sánchez González Curso de HTML
TABLAS
En ocasiones puede ser útil tener la información organizada mediante tablas. Una tabla está formada
por celdas que se distribuyen en filas y columnas. En HTML, las filas se delimitan con <TR> y </TR>.
Dentro de cada fila, las distintas celdas se identifican con <TD> y </TD>.
Veamos un ejemplo sencillo con dos filas y tres columnas.
<HTML>
<BODY>
<CENTER>
<H2>TABLA CON DOS FILAS Y TRES COLUMNAS</H2><BR>
<TABLE BORDER=1>
<TR>
<TD>LUNES</TD>
<TD>MARTES</TD>
<TD>MIÉRCOLES</TD>
</TR>
<TR>
<TD>Lentejas</TD>
<TD>Macarrones</TD>
<TD>Coles</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Esta página mostraría lo siguiente:
TABLA CON DOS FILAS Y 3 COLUMNAS
LUNES
Lentejas
MARTES
Macarrones
MIÉRCOLES
Coles
Luis José Sánchez González Curso de HTML
Crear cuenta
Comentarios de: Curso básico de HTML (0)
No hay comentarios