jueves, 27 de febrero de 2014

ACTIVIDADES

ACTIVIDADES DE REFUERZO PARA EL EXAMEN REMEDIAL

TEÓRICO

I.    Responda con una sola palabra a los siguientes enunciados.       

a)    Las etiquetas <ins> y </ins> permiten colocar un estilo… … … … … en la página Web.

b)    Para definir el ancho de una línea horizontal se usa el atributo. . . . . . . . . . .


c)    El atributo bgcolor en una marquesina coloca un color de . . . . . . . . . . . . . .


II.   Marque con una “X” la respuesta correcta a los siguientes enunciados.


a)    La etiqueta que permite colocar un estilo énfasis en un texto es:

         <en>                     <s>                      <em>                    <b>

b)    La etiqueta <i > </i> permite colocar un estilo:

Bold              Insertado               Cursiva               Negrita


Práctico
UTILICE EL BLOC DE NOTAS Y EL NAVEGADOR DE SU PREFERENCIA


I.  Realice el diseño de una página web considerando el código de la maquetación mostrado en el blog (computacionipac.blogspot.com).


·         Diseño de cabecera (Header).                                                        
o   Banner con “Flashvortex”                                           
§  Tema: RESPONSABILIDAD.

·         Diseño del menú (Menu).                                                                
o   Enlaces, considere 4 menús.                                       
§  Inicio – página externa – contacto
  
·         Diseño del Contenido (Content).                                                   
o   2 Text con “Flashvortex”                                             
§  Encabezado sobre el tema.
§  Párrafo acerca del tema.
o   Imagen sobre el tema                                                    
§  Tema: RESPONSABILIDAD.
o   Inserte una tabla 3x2 (3 filas, 2 columnas)                
§  Asigne letras en cada celda.

·         Diseño del pie de página (Footer)                                                 
o   Copyright del autor                                                      
§  Nombre y apellido del alumno

Temarios examen remedial


TEMARIOS DE COMPUTACIÓN
EXAMEN REMEDIAL


1.     Estructura básica de una página web.
·        Encabezados <h1….h6> </h1…..h6>.
·        Párrafos <p>. . . </p>.
·        Formato de textos.


2.     Formatos de textos.
·        Negrita, cursiva y subrayado <b>, <strong>, <i>, <em>, <u>.
·        Tipos de fuentes. <Font size=”” color=”” face=””> </Font>


3.     Textos animados con marquesina
·        Marquesina <marquee> </marquee>


4.     Listas ordenadas y desordenadas.


5.     Fondos  e imágenes en HTML.
·        Con color.
·        Con imagen.
·        <img src=” ”>


6.     Tablas y atributos en HTML.


7.     Estructura de una Maquetación en HTML.


8.     Enlaces o links en HTML.


9.     Animaciones con FLASHVORTEX.

Notas: Revisar los temas que se encuentran en el cuaderno y en el blog.
               El examen es teórico y práctico.

viernes, 31 de enero de 2014

Temarios


TEMARIOS DE COMPUTACIÓN
Preguntas para el examen teórico de supletorio

    
1. Las etiquetas <sup> y </sup> permiten colocar un. . . . . . . . . . en la página Web.

2. Para modificar el tipo de letra con la etiqueta <Font> es el atributo . . . . . . .


3. Sirve para definir la dirección del movimiento en un <marquee>. . . . . . . . . 


4. La etiqueta que permite colocar un estilo subrayado en un texto es:


5. La etiqueta <strong> </strong> permite colocar un estilo:


6.Las etiquetas <s> y </s> permiten colocar un estilo… … … … … en la página Web.


7. Para definir el color de fondo en una marquesina se usa el atributo. . . . . . 


8. Sirve para colocar alineación a los textos, es el atributo. . . . . . . . . . . . . . . . 


9. La etiqueta que permite colocar un estilo destacado en un texto es:


10. La etiqueta <sub > </sub> permite colocar un estilo:


11. Las etiquetas <ins> y </ins> permiten colocar un estilo… … … … … en la página Web.


12. Para definir el ancho de una línea horizontal se usa el atributo. . . . . . . . . . . 


13. El atributo bgcolor en una marquesina coloca un color de . . . . . . . . . . . . . . 


14.La etiqueta que permite colocar un estilo énfasis en un texto es:


15. La etiqueta <i > </i> permite colocar un estilo:


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

lunes, 13 de enero de 2014

Codigo de una maquetación

<!Doctype html>
<head>
<meta content="text/html; charset=UTF-8"/>
<title></title>
</head>
<body background="" bgcolor="" text="">

<!-- wrap -->
<table border=1 bordercolor="" align="center" cellpadding=0 cellspacing=0 width=960>

<!-- header -->
<tr bgcolor="" align="center" height=128>
<td colspan=> </td>
</tr>

<!-- menu -->
<tr bgcolor="" align="center">
<td>menu1</td>

<td>menu2</td>
<td>menu3</td>
</tr>



<!-- content -->
<tr bgcolor="white" align="left" valign="top" height=512>
<td colspan=>
Textos, imágenes, videos, etc
</td>
</tr>



<!-- footer -->
<tr bgcolor="" align="center">
<td colspan=>@Todos los derechos reservados - 2014</td>
</tr>
</table>


</body>
</html>




EJEMPLO



lunes, 6 de enero 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.

lunes, 2 de diciembre de 2013

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.

lunes, 4 de noviembre de 2013

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

lunes, 28 de octubre de 2013

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



lunes, 21 de octubre de 2013

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.


Color
Hexadecimal
Nombre
#FFFFFF
white

#000000
black
#000080
navy
#0000FF
blue
#008000
green
#008080
teal
#00FF00
lime
#00FFFF
aqua
#800000
maroon
#800080
purple
#808000
olive
#808080
gray
#C0C0C0
silver
#FF0000
red
#FF00FF
fuchsia
#FFFF00
yellow

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>

Sería equivalente a poner:
...
<body bgcolor="blue">
...
</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>


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 café, tendremos que escribir:
...
<body text="brown">
...
</body>
</html>



Fuente: www.aulaclic.es