Tutorial para hacer paginas web en html

Cómo crear una página web con html y css

Si alguna vez te has preguntado cómo se utiliza el HTML para crear páginas web con imágenes y vídeos, has llegado al lugar adecuado. Voy a guiarte a través de los 9 pasos para construir un sitio web de una página usando HTML. Si puedes construir un sitio web de una página, puedes construir un sitio web de varias páginas.
Necesitas un editor de texto para escribir el código HTML. Todos los ordenadores tienen un editor de texto, así que no te apresures a instalar nada todavía. Puedes utilizar el Bloc de notas en Windows, Gedit en Ubuntu y TextEdit en MacOS X.
Para tu primera página web, te recomiendo que te quedes con una página web de diseño sencillo. El diseño web es el aspecto de la página web. Recuerda que sólo estás practicando cómo construir páginas web, no cómo diseñarlas.
Recuerda el editor de texto del que hablé antes, es hora de abrirlo y usarlo. Si ya has usado uno antes, pasa a la siguiente sección. Si no sabes cómo, las instrucciones de abajo te ayudarán dependiendo del tipo de ordenador que utilices.
Cuando se oye hablar de comer insectos, la mayoría de la gente se asusta. Sin embargo, los insectos son considerados un manjar en muchas partes del mundo. La mayoría de los insectos que se comen son cultivados en granjas, pero en algunos lugares, no se asusta de comer insectos recogidos de la naturaleza.

Ejemplo de código html para la página de inicio

En este artículo del Plan de Estudios de Estándares Web hablaremos sobre la navegación y los menús de los sitios web. Aprenderás sobre los diferentes tipos de menús y cómo crearlos en HTML. También tocaremos el tema de la usabilidad y accesibilidad de los menús. Todavía no entraremos en la creación de menús, pero este artículo sentará las bases. Hay ejemplos de código que se pueden descargar para acompañar este artículo – nos referiremos a ellos a lo largo del tutorial.
HTML5 define un menú <nav>, que se utilizará para contener la navegación principal de un sitio web, ya sea una lista de enlaces o un elemento de formulario como un cuadro de búsqueda. Esta es una buena idea, ya que antes de esto contendríamos el bloque de navegación dentro de algo como <div id=”navigation”>. Sí, se puede identificar esto para fines de estilo bastante bien, pero es un <div>, y por lo tanto semánticamente anónimo. <nav> nos da una forma consistente de definir sin ambigüedad cuál es la navegación principal, lo que es bueno para cosas como la optimización de los motores de búsqueda, y para los usuarios con discapacidad visual que utilizan un lector de pantalla, que podrán encontrar la navegación mucho más fácilmente si está claramente señalizada (esto depende de que el lector de pantalla que están utilizando soporte el elemento <nav>, por lo que podría ser un poco lejos todavía). Así, un bloque de navegación tendría un aspecto similar al siguiente:

Ejemplos de páginas web html con código fuente

HTML es el lenguaje que entienden los navegadores web (como Firefox, Chrome y Safari). Es un lenguaje de marcado, lo que significa que se anota el contenido con él para que el navegador trate ese contenido de diferentes maneras. (HTML significa lenguaje de marcas de hipertexto, por si tienes curiosidad).
No es demasiado difícil de aprender, ¡y es divertido! Lo más difícil de este tutorial será organizar las ventanas en tu pantalla para que puedas ver todo a la vez. En una ventana o pestaña del navegador, deja este tutorial abierto para que puedas consultarlo a medida que avanzas.
Atom es un editor de texto (gratuito), que es el nombre del tipo de programa en el que se escribe el código. Al igual que Microsoft Word, muestra el texto que escribes. Pero a diferencia de Microsoft Word, no rodea (invisiblemente) tu texto con información de formato. Por lo tanto, ¡no utilices nunca Microsoft Word para tu código! En su lugar, utiliza Atom o una de las muchas alternativas, como Sublime.
Deja tu documento Atom abierto y navega hasta el lugar donde guardaste el archivo. Haz doble clic en el icono del archivo que has guardado. Por defecto, ese archivo debería abrirse en un navegador. Ahora has abierto el archivo de dos maneras diferentes: como página web y como archivo de texto. Organiza tus ventanas para que puedas ver el documento abierto como documento de texto y como página web, simultáneamente.

Código html para el sitio web

Mi favorito actual entre los muchos editores es Visual Studio Code (gratuito). Puedes usar un editor de tu elección pero ocasionalmente me referiré a algunas funciones de Visual Studio Code (VS Code). Buenas alternativas son Atom o Brackets.
Por supuesto, nuestro sitio web debería funcionar en los principales navegadores (Edge, Firefox, Chrome y Safari). Sin embargo, para el desarrollo web recomiendo utilizar Chrome. Chrome incluye herramientas muy útiles para los desarrolladores que usarás a menudo.
Para ver la página, usaremos la extensión Live Server que instalamos anteriormente. Haz clic con el botón derecho en tu index.html (el archivo que está debajo de la carpeta Portfolio y no el que está arriba en “Abrir editores”). Luego haga clic en Abrir con Live Server. Una ventana del navegador debería abrirse y mostrar su primer sitio web. Ahora, cada vez que guardes cualquier cambio, éste será actualizado automáticamente por el servidor en vivo.
Si la página no se abre en su navegador preferido: Cambie la configuración de su ordenador para que otro navegador sea su navegador estándar. También puedes copiar la dirección (por ejemplo, http://127.0.0.1:5500/index.html) de un navegador e insertarla en otro.

Santiago Paez