Introducción a HTML

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to Lesson

Podcast

Play an AI-generated podcast conversation about this lesson
Download our mobile app to listen on the go
Get App

Questions and Answers

¿Cuál de las siguientes afirmaciones describe con mayor precisión la función principal del lenguaje HTML?

  • Controlar la interactividad y el comportamiento dinámico de una página web.
  • Gestionar la comunicación entre el cliente (navegador) y el servidor web.
  • Describir la estructura y el contenido de una página web utilizando etiquetas. (correct)
  • Definir el estilo visual de una página web, incluyendo colores y fuentes.

¿Cuál es la declaración correcta para indicar el tipo de documento HTML5 en la parte superior de un archivo HTML?

  • `` (correct)
  • ``
  • ``
  • ``

¿Qué etiqueta HTML se utiliza para definir el encabezado más importante en una página web?

  • ``
  • ``
  • `` (correct)
  • ``

Si deseas insertar un párrafo en tu página HTML, ¿qué etiqueta utilizarías?

<p>`` (C)</p> Signup and view all the answers

¿Cuál es el atributo HTML esencial para crear un enlace a otra página web utilizando la etiqueta ``?

<p>href (C)</p> Signup and view all the answers

Estás insertando una imagen en tu página web. ¿Qué atributo es obligatorio dentro de la etiqueta `` para asegurar que la imagen se muestre?

<p>src (B)</p> Signup and view all the answers

¿Qué etiqueta HTML se utiliza para crear un botón interactivo en una página web?

<p>`` (B)</p> Signup and view all the answers

¿Cuál de las siguientes etiquetas HTML se utiliza para crear una lista no ordenada (con viñetas)?

<p>`` (A)</p> Signup and view all the answers

En HTML, ¿cómo indicas que un elemento no tiene contenido y, por lo tanto, no necesita una etiqueta de cierre?

<p>Añadiendo una barra diagonal al final de la etiqueta de apertura, como ``. (B)</p> Signup and view all the answers

Si quieres añadir información adicional sobre un elemento HTML, como un identificador único o un estilo en línea, ¿dónde debes especificar estos detalles?

<p>En la etiqueta de inicio del elemento como atributos. (D)</p> Signup and view all the answers

¿Qué atributo se utiliza para añadir estilos directamente a un elemento HTML, como cambiar el color del texto o el tamaño de la fuente?

<p>style (B)</p> Signup and view all the answers

Estás creando una página web y quieres incluir comentarios en tu código HTML. ¿Cómo aseguras que estos comentarios no sean visibles en el navegador?

<p>Encerrando el comentario entre ``. (A)</p> Signup and view all the answers

Si deseas aplicar el mismo estilo a múltiples elementos HTML en tu página web, ¿qué atributo usarías para referenciar una clase CSS?

<p>class (D)</p> Signup and view all the answers

¿Cuál es la principal diferencia entre los atributos id y class en HTML?

<p><code>id</code> debe ser único en toda la página, mientras que <code>class</code> puede usarse en múltiples elementos. (C)</p> Signup and view all the answers

Estás utilizando el atributo style en un elemento HTML. ¿Cómo defines el color del texto a rojo?

<p>style='color: red;' (D)</p> Signup and view all the answers

¿Cuál es la función principal de la etiqueta en HTML?

<p>Proporcionar metadatos sobre el documento HTML, como la descripción, palabras clave, etc. (C)</p> Signup and view all the answers

Dentro de la etiqueta , ¿qué metaetiqueta se utiliza para definir palabras clave relevantes para los motores de búsqueda?

<p>`` (B)</p> Signup and view all the answers

Estás desarrollando una página web que debe verse bien en dispositivos móviles. ¿Qué metaetiqueta es esencial para configurar la ventana gráfica (viewport) para que se adapte al ancho del dispositivo?

<p>`` (A)</p> Signup and view all the answers

En HTML, ¿cómo representarías el símbolo de 'mayor que' (>) para que el navegador lo muestre correctamente, ya que este carácter está reservado?

<p>&gt; (A)</p> Signup and view all the answers

Flashcards

¿Qué es HTML?

Lenguaje de marcado estándar para crear páginas web, describiendo su estructura mediante elementos.

¿Función de los elementos HTML?

Indican a los navegadores cómo mostrar el contenido y están representados por etiquetas.

La declaración <!DOCTYPE html>

Es la primera declaración en un documento HTML y define el tipo de documento para que el navegador lo interprete correctamente.

La etiqueta <h1>

Define el encabezado más importante en HTML.

Signup and view all the flashcards

La etiqueta <p>

Se utiliza para definir párrafos de texto en HTML.

Signup and view all the flashcards

La etiqueta <a>

Define un hipervínculo a otra página o recurso web; el atributo href especifica la dirección del enlace.

Signup and view all the flashcards

La etiqueta <img>

Inserta una imagen en la página; el atributo src indica la URL de la imagen y alt proporciona texto alternativo.

Signup and view all the flashcards

La etiqueta <button>

Crea un botón interactivo en la página web.

Signup and view all the flashcards

Las etiquetas <ul>, <ol>, <dl>

Define listas no ordenadas (con viñetas), ordenadas (numéricas) y de definición.

Signup and view all the flashcards

¿Qué son los atributos HTML?

Información adicional sobre los elementos HTML, especificados en la etiqueta de inicio, generalmente en pares nombre-valor.

Signup and view all the flashcards

La etiqueta <b>

Proporciona texto en negrita.

Signup and view all the flashcards

¿Qué son los comentarios HTML?

Permiten insertar comentarios en el código HTML que no se muestran en el navegador.

Signup and view all the flashcards

El atributo class

Especifica uno o más nombres de clase para un elemento, usado por CSS y JavaScript para seleccionar elementos específicos.

Signup and view all the flashcards

El atributo id

Especifica un ID único para un elemento HTML, usado por CSS y JavaScript para acceder a un elemento específico.

Signup and view all the flashcards

El atributo style

Permite añadir estilos directamente a un elemento HTML, como color, fuente y tamaño.

Signup and view all the flashcards

Las metaetiquetas HTML

Proporcionan metadatos sobre el documento HTML, como la descripción, palabras clave y autor.

Signup and view all the flashcards

La ventana gráfica adaptable

Ajusta el área visible de la página web al tamaño de la pantalla del dispositivo.

Signup and view all the flashcards

Las entidades HTML

Se utilizan para mostrar caracteres reservados en HTML, como < o >.

Signup and view all the flashcards

Study Notes

  • HTML son las siglas de HyperText Markup Language (lenguaje de marcado de hipertexto).
  • HTML es el lenguaje de marcado estándar para crear páginas web.
  • HTML describe la estructura de una página web.
  • HTML consta de una serie de elementos.
  • Los elementos HTML indican a los navegadores cómo mostrar el contenido.
  • Los elementos HTML están representados por etiquetas.
  • Las etiquetas HTML etiquetan fragmentos de contenido como "encabezado", "párrafo", "tabla", etc.
  • Los navegadores no muestran las etiquetas HTML, sino que las utilizan para interpretar el contenido de la página.

Estructura de un documento HTML

  • Todos los documentos HTML deben comenzar con una declaración <!DOCTYPE html>.
  • El documento HTML comienza con <html> y termina con </html>.
  • La parte visible del documento HTML está entre <body> y </body>.

La declaración

  • La declaración <!DOCTYPE> representa el tipo de documento y ayuda a los navegadores a mostrar las páginas web correctamente.
  • Debe aparecer solo una vez, en la parte superior de la página (antes de cualquier etiqueta HTML).
  • La declaración <!DOCTYPE> no distingue entre mayúsculas y minúsculas.
  • Para HTML5, la declaración <!DOCTYPE> es: <!DOCTYPE html>.

Encabezados HTML

  • Los encabezados HTML se definen con las etiquetas <h1> a <h6>.
  • <h1> define el encabezado más importante.
  • <h6> define el encabezado menos importante.

Párrafos HTML

  • Los párrafos HTML se definen con la etiqueta <p>.

Enlaces HTML

  • Los enlaces HTML se definen con la etiqueta <a>.

  • El atributo href especifica la URL del enlace.

  • Un enlace visitado se subraya y es de color púrpura.

  • Un enlace activo se subraya y es de color rojo.

Imágenes HTML

  • Las imágenes HTML se definen con la etiqueta <img>.
  • La etiqueta <img> está vacía, solo contiene atributos, y no tiene etiqueta de cierre.
  • El atributo src especifica la URL (dirección web) de la imagen.
  • El atributo alt especifica un texto alternativo para la imagen, si la imagen no se puede mostrar.
  • Los atributos width y height especifican el ancho y la altura de la imagen (en píxeles).

Botones HTML

  • Los botones HTML se definen con la etiqueta <button>.

Listas HTML

  • HTML admite listas ordenadas, no ordenadas y de definición.
  • La etiqueta <ul> define una lista no ordenada (de viñetas).
  • La etiqueta <ol> define una lista ordenada (numérica).
  • La etiqueta <li> define un elemento de la lista.
  • La etiqueta <dl> define una lista de definición.
  • La etiqueta <dt> define un término (nombre).
  • La etiqueta <dd> describe cada término.

Elementos HTML

  • Un elemento HTML suele constar de una etiqueta de inicio y una etiqueta de cierre, con el contenido insertado entre ellas.
  • La etiqueta HTML es el nombre del elemento, entre paréntesis angulares.
  • La etiqueta de inicio marca el inicio del elemento.
  • La etiqueta de cierre marca el final del elemento.
  • El contenido del elemento es todo lo que hay entre la etiqueta de inicio y la etiqueta de cierre.
  • Algunas etiquetas HTML no tienen contenido (como la etiqueta <br>). Estas etiquetas se denominan elementos vacíos.
  • Los elementos vacíos no tienen etiqueta de cierre.

Anidamiento de elementos HTML

  • Los elementos HTML pueden estar anidados (los elementos pueden contener otros elementos).
  • Todos los documentos HTML constan de elementos HTML anidados.

Atributos HTML

  • Los atributos HTML proporcionan información adicional sobre los elementos HTML.
  • Los atributos siempre se especifican en la etiqueta de inicio.
  • Los atributos suelen venir en pares nombre-valor como: nombre = "valor".
  • El atributo href especifica la URL de la página a la que va el enlace.
  • El atributo src especifica la ruta a la imagen que se va a mostrar.
  • Los atributos width y height especifican el ancho y la altura de la imagen.
  • El atributo alt especifica un texto alternativo para una imagen, si la imagen no se puede mostrar.
  • El atributo style se utiliza para agregar estilos a un elemento, como color, fuente, tamaño, etc.
  • Los atributos se deben escribir en minúsculas.

Formato HTML

  • Algunos elementos HTML están diseñados para dar formato al texto.
  • <b> - Texto en negrita.
  • <strong> - Texto importante.
  • <i> - Texto en cursiva.
  • <em> - Texto enfatizado.
  • <mark> - Texto marcado.
  • <small> - Texto pequeño.
  • <del> - Texto eliminado.
  • <ins> - Texto insertado.
  • <sub> - Texto subíndice.
  • <sup> - Texto superíndice.

Comentarios HTML

  • Los comentarios HTML no se muestran en el navegador.
  • Puedes utilizarlos para comentar tu código HTML.
  • Los comentarios HTML comienzan con <!-- y terminan con -->.

Clases HTML

  • El atributo class especifica uno o más nombres de clase para un elemento.
  • Las clases se utilizan para que CSS y JavaScript seleccionen y accedan a elementos específicos.
  • El atributo class puede utilizarse en cualquier elemento HTML.
  • Se puede especificar el mismo nombre de clase para varios elementos HTML.

Id HTML

  • El atributo id especifica un id único para un elemento HTML.
  • El valor del atributo id debe ser único dentro del documento HTML.
  • El atributo id se utiliza para que CSS y JavaScript seleccionen y accedan a un elemento específico.
  • El atributo id puede utilizarse en cualquier elemento HTML.

Estilos HTML - CSS

  • El atributo style se utiliza para agregar estilos a un elemento, como color, fuente, tamaño y más.
  • La forma de agregar estilos es con el atributo style.

Metaetiquetas HTML

  • La etiqueta <meta> proporciona metadatos sobre el documento HTML. Los metadatos no se muestran en la página.
  • Los metadatos son utilizados por los navegadores (cómo mostrar el contenido o volver a cargar la página), por los motores de búsqueda (palabras clave) y por otros servicios web.
  • Las etiquetas <meta> siempre van dentro del elemento <head>.
  • Los metadatos suelen utilizarse para especificar la descripción de la página, las palabras clave, el autor, la última modificación y otra información.
  • Definir el conjunto de caracteres: <meta charset="UTF-8">.
  • Definir palabras clave para los motores de búsqueda: <meta name="keywords" content="HTML, CSS, JavaScript">.
  • Definir una descripción de tu página web: <meta name="description" content="Free Web tutorials">.
  • Definir el autor de la página: <meta name="author" content="John Doe">.
  • Establecer la ventana gráfica para que tu sitio web tenga buena pinta en todos los dispositivos: <meta name="viewport" content="width=device-width, initial-scale=1.0">.

Ventana gráfica adaptable

  • La ventana gráfica es el área visible del usuario de una página web.
  • La ventana gráfica varía según el dispositivo; será más pequeña en un teléfono móvil que en una pantalla de ordenador.
  • Debes incluir la siguiente etiqueta <meta> en todas tus páginas web: <meta name="viewport" content="width=device-width, initial-scale=1.0">.
  • Esto establece la ventana gráfica para que coincida con el ancho de pantalla del dispositivo, lo que proporciona una buena experiencia en dispositivos móviles.

Entidades HTML

  • Algunas caracteres están reservados en HTML.
  • Si utilizas los caracteres reservados en tu HTML, el navegador podría malinterpretarlos.
  • Las entidades de caracteres se utilizan para mostrar caracteres reservados en HTML.
  • Una entidad de carácter tiene esta forma: &entity_name; o &#entity_number;.
  • Para mostrar un signo menor que (<) en HTML, debemos usar: &lt; o &#60;.

Símbolos HTML

  • Algunos símbolos no están presentes en el teclado del ordenador.
  • Para agregar tales símbolos a una página HTML, puedes usar el nombre de la entidad HTML o el número de la entidad HTML (una referencia numérica).
  • Para mostrar el símbolo de euro (€) en HTML, debemos usar &euro; o &#8364;.

Conjunto de caracteres HTML

  • Para que se mueststre un documento HTML correctamente, el navegador debe saber qué conjunto de caracteres (codificación de caracteres) se va a utilizar.
  • Si no se especifica, los navegadores utilizarán la configuración automática.
  • Para especificar el conjunto de caracteres, utilice la etiqueta <meta charset = "UTF-8">.

Rutas de archivo URL

  • Una URL (Uniform Resource Locator) puede ser una dirección web o una ruta de archivo.
  • Una ruta de archivo describe la ubicación de un archivo en una estructura de carpetas de un sitio web.
  • Las rutas de archivo se utilizan al vincular a recursos externos, incluidos: Páginas web, Imágenes, Hojas de estilo, JavaScripts.
  • Una ruta absoluta es la URL completa de un archivo vinculado.
  • Una ruta relativa apunta a un archivo en relación con la página actual.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Quiz Team

More Like This

Use Quizgecko on...
Browser
Open
Browser
Browser