Tutorial básico de HTML desde cero - Video 1: Introducción.

Summary

Este video tutorial ofrece una introducción al diseño web, enseñando desde los fundamentos cómo crear un sitio web utilizando HTML. Aprenderemos a usar el lenguaje de marcado de hipertexto, construir páginas básicas y ver en tiempo real los resultados de nuestro trabajo. Se destaca que HTML es la base de la mayoría de los sitios web y que, aunque crear sitios más complejos requiere más esfuerzo, el proceso es simple y se puede hacer desde cero con un editor de texto y un navegador. Se menciona también que, aunque existen múltiples tecnologías, HTML es esencial para avanzar en el aprendizaje de CSS, JavaScript y otros lenguajes.

Takeaways

• 🌐 Aprenderemos a crear sitios web desde sus fundamentos utilizando HTML en este videocurso.
• 📝 HTML es el lenguaje de marcado de hipertexto y es la base de casi todos los sitios web.
• 🎨 El diseño y desarrollo web son divertidos ya que puedes ver en tiempo real el resultado de tu trabajo.
• 💻 Para crear un sitio web, solo necesitas un editor de texto y un navegador web.
• ✍️ Un editor de texto es un programa para crear o modificar texto plano, como el Bloc de Notas en Windows o TextEdit en Mac.
• 📁 Al guardar un archivo, asegúrate de usar la extensión .html para que se reconozca como una página web.
• 🌐 Un navegador web es un programa que permite ver sitios web y navegar por Internet.
• 🔄 Para ver los cambios en tu sitio web, debes refrescar el navegador para que cargue la versión más reciente del archivo.
• ⏫ Al trabajar con HTML, es común utilizar el atajo del teclado para refrescar la página (Ctrl + R en Windows, Cmd + R en Mac).
• 🔧 Crearás y editarás documentos HTML en los próximos tutoriales, aprendiendo paso a paso sobre cada parte del desarrollo web.

Q & A

¿Qué se aprenderá en el videocurso mencionado en el guion?

Aprenderemos desde sus fundamentos cómo usar el Hypertext Markup Language (HTML) y progresaremos para construir páginas web básicas.

¿Por qué es importante aprender HTML para el diseño y desarrollo web?

HTML es la base de casi todos los sitios web, independientemente de su tamaño, y aprenderlo te preparará para avanzar con otras tecnologías como CSS y JavaScript.

¿Qué es un editor de texto y qué tipos se mencionan en el guion?

Un editor de texto es un programa para crear o modificar texto plano. Se mencionan el Bloc de Notas para Windows y TextEdit para Mac.

¿Por qué es recomendable usar un editor de texto simple en lugar de programas más avanzados como Microsoft Word?

Los programas avanzados pueden agregar estilos y formatos adicionales que no son visibles y que pueden hacer que el archivo HTML no funcione correctamente.

¿Cómo se guarda un archivo HTML según el guion?

Se guarda con una extensión .html, y en el ejemplo se guarda como 'index.html.bak.bak' en una carpeta específica para los archivos del curso.

¿Qué es un navegador y qué navegadores se mencionan en el guion?

Un navegador es un programa que permite ver sitios web y navegar por Internet. Se mencionan Internet Explorer para Windows, Safari para Mac, y se mencionan alternativas como Google Chrome y Firefox.

¿Cómo se abre un archivo HTML en el navegador según el procedimiento descrito?

Puedes ir al menú principal del navegador, seleccionar 'archivo', luego 'abrir' y elegir el archivo, o simplemente hacer doble clic en el archivo HTML para abrirlo con el navegador predeterminado.

¿Qué sucede si deseas hacer cambios en tu texto HTML después de haberlo visualizado en el navegador?

Abres el editor de texto nuevamente, haces los cambios en el archivo HTML, guardas el archivo y refrescas el navegador para ver los cambios actualizados.

¿Qué atajo del teclado se puede usar para refrescar una página en Windows y Mac?

En Windows se usa Control + R y en Mac se usa Comando + R.

¿Cuál es la importancia de refrescar el navegador al editar páginas web?

Al refrescar el navegador, se actualiza la página para mostrar la versión más reciente del archivo, permitiendo ver los cambios realizados en el código HTML.

Outlines

00:00

🌐 Introducción al Diseño Web con HTML

Este primer párrafo presenta un curso de video para aprender a crear sitios web desde cero utilizando HTML. Se menciona que el curso cubrirá desde los fundamentos del lenguaje de marcado de hipertexto hasta la construcción de páginas web básicas. Se destaca la capacidad de ver resultados en tiempo real en el navegador, lo cual es emocionante para los principiantes en diseño y desarrollo web. Además, se enfatiza que HTML es la base de casi todos los sitios web y que el aprendizaje de esta tecnología abrirá puertas para aprender otras como CSS y JavaScript. Se sugiere que incluso si alguien nunca ha creado un sitio web antes, este curso lo hará posible. Para comenzar, se recomienda un editor de texto simple y un navegador web, y se da un breve tutorial sobre cómo crear y guardar un archivo HTML con contenido básico como 'Hola mundo'.

05:02

🔄 Editar y Ver Cambios en Sitios Web

El segundo párrafo continúa explicando el proceso de edición y visualización de cambios en un sitio web. Se describe cómo, si se desea hacer cambios en el texto de una página web, se debe volver a abrir el archivo HTML en el editor de texto, realizar los cambios y guardar el archivo. Luego, se puede refrescar el navegador para ver los cambios reflejados. Se da un consejo práctico sobre el uso del atajo de teclado para refrescar la página (Ctrl + R en Windows, Comando + R en Mac), lo que ahorra tiempo y es útil a medida que se avanza en la creación y edición de documentos HTML. El párrafo concluye con una promesa de explorar en detalle cada parte del proceso de creación de sitios web en futuras lecciones del curso.

Keywords

💡Sitio web

Un sitio web es una colección de páginas web que están interconectadas a través de hipervínculos y se alojan en un servidor. En el vídeo, se menciona que el objetivo es aprender a crear un sitio web desde sus fundamentos, lo cual es central para el tema del aprendizaje de diseño y desarrollo web.

💡HTML

HTML (HyperText Markup Language) es el lenguaje de marcado estándar para la creación de páginas web y es fundamental en la estructura de cualquier sitio web. En el guion, se destaca que aprender HTML es esencial para visualizar el contenido en un navegador y es la base de casi todos los sitios web.

💡Editor de texto

Un editor de texto es un programa que permite la creación y modificación de archivos de texto plano. En el vídeo, se sugiere el uso de editores de texto simples como el Bloc de notas en Windows o TextEdit en Mac para evitar problemas con el código HTML, destacando su importancia en la creación de páginas web.

💡Navegador

Un navegador es un software que permite a los usuarios visualizar y navegar por páginas web. El vídeo menciona varios navegadores como Internet Explorer, Google Chrome, Firefox y Safari, enfatizando su papel crucial para ver y probar las páginas web que se están creando.

💡Hola mundo

“Hola mundo” es una expresión muy utilizada en la programación para hacer pruebas simples. En el vídeo, se utiliza como ejemplo de contenido inicial en una página web, simbolizando el primer paso en el aprendizaje del desarrollo web.

💡Extensión .html

La extensión .html indica que un archivo es una página web escrita en HTML. En el guion, se menciona la importancia de guardar el archivo con esta extensión para que pueda ser reconocido y abierto correctamente por un navegador.

💡CSS

CSS (Hojas de Estilo en Cascada) es un lenguaje utilizado para describir la presentación de un documento escrito en un lenguaje de marcado como HTML. Aunque no se explica en profundidad en el guion, se menciona como una de las tecnologías que se aprenderán después de HTML para mejorar la apariencia de los sitios web.

💡JavaScript

JavaScript es un lenguaje de programación que se utiliza para agregar interacción dinámica a las páginas web. Aunque no se discute en detalle en el guion, se incluye en la lista de tecnologías que se abordarán para crear sitios web modernos.

💡Refrescar

Refrescar es una acción que se realiza en un navegador para cargar una nueva versión de una página web. En el vídeo, se explica cómo refrescar es fundamental para ver los cambios realizados en el código HTML, destacando su utilidad en el proceso de desarrollo web.

💡Atajo del teclado

Un atajo del teclado es una combinación de teclas que realiza una función específica, como refrescar una página web. En el guion, se menciona el uso de Control + R en Windows y Comando + R en Mac para refrescar, lo que demuestra una técnica práctica para mejorar la eficiencia en el trabajo con páginas web.

Highlights

Aprenderemos desde sus fundamentos cómo usar el Hypertext Markup Language (HTML).

Se explorarán todos los detalles técnicos en el uso de HTML y se construirán algunas páginas básicas.

El aprendizaje en diseño y desarrollo web es divertido ya que se pueden ver resultados en tiempo real.

HTML es la base de casi todos los sitios web, independientemente de su tamaño.

Después de aprender HTML, se estará listo para seguir adelante con otras tecnologías como CSS y JavaScript.

No existe una sola tecnología que permita crear sitios web modernos, sino una variedad de tecnologías que se combinan.

Para crear un sitio web, se necesita un editor de texto y un navegador.

Un editor de texto es un programa que permite crear o modificar texto plano.

Se debe usar un editor de texto simple para evitar problemas con el formato del archivo HTML.

Se puede usar el Bloc de Notas en Windows o TextEdit en Mac para crear archivos HTML.

Guardar el archivo con la extensión .html es esencial para que se reconozca como una página web.

Un navegador es un programa que permite ver sitios web y navegar por Internet.

Se pueden usar diferentes navegadores como Internet Explorer, Google Chrome, Firefox o Safari.

Los cambios en el archivo HTML se pueden ver reflejados en el navegador después de refrescar la página.

Se puede usar el atajo de teclado Control + R en Windows o Comando + R en Mac para refrescar la página rápidamente.

El vídeo brinda un pequeño tip para refrescar la página de manera eficiente durante el desarrollo web.

Se aprenderá más sobre HTML en los siguientes videotutoriales, explorando cada parte de la creación de un sitio web detalladamente.

Transcripts

Entonces tú quieres crear un sitio web

pero no tienes ninguna idea de cómo

hacerlo en este videocurso Vamos a

aprender desde sus fundamentos Cómo usar

el hypertext markup Language o como

comúnmente lo conocemos html mientras

avancemos en el videocurso aprenderemos

todos los detalles técnicos en el uso de

html y construiremos algunas páginas

básicas algo que hace muy divertido el

aprendizaje en el diseño web y

desarrollo web es que podemos ver en

tiempo real el resultado de nuestro

trabajo Incluso si nunca antes has

realizado un sitio web o tocado código

html creo que te sorprenderás de qué tan

simple es hacer que tu contenido

aparezca en un navegador html es

prácticamente la base de casi todos los

sitios web no importando Qué tan grande

o pequeño sea así que cuando termines de

aprender html te encontrarás listo para

seguir adelante con otras tecnologías

como css ya Script y muchas otras como

aprenderemos no existe una tecnología o

lenguaje individual que nos permita

crear sitios web modernos o aplicaciones

web más bien existe una variedad de

tecnologías que combinadas nos permiten

crear un sitio web muy completo si nada

de lo que he dicho antes tiene sentido

para ti no te preocupes Vamos a ir paso

a paso después de este vídeo vamos a

iniciar con una introducción más

profunda sobre html como lenguaje Pero

antes de eso vamos a ver rápidamente

Cómo Funciona en la práctica y crearemos

nuestra primera página web para crear un

sitio web todo lo que necesitas es un

editor de texto y un navegador vamos a

iniciar con el editor de texto un editor

de texto es simplemente un programa que

tiene la capacidad de crear o modificar

texto plano y todas las computadoras

vienen con un editor de texto Si usas

Windows entonces puedes usar el bloc de

notas Si usas Mac puedes usar Tex edit

el cual lo encontrarás en el directorio

de aplicaciones pero debes tener cuidado

ya que un editor de texto más avanzado

Como por ejemplo Microsoft Word o page

and Mac van a colocar reglas de estilo

extras en el texto y otro tipo de

información que no podemos ver eso hará

que tu archivo html no funcione

correctamente de modo que debes

asegurarte en usar un editor de texto

simple como hemos dicho el bloc de notas

en Windows y el text edit en Mac

funcionan correctamente para nuestro

propósito una vez tenemos el editor de

texto abierto puedes añadirle contenido

como lo harías normalmente vamos a

colocar por ejemplo la frase Hola mundo

que es una frase muy usada para hacer

pruebas luego guardaremos nuestro

archivo en un lugar donde no nos

olvidemos que lo tenemos y vamos a

asegurarnos de guardarlo con la

extensión

html Así que vamos a guardar nuestro

archivo en este caso le he creado una

carpeta para para todos los archivos que

vamos a ir creando en este videocurso y

para guardarlo voy a colocar el nombre

de index.html.bak.bak

dejar el editor de texto abierto ya que

lo vamos a necesitar nuevamente ahora

vamos a hablar sobre el navegador un

navegador es un programa que te permite

ver sitios web y navegar por internet Si

usas Windows el navegador que trae

preinstalado es Internet Explorer

existen otros navegadores alternativos

que puedes usar como por ejemplo Google

Chrome o mochilla firefox pero

hablaremos de esto después si te

encuentras en Mac el navegador que traes

preinstalado se llama Safari el

navegador que yo usaré probablemente sea

diferente al que tú usas pero si la

página web no tiene errores de código

Entonces se verá similar en la mayoría

de navegadores de hecho como lo

descubriremos Eso es parte de la belleza

del diseño web vamos ahora a entrar en

nuestro navegador en mi caso usaré

mozilla firefox nuevamente te recuerdo

de que puedes usar el navegador que más

te guste o el que uses regularmente una

vez tengas tu navegador abierto puedes

ir hacia la opción de abrir que en este

caso se encuentra en el menú principal

de firefox en la parte superior damos

clic en archivo luego en abrir y

seleccionamos nuestro archivo para abrir

nuestra página también podemos

simplemente ir a nuestro archivo html y

dar doble clic sobre él eso también

abrirá nuestro archivo en el navegador

que tengamos por defecto en tu navegador

debes poder ver el texto que hemos

colocado anteriormente en el editador de

texto eso fue muy fácil verdad podrás

notar que crear páginas web html más

grandes es un poco más complejo que esto

pero en general y especialmente en los

días en los que el internet se

encontraba aún en pañales un sitio web

simplemente era una colección de

archivos en html archivos similares a

cualquier otro documento o archivo en tu

computadora dentro del navegador serás

capaz de seleccionar el texto pero no

podrás modificarlo Entonces qué pasaría

si deseo hacer un cambio en mi texto Eso

es en realidad muy simple si cerraste

antes tu editor de texto Ábrelo

nuevamente y abre el archivo html en el

que estábamos trabajando primero vamos a

Añadir otro texto que dirá esta vez mira

lo que puedo hacer y luego vamos a

guardar nuestro archivo nuevamente ahora

vamos a regresar al navegador y todo lo

que tengo que hacer es dar clic en el

botón de refrescar al dar clic en el

botón de refrescar le estamos diciendo

al navegador que cargue nuevamente el

archivo de de modo que nos muestra la

versión más reciente de nuestro archivo

de modo que si hacemos cualquier cambio

refrescar el navegador nos permite ver

los cambios que hemos realizado antes de

terminar este vídeo deseo darte un

pequeño tip cuando damos clic en

refrescar podemos ver los cambios que

hemos realizado reflejados en el

navegador en el transcurso de los

siguientes videotutoriales en los que

crearemos y editaremos documentos html

podrás notar que usamos mucho la función

de refrescar el navegador para ver nu

nuestros cambios y será bueno para

ahorrarnos algo de tiempo usar el atajo

con el teclado para realizar el

refrescado de la página si te encuentras

usando Windows puedes refrescar la

página presionando control + r si te

encuentras en Mac puedes presionar

Comando + r esto

refrescarán y de esta forma has logrado

realizar tu primera página web hacer que

nuestro propio contenido aparezca en el

navegador es muy fácil pero claramente

crear sitios web más complejos requerirá

un poco más de trabajo y Como he

mencionado anteriormente vamos a ver

cada una de las partes de la creación de

un sitio web una por una con detalle en

el siguiente vídeo aprenderemos un poco

más sobre

[Música]

html

[Música]

[Música]

ah i