guía básica de html

Guía Básica de HTML

Guía Básica de 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>.

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:

<HTML><HEAD><TITLE>Mi primera página web </TITLE></HEAD><BODY>MI PRIMERA PAGINA WEB</BODY></HTML>

Un ejemplo básico de un documento HTML es el siguiente:

<HTML><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 >

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 >

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.

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.

La etiqueta 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 requiere de un delimitador, por ejemplo si utilizas deberás cerrar con .

Los tamaños del texto van del 1 al 7, y los colores deben ser especificados en ingles. P.e. 

La etiqueta 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 requiere de un delimitador, por ejemplo si utilizas deberás cerrar con .

Los tamaños del texto van del 1 al 7, y los colores deben ser especificados en ingles. P.e.

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 y su respectivo delimitador . Otra etiqueta que se encarga de separar el texto es la del salto de línea , la cual funciona como retorno de carro.

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 y su respectivo delimitador . Otra etiqueta que se encarga de separar el texto es la del salto de línea , la cual funciona como retorno de carro.

ESTILOS DE TEXTO

A continuación se presentan los estilos de texto usados frecuentemente:

 Se utiliza para mostrar el texto en negrita. Se utiliza para subrayar el texto. Se utiliza para mostrar el texto en cursiva. 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.

ESTILOS DE TEXTO

A continuación se presentan los estilos de texto usados frecuentemente:

 Se utiliza para mostrar el texto en negrita. Se utiliza para subrayar el texto. Se utiliza para mostrar el texto en cursiva. 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>Este texto esta en verde, con fuente arial, en negrita y tamaño 5. 

<CENTER>Este es un párrafo centrado.</CENTER>

</BODY></HTML>

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>Este texto esta en verde, con fuente arial, en negrita y tamaño 5. 

<CENTER>Este es un párrafo centrado.</CENTER>

</BODY></HTML>

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:

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>

</TR><TR><TD BGCOLOR= red>6</TD><TD

BGCOLOR=orange>6</TD><TD>4</TD><TD>4</TD><TD>4</TD>

</TR></TABLE></BODY></HTML>

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

</TR><TR><TD BGCOLOR= red>6</TD><TD

BGCOLOR=orange>6</TD><TD>4</TD><TD>4</TD><TD>4</TD>

</TR></TABLE></BODY></HTML>

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.

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: [email protected]">[email protected]</A>

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: [email protected]">[email protected]</A>

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.

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.

Mediante HTML se pueden crear marquesinas con el uso de la etiqueta <MARQUEE> y su delimitador </MARQUEE>; dentro de ellas se pone el texto que se desea, en el formato que se quiere, por ejemplo:

<MARQUEE> ESTA ES UNA MARQUESINA</MARQUEE>

Mediante HTML se pueden crear marquesinas con el uso de la etiqueta <MARQUEE> y su delimitador </MARQUEE>; dentro de ellas se pone el texto que se desea, en el formato que se quiere, por ejemplo:

<MARQUEE> ESTA ES UNA MARQUESINA</MARQUEE>

Esta etiqueta tiene varios atributos, te mostramos

los más usados: BEHAVIOR=ALTERNATE: la marquesina

"rebotará" de un lado a otro de la pantalla.

SCROLLDELAY = X : Indica el tiempo que transcurrirá entre cada salto del texto, expresado en milisegundos .

LOOP = Indica el número de veces que se repetirá la acción de la marquesina, por default es infinita.

Esta etiqueta tiene varios atributos, te mostramos

los más usados: BEHAVIOR=ALTERNATE: la marquesina

"rebotará" de un lado a otro de la pantalla.

SCROLLDELAY = X : Indica el tiempo que transcurrirá entre cada salto del texto, expresado en milisegundos .

LOOP = Indica el número de veces que se repetirá la acción de la marquesina, por default es infinita.

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

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/~fulo">Linux.</A>

</ol><li><A HREF="Glosario.html">Glosario.</A></ol> Checa que en cada renglón se establece la etiqueta

<li>, la cual indica que es parte de la lista numerada.

<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/~fulo">Linux.</A>

</ol><li><A HREF="Glosario.html">Glosario.</A></ol> Checa que en cada renglón se establece la etiqueta

<li>, la cual indica que es parte de la lista numerada.

Dentro de una

página web se pueden incorporar diversos sonidos con la opción de poder ser activada por el usuario o bien ser ejecutada de manera automática al cargar la página.

Dentro de una

página web se pueden incorporar diversos sonidos con la opción de poder ser activada por el usuario o bien ser ejecutada de manera automática al cargar la página.

http://images.google.com.mx/imgres?imgurl=http://www.tepatoken.com/img/Musica.jpg&imgrefurl=http://www.tepatoken.com/html/m06.htm&h=1262&w=832&sz=69&tbnid=KfQ0MQzrZNIJ:&tbnh=148&tbnw=98&start=2&prev=/images%3Fq%3Dmusica%26hl%3Des%26lr%3D%26ie%3DUTF-8

Para este fin se utiliza la etiqueta <BGSOUND> asociada al atributo SRC (source). Los archivos a reproducir pueden ser de los siguientes formatos: *.wav, *.au, *.mid

El atributo que acompaña a esta etiqueta es LOOP, el cual se encarga de especificar cuántas veces se debe ejecutar el archivo de sonido y puede tener un valor numérico o valor infinite que reproducirá el archivo en un ciclo cerrado. Por ejemplo:

<BGSOUND SRC=“musica.wav” LOOP=infinite>

Para este fin se utiliza la etiqueta <BGSOUND> asociada al atributo SRC (source). Los archivos a reproducir pueden ser de los siguientes formatos: *.wav, *.au, *.mid

El atributo que acompaña a esta etiqueta es LOOP, el cual se encarga de especificar cuántas veces se debe ejecutar el archivo de sonido y puede tener un valor numérico o valor infinite que reproducirá el archivo en un ciclo cerrado. Por ejemplo:

<BGSOUND SRC=“musica.wav” LOOP=infinite>

Un frame es una marco que divide la pantalla en filas y columnas como lo deseemos.

El atributo que debemos conocer para la realización de los frames es TARGET, el cual determina la zona de la pantalla en donde se mostraran los elementos.

Ya que el atributo TARGET determina el lugar de destino del contenido, hay que señalar los valores especiales de este atributo.

1. TARGET = _blank. El enlace se carga en una nueva ventana.

2. TARGET = _self. El enlace se carga en la misma ventana en que se encuentra.

3. TARGET = _parent. El enlace se carga en el FRAMESET inmediatamente superior al documento.

4. TARGET = _top. El enlace se carga en la totalidad de la ventana.

Un frame es una marco que divide la pantalla en filas y columnas como lo deseemos.

El atributo que debemos conocer para la realización de los frames es TARGET, el cual determina la zona de la pantalla en donde se mostraran los elementos.

Ya que el atributo TARGET determina el lugar de destino del contenido, hay que señalar los valores especiales de este atributo.

1. TARGET = _blank. El enlace se carga en una nueva ventana.

2. TARGET = _self. El enlace se carga en la misma ventana en que se encuentra.

3. TARGET = _parent. El enlace se carga en el FRAMESET inmediatamente superior al documento.

4. TARGET = _top. El enlace se carga en la totalidad de la ventana.

Estructura básica

Debemos resaltar que el código principal de una página con frames no presenta las etiquetas <BODY> y </BODY>, sino que el código deberá ser incluido en las etiquetas <HEAD> y </HEAD>

La etiqueta a utilizar es la de <FRAMESET>, esta última se encarga de dividir la pantalla en ventanas, verticales u horizontales. Y los atributos que determinan el aspecto de estas ventanas son ROWS y COLS.

El atributo ROWS define el número de divisiones verticales, asi mismo con COLS pero la hace de manera horizontal.

Estructura básica

Debemos resaltar que el código principal de una página con frames no presenta las etiquetas <BODY> y </BODY>, sino que el código deberá ser incluido en las etiquetas <HEAD> y </HEAD>

La etiqueta a utilizar es la de <FRAMESET>, esta última se encarga de dividir la pantalla en ventanas, verticales u horizontales. Y los atributos que determinan el aspecto de estas ventanas son ROWS y COLS.

El atributo ROWS define el número de divisiones verticales, asi mismo con COLS pero la hace de manera horizontal.

Los valores para ambos pueden ser absolutos en píxeles, porcentajes, o bien valores de escala relativos, y se basan en los siguientes formatos.

n. Cuando se introduce un valor determinado se indica la altura o anchura de la ventana en píxeles.

%. Indica que la altura o anchura es un valor porcentaje relativo al tamaño de la ventana que lo contiene.

*. Indica que debe asignarse ala ventana todo el espacio disponible; suponiendo que haya varias ventana es espacio libre se divide entre ellas, si existe un valor delante del asterisco, la ventana que lo tenga asignado tomará más espacio relativo, por ejemplo “2*,*” daría 2/3 del espacio de la primera ventana.

Los valores para ambos pueden ser absolutos en píxeles, porcentajes, o bien valores de escala relativos, y se basan en los siguientes formatos.

n. Cuando se introduce un valor determinado se indica la altura o anchura de la ventana en píxeles.

%. Indica que la altura o anchura es un valor porcentaje relativo al tamaño de la ventana que lo contiene.

*. Indica que debe asignarse ala ventana todo el espacio disponible; suponiendo que haya varias ventana es espacio libre se divide entre ellas, si existe un valor delante del asterisco, la ventana que lo tenga asignado tomará más espacio relativo, por ejemplo “2*,*” daría 2/3 del espacio de la primera ventana.

La etiqueta <FRAME> y <NOFRAME>La etiqueta <FRAME> y <NOFRAME>

La etiqueta <FRAME> es la encargada de revisar cuantos frames se deberán dibujar dentro de la pantalla, por lo que puede tener hasta seis atributos distintos, como por ejemplo:

SCR = “url” toma el valor URL del documento que se debe mostrar en la pantalla, sino la ventna se quedará vacia.

NAME =“nombre de la ventana” como se indica con este atributo nombramos a una ventana, de manera que puede ser el destino de cualquier enlace.

MARGINWIDTH = “valor” Se emplea para precisar el número de píxeles entre los bordes izquierdo y derecho de la ventana.

MARGINHEIGTH = “valor” Lo mismo que el anterior pero respecto a los bordes superior e inferior.

La etiqueta <FRAME> es la encargada de revisar cuantos frames se deberán dibujar dentro de la pantalla, por lo que puede tener hasta seis atributos distintos, como por ejemplo:

SCR = “url” toma el valor URL del documento que se debe mostrar en la pantalla, sino la ventna se quedará vacia.

NAME =“nombre de la ventana” como se indica con este atributo nombramos a una ventana, de manera que puede ser el destino de cualquier enlace.

MARGINWIDTH = “valor” Se emplea para precisar el número de píxeles entre los bordes izquierdo y derecho de la ventana.

MARGINHEIGTH = “valor” Lo mismo que el anterior pero respecto a los bordes superior e inferior.

SCROLLING = “yes|no|auto” Despliega barras de desplazamiento o no. Yes: muestra las barras, No: nunca muestra las barras; auto: hace que el navegador decida si son necesarias o no en función del contenido de la misma.

NORESIZE = Indica al navegador que la ventana no puede ser redimensionada por el usuario.

Veamos un ejemplo:

SCROLLING = “yes|no|auto” Despliega barras de desplazamiento o no. Yes: muestra las barras, No: nunca muestra las barras; auto: hace que el navegador decida si son necesarias o no en función del contenido de la misma.

NORESIZE = Indica al navegador que la ventana no puede ser redimensionada por el usuario.

Veamos un ejemplo:

<HTML><HEAD>

<TITLE>Ejemlo de frames combinados</TITLE><FRAMESET COLS =“100%”, ROWS=“33%, 33%,*”>

<FRAMESET COLS=“20%,20%,20%,20%,*”><FRAME NAME=“Frame 1”

SRC=“ejemplo.html”><FRAME NAME=“Frame 2”



SRC=“ejemplo.html”></FRAMESET><FRAMESET COLS=“50%,*”>

<FRAME NAME=“Frame 5” SRC=“ejemplo.html”>

<FRAME NAME=“Frame 6” SRC=“ejemplo.html”></FRAMESET>

</FRAMESET></HEAD></HTML>

<HTML><HEAD>

<TITLE>Ejemlo de frames combinados</TITLE><FRAMESET COLS =“100%”, ROWS=“33%, 33%,*”>

<FRAMESET COLS=“20%,20%,20%,20%,*”><FRAME NAME=“Frame 1”




SRC=“ejemplo.html”></FRAMESET><FRAMESET COLS=“50%,*”>

<FRAME NAME=“Frame 5” SRC=“ejemplo.html”>

<FRAME NAME=“Frame 6” SRC=“ejemplo.html”></FRAMESET>

</FRAMESET></HEAD></HTML>

guía básica de html

Documents