Want to create interactive content? It’s easy in Genially!

Get started free

Introducción al Desarrollo Web

Perricoat

Created on June 11, 2024

Start designing with a free template

Discover more than 1500 professional designs like these:

Interactive Event Microsite

January School Calendar

Genial Calendar 2026

Annual calendar 2026

School Calendar 2026

2026 calendar

January Higher Education Academic Calendar

Explore all templates

Transcript

ÍNDICE

Fácil sencillo y rápido

Introducción al Desarrollo Web

Indice

Introducción

Usos

Etiquetas

Ejemplos

Vamos a intentarlo

Estructuras + Link

Despedida

INTRODUCCIÓN

El lenguaje que no es lenguaje

¿Que es el HTML?

HTML significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto). Es el lenguaje básico que se usa para crear y estructurar las páginas web. Piensa en HTML como el esqueleto de un sitio web, vacio y sin color. Es lo que le da forma y organiza el contenido, además de ser capaz de estar contenido en otros medios, o contenerlos. Y poder comunicarse, con muchisimos tipos de lenguajes existentes.Aunque este, no es un "lenguaje" de programación en si como ya lo es python, java, js, lua, c++, c , etc.

+ INFO

USOS

Una experiencia sin limites

¿Cuales son sus usos?

El HTML se puede en muchisimos ambitos, no solo academicos o de oficio, tambien en entretenimiento y ocio.

Ayuda en labores matematicas

Herramientas de Trabajo

Educación/Ocio

Podemos ver contenidos online, que nos den informacion, para aprender, es asi Wikipedia y otras formas de la web

Hay muchisimas herramientas hechas con HTML que nos permiten gestionar contenidos, incluido videojuegos

Nos ayuda en muchisimas labores, como en la creación de gráficas (excel) y medidas analiticas de datos vista desde cualquier parte

+ info

+ info

+ info

Etiquetas en Html

ETIQUETAS

<HTML> </HTML> | Abre paso al HTML<SCRIPT></SCRIPT> | Nos pone en contacto con el JS y demas scripts <h1-5></h1-5> | Son los encabezados 5 niveles <a></a> | Enlaces <body></body> | Cuerpo de la página <div></div> | <footer></footer> | Pie de página <frame></frame> | Fragmentos de otros HTML en uno mismo <form></form> | Formularios <input></input> | Campos de escrituras <hr></hr> | Barras horizontales <br></br> | Salto de linea <img></img> | Adición de imagenes

+ ETIQUETAS

EJEMPLOS

IMAGE 03 LOREM IPSUM

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.

+ info

Vamos a Intentarlo

VAMOS A INTENTARLO

Primero abre Vstudio (Virtual Studio Code) y sigue las instucciones, pero acuerdate, pon las cosas a tu gusto!

Las estructuras, tanto del HTML como del CSS son Variables, personalizadas, y siempre unicas de cada persona que las realiza, ya sea el tecnico que la monta, como la empresa que la manda a hacer, porque cada persona tiene su estilo, imagenes y demas, que la hacen unica. ¿Pero como es su estructura?

Estructuras & Link

Aqui las podemos ver

LINK HTML-CSS

CSS

HTML

  • Etiquetas de apertura y cierre.
  • Anidamiento jerárquico.
  • Define la semántica del contenido.

Como el HTML y CSS convergen en el mismo lugar, mediente el uso de una etiqueta simple

  • Ids
  • Clases
  • Herencia
  • Propiedades y Valores

+ info

+ info

+ info

DESPEDIDA

MUCHAS GRACIAS POR LA ATENCIÓN

Email

Web

perricoat@gmail.com

laperricueva.pages.dev

eldestinorp.official@gmail.com

<HTML> <Body>

<link rel="stylesheet" type="text/css" href="/css/style.css">

Aplicación en ocio

  • AnimeFLV

Uno de los usos de este sistema HTML, es la implementación de videos dentro de este, en este caso, animeFLV, es una plataforma, en la que se puede ver anime, de forma gratis, y de forma, que puedes verlo en cualquier dispositivo.

Otras aplicaciones

  • Aternos
  • Visualizador de videos.
  • Classroom.
  • Canva.
  • Documentos de google.

Otro de los usos son la creación de servidores online de juegos, como en este caso, Aternos, que es un gestionador de servidores de minecraft. Con una interfaz muy facil y sencilla para gestionar todo el servidor

ESTRUCTURA CSS

body{background-color: grey;} h1{ text-align: center; } .imggato{ height: 500px; width: 500px; } .imggato:hover{ transform: scale(1.1); transform: rotate(10deg);} .gato{ text-align: center; }

.imggato{ }

.imggato{ height: 500px; width: 500px; } .imggato:hover{ }

body{background-color: grey;} .imggato{ height: 500px; width: 500px; } .imggato:hover{ transform: scale(1.1);}

.imggato{ height: 500px; width: 500px; }

.imggato{ height: 500px; width: 500px; } .imggato:hover{ transform: scale(1.1); }

puede utilizarse dentro del mismo

Una web dentro de otra

Como en este ejemplo, he puesto la pagina oficial de tik tok de mi servidor de roleplay, dentro de esta presentación de Genialy, y esto es solo la punta del iceberg, ya que podemos hacer miles de cosas, con algo tan sencillo como HTML, y estaras viendo y preguntandote, que ahora mismo estoy limitado, ¿Qué se podria hacer fuera de Genialy, si esto es posible? ¿Se podria crear un juego con HTML? La respuesta puede ser si, pero necesitas mas cosas aparte de HTML, para poder lograr algo como eso, aunque para esto, solo me ha hecho falta una etiqueta que ya explicare en proximas diapositivas.. ¿Os parece interesante?

Aplicación en Trabajo

Gracias al HTML, podemos ser capaces de crear cosas con este estilo, en este caso es Google Docs. Donde nosotros podemos crear nuestros documentos, con una estructura "Definida" de HTML básico

Otras de las optativas que trae

  • Presentaciones de Google
  • Genialy / Canva
  • Formularios
  • ETC..
Visualizador Matematico

Gracias al HTML, somos capaces de representar con la ayuda de otros tipos de lenguajes, tablas y graficas, que luegos nos ayudan a completar trabajos. En este caso es google Sheet, con el que podemos hacer cualquier ecuación matematica, pero hay otras alternativas, que su forma visual estan hechas con trozos de HTML. Para este caso, se han utilizado, HTML (Pagina), CSS (Diseño), JS (Ecuaciones), entre otros muchos lenguajes.

ESTRUCTURA HTML

<HTML> </HTML>

<html> <link rel="stylesheet" type="text/css" href="css/style.css"> <body> <br> <h1>Mi primera Página WEB</h1> <hr> <div class="gato"> <img class="imggato" src="img/gato.png" alt="foto gato"> <br> <a target="_blank" href="https://google.com">Click Aquí</a> </div> </body> </html>

<html> <body> <br> <h1>Mi primera Página WEB</h1> <hr> </body> </html>

<HTML> <BODY></BODY> </HTML>

<html> <body> <br> <h1>Mi primera Página WEB</h1> <hr> <img src="/img/gato.png" alt="foto gato"> </body> </html>

<html> <body> <br> <h1>Mi primera Página WEB</h1> <hr> <img class="imggato" src="/img/gato.png" alt="foto gato"> </body> </html>

<html> <link rel="stylesheet" type="text/css" href="css/style.css"> <body> <br> <h1>Mi primera Página WEB</h1> <hr> <img class="imggato" src="img/gato.png" alt="foto gato"> <a target="_blank" href="https://google.com">Click Aquí</a> </body> </html>

<HTML><BODY><H1>Mi primera Página WEB</H1></BODY></HTML>

Info