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

Visual Studio Code

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

Adquiere un plan Basic o Expert para ver esta clase

Sitios web con HTML

4/84
Recursos

Aportes 115

Preguntas 38

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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

Aquí les dejo un sitio que ayuda mucho con ejemplos de cada etiqueta que se usa en HTML y adicional tiene algunos datos que les servirán en el futuro con CSS.

HTML Reference

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>

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

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.

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

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 💪🏽

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

Les dejo mi pequeño aporte

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…

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.

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

Enjoy

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

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

también podemos recargar con F5! 😃

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>

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.

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

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.

  • ¿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. 💚

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

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 !

con respecto a la etiqueta <h1></h1> vale aclarar que hay mas de un “nivel”, están los <h2>, <h3> y así hasta el <h6> si no me equivoco… se pueden diferenciar uno de otro porque cada vez son mas pequeños

Estructura básica de una página html
<html>
<head>
</head>
<body>
</body>
</html>

  • head: lo que no se ve
    / body: cuerpo del texto, lo visible
    / La programación es exacta en su sintáxis: concordancia en espacios, minúsculas, nada de símbolos raros. Es perfección.
    <p> párrafos

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

Chicos, los que no le sale a la primera o se frustran de que no entienden muy bien, solo es cuestión de práctica, constancia y práctica, y verán que cuando se den cuenta están fluyendo en el codigo, éxitos.

“La programación es exacta en su sintaxis”. Fredy Vega.

La programación es exacta en su sintaxis Los programas corren de arriba a abajo <html> <head> <title>me gusta programar</title> </head> <body> <h1>Mi nueva profesión </h1>

Este es mi futuro

</body> </html>

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

Hola a todos, es mi primera clase en Platzi, saludos amigos

Así sí da gusto aprender!

Si alguien, no sabe por dónde iniciar, aquí es un buen ejemplo, además poco a poco podrán entender las etiquetas y estructura, constancia y perseverancia, animo a [email protected]!

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

Recomiendo descargar el editor de texto Notepad++ facilita mucho el trabajo.

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>

HTML es IMPORTANTISIMO! si quieres aprender a programar.
Aquí les comparto una página muy buena en donde yo aprendí HTML ( tienes que saber ingles jeje) https://www.w3schools.com/

No entendí para que funciona el <head>.

Me ayudan porfa. Gracias

¡¡Genial!! Gran explicación de Freddy.

hola estoy viendo tu curso de programacion basica por que quiero convertirme en programadora y me gusta mucho como explicas en los videos gracias por tu ayuda

Que emoción!

Al empezar con este curso desde lo básico, comprendo mejor lo que va sucediendo en cada parte del código.

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

La programación es exacta y el código tiene que ser exacto 😉

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

La computadora lee el código de arriba a abajo

Excelente! Se pone bueno esto. 💚

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!!

Recién entre hoy y ya quedé Facinado

Puedes refrescar el navegador facilmente dandole F5.

Que fácil, la verdad cuanto estaba en la universidad no lo explicaban así de sencillo, gracias.

Muchisimas gracias Fredy me encuentro muy entusiasmado con estas primeras clases

Genial… recordar es volver a vivir

La programación es extricta con su sintaxis. “Freddy Vega”

  • Html funciona como un arbol donde las raices no estan a la vista de la persona pero las ramas y las hojas si.
    • Por lo que podemos asociar Las ramas y hojas como el body de la pagina web mientras que las raices seria el head del documento html.

Buenas Trades a todos .
Gracias por la portunudad

<html>
<head>
     <title>Mi primerpaginita</title>
</head>
<body>
	<h1> Mi primer sitio Web</h1>
	<p>Hola <strong>querida</strong> clase</p>
</body>
</html>
  • HTML funciona como si fuera un árbol.
  • El código va en el Head.
  • En el Body va lo que se ve en el sitio web.

Me encanta

-De arriba hacia abajo siempre

Muy bueno he interesante

-------------------
Clase 4:
-------------------

El código HTML se organiza como un arbolito… o cajitas, una dentro de la otra.
.
Los sitios web tienen una parte que no se ve y otra que sí se ve. La que no se ve es la cabeza o head. En el cuerpo o body es que se ve lo que está en el sitio web.
.

<html>
<head>
        <title>Mi primera paginita</title>
</head>
<body>
        <h1>Primer intento de sitio web</h1>
</body>
</html>

.
La programación es exacta en su sintaxis aunque hay áeras que tienen flexibilidad.
.
La forma en la que un sitio web carga es secuencial, lo que pasa es que nuestras computadoras funcionan muy rápido y no vemos que todo se carga de arriba hacia abajo y si escribes algo arriba lo de abajo todavía no existe.
.

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

CTRL+R ó F5

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 !

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

SIIIUU mi primer sitio web

Buenísimo este nuevo curso , a darle!!

Si quieren sabes mas sobre los editores de texto, les recomiendo esta clase del curso de prework
https://platzi.com/clases/2042-prework-windows/32462-instalando-nuestro-editor-de-texto/

excelente

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

basic HTML tags

  • <!DOCTYPE> Defines the document type

  • <html> Defines an HTML document

  • <head> Contains metadata/information for the document

  • <title> Defines a title for the document

  • <body> Defines the document’s body

  • <h1> to <h6> Defines HTML headings

  • <p> Defines a paragraph

  • <br> Inserts a single line break

  • <hr> Defines a thematic change in the content

  • <!–…--> Defines a comment

prof yo hice el de fundamentos de ingeneria de sofwere antes que este tarde 3 veces en sacar 9 pero lo aprobe

que emocion

HTML es el código que se utiliza para estructurar y desplegar una página web y sus contenidos. Por ejemplo, sus contenidos podrían ser párrafos, una lista con viñetas, o imágenes y tablas de datos.

HTML (hypertext markup language) un lenguaje utilizado para crear documentos en la web. Se utiliza para definir la estructura y el diseño de una página web, cómo se ve una página y cualquier función especial.
Tim Berners-Lee, fue el autor principal de HTML, con la ayuda de sus colegas del CERN.

Al principio me fue complicado por que no todos los teclados tiene a la vista los signos mayor y menor que, me tocó buscar primero las combinaciones de estos y luego continuar la clase, pero en general fue sencillo. Esto se pone bueno.

HTML el lenguaje de marcas de hipertexto en ingles HyperText Markup Language HTML funciona como una estructura de arbol que de forma ordenada da un estilo y forma, a nuestros sitios web.

<html>
<head>
  <title>titulo de mi pagina web </title>
</head>
<body>
  <h1> Esto es un titulo </h1>
  <p> Esto es un parrafo</p>
</body>
</html>

En este caso cuando un navegador lee un archivo html, revisa cada netiqueta para saber si están los elementos a invocar y luego los van mostrando, a medida que vaya reconociendo cada label utilizado; la verdad no lo veía de esa manera y así lo comprendo mucho mejor.

esta muy interesante y bien explicado gracias

enserio me ayudo mucho gracias

hasta ahora todo es muy sencillos
o

Sí, queremos guardar cambios de nuestro archivo de bloc de notas utilizando un atajo:

  • Ctrl + G -> Guardar, este comando guarda todos los cambios aplicados al archivo.
  • Ctrl + S -> Guardar, este comando aplica para aquellos que tengan otro idioma en su computadora, pero hace lo mismo que el anterior, guarda cambios aplicado a un archivo.
    .
    Refrescar pantalla o actualizar pantalla de nuestro navegador, usamos el atajo:
  • Ctrl + R -> Permite actualizar nuestra pantalla del navegador.
  • HTML es un lenguaje que funciona como un árbol.
  • En el head va lo que va a ir en la pestaña del navegador.
  • En el body va el cuerpo, lo que va a contener nuestro sitio.
  • Las etiquetas se deben utilizar de forma correcta, abriendo y cerrando como se debe.
  • Recordar que las páginas funcionan de arriba hacia abajo.

Se que es posible que se vea más adelante, pero recomiendo a quienes comiencen descargar el Note Pad ++, tener en colores las etiquetas y demás elementos ayuda bastante de manera visual, y funciona exactamente igual que el bloc de notas. https://notepad-plus-plus.org/

HTML debemos entenderlo como un sistema de cajas entre cajas y que esta marcado con etiquetas, en esta clase encontraremos la siguientes <html> </html>, <title> </title>, <head> </head>, <body> </body>.

Estas etiquetas las encontraremos en pares, la primera la utilizamos para la apertura y la segunda la utilizamos par el cierre y la forma en la cual se diferencias es que siempre la etiqueta de cierre inicia con </. (es lo que se muestra de momento hasta esta clase).

Para darle formato a la pagina iniciamos con la etiqueta <html> en la cual encontraremos todo el contenido de la pagina, dentro de esta “caja” encontraremos la etiqueta <head> esta parte es la que no se encuentra visible en la pagina pero encontraremos el contenido en la pestaña de la pagina.

Vamos a agregar el contenido de la “caja” <head> adicionamos la etiqueta <title> en la cual escribimos lo que veremos en la pestaña de la pagina y cerramos con </title> y luego cerramos la caja con </head>.

Si queremos darle forma al cuerpo de la pagina abriremos la caja con la etiqueta <body>, es esta caja encontraremos dos elementos, el primero seria el titulo para el cual utilizaremos las etiqueta <h1>Contenido</h1> y el cuerpo el cual será un párrafo y para este utilizaremos <p>Contenido</p>, cerraremos con </body> y por ultimo </html>.

La estructura quedaría de la siguiente forma:

<html>
<head>
<title>Mi primera paginita</title>

</head>
<body>

<h1>Mi primer intento de Website</h1>
<p>Este es nuestro primer programa completo y profesional</p>

</body>
</html>