lunes, 25 de agosto de 2014

Temarios

TEMARIOS DE COMPUTACIÓN
 3er PARCIAL - 1er QUIMESTRE



1. Estructura básica de una página web.

     a. Etiqueta <meta> caracteres especiales.

2. Encabezados <h1….h6> y párrafos <p>.

3. Línea horizontal <hr> y sus atributos, y salto de línea <br />

4. Fuente de textos <font> y estilos de textos (negrita, cursiva y subrayado).

5. Imágenes en HTML <img src=””>.

6. Etiqueta marquesina <marquee> y sus atributos.

7. Listas en HTML <li>, <ol>, <ul>.

8. Enlaces (hipervínculos) <a> y sus atributos.




Notas: todos los temas se encuentran en el cuaderno y en el blog.

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">

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 siquiente 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 siquiente 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>

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.

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 cuentra que la imagen se llama ipac.jpg y que está dentro de la carpeta imagenes, que se encuentra en el mismo directorio que el documento actual (referencia relativa al documento).

Para trabajar de una forma más sencilla y ordenada, es recomendable que todos los documentos html 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 imagenes, o una carpeta destinada a almacenar archivos de audio, etc.; Además se puede utilizar la ruta absoluta de una imagen que es la dirrección web de la misma. 

Ejemplo:
<img src="http://www.direccion.com./Images.jpg">

Atributos y propiedades

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

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 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>

Etiquetas para formatos de textos

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

Estilos para los textos (negrita, cursiva y subrayado)
1. Negrita
Html 4                            Html 5
<b> ....</b> o <strong> ..... </strong>
2. Cursiva
    Html 4               Html 5
<i> .....</i> o <em> .....</em>
3. Subrayado
    Html 4             Html 5
<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

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>

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, 14 de julio de 2014

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, 7 de julio de 2014

Introducción a la codificación HTML5

¿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 Gedit text editor para crear nuestras páginas, ya que se trata de un editor de textos muy sencillo 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"
Ejemplo:
<meta content="text/html; charset=utf-8">
<meta charset="iso-8859-1">


Estructura Básica de una página Web

<!DOCTYPE html>
<head>
<meta content="text/html; charset=utf-8">
<meta charset="iso-8859-1">
<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>