MANUAL BÁSICO SOBRE HTML
1.Una pagina basica
El principio del lenguaje HTML es el uso de las etiquetas (tags) que funcionan de la siguiente forma:
<xxx>Este es el inicio de una etiqueta.
</xxx>este es el cierre de una etiqueta
Estructura básica
<HTMl>
<HEAD>
<TITLE> Título de la pagina</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
El documento está dividido en dos:
- encabezado, comprendido entre las etiquetas <HEAD>y</HEAD> y que contiene información que no se ve en pantalla. Esta información es la siguiente
- Título de la página que se muestra en la parte superior y está comprendido entre las estiquetas <TITLE> y </TITLE>
- Nombre del autor de la página y del programa utilizado <meta name="Autor" content="nombre del autor">
- Palabras clave para los buscadores <meta name="Keywords" content="palabras clave separadas por comas">
- Pequeña descripción de la página <meta name="description" content="descripcion de pág">ina
- cuerpo comprendido entre las etiquetas <BODY> y </BODY>. Dentro del cuerpo está todo lo que queremos que aparezca en la pantalla principal (texto, imágenes...).
Atributos del body
- BGCOLOR: Color de fondo
- TEXT: Color de fuente
- BACKGROUND:Inserta una imagen como fondo de pantalla
Otras etiquetas
- <p></p>: Inserta un párrafo. Si dentro de la primera se introduce align="right" o align="center", alinea el texto a la derecha o al centro respectivamente
- <br>: Inserta un salto de linea
- <h1></h1>.......<h6></h6>: Encabezados con distintos tamaños de fuente (H6 es el mayor)
- <font size="número"></font>: Tamaño de la fuente
- <hr>: Inserta una linea horizontal
- <b></b>:Texto en negrita
- <i></i>:Texto en cursiva
- <u></u>:Texto subrayado
volver al indice ver ejemplos
2. Imágenes
La estructura básica para inserta imágenes en una página web es:
<img src="ruta/nombre de la foto">
Se recomienda que las imágenes no superen los 50 Kb con una resolución de 72 ppp pues tardan mucho tiempo en ser descargadas
Atributos del la imágenes
- Alt="descripción": Texto alternativo que aparece como un tip o en su defecto
- Border="numero": Inserta un marco en la foto
- Width="número": Especifica el ancho de la imagen
- Height="número": Especifica el alto de la imagen
- Hspace="número":nº de espacios horizontales que separan la imagen del texto
- Vspace="número":nº de espacios verticales que separan la imagen del texto
- align=
- "center": Para escribir desde el centro del lado derecho de la imagen
- "top": Para escribir desde la parte superior del lado derecho de la imagen
volver al indice ver ejemplos
3. Tablas
La estructura básica de una tabla en la siguiente:
<TABLA>
<TR>
<TD> (contenido de la celda)</TD>
<TD> (contenido de la celda)</TD>
<TD> (contenido de la celda)</TD>
</TR>
</TABLA>
Cada conjunto de etiquetas <TR> </TR> indican las filas que compondrán nuestra tabla, y dentro de esta existen las etiquetas correspondientes a las columnas <TD> </TD>
Atributos de las tablas
Algunos de los siguientes atributos pueden ser aplicados a la tabla en general o a las celdas de forma individual
- Bgcolor="#.......":Para especificar el color de fondo
- Background="ruta de un archivo de fondo" Permite insertar una imagen de fondo
- Cellspacing="numero" Permite indicar el espacio entre celdas (similar al ancho de bordes interiores)
- Cellpadding="numero" Permite especificar los márgenes interiores de las celdas
- Border="numero": indica que la tabla sea visible y permite elegir el ancho del mismo
- Width="número": Especifica el ancho de la tabla (si se especifica en % se adapta al tamaño de la ventana ajustando la tabla a las nuevas dimensiones )
- Height="número": Especifica el alto de la tabla (si se especifica en % se adapta al tamaño de la ventana ajustando la tabla a las nuevas dimensiones )
- align=
- "center": Centra el contenido de la celda horizintalmente
- "right":desplaza el contenido de la celda a la derecha
volver al indice ver ejemplos
4. Listas, viñetas y listas de definición
Las listas y la viñetas son similares en cuanto a su estructura.
LISTAS
Estructura básica
<OL>
<LI>(no es necesario cerrar estas etiquetas)
<LI>
<LI>
</OL>
Atributos de las listas
Los atributos siguientes irán dentro de la etiqueta <OL>
- Start="nº":Empieza a numerar desde el nº indicado
- Type="A": Sustituye los números por letras mayúsculas
- Type="a": Sustituye los números por letras minúsculas
- Type="I" o "i": Utiliza el esquema I, II, III, o i, ii, iii
VIÑETAS
Estructura básica
<UL>
<LI>(no es necesario cerrar estas etiquetas)
<LI>
<LI>
</UL>
Atributos viñetas
Existen 3 tipos basico de viñetas que se especifican en la etiqueta <UL>
- Start="circle": Punto negro
- Type="square": Cuadrado negro
- Type="disc": Circulo vacio
LISTAS DE DEFINICIÓN
Se utilizan para realizar definiciones de distintos conceptos
Estructura básica
<DL>
<DT>Concepto definido (no es necesario cerrar estas etiquetas)
<DD>Definición
</DL>
volver al indice ver ejemplos
5. Links o vínculos
El enlace por definición aparece en nuestras pñaginas subrayado y de color azul. La eriqueta encargada de establecer en enlace es: <A></A>
Existen 4 tipos de enlaces:
1. Enlaces dentro de una misma página
Son similares a los marcadores de los procesadores de texto y se suelen usar cuando la página es muy extensa
Estrucura del vínculo:
<A HREF="#marca de destino">texto del link</A>
Estructura de la marca:
<A NAME="mombre de esta marca"></A>
2. Enlaces con otra página nuestra
Puede ser que tengamos varias páginas, una inicial y otras conectadas a ella, e incluso entre ellas mismas.
<A HREF="index.html">texto del vínculo>
3. Enlaces con otra página ajena
<A HREF="http://www.arsvirtual.com">texto del vínculo>
4. Enlaces con una dirección de correo electrónico
<A HREF="mailto: nombre@hotmail.com">texto del vínculo>
Atributos de los vínculos
Dentro de la etiqueta <A HREF="xxxx"
- Target="self" Hace que el vínculo se habra en la misma ventana (es la usada por defecto.
- Target="blnak" Hace que el vínculo se habra en otra ventana distinta a la actual
- Target="_top" Utilizada para frames
- Target="_parent" Utilizada para frames
volver al indice ver ejemplos
|