Cómo hacer una hamburguesa en HTML: un tutorial para principiantes

¿Sabes que los estadounidenses consumen 13 mil millones de hamburguesas al año, lo suficiente como para dar 32 vueltas a la tierra!

Para mantener este espíritu de hamburguesas, aprendamos HTML y CSS haciendo una hamburguesa.

Primero necesitamos enumerar los componentes de la hamburguesa:

  • The Top Bun
  • Hoja de lechuga verde
  • Tomate
  • Queso
  • Pattie
  • Hoja de lechuga verde
  • El bollo inferior

Tenemos 7 componentes en esta hamburguesa. El primer problema al hacer esta hamburguesa en HTML es que HTML no comprende estos componentes; HTML tiene sus propios componentes, estos se llaman elementos. Uno de esos elementos es "div". El nombre "div" significa división, una pequeña división de la pantalla.

En HTML, los elementos se definen escribiendo su nombre de etiqueta dentro de corchetes angulares. Por ejemplo:

definirá un elemento "div".

Cree un archivo llamado "burger.html". Siéntase libre de usar el editor de su elección (recomiendo VS Code). Recuerde guardar el archivo con la extensión ".html". Una vez guardado, si hace doble clic en el archivo, se abrirá en su navegador web.

No mostrará nada todavía.

Mira, cada restaurante tiene diferentes tamaños de componentes dentro de su Burger, ¿verdad? Todavía no hemos descrito ningún tamaño para el elemento div en nuestro HTML, por lo tanto, mostrará un cuadro con una altura de 0px, por eso no podemos verlo.

Vamos a darle al elemento div algo de altura, ancho y color usando lo que se llama "atributo de estilo" en HTML. La altura de cada componente de nuestra hamburguesa será de 10 px. Lo escribiremos como:

\
. Simple no es así?

Para escribir más de un estilo, lo separamos con un punto y coma, así:

. Continúe y actualice su archivo burger.html con este código, y ábralo en el navegador.

Se muestra nuestro primer componente de hamburguesa; hagamos 7 más con diferentes colores:

La primera versión de nuestro HTML Burger está lista:

No se ve tan delicioso, ¿verdad?

Hagamos que los cuadros superior e inferior se vean redondeados. Podemos hacer eso usando la propiedad "border-radius" con estilo. Cada esquina del elemento div tiene una propiedad de "radio de borde" que podemos modificar.

Agregamos un radio de 80 píxeles a la esquina superior derecha y superior izquierda del Bollo superior, y un radio de 20 píxeles a la esquina inferior derecha e inferior izquierda del Bollo inferior.

Nuestra HTML Burger está empezando a verse bien:

Hagamos que nuestra hamburguesa se vea mejor agregando radio de borde a todos los componentes de la hamburguesa; pero antes de eso, necesitamos organizar nuestro código, porque las propiedades dentro de style = "..." se están volviendo más grandes.

En HTML podemos usar un para separar todos los estilos de los elementos.

Piénselo de esta manera: no lleva todos sus ingresos en efectivo, sino que los guarda en un banco. Del mismo modo, no ponemos todos los estilos dentro del elemento en sí, sino dentro de : es nuestro banco de estilos.

Además, ¿cómo sabe el banco qué dinero es suyo y qué dinero pertenece a otras personas? Por tu identidad. Bank sabe que del total de 3000, 1000 pertenecen a Tony Stark, 1000 pertenecen a Bruce Banner y 1000 a Steve Rogers. El banco sabe quién posee cuánto por su nombre.

De la misma manera, debemos dar nombres a nuestros elementos para que los estilos que colocamos dentro de sepan qué estilo es para cada elemento. Hacemos esto dando a los elementos un "id":

Hemos agregado identificadores únicos a cada elemento para que podamos identificarlos. Ahora pongamos los estilos en una etiqueta separada:

Nuestro código parece largo pero mucho más limpio. Todos los estilos que estábamos escribiendo dentro de style = "..." ahora están envueltos con “{“ y “}” y precedidos por la identificación de ese elemento, que a su vez está precedido por un símbolo “#”, todos ubicados dentro de < estilo> etiqueta.

Así es como escribes estilos. Esto es CSS mis amigos, ¿eso parece difícil? :-)

Notará que tenemos una propiedad que es igual para todos los elementos: ancho (200 px). La altura de la mayoría de los elementos también es la misma: 10px, excepto el moño superior, la empanada y el moño inferior.

¿Qué pasaría si pudiéramos escribir las propiedades comunes una vez y aplicarlas a todos los elementos? Para esto, podemos clasificar sus elementos en una clase y escribir estilo en esa clase.

En nuestro ejemplo, podemos clasificar todos los componentes de la hamburguesa como: "componente de hamburguesa". Asigne una clase a un elemento con el atributo "clase" como este:

El código anterior significa que el div tiene una identificación única "top-bun" y pertenece a la clase "burger-component". Para escribir estilo para una clase, use "." En lugar de "#". El estilo dentro de # top-bun {...} se aplicará al elemento que tiene id "top-bun" y los estilos dentro de .burger-component {...} se aplicarán a todos los elementos que tengan clase " componente de hamburguesa ".

Actualicemos nuestro código:

Eso redujo muchas líneas de código repetido. En la parte superior, verá el estilo que escribí para la clase "burger-component" y también agregué class = "burger-component" a todos los elementos div. Observe que mantuve los estilos únicos dentro de los identificadores y mantuve los estilos comunes dentro de .burger-component {...}.

Recuerde, en CSS, "." Significa clase, y "#" significa id.

Ahora que hemos organizado nuestro código, agreguemos un poco de radio de borde a todos los elementos para hacer que nuestra hamburguesa sea más hermosa:

Mucho mejor :)

Hasta ahora creamos cuadros y jugamos con algunos de sus estilos (ancho, alto, color de fondo, radio de borde). No hemos agregado ningún texto todavía. Agreguemos un poco de texto.

Para poner algo de contenido dentro de un div, lo escribimos entre su etiqueta de apertura:

y su etiqueta de cierre:
. Avancemos y creemos un nuevo div con nuestro contenido:

  Hamburguesa HTML

Coloque este código en la parte inferior de su archivo burger.html y ábralo en su navegador.

Nuestro texto se muestra, pero no está en el centro. Para alinear el texto al centro, usamos la propiedad "text-align". Démosle una identificación a nuestro div para que podamos referirlo dentro de . A continuación se muestra nuestro código final con la propiedad de alineación de texto establecida en el centro:

Y aquí está nuestra salida:

Esto es delicioso, ¿no?

Ahora que nuestra deliciosa HTML Burger está lista, tenemos algunos trámites que atender. Como cualquier otro lenguaje de programación, HTML ha pasado por muchas versiones desde su año de nacimiento: 1990. La versión actual de HTML es HTML5.

¿Cómo sabría el navegador qué versión de HTML está utilizando para codificar su página? Para decirle al navegador que está utilizando HTML5, debe incluir en la parte superior de la página. Para versiones anteriores de HTML, esta línea superior solía ser diferente, pero no es necesario que aprenda eso, porque ya no la usamos.

Además, en versiones HTML anteriores, solíamos encapsular todo el documento dentro de la etiqueta , y todo el archivo estaba dividido en dos secciones principales: Head, dentro de , y Body, dentro de . Esto no es necesario en HTML5, pero aún lo hacemos por razones de compatibilidad. Actualicemos nuestro código con Doctype, , y :

Notarás que el elemento de estilo entró dentro de "cabeza" y todos los elementos div entraron dentro de "cuerpo". Cargamos nuestros estilos y otra metainformación dentro de la sección de encabezado, y todos los elementos que se mostrarán en el navegador se mantienen dentro del cuerpo.

Estamos definiendo nuestros estilos en una sección separada, ¿qué pasaría si pudiéramos ponerlo en un archivo separado? Nuestro código se verá mucho más limpio de esa manera. A medida que avanza a proyectos más grandes, comenzará a agregar más y más elementos y estilos a su documento, su código se volverá desordenado muy pronto.

Entonces, vamos a escribir nuestros estilos en un archivo separado y vincularlo a nuestro archivo html. En HTML podemos vincular a otro archivo usando el elemento . Cree un nuevo archivo llamado "styles.css" y pegue todo el contenido dentro de en él, y enlácelo desde Burger.html usando el elemento .

style.css:

burger.html:

Cosas nuevas sobre :

  • rel: Relación. Qué relación tiene el archivo vinculado con el documento. El archivo con la extensión .css se llama hojas de estilo, y por lo tanto mantenemos rel = "stylesheet" (Por cierto, la forma completa de CSS es la hoja de estilo en cascada).
  • tipo: Tipo del archivo vinculado; es "text / css" para un archivo CSS.
  • href: Referencia de hipertexto. Ubicación del archivo vinculado.
  • no hay al final del elemento de enlace. Algunos elementos HTML no requieren cierre, estos se denominan etiquetas de cierre automático.

Si tan solo conseguir una novia fuera tan fácil: D

No, eso no va a suceder, avancemos.

Tenemos en nuestras manos HTML y CSS prácticos, ahora vamos a familiarizarnos con algunas terminologías.

Partes de elementos HTML:

  • Nombre de etiqueta: div, enlace, estilo, etc. Estos son nombres de etiqueta.
  • Atributos: todas las propiedades de un elemento que establecemos con el signo "=" se denominan atributos del elemento. Por ejemplo: id, clase. rel, tipo, href.
  • Etiqueta de cierre:
, , : son etiquetas de cierre del elemento. Recuerde que algunos elementos como no necesitan una etiqueta de cierre y se denominan etiquetas de cierre automático.

Partes de estilos:

  • Selector: ¿Recuerdas que usamos "." Para aplicar estilo a una clase y "#" para aplicar estilo a una identificación? La parte después de "." O "#" y antes de "{" se llama selector. Los selectores definen el estilo que se aplicará a qué elemento.
  • Propiedades: altura, ancho, color de fondo, radio del borde, todos estos se llaman propiedades.

Genial, ya conoces los conceptos básicos de HTML y CSS. Necesitamos cubrir una última cosa antes de cerrar.

¿Notó lo que su "pestaña" lee en el navegador cuando abre su archivo html en el navegador?

Mostrará la ruta del archivo, así:

Podemos cambiar esto usando la etiqueta "title". Simplemente escriba HTML Burger dentro de la sección y vuelva a cargar la página para ver la diferencia.

Con esto, hemos terminado por el día mis amigos.

¡Felicitaciones, ahora eres un fabricante de hamburguesas HTML!

Un resumen rápido de lo que aprendimos:

Conceptos:

  • Estructura de un documento HTML.
  • Cómo escribir elementos en HTML (
    )
  • Concepto si "id" y "clase" de un elemento
  • Cómo dar id y clase a un elemento
  • Cómo escribir estilos dentro del elemento usando style = "..." (esto se llama estilo en línea, evite esto tanto como pueda)
  • Cómo escribir estilos de un elemento dentro de (esto se llama estilo incrustado)
  • Cómo escribir estilos en un archivo separado y vincularlo en HTML usando (esto se llama hoja de estilo vinculada)
  • ¿Qué es el nombre de etiqueta, atributo y etiqueta de cierre?
  • Selectores de clase (.) E id (#) en CSS

Cubrimos las siguientes etiquetas HTML: