jueves, 14 de enero de 2016

temarios




Notas:
·         Todos los temas se encuentran en la carpeta de contenidos y en el blog de Computación (http://computacionipac.blogspot.com).
·         El examen será práctico.



lunes, 4 de enero de 2016

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, 21 de diciembre de 2015

MANTENIMIENTO DE COMPUTADORAS


¿A qué llamamos Mantenimiento del PC.?
Se puede definir Mantenimiento del PC como una serie de rutinas periódicas que debemos realizar a la computadora, necesarias para que ofrezca un rendimiento óptimo y eficaz a la hora de su funcionamiento, es aquel que debemos realizar al computador cada cierto tiempo, bien sea para corregir fallas existentes o para prevenirlas.

De esta forma podemos prevenir o detectar cualquier falla que pueda presentar el computador.


TIPOS DE MANTENIMIENTO DE PC
Podemos mencionar dos tipos de mantenimiento:
Mantenimiento PREVENTIVO y mantenimiento CORRECTIVO

MANTENIMIENTO PREVENTIVO DE LAS PCS

¿Por qué falla un PC?
Las computadoras y a veces equipos electrónicos necesitan ser tratados con ciertas rutinas que les garanticen un funcionamiento óptimo por un tiempo más prolongado, es decir, necesitan un mantenimiento preventivo.

Se debe tener siempre en cuenta que el calor y el polvo favorecen el desgaste de los circuitos ya que los exponen a condiciones de trabajo difíciles, por ello hay que conservarlos ventilados, frescos y protegidos de los cambios bruscos de voltaje.

Debemos considerar además que existen dentro de una computadora piezas electromecánicas que se desgastan con el uso y el tiempo: los cabezales de lecturas, los discos duros, los coolers o ventiladores, por ejemplo.




lunes, 7 de diciembre de 2015

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 (clic) 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="green" vlink="orange" alink="yellow">

lunes, 30 de noviembre de 2015

Imágenes - HTML

Imágenes
Vamos a ver cómo insertar imágenes, y cómo modificar algunas de sus propiedades, todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información visual.

<img>
Esta etiqueta permite colocar una imagen en el contenido de la página Web.  Dicha etiqueta no necesita etiqueta de cierre y el nombre de la imagen ha de especificarse a través del atributo "src".

Por ejemplo, para insertar la siguiente imagen:


Se escribe así:
<img src="ipac.jpg">


Teniendo en cuenta que la imagen se llama ipac.jpg y que se encuentra dentro de la carpeta imágenes, ubicada en el mismo directorio que el documento actual (esto es una referencia relativa al documento).


Para trabajar de una forma más sencilla y ordenada, es recomendable que todos los documentos HTML (páginas web), se encuentren en un mismo directorio, y que dentro de este directorio existan diferentes carpetas para agrupar otros objetos, como puede ser una carpeta destinada a almacenar imágenes, o una carpeta destinada a almacenar archivos de audio, multimedia, etc.; Además se puede utilizar la ruta absoluta de una imagen que es la dirección web de la misma. 

Ejemplo:
<img src="http://ipac.edu.ec/ipac/resources/image/noticias/logo%20jpg.jpg">

Atributos y propiedades

BORDER
El atributo "border" puede tomar valores numéricos, que indican el grosor en píxeles del borde.

Ejemplo:
<img src="imagenes/ipac.jpg" border="2px">

TAMAÑO DE LA IMAGEN
A través de los atributos "width" (anchura) y "height" (altura) puede modificarse el tamaño de la imagen. El valor que pueden tomar los atributos" width y height" ha de ser un número.

Ejemplo:
<img src="imagenes/ipac.jpg" width=200 height=80>

ALINEACIÓN DE UNA IMAGEN
La alineación de las imágenes se establece a través del atributo "align". Este atributo indica la alineación de las imágenes con respecto a la línea de texto en la que se encuentran.

Valor
Significado
Ejemplo
bottom
inferior
 Imagen con texto
left
izquierda
Imagen con texto
middle
medio
 Imagen con texto
right
derecha
Imagen con texto
top
superior
 Imagen con texto

Fuente: www.aulaclic.es

martes, 24 de noviembre de 2015

Listas en HTML

Elemento de lista <li>
Cada uno de los elementos de una lista se insertan entre las etiquetas <li> y </li>.
Por ejemplo, para insertar en una lista los siguientes elementos:
Perro
Gato
Periquito

Habría que escribir:
...
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
...
Todos los elementos de la lista deberán encontrarse entre las etiquetas que indiquen si la lista es desordenada (con viñetas) u ordenada (numerada).


Lista desordenada <ul>

Para que una lista sea desordenada, sus elementos deberán encontrarse entre las etiquetas <ul> y </ul>.

A través del atributo type es posible elegir el tipo de viñeta, que puede ser circle (círculo), disc (disco) o square (cuadrado).

Por ejemplo, para insertar la siguiente lista:

  • Perro
  • Gato
  • Periquito
Habría que escribir:

<ul type="disc">
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
</ul>

Lista ordenada <ol>

Para que una lista sea ordenada, sus elementos deberán encontrarse entre las etiquetas <ol> y </ol>.

A través del atributo type es posible elegir el tipo de numeración, que puede ser 1 (números), a (letras minúsculas), A (letras mayúsculas), i (numeros romanos en minúsculas) o I (números romanos en mayúsculas).

Por ejemplo, para insertar la siguiente lista:
  1. Perro
  2. Gato
  3. Periquito
Habría que escribir:

<ol type="1">
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
</ol>

Anidar listas
Es posible anidar listas dentro de otras. Estas listas pueden ser tanto desordenadas como ordenadas.
Por ejemplo, para insertar la siguiente lista:
  1. Lunes
    • Ingles
    • Frances
  2. Martes
    1. Ingles
      1. Correccion de ejercicios
      2. Proponer ejercicios
Habría que escribir:
<ol type="1">
<li>Lunes</li>
   <ul type="square">
   <li>Ingles</li>
   <li>Frances</li>
   </ul>
<li>Martes</li>
   <ol type="1">
   <li>Ingles</li>
      <ol type="A">
      <li>Correccion de ejercicios</li>
      <li>Proponer ejercicios </li>
      </ol>
  </ol>
</ol>



Fuente: www.aulaclic.es

lunes, 16 de noviembre de 2015

Textos animados

Etiqueta Marquesina
<marquee> </marquee>
ejemplo de la marquesina


La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra página Web. Gracias a ella podemos conseguir texto en movimiento. Para aplicar este efecto a los textos, éstos deben estar dentro de la etiqueta marquee, entre su inicio "<marquee>" y su cierre "</marquee>".
El movimiento, la dirección de desplazamiento, la velocidad del mismo,…todo es configurable gracias a los siguientes atributos:

align: Este atributo nos indicará si el texto dentro de la etiqueta se alineará en la zona alta del marquee ("top"), en el medio ("middle") o en la parte baja ("bottom").

bgcolor: Con este atributo definiremos el color de fondo que le queremos dar a la marquesina donde está el texto en movimiento.

height y width: El primero marca la altura que tendrá la marquesina y el segundo la anchura de la misma.

direction: Sirve para definir la dirección del movimiento: "left" para la izquierda, "right" para la derecha, "up" para arriba y "down" para abajo.

behavior: Gracias a este atributo podemos dar nuevos efectos a la marquesina. Si no especificamos este atributo, el texto se moverá de forma circular en el sentido que le hayamos marcado.
Con behavior="slide" haremos que el texto se detenga al llegar al final de la marquesina. Y con el behavior="alternate" el texto irá y volverá de un lado a otro de la marquesina.


Fuente: www.aulaclic.es

viernes, 6 de noviembre de 2015

Fuente de textos

Propiedades de textos
Las propiedades del texto pueden modificarse a través de la etiqueta <font>. Para ello, podemos insertar el texto entre las etiquetas <font> y </font>, especificando algunos de los atributos de la etiqueta:


Atributo
Significado
Posibles valores
face
fuente
nombre de la fuente, o fuentes
color
color del texto
número hexadecimal o texto predefinido
size
tamaño del texto
valores del 1 al 7, siendo por defecto el 3,
o desplazamiento respecto al tamaño por defecto,
añadiendo + o - delante del valor


Por ejemplo, para insertar el texto:
Bienvenidos a computacionipac.blogspot.com
Habría que escribir:
<font color="magenta" size=4 face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a computacionipac.blogspot.com</font>
Fuente: www.aulaclic.es 

lunes, 19 de octubre de 2015

Etiquetas para formatos de textos

Estilos para los textos (negrita, cursiva y subrayado)
1. Negrita

<b> ....</b> o <strong> ..... </strong>

2. Cursiva

<i> .....</i> o <em> .....</em>

3. Subrayado

<u> ....</u> o <ins> </ins>

Ejemplo:
<p align="justify">Aqui se escribe el <strong>texto</strong> que se quiere <em>mostrar</m> en el contenido de la <ins>página web</ins></p>


A continuación se muestran algunas etiquetas asociadas al
Tipo de letra:

Etiqueta
Significado
Ejemplo
<s>
tachado
curso HTML

Tipo de información:

Etiqueta
Significado
Ejemplo
<em>
énfasis
curso HTML
<ins>
insertado
curso HTML
<strong>
destacado
curso HTML
<sub>
subíndice
curso HTML
<sup>
superíndice
curso HTML


Fuente: www.aulaclic.es

lunes, 12 de octubre de 2015

Fondos e imágenes en HTML

Color e imagen de fondo de una página Web
Color de fondo.
A través de la etiqueta <body> es posible establecer el color de fondo de la página Web.


El color de fondo puede establecerse a través del atributo "bgcolor", al que es posible asignarle un color representado en hexadecimal o por un nombre predefinido.







Por ejemplo, para hacer que el color de fondo de una página sea de color azul, tendremos que escribir:
...
<body bgcolor="#0000FF">
...
</body>
</html>


Imagen de fondo.
A través de la etiqueta <body> es posible establecer la imagen de fondo de la página Web.

La imagen de fondo puede establecerse a través del atributo "background", indicando la ruta en la que se encuentra la imagen.

Por ejemplo, para hacer que la imagen de fondo de una página sea la imagen "fondo.jpg", que se encuentra en el mismo directorio en el que se encuentra guardada la página, tendremos que escribir:
...

<body background="fondo.jpg">
...
</body>
</html>


y si la imagen es online se utiliza la dirección "URL" de la imagen se escribiría asi:

<body background="URL de la imagen">
...
</body>
</html>



Color de texto.
A través de la etiqueta <body> también es posible establecer el color del texto de la página a través del atributo "text".

Por ejemplo, para hacer que el color del texto de una página sea de color azul, tendremos que escribir:
...

<body text="
#0000FF">
...
</body>
</html>

Fuente: www.aulaclic.es

lunes, 24 de agosto de 2015

Etiquetas de ingreso de textos

Encabezados (títulos dentro de la página)
<h1> ......</h1>
<h2> ......</h2>
<h3> ......</h3>
<h4> ......</h4>
<h5> ......</h5>
<h6> ......</h6>

Estas etiquetas tienen el atributo "align" que permite colocar alineación a los encabezados.
Sus alineaciones son: Left, Right y Center.
Ejemplo:
<h1 align="center">aquí va el texto del encabezado</h1>

Centrar todo
<center> .....</center>
Esta etiqueta permite centrar todo lo que se coloque entre ellas como: texto, imágenes, encabezados, etc.

Párrafos
<p> ......</p>
Al igual que las etiquetas de encabezados, estas etiquetas tienen el atributo "align" que permite colocar alineación a los párrafos.
Sus alineaciones son: Left, Right, Center y Justify.
Ejemplo:
<p align="justify">Aquí va escrito el párrafo que se mostrará en el contenido de la página.</p>

Saltos de línea
<br>
Este etiqueta permite dar saltos de líneas entre párrafos o textos, como si se presionara la tecla "enter", además esta etiqueta no tiene cierre.

Línea horizontal (como separador o decoración)
<hr>
Al igual que la etiqueta salto de línea esta no tiene cierre, me permite colocar en la pagina una línea horizontal separatoria que además, usando sus atributos se la puede utilizar como líneas decorativas.
Sus atributos son: Color, Size, Align y Width.
Ejemplo:
<hr color="blue" size="5px" align="center" width="420px">

Fuente: www.aulaclic.es

lunes, 17 de agosto de 2015

Introducción a la codificación HTML

¿Qué es HTML?

El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento.
Los documentos HTML deben tener la extensión html o htm, para que puedan ser visualizados en los navegadores (Web Browser - programas que permiten visualizar las páginas web).

Web Browser

El navegador instalado en el ordenador del usuario es el que interpreta el código HTML de la página que visitas; los navegadores de hoy en día pretenden ser compatibles con la última versión de HTML. Es necesario realizar extensiones de los navegadores para que puedan ser compatibles con esta última versión.
Dos de los navegadores que continuamente están realizando extensiones son Internet Explorer y Mozilla Firefox, que realizan extensiones incluso antes de que se establezcan los estándares, intentando incluir las nuevas funciones incluidas en los borradores.

Editores

Un editor es un programa que nos permiten redactar documentos, Estos editores disponen de un entorno visual, y generan automáticamente el código de las páginas. Al poder ver en todo momento cómo quedará la página en el navegador, se facilita la creación de las páginas, y el uso de menús permite ganar rapidez.
A lo largo de este curso vamos a trabajar con el Bloc de notas o Notepad ++, para crear nuestras páginas, ya que se trata de editores de textos muy sencillos de manejar, que nos permitirá crear páginas a través del código HTML.

Etiquetas (tags)

Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento.
La etiqueta de comienzo está delimitada por los caracteres < y >. Está compuesta por el identificador o nombre de la etiqueta, y puede contener una serie de atributos que permiten añadir ciertas propiedades. Su sintaxis es: <identificador atributo1 atributo2 ...>
La etiqueta de final está delimitada por los caracteres </ y >. Está compuesta por el identificador o nombre de la etiqueta, y no contiene atributos. Su sintaxis es: </identificador>
Cada uno de los elementos de la página se encontrará entre una etiqueta de comienzo y su correspondiente etiqueta de cierre, a excepción de algunos elementos que no necesitan etiqueta de cierre. También es posible anidar etiquetas, es decir, insertar etiquetas entre otras etiquetas de comienzo y de cierre.


Etiqueta de caracteres especiales.
<meta>
Usa el atributo "content y charset"
Ejemplo:
<meta  content="text/html; charset=utf-8">


Estructura Básica de una página Web
(utilizarla en el editor Notepad++)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> aquí va el título de la barra del navegador</title>
</head>
<body>
........
Aquí van todas las etiquetas que se mostrarán en el contenido de la página web.
........
</body>
</html>