Programa Técnico en TIC´S: Módulo 4:

REPUBLICA DE COLOMBIA

MINISTERIO DE EDUCACION

INSTITUCION EDUCATIVA COLEGIO TECNICO LOS ANGELES

ESPINAL – TOLIMA, COLOMBIA

Módulo 4

Programación Web con HTML

Msc. Jean Piero Marques

Febrero 2019

INDICE

Introducción al Módulo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Propósito del módulo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6

Duración del Módulo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Desarrollo del Módulo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

Práctica 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Práctica 2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Práctica 3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Práctica 4. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13

Práctica 5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

Práctica 6. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Práctica 7. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Práctica 8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Práctica 9. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Práctica 10. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20

Webgrafía. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21

Introducción al Módulo

Desde tiempos ancestrales, el hombre en su búsqueda insaciable por dominar, controlar, cambiar y mejorar su entorno, para volverlo más confortable, inició un proceso de creación o descubrimiento en algunos casos, de sistemas o mecanismos que le permitieran vivir más confortablemente.

Producto de esa búsqueda, y tras pasar varios miles de siglos de evolución, el hombre diseña un equipo de tantos que le permite recibir, cambiar, procesar, modificar, almacenar y reenviar toda la información que considera útil en su diario vivir; a dicho equipo le denominamos computadora, equipo de cómputo u ordenador, el cual sin duda alguna transformó sin precedentes nuestra historia evolutiva.

La computadora, entre otras actividades, permite crear, modificar, ampliar y mejorar constantemente medios de comunicación que facilitan el intercambio de datos sin importar la distancia que exista. Con el pasar del tiempo, dichos medios de información han ido mejorando y perfeccionándose, hasta tal punto de permitir intercambiar no sólo mensajes, fotos, audio sino que podemos comprar cualquier tipo de mercancías que podamos requerir a diario.

En la búsqueda insaciable de un mundo competitivo, el que ofrezca un medio más interactivo, dinámico y atractivo, ese será el que tenga más probabilidad de sobrevivir en éste mundo tan voraz luchando por una mayor cantidad de ventas. De allí, hace pocos años surgió la posibilidad de divulgar equis tipo de datos para compras, ventas o un sinfín de otras actividades, la cual ha creado un mercado global, con un futuro sin precedentes.

Para poder llevar a cabo dichas publicaciones o “Páginas Web”, es por ende necesario manejar ciertos programas o aplicaciones que nos permitan diseñar cada uno de los detalles que cada publicación posee; para lograr ello, es necesario conocer ciertas líneas de código o las famosas “etiquetas” que son las que nos permiten direccionar cada una de las características, líneas, colores, hipervínculos, etc que conforman en conjunto ese aspecto interactivo que tanto gusta al cliente.

El estudiante debe, al final del presente módulo, manejar una estructura básica o mínima de manejo de etiquetas que les permita elaborar una página web sencilla con cierto contenido que beneficie tanto a la institución como a la sociedad.

Propósito del Módulo

El presente módulo tiene como propósito fundamental, lograr en el alumno, las competencias técnicas necesarias para que lleve a cabo la elaboración de una página web, aplicando dichos conocimientos no sólo en la Institución Educativa Colegio Técnico los Ángeles, sino también en su lugar de residencia y en poco tiempo, dentro de un ambiente laboral.

Duración del Módulo

El presente módulo fue diseñado para que tenga una duración de 10 semanas académicas o su equivalente a un período de clases escolar. Cualquier variación o retardo en su estructura, debido a múltiples motivos (festivos, problemas eléctricos, eventos de índole natural), será notificado en primer lugar al alumnado que le corresponde dicha temática, en segundo a las autoridades competentes dentro del plantel y por consiguiente, se manejarán pequeñas variaciones en el plan de aula bien sea de éste período o del próximo inmediato, de manera de que parte del conocimiento no quede sin esgrimirse.

Desarrollo del Contenido

Es importante comenzar el presente módulo, definir algunos conceptos básicos que antes de comenzar con las prácticas, deben ser manejadas con claridad.

Cuando hablamos de Página Web, nos referimos al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros.

Para llevar a cabo dicha publicación web, es indispensable manejar las denominadas “etiquetas” o líneas de comandos para elaborar, paso a paso, programándolo, dicha estructura web.

Podemos definir una etiqueta como fragmentos de texto rodeados por corchetes angulares < >, que tienen funciones y usos específicos y se utilizan para escribir código HTML. Las etiquetas o tags son la forma de escribir código HTML. Algunas de las etiquetas más usadas son las siguientes:

<html>	Apertura de un nuevo programa.	<face>	Tipo de letra.
<head>	Apertura el encabezado del programa.	colspan	Combinar celdas.
<body>	Apertura el cuerpo del programa.	<td>	Crea tabla
<title>	Agrega título a la página.	<tr>	Baja 1 espacio la cuadrícula siguiente
<h1>…<h6>	Le asigna tamaño de letra específico.	Left	Alinea la tabla a la izquierda.
<table>	Crea una tabla	Center	Alinea la tabla al centro.
<b>	Texto negrita.	right	Alinea la tabla a la derecha.
<big>	Texto + 1.	<bgcolor>	Color de fondo de la página web
<em> / <i>	Texto cursivo.	<Background>	Para anexarle una imagen como fondo
<small>	Texto pequeño.	<cite>	Para agregar el nombre de cita de libro.
<strong>	Texto fuerte (énfasis en la búsqueda).	<blockquote>	Para espacio del lado izq (cita libro).
<sub>	Texto subíndice (interlineado mínimo).	<hr/>	Crea una línea debajo, para separar.
<sup>	Texto superíndice (interlineado máx).	<Aling>	Alineación.
<ins>	Texto subrayado.	<br>	Salto de línea (enter).
<del>	Texto tachado.	<border-style>	Estilo del borde.
<tt>	Texto de teletipo.	<border-color>	Color de borde.
<img>	Agrega imagen.	<border-widht>	Ancho de borde.
<br>	Define un salto de línea.	<imput>	Entrada de datos.
<center>	Centrar imagen o texto	<type=”text”>	Tipo de entrada de texto.
<font>	Tipo de fuente del texto.	<ide=”name”>	Clave de identificación del registro.
<color>	Color del texto.	<select>	Activa combo list.
<Text-decoration>	Decoración del texto.	<margin>	Margen
<hover>	Resalta una opción al pasar el mouse	<none>	No lo ejecutes.

Ahora bien, mencionamos en el párrafo anterior que el uso de las etiquetas es de gran importancia para programar nuestra página web, más sin embargo, requerimos además de un editor de texto para transcribir dichas líneas de código y cuya extensión debe terminar en “.html”. El más sencillo, económico y usado de todos es el famoso “block de notas” del Sistema Operativo Windows. Si deseamos otros, que ofrecen características adicionales pero que no vienen en versión gratuita, podemos adquirirlos por internet comprando lógicamente una licencia de uso; entre ellos tenemos:

ü Brackets.

ü Sublime Text.

ü Atom.

ü Visual Studio Code.

ü Notepad++

ü Kate.

ü Paisa.io

ü Text mate.

ü Aptana studio.

ü Nebulous Notes.

Para finalizar la parte teórica de éste módulo, es imprescindible tener en cuenta que cada etiqueta, así como se abre, debe cerrarse de manera de cerrar ese ciclo. La diferencia entre ambos estados es que cuando se cierra la etiqueta, se le debe anteponer un signo de slash o barra inclinada “/”, por ejemplo:

<html> Aquí se apertura el programa web.

</html> Aquí se está cerrando el programa web.

A partir de éste momento iniciaremos con una serie de prácticas para que el alumno ponga en práctica los conocimientos adquiridos y desarrolle la facilidad de crear una sencilla página web como tal.

Práctica 1: (Nombre y una frase a la página)

<html>

<head>

<title> Technology </title>

</head>

<body>

<p><b>¡¡¡...Hola...!!! Bienvenidos al mundo del saber tecnológico<b></p>

</body>

</html>

Así se visualiza el programa creado en el navegador web de tu preferencia:

Práctica 2: (En éste ejemplo se identifican el tamaño exacto de cada tipo de letra, manejando las etiquetas desde la h1…hasta la h6)

<html>

<head>

<title> Technology </title>

</head>

<body>

<p><h1>ESTA LETRA ES LA 1, LA MAS GRANDE</h1></p>

<p><h2>ESTA LETRA ES LA 2, MAS PEQUEÑA QUE LA ANTERIOR</h2></p>

<p><h3>ESTA LETRA ES LA 3, MAS PEQUEÑA QUE LA ANTERIOR</h3></p>

<p><h4>ESTA LETRA ES LA 4, MAS PEQUEÑA QUE LA ANTERIOR</h4></p>

<p><h5>ESTA LETRA ES LA 5, MAS PEQUEÑA QUE LA ANTERIOR</h5></p>

<p><h6>ESTA LETRA ES LA 6, LA MAS PEQUEÑA DE TODAS</h6></p>

</body>

</html>

Así se visualiza el programa creado en el navegador web de tu preferencia:

Práctica 3: (Nombre y una frase a la página, tamaño de letra centrado y negrita)

<html>

<head>

<title> Technology </title>

</head>

<body>

<p><strong>LETRA GRANDE EN NEGRITA</strong></p>

<p>LETRA GRANDE EN NEGRITA</p>

</center>

</body>

</html>

Así se visualiza el programa creado en el navegador web de tu preferencia:

Práctica 4: (Tabla vertical izquierda)

<html>

<head>

<title> Technology </title>

</head>

<body>

<p><center><body bgcolor="#97ffff" text="blue">¡¡¡...Hola...!!! Bienvenidos al mundo del saber tecnológico</p>

<tr><td><center>¿Quiénes Somos?</td>

<tr><td><center>Visión</td>

<tr><td><center>Misión</td>

<tr><td><center>Guías Word</td>

<tr><td><center>Guías Excel</td>

<tr><td><center>Guías Powerpoint</td>

<tr><td><center>Programas</td>

<tr><td><center>Consejos</td>

<tr><td><center>Multimedia</td>

<tr><td><center>Contáctenos</td>

<tr><td><center>Sugerencias</t>

<tr><td><center>Webgrafía</t>

</body>

</html>

Así se visualiza el programa creado en el navegador web de tu preferencia:

Práctica 5: (Tabla vertical centro)

<html>

<head>

<title> Technology </title>

</head>

<body>

<p><center><body bgcolor="#97ffff" text="blue">¡¡¡...Hola...!!! Bienvenidos al mundo del saber tecnológico</p>

<tr><td><center>¿Quiénes Somos?</td>

<tr><td><center>Visión</td>

<tr><td><center>Misión</td>

<tr><td><center>Guías Word</td>

<tr><td><center>Guías Excel</td>

<tr><td><center>Guías Powerpoint</td>

<tr><td><center>Programas</td>

<tr><td><center>Consejos</td>

<tr><td><center>Multimedia</td>

<tr><td><center>Contáctenos</td>

<tr><td><center>Sugerencias</t>

<tr><td><center>Webgrafía</t>

</body>

</html>

Así se visualiza el programa creado en el navegador web de tu preferencia:

Práctica 6: (Tabla horizontal izquierda)

<html>

<head>

<title> Technology </title>

</head>

<body>

<p><center><body bgcolor="#97ffff" text="blue">¡¡¡...Hola...!!! Bienvenidos al mundo del saber tecnológico</p>

<td><center>¿Quiénes Somos?</td>

<td><center>Visión</td>

<td><center>Misión</td>

<td><center>Guías Word</td>

<td><center>Guías Excel</td>

<td><center>Guías Powerpoint</td>

<td><center>Programas</td>

<td><center>Consejos</td>

<td><center>Multimedia</td>

<td><center>Contáctenos</td>

<td><center>Sugerencias</t>

<td><center>Webgrafía</t>

</body>

</html>

Así se visualiza el programa creado en el navegador web de tu preferencia:

Práctica 7: (Tablas vertical izquierda y derecha + tabla horizontal)

<html>

<head>

<title> Technology </title>

</head>

<body>

<p><center><body bgcolor="#97ffff" text="blue">¡¡¡...Hola...!!! Bienvenidos al mundo del saber tecnológico</p>

<tr><td><center>¿Quiénes Somos?</td>

<tr><td><center>Visión</td>

<tr><td><center>Misión</td>

<tr><td><center>Guías Word</td>

<tr><td><center>Guías Excel</td>

<tr><td><center>Guías Powerpoint</td>

<tr><td><center>Programas</td>

<tr><td><center>Consejos</td>

<tr><td><center>Multimedia</td>

<tr><td><center>Contáctenos</td>

<tr><td><center>Sugerencias</td>

<tr><td><center>Webgrafía</td>

<tr><td><center>¿Quiénes Somos?</td>

<tr><td><center>Visión</td>

<tr><td><center>Misión</td>

<tr><td><center>Guías Word</td>

<tr><td><center>Guías Excel</td>

<tr><td><center>Guías Powerpoint</td>

<tr><td><center>Programas</td>

<tr><td><center>Consejos</td>

<tr><td><center>Multimedia</td>

<tr><td><center>Contáctenos</td>

<tr><td><center>Sugerencias</td>

<tr><td><center>Webgrafía</td>

<td><center>¿Quiénes Somos?</td>

<td><center>Visión</td>

<td><center>Misión</td>

<td><center>Guías Word</td>

<td><center>Guías Excel</td>

<td><center>Guías Powerpoint</td>

<td><center>Programas</td>

<td><center>Consejos</td>

<td><center>Multimedia</td>

<td><center>Contáctenos</td>

<td><center>Sugerencias</td>

<td><center>Webgrafía</td>

</body>

</html>

Así se visualiza el programa creado en el navegador web de tu preferencia:

Práctica 8: (Tablas vertical izquierda y derecha + tabla horizontal + letra negrita +animación)

<html>

<head>

<title> Technology </title>

</head>

<body>

<table><b><h3><marquee scrollamount="10">¡ ¡ ¡ ¡ ¡ . . . . . BIENVENIDOS AL MUNDO DEL SABER TECNOLOGICO . . . . . ! ! ! ! !</marquee><h3></b>

<td><center>¿Quiénes Somos?</td>

<td><center>Historia</td>

<td><center>Visión</td>

<td><center>Misión</td>

<td><center>Organigrama</td>

<td><center>Lineamientos</td>

<td><center>Guías de Estudio</td>

<td><center>Programas</td>

<td><center>Consejos</td>

<td><center>Multimedia</td>

<td><center>Diccionario Multimedia</td>

<td><center>Contáctenos</td>

<td><center>Sugerencias</td>

<td><center>Webgrafía</td>

<tr><td><center><b>TECNOLOGIA</b></td>

<tr><td><center>Teléfono</td>

<tr><td><center>Radio</td>

<tr><td><center>Televisión</td>

<tr><td><center>Computador</td>

<tr><td><center>Carro</td>

<tr><td><center>Avión</td>

<tr><td><center>Internet</td>

<tr><td><center>Satélites</td>

<tr><td><center>Smartphone</td>

<tr><td><center>Programas</td>

<tr><td><center>Consejos</td>

<tr><td><center>Multimedia</td>

<tr><td><center>¿Quiénes Somos?</td>

<tr><td><center>Visión</td>

<tr><td><center>Misión</td>

<tr><td><center>Guías Word</td>

<tr><td><center>Guías Excel</td>

<tr><td><center>Guías Powerpoint</td>

<tr><td><center>Programas</td>

<tr><td><center>Consejos</td>

<tr><td><center>Multimedia</td>

<tr><td><center>Contáctenos</td>

<tr><td><center>Sugerencias</td>

<tr><td><center>Webgrafía</td>

</body>

</html>

Así se visualiza el programa creado en el navegador web de tu preferencia:

Práctica 9: (Tablas vertical izquierda y derecha + tabla horizontal + letra negrita + animación +imagen)

<html>

<head>

<title> Technology </title>

</head>

<body>

<table><b><h3><marquee scrollamount="10">¡ ¡ ¡ ¡ ¡ . . . . . BIENVENIDOS AL MUNDO DEL SABER TECNOLOGICO . . . . . ! ! ! ! !</marquee><h3></b>

<td><center>¿Quiénes Somos?</td>

<td><center>Historia</td>

<td><center>Visión</td>

<td><center>Misión</td>

<td><center>Organigrama</td>

<td><center>Lineamientos</td>

<td><center>Guías de Estudio</td>

<td><center>Programación</td>

<td><center>Programas</td>

<td><center>Consejos</td>

<td><center>Multimedia</td>

<td><center>Diccionario</td>

<td><center>Contáctenos</td>

<td><center>Sugerencias</td>

<td><center>Webgrafía</td>

<tr><td><center><b>TECNOLOGIA</b></td>

<tr><td><center>Teléfono</td>

<tr><td><center>Radio</td>

<tr><td><center>Televisión</td>

<tr><td><center>Computador</td>

<tr><td><center>Carro</td>

<tr><td><center>Avión</td>

<tr><td><center>Internet</td>

<tr><td><center>Satélites</td>

<tr><td><center>Smartphone</td>

<tr><td><center>Programas</td>

<tr><td><center>Consejos</td>

<tr><td><center>Multimedia</td>

<tr><td><center>¿Quiénes Somos?</td>

<tr><td><center>Visión</td>

<tr><td><center>Misión</td>

<tr><td><center>Guías Word</td>

<tr><td><center>Guías Excel</td>

<tr><td><center>Guías Powerpoint</td>

<tr><td><center>Programas</td>

<tr><td><center>Consejos</td>

<tr><td><center>Multimedia</td>

<tr><td><center>Contáctenos</td>

<tr><td><center>Sugerencias</td>

<tr><td><center>Webgrafía</td>

</body>

</html>

Así se visualiza el programa creado en el navegador web de tu preferencia:

Práctica 10:

Es aquí donde el alumno va a demostrar los conocimientos adquiridos en cada una de las sesiones o prácticas, durante el período, empleando la mayoría de las etiquetas dadas y conjugándolo con la experiencia que ya posee de los ejercicios llevados en clase.

WEBGRAFÍA

https://es.wikipedia.org/wiki/HTML

http://www.acercadehtml.com/manual-html/etiquetas-html.html

https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos

https://www.uv.es/cerveron/paginasweb/notashtml.html

https://es.wikipedia.org/wiki/Etiqueta_(lenguaje_de_marcado)
https://www.brandominus.com/todas-etiquetas-html5/

https://es.slideshare.net/17kliss/etiquetas-mas-utilizadas-del-lenguaje-html

Programa Técnico en TIC´S

Módulo 4:

No hay comentarios.:

Publicar un comentario