La Magia de la Web

1. Introducción

El desarrollo y el diseño web es una rama de la programación que lo que busca es la creación y el mantenimiento de las páginas web; por otro lado, el diseño es fundamental para el éxitodeunsitioweb.

Se entiende por diseño la forma y el estilo de la página, es decir, no basta con crear una página mediante HTML y CSS, sino que la página debe resultar útil y atractiva para el usuario.

En la actualidad el desarrollo web es una de las partes más populares de la programación, y también una de las más demandadas. Entran dentro del diseño, aspectos tales como la maquetación, los colores, la distribución de elementos, el tamaño y forma de los mismos, y otros elementos del estilo y composicióndel sitio.

Finalmente, en el pasado las páginas web eran muy sencillas, pero con el avance de la tecnología se ha conseguido que en una página web se pueda hacer de todo. Por tal motivo, el HTML se creó en un principio con objetivos divulgativos de información con texto y algunas imágenes; no se pensó que llegara a ser utilizado para crear área de ocio y consulta con caráctermultimedia(loqueesactualmentelaweb).

2. Páginas Web

2.1 Historia

La World Wide Web fue inventada en 1989 por Tim Bermers-Lee, un informático de la Organización Europea de Investigación Nuclear (CERN), como herramienta de comunicación entre los científicos; y es así como surge la Web 1.0. La Web ha recorrido todo un trayecto que le ha permitido convertirse en un universo vasto de aplicaciones y páginas web interconectadasquemejoranlaexperienciadel navegante.

La web actual es el resultado del esfuerzo colaborativo de desarrolladores y usuarios y que son posibles gracias a que surgieron diversas herramientascomoel HTML5,CSS3yWebGLentreotros.

Hoy estamos en el umbral de la Web emotiva y sensorial que plantea nuevos desarrollos y el uso de dispositivos ligeros, portátilesydealtaresolución.

2.2 Definición

Una página web, página electrónica, página digital o ciber página es un documento digital complejo, que puede integrar y/o contener texto, sonido, vídeo, programas, enlaces, imágenes, hipervínculos y otros elementos, adaptado para la World Wide Web, y que puede ser accedidayvisualizadamedianteunnavegadorweb.

2.3 Tipos de Páginas Web

Página web estática: suelen ser documentos HTML almacenados como archivos en el sistema de archivos y puestos a disposición por el servidor web a través de HTTP sin necesidad de procesamientoadicional enel servidor.

Página web dinámica: documento en línea que permite la interacción con el usuario para crear experiencias personalizadas y únicas.Los contenidos varían con cada carga para ofrecer actualizaciones en tiempo real y ajustarse a las necesidades del visitante.

3. Lenguaje HTML

3.1 Definición

HTML significa lenguaje de marcado de hipertexto; es el lenguaje con el que se define el contenido de las páginas web. Básicamente se trata de un conjunto de etiquetas que sirven para definir el texto y otros elementos que compondrán una página web, como imágenes,listas, vídeos, etc.

Este lenguaje se escribe en un documento de texto, por eso necesitamos un editor de textos para escribir una página web. Así pues, el archivo donde está contenido el código HTML es un archivo de texto, con una peculiaridad, que tiene extensión .html o .htm (es indiferentecuál utilizar).

¿Estáslisto?¿Estáslista?

¡Vamosaempezarestamaravillosaaventura!

3.2 Etiquetas

Las etiquetas o tags son marcas de texto que empiezan por el carácter, de la forma, para las etiquetas de inicio: <ETIQUETA> Y que se forman con el carácter, de la forma, para las etiquetas de final de marcado:

</ETIQUETA>

Las etiquetas no son sensibles a mayúsculas/minúsculas (son caseinsensitive).

Los atributos de las etiquetas, que especifican parámetros adicionales a la etiqueta, se incluyen en la etiqueta de inicio de la siguienteforma:

</ETIQUETA ATRIBUTO ATRIBUTO…>.

La forma de dichos atributos será bien el nombre del atributo o bien el nombre del atributo, seguido de =, seguido del valor queselequiereasignar(generalmenteentrecomillado).

3.3 Estructura de HTML

Todos los documentos HTML siguen aproximadamente la misma estructura. Todo el documento debe ir contenido en una etiqueta HTML, dividiéndose en dos partes: la cabecera, contenida en una etiqueta HEAD y el cuerpo del documento (donde está la información del documento), que está envuelto por una etiqueta BODY. La cabecera contiene algunas definiciones sobre el documento: su título, marcas extradeformato,palabrasclave,etc.

Unprimerejemplosería:

Si abrimos un documento con este contenido en un navegador apreciaremos que lo que contienen las etiquetas TITLE no se visualiza en el documento, sino que el navegador lasvisualizaenlabarradetítulodelaventana.

Comentarios: en HTML podemos introducir comentarios en la página con lasmarcas <¡ - -y - -! >. El navegador ignora el contenido que se encuentre entre estas dos marcas ynolomuestraal usuario.

Ahora bien, para ampliar sus conocimientos, revisa el siguiente organizador gráfico y así podrás conocer más de HTML.

Fuente: html (s/f). Mindomo.com. Recuperado el 5 de septiembre de 2022, de https://www.mindomo.com/es/mindmap/html-2563b49b8c02453ab4f49938f37b32d7

Además,si deseas profundizar más en estepunto del tema,te sugierorevisarel siguientevideo.

3.4 Ejemplos

 Insertar Párrafos: El texto se organiza en párrafos dentro del cuerpodel documento, con laetiqueta<p></p>.

CÓDIGO

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Títulos</title>

</head>

<body>

<p>Aquí aparece mi primer párrafo de texto></p>

</body>

</html>

RESULTADO

 Insertar Encabezados: Sirven para separar secciones, por tanto el título decada sección se muestra en negrita (‘h’)y el tamaño depende de la numeración, desde ‘1’ hasta ‘6’.

CÓDIGO RESULTADO

<html>

<head>

<meta charset="utf-8">

<title>Títulos</title>

</head>

<! Encabezado >

<body>

<h1> Primer título</h1>

<h2> Segundo título</h2>

<h3> Tercer título</h3>

<h4> Cuarto título</h4>

<h5> Quinto título</h5>

<h6> Sexto título</h6>

</body>

</html>

4. Referencias Bibliográficas

 Qué es HTML .(s/f).Desarrolloweb.com. Recuperado el 5 de septiembre de 2022, de https://desarrolloweb.com/articulos/que-es-html.html

 Maestros de halcones [Maestros de halcones].(2014, 30 de mayo). Curso Básico de HTML desde 0Introducción .YouTube.https://www.youtube.com/watch? v=cqMfPS8jPys

 html (s/f).Mindomo.com.Recuperado el 5 de septiembre de 2022, de https://www.mindomo.com/es/mindmap/html2563b49b8c02453ab4f49938f37b32d7

 (S/f-b). Geoinnova.org. Recuperado el 26 de febrero de 2023, de https://geoinnova.org/blog-territorio/introducciona-la-programacion-web-estructura-y-principales-lenguajes/

Maestría en Educación, mención Gestión de los aprendizajes mediados POR tic.

Módulo: HerramientasdelaWebDidáctica

Docente: Dra.NelcarCamacho

Paralelo:1047

By: Carla Quintero Méndez

Contactos: 062013921 -0980476506

ESMERALDAS

– ECUADOR