Informática-María García : agosto 2016

domingo, 28 de agosto de 2016

[2016-23-08]

CLASE 26:

NUEVAS ETIQUETAS:

En Cabeceras:

= Tipo de letra y Tamaño de la letra.
<big>= Tamaño Grande.
= Tamaño pequeño.
= Supíndice(Texto o palabras quedan arriba)
= Subíndice(Texto o palabras quedan abajo)

<FRAMESET>…</FRAMESET>= Dicen al navegador dónde empiezan y dónde acaban los marcos, y el tipo y forma de estos. Entre una y otra irán las definiciones de los diferentes frames.

<!DOCTYPE html>= Indica al navegador donde se visualiza el documento, y que está escrito en la versión HTML5.

lang="es-ES"en la etiqueta de inicio <html>=Idioma.
<meta charset="utf-8">= Dentro del elemento "head". Así, se indica la codificación de caracteres del documento, en esta ocasión UTF-8 (8-bit Unicode Transformation Format, Formato de Transformación Unicode de 8 bits).

Comentarios:

"<!__"y"__>" = Estructura base para realizar un comentario,este No se mostrará en la Página Web pero si en el código de Fuente.

Párrafos con Estilo:

Atributos:

"span"= Abarcar, Contenedor de línea, aplica estilo al texto y agrupa elementos en línea.
"class"= Asigna nombres de clases al elemento clases en CSS.

Datos y Párrafos:

<pre>= Preformatear el texto. Permite visualizar todos los elementos de Tabulaciones, espacios en blanco etc.

Formatos de Texto:

Diferentes elementos:

= : Negrilla.
=: Cursiva. La etiqueta se utiliza con texto enfatizado. La Diferencia es que es más importante en la Semántica.
: Resalta el texto de un Navegador.

TABLAS:

Caption: Título.

th: Tres celdas Cabeceras: "thead"= Una o más filas de Cabeceras. "tbody"= Una o más filas de Datos del cuerpo de la tabla. "tfoot" = Una o más filas de Datos del pie de la tabla.

Padding: Separar Contenido de la Celda.

TOMADO DE:

1) http://usuaris.tinet.cat/acl/html_web/manual/frames/frames_2.html

2) http://www.abrirllave.com/html/ejercicios-resueltos.php

3) http://sitiocop24.galeon.com/

Tips para crear Cajas de Texto:

<input type="email"name="email"> : Cajas de Texto para Correos electrónicos. Se necesita que el navegador (Mozilla, Safari ,Chrome) estén actualizados en su última versión.

<label>email</label><input type="text"value="hola"> . Value= Nombre que le vamos a mostrar al Cliente.

Ejemplo: Caja de texto que al oprimirla muestra una serie de opciones.

Edad= <select name="edad">

<option value="100">Fin del Tiempo</option>

Ejemplo: Botón que al oprimirlo realiza una acción.

ANCLAS:

<a></a>

1. Definir: <a name="ancla"></a>

2. Llamar: <a href="#ancla">Documentos</a>

domingo, 21 de agosto de 2016

[2016-16-08]

CLASE 25:

Los estudiantes del Grado Noveno B realizaron la salida a la Universidad Industrial de Santander, celebración Festival de Piano.

INCLUIR SONIDO EN UNA PÁGINA WEB

Se debe utilizar el elemento <audio>. Este solo funciona con los browsers Internet Explorer 9+, Chrome, Safari, Firefox y Opera.

Conviene incluir una frase de advertencia para los usuarios que utilicen versiones de browser más antiguas.

1.‐ El código básico para incluir sonido en la Página Web es:

</source></audio>

Esto hace aparecer en la pantalla una barra de sonido según el browser.

2. Se puede agregar información del audio como un texto informativo sobre el tema musical (título, músicos, duración, etc.) para realizar esto se debe utilizar la etiqueta .

Texto informativo sobre el tema musical (título, músicos, duración, etc.)

Solo funciona con Internet Explorer 9+, Firefox, Opera, Chrome, y Safari.

</source></audio>

3. Cuando se quieren incluir varios temas musicales, cada [comando de audio] debe estar encerrado y separado de los demás utilizando (por ejemplo) el elemento <div> ….</div>, o colocándolo dentro de la celda de una tabla.

ATRIBUTOS DEL ELEMENTO <audio> :

Autoplay: El sonido comenzará tan pronto esté disponible.

Controls: Mostrar en Pantalla la barra de Control de Sonido.

Loop: El sonido debe repetirse permanentemente.

Muted: Silenciar.

Preload: El archivo de sonido debe ser cargado (y cómo) cuando se carga la página.

Src: Especifica el sitio (URL) donde se encuentra el archivo de sonido.

El elemento <audio>, atributos y elementos complementarios <source>:

<audio controls=” ”> Indica que el browser debe mostrar la barra de control para escuchar el tema musical.

<source src="tema musical.mp3" type="audio/mpeg"> Indica la fuente de donde se tomará el audio correspondiente.

type , indica qué formato de audio se está utilizando (por ejemplo “audio/mpeg>”.

NOTA:

En el código se incluyen dos formatos de audio posibles (mpeg y ogg). Esto se debe a que los browsers tienen sus preferencias; de este modo si no se reconoce el primero (mpeg) , se opta por el segundo (ogg).

MP3 es más pesado que el formato OGG. Con archivos MP3, los browsers Safari y Opera no responden.

TOMADO DE:

http://www.edutecne.utn.edu.ar/audio/sonido_en_web.pdf

PONER FONDO A LA PÁGINA WEB

El lenguaje de CSS, es el encargado de tener la capacidad para poner un fondo en una página web.

El atributo de CSS que nos permite poner el fondo de la página web es background. Para poner el fondo de la página web, lo tendremos que utilizar sobre el elemento body.

Estructura del elemento background:

background: [color] [image] [repeat] [attachment] [position];

Podemos indicarle:

Color RGB.
Una imagen.
Indicar cómo se repite o si no se repite.
Indicar si se queda fijo(fixed) o en formato scroll.
Indicar la posición inicial en la que se situará la imagen.

El código CSS quedará de la siguiente forma:

1.  <style type="text/css">

2.  body {

3.          background:url(fondo.gif) repeat 0 0;

4.   }

5.  </style>

Hay que recordar que este código lo tenemos que poner antes de la etiqueta head.

Utilizamos la función url () para indicar el directorio dónde se encuentra la imagen. Si queremos utilizar otro directorio podemos poner lo siguiente:

1.  <style type="text/css">

2.  body {

3.          background:url('/imagenes/fondo.gif') repeat 0 0;

4.   }

5.  </style>

Ahora la imagen se encuentra en un directorio llamado "imagenes" que está en la raiz.

Por último tenemos que saber que existe otra propiedad llamada:

background-image, permite indicar la imagen a utilizar como fondo de mi página web, si no nos queremos preocupar del resto de atributos.

En este caso el código quedaría de la siguiente forma:

1.  <style type="text/css">

2.  body {

3.          background-image:url('/imagenes/fondo.gif');

4.   }

5.  </style>

TOMADO DE:

http://lineadecodigo.com/css/poner-un-fondo-en-mi-pagina-web/

domingo, 14 de agosto de 2016

[2016-09-08]

CLASE 24:

HIPERVÍNCULOS Y ANCLAS:

Etiquetas:

<a> : Vínculos,hiperenlaces y todo lo que este relacionado a mostrar la Información.

En este tipo de etiquetas podemos colocar tipos de archivo como:

url: Web, Sitio local
zip,rar,doc-docx
xls-xlsx
ppt-pptx
xpdf
Imagenes: JPG , jpeg, gif, png.

Self: El enlace abre en la misma página Web.
Blank: El enlace abre en una Página diferente, crea una Nueva pestaña.

NOTA: Es necesario que al momento de insertar un hepervínculo o un enlace se coloque el http:// para que este pueda abrir sin ninguna dificultad o cargue en las mejores condiciones.

http:// : Protocolo de Comunicaciones de Hipertexto.

También podemos insertar una imagen como hipervinculo ,para ayudarnos y facilitar la búsqueda del usuario podemos agregar:

title: Es una ayuda rápida y muestra según lo que coloque el programador ya que puede ser que puede encontrar oprimiendo la imagén o el texto que el desee mostrar al Usuario.

ANCLAS:

Es la Navegación dentro del mismo Documento, portada del documento,tabla de Contenido, la información se mueve dentro del mismo documento.

Pasos para crear un Ancla:

1. Se Define: (Letras o números sin caracteres especiales) se utilizan las minúsculas sin espacios en Blanco.

Al lugar de llegada.

Ejemplo: <a name="uno"></a> : Así se define un Ancla.

2. Llamarlas:

Ejemplo: <a href="#uno">Uno</a>

Para llamarla con una condición del Símbolo # que significa: el mismo o la misma página en Anclas.

Ejercicio de Clase:

<html>
<head></head>
<body><h3>anclas</h3>

<a name="arriba"></a>
<a href="#uno">Uno</a> 
<a href="#dos">Dos</a> 
<a href="#tres">Tres</a> 
<a href="#cuatro">Cuatro</a>

 

Uno<a name="uno"></a><a href="#arriba">(regresar)</a>

 

Dos<a name="dos"></a><a href="#arriba">(regresar)</a>

 

Tres<a name="tres"></a><a href="#arriba">(regresar)</a>

 

Cuatro<a name="cuatro"></a><a href="#arriba">(regresar)</a>

 
 

</body>

</html>

ANCLAS

Sirve para definir posiciones dentro de un documento y se puede usar como destino de hiperenlaces.

Para crear un ancla (anchor) se procede de la siguiente manera:

<A NAME="nombre_etiqueta">Texto del elemento ancla</A>

Visualmente este elemento no tiene ningún efecto, pero si lo tiene en forma interactiva con el usuario.

Para hacer referencia al ancla o posición se hace el siguiente tipo de hiperenlace:

<A HREF="#nombre_etiqueta">Texto del hiperenlace</A>

De esta manera accederemos a la posición donde hayamos puesto el ancla

Por ejemplo al final de este documento hemos puesto la siguiente ancla:

<a name="final">Este es el final del documento!!</a>

Y para acceder a esa posición usamos el siguiente hiperenlace:

<A HREF="#final">Vamos al final del documento</A>

Que se vería así:

Vamos al final del documento (clicklea el hiperenlace para ver lo que sucede!!)

usando #nombre_etiqueta estamos asumiendo que el ancla está en el documento actual, o sea estamos usando un ruta relativa al documento.

Si queremos acceder a un ancla desde fuera del documento, usamos un enlace más completo donde se incluye el nombre del documento donde se encuentra el ancla:

<A HREF="anclas.php#final">Vamos al final del documento</A>

En nuestro caso este documento se llama anclas.php. El nombre del documento se coloca siempre antes del signo numeral (#).

La anclas sirven para presentar un listado inicial, y cada elemento del listado se desarrolla a lo largo del documento, pudiendo enlazar con anclas las diferentes posiciones del documento donde se desarrolla cada elemento del listado inicial.

TOMADO DE: http://www.bufoland.cl/cursoweb/html/anclas.php

Un ancla necesita que se inserten las <a> y </a>, con el atributo name, que puede tomar cualquier valor inventado por el usuario, se recomienda no utilizar caracteres especiales.

TOMADO DE: http://www.aulaclic.es/html/t_4_3.htm

domingo, 7 de agosto de 2016

[2016-02-08]

CLASE 23:

TABLAS:

CONCEPTOS:

Columnas: Divisiones en Dirección VERTICAL.
Filas: Divisiones en Dirección HORIZONTAL.
Celdas: Unión entre las columnas y las filas.

Estructura de la Creación de las Tablas en HTML:

<table>: Para abrir y crear la Tabla.

</table>:Cerrar la Tabla.

<tr>: Para abrir y crear Filas.

</tr>:Cerrar la Fila.

<td>: Para Celdas o Columnas.

</td>:Cerrar la Celda o Columna.

NOTA: SIEMPRE las tablas se basan en el ANCHO y hay que tener presente dependiendo de lo que desea el usuario el BORDE.Cuando el Borde es = 0 no se ve el Borde de la tabla.

Las tablas pueden estar FIJAS o AJUSTABLES:(Son muy deferentes)

Tabla Fija: Se maneja con px (pixeles).

Tabla Ajustable: Se maneja con % (Porcentaje).

EJEMPLO DE LA ESTRUCTURA:

<html><head><title>pagina</title></head>

<body>

<tr>

</tr>

</body>

</html>

<table width="100%"border="10"bgcolor="#ff0000"border color="#00ffaa">

UNIÓN DE CELDAS:

El número el cual se coloca después del = Depende de la cantidad de columnas que se van a unir.

COLSPAN: Agrupa COLUMNAS.

ROWSPAN: Agrupa FILAS.

  = Espacio en Blanco y evita que el Espacio en Blanco se convierta en Error.

<tr style="visibility:hidden" : No se está visualizando la Información.

<tr style="visibility:visible" : Se visualiza la Información.

Atributos de Algunas viñetas:

align: "center""left""right"

valign: "middle""top""down"

INFORMACIÓN SOBRE TABLAS:

Las tablas son los elementos más importantes del HTML. Entender como construirlas es la clave para dominar el lenguaje. Vamos a trabajar con una tabla de 2x2 celdas que iremos modificando sobre la marcha.

El código para construirla es:

<TABLE border=1>
<TR>
<TD>fila1/celda1</TD>
<TD>fila1/celda2</TD>
</TR>
<TR>
<TD><img src="obras.gif" width=60 height=53 border=0></TD>
<TD>fila2/celda2</TD>
</TR>
</TABLE>

Tenemos tres tags principales, <TABLE>(inicio y final de tabla),<TR>(inicio y final de fila),<TD>(inicio y final de celda).

Cada uno de los tags admite varios parámetros, vamos a ver los básicos:

<TABLE>

border: Borde de la tabla, se suele poner a cero o a uno.

width: Anchura de la tabla.

cellpadding: Separación entre el contenido de las celdas y el borde de la celda.Por defecto es igual a 2 y si lo subimos es a 10.

cellspacing: Separación entre las celdas. Por defecto es igual a 2 y si lo subimos es a 10.

bgcolor: Color de fondo.

<TD>

width, height: Altura y anchura de la celda. Vamos a dimensionar la celda superior izquierda.

<TABLE border=1>
<TR>
<TD width=100 height=100>fila1/celda1</TD>
<TD>fila1/celda2</TD>
</TR>
<TR>
<TD><img src="obras.gif" width=60 height=53 border=0></TD>
<TD>fila2/celda2</TD>
</TR>
</TABLE>

align, valign: Alineamiento horizontal y vertical del contenido de la celda. Vamos a seguir modificando la celda superior izquierda.

<TABLE border=1>
<TR>
<TD width=100 align=right valign=top height=100>fila1/celda1</TD>
<TD>fila1/celda2</TD>
</TR>
<TR>
<TD><img src="obras.gif" width=60 height=53 border=0></TD>
<TD>fila2/celda2</TD>
</TR>
</TABLE>

bgcolor: Color de la celda

rowspan: Con este tag le decimos al navegador que esa celda es tan alta como varias de las otras columnas, es decir, que la celda ocupa varias filas.

<TABLE border=1>
<TR>
<TD rowspan=2>fila1/celda1</TD>
<TD>fila1/celda2</TD>
</TR>
<TR>
<TD>fila2/celda2</TD>
</TR>
</TABLE>

colspan: Con este tag le decimos al navegador que esa celda es tan ancha como varias de las otras filas, es decir, que la celda ocupa varias columnas.

<TABLE border=1>
<TR>
<TD colspan=2>fila1/celda1</TD>
</TR>
<TR>
<TD><img src="obras.gif" width=60 height=53 border=0></TD>
<TD>fila2/celda2</TD>
</TR>
</TABLE>.

IMPORTANTE:
El tipo de letra que estamos usando en la página no se respeta dentro de las celdas, lo que nos obliga a tener que fijar el tipo de letra celda por celda muy a menudo.

TOMADO DE:
http://www.redaragon.com/informatica/htmlb/cap8.asp