Come creare un sito Web HTML

Cómo crear un sitio web HTML

Te fascina la idea de tener tu propio espacio en Internet en el que expresarte al máximo, por lo que estás considerando seriamente aprender a  crear un sitio web HTML que te permita dar rienda suelta a tu creatividad, compartir tus ideas o, por qué no, tu proyecto, con todos los que te importan. El problema es que no tienes la menor idea de cómo se puede hacer esto, por lo que estás buscando una guía que te ayude a dar tus primeros pasos en el mundo de los lenguajes web.

Cómo crear un sitio web HTML

Bueno, ¡estoy muy feliz de informarte que lo has encontrado! De hecho, a continuación tengo la intención de proporcionarle todas las instrucciones necesarias sobre HTML y sobre cómo crear un sitio web. No te preocupes si no estás muy familiarizado con el tema: los conceptos que te voy a exponer son fáciles de entender y te garantizo que incluso aquellos que, como tú, nunca antes han hecho algo así, podrán crear un pequeña página web desde la que empezar, quizás, un gran proyecto.

Entonces, ¿a qué esperas para empezar? Tómate unos minutos de tiempo libre para ti, ponte cómodo y lee con mucha atención todo lo que tengo que decirte: estoy seguro de que, una vez hayas terminado de leer esta guía, te sorprenderás del resultado que podrás lograr. . Habiendo dicho eso, ¡solo tengo que desearte una buena lectura y que te diviertas!

Información preliminar

Cómo crear un sitio web HTML

Antes de que te familiarices con el código y comprendas realmente  cómo crear sitios web HTML , déjame darte más información sobre el lenguaje y las tecnologías con las que tendrás que acercarte para lograr tu objetivo.

Para empezar, la palabra  HTML es el acrónimo de  HyperText Markup Languagelenguaje de marcado de hipertexto . Erróneamente comparado con lo que se suele pensar, HTML no es un lenguaje de programación en absoluto, ya que no se basa en  flujos de acciones concatenados ni en algoritmos: por el contrario, HTML forma parte de los denominados lenguajes de marcado declarativos , es decir, esa categoría de idiomas que marcan elementos y especifican su orden de aparición.

En particular, la tarea de HTML es indicar al programa que va a interpretar el código (por ejemplo, el  navegador ) el tipo de elementoscómo están organizados dentro de una página: esto se hace encerrando el ‘elemento en cuestión entre dos  etiquetas , es decir, entre dos marcadores especiales identificados por términos similares al inglés encerrados entre corchetes angulares (por ejemplo, <img> es la etiqueta HTML que identifica una imagen).

En el momento de redactar esta guía, la versión más reciente del lenguaje HTML es  HTML 5 : al contrario de lo que ocurría hasta hace unos años, HTML 5 es capaz, además de definir la estructura de la página, también de gestionar de forma completamente autónoma forma de numerosos tipos de contenido multimedia (por ejemplo, transmisiones de audio, transmisiones de video y elementos interactivos) y para monitorear algunos aspectos del dispositivo desde el cual se visualiza (por ejemplo, el porcentaje de brillo de la pantalla), eliminando así la necesidad de integrar componentes tales como elementos Flash o subprogramas Java dentro de la propia página .

Por esta razón, HTML 5 también se usa ampliamente en el desarrollo de aplicaciones dedicadas a teléfonos inteligentes, tabletas y otros dispositivos conectados, generalmente sin soporte para estas tecnologías “adicionales”.

En general, una página creada con código HTML solo se define como una página estática , es decir, siempre puede mostrar el mismo contenido y, en la mayoría de los casos, no puede ser modificada por las condiciones actuales del entorno en el que se muestra o por las acciones que el usuario ejecuta dentro.

Sin embargo, como descubrirás a medida que sigas leyendo esta guía, existen numerosos lenguajes que se  cruzan  con HTML para poder construir sitios web más o menos complejos, dinámicos y ricos en contenido: dos de los lenguajes que merecen mención son  CSS , que define el  estilo  de los elementos que componen las páginas del sitio web, y el  JavaScript , un lenguaje de programación real que permite manipular  dinámicamente  la página y hacerla interactiva, si es necesario.

Partes de una página web HTML

Ahora que comprende la naturaleza del HTML, es hora de estudiar la composición de una página escrita con ese lenguaje. Sin embargo, antes de continuar, es imperativo hacer una distinción más que necesaria: el programador escribe el código de una página HTML dentro de un  archivo de texto simple , que puede modificarse tanto con programas simples de manipulación de texto (como el Bloc de notas y WordPad de Windows o TextEdit de macOS) que a través de editores mucho más complejos (como Dreamweaver de Adobe), mientras que el  contenido  de una página HTML es el que muestra el navegador (imágenes, textos, formularios, etc.) cuando “navega” en el sitio web.

Por ello, se puede afirmar que el navegador es un verdadero  intérprete de HTML , es decir, un programa capaz de seguir las instrucciones del código HTML para mostrar en pantalla el contenido de la página que va a estructurar. En condiciones normales, el código HTML no es visible durante la navegación, ya que, como ya se mencionó, el navegador interpreta  la información y  ordena los elementos en la página mostrada en base a ellos.

Habiendo hecho esta premisa necesaria, es hora de comprender más de cerca cómo se crea una página de código HTML. Como ya se mencionó anteriormente, los elementos de la página están encerrados entre dos  etiquetasmarcadores , uno al inicio y otro al final, capaces de aceptar o no parámetros en función del tipo de elemento que definan: la etiqueta de inicio se compone de un palabra insertada entre dos corchetes angulares (por ejemplo,  <img > ), mientras que el  marcador final pospone la barra o el símbolo “/” al corchete de ángulo izquierdo  (por ejemplo,  </ p >).

Los parámetros se especifican dentro de la etiqueta de inicio, con una fórmula similar a  parámetro = “valor” : por ejemplo, para definir la ruta de una imagen a insertar, es posible utilizar el parámetro  src = “dirección” (ej.  <Img src = “https://comoconfigurarpc.org/prova.png” width = “600px” /> )

Generalmente, una página HTML no es más que un  archivo de texto  con extensión  .html , por ejemplo  CiaoMondo.html : en su interior se especifican las etiquetas que definen los elementos que la componen. En particular, hay algunas etiquetas que deben estar presentes en un archivo .html y que voy a enumerar a continuación.

  • <! DOCTYPE html> – es absolutamente la primera etiqueta que aparece en un archivo de código: se usa para especificar que el archivo contiene una página HTML. Sus parámetros suelen especificar la versión de HTML utilizada.
  • <html>  : esta etiqueta encierra toda la página y, por lo general, también se usa para definir aspectos estructurales como el lenguaje y el esquema utilizados por el marcado.
  • <head > : esta es la etiqueta que contiene la información con la que la página es administrada por el software con el que se procesa (el navegador, la araña del motor de búsqueda, etc.): por ejemplo, dentro de la etiqueta <head> de la  página Se define el título , el icono de función , el conjunto de caracteres utilizado y otra información específica del árbol.
  • <body> : esta es la etiqueta que contiene todas las etiquetas relacionadas con los elementos de la página que se mostrarán en la pantalla: dentro de la etiqueta del cuerpo usted especifica, por ejemplo, los  títulos y subtítulos  (<h1>, <h2> , <h3> y así sucesivamente),  párrafos y su contenido ( <p> ),  imágenes ( <img> ),  tablas  ( <table> ), módulos ( <form> ) con sus componentes ( <input type = ””> ) Y así.

Crea un sitio web HTML básico

¿Está todo claro hasta ahora? ¡Buenas noticias, porque con estas nociones ya puedes crear tu primer sitio web HTML! Sin embargo, antes de continuar, permítame darle más información sobre las etiquetas “imprescindibles” para insertar dentro de la sección <body>.

  • <h1>, <h2>, <h3>  : estas son las etiquetas que definen  los títulos y subtítulos de la página (por ejemplo, <h1> ¡Bienvenido! </h1> ). De forma predeterminada, el formato del texto que contienen es diferente en tamaño y estilo al de los otros elementos de la página.
  • <p> </p>  : es la etiqueta que encierra el contenido de un párrafo.
  • <br> : esta es la etiqueta que indica un salto de línea: el texto que sigue a esta etiqueta se imprime al final de la línea.
  • <img src = ”…”> – es la etiqueta que le permite incluir una imagen dentro de la página. La ruta a la imagen se especifica, como ya se mencionó, en el parámetro src .
  • <a href==”> </a> : esta etiqueta le permite insertar un hipervínculo dentro de una página: la dirección de destino se especifica dentro del parámetro href , mientras que el texto del vínculo se incluye en las etiquetas de inicio y finalización (por ejemplo,  <a href = “https://comoconfigurarpc.org”> Sitio de Carlos Ferreyra </a> .
  • <strong> </strong>, <em> </em>, <u> </u> : estas etiquetas le permiten definir parcialmente el estilo del texto encerrado entre ellas. Respectivamente, le permiten especificar texto en negrita, cursiva y subrayado.
  • <div> </div> : esta es una etiqueta bastante genérica, que se usa para dividir la página en secciones físicamente invisibles, pero con características específicas en común. Por ejemplo, definir la clase de un elemento de tipo div ( <div class = “nomeClasse” ) le permite establecer, a través de una hoja de estilo CSS o una definición en la página, parámetros de formato específicos que se aplicarán a los elementos dentro de ella. . Te hablaré de CSS en la siguiente sección.

Llegados a este punto, diría que ha llegado el momento de poner en práctica todos los conocimientos adquiridos. Entonces, sin dudarlo, además, abre el editor de texto incluido con tu sistema operativo (el  Bloc de notas en  WindowsTextEdit para  Mac OS , por ejemplo) y escribe en él el siguiente código.

<! doctype html>
<html lang = "it">
<cabeza>
<title> ¡Hola a todos! </title>
</head>
<cuerpo>
<h1> Estoy aprendiendo a crear un sitio HTML </h1>
<h2> ¡Y creo que lo entiendo todo! </h2>
<p> ¡Hola! Mi nombre es Carlos Ferreyra y escribí <strong> esta guía </strong> para enseñarle cómo programar utilizando este enfoque. </p>
<div class = "color"> No se preocupe por este div, pronto comprenderá por qué lo ingresé. </div>
<p> ¿Reconoces este monumento? ¡Apuesto a que sí! </p>
<img src = "https://images.pexels.com/photos/722014/pexels-photo-722014.jpeg" width = "640" height = "480" />
<p> Per accere al mio sito Web <a href="https://comoconfigurarpc.org" target="_blank" /> clicca qui. </a> </p>
</body>
</html>

Una vez que se complete la inserción,  guarde el archivo con un nombre , teniendo cuidado de usar la extensión .html (por ejemplo,  PrimoSito.html ). En este punto, todo lo que tiene que hacer es hacer  doble clic en el archivo que acaba de guardar para verlo en el navegador: ¡felicidades, acaba de crear su primera página web HTML! Recuerde que puede ver el código de la página en cualquier momento haciendo clic en un punto aleatorio y seleccionando  Ver fuente de la página en el menú contextual propuesto por el navegador.

Con esta técnica, podrá crear una serie de páginas HTML que solo se pueden ver en la computadora que está utilizando: para que su sitio sea accesible desde Internet, deberá comprar un espacio de alojamiento que pueda alojar sus páginas. y posiblemente un dominio asociado. Expliqué el asunto en detalle en mi guía para el mejor alojamiento .

La hoja de estilo

Apuesto a que se está preguntando cómo puede refinar aún más el contenido de las páginas de su sitio web, por ejemplo, estableciendo un color de fondo, un efecto en los enlaces flotantes, un formato específico para cada tipo de “contenedor”, etc.

Como ya os he explicado al principio, aunque HTML es capaz de gestionar el formateo básico de los elementos, en este caso un segundo lenguaje web viene muy bien para especificar las reglas de ordenación, formateo y decoración de los elementos:  CSS . En este caso, se trata de un lenguaje con una sintaxis profundamente diferente a la del HTML, lo que permite definir específicamente el  estilo de los elementos de la página.

El código CSS se puede declarar de dos formas diferentes: la primera, útil cuando los elementos a definir se limitan a una sola página del sitio, es encerrarlo dentro de la etiqueta <style> </style> , especificada dentro de la sección  <head > . El segundo método para declarar el código CSS, extremadamente conveniente cuando debe ser compartido por varias páginas del mismo sitio, es especificarlo en un archivo de texto con la extensión  .css , que puede importar al código HTML usando el enlace < > etiqueta  (por ejemplo,  <link href = ”NomeFoglioStile.css” rel = ”stylesheet” type = ”text / css”> ) dentro de la sección  <head > de la página.

Solo para darle un breve ejemplo, aquí está el contenido de una hoja de estilo CSS capaz de colorear y formatear todos los elementos pertenecientes a la clase de  color : en particular, el texto será coloreado de rojo y coronado por una línea, el espaciado del los caracteres se incrementarán a 5 píxeles y el fondo será gris.

.colore {color: rojo; color de fondo: negro; decoración de texto: overline; espaciado entre letras: 5px;}

Para verificar inmediatamente que la hoja de estilo funciona, pegue el código anterior en un archivo de texto sin formato y guárdelo con el nombre  style.css en la misma carpeta donde guardó la página HTML creada anteriormente. En este punto, para incrustar la hoja, todo lo que tiene que hacer es abrir la página antes mencionada para editar (  haciendo clic derecho con el mouse en el archivo .html, seleccionando el  elemento Abrir con del menú contextual propuesto y eligiendo el  Bloc de notas / TextEdit programa de la lista que se muestra en la pantalla), inserte la cadena de texto <link href = “stile.css” rel = “stylesheet” type = “text / css”> inmediatamente debajo de la etiqueta <head > y guarde el archivo como de costumbre.

Una vez completada esta operación,  haga doble clic en el archivo html que acaba de editar y … ¡disfrute del resultado! Para obtener más información sobre las directivas CSS, lo invito a leer detenidamente la guía básica de HTML.it para CSS .

Marco y CMS

HTML es un lenguaje extremadamente poderoso y capaz de dar forma, junto con CSS y JavaScript, incluso proyectos muy complejos. Hoy en día, las páginas web deben diseñarse teniendo en cuenta la visualización desde diferentes dispositivos, con diferentes características (por ejemplo, resolución de pantalla) y en diferentes modos de lectura: esta es la razón por la que, cada vez más, los programadores web utilizan una serie de “pre herramientas empaquetadas para diseñar el “esqueleto” de su sitio web: estas herramientas se denominan  frameworks .

En este caso, un  framework no es más que un conjunto de páginas HTML, JavaScript y hojas de estilo “preempaquetadas”, que ayudan al programador a estructurar en detalle la estructura básica del sitio web que están a punto de crear: por ejemplo, un framework que puede contener archivos capaces de “diferenciar” la visualización de páginas en función del navegador, de comprimir el contenido para mejorar la velocidad de descarga, de ofrecer cierto tipo de gráficos y mucho más.

Uno de los frameworks más utilizados, en la actualidad, es  Bootstrap : es un framework extremadamente flexible diseñado para ofrecer esquemas de arranque para proyectos de complejidad media-alta, optimizados para su visualización a través de diferentes tipos de dispositivos, pantallas y resoluciones.

Llegados a este punto, parece correcto presentarle el concepto de  CMS:  un  sistema de gestión de contenidos no es más que un sistema, escrito en lenguaje web, que gestiona la creación de un sitio web a través de un sistema de gestión con una interfaz gráfica. Los CMS suelen estar completamente basados ​​en uno o más marcos específicos.

En otras palabras, el CMS es un software que le permite crear la estructura de un sitio web y modificar su contenido, sin intervenir manualmente en las páginas y en las bases de datos, con un par de clics: generalmente, los CMS se colocan disponibles desde numerosos alojamientos. sitios para permitir la creación rápida de sitios de Internet incluso a aquellos que no tienen competencia con los lenguajes Web. Entre los CMS más populares, merecen mención WordPress , Drupal , Magento , Joomla y Prestashop .

Recursos útiles

Si ha llegado hasta aquí, significa que ha entendido completamente  cómo crear un sitio web HTML y tiene todos los conceptos básicos para crear un sitio web pequeño con sus propias manos. Sin embargo, pronto se dará cuenta de que el poder de HTML va mucho más allá de los temas cubiertos en esta guía: es por eso que, en las siguientes líneas, pretendo proporcionarle recursos útiles adicionales para consultar y refinar aún más sus conocimientos.

  • HTML.it Guía HTML : es muy probable que sea una de las guías más completas y exhaustivas disponibles en la Red: está dividida en secciones temáticas prácticas, está llena de ejemplos y, sobre todo, se actualiza constantemente.
  • W3Schools.com  , promovido y publicado por W3C, es un portal web completo dedicado a HTML y todas las tecnologías que giran en torno a él. La peculiaridad de W3Schools es la posibilidad de realizar, tras la lectura de cada lección, numerosos ejercicios de autoverificación para evaluar las habilidades adquiridas.
  • Amaya  : es un gran programa de edición de HTML, de código abierto, creado y distribuido por el W3C. Es un editor de tipo  wysiwyg  ( lo que ves es lo que obtienes , “lo que ves es lo que obtienes), capaz de crear sitios HTML completos, así como hojas de estilo, pequeños scripts y demás,  diseñándolos con el mouse.
  • Adobe Dreamweaver : si recuerda correctamente, ya le he hablado de este software en mi guía de programas para HTML . Es una solución potente y completa para el diseño y estructura de sitios de Internet tanto simples como complejos, equipada con herramientas para la gestión de HTML, JavaScript, CSS, diseño gráfico y más.
  • HTML 5 con CSS y JavaScript : si eres un amante de las referencias “en papel” y tienes la intención de utilizarlas para aprender a fondo las tecnologías web, puedes darle una oportunidad a este texto: más que un manual, es una referencia completa para crear sitios web completos. , sino también de aplicaciones móviles basadas en Web, basadas en la interacción entre HTML5, hojas de estilo y JavaScript.

Si ha llegado hasta aquí, significa que ha dominado todo lo que hay que saber sobre la programación HTML básica. Espera, ¿me estás diciendo que todavía te resulta un poco difícil y que te gustaría un sistema que pueda guiarte al menos en tus primeros pasos? Entonces te sugiero que crees tu primer sitio web usando uno de los CMS gratuitos, con su espacio de alojamiento asociado, disponible en Internet: dos de los más usados ​​hoy en día son definitivamente WordPress.com y Blogger , de los cuales te hablé específicamente en mis insights sobre cómo crear un sitio con WordPress y cómo crear un blog gratuito en Google .