Introducción a HTML

Progreso de Lección:

Información Adicional

No existe información adicional para este video tutorial.

Transcripción

Entonces tú quieres crear un sitio web, pero no tienes ninguna idea de cómo hacerlo
En este video curso vamos a aprender desde sus fundamentos como usar el hyper text markup language o como común mente lo conocemos HTML
Mientras avanzamos en el video curso, 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 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 que tan simple es hacer que tu contenido aparezca en el navegador
HTML es prácticamente la base de casi todos los sitios web, no importando que 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, javascript, 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 he dicho antes tiene sentido para ti, no te preocupes, vamos a ir paso por paso
Después de este video vamos a iniciar con una introducción más profunda sobre HTML como lenguaje, pero antes de eso vamos a ver rápidamente como funciona en la práctica y crearemos nuestra primera página web
Para crear un sitio web todo lo que necesita 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 textedit el cual lo encontraras en el directorio de aplicaciones
Pero debes tener cuidado, ya que un editor de texto más avanzado, como por ejemplo Microsoft Word, o pages en 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 window y textedit en mac funcionaran 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 punto HTML
Así que vamos a guardar nuestro archivo, en este caso le he creado una carpeta para todos los archivos que vamos a ir creando en este video curso
Y para guardarlo voy a colocarle el nombre de index.html y daré clic en guardar
Si guardaste el archivo antes, y no colocaste la extensión .html, entonces el archivo se guardó con la extensión .txt, pero no te preocupes
Simplemente debes buscar el archivo y renombrarlo colocando al final .html y todo estará bien.
Luego de guardar nuestro archivo HTML, vamos a 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 pre instalado es internet explorer,
Existen otros navegadores alternativos que puedes usar, como por ejemplo google Chrome o mozilla Firefox, pero hablaremos de eso después
Si te encuentras en mac, el navegador que trae preinstalado se llama safari
El navegador que yo usare, probablemente sea diferente al que tu 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 que puedes usar el navegador que más te guste o el que usas 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 podríamos simplemente ir hacia nuestro archivo HTML y dar doble clic sobre él, esto 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 editor de texto
¿Eso fue muy fácil verdad?
Podrás notar que crear páginas en HTML más grandes es un poco más complejo que esto, pero en general y especialmente en los días más en los que el internet se encontraba aún en pañales
Un sitio web simple es sólo una colección de archivos 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.
Pero 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.
Luego 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 modo que nos muestra la versión más reciente del archivo
De modo que si hacemos cualquier cambio, refrescar el navegador nos permitirá ver los cambios que hemos realizado.
Antes de terminar este video 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 video tutoriales en lo que crearemos y editaremos documentos HTML,  podrás notar que usamos mucho la función de refrescar el navegador para ver 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 podrás refrescar la página presionando ctrl más r
Si te encuentras en mac, puedes presionar comando más r
Esto refrescara el navegador
Usar el atajo del teclado es más rápido que dar clic sobre el botón de refrescado en el navegador
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 video aprenderemos un poco más sobre HTML

4 Comments on “Introducción a HTML”

    1. Lievanosan

      Buen dìa, debe asegurarse de guardar el documento con la extensión .html, para validar que ha guardado bien el documento, el archivo debe tomar el ìcono del navegador que tiene por defecto, si eso no ocurre entonces no ha guardado bien el documento.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Quieres aprender a crear sitios web?

Regístrate gratis como estudiante y aprende a crear sitios web sorprendentes. Gana certificados y medallas al completar los cursos gratuitos.
¡REGÍSTRATE GRATIS!
close-link
Crea tu sitio web con diseño profesional en menos de 15 minutos
Ver Tutorial
close-image