Enlace a galeón
ERICK HERNANDEZ TORRES 6-1
martes, 4 de junio de 2013
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:
´ Acento ´
ñ eñe ñ
" Comillas Dobles "
°: Grados °
á a con acento á
é e con acento é
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:
ó ó
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°c hace bastante
frío.
Este es un ejemplo de pá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°c hace
bastante frío.<br>
<hr align=left width=25% size=5><br>
Este es un ejemplo de pá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°c hace
bastante frío.<br>
<hr align=left width=25% size=5><br>
Este es un ejemplo de pá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°c hace
bastante frío.<br>
<hr align=left width=25% size=5><br>
Este es un ejemplo de pá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ón itá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°c hace
bastante frío.<br>
<hr align=left width=25% size=5><br>
Este es un ejemplo de pá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ón itá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ón General</h2>
Este curso muestra los conceptos básicos del uso de
etiquetas e instrucciones en la elaboració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á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á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.
Suscribirse a:
Entradas (Atom)