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

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

16D
1H
18M
14S

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 鈥渋ndentaci贸n鈥 de c贸digo para distinguir la jerarqu铆a de las etiquetas.

En palabras m谩s simples: Solo tienes que pulsar la tecla 鈥渢ab鈥 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=鈥漋alorDelAtributo鈥

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> 鈥淧aragraph鈥, te permite introducir p谩rrafos.
<a> 鈥淎nchor鈥, te permite introducir hiperv铆nculos.
<b> 鈥淏old鈥, te permite escribir en negritas.
<i> 鈥淚talics鈥, te permite escribir en cursiva.
<u> 鈥淯nderline鈥, te permite escribir texto subrayado.
<ul> 鈥淯nordered list鈥, te permite crear una lista desordenada (con puntitos)
<ol> 鈥淥rdered list鈥, te permite introducir una lista ordenada (con n煤meros o letras).
<li> 鈥淟ist 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> 鈥淗eading鈥, insertan t铆tulos y subt铆tulos en tu sitio web. El n煤mero que acompa帽a a la 鈥渉鈥 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 383

Preguntas 173

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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>

Les dejo mi peque帽o aporte

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.

Los cursos que recomienda Freddy son bastante buenos muy recomendados!! 馃挌馃挌

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

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

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 馃挭馃徑

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.

  • 驴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. 馃挌

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

Enjoy

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

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.

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

<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 鈥渉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

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 鈥渃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

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 鈥渃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.

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 !

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 鈥渉ead鈥 y un 鈥渂ody鈥

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

HTML funciona como un 谩rbol, aqu铆 va toda la informaci贸n de nuestro sitio web.

Partes de un HTML

  • head: Es la parte que no se ve y donde se encuentra el c贸digo.
    • title: Es el titulo de la pesta帽a de la pagina.
  • body: Es la parte que se ve, es donde van los t铆tulos, p谩rrafos, etc.
    • h1: Es para poner t铆tulos.
    • p: Es para hacer p谩rrafos.

Recuerda
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.

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.