Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 17D : 15H : 8M : 25S

Debes tener cuenta en Platzi

Para ver esta clase abierta debes iniciar sesión

HTML, CSS, JavaScript de verdad6/36

Los archivos HTML funciona con etiquetas, por ejemplo

Hola mamá **ya casi aprendo**

Todos los contenidos en HTML deberían estar dentro de una etiqueta, y todos los archivos HTML tienen esta estructura, cómo

<title>Título de la página</title>

Contenido de la página

La etiqueta que te permite escribir CSS dentro de HTML es <style>, se coloca dentro de head. La etiqueta para escribir JS dentro de HTML es <script>, se coloca antes de terminar el body.

Recuerda:

Los nombres de las variables tienen algunas reglas, cómo, no pueden tener espacio, debe empezar siempre con una letra, las minúsculas y las mayúsculas importan.
Identación, tienes bloques de código, estos deben ir un poco a la derecha.
Los programadores pasan 80% de su tiempo leyendo código y 20% escribiendo código, por esto es importante seguir buenas prácticas. Es importante ver las extensiones de los archivos.

si escriben en google #ffffff les aparece una paleta de colores, donde les muestra el codigo hexagecimal del color que quieren.

me encanto, quisiera que muchos profesores universitarios tuvieras esa pasión por su carrera, ese amor; saludos desde Venezuela

Comentarios:
HTML: <!-- Asi se escriben comentarios en HTML -->
CSS: /* Asi se escriben comentarios en CSS */
JS: // Asi se escriben comentaros de una sola linea en JS //
/* Asi se escriben comentarios multilineas en JS */

<!DOCTYPE html>
<!-- Esto es una buena practica para indicar el estandar de HTML 5 -->
<html>
<head> <!-- Contiene todos los elementos no visuales de la pagina,metadatos, etc... -->
  <meta charset="utf-8"/>
  <!-- - Algunas etiquetas no necesitan ser cerradas como por ejemplo esta, que
  se coloca para que las tildes sean reconocidas por el navegador, pero es una
  buena practica cerrarla, otros ejemplos: <br>"pasaria a esto"<br/>, etc... -->
  <title>Mi primer archivo HTML</title>
  <!-- <title/> Sirve para poner un titulo a tu pagina. El titulo es muy importante
   ya que google le da mucha relevancia para que encuentren tu pagina en los navegadores -->
  <style type="text/css"> /* <style/> Es utilizada para definir un codigo en CSS, se coloca dentro de head */
  /* type="text/css" Esto es un atributo de la etiqueta */
  body
  {
    background-color: #AAAAFF;
    /* background-color es el atributo que cambia el color de fondo de tu pagina */
    color: white;
    /* Color es el atributo que cambia el color del texto de tu pagina */
    font-family: Helvetica;
    /* font-family es el atributo que cambia la fuente de tu pagina */
  }
  strong
  {
    background-color: #FFAAAA;
    /* Para ver el codigo hexagecimal del color que deseas escribe en google: #ffffff */
  }
  </style>
</head>
<body> <!-- Contiene todos los elementos visuales de la pagina -->
  <p>Hola <strong>mama ya casi</strong> aprendo</p>
  <!-- <strong/> sirve para poner negrita -->
  <p>Esto es un parrafo</p>
  <!-- <p/> es un parrafo, RECUERDA: Todos los textos en HTML deben estar envueltos
  por etiquetas, la mas sencilla es <p/> -->
  <script type="text/javascript"> // <script/> Es utilizada para definir un codigo JavaScript, se coloca antes de terminar el body //
    var $x = 1;
    // var declara una variable, como let o const //
    var _y = 2;
    // Las variables tienen reglas: No pueden empezar con numeros (solo con letras), se diferencian mayusculas y minusculas, y no se pueden usar caracteres raros (como ñ o tildes) ni espacios.
    var Freddy_Vega1 = $x + _y;
    document.write("El valor de Z es " + Freddy_Vega1);
    // document.write es una funcion que escribe strings dentro de html, es como body pero dentro de JavaScript //
  </script>
</body>
</html>

Muy importantes las reglas para nombrar variables en JavaScript:

  • No pueden empezar con números, sólo con letras
  • Se diferencian mayúsculas y minúsculas
  • No se pueden utilizar caracteres "raros" como ñ o tildes

🐱‍💻 Para poner un texto en negrita podemos usar <strong> o <b>, la diferencia es que el primero se utiliza para hacer énfasis en un texto (destacar en búsquedas) y el otro simplemente para darle un aspecto visual.

Freddy olvidaste mencionar lo de <meta charset="utf-8"/>


Que se coloca para que las tildes sean reconocidas por el navegador

Hola, para todos los nuevos que estamos aquí y tenemos el error cuando empezamos a trabajar con la etiqueta <style>, (el body no nos cambiaba de color y teniamos que escribir todo manual y eso) despues de estar leyendo un poco y travesiando, he encontrado que el problema esta cuando nombramos el tipo de archivo.
Freddy nos dijo nombrarlo “primero.html”, pues bien, leí que la ultima versión de html es la versión 5, asi que cuando vayan a nombrarlo nombreenlo con .html5
Y les va a funcionar. Esa es la solución. 😉

Cuando instalas Atom, puedes hacer código más rápido con Emmet, que es un complemento de Atom, Tan solo vas a File -> Setting -> + Install, digitas Emmet e instalas, luego reinicias Atom. 

Luego lo pruebas escribiendo html:5 y seguido la tecla TAB y veras como se crea código mágicamente, luego así para cada etiqueta, por ejemplo solo escribes "p" y luego TAB y ya te abre y cierra las etiquetas. Es mágico.  

MicroResumen

  • Buenas Prácticas => Son estándares sobre la escritura de código, de tal manera que varios programadores puedan escribir e interpretar el código sin que les sea extraño su comprensión.
  • Los programadores pasan entre el 80% y el 90% leyendo e interpretando código, y un 10% a 20% escribiendo código.
  • Identar Código => Forma parte de las buenas prácticas, ayuda a interpretar mas rápido el código organizándolo.
  • Todo lo que debe ejecutarse antes de cargar la página debe ser definido dentro de la etiqueta <Head></Head>.
  • Sintaxis => Son reglas de escritura de los lenguajes de programación, estas deben ser respetadas para que el código funcione correctamente.
  • Las variables pueden nombrarse tanto con palabras copo también números, aunque existen ciertas restricciones como por ejemplo, deben ser escritos de la misma manera tanto al crearse como también al utilizarse, ya que javascript así como la gran mayoría de los lenguajes profesionales de programación, distingue las mayúsculas y las minúsculas, si el nombre va a estar compuesto por dos palabras, estas deben ir unidas con guión bajo ( _ ), si se va a utilizar números, estas no pueden ir al comienzo del nombre (ej: 2_Fredy) si pueden ser dentro de la estructura del nombre o al final del mismo(Fre2dy, Fredy_2).
  • Los programas son un 90% similares, y solo un 10% distintos, esta diferencia se debe a las reglas especiales que pueden contener las mismas.
  • Atributo de la etiqueta solo puede ser declarado en el inicio del mismo, mas no al final.

Espero les sirva

¿Por que no me cambia algunos colores en Atom? (posible solución):

1- En la parte inferior derecha del programa (Atom) aparece HTML y le das click.
2- Se habré una ventana, en el buscador le pones H (el inicial de HTML) y dentro de las opciones aparece: HTML (go) y le das click.

No se si esto es correcto, pero me funciono.

Recurso 10.jpg

los créditos le corresponden a este: https://platzi.com/comentario/913353/

  • HTML funciona con etiquetas.

  • IMPORTANTE: Si no guardas el archivo antes de que empiezes a programar el editor no te ayuda ni te coje los estilos.

  • Los programadores tienen que ver las extensiones, para ello:

Windows:
https://helpx.adobe.com/la/x-productkb/global/show-hidden-files-folders-extensions.html

Mac:
https://support.apple.com/kb/PH25381?locale=es_ES&viewlocale=es_ES

  • En HTML tienes etiquetas que significan cosas especiales y funcionan asi:

      <etiqueta>contenido</etiqueta>
    
      <strong>Hola Mama</strong>
    

Algunas etiquetas no tienen contenido por dentro, en estos casos no se le coloca una etiqueta de cierre si no:

	<etiqueta />

	<br /> (Esto es un salto de linea)

Es una buena practica colocarle / para señalar que esta vacia por dentro aunque no es necesario

Esta es la base de HTML, pero recuerda este es un lenguaje para escribir informacion pero no es un lenguaje de programacion

  • <strong> y <b> Sirven para poner negrita

  • Todos los contenidos en HTML deberían estar dentro de una etiqueta, la etiqueta mas facil para envolver un texto es un parrafo <p>

  • <p> Sirve para crear un parrafo

  • Asi se escriben comentarios:

HTML:
<!-- Asi se escriben comentarios en HTML -->

CSS:
/* Asi se escriben comentarios en CSS */

JS:
// Asi se escriben comentaros de una sola linea en JS //
/* Asi se escriben comentarios multilineas en JS */

Para escribir comentarios mas rapido simplemente selecciona el texto que quieras que este en un comentario y pulsa CTRL + Tecla ?/

Tambien puedes usar un plugin de atom llamado docblockr:
Mas info: https://platzi.com/blog/plugins-de-atom-para-el-desarrollo-web/

  • Ejemplo de estructura basica de un archivo HTML:

<!DOCTYPE html>
<!-- Esto es una buena practica para indicar el estandar de HTML 5 -->
<html>
<head> <!-- Contiene todos los elementos no visuales de la pagina,metadatos, etc… -->
<meta charset=“utf-8”/>
<!-- - Algunas etiquetas no necesitan ser cerradas como por ejemplo esta, que se coloca para que las tildes sean reconocidas por el navegador, pero es una buena practica cerrarla, otros ejemplos: <br>“pasaria a esto”<br/>, etc… -->
<title>Mi primer archivo HTML</title>
<!-- <title/> Sirve para poner un titulo a tu pagina. El titulo es muy importante
ya que google le da mucha relevancia para que encuentren tu pagina en los navegadores -->
<style type=“text/css”> /* <style/> Es utilizada para definir un codigo en CSS, se coloca dentro de head /
/
type=“text/css” Esto es un atributo de la etiqueta style*/
body
{
background-color: #AAAAFF;
/* background-color es el atributo que cambia el color de fondo de tu pagina /
color: white;
/
Color es el atributo que cambia el color del texto de tu pagina /
font-family: Helvetica;
/
font-family es el atributo que cambia la fuente de tu pagina /
}
strong
{
background-color: #FFAAAA;
/
Para ver el codigo hexagecimal del color que deseas escribe en google: #ffffff /
/
Tambien puedes usar un plugin de Atom llamado color-picker https://neliosoftware.com/es/blog/plugins-para-atom-imprescindibles/ */
}
</style>
</head>
<body> <!-- Contiene todos los elementos visuales de la pagina -->
<p>Hola <strong>mama ya casi</strong> aprendo</p>
<!-- <strong/> sirve para poner negrita al igual que <b/> -->
<p>Esto es un parrafo</p>
<!-- <p/> es un parrafo, RECUERDA: Todos los textos en HTML deben estar envueltos
por etiquetas, la mas sencilla es <p/> -->
<script type=“text/javascript”> // <script/> Es utilizada para definir un codigo JavaScript, se coloca antes de terminar el body //
var $x = 1;
// var declara una variable, como let o const //
var _y = 2;
// Las variables tienen reglas: No pueden empezar con numeros (solo con letras), se diferencian mayusculas y minusculas, y no se pueden usar caracteres raros (como ñ o tildes) ni espacios.
var Freddy_Vega1 = $x + _y;
document.write("El valor de Z es " + Freddy_Vega1);
// document.write es una funcion que escribe strings dentro de html, es como body pero dentro de JavaScript //
</script>
</body>
</html>

  • Identacion, es simplemen te una buena practica para los bloques de codigo, consiste en darle un tab a estos para focilitar su lectura

  • Los programadores pasan el 80% de su tiempo leyendo código y 20% escribiendo código, por esto es importante SEGUIR BUENAS PRACTICAS.

Coño mi primer día en Platzi y no creí poder aprender tanto <3 

Todo genial. Para los que no les salen los colores en las etiquetas. Van a la parte inferior derecha y dna click en HTML (está en mayúsculas) luego se abre una ventana y le dan en Auto Detect y listo, todas las etiquetas serán con colores 👍

Hola. Bueno este es mi resultado después de ver ‘HTML, CSS, JavaScript de verdad’

Primero html.png
Primero en buscador.png

Hola puse el script al principio y antes del final del body y de todas formas cuando recargo la pagina me aparece primero el alerta y recién cuando doy aceptar aparece el diseño de la pagina. No entiendo que hice mal? en ninguno de los dos casos muestra el diseño de la pagina

document.write("Hasta ahora estoy aprendiendo bien");

Por si alguien no encuentra estos simbolos en su teclado <>, pueden usar los comandos
"Alt+60" para <
“Alt+62” para >.

100%=90%+20%???

<DOCTYPE html>
<html> 
 <head>
 <title>mi primer archvo html</title>
<style>
 body
 {
   background-color: red;
   color: blue;
   font-family: helvetica;
  }
  strong
  {
  background-color: yellow;
  }
</style>
 </head>
  <body>
  <p> ME <strong>ENCANTA</strong> LA PIZZA
  <p> SI PIESAS <strong>QUE LA VIDA ES DURA RECUERDA QUE MAS DURA</strong>ES LA VERDURA<p>
  <script>
  alert("la pizza es super sabroza")
  var pizza= prompt("¿te gusta la pizza tambien?");
  var a = "me pizza"
  var b ="esta" 
  var c= "varata"  
  document.write(a+" "+b+" "+c);
  </script>
  </body>
</html>```

Excelente curso


Solo por aportar algo al curso, es válido aclarar que <strong></strong> no es negrita, semánticamente es hacer un énfasis en algo. Podrían confundirse los nuevos estudiantes.

Aqui encontre una pagina con algunas etiquetas para los que gusten y quieran experimentar mas durante el curso.
http://www.mclibre.org/consultar/htmlcss/html/html-etiquetas.html

escribo la etiqueta script al final de la etiqueta body pero aún así el navegador me lee primero el script, ¿a que se debe?

Si a alguien no le resalta algunos comandos (específicamente los de JS y CSS), deben cambiar el lenguaje a HTML (Go) en la parte de abajo

Yo tengo una pregunta que no sé si se resuelva en alguna parte posterior del curso, pero me gustaría saber para alguien que ya tiene bagaje en el mundo de la programación cómo organizar los diferentes comandos que se tienen por código, es decir, como creo una bibilioteca efectiva de comandos para cada código y no confundirme entre uno y otro. Cualquier respuesta es bien recibida!

A todos los nuevos compañeros les recomiendo Visual Studio Code en vez de Atom, es bastante mejor.

HPSCAN.jpg

Apuntes

  • Las etiquetas <> significan cosas especiales

  • El cierre de las etiquetas lleva /

  • Todos los textos deben estar envueltos en una etiqueta

  • Las buenas prácticas son estándares para escribir código entendible

  • En <head> va todo lo que no se ve; lo que carga antes que toda la página

  • document.write permite escribir en el HTML

  • Los nombres de variable pueden ser casi con cualquier con letra o número, pero con reglas

  • En JS las mayúsculas y minúsculas importan

Recomiendo los curso de google actívate te enseña html y css gratis.

Ya me siento programadora JAJAJA

en este vídeo aprendí lo de un semestre en la universidad :😕

Si a alguno no le salen las ayudas de color de texto que brinda Atom, cambien en la parte inferior derecha, el HTML grammar a uno que diga** HTML con Tree-Sitter.**

Captura de Pantalla 2020-04-21 a la(s) 19.46.44.png

Windows y las extensiones

En Windows normalmente no se ven las extensiones de archivo.
La Solución es:

  1. Abrir el Explorador de Archivos.

  2. ir a Vista.

  3. Seleccionar Extensiones de nombre de archivo.

Síntaxis de HTML

  • Toda etiqueta HTML va entre símbolos menos qué y mayor qué. Ejemplo1.
  • Toda etiqueta HTML debe cerrarse con el símbolo de Slash (/). Ejemplo2.

Reglas de las Variables en JavaScript

Reglas de las Variables:

  • Las variables no permiten espacios.
  • El primer carácter de una variable siempre tiene que ser una letra, no un número.
  • No se pueden usar signos raros como la ñ o los acentos.
  • Las mayúsculas y minúsculas no son indiferentes.

Buenas Prácticas y Porcentajes

Buenas prácticas: Es un estándar para manejar el código para que cualquier programador pueda entenderlo fácilmente.

Los programadores pasan 80% de su tiempo leyendo código y solamente del 10% al 20% escribiendo código.

Los lenguajes son un 80% similares y un 10% al 20% diferentes.

Recordatorio: Recuerda guardar el archivo, si no, no el editor no te va a ayudar y el navegador no lo va a abrir.

Reglas de código en Javascript

  • Una variable (var) no puede tener 2 palabras separadas con un espacio, debe ser “underscore” o “guion bajo” o “rayita al piso” 😉 (_)
  • No iniciar el caracter de una variable con número, siempre debe iniciarse con una letra.
  • No puedes usar signos raros como: Ñ o tildes.
  • Las minúsculas y las mayúsculas son diferentes.
  • Puedes iniciar un caracter de una variable con un (_) o ($) y no hay problema.

<html>
<head>
<title> FREDDY CRACK </title>
</head>
</html>

Para todos los que no se les colorea el texto vayan a la parte inferior del programa y busquen “HTML” denle click y luego seleccionen “Auto Detect”.
Un abrazo! 😉

freddycasateconmigo.png

No importa si coloco el alert al inicio o <body> o antes de acabar </body> el alert siempre carga primero que toda la página 😒

Hola Buenas Noches.
Tengo una pregunta, estaba haciendo el ejercicio que iba desarrollando freddy, siempre se dispara primero el scrip no importa donde lo ponga(sea al principio de la etiqueta body o al finalizar la etiqueta body )

Hola.En esta clase de Platzi de 27 minutos, Aprendi y logre comprender las bases solidas de diseño web.En UDEMY tome un curso de 3h y **No logre entender nada.**Personalmente creo Platzi es un ejemplo mundial de pedagogía.
Gracias 😃

SI no les carga bien los colores en Atom, en la barra de abajo a la derecha parece “HTML” haciendo clic pueden cambiar el lenguaje. Si le dan en “Auto Detect” recarga los colores y ya los muestra bien.

si de por si Freddy habla rapido esta cool escucharlo en 2x de volocidad

esto es muy dificil termine muy mareado


Si les parecen importantes los comentarios esto les sera útil:
→Así se comenta en html:
<!-- tu comentario -->
→Así se comenta en javascript una linea:
// tu comentario //
→Así se comentan varias lineas en javascript :
/* tus comentarios */
→Así se comenta en css:
/*tu comentario */
Además estas son algunas etiquetas de uso frecuente en html:
<b> o <strong>: Negrita
<i> o <em>: Cursiva
<u>: Subrayado
Todas las etiquetas deben cerrarse respectivamente. Espero les sea útil 😃

Para activar el color de body debajo de <style> solo hace falta en Atom Ctrl + Shift + L Auto Detect

existen profesores buenos y despues esta este caballero que es un capo enseñando

Para quienes no les funciona el auto-complete dentro de la etiqueta style, lo que deben de hacer es pulsar ctrl+shift+L y seleccionar HTML (Go) como lenguaje.
Esta opción toma en cuenta que vas a escribir código css dentro de un archivo html, no es buena práctica, pero ahorita para ir aprendiendo está bien hacerlo.

mi primer archivo HTML.PNG
No se me resaltaron los comandos pero funciono bien todo

La versión del editor atom que descargué no me colorea muchas partes del código como lo hace el editor que utilizas en el video, aún así el código corre sin problemas. A que se debe eso ? Es cuestión de cambiar las configuraciones ? o son detalles de la versión ?

Hola compañeros les comparto mi ejercicio. Anotación 2020-03-31 134347.png

Cuál es la razón por la que independientemente de donde ubique la etiqueta <script> siempre obtengo el mensaje de alerta antes que el cuerpo (etiquetas <p>)?

Me aparece siempre el mensaje primero antes que cargue el contenido de la pagina. He probado en varios navegadores.

<html>
<head>
<title>Mi primer archivo HTML</title>
<style>
body
{
background-color: #AAAAFF;
color:white;
font-family: Helvetica;
}
strong
{
background-color: #FFAAAA;
}
</style>
</head>
<body>
<p>Hola <strong>mamá ya casi</strong> aprendo</p>
<p>Este es otro párrafo</p>
<script>
alert(“Mensaje especial con alerta”);
</script>
</body>
</html>

Ya sabía programar en Python pero ahora quiero aprender desde cero.

<!DOCTYPE html> 
<html>
<head> 
<title> Diccionario </title> 
	<style type="text/css"> 
	Body{
		background-color: #597C99;
		color: #FF886E;
		font-size: 20px;
		font-family: cursive;
	}
	</style>
</head>
<body> 
	<p> <"body"> Aquí se escribe la estructura del texto.</p>
	<p> <"!Doctype html"> Esta etiqueta es muy inecesaria hoy en día, pero puede ser encontrado en lenguaje de software viejo</p>
	<p> <"head"> Aquí van los metadatos como estilos de diseño y título de la página</p>
	<p> <"title"> Aquí va el título de la pestaña </p>
	<p> <"style"> Nos permite agregar diseño, <"style type=text/css"> es lo mismo pero escrito de forma vieja</p>
	<p> "background-color" Aquí cambiamos el color de fondo. No es una etiqueta, es sólo una variable de <"Style"> </p>
	<p> "color" Aquí cambiamos el color de la letra del texto de <"body"> (ya que ese el bloque de texto que esta siendo modificado por <"Style"). No es una etiqueta, es sólo una vairable de <"Style"> </p>
	<p> <"p"> Esta etiqueta sólo define un parrafo.</p>
	<p> <"/"> Así es como se cierra una etiqueta. </p>
	<p> "font-size" Aquí cambiamos el tamaño de la letra </p>
	<p> "font-family" Aquí cambiamos la tipografía</p>
	<p> "{      }" Esto sirve para abrir y cerrar bloques de código</p>
	<p> <"script"> Es la etiqueta que nos permite colocar código de programación</p>
	<p> "Document.Write" es la opción que nos permite escribir en "body" usando javascript</p>

	
	<script>
	alert("Esto es un alert (y son muy molestos)");
	var x = 1;
	var y = 2;
	var z = x + y;
	document.write("Todo empieza sabiendo que sí el valor de X es " + x);
	document.write(" sumado al valor de Y que es " + y); 
	document.write(" entonces X + Y es igual a Z, es decir " + z); 
	</script>
</body>
</html>```

El SCRIPT SIEMPRE AL FINAL ! jaja ley !
Si en ATOM tienes problemas de que no se colorean ciertas palabras o etiquetas como body o strong, guarda el archivo y cierra el mismo y vuelve abrirlo y en automático se colorea.

Para los que estan usando Atom, podrian querer activar las lineas guia (Indent Guide)

  1. Vayan en la parte superior izquierda a donde dice “Edit”
  2. Denle un click en “Preferences”
  3. Otro click mas en donde dice “<> Editor”
  4. Marcamos la casilla en donde dice “Show Indent Guide”

https://www.youtube.com/watch?v=nXPOStcUMyU

Muy buena esta clase, bastante información de una sola vez y perfectamente definida. 😃

<!DOCTYPE html>
<html>
  <head>
    <title>Mi primer HTML</title>
    <style type="text/css">
      body{
        background-color: #AAAAFF;
        color: #FFFFFF;
        font-family: Helvetica;
      }
      strong{
        background-color: #FFAAAA;
      }
    </style>
  </head>
  <body>
    <p>Hola mama, <strong>ya casi aprendo</strong></p>
     <p>Este es otro párrafo</p>
     <script type="text/javascript">
       var x = 1;
       var y = 2;
       var z = x + y;
       alert("Mensaje especial con alerta");
       document.write("Mensajito curioso! El valor de Z es: " + z);
     </script>
  </body>
</html>

Buenas practicas: escribir código de manera que otros programadores lo puedan entender.
**Identacion: **Lo que esta dentro de un bloque de código se corre un poco a la derecha con la tacla tab del teclado.
Estilos: se ponen en un archivo aparte o dentro de la etiqueta head ya que en esta etiqueta esta todo lo que no se ve, esto se llama “metadatos”.
Sintaxis: Reglas de los lenguajes de programación.
Etiquetas:
<strong></strong> = Negritas
<p></p> = Párrafo
<head></head> = Cabecera, siempre se encuentra después de la etiqueta html.
<title></title> = Para poner nombre al archivo en el navegador, la etiqueta title es la que usa google para mostrar las paginas en el buscador.
<body></body> = va dentro de esta etiqueta lo que se observa de manera visual en el navegador.
<style></style> = Código que no es html este es css (código de estilos en cascada), ese te asigna a etiquetas especiales, id o clases, permite añadir diseños a ciertas etiquetas.
body{} = dentro de las llaves se crean atributos para dar diseño a la pagina, los atributos terminaran en “;”.
<script></script> = para colocar JavaScript, la forma mas fácil de colocarlo es antes del cierre de la etiqueta body, ponerla al final es una buena opción porque así ya estaría cargado todo el diseño de la pagina.
document.write(""); = para escribir un mensaje con JavaScript.
var = son variables, el nombre de las variables pueden ser letras y números, opero estas no permiten espacios, para poner espacio se utiliza el under escope (_) es el guion bajo, no se puede poner un numero al inicio del nombre de la variable, no se pueden utilizar símbolos “raros” y tiene que escribirse exactamente y no mayúsculas y la mandas a mandar en minúsculas.
<!DOCTYPE html> = Es un estándar de buenas practicas de HTML 5, esta etiqueta se encuentra antes de la etiqueta html.
<style type=“text/css”> = Atributo de la etiqueta.
<script type=“text/javascript”> = Atributo de la etiqueta.

Yo estoy siguiendo los mismos pasos que Freddy, pero cuando el hace las etiquetas “<style>” y pone “body” entre ambas etiquetas, a el le sale de color rojo, a mi no me sale nada, sólo se queda en gris. ¿Alguien que me explicara qué puedo hacer? Gracias se los agradecería.

<html>
<head>
<title>Mi primer archivo HTML</title>
<style>
body      
</style>
</head>
<body>
  <p>Hola <strong>mama ya casi</strong> aprendo</p>
  <p>Este es otro parrafo</p>
</body>
</html>```

la peor parte es tener que volver al trabajo en ves de seguir con esto 😦

a mi me aparece la alerta antes de cargar toda la pagina aunque la ponga justo antes de que cierre body (min 19:30)

Hola, cuando escribo body luego de las etiquetas <style> el programa lo lee como si fuera un texto normal y no me permite seguir, DEBEN HACER LO SIGUIENTE: Atom, si es igual tu caso, dale en la parte inferior derecho un apartado que dice HTML, al darle click saldrán unas opciones, solo dale en Auto Detect.

me pasa algo raro con atom, hasta cierto punto me aparecen coloreadas las etiquetas, despues de la mitad del ejercicio dejaron de aparece, pero sigue funcionando normal a la hora de actualizar en el navegador

Buenas Practicas:
Pasamos la mayor parte del tiempo leyendo y entendiendo cogigo; las buenas practicas ayudan a hacer ese codigo mas legible
Algunas buenas practicas:

  • Usa la indentacion; asi entendemos mejor (mas visualmente) las relaciones de subordinacion
  • Usa variables autoexplicativas
  • Coloca todas las etiquetas (aunque no parezcan necesarias)

Bueno que opinan pensé no lograrlo.

Basico HTML.JPG

Sitio donde encontraran etiquetas y su definición
Etiquetas html.png

https://allthetags.com/

Hola en mi caso ni cambia de color (<strong>) ni se refleja en navegador, que hago?

Despues de colocar el <style> </style> todos las palabras en el Atom que tenian color dejaron de tenerlo, todo siguio funcionando igual en atom pero las letras estaban blancas

Hola! No puedo usar la etiqueta Body dentro de STYLE (No me aparece en tono rojo las letras de “BODY” sino en gris). ¿Qué hago?!

Por que Atom no me cambia de color las palabras como Blue, body…
com ose activan los indicadores o algo?
Gracias

![](Captura de pantalla (2).png)
Alguien me puede decir porque no se me ponen de colores algunas cosas (si funciona solo no se ponen de colores.

y otra cosa, aun que ponga el script al final, la alerta se hace al principio.
PLSSS HELP

Hola, he revisado mi texto y está bien escrito, pero no me coloca las palabras en negrita

Para ser mi primer curso de programación, esta bien entendible.

Yo tengo una pregunta. Cuando estaba escribiendo mi código, idéntico al de Freddy, cuando comencé a escribir lo que estaba debajo de “<style>”, no se me coloreó esa sección (todos me salen en gris), y tampoco me aparecían las guías del código como a Freddy (para autocompletar, por ejemplo, mientras ponía “background-color”). ¿Por qué me sucede esto?

Como curiosidad: con Safari se me cumple que las caja de texto generadas con “alert” aparece antes o después de cargar la pagina según si están codificadas al principio o al final de <body> pero con chrome me aparece siempre antes de cargar la página aunque el código esté escrito al final de <body>.
(Tampoco lo voy a investigar, hay mucho camino por delante)

Me emociono!!! x3

chicos le super recomiendo que utilicen visual studio code es buenisima

Les comparto un proyecto escolar que hice con el programa dreamweaver el cual subí mi proyecto a un repositorio en GitHub https://thelaststar122.github.io/-diseases/ espero les guste.

Dentro de la etiqueta html podemos declarar el idioma en el cual va estar todo en nuestro programa con como por ejemplo…
<html lang=“es”>

<html>
<head>
  <title>mi primer archivo</title>
  <style>
    body{
      
    }
  </style>
</head>
<body>
  <p> hola <strong>mamá ya casi aprendo</strong></p>
  <p> este es otro parrafo</p>
</body>
</html>

alguien me puede ayudar, por que body no se me resalta en atom

*Estructura básica de un documento .html

<!DOCTYPE html>
<html>
	<head>
		<title>Título en la pestaña del navegador</title>
		<style>
			body
			{
				background-color		:	black;
				color				:	white;
			}
		</style>
	</head>
	<body>
		<h1>Título princial de la pàgina</h1>
		<p>Contenido de la página</p>
	<script>
		console.log("Mensaje en la consola");
	</script>
	</body>
</html>

Aplicando las técnicas de memorizar, en eso andamos jejeje

estoy armando un grupo de whatsapp para compartir conocimiento, podremos conversqr de varios temas para resolver dudas, y por que no emprender en algun momento.

https://neliosoftware.com/es/blog/plugins-para-atom-imprescindibles/

ese link lo subió alguna persona en un comentario… la verdad es muy útil para los que nunca habían usado Atom (soy uno de esos)… si ven el comentario den like, se lo merece…

Reglas para nombrar variables:

1.- No aceptan espacios en blanco: Si necesitas una variable compuesta por mas de una palabra puedes utilizar el símbolo: _ . Ejemplo: freddy_vega.
2.- No se pueden utilizar números al inicio del nombre de la variable: Debe empezar siempre con una letra, los números pueden utilizarse después.
3.- Evitar asignarles símbolos “raros” como la ñ o las tildes: Raros para el idioma inglés, que son el idioma de los creadores de JS y HTML.
4.- Tener en cuenta que JavaScript diferencia entre mayúsculas y minúsculas, por lo que la variable: Freddy no es igual a la variable: freddy.

Controles & Opciones que te facilitaran a vida:

Ctrl + S (Para guardar)
Ctrl + Mas (Para aumentar tamaño)
Ctrl + - (Para disminuir espacio)

80% de tu tiempo dedicalo a
Leer codigo para entender

20% de tu tiempo dedicalo a crear y
Escribir tu propio codigo

Desde mi punto de vista, les recomendaria a todos el visual studio code excelente programa

Hola buena madrugada, soy desarrollador de software hace 6 años, y estaba buscando como enseñarle a mi hijo codificar, y es lo mejor, sencillo y concreto. Excelente!!

  • Los programadores de verdad pasan del 80 al 90 % LEYENDO CÓDIGO
  • El otro % se lo pasa ESCRIBIENDO

a alguien le sale la alerta antes de que cargue la pagina ?
hice de la misma manera que en el video y me sale la alerta antes de cargar la pagina

<> Compañeros recuerden cerrar las etiquetas </>

Esta es una excelente herramienta para insertar colores, muy buena para hacer degradados
http://www.colorzilla.com/gradient-editor/

Amigos les recomiendo que en Atom instalen el paquete de emmet, les ayudara mucho a escribir en html, si tienen alguna recomendación de algún pluggin de JavaScript dejenmelo saber en los comentarios de este aporte.

Aquí puedes conseguir el código de colores:
https://html-color-codes.info/codigos-de-colores-hexadecimales/

Screenshot_8.png

en esta clase ya se dio un gran salto

Hola, coloco el script al final o al principio del body y siempre aparece primero la ventana de alert y luego el contenido del body

Mis apuntes.

reglas de las variable:

  1. Las variables no dejan espacio
  2. El primer caracter de una variable siempre tiene que ser una letra. NO un numero.
  3. No se pueden usar signos raros
  4. la mayuscula y la minuscula Importa

los lenguajes de programacion son un 80% similar y un 20% distinto

los programadores pasan el 80% son leyendo código y el 20 al 10% escribiendo código
No cometa el error de escribir codigo complejo. Escribe el código de la manera mas legible posible

mensaje de script hay que ponerlo al final de la pagina

Si tiene algun problema con su editor de texto respecto a que no le autocompleta las funciones o le corrige como sucede en el video ell consejo es que deben presionar CTRL + SHIFT + L y seleccionar la sintaxis del lenguaje que se esta usando en este caso yo coloque html(go).

alguien noto que en el minuto 25:27 Fredy dice que los programadores pasan el 90% leyendo codigo y el 20% escribiendo, lo siento no pude evitar el comentario por que lo repite dos veces, jajaja la suma de los datos serian en total un 110%

recién arrancando, pero esta bueno, y va muy bien explicado… para cualquiera que arranca desde cero.

Le añadi unos cuantos detalles de mi parte mientras fui curioseando pero al fin escribi mi primer codigo!

si escriben en google #ffffff les aparece una paleta de colores, donde les muestra el codigo hexagecimal del color que quieren.

me encanto, quisiera que muchos profesores universitarios tuvieras esa pasión por su carrera, ese amor; saludos desde Venezuela

Comentarios:
HTML: <!-- Asi se escriben comentarios en HTML -->
CSS: /* Asi se escriben comentarios en CSS */
JS: // Asi se escriben comentaros de una sola linea en JS //
/* Asi se escriben comentarios multilineas en JS */

<!DOCTYPE html>
<!-- Esto es una buena practica para indicar el estandar de HTML 5 -->
<html>
<head> <!-- Contiene todos los elementos no visuales de la pagina,metadatos, etc... -->
  <meta charset="utf-8"/>
  <!-- - Algunas etiquetas no necesitan ser cerradas como por ejemplo esta, que
  se coloca para que las tildes sean reconocidas por el navegador, pero es una
  buena practica cerrarla, otros ejemplos: <br>"pasaria a esto"<br/>, etc... -->
  <title>Mi primer archivo HTML</title>
  <!-- <title/> Sirve para poner un titulo a tu pagina. El titulo es muy importante
   ya que google le da mucha relevancia para que encuentren tu pagina en los navegadores -->
  <style type="text/css"> /* <style/> Es utilizada para definir un codigo en CSS, se coloca dentro de head */
  /* type="text/css" Esto es un atributo de la etiqueta */
  body
  {
    background-color: #AAAAFF;
    /* background-color es el atributo que cambia el color de fondo de tu pagina */
    color: white;
    /* Color es el atributo que cambia el color del texto de tu pagina */
    font-family: Helvetica;
    /* font-family es el atributo que cambia la fuente de tu pagina */
  }
  strong
  {
    background-color: #FFAAAA;
    /* Para ver el codigo hexagecimal del color que deseas escribe en google: #ffffff */
  }
  </style>
</head>
<body> <!-- Contiene todos los elementos visuales de la pagina -->
  <p>Hola <strong>mama ya casi</strong> aprendo</p>
  <!-- <strong/> sirve para poner negrita -->
  <p>Esto es un parrafo</p>
  <!-- <p/> es un parrafo, RECUERDA: Todos los textos en HTML deben estar envueltos
  por etiquetas, la mas sencilla es <p/> -->
  <script type="text/javascript"> // <script/> Es utilizada para definir un codigo JavaScript, se coloca antes de terminar el body //
    var $x = 1;
    // var declara una variable, como let o const //
    var _y = 2;
    // Las variables tienen reglas: No pueden empezar con numeros (solo con letras), se diferencian mayusculas y minusculas, y no se pueden usar caracteres raros (como ñ o tildes) ni espacios.
    var Freddy_Vega1 = $x + _y;
    document.write("El valor de Z es " + Freddy_Vega1);
    // document.write es una funcion que escribe strings dentro de html, es como body pero dentro de JavaScript //
  </script>
</body>
</html>

Muy importantes las reglas para nombrar variables en JavaScript:

  • No pueden empezar con números, sólo con letras
  • Se diferencian mayúsculas y minúsculas
  • No se pueden utilizar caracteres "raros" como ñ o tildes

🐱‍💻 Para poner un texto en negrita podemos usar <strong> o <b>, la diferencia es que el primero se utiliza para hacer énfasis en un texto (destacar en búsquedas) y el otro simplemente para darle un aspecto visual.

Freddy olvidaste mencionar lo de <meta charset="utf-8"/>


Que se coloca para que las tildes sean reconocidas por el navegador

Hola, para todos los nuevos que estamos aquí y tenemos el error cuando empezamos a trabajar con la etiqueta <style>, (el body no nos cambiaba de color y teniamos que escribir todo manual y eso) despues de estar leyendo un poco y travesiando, he encontrado que el problema esta cuando nombramos el tipo de archivo.
Freddy nos dijo nombrarlo “primero.html”, pues bien, leí que la ultima versión de html es la versión 5, asi que cuando vayan a nombrarlo nombreenlo con .html5
Y les va a funcionar. Esa es la solución. 😉

Cuando instalas Atom, puedes hacer código más rápido con Emmet, que es un complemento de Atom, Tan solo vas a File -> Setting -> + Install, digitas Emmet e instalas, luego reinicias Atom. 

Luego lo pruebas escribiendo html:5 y seguido la tecla TAB y veras como se crea código mágicamente, luego así para cada etiqueta, por ejemplo solo escribes "p" y luego TAB y ya te abre y cierra las etiquetas. Es mágico.  

MicroResumen

  • Buenas Prácticas => Son estándares sobre la escritura de código, de tal manera que varios programadores puedan escribir e interpretar el código sin que les sea extraño su comprensión.
  • Los programadores pasan entre el 80% y el 90% leyendo e interpretando código, y un 10% a 20% escribiendo código.
  • Identar Código => Forma parte de las buenas prácticas, ayuda a interpretar mas rápido el código organizándolo.
  • Todo lo que debe ejecutarse antes de cargar la página debe ser definido dentro de la etiqueta <Head></Head>.
  • Sintaxis => Son reglas de escritura de los lenguajes de programación, estas deben ser respetadas para que el código funcione correctamente.
  • Las variables pueden nombrarse tanto con palabras copo también números, aunque existen ciertas restricciones como por ejemplo, deben ser escritos de la misma manera tanto al crearse como también al utilizarse, ya que javascript así como la gran mayoría de los lenguajes profesionales de programación, distingue las mayúsculas y las minúsculas, si el nombre va a estar compuesto por dos palabras, estas deben ir unidas con guión bajo ( _ ), si se va a utilizar números, estas no pueden ir al comienzo del nombre (ej: 2_Fredy) si pueden ser dentro de la estructura del nombre o al final del mismo(Fre2dy, Fredy_2).
  • Los programas son un 90% similares, y solo un 10% distintos, esta diferencia se debe a las reglas especiales que pueden contener las mismas.
  • Atributo de la etiqueta solo puede ser declarado en el inicio del mismo, mas no al final.

Espero les sirva

¿Por que no me cambia algunos colores en Atom? (posible solución):

1- En la parte inferior derecha del programa (Atom) aparece HTML y le das click.
2- Se habré una ventana, en el buscador le pones H (el inicial de HTML) y dentro de las opciones aparece: HTML (go) y le das click.

No se si esto es correcto, pero me funciono.

Recurso 10.jpg

los créditos le corresponden a este: https://platzi.com/comentario/913353/

  • HTML funciona con etiquetas.

  • IMPORTANTE: Si no guardas el archivo antes de que empiezes a programar el editor no te ayuda ni te coje los estilos.

  • Los programadores tienen que ver las extensiones, para ello:

Windows:
https://helpx.adobe.com/la/x-productkb/global/show-hidden-files-folders-extensions.html

Mac:
https://support.apple.com/kb/PH25381?locale=es_ES&viewlocale=es_ES

  • En HTML tienes etiquetas que significan cosas especiales y funcionan asi:

      <etiqueta>contenido</etiqueta>
    
      <strong>Hola Mama</strong>
    

Algunas etiquetas no tienen contenido por dentro, en estos casos no se le coloca una etiqueta de cierre si no:

	<etiqueta />

	<br /> (Esto es un salto de linea)

Es una buena practica colocarle / para señalar que esta vacia por dentro aunque no es necesario

Esta es la base de HTML, pero recuerda este es un lenguaje para escribir informacion pero no es un lenguaje de programacion

  • <strong> y <b> Sirven para poner negrita

  • Todos los contenidos en HTML deberían estar dentro de una etiqueta, la etiqueta mas facil para envolver un texto es un parrafo <p>

  • <p> Sirve para crear un parrafo

  • Asi se escriben comentarios:

HTML:
<!-- Asi se escriben comentarios en HTML -->

CSS:
/* Asi se escriben comentarios en CSS */

JS:
// Asi se escriben comentaros de una sola linea en JS //
/* Asi se escriben comentarios multilineas en JS */

Para escribir comentarios mas rapido simplemente selecciona el texto que quieras que este en un comentario y pulsa CTRL + Tecla ?/

Tambien puedes usar un plugin de atom llamado docblockr:
Mas info: https://platzi.com/blog/plugins-de-atom-para-el-desarrollo-web/

  • Ejemplo de estructura basica de un archivo HTML:

<!DOCTYPE html>
<!-- Esto es una buena practica para indicar el estandar de HTML 5 -->
<html>
<head> <!-- Contiene todos los elementos no visuales de la pagina,metadatos, etc… -->
<meta charset=“utf-8”/>
<!-- - Algunas etiquetas no necesitan ser cerradas como por ejemplo esta, que se coloca para que las tildes sean reconocidas por el navegador, pero es una buena practica cerrarla, otros ejemplos: <br>“pasaria a esto”<br/>, etc… -->
<title>Mi primer archivo HTML</title>
<!-- <title/> Sirve para poner un titulo a tu pagina. El titulo es muy importante
ya que google le da mucha relevancia para que encuentren tu pagina en los navegadores -->
<style type=“text/css”> /* <style/> Es utilizada para definir un codigo en CSS, se coloca dentro de head /
/
type=“text/css” Esto es un atributo de la etiqueta style*/
body
{
background-color: #AAAAFF;
/* background-color es el atributo que cambia el color de fondo de tu pagina /
color: white;
/
Color es el atributo que cambia el color del texto de tu pagina /
font-family: Helvetica;
/
font-family es el atributo que cambia la fuente de tu pagina /
}
strong
{
background-color: #FFAAAA;
/
Para ver el codigo hexagecimal del color que deseas escribe en google: #ffffff /
/
Tambien puedes usar un plugin de Atom llamado color-picker https://neliosoftware.com/es/blog/plugins-para-atom-imprescindibles/ */
}
</style>
</head>
<body> <!-- Contiene todos los elementos visuales de la pagina -->
<p>Hola <strong>mama ya casi</strong> aprendo</p>
<!-- <strong/> sirve para poner negrita al igual que <b/> -->
<p>Esto es un parrafo</p>
<!-- <p/> es un parrafo, RECUERDA: Todos los textos en HTML deben estar envueltos
por etiquetas, la mas sencilla es <p/> -->
<script type=“text/javascript”> // <script/> Es utilizada para definir un codigo JavaScript, se coloca antes de terminar el body //
var $x = 1;
// var declara una variable, como let o const //
var _y = 2;
// Las variables tienen reglas: No pueden empezar con numeros (solo con letras), se diferencian mayusculas y minusculas, y no se pueden usar caracteres raros (como ñ o tildes) ni espacios.
var Freddy_Vega1 = $x + _y;
document.write("El valor de Z es " + Freddy_Vega1);
// document.write es una funcion que escribe strings dentro de html, es como body pero dentro de JavaScript //
</script>
</body>
</html>

  • Identacion, es simplemen te una buena practica para los bloques de codigo, consiste en darle un tab a estos para focilitar su lectura

  • Los programadores pasan el 80% de su tiempo leyendo código y 20% escribiendo código, por esto es importante SEGUIR BUENAS PRACTICAS.

Coño mi primer día en Platzi y no creí poder aprender tanto <3 

Todo genial. Para los que no les salen los colores en las etiquetas. Van a la parte inferior derecha y dna click en HTML (está en mayúsculas) luego se abre una ventana y le dan en Auto Detect y listo, todas las etiquetas serán con colores 👍

Hola. Bueno este es mi resultado después de ver ‘HTML, CSS, JavaScript de verdad’

Primero html.png
Primero en buscador.png

Hola puse el script al principio y antes del final del body y de todas formas cuando recargo la pagina me aparece primero el alerta y recién cuando doy aceptar aparece el diseño de la pagina. No entiendo que hice mal? en ninguno de los dos casos muestra el diseño de la pagina

document.write("Hasta ahora estoy aprendiendo bien");

Por si alguien no encuentra estos simbolos en su teclado <>, pueden usar los comandos
"Alt+60" para <
“Alt+62” para >.

100%=90%+20%???

<DOCTYPE html>
<html> 
 <head>
 <title>mi primer archvo html</title>
<style>
 body
 {
   background-color: red;
   color: blue;
   font-family: helvetica;
  }
  strong
  {
  background-color: yellow;
  }
</style>
 </head>
  <body>
  <p> ME <strong>ENCANTA</strong> LA PIZZA
  <p> SI PIESAS <strong>QUE LA VIDA ES DURA RECUERDA QUE MAS DURA</strong>ES LA VERDURA<p>
  <script>
  alert("la pizza es super sabroza")
  var pizza= prompt("¿te gusta la pizza tambien?");
  var a = "me pizza"
  var b ="esta" 
  var c= "varata"  
  document.write(a+" "+b+" "+c);
  </script>
  </body>
</html>```

Excelente curso


Solo por aportar algo al curso, es válido aclarar que <strong></strong> no es negrita, semánticamente es hacer un énfasis en algo. Podrían confundirse los nuevos estudiantes.

Aqui encontre una pagina con algunas etiquetas para los que gusten y quieran experimentar mas durante el curso.
http://www.mclibre.org/consultar/htmlcss/html/html-etiquetas.html

escribo la etiqueta script al final de la etiqueta body pero aún así el navegador me lee primero el script, ¿a que se debe?

Si a alguien no le resalta algunos comandos (específicamente los de JS y CSS), deben cambiar el lenguaje a HTML (Go) en la parte de abajo

Yo tengo una pregunta que no sé si se resuelva en alguna parte posterior del curso, pero me gustaría saber para alguien que ya tiene bagaje en el mundo de la programación cómo organizar los diferentes comandos que se tienen por código, es decir, como creo una bibilioteca efectiva de comandos para cada código y no confundirme entre uno y otro. Cualquier respuesta es bien recibida!

A todos los nuevos compañeros les recomiendo Visual Studio Code en vez de Atom, es bastante mejor.

HPSCAN.jpg

Apuntes

  • Las etiquetas <> significan cosas especiales

  • El cierre de las etiquetas lleva /

  • Todos los textos deben estar envueltos en una etiqueta

  • Las buenas prácticas son estándares para escribir código entendible

  • En <head> va todo lo que no se ve; lo que carga antes que toda la página

  • document.write permite escribir en el HTML

  • Los nombres de variable pueden ser casi con cualquier con letra o número, pero con reglas

  • En JS las mayúsculas y minúsculas importan

Recomiendo los curso de google actívate te enseña html y css gratis.

Ya me siento programadora JAJAJA

en este vídeo aprendí lo de un semestre en la universidad :😕

Si a alguno no le salen las ayudas de color de texto que brinda Atom, cambien en la parte inferior derecha, el HTML grammar a uno que diga** HTML con Tree-Sitter.**

Captura de Pantalla 2020-04-21 a la(s) 19.46.44.png

Windows y las extensiones

En Windows normalmente no se ven las extensiones de archivo.
La Solución es:

  1. Abrir el Explorador de Archivos.

  2. ir a Vista.

  3. Seleccionar Extensiones de nombre de archivo.

Síntaxis de HTML

  • Toda etiqueta HTML va entre símbolos menos qué y mayor qué. Ejemplo1.
  • Toda etiqueta HTML debe cerrarse con el símbolo de Slash (/). Ejemplo2.

Reglas de las Variables en JavaScript

Reglas de las Variables:

  • Las variables no permiten espacios.
  • El primer carácter de una variable siempre tiene que ser una letra, no un número.
  • No se pueden usar signos raros como la ñ o los acentos.
  • Las mayúsculas y minúsculas no son indiferentes.

Buenas Prácticas y Porcentajes

Buenas prácticas: Es un estándar para manejar el código para que cualquier programador pueda entenderlo fácilmente.

Los programadores pasan 80% de su tiempo leyendo código y solamente del 10% al 20% escribiendo código.

Los lenguajes son un 80% similares y un 10% al 20% diferentes.

Recordatorio: Recuerda guardar el archivo, si no, no el editor no te va a ayudar y el navegador no lo va a abrir.

Reglas de código en Javascript

  • Una variable (var) no puede tener 2 palabras separadas con un espacio, debe ser “underscore” o “guion bajo” o “rayita al piso” 😉 (_)
  • No iniciar el caracter de una variable con número, siempre debe iniciarse con una letra.
  • No puedes usar signos raros como: Ñ o tildes.
  • Las minúsculas y las mayúsculas son diferentes.
  • Puedes iniciar un caracter de una variable con un (_) o ($) y no hay problema.

<html>
<head>
<title> FREDDY CRACK </title>
</head>
</html>

Para todos los que no se les colorea el texto vayan a la parte inferior del programa y busquen “HTML” denle click y luego seleccionen “Auto Detect”.
Un abrazo! 😉

freddycasateconmigo.png

No importa si coloco el alert al inicio o <body> o antes de acabar </body> el alert siempre carga primero que toda la página 😒

Hola Buenas Noches.
Tengo una pregunta, estaba haciendo el ejercicio que iba desarrollando freddy, siempre se dispara primero el scrip no importa donde lo ponga(sea al principio de la etiqueta body o al finalizar la etiqueta body )

Hola.En esta clase de Platzi de 27 minutos, Aprendi y logre comprender las bases solidas de diseño web.En UDEMY tome un curso de 3h y **No logre entender nada.**Personalmente creo Platzi es un ejemplo mundial de pedagogía.
Gracias 😃

SI no les carga bien los colores en Atom, en la barra de abajo a la derecha parece “HTML” haciendo clic pueden cambiar el lenguaje. Si le dan en “Auto Detect” recarga los colores y ya los muestra bien.

si de por si Freddy habla rapido esta cool escucharlo en 2x de volocidad

esto es muy dificil termine muy mareado


Si les parecen importantes los comentarios esto les sera útil:
→Así se comenta en html:
<!-- tu comentario -->
→Así se comenta en javascript una linea:
// tu comentario //
→Así se comentan varias lineas en javascript :
/* tus comentarios */
→Así se comenta en css:
/*tu comentario */
Además estas son algunas etiquetas de uso frecuente en html:
<b> o <strong>: Negrita
<i> o <em>: Cursiva
<u>: Subrayado
Todas las etiquetas deben cerrarse respectivamente. Espero les sea útil 😃

Para activar el color de body debajo de <style> solo hace falta en Atom Ctrl + Shift + L Auto Detect

existen profesores buenos y despues esta este caballero que es un capo enseñando

Para quienes no les funciona el auto-complete dentro de la etiqueta style, lo que deben de hacer es pulsar ctrl+shift+L y seleccionar HTML (Go) como lenguaje.
Esta opción toma en cuenta que vas a escribir código css dentro de un archivo html, no es buena práctica, pero ahorita para ir aprendiendo está bien hacerlo.

mi primer archivo HTML.PNG
No se me resaltaron los comandos pero funciono bien todo

La versión del editor atom que descargué no me colorea muchas partes del código como lo hace el editor que utilizas en el video, aún así el código corre sin problemas. A que se debe eso ? Es cuestión de cambiar las configuraciones ? o son detalles de la versión ?

Hola compañeros les comparto mi ejercicio. Anotación 2020-03-31 134347.png

Cuál es la razón por la que independientemente de donde ubique la etiqueta <script> siempre obtengo el mensaje de alerta antes que el cuerpo (etiquetas <p>)?

Me aparece siempre el mensaje primero antes que cargue el contenido de la pagina. He probado en varios navegadores.

<html>
<head>
<title>Mi primer archivo HTML</title>
<style>
body
{
background-color: #AAAAFF;
color:white;
font-family: Helvetica;
}
strong
{
background-color: #FFAAAA;
}
</style>
</head>
<body>
<p>Hola <strong>mamá ya casi</strong> aprendo</p>
<p>Este es otro párrafo</p>
<script>
alert(“Mensaje especial con alerta”);
</script>
</body>
</html>

Ya sabía programar en Python pero ahora quiero aprender desde cero.

<!DOCTYPE html> 
<html>
<head> 
<title> Diccionario </title> 
	<style type="text/css"> 
	Body{
		background-color: #597C99;
		color: #FF886E;
		font-size: 20px;
		font-family: cursive;
	}
	</style>
</head>
<body> 
	<p> <"body"> Aquí se escribe la estructura del texto.</p>
	<p> <"!Doctype html"> Esta etiqueta es muy inecesaria hoy en día, pero puede ser encontrado en lenguaje de software viejo</p>
	<p> <"head"> Aquí van los metadatos como estilos de diseño y título de la página</p>
	<p> <"title"> Aquí va el título de la pestaña </p>
	<p> <"style"> Nos permite agregar diseño, <"style type=text/css"> es lo mismo pero escrito de forma vieja</p>
	<p> "background-color" Aquí cambiamos el color de fondo. No es una etiqueta, es sólo una variable de <"Style"> </p>
	<p> "color" Aquí cambiamos el color de la letra del texto de <"body"> (ya que ese el bloque de texto que esta siendo modificado por <"Style"). No es una etiqueta, es sólo una vairable de <"Style"> </p>
	<p> <"p"> Esta etiqueta sólo define un parrafo.</p>
	<p> <"/"> Así es como se cierra una etiqueta. </p>
	<p> "font-size" Aquí cambiamos el tamaño de la letra </p>
	<p> "font-family" Aquí cambiamos la tipografía</p>
	<p> "{      }" Esto sirve para abrir y cerrar bloques de código</p>
	<p> <"script"> Es la etiqueta que nos permite colocar código de programación</p>
	<p> "Document.Write" es la opción que nos permite escribir en "body" usando javascript</p>

	
	<script>
	alert("Esto es un alert (y son muy molestos)");
	var x = 1;
	var y = 2;
	var z = x + y;
	document.write("Todo empieza sabiendo que sí el valor de X es " + x);
	document.write(" sumado al valor de Y que es " + y); 
	document.write(" entonces X + Y es igual a Z, es decir " + z); 
	</script>
</body>
</html>```

El SCRIPT SIEMPRE AL FINAL ! jaja ley !
Si en ATOM tienes problemas de que no se colorean ciertas palabras o etiquetas como body o strong, guarda el archivo y cierra el mismo y vuelve abrirlo y en automático se colorea.

Para los que estan usando Atom, podrian querer activar las lineas guia (Indent Guide)

  1. Vayan en la parte superior izquierda a donde dice “Edit”
  2. Denle un click en “Preferences”
  3. Otro click mas en donde dice “<> Editor”
  4. Marcamos la casilla en donde dice “Show Indent Guide”

https://www.youtube.com/watch?v=nXPOStcUMyU

Muy buena esta clase, bastante información de una sola vez y perfectamente definida. 😃

<!DOCTYPE html>
<html>
  <head>
    <title>Mi primer HTML</title>
    <style type="text/css">
      body{
        background-color: #AAAAFF;
        color: #FFFFFF;
        font-family: Helvetica;
      }
      strong{
        background-color: #FFAAAA;
      }
    </style>
  </head>
  <body>
    <p>Hola mama, <strong>ya casi aprendo</strong></p>
     <p>Este es otro párrafo</p>
     <script type="text/javascript">
       var x = 1;
       var y = 2;
       var z = x + y;
       alert("Mensaje especial con alerta");
       document.write("Mensajito curioso! El valor de Z es: " + z);
     </script>
  </body>
</html>

Buenas practicas: escribir código de manera que otros programadores lo puedan entender.
**Identacion: **Lo que esta dentro de un bloque de código se corre un poco a la derecha con la tacla tab del teclado.
Estilos: se ponen en un archivo aparte o dentro de la etiqueta head ya que en esta etiqueta esta todo lo que no se ve, esto se llama “metadatos”.
Sintaxis: Reglas de los lenguajes de programación.
Etiquetas:
<strong></strong> = Negritas
<p></p> = Párrafo
<head></head> = Cabecera, siempre se encuentra después de la etiqueta html.
<title></title> = Para poner nombre al archivo en el navegador, la etiqueta title es la que usa google para mostrar las paginas en el buscador.
<body></body> = va dentro de esta etiqueta lo que se observa de manera visual en el navegador.
<style></style> = Código que no es html este es css (código de estilos en cascada), ese te asigna a etiquetas especiales, id o clases, permite añadir diseños a ciertas etiquetas.
body{} = dentro de las llaves se crean atributos para dar diseño a la pagina, los atributos terminaran en “;”.
<script></script> = para colocar JavaScript, la forma mas fácil de colocarlo es antes del cierre de la etiqueta body, ponerla al final es una buena opción porque así ya estaría cargado todo el diseño de la pagina.
document.write(""); = para escribir un mensaje con JavaScript.
var = son variables, el nombre de las variables pueden ser letras y números, opero estas no permiten espacios, para poner espacio se utiliza el under escope (_) es el guion bajo, no se puede poner un numero al inicio del nombre de la variable, no se pueden utilizar símbolos “raros” y tiene que escribirse exactamente y no mayúsculas y la mandas a mandar en minúsculas.
<!DOCTYPE html> = Es un estándar de buenas practicas de HTML 5, esta etiqueta se encuentra antes de la etiqueta html.
<style type=“text/css”> = Atributo de la etiqueta.
<script type=“text/javascript”> = Atributo de la etiqueta.

Yo estoy siguiendo los mismos pasos que Freddy, pero cuando el hace las etiquetas “<style>” y pone “body” entre ambas etiquetas, a el le sale de color rojo, a mi no me sale nada, sólo se queda en gris. ¿Alguien que me explicara qué puedo hacer? Gracias se los agradecería.

<html>
<head>
<title>Mi primer archivo HTML</title>
<style>
body      
</style>
</head>
<body>
  <p>Hola <strong>mama ya casi</strong> aprendo</p>
  <p>Este es otro parrafo</p>
</body>
</html>```

la peor parte es tener que volver al trabajo en ves de seguir con esto 😦

a mi me aparece la alerta antes de cargar toda la pagina aunque la ponga justo antes de que cierre body (min 19:30)

Hola, cuando escribo body luego de las etiquetas <style> el programa lo lee como si fuera un texto normal y no me permite seguir, DEBEN HACER LO SIGUIENTE: Atom, si es igual tu caso, dale en la parte inferior derecho un apartado que dice HTML, al darle click saldrán unas opciones, solo dale en Auto Detect.

me pasa algo raro con atom, hasta cierto punto me aparecen coloreadas las etiquetas, despues de la mitad del ejercicio dejaron de aparece, pero sigue funcionando normal a la hora de actualizar en el navegador

Buenas Practicas:
Pasamos la mayor parte del tiempo leyendo y entendiendo cogigo; las buenas practicas ayudan a hacer ese codigo mas legible
Algunas buenas practicas:

  • Usa la indentacion; asi entendemos mejor (mas visualmente) las relaciones de subordinacion
  • Usa variables autoexplicativas
  • Coloca todas las etiquetas (aunque no parezcan necesarias)

Bueno que opinan pensé no lograrlo.

Basico HTML.JPG

Sitio donde encontraran etiquetas y su definición
Etiquetas html.png

https://allthetags.com/

Hola en mi caso ni cambia de color (<strong>) ni se refleja en navegador, que hago?

Despues de colocar el <style> </style> todos las palabras en el Atom que tenian color dejaron de tenerlo, todo siguio funcionando igual en atom pero las letras estaban blancas

Hola! No puedo usar la etiqueta Body dentro de STYLE (No me aparece en tono rojo las letras de “BODY” sino en gris). ¿Qué hago?!

Por que Atom no me cambia de color las palabras como Blue, body…
com ose activan los indicadores o algo?
Gracias

![](Captura de pantalla (2).png)
Alguien me puede decir porque no se me ponen de colores algunas cosas (si funciona solo no se ponen de colores.

y otra cosa, aun que ponga el script al final, la alerta se hace al principio.
PLSSS HELP

Hola, he revisado mi texto y está bien escrito, pero no me coloca las palabras en negrita

Para ser mi primer curso de programación, esta bien entendible.

Yo tengo una pregunta. Cuando estaba escribiendo mi código, idéntico al de Freddy, cuando comencé a escribir lo que estaba debajo de “<style>”, no se me coloreó esa sección (todos me salen en gris), y tampoco me aparecían las guías del código como a Freddy (para autocompletar, por ejemplo, mientras ponía “background-color”). ¿Por qué me sucede esto?

Como curiosidad: con Safari se me cumple que las caja de texto generadas con “alert” aparece antes o después de cargar la pagina según si están codificadas al principio o al final de <body> pero con chrome me aparece siempre antes de cargar la página aunque el código esté escrito al final de <body>.
(Tampoco lo voy a investigar, hay mucho camino por delante)

Me emociono!!! x3

chicos le super recomiendo que utilicen visual studio code es buenisima

Les comparto un proyecto escolar que hice con el programa dreamweaver el cual subí mi proyecto a un repositorio en GitHub https://thelaststar122.github.io/-diseases/ espero les guste.

Dentro de la etiqueta html podemos declarar el idioma en el cual va estar todo en nuestro programa con como por ejemplo…
<html lang=“es”>

<html>
<head>
  <title>mi primer archivo</title>
  <style>
    body{
      
    }
  </style>
</head>
<body>
  <p> hola <strong>mamá ya casi aprendo</strong></p>
  <p> este es otro parrafo</p>
</body>
</html>

alguien me puede ayudar, por que body no se me resalta en atom

*Estructura básica de un documento .html

<!DOCTYPE html>
<html>
	<head>
		<title>Título en la pestaña del navegador</title>
		<style>
			body
			{
				background-color		:	black;
				color				:	white;
			}
		</style>
	</head>
	<body>
		<h1>Título princial de la pàgina</h1>
		<p>Contenido de la página</p>
	<script>
		console.log("Mensaje en la consola");
	</script>
	</body>
</html>

Aplicando las técnicas de memorizar, en eso andamos jejeje

estoy armando un grupo de whatsapp para compartir conocimiento, podremos conversqr de varios temas para resolver dudas, y por que no emprender en algun momento.

https://neliosoftware.com/es/blog/plugins-para-atom-imprescindibles/

ese link lo subió alguna persona en un comentario… la verdad es muy útil para los que nunca habían usado Atom (soy uno de esos)… si ven el comentario den like, se lo merece…

Reglas para nombrar variables:

1.- No aceptan espacios en blanco: Si necesitas una variable compuesta por mas de una palabra puedes utilizar el símbolo: _ . Ejemplo: freddy_vega.
2.- No se pueden utilizar números al inicio del nombre de la variable: Debe empezar siempre con una letra, los números pueden utilizarse después.
3.- Evitar asignarles símbolos “raros” como la ñ o las tildes: Raros para el idioma inglés, que son el idioma de los creadores de JS y HTML.
4.- Tener en cuenta que JavaScript diferencia entre mayúsculas y minúsculas, por lo que la variable: Freddy no es igual a la variable: freddy.

Controles & Opciones que te facilitaran a vida:

Ctrl + S (Para guardar)
Ctrl + Mas (Para aumentar tamaño)
Ctrl + - (Para disminuir espacio)

80% de tu tiempo dedicalo a
Leer codigo para entender

20% de tu tiempo dedicalo a crear y
Escribir tu propio codigo

Desde mi punto de vista, les recomendaria a todos el visual studio code excelente programa

Hola buena madrugada, soy desarrollador de software hace 6 años, y estaba buscando como enseñarle a mi hijo codificar, y es lo mejor, sencillo y concreto. Excelente!!

  • Los programadores de verdad pasan del 80 al 90 % LEYENDO CÓDIGO
  • El otro % se lo pasa ESCRIBIENDO

a alguien le sale la alerta antes de que cargue la pagina ?
hice de la misma manera que en el video y me sale la alerta antes de cargar la pagina

<> Compañeros recuerden cerrar las etiquetas </>

Esta es una excelente herramienta para insertar colores, muy buena para hacer degradados
http://www.colorzilla.com/gradient-editor/

Amigos les recomiendo que en Atom instalen el paquete de emmet, les ayudara mucho a escribir en html, si tienen alguna recomendación de algún pluggin de JavaScript dejenmelo saber en los comentarios de este aporte.

Aquí puedes conseguir el código de colores:
https://html-color-codes.info/codigos-de-colores-hexadecimales/

Screenshot_8.png

en esta clase ya se dio un gran salto

Hola, coloco el script al final o al principio del body y siempre aparece primero la ventana de alert y luego el contenido del body

Mis apuntes.

reglas de las variable:

  1. Las variables no dejan espacio
  2. El primer caracter de una variable siempre tiene que ser una letra. NO un numero.
  3. No se pueden usar signos raros
  4. la mayuscula y la minuscula Importa

los lenguajes de programacion son un 80% similar y un 20% distinto

los programadores pasan el 80% son leyendo código y el 20 al 10% escribiendo código
No cometa el error de escribir codigo complejo. Escribe el código de la manera mas legible posible

mensaje de script hay que ponerlo al final de la pagina

Si tiene algun problema con su editor de texto respecto a que no le autocompleta las funciones o le corrige como sucede en el video ell consejo es que deben presionar CTRL + SHIFT + L y seleccionar la sintaxis del lenguaje que se esta usando en este caso yo coloque html(go).

alguien noto que en el minuto 25:27 Fredy dice que los programadores pasan el 90% leyendo codigo y el 20% escribiendo, lo siento no pude evitar el comentario por que lo repite dos veces, jajaja la suma de los datos serian en total un 110%

recién arrancando, pero esta bueno, y va muy bien explicado… para cualquiera que arranca desde cero.

Le añadi unos cuantos detalles de mi parte mientras fui curioseando pero al fin escribi mi primer codigo!