jueves, 18 de abril de 2013

EXAMEN


Páginas WEB (HTML)

 

ERICK HERNANDEZ TORES 6-1

 

El Hipertexto es un archivo de texto que contiene instrucciones que pueden ser interpretadas por

un navegador de Internet. Estas instrucciones son denominadas Etiquetas.

Etiquetas

Una etiqueta cumple su función de la siguiente manera:

<nombre de la etiqueta> Apertura de una etiqueta siempre entre “< >”

texto/gráfico/etiquetas A la cual se aplica la etiqueta

</nombre de la etiqueta> Cierra de la etiqueta siempre entre “</ >”

 

Al acabar de crear un hipertexto , este se deberá grabar con la extensión .html o bien .htm. Es

bueno acotar que un archivo HTML es un archivo texto que tiene una extensión definida. Este

archivo de texto contiene etiquetas, las mismas que son expresadas como instrucciones y el

navegador WEB es quien las interpreta.

Estructura básica de una página WEB

Una página web esta compuesta de 2 partes: el encabezamiento y el cuerpo de la página.

Paralelamente a esto, existen tres etiquetas fundamentales, las mismas que deben estar incluidas

en el archivo HTML de manera obligatoria. Estas tres etiquetas fundamentales son:

<html> </html> Indica al navegador que el documento texto que esta leyendo es un documento

HTML. Esta etiqueta se abre al inicio del archivo y se cierra al final del

mismo.

<head> </head> Acá se detalla el encabezado de la página WEB. Esta etiqueta se abre luego de

<html>.

<body> </body> Cuerpo de la página donde se despliega el contenido global. Esta etiqueta se

abre luego de cerrar el encabezamiento con </head> y se extiende hasta el

final de la página, cerrándose antes de </HTML>.

Ejemplo:

<html>

<head> </head>

<body>

Bienvenidos al curso de HTML

</body>

</html>

El hipertexto será grabado con el nombre index.html en su disquete o en alguna ubicación en el

disco duro. Al asignar la extensión .html o .html ya se crea un hipertexto.

Asegúrese de ingresar “index.html” como nombre a grabar en su bloque de notas (incluidas las

comillas) para evitar que se añada la extensión .txt.

Sin cerrar el programa de edición de texto que estamos usando, abra su navegador de WWW. En

la pantalla de dirección WEB, introduzca la ruta completa a su archivo index.html, y usted

deberá poder ver en su pantalla su primera página WEB.

 

Etiqueta: <title> </title>

Esta etiqueta va en la parte del encabezamiento de la página web, es decir en el HEAD, y define

en su contenido el título de la página web, mismo que aparecerá en la parte superior izquierda de

la pantalla de su navegador.

Sin cerrar nuestro navegador de Internet, volvemos al editor de texto e incluimos el campo

<title> entre las etiquetas de apertura y cierre del encabezado (head).

Ejemplo:

<html>

<head> <title>Curso de HTML</title> </head>

<body>

Bienvenidos al curso de HTML

</body>

</html>

El nuevo archivo HTML se grabará con el mismo nombre index.html, tan solo usando la opción

de Grabar en su editor de Texto. Una vez realizado esto, y sin cerrar su editor de texto, vamos al

navegador en el que seleccionamos la opción de Actualizar/Refresh y nuestra nueva página

estará visible. Notará que el título aparecerá en la parte superior de la página.

 

Etiqueta <body> </body>

Todo el texto, las imágenes y el formato visibles al usuario deben encontrarse entre las etiquetas

<body>...</body>. Esta etiqueta cuenta con los siguientes atributos:

Bgcolor define el color de fondo de la página

Text define el color del texto de la página

Link define el color de los vínculos en la página

Alink define el color del vínculo actual o activado en la página

Vlink define el color del vínculo ya visitado

Background define el archivo gráfico que será desplegado como fondo

Bgsound define el archivo de audio que se tocará en la página.IE

Bgproperties define el movimiento vertical del fondo.IE

Los atributos se incluyen en la etiqueta de apertura, separados por un espacio.

¿Cómo se utilizan los colores en HTML?

Se pueden llegar a tener 16 millones de colores en una página web.

Existen dos formas para aplicar colores a una página web:

1. Se especifica el color deseado directamente con el nombre del color en ingles: Ej: blue,

green, yellow

2. Se especifica el color deseado mediante números hexadecimales mediante la siguiente

estructura:

#RRVVAA

El color tiene un signo de numeral # antecediendo a los 6 números.

Existen dos números para cada color principal: rojo, verde y azul.

Cada uno de los números varía hexadecimal mente {0,1,2....,9,A,B,...F}.

IE Solo para Microsoft Internet Explorer

IE Solo para Microsoft Internet Explorer

 

Ejemplos de Colores:

#RRVVAA Color #RRVVAA Color

#FFFFFF Blanco #000000 Negro

#FF0000 Rojo #00FF00 Verde

#0000FF Azul #FF00FF Magente

#00FFFF Cyan #FFFF00 Amarillo

#70DB93 Agua Marino #000080 Azul Marino

#FF7F00 Coral #A62A2A Café

#C0C0C0 Plomo #4F2F4F Violeta

Utilizando estos datos, haremos una página con fondo celeste y letras negras. Usaremos para este

efecto los atributos bgcolor y text. :

Ejemplo:

<html>

<head> <title>Curso de HTML</title> </head>

<body bgcolor=”#C0D9D9” text=”#000000”>

Bienvenidos al curso de HTML

</body>

</html>

Grabe este archivo seleccionando la opción de Guardar/Grabar de su editor de texto, de modo

que se mantenga el nombre index.html. Cuando usted vaya a su navegador WWW y seleccione

la opción de Actualizar, notara el cambio.

 

 

Texto en HTML

Una vez que ya se tiene una idea de cómo funcionan la etiqueta de encabezamiento y parte de la

etiqueta de definición del cuerpo de la página, trabajemos con el texto.

HTML fue creado en principio para el alfabeto en inglés, sin embargo se buscaron modos para

mostrar también caracteres o símbolos denominados especiales.

Para utilizar caracteres especiales usaremos los símbolos & y ; para denotar el inicio y final

respectivamente de un símbolo especial.

 

 

De esta manera:

Texto: Descripción: Pantalla:

&acute; Acento ´

&ntilde; eñe ñ

&quot; Comillas Dobles "

&deg: Grados °

&aacute; a con acento á

&eacute; e con acento é

&nbsp; espacio en blanco

La idea básica para acentos y signos latinos es combinar dos teclas. Para lograr una o con acento

debemos combinar una o y un acento:

&oacute; ó

Para entender un poco más este proceso, veamos el siguiente ejemplo:

Ejemplo:

<html>

<head> <title>Curso de HTML</title> </head>

<body bgcolor=”#C0D9D9” text=”#000000”>

Bienvenidos al curso de HTML

Cuando la temperatura es menor a 15&deg;c hace bastante fr&iacute;o.

Este es un ejemplo de p&aacute;gina WEB :)

</body>

</html>

Luego de realizar el proceso para grabar y actualizar la página notara que se incluyen en la

página los símbolos de grados, la i con acento y la a con acento.

Notará también que el texto se encuentra de corrido en una sola fila, para bajar de linea

utilizaremos la siguiente etiqueta especial ...

Etiqueta <br>

La etiqueta <br> instruye al navegador cliente que inserte un salto de línea en un documento

HTML. La etiqueta <BR> tiene el mismo efecto que un retorno de carro en una máquina de

escribir. Es una etiqueta especial, pues no precisa de etiqueta de cierre.

 

 

Etiqueta <hr>

La etiqueta <hr> dibuja de manera predeterminada una regla horizontal alineada

automáticamente, con una apariencia de tercera dimensión. Esta etiqueta especial, por que no

necesita de cierre, tiene los siguientes atributos:

Align establece que la regla se alinee a la izquierda, centro o derecha

LEFT,CENTER o RIGHT

NOSHADE quita el sombreado predeterminado de la regla

WIDTH permite especificar el ancho de la regla (en pixeles o porcentaje)

SIZE permite especificar el alto de la regla (en pixeles)

Ejemplo:

<html>

<head> <title>Curso de HTML</title> </head>

<body bgcolor="#C0D9D9" text="#000000">

Bienvenidos al curso de HTML<br>

<hr align=center width=50%><br>

Cuando la temperatura es menor a 15&deg;c hace

bastante fr&iacute;o.<br>

<hr align=left width=25% size=5><br>

Este es un ejemplo de p&aacute;gina WEB :)<br>

</body>

</html>

Encabezados

Las etiquetas <h1> </h1> al <h6> </h6> (acrónimos de “heading 1..6”) son encabezados del

cuerpo del texto. El encabezamiento <h1> nos proporciona las letras de mayor tamaño. Notará

que si usamos una etiqueta de encabezamiento, automáticamente se incluirá un retorno de carro

al final del mismo. La etiqueta tiene el siguiente atributo:

Align Permite ubicar el encabezamiento a la izquierda, centro o derecha de la

pantalla (LEFT, CENTER,RIGHT)

 

 

Ejemplo:

<html>

<head> <title>Curso de HTML</title> </head>

<body bgcolor="#C0D9D9" text="#000000">

<h1 align="center">

Bienvenidos al curso de HTML</h1><br>

<hr align=center width=50%><br>

<h2>Bienvenidos</h2>

Cuando la temperatura es menor a 15&deg;c hace

bastante fr&iacute;o.<br>

<hr align=left width=25% size=5><br>

Este es un ejemplo de p&aacute;gina WEB :)<br>

</body>

</html>

Luego de realizar el proceso de grabado/actualización notará las diferentes dimensiones de las

dos primeras líneas.

Ubicación, formato y atributos de texto

Etiqueta <center> </center>

Se utiliza para centrar el texto/imagen o datos que se encuentren entre la apertura y el cierre.

Etiqueta <b> </b>

Esta es la etiqueta que nos posibilita un texto con negrillas.

Etiqueta <u> </u>

Etiqueta que posibilita resaltar un texto con subrayado.

Etiqueta <i> </i>

Etiqueta que permite resaltar el texto con inclinación itálica.

Recuerde que puede combinar entre si todas estas etiquetas. Veamos un ejemplo para demostrar

el uso de las últimas 4 etiquetas que se vieron.

 

 

 

 

 

Ejemplo:

<html>

<head> <title>Curso de HTML</title> </head>

<body bgcolor="#C0D9D9" text="#000000">

<h1 align="center">

Bienvenidos al curso de HTML</h1><br>

<hr align=center width=50%><br>

<h2>Bienvenidos</h2>

Cuando la temperatura es menor a 15&deg;c hace

bastante fr&iacute;o.<br>

<hr align=left width=25% size=5><br>

Este es un ejemplo de p&aacute;gina WEB <b><i>:)</i></b><br>

<b>Este texto esta con negrillas</b><br>

<u>Este texto esta con subrayado</u><br>

<i>Este texto esta con inclinaci&oacute;n it&aacute;lica</i><br>

Este <b>texto <i>cuenta <u>con un </u>combinado</i> de</b> todo.<br>

</body>

</html>

Note el cambio en la sentencia de la línea o regla <hr>, se eliminó “align=left”. Notará que la

nueva regla saldrá al centro, pues esta es la alineación por defecto. Además sacamos el punto

final que existía en la primera línea que ahora aparece centrada.

Etiqueta <font> </font>

Esta etiqueta proporciona al autor un medio de personalizar el texto con respecto al tipo de

fuente, tamaño y color. Atributos:

Color determina el color que se aplica al texto

Size determina el tamaño relativo del texto. Los tamaños válidos son del 1 al 7,

siendo el predeterminado el 3 y el más grande el 1.

Face asigna una fuente o tipo de letra.

Ejemplificando, introduciremos lo siguiente: Bolivia. Note que la primera B es más grande que

el demás texto. Usaremos el tamaño 7 para la letra B y el tamaño estándar (3) para las demás

letras.

 

 

 

Ejemplo:

<html>

<head> <title>Curso de HTML</title> </head>

<body bgcolor="#C0D9D9" text="#000000">

<h1 align="center">

Bienvenidos al curso de HTML</h1><br>

<hr align=center width=50%><br>

<h2>Bienvenidos</h2>

Cuando la temperatura es menor a 15&deg;c hace

bastante fr&iacute;o.<br>

<hr align=left width=25% size=5><br>

Este es un ejemplo de p&aacute;gina WEB <b><i>:)</i></b><br>

<b>Este texto esta con negrillas</b><br>

<u>Este texto esta con subrayado</u><br>

<i>Este texto esta con inclinaci&oacute;n it&aacute;lica</i><br>

Este <b>texto <i>cuenta <u>con un </u>combinado</i> de</b> todo.<br>

<font color="red"><font size=7>B</font>o</font><font color="yellow">

li</font><font color="green">via</font><br>

</body>

</html>

Imágenes en HTML

Hasta este momento se ha trabajado solamente con texto. Comenzemos a introducir gráficos en

nuestra página HTML.

Se deben tener dos consideraciones importantes para trabajar con gráficos:

Los únicos formatos, que por ahora soportan los visualizadores son: *.gif y *.jpg o *.jpeg.

Las imágenes no deben ser de tamaño grande por que el visualizador o navegador puede demorar

demasiado en bajarlas.

Acá trabajaremos también con el atributo background de la etiqueta <body> que había quedado

pendiente.

La idea de trabajar con un fondo en una página web, es la misma que tener un fondo en nuestro

entorno Windows. El archivo puede estar ubicado en la misma carpeta o bien en otra que

contenga solo gráficos. Trate de que el color de fondo de la página (que ya no aparecerá) sea

parecido al color principal de la imagen que usará como fondo. Si es necesario re acomode los

colores de texto y vínculos definidos en <body>.

Supondremos tenemos un gráfico llamado “fondo.gif” para el ejemplo 8 que como notará será re

formulado en función a utilizar las nuevas etiquetas.

 

 

Etiqueta <img>

Se trata de otra etiqueta especial, pues no necesita de etiqueta de cierre. Esta etiqueta instruye al

navegador para que exhiba la imagen especificada. El formato básico para incluir un gráfico es:

<img src=”imagen.ext”>

No es necesario re dimensionar en forma permanente un archivo gráfico para exhibirlo en

contextos variables; sin embargo, el autor de HTML puede indicar al navegador que re

dimensione la imagen especificando los siguientes atributos:

Src identifica la imagen que se desplegará.

Height para redimensionamiento de gráfico (en pixeles o en porcentaje)

Width para redimensionamiento de gráfico (en pixeles o en porcentaje)

A la imagen se le puede aplicar un borde que se hace notorio especialmente cuando se trata de

una imagen que además es un hipervínculo:

Border Definido en pixels

La imagen también puede alinearse con respecto al texto:

ALIGN Alineación, puede ser: TOP, MIDDLE, BOTTOM, LEFT y RIGHT

En caso de que la imagen no pueda exhibirse, se puede desplegar un texto:

ALT Especifica el texto alterno

Es a partir de este ejemplo, que se va a realizar una nueva página, la misma que llamaremos

pag2.html o bien pude ser grabada con otro nombre.

Supondremos contamos con un gráfico llamado foto.jpg.

 

 

Ejemplo:

<html>

<head> <title>Curso de HTML</title> </head>

<body bgcolor="#C0D9D9" text="#000000" background="fondo.gif">

<center><h1>

Bienvenidos al curso de HTML</h1></center><br>

<hr width=50%><br>

<h2>Informaci&oacute;n General</h2>

Este curso muestra los conceptos b&aacute;sicos del uso de

etiquetas e instrucciones en la elaboraci&oacute;n de

documentos <b><i><font color="#000080">HTML</font></i></b>.<br><br>

<center><img src="foto.jpg" border="1" alt="Foto de Claudia"></center>

<br>

Es muy importante saber ubicar los gr&aacute;ficos y combinar

de buena manera los colores para brindar una buena imagen

<b><i><font color="red">:)</font></i></b>.<br><br>

Una p&aacute;gina WEB es muy importante, pues provee a nuestro

trabajo una ventana al mundo.<br>

</body>

</html>

Realice el proceso de grabado con el nuevo nombre de página “pag2.html” y cargue la nueva

página en su navegador.