GUIA DE HTML No.
1
HTML
(HyperText Matrkup
Lenguaje) es el lenguaje con el que
se construyen las páginas Web.
ESTRUCTURA
BÁSICA DE UN DOCUMENTO HTML
<html>
<head>
<title>Título de la ventana</title>
</head>
<body>
<h1>Mi primera página WEB</h1>
<h2>Bienvenida</h2>
Hola a todos, como han deducido por el
titulo esta es la
primera página web que hago, espero que
les guste.
<h2>Propósito</h2>
En esta página iré practicando con los
conocimientos que
adquiera en el curso de HTML
</body> </html>
<HTML>
|
Etiqueta que indica que lo que viene a
continuación es un documento HTML
|
|
<HEAD>
|
Etiqueta de apertura de la cabecera.
Aquí va la información sobre el título de la página. El autor, palabras
clave, etc. Que no se presentarán en la ventana del navegador, salvo el
título que aparecerá en la barra de título de la parte superior.
|
|
</HEAD>
|
Etiqueta de cierre de la cabecera
|
|
<BODY>
|
Etiqueta de apertura del cuerpo. Aquí va
el contenido de la página que será lo que se presente en pantalla
|
|
</BODY>
|
Etiqueta de cierre de cuerpo
|
|
</HTML>
|
Etiqueta de cierre de documento
|
|
<br>
|
Salto de línea
|
|
<p>
|
Indica un salto de párrafo e introducirá
un doble salto de línea.
|
|
</p>
|
Etiqueta de cierre de párrafo
|
|
<br>
|
Espacio entre líneas
|
|
Cabeceras
|
<h1>Cabecera tipo 1 </h1>
<h2>Cabecera tipo 2 </h2>
<h3>Cabecera tipo 3 </h3>
<h4>Cabecera tipo 4 </h4>
<h5>Cabecera tipo 5 </h5>
<h6>Cabecera tipo 6 </h6>
|
|
Énfasis al texto:
<B> </B>
<I> </I>
<U> </U>
|
Negrilla
Itálica
Subrayada
|
|
Alineación centrada
Alineación a partir del margen derecho
|
Alineación del texto:
<CENTER> </CENTER>
<DIV ALIGN=RIGHT> </DIV>
|
|
Otros
atributos del texto:
<blockquote>...
</blockquote>
<SUP> </SUP>
<SUB> </SUB>
|
Indica
que el párrafo que encierra es un texto parafraseado. Al usar esta etiqueta
el navegador mostrará el texto en un nuevo párrafo con márgenes a la
izquierda y a la derecha
En
matemáticas escribe índices o potencias
En
matemáticas escribe subíndices
|
|
Ocupa el 75%
de su anchura (width) normal
Define anchura
de 300 pixels
Alinear a la
izquierda
Alinear a la
derecha
Variar su
espesor
Definir como
una línea sólida, no embutida sobre el fondo
|
Separador horizontal
<HR WIDTH=75%>
<HR WIDTH=300>
<HR ALIGN=LEFT>
<HR ALIGN=RIGHT>
<HR
SIZE=20>
<HR
NOSHADE>
|
|
Para adoptar
un tipo y tamaño de fuente determinado
|
Tipos de
fuente:
<FONT
FACE=”Verdana”>
</FONT>
Tamaño de la
fuente:
<FONT
SIZE=5> </FONT>
|
|
XX es un
número indicativo de la cantidad de color rojo
YY es un
número indicativo de la cantidad de color verde
ZZ es un
número indicativo de la cantidad de color azul
Estos números
están en notación hexadecimal(de
|
Fondos
1.
Con un color uniforme
<BODY BGCOLOR=“#XXYYZZ”>
#FF0000 – Rojo
#00FF00 –
Verde
#0000FF – Azul
#FFFFFF –
Blanco
#000000 –
Negro
#FFFF00 –
Amarillo
|
2.
Con una imagen
<BODY
BACKGROUND=“imagen=gif”>
<BODY
BACKGROUND=“imagen=jpg”>
|
<BODY
BGCOLOR=”#XXYYZZ” TEXT=”#XXYYZZ” LINK=”#XXYYZZ” VLIN=”#XXYYZZ”
ALINK=”#XXYYZZ”>
|
Color del
texto y de los enlaces
LINK – color
de los enlaces
VLINK –color
de los enlaces visitados
ALINK – color
de los enlaces activos (el que adquieren en el momento de ser pulsados)
Cambio de
color de una parte del texto
<FONT COLOR=”#FF0000> </FONT>
|
|
Para insertar
una imagen en una página
|
<img src="flecha1.gif">
|
|
Texto parpadea
|
<BLINK> Este texto parpadea </BLINK> |
|
Mover un texto
|
<MARQUEE>Me estoy moviendo </MARQUEE> |
|
TEXTO ALREDEDOR DE LAS IMÁGENES:
align=top:
Alinea la parte
superior de la imagen con la parte superior de la línea
align=middle:
Alinea el centro
(vertical) de la imagen con el centro de la línea.
align=bottom:
Alinea la parte
inferior de la imagen con la parte inferior de la línea de texto
Ejemplo:
<img
src="PAISAJE.jpg" widht=100 height=100 align="top">
<img
src="paisaje.jpg" align="right" widht=100 height=100>
<div align
left><img src="PAISAJE.jpg" widht=100 height=100
align="bottom">
align=left
La palabra left
significa, en inglés, izquierda, por tanto al usar este valor la imagen se
sitúa a la izquierda de la página. Pero su efecto es aún más importante, ya que
si a continuación de la imagen introducimos texto o cualquier otro elemento del
Web éste rodeará a la imagen, no pasará a la siguiente línea.
align=right
Probablemente el
lector ya haya deducido que este otro valor sirve para indicar que la imagen
estará alineada a la derecha (right significa precisamente derecha en inglés).
El efecto provocado por align=right es idéntico al anterior, solo que ahora la
imagen se situará a la derecha de la página y el texto la bordeará por la
izquierda.
Ejemplo:
<img
src="paisaje.jpg" align="left" widht=100 height=100>
TERMINAR TEXTO ENVOLVENTE:
<br
clear=right> Provoca un salto de línea hasta el primer margen libre a la
derecha
<br
clear=left> Provoca un salto de línea hasta el primer margen libre a la
izquierda.
<br
clear=all> Provoca un salto hasta la primera línea que tiene tanto el margen
izquierdo como el margen derecho libres.
<img
align=left vspace=35 hspace=35> Controlar los márgenes alrededor de las
imágenes
Etiqueta
<address>, que en inglés significa dirección. Esta etiqueta está
compuesta, igualmente, por dos instrucciones y se usa para incluir información
sobre el autor de una página WEB o elementos relacionados
VARIAR EL TAMAÑO DE LAS IMÁGENES:
El lenguaje HTML
nos permitirá modificar el tamaño de las imágenes a incluir en una página de
manera que podamos adaptarlas al tamaño que necesitemos. La forma de hacer
realidad esta transformación es usar dos atributos de la etiqueta IMG: WIDTH
y HEIGHT, que significan en inglés anchura y altura respectivamente. A
cada uno de estos atributos deberemos darle un tamaño en pixeles que suele
oscilar entre 20 y 600 en los casos habituales.
<IMG
SRC="imagen.gif" WIDTH=250 HEIGHT=250>
