IV Bimestre
Trabajo Final
3ro de secundaria.
Creación de una animacion del Adobe Flash o un flipbook.
ejemplos
Trabajo Día y noche
Mesa de Billar
Descarga Flash cs6
https://mega.nz/#!th8TTapa!O1f2H5SERjE4q1cJ1h3d1neos4XQEOVkF9kw-g54DD4
III Bimestre
Efecto trazado en uso
Trabajo I Collage de paisaje
Descarga e instalación de Firework.
II Bimestre
Trabajo:
- Crea una pagina web en Jimdo.es.
- Investiga 3 paginas web que creen paginas web.
Trabajo:
- Crea una pagina web que contenga elementos multimedia como vídeos y juegos flash,.
Trabajo:
- Crea una pagina web con tu horario de tu día a día.
- Crea una pagina web que tenga imagenes en distintos lados con texto a su alrededor.
Trabajo:
- Crea una pagina web con hipervinculos.
- Crea el mapa del Perú y que contenga enlaces en cinco provincias.
Trabajo:
- Crea un sitio y guardarle imágenes.
Trabajo:
- Elabora en modo de diseño un texto y aplica formato de texto y página.
I Bimestre
Tema 7 Formularios
<!DOCTYPE html> <html> <head> <title>Formulario de registro - Mi web</title> </head> <body> <h1>Formulario de registro</h1> <form action="" method="get"> <p> <label for="nombre">Nombre:</label> <input type="text" name="nombre" id="nombre" maxlength="50" /> </p> <p> <label for="apellidos">Apellidos:</label> <input type="text" name="apellidos" id="apellidos" maxlength="50" /> </p> <p> Sexo: <input type="radio" name="sexo" id="sexo-h" value="h" /> <label for="sexo-h">hombre</label> <input type="radio" name="sexo" id="sexo-m" value="m" /> <label for="sexo-m">mujer</label> </p> <p> <label for="correo">Correo:</label> <input type="text" name="correo" id="correo" maxlength="100" /> </p> <p> <label for="poblacion">Población:</label> <select name="poblacion" id="poblacion"> <option>Alicante</option> <option>Madrid</option> <option>Sevilla</option> <option>Valencia</option> </select> </p> <p><label for="descripcion">Descripción:</label> <textarea name="descripcion" id="descripcion" rows="6" cols="60"></textarea> </p> <p> <input type="checkbox" name="info" id="info" checked="checked" /> <label for="info">Deseo recibir información sobre novedades y ofertas</label> </p> <p> <input type="checkbox" name="condiciones" id="condiciones" /> <label for="condiciones"> Declaro haber leido y aceptar las condiciones generales del programa y la normativa sobre protección de datos</label> </p> <p> <input type="submit" value="Enviar" /> </p> </form> </body> </html>
Tema 6 Tablas
|
En este tema vamos a ver cómo trabajar con tablas. Podremos insertar tablas, filas y columnas, y modificar sus propiedades. Hoy en dia, la mayoría de las páginas web se basan en tablas, ya que resultan de gran utilidad al mejorar notablemente las opciones de diseño. Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizarse.
|
Tabla <table> |
|
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.
Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre dichas etiquetas habrá que especificar las filas y columnas que formarán la tabla.
|
||||||||||||||||||||||
Fila <tr> |
|
Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas etiquetas deberán insertarse entre las etiqetas <table> y </table>. Por ejemplo, para crear una tabla con cinco filas escribiríamos:
|
Columna o celda <td> |
Formato de la tabla |
|
Es posible modificar los siguientes atributos de una tabla:
Por ejemplo, para modificar la tabla de la página anterior para que quedase como la siguiente:
Habría que escribir:
Con esto indicamos que el ancho (width) de la tabla debe ocupar el 50% del ancho de
la ventana (lo puedes comprobar cambiando el ancho de la ventana de tu navegador y verás que el ancho de la tabla varía para ocupar siempre la mitad de la ventana), que el borde
(border) tiene un grosor de dos píxeles (es más ancho que las separaciones internas
de la tabla que tienen grosor 1), que la tabla está alineada al centro (center) de la
ventana, que no hay espacio entre las celdas (cellspacing="0"), que el borde la tabla
es negro (#000000) y el fondo naranja (#FFCC99). |
Formato de las celdas |
|
Es posible modificar los siguientes atributos de una celda:
También es posible modificar estos atributos de toda una fila, especificándolos en la etiqueta <tr>, en lugar de en la etiqueta <td>. Hay que tener en cuenta que los atributos tienen más prioridad cuando son establecidos para una celda que cuando son establecidos para una fila completa. Al mismo tiempo, tienen más prioridad los atributos establecidos para una fila que los establecidos para toda la tabla. Por ejemplo, si escribiéramos el siguiente código:
Obtendríamos la siguiente tabla:
Se ha establecido el color naranja como fondo de toda la tabla, pero con la línea de código <tr align="center"bgcolor="#0099CC"> se ha establecido el color azul como color de fondo de la primera fila, por lo que dicha fila se mostrará de color azul, y no de color naranja. Al mismo tiempo, se ha cambiado el color de la segunda celda de la primera fila por el color verde, a través de la línea <td bgcolor="#66CC99">Domingo</td> por lo que esta fila en vez de ser azul será verde, los atributos de celda tienen prioridad sobre los de la fila. Existe otro atributo que puede establecerse sobre las celdas. Se trata del atributo nowrap, que hace que el contenido de la celda no se ajuste de manera automática al ancho de la columna sino que el ancho de la celda se adapta al ancho del contenido para que el contenido ocupe una sólo fila. Este atributo no toma ningún valor, simplemente se añade o no a las etiqueta <td>. |
Combinar celdas |
|
Para las etiquetas <td> y <th> existen los atributos colspan y rowspan, que se utilizan para combinar celdas. A través del atributo colspan se especifica el número de columnas por las que se extenderá la celda, y a través del atributo rowspan se especifica el número de filas por las que se extenderá la celda. Para que quede más claro, vamos a ver un ejemplo de su uso. Por ejemplo, para insertar la siguiente tabla:
Habría que escribir el siguiente código:
Vamos a explicar un poco cómo funciona dicho código, aunque sería conveniente que primero intentaras entender el código comparándolo con la tabla que de él se obtiene. En primer lugar, tenemos que ver el número máximo de columnas que ha de tener la tabla. En este caso serían cuatro columnas. Para saber el número de columnas total de la tabla, tenemos que fijarnos en el número total de celdas que podemos obtener por fila al trazar las líneas verticales que separan las columnas entre sí. En la primera fila, la línea <th colspan="4">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</th> indica que la celda ocupará cuatro columnas de la tabla (la columna actual y las 3 siguientes). Como la tabla tiene como mucho cuatro columnas y el atributo colspan de la celda vale cuatro, no hay que definir más celdas para esa misma fila. En la segunda fila, la línea <th rowspan="2">DIFERENCIAS</th> indica que la celda ocupará dos filas de la tabla (la actual y la siguiente). Lo mismo ocurre con la línea <th rowspan="2">HOMBRE</th>. Ya hemos definido dos celdas de la segunda fila. Sabemos que la tabla tiene como mucho cuatro columnas, por lo que como en la línea <th colspan="2">PERRO</th> el atributo colspan vale dos, ya tenemos las cuatro celdas. En la segunda fila hemos definido dos celdas que se expanden por dos filas, por lo que en la tercera fila habrá que definir solamente dos celdas, y no cuatro, ya que dos de sus celdas se corresponden con las definidas en la fila anterior. Las dos nuevas celdas son <th>PEQUEÑO</th> y <th>GRANDE</th>. El uso de los atributos colspan y rowspan puede resultar algo complicado al principio. Es cuestión de práctica. |
||||||||||||||||||||||
Tema 5 Imágenes
Tema 4 hipervínculos, numeración y viñetas
HIPERVÍNCULOS O ENLACES EN HTML. ETIQUETA <A>.
Los enlaces o hipervínculos, también llamados hipertextos son los textos o los objetos sobre los que podemos hacer clic para que nos lleven a otra parte del documento, a otra página web en el mismo sitio o a otra página de Internet, entre otras funciones.
Cuando un visitante hace clic en el hipervínculo, el destino se mostrará en su navegador web, se abrirá o se ejecutará, en función del tipo de destino. El destino es con frecuencia otra página web, pero también puede ser una imagen, un archivo multimedia, un documento de Microsoft Office, un documento PDF, una dirección de correo electrónico o un programa.
Por tanto, con los hipervínculos podemos establecer “saltos” desde una página a otra, incluso a puntos concretos dentro de páginas con contenidos extensos. Los hipervínculos pueden asociarse a imágenes o a textos de modo que haciendo clic sobre ellos con el botón izquierdo del ratón se accede automáticamente al destino asociado a ellos.
Lo más habitual es que el cursor tome la forma de una pequeña mano cuando pasa sobre un hipervínculo.
HIPERVÍNCULOS LOCALES, MARCADORES O ANCLAS.
Los hipervínculos locales o marcadores son enlaces dentro de la misma página. Es decir, al hacer clic en uno de ellos nos llevará a una posición distinta dentro de la misma página que estamos visualizando.
Esta técnica hace que los usuarios accedan de una manera más rápida a la información.
Para crear este tipo de enlaces hay que hacer dos operaciones:
-
Establecer marcadores (anclas) a lo largo de la página (son los lugares a los que queremos saltar con los enlaces).
-
Poner enlaces que salten a los marcadores.
El código de los marcadores se crea con los atributos name (no recomendado) ó id (recomendado):
<a name="nombre_del_marcador">Texto asociado al marcador</a> (No recomendado: no es aceptado por las nuevas versiones de HTML, aunque se usó bastante en el pasado).
<a id="nombre_del_marcador">Texto asociado al marcador</a>
El name ó id de una etiqueta debe ser único, es decir, no puede haber dos etiquetas cuyo name ó id sea el mismo dentro de un documento HTML.
Por ejemplo, <a id="marcadorDeportes">Los deportes en aprenderaprogramar.com</a>
Por otro lado, el código de un enlace para que salte a un marcador.
Pulsa para volver al <a href="#nombre_del_marcador ">Inicio</a>
Hay que tener en cuenta que los marcadores distinguen entre mayúsculas y minúsculas. También hay que tener en cuenta que dentro de las etiquetas <a> </a> hay un texto que aparece visible para el usuario, que es el que hemos marcado subrayado en amarillo. No obstante, es válido no incluir texto alguno como veremos en el siguiente código.
EJERCICIO
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ejemplo del uso de marcadores - aprenderaprogramar.com</title> </head> <body> <a name="arriba"></a> En esta página puedes ir al <a href="#primero">primer</a> apartado, al <a href="#segundo">segundo</a> o al <a href="#tercero">tercero</a>. <a name="primero"><h1>Primer apartado</h1></a> Aquí tienes el primer apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de la página. Quizás si todo entra en la pantalla no logres ver el efecto pero prueba a poner más texto aquí o hacer zoom y conseguirás verlo. <a name="segundo"><h1>Segundo apartado</h1></a> Aquí tienes el segundo apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de la página. Quizás si todo entra en la pantalla no logres ver el efecto pero prueba a poner más texto aquí o hacer zoom y conseguirás verlo. <a name="tercero"><h1>Tercer apartado</h1></a> Aquí tienes el tercer apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de la página. Quizás si todo entra en la pantalla no logres ver el efecto pero prueba a poner más texto aquí o hacer zoom y conseguirás verlo. Volver <a href="#arriba">arriba</a>. </body> </html> |
Escribe el código anterior en un editor de texto como Notepad++ y guarda el archivo con el nombre ejemplo.html. A continuación, haz doble clic en él y prueba a jugar con el archivo haciendo zoom en él o añadiendo más texto para comprobar cómo funcionan los marcadores. El resultado debe ser similar al que se muestra en la siguiente imagen.
Ahora crea otro archivo donde reemplaces los atributos name por id, guarda el archivo como ejemplo2.html. Visualiza los resultados en tu navegador y comprueba si el efecto es el mismo. Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
HIPERVÍNCULOS EXTERNOS. ATRIBUTO HREF.
Un hipervínculo externo es un vínculo a otro sitio web en Internet (sitio externo). Es un vínculo a cualquier otro lugar fuera del sitio actual. Cuando ponemos un vínculo externo, escribimos la dirección completa de la página incluido http://www.... Estas rutas que incluyen http://... las denominamos rutas absolutas. Por ejemplo, <a href="http://www.aprenderaprogramar.com">Acceder a la página web aprenderaprogramar.com</a>
En el hipervínculo distinguimos las siguientes partes:
- Las etiquetas de apertura y cierre del hipervínculo <a> y </a>
- El atributo href, con un valor que se indica con el símbolo igual y la URL a la que dirige el hipervínculo dentro de las comillas.
- Un texto que es el que ve el usuario como link.
Prueba a generar un archivo al que denomines ejemplo.html y en el que incluyas un link como el que hemos visto. El resultado debe ser algo así.
DESTINO DEL HIPERVÍNCULO. ATRIBUTO TARGET
Cuando creamos un vínculo, por defecto el navegador abrirá la página web destino en la misma ventana, pero podemos pedirle al navegador que la abra “aparte”, es decir, en otra ventana. Esto es útil por ejemplo si queremos abrir una página externa a nuestro sitio pero sin que el visitante pierda la nuestra. Para ello utilizaremos el atributo target con alguna de las siguientes opciones.
Valores de target más habituales:
• _blank: Abre el documento vinculado en una ventana nueva del navegador.
• _self: Es la opción predeterminada o por defecto. Abre el documento vinculado en el mismo marco o ventana que el vínculo.
Ejemplo:
<a href=”http://www.aprenderaprogramar.com” target=”_blank”>Ir aprenderaprogramar.com en una nueva ventana</a>
EL ATRIBUTO TITLE PARA HIPERVÍNCULOS
Como última cuestión, debemos tener en cuenta que es muy aconsejable poner un atributo extra cada vez que pongamos un hipervínculo en nuestras páginas. Este atributo es ‘title’ y con el pondremos título a nuestro hipervínculo. Con esto conseguiremos en la mayoría de los navegadores un efecto de ‘tool-tip’ que consiste en que cuando ponemos el cursor encima del hipervínculo nos aparezca una información adicional que es la que hayamos puesto en el atributo ‘title’.
EJEMPLO
|
<!DOCTYPE html> <a href=”http://www.aprenderaprogramar.com” title=”Esto es un tool.tip”>Ir a aprenderaprogramar.com</a>.
</body> |
Escribe este código en el editor Notepad++ y guárdalo con el nombre de archivo ejemplo.html y comprueba los resultados que se obtienen.
Prueba a cambiar el texto de title y a obtener otros resultados. Por ejemplo:
IMÁGENES COMO ENLACES
Para poner una imagen como enlace basta con crear un enlace y añadir en su interior en lugar de texto, una imagen. Veamos un ejemplo:
<ahref="http://aprenderaprogramar.com"><img src="https://i.imgur.com/SpZyc.png"alt="Curso de HTML desde cero"></a>
EJERCICIO
Crea un documento HTML que conste de las siguientes partes. Un encabezado H1 donde indicaremos “Animales de Africa” como texto a mostrar.
Un encabezado H2 donde indicaremos “Leones” como texto. Dentro de este apartado incluiremos varios párrafos que hablarán sobre los leones y un enlace externo (link) de tipo texto cuyo texto será: “Pulsa aquí para saber más sobre leones” y que llevará con un target blank a la siguiente dirección web de wikipedia: http://es.wikipedia.org/wiki/Panthera_leo
Un encabezado H2 donde indicaremos “Tigres” como texto. Dentro de este apartado incluiremos varios párrafos que hablarán sobre los tigres y una imagen que debe mostrar como tooltip “Pulsa aquí para saber más sobre tigres”. Al pulsar sobre la imagen se llevará al usuario a un target blank dirigido a la dirección web http://es.wikipedia.org/wiki/Panthera_tigris
En la parte inferior incluiremos tres links internos (para lo que tendremos que haber definido las anclas correspondientes) que indicarán: “Ir al inicio – Ir a leones – Ir a tigres (Según el link que pulse el usuario, se le llevará al inicio, al encabezado del apartado de leones o al encabezado del apartado de tigres).
Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
CREACIÓN DE LISTAS EN HTML
En la mayoría de los documentos HTML se usan listas para organizar el texto. El lenguaje HTML incorpora distintas formas de mostrar listas, por ejemplo con viñetas sencillas o también con letras
o números. Además, para que las páginas tengan más vistosidad, se pueden colocar imágenes delante de cada párrafo.
A continuación veremos los principales tipos de listas de los que HTML dispone.
LISTAS NO ORDENADAS
Las listas no ordenadas son aquellas que se encuentran entre las etiquetas <ul> y </ul> (ul indica unordered list), etiqueta de apertura y cierre respectivamente. Si queremos añadir un nuevo punto, lo tendremos que hacer dentro de las etiquetas <li> y </li>.
Si no le indicamos nada a la etiqueta <li>, la viñeta o marca que indica que se trata de un elemento de una lista se generará de forma automática. Pero si queremos definir nosotros mismo el símbolo del punto o marca a emplear, debemos indicarlo específicamente. En el pasado se usaba el atributo “type”, hoy en día no recomendado (deprecated). Con este atributo se podía hacer que la lista estuviera definida por puntos negros (li type="disc"), por puntos con el fondo blanco (li type="circle") o por cuadrados (li type="square").
La sintaxis recomendada para indicar la apariencia se basa en usar CSS como indicamos a continuación:
<ul style="list-style-type:disc">
<ul style="list-style-type:circle">
<ul style="list-style-type:square">
La apariencia final que realmente consigamos dependerá del navegador, es decir, el resultado puede ser distinto según usemos un navegador u otro. No todos los navegadores se comportan de la misma forma a la hora de mostrar un símbolo gráfico como una viñeta o marca.
Una lista no ordenada se usa cuando se enumeran elementos sin que el orden tenga relevancia: por ejemplo si decimos “Las personas presentes en la habitación eran: Juan, Manuel, Pedro, Gonzalo” se trata de una lista no ordenada (Juan, Manuel, Pedro, Gonzalo). En cambio si la enumeración implica un orden se tratará de una lista ordenada. Ejemplo: “Los mejores clasificados de la carrera fueron: Juan, Manuel, Pedro, Gonzalo” (se entiende que Juan fue el primero, Manuel el segundo, Pedro el tercero, etc.). Para cada caso, tendremos que decidir si usamos una lista HTML como ordenada o no.
EJERCICIO
El siguiente código define una lista no ordenada y hace uso de atributos deprecated para la etiqueta li. Guarda el código como archivo html con un nombre como ejemplo1dep.html. Sustituye estos atributos por CSS y guarda el archivo como ejemplo1css.html. Compara la visualización de ambos documentos HTML en tu navegador.
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ejemplo del uso de listas - aprenderaprogramar.com</title> </head> <body> <ul> <li type="circle">Esto es un tipo de punto.</li> <li type="square">Este es otro.</li> <li type="disc">Y este es otro diferente.</li> </ul> </body></html> |
El resultado a obtener será similar a este:
Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
LISTAS ORDENADAS
Si lo que pretendemos es definir una lista ordenada, lo tendremos que hacer entre las etiquetas <ol> </ol> (ol indica ordered list). Además, cada elemento de la lista se escribirá con la misma etiqueta que para las listas no ordenadas: <li>. Pero al ser listas ordenadas los símbolos por defecto serán números y éstos se irán generando automáticamente por orden, conforme escribamos nuevos elementos de la lista.
En las listas ordenadas podemos hacer que el primer punto comience con el número que nosotros queramos. Lo conseguiremos gracias al atributo “value”. Los siguientes puntos que escribamos se generarán automáticamente por orden, partiendo de ese número.
Por ejemplo, si queremos que nuestra lista empiece por el número 20, podemos indicarlo en el código. Escribe este código en tu editor de texto y comprueba el resultado.
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ejemplo del uso de listas - aprenderaprogramar.com</title> </head> <body> <ol> <li value="20">Este será el número 20.</li> <li>Este será el 21.</li> <li>Este será el 22. Y así sucesivamente.</li> </ol> </body></html> |
Al igual que con las listas no ordenadas, en el pasado se usaba el atributo “type”, hoy en día no recomendado (deprecated). Con este atributo se podía hacer que la lista estuviera definida por números (li type="1"), letras minúsculas (li type="a"), letras mayúsculas (li type="A"), número romanos en minúscula (li type="i") ó mayúscula (li type="I").
La sintaxis recomendada para indicar la apariencia se basa en usar CSS como indicamos a continuación: <ul style="list-style-type:decimal"> para números, <ul style="list-style-type:lower-alpha"> para letras minúsculas, <ul style="list-style-type:upper-alpha"> para letras mayúsculas, <ul style="list-style-type:lower-roman"> para números romanos en minúsculas, <ul style="list-style-type:upper-roman"> para números romanos en mayúsculas.
Prueba a crear listas usando los distintos valores para este atributo y visualízalas en tu navegador.
LISTAS DE DEFICIONES O DE DESCRIPCIONES
Este tipo de listas no es de uso frecuente, por lo que vamos a citarlas solo por si encontramos este tipo de código en alguna página web poder interpretar su significado. Las listas de definiciones se usan cuando queremos hacer una enumeración tipo “diccionario” donde tenemos varios términos y su definición o descripción. Por ejemplo, esto serían varios términos y sus definiciones:
|
Término |
Definición |
|
FTP |
Protocolo para transmisión de ficheros entre ordenadores |
|
HTML |
Lenguaje de etiquetas empleado para generar páginas web |
|
PHP |
Lenguaje interpretado en servidor que permite generar páginas web dinámicas |
Estos términos y sus definiciones o descripciones podríamos ponerlos de varias maneras dentro de una página web (como texto sin más, como lista ordenada, no ordenada…) y una de estas maneras es ponerlo como lista de definiciones.
Para crear una lista de definiciones debemos usar las etiquetas <dl>, <dt> y <dd>. Vamos a explicarlas por partes:
La etiqueta <dl> indica que dentro de ella va a ir una lista de definiciones o lista de descripciones.
La etiqueta <dt> indica que dentro de ella va un término que vamos a definir.
La etiqueta <dd> nos dice que dentro de ella se encuentra una definición o descripción asociada a un término. Un término podría tener varias descripciones. Por ejemplo el término Autor podría tener como descripciones: Mateo Renzi, Olivo Pascua, Jorge Guillén.
Los listados de definición se separarán automáticamente si escribimos varios de ellos.
EJEMPLO
Escribe este código en tu editor de texto, guárdalo como archivo html y comprueba el resultado.
|
<!DOCTYPE html> <dl> <dt>Aquí va el término que definiremos</dt>
<dd>Y aquí dentro irá la definición propiamente dicha.</dd> </dl>
<dl> <dt>Aquí va la segunda definición</dt>
<dd>Segunda definición, separada automáticamente de la anterior.</dd> </dl>
</body> |
Habitualmente, los navegadores generan de forma automática el efecto de que la definición o descripción queda desplazada hacia la derecha (tabulada) respecto a el término, así como el espacio de separación entre distintas listas de definiciones.
ANIDAMIENTO O USO SIMULTÁNEO (COMBINACIÓN) DE VARIOS TIPOS DE LISTAS
Si lo deseamos, podemos combinar unos tipos de listas con otros. Por ejemplo, tener listas ordenadas dentro de cada elemento de una lista desordenada. Veamos un ejemplo. Escribe el siguiente código en un editor de texto como bloc de notas o Notepad++ y guárdalo con un nombre de archivo como ejemploCU00718B.html.
|
<!DOCTYPE html> <ul> <li>Lenguajes de programación estructurada </li> <ol>
<li> Lenguaje C </li> </ol>
<ol>
<li>Lenguaje Java </li> </ol> </ul> </body> </html> |
El resultado de este código cuando lo visualizamos en un navegador sería algo similar a lo que mostramos en la siguiente imagen.
EJERCICIO
Crea una lista ordenada cuyos elementos sean Doctores, Ayudantes y Auxiliares. Dentro de Doctores define una lista no ordenada cuyos elementos sean: Juana Pérez, Alberto Márquez, Raúl Moreno. Dentro de Ayudantes define una lista no ordenada cuyos elementos sean: Noelia Suárez, Abel Rebollo. Dentro de Auxiliares crea una lista no ordenada cuyos elementos sean Silvia Estévez, Angela González y Cuarthemoc Adanez. Separa cada lista con un elemento hr de color azul, 10 pixeles de grosor y que ocupe el 50% del ancho disponible.
Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
Tema 3 Etiqueta Font
LA ETIQUETA. FONT
Esta etiqueta permite controlar tres atributos del texto que se encuentra
encerrado entre ellas: su tamaño (SIZE), su color (COLOR) y el tipo de fuente (FACE).
Por ejemplo, las siguientes líneas escritas dentro del cuerpo de un nuevo
archivo, mostrarán texto con cuatro tamaños de fuente diferentes.
Texto con fuente tamaño normal.
|
<font size = "+1">Texto con fuente tamaño + 1</font>
<font size = "+2">Texto con fuente tamaño + 2</font>
<font size = "-1">Texto con fuente tamaño - 1</font>
<font size = "-2">Texto con fuente tamaño - 2</font>
|
La sintaxis completa de la etiqueta <FONT> es la siguiente:
|
<font size = "X" color = "color" face = "Nombre de la fuente">Texto</font> |
Donde X corresponde como ya se vió, al tamaño de la fuente que admite valores positivos y negativos.
El atributo color puede ser un valor hexadecimal o el nombre en inglés de un color específico.
Aunque en teoría se pueden mostrar millones de colores, existen 16 de ellos que componen la denominada “Paleta Segura”.
El uso de cualquiera de esos colores, garantiza que las páginas podrán ser vistas tal como fueron diseñadas, aun cuando se utilice para su visualización un monitor con la configuración más pobre.
La tabla siguiente muestra los valores hexadecimales (códigos) y nombres de los 16 colores mencionados.
Finalmente, Nombre de la fuente es el atributo correspondiente a los
nombres de las fuentes disponibles en el sistema, tales como: Arial, Helvetica, Times New Roman, Arial Black, Chalesworth, etc.
Ejemplo:
|
<font size = "+1" color = "maroon" face = "Comic Sans MS">TEXTO</font>
<font size = "+2" color = "#0000ff" face = "Tahoma">TEXTO</tont>
<font size = "+2" color = "Purple" face = "Stencil">TEXTO</font>
<font size = "+2" color = "#ff00ff" face = "Arial">TEXTO</font>
|
Cuyo resultado será similar al de la siguiente gráfica:
Ejemplos de tamaños de fuentes
| Inst. HTML | Muestra | Explicación |
|---|---|---|
| <FONT SIZE=2>Muestra</FONT> | Muestra | Obtendriamos en este caso texto de tamaño de fuente 2 |
| <FONT SIZE=6>Muestra</FONT> | Muestra | Este texto es de tamaño de fuente 6 |
| <FONT SIZE=-1>Muestra</FONT> | Muestra | Obtendriamos también en este caso texto de tamaño de fuente 2, pero lo definiríamos de forma relativa: 3-1=2 |
| <FONT SIZE=+2>Muestra</FONT> | Muestra | Así definiríamos fuente de tamaño 6 de forma relativa: 3+2=5 |
| <FONT SIZE=6> Muestra <FONT SIZE=1> Muestra </FONT> Muestra </FONT> | Muestra Muestra Muestra | Se pueden combinar en una misma frase varios tamaños de fuentes |
| <FONT SIZE=4> Muestra <B> <I> < A HREF="http://www.uca.es"> Muestra </A> </I> Muestra </B> </FONT> | Muestra Muestra Muestra | Se pueden combinar con elementos de resalte e hiperenlaces |
Ejemplos de definición de colores de fuentes
Algunos ejemplos de la definición de colores de fuente podrían ser:
| Inst. HTML | Muestra | Explicación |
|---|---|---|
| <FONT COLOR=FF00FF>Muestra</FONT> | Muestra | El texto se mostrará de un color lila, al mezclar los colores rojo y azul. |
| <FONT COLOR=AQUA>Muestra</FONT> | Muestra | También se puede utilizar uno de los colores predefinidos. |
| <FONT SIZE=5 COLOR=red> Muestra </FONT> | Muestra | Se puede combinar con el tamaño de fuente |
| <FONT COLOR=NAVY> Mue<FONT SIZE=4 COLOR=BLUE>str</FONT>a </FONT> | Muestra | Se pueden combinar varios colores en una misma frase o palabra. |
| <H3> <FONT COLOR=81426E> Mu<I>es</I>tra </FONT> </H3> |
Muestra |
Pueden ser utilizados junto con otros elementos de resalte como cabeceras, estilos físicos y lógicos, etc ... |
Estilos físicos: Modifican la presentación real del texto.
- <b>.....</b>: Pone el texto en negrita.
- <i>.....</i>: Pone el texto en cursiva.
- <tt>.....</tt>: Pone el texto en fuente monoespaciada.
- <u>.....</u>: Subraya el texto afectado.
- <sub>.....</sub>: Pone el texto afectado en subindice.
- <sup>.....</sup>: Pone el texto afectado en superindice.
Tema 2 Etiquetas
Etiquetas Básicas
Headings
Nos definen el tamaño de un título o cabecera.
<h1> nos dá el tipo de letra más grande.
<h6> nos dá el tipo de letra más pequeño.
HTML agrega automaticamente un espacio antes y después de cada título.
<h1> al ser usado como título de una página Web, es de suma importancia ya que es uno de los parámetros que Google
y demás buscadores tiene en cuenta, a la hora de indexar un sitio web.
Ejemplo |
|
|
Código
<html><head> <title>Headings</title> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html> |
Resultado
Heading 1Heading 2Heading 3Heading 4Heading 5Heading 6 |
Párrafos
Los párrafos se definen con la etiqueta <p>.
Ejemplo |
|
|
Código
<html><head> <title>Párrafos</title> </head> <body> <p>Este es el primer párrafo.</p> <p>Y este es el segundo párrafo.</p> </body> </html> |
Resultado
Este es el primer párrafo. Y este es el segundo párrafo. |
Comentarios
La etiqueta <!-- ... --> se utiliza para insertar un comentario dentro del código que estamos escribiendo. El mismo es ignorado por el navegador al momento de leerlo. Los comentarios nos sirven para explicar mejor el código y son de gran ayuda en el momento que necesitemos editarlo.
* Nota que el signo de exclamación se coloca solo al principio del código.
Salto de línea
El salto de línea está definido con la etiqueta <br>. Es utilizado cuando queremos cortar una línea sin necesidad de terminar con el párrafo. La etiqueta <br> obliga a saltar de línea dondequiera que la ubiquemos.
Ejemplo |
|
|
Código
Esto es <br> un salto de lí<br>nea.
|
Resultado
Esto es un salto de lí nea. |
Trazar una línea
La etiqueta <hr> nos permite trazar una línea horizontal como las que separan las distintas secciones de este tutorial.
La etiqueta <hr> no tiene cierre.
Ejemplo |
|
|
Código
<hr>
|
Resultado
|
Tabla con las etiquetas básicas
| Etiquetas | Descripción | Ej. |
|---|---|---|
| <h1> a <h6> | Define el tamaño de los encabezados |
|
| <p> | Define un párrafo |
|
| <!-- --> | Define un comentario |
|
| <br> | Define un salto de línea |
|
| <hr> | Define una línea horizontal |
|
Tema 1
Página web
Una página web, o página electrónica, o página digital, o ciberpágina,1 2 es un documento o información electrónica capaz de contener texto, sonido, vídeo, programas, enlaces, imágenes, y muchas otras cosas, adaptada para la llamada World Wide Web (WWW) y que puede ser accedida mediante un navegador. Esta información se encuentra generalmente en formato HTML o XHTML, y puede proporcionar navegación (acceso) a otras páginas web mediante enlaces de hipertexto.
Navegador web
| Cuota de uso de navegadores web (noviembre de 2014 a noviembre de 2015, según StatCounter)1 |
|---|
|
| Google Chrome (50.13 %) Internet Explorer (18.07 %) Mozilla Firefox (16.22 %) Safari (10.03 %) Opera (1.66 %) Otros (3.89 %) |
Un navegador web (en inglés, web browser) es un software, aplicación o programa que permite el acceso a la Web, interpretando la información de distintos tipos de archivos y sitios web para que estos puedan ser visualizados.
La funcionalidad básica de un navegador web es permitir la visualización de documentos de texto, posiblemente con recursos multimedia incrustados. Además, permite visitar páginas web y hacer actividades en ella, es decir, enlazar un sitio con otro, imprimir, enviar y recibir correo, entre otras funcionalidades más.
Los documentos que se muestran en un navegador pueden estar ubicados en la computadora donde está el usuario y también pueden estar en cualquier otro dispositivo conectado en la computadora del usuario o a través de Internet, y que tenga los recursos necesarios para la transmisión de los documentos (un software servidor web).
Tales documentos, comúnmente denominados páginas web, poseen hiperenlaces o hipervínculos que enlazan una porción de texto o una imagen a otro documento, normalmente relacionado con el texto o la imagen.
Un buscador o motor de búsqueda es un sistema
o aplicación informática que permite la búsqueda de todo tipo de términos y palabras clave a partir del desarrollo de índices de archivos almacenados en servidores
web.
Definición de Buscador
En informática, un buscador es un sistema que
opera indexando archivos y datos en la web para facilitar la búsqueda de los mismos respecto de términos y conceptos relevantes al usuario con sólo ingresar una palabra clave. Al
entrar el término, la aplicación devuelve un listado de direcciones Web en las cuales dicha palabra está incluida o mencionada.
La utilización de buscadores web se ha
convertido en uno de los principales motivos de uso de Internet, facilitando la obtención de información y el trabajo de índole investigativa pero también con fines sociales,
recreativos y personales.
... via Definicion ABC
http://www.definicionabc.com/tecnologia/buscador.php