creacion de paguinas web

Utilizar etiquetas en una página web

Un documento HTML ha de estar delimitado por la etiqueta< ht ml> y</ht ml>. Dentro de este

documento, podemos asimismo distinguir dos partes principales:

El encabezado, delimitado por<head> y</head> donde colocaremos etiquetas de índole

informativo como por ejemplo el titulo de nuestra página.

El cuerpo, flanqueado por las etiquetas<body> y</body>, que será donde colocaremos

nuestro texto e imágenes delimitados a su vez por otras etiquetas como las que hemos visto.

El resultado es un documento con la siguiente estructura:

<html>

<head>

Etiquetas y contenidos del encabezado

Datos que no aparecen en nuestra página pero que son importantes para catalogarla: Titulo,

palabras clave,...

</head>

<body>

Etiquetas y contenidos del cuerpo

Parte del documento que será mostrada por el navegador: Texto e imágenes

</body>

</html>

Con todo lo que conocemos ya sobre HTML podemos construir una página web que ya tiene

bastante sentido. Vemos un ejemplo a continuación.

<html>

<head>

<title>Elaboración de Paginas Web</title>

</head>

<body>

Bienvenido,
Estás en la página Elaboración de Páginas Web de Tercer Semestre.
Aquí aprenderás de manera personal a realizar tu pagina web.

</body>

</html>

Cómo ya hemos dicho el HTML es un lenguaje de marcas (etiquetas). Así todo nuestro texto

estará encerrado entre etiquetas: Una etiqueta de inicio y una etiqueta de fin.

Funcionan de la siguiente manera:

<etiqueta> inicio de una etiqueta

</etiqueta> el cierre de una etiqueta.

Algunas etiquetas, que iremos viendo a lo largo del manual, no llevan etiqueta de cierre, en ese

caso se cierra, dentro de la propia etiqueta, tal y cómo vemos a continuación.

<etiqueta /> Los elementos que no llevan etiqueta de cierre, se cierran en la misma etiqueta de

apertura, por ejemplo:

Las etiquetas deben de ir siempre en minúsculas. Encontrarás muchas páginas WEB en las que las etiquetas están en mayúsculas, hasta el HTML 4.0 era indiferente la utilización de minúsculas o mayúsculas y muchos autores utilizaban las mayúsculas por claridad.

Todo lo que vaya entre dos etiquetas HTML se verá afectado por éstas, por ejemplo:

<h1>Esto es un encabezado</h1>

Pero esto no, esto es un párrafo

Estas son algunas de las etiquetas más utilizadas:

< html>marcan el inicio y el final de una pagina web< /html>
< title>establece un titulo para la pagina< /title>
< body bgcolor="">establece un color de fondo para la pagina

< body background="">establece una imagen de fondo para la pagina < body

text="">establece el color de letra en la pagina

< h1>establece un encabezado en la pagina< /h1> < hr>agrega una línea separadora

Etiquetas de texto

pone el texto en negrita

pone el texto en cursiva 
 cambia el color de texto

cambia el tamaño del texto cambia el tipo de letra cambia el color el tamaño y el tipo

de letra

Etiquetas de enlace< aref0"">texto< /a> añade un enlace utilizado la palabra texto< ahref="">< img src="">< /a> añade un enlace utilizando una imagen

Etiquetas secundarias

Algunas veces, necesitaremos añadir dos etiquetas a un texto, por ejemplo, supongamos y esto es sólo un ejemplo, que un título sea también un enlace, veamos cómo lo haríamos (utilizamos pseudo código puesto que todavía no hemos visto el código html).

<título><enlace>lo que se a.co m</enlace></título>

En cambio el siguiente código sería incorrecto

<título><enlace>lo que se a.co m</titulo></enlace>

Las etiquetas pueden a veces llevar atributos que nos permiten especificar más las etiquetas que utilizamos. Los atributos son como los adjetivos. Por ejemplo supongamos que tenemos una etiqueta<hombre> y queremos especificar que es guapo. Así que utilizaremos el atributo "apariencia" a este atributo le daremos el valor de "guapo". Nos quedaría apariencia="guapo". Así nuestro< ho m br e> nos quedaría <hombre apariencia="guapo">.

Etiquetas de párrafo

Para esto se utiliza la etiqueta y . Este comando es muy útil debido a que si uno escribe algo (en el editor que se este utilizando) por mucho espacio que uno le de siempre al texto, siempre va a aparecer en la misma línea.

Para alinear un párrafo se utiliza el comando< align> y</a lign>, utilizado dentro de la etiqueta

. Se puede alinear de tres formas diferentes:

Pár r afo ... Alinea a la izquierda.
Pár r afo ... Realiza un centrado.
Pár r afo ... Alinea a la derecha.
 indica el inicio de un párrafo nuevo
 cambia el texto a otra línea
< pre>añade un texto preformateado < /pre>
< li>sirve para listar objetos
< ul>añade numeración a los objetos listados
< ul>añade viñetas a los objetos listados< /ul>
< blockquote>resalta una línea ubicada en un párrafo
< /blockquote> indica el inicio de una definición

Cuando nosotros queremos que lo que escribimos aparezca en otra línea utilizamos el comando

.

Al terminar de escribir un párrafo es conveniente y estético utilizar el comando para separar un párrafo de otro que es .

Etiquetas para darlefor m a to al texto:

Para el tamaño y tipo de letra se usa la etiqueta<fo nt > y< /fo nt>, que posee tres atributos:

tamaño(siz e), Tipo de letra o fuente(fa c e) y color .

Formato:

y Sirve para colocar un texto en Negrita.y sirve para subrayar un texto<strike>y </strike> sirve para tachar un texto.y cumple la misma función que 
y para colocar un texto en cursiva.

texto con énfasis texto con énfasis<cite>citación</cite>citació n<dfn>definición</dfn>de finició n<kbd>teclado</kbd>te clado<samp>ejemplo</samp>e je mplo

size: regula el tamaño de los caracteres.

Ejemplo: texto...</fo nt > .

face: es la fuente que se quiere usar, arial, times new roman, etc.

Para elegir nosotros mismos el color que queremos que tengan los links o enlaces e incluso el

texto, las etiquetas que se utilizan para hacer esto son las siguientes:

* text="#número" Para el color del texto

* link="#número" Para el color de los enlaces

* vlink="#número" El color con que aparecerán los enlaces ya visitados

* alink="#número" Color del enlace cuando lo pulsamos.

Veamos la etiqueta<ht ml> nos dice que se trata de un documento html, pero podemos utilizar

el atributo lang para especificar el idioma del contenido del documento, así nos quedaría<ht ml

lang="es">. Los atributos se especifican indicando el nombre del atributo (lang) y su valor (es).

En castellano estaríamos diciendo: esto es un documento html en español. Los atributos siempre

se añaden en la etiqueta de inicio y los valores de un atributo siempre deben estar entre comillas.

Etiquetas de imagen

< img src="">permite añadir una imagen ala pagina

< img src=""align0"top">alinea el titulo de la imagen en la parte superior < img src=""align="middle">alinea el titulo de la imagen en la parte de en medio < img src=""align"bottom"> alinea el titulo de la imagen en la
parte inferior

Por lo tanto la etiqueta <body> puede quedar del siguiente modo: <body bgcolor="#num" text="#num" link="#num" vlink="#num" alink="#num">

Ahora veremos como poner una imagen de fondo. Es muy sencillo, basta con usar la etiqueta:

background="localización de la imagen" Esta etiqueta va dentro de la etiqueta <body>. Ejemplo:

Las listas pueden ser: Lista desordenada,< ul> (Unordered List).

Lista ordenada,<o l> (Ordered List).

Ejemplos de diferentes tipos de listas:

Lista con números romanos:

<ol>

<li type=I>Manzana
<li type=I>Zanahoria
<li type=I>Lechuga
<li type=I>Tomate

</ol>

I Manzana
II Zanahoria
III Lechuga
IV Tomate

Lista numerada:

<ol>

<li>Manzana
<li>Zanahoria
<li>Lechuga
<li>Tomate

</ol>

1 Manzana
2 Zanahoria
3 Lechuga
4 Tomate

creacion de paguinas web

lunes, 3 de diciembre de 2012

Utilizar etiquetas en una página web

No hay comentarios:

Publicar un comentario