Material para estudiantes en HTML

El lenguaje HTML es la base de una página web. En esta unidad, veremos cómo crear una estructura sólida y significativa para una página web.

Conclusiones principales

  • Los estudiantes comprenden la estructura del archivo HTML.
  • Los estudiantes saben cómo usar etiquetas comunes para crear una página web.

¿Qué es HTML?

HTML es la abreviatura de HyperText Markup Language (lenguaje de marcado de hipertexto). Es el código que usamos para hacer lo siguiente:

  • crear documentos que se almacenan en la World Wide Web y se muestran en un navegador
  • proporcionar una estructura básica para nuestra página web, es decir, el esqueleto de la página web
  • Garantizar la carga adecuada de texto e imágenes para que nuestro navegador los muestre

¿Cuándo usamos HTML?

Todas las páginas web que ves en la World Wide Web están escritas con código HTML. Botones, imágenes, formularios, secciones de texto: todos estos son elementos que se crean con HTML.

Si pensamos en nuestra página web como un cuerpo humano, el HTML es la estructura ósea. Podemos agregar piel y ropa al cuerpo con CSS, pero solo una vez que tengamos esa estructura esquelética.

HTML en acción

Los elementos son la base de HTML. Los elementos se crean con etiquetas.

La mayoría de los elementos tienen una etiqueta de apertura y una etiqueta de cierre:

<!-- opening tag -->
<p>

<!-- closing tag -->
</p>

El contenido (texto o incluso otros elementos HTML) que desees ver en la página web se puede colocar entre estas etiquetas, como si anidaras las capas de un sándwich.

<p>The content that you write here will be seen on the web page</p>

<section>
  <p>This text is inside a paragraph within a section.</p>
</section>

Algunos contenidos HTML se crean con etiquetas de cierre automático que no necesitan una etiqueta de cierre adicional:

<img />
<link />

Esta única etiqueta es suficiente, ya que el trabajo de este elemento es mantener un lugar en tu documento. A diferencia de la mayoría de los otros elementos HTML, no es posible anidar otros elementos o información dentro de estos elementos de cierre automático.

Partes de un elemento HTML

Ejemplo de HTML

Este código se mostraría en un navegador y se vería como la siguiente imagen.

Este código…

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>HTML Example</title>
</head>
<body>
  <h1>My Day In The Garden</h1>
  <section>
    <h2>Flora</h2>
    <p>I spent the morning drawing some of the daffodils that
    are inbloom.</p>
    <p>I picked a few tulips to put in a vase in the dining
    room.</p>
  </section>
  <section>
    <h2>Fauna</h2>
    <p>Today I spotted that hummingbird again, buzzing around
    the newly blooming tree.</p>
    <img
    src="https://media.gettyimages.com/photos/magentathroated-woodstar-feeding-from-flowers-picture-id853369596"
    alt="hummingbird"/>
  </section>
</body>

… hace que esta página web

Referencia de HTML

Encuadre automático

Contexto y propósito

HTML significa Hyper Text Markup Language (lenguaje de marcado de hipertexto). Es una forma de dar significado estructural al texto. Permite que las computadoras y los programadores determinen fácilmente el propósito de un fragmento de texto.

Piensa en HTML como el esqueleto de una página web: proporciona la estructura y el contenido, mientras que JavaScript y CSS proporcionan la interactividad y el diseño.

Objetivos de aprendizaje

Los estudiantes podrán hacer lo siguiente:

  • crear un archivo HTML y abrirlo en su editor y navegador
  • configurar un archivo HTML con la estructura adecuada
  • Enumerar y usar algunas etiquetas comunes para agregar estructura y contenido a su sitio web

Comenzar

Enmarcado y propósito de la sección

  • El código HTML se escribe dentro de archivos con una extensión .html.
  • Puedes darle a tus archivos HTML el nombre que quieras. Sin embargo, index.html es el nombre más común que se usa para la página de destino, a menos que el desarrollador tenga un motivo para configurar el servidor de otra manera.
# creating an html file on the command line
touch index.html
 
# opening your html file in your browser
open index.html

Desafíos breves

  1. Crea 3 archivos HTML adicionales con los nombres que quieras.
  2. Abre uno de los archivos en tu editor de texto y navegador.

Estructura de una página HTML

Enmarcado y propósito de la sección

Un documento HTML siempre debe comenzar con la misma estructura:

  • La etiqueta DOCTYPE es especial y no se cierra. También es la única etiqueta que puede tener valores no alfanuméricos (letras o números).
  • El <head> contiene información sobre tu sitio web, pero no el contenido real que se mostrará en la página.
  • El <body> contiene todo el contenido de tu página que realmente se mostrará en la pantalla.
  • Las etiquetas que usarás para crear la estructura de tu página deben colocarse entre las etiquetas <body>.
  • Entre las etiquetas de apertura y cierre, insertamos el texto o el "contenido" del elemento. El resultado final se vería así: <example-tag>Content Goes in here</example-tag>. Las etiquetas también se pueden colocar dentro de otras etiquetas.
  • Ten en cuenta que, cuando coloques una etiqueta dentro de otra etiqueta, debes agregar una sangría a la nueva etiqueta para mostrar que es un elemento secundario de su etiqueta principal.

Vocabulario

  • Elementos: Son elementos (como imágenes, párrafos y encabezados) creados con código HTML.
  • Etiquetas: Son fragmentos de código que indican dónde comienzan y terminan ciertos elementos.
  • child: Son los elementos que se encuentran DENTRO de otros elementos.
  • Principal: Son los elementos que CONTIENEN otros elementos.

Ejemplos de HTML

Nota: El siguiente es solo un ejemplo de referencia. No es necesario que lo comprendas todo de inmediato, pero es bueno ver cómo podría verse un código HTML bien formateado.

<!-- Standard tag setup of an HTML document  -->
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my
    interests.</p>
  </section>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>
 
<!-- Nested elements  -->
<section>
  <p>I am the text that will show up on your website.</p>
</section>
<!-- The <section> is the parent element -->
<!-- The <p> is the child element -->

Desafíos breves

  1. Abre uno de los archivos que creaste y agrega la estructura básica de la etiqueta HTML.
  2. Configura el cuerpo HTML para mostrar tu árbol genealógico (o el de otra persona). Usa una etiqueta section para contener un grupo familiar. Usa una etiqueta p para contener a un miembro de la familia. Las familias son complicadas, pero un ejemplo podría ser el siguiente:
<section>Jetson Family
  <div>George and Jane
    <p>Judy</p>
    <p>Elroy</p>
  </div>
  <p>Rosie the robot</p>
  <p>Astro the dog</p>
</section>

<!-- In this example, Judy and Elroy are the children of Jane and George. -->

Etiquetas comunes

Enmarcado y propósito de la sección

En general, no creamos nuestros propios tipos de elementos. En su lugar, hay un conjunto de elementos predefinidos con funcionalidad ya asociada.

Consulta la referencia de HTML para ver un desglose de los ejemplos de bloques de código

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <br>
  <img
  src="https://media.gettyimages.com/photos/portrait-of-kitten-against-colored-background-picture-id903869076"
  alt="kitten with blue background">
  <hr>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my interests.</p>
    <h3>My favorite websites</h3>
      <ul>
        <li><a href="www.google.com">Google</a></li>
      </ul>
    <h3>My favorite books</h3>
      <section>
        <h4>Non-Fiction</h4>
        <ol>
          <li>Eloquent Javascript</li>
        </ol>
      </section>
      <section>
        <h4>Fiction</h4>
        <ol>
          <li>Hitchhiker's Guide to the Galaxy</li>
        </ol>
      </section>
  </section>
  <hr>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>

Desafíos breves

  1. Revisa todo el contenido anterior para que refleje TUS intereses.
  2. En uno de los otros archivos HTML en blanco que creaste al comienzo de la lección, simula que estás preparando un artículo de noticias con título, encabezados y subtítulos (¿no se te ocurre contenido? Escribe sobre un día en el que estuviste de viaje. Piensa en los viajes cortos que hiciste, los lugares que visitaste y la comida que comiste.
  3. Usa las etiquetas pertinentes y agrega contenido para que aparezca tu artículo de noticias en tu sitio web.
  4. Verifica que tu contenido se muestre en el navegador.
  5. AMPLIACIÓN: Crea un formulario que alguien pueda completar para enviarte un comentario sobre tu artículo. Si bien aún no funcionará (no lo conectamos a JavaScript), crear este formulario en HTML puede mostrarnos el primer paso para crear un formulario que funcione.

Contexto

HTML es el lenguaje del contenido en la World Wide Web.

Usarás la línea de comandos para navegar a tus archivos HTML y abrirlos. Tus archivos HTML se aumentarán con estilos CSS y un comportamiento escrito con secuencias de comandos de JavaScript que se componen de varias funciones. Los archivos HTML también serán plantillas que usará Google App Engine y se completarán desde una base de datos.

HTML en acción

Comienza a usar HTML

El código HTML se escribe dentro de archivos con una extensión .html.

Cómo ver tu página

Para obtener una vista previa de un archivo HTML en una Mac, en la línea de comandos, navega a la carpeta con tu página HTML y escribe open filename, reemplazando "filename" por el nombre de tu archivo HTML.

Sintaxis general

<tag>
  Content
</tag>

Los elementos están anidados

Los elementos HTML se pueden colocar dentro de otros elementos:

 <parent>
    <child>
      This content is inside of the child tag, which is inside of
      the parent tag. Keep an eye on indentation to see which is
      the parent and which is the child!
    </child>
  </parent>

Estructura de una página HTML

Todas las páginas web tienen la misma estructura básica. El aspecto resultante será el siguiente:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>
  • El <head> contiene información sobre tu sitio web, pero no el contenido real que se mostrará en la página (piensa en él como el "cerebro" de tu página web).
  • El <body> contiene todo el contenido de tu página que realmente se mostrará en la pantalla.

Elementos comunes

Usa estos elementos comunes dentro de las etiquetas <body> y </body> para agregar contenido a una página.

Párrafo

Para crear un párrafo, usa las etiquetas de apertura y cierre p:

<p>
  This is a paragraph about how great polar bears are. Aren't they just the best?
</p>

Comentario

Usa comentarios para que tu código sea más fácil de leer sin afectar el HTML final renderizado.

<!-- This is a comment. It lives in the code as a note to yourself or
  to other developers, but is hidden when the HTML is rendered in the
  browser. -->

Encabezados

<!-- Different levels of headings. Use these for structuring
your page. <h1> is most important heading while <h6> is the
least important heading. -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

<div> genérico

<div> The DIV tag exists to make "dividers" to keep your page
organized. Group other similar or related elements inside these.</div>

Listas

Las listas de elementos de lista, <li>, se incluyen en una etiqueta de lista sin ordenar, <ul>, o en una etiqueta de lista ordenada, <ol>.

<!-- An unordered list - this will default to a bulleted list. -->
<ul>
  <li>first list item</li>
  <li>second list item</li>
</ul>
 
<!-- An ordered list - this will default to a numbered list. -->
<ol>
  <li>first list item</li>
  <li>second list item</li>
</ol>

Imagen

La etiqueta <img> requiere que se especifique la dirección de la imagen con el atributo src, y el atributo opcional alt se usa para la accesibilidad, incluidos los lectores de pantalla.

<!-- Image hosted elsewhere on the web -->
<img
 src="https://some.hostingsite.com/portrait-of-kitten-in-blue"
 alt="kitten with blue background">

<!-- Image hosted on your own site -->
<img src="img/kitten-blue-background.jpg" alt="Kitten in a donut">

En el caso de un hipervínculo, la etiqueta <a> requiere que se especifique la dirección del destino del hipervínculo con el atributo href.

<!-- External link  -->
<a href="https://www.google.com"></a>

<!-- Local link -->
<a href="footer.html"></a>

Regla horizontal

<!-- This self-closing tag creates a line across your web page. -->
<hr>

Receso

<!-- This self-closing tag creates a line break between elements. -->
<br>

Formulario

Se usa un <form> para recopilar información de un usuario. Para que un <form> funcione, debe enviar los datos que recopila a algún lugar para que se procesen o administren. Por lo tanto, <form> a menudo requiere atributos adicionales:

  • action: Es el destino de los datos del formulario cuando se envía.
  • method: Indica si los datos se deben procesar con un tipo de solicitud GET o POST.
<!-- a form that will send data to process.php via POST request -->
<form action="/process.php" method="post">

</form>

Entrada

<input> es el elemento que usa un <form> para recopilar información.

Un elemento <input> también suele tener un atributo name que las bases de datos usan para identificar el campo al que pertenecen los datos enviados.

<form>
    <!-- a text box with the helper text "Full Name" -->
    <input type="text" name="fullName" placeholder="Full Name">
</form>

El elemento <input> es muy versátil: si se especifica el atributo type, se puede renderizar como un campo de texto, un selector de fecha de estilo de calendario, un botón de opción, un menú desplegable y mucho más. Puedes consultar documentación externa para ver una lista más completa.

Sugerencias

  • Inspecciona el código de las páginas web para ver qué etiquetas usaron otros desarrolladores para agregar elementos a una página web y conocer las etiquetas HTML disponibles.
  • Si no encuentras lo que quieres agregar, consulta la documentación para desarrolladores. Estas son algunas listas de todos los elementos HTML posibles https://www.w3schools.com/Tags/, https://developer.mozilla.org/en-US/docs/Web/HTML/Element, http://html-css-js.com/html/tags/
  • Cuando escribas código HTML, para los elementos que necesitan una etiqueta de apertura y una de cierre, es mejor abrir y cerrar la etiqueta primero antes de agregar contenido entre ellas. De esta manera, no te quedarán etiquetas pendientes.
  • Para ver mejor la naturaleza anidada de los elementos HTML en tu código, aplica sangría a los elementos que están dentro de otros elementos. Esto te ayudará a reconocer rápidamente la estructura de tu contenido HTML.
  • Usa muchos comentarios. Esto te ayudará a solucionar problemas en tu propio código y a otras personas cuando les pidas que lo revisen.
  • Los recursos en la Web, como html5boilerplate.com, pueden ayudarte a comenzar a escribir código HTML rápidamente.

Resumen de prácticas recomendadas

  • La información sobre una página web se incluye en el <head> de un documento HTML: título, metadatos, vínculos a estilos, etcétera.
  • La información de una página web se incluye en el <body> de un documento HTML.
  • Los desarrolladores pueden usar muchos elementos para crear el contenido de un documento HTML, incluidos los siguientes: <p>, <h1>-<h6>, <div>, <li>, <img>, <a>, <hr>, <br>, <!-- --> y muchos más.
  • Algunos elementos requieren una etiqueta de apertura y una etiqueta de cierre: <p></p>.
  • Otros elementos se cierran por sí mismos, por lo que solo requieren una etiqueta de apertura: <img>.
  • Las etiquetas pueden incluir atributos (src, alt, id, etc.) que proporcionan más información sobre cómo debe comportarse un elemento: <img src="filename.png" alt="description">.
  • Los comentarios, <!-- -->, proporcionan notas a los desarrolladores que son útiles para comprender qué hacen las secciones de una página web.
  • Usa las herramientas para desarrolladores integradas en tu navegador para inspeccionar el código HTML de las páginas web y examinar cómo se creó la página.

Pregunta 1

¿Cuál de los siguientes elementos es un elemento secundario? (ignora los elementos body/html para los fines de este ejercicio)

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>
  1. h1
  2. p
  3. a
  4. h1 y p

Pregunta 2

En un documento HTML, __ va en el elemento <head> y __ va en el elemento <body>.

  1. estructura, metadatos
  2. metadatos, estructura
  3. Encabezados y contenido más pequeño
  4. El encabezado del sitio, el contenido principal del sitio

Pregunta 3

¿Cuáles de las siguientes opciones no son buenas razones para aplicar sangría a los elementos anidados?

  1. La sangría facilita ver qué elementos están contenidos en otros elementos.
  2. La sangría facilita la lectura de la estructura de la página web.
  3. La sangría facilita a los bots y a los motores de búsqueda la lectura de la estructura de la página web.
  4. La sangría facilita la identificación de elementos hermanos

Pregunta 4

¿Cuál de las siguientes opciones es un atributo del elemento HTML?

<div class="sidebar">Sidebar goes here!</div>
  1. div
  2. class
  3. barra lateral
  4. Aquí va la barra lateral.

Pregunta 5

¿Cuántos atributos tiene el siguiente elemento HTML?

<input type="text" placeholder="username" name="username" />
  1. 0
  2. 1
  3. 2
  4. 3

Pregunta 6

En el siguiente fragmento de código HTML que demuestra una relación, ¿qué elemento es un elemento principal?

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>
  1. <p>
  2. <b>
  3. <i>

Pregunta 7

¿Cuántos de los elementos del siguiente fragmento de código HTML son secundarios de un elemento principal?

(No cuentes los elementos de ajuste <body> o <html>).

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>
  1. 1
  2. 2
  3. 3
  4. 4

Pregunta 8

Aunque algunos navegadores renderizarán correctamente el siguiente fragmento de código HTML, ¿qué tiene de malo?

<img src=puppies.png width=400 />
  1. No tiene una etiqueta de cierre.
  2. Debe haber comillas alrededor de los valores de los atributos
  3. Si proporcionas el atributo width, también debes incluir el atributo height.
  4. Falta un atributo obligatorio

Pregunta 1

¿Cuál de los siguientes elementos es un elemento secundario? (ignora los elementos body/html para los fines de este ejercicio)

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>

El elemento a es un elemento secundario porque está contenido dentro de otro elemento.

Pregunta 2

En un documento HTML, __ va en el elemento <head> y __ va en el elemento <body>.

Los metadatos van en el elemento <head> y la estructura va en el elemento <body>. Nada del elemento <head> será visible en la página web.

Pregunta 3

¿Cuáles de las siguientes opciones no son buenas razones para aplicar sangría a los elementos anidados?

La sangría no facilita que los bots o los motores de búsqueda lean la estructura de la página web. Cuando un bot lee un sitio web, puede leer el código HTML incluso si estuviera todo en una sola línea.

Pregunta 4

¿Cuál de las siguientes opciones es un atributo del elemento HTML?

<div class="sidebar">Sidebar goes here!</div>

class es el atributo, los atributos van dentro de un elemento HTML y, por lo general, tienen un valor (aunque no es obligatorio).

Pregunta 5

¿Cuántos atributos tiene el siguiente elemento HTML?

<input type="text" placeholder="username" name="username" />

El elemento input anterior tiene 3 atributos: type, placeholder y name.

Pregunta 6

En el siguiente fragmento de código HTML que demuestra una relación, ¿qué elemento es un elemento principal?

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>

<p> es un elemento principal porque contiene otros elementos.

Pregunta 7

¿Cuántos de los elementos del siguiente fragmento de código HTML son secundarios de un elemento principal?

(No cuentes los elementos de ajuste <body> o <html>).

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>

Hay 4 elementos secundarios en el fragmento (básicamente, cualquier elemento que tenga un elemento principal arriba, por lo que todo, excepto el elemento <div>): <h1>, <p>, <i> y <a>.

Pregunta 8

Aunque algunos navegadores renderizarán correctamente el siguiente fragmento de código HTML, ¿qué tiene de malo?

<img src=puppies.png width=400 />

Los valores de los atributos deben estar entre comillas. <img /> es una etiqueta de cierre automático y no tiene ningún atributo obligatorio. Está bien tener width sin height y viceversa.