Cómo hacer tu primer sitio web utilizando solamente HTML
En un mundo cada vez más digitalizado, tener la capacidad de crear tu propio espacio en línea es una habilidad valiosa. Imagina un lienzo en blanco en el vasto lienzo digital de Internet, esperando a que le des vida con tu creatividad. Bienvenidos a la emocionante aventura de la creación de páginas web con HTML.
Así que, prepárate para sumergirte en el código, dar vida a tus ideas y compartir tu visión en línea. Desde los títulos hasta las imágenes y formularios, aprenderemos juntos a dar forma a la web en este emocionante viaje hacia la creación de tu propia página web con HTML.
Para ver el código visita github.com/modernclix/rock-music-site .
¡Comencemos!
Paso 1
Los elementos HTML tienen tags de apertura como <h1> y de cierre como </h1> . El texto para un elemento iría entre estos tags de apertura y cierre.
En este caso vamos a ingresar el título principal de nuestro sitio "Rock Music Site" en un elemento <h1> :
<h1>Rock Music Site</h1>
Paso 2
Los tags de encabezado <h1> hasta <h6> se utilizan para indicar la importancia del contenido que se encuentra debajo de ellos. Cuanto menor sea el número, mayor será la importancia, por lo que los tags h2 tienen menos importancia que los elementos <h1> . Utilice únicamente un tag <h1> por página y coloque los títulos de menor importancia debajo de los de mayor importancia.
Aquí vamos a agregar el título de una sección llamada "Rock Music Photos" como un <h2> :
<h2>Rock Music Photos</h2>
Paso 3
El tag <p> se utiliza para crear un párrafo de texto en sitios web. Vamos a crear un elemento <p> debajo del <h2> y le asignamos el texto "See the best Rock Music photos in our Gallery" :
<p>See the best Rock Music photos in our Gallery.</p>
Paso 4
Comentar te permite dejar mensajes sin afectar la visualización del navegador. También te permite desactivar el código. Un comentario en HTML comienza con <!-- , contiene cualquier número de líneas de texto y termina con -->.
Vamos a añadir un comentario encima del tag <p> con este texto, "TODO: Add link to Rock Music photos":
<!-- *TODO: Add link to Rock Music photos* -->
Paso 5
HTML5 tiene tags que sirven para identificar diferentes áreas de contenido. Estos elementos hacen que tu HTML sea más fácil de leer y ayudan con la optimización de motores de búsqueda (SEO) y la accesibilidad.
Identifiquemos la sección principal de esta página agregando una etiqueta de apertura <main> antes del tag <h1> y una etiqueta de cierre </main> después del <p>:
<main>
<h1>Rock Music Site</h1>
<h2>Rock Music Photos</h2>
<!-- *TODO: Add link to Rock Music photos* -->
<p>See the best Rock Music photos in our Gallery.</p>
</main>
Paso 6
En el paso anterior, colocaste los tags <h1>, <h2>, comentario y <p> dentro del elemento <main> . Esto se llama nesting o anidamiento. Los elementos anidados deben colocarse dos espacios más a la derecha del elemento en el que están anidados. Este espacio se llama sangría y se utiliza para hacer HTML más legible.
Agreguemos una sangría con la barra espaciadora o la tecla tab a los tags anidados en el <main> para emprolijar nuestro código:
<main>
<h1>Rock Music Site</h1>
<h2>Rock Music Photos</h2>
<!-- *TODO: Add link to Rock Music photos* -->
<p>See the best Rock Music photos in our Gallery.</p>
</main>
Paso 7
Podemos agregar imágenes a nuestro sitio web utilizando el tag <img> . Los tags <img> tienen una etiqueta de apertura sin una etiqueta de cierre. Este tipo de tags sin una etiqueta de cierre se conocen como self closing tag.
Agreguemos un elemento <img> debajo del <p> . Esto aún no hará aparecer ninguna imagen en el navegador:
<main>
<h1>Rock Music Site</h1>
<h2>Rock Music Photos</h2>
<!-- *TODO: Add link to Rock Music photos* -->
<p>See the best Rock Music photos in our Gallery.</p>
<img />
</main>
Paso 8
Los atributos de HTML son palabras especiales que se utilizan dentro de la etiqueta de apertura de un elemento para controlar el comportamiento del mismo. El atributo src en un elemento <img> especifica la URL de la imagen (donde se encuentra la imagen).
A continuación vamos a agregar a nuestro tag <img> el atributo src con el link de nuestra imagen: https://images.pexels.com/photos/811838/pexels-photo-811838.jpeg .
También le vamos a dar como atributo un ancho width y un alto height a la imagen expresado en pixels:
<main>
<h1>Rock Music Site</h1>
<h2>Rock Music Photos</h2>
<!-- *TODO: Add link to Rock Music photos* -->
<p>See the best Rock Music photos in our Gallery.</p>
<img width="320" height="240" src="<https://images.pexels.com/photos/811838/pexels-photo-811838.jpeg>"/>
</main>
Paso 9
Todos los elementos <img> deben tener un atributo alt . El texto del atributo alt debe describir brevemente el contenido de la imagen, se utiliza para que los lectores de pantalla mejoren la accesibilidad y se muestran si la imagen no se carga.
Dentro de nuestro <img> , vamos a agregar un atributo alt con este texto que describe la imagen:
"A guy playing electric guitar":
<main>
<h1>Rock Music Site</h1>
<h2>Rock Music Photos</h2>
<!-- *TODO: Add link to Rock Music photos* -->
<p>See the best Rock Music photos in our Gallery.</p>
<img width="320" height="240" src="<https://images.pexels.com/photos/811838/pexels-photo-811838.jpeg>" alt="A guy playing electric guitar">
</main>
Paso 10
Podemos vincular a otra página con un o a otras secciones de nuestra página con un hipertexto o link representado por el tag ancla o anchor <a>.
El texto, imagen o elemento de un enlace debe colocarse entre las etiquetas de apertura y cierre del tag <a>.
Para indicar a qué URL queremos vincular el <a> utilizamos el atributo href . Y para que el enlace se abra en una pestaña nueva utilizaremos el atributo target= "_blank" .
Vamos a convertir nuestra imagen en un link, si la presionamos se abrirá una nueva pestaña mostrandonos la imagen:
<main>
<h1>Rock Music Site</h1>
<h2>Rock Music Photos</h2>
<!-- *TODO: Add link to Rock Music photos* -->
<p>See the best Rock Music photos in our Gallery.</p>
<a target="_blank" href="<https://images.pexels.com/photos/811838/pexels-photo-811838.jpeg>"><img width="320" height="240" src="<https://images.pexels.com/photos/811838/pexels-photo-811838.jpeg>" alt="A guy playing electric guitar"></a>
</main>
Paso 11
Antes de agregar contenido nuevo, vamos a organizarlo en secciones. Para esto debes utilizar el tag <section> .
Toma el <h2>, comentario, <p> y el <a> con el <img> y anídalos en un tag <section> :
<main>
<h1>Rock Music Site</h1>
<section>
<h2>Rock Music Photos</h2>
<!-- TODO: Add link to Rock Music photos -->
<p>See the best Rock Music photos in our Gallery.</p>
<a target="_blank" href="<https://images.pexels.com/photos/811838/pexels-photo-811838.jpeg>"><img width="320" height="240" src="<https://images.pexels.com/photos/811838/pexels-photo-811838.jpeg>" alt="A guy playing electric guitar"></a>
</section>
Paso 12
Es hora de agregar una nueva sección. Agreguemos un segundo <section> debajo del existente.
Dentro del segundo <section> , agrega un nuevo <h2> con el texto "Rock Music lists".
Cuando agregas un elemento de encabezado de rango inferior a la página, se da a entender que está comenzando una nueva subsección.
Después del último <h2> del segundo <section> , agregamos un <h3> con el texto "Things Rockers love":
<section>
<h2>Rock Music Photos</h2>
<!-- TODO: Add link to Rock Music photos -->
<p>See the best Rock Music photos in our Gallery.</p>
<a target="_blank" href="<https://images.pexels.com/photos/811838/pexels-photo-811838.jpeg>"><img width="320" height="240" src="<https://images.pexels.com/photos/811838/pexels-photo-811838.jpeg>" alt="A guy playing electric guitar"></a>
</section>
<section>
<h2>Rock Music lists</h2>
<h3>Things Rockers love:</h3>
</section>
Paso 13
Después del <h3> con el texto "Things Rockers love:" , agrega un tag <ul> , que anidará una lista con viñetas o unordered list . Utilizaremos el tag <li> list item para crear cada elemento en la lista.
Hagamos esta lista para mostrar tres cosas que les encantan a los rockeros:
<h2>Rock Music lists</h2>
<h3>Things Rockers love:</h3>
<ul>
<li>🎸 Electric Guitars</li>
<li>🥁 Drums</li>
<li>🍻 Beer</li>
</ul>
Paso 14
Después de esta lista, agreguemos una imagen más para ilustrar uno de los elementos de la lista.
Este es el src de la imagen: https://images.pexels.com/photos/5537954/pexels-photo-5537954.jpeg
Como alt escribiremos: "A glass of beer" . En el width ”320”, y para que la imagen mantenga las proporciones automáticamente podemos atribuirle un height “auto” .
<img width="320" height= "auto" src="<https://images.pexels.com/photos/5537954/pexels-photo-5537954.jpeg>" alt="A glass of beer">
Paso 15
El tag <figure> nos permitirá asociar la imagen con un pie de imagen que vamos a anidar en el tag <figcaption>.
Agreguemos entonces a la imagen el pie "Rockers love beer"
<figure>
<img width="320" height= "auto" src="<https://images.pexels.com/photos/5537954/pexels-photo-5537954.jpeg>" alt="A glass of beer">
<figcaption>Rockers love beer.</figcaption>
</figure>
Paso 16
Vamos a enfatizar la palabra love en el <figcaption> envolviéndola en un tag de énfasis <em> :
<figcaption>Rockers <em>love</em> beer.</figcaption>
Paso 17
Después del <figure> agreguemos un <h3> con el texto "Top 3 things Rockers hate":
<h3>Top 3 things Rockers hate:</h3>
Paso 18
El código para una lista ordenada u ordered list <ol> es similar a una lista desordenada, pero los elementos van a estar numerados.
Después del último elemento <h3> del segundo elemento <section> , agreguemos la lista de estas Top 3 de cosas que los rockeros odian, "🎹 Keyboards, 💼 Regular Jobs, ☀ Sunday Mornings".
<h3>Top 3 things Rockers hate:</h3>
<ol>
<li>🎹 Keyboards</li>
<li>💼 Regular Jobs</li>
<li>☀ Sunday Mornings</li>
</ol>
Paso 19
Después de esta lista ordenada agreguemos un nuevo <figure> para englobar otra <img> con su correspondientes atributos y su <figcaption> . Para enfatizar la palabra hate vamos a anidarla en un tag <strong> para que se vea en bold o negrita.
Este es el link de la imagen: https://images.pexels.com/photos/3771050/pexels-photo-3771050.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1
<figure>
<img width="320" height= "auto" src="<https://images.pexels.com/photos/3771050/pexels-photo-3771050.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1>" alt="A guy with headache">
<figcaption>Rockers <strong>hate</strong> Sunday mornings.</figcaption>
</figure>
Con esto cerramos esta sección, no te olvides de que esté el tag de cierre </section> .
Paso 20
Vamos a agregar una tercer <section> . Su título será un <h2> con el texto "Rock Music Form"
<section>
<h2>Rock Music Form</h2>
</section>
Paso 21
Vamos a crear un formulario para recolectar información que nos van a dar los usuarios de nuestro sitio. Para esto vamos a usar el tag <form> . Vale aclarar que por ahora este formulario solo es una maqueta, no va a enviarnos la información sin agregar otro código JavaScript o PHP que podemos aprender más adelante.
<h2>Rock Music Form</h2>
<form> Aquí irá nuestro formulario</form>
Paso 22
El tag <input> nos permite varias formas de recopilar datos de un formulario web. Al igual que los elementos <img> , los elementos <input> no necesitan etiquetas de cierre.
Agreguemos un elemento <input> en el <form> .
<h2>Rock Music Form</h2>
<form>
<input>
</form>
Paso 23
Existen varios tipos de <input> que podemos asignar con el atributo type como por ejemplo de password, text, radio, checkbox, etc. Ya los iremos conociendo a medida que los vayamos utilizando.
Los botones radio nos sirven para preguntas del tipo multiple choice .
En este caso crearemos un <input> del tipo radio para seleccionar entre 3 opciones de subgéneros de rock que escribiremos después del <input>: "Rock'n Roll", "Heavy Metal", "Punk Rock":
<h2>Rock Music Form</h2>
<form>
<input type="radio"> Rock'n Roll
<input type="radio"> Heavy Metal
<input type="radio"> Punk Rock
</form>
Paso 24
Para que se pueda acceder o enviar los datos de un formulario desde o hacia una base de datos (territorio que exploraremos más adelante), debemos darle a los campos del formularios un atributo name y asignarles un valor para representar los datos que se envían.
En este caso el name de esta parte del formulario será "rock-subgenre" :
<h2>Rock Music Form</h2>
<form>
<input type="radio" name="rock-subgenre"> Rock'n Roll
<input type="radio" name="rock-subgenre"> Heavy Metal
<input type="radio" name="rock-subgenre"> Punk Rock
</form>
Paso 25
Los elementos <label> se utilizan para ayudar a asociar el texto de un elemento <input> con el elemento <input> en sí (especialmente para tecnologías de asistencia como lectores de pantalla). En nuestro ejemplo, <label><input type="radio"> Rock'n Roll</label> hará que al hacer clic en la palabra "Rock’n Roll" también se seleccione el botón de opción correspondiente.
Anidemos entoces los <input> dentro de sus correspondientes <label> :
<h2>Rock Music Form</h2>
<form>
<label><input type="radio" name="rock-subgenre"> Rock'n Roll</label>
<label><input type="radio" name="rock-subgenre"> Heavy Metal</label>
<label><input type="radio" name="rock-subgenre"> Punk Rock</label>
</form>
Paso 26
El atributo id se utiliza para identificar elementos HTML específicos. El valor o value de cada id debe ser único respecto de todos los demás valores id de la página.
Agreguemos los id con el valor de cada subgénero al botón de radio. Aclaración: cuando los elementos tienen múltiples atributos, el orden de los atributos no importa:
<h2>Rock Music Form</h2>
<form>
<label><input id="rocknroll" type="radio" name="rock-subgenre"> Rock'n Roll</label>
<label><input id="heavymetal" type="radio" name="rock-subgenre"> Heavy Metal</label>
<label><input id="punkrock" type="radio" name="rock-subgenre">Punk Rock</label>
</form>
Paso 27
Para organizar la información del formulario correctamente vamos a agregarle el atributo value , estableciendo el atributo value con el mismo valor que su atributo id .
Si bien el atributo value es opcional, se recomienda incluirlo en cualquier botón de opción de la página:
<h2>Rock Music Form</h2>
<form>
<label><input id="rocknroll" type="radio" name="rock-subgenre" value="rocknroll"> Rock'n Roll</label>
<label><input id="heavymetal" type="radio" name="rock-subgenre" value="heavymetal"> Heavy Metal</label>
<label><input id="punkrock" type="radio" name="rock-subgenre" value="punkrock">Punk Rock</label>
</form>
Paso 28
El tag <fieldset> se utiliza para agrupar inputs y labels relacionadas en un formulario web. Los elementos <fieldset> son elementos a nivel de bloque, lo que significa que aparecen en una nueva línea.
A continuación anidaremos las diferentes opciones del formulario de rock-subgenre dentro de un elemento <fieldset>:
<h2>Rock Music Form</h2>
<form>
<fieldset>
<label><input id="rocknroll" type="radio" name="rock-subgenre" value="rocknroll"> Rock'n Roll</label>
<label><input id="heavymetal" type="radio" name="rock-subgenre" value="heavymetal"> Heavy Metal</label>
<label><input id="punkrock" type="radio" name="rock-subgenre" value="punkrock">Punk Rock</label>
</fieldset>
</form>
Paso 29
El tag <legend> actúa como título del contenido del <fieldset> . Les brinda a los usuarios contexto sobre lo que deben ingresar en esa parte del formulario.
Agreguemos un tag <legend> con el texto "What Rock Subgenre is your band?" encima de ambos inputs:
<h2>Rock Music Form</h2>
<form>
<fieldset>
<legend>What Rock Subgenre is your band?</legend>
<label><input id="rocknroll" type="radio" name="rock-subgenre" value="rocknroll"> Rock'n Roll</label>
<label><input id="heavymetal" type="radio" name="rock-subgenre" value="heavymetal"> Heavy Metal</label>
<label><input id="punkrock" type="radio" name="rock-subgenre" value="punkrock">Punk Rock</label>
</fieldset>
</form>
Paso 30
A continuación, agregaremos algunos tags de inputs de una nueva parte del formulario, así que agregamo otro <fieldset> debajo del que acabamos de completar.
A este nuevo <fieldset> le asignaremos el siguiente <legend> "What's your band's personality?".
Los formularios suelen utilizar casillas del tipo checkbox para preguntas que pueden tener más de una respuesta. A esta nueva parte del formulario, le vamos a agregar 3 <input> con sus atributos type="checkbox" con las siguientes opciones: Aggressive, Psychedelic, Depressive . A cada input le asignaremos sus correspondientes id y value. Para identificar la parte del formulario a la que pertenecen les daremos a los 3 el name="personality". Si bien no notarás esto en el navegador, hacerlo facilita que un servidor procese tu formulario web, especialmente cuando hay varias casillas de verificación:
<fieldset>
<legend>What's your band's personality?</legend>
<input id="aggressive" type="checkbox" name="personality" value="aggressive"> <label>Aggressive</label>
<input id="psychedelic" type="checkbox" name="personality" value="psychedelic"> <label>Psychedelic</label>
<input id="depressive" type="checkbox" name="personality" value="depressive"> <label>Depressive</label>
</fieldset>
Paso 31
Aquí aplicaremos otra forma de asociar el texto de un input con el input correspondiente, que es anidar el texto dentro de un tag label y agregarle el atributo for con el mismo valor que el id del <input> :
<fieldset>
<legend>What's your band's personality?</legend>
<input id="aggressive" type="checkbox" name="personality" value="aggressive"><label for="aggressive">Aggressive</label>
<input id="psychedelic" type="checkbox" name="personality" value="psychedelic"> <label for="psychedelic">Psychedelic</label>
<input id="depressive" type="checkbox" name="personality" value="depressive"> <label for="depressive">Depressive</label>
</fieldset>
Paso 32
Para marcar un checkbox o un radio input seleccionado de forma predeterminada, tenemos que agregarle el atributo checkbox. No es necesario establecer un valor para este atributo, simplemente agregamos la palabra checked al elemento <input> , con espacio entre este y otros atributos.
Hagamos que el primer botón de checkbox y la primera casilla del radio input estén seleccionados de forma predeterminada:
<fieldset>
<legend>What Rock Subgenre is your band?</legend>
<label><input id="rocknroll" type="radio" name="rock-subgenre" value="rocknroll" checked> Rock'n Roll</label>
<label><input id="heavymetal" type="radio" name="rock-subgenre" value="heavymetal"> Heavy Metal</label>
<label><input id="punkrock" type="radio" name="rock-subgenre" value="punkrock">Punk Rock</label>
</fieldset>
<fieldset>
<legend>What's your band's personality?</legend>
<input id="aggressive" type="checkbox" name="personality" value="aggressive" checked> <label for="aggressive">Aggressive</label>
<input id="psychedelic" type="checkbox" name="personality" value="psychedelic"> <label for="psychedelic">Psychedelic</label>
<input id="depressive" type="checkbox" name="personality" value="depressive"> <label for="depressive">Depressive</label>
</fieldset>
Paso 33
Vamos a sumar ahora un <input> del tipo text para ingresar el nombre de la banda al formulario. Este tipo de <input> se utiliza para crear un campo de entrada de texto en una página web. Permite a los usuarios ingresar texto, como nombres, direcciones de correo electrónico, comentarios u otra información de texto en un formulario web. Es un self closing tag, por ende no va a tener un tag de cierre:
<input type="text">
Paso 34
Vamos a darle mayor información a los usuarios sobre la información a ingresar en este text input con atributo placeholder .
El texto de placeholder se utiliza para dar a las personas una pista sobre qué tipo de información ingresar en un input. En nuestro ejemplo ejemplo será “Your band’s name”.
Para evitar que un usuario envíe su formulario cuando falta completar información importante, podemos agregar el atributo required al "input".
Por último para organizar la información vamos a asignarle también su name :
<input type="text" name="bandsname" placeholder="Your band's name" required>
Paso 35
Vamos a utilizar el tag <button> para crear un botón clickeable. Nuestro botón tendrá el texto “Sumbmit” debajo del último input del formulario . El comportamiento predeterminado del botón al hacer clic sería enviar la información del formulario a la ubicación especificada en el atributo action del formulario.
El atributo action indica dónde se deben enviar los datos del formulario. Por ejemplo, <form action="/submit-url"></form> le dice al navegador que los datos del formulario deben enviarse a la ruta /submit-url.
En nuestro caso al ser un sitio web estático para fines didácticos no tenemos un action determinado, pero es importante tenerlo en cuenta para cuando trabajemos con sitios que realmente tienen una base de datos en la que recibir la información que nos envían los usuarios.
Aunque hayamos agregado su botón debajo del text input, aparecen uno al lado del otro en la página. Esto se debe a que tanto los elementos input como los button son elementos en línea, que no aparecen en líneas nuevas.
El botón que agregó enviará el formulario de forma predeterminada. Sin embargo, confiar en el comportamiento predeterminado puede causar confusión. Agregue el atributo type con el valor submit al botón para que quede claro que es un botón de envío:
<button type="submit">Submit</button>
Paso 36
Ahora cerramos la <section> del formulario con su tag de cierre </section> , la parte principal con su tag de cierre </main> y vamos a agregar una sección de pie de página a nuestro sitio web.
Después del </main> , agregaremos un <footer> y dentro del mismo anidaremos un párrafo <p> con el texto: “Made by Modern Clix - All rights reserved - modernclixdev.blogspot.com” .
<footer>
<p>
Made by Modern Clix - All rights reserved - modernclixdev.blogspot.com
</p>
</footer>
Paso 37
Transformemos el texto modernclixdev.blogspot.com en un link anidándolo en un tag <a> y en el atributo href seteamos la dirección del sitio web “https://modernclixdev.blogspot.com/”
<footer>
<p>
Made by Modern Clix - All rights reserved - <a href="<https://modernclixdev.blogspot.com/>">modernclixdev.blogspot.com</a>
</p>
</footer>
Paso 38
Todo lo que hemos agregado hasta ahora está dentro del cuerpo de la página, <body> . Todos los contenidos que deben mostrarse en la página van dentro del <body></body> . Pero también hay información importante que va dentro del tag <head> .
Por ejemplo el tag <title> determina la barra de título en la pestaña de la página en el navegador.
Agreguemos un tag <head> sobre el <body> y un <title> dentro del head usando el siguiente texto:
“Rock Music Site”:
<head>
<title>Rock Music Site</title>
</head>
Paso 39
Todo el contenido de las páginas web tiene que estar anidado dentro de un <html> . Todos los demás elementos deben ser descendientes de este elemento <html> .
Agreguemos el atributo lang con el valor en a la etiqueta <html> de apertura para especificar que el idioma de la página es inglés:
<html lang="en">
Paso 40
Todas las páginas deben comenzar con <!DOCTYPE html>. Esta línea se conoce como declaración y garantiza que el navegador intente cumplir con las especificaciones de toda la industria.
Agreguemos esta declaración como la primera línea del código.
Paso 41
El elemento <meta> dentro del <head> de un documento HTML se utiliza para proporcionar metadatos o información sobre el documento HTML. Estos metadatos no son visibles en la página web, pero son importantes para los motores de búsqueda, los navegadores y otros agentes que procesan el documento HTML. Algunos de los atributos más comunes utilizados en el elemento <meta> incluyen:
-
charset: Define la codificación de caracteres utilizada en el documento, como UTF-8 o ISO-8859-1. Ayuda a los navegadores a interpretar correctamente los caracteres especiales, por ejemplo en el caso de charset="UTF-8" nos permite que el navegador reconozca la letrañy las vocales con acentos comoá.
<meta charset="UTF-8">
-
viewport: Se utiliza en páginas web diseñadas para dispositivos móviles y define cómo se debe mostrar y escalar la página en dispositivos móviles.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
En nuestro ejemplo, indiquemos al navegador que sea compatible con varios lenguajes con el charset= "UTF-8" y que se visualice correctamente en dispositivos de distintos tamaños de pantalla con name="viewport" content="width=device-width, initial-scale=1.0” .
Así quedaría nuestro head:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rock Music Site</title>
</head>
Comentarios
Publicar un comentario