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>.
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 >
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 <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">
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>
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>
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>

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
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><br><FONT
FACE="COMIC
SANS MS" SIZE="5" COLOR="blue">ESTA
ES
UNA
MARQUESINA</FONT></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.
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&oacute;n.
<li><A HREF="introduccion1.html">Introducci&oacute;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.

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>



1.
2.
3.
4.
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.
TARGET = _blank. El enlace se carga en una nueva ventana.
TARGET = _self. El enlace se carga en la misma ventana en que se
encuentra.
TARGET = _parent. El enlace se carga en el FRAMESET
inmediatamente superior al documento.
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.

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

%. Indica que la altura o anchura es un valor porcentaje

*. Indica que debe asignarse ala ventana todo el espacio
altura o anchura de la ventana en píxeles.
relativo al tamaño de la ventana que lo contiene.
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> 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:
<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”>
<FRAME NAME=“Frame 3” SRC=“ejemplo.html”>
<FRAME NAME=“Frame 4” 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>
Descargar

Diapositiva 1