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 鈥渉ead鈥. Tambi茅n se abre y se cierra:
<head>
</head>
El cuerpo se sabre y se cierra con la palabra 鈥渂ody鈥 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: 鈥渕i primera paginita鈥

Dentro de body se pueden poner t铆tulos y p谩rrafos
Los t铆tulos se colocan con la etiqueta 鈥渉鈥 y los p谩rrafos con la etiqueta 鈥減鈥 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 鈥渃aja鈥 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=鈥漜olor: 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 鈥渘ivel鈥, 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.

鈥淟a 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. 鈥淔reddy 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 鈥渃ajitas鈥, 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鈥檚 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 鈥渃aja鈥 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 鈥渃aja鈥 <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>