Estructura Básica de HTML

Estructura bsica de HTML, introduccin de textos y creacin de
marquesinas
HTML
HTML es un acrnimo de Hypertext Markup Language y es una tecnologa que
nos permite escribir pginas Web. HTML es un lenguaje de computacin que
entienden los exploradores Web.
HTML permite implementar el mecanismo apropiado para vincular diferentes
pginas denominandohipervinculacin a esta propiedad. La hipervinculacin
permite ir de una pgina a otra simplemente haciendo clic en un vnculo.
Conocer HTML
Con tantas herramientas de desarrollo Web existentes, es muy fcil crear
pginas Web sin tener ninguna necesidad de saber HTML. Pero no es el caso
crear pginas sin saber con certeza lo que se est haciendo. Cuando algo no
funciona como lo estbamos esperando o deseamos algo especfico, es cuando
se requiere saber donde es necesario realizar correcciones o adecuaciones, y
para hacerlo, requerimos introducir o modificar HTML. Si no conocemos HTML
estaremos siempre sujetos a la solucin que nos pueda brindar la herramienta.
Conocer HTML garntiza el control total de nuestras pginas Web.
Estructura bsica de un documento HTML
Lo primero que debemos considerar dentro de la organizacin bsica de HTML
es el uso de los corchetes angulares< y >. En HTML estos corchetes contienen en
su interior cdigo especial llamado ETIQUETA que indican la estructura y el
formato del CONTENIDO de la pgina. HTML est formado por muchas etiquetas
que pueden realizar infinidad de tareas para dar formato a nuestras pginas Web.
Tres son las etiquetas (tags) que describen la estructura general de un

documento y dan una informacin sencilla sobre l. Estas etiquetas no afectan a la
apariencia del documento y solo interpretan y filtran los archivos HTML.
<HTML>: Limitan el documento e indica que se encuentra escrito en este

lenguaje.
<HEAD>: Especifica el prlogo del resto del archivo esto es, el encabezado.
Son pocas las etiquetas que van dentro de ella, destacando la del titulo
<TITLE> que ser utilizado por los marcadores del navegador e identificar
el contenido de la pgina. Solo puede haber un ttulo por documento,
preferiblemente corto aunque significativo, y no caben otras etiquetas
dentro de l. En <head> no hay que colocar nada del texto del documento.
<BODY>: Encierra el resto del documento, el contenido es el que se

muestra en un explorador Web.
Las etiquetas tienen propiedades, las cuales son descritas por medio de
los Atributos. Un atributo es una opcin que permite proporcionar detalles acerca
de cmo una etiqueta afectar el contenido. Es importante mencionar que HTML
no distingue entre maysculas o minsculas, o una combinacin de ambas.
El primer paso para crear una pgina es crear un documento de texto mediante
el editor de texto que desee. Puede utilizar el editor Microsoft Windows que es el
Block de notas o cualquier otro editor.
Un editor de texto es un programa que permite crear y modificar archivos
digitales compuestos nicamente por texto sin formato, conocidos comnmente
como archivos de texto texto plano y son incluidos en el sistema operativo o en
algn Paquete de software.
Lo primero que debemos considerar es la estructura general de la pgina por lo
que debemos escribir en ella su contenido.
ETIQUETA
<HTML>
FUNCIN
Empieza
un
documento HTML
<HEAD>
Zona de cabecera
<TITLE>
Zona de ttulo
</TITLE>
Termina
zona
de
zona
de
ttulo
</HEAD>
Termina
cabecera
<BODY>
Zona de cuerpo del

documento
</BODY>
Termina
zona
de
cuerpo del documento

</HTML>
Termina documento
HTML
Es importante que ninguna de nuestras pginas carezca de ttulo ya que el
explorador buscar el ttulo para identificar su pgina.
TEXTO
Para incluir texto en una pgina basta teclear ste entre las etiquetas<BODY> y
</BODY>; sin embargo, podemos hacer uso de etiquetas para mejorar la
apariencia de la informacin. Las etiquetas que se utilizan con mayor frecuencia
para dar formato al texto son:
ETIQUETA
<B> </B>
<I> </I>
<U></U>
<P>
<BR>
FUNCIN
Texto
en
negrilla
Texto
en
itlica
Texto
subrayado
Etiqueta
de prrafo
Etiqueta
para
introducir
saltos
de
lnea
Etiqueta
<BLOCKQUOTE></BLOCKQUO para
TE>
introducir
sangra
<FONT> </FONT>
A
continuacin
tenemos
etiqueta <font..> anidada
un
Fuente
ejemplo
dentro
en
el
de
que
la
tenemos
la
etiqueta <p..>.:
<p><center><font color="#993300" size="4" face="Verdana, Arial, Helvetica,

MS Sans Serif">Bienvenidos a www.ithinkweb.com.mx</font></center></p>
Este cdigo dara como resultado el siguiente texto:
Bienvenidos a www.ithinkweb.com.mx
Mi primera pgina
Lo primero que tienes que hacer es abrir el Bloc de notas. Para abrirlo, puedes
hacerlo con el men Inicio > Todos los Programas > Accesorios, opcin Bloc
de notas.
Escribe, en el documento en blanco, el texto siguiente:
<html>
<head>
<title>MI
PRIMERA
PAGINA</title>
<body
<font
</head>
bgcolor="#FFFF99">
color="#000066"
size="5">Estoy
realizando
mi
primera
pgina
Web.</font>
</body>
</html>
Guarda el documento con la extensin html (o si prefieres htm) con el
nombre prueba.html
Men Archivo > Guardar selecciona la carpeta deseada y asgnale un nombre,

por ejemplo prueba.html.
Si das doble clic sobre el nombre del archivo prueba.html, ste se abrir
automticamente
en el navegador que
tengas instalado
en tu computadora.
El navegador deber mostrar una pgina como la de la izquierda.

Siempre que se inserta texto en HTML hay que tener en cuenta que si se
escriben varios espacios en blanco seguidos slamente se mostrar uno en el
navegador. Para conseguir que se muestren varios espacios en blanco seguidos
puede sustituirse cada uno de ellos por &nbsp.
HTML cuenta con las etiquetas de encabezado, que identifiquen encabezados
de secciones en un documento. Estas seis etiquetas de encabezado describen
encabezados de diversos tamaos, en orden decreciente de importancia:
<H1>, <H2>, <H3>, <H4>, <H5>, <H6>.
En la figura de la izquierda podemos ver los
encabezados tal como se veran en una pgina.
Estilos de texto
Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto
que se encuentra entre ellas, y generalmente se utilizan para resaltarlo. Estos
estilos pueden agruparse segn vayan asociados al tipo de letra o a la informacin
que represente el texto. Todas estas etiquetas necesitan una etiqueta de cierre, y
tambin pueden aplicarse varias etiquetas al mismo texto.
A continuacin se muestran algunas etiquetas con ejemplos, asociadas al tipo
de letra:
Etiqueta
Significado
Ejemplo
<b>
negrita
HTML de ithinkweb
<i>
cursiva
HTML de ithinkweb
<u>
subrayado
HTML de ithinkweb
<s>
tachado
HTML de ithinkweb
Aumenta el tamao de la
<big>
HTML de ithinkweb
fuente
Disminuye el tamao de la
<small>
HTML de ithinkweb
fuente
Etiqueta
<br>
para
introducir HTML
saltos de lnea
<blockquote
>
Etiqueta
ithinkweb
ithinkweb
para
sangra
<font>
de
Fuente
introducir
HTML de ithinkweb
HTML de ithinkweb
Prrafos <p>
El texto de una pgina puede agruparse en prrafos. Para ello, el texto de cada
uno de los prrafos debe insertarse entre las etiquetas <p> y </p>. Las
etiquetas <p> y </p> hacen que se cambie de lnea automticamente. Tambin es
posible cambiar la alineacin del texto de cada prrafo. Para ello se modifica el
valor
del
atributo align,
cuyos
valores
pueden
ser left (izquierda), right (derecha), center (centrado) o justify (justificado).

Por ejemplo, para insertar el texto:
Bienvenidos a mi pgina.
Esta es una pgina dedicada a estudiantes de Bachillerato.
Habra que escribir:
<p>Bienvenidos a mi p&aacutegina.<p>
<p>Esta es una p&aacutegina dedicada a estudiantes de Bachillerato.</p>
Otra
forma
de
cambiar
la
alineacin
del
texto
es
mediante
las
etiquetas <div> y </div>, para las que tambin existe el atributo align. La
etiqueta <div>, al igual que la etiqueta <p>, se utiliza para agrupar bloques de
texto, pero con la diferencia de que la separacin entre ellos es menor.
Tambin
es
posible
insertar
el
texto
entre
las
etiquetas <center> y </center> para que aparezca centrado.

Por ejemplo, para insertar el texto:
Bienvenidos a mi pgina.
Habra que escribir:
<p><center>Bienvenidos a mi p&aacutegina.</center></p>
Otro par de etiquetas que permiten agrupar bloques de texto, pero que no
implican el cambio de lnea (como en el caso de <p> y <div>), son las
etiquetas <span> y </span> y que se utlizan comunmente en las hojas de estilo.
Marquesinas <marquee>
Las marquesinas son lneas de texto que pueden desplazarse de un lado a
otro
de
la
ventana
en
forma
de
lnea
se
utilizan
las
etiquetas <marquee> y </marquee>.

La
marquesina,
indefinidamente,
por
pero
defecto,
se
se
pueden
desplaza
de
modificar
derecha
estas
izquierda
propiedades..
Con el atributo behavior puede modificarse el tipo de movimiento. Puede tomar

los valores alternate (de lado a lado de la ventana, como si rebotara en los
extremos), scroll (de un lado a otro, continuamente) o slide (de un lado a otro,
pero una sola vez).
Con el atributo direction puede modificarse la direccin en la que se mover el

texto. Puede tomar los valores down(de arriba a abajo), up (de abajo a
arriba), left (de
derecha
izquierda)
o left (de
izquierda
derecha).
Tambin es posible establecer un color de fondo, a travs del atributo bgcolor.

Para obtener la siguiente marquesina debemos usar el cdigo que aparece
enseguida:
<marquee bgcolor="#000033" behavior="alternate" direction="right">
<b><font color="#FFFFCC" size="5">ithinkweb.com.mx </font></b> </marqu
ee>

Estructura Básica de HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Estructura Básica de HTML

Uploaded by

Copyright:

Available Formats

Estructura bsica de HTML, introduccin de textos y creacin de

Tres son las etiquetas (tags) que describen la estructura general de un

<HTML>: Limitan el documento e indica que se encuentra escrito en este

<BODY>: Encierra el resto del documento, el contenido es el que se

Zona de cuerpo del

cuerpo del documento

etiqueta <font..> anidada

<p><center><font color="#993300" size="4" face="Verdana, Arial, Helvetica,

Men Archivo > Guardar selecciona la carpeta deseada y asgnale un nombre,

El navegador deber mostrar una pgina como la de la izquierda.

ser left (izquierda), right (derecha), center (centrado) o justify (justificado).

etiquetas <center> y </center> para que aparezca centrado.

etiquetas <marquee> y </marquee>.

Con el atributo behavior puede modificarse el tipo de movimiento. Puede tomar

Con el atributo direction puede modificarse la direccin en la que se mover el

Tambin es posible establecer un color de fondo, a travs del atributo bgcolor.

You might also like