Grado Once ~ .

CLASE 1

REGLAMENTO SALA DE INFORMÁTICA
Conducta de entrada

Video: Reglas importantes en una sala de informatica https://www.youtube.com/watch?v=FazkRLADUtU

Teoría: Escribo en mi cuaderno las normas que debo cumplir en la sala de informática .

DOCUMENTO DE LAS REGLAS

Los estudiantes que hagan uso de cualquiera de las salas de informática del Colegio INEM “Carlos Arturo Torres”, deben tener en cuentas las siguientes pautas para su buen uso:

1. Ingresar al aula en completo orden y disciplina llevando únicamente el material autorizado por el docente.

2. Ingresar acompañado de personas autorizadas.

3. Diligenciar el formato de uso de equipos escribiendo únicamente la información allí solicitada

4. Revisar el equipo antes de utilizarlo, si existe algún inconveniente informar de inmediato al docente que lo esté acompañando

5. Ingresar y mantener las manos completamente aseadas

6. No rayar los elementos que hacen parte de las sala (monitores, teclados, mesas, pad mouse, planillas, etc.)

7. Mantener la sala en perfecto estado de orden y aseo

8. Realizar solo los trabajos y actividades autorizadas por los docentes.

9. No ingerir ningún tipo de alimentos dentro de la sala

10. Trabajar en silencio, en el equipo asignado y mantener un excelente comportamiento.

11. Utilizar los equipos de audio sólo cuando se le indique.

12. No manipular los cables, ni la caja de control de fluido eléctrico sin previa autorización.

13. Mantener la configuración original de los equipos de cómputo, no colocar fondos o protectores de pantalla que obstaculicen el normal desarrollo de las clases.

14. Mantener los equipos en su sitio, no intercambiar teclados, mouse, monitores o cualquier otro componente de hardware.

15. No instalar o desinstalar ningún tipo de software sin la autorización del docente.

16. Hacer uso correcto de la red.

17. Por ningún motivo tratar de hacer reparaciones en caso de daños voluntarios o involuntarios; informe inmediatamente al docente sucedido el hecho; asumir las consecuencias de la autoría de sus actividades dentro de la sala.

18. Las USB manipuladas dentro del aula, deben ser previamente vacunados o formateados, para evitar la propagación de virus informáticos.

19. Ingresar únicamente a los sitios de internet permitidos por el docente.

20. Apagar adecuadamente los computadores

21. Al finalizar la clase, las mesas, sillas, equipos y materiales deben quedar ordenados y limpios.

22. Organizar el trabajo a realizar, de otra forma el tiempo será insuficiente y no se cumplirá con los objetivos propuestos.

NOTA. El incumplimiento de las anteriores pautas, originan la aplicación del Manual de convivencia de la institución.

Práctica: Reflexiono sobre las reglas que se debe seguir en la sala de informática y tengo presente cuales debo corregir para desempeñar un buen trabajo en el aula.

CLASE 2

CORREO ELECTRÓNICO

Objetivo: Reconocer la importancia del correo electrónico, su funcionalidad y uso responsable.

Conducta de entrada
· Video crear correo: https://edu.gcfglobal.org/es/crear-un-correo-electronico/aprende- a-crear-un-correo-gmail/1/

· Video adjuntar un archivo: https://www.youtube.com/watch?v=9jcf6NB3LQs

· Teoría: En el cuaderno de informática copiar: Que es un Correo electrónico, Como crear un correo en Gmail, Como Adjuntar y enviar archivos

Práctica: Elaborar un documento en MS Word sobre el tema dispositivos de almacenamiento de la información, Guardarlo en la carpeta 11_? Como DISPOSITIVOS DE ALMACENAMIENTO Y enviarlo al correo asignado por el profesor.

CLASE 3

INTERNET

Objetivo: Reconocer el concepto y origen de Internet, sus ventajas, desventajas y su evolución

Conducta de entrada

· Video como nace internet: https://www.youtube.com/watch?v=g8AUcjiZ5qI

· Video historia del internet: https://www.youtube.com/watch?v=1CDWKWakX1o

Teoría:
¿QUÉ ES INTERNET?

Internet es una red de computadoras que se encuentran interconectadas a nivel mundial para compartir información. Se trata de una red de equipos de cálculo que se relacionan entre sí a través de la utilización de un lenguaje universal.

El concepto Internet tiene sus raíces en el idioma inglés y se encuentra conformado por el vocablo inter (que significa entre) y net (proveniente de network que quiere decir red electrónica). Es un término que siempre debe ser escrito en mayúscula ya que, hace referencia a “La Red” (que conecta a las computadoras mundialmente mediante el protocolo TCP/IP) y sin un artículo que lo acompañe (el/la) para hacerle referencia.

Existen diferentes tipos de conexión a internet, es decir, distintos medios por los cuales uno puede obtener conexión a la red de redes. El primero de ellos fue la conexión por dial-up, es decir, tomando la conectividad de una línea telefónica a través de un cable. Luego surgieron otros tipos más modernos como ser el ADSL, la fibra óptica, y la conectividad 3G y 4G (LTE) para dispositivos móviles.

Para acceder a los billones de sitios web disponibles en la gran red de redes, que conocemos como la Internet, se utilizan los navegadores web (software), siendo algunos de los más utilizados Google Chrome, Internet Explorer, Mozilla Firefox, y Safari, todos desarrollados por distintas compañías tecnológicas.

Fuente: https://concepto.de/internet/#ixzz6J1qOHh6B

¿CÓMO SURGIÓ INTERNET?

Se dice que el origen de Internet se debe gracias a un proyecto militar desarrollado por ARPANET (Advanced Research Proyects Agency Networks), una red de computadoras del ministerio de defensa de los Estados Unidos que buscaba como fin crear una red de computadoras que uniera a los centros de investigación de defensa en caso de ataques para mantener contacto remotamente y no se interrumpiese su funcionamiento a pesar de que alguno de sus nodos fuera destruido. De todas formas, su propósito inicial era encontrarle a la computadora otros usos además del de calculador.

En 1989, se hizo una primer propuesta de usar computadoras y enlaces para crear una red, posteriormente conocido como WWW (World Wide Web) que refiere a un conjunto de normas que permite la consulta de archivos de hipertexto (http).

Sir Timothy Berners-Lee, un ingeniero británico, realizó la inicial propuesta para WWW en ese año y posteriormente, mediante la implementación de http consiguió la primera comunicación exitosa.

Fuente: https://concepto.de/internet/#ixzz6J1vfNgzK

TIPOS DE CONEXIONES A INTERNET

Al ser Internet una red, se puede acceder a ella mediante varios canales.

Líneas telefónicas. Se puede utilizar una línea telefónica que se subdivide en líneas telefónicas convencionales (transmite señales de forma analógica pero actualmente fueron desplazadas por otras que ofrecen mayores beneficios) o digitales (mediante el empleo de un adaptador de red se traducen las tramas resultantes de la computadora a señales digitales).
Cable (fibra óptica). Asimismo, puede ser una conexión por cable (que implementa señales luminosas en vez de eléctricas que codifican una mayor cantidad de información y a su vez, dicho cable es de un material llamado fibra óptica que le permite transmitir datos entre nodos).
Satelital. También, existe la conexión vía satélite (normalmente estamos hablando de un sistema de conexión híbrido de satélite y teléfono para disminuir la congestión presente en las redes terrestres).
Redes inalámbricas. A su vez, podemos implementar redes inalámbricas (que sustituyen los cables por señales luminosas infrarrojas u ondas de radio para transmitir información). En suma, dentro de las redes inalámbricas, otro método utilizado es el de LMDS (que es una sigla que significa Local Multipoint Distribution System y consta de utilizar ondas de radio de alta frecuencia).
Líneas eléctricas. Si hablamos de líneas eléctricas usamos PLC (conjunción de tres palabras: Power Line Communications). Por último, podemos usar a la telefonía móvil (que refiere a comunicaciones disponibles para celulares para acceder a Internet).

Fuente: https://concepto.de/internet/#ixzz6J1s8hfE2

SERVICIOS Y USOS DE INTERNET

Internet nos abre las puertas a miles y miles de distintos servicios, entre ellos nos permitirán:
Buscar cualquier tipo de información que necesite (por ejemplo en Google).
Comprar productos de diversa índole (por ejemplo en Amazon o Mercado Libre).
· Comunicarnos con familiares o amigos que estén en otros países o ciudades mediante una video llamada (por ejemplo de Skype o Whatsapp).
· Jugar juegos online (como el League of Legends) con personas de distintas nacionalidades y edades, en tiempo real.

Claro está, que una palabra que resuma todas estas cualidades que Internet posee puede ser conectar o bien relacionar. Internet tiene la capacidad de conectar personas en distintas partes del mundo y con distintos intereses entre sí.

Fuente: https://concepto.de/internet/#ixzz6J1snqYBo

Práctica:

Basados en la lectura anterior Desarrollar en el cuaderno de informática:

1. Consultar que es un ensayo y cuáles son sus parámetros. (opinión producto de una gran reflexión acerca de un tema)

2. Realizar un ensayo en MS Word siguiendo las especificaciones correspondientes y que tenga como temas: La definición de Internet, ventajas y desventajas y su historia en Colombia.

3. Guarde el archivo con el nombre ENSAYO INTERNET en la carpeta 11_? Y envíelo al correo asignado por el profesor.

CLASE 4

PROTOCOLOS EN INTERNET

Objetivo: Conocer las normas que regulan la comunicación entre dos o más sistemas que se transmiten información a través de diversos medios físicos.

Conducta de entrada:
Video protocolos básicos de internet: https://www.youtube.com/watch?v=wtOKwmwgofc

· Teoría: Basado en el video PROTOCOLOS INFORMÁTICOS defina en su cuaderno: Que es un protocolo informático, de ejemplos de protocolos informáticos, que son protocolos de Red y que son protocolos de internet.

· Práctica: Copiar en Paint la sopa de letras, buscar las palabras relacionadas con protocolos de informática, asignando a cada palabra un color.

Guarda el archivo la carpeta 11_? con el nombre PROTOCOLOS DE INTERNET en Y enviarlo al correo asignado por el profesor.

CLASE 5

DIRECCIONES IP

Objetivo: Conocer los conceptos de dirección IP, dominios de red y protocolos de red e identificar sus tipos dominios y protocolos para aplicarlos en ejercicios prácticos propuestos.

Conducta de entrada:
Video direcciones IP y sus clases: https://www.youtube.com/watch?v=-rc61e-HspQ

Teoría: Copiar en su cuaderno de informática:

Ø INTERNET PROTOCOL: Protocolo de internet es una serie de números que identifica a un dispositivo en una red( ya sea local) que vendría siendo la

computadora, la impresora, (o una red de redes) que es internet, que es el modem o el ruteador. La dirección IP la podemos asociar con los números de teléfono sea celular o fijo; en este caso se asigna un número a cada aparato de forma que todo esté comunicado entre sí.

Ø COMO SE CONFORMA LA IP: Se conforma por 4 números de hasta 3 dígitos cada uno, separados por puntos y van de Cero (0) a 255.

Las IP se catalogan como:

· IP Privada: Es la asignada a cada aparato o dispositivo dentro de su red local como: Impresora, ordenador o computadora, televisor, cámara, celular. (solicitan acceso a internet por router).

· IP Pública: son las que les asigna el modem o el ruteador (Router Conectado a internet), a nuestras conexiones.

· IP Estática: Son las que tienen la mayoría de las páginas (negocios). Nunca cambian, se pueden localizar. Los proveedores de internet cobran por estas IP que nunca cambian.

· IP Dinámica: Es la que tenemos todos en nuestra casa, cuando se resetea o se reinicia su modem la IP puede cambiar pues no es fija.

Práctica:

: En su equipo realizar las siguientes prácticas.

1. Como saber la IP de su equipo?

· Oprima la tecla Windows + la letra R

· En abrir escribimos cmd y Aceptar

1. Como conocer su IP Pública?

• Abrir una página de internet
• Escribir: myipadres.com
• Se muestra su dirección IP pública.

2. Como conocer una IP estática?

• Escriba en su navegador www.yahoo.com , lo lleva a la página de yahoo
• Si escribimos en la barra de direcciones la IP 172.217.22.131, Que ocurre?

3. Consultar la IP estática de : (http://www.mon-ip.com/direccion-ip-sitio.php)

www.terra.com

CLASE 6

METODOS DE CONVERSION 1

Conversión de una IP decimal a binario

Objetivo: Identificar los métodos de conversión de una IP decimal a Binario.
Conducta de entrada:

Video direcciones IP y sus clases: https://www.youtube.com/watch?v=-rc61e-HspQ

Teoría: Las direcciones IP están en formato decimal, tienen 4 cantidades separadas por puntos. Debido a que las computadoras e comunican en formato binario se debe hacer la transformación a formato digital.

Una IP típica es 130.200.15.2

Métodos de conversión de una IP decimal a Binario: Divisiones sucesivas de 2 : se toma el número decimal, se divide por 2 y luego el cociente de esta división se divide por 2, hasta que el último cociente sea menor que el dividendo

2. Factorización en números primos: Se toma el número decimal y se ubica en la parte izquierda de la línea, este método también consiste en divisiones sucesivas, dependiendo si el número par o impar, colocamos un (0) cero o un (1) uno .y ordenamos de abajo hacia arriba.

Conversión de una IP decimal a binario:

IP en forma decimal: 130.200.15.2

Paso 1. Colocamos el primer número y una línea divisoria

Entonces el binario de 130.200.15.2 es 10000010.11001000.00001111.00000010

Se dice que cada número de una dirección IP es un octeto, esto es, por que en forma binaria cada número tiene 8 dígitos o bits, Entonces las direcciones IP son de 32 bits o 4 bytes. Como en binario el mayor número que se puede ingresar es el 1; en un octeto, son 8 unos.

Práctica: Conversión de una IP DECIMAL A BINARIO:

1. Convierte las siguientes direcciones IP a binario.

1. Escribe el valor binario de los siguientes números.

64 _______________________________ 45   ________________________________

128  ________________________________ 13   ________________________________

255  ________________________________ 9 ________________________________

10   ________________________________ 7    ________________________________

20   ________________________________ 1 ________________________________

100 ________________________________ 14 ________________________________

120 ________________________________ 17 ________________________________

240 ________________________________ 19 ________________________________

CLASE 7

METODOS DE CONVERSION 2

Conversión de una IP binario a decimal:

Objetivo: Identificar los métodos de conversión de una IP Binario a decimal.

Conducta de entrada:

Video direcciones IP y sus clases: https://www.youtube.com/watch?v=-rc61e-HspQ

Teoría: Copiar en su cuaderno de Informática:

El Sistema binario está compuesto por 1 y 0, Cada posición de los bits tiene un valor diferente.

Los valores de cada bit cambian de derecha a izquierda Toda cantidad elevada a la potencia “0” es igual a 1

La mayor dirección IP, numéricamente hablando es: 255.255.255.255 entones cada octeto va a tener un valor entre (Cero) 0 y 255.

Si los transformamos de binario a decimal es:

= 255

Ejemplo 1: 10110 en Binario ¿Cuánto es en Decimal?

Entonces me doy cuenta de la posición en la tabla de ese valor y ubico el numerO binario de derecha a izquierda.

10110 binario es igual a 16 + 4 + 2 = 22 en decimal, porque para convertir de binario a decimal s debe tener en cuenta el valor de cada posición y sumarlo solamente cuando haya un 1.

Ejemplo 2. Para convertir 10110010 a decimal:

Entonces: 128+32+16+2= 178

Práctica: Desarrolla los ejercicios y envía los resultados al correo asignado por el profesor.

1. Escribe el equivalente de los siguientes binarios en número decimal

11101110 _________________ 00001101 _________________

00100010 _________________ 11111010 _________________

01111011 _________________ 01101011 _________________

00110010 _________________ 11100000 _________________

11111111 _________________ 01110010 _________________

11001000 _________________ 11000000 _________________

00001010 _________________ 10101100 _________________

10001010 _________________ 01100100 _________________

00000001 _________________ 01110111 _________________

01100010 _________________ 00000010 _________________

10110011 _________________ 11111110 _________________

2. Convierte las siguientes IP binarias a decimales:

CLASE 8

PARTES DE LAS DIRECCIONES IP

Objetivo: Reconocer los componentes de una dirección IP, identificando las clases de direcciones IP que soportan las redes.

Conducta de entrada:

Video direcciones IP y sus clases: https://www.youtube.com/watch?v=-rc61e-HspQ

Teoría: Copia en su cuaderno de Informática:

PARTES DE LAS DIRECCIONES IP

1. Primera parte: Dirección de red

2. Segunda parte Dirección del host

Esta división depende de la máscara de subred que a su vez depende de la clase de dirección IP que se esté implementando.

La máscara de Subred es otra serie de 32 bits que se usa para determinar que porción representa la dirección de red y que porción representa la dirección del Host.

Entonces:

CLASES DE DIRECCIONES IP

Para poder soportar las redes de diferentes tamaños, las direcciones IP estaan repartidas en 5 clases: A,B,C,D y E

Sólo utilizaremos A,B,C; la D se utiliza para multicast y multidestino Y la E para experimentación.

Para determinar la clase vemos los primeros bits.

· Clase A: Para redes muy grandes, utiliza direcciones IP con números del (cero) 0 al 127 en su primer octeto.

Ejemplo: IP

Sólo el primer octeto es el identificador de RED. Mascara d Subred 255.0.0.0

· Clase B: Para redes de tamaño mediano. Esta clase utiliza IP con números del 128 al 191 en su primer octeto. El primer bit es el 1 y el segundo es cero (0)

Ejemplo:

IP 172. 16. 0.0

Mascara de Subred: 255. 255. 0. 0

· Clase C: Para redes e tamaño pequeño.

Esta clase utiliza direcciones IP con números entre 192 y 223 en su primer octeto.

Los dos primeros bits son 1 y el tercero es cero (0).

Incluyen el 1, segundo y tercer octeto como parte del identificador neto. El último octeto es para la dirección del Host.

Ejemplo: IP 192. 168. 0. 0

Mascara de Subred: 255. 255. 255. 0

· Clase D: utilizadas para multicast/Multidestino Los tres (3) primeros bits son 1

Los decimales estarán comprendidos entre 224. 0. 0. 0 y 239. 255. 255.255

· Clase E: Utilizados para propósitos experimentales Los cuatro (4) primeros bits son 1

Las direcciones estarán comprendidas entre 240.0.0.0 y 247.255.255.255

Práctica:

Convertir y determinar a qué clase corresponde y porqué:

Indique dentro paréntesis la letra de la clase a la que pertenece cada una de la siguientes direcciones IP

- 192.164.6.1 ( )

- 240.124.30.3 ( )

- 140.30.3.5 ( )

- 122.40.39.4 ( )

- 128.40.19.4 ( )

- 225.240.7.6 ( )

CLASE 1

Que es HTML

Objetivo: Conocer un poco sobre HTML.

Video: https://www.youtube.com/watch?v=cqMfPS8jPys

Teoría Leer y analizar lo correspondiente a la temática

Practica: Desarrollar en mi cuaderno que es un HTML y como se complementan con css. (HTML.doc)

(HTML.doc)

HTML es el principal lenguaje informático con el que se escriben las páginas web. Las páginas web son vistas por el usuario mediante unos programas llamados navegadores o "browsers". Por lo tanto el HTML es el lenguaje que usan los navegadores para mostrar las páginas webs al usuario.

Este lenguaje nos permite insertar textos, sonidos e imágenes y combinarlos a nuestro gusto. Además, el HTML nos permite introducir referencias a otras páginas Web por medio de los enlaces hipertexto.

El HTML se creó en un principio con una finalidad distinta que la de crear páginas Web, pero al crearse Internet, se tomó como lenguaje de referencia para los navegadores. Con el tiempo se han ido creando distintas versiones, que han tratado de estandarizar este lenguaje, de forma que las páginas puedan verse igual en los diferentes navegadores. Numerosos estándares se han presentado ya. Aquí estudiaremos la versión HTML 4.01. Admitida por todos los navegadores y dispositivos que visionan páginas web. La última versión es el HTML 5, la cual es una ampliación del HTML 4.0 y que intenta adaptar el lenguaje HTML al concepto de una web más dinámica. Los navegadores tienen que adaptarse a esta nueva versión del HTML, por lo que las versiones antiguas de los navegadores no admiten muchas de las nuevas características del HTML 5.

Como ha hemos dicho, el HTML no se creó en principio para visionar páginas web, por lo que pronto se quedó corto para organizar, optimizar y automatizar el funcionamiento de las webs. Como complemento a HTML surgieron otros lenguajes que permitieran un desarrollo normal y más sencillo de las páginas web. El primero de ellos es CSS, con el que indicaremos colores, tamaños, estilos de letra, posición de elementos, etc. Más tarde se incorporan JavaScript, para páginas dinámicas, PHP y otros lenguajes que permiten recopilar información e interactuar con el usuario, para hacer páginas más interesantes.

HTML y CSS

Tal como hemos visto anteriormente, HTML y CSS se complementan, ya que usando sólo HTML conseguiremos páginas que se parecen más a una página de libro que a una web. Con CSS indicamos el estilo de la web, no sólo colores, tamaños y otros elementos de estilo, sino también la posición y distribución de los elementos en la página.

En este manual tenemos la opción de aprender CSS a la vez que HTML, para ello, al final de cada página indicaremos dónde debemos continuar. Tendremos pues la opción de seguir sólo el manual de HTML, o también la de seguir los manuales de HTML y CSS al mismo tiempo.

NAVEGADORES

Un navegador es el programa donde visualizamos las páginas web. Por ejemplo Internet Explorer, Google Chrome u otro similar. Como es obvio, necesitamos al menos un navegador para ver los resultados de nuestro trabajo, aunque en realidad es conveniente tener instalados varios navegadores. No todos los navegadores funcionan de la misma manera ni muestran las páginas igual. Puede haber pequeñas (o grandes) diferencias entre uno y otro. Debemos contrastar los resultados en varios de ellos, necesitamos evidentemente tener instalados los navegadores más usados por los internautas y que abarquen prácticamente la totalidad de cuota de mercado, para asegurarnos que nuestra página la verán igual (o de forma muy parecida) la gran mayoría de los internautas.

CLASE 2

Realizar una página web

Objetivo: Reconocer algunos pasos para la elaboración de una página web.

Video:

Teoría Leer lo correspondiente a la temática. (El editor de texto.doc)

Practica: leer y analizar el paso a paso para así poder realizar el punto 1.

1 . Respecto al punto anterior lo que van a realizar es colocar su nombre completo su grado y el color la materia que mas le gusta.

El Editor De Texto.doc

Las páginas web son un tipo de archivos de texto que pueden ser leídos por los navegadores. Por lo tanto crear una web consiste en crear este tipo de archivos. Vamos a hacer aquí un primer ejercicio que consiste en escribir un texto en un navegador web. Para ello necesitaremos un programa o aplicación que sea un editor de texto plano.

Un editor de texto plano es una aplicación que nos permite crear archivos de texto, y sólo texto, sin más añadidos. No podemos usar los procesadores de texto como el "Word" de Microsoft Office o el "Open Office", ya que estos no son "editores de texto" sino "procesadores de texto".

Lo que necesitamos es una aplicación que pueda guardar el texto sin más. En Windows tenemos el "Bloc de notas" o el "WordPad", en el que podemos crear archivos de texto plano.

Lo primero que debemos crear una carpeta en la cual guardaremos todos los archivos que vayamos haciendo a lo largo de este paso a paso. Esta carpeta la hemos puesto dentro de: Bibliotecas/Mis documentos y la hemos llamado "HTML". De esta manera ordenamos los archivos que van a componer nuestra web, y los tenemos localizados. Tú puedes hacer lo mismo o guardarlos en otra carpeta que puedas localizar fácilmente. Es fundamental que todos los archivos que conforman un mismo sitio web estén localizados dentro de una sola carpeta. la cual la Llamaremos a esta carpeta HTML.

El segundo paso es que vamos a escribir un texto que pueda verse en un navegador, abrimos el Bloc de notas de Windows .

Escribimos el siguiente texto: Queridos estudiantes bienvenidos a realizar tu primera página web. Att: Docentes Diana, Carlos, Osmeydy. Lo que van a colocar ustedes es su nombre completo grado y que materia le gusta mas y porque .

Después guardamos el archivo que hemos creado, pero en formato HTML. Para ello pulsamos en Archivo / Guardar como.... Se nos abre un cuadro de diálogo en donde podemos guardar el archivo. Al escribir el nombre

del archivo escribimos en el cuadro donde pone el nombre del archivo que debe acabar siempre por ".html" . Nosotros guardaremos el archivo con el nombre: miweb.htm

El archivo que hemos creado lo hemos llamado miweb.html. Al dar nombre a los archivos tenemos siempre dos partes, separadas por un punto. La primera parte (miweb), es el nombre del archivo. Podemos poner cualquier nombre siempre que sigamos unas normas básicas. La segunda parte (.html) es la extensión, e indica el tipo de archivo que estamos creando. En las páginas web, el archivo principal que vemos en el navegador tiene la extensión .html. Por lo tanto nosotros siempre que hagamos una nueva página debemos indicar la extensión. De no ponerla se crearía un archivo de texto plano (extensión "txt"), y no un archivo web (con extensión "html").

El siguiente paso es comprobar que el archivo que hemos creado se ve efectivamente en el navegador. Para ello no tenemos más que abrir el archivo desde la carpeta en que está guardado. Pulsamos para abrir el archivo y vemos que éste no se abre con el bloc de notas, sino con el navegador

El resultado será este:

La Carpeta HTML

Todos los archivos necesarios para crear un sitio web debemos guardarlos dentro de una misma carpeta. Ésta será la carpeta HTML. La carpeta que hemos creado anteriormente será la carpeta HTML de nuestra web. Aquí guardaremos todos los archivos, tanto de texto, como de imágenes, videos, sonidos, etc. que queramos poner en nuestra web. Dentro de esta carpeta podemos crear también subcarpetas para organizar mejor todos estos archivos. Esto es imprescindible para poder ver correctamente el contenido de la página. Todo archivo que esté dentro de la carpeta HTML formará parte de la web. Ya veremos luego cómo enlazar unos archivos con otros para poder ver todo el contenido.

Reglas Para Los Nombres De Archivos

Antes de seguir vamos a dar algunas normas básicas, para poner los nombres a los archivos. Aunque en realidad cualquier nombre o número es válido para dar nombre a un archivo en Windows (salvo algunos signos especiales que no pueden usarse), se recomienda seguir unas ciertas normas para poner nombre a los archivos. Esto nos evitará dudas a la hora de escribirlos correctamente, así como para poder enlazar unas páginas con otras. Nosotros así lo haremos, y es importante que tú también lo hagas así, para que desde el principio se sigan buenos hábitos.

El porqué es muy sencillo: un acento, un signo mal puesto, un espacio de más, y el ordenador interpreta otro nombre distinto al que queremos darle, con lo cual el archivo no lo encuentra y el enlace o el efecto deseado no se produce.

En principio, en este manual no debemos tener problemas con esto, ya que diremos siempre los archivos que debemos crear y con qué nombres. Sin embargo es conveniente saberlo por si queremos hacer alguna otra web.

Normas Para Escribir Nombres De Archivos Y Carpetas

* Texto en minúsculas: Todo el texto del nombre de archivo se escribirá en minúsculas.

* No poner acentos: Escribiremos todas las palabras sin acento, aunque los tengan.

* No empezar por un número: El primer carácter o signo que escribamos no debe ser un número, pues algunos programas podrían interpretar mal el nombre del archivo

* Separar las palabras con guión bajo _: Debemos evitar los espacios en blanco ya que éstos pueden causar problemas en los navegadores. Lo normal es sustituirlos por el guión bajo. El guión bajo (_) se escribe pulsando la tecla Mayúsculas y la tecla Guión a la vez).

Con estas sencillas normas tendremos estandarizado la forma de escribir los archivos y carpetas que vayamos creando, sin asaltarnos la duda de si tal o cual palabra la he puesto en mayúscula o minúscula, si habré o no puesto el acento, etc.

CLASE 3

Mi primera web

Objetivo: Realizar la elaboración de mi página web.

Video:

Teoría Leer lo correspondiente a la temática. (Etiquetas para texto.doc)

Practica: leer y analizar el paso a paso para así poder realizar nuestra primera página web.

Etiquetas para texto.doc

En el paso anterior hemos insertado un texto en nuestra página mediante una etiqueta. Esta era la etiqueta h1 que insertaba un título de nivel 1.

Vamos a ver aquí las etiquetas que podemos usar para insertar texto. Estas son: <h1> <h2> <h3> <h4> <h5> <h6>.Hay por tanto seis etiquetas diferentes para insertar títulos, cada una de ellas debe ir seguida del texto a insertar y su correspondiente etiqueta de cierre, que cómo explicamos en el paso anterior consiste en la misma etiqueta con la barra inclinada al principio: ... Todas ellas nos dan el texto en negrita, y el tamaño de letra va del más mayor en <h1> a más pequeño en <h6>; aunque, como veremos más adelante, esto puede cambiarse.

Tiqueta De Párrafo

Para insertar párrafos de texto utilizaremos la etiqueta <p>... </p>. Esta es una de las etiquetas más utilizadas en HTML, y nos separa un párrafo de otro. Aunque escribamos el texto en el block de notas u otro editor de texto separado en distintas líneas, si no lo separamos con estas etiquetas, el navegador interpretará que es parte del mismo párrafo, y lo escribirá seguido. Por tanto, cada párrafo debe abrirse con la etiqueta <p> seguido del texto de ese párrafo, y acabar con la etiqueta de cierre </p>. Más adelante aprenderemos a cambiar el aspecto de los textos. (tipo de letra, tamaño, color de letra, etc.).

Ahora que sabemos cómo poner diferentes tipos de textos en la página vamos a ampliar el texto de nuestra página utilizando diferentes etiquetas para texto. Vamos a realizar un nuevo archivo/Nuevo/ y copiamos el código html y lo guardamos como index.html.

<html>

<head>

<title>Edades de la prehistoria</title>

</head>

<body>

<div id="cabecera">

<h1>EDADES DE LA PREHISTORIA</h1>

<p>Podemos definir la prehistoria como el periodo de tiempo previo a la historia trascurrido desde el inicio de la evolucion humana hasta la aparicion de la escritura se divide en dos grandes momentos. </p>

<p>Se divide en dos grandes momentos: .</p>

<h3>Edad de piedra</h3>

<p>Abarca desde que los seres humanos empezaron a elaborar herramientas de piedra homínidos(primates antepasados del hombre) cazaban, construían y cortaban. la utilización del instrumentos les permitio dominar sus entornos..</p>

<p>Pulsa en los siguientes enlaces para ir a las siguientes páginas.</p>

</body>

</html>

Si al abrir la carpeta no encuentras el archivo, ve al cuadro de abajo a la derecha donde pone Documentos de texto (*.txt) y pulsa en la flecha de la derecha. Se te abre una lista de opciones, elige ahí Todos los archivos

Comprobamos el resultado. Para ello vamos a la carpeta HTML y abrimos el archivo, el resultado se verá así en el navegador:

CLASE 4

Imágenes.

Objetivo: Realizar la elaboración de mi página web.

Video:

Teoría Leer lo correspondiente a la temática. (Carpeta de Imágenes.doc)

Practica: leer y analizar el siguiente paso para insertar imágenes

Carpeta de Imágenes.doc

Nuestro siguiente paso será insertar una imagen en la página. Para ello debemos guardar la imagen en la carpeta HTML de nuestra web. Como seguramente pondremos más de una imagen en nuestra web, dentro de la carpeta HTML crearemos una subcarpeta en la que guardaremos todas las imágenes así como otro tipo de archivos que no formen parte del código que escribimos, pero sí de la página.

Para ello abrimos nuestra carpeta HTML y creamos allí una nueva carpeta a la que llamaremos "Imágenes". Nosotros tenemos la carpeta HTML en Mis Documentos / HTML. Para añadir una nueva carpeta pulsamos en la barra superior, donde pone "Nueva carpeta", y se crea una nueva carpeta (en windows7). Con un click sobre el nombre de la carpeta podemos cambiarle el nombre. Le cambiamos el nombre y la llamamos imágenes

Copiar Una Imagen

Lo siguiente que haremos será guardar una imagen en la carpeta imagenes. Asegúrate de que el nombre del archivo de imagen sea logo.gif Si no es así cambia el nombre del archivo de imagen.

Etiquetas De Imagen

Para insertar una imagen en una página web utilizaremos una etiqueta de imagen. Esta la escribiremos, en su forma básica, de la siguiente manera:

<img src="..." alt="..."/>

Vemos una serie de novedades en esta etiqueta. Vemos que además del nombre de la etiqueta (img), tiene otra serie de elementos dentro de la misma etiqueta (src="...", alt="..."). Estos elementos son los atributos.

Todas las etiquetas de apertura pueden tener atributos, cada atributo consta de dos partes separadas por el signo igual. La primera parte del atributo es el nombre, aquí se indica algo que se añade a la etiqueta. La segunda parte, siempre escrita entre comillas, es el valor, e indica un valor que tomará lo indicado en la primera parte.

Por otra parte las etiquetas de imagen no tienen etiqueta de cierre, ya que toda la información que necesitamos va en los atributos. La etiqueta se abre y cierra en sí misma, esto se indica con una barra inclinada al final de la etiqueta (<img ... />).

Veamos ahora los atributos que pueden tener las etiquetas de imagen:

El Atributo src

Con este atributo indicamos qué imagen queremos insertar en la página, para ello localizamos la imagen e indicamos dónde está. Es decir hay que poner la "ruta" que lleva al archivo de imagen. Si el archivo de imagen está en la misma carpeta que la página simplemente tenemos que indicar el nombre del archivo (indicando también la extensión), si no es así indicaremos también la carpeta en la que está. Por ejemplo nosotros para insertar la imagen pondremos lo siguiente:

<img src="imagenes/EdadMedia.jpg" />

Aquí indicamos que la imagen está dentro de la carpeta objetos. Ponemos después una barra inclinada que indica que entramos en la carpeta objetos. Después escribimos el nombre del archivo de imagen que queremos insertar, en este caso EdadMedia.jpg. Fíjate que debemos poner también la extensión que tiene el archivo de imagen. (.jpg).

Si la imagen estuviera en una carpeta de nivel superior a la de la página indicaremos que subimos un nivel en la jerarquía de carpetas escribiéndolo así: ../ (Dos puntos y una barra inclinada). De esta manera podemos localizar la ruta de cualquier imagen subiendo o bajando carpetas, e indicando, una vez localizada la carpeta, el nombre de archivo de imagen.

El Atributo alt

Este atributo, aunque no es imprescindible, indica un texto que se verá en el caso de que la imagen no pueda cargarse. Como valor pondremos el texto.

Por ejemplo:

<img src="imagenes/EdadMedia.jpg" alt="Logo de la página" />

Otros Atributos

Los atributos width="" y height="" indican respectivamente la anchura y la altura de la imagen en la página. Como valor podemos poner un número, que indicará el número de píxeles que ocupa la imagen, también podemos poner un porcentaje (por ejemplo width="20%").

Si ponemos los dos atributos (width y height) debemos tener cuidado de no distorsionar la imagen. Si ponemos sólo uno, la otra medida se adaptará a la que hemos puesto, guardando las proporciones de la imagen(<center></center) esto es sirve para centrar la imagen.

<img src="imagenes/EdadMedia.jpg" alt="Logo de la página" width="20%" />

Insertar La Imagen En La Página

Con lo visto anteriormente no nos será difícil insertar la imagen en la página. Suponemos que ya hemos copiado la imagen en la carpeta imágenes; después La pondremos al principio. Para ello abrimos el archivo index.html con el block de notas de Windows, y lo modificamos, insertando una etiqueta de imagen.A continuación vamos a ver el código:

<p> <center><img src="imagenes/EdadMedia.jpg" alt="Logo YouTube" border="0" height="90" /></center>

<center><img src="imagenes/edad.jpg" width="350px" alt="Logo Pinterest" border="0" height="200" /></center>

<center><img src="imagenes/videos.jpg" alt="Logo YouTube" border="0" height="200" /></center>

<center><img src="imagenes/pre.jpg" alt="Logo " border="0" height="200" /><center>

En color amarillo hemos destacado el nuevo texto que hemos puesto en el archivo HTML de la página. Con esto hemos insertado la imagen que tenemos dentro de la carpeta imágenes. La página quedará ahora así:

Si has seguido los pasos anteriores tu página quedará ahora como la vista de arriba. Si no puedes ver la imagen o no te sale igual, repasa lo visto anteriormente, y fíjate en que la ruta de la imagen (el valor del atributo src) esté bien puesta, e indique el lugar en el que hemos guardado la imagen.

De momento estamos insertando cosas en la página. No te preocupes si el aspecto de la página queda algo desordenado y parece más un documento de texto que una página web. En pasos posteriores le daremos estilo a la página.

Enlaces Externos

Qué Son Los Enlaces: Un enlace es un texto que nos lleva a otra a otro sitio de la web. El usuario no tiene más que hacer click encima del texto para que le aparezca otra página en su navegador. Los enlaces pueden ser de varios tipos, dependiendo del lugar al que nos lleven. Si nos llevan a una página de otro sitio web, es un enlace externo. Si nos lleva a otra página del mismo sitio que estamos viendo, es un enlace local. Por último si nos lleva a un lugar dentro de la misma página que estamos viendo es un enlace interno.

Los enlaces se distinguen del resto del texto porque suelen ser de diferente color. De forma predeterminada en HTML aparecen en color azul y subrayado. Además cuando pasamos el ratón por encima el cursor cambia de forma, y aparece como una mano con un dedo señalando el texto. Esto se puede cambiar, tal como veremos más adelante. Sin embargo siempre van destacados sobre el resto del texto para que el usuario sepa fácilmente que está ante un enlace.

Etiqueta De Enlace: Para insertar un enlace utilizaremos una etiqueta de enlace, la cual, en su forma básica es así:

<a href="ruta_del_enlace">Texto del enlace</a>

La etiqueta <a>... </a> Sirve para insertar en la página cualquier tipo de enlace. Si queremos que el enlace sea efectivo y lleve a algún lugar debemos poner siempre el atributo href="ruta" en donde su valor ("ruta") debe ser una dirección que nos lleve al lugar que queremos abrir con el enlace. Donde hemos puesto "Texto del enlace" pondremos el texto que queremos que se vea en la página, y sobre el cual el usuario debe hacer click para ir a la página enlazada.

La Ruta Del Enlace

Es por lo tanto fundamental para que el enlace funcione escribir bien la ruta en el valor del atributo href. Para enlaces externos (a otra página de otro sitio web) La ruta es la misma que la dirección de la página web.

La dirección de cualquier página la encontramos siempre en la barra de direcciones del navegador al abrir la página. Esta barra está en la parte superior del navegador e indica el nombre de la página. Por lo tanto para obtener la ruta hacia cualquier página basta con copiar y pegar la dirección que encontramos en la barra de direcciones.

Por ejemplo si queremos poner un enlace de una infografía de pinterest en nuestra página, abrimos primero la página de pinterest, y copiamos la dirección (botón derecho, copiar), después en nuestra página insertamos un enlace con la ruta ahí indicada. El texto que pondremos en el HTML será el siguiente:

<p><a href="https://i.pinimg.com/originals/a8/da/27/a8da273ae26b610a6d8286000625b08f.jpg" target="_blank">Infografía de Historia</a></p>

Todas las direcciones web a páginas externas empiezan por http:// (o https://). Este comienzo debe ponerse también al escribir la ruta, ya que es lo que indica que estamos enlazando a una página externa.

Insertar Enlaces En Nuestra Página

Ahora que ya sabemos cómo poner enlaces pondremos varios enlaces en nuestra página a otros sitios web. Nosotros queremos, además, que al abrir la página del enlace, ésta se abra en una nueva pestaña del navegador, de manera que se conserve la pestaña en la que está nuestra página. Para ello a la etiqueta de enlace le añadiremos también el atributo target="_blank", por ejemplo:

<p><a href="https://i.pinimg.com/originals/a8/da/27/a8da273ae26b610a6d8286000625b08f.jpg" target="_blank">Infografía de Historia</a></p>

Enlaces En Imágenes

Usar Una Imagen Como Enlace : Podemos también usar una imagen como enlace, para ello creamos un enlace y sustituimos el texto del enlace por una etiqueta de imagen.

Por ejemplo si tenemos un enlace tal que:

<p><a href="https://i.pinimg.com/originals/a8/da/27/a8da273ae26b610a6d8286000625b08f.jpg" target="_blank">Infografía de Historia</a></p>

Sustituimos el texto del enlace por una etiqueta de imagen. Siguiendo con este ejemplo, guardamos la imagen de la infografía en la carpeta imágenes. Después sustituimos el texto del enlace por una etiqueta que nos haga ver la imagen

Ahora incluimos el código. Justo antes de cada enlace de texto pondremos su enlace de imagen. Para ello abrimos el archivo index.html con el bloc de notas de Windows e incluimos las líneas que marcamos en amarillo:

<p><a href="https://i.pinimg.com/originals/a8/da/27/a8da273ae26b610a6d8286000625b08f.jpg" target="_blank">

</a></p>

<p><a href="https://i.pinimg.com/originals/a8/da/27/a8da273ae26b610a6d8286000625b08f.jpg" target="_blank">Infografía de Historia</a></p>

<p><a href="https://www.youtube.com/watch?v=G2tUkEvo_lM" target="_blank">

</a></p>

<p><a href="https://www.youtube.com/watch?v=G2tUkEvo_lM" target="_blank">Video en YouTube</a></p>

<p><a href="http://apegoyliteratura.es" target="_blank">

</a></P>

<p><a href="http://apegoyliteratura.es" target="_blank">Consultar Apegoyliteratura</a></p>

La imagen sustituye al texto del enlace, por lo que al pulsar sobre la imagen se nos abrirá la página indicada.

CLASE 5

Maquetación.

Objetivo: Realizar la elaboración de mi página web.

Video:

Teoría Leer lo correspondiente a la temática. (Maquetación.doc)

Practica: leer y analizar el siguiente paso para terminar nuestra pagina web

MAQUETACIÓN

Qué Es La Maquetación

La maquetación es la distribución de los elementos en la página. En la página que estamos haciendo, de momento vemos que aparecen todos los elementos unos debajo de otros, ocupando cada uno todo el ancho de la página. En cualquier página que visitemos esto no está así, puede haber elementos que ocupen todo el ancho y otros que se agrupan en columnas

Etiqueta div

Para crear las distintas secciones de la página, HTML dispone de la etiqueta <div> ..</div> Esta etiqueta nos sirve para dividir la página en distintas secciones, a las que posteriormente les aplicaremos estilos distintos con CSS, pudiendo así colocar cada sección en un sitio distinto y dando a cada una de ellas un aspecto diferente.

Las etiquetas div pueden anidarse unas dentro de otras, de manera que se crean distintas subsecciones dentro de una misma sección.

Atributos De Identidad Y De Clase

Tanto la etiqueta <div> ...</div>, como otras etiquetas de texto o de imagen, pueden llevar los atributos id=" ... " y class=" ... ".

Mediante el atributo id=" " identificamos un elemento como único en la página. Podemos poner cualquier valor a este atributo, sin embargo este valor no puede estar repetido en otro atributo id. Por ejemplo:

<div id="cabecera"> ... </div>

La etiqueta div crea una división o sección en la página. Mediante el atributo id identificamos esta sección como la "cabecera" de la página. Sólo puede haber una cabecera, si quisiéramos poner una segunda cabecera, pondríamos otra sección con otro atributo id con otro valor, por ejemplo:

<div id="segunda_cabecera"> ... </div>

El atributo class=" " permite formar una clase de elementos a los que posteriormente se les puede aplicar a todos ellos el mismo estilo. Al igual que con id podemos poner cualquier valor, sin embargo todos los elementos que tengan el mismo valor pertenecerán a la misma clase. Por ejemplo, podemos hacer que varias imágenes pertenezcan a la misma clase:

<img class="logos" src="imagenes/edad.jpg" alt="Infografia ">

<img class="logos" src="imagenes/videos.jpg" alt="YouTube">

<img class="logos" src="imagenes/pre.jpg" alt="Apegoyliteratura">

Las tres imágenes anteriores pertenecen a la misma clase, por lo que posteriormente se les podrá aplicar a todas ellas el mismo estilo.

Sesiones En La Página Principal

Visto esto vamos a cambiar la página principal de nuestra web, de manera que crearemos las distintas secciones y les daremos atributos de identidad o de clase para posteriormente poder aplicar distintos estilos.

Para que la página quede tal como hemos previsto en el boceto superior, la modificaremos. Abre para ello el archivo index.html con el editor de textos y cámbialo de manera que quede como está aquí, para ello no tienes más que añadir los textos que están en amarillo en el mismo sitio que indicamos aquí:

</div>

</div>

</div>

</div>

</div>

En color amarillo viene destacado lo que hemos añadido a la página. El resto (en color negro) es lo que ya teníamos.

Lo que hemos hecho es dividir la página en distintas secciones mediante la etiqueta div. A cada sección le hemos puesto un atributo de identidad. Dentro de la última sección hemos hecho subdivisiones con cada uno de los enlaces. A cada uno de ellos le hemos puesto una etiqueta div con un atributo de clase.

Cabe destacar la etiqueta <div class="vacio"></div> que hemos puesto al final de la sección de "enlaces". Esta es una etiqueta vacía que, como veremos más adelante nos permitirá hacer algunos ajustes para que la página se vea bien.

Después de cambiar la página, si la abrimos con el navegador veremos que ésta no ha cambiado en nada.

Contenido Y Estilo

Al crear una página web tendremos en cuenta dos aspectos, el contenido y el estilo. El contenido es lo que mostramos en la página, es decir los textos, enlaces, imágenes, etc.

El estilo es cómo lo mostramos, es decir colores, tipografía y tamaño de textos, posicionamiento y maquetación de los elementos, fondos en colores o imágenes, etc. Hasta ahora al crear nuestra página nos hemos centrado en el contenido, el cual lo hemos escrito con el lenguaje HTML. Ahora daremos estilo a lo que hemos hecho hasta aquí.

Estilo Con CSS

En las primeras "webs" el estilo se ponía también con el lenguaje HTML. Para ello eran necesarias toda una serie de etiquetas y atributos que complicaban mucho la página. Para solucionar esto pronto se inventó el lenguaje CSS, con el cual se indica el estilo de la página, dejando el lenguaje HTML para el contenido.

En principio puede parecer que es más complicado utilizar dos lenguajes distintos, sin embargo, al separar el contenido del estilo, resulta más fácil no sólo localizar los elementos en el archivo, sino también revisarlos. Seguiremos ahora con nuestra página, y veremos de forma práctica como crear un archivo CSS en el que pondremos el estilo.

El Archivo CSS

Ahora vamos a crear un nuevo archivo de texto, simplemente abre un archivo nuevo que esté en blanco (sin nada escrito).

Escribe en este nuevo archivo lo siguiente:

Ahora guardaremos este nuevo archivo con una extensión CSS. Para ello pulsamos en Archivo / guardar Como y En el cuadro que nos sale para guardarlo, buscamos la carpeta HTML de nuestra web (buscar la carpeta Mis Documentos/ HTML). Donde pone "Nombre" escribiremos el nuevo nombre que le damos a este archivo. Nosotros lo guardaremos con el nombre inicio.css. Pulsamos después en "Guardar".

Al abrir la carpeta HTML de nuestro sitio vemos que tenemos el nuevo archivo css. Pero antes de seguir vamos a explicar lo que hemos escrito en este archivo

La primera línea que hemos puesto es un comentario. Los comentarios son anotaciones para indicar lo que hacemos. No tienen ningún valor en programación y daría lo mismo ponerlos o no, pero para el que está programando, o sea nosotros, le puede ser de utilidad para saber lo que hay en el archivo.

Los comentarios en CSS empiezan siempre por los signos /* y terminan con los signos */

:/* ... aquí va un comentario ... */

La segunda línea es la realmente importante. La línea que hemos puesto es la siguiente.

h1 {text-align: center; }

En primer lugar con h1 indicamos que queremos modificar todas las etiquetas del tipo <h1> ... </h1>. A esta parte la llamamos selector porque selecciona las etiquetas que queremos modificar.

La segunda parte, es lo que escribimos dentro de las llaves { ... } y la llamamos declaración, y es donde indicamos lo que queremos cambiar. Cada aspecto que podemos cambiar es una propiedad. La propiedad que hemos indicado aquí es text-align (alineación del texto). La propiedad puede tener distintos valores. Aquí nosotros hemos elegido el valor center (centrada); aunque también podríamos haber elegido los valores left, right, justify (izquierda, derecha, justificada).

El conjunto de selector y declaración se llama regla. Fíjate bien en la sintaxis empleada. En primer lugar ponemos el selector, después la declaración (entre llaves). Dentro de la declaración ponemos la propiedad, y separado por dos puntos el valor de esa propiedad, para acabar con punto y coma. Después del punto y coma podemos poner otra propiedad dentro de la misma declaración, que afecta al mismo selector, tal como veremos más adelante.

Enlazar Archivos

Una vez que tenemos el archivo CSS debemos indicar que este archivo se corresponde con la página de inicio de nuestra web. Para ello en la página de inicio de nuestra web pondremos una etiqueta que indique que el estilo de esta página está en el archivo CSS que hemos creado.

Para ello abrimos el archivo index.html de nuestra carpeta HTML con el editor de textos, y modificamos la cabecera de la página, es decir la etiqueta <head> ... </head>, dentro de la cual incluiremos la siguiente etiqueta:

La etiqueta de cabecera (head) del archivo index.html quedará así:

En azul hemos destacado la nueva línea que escribiremos en el archivo de inicio (index.html). No haremos más cambios en la página de inicio de nuestra web. Ahora vamos a explicar brevemente la nueva etiqueta que hemos puesto. Siempre que queramos enlazar un archivo CSS para que se corresponda con una página en HTML, en el archivo HTML, y concretamente en la cabecera (etiqueta head) escribiremos esta etiqueta tal y como la tenemos aquí.

Los atributos rel y type indican que estamos enlazando con una página en lenguaje CSS, y se escriben siempre igual, y con el mismo valor que hemos puesto aquí.

Lo único que cambiará es el valor del atributo href en el cual escribiremos la ruta hacia el archivo CSS. En el caso de que el archivo HTML y el CSS estén en la misma carpeta basta con poner el nombre del archivo CSS (siempre indicando su extensión). Como aquí hemos llamado al archivo CSS inicio.css, y lo hemos colocado en la misma carpeta que el archivo index.html, El valor del atributo href será: href="inicio.css".

Estilo De Textos

Estilo Del Título Principal

En esta página vamos a cambiar el estilo de los textos de nuestra página de inicio. En la página anterior ya hicimos un primer cambio en el estilo centrando el título principal mediante el lenguaje CSS. Continuaremos aquí cambiando el estilo de los textos de nuestra página de inicio.

Recuerda que en el paso anterior, para centrar el título principal, hemos puesto la siguiente regla (línea) en CSS:

h1 {text-align: center; }

Añadiremos a esta regla algunas propiedades más para cambiar el estilo del título principal, estas son las siguientes:

*color: blue; Cambiamos el color del texto a azul. La propiedad color cambia el color de texto. Algunos colores admiten como valor su nombre en inglés, aunque para la mayoría o para colores más concretos se usa una nomenclatura especial

*font-size: 40px; Con esta propiedad concretamos el tamaño de la letra. en este caso indicamos que medirá 40 píxeles de alto. Remitimos a la página indicada anteriormente para ver otro tipo de medidas que pueden ponerse.

* font-family: arial; Esta propiedad indica la tipografía o "fuente" (tipo de letra). Como valor ponemos un tipo de letra. El texto al que se le aplica se verá en este tipo de letra siempre que el usuario la tenga instalada en su ordenador. Conviene por tanto poner tipos de letras comunes, (no muy raras) ya que si no veremos el tipo de letra por defecto. Podemos poner también varios tipos de letras seguidos por comas (por ejemplo: font-family: nimrod, tahoma, arial; de este modo si no se puede ver con la primera se pasa a la segunda, y si no a la siguiente ..

un procedimiento similar para cambiarlo. Para ello escribiremos la siguiente regla CSS:

h3 {text-align: left; color: olive; font-size: 25px; font-family: stencil, impact, "times new roman"; margin: 20px 100px; }

La novedad en esta regla respecto de las anteriores está en que ponemos una nueva propiedad. La propiedad margin crea un margen alrededor del elemento (espacio vacío). Como valor ponemos aquí dos medidas. La primera indica el margen por arriba y por abajo, y la segunda el margen por la izquierda y por la derecha.

Observa también cómo el tipo de letra "times new roman" lo hemos puesto entre comillas, esto se debe a que se escribe con varias palabras, y de este modo indicamos que es un sólo bloque.

Estilo De Párrafos

Nos queda sólo cambiar el estilo de los párrafos para tener ya todos los textos con estilo, ya que los enlaces los veremos más adelante. Seguimos para ello los mismos pasos que para cambiar el estilo de los titulos, es decir en el archivo de CSS (inicio.css) añadimos una nueva regla que cambie el estilo de los párrafos. Esta es la línea:

p { text-align: justify; margin: 1em 10em; font-family: verdana, nimrod, tahoma; font-size: 14px; color: navy; }

En principio vemos que hemos empezado la línea por el selector p. Esto hace que se seleccionen todos los párrafos de la página en la cual aplicamos los siguientes cambios (propiedades):

* text-align: center; : Cambiamos la alineación de los párrafos a justificada.

* margin: 2em 10em; : Cambiamos los márgenes del párrafo. La medida "em" se corresponde con el tamaño medio de una letra. Con la primera medida (2em) establecemos el margen superior e inferior, y con la segunda (10em) establecemos los márgenes laterales.

*font-family: verdana, nimrod, tahoma; : Al igual que en las reglas anteriores, establecemos aquí el tipo de letra o "fuente" de los párrafos.

*font-size: 14px; : Definimos el tamaño de letra.

* color: navy; : Definimos el color de letra.

Ahora Abrimos por tanto el archivo inicio.css y le añadimos las líneas anterior. El código es así y el archivo quedará así:

/*archivo de estilo para página de inicio*/

* { margin: 0 auto; padding: 0; }

h1 {text-align: center; color: black; font-size: 20px; font-family: arial; }

h3 {text-align: left; color: olive; font-size: 25px; font-family: stencil, impact, "times new roman";

margin: 10px 10px; }

p { text-align: justify; margin: 1em 10em; font-family: verdana, nimrod, tahoma;

font-size: 14px; color:navy; }

En color azul hemos destacado la nueva línea que hemos puesto, las demás líneas ya las teníamos anteriormente. Ahora al abrir la página index.html con el navegador veremos que el estilo de los párrafos ha cambiado. Lo veremos así:

ESTILO DE ENLACES

Estilo General Para Enlaces

Por defecto los enlaces aparecen subrayados y en un color azul o morado. Pero esto no es normalmente lo que queremos para los enlaces de nuestra página. Así que en principio podemos cambiarlo desde el archivo CSS con la siguiente línea:

a {text-decoration: none; color: red; }

Aquí usamos el selector a para seleccionar todos los enlaces de la página. La propiedad text-decoration: none; quita el subrayado que tienen los enlaces por defecto mientras que con la propiedad color: red; cambiamos el color de los enlaces. Sin embargo para los enlaces de nuestra página pondremos la siguiente regla CSS:

a { text-decoration: none; font-weight: bold; font-size: 18px; font-family: tahoma, arial; }

Seguimos usando el selector a para seleccionar todos los enlaces de nuestra página, pero aquí les cambiamos el estilo con las siguientes propiedades:

* text-decoration: none; Como hemos visto esta propiedad quita el subrayado que tienen los enlaces por defecto.

* font-weight: bold; Esta propiedad pone el texto en negrita (letra más gruesa).

* font-size: 18px; Ya hemos visto esta propiedad en los textos anteriores. Aquí le damos al texto de los enlaces un tamaño de 18 píxeles.

* font-family: tahoma, arial; Ya vista anteriormente, esta propiedad indica el tipo de letra que tendrán los enlace

Por último con otra regla CSS reduciremos el tamaño de las imágenes que actúan como enlaces, para ello pondremos la siguiente regla CSS:

a img { height: 150px; }

Como novedad vemos aquí un selector compuesto. Con a img indicamos que seleccionamos las etiquetas de imagen (img) que estén dentro de las etiquetas de enlace (a). La propiedad height: 150px; indica que el tamaño en altura de las imágenes será de 150 píxeles.

Estilo Especial De Enlaces: Pseudoclases

Sin embargo habrás observado en muchas páginas, que los enlaces pueden cambiar de aspecto cuando se les pasa el ratón por encima, o una vez que han sido visitados. Esto se debe a que un enlace puede tener diferentes estados, y a cada estado se le puede aplicar un estilo o pseudoclase distinto. Los estados que puede tener un enlace son los siguientes:

* link : Enlace en su estado original.

* visited : Enlace que ya ha sido visitado.

* hover : Enlace mientras se mantiene el ratón encima del mismo.

* active : Enlace en el momento en que se está pinchando en el mismo. Este estado dura un periodo muy breve de tiempo.

Podemos aplicar diferentes estilos a cada uno de los estados de un enlace, consiguiendo que éste cambie de estilo al cambiar de estado. Para ello añadimos en el selector de CSS una pseudoclase, que consiste en escribir el nombre del estado precedido de dos puntos, por ejemplo:

a: hover {color: red; }

Con esta regla el color de los enlaces cambia a rojo sólo cuando se les pasa el ratón por encima, (estado "hover"). Al dejar de estar el ratón encima vuelve a su color original.

Lo normal es poner un estilo general para los enlaces, donde se incluyen las propiedades que no cambian, y después poner el estilo con las pseudoclases, para las propiedades que queremos que cambien. Nosotros así lo hacemos también para nuestra página de portada. Ya hemos puesto el estilo general, ahora pondremos el estilo para las pseudoclases. Éste será el siguiente:

a:link { color: navy; }

a:visited { color: blue; }

a:hover { color: green; font-style: italic; }

a:active {color: red; }

Definimos distintos colores para texto de los enlace según sea su estado. En el estado hover (pasar el ratón por encima) hemos definido también una nueva propiedad, font-style: italic. Esta propiedad pone el texto en cursiva (letra inclinada).

Para destacar las imágenes que sirven de enlace haremos éstas un poco más pequeñas cuando se les pase el ratón por encima. Para ello pondremos también la siguiente regla CSS:

a: img:hover { height: 145px; }

Con esto reducimos la imagen 5 píxeles, al pasarle el ratón por encima, respecto al tamaño que le hemos puesto originalmente.

Cambios en la página

Vamos ahora a hacer los cambios en el archivo CSS para que nuestra página quede tal como queremos. Abrimos por lo tanto el archivo inicio.css con el editor de texto y debajo de lo que ya tenemos escrito escribiremos unas cuantas líneas.

En primer lugar cambiaremos la imagen de la cabecera, para ello añadimos al archivo CSS la siguiente línea.

#cabecera img { float: left; width: 100px; margin-left: 50px; }

Mediante el selector #cabecera img se seleccionan todas las imagenes que estén dentro de la etiqueta con id="cabecera".

Con la propiedad float: left; colocamos la imagen a la izquierda. Con width: 100px; reducimos el tamaño de la imagen para que se ajuste al tamaño de la cabecera. Con margin-left: 50px; ponemos un margen a la izquierda de la imagen para que no esté tan pegada al borde izquierdo de la pantalla.

Ahora cambiaremos los bloques de imagen y enlace que hemos marcado con los atributos class="mienlace". Para ello añadimos al archivo CSS la siguiente línea:

.mienlace { width: 30%; margin: 20px 1%; float: left; background-color: aqua }

Con el selector .mienlace seleccionamos todos los bloques en los que hemos puesto el atributo de clase class="mienlace". Para cambiar su aspecto hemos aplicado las siguientes propiedades:

* width: 30%; : Reducimos la anchura del bloque a un 30% del ancho de la pantalla, de esta forma nos caben los tres bloques en una sola línea.

* margin: 20px 1% : Ponemos un margen alrededor de los bloques, para que no estén pegados a los demás elementos. El primer valor (20px) corresponde a los márgenes superior e inferior, y el segundo (1%) corresponde a los márgenes izquierdo y derecho. El porcentaje que ponemos en el segundo valor se mide respecto a la anchura total del elemento contenedor (pantalla), y se añade a los porcentajes que ya teníamos, de modo que cada elemento ocupa un 32% del ancho de la pantalla (30% del elemento más un 2% de los márgenes).

* float: left; : Mediante el posicionamiento flotante conseguimos que los elementos se pongan en horizontal, ya que entre todos no suman el 100% del ancho de la pantalla.

* background-color: aqua; : Esta propiedad cambia el color de fondo del elemento (el margen no se incluye). De esta manera destacamos estos elementos sobre el resto.

Por último dentro de la clase "mienlace" tenemos unas etiquetas de párrafo a las que debemos cambiar el estilo para que no sigan el estilo general de los párrafos anteriores de la página, para ello escribimos en el archivo CSS la siguiente línea:

.mienlace p { margin: 10px 60px; }

Cambios En La Cabecera

Cambiaremos ahora el estilo en la cabecera de la página. Cambiaremos el color de fondo a un color gris plateado mediante la propiedad background-color: silver. y añadimos también un margen interno para dejar espacio entre el borde del elemento y su contenido, para ello utilizamos la propiedad padding: 20px 10px;. Con la primera medida 20px indicamos el margen superior e inferior, con la segunda, 10px indicamos los márgenes izquierdo y derecho.

El color de fondo indicado en backgroound-color lo vemos también en los márgenes internos (padding) pero no se ve en los márgenes externos (margin).

Añadiremos por tanto la siguiente línea al final del archivo CSS para cambiar la cabecera:

#cabecera { background-color: silver; padding: 20px 10px; }

Una vez hayamos insertado las dos líneas que hemos visto hasta ahora, cerramos el archivo inicio.css y guardamos los cambios. Comprobamos después el resultado abriendo el archivo principal (index.html) con el navegador. Este lo veremos como el del siguiente enlace:

Sin embargo éste no es el resultado que queremos, ya que las subsecciones donde se incluyen los enlaces no están incluidas en el recuadro.Esto es debido a que éstas están en posicionamiento flotante (propiedad float: left;), y por tanto están fuera del flujo normal de los elementos de la página.

Para incluirlos dentro del recuadro, el truco está en poner un elemento normal (no flotante) después de éstos y obligar al recuadro a extenderse hasta este elemento.Éste elemento suele ser un elemento vacío. Explicamos de este modo porqué hemos puesto en el código HTML el elemento <div class="vacio"></div> al final de la sección.

Para extender el recuadro hasta este último elemento utilizamos la propiedad clear: both de CSS. por tanto volvemos a abrir el archivo inicio.css con el editor de textos , e incluiremos al final del mismo la siguiente línea:

.vacio { clear: both; }

Con esto el elemento vacío queda detrás de los elementos flotantes, y como éste pertenece a la sección "favoritos", obliga a la sección a extenderse hasta este elemento, con lo que los elementos flotantes quedan incluidos dentro de la sección.

Resumen De Archivo CSS:

A continuación el código de todo los visto anterior mente

a { text-decoration: none; font-weight: bold; font-size: 18px; font-family: tahoma, arial; }

a img { height: 200px; }

a:link { color: navy; }

a:visited { color: blue; }

a:hover { color: green; font-style: italic; }

a:active {color: red; }

a img:hover { height: 145px; }

#cabecera img { float: left; width: 100px; margin-left: 50px; }

.mienlace { width: 30%; margin: 20px 1%; float: left; background-color: silver }

.mienlace p { margin: 10px 60px; }

#cabecera { background-color: silver; padding: 20px 10px; }

#favoritos { background-color: yellow; width: 90%; border: 5px double red; }

.vacio { clear: both; }

Dentro del div "navegación" pondremos los enlaces a todas las páginas que van a formar nuestra web. Cada uno de estos enlaces los pondremos dentro de un "div" con un atributo de clase. De esta manera nos será más fácil posicionar y dar estilo a la barra de navegación.

Dentro de la sección div id="navegación" incluiremos el siguiente contenido

<div id="cabecera">

<h1>EDADES DE LA PREHISTORIA</h1>

</div>

<div id="navegacion">

<div class="menu"><a href="index.html">Inicio</a></div>

<div class="menu"><a href="listas.html">Listas</a></div>

<div class="menu"><a href="tablas.html">Tablas</a></div>

<div class="menu"><ahref="formulario.html">Formularios

</a></div>

<div class="vacio"></div>

</div>

Dentro de la sección div id="navegación" incluiremos el siguiente contenido

Después de incluir estas líneas cerramos y guardamos el archivo index.html. Lo abrimos después con el navegador y se vera asi:

Estilo De Enlaces

Ya nos queda sólo modificar el estilo de los enlaces para que éstos no sean igual que los que tenemos en la sección id="enlaces" y que resulten más visibles. Lo primero que haremos será modificar el estilo general de los enlaces de la barra de navegación. Para ello, después de abrir el archivo inicio.css con el editor de textos, incluimos al final del mismo la siguiente línea.

.menu a { margin: 0px 50px; color: white; }

Con la propiedad margin: 0px 50px dejamos un margen a izquierda y derecha de los enlaces, que hacen que el primer enlace no queda pegado al borde izquierdo de la página, y los demás enlaces se vean más centrados.

La propiedad color:white hace que los enlaces se vean de un color blanco, que destaca sobre el fondo púrpura de la barra de navegación. Ahora pondremos también el estilo para cambiar el aspecto del enlace cuando el usuario pase el ratón por encima (pseudoclase hover). Para ello añadimos también la siguiente línea:

.menu a:hover { color: yellow; font-style: normal; }

Con la propiedad color: yellow hacemos que al pasar el ratón por encima de los enlaces, éstos cambien al color amarillo. La propiedad font-style: normal la ponemos para que no se vea el estilo de letra "italica" que hemos puesto para el resto de enlaces de la página, al pasar el ratón por encima. De esta manera recuperamos el estilo por defecto.

Modificar Textos

Modificaremos primero los títulos, y después los párrafos. Los títulos aparecen con su estilo por defecto, mientras que los párrafos tienen el mismo estilo que le hemos dado a los párrafos de las secciones anteriores.
Para modificar esto cambiaremos el estilo de estos elementos con CSS. Abrimos de nuevo el archivo inicio.css con el editor de textos, y al final escribimos la siguiente línea:

.col_pie h4 { font-size: 1.2em; color: maroon; padding-left: 3em; font-family: arial; }

Con esta línea cambiamos el estilo de los títulos de las columnas. Veamos los cambios que hemos hecho:

* font-size: 1.2em; : Cambiamos el tamaño de letra, y lo ponemos un poco más grande

* color: maroon; : Cambiamos el color del texto a marrón.

* padding-left: 3em; : Ponemos un margen interno a la izquierda del título.

* font-family: arial; : Cambiamos el tipo de letra (fuente) al tipo "arial"

Queremos modificar también el resto de textos que hay en el pie de página, los cuales están marcados como párrafos, por lo que incluiremos también la siguiente línea en el archivo CSS:

.col_pie p { margin: 5px; padding-left: 3em; font-size: 0.8em; color: black; }

Los cambios que hemos hecho vienen marcados por las distintas propiedades que hemos añadido. Estas son:

* margin: 5px : Ponemos alrededor de cada párrafo un margen de 5 pixeles. Esto cambia el margen que tienen los párrafos en las secciones anteriores, de manera que en esta sección se verán distintos (mucho más pequeños)

.
* padding-left: 3em; : Al igual que hemos hecho con los títulos, ponemos aquí un margen interno a la izquierda.

* font-size: 0.8px; : Cambiamos el tamaño de letra a uno más pequeño.

* color: black; : Cambiamos el color del texto a negro, ya que antes estaba en azul.

Después de escribir estas líneas cerramos y guardamos el archivo inicio.css, y comprobamos el resultado. Para ello abrimos el archivo index.html con el navegador, el cual debe quedar como el del siguiente enlace:

#navegacion { background-color: purple; padding: 5px 0px; }

.menu { width: 25%; float: left; }

.menu a { margin: 0px 50px; color: white; }

.menu a:hover { color: yellow; font-style: normal; }

#pie { background-color: #ffe4c4; margin-top: 20px; padding: 10px 0px; }

.col_pie { float: left; width: 33%; }

.col_pie h4 { font-size: 1.2em; color: maroon; padding-left: 3em; font-family: arial; }

.col_pie p { margin: 5px; padding-left: 3em; font-size: 0.8em; color: black; }

En color azul destacamos el código que hemos escrito en esta página. El resto del código es el que teníamos de páginas anteriores.

Trabajaremos ahora dentro de la sección id="pie", que de momento está vacía. Pondremos el contenido en tres columnas, por lo que crearemos tres etiquetas div de clase dentro de esta sección. Para ello en el archivo index.html rellenamos la sección id="pie" que hemos creado de manera que quede como mostramos aquí:

Hemos puesto tres div=class="col_pie" que son los que delimitarán las columnas de la sección. Dentro de cada uno de ellos hemos puesto los datos que queremos mostrar.

Hemos añadido también un div class="vacio" al final de la sección, que, al igual que en las secciones anteriores, nos sirve para incluir los elementos flotantes en la sección.

Después de escribir el código anterior en el archivo inicio.css cerramos y guardamos el archivo y abrimos el index.html y copiamos el siguiente código y luego comprobamos los resultados. Para ello abrimos la página con el navegador, la cual debe quedar como la siguiente:

<div id="principal">

</div>

<div id="pie">

<div class="col_pie">

<h4>Sobre este sitio</h4>

<p>Propiedad de : Nombre Apellido</p>

<p>Webmaster: Nombre Apellido</p>

</div>

<div class="col_pie">

<h4>Contactos</h4>

<p>Email : miemail@servidor.com</p>

<p>Teléfono: 900-00-00-00</p>

</div>

<div class="col_pie">

<h4>En las redes</h4>

<p>Facebook : (dirección de Facebook)</p>

<p>Twitter: (dirección de Twitter)</p>

</div>

<div class="vacio"></div>

</div>

En color azul hemos destacado el código que hemos puesto en esta página. El resto de código ya lo teníamos anteriormente.

En el siguiente tema haremos una plantilla para que nos sea más fácil crear el resto de páginas de nuestra web. No hacemos por tanto directamente la segunda página, sino que hacemos una página, que aunque no la publicaremos, nos facilitará la creación del resto de páginas de nuestra web.

CLASE 6

ARCHIVO HTML

Objetivo: Realizar la elaboración de mi página web.

Video:

Teoría Leer lo correspondiente a la temática. (Archivo HTML.doc)

Practica: leer y analizar el siguiente paso para terminar nuestra pagina web

Archivo HTML.doc

La plantilla que haremos para nuestra web consistirá en la cabecera, la barra de navegación, y el pie de página, que serán los mismos que hemos hecho en la página de inicio.

Abrimos por tanto la página index.html con el editor de textos, y la guardamos con otro nombre, para ello pulsamos en Archivo / Guardar como, y nos sale el cuadro para guardar el archivo. Le ponemos como nombre plantilla.html.

Una vez que tenemos guardado este archivo, lo abrimos con el editor de texto y modificamos algunas cosas. La línea de la cabecera en la que enlazamos con el archivo CSS la modificamos, de manera que ahora enlazaremos con otro archivo.

El archivo plantilla.html tiene que quedar así:

<html>

<head>

<link rel="stylesheet" type="text/css" href="general.css" />

<title>Edad de la prehistoria </title>

</head>

<body>

<div id="cabecera">

<h1>Edad de la prehistoria</h1>

</div>

<div id="navegacion">

<div class="menu"><a href="index.html">Inicio</a></div>

<div class="menu"><a href="listas.html">Listas</a></div>

<div class="menu"><a href="tablas.html">Tablas</a></div>

<div class="menu"><a href="formulario.html">Formulario</a></div>

<div class="vacio"></div>

</div>

<div id="principal">

</div>

<div id="pie">

<div class="col_pie">

<h4>Sobre este sitio</h4>

<p>Propiedad de : Nombre Apellido</p>

<p>Webmaster: Nombre Apellido</p>

</div>

<div class="col_pie">

<h4>Contactos</h4>

<p>Email : miemail@servidor.com</p>

<p>Teléfono: 900-00-00-00</p>

</div>

<div class="col_pie">

<h4>En las redes</h4>

<p>Facebook : (dirección de Facebook)</p>

<p>Twitter: (dirección de Twitter)</p>

</div>

<div class="vacio"></div>

</div>

</body>

</html>

Este nuevo archivo plantilla.html parte de una copia del archivo index.html. Este último hemos modificado el enlace al archivo CSS y hemos suprimido las secciones "texto" y "enlaces", sustituyéndolas por la sección "principal". Esto es todo lo que necesitamos para crear el archivo plantilla.html.

En el paso anterior hemos creado el archivo HTML para la plantilla de nuestra web. En esta página haremos el archivo CSS que se corresponde con esta plantilla.

Este archivo lo hemos llamado plantilla.html. En él tenemos una línea que enlaza con el archivo CSS. Esta linea es:

<link rel="stylesheet" type="text/css" href="general.css" />

El Archivo general.css

Nos referimos aquí al archivo general.css el cual crearemos Para ello abrimos el editor de texto y creamos un nuevo archivo en blanco, pulsamos en archivo / Nuevo... Una vez hemos abierto el nuevo archivo empezamos a escribir en él. Ponemos en principio un comentario con una descripción del archivo. Insertamos el siguiente código:

/*Estilo general y de secciones comunes para Mi Propia Web.*/

/*estilo inicial reset*/

* { margin: 0 auto; padding: 0; text-align: center; font-family: verdana, tahoma, arial; }

a { text-decoration: none; }

/*estilo para la cabecera*/

#cabecera { background-color: silver; padding: 20px 10px; }

#cabecera img { float: left; width: 100px; margin-left: 50px; }

#cabecera h1 { color: blue; font-size: 40px; font-family: arial;}

#cabecera h2 { color: maroon; font-size: 30px; font-family: tahoma, verdana, arial; }

/*estilo para barra de navegación*/

#navegacion { background-color: purple; padding: 5px 0px; }

#navegacion .menu { width: 25%; float: left; }

#navegacion .menu a { margin: 0px 50px; color: white; font-weight: bold; font-size: 18px; }

#navegacion .menu a:hover { color: yellow; }

.vacio { clear: both; }

/*estilo para pie de página*/

#pie { background-color: #ffe4c4; margin-top: 20px; padding: 10px 0px; }

#pie .col_pie { float: left; width: 33%; }

#pie .col_pie h4 { font-size: 1.2em; color: maroon; padding-left: 3em; font-family: arial; }

#pie .col_pie p { margin: 5px; padding-left: 3em; font-size: 0.8em; color: black; }

Le damos guardar, y Con esto completamos la plantilla para crear el resto de páginas de nuestra web.

El Archivo Listas.CSS

Cuando hemos creado el archivo listas.html hemos puesto en la cabecera (etiqueta head) una etiqueta de enlace al archivo listas.css

/*Estilo especifico para pagina listas.html*/

/*titulo principal y párrafos */

#principal h2 { margin: 0.5em; color: navy; font-size: 1.5em }

#principal p { margin: 0.5em 5em; text-align: justify; font-size: 0.9em; }

/*maquetar las listas*/

#principal .lista { width: 40%; float: left; margin: 10px 5%; background-color: #e6e6fa; }

/*título de las listas*/

#principal h3 { color: #4b0082; margin: 0.5em 2em; text-align: left; }

/*Elementos de las listas*/

#principal li { font-size: 0.9em; text-align: left; margin: 0.3em 4em; }

/*Estilo específico para cada lista*/

#paises li { list-style-type: square; }

#idiomas li { list-style-type: decimal; }

El Archivo Tablas.Html

El lenguaje HTML dispone de una serie de etiquetas para crear tablas. Una tabla es una serie ordenada de datos que se disponen en filas y columnas. Esto crea una serie de recuadros llamados "celdas" en donde ponemos cada uno de los datos.

Para crear las tablas HTML tenemos las siguientes etiquetas:

Es la etiqueta principal. Toda la tabla está englobada dentro de esta etiqueta. Las demás etiquetas que veremos a continuación van incluidas dentro de esta etiqueta.

Dentro de la etiqueta table pondremos varias etiquetas <tr> </tr>. Cada una de estas etiquetas es una fila (horizontal) de la tabla. Pondremos por tanto tantas etiquetas tr como filas vaya a tener la tabla. Anidadas o incluidas dentro de las etiquetas tr, pondremos las etiquetas de celda. Estas pueden ser las siguientes:

Estas son las etiquetas de celda. Cada etiqueta crea una celda dentro de la fila. El contenido de la etiqueta de celda será el texto o elementos que queramos poner dentro de la celda.

La diferencia entre las etiquetas td y th es que las etiquetas td crean una celda de contenido normal, mientras que las etiquetas th crean una celda para la cabecera de la lista, la cual tiene por defecto un estilo distinto (texto en negrita y centrado). En la etiqueta th se suele indicar el tipo de elemento que ponemos en el resto de la fila o columna.

Cada etiqueta de fila (tr) debe incluir el mismo número de etiquetas de celda (td ó th), para que todas las filas tengan el mismo número de celdas. Si no es así la tabla no se verá bien. Si hace falta incluiremos etiquetas vacías (sin contenido) para completar el número.

<html>

<head>

<link rel="stylesheet" type="text/css" href="general.css" />

<link rel="stylesheet" type="text/css" href="tablas.css" />

<title>Tablas en Mi Propia Web</title>

</head>

<body>

<div id="cabecera">

<h1>EDADES DE LA PREHISTORIA</h1>

</div>

<div id="navegacion">

<div class="menu"><a href="index.html">Inicio</a></div>

<div class="menu"><a href="listas.html">Listas</a></div>

<div class="menu"><a href="tablas.html">Tablas</a></div>

<div class="menu"><a href="formulario.html">Formulario</a></div>

<div class="vacio"></div>

</div>

<div id="principal">

<h2>PALEOLITICO-NEOLIDTICO</h2>

<p>Cuadro Comparativo .</p>

<br/>

<table>

<tr>

<th></th>

<th>PALEOLÍTICO</th>

<th>NEOLÍTICO</th>

</tr>

<tr>

<td>¿Que es?</td>

<td>Es la etapa mas larga de la prehistoria.tres periodo "piedra antigua" instrumentos en piedra tallada</td>

<td>¿Es un periodo de la prehistoria que significa "nueva piedra"instrumentos en piedra pulimentada </td>

</tr>

<tr>

<td>¿cuando y donde?</td>

<td>Hace 2,4 millones de años Africa</td>

<td>Entre al final del paleolitico y la edad de los metales(10000 a.C.-4000 a.C.) en la zona del proximo oriente, llamada creciente fertil</td>

</tr>

<tr>

<td>¿De que vivian?/Economia</td>

<td>Economia depredadora (cazadores, recolectores) </td>

<td>Economia productora (agricultores,ganaderos)</td>

</tr>

<tr>

<td>¿Como se organizan?</td>

, <td>Pequeños grupos tribus: Organizan las tareas entre hombres, mujeres, niños y ancianos </td>

<td>Grupos dominantes (acaparan el poder politico y religioso) y de grupos dominados (trabajadores)</td>

</tr>

<tr>

<td>Creencias</td>

<td>Pinturas rupuestres (arte parietal) venus (arte mobiliar)</td>

<td>Pinturas rupuestres (Figuras humanas, esquematicas, escenas de grupos, monocromas)</td>

</tr>

</table>

<p>Datos recogidos de Geografia e Historia. concretamente en la página

<a href="http://1esolabesana.blogspot.com/2017/10/paleolitico-neolitico_9.html">"http://1esolabesana.blogspot.com/2017/10/paleolitico-neolitico_9.html"</a>

de un blog.</p>

</div>

<div id="pie">

<div class="col_pie">

<h4>Sobre este sitio</h4>

<p>Propiedad de : Nombre Apellido</p>

<p>Webmaster: Nombre Apellido</p>

</div>

<div class="col_pie">

<h4>Contactos</h4>

<p>Email : miemail@servidor.com</p>

<p>Teléfono: 900-00-00-00</p>

</div>

<div class="col_pie">

<h4>En las redes</h4>

<p>Facebook : (dirección de Facebook)</p>

<p>Twitter: (dirección de Twitter)</p>

</div>

<div class="vacio"></div>

</div>

</body>

</html>

Una vez que hemos acabado de insertar el código anterior en la página, cerramos y guardamos el archivo. Ahora comprobamos cómo queda la página una vez que ya le hemos insertado todo el contenido. Para ello abrimos el archivo tablas.html con el navegador, el cual debe quedar así:

EL ARCHIVO TABLAS.CSS

La primera línea, como de costumbre, es un comentario. Nosotros ponemos siempre un comentario delante del código CSS que cambia una parte de la página. Esto nos ayuda a entender mejor el código, y a localizar los elementos en caso de que queramos cambiarlos o revisarlos.

En la segunda línea ponemos tres propiedades CSS que afectarán a la tabla en sí misma.

§ La primera es la propiedad border. Afecta al borde de la tabla, y lo hace visible. Pondremos tres valores, el primero es el grosor del borde (4px). El segundo es el tipo de línea (double), aquí hemos optado por una doble línea. El tercero es el color de la línea del borde. En la propiedad border debemos poner siempre estos tres valores y en este orden.

§ La segunda propiedad indica el ancho que va a tener la tabla width: 70%. En este caso ocupará el 70% del ancho disponible o de pantalla.

§ La tercera propiedad es border-collapse: collapse. Las tablas por defecto, en cuanto les ponemos un borde, muestran sus celdas separadas. La propiedad border-collapse: collapse junta y unifica los bordes, tanto de las celdas entre sí, como de las celdas con el borde exterior de la tabla.

En la tercera línea cambiamos el aspecto de las celdas. Fíjate en la forma de seleccionarlas. El selector tiene dos partes separadas por una coma. En la primera seleccionamos las celdas de cabecera (table th), y en la segunda las celdas normales (table td). Las propiedades que ponemos dentro de las llaves afectan tanto a unas como a otras.

El primer cambio que hacemos en las celdas es poner un borde (propiedad border. Aquí el borde es más estrecho 1px, y como tipo de línea hemos puesto solid. Esto da una línea continua normal. Ponemos el mismo color de línea que para el borde de la tabla. La segunda propiedad padding: 0.5em crea un margen interno dentro de las celdas, para que el texto no se vea pegado a los bordes.

Copiamos el código y Con esto ya acabamos la página de tablas. Cerramos y guardamos el archivo tablas.css, y comprobamos el resultado. Para ello abrimos el archivo tablas.html con el navegador, el cual debe quedar como el siguiente:

/*estilo específico para para página tablas.html*/

/*titulo principal y párrafos */
#principal h2 { margin: 0.5em; color: navy; font-size: 1.5em }
#principal p { margin: 0.5em 5em; text-align: justify; font-size: 0.9em; }
#principal sup { font-size: 0.5em; }
/*título de la lista*/
#principal h3 { color: navy; margin: 0.5em; font-size: 1.3em; }
/*tabla: aspectos generales*/
table { border: 4px double blue; width: 70%; border-collapse: collapse; }
table th, table td { border: 1px solid blue; padding: 0.5em; }
/*estilo de celdas*/
table th { color: purple; }
table td { text-align: left; padding-left: 2em; }

El Archivo Formulario.Html

Los formularios permiten recoger información sobre el usuario. Mediante un formulario el usuario responde a una serie de preguntas. Nosotros podemos recoger las respuestas que éstos dan. Las preguntas que ponemos en un formulario pueden ser abiertas, de manera que el usuario responde mediante un texto, o cerradas, es decir el usuario elige entre una serie de opciones que le damos.

El formulario tiene una estructura dentro de la página, es decir, para crear un formulario, este tiene sus propias etiquetas y atributos en el lenguaje HTML. Esto es lo que veremos a continuación.

<html>

<head>

<link rel="stylesheet" type="text/css" href="general.css" />

<link rel="stylesheet" type="text/css" href="formulario.css" />

<title>Formularios en Mi Propia Web</title>

</head>

<body>

<div id="cabecera">

<h1>Mi Propia Web</h1>

<h2>Aprendiendo a construir un sitio Web</h2>

</div>

<div id="navegacion">

<div class="menu"><a href="index.html">Inicio</a></div>

<div class="menu"><a href="listas.html">Listas</a></div>

<div class="menu"><a href="tablas.html">Tablas</a></div>

<div class="menu"><a href="formulario.html">Formulario</a></div>

<div class="vacio"></div>

</div>

<div id="principal">

<h2>Formulario de prueba</h2>

<p>La forma principal de interactuar con el usuario, y que pueda mandarnos algunos

datos es mediante formularios. Un formulario es una serie de preguntas que se

hacen al usuario para que este responda.</p>

<p>El siguiente formulario es un formulario de prueba. Suponemos que hemos creado

un foro o un chat, y pedimos al usuario que rellene el formulario para

hacerse usuario del mismo.</p>

<h3>Formulario de ingreso</h3>

<form action="mailto:aprendeweb@aprende-web.net" enctype="text/plain" method="post"

name="foro" id="foro">

<div class="seccion">

<h4>Datos personales</h4>

<p>Nombre: <input type="text" name="nombre" /></p>

<p>Contraseña: <input type="password" name="Contraseña" /></p>

<h4>Mi perfil</h4>

<p>Escribe cómo quieres presentarte ante los demás usuarios del foro</p>

<p><textarea name="descripcion">Mi perfil: </textarea>

<h4>Sexo</h4>

<p><input type="radio" name="sexo" value="hombre" /> Hombre</p>

<p><input type="radio" name="sexo" value="mujer" /> Mujer</p>

<p><input type="radio" name="sexo" value="indefinido" /> Sin definir</p>

</div>

<div class="seccion">

<h4>Aficiones</h4>

<p><input type="checkbox" name="Deportes" value="Si" /> Deportes</p>

<p><input type="checkbox" name="Cine" value="Si" /> Cine </p>

<p><input type="checkbox" name="Música" value="Si" /> Música </p>

<p><input type="checkbox" name="Noticias" value="Si" /> Noticias y Actualidad</p>

<h4>Edad</h4>

<p>Elige cual es tu franja de edad.</p>

<p><select name="edad">

<option value="menos de 20">Menos de 21 años</option>

<option value="de 21 a 30">Entre 21 y 30 años</option>

<option value="de 31 a 40">Entre 31 y 40 años</option>

<option value="de 41 a 60">Entre 41 y 60 años</option>

<option value="más de 61">Más de 61 años</option>

</select></p>

<h4>Borrar o enviar</h4>

<p><input type="reset" value="Borrar Todo" />

: Borra todo y reinicia el formulario.</p>

<p><input type="submit" value="Enviar" />

: Abre el programa de correo para enviar el formulario.</p>

</div>

<div class="vacio"></div>

</form>

</div>

<div id="pie">

<div class="col_pie">

<h4>Sobre este sitio</h4>

<p>Propiedad de : Nombre Apellido</p>

<p>Webmaster: Nombre Apellido</p>

</div>

<div class="col_pie">

<h4>Contactos</h4>

<p>Email : miemail@servidor.com</p>

<p>Teléfono: 900-00-00-00</p>

</div>

<div class="col_pie">

<h4>En las redes</h4>

<p>Facebook : (dirección de Facebook)</p>

<p>Twitter: (dirección de Twitter)</p>

</div>

<div class="vacio"></div>

</div>

</body>

</html>

El archivo formulario.css

En las páginas anteriores de este tema hemos creado un formulario. El formulario, aunque acabado, no está presentable, ya que aparecen todos los elementos en el estilo por defecto de la página. En esta página crearemos un archivo de estilo (CSS) para maquetar y dar forma a los elementos del formulario.

Para ello haremos un nuevo archivo CSS, llamado formulario.css, ya que en la cabecera del archivo formulario.html tenemos ya el enlace o link a este archivo CSS.

Tal como hemos hecho en las páginas anteriores de nuestra web, empezamos por crear un archivo de texto en blanco. Con el archivo en blanco abierto, que después guardaremos como el formulario.css, empezamos a escribir para poner el estilo de los elementos que están dentro del id="principal", pero fuera del formulario, es decir, el título principal, los párrafos, y el título del formulario. Escribimos por tanto lo siguiente:

/*estilo específico para formulario.html*/
/*titulo principal, título de formulario y párrafos */
#principal h2 { margin: 0.5em; color: navy; font-size: 1.5em }
#principal p { margin: 0.5em 5em; text-align: justify; font-size: 0.9em; }
#principal h3 { color: #4b0082; margin: 0.5em 2em; }
/*Formulario: Aspectos generales:*/
#principal h4 { text-align: left; color: purple; font-size: 1.1em; margin: 0.5em 4em; }
.seccion { width: 40%; margin: 4%; border: 1px solid black; float: left; }
/*Formulario: elementos específicos*/
input { text-align: left; }
textarea { text-align: left; font-size: 0.8em; width: 90%; height: 5em }
select { width: 12em; text-align: left; }
option { text-align: left; }

Adaptado por

Osmeydy parra

Docente área de tecnología e informática

.

Grado Once

Otros Atributos

0 comentarios:

Publicar un comentario

Acceder al subsidio de internet

Nichlas Spears

Blog Archive

GRUPO DE TRABAJO

.

Grado Once

Otros Atributos

0 comentarios:

Publicar un comentario

Social Profiles

Acceder al subsidio de internet

Nichlas Spears

Blog Archive

GRUPO DE TRABAJO