viernes, 16 de mayo de 2014

Hiperenlaces

Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo.

Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entre las etiquetas <a> y </a>.

A través del atributo href se especifica la página a la que está asociado el enlace, la página que se visualizará cuando el usuario haga clic en el enlace.

Por ejemplo, para insertar el enlace:

Ejemplo:

Vamos a crear una pagina web que nos enlace a las otras tres páginas web que hicimos la clase pasada (pagina web Animales, Flores, Deportes)

- Si no tienes abierto el Bloc de notas, ábrelo para realizar el ejercicio. Luego escribe el siguiente código.

<html>
<head>
<title>MI menu</title>
</head>
<body bgcolor="#FFCC99">
<font color="#CC3300" size="5">Hola, estoy haciendo pruebas.</font>
<br>
<a href="animales.html" target="_top">Animales</a>
<br>
<a href="deportes.html" target="_top">Deportes</a>
<br>
<a href="flores.html" target="_top">Flores</a>

</body>

</html>


Ahora guardalo con el nombre de menu.html
ejecutalo. visualizalo 

Guardar un documento HTML

Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.
1. Pulsar la combinación de teclas Ctrl+G. o hacer clic sobre el menú Archivo y elegir la opción Guardar o Guardar como y le colocamos el nombre en este caso Ejemplo1.HTML
Todas las paginas web que se hagan en este edictor de texto deben ser guardadas con la extencion HTML para que puedan ser visualizadas por el visualizador de paginas web.

Como Iniciar el Block de Notas

 Presionando Clic en el Boton Inicio del Escritorio 
situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botón  Inicio.
Automaticamente se despliega un menú asi:

Luego precionamos clic sobre Todos los Programas  aparece otra lista con los programas que hay instalados en tu ordenador, Clic en  Accesorios, después clic en  Bloc de notas Asi:


y automaticamente se arrancará el programa.

 Otra forma es presionando doble clic sobre el icono del Bloc de notas del escritorio .

Estructura básica de una pagina web en lenguaje HTML

La estructura básica de una página en lenguaje HTML es:
El título de la página es el que aparecerá en la parte superior de la ventana del navegador, cuando la página esté cargada en él.
Para asignar un título a una página es necesario escribir el texto deseado entre las etiquetas <title> y </title>.
Ejemplo:
<title> Mi Primera Página Web </title>.
La etiqueta <title> ha de estar dentro de la cabecera, es decir, entre las etiquetas <head> y </head>.
asi:
<head> 
<title> Mi Primera Página Web </title>.
 </head>.

Formularios

Formularios

Para las formas funcionales, tendrá que ejecutar un script CGI. El HTML sólo crea la apariencia de un formulario.
<form> </ form>
Crea todas las formas
</select> <select name="nombre" múltiples size=?> </ select>
Crea un menú desplegable. Tamaño establece el número de elementos de menú visible antes de yo u necesidad de desplazarse.
<option>
Pone en marcha cada elemento de menú
<select name="NAME"> </ select>
Crea un menú desplegable
<option>
Pone en marcha cada elemento de menú
<textarea name="nombre" cols=40 rows=8> </ textarea>
Crea un área de la caja de texto. Establecer el ancho de las columnas, filas ajustar la altura.
<input type="checkbox" name="NAME">
Crea una casilla de verificación. Texto siguiente etiqueta.
<input type="radio" name="nombre" value="x">
Crea un botón de radio. Texto sigue etiquetas
<input type=text name="foo" size=20>
. Crea una línea de texto y un área. Tamaño establece la longitud, en caracteres.
<input type="submit" value="NAME">
Crea un botón Enviar
<input type="image" border=0 name="NAME" src="name.gif"> type="image"
Crea un botón Enviar con una imagen

type="reset"> <input

Frames (Marcos).

Frames Marcos

<frameset> </ frameset>
etiquetas en un documento marco, también se pueden anidar en otros conjuntos de marcos
rows="value,value"> <frameset
Define las filas dentro de un conjunto de marcos, utilizando el número de píxeles, o el porcentaje de ancho de w
cols="value,value"> <frameset
Define las columnas dentro de un conjunto de marcos, utilizando el número de píxeles, o el porcentaje de ancho de
<frame>
Define un marco único - o región - dentro de un conjunto de marcos
<NOFRAMES> </ noframes>
Define lo que aparecerá en navegadores que no soporten marcos

Marcos Atributos

src="URL"> <frame
Especifica que el documento HTML se debe mostrar
name="name"> <frame
Nombres de la estructura, o de la región, por lo que puede ser objetivo de otros marcos
marginwidth=#> <frame
Define los márgenes izquierdo y derecho del marco, debe ser igual o superior a 1
marginheight=#> <frame
Define los márgenes superior e inferior del marco, debe ser igual o superior a 1
scrolling=VALUE> <frame
Establece si el marco tiene una barra de desplazamiento, puede ser igual a "sí", "no", o "auto. Valor" El valor por defecto, como en los documentos ordinarios, es automático.
noresize> <frame

Impide que el usuario cambiar el tamaño de un marco 

Tablas

Tablas

<table> </ table>
Crea una tabla
<tr> </ tr>
marcha cada fila en una tabla
<td> </ td>
Pone en marcha cada celda de una fila
<th> </ th>
Pone en marcha la cabecera de la tabla (una celda normal, con negrita, texto centrado)

Atributos de la tabla

border=#> <table
Establece el ancho de borde alrededor de celdas de la tabla
cellspacing=#> <table
Ajusta la cantidad de espacio entre las celdas de la tabla
cellpadding=#> <table
Ajusta la cantidad de espacio entre el borde de una celda y su contenido
width=# <table o %>
Establece la anchura de la mesa - en píxeles o como porcentaje del ancho del documento
align=?> <tr o align=?> <td
Establece la alineación de la celda (s) (a la izquierda, centro o derecha)
valign=?> <tr o valign=?> <td
Establece la alineación vertical de la celda (s) (, superior, media o inferior)
<td colspan=#>
Establece el número de columnas de una celda debe abarcar
<td rowspan=#>
Establece el número de filas de una célula debe abarcar (por defecto = 1)
<td nowrap>

Evita las líneas dentro de una célula se rompa para adaptarse a