Guía para contenidos de Tecnologías: html

viernes, 10 de mayo de 2013

ESO 4. Informática. Aprendiendo el lenguaje de la Web: HTML

HTML es el lenguaje de la World Wide Web: cada vez que accedes a una página en Internet, el ordenador que la aloja envía una serie de códigos a tu ordenador. Estos códigos sólo son códigos escritos en el lenguaje HTML (habitualmente con CSS y Javascript). Existen multitud de tutoriales sobre
HTML, puedes consultar las referencias de este artículo.

Sigue los pasos del vídeo [4] especialmente a partir del minuto 11. Después sigue el tutorial de [7]. Realiza las siguientes tareas:

Crea un sitio web sobre un tema que te guste: viajes, deportes, países, libros, etc.
El sitio web contendrá al menos tres páginas, enlazadas entre si. Por ejemplo, la página principal ("index.html"), una de imágenes ("imagenes.html"), otra con un vídeo ("video.html"), todas con textos explicativos. Ojo, los nombres de los ficheros deben estar en minúsculas, sin tildes ni espacios.
Imágenes.Descarga desde Internet una o varias imágenes sobre el tema que hayas elegido [8]. Insértalas en una página: "imagenes.html" (ejemplo: <img src="foto.jpg" alt="esto es una foto"/>).
Vídeo. En una de las páginas inserta un vídeo de Youtube, DailyMotion, etc (Busca en http://www.youtube.com el vídeo y pulsa en la opción compartir (share), aparecerá un código que debes pegar dentro de la página "video.html").
También añade a cada página:

Incluye textos con párrafos ( ), cursiva (), negrilla () y otros formatos.
Enlaza las páginas: (<a href="imagenes.html">Imágenes</a> , <a href="video.html">Vídeo</a> ).
Cambia el color de fondo de las páginas ( <body style="background-color: #00ff00" >) y coloca una imagen de fondo (style="background-image: url('EL_NOMBRE_DE_UN_FICHERO.gif');") .

Cuando hayas terminado guarda el contenido en un pen-drive y envía los ficheros a tecnologias.secundaria@gmail.com indicando en el asunto:

Página web. Nombre y apellidos, curso, grupo.

El siguiente paso será subirlo a un servidor de Internet [3]

Existen en Internet gran cantidad de tutoriales [1], [6] y sobre todo [7] (en castellano) que puedes seguir.

Crear una página web básica desde cero por desarrollwebcom

Referencias:

[1] Introducción al HTML: http://profesores.fi-b.unam.mx/cintia/Manualhtml.pdf
[2] JavaScript: http://www.uv.es/jac/guia/jscript/javascr02.htm
[3] Alojamiento:

[4] Vídeo tutorial: crear una página web desde cero: http://www.dailymotion.com/video/xaas4n_crear-una-pagina-web-basica-desde-c_tech#.UYweuKZ8Dhs
[5] Portal sobre creación de páginas web: http://www.desarrolloweb.com/articulos/711.php
[6] Como crear tu primera página web: http://www.basekit.com.mx/basekiteca/como-hacer-una-pagina-web-en-html-en-bloc-de-notas
[7] Tutorial sobre HTML y CSS en castellano: http://es.html.net/tutorials/html/
[8] Banco de imágenes: http://recursostic.educacion.es/bancoimagenes/web/

jueves, 11 de abril de 2013

TIC. Aprendiendo HTML

Guía de HTML

Accede a W3Schools [6], lee la teoría y modifica los ejemplos [1] a tu gusto, practicando con las distintas etiquetas. Finalmente comprueba tus conocimientos realizando los test [2], debes obtener, como mínimo, una nota de 70%.

A continuación se explica la apariencia de una página web, esto se realiza con las denominadas "hojas de estilo" (CSS). Existe una guía de ejemplos similar [3] al HTML, con su respectivo test [4]. Es importante tener unas nociones de CSS (cambiar color, apariencia, tipo de letra, color de fondo de página y celdas de tablas, etc.)

Ahora ya posees los conocimientos para realizar tu propia página web. Escribe tu propio fichero "index.html",con imágenes, vídeos, etc y súbelos a algún alojamiento gratuito (por ejemplo [5]).

[1] http://www.w3schools.com/html/html_examples.asp
[2] http://www.w3schools.com/html/html_quiz.asp
[3] http://www.w3schools.com/css/css_examples.asp
[4] http://www.w3schools.com/css/css_quiz.asp
[5] Alojamiento Web con FTP:

Referencia: https://en.wikipedia.org/wiki/Comparison_of_free_web_hosting_services

[5] http://www.hostinger.es, http://www.000webhost.com/, http://260mb.org/, http://galeon.hispavista.com/
[6] http://www.w3schools.com/html/