Repaso de todos los temas vistos

*hoy teníamos el proyecto de aula,pero como se fue la luz en el colegio no pudimos realizarlo,así que cuadramos fecha para realizarlo el lunes 29 de agosto a las 3:00 pm

* es simular una página web

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:

<audio control>

<source src="tema musical.mp3"type="audio/mpeg">

<source src="tema musical.ogg"type="audio/ogg">

</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 <p>.

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

<audio controls="">

<source src="tema musical.mp3" type="audio/mpeg">

<source src="tema musical.ogg" type="audio/ogg">

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.

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

1. Alinear letra de celdas

.- Alineaciones dentro de las celdas.

1. Veamos como se pueden alinear los objetos dentro de las celdas de una tabla:

   xxx	xxx	xxx
   xxx	xxx	xxx

   Primera fila (alineación horizontal):
   • En la primera celda el texto está alineado a la izquierda. No hay que hacer nada, es la alineación que se establece por defecto. (Podría escribirse, de todas formas: <td align="left">).
   • En la segunda celda el texto está alineado en el centro: <td align="center">.
   • En la tercera celda el texto está alineado a la derecha: <td align="right">.
   Segunda fila (alineación vertical):
   • En la primera celda el texto está alineado en la parte superior: <td valign="top">.
   • En la segunda celda el texto está alineado en la parte central. No hay que hacer nada, es la alineación vertical establecida p
   • or defecto. (Podría escribirse, de todas formas: <td valign="middle">) .
   • En la tercera celda el texto está alineado en la parte inferior: <td valign="bottom">.
   Para observar mejor los resultados se ha forzado la altura de las celdas a 50 píxeles. Basta escribirlo en la primera celda de cada fila: <td height="50"> pero podría escribirse en todas ellas.

   <html> <head> <title> Tablas 8 </title> </head> <body> <table border width="60%" align="center" bgcolor="#ffffcc"> <caption>Alineaciones de celdas</caption> <tr> <td width="33%" height="50">xxx</td> <td width="34%" align="center">xxx</td> <td width="33%" align="right">xxx</td> </tr> <tr> <td height="50" valign="top">xxx</td> <td align="center">xxx</td> <td align="right" valign="bottom">xxx</td> </tr> </table> </body> </html>

   1. 13.8.- Separaciones entre celdas y entre borde y contenidos.
      La separación por defecto entre las celdas es de 2 píxeles. Se puede modificar esta distancia con el atributo de table cellspacing. Tabla con cellspacing de 15 píxeles:

      xxxx	xxxx	xxxx
      xxxx	xxxx	xxxx

      
      
      La separación entre el borde la tabla y el contenido de las celdas es de 1 píxel. Se puede modificar con el atributo cellpadding de la etiqueta table. Tabla con cellpadding de 15 píxeles:

      xxxx	xxxx	xxxx
      xxxx	xxxx	xxxx

      Tomado de:http://roble.pntic.mec.es/apuente/html/paginas/doce.htm

Practicas de HTML, Refuerzo

-Hoy noveno B no tuvo clase de informática porque estábamos en la UIS, pero el profesor Nelson peña nos dejo ejercicios para que realizáramos en casa ya que empezamos proyecto.

*En la tarde tuvimos refuerzo de informática, hicimos un ejercicio en clase y resolvimos las dudas que teníamos.

*practica 01:Crear la siguiente tabla de 7 x 7, borde=1, ancho 80%. Las líneas horizontales(fondo Naranja) son de ancho = 80%.

 abrir aqui tabla

<HTML>
<head>
<title></title>
</head>
<body>
<table width="80%" height=35 border="1" >
<center>
<tr>
<td  width="16%" align="center" valign="middle" colspan="2" rowspan="3"><br><marquee behavior="alternate"><font color="blue"><s>Periodo III</s><strong>Ejercicio </strong><u>del bimestre</u></font><font color="red"><strong>2016</strong> <br></font></marquee> </td>
<td align="center" valign="center" bgcolor="gray"><br>A<br></td>
<td align="center" valign="center"><br>B<br></td>
<td width="8%" align="center" valign="center"><br> C<br></td>
<td width="8%" bgcolor="blue"align="center"valign="center"><br>D<br></td>
<td width="16%" bgcolor="orange" align="center" valign="center"><br><hr width="80%"><br></td>
</tr>

<tr>
<td align="center" valign="center" width="13%"><br>E<br> </td>
<td align="center" valign="center" bgcolor="gray"><br> F<br></td>
<td align="center" valign="center" bgcolor="blue"> <br>G<br></td>
<td align="center" valign="center"> <br>H<br></td>
<td align="center" valign="center"><br>I <br></td>
</tr>

<tr>
<td align="center" valign="center" width="13%"><br>J<br> </td>
<td align="center" valign="center" Bgcolor="blue"> <br>K<br></td>
<td align="center" valign="center" bgcolor="gray"><br> L<br></td>
<td align="center" valign="center"><br>M<br> </td>
<td width="16%" align="center" valign="center" bgcolor="orange"><br><hr width="80%"><br></td>
</tr>

<tr>
<td align="center" valign="center" width="5%"><br>N <br></td>
<td align="center" valign="center" width="11%" ><br>O<br></td>
<td align="center" valign="center" bgcolor="blue"><br>P <br></td>
<td align="center" valign="center"><br>Q<br> </td>
<td align="center" valign="center"><br>R<br> </td>
<td  align="middle" valign="middler"bgcolor="gray"><br> S<br></td>
<td align="center" valign="center"><br>T<br> </td>
</tr>

<tr>
<td  width="7%"  colspan="2" rowspan="3"><marquee direction="left"><img src="caminar2.gif"></marquee></td>
<td align="center" valign="center"><br>U<br> </td>
<td align="center" valign="center"><br>V<br> </td>
<td width=40  colspan="3" rowspan="3"> <marquee direction="right"><img src="caminar1.gif"></marquee></td>

</tr>

<tr width="7%%">
<td align="center" valign="center"><br>W<br> </td>
<td align="center" valign="center"><br>X<br> </td>
<
</tr>

<tr>
<td align="center" valign="center"width="16%"><marquee direction="up"> <img src="fecha1.png"></marquee> </td>
<td align="center" valign="center" width="16%"><marquee direction="down"><img  src="fecha2.png"  ></marquee></td>
</tr>
</center>
</table>
</body>

</html>

Ejercicio para prácticar 02 :

Ejercicio solucionado de tablas combinadas.   ver tabla <html> <head> <title></title> </head> <body> <table width="29%" border="1" > <tr> <td align="center" valign="middle">1</td> <td align="center" valign="middle">2</td> <td align="center" valign="middle">3</td> <td align="center" valign="middle">4</td> </tr> <tr> <td align="center" valign="middle">5</td> <td colspan="2" rowspan="2" align="center" valign="middle">6</td> <td align="center" valign="middle">7</td> </tr> <tr> <td align="center" valign="middle">8</td> <td align="center" valign="middle">9</td> </tr> <tr> <td align="center" valign="middle">10</td> <td align="center" valign="middle">11</td> <td align="center" valign="middle">12</td> <td align="center" valign="middle">13</td> </tr> </table> </body> </html>

Anclas 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 ni un 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 hipernlace:
<A HREF="#final">Vamos al final del documento</A>

usando #nombre_etiqueta estamos asumiendo que el ancla esta 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 docuemnto se coloca siempre antes del signo gato (#).

La anclas son muy buenas por ejemplo 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 incial.

Tomado de:http://www.bufoland.cl/cursoweb/html/anclas.php

Tomado de:https://www.google.com.co/search?q=anclas+html&espv=2&biw=1360&bih=622&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiy8oeJpdbOAhWGKB4KHXFkBpAQ_AUIBigB&dpr=1#imgrc=FoIez8AZ7QAkVM%3A

* Anclas: Tabla de contenido de un documento, se mueven dentro del mismo documento.

Se definen letras y números, no colocar caracteres especiales, espacios en blancos ni minúsculas.

1. se tiene que definir el anclas.

pero aun no funciona apenas se definio.

Tomado de:https://www.google.com.co/search?q=anclas+ejemplos+codigo&espv=2&biw=1360&bih=622&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjJr8SmrNbOAhWFlx4KHUAAAeMQ_AUIBigB#imgrc=y7bZZY89pdg5NM%3A

Tablas en HTML, Practica.

Las tablas más sencillas de HTML se definen con tres etiquetas: <table> para crear la tabla, <tr> para crear cada fila y <td> para crear cada columna.

Tomado de: https://www.google.com.co/search?q=columna+fila+celda&espv=2&biw=1366&bih=643&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjEqNyXprPOAhWM5iYKHXQkDWUQ_AUIBigB#imgrc=Dt2VXj64Rdjh4M%3A

* Para unir o agrupar columnas se utiliza la etiqueta <td colspan= " "> </td>

ejemplo:  

<html>

<head><title>practica de tablas</title></head>

<body>

<table>

<tr>

<td colspan="5">1 2 3 4 5</td>

<td>6</td>

<td>7</td>

<td>8</td>

<td>9</td>

<td>10</td>

</tr>

</table>

</body>

</html>

* Para unir o agrupar filas se utiliza la etiqueta <td rowspan= " "> </td>

ejemplo:

<html>

<head><title>practica de tablas</title></head>

<body>

<table>

<tr>

<td rowspan="3">11 21 31</td>

<td>12</td>

<td>13</td>

</tr>

</table>

</body>

</html>

*El profesor nos dejo un ejercicio para practicar en casa el cual fue este: file:///F:/camilaindex.html/ejercicio%20de%20casa.html

HTML, evaluacion

-Hoy realizamos la segunda habilidad del periodo, y la recuperación de la primera habilidad, todos los que pusieron la url en la web del colegio, se les dio la recompensa de hacer las evaluaciones en grupo, la evaluacion se podia con quien quisiera y con apuntes.

Esta fue la evaluacion:

manejp de imagenes: http://www.redaragon.com/informatica/htmlb/cap7.asp

HTML, evaluación

-Hoy realizamos una evaluación sobre el tema visto y los tutoriales que aparecían en la pagina web, la evaluación era individual y era la primera habilidad del tercer periodo, pero quien haya perdido esta habilidad tendría oportunidad si el martes 26 de julio pasan la evaluación, quien no la pase no tendrá mas oportunidad de recuperar esta habilidades.

Formateo de texto.

El formateo del texto, o sea, el formato del texto, son una serie de etiquetas que escribimos en html rodeando la palabra o el texto y que transforman ese texto en el formato que nosotros le hemos querido dar. 

Anteriormente ya hemos visto en un pequeño texto introductorio como se ponía la negrita y la itálica. Pero eso era solamente introductorio. A continuación lo vamos a explicar de una forma más detallada.

Las etiquetas deben rodear al texto. Es decir, la etiqueta debe abrirse y cerrarse, conteniendo el texto o la palabra que queramos transformar, entre medias. En el ejemplo de la negrita se abriría  <b> y se cerraría </b>.

Se pueden combinar diferentes formatos, o sea, diferentes etiquetas. Por ejemplo, si queremos que un texto esté en negrita y en cursiva escribiríamos esto:

<b><i>Este texto está escrito en negrita y en cursiva</i></b>.Cuando combines, ten cuidado a la hora de cerrar las etiquetas. Debes cerrar las etiquetas por orden, de la más interior a la más exterior. Por último, recordad que podéis escribir las etiqutes en minúsculas o en mayúsculas. 

Vamos con los diferentes formateos html que podemos encontrar:

Negrita

Existen dos etiquetas que harán que nuestro texto se convierta en negrita. La utilización de cualquiera de ellas es indiferente. Puedes usar la que prefieras. 

La primera es la etiqueta <b> y la otra es la etiqueta <strong>. Aquí va un ejemplo: 

Este palabra la vamos a poner en <b>negrita</b> y esta otra <strong>también</strong> Este palabra la vamos a poner en negrita y esta otra también

Cursiva

Para escribir un texto en cursiva debemos utilizar la etiqueta <i> (y por supuesto cerrarla con la etiqueta </i>).

También podemos utilizar la etiqueta <em>. Como en el caso de la negrita, es indiferente el uso de una u otra. Aquí os dejo un ejemplo:

Este palabra la vamos a poner en <i>cursiva</i> y esta otra <em>también</em> Este palabra la vamos a poner en cursiva y esta otra también

Subrayado

Si queremos que la palabra o el texto quede subrayado, deberemos rodearlo con la etiqueta <u> y cerrarlo con su correspondiente etiqueta. O sea, </u>. Así subrayaríamos una frase importante:

<u>Así subrayaríamos una frase importante</u> Así subrayaríamos una frase importante

Texto con espaciado simple o TT

TT son las iniciales de “teletype”. Utilizando esta etiqueta conseguiremos un espaciado simple entre las diferentes letras del texto. Abriremos la etiqueta con <tt> y la cerraremos con </tt>.

<tt>Esta frase la vamos a escribir de forma espaciada </tt> Esta frase la vamos a escribir de forma espaciada

Palabras más grandes o más pequeñas

Puede que en una frase queramos destacar un palabra por medio de una variación de tamaño sin necesidad de utilizar los encabezados(los explicaremos más adelante). Pues esta variación de tamaño la conseguiremos gracias a las etiquetas <big> y <small>. 

Sus propios nombres en inglés nos indican cuáles serán sus funciones: <big> agrandará el texto y <small> lo disminuirá. 

Cada vez que escribamos una etiqueta, haremos el texto un punto más grande. Pero estas etiquetas también la podemos combinar, por lo que si escribimos dos veces la etiqueta <big>, haremos crecer la palabra dos puntos.

Un ejemplo sería el siguiente:

Esta palabra se va a escribir <small>pequeñita</small>, esta se va a escribir <big>más grande</big> y ésta <big><big>más grande aún</big></big>. Esta palabra se va a escribir pequeñita, esta se va a escribir más grande y ésta más grande aún.

Superíndices y subíndices

Mediante el Html también podemos escribir fórmulas matemáticas.  Gracias a las etiquetas siguientes podrás escribir subíndices y superíndices fácilmente. La etiqueta <sub> te servirá para escribir un subíndice y <sup> será tu etiqueta para un superíndice.

Así nos queda un ejemplo como el siguiente:

Gracias a estas etiquetas podemos escribir cualquier formula matemática como esta: H <sub>2</sub> O o números elevados a potencias 7<sup>3</sup>. Gracias a estas etiquetas podemos escribir cualquier formula matemática como esta: H 2 O o números elevados a potencias 73.

Texto tachado

Existen tres etiquetas diferentes que nos servirán para conseguir que nuestro texto se quede tacahado. Hablamos de las etiquetas <strike>, <s> y <del>. Ambas nos ofrecen el mismo resultado. Aquí tienes la muestra:

Si la palabra no me gusta la puedo tachar <strike>así</strike>, <s>así</s> o <del>así</del>. ¡Lo mismo me da! Si la palabra no me gusta la puedo tachar así, así o así. ¡Lo mismo me da!

Tomado de: http://html.hazunaweb.com/103.php

HTML

HTML 

¿QUÉ ES Y PARA QUÉ SIRVE HTML?

HTML es el lenguaje que se emplea para el desarrollo de páginas de internet. Está compuesto por una seríe de etiquetas que el navegador interpreta y da forma en la pantalla. HTML dispone de etiquetas para imágenes, hipervínculos que nos permiten dirigirnos a otras páginas, saltos de línea, listas, tablas, etc.

 Podríamos decir que HTML sirve para crear páginas web, darles estructura y contenido.

ALGO DE HISTORIA

HTML nació públicamente en un documento llamado HTML Tags (Etiquetas HTML), publicado por primera vez en Internet por Tim Berners-Lee en 1991. En esta publicación se describen 22 etiquetas que mostraban un diseño inicial y relativamente simple de HTML. Varios de estos elementos se conservan en la actualidad. Otros se han dejado de usar, y muchos otros se han ido añadiendo con el paso de los años. De esta manera, podemos hablar de que han existido distintas versiones de HTML a lo largo de la historia de internet. Nosotros vamos a trabajar con el HTML estándar actual, que es el utilizado por los navegadores y páginas web de hoy en día. Sin embargo, no vamos a prestarle atención a las versiones y especificidades de cada versión, ya que el objetivo de este curso es aprenderlos fundamentos de HTML y entender cómo funciona, no conocer la sintaxis o especificidades de una versión concreta. ¿Por qué no le damos importancia a la versión? Porque una persona que cuenta con los fundamentos y comprensión básica sobre el lenguaje es capaz de adaptarse a las características particulares de una versión sin problema. En cambio, centrarse en los detalles de una versión sin conocer los fundamentos hará que no tengamos capacidad para comprender lo que hacemos ni para adaptarnos a los continuos cambios que tienen lugar en el ámbito de los desarrollos web.

Tomado de: http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=435:ique-es-y-para-que-sirve-html-el-lenguaje-mas-importante-para-crear-paginas-webs-html-tags-cu00704b&catid=69:tutorial-basico-programador-web-html-desde-cero&Itemid=192

* un sitio web es crear una carpeta; Los nombres de las carpetas y archivos deben ser en minuscula, dichos nombres no pueden tener espacios en blancos y caracteres especiales como: ñ.Ñ

Etiquetas 

Las etiquetas son marcas que se usan para señalar el inicio y el fin de un elemento.

Etiquetas cerradas:

<title> mi paginita</title>

Etiquetas abiertas:

<img src = "arbol.jpg">

<img src = "arbol.jpg"   >

Todas las etiquetas comparten el mismo formato: empiezan con el signo menor que "<" y terminan con el signo mayor que ">".

Por lo general, hay dos tipos de etiquetas: la etiquetas de inicio, por ejemplo, <html>, y las etiquetas de cierre, por ejemplo, </html>. La única diferencia entre la etiqueta de inicio y la de cierre es la barra oblicua "/". El contenido queda etiquetado al colocarlo entre una etiqueta de inicio y una etiqueta de cierre.

ETIQUETAS IMPORTANTES DE HTML

Estas son las etiquetas más importantes de HTML, aplica su utiliza en tu proyecto Web y veras como puedes mejorar su presentación, aunque algunas ya las hemos visto otras son nuevas y de mucha aplicación en HTML. No olvides reemplazar los paréntesis por los signos <>.

• (html).....(/html): Es una etiqueta cerrada que determina el inicio del documento html. Todas las demás etiquetas que contiene un documento html, para que sean reconocidas por los navegadores WEB deben estar incluidas dentro de estas dos instrucciones.

                                                                             

• (head)....(/head): Esta etiqueta determina la cabecera del documento dentro del encabezado pueden ir otras etiquetas como (title)(/title)ó (meta).

• (title)....(/title): Es una instrucción cerrada donde se incluye el titulo de la pagina web.

• (meta): instrucción que es abierta, sirve para indicar el contenido y las palabras clave de la pagina web.

• (!-- Comentarios --): Para incluir comentarios en la página web se utiliza esta instrucción.

• (body)....(/body): Dentro de esta instrucción cerrada, es donde va a ir todo el contenido que queramos que tenga nuestra página web. Dentro de sus atributos importantes encontramos: background="nombre del fichero", Para colocar una imagen como fondo de la pagina. bgcolor="black", Para colocarle un color de fondo a nuestra pagina, en este caso el color será el negro pero puede variar. text="white", Indica un color para el texto que incluyamos en nuestro documento, en este caso será blanco, pero por defecto es negro.

Tomado de: http://katiapautt.blogspot.com.co/2011/05/etiquetas-importantes-de-html.html