3.0 TALLER DE HTML-CSS PRESENTACIÓN PARA ALUMNOS DE CUARTO CURSO DE EDUCACIÓN SECUNDARIA OBLIGATORIA

Ya sabes que el lenguaje HTML está íntimamente ligado a INTERNET… TALLER DE HTML-CSS HISTORIA Ya sabes que el lenguaje HTML está íntimamente ligado a INTERNET… Pero, realmente nació a la vez que Internet.... ¿TÚ QUE PIENSAS? 3.0

TALLER DE HTML-CSS 3.0 HISTORIA En 1969 se creó ARPANET mediante la conexión de dos ordenadores entre las Universidades de California y SRI International Anotaciones manuscritas del primer mensaje transmitido entre las estaciones de la Universidad de California en Santa Bárbara y la corporación SRI en Los Ángeles. La transmisión se realizó mediante protocolo NCP, un protocolo primitivo al actual protocolo TCP/IP, que se caracteriza porque: No determina un único camino para unir dos puntos. Cada mensaje se divide en fragmentos que seguirían caminos distintos. La red está así capacitada para responder ante sus propios fallos. 3.0

TALLER DE HTML-CSS 3.0 HISTORIA En 1973, se implementa el protocolo de transmisión de archivos (FTP) para mandar mensajes y ficheros entre los nodos de la primitiva red. 3.0

TALLER DE HTML-CSS Adivina 3.0 HISTORIA ¿En qué año se implementa la primera especificación del protocolo TCP/IP? 1969 1971 1974 1983 3.0

1974 TALLER DE HTML-CSS Adivina 3.0 HISTORIA ¿En qué año se implementa la primera especificación del protocolo TCP/IP? 1969 1971 1974 1983 1974  Primera especificación del protocolo de transmisión … y en su evolución…. 1975  Primera prueba de integración de los protocolos TCP e IP entre la Universidad de Standford y la University College de Londres. 1977  Transmisión y puesta en funcionamiento de TCP/IP en tres redes simultaneas (USA, UK y Noruega) 3.0

TALLER DE HTML-CSS Adivina 3.0 HISTORIA ¿Cuándo se activa permanentemente el protocolo TCP/IP en toda la red? 1975 1978 1983 1987 3.0

1983 TALLER DE HTML-CSS Adivina 3.0 HISTORIA ¿Cuándo se activa permanentemente el protocolo TCP/IP en toda la red? 1975 1978 1983 1987 1983  Arpanet emplea TCP/IP en toda la red. Oficialmente el protocolo de transmisión es activado permanentemente. 1985  Entrada del protocolo TCP/IP en redes de ámbito comercial. Despliegue definitivo de Internet 3.0

TALLER DE HTML-CSS 3.0 HISTORIA 1969-1983  El servicio de correo electrónico provoca que crezca la adhesión a la red. El ámbito, inicialmente militar, pasa a ser científico y académico. NACIMIENTO DE INTERNET 3.0

TALLER DE HTML-CSS 3.0 HISTORIA 1992  Comienzan a coexistir diferentes redes dentro del primitivo Internet. La Red del NSF (National Science Foundation) dispone de 12 nodos en Estados Unidos . Fuente: Merit Network, Inc. 3.0

CUANDO HABLAMOS DE LA WEB ESTAMOS HABLANDO DE INTERNET? TALLER DE HTML-CSS HISTORIA Internet y la web CUANDO HABLAMOS DE LA WEB ESTAMOS HABLANDO DE INTERNET? CREES QUE ES LO MISMO? 3.0

TALLER DE HTML-CSS Internet y la web 3.0 HISTORIA La World Wide Web, comúnmente conocida como LA WEB es la mayor red del conglomerado de Internet, que ofrece servicios. Se basa en el protocolo HTTP (HyperText Transmission Protocol) 3.0

TALLER DE HTML-CSS Internet y la web 3.0 HISTORIA Hemos hablado que Internet se gestó en el año 1969 como Arpanet y no fue sino hasta 1983 cuando toma el nombre y la completa funcionalidad. Cuando cree que apareció la web? 1985 1987 1989 1992 3.0

TALLER DE HTML-CSS Internet y la web 1989 1989 3.0 HISTORIA Hemos hablado que Internet se gestó en el año 1969 como Arpanet y no fue sino hasta 1983 cuando toma el nombre y la completa funcionalidad. Cuando cree que apareció la web? 1985 1987 1989 1992 1989 3.0

¿Os suena esta cara? ¿Quién creéis que es? TALLER DE HTML-CSS HISTORIA Internet y la web ¿Os suena esta cara? ¿Quién creéis que es? Steve Jobs Bill Gates Tim Berners-Lee Mark Zuckerberg 3.0

¿Os suena esta cara? ¿Quién creéis que es? TALLER DE HTML-CSS HISTORIA Internet y la web ¿Os suena esta cara? ¿Quién creéis que es? Steve Jobs Bill Gates Tim Berners-Lee Mark Zuckerberg Este señor es Tim Berners-Lee, el creador de la World Wide Web (junto a su equipo del CERN) 3.0

HyperText Markup Language TALLER DE HTML-CSS HISTORIA Internet y la web En 1989, Tim Berners-Lee anuncia los principios de la web y la denomina la World Wide Web, la mayor red mundial de intercambio de datos e información basados en……. hipertextos. Y desarrolla el lenguaje de HTML HyperText Markup Language 3.0

En 1993, el CERN declara la gratuidad universal de la web. TALLER DE HTML-CSS HISTORIA Internet y la web En 1993, el CERN declara la gratuidad universal de la web. 3.0

TALLER DE HTML-CSS LOS ARCHIVOS HTML Como ya sabes, un archivo HTML es un archivo de texto. Está lleno de letras y números que forman códigos que los navegadores y los servidores web pueden interpretar. Se basa en etiquetas con las que se declara el nombre y el lugar de objetos ( textos, imágenes, URLs etc.) que luego se podrán visualizar con un navegador 3.0

LAS HOJAS DE ESTILO EN CASCADA - CSS TALLER DE HTML-CSS MEJORANDO LA APARIENCIA DE LOS SITIOS WEB LAS HOJAS DE ESTILO EN CASCADA - CSS Una hoja de estilo en cascada CSS permite que todas las páginas web asociadas a un sitio utilicen el mismo formato. De esta forma, separáis los contenidos en los archivos HTML de los formatos en los archivos CSS. Observa la organización de archivos de un sitio en este gráfico Hoja1.html Hoja2.html Mi_estilo.css Hoja3.html Hoja4.html 3.0

LAS HOJAS DE ESTILO EN CASCADA - CSS TALLER DE HTML-CSS MEJORANDO LA APARIENCIA DE LOS SITIOS WEB LAS HOJAS DE ESTILO EN CASCADA - CSS Escribe en un editor este texto y guárdalo con el nombre “Hoja1.html” <!DOCTYPE html PUBLIC "//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Mi primera página con estilo</title> <link rel="stylesheet" href="Mi_estilo.css" type="text/css"> </head> <body> <h1>Mi primera hoja con estilo</h1> <p>Visita <a href="innoEscuela.org">InnoEscuela.org</a></p> </body> </html> 3.0

LAS HOJAS DE ESTILO EN CASCADA - CSS TALLER DE HTML-CSS MEJORANDO LA APARIENCIA DE LOS SITIOS WEB LAS HOJAS DE ESTILO EN CASCADA - CSS body{ margin:-20; padding:0; font-size:12px; font-family:"Trebuchet MS", Helvetica, sans-serif; color:#FFFFFF; background-color:#00DDa4; } h1 { fontfamily: Helvetica, Geneva, Arial; color: blue a:link {color: yellow } a:visited {color: purple } Ahora abre un nuevo archivo de texto y copia el siguiente texto. Guárdalo con el nombre “Mi_estilo.css” 3.0

TALLER DE HTML-CSS 3.0 MEJORANDO LA APARIENCIA DE LOS SITIOS WEB LAS HOJAS DE ESTILO EN CASCADA - CSS Debería de aparecerte la página “Hoja1.html” con esta apariencia Los encabezados (h1) en azul Los hipervínculos en amarillo Las letras en parrafos en blanco El fondo de la página en verde 3.0

<link rel="stylesheet" href="Mi_estilo.css" type="text/css"> TALLER DE HTML-CSS MEJORANDO LA APARIENCIA DE LOS SITIOS WEB LAS HOJAS DE ESTILO EN CASCADA - CSS Ahora todos los archivos HTML que crees, si los sitúas en la misma ubicación y les incorporas dentro de la etiqueta HEAD el código ….. <link rel="stylesheet" href="Mi_estilo.css" type="text/css"> Tendrán el mismo aspecto. Acabas de crear tu primera hoja de estilo. 3.0

“plantilla_ HTML_CSS.zip” TALLER DE HTML-CSS AHORA, CREAD VUESTRA PÁGINA WEB ENRIQUECIDA: 1. DESCARGAD DESDE LA PLATAFORMA DIGITAL EL DOCUMENTO “plantilla_ HTML_CSS.zip” 2. DESCOMPRIMID EL ARCHIVO 3. MODIFICAR EL CÓDIGO PARA CAMBIAR: EL CONTENIDO EN LOS ARCHIVOS HTML LOS FORMATOS EN LOS ARCHIVOS CSS 3.0

3.0 TALLER DE HTML-CSS