Fundamentos de Programación

1

Bienvenida a Platzi: ¿qué necesitas para tomar el curso?

2

¿Cómo aprender programación?

3

Crea tu primer sitio web

4

Sitios web con HTML

5

Estructura de árbol en HTML

6

Instalando tu primer editor de código

7

Cómo declarar variables y usar prompt

8

Algoritmo de piedra, papel o tijera

9

Algoritmo avanzado de piedra, papel o tijera

10

Aleatoriedad

11

Refactor del código usando funciones

12

Ciclos

13

Gana 3 veces

14

Archivos de HTML y JavaScript

15

¿Qué es el DOM?

Quiz: Fundamentos de Programación

Desarrollando un juego con HTML y JavaScript

16

Maquetación con HTML

17

Sección de elegir mascota

18

¿Dónde ubicar la etiqueta script? Conectando HTML con JavaScript

19

Escuchando eventos con JavaScript

20

addEventListener

21

Manipulación del DOM

22

Enemigos aleatorios

23

Ataques en JavaScript

24

Ataques aleatorios del enemigo

25

Imprimiendo ataques del enemigo

26

¿Ganaste, perdiste o empataste?

27

Tablas de verdad

28

Creando el contador de vidas

29

¿Quién ganó el juego?

30

Reiniciando el juego

31

Ocultando elementos HTML con JS para mejorar la UX del juego

Quiz: Desarrollando un juego con HTML y JavaScript

Estilos con CSS

32

Anatomía de CSS

33

Tipos de display

34

Flexbox

35

Modelo de caja

36

Imágenes para los Mokepones

37

Estilos del botón

38

Adaptando HTML al diseño del juego

39

Layout: título y ataques

40

Adaptando JavaScript al diseño del juego

41

CSS Grid

42

Responsive Design

43

Detalles finales

Quiz: Estilos con CSS

Optimización de código

44

Revisión de código

45

Don't repeat yourself (DRY)

46

Clases y objetos

47

Clases y objetos de Mokepon

48

Arrays o arreglos

49

Objetos vs. arreglos

50

Ciclos: manipulando el DOM con iteradores

51

Declaración lenta de variables

52

Una sola fuente de la verdad

53

Mascotas aleatorias con arreglos

54

Ataques dinámicos por cada mascota: extraer

55

Renderizado dinámico en HTML

56

Eventos de click dinámicos

57

Secuencia de ataques del enemigo

58

Iniciando el combate

59

Resolviendo el reto de condicionales

60

Optimizando el frontend del juego

Quiz: Optimización de código

Mapa con canvas

61

Introducción a canvas: dibujando con JavaScript

62

Moviendo a Capipepo hacia la derecha

63

Movimiento hacia todas las direcciones

64

Movimientos con el teclado

65

Imágenes y personajes de fondo

66

Métodos en las clases

67

Obstáculos y colisiones

68

Combate entre mokepones colisionados

69

Mapa responsive

70

Botones bonitos y viewport

Quiz: Mapa con canvas

Backend: videojuego multijugador

71

¿Qué es backend?

72

Instalación de Node.js y NPM

73

Terminal de comandos y Node.js

74

Servidor web con Express.js

75

HTTP, localhost, servidores y puertos

76

Express.js y fetch: API REST con JavaScript

77

JSON y POST: mokepon online

78

Transmisión de coordenadas

79

Mokepones dinámicos en el mapa

80

Optimizando el mapa del juego

81

Batalla entre jugadores

82

Consumiendo la API de ataques del enemigo

Quiz: Backend: videojuego multijugador

Próximos pasos

83

Probando el juego en varios dispositivos

84

¿Y ahora qué curso tomar?

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Sitios web con HTML

4/84
Recursos

Seguro ya sabes que un sitio web es, en su forma más básica, un archivo HTML. Ahora, acompáñame a descubrir el funcionamiento de este lenguaje, y cómo puedes usarlo para empezar a crear sitios web 🙂.

Fundamentos de HTML

El lenguaje de marcas de hipertexto (HTML) tiene reglas como cualquier otro lenguaje. Y no son tan complicadas cuando te tomas el tiempo para explorarlas poco a poco 😉

1️⃣ En HTML la información se organiza con etiquetas

Estas consisten en una palabra o una letra encerradas entre los símbolos “<” y “>”.

Ej:

<title>

2️⃣ Cada pieza contenida en tu sitio web la encierran etiquetas de apertura y de cierre

Las etiquetas de cierre tienen un “/” antes de la palabra o letra que compone la etiqueta.

Ej:

<title>Este es el texto que aparece en la pestaña del navegador</title>

3️⃣ Las etiquetas se escriben sin espacios internos ni mayúsculas

Un error de este estilo (de sintaxis) puede causar que el navegador no entienda la etiqueta.

4️⃣ Existen algunas etiquetas que se cierran a sí mismas

Estas generalmente no tienen contenido, así que empiezan y terminan con la etiqueta de apertura. Sin embargo, son muy útiles para introducir metadatos, organizar elementos de la página, o importar elementos de otras fuentes.

Solo hay 14 de estas etiquetas. Pero las más comunes son:

Etiqueta Uso
<br> Introduce un salto de línea en la página.
<img> Introduce imágenes a tu sitio web.
<input> Introduce elementos para que el usuario te de información (cómo botones, campos de texto, listas desplegables, entre otros).
<link> Se usa mucho para cargar hojas externas de estilos (archivos “.css”) para definir los estilos de tu sitio web.
<meta> Se usa para darle metadata a tu sitio web (para que el navegador y buscadores cómo google puedan trabajar mejor con él).

Ojo, hay una variante de HTML llamada XHTML que requiere que estas etiquetas terminen en “/>”. Por ese motivo, muchos developers acostumbran a terminar estas etiquetas de esa manera, incluso en el HTML común y corriente.

Esto no es obligatorio en el HTML que tú estás aprendiendo ahora, pero es bueno que lo tengas en mente para cuando trabajes con otros developers 👍

Ej:

<meta charset=""utf-8"" />

<img src=""./assets/img/Logo.svg"" alt=""Logo de Batata Bit"" />

5️⃣Hay etiquetas cuyo trabajo es contener otras etiquetas

Cuando esto ocurre, se acostumbra usar la “indentación” de código para distinguir la jerarquía de las etiquetas.

En palabras más simples: Solo tienes que pulsar la tecla “tab” en las etiquetas hijo para que estas se muevan un poquito hacia la derecha. Eso te ayudará a distinguir a los padres de los hijos con mayor facilidad.

Ej:

<picture class=""logo"">
    <img src=""./assets/img/Logo.svg"" alt=""Logo de Batata Bit"" />
</picture>

6️⃣ Muchas etiquetas HTML utilizan atributos

Estos son información adicional que se agrega en la etiqueta de apertura para personalizar sus propiedades y funcionalidad.

Estos siguen el siguiente patrón:

NombreDelAtributo=”ValorDelAtributo”

Aprenderás más sobre los atributos poco a poco. Por ahora lo importante es que sepas que existen 👍

Por cierto, en HTML, la combinación de etiquetas, atributos y contenido recibe el nombre de elemento.

Partes de un elemento HTML

7️⃣ Puedes encontrar una lista completa de las etiquetas HTML que puedes usar

Con explicaciones y ejemplos de uso, en este sitio web.

También puedes encontrarlas en referencias oficiales como las de W3Schools o Mozilla Developers.

Las más comunes para escribir son:

Etiqueta Uso
<p> “Paragraph”, te permite introducir párrafos.
<a> “Anchor”, te permite introducir hipervínculos.
<b> “Bold”, te permite escribir en negritas.
<i> “Italics”, te permite escribir en cursiva.
<u> “Underline”, te permite escribir texto subrayado.
<ul> “Unordered list”, te permite crear una lista desordenada (con puntitos)
<ol> “Ordered list”, te permite introducir una lista ordenada (con números o letras).
<li> “List item”, se colocan dentro de un <ul> o un <ol>, y se convierten en los elementos de la lista.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> “Heading”, insertan títulos y subtítulos en tu sitio web. El número que acompaña a la “h” representa el nivel del título, dónde h1 tiene la mayor jerarquía.

8️⃣ Recuerda, los archivos HTML cargan de arriba hacia abajo, un elemento tras otro

Esto significa que el orden en el que escribas el HTML sí importa. Esos son todos por ahora 😁 Recuerda experimentar un poco con las etiquetas que conociste el día de hoy 😉

Para profundizar un poco más, no te pierdas de la siguiente clase: Estructura de árbol en HTML.

Contribución creada por: Jhonkar Sufia (Platzi Contributor).

Aportes 442

Preguntas 189

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

HTML es muy sencillo de entender 💚

.

Es fácil, imagina que tienes una hojita en blanco y quieres empezar a añadir cositas, en este caso, usamos HTML para empezar a añadir cositas en esa hojita en blanco 👇.
.
Siguiendo el ejemplo de la clase, si yo quiero agregar un título a mi página web ¿qué debería hacer? Pues por medio de HTML usar la etiqueta correspondiente para añadir ese título 😄, simplemente hay que decirle:
.
<h1>Este será mi título 😼</h1>
.
Ahora imagina que quieres agregar un párrafo… ¡también podemos! Solamente hay que decirle a HTML que me agregue un párrafo, así 👇:
.
<p>Aquí adentro puedo poner mi párrafo 😄</p>
.
¡Así de fácil! Simplemente tienes que decirle a HTML qué es lo que quieres agregar y él lo agregará. HTML es como un robotcito que siempre te hará caso y agregará todo lo que quieras 💚.
.

¿Y cuál es la diferencia entre <h1> y <title>? 😦

.
Bueno, <title> solamente lo usaremos para definir el título de la pestaña en nuestro navegador, solo sirve para eso, esta etiqueta nunca se pintará en nuestra página web, solo en la pestaña del navegador. Por otra parte, <h1> sí se pintará dentro de nuestra página web y esta etiqueta la podemos usar para poner títulos visibles dentro de la misma 😄.

Aca podemos ver algo mas visual para entender en que nos ayuda HTML, CSS Y Javascript.

**NO SE DESANIMEN! **si en alguna clase no comprenden algo, a mi me paso lo mismo y ahora ya se programar en css y javascript!! Nunca paren de aprender

4 - Sitios web con HTML

HTML funciona como un arbol, y es donde va todo el contenido de una pagina Web. Tambien se puede pensar como cajas dentro de otra 📦

Partes de un HTML:

  • **head** → la parte que no se ve y es donde va el código
    • Se crea con <head> y cierra con </head>
    • <title></title> → Agrega una titulo
  • **body** → la parte que se ve y es donde va el titulo, texto, descripción etc…
    • Se crea con <body> y cierra con </body>
    • <h1></h1> → poner texto grande
    • <p></p> → agrega un párrafo
<html>
<head>
		<title>Titulo de la pagina</title>
</head>
<body>
		<h1>Esto es un texto grande</h1>
		<p>Esto es un parrafo</p>
</body>
</html>

<aside>
💡 -La programación es exacta en su sintaxis.

-MUY importante → recordar que los programas corren de arriba a abajo, siempre.

</aside>

Sitios web con HTML



HTML es un lenguaje que funciona como un arbolito 🌲 o cajitas 📦 donde introducimos todo el código de la página web.

Para iniciar un archivo HTML se usan las etiquetas <html></html>

Un sitio web tiene dos partes el cuerpo (se ve) y la cabeza (no se ve).

Para crear la cabeza se usa la etiqueta <head></head>. Lo que va adentro de esta etiqueta no es visible dentro del sitio web y dentro de ella va el código.

Para crear el cuerpo se usa la etiqueta <body></body>. Lo que va dentro de esta etiqueta es visible en el navegador, dentro de ella puede ir el título, texto, etc.

La programación es exacta en su sintaxis.

  • <title></title> es una etiqueta que se usa para ingresar el título de la página.
  • <h1></h1> es una etiqueta de título.
  • <p></p> es una etiqueta de párrafo.


La estructura seria la siguiente:

<html>
<head>
	<title>Mi primera programada</title>
</head>
<body>
	<h1>Primer intento de website</h1>
	<p>Este es nuestro primer programa completo</p>
</body>
</html>

La forma en que los sitios web cargan es secuencial, es decir de arriba hacia abajo.

Hola, les dejo una serie de etiquetas de html que el profe Diego de Granda Incluye en su curso definitivo de HTML.

Los cursos que recomienda Freddy son bastante buenos muy recomendados!! 💚💚

Para los que quieren profundizar más, les dejo aquí un link para que entiendan aún más sobre la sintáxis

Les recomiendo Visual Studio Code te pone la estructura/plantilla HTML de forma automática, pueden descargarlo aqui:
https://code.visualstudio.com

Es importante para el seo de una pagina que las H1 se utilicen solo para nombrar la razon principal de la pagina . el titulo de la misma , porque los robot de Google toman las H1 evidentemente como lo principal y las H2 como un indice y de esa manera el resto no es un indicador de tamaño de la letra…

Para todos los que quieres seguir inmersos no solo en html sino en un lenguaje programación , les recomiendo https://programmingforcats.com/ , muy divertido , muy curioso y relajado 💪🏽

Lo mejor de HTML , es muy facil de comprender en caso que no lo hayas hecho velo asi: El nombre de las etiquetas en ingles nos indica que funcion tiene.

  • Por ejemplo con head sabes que hablas de la cabeza del sitio

  • Con body sabes que ahi escribiras el cuerpo de nuestro sitio web.

Espero mi comentario te motive.😃

Quiero compartir con todos ustedes un proyecto diseñado y programado por mí, es una Documentación Técnica de HTML5. Donde explico con teorías y con ejemplos el lenguaje de HTML. Espero que sea de mucha utilidad y de mucho interés. 💚 documentacion-html5.tech

NOTA: Si no funciona dándole clic escríbelo manual en el buscador del navegador.

  • ¿Etiquetas html?
  • Hay una serie de etiquetas que son las más usadas para crear cualquier documento HTML, a continuación :

<body> para el contenido
<head> para información sobre el documento
<div> división dentro del contenido
<a> para enlaces
<strong> para poner el texto en negrita
<br> para saltos de línea
<H1>…<H6> para títulos dentro del contenido
<img> para añadir imágenes al documento
<ol> para listas ordenadas, <ul> para listas desordenadas, <li> para elementos dentro de la lista
<p> para parágrafos
<span> para estilos de una parte del texto
<body> </body>
Indica la parte del cuerpo del contenido de un documento HTML. Es una etiqueta esencial para cualquier documento ya que indica donde empieza el contenido visible del documento.

<head></head>
La parte superior del documento HTML, es donde podremos indicar los metadatos: título del documento, hojas de estilos, javaScript, CSS

<div> </div>
Un elemento que es usado mayoritariamente para agrupar otros elementos y actuar como plantilla de otros controles. La etiqueta <div> nos ayuda a estructurar el documento en secciones.

<a> </a>
Es una etiqueta que nos ayuda a poder crear un enlace a una página web. El atributo principal de la etiqueta HTML es href, donde pondremos el enlace al que queremos conectar. Otro atributo muy usado es target, el cual nos sirve para indicar si el enlace se abrirá en una nueva ventana o en la misma.

  • Ejemplo HTML:

Quiero destacar solo <strong>esta palabra</strong>.

<br>
Con esta etiqueta HTML le podemos decir al navegador que viene un salto de línea. Nos sirve para hacer el texto más leíble.

<H1> </H1> …. <H6> </H6>
Hay diferentes niveles de títulos, del 1 al 6. Las etiquetas <H + número> nos permiten indicar la importancia del título y para estructurar el contenido, de esta forma ayudamos a los bots a entender la importancia del contenido.

<IMG> </IMG>
Usamos la etiqueta IMG para mostrar imágenes dentro del contenido. Necesita el atributo src para funcionar, ya que será donde indicaremos desde donde tiene que mostrar la imagen.

<OL> <li></li> <OL> | <UL> <li></li> <UL>
Las etiquetas OL y LI nos sirven para crear listas, OL para listas ordenadas y UL para listas sin orden. Dentro de las listas, los elementos se identifican con la etiqueta LI.

  • Ejemplo HTML:

<ul>

<li>Primer elemento</li>

<li>Segundo elemento</li>

<ul>

<P> </P>
Etiqueta que nos sirve para agrupar texto dentro de un parágrafo. El propósito es poder hacer el contenido más fácil de leer y organizado.

<SPAN> </SPAN>
Con la etiqueta podemos personalizar el estilo de solamente una parte del texto.

Ejemplo HTML:

Solo <span style=”color: red;”>esta palabra</span> en rojo.

Ventajas y desventajas del HTML
Como todo lenguaje informático, el HTML tiene sus ventajas y sus desventajas. Entre las ventajas, podríamos destacar que es apto para principiantes, que tiene una curva de aprendizaje poco profunda y que es accesible. Además, es de código abierto y completamente gratuito y se ejecuta de forma nativa en todos los navegadores web.

Por otro lado, entre las desventajas, se encuentra que para una funcionalidad dinámica es posible que haya que utilizar JavaScript o un lenguaje back-end como PHP. Además, los usuarios deben crear páginas web individuales para HTML, incluso si los elementos son los mismos y es posible que los navegadores más antiguos no muestren las etiquetas más nuevas.¿Cuáles son las etiquetas HTML básicas?
Hay una serie de etiquetas que son las más usadas para crear cualquier documento HTML, a continuación las explico:

.<code> …
<body>… para el contenido
<head> para información sobre el documento
<div> división dentro del contenido
<a> para enlaces
<strong> para poner el texto en negrita
<br> para saltos de línea
<H1>…<H6> para títulos dentro del contenido
<img> para añadir imágenes al documento
<ol> para listas ordenadas, <ul> para listas desordenadas, <li> para elementos dentro de la lista
<p> para parágrafos
<span> para estilos de una parte del texto
<body> </body>
Indica la parte del cuerpo del contenido de un documento HTML. Es una etiqueta esencial para cualquier documento ya que indica donde empieza el contenido visible del documento.

<head></head>
La parte superior del documento HTML, es donde podremos indicar los metadatos: título del documento, hojas de estilos, javaScript, CSS…

<div> </div>
Un elemento que es usado mayoritariamente para agrupar otros elementos y actuar como plantilla de otros controles. La etiqueta <div> nos ayuda a estructurar el documento en secciones.

<a> </a>
Es una etiqueta que nos ayuda a poder crear un enlace a una página web. El atributo principal de la etiqueta HTML es href, donde pondremos el enlace al que queremos conectar. Otro atributo muy usado es target, el cual nos sirve para indicar si el enlace se abrirá en una nueva ventana o en la misma. 💚

Les quiero recomendar un buscador para programadores (similar a Google pero, te muestra todas las referencias e sitios para ayudar a un programador).

Les comparto mis notas de clase, por ahora estan en construcción mientras voy avanzando!

Enjoy

Les comparto un resumen de la estructura básica de las paginas web y sobre todo de las partes básicas del documento.

también podemos recargar con F5! 😃

Cuando comenzé con html, me asusté, era demasiado texto que no podía entender, ahora es mi mejor amigo 😄

Hago cada actividad y se la presumo a mis amigos programadores, es divertido que se rían de lo que escribo, espero llegar tan lejos como ellos y recibir el apoyo siempre.

<html> es un lenguaje de marcado
<head> encabezado de codificacion
<title>titulo de pestaña </title>
</head>

<body>Cuerpo de pagina

Etiquetas de texto:
<b> en negrita
<strong> importante en semantica negrita
<i> cursiva
<em> enfatiza en semantica cursiva
<u> subrrallado
<big> letra grande
<small> letra pequeña
<sub> subindice
<sup> superindice
<ins> texto insertado
<del> borrado
<mark> marcado
<p> parrafo
<h1>titulo encabezado
<h2> subtitulo
<hr/>no tiene etiqueta de cierre hace salto de linea y en la parte superior aparece una linea
<br/> tampoco tiene etiqueta de cierre hace salto de linea

</body>
</html>

Resumen

Los sitios web tienen una parte que se ve (body) y una parte que no se ve (head)

La estructura básica de un documento html es:

<html> //etiqueta de apertura del documento tipo HTML
<head> //es la parte que no se ve
  <title>Mi primera paginita</title> //título que se muestra en la pestaña
</head> //etiqueta de cierre del head
<body> //parte que si se ve
  <h1>Primer intento de website</h1> //titulo
  <p>Este es nuestro primer programa completo y profesional</p> //párrago
</body> //etiqueta de cierre del body
</html> //etiqueta de cierre del documento HTML

Todo debe estar escrito de forma exacta para que el código funcione

Muy bueno el curso y una didáctica para enseñar de maravillas. Los felicito

Clase 4

Html

Html es donde va todo lo que vamos a poner en nuestra página.
Se crea html y ahí voy a guardar todo mi sitio web.
Se abre y se cierra así:
<html>
</html>
Los sitios web tienen una parte que se ve y otro que no se ve.
La que se ve es el cuerpo y la que no se ve es la cabeza.
La cabeza se crea con la palabra “head”. También se abre y se cierra:
<head>
</head>
El cuerpo se sabre y se cierra con la palabra “body” así:
<body>
</body>
Head y body viven dentro de html y tienen el mismo nivel o están a la misma altura
Dentro de head se puede crear una estructura que se llama title sea abre: <title> y se cierra </title> y adentro ponemos lo que queremos que diga el titulo así:
<title>Mi primera paginita</title> aquí el nombre del título es: “mi primera paginita”

Dentro de body se pueden poner títulos y párrafos
Los títulos se colocan con la etiqueta “h” y los párrafos con la etiqueta “p” y se abren y cierran así:
<h1> </h1> y adentro escribo lo que quiero que diga el título
<p></p> y adentro escribo lo que quiero que diga el párrafo

La forma en la que los sitios web cargan es secuencial, y las compus van mas rápido de lo que el ojo lo puede ver, pero carga de arriba hacia abajo

Algo así es HTML, CSS y JS

Todos los sitios web tienen un cuerpo o body (la parte que se ve; titulo, descripcion, etc.) y una cabeza o head (la parte que no se ve; el código.)

  • Para iniciar un sitio web con la estructura básica HTML se deben ejecutar las siguientes etiquetas:
    <html>
    <head>
    </head>
    <body>
    </body>
    </html>
  • Luego podremos ir desarrollando, agregando un título:
    <html>
    <head>
    <title>Mi primera página</title>
    </head>
    <body>
    </body>
    </html>
  • Luego agregaremos el contenido del sitio web:
    <html>
    <head>
    <title>Mi primera página</title>
    </head>
    <body>
    <h1>Primer intento de website</h1>
    </body>
    </html>
  • La programación es exacta en su sintaxis. Los sitios web cargan de manera secuencial, ósea, desde arriba hacia abajo.
  • Sigamos desarrollando el sitio. Ahora agregaremos un parrafo, utilizando la etiqueta <p>:
    <html>
    <head>
    <title>Mi primera pagina</title>
    </head>
    <body>
    <h1>Primer intento de website</h1>
    <p> Este es nuestro primer programa completo y profesional</p>
    </body>
    </html>

El HTML es para separar seccioes de una pagina, dentro de <html> está toda la pagina, dentro de <head> donde adjuntamos otras herramientas que usamos y en el <body> empezamos a crear lo que queremos que se vea en nuestra página

Ya estoy en 7mo semestre de ingeniería de sistemas y, aunque me gusta y me llama mucho la atención, lo que he aprendido en las clases de programación es poco… Acá estoy, animado y queriendo poder aprender mucho. Si lo quiero lo puedo y con la ayuda de todos ustedes lo voy a lograr!!

Esto es largo y tendido. Paso a paso iré avanzando. Lo importante es comprender los pasos que vamos llevando.

<html>
<head>
<title>Herrera Perez Servicios</title>
</head>
<body>
<h1>Herrera Perez Servicios</h1>
<p><u>Estamos para servirles.</u> Puede visitarnos las veces que desee.</p>
<p>Le ofrecemos los mejores productos del mercado a los mejores precios.</p>
<p><b>Gracias por visitarnos</b></p>
</body>
</html>

Hice este pequeño ejercicio. Lo visualicé así:

Herrera Perez Servicios
Estamos para servirles. Puede visitarnos las veces que desee.

Le ofrecemos los mejores productos del mercado a los mejores precios.

Gracias por visitarnos

Cuando dijo: "cuando eres una programadora" Me llegó al 💖

En esta nueva versión del curso de programación básica estamos programando en el bloc de notas, en el curso anterior desde un principio descargamos un editor de códgio que fue Atom, luego yo empecé a trabajar en Visual Studio Code.
La ventaja de trabajar con un editor de códgio es que tiene muchas ayudas, pero entiendo que si este es un curso desde los fundamentos básicos primero debemos aprender bien los fundamentos y desúes trabajar con herramientas más sofisticadas como lo es un editor de código

SIIIUU mi primer sitio web

Cuando Freddy dice que el código es como “cajitas”, la idea más precissa es que es como una muñeca rusa que es una serie de muñecas una dentro de la otra

Las etiquetas HTML llevan una etiqueta de aperura y de cierre y entre medio lleva el comntenido

<nombreEtiqueta> Contenido </nombreEtiqueta>

Las etiquetas de aperura son

<nombreEtiqueta>

Las etiquetas de cierre son

</nombreEtiqueta>

Siempre las etiquetas se escriben abriendolas y luego cerrandolas, salvo que algunas no tengan contenido como por ejemplo

<meta />

como tambien se puede escribir

<meta>

HTML es fácil de aprender, lo único que debemos hacer, es practicar, para poder aprender las etiquetas y saber que hace cada una de ellas.

Sitios web con HTML 📃


  • HTML es un lenguaje que funciona como un árbol.
  • Las etiquetas son como cajas dentro de cajas (muñecas rusas) donde guardamos cosas específicas.
  • todo sitio web tiene partes que se ven (cuerpo o body) y otras que no se ven (cabeza o head). En el cuerpo se ubica lo que podemos observar de la página, títulos, párrafos, enlaces, imágenes, etc. En la cabeza va el código fuente de la página y no podemos verlo, está oculto ejecutándose.
  • La programación es exacta en su sintaxis.
  • La cabeza y el cuerpo en HTML se encuentran en un mismo nivel.
  • Cada etiqueta en HTML debe abrirse y cerrarse de una forma determinada, aunque no siempre se cumple esa regla: <code> </code>
  • Los sitios web se ejecutan de forma secuencial y de arriba hacia abajo.
<html>
<head>
	<title>My first page</title>
</head>
<body>
	<h1>My first website</h1>
	<p>Este es nuestro primer intento de sitio web</p>
</body>
</html>

Si en algún momento en el bock de notas no sabían como comenzara a escribir no desde el inicio sino mas adelante como en el minuto 1:20, es con la tecla TAB luego de presionar **ENTER **, y ahorrarse presionar 8 veces espacio jajaja, y gracias por este curso la verdad !

Sinceramente no estaba segura si la programación era lo mio, pero tampoco me había dado la oportunidad, y ahora que empece este curso me estoy enamorando cada día…

¡Esto es de lo mejor!

El:" las computadores funcionan a la velocidad de la luz"
yo con mi pc con windows 98: piola😎

Muchisimas gracias Fredy me encuentro muy entusiasmado con estas primeras clases

Me emociona esta manera de aprender, y es realmente divertido.

Buenísimoooo !! Esta re bueno el curso. Gracias por crear y creer en Latinoamerica : )

Así sí da gusto aprender!

ya havia aprendido todos estos pasos, en una ocasion anterior, pero de otro profesor y manera; en tu caso es mas didactico y nunca esta de mas refrescar el conosimiento gracias por la oportunidad…

En esta sesión Freddy nos enseña la estructura básica para empezar a programar en HTML, que es la siguiente:
.
<html>
<head>
</head>
<body>
</body>
</html>
.
Podríamos decir que HTML funciona como un árbol, o como cajas (unas dentro de otras) debido a la estructura que presentan sus etiquetas, por ejemplo, las etiquetas <html> y </html> definen la “caja” en la que guardaremos nuestro sitio web.
.
Los sitios web tienen una parte oculta llamada head, donde se escribe el código, y otra parte visible llamada body, que mostrará el contenido que así hayamos decidido.
.

  • Las etiquetas se indican usando los signos menor que (<) y mayor que (>).
    .
  • El uso del slash (/) indica el cierre de una etiqueta (o de una caja).
    .
    *Para poder funcionar, la programación debe ser exacta en su sintaxis, por eso es imprescindible asegurar una escritura correcta.
    .
    *Los sitios web cargan de forma secuencial, lo que significa que el código funciona de arriba hacia abajo, un dato importante a considerar cuando se estudia programación.
    .
    *Los accesos directos de teclado suelen ser prácticos, con lo cual resulta conveniente aprenderlos poco a poco.

Quiero compartir con todos ustedes un proyecto diseñado y programado por mí, es una Documentación Técnica de HTML5. Donde explico con teorías y con ejemplos el lenguaje de HTML. Espero que sea de mucha utilidad y de mucho interés. 💚 documentacion-html.tech

NOTA: Si no funciona dándole clic escríbelo manual en el buscador del navegador.

html y css me parecen sencillos y perfectos para adentrarse en el mundo de la web

Se carga de arriba hacia bajo… importante recordar

Mis apuntes:

  • El código no da opción para que no sea perfecto.

  • La programación es exacta en su sintaxis.

  • El head es lo que no se ve.

  • El body es lo que se ve.

Programing for cats.Para los que quieran en paralelo acercarse de una forma amena a la programación les recomiendo este pequeño texto, muy divertido !
Modelos de calidad del software, un estado del arte. La implementación de ITIL (Information Technology Infrastructure Library) en empresas como Eurotrans en Holanda y Outsorcing S.A en Colombia demuestra cómo esta estructura puede optimizar la gestión de servicios de TI, mejorando la eficiencia y efectividad operativa. ITIL proporciona un marco integral que abarca desde la perspectiva del negocio hasta la gestión de la infraestructura, lo cual es esencial para empresas que buscan mejorar la calidad y la consistencia de sus servicios. Eurotrans y la Adopción de ITIL En el caso de Eurotrans, una empresa dedicada al transporte de mercancías y pasajeros por carretera, la implementación de ITIL fue crucial para evolucionar su operativa y alcanzar los objetivos organizacionales. El análisis inicial de los procesos definidos por ITIL permitió identificar qué aspectos ya estaban implementados y cuáles requerían desarrollo. Este análisis detallado, incluyendo un estudio de viabilidad y valoración de la situación actual, fue esencial para asegurar que la transición fuera coherente y alineada con los objetivos de ITIL. La integración de PRINCE2 para evaluar la coherencia y aproximación de los proyectos relacionados con ITIL refuerza la estructura de gestión de proyectos de Eurotrans. La decisión de implantar un servicio de escritorio centralizado resalta la necesidad de mejorar la interacción entre clientes, proveedores y la organización. La adopción de estrategias para la gestión de incidencias, problemas, cambios, configuración y software muestra un enfoque holístico hacia la mejora continua y la resolución de problemas. Outsorcing S.A y la Eficiencia Operativa mediante ITIL Outsorcing S.A, una empresa colombiana de servicios de TI, también experimentó mejoras significativas al implementar ITIL. Esta empresa se benefició de las buenas prácticas de ITIL para optimizar sus procesos de entrega y soporte de servicios. La gestión de niveles de servicio, disponibilidad, capacidad, continuidad y financiera, permitió a Outsorcing S.A no solo mejorar sus servicios actuales, sino también prepararse para futuras demandas y desafíos. Reflexión y Conclusión La implementación de ITIL en estas dos empresas evidencia cómo un marco bien estructurado puede transformar la gestión de servicios de TI. ITIL proporciona una guía clara y detallada que ayuda a las empresas a identificar áreas de mejora, establecer procesos eficientes y garantizar una entrega de servicios consistente y de alta calidad. La adopción de ITIL no solo mejora la satisfacción del cliente, sino que también aumenta la eficiencia operativa y la capacidad de adaptación ante cambios en el entorno empresarial. Referencias Herrera, A. (2010). Implementación de ITIL en Eurotrans. Quevedo, L. (2009). Implementación de ITIL en Outsorcing S.A. Aquí pueden consultar el documento donde consulte mi información <https://drive.google.com/file/d/1GD-2qfRgH0thgZzW1YCVw4l52IkOLOMD/view?usp=sharing>
mi primera chamba
mi primera chamba

les recomiendo que se creen un archivo world, un archivo txt o si tienen alguna aplicación o sitio web donde puedan guardar sus apuntes, anotes, cosas aprendidas, etc. Para que lo tengan a la mano al momento de que se les olvide algo, al igual que esto siempre es de andar practicando para que no se les olvide lo aprendido y lo que uno sabe.

<html> <head> <title>Mi primera paginita</title> </head> <body> <h1>Primer intento de website</h1> <p>Este es nuestro primer programa completo y profesional</p> </body> </html>

<html>
<head>
<title>miprimerpaginaweb</title>
</head>
<body>
<h1>mi primer intento de programada</h1>
<p>este es mi primes pagina web y me gustaria contarte como la hice</p>
</body>
</html>

Fundamentos de la computación y la ingeniería del software, básicos para empezar a programar. HTML es muy fácil, funciona de arriba hacia abajo(secuencial) . Los mejores programadores del mundo se saben todos los accesos directos del teclado.

como van las clases las veo muy interactivas y demasiado faciles, espero y sigan asi

HTML tiene su estructura como la de un árbol

Este esta compuesto por “head” y un “body”

head: Esta es la parte de las paginas web que no se ve y donde se escribe el código.

body: Esta es la parte visible de las paginas web.

Nuevas etiquetas aprendidas hoy

<title>: Le asigna un nombre a nuestra pagina.
<p>: Nos permite escribir párrafos.

<html> (inicio) <head> <title>Mi primera pagina</title> (código) </head> <body> <h1>Primer intento de website</h1> (cuerpo, escritura, texto, contenido que se puede ver) <p>Este es nuestro primer programa completo y profesional</p> </body> </html> (final)

Freddy: "Siendo justos ese codigo esta bien feo"
Yo: Miro mi codigo
Also yo: No pos si. 🥹😢

Aquí llegué a confundirme, ya que Fredy menciona que el código se lee de arriba hacia abajo, pero luego en JavaScript, primero creas el código y luego puedes asignar valores al código de arriba, mi lógica me decía que primero era asignar los valores y luego crear el código

Con esto quiero aportar lo que he entendido:
<!DOCTYPE html>: Es para que el explorador entienda que tu pagina Web es versión actulizada.

<html>: Es la estructura donde irá toda el organigrama de la web.

</head>: Es donde irá toda la codificación de la pagina, donde esta no se verá en lo visual de la web.

<body>: Es donde estará todo el contenido de la web.
Dentro del “<body>” debe haber una organiación, de los titulos dentro de la web, como <h1> y parrafos <p>.
Entre otros mas.

Cada etiqueta, debe estar en su lado correspondiente para darle sentido y cuerpo a la estructura a la pagina.

HTML es el esqueleto, el mapa indicatorio de como será la pagina web.

Excelente curso, el profe lo hace super didactico.

estructura de archivo --> nombre.extension ejemplo pagina.html

html --> lemguaje de etiquetas de hipertexto

css --> lenguaje de declaracion de estilo de diseño

<nombre></nombre> o <nombre> --> estructura de una etiqueta

<strong>palabra</strong> --> negrita

<html></html> --> contiene la pagina web
<head></head> --> cabecera de la pagina web
<body></body> --> cuerpo de la pagina web
<title></title> --> titulo

#la programacion es exacta en su sintaxis

He tomado tantos apuntes en solo estas 4 secciones que hasta yo me sorprendo! este un vitazo, gracias compañeros y profesor

¡Gracias por la clase!

Hola! Me Llamo Lina y soy nueva aquí. ¿Cómo hago para adjuntar una fito en esta casilla de aportes? Cuando lo intento me sale esto

Gracias , este sera mi primer curso de muchos en PLATZI

Mi aporte

<html>
<head>
	<title>My first pague</title>
</head>
<body>
	<h1>Hola mundo</h1>
	<p>como <strong>estas?</strong></p>
</body>
</html>

Primera practica

yo ya estaba frustrada porqiue nada de lo que hacia en el texto salia en la pagina y resulta que habia puesto en la etiqueta del archivo HTLM jajaajajjs

RESUMEN CLASE 4: SITIOS WEB CON HTML
.
Buen dia. 😃
Quisiera compartir con ustedes el experimento que hice con diferentes etiquetas de HTML.

La pagina en donde lo hice esta en los recursos de la clase.

Y tambien mi resumen de la clase que espero les sea util.

hola soy nuevo tengo 16 años estoy aprendiendo bastante con estos cursos ademas son muy fasiles solo es cuestion de practica

<html>
<head> 
<Title>Vamos con el blog</title>
</head>
<body>
<h1>Esta página será <strong>increible</strong></h1>
<h2>Estoy avanzando mucho en mi proyecto</h2>
<p>Después de ir juntando las partes del proyecto de a poquito ¡estoy cada vez más cerca de verlo nacer!</p>
</body>
</html>

Cuando comienzas a programar, es importante aprender y usar buenas prácticas para garantizar que tus proyectos sean lo más eficientes, seguros y escalables posible. HTML, CSS y JavaScript son lenguajes de programación fundamentales que debes conocer. HTML se utiliza para definir la estructura de un sitio web. CSS se utiliza para aplicar estilos visuales a un sitio web. Y JavaScript se utiliza para añadir interactividad a un sitio web. Conocer estos tres lenguajes básicos es una parte esencial de la programación web.
Además, hay algunas buenas prácticas que debes implementar para mejorar tus proyectos. Estas incluyen la modularización de tu código para facilitar su mantenimiento, la verificación de la seguridad de las entradas de usuario para evitar inyecciones de código, y la optimización de la velocidad de carga de tus páginas web. Implementar estas buenas prácticas te ayudará a mejorar el rendimiento y la seguridad de tus proyectos.
También es importante familiarizarse con la depuración de código. Esto significa encontrar y corregir errores en el código antes de que afecten el comportamiento del proyecto. Existen herramientas de depuración que puedes usar para localizar y solucionar errores, como el depurador de Chrome para JavaScript. Estas herramientas te ayudarán a mejorar el rendimiento, la estabilidad y la seguridad de tus proyectos. Por último, es importante documentar tu código para evitar confusiones futuras. Esto significa escribir descripciones claras sobre el propósito de tu código para que sea fácil de leer y entender.

Super fácil de entender

sos un genio hermano muchisimas gracias

![](
Creo que quedó bien…

La programación es exacta en su sintaxis, por eso debemos entender la sintaxis básica de cualquier lenguaje, para implementar nuestra lógica de manera eficiente y correcta, exacta, concisa y precisa

Parte de la sintaxis de HTML
<head> --> cabeza
No se muestra en la página web
<body> --> cuerpo
Se muestra en la página web

A medida que indicas hago pausas, para yo tambien ir haciendo, soy mas de aprender haciendo, que solo viendo.

No lo puedo creer… estoy más que entusiamada.
Acabo de descubrir que algo hacia yo bien, en el lex doctor el programa que utilizo para trabajar hace más de 15 años, siempre me maneje con el teclado para facilitar grabado, acceso e impresion. Por lo que no se me dificulta ahora la utilización de ctrl +… feliz y pensando en los cursos que voy a contratar por este medio. Gracias Gracias

el curso es genial

Nunca fui bueno para programar en la U. Pero ahora me entraron ganas de aprender y llegar a vivir de programar. Espero conocer muchos programadores y poder interactuar y hacer cosas con esta comunidad. Saludos. Vamos por ustedes HTML, JAva, CSS.

yo estuve estudiando la Ingenieria en sistemas y la deje por un pesimó profesor que me desanimo, despues de años estoy denuevo aqui y le volvi a encontrar el amor Gracias Platzi ❤️