Añadir contenido a su sitio web
Primero, dese una palmadita en la espalda porque ahora tiene un sitio web personal. Ahora es el momento de hacerlo más interesante.
Añadir un encabezado
¡Démosle un nombre! Depende del tipo de sitio que esté creando, pero el mío será una página de inicio personal. Todo el mundo, incluso su cuñado, tiene un perfil en las redes sociales, pero son aburridos y todos iguales. Merecemos más. Y nuestra vieja amiga, la página de inicio personal, es un lugar perfecto para comenzar.
Página web de Victorhck.
Mi nombre es Victorhck. Disfruto haciendo sitios web y enseñando a otras personas a hacer lo mismo.
¡Genial! Vamos a verlo en el navegador.
Bueno, eso no es lo que queremos. El navegador juntó nuestro texto en una sola línea. ¡¿Qué pasa?!
Nos falta el marcado en el lenguaje de marcado de Hipertexto. Le debemos decir a nuestro navegador que queremos el nombre de nuestro sitio en un encabezado. En HTML, puede tener hasta seis niveles de encabezados. Vamos a ajustar el nombre de nuestro sitio con el encabezado más importante, es decir, un encabezado de nivel 1, o <h1>
.
¿Qué es este extraño código de letras y símbolos que acabo de escribir? Se llama etiqueta HTML. Envolvemos partes de nuestra página en etiquetas para indicarle al navegador web cuáles son. Hagámoslo ahora.
<h1>Página web de Victorhck.</h1>
<p>
Mi nombre es Victorhck. Disfruto haciendo sitios web y enseñando a otras personas a hacer lo mismo.
</p>
Aquí, hemos separado los dos elementos de nuestra página y encerrado cada una dentro de etiquetas. Estamos diciendo que el nombre de nuestro sitio debería ser un encabezado de nivel 1 y nuestro primer párrafo debería ser, bueno un párrafo, eso es lo que significa el código p
.
Tenga en cuenta que cada par de etiquetas tiene una etiqueta de apertura y una etiqueta de cierre (salvo algunas excepciones que veremos más adelante). La etiqueta de cierre es idéntica a la de apertura, excepto que empieza con una barra inclinada, /
.
Ahora, guardemos el archivo y recarguemos el navegador. Este suele ser el flujo de creación de un sitio web: cambiar algún código, guardarlo y luego pulsar recargar en el navegador. Y ahora, ¡sienta el poder corriendo por tus venas mientras crea un sitio web a partir de la nada!
¡Epa, eso está mucho mejor! Vamos a ir añadiendo más contenido.
Enlazando a otros sitios web
¿Alguna vez se ha preguntado por qué se llama la web? ¿Qué significa eso? La salsa especial que la hace una web (o red en español) es el hiperenlace, o lo que normalmente se llama, un enlace o link. Ya sabe, a menudo es un texto en azul, subrayado sobre el que se puede hacer clic y saltar a otra página web, sitio, imagen, vídeo de gatos o cualquier cosa.
Es posible gracias al elemento anchor, o “Una etiqueta,” como se conoce comunmente. Tiene este aspecto:
<a>Esto ahora mismo no irá a alguna parte</a>
En lo que haya dentro de las etiquetas <a>
se puede hacer clic encima de ello. Pero ¿dónde nos llevará ese enlace? Tal como lo hemos escrito, a ningún sitio. Necesitamos darle un destino. Podemos hacer eso dándole a la etiqueta <a>
un atributo llamado href
. Es la referencia de hipertexto, el lugar al que quiere que se dirija al hacer clic en el enlace.
<a href="https://www.wikipedia.org/">Ir a Wikipedia</a>
Vamos a añadir un enlace en nuestro sitio web, vamos a elegir uno de sus sitios web favoritos o algo que le parezca divertido e interesante.
<h1>Página web de Victorhck</h1>
<p>
Mi nombre es Victorhck. Disfruto haciendo sitios web y enseñando a otras personas a hacer lo mismo.
</p>
<p>
Echa un vistazo a estos fantásticos juegos web en <a href="https://neal.fun/">Neal.fun</a>!
</p>
¡Guardar y recargar!
Con la ayuda de las humildes etiquetas <a>
, su sitio web es parte de la vibrante red. Hay más de cien etiquetas HTML, pero no es necesario memorizarlas todas para crear un sitio web. Puede hacer mucho con poco. Veamos algunas etiquetas más que pueden ayudarle a comenzar.
Listas de cosas
Para las personas aficionadas a las listas, este conjunto de etiquetas es para vosotros. Usaremos los elementos de lista sin orden, <ul>
(iniciales de unordered list), para añadir una lista. El código <ul>
define la lista, mientras que, cada uno de los elementos de la lista está definido con la etiqueta, <li>
, (iniciales de list item). Como esta:
<ul>
<li>El primer elemento</li>
<li>Otro elemento</li>
<li>Y finalmente, otro elemento</li>
</ul>
El código anterior crea una lista similar a esta:
- El primer elemento
- Otro elemento
- Y finalmente, otro elemento
Si desea una lista numerada, cambie <ul>
por <ol>
(iniciales de ordered list). ¡Eso es todo! Así creará la lista numerada que desea.
- El primer elemento
- Otro elemento
- Y finalmente, otro elemento
Vamos a añadir una lista a nuestro sitio web. Aquí está el sitio web completo:
<h1>Página web de Victorhck</h1>
<p>
Mi nombre es Victorhck. Disfruto haciendo sitios web y enseñanado a otras personas a hacer lo mismo.
</p>
<p>
Echa un vistazo a estos fantásticos juegos web en <a href="https://neal.fun/">Neal.fun</a>
</p>
<h2>Juegos de mesa favoritos</h2>
<ul>
<li>Dungeons & Dragons</li>
<li>Risk</li>
<li>Pandemic</li>
</ul>
<h2>Cómo hacer un sitio web</h2>
<ol>
<li>Crear un archivo HTML</li>
<li>Escribir algo de HTML en él</li>
<li>Abrirlo en el navegador web</li>
</ol>
¡Oye, esto poco a poco está empezando a parecerse a un sitio web!
Notará que puse una nueva etiqueta en el código que he mostrado, sin mencionarla. Es un encabezado de nivel 2, o etiqueta <h2>
. Los encabezados agregan estructura a una página, lo que facilita que los visitantes encuentren lo que buscan.
Hay otra diferencia sutil entre las etiquetas que hemos estado usando. Algunas de ellas, como la etiqueta <a>
, son elementos en línea, lo que significa que no comienzan nuevas líneas y solo ocupan el ancho necesario. Otras etiquetas como <h1>
, <ul>
, o <p>
, son conocidas como elementos de bloque. Un elemento de bloque comienza en una nueva línea y ocupa el ancho completo de su contenedor.
Hasta ahora tenemos muchas palabras, pero ¿sabe cuánto valen mil palabras?
Añadir imágenes a su sitio web
Vamos a añadir una imagen interesante a nuestro sitio web. Si bien puede resultar tentador ir a Google Imágenes y tomar lo primero que encuentre, ese no es el camino a seguir. Debe asegurarse de tener los derechos adecuados sobre la imagen. Hay muchos lugares en la web para encontrar imágenes que podremos usar. (Buscar imágenes con licencia Creative Commons). Para simplificar, usemos el popular sitio de imágenes libres, Unsplash.
Encontré una imagen genial del espacio. Descargué la versión de tamaño pequeño y le cambié el nombre a espacio.jpg
para que sea más fácil llamarla. Encuentre una imagen que le guste y suéltela en la carpeta al lado de su archivo index.html
.
Puede agregarla a su página usando la etiqueta de imagen o <img>
. A diferencia de las etiquetas que hemos visto hasta ahora, la etiqueta <img>
no necesita etiqueta de cierre. Es algo similar a esto:
<img src="espacio.jpg" alt="Fotografía del espacio con estrellas y polvo de estrellas.">
Al igual que la etiqueta <a>
, la etiqueta <img>
también utiliza atributos para ofrecer más información sobre cómo quiere que se utilice esa etiqueta.
Utilice el atributo src
para decirle a su etiqueta de imagen la fuente de su imagen, esto es, dónde está ubicada. En este ejemplo, decimos que la imagen está en la misma carpeta que nuestro archivo index.html
(en lugar de una subcarpeta) y especificando que el nombre de archivo de la imagen es espacio.jpg
.
También necesitamos describir la imagen en caso de que algunas personas que visiten nuestro sitio web no puedan verla. Esto podría suceder por varias razones: tal vez nuestro visitante sea una persona ciega y utilice un lector de pantalla para acceder a sitios web. O tal vez un problema técnico hace que la imagen no se cargue por algún motivo. Si eso sucede, nuestro texto alternativo, o texto alt
, será lo que se muestre.
Después de estos cambios, guardemos y actualicemos el navegador.
Cambié el tamaño de la ventana para que toda la página cupiera en la captura de pantalla, pero si ve una barra de desplazamiento, ¡eso también está bien!
Dependiendo de su imagen, es posible que desee hacerla más pequeña o más grande. Puede utilizar los atributos width (ancho)
y/o height (alto)
para realizar esto. Si no especifica ninguna anchura o altura, el navegador mantendrá el aspecto de la imagen, no la deformará estirándola o aplastándola. Para establecer un ancho o alto para la imagen, debe proporcionar un número que representa una cantidad de píxeles.
<img src="espacio.jpg" alt="Fotografía del espacio con estrellas y polvo de estrellas." width="300">
Si establecemos el ancho
a 300
, tendrá este aspecto:
Añadir notas a su código
A veces, querrá poner notas en su código: texto que no se muestra en la página pero que permanece visible en el código. Puede hacer esto para ayudar a organizar un documento, dejar notas (como todos) para usted en el futuro o incluso ocultar algún código de trabajo en progreso que no desea que se muestre todavía.
Por ejemplo, podría dejar una nota para revisar y actualizar mis juegos de mesa favoritos.
<h2>Juegos de mesa favoritos</h2>
<!-- Nota: después de jugar algunos juegos nuevos, ver si alguno merece estar en esta lista. -->
<ul>
<li>Dungeons & Dragons</li>
<li>Risk</li>
<li>Pandemic</li>
</ul>
El navegador ignorará cualquier cosa que esté entre <!--
y -->
y no se mostrará en la página. Este tipo de texto es llamado un comentario. Los comentarios le brindan una buena manera de añadir notas en el código, ya que solo son visibles en el código, no en la página web representada.
Aquí hay otro ejemplo de cómo incluí varias etiquetas HTML dentro de un comentario. Nada del comentario aparecerá en la página, solo en el código fuente.
<!--
Trabajo en progreso. Cuando finalice esta lista, eliminaré las marcas de los comentarios
<h2>Juegos de mesa favoritos</h2>
<ul>
<li>Dungeons & Dragons</li>
<li>Risk</li>
<li>Pandemic</li>
</ul>
-->
Su código HTML es público, incluso los comentarios. Cualquiera puede ver el código fuente de su sitio web, así que no ponga nada secreto o privado en los comentarios. Para ver el código fuente de una página, puede pulsar el atajo de teclado o encontrar la opción indicada en el menú de su navegador web. Varía dependiendo del navegador. Eche un vistazo a esta referencia en Lifewire.
Dele cabeza y cuerpo a su sitio web
No he sido totalmente honesto con usted hasta ahora. Hemos estado tomando un atajo. Hemos estado escribiendo únicamente las cosas que el navegador mostrará en nuestro archivo index.html
. Pero cada sitio web tiene una sección invisible. Y ahora su sitio web la necesita.
¿Recuerda cómo envolvimos la mayoría de los elementos en etiquetas? De hecho, necesitamos envolver toda la página en la etiqueta <html>
. Una página HTML se divide además en una sección invisible llamada cabeza o <head>
que contiene la información sobre su sitio web, y el cuerpo o <body>
, que es donde va todo el contenido.
<html>
<head>
<!-- la info sobre su sitio web va aquí-->
</head>
<body>
<!-- el material que desea mostrar en su página web va aquí -->
</body>
</html>
Para que nuestro documento HTML sea oficial, agreguemos una línea doctype
al comienzo del todo. Se necesita principalmente por razones históricas, pero le dice a su navegador web, “Hey, soy un documento HTML, así que por favor procede a mostrarme de manera correcta”. Está bien copiar y pegar esa línea y seguir adelante; no sienta que necesita memorizar cada pequeño detalle.
<!doctype html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Por ahora, vamos a incluir dos elementos en la sección <head>
: una etiqueta de título y una meta etiqueta.
<head>
<meta charset="utf-8">
<title>La web de Victorhck</title>
</head>
La etiqueta <title>
controla el texto que aparece en la pestaña del navegador en su sitio web y el nombre de su sitio cuando aparezca en los resultados de búsqueda. ¡Genial!
Podemos utilizar la etiqueta <meta>
en múltiples ocasiones para darle al navegador información extra sobre nuestra página web. En este caso, le estamos diciendo qué conjunto de caracteres utilizar. Todo lo que necesita saber aquí es que el texto UTF-8 significa que los símbolos especiales, como los emojis, aparecerán como se esperaba. Lo incluiremos primero, antes de cualquier otro elemento de texto, para asegurarnos de que todo nuestro texto se muestre correctamente.
Aquí está el archivo index.html
completo como referencia:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Página web de Victorhck</title>
</head>
<body>
<h1>Página web de Victorhck.</h1>
<img src="espacio.jpg" alt="Fotografía del espacio con estrellas y polvo de estrellas.">
<p>
Mi nombre es Victorhck. Disfruto haciendo sitios web y enseñando a otras personas a hacer lo mismo.
</p>
<p>
Echa un vistazo a estos fantásticos juegos web en
<a href="https://neal.fun/">Neal.fun</a>!
</p>
<h2>Juegos de mesa favoritos</h2>
<ul>
<li>Dungeons & Dragons</li>
<li>Risk</li>
<li>Pandemic</li>
</ul>
<h2>Cómo hacer un sitio web</h2>
<ol>
<li>Crear un archivo HTML</li>
<li>Escribir algo de HTML en él</li>
<li>Abrirlo en el navegador web</li>
</ol>
</body>
</html>
Actualizar su página en la web
Estos cambios se ven bastante bien. Publiquemos esta página al mundo. Visite su panel de Neocities. Verá los archivos iniciales mas el archivo index.html
que subió en el capítulo 1 de este libro. Para hacer las cosas algo más límpias borraré las imágenes PNG y el archivo CSS que ya estaban allí inicialmente.
Ahora haga clic en el botón de Subir o simplemente arrastre sus archivos actualizados (el index y la imagen) a la lista de archivos.
Una vez hecho eso, haga clic en el enlace de su sitio web en la parte superior del panel. Ese es su sitio web EN VIVO recientemente actualizado, que creó desde cero. ¡Qué genial!
A continuación
En el próximo capítulo, haremos un breve intermedio y conseguiremos un editor de texto diseñado para escribir HTML.