Tutorial página web en HTML paso a paso desde cero

15 Jul 2020 in

admin

Crear una página web en código HTML es algo sorprendentemente fácil de aprenderincluso para personas no técnicas y algo a lo que le vas a sacar muchísimo partido, así sea con webs hechas en código HTML puro o bien cocss n webs basadas en WP, Blogger u otros CMS.

- ©

Tanto es así que, en un simple blog post como éste, ya puedes aprender lo suficiente para hacer cosas realmenteinteresantes en código HTML y eso es exactamente lo que haremos hoy.

Ahora bien, ya antes de ponernos con ello, debes preguntarte si crear páginas web en código HTML es verdaderamente lo que precisas.

Me explico: hoy en día hay dos vías de crear una web y sus páginas:

La vía artesanal(la «antigua»): componer tu página web a base de crear «a mano» el código HTML de cada una de esas páginas de tu página web y enlazarlas entre sí.
La vía moderna: emplear un CMScomo, por poner un ejemplo, WordPress, trabajando de forma visual, sintener que codificar y maquetar el contenido en código HTML.

Hoy en día, las webs se hacen prácticamente en un 100 por cien con Content Management System, la gran mayoría con WordPress, que es la vía que te invito a encarecidamentepara crear tu web.

Al final de este blog post, en el Anexo, tienes nuestro mega-tutorialque te enseña a crear una web con un diseño profesional por esta vía. Te recomiendo muchísmoque le eches un vistazo, no tiene desperdicio, te lo aseguro 🙂

Pero, ¿quiere decir esto que carece de sentido que leas el resto de este blog post?

Obviamente no. Sigue teniendo muchísimo sentido aprender HTML. Si no, obviamente, no habría escrito este blog post 🙂

Por eso, si no tenías claro esto que te acabo de explicar, valora primero si crear páginas en HTML es lo más adecuado para tu casoo si te es conveniente más usar un CMS como WordPress o bien Joomla!.

Por eso, he incluido al final de este blog post un anejo dedicado a este tema que te ayudará a tomar la decisión correcta (tienes el enlace al final de la tabla de contenidos).

¿Qué encontrarás aquí?

Ahora, centrémonos en el tema principal de este post: cómo crear una página web en HTML.

1) ¿Cómo crear una página web en HTML?

En el fondo, crear una página web en código HTML, no es muy diferente a crear cualquier otro documento con un editor de texto. Consiste en crear un archivo con extensión .html o bien .htm y editarlo.

En este fichero, se creará el contenido en sí (el texto de los títulos, párrafos, crear formularios HTML, etc.), así como las etiquetas (o bien “tags”) HTML(entonces vamos a ver que son) precisas para acotar la estructura del documento HTML.

Esto se puede hacer de una manera más purista en modo textotrabajado de forma directa con el código HTML, o bien, de una forma más visualy afable con un editor HTML especializado, muy semejante a cómo se trabaja también en un editor como Microsoft Word, por servirnos de un ejemplo.

A partir de aquí, el proceso (que iré separando y será lo que aprenderás a lo largo del post) sería:

Aprender el principio fundamental de HTML: crear documentos estructurados con etiquetas.
Elegir el mejor editorpara tu caso específico.
Crear la estructura básica de tu página HTML: la cabecera y el cuerpo.
Crear el contenido y aplicarle formatocon las etiquetas HTML: títulos, párrafos de texto, enlaces, imágenes, tablas, audio y vídeo embebido, etc.
Si los precisas, integrar también los elementos interactivos (formularios).
Implementar, en su caso, en el servidor la lógica para responder a los formularios.
Publicar (hacer perceptible) la páginaen Internet o en local.

Un ejemplo minimalista de página, vista como código HTML, no como el resultado final que ser ve en el navegador, sería éste:

Ejemplo de página HTML con un conjunto mínimo de elementos.

Y aquí puedes ver el resultado de este código en un navegador web:

Ejemplo de una página web trivial y en la que no se ha efectuado aún la parte de diseño con CSS.

2) Las etiquetas básicas en HTML, sus funciones y atributos

Si te has asustado al ver el código del ejemplo anterior, no te preocupes, como verás a continuación, es muy fácil.

2.1) ¿Qué es el HTML exactamente?

HTMLes unque sirve para describir de una forma estructuradamediante etiquetasel contenido de un documento. Esto tiene la enorme ventaja de que podemos añadir con esto semántica(significado) al documento que una máquina puede comprender.

El estándar actual que rige HTML es la versión, aunque muchas webs prosiguen marchando con las versiones/, las versiones de “toda la vida” que la versión 5 ha ampliado, algunas muy potentes.

De todos modos, como este artículo es un post de introducción, nos moveremos básicamente dentro de lo que existía en la versión cuatrocientos uno.

No obstante, te daré, naturalmente, referencias de recursos gratis para aprender HTML al nivel de profundidad que quieras, incluso a un nivel especialista si lo quieres, junto con un macro-ejemplo descargabledonde he implementado todo lo que tratamos en este artículo.

2.2) ¿Qué son las etiquetas y los atributos HTML? Ejemplos de etiquetas HTML

Esta semántica se logra a través de el uso de las etiquetasy los atributos.

Lo primero que te llamará la atención en el ejemplo de código arriba son las palabras entre corchetes. Esto son las así llamadas etiquetas HTML.

Estas etiquetas forman una estructura jerárquica, o sea, se pueden anidarentre ellas, salvo la etiqueta especial <!DOCTYPE HTML>en la primera línea de un documento HTML.

Siempre hay una etiqueta de aperturay otra de cierreque es exactamente la misma etiqueta, pero con una barra delante del nombre de la etiqueta. Por ejemplo: “<title>” (etiqueta de apertura) y “ </title>” (etiqueta de cierre que delimita el final del contenido etiquetado).

En medio viene un texto u otras etiquetas anidadas que con su contenido. El conjunto de una etiqueta y su contenido se conoce como.

A veces, una etiqueta no tiene contenido en texto como tal (por poner un ejemplo, las etiquetas “meta” del ejemplo). En ese caso, no hace falta emplear una etiqueta de cierre.

Multiplica el Nº de clicks en tus contenidos

Con este eBook gratuitode plantillas de copywritingcrearás titulos que dispararán los clicsen tus contenidos:

77 Plantillas de títulos probadas que multiplicarán los clics.
Sacaras infinitas ideas crear tus títulos.
Con las palabras "mágicas" redactarás textos irresistibles.
Vale para todo: weblogs, tiendas on line, redes sociales, etc.

Obtén tu eBook aquí

Apúntate a nuestra Zona VIPy descárgate tu eBook ya

Es 100 por ciento gratis🙂

El responsablede este sitio es Wenova On line sociedad limitada, cuya finalidades el envío de información y formación sobre blogging y marketing online, con la legitimaciónde tu consentimiento otorgado en el formulario.

El destinatariode tus datos (la herramienta que utilizamos) es Mailrelay. Está situada en España y podrás ejercer tus derechos de acceso, rectificación, limitación o bien supresión de tus datos(ver la).

¿Qué ganamos con esto?

Conseguimos semántica, o sea, que el contenido tenga sentido para el navegador u otras aplicaciones, siendo el buscador de Google una de las más destacadas.

Por ejemplo: la etiqueta title anterior le afirma al navegador que se trata del título de la página, el que va a visualizar en la pestaña en la que tienes abierta esta página dentro del navegador.

Otro ejemplo de aplicación sería cuando Google visita tu web: en este caso el texto etiquetado con la etiqueta title será el que utilice Google como título en sus resultados de búsqueda.

¿Te das cuenta del potencial de poder añadirle semántica a un contenido?

Gracias a ello se pueden hacer cosas como éstas sin las cuales sería imposible imaginarnos la web el día de hoy en día.

El otro concepto fundamental que debes tener claro, así como el término de etiqueta, es el concepto de atributo.

Si te fijas, en el caso de las etiquetas meta del ejemplo, éstas, antes del corchete de cierre poseen palabras con un formato de xxx=”yyy”. Esto son los atributos, donde xxx es el nombre del atributo e yyy su valor.

Los atributos son sencillamente una forma de añadir más información semántica a una etiqueta.

Esta etiqueta es un buen ejemplo de cómo aprovechar los atributos:

Aquí, con el atributo name estamos diciendo concretamente que se trata de una etiqueta meta que sirve como descripción de la página y que la descripción concreta es la que viene en el atributo “content”.

Los resultados de búsqueda de Google son una de las aplicaciones más esenciales de las etiquetas

Google emplea esto también para sus resultados de búsqueda porque es aquí de dónde saca en general la descripción que viene debajo de los títulos de los resultados de cada página que muestra.

3) Elegir un buen editor para crear páginas HTML

Ahora que hemos visto la teoría básica y un pequeño ejemplo concreto, es hora de ponerse a ello. Para ello, lo que precisas ahora es un editor.

Puedes editar HTML en cualquier editor, aun en el Notepad de Windows, si me apuras, puesto que, como has podido ver, el código HTML es simple texto.

Sin embargo, no es lo recomendable. Te conviene utilizar un editor HTML especializado. Así que veamos cuáles hay y cuál de ellos puede ser una buena opción para ti.

3.1) Editores HTML gratuitos contra de pago

La primera cuestión es si inclinarte por un editor html sin costo o de pago.

La respuesta es simple: a menos que te diques profesionalmente a crear páginas HTML, no le veo sentido a un producto comercial de pago puesto que los editores gratis han llegado son más que suficientespara lo que cualquier usuario “normal” pueda precisar.

Tienes editores HTML gratis y en español de buena calidad que te dejan trabajar tanto de forma visual (conocidos también como “editores html WYSIWYG”), como directamente con el código, aun editores que te permiten incluir hojas CSS(en el apartado de diseño te explico qué son).

Es decir, tienes todo cuanto necesitas en las opciones gratuitas, por ende, mi consejo es que descartes las opciones de pago.

3.2) Editores HTML online

Otra disyuntiva esencial es si usar un editor HTML on line (implementado en una web) o bien si emplear un editor descargable para instalarlo en tu equipo. Éstos últimos editores HTML los puedes descargar sin costo también, existen muchas opciones.

Aquí la decisión no está tan clara. Es más, puedes usar ambas opciones al unísono. Así que prueba y escoge la que más te guste.

Yo te voy a recomendar 4 opciones:

: se trata de un editor HTML gratis para descargar, aunque no es estrictamente un editor HTML, sino más bien un editor que soporta muchos más lenguajes que HTML. Es el que utilizo (la atrapa de arriba es de Notepad++), uno de los más populares, está traducido al español y colorea la sintaxis del HTML, lo cual ayuda muchísimo a eludir errores en la codificación. Su primordial pega es que no puedes trabajar de manera visual.
: una alternativa en la línea de Notepad++ (qué sólo funciona con Windows) para el planeta Apple.
: ésta es la alternativa online, también sin coste, que empleo también y sus primordiales ventajas son el hecho de ser online, crear un código HTML muy limpio y de ser, además, WYSIWYG. Quizás ya no sea el mejor ahora, es un editor HTML online muy simple, pero personalmente es el que más me gusta, además, tiene los menús también en español. Su principal queja que le veo es que no colorea el HTML.
: ésta es una alternativa a Quackit muy interesante puesto que tiene los beneficios adicionales de colorear la sintaxis del código y de que estás viendo al tiempo, al paso que editas el código HTML, cómo queda visualmente, y viceversa. No lo he utilizado extensamente, mas me ha semejado una de las opciones alternativas más interesantes a Quackit que he encontrado. Como es natural, también es gratis.

El editor LiveGap deja editar el código mientras que y ver a la vez el resultado visual.

3.3) Editores visuales (editores What You See is What You Get)

Aunque este tema ya lo hemos abordado, quería añadir una recomendación muy importante:

Al principio te van a atraer mucho más trabajar de forma visual. Mi consejo es que realmente te fuerces a no emplear esta vía y trabajar con el código HTML. Por dos motivos:

A veces los editores visuales fallan y dan problemas. Esto pasa, lamentablemente bastante con el editor visual que incorpora WordPress, por poner un ejemplo. Sabiendo trabajar en HTML resuelves estas cosas en unos segundos cuando, a veces, en el editor visual no hay manera.
Los editores visuales meten con cierta frecuencia “basura” o generan código poco óptimo.

Por tanto, que los editores HTML visuales no sean la excusa perfecta para disuadirte de aprender a trabajar con código HTML “a la antigua usanza”.

4) Estructura básica de un documento HTML

Empecemos a charlar ahora de las distintas unas partes del código de una página en HTML.

Lo primero es la estructura básica de un documento HTML. Hay variantes en cuyos matices no quiero entrar por no dispersarnos, mas para mantener las cosas simples, te recomiendo utilizar siempre esta plantilla:

<title>Título de la página…</title>

Esta plantilla úsala como sigue:

Personaliza el título en la etiqueta <title>
Personaliza la meta-descripción en la etiqueta <meta name=”description” contenido=”… “>
Codifica en la etiqueta <body> el contenido visiblede la página.

Es decir, lo que veremos como contenido de la página como tal tiene es el contenido de la etiqueta <body>.

Pero, además, disponemos de otras etiquetas especiales para crear la estructura interna de la página. Dentro de estas me marcho a limitar a la etiqueta <div>que es la “clásica” que se ha empleado para todo en la versión cuatrocientos uno de HTML. En HTML 5 se han añadido luego otras nuevas como <article>, <section> o bien <header>, mas ni las necesitamos, ni nos interesan ahora.

Veamos un ejemplo:

<h3>Título…</h3>

<p>Texto</p>

<h1>Otro título…</h1>

<p>Otro texto</p>

<p>Más texto… </p>

Como puedes intuir con el ejemplo anterior, <div>permite crear divisiones lógicas en una página para aplicarles entonces diferentes formatos(por eso he usado también el atributo “class”, más sobre esto entonces).

En el típico blog con una barra lateral, por ejemplo, los contenidos de la barra lateral irían podrían ir un div y el contenido en sí en otro diferente.

5) Trabajar con texto en HTML

Y a partir de ahora es sencillo: se trata de conocer las diferentes etiquetas para los diferentes géneros de elementos que puede tener una página HTML: texto normal, tablas, enlaces, imágenes, etc.

5.1) Cómo trabajar con títulos y párrafos de texto en HTML

HTML tiene 6 etiquetas de títulos/subtítulos: de “ <h1>” hasta “ <h6>”, correspondiendo los números al nivel jerárquico.

Es decir, una etiqueta “ <h1>” sería el nivel jerárquico máximo, “ <h2>” los subtítulos de los niveles h1 y así consecutivamente.

Por otra parte, los párrafos de texto normal se marcan con “ <p>”.

Con las dos cosas tenemos los elementos básicos para crear texto en HTML.

Si equiparamos esto con Word, por servirnos de un ejemplo, las etiquetas de títulos serían el equivalente a los estilos “Titulo 1”, “Título 2”, etcétera y la etiqueta de párrafo el equivalente al estilo “normal”. En verdad, al pegar un texto desde Word a un editor HTML visual, así se deberían transformar en el código HTML generado. Puedes probarlo con Quackit, por poner un ejemplo.

5.2) Cómo crear listas en páginas web

Las listas son otro elemento indispensable en un contenido. Es muy fácil crearlas en código HTML, en el caso de las listas enumeradas se usa la etiqueta <ol>y en el caso de las no enumeradas (con viñetas), se emplea la etiqueta <ul>. En los dos casos se usa <li>para los elementos de la lista.

Por ejemplo:

<li>El primer punto</li>

<li>El segundo punto</li>

<li>El tercer punto</li>

Fácil, ¿no?

Fíjate, además, que, siendo una lista enumerada, no vienen los números, o sea, el “1.) …”, “2.) …”, etc. Eso es así porque, de forma similar a Word, emplear listas enumeradas implica precisamente que los números se crean automáticamente cuando se visualice la página en un navegador.

5.3) Cómo usar tablas en páginas web

Las tablas son un factor ya algo más avanzado y, por tanto, aquí me limitará a una estructura básica de tabla:

<th>Nombre</th>

<th>Apellido</th>

<td>Porterfield</td>

<td>Flynn</td>

Aquí, la etiqueta <table>,como ya te puedes imaginar, demarca la tabla.

Dentro de ella, cualquier fila de cualquier clase se delimita con <tr>que viene de “table-row” (fila de tabla en inglés). En esto, puede haber diferentes tipos de filas que se distinguen por el tipo de celdas que contienen.

En este caso de ejemplo, tenemos una primera fila con celdas con la etiqueta <th>(“table header”, cabecera de tabla en inglés) que actúan como cabecera y luego el resto, serían celdas ordinarias con datos, <td>, “table data”.

5.4) Insertar enlaces (links) en páginas HTML

Vamos ahora a lo que es la etiqueta por excelencia en una página web: la etiqueta de un enlace.

Esta etiqueta es “ <a>”, de “anchor” (ancla en inglés) y su sintaxis básica es la siguiente:

<a target=”_blank” href=”[url del enlace]”>Texto del enlace</a>

La información clave, el enlace, viene en el atributo href, aquí debes introducir la URL del sitio que quiere enlazar.

El atributo targettambién es muy importante. Sus valores más utilizados (y los únicos que necesitas verdaderamente en la práctica) son “_blank”, que quiere decir la página del link se abre en una nueva pestaña/ventana, y “self”, que la abre en la pestaña/ventana del documento actual.

Si omites este atributo o bien dejas el valor en blanco, se acepta por defecto target = ”self”.

6) Trabajar con imágenes en páginas web HTML

Cuesta meditar en una página web sin imágenes. Se utilizan para mil cosas: para el logotipo del lugar, en el contenido, para iconos en menús y otros elementos afines, y mil cosas más.

Como verás, introducir imágenes en páginas web en código HTML es realmente fácil.

6.1) Insertar imágenes en una página HTML

La etiqueta HTML para insertar una imagen en código HTML es <img>y su sintaxis básica la siguiente:

Aquí el atributo srces el equivalente a hrefen el caso del link anterior, o sea, una URL que apunta a la imagen que quieres visualizar.

Por ejemplo:

/imagenes/mi-imagen.png

Otro atributo fundamental es alt. Por un lado, por el hecho de que en el caso de que el enlace a la imagen esté roto, visualizará un texto alternativo (de aquí, el nombre de “alt” del atributo) que será el texto asociado a este atributo y, por otra parte, pues Google lo tiene muy en cuenta para posicionar la imagen (en la búsqueda de imágenes).

Los atributos heighty widthte permiten precisar las dimensiones a las que ajustar la imagen en el navegador. De no ser esas las dimensiones originales de la imagen, el navegador reducirá o bien ampliará la imagen, según corresponda, para ajustarla a estas dimensiones.

No obstante, te invito a evitar usar este recurso y usar mejor reglas CSSpara dar los detalles de la maquetación de tus imágenes. En el apartado de diseño, retomaré el tema CSS.

6.2) Cómo crear una imagen con un link en HTML

Es bastante usual que las imágenes lleven también un enlace asociado. Por ejemplo: la imagen de un anuncio.

Esto es tan simple como usar la imagen como contenido del enlace:

7) Cómo insertar audio y vídeo en páginas HTML

Hoy en día estamos acostumbrados a páginas web con vídeo y audio.

La tecnología ha avanzado mucho y es verdaderamente simple trabajar con audio y vídeo en la página web.

Aquí vamos a diferenciar 2 casos:

Insertar ficheros alojados por ti de audio y vídeo en código HTML (en general con formatos MP3 y MP4).
Insertar audio y vídeo alojado en otras plataformasde podcasting y vídeo como SoundCloud, iVoox, Youtube, Vimeoy similares.

También quiero recomendarte encarecidamente que emplees, en la medida de lo posible, siempre la segunda opciónpara hacerlo, en tanto que alojar esta clase de ficheros en tu servidor implica un consumo de espacio en disco y ancho de banda muy elevado si tienes un tráfico relevante.

Si necesitas un hostingpara tu web o tu weblog, ¡actúa!

Aviso:la oferta de SiteGround vence en unos pocos días.

El típico hosting para weblogs Wordpress, por poner un ejemplo, no está concebido para esto. En consecuencia, alojar ficheros audio y video uno mismo debería ser algo que se haga sólo en casos muy singulares que verdaderamente lo justifiquen.

7.1) Cómo introducir audio MP3 y otros formatos en HTML

Con HTML 5 nos lo han puesto muy fácil para emplear audio en una página web.

Con esta estructura tu página mostrará el típico reproductor de audio con un botón de play, barra de progreso, control de volumen, etc.:

Tu navegador no aguanta este elemento de audio.

Si te fijas, el elemento clave aquí es sourcey funciona semejante a img: el atributo srcindica la URL con la ubicación del fichero de audio.

En el atributo typetenemos que concretar el género de formato de audio utilizado. En el ejemplo viene el más usado, MP3, mas también se admiten los formatos OGG (valor “audio/ogg” para type) y WAV (“audio/wav”).

Fíjate también en el texto de “Tu navegador…” que se ha añadido al elemento audio. Este texto por norma general no se visualizará, es para el caso de navegadores antiquísimos que no soporten este elemento de HTML cinco, un escenario que hoy en día prácticamente puedes descartar. Mas, por si acaso, tienes este recurso.

7.2) Cómo insertar video MP4 y otros formatos en HTML

El caso del vídeo es similar en HTML 5:

Tu navegador no soporta este elemento de audio.

Como ves, este caso es similar al del audio no requiere mucha explicación. Añadir que también se soporta el formato OGG.

Ejemplo de un reproductor de vídeo que HTML 5 usa por defecto.

7.3) Cómo embeber Podcasts, vídeos YouTube, etc.

Sin embargo, la forma general de trabajar con audio y vídeo que te invito a es otra: subir estos contenidos a una o varias plataformas especializadas como SoundCloud para audio, YouTube para vídeo, etc.

No únicamente vas a ahorrarte muchos recursos en tu servidor, sino, además, expones esos contenidos a más audiencia. YouTube, por ejemplo, es el segundo buscador más grande del planeta detrás de Google. Con eso queda dicho todo.

Embeber los contenidos subidos a estas plataformas es muy fácil: todas ellas acostumbran a tener una opción para producir código HTML que simplemente se copia y queja en tu página.

Arriba puedes ver lo que pasa en el caso de YouTube cuando se escoge la opción de “compartir” bajo un vídeo y, a continuación, “insertar”. En las demás plataformas es similar.

Esto tiene, además, la ventaja de que los reproductores son ya específicos de la plataforma y, generalmente, mucho mejores y más atractivos visualmente que los reproductores que se emplean por defecto en código HTML cinco.

8) Trabajar con formularios en HTML

El último tipo de elemento que nos falta por ver para tener vistos todos los esenciales de una página web son los formularios de HTML.

Este es, además, un elemento muy peculiar por el hecho de que introduce algo que ha revolucionado la weby la forma de consumir contenido en Internet: la interactividad con el usuario. Sin esto, no podrían existir cosas como las redes sociales, blog o bien foros, por poner un ejemplo.

8.1) Usos típicos de los formularios HTML

Es decir, los formularios HTML hacen posible que un usuario envíe información a una web. El recuadro de Instagram, Facebook o bien Twitter en el que efectúas tus publicaciones son ejemplos de formularios HTML.

Otros ejemplos muy típicos son las secciones de comentarios como en este mismo blog, los formularios en las tiendas en línea para efectuar tus pedidos, formularios de contacto, los popups típicos de los blogs para el alta en una lista de correo, etc.

Veamos nuevamente un caso sencillo, un caso de un formulario de contacto en HTML:

<p>Tu nombre:</p>

<p>Tu email:</p>

<p>Asunto de tu solicito:</p>

<p>Texto de tu solicitud:</p>

Puedes ver una versión real de un formulario así en prácticamente cualquier sitio web.

¿Qué está sucediendo en este caso de ejemplo?

Es muy sencillo: con los elementos inputpodemos crear campos en la página que recogen la información que el usuario introduce, una información estructurada que puede ser procesada por una máquina.

En este caso de formulario específico, tenemos cuatro parejas campo – valor:

Nombre– [lo que haya tecleado el usuario]
Email– [lo que haya tecleado el usuario]
Asunto– [lo que haya tecleado el usuario]
Solicitud– [lo que haya tecleado el usuario]

En el momento que el usuario haga click en el botón del formulario, esta información se envía a la URL detallada en el atributo actionde la etiqueta form.

Esta información te la puedes imaginar estructurada como una hoja Excel con 2 columnas: una con los nombre de los campos (atributo namede los elementos input) y otra con el valor (lo que el usuario haya tecleado en el formulario).

8.2) ¿Cómo se procesa un formulario?

Lo que sucede desde este momento, en realidad, ya se sale de este blog post por el hecho de que ya estamos en el servidor, ya no estamos en la página, la página ya ha hecho su trabajo: enviar al servidor esta información.

Pero te daré unas pinceladas:

Para poder emplear el contenido de un formulario enviado por un usuario al servidor, tiene que haber algún género de programa que procese esa información.

En el ejemplo precedente, algo típico sería un programa que componga con esta información un correo electrónico y lo envíe a una dirección de correo electrónico del propietario de la web anteriormente configurada. Así éste recibirá cómodamente lo que la gente envía desde la web. Eso es lo que hacen básicamente los típicos complementos de formularios de contacto en WP, por ejemplo.

Otro ejemplo de un procesado un poco más sofisticado serían los comentarios de un sitio puesto que éstos (como en WordPress) se graban típicamente en una base de datos y cuando se visualiza esa página se vuelven a cargar de la base de datos. Así esta parte se sostiene dinámica, puede irse añadiendo más y más comentarios.

9) Usar colores en HTML

Aunque en este artículo no entraré en el tema diseño de una página web porque requiere uno o múltiples posts dedicados (abajo te doy referencias), si quiero dar, por lo menos, algunas pinceladassobre cómo se trabaja con algo tan esencial en el diseño como lo es el color para los textos, fondos, etc.

9.1) Los códigos de colores en HTML

Existen diferentes sistemas para codificar colores. A efectos de la web, nos interesa el(de “Red Green Blue” en inglés, “rojo verde azul” en español) que es como el ojo humano percibe el color (con células fotoreceptoras sensibles a cada uno de ellos de estos colores) y el que emplean también las pantallas de casi todos los dispositivos.

El fundamento de este sistema es que cualquier color se puede generar combinando con niveles diferentes de intensidad estos 3 colores básicos: el rojo, verde y azul. Por razones “informáticas” se acostumbran a emplear 256 niveles en cada uno (de 0 a 255, corresponde a un byte).

Por tanto, con este sistema, tenemos un total de 256*256*256 = 16.777.216 combinacionesposibles que resultan en exactamente el mismo número de colores diferentes, más de lo que el ojo humano puede distinguir.

De ahí que en los códigos de colores en HTMLy, en general cuando se trabaja con colores en un ordenador, se use prácticamente siempre este sistema de codificación del color.

Estos códigos de colores HTML se suelen especificar en tripletes RGB, por ejemplo:

0,0,0: negro oscuro(todos y cada uno de los colores con intensidad cero).
255,255,255: blanco(todos los colores con máxima intensidad).
255,0,0: rojo puro intenso(máxima intensidad para el rojo y cero para el resto).
128,128,0: rojo y verde de mediana intensidad lo que daría un marrón verdoso.
Etc.

Colores básicos y su condificación RGB en decimal y hexdecimal.

Cabe destacar que en muchas ocasiones no se emplean los números “normales” del sistema decimal a los que estamos acostumbrados y que he usado en los ejemplos precedentes, sino que se usa también mucho el, lo puedes reconocer por el hecho de que con cierta frecuencia se le antepone a un número así la almohadilla (#).

Por ejemplo: 255,138,138en hexadecimal sería #FF8A8A.

Si los números hexadecimales son nuevos para ti, mi consejo es que no los utilices y sigas utilizando los números normales.

En cualquier caso, si los necesitas, existenque te transforman un color RGB en hexadecimal en un triplete de números decimales.

9.2) Tablas y paletas de colores

Todo este sistema está muy bien para los ordenadores, mas tiene el problema de que no es nada intuitivo para humanos. Especialmente si no te dedicas profesionalmente a cuestiones relacionadas con ello, es prácticamente imposible que a partir de una combinación de un triplete como 197,82,203 te puedas imaginar qué color específico va a resultar de ahí.

Por suerte, hay una infinidad de tablas y selectores de color en línea que te permiten conseguir estos códigos de una forma muy fácil. Elque puedes ver arriba, por ejemplo, lo encuentro muy completo.

Otra herramienta indispensable son las paletas de colores.

Esto responde al inconveniente de que no es fácil combinar colores que queden bien, en cambio es muy fácil meter la pata combinando colores que no armonizan bien y dan un resultado feo.

En esto ayudan mucho los esquemas o bien paletas de colores que proponen una combinación de colores ya hecha, una plantilla podríamos decir, con una combinación que resulta armonioso. La idea es que utilices únicamente los colores de esa paleta en tu web puesto que así podrás estar seguro de un buen resultado estético.

Captura de la herramienta Coolors (coolors.co), una de las mejores herramientas de paletas de colores que existen.

Entienes una selección de varias herramientas de las mejores paletas de colores que existen en la página web.

9.3) Cómo poner color al texto en HTML

Ahora puesto que lo fácil: ponerle color a un elemento HTML.

De forma general, puedes concretar el tono de cualquier elemento HTML con el atributo style, con la misma sintaxis usada en este ejemplo:

<h2 style=”color=rgb(trece con cuarenta y cuatro)”>Título H2 en un azul oscuro</h2>

Del mismo modo puedes usar también valores hexadecimales:

<h2 style=”color=#0D2C54”>Título H2 en un azul oscuro</h2>

La opción que prefieras emplear ya es una lección personal.

9.4) Cómo poner un color de fondo en HTML

Y esto mismo lo puedes emplear también para detallar el color de fondo, en este caso aplicando a atributo anterior a la etiqueta body:

10) Cómo crear un diseño avanzado para tu página web

En cualquier caso, no te recomiendo hacer lo que hemos hecho en los ejemplos anteriores: ir elemento por elemento detallando el color y otras muchas características como tipo de letra, tamaños, etc. que hay que especificar en un diseño un tanto trabajado.

No te lo aconsejo porque es un trabajo ímprobo ir haciendo esto elemento por elemento y, sobre todo, formidablemente ineficiente por ser realmente redundanteal repetir en muchas ocasiones exactamente la misma acción.

Imagínate, por poner un ejemplo, tener que aplicar exactamente el mismo color cientos y cientos de veces al cada párrafo, irritante, ¿no?

De hecho, esto no es un inconveniente nuevo. Esto ya se daba en los tradicionales editores de texto visuales como Word, OpenOffice, etc.

Aquí ya se inventó la solución a este inconveniente que se usa también en HTML: los estilos.

Y éstos engloban lógicamente no solamente el tratamiento del color, sino más bien todo cuanto tiene que ver con la estética y maquetación (la “presentación”) del contenido: géneros de letra, alineación del texto, tamaños y mil cosas más.

Con un “estilo” se define una vez la apariencia de cada elemento. Algo así como lo siguiente:

El fondo de la página ha de ser blanco.
Todos los títulos de nivel 1 deben utilizar el tipo de letra “Open Sans”, tener un tamaño de veinticuatro pixeles, estar alineados a la izquierda y tener un color gris oscuro con código rgb 192,192,192.
Todos los párrafos deben utilizar el género de letra “Verdana”, tener un tamaño de dieciseis pixeles, estar alineados a la izquierda y tener un color negro claro con código rgb doscientos veinticuatro,224,224.
Todas las tablas estar centradas en la página, deben tener una cabecera con un fondo gris claro con código rgb 64,64,64, un género de letra “Verdana” en negritas, el fondo del resto debe ser blanco, …
Etc., etcétera, etc.

¿Qué conseguimos?

Que con una definición de estilo así definimos una vezel diseño de nuestro sitio y a partir de ahí, nos podemos olvidar del diseño y centrarnos en crear el contenido, el diseño se aplicará automáticamente según el tipo de elemento del que se trate.

En HTML existe todo un lenguaje propio aparte, independiente de HTML, cuya misión es esto precisamente: las hojas de estilo CSS, Cascading Style Sheetsen inglés o CSS a secas.

El lenguaje con el que se describen estas reglas de estilo en CSS es también bastante asequible. Sin embargo, deja hacer cosas muy sofisticadas que lógicamente ya no son tan triviales, pero el nivel que necesitas verdaderamente en la práctica se sostiene bastante accesible.

Como el tema CSS necesita un propio para ser abordado en condiciones, te remito a este artículo:

11) Cómo hacer que tu página web aparezca en Google (posicionar tu página web)

Una vez creada tu página, te preguntarás cómo hacer a fin de que una página web aparezca en Google.

Además, bastante gente tiene el concepto erróneo de que hay que abonar a Google para aparecer en sus resultados de búsqueda, pero eso no es así: posicionar tu página en Google, esto es, puedes hacer que tu página web aparezca en google gratis.

Lo que se paga son los anuncios online(Google AdWords) que aparecen arriba totalmente y están marcados como tales, pero posicionar tu página web en Google es gratis.

En cualquier caso, entrar en lo que son las técnicas de SEO se sale plenamente del alcance de es artículo, así que aquí te daré unas pequeñas pinceladas a fin de que cojas la idea y la referencia de otro blog post en el que podrás ver todo esto a fondo, algo que deberías hacer sí o bien sí.

El quid de la cuestión es que tienes que tener claro para qué búsqueda o búsquedas en Google deseas posicionar tu página, es decir, a qué intenciones de búsquedaresponde. Las palabras que utiliza la gente en esas búsquedas conforman las palabras clavepara las que te quieres posicionar tu página, posiblemente hayas oído o leído sobre esto alguna vez.

Lo que es maravilloso en esto (y que mucha gente ignora) es que existen herramientasque te afirman qué busca la gente, o sea, qué palabras clave existen y cuántas búsquedas al mes se hacen con ellas.

Por tanto, se trata de demostrar a Google que tu artículo encaja con estas palabras clave, cómo se hace y todo lo que conlleva te lo explico aquí a fondo:

12) Recursos para aprender más

Si has llegado a este post ya tienes bastante material para poner ya mismo manos a la obra y hacer tus primeros pinitos en la creación de páginas HTML, si bien ya te adelanto que te será imprescindible aprender unos mínimos de CSS para lograr un resultado estéticamente atrayente.

Lógicamente sólo he podido hacer una pequeña introducción, mas con esta base ya deberías ser capaz de ir avanzando sin grandes problemas por tu cuenta. De ahí que, te quiero dejar a continuación ciertos recursos que te permitirán avanzar hasta transformarte prácticamente en un especialista.

12.1) Más formación

El para una introducción desde cero al planeta CSS. Tan solo con la lectura de este blog post y un poco de guste ya deberías ser capaz de hacer páginas con una estética fácil, mas agradable y a la altura de los tiempos actuales.
: esto es una web en español simplemente genial con varios libros online sobre HTML, CSS y muchas más tecnologías de la página web. Te invito a en particular como continuación a este artículo el libro de. Por otro lado, con el librovas a poder aprender todo lo que necesitas en el lado del CSS.
: una web en inglés increíblemente completa que abarca también todas las tecnologías esenciales. Pero, a diferencia de la precedente no te la aconsejo para aprender desde cero o como continuación a este artículo (para eso, Librosweb), te la aconsejo como web de consulta. O sea, por poner un ejemplo, si quieres tener más información sobre elemento HTML para saber cuáles son los atributos que tiene, ver ejemplos, etcétera Entonces, éste es el recurso que emplear. Además, cuenta con un editor on-line que te deja probar y experimentar con el código.

12.2) Herramientas

Los inspectores de códigode los navegadores: son herramientas que incorporan los 3 navegadores más utilizados del mercado: Chrome, Firefoxe Internet Explorer (ahora Edge). En todos ellos los activas con la tecla F12 o bien desde el menú correspondiente. Te permiten ver el código HTML y CSS y muchas cosas más de una forma muy estructura, una manera fantástica de “espiar” otras páginas y aprender cómo están hechas. Abajo viene un vídeo para ver cómo funciona esto.
: arriba ya te he recomendado editores HTML con los que trabajar. Mas para cuando ya te encuentres en una fase más avanzada de conocimiento, te quiero recomendar este editor muy popular entre los profesionales y también libre y gratuito.

Aquí tienes un vídeo de demos del inspector de código de Firefox:

Y en este enlace te dejo un vídeo tutorial HTML + CSS básicoque me ha agradado bastante:

13) Anexo: ¿Necesitas crear tu página realmente en HTML?

Como te comentaba al principio de este artículo, si tienes en psique crear un sitio web y te estás proponiendo hacerlo creando de forma directa las páginas de la web en código HTML, deberías pensar esta idea.

En el noventa y nueve con nueve por ciento de los casos, lo suyo es usar un Content Management System (Content Management System – Sistema de Gestión de Contenidos). Hacer páginas web frente «a pelo» en HTML a emplear un Content Management System de esta clase sería algo así como tallar un texto en piedra frente a escribirlo en un ordenador.

Voy a contar ciertas razones concretas más importantes para no trabajar de manera directa en HTML:

Productividad: tardarás muchísimo menos con un CMS, hablamos de un factor de múltiples enteros de diferencia. Podemos estar hablando reposadamente de un factor diez o más, según el género de web.
Comodidad: en los CMS te puedes concentrar en el contenido, trabajas de manera visual. Aun puedes hacer cosas como escribir los contenidos de tus páginas en Word y hacer entonces un copiar y pegar en el CMS, realizar unos pocos ajustes en el editor visual del CMS y listo.
Resultado: a menos que seas un profesional del diseño web (y de buen nivel), el resultado va a ser mucho mejor con un CMS. Con un Content Management System vas a tener una estructura uniforme, un diseño profesionalgracias a las plantillas de diseño (hechas por profesionales), vas a contar sin esfuerzo adicional elementos interactivoscomo secciones de comentarios muy complicadas de hacer “a pelo” y mil cosas más.
Los mejores CMS son gratis: los productos que mentaba ya antes (WordPress, Joomla, etcétera) son aplicaciones de software libre y completamente gratuitasa la vez que los mejores productos que existen en el mercado. Lo que tienes que pagar realmente es el dominio y el servidor del sitio (el hosting), algo que tendrás que hacer de todas formas, uses un CMS o páginas HTML.

Hay muchas razones más, pero creo que estas son ya tan contundentes que no hacen falta más. Como ves, sencillamente no hay color entre las 2 opciones.

Concretamente te recomendaría WordPresspara blogs y sitios web de complejidad pequeña o bien mediana. Para sitios muy grandes y/o complejos deberías valorar también alternativas como Joomlao Drupal, por poner un ejemplo.

Te recomendaría, además, la versión de WordPress para hosting(la gratis es muy limitada). Para ello precisas contratar un alojamiento web (cuesta unos 5€/mes más o bien menos) como,oque soporte Wordpress o bien Joomla! o Drupal si prefieres estas aplicaciones.

Por tanto, si ves claro que en tu caso, la vía por la que debes ir realmente es la de usar un CMS, te invito a , primeramente, este megatutorialde cómo crear una web con un diseño profesional con WordPress:

Y si prefieres la lectura, te invito a seguir con estos posts:

¿Qué razones quedan entonces para aprender y emplear HTML?

El quid de la cuestión es que, incluso utilizando un Content Management System como WP o bien Joomla, incluso así, saber HTML te dará muchas ventajas, suficientes como para que el limitado esmero de aprenderlo te valga la pena.

Hay muchos ejemplos.

Un ejemplo muy claro es Blogger, por servirnos de un ejemplo. En el caso de utilizar Blogger, si sabes HTML, Blogger te permite personalizar las plantillas de diseño.

En Wordpress le puedes sacar muchísimo partido al HTML con los(más detalles en el enlace).

Otro ejemplo son las restricciones y fallos de los editores visuales HTML. El editor estándar de WP, por poner un ejemplo, genera alguna vez desaguisados que son mucho más fáciles de reparar si entras de forma directa en la vista en código HTML.

Una última ventaja que quiero tomar como un ejemplo es el hecho de que muchas son las ocasiones donde más allá del uso de CMSs saber HTML te va a ser más que útil.

Por ejemplo: La herramienta de correo electrónico marketingque te permite administrar hasta 15.000 subscritores gratis y que recomiendo para comenzar, requiere utilizar HTML para integrar los formularios de suscripción en una web, ya sea un blog o bien cualquier otro tipo de web.

Es decir, no hay un plugin de Mailrelay para Wordpress ni nada parecido, tienes que trabajar con HTML. No es complicado (es copiar y pegar código básicamente), mas si no tienes ni la más remota idea de HTML es fácil que cometas algún error básico y te vuelvas desquiciado por no saber cuál es y cómo resolverlo.

En definitiva: para una web deberías utilizar, como norma, siempre y en todo momento un Content Management System. Pero, como muy tarde, en el momento que esa web comience a ser esencial para ti te invito a de forma encarecida aprender HTML y un poco de CSS, es poco esmero y accedes a otra dimensión de posibilidades para tu proyecto.