HTML

/////////////////////////////////////////////////////////////////////////////////////////////////////////

App Mentimeter

Progresión: representa la solución de la situación, fenómeno o problemática a través de páginas web (hosting u hospedaje, dominio, ftp, usuarios, contraseñas), con el lenguaje de Marcas –Hyper Text Markup Language o HTML.

Meta específica: organiza y presenta información, o datos, que dan solución a un problema, a través de un sitio web con el uso etiquetas de HTML.

El lenguaje de programación HTML.

El lenguaje HTML, o HyperText Markup Language, es un lenguaje de marcado que se utiliza para crear páginas web. Se trata de un lenguaje sencillo y fácil de aprender, que permite estructurar el contenido de una página web y añadir elementos multimedia, como imágenes, vídeos o audio.

El lenguaje HTML se basa en un conjunto de etiquetas que se utilizan para indicar al navegador cómo debe mostrar el contenido de una página web. Estas etiquetas se escriben entre los símbolos < y >, y suelen estar acompañadas de atributos que proporcionan información adicional sobre el contenido.

Por ejemplo, en la red, tú puedes revisar la siguiente página web:

Y realmente, las instrucciones que se le indican al navegador para que esta página web se despliegue tal cual, son las siguientes:

¿Para qué sirve el lenguaje HTML?

El lenguaje HTML se utilizaba hace algún tiempo para crear páginas web. Actualmente ya existen muchas herramientas y plataformas muy sencillas de utilizar para la creación de páginas web (ejemplo: wix, HubSpot, WordPress, Canva, Google Sites, etcétera).

Revisar este tema te permitirá lo que hay detrás de la creación de una página Web. Esto con el fin de que te des cuenta que no todo es mágico, hay detrás una cantidad de personas que programaron esas plataformas para hacerte la vida más sencilla 😊

Para aprender HTML hay muchos recursos disponibles online, tutoriales y libros que te pueden ayudar a iniciarte en este lenguaje.

Aaah!, pero también es posible aprender HTML de forma autodidacta, explorando la sintaxis del lenguaje y practicando con la creación de páginas web sencillas.

En este Corte, compartiré contigo lo sencillo que es aprender y utilizar el lenguaje HTML.

En esta sesión iniciaremos nuestra primera página Web utilizando el lenguaje HTML.

Para iniciar, te presento algunos conceptos básicos de HTML que debes conocer:estructura de una página web: toda página web se divide en dos partes principales:

la cabecera (head) y el cuerpo (body). Es por eso que todos los ejercicios que realicemos deben contener estos elementos:

Observa 4 cosas importantes:

1. Las etiquetas y atributos deben de estar encerrados por los símbolos “<” y “>”, ya que estos permiten que los navegadores web reconozcan el código de HTML.

2. Todo lo que realicemos dentro de nuestra página web debe estar contenido en la etiqueta

<HTML>. Los nombres de etiquetas pueden estar en mayúsculas o en minúsculas, indiferentemente. Ejemplo, puedes escribir: html o HTML.

2. Todas las etiquetas deben indicar un inicio y un fin de la misma: <HEAD> </HEAD>

El inicio se indica con la etiqueta sola y el fin de la misma se antepone una diagonal (/) a la indicación de la etiqueta. Todo lo que se encuentre contenido entre el inicio y el fin de la etiqueta, se verá afectado o modificado por la misma.

4. Conviene utilizar sangrías al empezar a colocar las etiquetas correspondientes. Tal y como lo realizamos al programar en Scratch en el curso anterior de cultura digital.

Esta forma de programar facilita mucho el poder observar y corregir errores en nuestra página web.

Tu primer documento HTML.

Sigue las siguientes instrucciones para crear un documento HTML en el equipo de cómputo que podrás ver como tu primera página Web.

1. Abre el editor de textos que tiene Windows. Este editor de textos es el llamado Block de Notas.

2. Dentro del mismo, teclea lo siguiente. Es muy importante que respetes las indentaciones o sangrías:

<HTML>

<HEAD>

<TITLE>Ejemplo 1 - Mi primera página Web</TITLE>

</HEAD>

<BODY>

<CENTER><H1>Mi primera página Web</H1></CENTER>

<HR>

¡HOLA MUNDO!

Esta es mi primera página, aunque todavía es muy sencilla. <BR> Como el lenguaje HTML no es

difícil, pronto estaré en condiciones de hacer cosas más interesantes.

</BODY>

</HTML>

3. Guarda este archivo con el nombre: ejemplo1.html. Asegúrate de añadir la extensión html en tu archivo, ya que esta extensión es la que da la característica para identificar a nuestro archivo como una página Web.

4. Para cargar nuestra página web en cualquiera de los navegadores lo podemos hacer de dos maneras:

a. Arrastrando al archivo directamente al navegador.

b. Dando clic derecho sobre el archivo y seleccionando la opción “Abrir con” y seleccionar el navegador Web de nuestra preferencia.

Ojo: Nota que en cualquiera de los dos casos, no es necesario estar conectado a Internet, es decir, para ver el archivo HTML lo podemos hacer en forma local.

Lo que verás en pantalla es lo siguiente:

Los espacios en blanco y las indentaciones del texto (sangrías) las he puesto para mayor claridad, pero no son necesarias.

De hecho, podría estar todo en una sola línea. Lo importante es conservar el orden correcto de las etiquetas.

Por cierto, observa que una etiqueta puede estar anidada dentro de otra.

Observa en el ejemplo cómo lo está la etiqueta <CENTER> dentro de la etiqueta <H1>. Es muy importante, en estos casos, que las etiquetas de inicio y de cierre vayan en el orden correcto, pues de lo contrario se producirían errores.

¡Así de sencillo has creado tu primer documento HTML!

ANEXO DE INSTRUCCIONES

Actividades para resolver el Proyecto del Corte 3:

Fase 1 del proyecto:

Tema: conceptos básicos para la creación de páginas web: hosting, dominio, FTP, usuarios y contraseñas.

Objetivos específicos:

- Conocer los conceptos que dan sustento a la publicación de un sitio web

- Selección de la situación, fenómeno o problemática que les interese plasmar en un sitio web.

Actividades:

- Investigación de los conceptos básicos para la creación de páginas web: hosting, dominio, FTP, usuarios y contraseñas.

- Selección de la situación, fenómeno o problemática que les interese plasmar en un sitio web. Esto se puede realizar con varias técnicas, por ejemplo, una lluvia de ideas para seleccionar una o varias problemáticas.

- Diseño del prototipo de la página web a desarrollar.

Un ejemplo de proyecto podría ser una página web que presente, propuestas de solución a la problemática de la contaminación del aire. La página web podría incluir información sobre las causas de la contaminación del aire, los efectos que tiene en la salud y el medio ambiente, y las posibles soluciones que se pueden implementarse para reducirla.

Otra posibilidad sería una página web que presente una solución a la problemática de la falta de empleo en una comunidad. La página web podría incluir información sobre las causas de la falta de empleo, las personas que se ven afectadas por ella, y las soluciones que se pueden implementar para crear nuevos empleos.

Los estudiantes pueden elegir cualquier situación, fenómeno o problemática que les interese. Lo importante es que desarrollen un proyecto que sea creativo, informativo y útil.

Subproductos de la fase 1:

- Notas del tema en libreta o carpeta del estudiante.

- Reporte del fenómeno o problemática seleccionado que desea plasmarse en la página Web a realizar.

- Prototipo y contenido de lo que se desea presentar en la página Web.

Tarea Semana 11

Productos y actividades solicitadas en clase:

T05.C03 Participación activa en clase
T06.C03 Sitio Web, realizado en HTML, con las especificaciones solicitadas

Productos DE TAREA A ENTREGAR:

T07.C03 Adjuntar al portafolio de evidencias las respuestas del Insumo2.docx

Descargar

CD2_Corte3_Insumo2.docx >>

T08.C03 Comentario del Capítulo 10