Etiquetas básicas de HTML
22
{ Etiquetas Básicas de HTML Por: Andrés Iván Martínez
-
Upload
martinezm1 -
Category
Design
-
view
196 -
download
0
description
Presentación con datos importantes sobre las etiquetas de HTML ideales para crear una pagina web.
Transcript of Etiquetas básicas de HTML
{
Etiquetas Básicas de HTML
Por: Andrés Iván Martínez
La etiqueta <IMG> te servirá para situar imágenes enuna página.
Incluir imágenes en una página web es muy sencillo,simplemente debemos tener en cuenta que lasimágenes tienen que tener los formatos GIF, JPG oPNG. Las imágenes dentro de una página web seincluyen utilizando la etiqueta <img>, que no tieneuna etiqueta correspondiente de cierre. Ejemplo:
<imgsrc="http://www.aprenderaprogramar.com/images/logo.png" alt="Logotipo APR2">
Imágen
A la etiqueta <IMG> se le pueden añadir varios atributos para controlarla manera en que un navegador administra una imagen. Estos atributosson los siguientes:
bullet width="x" Permite al navegador predeterminar el ancho, enpixles, que tendrá tu imagen.
bullet height="x" Junto con el atributo width, el navegador puedepreparar el espacio necesario para tu imagen antes de que se muestre.
bullet border="x" Para añadir o eliminar un borde, donde la x será unvalor numérico.
bullet align="xxx" Puedes alinear una imagen horizontal y/overticalmente en una página usando este atributo.
bullet alt="descripción_de_la_imagen" El atributo alt te permitedescribir la imagen para los navegadores de sólo texto, así comoetiquetar la imagen antes de que se cargue en una página.
bullet hspace="x" horizontal space, se usa para añadir espacio vacío, conun valor numérico, en la coordenada horizontal de una imagen.
bullet vspace="x" vertical space, controla el espacio de la imagen en lascoordenadas verticales.
Atributos
Ejemplo
La etiqueta <body> define el cuerpo de undocumento.
Dentro del cuerpo del documento se incluyetodo el contenido del mismo, por ej. textos,enlaces, imágenes, tablas, etc.
Body
Con esta etiqueta puede usar los siguientespropiedades o atributos:
BACKGROUND=imagen ←-Imagen para el fondode la pagina
BGCOLOR=Color ←– Color del fondo de la pagina
TEXT=Color ←- Color del texto dentro de la pagina
LINK=Color ←- Color para las ligas, enlaces ohipervinculos que se encuentren dentro deldocumento
- See more at:http://www.programacionfacil.com/html/body#sthash.gFBkyfOc.dpuf
Atributos
Ejemplo
Para escribir encabezados tenemos que utilizarlas etiquetas <h>.
Esta etiqueta viene acompañada de un número,desde el 1 hasta el 6, predefiniendo éstos eltamaño del encabezado. Así, <h1> sería elencabezado más grande mientras que <h6>sería el más pequeño.
Encabezados
Muchos tipos de texto son aplicables
<h1> Texto muy grande</h1>
<h2>Texto grande</h2>
<h3>Texto algo más grande de lo normal</h3>
<h4>Texto normal</h4>
<h5>Texto pequeño</h5>
<h6>Texto muy pequeño</h6>
Atributos
Ejemplo
Llamada <font>Esta etiqueta especifica el tamaño, color y tipo de fuente paraun texto.
Ejemplo:
<font size="3" color="red">Tamaño: 3 - color: rojo</font><br><font face="serif" color="blue">Nombre de fuente: serif - color:
azul</font><br><font face="verdana" color="green" size="5">Nombre defuente: verdana - color: verde</font>
Resultado
Tamaño: 3 - color: rojoNombre de fuente: serif - color: azulNombre de fuente: verdana - color: verde - tamaño: 4
Fuente
Las propiedades del texto pueden modificarse através de la etiqueta . Para ello, podemos insertar eltexto entre las etiquetas y , especificando algunos delos atributos de la etiqueta:
FACE: fuente. nombre de la fuente, o fuentes
COLOR: color del texto. número hexadecimal o textopredefinido
SIZE: tamaño del texto. valores del 1 al 7, siendo pordefecto el 3, o desplazamiento respecto al tamaño pordefecto, añadiendo + o - delante del valor
Atributos
Ejemplo
Las tablas se usan con profusión en las páginas Web, muchas vecesdebido a que son el único instrumento con el que se cuenta, paraasegurarse que las cosas estarán en su sitio. Para definir una tabla seusan las etiquetas:
<TABLE> y </TABLE> :son las etiquetas donde está contenida la tabla
<TR> y </TR>: son las etiquetas que indican el comienzo y fin de una fila(<th> y </th> si es una fila de cabecera)
<TD> y </TD>: señalan una celda.
La tabla se va definiendo declarando una fila y a continuación las celdasque contiene esa fila, luego otra fila y sus celadas, etc. No es necesarioque todas las filas contengan el mismo número de celdas.
Tablas
El atributo width establece el ancho de la tabla, enporcentaje o en píxeles.
El atributo border establece el grosor del borde de latabla. El valor se interpreta en píxeles y no admiteunidades. Si el valor es 0 o el atributo no estápresente, los navegadores no dibujan ni el bordeexterior de la tabla ni los bordes interiores de lasceldas.
El atributo rules establece qué lados de los bordesinteriores de la tabla son visibles.
El atributo cellspacing establece la separación entreceldas y entre las celdas y el borde.
El atributo frame establece qué lados del bordeexterior de la tabla son visibles.
Atributos
Ejemplo
Para programar HTML, los hipervínculos se indican con laetiqueta <a>.
Dicha etiqueta <a> deberá incluir el atributo href para especificar eldestino del hipervínculo, y luego, como todas las etiquetas deHTML, se deberá cerrar de la manera </a> para indicar el fin deltexto o de la imagen que contiene el hipervínculo.
Entonces, el hipervínculo en HTML luce de la siguiente manera:
<a href=”dirección del sitio”>Texto del Hipervínculo</a>
Ejemplo:
<a href=mcgrecia.blogspot.mx>Blog de Computación</a>
Hipervínculos
Utilizando sólo la etiqueta<a> no es posibleestablecer la dirección a la que apunta cadaenlace. Como no es viable crear una etiquetapor cada enlace diferente, la solución consisteen personalizar las etiquetas HTML mediantecierta información adicional llamada atributos.
De esta forma, se utiliza la mismaetiqueta <a> para todos los enlaces de la páginay se utilizan los atributos para indicar ladirección a la que apunta cada enlace.
Atributos
Ejemplo
La etiqueta <p> crea un párrafo nuevo. Debeconfigurar el campo de texto como campo detexto de varias líneas para poder utilizar estaetiqueta.
La etiqueta <img> admite el atributo siguiente:
Align Especifica la alineación del texto dentrodel párrafo; los valores válidosson left, right, justify y center.
Párrafo
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).
Atributos
Ejemplo
