Introducción al curso de HTML
Capítulo 1: Editores web
Primero de todo, bienvenido/a a mi curso básico de HTML5 . Este curso va a ser muy breve, once 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 de html
¿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.
Puedes hacer webs con el bloc de notas (u otro editor de texto). No te lo recomiendo, ya que es bueno aprovechar todas las ayudas que nos dan los IDE (programas mucho más completos con ayudas).
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.
Atom
Increíble editor web, es más ligero que Dreamweaver, gratis, multiplataforma y muy personalizable. Te lo recomiendo para empezar este curso.
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.
Crear un 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".
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:
<!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 sus respectivos cierres </body>
, </head>
o </html>
.
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 unas 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>
.
Veamos pues, como mostrar 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.
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.
No pongas acentos, ñ u otros símbolos extraños en el nombre del archivo que guardes, ya que pueden generar errores.
Cómo 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:
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 uno, 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
- Instala un editor web para empezar con el curso.
- 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>
). - 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í.
Comentarios
Si te quedan dudas sobre el temario, sobre html, 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.