Crea tu primer sitio web

☝ Hay un dicho que me encanta para describir las extensiones y es: “las extensiones son mera cortesía para tu sistema operativo” 🤓. ¿Por qué? Porque tal como menciona la clase, no importa qué extensión tengas, a final de cuentas, todo termina siendo un archivo de texto puro para tu computadora 😄.
.
¡Sí! Literalmente puedes abrir cualquier archivo en un bloc de notas (aunque algunos de ellos te aparecerán con símbolos extraños si intentas abrirlo 😵). A lo que tu computadora le interesa es que ese archivo de texto que escribes contenga información que ella pueda leer e interpretar para poder mostrarte a ti algo en pantalla 💚.
.
Profundizo un poco más en cómo funciona esto en este blogpost 👇:
.
💻 ¿Qué computadora necesito para programar?

Un pequeño ejemplo para comprender mejor la parte de HTML, CSS y JS
Vease a HTML como el esqueleto, la estructura del programa. CSS como el diseño o apariencia que se le dará. JS como el cerebro que ejecutará acciones.
.

Un tip para abrir el archivo de manera rápida en el navegador (En mi caso Chrome) es usar las teclas Control + O

3 - Crea tu primer sitio web

• Estructura de un archivo: <nombre de archivo>.<extension>
  • archivo**.extension**
  • carta**.docx**
  • hoja**.xls**
  • pagina**.html** →
• HTML (Hyper Text Markup Language): lenguaje sobre el que esta construido internet, es un formato que engloba otras tecnologias que nos permiten usar sitios WEB. Ej: gifs, imagenes (png, jpg), video, diseño,
• CSS (Hojas de estilo en cascada): lenguaje de declaración del estilos de diseño de una pagina web. Puede ir dentro del HTML o aparte.
• JavaScript: Es un lenguaje de programación, de los más usados en el planeta. Con el se puede construir lo que sea. Pero antes se debe estructurar la información con HTML

<aside>
💡 HTML define la estructura de una pagina, CSS el diseño de la interfaz y JS se encarga de las funcionalidades

</aside>

Por dentro todos los archivos son textos, organizados de distintas forma. por eso es posible abrir cualquier archivo con un editor de texto como block de notas

1ra pagina web con html:

<h1>Mi primer sitio WEB</h1>
Hola <strong>querida</strong> clase

Siendo sincero estoy en mi 4 semestre de ingeniería de software y no siento que haya aprendido lo suficiente, así que decidí dejar la flojera a un lado y por fin comenzar mi camino autodidacta, esto depende de mi y agradezco a platzi por ayudar en mi proceso

Para los usuarios de macOS, para crear un documento de texto, seria de esta forma.

-Buscan la aplicación TextEdit y la abren

• Luego se van a nuevo documento

• Donde dice archivo le pican y van a donde dice guardar

• Luego ya le ponen el nombre y la formato seria la extensión que necesitan

Está churris el Freddy 😄 ♥

Mi esposa me mantendra 6 meses para que yo pueda dedicarme enteramente a estudiar los cursos de Platzy, estoy emocionado 💗 a darle duro

• ¿Qué es html?
  • Es un lenguaje de marcado de etiquetas, que se encarga de estructurar el contenido de una pagina web.
    • Es decir que es como el esqueleto del cuerpo humano.
• ¿Qué es css?
  • Es un lenguaje de estilos en cascada , que se encarga de darle estilo a al html.
    • Es decir que funciona como si fuera la piel del ser humano.
• ¿Qué es Js?
  • Es el lenguaje utilizado para programar la pagina web.
    • Funciona como si fueran los organos del cuerpo humano

Resumen de la clase 😃

• Estructura de un archivo: <nombre de archivo>.<extension>
  • archivo.extension
  • carta.docx
  • hoja.xls
  • pagina.html
• HTML (Hyper Text Markup Language): lenguaje sobre el que esta construido internet, es un formato que engloba otras tecnologias que nos permiten usar sitios WEB. Ej: gifs, imagenes (png, jpg), video, diseño,
• CSS (Hojas de estilo en cascada): lenguaje de declaración del estilos de diseño de una pagina web. Puede ir dentro del HTML o aparte.
• JavaScript: Es un lenguaje de programación, de los más usados en el planeta. Con el se puede construir lo que sea. Pero antes se debe estructurar la información con HTML

💡 HTML define la estructura de una pagina, CSS el diseño de la interfaz y JS se encarga de las funcionalidades

Por dentro todos los archivos son textos, organizados de distintas forma. por eso es posible abrir cualquier archivo con un editor de texto como block de notas, existen otros como notepad, lo mas usados para programar son visual estudio code, sublime text entre otros.

Tomé el anterior curso de programación aún asi tomaré este para seguir aprendiendo 💪💚

👉Aprender HTML, CSS y JavaScript es fundamental. Por eso es recomendable no correr demasiado rápido mientras intentas dominarlo.

🧐Mientras mejor afiances tus conocimientos de estas tres tecnologías en tu primer intento, no tendrás que volver al principio tantas veces a repasar lo que debiste haber aprendido bien.

🥇En esta carrera no debes llegar de primero, lo importante es llegar. Te aseguro que si corres demasiado rápido no serás de los primeros, es muy probable que tardes mucho más.

Pa la proxima tambien se debe explicar a lo que usamos el sistema iOs

Like si amas a Freddy 😄

Bueno, aquí voy de nuevo, el anterior curso no lo terminé nunca, a pesar de intentarlo varias veces, espero en verdad poder terminar este y sobretodo aprender de verdad a programar y poder darle un futuro diferente a mi familia. gracias Platzi por tanto amor que se ve en cada clase.

Crea tu primer sitio web

ㅤ
En el escritorio crear una nueva carpeta 📁, llámala programar.
ㅤ
Dentro de la carpeta crea un archivo 📄 con el nombre de pagina.html
ㅤ
Los archivos generalmente tienen la estructura nombre.extensión .
Ej. carta.docx, hoja.xls, pagina.html.
Lo que va después del . identifica el tipo de archivo (.docx→Word, .xls→Excel, .html→HTML).
ㅤ
Dentro del archivo 📄 página.html escribe el siguiente código para construir tu primera página HTML 😀 que lo puedes ver con el navegador.
ㅤ

<h1> Mi primer sitio web</h1>
Hola <strong>querida</strong> clase

ㅤ
HTML significa HyperText Markup Language ó Lenguaje de Marcado de texto, es la base en la que esta construido internet.
ㅤ
CSS significa Cascade Style Sheets u Hojas de Estilo en Cascada, es un lenguaje de declaración del estilo de diseño de una página web. Puede ir dentro de HTML o en un archivo externo.
ㅤ
JavaScript es el lenguaje de programación más usado. Con él se pueden construir varias cosas.
ㅤ

Por dentro todos los archivos son textos organizados de distintas formas.

Literal no se ABOSOLUTAMENTE NADA de esto jaja, pero me llama mucho la atención la programación porque me encantan los video juegos, pero me da miedo por como se ve todo. Espero de aquí a un año o menos, aprender como lo han hecho mucho de ustedes, es super bonito ver el entusiasmo de los maestros al explicar y de los alumnos dejando comentarios con grandes aportes. ANIMOS para todos :3

Para los que tienen windows 7 y no saben como activar las extensiones de archivo, tienen que:

1. abrir una carpeta
2. Herramientas
3. Opciones de carpeta
4. Ver
5. Configuracion Avanzada

• BUSCAR Y DESACTIVAR:

1. Ocultar las extensiones de archivo.

Bueno, después de meses me he decidido a cambiar de carrera. Me voy de contaduría pública a ingenieria en software… Con mucho miedo, tuve que enfrentar los comentarios de mi familia, al principio nada agradables porque a mis 28 años y casi media carrera de contabilidad… como se me ocurre cambiar de carrera. Bueno, me faltaban poco mas de 2 años para terminar asi que les dije, que preferia perder 2 años de carrera a perder 4, y que los dos que me faltarian, era mejor aprovecharlos en aprender algo que me llena y me hace feliz aun con sus dificultades, es algo que disfruto muchisimo. Espero en la universidad me den el cambio. NUNCA PAREN DE APRENDER. 😍

Resumen

todos los archivos tiene una extensión.
ej: documento**.docx**, imagen**.jpg** página**.html**

HTML significa “HyperText Markup Languaje” y es el archivo que da estructura a una página web

Creamos una carpeta en nuestra computadora, y en el apartado de vista seleccionamos mostrar las extensiones de los archivos y mostrar elementos ocultos
Clic derecho > Nuevo > Documento de texto, renombramos el documento y cambiamos la extensión a HTML

Este documento lo podemos abrir en un bloc de njotas y empezar a agregar contenido usando las etiquetas de html

<strong>coloca el texto en negritas</strong>
<h1>Agrega un título</h1>

<> etiqueta de apertura
</> etiqueta de cierre

Les recomiendo Visual Studio Code en lugar de Atom es un editor de código muy intuitivo y amigable.
https://code.visualstudio.com/

si por casualidad estas en linux específicamente en ubuntu puedes crear una carpeta usando la terminal con el comando “mkdir” y escribes el nombre que quieras ponerle y para entrar en ella escribí “cd” nombre" y para crear un archivo html escribes “touch” miPagina.html

💡 Como recomendación a todos. NO usen Atom. Está descontinuado y ya no tiene soporte. Pueden elegir el editor de texto que gusten. Pero, mi recomendación personal sin duda es Visual Studio Code.
 

 
Si quieren descargarlo, pueden hacerlo para:

• Windows 8, 10 y 11.
• Debian, Ubuntu, Red Hat, Fedora y SUSE.
• MacOS 10.11+.

 
Desde aquí. 👇
 

https://code.visualstudio.com/download

Actualmente no cuento con una forma de ingreso para pagar si quiera mensualmente Platzi y aprender. En este curso de manera autodidacta me estoy nutriendo un montón, quiero agradecer por ello…
Espero seguir creciendo junto a Platzi💚

No tengo conocimientos de programación,.pero de un tiempo para acá me ha crecido internamente el querer aprender, soy una persona de 46 años, que quiere algo distinto para su vida, no tengo una mala vida y me considero inteligente y espero que con estos cursos pueda lograr ese cambio tan anhelado, gracias platzi.
Además estoy recomendado su curso y plataforma a mis amigos cercanos

Tengo una mac y empieza a complicarse todo

ya entendi html, y no es un lenguaje de programacion, sino un lenguaje de etiquetas

ME GUSTO MUCHO ESTO Y LO COMPARTO

Un comentario para todos aquellos que ya saben programar y se pasan por aca.
POR FAVOR NO HAGAN APORTES POR FUERA DE LO QUE SE VE EN LA CLASE!!
En el curso anterior de programación básica había muchisimos aportes de gente ya profesional, donde solamante por ego mostraban cosas que no se veía en la clase. Para quienes recién están aprendiendo eso genera mucho miedo y frustación, a mi me pasó de ver cosas que no entendía como las habían logrado. Si van aportar algo, que sea sobre lo que se ve en clase, sino vayan a los cursos avanzados que allí seguramente sus aportes serán muy bien recibidos. Este comentario es solamente para ayudar a los principiantes, como lo fui yo, hace apenas 1 año, y espero que aquellos que estén mas avanzados se lo tomen para bien, ya que no es con mala intención que lo digo. Saludos

uuufffffff qué emoción

Apuntes:

• Estructura de un archivo:
  archivo.extension
  Lo que va antes del punto es el nombre y lo que va despues del punto es el tipo de archivo.

• HTML: Hyper Text Markeup Language (Lenguaje de etiquetas de Hipertexto). Estructura la informacion que vemos en una pagina web.

• CSS: Lenguaje de declaracion del estilo de diseño de una pagina web. (Hojas de estilo en cascada)

• JavaScript: Lenguaje de Programacion.

• Para colocar un texto en negritas en HTML: <strong>querida</strong>

• Lo que va dentro de los signos mayor que (>) y menor que (<) son etiquetas.

• Para colocar un titulo en HTML:
  <h1>Mi primer sitio web</h1>

Estoy aprendiendo con MAC y me siento super perdida. 😦

yo tengo 9 años y aprendo programación

Por favor mira que sea HTML… Estuve media hora fallando porque puse “HTLM”

Tengo casi 35 años, un titulo en Ingenieria financiera, cursos y experiencia en marketing digital. Y acá estoy… luchando como muchos por un mejor futuro para mi familia, estudiando nuevamente en las noches. Pensaba que para estas alturas en mi vida ya todo estaría resuelto y no necesitaría planes. Hoy con orgullo puedo decir que comencé un plan de 1 año para capacitarme en programación, gracias a Platzi y sobre todo a Freddy por crear una plataforma tan sencilla y con tanto contenido, de verdad gracias. Le dan esperanza a tantos como yo que aun con miedo deciden tomar nuevo rumbo. Suerte a todos los que comienzan y felicidades a los que ya son parte de este mundo. Se que costó mucho pero seguramente valdrá cada segundo.

-------------------
Clase 3:
-------------------
Los archivos en todas las computadoras tienen más o menos la misma estructura. Tienen un nombre, un punto “.” y una extensión.
.
archivo.extensión
.
carta.docx
hoja.xls
pagina.html
.
HTML significa Lenguaje de Etiquetas de Hipertexto (HyperText Markup Language) y es el lenguaje sobre el que está construido Internet y es el lenguaje sobre el que vamos a aprender.
.
HTML es el formato que engloba otras tecnologías que nos permiten usar sitios web.
.
HTML - CSS - JavaScript
.
Lo que pasa es que por defecto la extensión no se ve, pero esto puede mostrarse si en el Explorador de Windows activamos:
.
Vista - Extensiones de nombre de archivos
Vista - Elementos ocultos
.
Creamos un nuevo documento de texto y lo llamamos página.html
.
Abrimos el archivo recién creado con el bloc de notas y escribimos ahí dentro:
.
Hola querida clase
.
Guardamos el documento y lo abrimos en el navegador. Se mostrará el mensaje.
.
También podemos escribir:
.
<h1>Mi primer sitio web</h1>
Hola <strong>querida</strong> clase.

Buenas noches, voy viendo 3 videos de este primer curso y la verdad que esta muy bien explicado, porque en mi caso, no se nada de programación, pero el modo de transmitir el contenido es muy bueno. transmite entuciasmo. me gusta

hace un mes empece el curso de programación básica y ya lanzaron otro gratis.
<h1>Amo Platzi</h1>

si eres nuevo en este maravilloso mundo y quieres tener nociones básicas sobre todo lo que habla Freddy al inicio acerca de las carpetas, quizá te sea útil el curso de Prework de Windows, lo encuentras aquí: CursoPrework

Es excelente esta actualizacion, ya habia tomado la versión antigua del curso, pero para repasar y tener mejores bases, vuelvo a aqui, con una versión de Freddy mejorado.

HTML:

• HiperText Markup Language (Lenguaje de Marcado de Hipertexto).
• Estructura la información del documento.
• Es el mismo tipo de archivo que un archivo de texto plano.
• Su extensión es .html

CSS:

• Cascading Style Sheets (Lenguaje de Hojas de Estilo en Cascada).
• Da apariencia y maneja todo lo relacionado a la parte visual a los elementos de HTML.
• Es el mismo tipo de archivo que un archivo de texto plano.
• Su extensión es .css

JavaScript:

• Lenguaje de Programación.
• Hace que las páginas sean dinámicas.
• JavaScript es realmente interactividad y es realmente programación.
• Es el mismo tipo de archivo que un archivo de texto plano.
• Su extensión es .js

Tengo una Chromebook y no me permite crear archivos asi de facil, pero encontre una solucion la cual es abrir el programa “text” que viene el bloc de notas de las Chromebook, una vez abierto le damos en “guardar” (si no lo ven tienen que abrir el menu, son las tres rayas que se encuentran en la esquina superior izquierda del prgrama) o usamos la combinacion de teclas “ctrl + s” nos dirigimos a la carpeta donde deseamos guardar el archivo (si me permite crear carpetas) y muy importante darle un nombre al archivo y agregar la extension deseada en este caso html

HTML:
Más que un lenguaje, es la estructura del archivo sobre el cual trabajamos.
Extensión: archivo.html
.
CSS (Cascading Style Sheets):
Archivo de texto plano que se encarga de los estilos del archivo
(tipografía, fondo, posición del texto, título etc.)
Extensión: archivo.css
.
Javascript:
Es el lenguaje de programación que te permite interactividad.
Extensión: archivo.js

Para los usuarios de Mac aca les dejo los pasos para crear su archivo de texto con extensión de HTML

Apuntes de la clase, espero les guste people 😄

• Los archivos en todas las computadoras tienen un tipo distinto de estructura:

  • archivo. extensión
  • carta.docx
  • hoja.xls

  pagina.html

  HTML (Hyper Text Markup Language) es el leguaje sobre el cual esta construido internet

  • Es el formato que engloba otras tecnologías que nos permiten usar sitios web.
  • Cuando vemos una imagen estamos usando una tecnología llamada JPG o PNG, o gift.

  CSS

  Es un lenguaje no necesariamente de programación pero es un lenguaje de declaración del estilo de diseño de una pagina web.

  • Se le dice hojas de estilo en cascada o (Cascade Style Sheets).
  • El CSS puede ir dentro del HTML o a un lado.

  JavaScript

  Es el de programación más usado en el planeta Tierra.

  • Para poder programar con JS depende de un lenguaje del el cual se encarga de estructurar la información que nosotros vemos. Ese leguaje se llama HTML

  <aside>
  💡 HTML define la estructura de una pagina, CSS el diseño de la interfaz y JS se encarga de las funcionalidades.

  </aside>

<<h1>Mi primer sitio web</h1>
Hola <strong>mundo soy peter</strong>> 

Gracias. Esto se está poniendo interesante.
Hay cositas que voy ampliando a medida que avanza el curso. Por ejemplo: Sabía de un archivo y su extensión, pero no sabía que podíamos verlo como tal.
Así que a seguir avanzando. La práctica hace al maestro.

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

Para los que tengan windows 11 y quieran ver las extensiones de los archivos, dar en la opción ver\mostrar\extensiones de nombre de archivo

Si es divertido LOL.

Del minuto 0 hasta el minuto 6:40⏲ Tratamos las extensiones y las modificamos (Todas las extesiones pueden llegar a modificarse y en el NotePad.) Por que pasa eso🤔? Esto pasa debido a que computadora lee archivos de texto por que en si lo que escribimos es Texto.📝😊 Este es un ejemplo de Codigo que realize en la clase: <h1>Programacion Basica papeto lendo hermoso bello chulo</h1> <p>Estoy aprendiendo a programar</p> <h2>Te gusta programar?</h2>

Es lo que necesito en mi vida. Siento que en el colegio se me hizo fácil, esta habilidad tengo que explotarla!

gracias profe Fredy excelente tutorial.

SOY NUEVA ESTOY SÚPER INTERESADA 😁

La mejor de las suertes para las personas que estan empezando, y el mejor de los exitos para las personas que ya saben programar, yo empiezo apenas vamos pa lante!

Los que están desde Mac y el formato no les funciona, deben revisar dos cosas antes de comenzar:
Deben abrir el programa e ir a “TextEdit” (esquina superior izquierda, al lado de la manzana de Apple)

Dar clic en “Preferences”. Ahí estarán en “New Document”, dar clic en el espacio de “Format” - “Plain Text”.
Ir a “Open and Save” y dar clic en “Display HTML files as HTML code instead of formatted text”.
¡Y listo! Funciona.

Si tienen alguna duda adicional revisen el siguiente link:
https://computers.tutsplus.com/es/tutorials/quick-tip-configure-textedit-for-coding-html--mac-44786

Estaba en la mitad del curso anterior de programación básica, pero ahora que inicié este creo que lo mejor sí es volver a empezar para reforzar y aprender de este que está más reciente.

Hola.

Soy nuevon en esto y quiero continuar, alguien me podria explicar por que me pasa esto y no se ve como el ejercicio, estoy en sistema MCOS. Gracias.

Comando para abrir archivo en google Chrome
Ctrl+O

Comandos para block de notas

1. Ctrl +O
   Open a previously saved note
2. Ctrl + S
   Save/Save As
3. Ctrl + N
   Open a New Blank Page
4. Ctrl + P
   Open Print
5. Ctrl + Z
   Undo
6. Ctrl + X
   Cut
7. Ctrl + V
   Paste
8. Ctrl + C
   Copy
9. Ctrl + F
   Open Find

• Allows you to search for a certain word/words in your note
• Type in the word/words you are looking for and Click on Find Next

1. Ctrl + H
   Open Replace

HTML
<html>
<head>
<title>Aprender</title>
</head>
<body>

Contenido

</body>
</html>

Bueno, después de 2 años sin programar, quiero volver a retomarlo y esta vez en serio, ya que estos últimos años me ha ido muy duro a mi y a mi familia económicamente hablando… Y ya me di cuenta que yo no sirvo para trabajar en una bodega o de almacén en almacén trabajando por un SMLV aquí en Colombia. Solo espero esta vez SI tener la disciplina suficiente para seguir este curso, aprender a programar, NO quedarme como estudiante eterno y ejercerlo en un buen trabajo. Espero que por favor también me puedan dar comentarios de ánimos, gracias.

Waooo! estoy empezando en este mundo y veo lo increíble que es!

Muchas gracias Platzi por estos aportes.

Saludos,
Ana

En mi experiencia considero que el primer contacto con la programación es muy importante debido a que puede gustarte o no, en este caso Fredy lo hace tan agradable y especial que esa primera impresión te deja con ganas de seguir aprendiendo 💚🙌

Buenas tardes. Soy JORGE IVAN DE LOS RIOS CASTAÑO. Me gustaría aprender a programar y por lo que he visto es muy fácil con ustedes. Muchas gracias por la oportunidad.

programar es divertido

Gracias Freddy egrese hace 2 años de la carrera de ingeniería en informática, pero siento que aún me falta mucho por aprender. Con todo el ánimo para ser mejor cada día!

Llevaba bastante tiempo por motivos de trabajo sin poderme parar a estudiar. Y quiero felicitar a todo el equipo de Platzi porque la evolución que habéis tenido en los vídeos de este nuevo curso es increíble. Cada día “mejorandola” 💪🏼

Excelente edición! hace que la comprensión sea más fácil! muy didáctico!

Les doy una sugerencia que funciona como el blog de notas o notepad en ingles y se llama Notepad++. Lo pueden ubicar para descargar e instalar en https://notepad-plus-plus.org/downloads/ y descargan la ultima version. Espero que les pueda ayudar…

Realmente lo máximo este curso.

Hola mundo

Ejemplo de cógido en HTML

Estuvo muy buena la clase pero en la parte en la que se crea el bloc de notas, y hacen el ejercicio, para los que usamos MacOS, cómo realizamos eso? Sería bueno que por lo menos lo incluyeran en la zona de recursos 🥴

...

Mi primer sitio web\

HTML es el lenguaje sobre el cual esta escrito Internet.

La etiqueta <strong></strong> nos permite colocar la letra en negrita.

La etiqueta <h1></h1> nos permite colocar un titulo a nuestra pagina.

<h1>lo que he apredido en estos tres videos<h1>
la retroalimentacion con el chat de Platzi ayuda no solo
a aclarar dudas, sino, a enamorarte cada día más de lo
que aprendes.

para guardar denle CRTL+ G, y para refrescar la pagina F5

Un tip para abrir el archivo de manera rápida en el navegador (En mi caso Chrome) es usar las teclas Control + O

<h1>Mi primer sitio web</h1>
Hola <strong>querida</strong> clase

en la universidad no lo entiendo pero aqui si

Mi primer sitio web\

Refrescar y listo!!

los primeros videos me dejaron muy claro todo

¡Lo logré!
Aquí la ayuda: https://platzi.com/comentario/3866759/

3:40 | Para que sean visibles las extensiones de los archivos en Windows 11 se hace lo siguiente:

• Clic en “Ver”
• Clic en “Mostrar”
• Clic en “Extensiones de nombre de archivo”