Comenzar con tu sitio web puede ser una tarea abrumadora. Esto es especialmente cierto si tienes experiencia limitada en la creación de sitios web. Para ayudarte a empezar, Dynadot proporciona alojamiento gratuito de una página con cada compra de dominio. Nuestro alojamiento de una página incluye un "wizard" para ayudar a las personas que no conocen HTML a construir sus sitios web. Sin embargo, nuestro asistente no te permite hacer tanto para tu sitio como HTML, así que aquí tienes algunos conceptos básicos para empezar*:

<b>negrita</b>
<i>cursiva</i>
<u>subrayado</u>

Tamaño de fuente
La forma más fácil de cambiar el tamaño de la fuente es usando estas etiquetas:

<big>aumenta la fuente en un tamaño</big>
<small>disminuye la fuente en un tamaño</small>

Si necesitas hacer tu fuente aún más grande o más pequeña, puedes usar estas etiquetas más específicas:

<font size="+2">aumenta el tamaño de la fuente por el número entre comillas</font>
<font size="-2">disminuye el tamaño de la fuente por el número entre comillas</font>

También puedes ser aún más específico con el tamaño de tu fuente especificando un número del 1 al 7 como el tamaño de fuente, donde 1 es el tamaño más pequeño y 7 el más grande:

<font size="1">fuente más pequeña 8 pt</font>
<font size="7">fuente más grande 36 pt</font>

Otra opción con el tamaño de fuente es usar las etiquetas de encabezado 1-6, que también añaden espacio alrededor del texto:

<h1>encabezado más grande</h1>

<h6>encabezado más pequeño</h6>

Color de fuente
Además de cambiar el tamaño de tu fuente, también puedes ajustar el color.

<font color="blue">azul</font>
<font color="red">rojo</font>

Si quieres usar un tono diferente de rojo o azul, puedes ingresar un número hexadecimal de seis dígitos en lugar de la palabra "red" o "blue." Todos los colores están compuestos de rojo, azul y verde, y cada color tiene su propio "code." Los primeros dos números (o a veces letras) del código representan el rojo, luego los siguientes dos representan el verde, y los últimos dos representan el azul. Puedes descargar Color Cop para PC o Medidor de Color Digital para Mac y usar estos productos para pasar el cursor sobre cualquier color en tu pantalla y te dará el código que necesitas. Por ejemplo, si usaras el código para el azul que ves arriba, se vería así:

<font color="#0000FF">mismo azul</font>
<font color="#3DC6EA">y aquí tienes un ejemplo de otro tono de azul que puedes elegir usando el código</font>

Tipo de Letra
Finalmente, puedes cambiar el tipo de letra de tu fuente. Puedes usar Microsoft Word si necesitas ideas.

<font face="arial">fuente arial</font>
<font face="comic sans ms">fuente comic sans ms</font>
<font face="lucida handwriting">lucida handwriting</font>

Ahora tendrás que juntarlo todo. Para cualquier cosa con la palabra "font" puedes simplemente poner toda la información en una etiqueta. Si quieres usar las etiquetas de encabezado o añadir negrita, cursiva o subrayado, puedes añadirlo en su propia etiqueta.

<font size="4" color="376E1E" face="calibri">puedes juntarlo todo</font>

<b><font size="4" color="376E1E" face="calibri">puedes ponerlo todo en negrita</font></b>

<font size="4" color="376E1E" face="calibri">o puedes poner en negrita <b>parte</b> de ello</font>

Espaciado
Ahora que puedes ajustar tu fuente, querrás crear párrafos, saltos de línea y, en algunos casos, puede que necesites agregar espacios manualmente:

<p>usar las etiquetas de párrafo coloca tu texto en su propio párrafo...</p>

<p>...y en la siguiente línea</p>

Usar saltos de línea es como...<br>
...presionando enter para pasar a la siguiente línea y a diferencia de todo lo demás en esta página, no necesita una etiqueta de cierre (esta es una etiqueta de cierre </p>). Puedes simplemente ingresarlo de nuevo...<br>
...para pasar a la siguiente línea de nuevo.

No necesitarás usar código para espacios entre texto (como de la barra espaciadora) a menos que quieras agregar espacios adicionales, porque HTML solo reconocerá uno incluso si pones más de uno con tu barra espaciadora. Para dar espacio entre texto, puedes usar el código: &nbsp;

Enlaces
Una cosa que probablemente querrás agregar a tu sitio web son enlaces a otras páginas de tu sitio web o incluso a otros sitios web. Los enlaces son fáciles de agregar usando este código:

<a href="http://www.dynadot.com">esto enlaza a la página de inicio de Dynadot</a>

Puede que notes que si haces clic en el enlace de arriba, se abre en una pestaña o ventana separada en tu navegador, dependiendo de la configuración de tu navegador. Esto es algo fácil de agregar y se recomienda si estás enlazando fuera de tu sitio web o no quieres perder personas en una página determinada (como un blog), porque mantiene esa página abierta para que tus clientes puedan volver sin tener que hacer clic en el botón de retroceso en su navegador. Todo lo que necesitas hacer es agregar target="_blank" después de tu enlace:

<a href="http://www.dynadot.com" target="_blank">esto enlaza a la página de inicio de Dynadot</a>

Imágenes
Finalmente, quizás quieras añadir imágenes a tu sitio. Para añadir una imagen con HTML necesitarás alojarla en algún lugar. Si no tienes un lugar para alojar la imagen tú mismo, puedes usar un servicio como Tiny Pic.com que te permite subir tus imágenes gratis y genera la etiqueta HTML para ti. Si no quieres crear una cuenta, puedes simplemente guardar el HTML que genera (solo no lo guardes en Microsoft Word, ya que Word a veces agrega cosas que hacen que el código ya no funcione). Ten en cuenta que algunas imágenes son muy grandes y quizás quieras optimizarlas para que ocupen menos espacio. Hay algunos optimizadores de imágenes gratuitos que puedes usar para reducir el tamaño de archivo de tus imágenes, como Image Optimizer.net. Aquí hay un ejemplo de una etiqueta de imagen básica:
<img src="https://i45.tinypic.com/9bkglk.jpg"> que se ve así:

También puedes añadir bordes a tu imagen, cambiar el tamaño y añadir espacio alrededor de ella:

<img src="https://i45.tinypic.com/9bkglk.jpg" border="2" width="100" height="30" vspace="10" hspace="20" align="left">

Como puedes ver, la imagen tiene un borde, es más ancha y más corta, y se ha espaciado alrededor de la parte superior e inferior y de la derecha e izquierda. También está alineada a la izquierda, por lo que el texto ahora aparece al lado de la imagen.

También puedes añadir un enlace a tu imagen. Solo necesitas poner las etiquetas de enlace alrededor de la etiqueta de imagen así:

<a href="http://www.dynadot.com" target="_blank"><img src="https://i45.tinypic.com/9bkglk.jpg" border="0"></a>
Ahora puedes hacer clic en esta imagen y te lleva a nuestra página principal:

Esto a veces agrega un borde alrededor de la imagen en el color azul que ves en los enlaces de texto. Para eliminarlo, solo agrega border="0" a tu etiqueta de imagen. También puedes notar que el HTML generado por Tiny Pic.com tiene alt="Image and video hosting by Tiny Pic" dentro de la etiqueta de imagen. Puedes usar esto para poner texto con tu imagen en caso de que no se muestre correctamente en el navegador de alguien. Agregar texto alternativo también puede ayudar con la Optimización para Motores de Búsqueda (SEO).

Ahora que esperamos que te sientas más seguro con HTML, puedes poner a prueba tus habilidades en tu sitio web. Pero antes de guardar con HTML potencialmente imperfecto, sugerimos probar tu HTML con un servicio gratuito como onlinehtmleditor.net. Incluso tiene algunos botones HTML fáciles en la parte superior para ayudarte. Ahora solo necesitas conseguir tu dominio si aún no tienes uno y comienza con tu sitio web hoy!

*Tenga en cuenta que la etiqueta font está obsoleta y puede que no se muestre correctamente en todos los navegadores. Es mejor definir el estilo de fuente en CSS, lo cual cubriremos en una publicación de blog posterior.

Publicado por Robyn Norgan