Guía Básica de HTML
ESTRUCTURA DE UN DOCUMENTO HTML La estructura básica de un documento HTML se compone de una etiqueta de inicio <HTML> y una de fin </HTML>. Otros componentes esenciales de este tipo de documento son la cabecera la cual contiene información sobre el documento, y se indica por las etiquetas <HEAD> y </HEAD>; dentro de la cabecera se recomienda el uso de la etiqueta <TITLE>, la cual se encarga de indicar el título del documento, generalmente lo puedes ver en la parte superior del navegador. El cuerpo es indicado por las etiquetas <BODY> y </BODY>.
Un ejemplo básico de un documento HTML es el siguiente: <HEAD> <TITLE>Mi primera página web </TITLE> </HEAD> <BODY> MI PRIMERA PAGINA WEB </BODY> </HTML>
En tu página puedes establecer un fondo, ya sea que lo predefinas de un color o bien mediante una imagen, esto se realiza con el atributo BACKGROUND de la etiqueta BODY <body background="nieve.jpg"> <body background color: #F00 >
COMENTARIOS Con la finalidad de documentar tu página puedes insertar algunos comentarios en los que especificas donde comienza la página o bien quien es el autor de la misma, por ejemplo <!--Este es un comentario--> Esta parte del código no se vera en el documento.
FUENTES La etiqueta <FONT> controla casi en su totalidad el estilo del texto a utilizar. Tiene tres atributos <SIZE> mediante el cual se establece el tamaño de la fuente, <FACE> esta se encarga de establecer la fuente, <COLOR> establece color al texto. La etiqueta <FONT> requiere de un delimitador, por ejemplo si utilizas <FONT SIZE> deberás cerrar con </FONT>. Los tamaños del texto van del 1 al 7, y los colores deben ser especificados en ingles. P.e. <FONT COLOR = "blue">
ESTRUCTURA DEL TEXTO PÁRRAFOS Y SALTOS DE LÍNEA Dentro de un documento HTML cualquier salto de línea o tabulación y demás separadores son ignorados por el navegador de tal manera que si deseas separar tu texto en párrafos deberás colocar la etiqueta <P> y su respectivo delimitador </P>. Otra etiqueta que se encarga de separar el texto es la del salto de línea <BR>, la cual funciona como retorno de carro.
ESTILOS DE TEXTO A continuación se presentan los estilos de texto usados frecuentemente: <B> Se utiliza para mostrar el texto en negrita. <U> Se utiliza para subrayar el texto. <I> Se utiliza para mostrar el texto en cursiva. <SMALL> Texto pequeño, esto es, se muestra el texto en el menor tamaño de fuente. <BIG> Texto grande, como su nombre lo indica el texto es mostrado en el tamaño máximo de fuente. <CENTER> Centra el texto en la pantalla.
A continuación se proporciona un ejemplo que abarca todo lo visto con anterioridad: <HTML> <HEAD> <TITLE> Mi primera página WEB </TITLE> </HEAD> <BODY> <FONT SIZE="5" FACE="Arial" COLOR="green"><B>Este texto esta en verde, con fuente arial, en negrita y tamaño 5. </B></FONT><BR> <P><FONT SIZE="3" FACE="Arial" COLOR="blue“ ><CENTER>Este es un párrafo centrado.</CENTER></P></FONT> </BODY> </HTML>
TABLAS ESTRUCTURA DE UNA TABLA EN HTML Para definir una tabla dentro de una página web creada con lenguaje HTML, utilizaremos las etiquetas <TABLE> y </TABLE> y dentro de ellas definiremos el inicio y fin de cada una de sus celdas haciendo uso de la etiqueta <TD> y </TD>, además usaremos a las etiquetas <TR> y </TR> para indicar el inicio y fin de una fila dentro de una tabla. Dentro de la etiqueta TABLE también podemos utilizar los atributos WIDTH y HEIGHT para indicar la anchura y la altura de la tabla respectivamente, también es posible agregar color de fondo mediante el atributo BGCOLOR. También podemos variar la separación entre celdas mediante el atributo CELLSPACING de la etiqueta TABLE. A continuación te presentamos un ejemplo:
<HTML> <HEAD> <TITLE> EJEMPLO DE USO DE TABLAS </TITLE> </HEAD> <BODY> <TABLE BORDER=3 CELLSPACING=5 CELLPADDING=10 WIDTH=500 ALIGN="CENTER" VALIGN="CENTER" GCOLOR=yellow> <CAPTION ALIGN=bottom>Horario de servicio social </CAPTION> <TR><TH>Lunes</TH><TH>Martes</TH><TH>Miercoles</TH><TH>Jueves</TH><TH BGCOLOR=blue>Viernes</TH> </TR> <TR> <TD BGCOLOR=gray>4</TD><TD BGCOLOR=green>2</TD><TD>6</TD><TD>2</TD><TD>2</TD> <TD BGCOLOR= red>6</TD><TD BGCOLOR=orange>6</TD><TD>4</TD><TD>4</TD><TD>4</TD> </TABLE> </BODY> </HTML>
ENLACES Existen dos tipos de enlaces: ESTRUCTURA DE ENLACE Un enlace está conformado por la etiqueta <A> seguida por diferentes atributos que indican el tipo de enlace que se desea hacer. Existen dos tipos de enlaces: Enlace a un punto de la misma página: Usando el atributo NAME, podemos indicar a qué parte del documento queremos ir, p.e inicio de la página y final de la página. Enlace a otra página: Usando el atributo HREF podemos hacer ligas a otra página del mismo sitio. Enlace a otros sitios: Usando el atributo HREF también podemos hacer enlaces a otros sitios web o direcciones de correo.
Esta línea se coloca al principio del cuerpo del documento. <A HREF="#finaldocumento">Da click aquí para ir al final de esta página </A> Esta línea va al final <A HREF="#iniciodocumento">Da click aquí para ir al inicio de esta página </A> Estas líneas van donde tu lo desees <A HREF="http://www.google.com">Google.com</A> <A HREF="mailto: carlos-puebla@yahoo.com">carlos-puebla@yahoo.com</A>
IMÁGENES Como se ha mencionado anteriormente dentro de un documento html es común el uso de etiquetas. Para incluir una imagen en una pagina web emplearemos la etiqueta <IMG> junto con un atributo fundamental SCR. Deberás colocar la siguiente línea de código dentro del cuerpo de tu documento html. <IMG SRC=“paraiso.jpg"> donde nombre de imagen como su nombre lo indica es el nombre de la imagen que deseas incluir en la página.
LISTAS En una página web puedes elaborar listas, mediante la etiqueta <OL> y con el atributo <type>, este último permite establecer el tipo de lista a crear. Por ejemplo si deseas crear una lista ennumerada deberás colocar el siguiente código
<OL TYPE=1><OL> <li>Presentación. <li><A HREF="introduccion1.html">Introducción a los sistemas operativos.</A> <li>Casos de Estudio. <OL TYPE=1> <li><A HREF="http://www.cs.buap.mx/~pbello">Linux.</A> </ol> <li><A HREF="Glosario.html">Glosario.</A> Checa que en cada renglón se establece la etiqueta <li>, la cual indica que es parte de la lista numerada.