{"id":12778,"date":"2023-01-03T13:00:00","date_gmt":"2023-01-03T12:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=12778"},"modified":"2023-08-24T10:59:30","modified_gmt":"2023-08-24T08:59:30","slug":"como-hacer-una-pagina-web-en-html-crea-la-tuya-desde-cero-parte-1","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/como-hacer-una-pagina-web-en-html-crea-la-tuya-desde-cero-parte-1\/","title":{"rendered":"C\u00f3mo hacer una p\u00e1gina web en HTML: Crea la tuya desde cero (Parte 1)"},"content":{"rendered":"\n

Si est\u00e1s pensando en crear tu propio sitio web, seguro que te has planteado hacer una p\u00e1gina web en HTML. La verdad es que puede ser un buen comienzo, dada la sencilla curva de dificultad que entra\u00f1a el aprendizaje de HTML. Podemos afirmar que comprender el uso de HTML est\u00e1 al alcance de pr\u00e1cticamente todo el mundo<\/strong>. Por eso, si te has decidido a emprender el viaje, en los pr\u00f3ximos art\u00edculos vamos a acompa\u00f1arte para mostrarte c\u00f3mo afrontar el desarrollo de tu p\u00e1gina web en HTML, desde cero y paso a paso. \u00a1Vamos all\u00e1!<\/p>\n\n\n\n\n\n\n\n

Qu\u00e9 es HTML y por qu\u00e9 deber\u00eda aprenderlo<\/h2>\n\n\n\n

Antes de nada, debemos comprender qu\u00e9 es HTML. En primer lugar, hay que recalcar que no se trata de un lenguaje de programaci\u00f3n, sino un \u00ablenguaje de marcado\u00bb. Esto se debe a que su funci\u00f3n principal es estructural. Sirve para \u00abconstruir los cimientos\u00bb de cualquier p\u00e1gina web.<\/strong> De ah\u00ed que resulte fundamental su conocimiento de cara al desarrollo de cualquier p\u00e1gina web, puesto que aunque usemos herramientas como constructores visuales u otros, todos se van a basar en el uso de HTML.<\/p>\n\n\n\n

C\u00f3mo funciona HTML<\/h3>\n\n\n\n

Como ya hemos hablado en numerosas ocasiones, HTML se basa en el uso de una serie de etiquetas<\/a> o elementos que, por norma general, cuentan con una apertura y un cierre.<\/strong> Estas etiquetas pueden contener, textos, elementos multimedia u otras etiquetas. <\/p>\n\n\n\n

La anatom\u00eda m\u00e1s elemental de un elemento HTML consiste en la siguiente estructura:<\/p>\n\n\n\n

<p>Esto es un p\u00e1rrafo.<\/p><\/pre>\n\n\n\n
En este ejemplo vemos c\u00f3mo se estructura un simple p\u00e1rrafo. Como podr\u00e1s comprobar, el elemento consta de una etiqueta de apertura \u00ab<p>\u00bb, puesto que se trata de un p\u00e1rrafo; una etiqueta de cierre, distinguida por el uso de \u00ab\/\u00bb; y entre ambas, el contenido del p\u00e1rrafo. Por \u00faltimo, sabemos que se trata de un p\u00e1rrafo porque \u00abp\u00bb est\u00e1 reservado en HTML para este cometido. <\/p>\n\n\n\n
Dicho lo cual, podemos comprender la importancia que posee conocer las distintas etiquetas de HTML y su cometido. Si quieres conocer m\u00e1s acerca de las etiquetas te recomendamos echarle un vistazo a nuestro listado actualizado de etiquetas HTML.<\/a><\/p>\n\n\n\n
\u00bfDeber\u00eda aprender HTML?<\/h2>\n\n\n\n
Ahora que ya sabemos qu\u00e9 es y en qu\u00e9 consiste HTML, es momento de formularnos la eterna pregunta: \u00ab\u00bfDeber\u00eda aprender HTML?\u00bb. Sin duda alguna, habr\u00e1s o\u00eddo todo tipo de opiniones al respecto. Y es que, t\u00e9cnicamente, para llevar a cabo un sitio web hoy en d\u00eda no es necesario conocer HTML<\/strong>. Esto se debe al sinf\u00edn de posibilidades que se han puesto a disposici\u00f3n de los usuarios, como maqueadores web visuales, plantillas o generadores autom\u00e1ticos de c\u00f3digo, entre otros. <\/p>\n\n\n\n
\n
\n
Sin embargo, el precio de usar este tipo de recursos suele llevar impl\u00edcito una serie de limitaciones traducidas en precio, aprendizaje de distintos entornos visuales, aumento considerable de peso y recursos del sitio web en s\u00ed, y por supuesto, una amplia limitaci\u00f3n de recursos t\u00e9cnicos. <\/p>\n\n\n\n
Para explicarnos mejor, permitidnos emplear un s\u00edmil: Desarrollar un sitio web es como cocinar. Si deseamos hacer una pizza, podemos reducir cada tarea hasta el proceso m\u00e1s elemental; crear la masa, crear la salsa, e incluso crear nuestro queso favorito…; o, por el contrario, podemos optar por recursos m\u00e1s sencillos, como adquirir estos ingredientes precocinados, e incluso la pizza lista para hornear. A simple vista, la opci\u00f3n m\u00e1s sencilla parece la mejor, pero como en el caso de una web, optar por algo ya desarrollado no deja margen a modificaciones ni detalles personalizados; es como la adquiriste y punto. Depende escoger el camino a priori m\u00e1s sencillo y automatizado, o el m\u00e1s complejo, con un control total sobre el c\u00f3digo.<\/p>\n\n\n\n
Dicho esto, cabe destacar que hoy en d\u00eda, casi la totalidad de las webs se desarrollan bajo un CMS como WordPress,<\/a> Joomla, PrestaShop, etc. Todos ellos cuentan con facilidades que no requieren conocimientos de HTML, sin embargo, se antoja enormemente \u00fatil comprender HTML<\/strong>, puesto que todos ellos se basan en \u00e9l. Si deseas conocer m\u00e1s al respecto, no te pierdas nuestra entrada al respecto.<\/p>\n<\/div>\n\n\n\n
\n
\"C\u00f3mo<\/figure>\n<\/div>\n<\/div>\n\n\n\n
Hacer una p\u00e1gina web HTML desde cero<\/h2>\n\n\n\n
Ya sea para crear un sencillo sitio web, una landing page o una p\u00e1gina auxiliar, si te has decidido por emplear HTML, vamos a comenzar con el tutorial para llegar a buen puerto.<\/p>\n\n\n\n
Creando nuestro c\u00f3digo HTML<\/h3>\n\n\n\n
Si te has decidido por generar tu p\u00e1gina web en HTML, lo primero que vas a necesitar es un editor de c\u00f3digo. Un editor de c\u00f3digo es una plataforma en la que poder construir nuestra web mediante HTML. Aunque t\u00e9cnicamente es posible realizar esta tarea desde cualquier editor de texto como un \u00abbloc de notas\u00bb, no resultar\u00eda muy ortodoxo. En el desarrollo de cualquier c\u00f3digo es frecuente cometer errores, y un editor de c\u00f3digo nos ayudar\u00e1 a redactar m\u00e1s c\u00f3modamente<\/strong>, sugiri\u00e9ndonos soluciones y corrigiendo errores. <\/p>\n\n\n\n
Actualmente, existen numerosos editores de texto (de pago y gratuitos), aunque nosotros te recomendamos optar por alguno de los m\u00e1s sencillos, completos y gratuitos; Sublime Text, Note Pad ++, o nuestro favorito, Visual Studio Code. Este \u00faltimo ha ganado popularidad en los \u00faltimos a\u00f1os y cuenta con una amplia comunidad de desarrolladores detr\u00e1s, que facilitar\u00e1n tu d\u00eda a d\u00eda gracias a sus numerosas extensiones. Puedes echarle un ojo a algunas de las m\u00e1s \u00fatiles en nuestro \u00faltimo art\u00edculo al respecto<\/a>.<\/p>\n\n\n\n
Estructura elemental de HTML<\/h3>\n\n\n\n
Aqu\u00ed puedes comprobar la estructura m\u00e1s b\u00e1sica de un documento HTML. Esta consta de una serie de elementos caracter\u00edsticos con funciones muy concretas que debemos conocer:<\/p>\n\n\n\n
\n
\n
\"C\u00f3mo<\/figure>\n<\/div>\n\n\n\n
\n