Editores web - HTML5 básico - Capítulo 1


Primero de todo, bienvenido/a a mi curso básico de HTML5 . Este curso va a ser muy breve, 11 capítulos bastante cortos con los que quiero que te hagas una idea de que es HTML, dónde escribirlo, cómo crear webs muy básicas y los conceptos básicos de HTML, de forma que puedas ganar fuerza para enfrentarte al curso de HTML avanzado y descubras si realmente quieres dedicarte al desarrollo web.

Requisitos para hacer el curso

¿Sabes utilizar el PC a nivel de usuario? navegar por internet, instalar un programa, crear carpetas, etc.
Si es así cumples 100% los requisitos para seguir este curso, no hace falta saber nada más.

Herramientas necesarias para hacer el curso

Necesitas dos cosas, un navegador web como el que estás utilizando para ver este curso y un editor web (no me vale que utilices el bloc de notas.)

Editores web

Dreamweaver

Dreamweaver es muy potente pero algo pesado, además, se trata de un programa que es de pago y quizás no sea la mejor idea gastar dinero antes de empezar a desarrollarte en este maravilloso mundo del desarrollo web.
Es el que voy a utilizar en este curso, pero puedes utilizar cualquier otro, de hecho, los hay muy buenos y gratis.

Ir al sitio web oficial de Adobe Dreamweaver.

Dreamweaver IntelliSense

Atom

Increíble editor web, es más ligero que Dreamweaver, gratis, multiplataforma y muy personalizable. Te lo recomiendo para empezar este curso.

Ir a la página de descarga.

Editor web Atom

Podría hacer un curso entero sobre editores web, así que si quieres una recomendación personalizada para tu equipo y tus posibilidades déjame un comentario y te recomendaré algo.
Empecemos con el curso.

Cómo crear un archivo html

Para crear un archivo html lo puedes hacer con cualquier editor, fíjate en el vídeo como lo hago con Dreamweaver, será parecido en cualquier otro editor. Lo importante es que crees un archivo con extensión ".html", eso es todo.

Documento html básico

Aunque Dreamweaver genera automáticamente las etiquetas básicas que necesita el documento html, hay otros que no lo hacen, así que aquí las tienes. Las puedes copiar y pegar en tu archivo ".html".

Info: html no es programación, llegarás a eso más adelante si quieres hacer otros cursos de desarrollo web como JavaScript, PHP y otros. HTML es un lenguaje de marcado, utiliza etiquetas no utiliza código como tal.


Este es el contenido mínimo que debe contener una página html:

Etiquetas HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mi primer archivo html.</title>
</head>

<body>
</body>
</html>

Las etiquetas que se abren como <html>, <head> o <body> deben cerrarse con su respectivo cierre </html>, </head> o </body>.

Puedes ver estas etiquetas como contenedores, la etiqueta <html> contiene todas las etiquetas entre su apertura <html> y su cierre </html>.

La etiqueta <head> está dentro de la etiqueta <html> y se cierra antes de la etiqueta <body>.

No te preocupes si no entiendes a la primera este concepto de poner etiquetas dentro de otras y cuales van dentro de otras. Todo esto lo irás viendo y practicando en los próximos capítulos.

La etiqueta <body>

Todo lo que quieras que vea el usuario en tu página web (el fondo, el texto, las imágenes, etc.) irá siempre dentro de las etiquetas <body>.
Mostremos una frase en el navegador.

Para escribir texto lo puedes hacer con la etiqueta <p> de párrafo. Entre la apertura y el cierre escribes lo que quieras.

Info: las etiquetas <p> solo pueden ir dentro del body (entre <body> y </body>).

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mi primer archivo html.</title>
</head>

<body>
    <p>Estás en el curso de HTML de Programación fácil.</p>
</body>
</html>

Guarda el documento html en una carpeta, la que quieras. Y recuerda, extensión de archivo .html, si no, no va a funcionar.

Info: no pongas acentos, ñ u otros símbolos extraños en el nombre del archivo que guardes, ya que pueden generar errores.

Abrir un archivo HTML

Esto ya es lo más fácil, solo abre el archivo .html con tu navegador web. Deberías ver algo como esto:

Primera página web con HTML

Si te fijas, el texto que está escrito en las etiquetas <title> es el que sale en el título de la pestaña del navegador (marcado en la imagen con color verde) y lo que está en el body (marcado con color rojo), la etiqueta <p> lleva el texto que queremos mostrar a los usuarios.
El body es la parte blanca del navegador, ese es el body (body significa cuerpo del documento). En el body es donde pondremos todo lo que queramos que forme parte del aspecto visual de la web, lo que va a ver el usuario. En el head, pondremos cosas más técnicas que trabajarán por detrás sin que el usuario sea consciente de ello.

Esto es todo para este capítulo número 1, no te preocupes si no lo has entendido todo, son muchas cosas de golpe que irás consolidando poco a poco.
Por supuesto, estoy encantado de que me dejes tus dudas y resolverlas o algún comentario bonito para que me alegres el día.


Ejercicios de html

1- Instala un editor web para empezar con el curso.

2- Crea un archivo html y muestra en el navegador el texto que quieras en un párrafo html (recuerda que para los párrafos es la etiqueta <p>).

3- Cambia el título del archivo que has creado en el ejercicio 2 (etiquetas <title>).

La solución la encontrarás aquí: Haz click aquí.


Suscríbete a mi canal de YouTube para apoyarme

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.


Comentarios

Si te quedan dudas sobre el temario, sobre Python, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.