Guia realizada para cursos básicos de alambrismo.Descripción completa
Descripción completa
Guia 1 Basico MusicaDescripción completa
raicesDescripción completa
numbers, colours, familyDescripción completa
Guia Rapida de Comandos HTMLDescripción completa
htmlFull description
HTML principiosDescripción completa
Descrição completa
Full description
Full description
html basic
Descripción: Apostila que ensina o HTML básico
Full description
HTML merupakan bahasa ibu bagi internet. Tak peduli ASP, PHP, JSP, atau lainnya, semua berangkat dari HTML. Karenanya, penguasaan HTML merupakan hal wajib bagi anda yang ingin membuat halama…Description complète
SERVICIO NACIONAL DE APRENDIZAJE SENA SISTEMA INTEGRADO DE GESTIÓN Procedimiento Ejecución de la Formación Profesional Integral GUÍA DE APRENDIZAJE
Versión: 02 Código: GFPI-F-019
GUÍA DE APRENDIZAJE Nº 001 Programa de Código: 228106 Análisis y Desarrollo de Sistemas de IDENTIFICACIÓN DE LA GUIA DE APRENDIZAJE Formación: Versión: 102 Información Nombre del Proyecto:
Código:
Fase del proyecto: Planeación Actividad (es) de Aprendizaje:
Actividad (es) del Proyecto: Construir el Sistema de Información en ambiente Web
Resultados de Aprendizaje: Representa el bosquejo de la solución al problema presentado por el cliente, mediante la elaboración de diagramas de casos de uso, apoyado en el análisis del informe de requerimientos, al confrontar la situación problémica con el usuario según normas y protocolos de la organización
* Reconocer los conceptos de página Web, sitio Web, protocolo HTTP, navegador Web, servidor Web, hipertexto, HTML. * Identificar la estructura de una página Web en HTML y sus etiquetas básicas. * Emplear etiquetas para dar formato a los textos de una página Web. * Utilizar las etiquetas necesarias para definir diferentes tipos de enlaces en una página Web. * Usar etiquetas para fijar imágenes dentro de una página Web. * Crear tablas al interior de una página Web.
Competencia:
Ambiente de formación ESCENARIO (Aula, Laboratorio, taller, unidad productiva) y elementos y condiciones de seguridad industrial, salud ocupacional y medio ambiente
MATERIALES FORMACIÓN DEVOLUTIV O (Herramien ta - equipo)
DE CONSUMIB LE (unidades empleadas durante el programa)
Teleinformáti ca
Ambiente 16 Teleinformáti Computado Analizar los ca. Centro de res requerimientos Automatizaci del cliente para ón Industrial. construir el Ambiente sistema de con 16 información equipos de cómputo y TV
Marcadore s (2), Resma de papel carta
Página 1 de 20
SERVICIO NACIONAL DE APRENDIZAJE SENA GUÍA DE APRENDIZAJE
SISTEMA INTEGRADO DE GESTIÓN Proceso Gestión de la Formación Profesional Integral Procedimiento Ejecución de la Formación Profesional Integral Duración de ( en horas):
la
Versión: 02 Código: GFPI-F-019
guía 18 horas
INTRODUCCIÓN
HTML es el lenguaje que se emplea para el desarrollo de páginas de internet. Este lenguaje está constituido de elementos que el navegador interpreta y las despliega en la pantalla de acuerdo a su objetivo. Veremos que hay elementos para disponer imágenes sobre una página, hipervínculos que nos permiten dirigirnos a otra página, listas, tablas para tabular datos, etc. Para poder crear una página HTML se requiere un simple editor de texto, puede ser block de notas, o el notepad ++, y un navegador de internet (IExplorer, Chrome, FireFox etc.)
ESTRUCTURACION DIDACTICA DE LAS ACTIVIDADES DE APRENDIZAJE
3.1 Actividades de Reflexión inicial.
Página 2 de 20
Que sabes acerca de los términos: ¿Página Web, sitio Web, protocolo HTTP, navegador Web, servidor Web, hipertexto, HTML, estructura de una página Web en HTML y sus etiquetas básicas? ¿Alguna vez has subido una página a un servidor gratuito?
3.2 Actividades de contextualización e identificación de conocimientos necesarios para el aprendizaje.) Lee con detenimiento los siguientes conceptos y buscar EJEMPLOS para cada uno, los puede pegar o insertar en la parte inferior de cada concepto. Conceptos Básicos: Página Web: Se conoce como página web al documento que forma parte de un sitio web y que suele contar con enlaces (también conocidos como hipervínculos o links) para facilitar la navegación entre los contenidos. Sitio Web: Sitio es un lugar que sirve para algo o un espacio ocupado (o que puede llegar a serlo). La noción de Web, por su parte, hace referencia a Internet, una red de redes que permite la interconexión de computadoras mediante un conjunto de protocolos denominado TCP/IP. TCP/IP: Es una denominación que permite identificar al grupo de protocolos de red que respaldan a Internet y que hacen posible la transferencia de datos entre redes de ordenadores. HTTP: HTTP es un protocolo de transferencia de hipertexto que se usa en la Web. HTTP es una sigla que significa HyperText Transfer Protocol, o Protocolo de Transferencia de Hipertexto. Este protocolo fue desarrollado por las instituciones internacionales W3C y IETF y se usa en todo tipo de transacciones a través de Internet.
Página 3 de 20
Navegador Web: En el ámbito de la tecnología, un navegador o navegador web es un programa informático que permite visualizar la información contenida en una página web, ya sea alojada en Internet o en un servidor local. Servidor Web: Un servidor web es un programa que se ejecuta continuamente en un computador, manteniéndose a la espera de peticiones de ejecución que le hará un cliente o un usuario de Internet. HiperTexto: El hipertexto es una herramienta de software con estructura no secuencial que permite crear, agregar, enlazar y compartir información de diversas fuentes por medio de enlaces asociativos. HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento. Página Página Web Web
Hipertext Hipertext o o
Sitio Web Sitio Web
HTM L
Servidor Servidor Web Web
Navegad Navegad or Web or Web
TCP/IP TCP/IP
HTTP HTTP
Para ampliar los conceptos consultar la presentación “Introducción a HTML.ppt” Estructura de una página HTML
Página 4 de 20
Estructura básica
Ejemplo Código
Como ejercicio inicial vamos a crear una página básica en HTML utilizando el programa notepad ++, al abrir dicho programa digitaremos en un archivo nuevo el código de ejemplo que se encuentra en la parte superior. Guardar el archivo con extensión html y depositarlo en una carpeta en el disco local c: llamada pagina_prueba. Nota: se recomienda que los nombres de las páginas, archivos o carpetas que se escriban en un lenguaje de programación que sea orientado a la web, como es el caso de HTML, sean en minúsculas y sin espacios, ya que más adelante pueden ocasionar problemas la subirlos al servidor.
Etiquetas para texto: Como su nombre lo indican, las etiquetas para texto permiten modificar la apariencia que tendrá un bloque de texto al interior de la página. Se puede afectar todo un párrafo, una línea, una palabra, caracteres individuales, simplemente encerrando el respectivo texto dentro de las etiquetas apropiadas. Algunos atributos de texto pueden ser controlados por etiquetas diferentes obteniendo resultados similares Para ampliar los conceptos consultar la presentación “HTML Body y Texto.ppt” Etiquetas para enlaces:
Página 5 de 20
A menudo encontramos, en páginas web y otros documentos html, enlaces que nos conducen a otras páginas, documentos o aplicaciones. Cuando se abre la nueva página o documento enlazado puede suceder que lo haga reemplazando a la página de la que venimos o abriendo una nueva ventana del explorador. La orden de enlazar con otra página web u otro documento se resuelve, en el lenguaje html, con la etiqueta a que significa ancla o anchor en la expresión anglosajona. Al encontrar un texto etiquetado con una etiqueta a, el cliente web (Mozilla, IExplorer, Netscape, etc) lo presenta en la pantalla resaltado en color y subrayado. Si el usuario de la página hace clic sobre ese texto marcado, el navegador pedirá al servidor otra página web o abrirá otro documento. Para ampliar los conceptos consultar la presentación “HTML Body y Texto.ppt” Etiquetas para imagen: La etiqueta para las imágenes es , todo lo demás que va dentro son detalles que se le añaden y que son necesarios (todos). Esta etiqueta es algo especial, pues así como las etiquetas de párrafo y de títulos (y muchas otras que hemos visto) necesitan obligatoriamente de su correspondiente etiqueta de cierre, la etiqueta de imagen no tiene etiqueta de cierre. P.E: 1. hace el llamado a una imagen que se encuentra en la misma carpeta que el index.html
2. hace llamado a una imagen que se encuentra en la carpeta imágenes y que ésta debe estar en la misma carpeta del index.
Página 6 de 20
Cualquiera de los métodos para guardar imágenes en la página principal son válidos, se recomienda utilizar el segundo ya que una página puede llegar a tener muchísimas imágenes, y será mejor tenerlas organizadas en carpetas.
Para ampliar los conceptos consultar la presentación “HTML Texto e imágenes.ppt” Etiquetas para Tablas: Las tablas se usan con profusión en las páginas Web, muchas veces debido a que son el único instrumento con el que se cuenta, para asegurarse que las cosas estarán en su sitio. Para definir una tabla se usan las etiquetas:
y
son las etiquetas donde está contenida la tabla
y
son las etiquetas que indican el comienzo y fin de una fila (
y
si es una fila de cabecera)
y
señalan una celda. La tabla se va definiendo declarando una fila y a continuación las celdas que contiene esa fila, luego otra fila y sus celadas, etc. No es necesario que todas las filas contengan el mismo número de celdas. Para ampliar los conceptos consultar la presentación “HTML Texto e imágenes.ppt” Etiquetas para Formularios: Un formulario HTML es una sección de un documento que contiene contenido normal, código, elementos especiales llamados controles (casillas de verificación (checkboxes), radiobotones (radio buttons), menúes, etc.), y rótulos (labels) en esos controles. Los usuarios normalmente "completan" un formulario modificando sus controles (introduciendo texto, seleccionando objetos de un menú, etc.), antes de enviar el formulario a un agente para que lo procese (p.ej., a un servidor web, a un servidor de correo, etc.) Aquí se muestra un ejemplo de un formulario simple que incluye rótulos, radio botones y botones para reinicializar el formulario o para enviarlo:
Página 7 de 20
Para ampliar los conceptos consultar la presentación “HTML Formularios.ppt” 3.1 Actividades de apropiación del conocimiento (Conceptualización y Teorización). Crear varias páginas web que tengan las siguientes características: La página debe llamarse index.html, debe tener una imagen de fondo completo (pueden buscar en google images por “fondos web” o por “c”), además de incluir una lista con los ítems que aparecen en pantalla. Puede agregarle una imagen a la página del menú.
Página 8 de 20
Vamos a crear un sitio que hable acerca de los 5 reinos de la naturaleza, para ello vamos a construir una página index.html en una carpeta nueva, la página debe cumplir con las siguientes características: Una imagen de fondo. Imagen general del tema la cual servirá de introducción junto con un texto que se pueden descargar de Internet. El texto de introducción debe estar justificado. Debe llevar un subtítulo que diga “Listado de Reinos”. Crear una lista ordenada para cada reino tal cual se muestra en la imagen en la parte superior. Luego vamos a crear las páginas secundarias del sitio, una para cada reino, por lo que serán 6 en total incluyendo index.
Cada
página secundaria debe cumplir con las siguientes características: Título principal del Reino correspondiente. Texto explicativo de cada reino, lo puede copiar de la web. Al menos tres imágenes alusivas a cada reino. Un enlace que retorne a la página principal.
Después de tener dichas páginas, se procede a realizar el respectivo hipervínculo de los ítems de la página index.html con las páginas correspondientes a la información que se solicita. 3.2
Actividades de transferencia del conocimiento.
A continuación encontrará la documentación básica de algunos componentes del lenguaje HTML 5 que van a ser utilizados Manejo de Tablas en HTML4 • Tablas Simples Una tabla HTML puede ser considerada, de manera simple, como un grupo de filas donde cada una de ellas contiene un grupo de celdas (y no al revés). Las tablas, como toda estructura en los documentos HTML, son definidas usando elementos. Entonces, una tabla simple puede ser insertada en un documento HTML usando tres elementos: el elemento HTML table (estructura contenedora principal), el elemento HTML tr (contenedor de fila) y el elemento HTML td (celda). Veamos un ejemplo: Página 9 de 20
Las tablas nos permiten representar y ordenar cualquier elemento de nuestra presentación en diferentes filas y columnas de modo que podamos resumir grandes cantidades de información de una manera que puede representarse rápida y fácilmente. El contenido de una tabla lo debemos desarrollar entre las tags
.....
. Cada fila de la tabla se indica mediante las tags
.....
. Las tags
y
con sus correspondientes tags de cierre, indican para indicar las filas individuales dentro de cada fila. Las tags
.....
indican que se trata de celdas que sirven como encabezado de tabla y suelen visualizarse en negrita. Las tags
.....
indican que se trata de celdas comunes. Los
elementos son los contenedores de datos en la tabla. Los
elementos pueden contener todo tipo de elementos HTML, como texto, imágenes, listas, otras tablas, etc El ancho de una tabla puede ser definido mediante CSS.
Resultado de la tabla
Página 10 de 20
Una tabla HTML con un atributo border Si no especifica un borde de la mesa, que se mostrará sin fronteras. Un borde se puede añadir usando el atributo border:
HTML encabezamientos Tabla Encabezamientos de las tablas se definen con el
etiqueta. Por defecto, todos los principales navegadores muestran encabezados de la tabla en negrita y centrado:
Página 11 de 20
Tablas con Colspan y Rowspan Es la forma de fusionar celdas en una tabla. Rowspan, indica el número de fi las que ocupará la celda. Por defecto ocupa una sola fi la. Colspan, indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna. De esta forma si ponemos
, quiere decir que la celda actual se extiende en el ancho de dos celdas. Algo parecido ocurre si ponemos
, la celda ocupará el alto de 3 celdas normales. Veamos un ejemplo: Si visualizamos esta tabla, podemos observar que la primera celda ocupa tres fi las, y no sobrepasa la altura total de las tres celdas que tiene a la derecha.
Página 12 de 20
Código fuente de la tabla:
Las tablas también manejas atributos entre sus etiquetas. Ver y aplicar algunos atributos a las tablas creadas teniendo en cuenta la información de la siguiente página web http://www.mclibre.org/consultar/amaya/xhtml/xhtml_tablas_atributos.html a. Utilizando tablas HTML hacer la siguiente página web
Página 13 de 20
b. Utilizando tablas HTML hacer la siguiente página web
c. Utilizando tablas HTML hacer la siguiente página web
Página 14 de 20
d. Utilizando tablas HTML hacer la siguiente página web
e. Retomando la actividad de los reinos de la naturaleza, y aplicando los conceptos recién vistos de las etiquetas de tablas y atributos, vamos a rediseñar el sitio que construimos inicialmente:
Página 15 de 20
La página principal o index debe tener el texto e imagen en una tabla como se observa en la muestra.
Las páginas de cada uno de los reinos de la naturaleza deben contener el texto en una tabla con borde = 0. Para las imágenes se deberá construir una tabla aparte y deben tener el mismo tamaño conservando la relación ancho y altura para no distorsionarlas. Se aconseja que el tamaño del texto sea tamaño 4 y la fuente Arial.
3.3 Actividades de evaluación. Evidencias de Criterios de Evaluación Aprendizaje Evidencias de REPRESENTA PROCESOS Conocimiento : DEL SISTEMA A PARTIR
Técnicas e Instrumentos de Evaluación
Página 16 de 20
Evidencias de Desempeño: Instrumento con ejercicios con los temas tratados en la presente guía de aprendizaje
DE LA CONSTRUCCIÓN DE ALGORITMOS, COMO PARTE DE LA SOLUCIÓN A SITUACIONES PLANTEADAS, UTILIZANDO LENGUAJES DE PROGRAMACIÓN ORIENTADOS A OBJETOS.
Preguntas y ejercicios sobre etiquetas HTML planteadas en un cuestionario CT-001
Materiales formación RECURSOS PARAdeEL APRENDIZAJE Materiales de formación devolutivos: (Equipos/Herramientas)
ACTIVIDADES DEL PROYECTO
Talento Humano (Instructore
DURACIÓ N (Horas) Descripción
Construir el Sistema de Informació n en ambiente Web
(consumibles)
44
Computador de escritorio
Cantidad
16
Descripción
Cantidad
Marcadores Resma papel carta
3 2
Especialidad
Ingeniero de sistemas
GLOSARIO DE TERMINOS Directorio web Las páginas que se incluyen en la base de datos del directorio son previamente revisadas por humanos (no es automatizado como los crawlers o arañas). No se agrega la página completa, sino únicamente algunos datos tales como el título, la URL y un breve comentario redactado especialmente que explique el contenido, y se la ubica en una categoría. Un ejemplo es www.yahoo.com DNS Servidor de Nombres de Dominio. Servidor automatizado utilizado en el internet cuya tares es convertir nombres fáciles de entender (como www.panamacom.com) a direcciones numéricas de IP. Dominio
Página 17 de 20
Cant
1
Sistema de denominación de hosts en Internet el cual está formado por un conjunto de caracteres el cual identifica un sitio de la red accesible por un usuario. Los dominios van separados por un punto y jerárquicamente están organizados de derecha a izquierda. Comprenden una red de computadoras que comparten una característica común, como el estar en el mismo país, en la misma organización o en el mismo departamento. Los más comunes son .com, .edu, .net, .org, .biz, .info DoS Denial Of Service (DoS), denegación de servicio, incidente en el cual un usuario o una organización se ven privados de un recurso que normalmente podrían usar. Habitualmente, la pérdida del servicio supone la indisponibilidad de un determinado servicio de red, como el correo electrónico, o la pérdida temporal de toda la conectividad y todos los servicios de red. En los peores casos, por ejemplo, un sitio web accedido por millones de personas puede verse forzado temporalmente a cesar de operar. FAQ Siglas del inglés Frequently Asked Questions (Preguntas Frequentes), que como su nombre lo dice, es una compilación de las preguntas más frecuentes que se hacen de cualquier tema. Es común ver la palabra FAQ en los menus de los sitios web, aunque sean en español. Leer los FAQs de un producto, sitio web, empresa, etc. puede ayudar a resolver problemas o situaciones sin necesidad de contactar a alguien para preguntarle. Favicon Corto en inglés para Favorite Icon (Icono Favorito). Es un mini grafico que puede ser una marca o logo. Cuando un sitio web lo utiliza, aparece a los usuarios en la barra de direcciones del navegador. En Internet Explorer salen cuando la página web con el Favicon se guarda como Favorito (Bookmark). En Firefox sale siempre aunque no sea un website marcado como favorito. Favoritos Marcador de un sitio web. Unos exploradores dicen 'favorito', otros usan el término 'marcador'. En inglés es 'bookmark'. La mayoría de los navegadores tienen su lista de "Favoritos", donde se puede guardar las direcciones de sitios web preferidos. Firefox Mozilla Firefox (originalmente conocido como Phoenix y Mozilla Firebird) es un navegador de web gráfico, gratuito, de código abierto, desarrollado por la Fundación Mozilla y miles de colaboradores en el mundo. La versión 1.0 salio el 9 de noviembre de 2004. Instalable en los sistemas operativos Windows, Linux i686 y Mac Os X. Firewall Combinación de hardware y software la cual separa una red de área local (LAN) en dos o más partes con propósitos de seguridad. Su objetivo básico es asegurar que todas las comunicaciones entre dicha red e Internet se realicen conforme a las políticas de seguridad de la organización que lo instala. Además, estos sistemas suelen incorporar elementos de privacidad, autentificación, etc. Firma digital Información cifrada que identifica al autor de un documento electrónico y autentica su identidad. Flash Creado por Macromedia, esta tecnología permite la creación de animaciones, entre otras cosas, utilizando menos ancho de banda que otros formatos, como AVI o MPEG. Foros de Discusión Página 18 de 20
Servicio automatizado de mensajes, a menudo moderado por un propietario, en el cual los suscriptores reciben mensajes dejados por otros suscriptores por un tema dado. Los mensajes se envían por correo electrónico. Frames o marcos Opción que ofrece el lenguaje HTML de dividir una página web en varias zonas. Cada una de las cuales puede tener un contenido independiente de las demás de forma que cada zona es asimismo un frame. Freeware Programas de Dominio Público. Aplicaciones que pueden obtenerse directamente de Internet con la característica de que no es necesario pagar por su utilización. FSF Fundación para el Software Libre. Entidad que busca eliminar las restricciones de uso, copia, modificación y distribución del software. Apoya el desarrollo de sistemas operativos (Linux), compilador GNU C (GCC), PERL, etc. Promueve, desarrolla el uso del software libre en todas las áreas de la computación. Específicamente, la Fundación pone a disposición de todo el mundo un completo e integrado sistema de software llamado GNU. La mayor parte de este sistema está ya siendo utilizado y distribuido. El costo del software únicamente está determinado por el costo del material utilizado para distribuirlo. FTP File Transfer Protocol. Protocolo de transferencia de archivos. Se usan programas clientes para FTP como son por ej. (para Windows) LeapFTP o Core FTP con soporte para ssl, por mencionar algunos. Se usan programas servidores de FTP como por ej. NcFTPd. Estos programas permiten la conección entre dos computadoras, usando por lo general el puerto 21 para conectarse (aunque se puede usar otros puertos). Por medio del Protocolo de transferencia de archivos se pueden uploadear y downloadear archivos entre el cliente y el host (servidor). REFERENTES BIBLIOGRÁFICOS Útil enlace para aprender HTML5 por medio de ejemplos http://www.w3schools.com/html/ enlace que muestra las etiquetas utilizadas en HTML de forma detallada https://www.uv.es/jac/guia/ En esta página pueden conocer la estructura de HTML http://www.codecademy.com/es/glossary/html#cabeza Contiene descripciones y ejemplos de cada una de las etiquetas y atributos http://www.htmlpoint.com Sitio que muestra las diferentes etiquetas y atributos propios de las tablas http://www.mclibre.org/consultar/amaya/xhtml/xhtml_tablas_atributos.htm l
Página 19 de 20
Editor online de HTML http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_lists Página de la fundación Mozilla para enseñar HTML5 https://developer.mozilla.org/es/docs/Web/HTML CONTROL DEL DOCUMENTO (ELABORADA POR) José Fernando Murillo Arango Alejandra Duque Ceballos