Manual HTML básico

Manual de Codigos Basicos HTML
(Material Complementario)
<HTML>
Todos los elementos y el contenido de un documento HTML están encerrados dentro de las marcas
<HTML></HTML> cuya función es servir de apertura y cierre al archivo.
Las marcas <HTML></HTML> indican al navegador que el documento está marcado en HTML, si bien
los navegadores más recientes consiguen interpretar igualmente las marcas sucesivas. Dicho esto,
existen en cualquier caso dos razones para introducir siempre la marca <HTML></HTML> dentro del
documento:
 HTML no es el único lenguaje de marcado presente en el WWW (piénsese, por ejemplo, en el

XML o el PHP) y corremos el riesgo de que el navegador malinterprete las marcas,
confundiéndolas con otros lenguajes de marcado.
 Los usuarios de viejos navegadores corren el riesgo de visualizar un documento sin formato
alguno.
<HEAD>
Los elementos <HEAD></HEAD> se colocan inmediatamente después de la apertura de la marca

<HTML> y cierran el encabezamiento propiamente dicho del documento; es decir toda la información
que necesita el navegador, el servidor de web y los motores de búsqueda. Se trata del primer
elemento que lee el navegador y, por ello, es el mejor lugar para insertar sintaxis script . Dentro de
<HEAD></HEAD> se introduce el título del documento y otros datos. He aquí la sintaxis HTML de un
documento con los comandos hasta ahora examinados:
<!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN">

<HTML>
<HEAD></HEAD>
</HTML>
<TITLE>
El elemento <TITLE></TITLE> es el más utilizado dentro de la marca <HEAD>, dado que sirve para dar
título a la página. El título suele ser visualizado por los navegadores en la cabecera de página. La que
figura a continuación es la imagen del TITLE de HTMLpoint (el texto es: HTMLpoint - el sitio italiano
sobre el Web publishing):
1 Universidad del Pedregal | Escuela de Derecho

Dr. Arturo Chávez Rodríguez
<BODY>
El elemento <BODY> se coloca inmediatamente después del cierre de la marca </HEAD> y, en
cualquier caso, dentro de los elemenos <HTML></HTML>; tiene una marca de apertura y una de
cierre y delimitado por ellas figura el cuerpo del documento.
Si el elemento <HEAD> contenía metainformación (es decir, datos no visualizados materialmente por
el navegador) la función de la marca <BODY> es la de mostrar los objetos (texto, imágenes, sonidos,
apliques, etc.) de la página.
La sintaxis correcta del elemento <BODY> es la siguiente:
<BODY>
Contenido del documento
</BODY>
La marca <BODY> se utiliza también para proporcionar al navegador información sobre la disposición
de los objetos en el documento, así como para impostar varios atributos de visualización para el
documento. A continuación veremos cuáles.
BGCOLOR
El atributo BGCOLOR imposta un fondo de un solo color. La sintaxis correcta es:
<BODY BGCOLOR="red">
Es posible sustituir el nombre en inglés con valores hexadecimales. Por ejemplo, el color rojo (red) se
sustituye de esta manera:
<BODY BGCOLOR="#ff0000">
La utilidad de los colores hexadecimales es mayor cuando no se desea un color estándar sino
tonalidades diversas o difuminadas. Los editores HTML de mayor difusión prevén paletas para la
definición de los colores hexadecimales, mientras que Paint Shop Pro proporciona también, además
del color, el correspondiente valor hexadecimal que copiar/pegar.
Para un ejemplo práctico, haz clic aquí
BACKGROUND
BACKGROUND tiene una función similar a BGCOLOR, pero mientras el segundo muestra un tono único
del color, el primero visualiza en el fondo una imagen en formato gráfico .gif o .jpg.
Imaginemos, por ejemplo, que queremos construir un fondo con la siguiente imagen:

La imagen se llama sfondo.gif y se encuentra depositada en el mismo directorio que el documento. La
sintaxis correcta para impostar la imagen como fondo es:
<BODY BACKGROUND="sfondo.gif">
El navegador visualiza la imagen sfondo.gif y la repite en todos los puntos disponibles de la pantalla.
En otras palabras, no se limita a visualizar la imagen una sola vez, en el centro de la página por
ejemplo, sino que llena todo espacio a disposición.
Por esta razón, es absolutamente necesario crear un fondo que, si viene repetido, no presente
interrupciones sino un aspecto lo más uniforme posible.
Es conveniente elegir una imagen de fondo que no dificulte la lectura y que se ajuste lo más posible al
color del texto. Por ejemplo, un texto naranja sobre fondo rojo no podría leerse. Es siempre mejor
usar el color negro para el texto y tonos pastel para el fondo.
Formatear títulos de <H1> ad <H6>
La marca <Hn> (donde n puede ser cualquier número comprendido entre 1 y 6) se emplea para definir
el estilo de los encabezados de la página, dándoles más o menos relieve según el número
correspondiente. Como hemos señalado, los números van del 1 al 6, siendo más importantes los
números más bajos que los altos.
<FONT>
La marca tipográfica FONT es una de las más utilizadas y frecuentes en el actual web publishing. En la
sección Impostar el fondo del documento (elemento BODY), hemos visto que el atributo TEXT da un
color único a todo el texto del documento. La marca FONT tiene, en parte, una función similar,
aunque es mucho más amplia y conceptualmente diversa.
La marca FONT se emplea para formatear el tipo y tamaño del texto en algunos puntos del
documento específicos. En realidad, si la marca FONT abriera y cerrara el documento, todo el texto
comprendido dentro quedaría formateado tal y como estuviera indicado. Sin embargo,
conceptualmente la marca FONT ha sido concebida para definir partes limitadas de texto. Por otro
lado, mientras TEXT determina tan sólo en color del texto, la marca FONT puede definir el tipo
utilizado, así como su tamaño y color.
Aquí tienes la sintaxis correcta de la marca:
<FONT FACE="arial" SIZE=5 COLOR=red>Tipo para formatear</FONT>
El atributo FACE="arial" indica el tipo que se visualizará; SIZE=5 el tamaño del tipo, que puede estar
comprendido entre 1 y 7 (mayor dimensión cuanto más cercano al 7); COLOR=red indica el color del
texto (que puede expresarse asimismo en valores hexadecimales).

<B>, <I>, <U>
<B>, <I>, <U> son tres de las marcas de formatación tipográfica más usadas del HTML. Todas ellas
deben constar de apertura y cierre:
<B> Texto en negrita </B>

El texto comprendido entre estas marcas queda formateado en negrita (la B corresponde al inglés
BOLD).
<I> Texto en cursiva </I>

El texto comprendido entre estas marcas queda formateado en cursiva (la I corresponde al inglés
ITALIC)
<U> Texto subrayado </U>

El texto comprendido entre estas marcas queda subrayado aun sin ser un enlace (la U corresponde al
inglés UNDERLINE).
Existe también la marca STRIKE para el texto tachado:

<STRIKE> Texto tachado </STRIKE>
Crear párrafos con <P>
La marca <P> sirve para definir un nuevo párrafo de texto, indicando al navegador que el mismo debe
empezar en una nueva línea y colocarse a la derecha, a la izquierda o centrado. Si no se especifica
otra cosa, la marca <P> alinea el texto por defecto a la izquierda. Para indicar otros tipos de
alineación, existen atributos específicos:
<P ALIGN=left>
Define un párrafo y alinea el texto a la izquierda(left).
<P ALIGN=right>
Define un párrafo y alinea el texto a la derecha (right).
<P ALIGN=center>
Define un párrafo y centra el texto (center).
Salto de línea con <BR>
<BR> es una marca de interrupción de línea. Tiene un funcionamiento similar a la marca de párrafo
vista anteriormente, pero se diferencia porque no indica el inicio de un nuevo párrafo.
Dicho de otro modo, su función es parecida a la de la tecla "enter" del teclado.
Se usa sin marca de cierre.

Líneas horizontales con <HR>
Las líneas horizontales constituyen un instrumento idóneo para dividir partes del documento y hacer
más legible el texto. La sintaxis necesaria para su inserción en un documento HTML es la siguiente:
<HR align="CENTER" size="2" width="400" color="Red" noshade>
La marca HR (acrónimo de Horizontal Rule) no necesita cierre. Consta de diversos atributos:

aling="CENTER": define la alineación de la línea (center, right, left).
size="2": define el grosor, en píxel, de la línea.
width="400": define la longitud horizontal, en píxel, de la línea. Puede también expresarse en tanto
por cien respecto al espacio a disposición: width=80%.
color="RED": define el color de la línea.
noshade: si este atributo está presente, elimina el efecto 3D de la línea. Si no está presente,
produce dicho efecto.
Listas ordenadas
Las listas ordenadas constan de una sola marca de apertura y cierre<OL></OL> y tantas marcas de
lista como voces hay en el menú <LI>. La sintaxis correcta para elaborar listas ordenadas es:
<OL>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>
<IMG>
Antes de describir en detalle la marca principal de inserción de imágenes en los hipertextos, es

conveniente precisar algunos conceptos de HTML. A diferencia de muchos procesadores de texto (Ms
Word, por ejemplo), los hipertextos no se "funden" con las imágenes que les sirven de
acompañamiento gráfico, sino que se limitan a invocarlas desde un recorrido específico in situ o en el
web. Dicho de otro modo, existe una división muy clara entre archivo .htm e imágenes (y también
sonidos, apliques, etc.). Los documentos HTML se limitan a prever dentro de ellos un espacio en el
que se insertan las imágenes solicitadas.
La marca <IMG> no necesita cierre y su sintaxis correcta es:
<IMG SRC="immagine.gif">

donce SRC corresponde al inglés Search y es el recorrido del que el navegador saca la imagen (en este
caso "immagine.gif"). Como hemos señalado, esta marca es única en el sentido de que NO lleva como
cierre el correspondiente </IMG>.
WIDTH y HEIGHT
En los ejemplos vistos hasta ahora, no hemos especificado las medidas de la imagen que el navegador
se ha encargado de buscar automáticamente. Es posible definir la anchura y la altura de la imagen
gracias a los atributos width y height, respectivamente:
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 ALT="Obra de K. Haring">
donde WIDTH=178 es la dimensión horizontal (ancho) de la imagen expresada en píxel,

y HEIGHT=180 la dimensión vertical (alto).
Mediante estos atributos podemos definir dimensiones diferentes de las que realmente tiene la
imagen. En cualquier caso, es aconsejable insertar imágenes con su tamaño efectivo sobre todo si
están en formato GIF, dado que, cuando se cambian las medidas, este formato pierde mucha calidad.
ALIGN
El atributo ALIGN define la posición de la imagen respecto al texto colocado inmediatamente antes o
después de la misma. Existen varias opciones para el atributo ALIGN:
ALIGN=top: alinea la primera línea de texto con la parte superior de la imagen.
ALIGN=middle: alinea la primera línea del texto con el centro de la imagen.
ALIGN=bottom: alinea la primera línea de texto con la parte inferior de la imagen.
ALIGN=left: el texto se coloca a la derecha de la imagen empezando desde la parte superior de la
misma.
ALIGN=right: el texto se coloca a la izquierda de la imagen empezando desde la parte superior de la
misma.
<A HREF>
El elemento <A> (la A corresponde al inglés Anchor) necesita una marca de apertura y una de cierre y
entre ellas podemos insertar texto, imágenes y otros elementos multimedia.
Para que funcione, el elemento <A> debe estar asociado a otros atributos. De éstos, el más
importante es HREF (abreviatura del inglés Hypertext Reference), que contiene el URL o página donde
ir. La sintaxis es:
<A HREF="http://www.htmlpoint.com">Visita HTMLpoint</A>
En el código antes citado, si hacemos clic en el texto "Visita HTMLpoint" (comprendido entre las
marcas de apertura y cierre), llegamos al URL http://www.htmlpoint.com indicado por el atributo

HREF.
Es posible sustituir el texto con una imagen obteniendo un efecto idéntico.
HREF puede contener tanto enlaces a recursos externos (como en este caso), como enlaces a otros
documentos de la misma dirección. Por ejemplo, si nos encontraramos en la página 1.htm y
quisiéramos incluir un enlace a la página 2.htm presente en la misma carpeta, el código correcto sería:
<A HREF="2.htm">Haz clic aquí para llegar a la nueva página</A>
<FRAME>
Amados u odiados, útiles o inútiles, excelentes o pésimos, los marcos son instrumentos que forman ya
parte habitual del web y que los navegadores gestionan hoy día a la perfección. Los detractores de los
marcos afirman la inutilidad de subdividir ulteriormente las páginas web, las cuales, en última
instancia, pueden resultar poco legibles. Otros, como yo, consideran que los marcos pueden llegar a
ser muy útiles ya que se evita cargar las mismas imágenes y se mantienen ordenados el contenido y la
estructura del sitio. Naturalmente, abusar de los marcos puede producir como resultado pésimas
impostaciones gráficas, obteniendo un efecto contrario al previsto.
Un punto en contra de los marcos es, ciertamente, su incompatibilidad con los programas de
navegación gráfica destinados a invidentes, los cuales se bloquean impidiendo la lectura de las
páginas.
Una buena solución es crear una versión con marco y una versión sin marco (como esta misma guía ha
hecho).
Es posible también que queramos cargar, con un solo clic, dos o más marcos (naturalmente, la
ventana tiene que estar dividida por lo menos en tres marcos).
Tomemos una página subdividida como en la figura:
<frameset cols="120,*">
<frame name="sx" src="sx.htm">
<frameset rows="100,*">
<frame name="alto2" src="top.htm">
<frame name="centrale3" src="central.htm">
</frameset>
</frameset>
Lo que queremos es insertar un solo enlace en el marco de "SX" que cargue simultáneamente dos
páginas diversas en los dos marcos de la derecha: "alto" y "central". Para ello, es necesario insertar
algunas líneas con código JavaScript. La primera parte del código va insertada entre <HEAD></HEAD>:
<HEAD>
<script language="JavaScript">


</script>
</HEAD>
mientras que la segunda parte deberá quedar comprendida entre <BODY></BODY>, donde se quiere
insertar el enlace:
<BODY>
<FORM NAME="buttons">
<INPUT TYPE="button" VALUE="Haz clic"
onClick="loadtwo('nuovo1.htm','nuovo2.htm')">
</FORM>
</BODY>

Manual HTML básico

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Manual HTML básico

Hochgeladen von

Copyright:

Verfügbare Formate

Manual de Codigos Basicos HTML

 HTML no es el único lenguaje de marcado presente en el WWW (piénsese, por ejemplo, en el

Los elementos <HEAD></HEAD> se colocan inmediatamente después de la apertura de la marca

<!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN">

1 Universidad del Pedregal | Escuela de Derecho

La sintaxis correcta del elemento <BODY> es la siguiente:

El atributo BGCOLOR imposta un fondo de un solo color. La sintaxis correcta es:

2 Universidad del Pedregal | Escuela de Derecho

Formatear títulos de <H1> ad <H6>

<FONT FACE="arial" SIZE=5 COLOR=red>Tipo para formatear</FONT>

3 Universidad del Pedregal | Escuela de Derecho

<B> Texto en negrita </B>

<I> Texto en cursiva </I>

<U> Texto subrayado </U>

Existe también la marca STRIKE para el texto tachado:

Crear párrafos con <P>

Salto de línea con <BR>

4 Universidad del Pedregal | Escuela de Derecho

<HR align="CENTER" size="2" width="400" color="Red" noshade>

La marca HR (acrónimo de Horizontal Rule) no necesita cierre. Consta de diversos atributos:

Antes de describir en detalle la marca principal de inserción de imágenes en los hipertextos, es

La marca <IMG> no necesita cierre y su sintaxis correcta es:

5 Universidad del Pedregal | Escuela de Derecho

<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 ALT="Obra de K. Haring">

donde WIDTH=178 es la dimensión horizontal (ancho) de la imagen expresada en píxel,

<A HREF="http://www.htmlpoint.com">Visita HTMLpoint</A>

6 Universidad del Pedregal | Escuela de Derecho

Es posible sustituir el texto con una imagen obteniendo un efecto idéntico.

<A HREF="2.htm">Haz clic aquí para llegar a la nueva página</A>

7 Universidad del Pedregal | Escuela de Derecho

8 Universidad del Pedregal | Escuela de Derecho

Das könnte Ihnen auch gefallen