lunes, 15 de diciembre de 2014

Codigo Html para una maquetación web

<!Doctype html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body background="" bgcolor="" text="" link="" vlink="" alink="">
<!-- maqueta-->
<table border="1" bordercolor="" align="center" cellpading="0" cellspacing="0" width=90%>

<!-- Cabecera -->
<tr bgcolor="" align="center" height="112px">
<td colspan=""> </td>
</tr>
<!-- menu -->
<tr bgcolor="" align="center">
<td width="%">link1</td>

<td width="%">link2</td>
<td width="%">link3</td>
</tr>
<!-- contenido -->
<tr bgcolor="" align="left" valign="top" height="480px">
<td colspan="">Textos, imágenes, videos, etc</td>
</tr>

<!-- pie de página -->
<tr bgcolor="" align="center">
<td colspan="">©Todos los derechos reservados - 2014</td>
</tr>
</table>

</body>
</html>

lunes, 8 de diciembre de 2014

Temarios

TEMARIOS DE COMPUTACIÓN

OCTAVO AÑO DE EDUCACIÓN GENERAL BÁSICA
EVALUACIÓN P2 DEL 2do QUIMESTRE
Año – lectivo
2014 - 2015

1. ESTRUCTURA DE UNA MAQUETACIÓN CON TABLAS

2. CODIFICACIÓN DE UNA MAQUETACIÓN WEB
    • HEADER
    • MENU
    • CONTENT
    • FOOTER
3. CREACIÓN DE FORMULARIOS BÁSICOS EN HTML

    • ETIQUETAS DE FORMULARIOS
    • ELEMENTOS DE FORMULARIOS



Nota:    Todos los temas se encuentran en el cuaderno y en el blog.

              (http://computacionipac.blogspot.com)

ELEMENTOS DE ENTRADA DE DATOS A UN FORMULARIO

 Campo de texto:
Para insertar un campo de texto, el atributo type debe tener el valor text.
El atributo size indica el número de caracteres que podrán ser visualizados en el campo de texto,  determina el ancho de la caja.
El atributo maxlenght indica el número de caracteres que podrán ser insertados en el campo de texto.
El atributo value indica el valor inicial del campo de texto.
Por ejemplo, para insertar el campo de texto:
Habría que escribir:
<input name="campo" type="text" value="Campo de texto" size="20" maxlength="15">

 Campo de contraseña:
Para insertar un campo de contraseña, el atributo type debe tener el valor password.
El resto de atributos son los mismos que para un campo de texto normal. La única diferencia es que todas las letras escritas en el campo de contraseña serán visualizadas como asteriscos.
Por ejemplo, para insertar el campo de contraseña:
Habría que escribir:
<input name="contra" type="password" value="contraseña" size="20" maxlength="15">

 Botón:
Para insertar un botón, el atributo type debe tener el valor submitrestore o button.
Si el valor es submit, al pulsar sobre el botón se enviará el formulario.
Si el valor es restore, al pulsar sobre el botón se restablecerá el formulario, borrándose todos los campos del formulario que hayan sido modificados y adquiriendo su valor inicial.
Si el valor es button, al pulsar sobre el botón no se realizará ninguna acción.
El atributo value indica el texto que mostrará el botón.
Por ejemplo, para insertar el botón:
Habría que escribir:
<input name="boton" type="submit" value="Enviar">
 Casilla de verificación:
Para insertar una casilla de verificación, el atributo type debe tener el valor checkbox.
El atributo value indica el valor asociado a la casilla de verificación. Es necesario poner este atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar.
La aparición del atributo checked indica que la casilla aparecerá activada inicialmente. Este atributo no toma valores.
Por ejemplo, para insertar la casilla:
Habría que escribir:
<input name="casilla" type="checkbox" value="acepto" checked>

 Botón de opción:
Para insertar un botón de opción, el atributo type debe tener el valor radio.
El atributo value indica el valor asociado al botón de opción. Es necesario poner este atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar.
La aparición del atributo checked indica que el botón aparecerá activado inicialmente. Este atributo no toma valores.
Los botones de opción se utilizan cuando se desea que una variable del formulario pueda tomar un solo valor de entre varios posibles. Para ello, se insertan varios botones de opción con el mismo nombre (que indica la variable) y con distintos valores. Sólamente uno de estos botones podrá estar activado, el que esté activado cuando se envia el formulario, su valor será el que tendrá la variable.
Por ejemplo, para insertar los botones de opción:

Habría que escribir:
<input name="prefiere" type="radio" value="estudiar" checked>
<input name="prefiere" type="radio" value="trabajar">

Fuente: Aula clic, recuperado de  http://www.aulaclic.es/html/t_8_2.htm

lunes, 1 de diciembre de 2014

Formularios

¿Qué son los formularios?

Un formulario es un elemento que permite recoger datos introducidos por el usuario.

Los formularios se utilizan para conocer las opiniones, dudas, y otra serie de datos sobre los usuarios, para introducir pedidos a través de la red, tienen multitud de aplicaciones.

Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables, y botones.

Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribución de los elementos del formulario, lo que facilita su comprensión y mejora su apariencia.


Los formularios se insertan a través de las etiquetas <form> y </form>. Entre dichas etiquetas habrá que insertar los diferentes objetos que formarán el formulario.

Ejemplo:
<form action="mailto:formularios@aulaclic.com" method="post" enctype="text/plain" >
  
...
</form>


ELEMENTOS QUE SE UTILIZAN EN LOS FORMULARIOS
Elementos de entrada <input>
Para insertar un elemento de entrada es necesario incluir la etiqueta <input> entre las etiquetas <form> y </form> del formulario.

El atributo name indica el nombre que se desea dar al elemento de entrada, mediante el cual será evaluado, y el atributo type indica el tipo de elemento de entrada.


Fuente:  Aula Clic, recuperado de http://www.aulaclic.es/html/t_8_1.htm

lunes, 24 de noviembre de 2014

ESTRUCTURA DE UN SITIO WEB

Antes de empezar a diseñar el sitio Web hay que organizarlo y para ello hay que tener claro cuál va a ser el propósito del sitio Web, sus contenidos y la audiencia potencial de la que dispondrá. Lo que va a determinar la estructura de la Web van a ser en gran medida los contenidos; ellos nos deben indicar cual de los siguientes tipos de estructura es el más adecuado:

Estructura en Red

Las páginas del sitio también pueden estar totalmente interconectadas, es decir, desde cada página podemos ir a cualquier otra del sitio. Realmente la interconexión de absolutamente todas las páginas sería un caso real. Es una estructura de apariencia algo anárquica en la que hay que cuidar mucho de no dejar enlaces abiertos, es decir, apuntando a una página inexistente. Además debemos evitar que el usuario se pierda entre los enlaces. Por todo esto ello es necesario planificarla muy bien.


Fuente: http://roble.pntic.mec.es/jprp0006/tecnologia/4eso_informatica/kompozer/introduccion/estructura_sitio.htm

lunes, 17 de noviembre de 2014

Sitio Web


SITIO WEB

Sitio es un lugar que sirve para algo o un espacio ocupado (o que puede llegar a serlo). La noción de Web, por su parte, hace referencia a Internet, una red de redes que permite la interconexión de computadoras mediante un conjunto de protocolos denominado TCP/IP.

Un sitio web, por lo tanto, es un espacio virtual en Internet. Se trata de un conjunto de páginas web que son accesibles desde un mismo dominio o subdominio de la World Wide Web (WWW).

Los sitios web incluyen documentos HTML, fotografías, sonidos, vídeos, animaciones Flash y otro tipo de contenidos que pueden compartirse en línea. La URL raíz del sitio web se conoce como portada o homepage. Lo más habitual es que esta portada facilite el acceso a todas las páginas del sitio mediante hipervínculos (también conocidos como enlaces o links).


Diferencia entre sitio web y página web

A veces se utiliza erróneamente el término página web para referirse a sitio web. Una página web es parte de un sitio web y es un único archivo con un nombre de archivo asignado, mientras que un sitio web es un conjunto de archivos llamados páginas web. 1

FUENTE: Definición de sitio web - http://definicion.de/sitio-web/#ixzz3JLWxBD9L
______________________________
1 http://www.masadelante.com/faqs/sitio-web

lunes, 20 de octubre de 2014

Estructura de una Maquetación con tablas.

MAQUETACIÓN

Para realizar el diseño de una página web la podemos realizar mediante la maquetación, esto consiste en la creación de tablas para generar los espacios donde se colocarán los contenidos. En la maquetación con tablas se anidan tablas, colocando unas dentro de otras para conseguir realizar diseños de plantilla más complejos.

Diagramando nuestro diseño

El primer paso es diagramar la estructura, el esqueleto de nuestra página por así decirlo, nosotros lo haremos así:
  • Header - Encabezado (donde irá el banner o logo) 
  • Menú - Barra horizontal (acá pondremos los enlaces y demás menús que queramos)
  • Content - Contenido (texto, imágenes, videos, etc)
  • Footer - Pie de página (créditos, copyrigth)
teniendo la idea de la estructura podemos comenzar a escribir nuestro código.




Atributos:
Border: Permite colocar un borde de diferentes tamaño a la tabla.
Bordercolor: Permite dar un color al borde de la tabla.
Cellpadding: Permite colocar una sangría al texto insertado en las celdas de la tabla.
Cellspacing: Permite colocar espacio entre las líneas de las tablas.
Colspan: Permite agrupar las celdas o columnas de una tabla. (combinación de celdas)
Rowspan: Permite agrupar las filas de una tabla. (combinación de celdas)
Valign: Permite alinear un texto en forma vertical "Top (superior)" y "Bottom (inferior)".
Width: Ancho de la tabla.
Height: Alto de la tabla.

Fuente: www.aulaclic.es

lunes, 13 de octubre de 2014

Maquetación

Maquetación Con Tablas
Las tablas son una de las herramientas más útiles que disponemos en HTML, ya que nos van a permitir en cierto modo "maquetar" nuestro documento, ayudándonos a situar dentro del mismo los diferentes elementos que lo componen, siendo esta la única forma coherente que había antes de la introducción de las Hojas de Estilo y de las etiquetas.

Etiquetas básicas para una maquetación
Para crear una tabla <table> y </table>.
Por cada una de las filas de la tabla, etiquetas <tr> y </tr>.
Por cada celda dentro de cada fila, etiquetas <td> y </td>.
Es posible modificar los siguientes atributos de una tabla:


Por ejemplo:

<table width="100%" border="2" align="center" cellspacing="0" cellpading="0" bordercolor="#000000" bgcolor="#FFCC99">
  ...

</table> 

Para la etiqueta <td> existen los atributos colspan y rowspan, que se utilizan para combinar celdas.

A través del atributo colspan se especifica el número de columnas por las que se extenderá la celda, y a través del atributo rowspan se especifica el número de filas por las que se extenderá la celda.

Fuente: www.aulaclic.es

lunes, 8 de septiembre de 2014

Tablas

Tablas en HTML
Las tablas están formadas por celdas, que son los recuadros que se obtienen como resultado de la intersección entre una fila y una columna.

Esta etiqueta permite insertar una tabla.
<table border="1">
..........
</table.

La etiqueta "<tr> ....</tr>" permite insertar filas dentro de la tabla y la etiqueta "<td> .....</td>" permite insertar columnas o celdas de datos dentro de la tabla:

Ejemplo:


Para insertar una tabla de 2 filas y 3 columnas (2x3) se escribe:

<table border="1">
<tr>
     <td>1era celda</td><td>2da celda</td><td>3era celda</td>
</tr>
<tr>
     <td>4ta celda</td><td>5ta celda</td><td>6ta celda</td>
</tr>
</table>



Formato de la Tabla
    Es posible modificar los siguientes atributos de una tabla:
Atributo
Significado
Posibles valores
width
ancho de la tabla
un número, acompañado de % cuando se desee que sea en porcentaje
height
altura de la tabla
un número, acompañado de % cuando se desee que sea en porcentaje
cellpadding
espacio entre el contenido de las celdas y el borde
un número
cellspacing
espacio entre celdas
un número
border
grosor del borde
un número
align
alineación de la tabla dentro de la página
left (izquierda)
right (derecha)
center (centro)
bgcolor
color de fondo
número hexadecimal
background
imagen de fondo
número hexadecimal
bordercolor
color del borde
número hexadecimal

Formato de la celda
    Es posible modificar los siguientes atributos de una celda:
Atributo
Significado
Posibles valores
width
ancho de la tabla
un número, acompañado de % cuando se desee que sea en porcentaje
height
altura de la tabla
un número, acompañado de % cuando se desee que sea en porcentaje
align
alineación horizontal del contenido de la celda
left (izquierda)
right (derecha)
center (centro)
valign
alineación vertical del contenido de la celda
baseline (línea de base)
bottom (inferior)
middle (medio)
top (superior)
bgcolor
color de fondo
número hexadecimal
background
imagen de fondo
número hexadecimal
bordercolor
color del borde
número hexadecimal



Fuente: www.aulaclic.es

lunes, 25 de agosto de 2014

Enlaces o Links

Enlaces o Links (Hipervínculos)

Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva a una página o a un 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:
Ir a IPAC
Habría que escribir:
<a href="http://www.ipac.edu.ec">Ir a IPAC</a>

Referencia al documento (interno):
Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra el actual.
Por ejemplo, teniendo en cuenta que el documento pagina.html se encuentra dentro de la misma carpeta que el documento actual, para insertar el enlace:
Inicio
Habría que escribir:
<a href="pagina.html">Inicio</a>

Referencia fuera del documento (externo):
Conduce a una página externa situado fuera del documento actual, generalmente se crea el enlace a direcciones web de paginas subidas en internet en un servidor web.
Por ejemplo, teniendo en cuenta que nos queremos enlazar con la pagina deGOOGLE que se encuentra fuera del documento actual, para insertar el enlace:
Ir a Google
Habría que escribir:
<a href="http://www.google.com.ec">Ir a Google</a>

Referencia a un correo electrónico (email):
Conduce a una aplicación externa que permite enviar correo electrónico a una dirección específica en internet subido en un servidor correo web.
Por ejemplo, teniendo en cuenta que queremos enviar un correo a una persona en particular o que nos envien información a nuestro email, para insertar el enlace:
Correo
Habría que escribir:
<a href="mailto:gfarino@ipac.edu.ec">Correo</a>

Destino del enlace:
El destino del enlace determina en qué ventana va a ser abierta la página vinculada, se especifica a través del atributo target al que se le puede asignar los siguientes valores:
-blank_
Abre el documento vinculado en una ventana nueva del navegador.
-self_
Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo.

Además, podemos cambiar el color de los enlaces cuando estos esten activos (alink), visitados (vlink) o el propio color del enlace (link).; estos atributos van dentro de la etiqueta body.

Ejemplo:
<body link="#ffff00" vlink="#000080" alink="#ff0000">