Tarea parte 1

HTML5 utiliza diferentes etiquetas para insertar elementos a una página web, como imágenes, enlaces, videos, listas, etc.

Estos son los diferentes tipos de etiquetas y sus diferentes funciones:

Etiquetas de estructura básica

Etiquetas que definen la estructura del HTML, como el tipo de documento, cabeza, cuerpo y metadatos de la pagina

<!DOCTYPE>

informa al navegador qué versión de HTML se usó para escribir el documento

<html>

Elemento raíz de un documento HTML

<head>

Cabeza de un documento HTML, contiene información sobre el documento, como el título, los enlaces, los estilos y los scripts:

<title>

Titulo del documento HTML, el cual sale en la barra del navegador.

<base>

URL base para todos los enlaces relativos de un documento HTML.

<link>

Relación entre el documento actual y un recurso externo, como una hoja de estilos, un icono o una fuente

<meta>

Aporta información sobre el documento como el autor, la descripción, las palabras clave, el juego de caracteres o la vista de compatibilidad.

<body>

Define el cuerpo de un documento HTML, que es el contenido de la página

Etiquetas de estructura de sección

Definen las secciones de un documento HTML

<h1> - <h6>

Diferentes tipos de encabezado, cada uno representa diferente nivel de importancia, h1 siendo el titulo, h2 siendo el subtitulo, h3 siendo el subtitulo del subtitulo y asi sucesivamente:

h1

h2

h3

h4

h5

h6

<hgroup>

Es un grupo de encabezamiento, que tiene varios niveles de encabezados relacionados. su estructura sería:

<h1> Titulo </h1>
<h2> Subtitulo </h2>

</hgroup>

<address>

Aporta información de contacto del desarrollador, como el nombre, dirección, teléfono, correo, etc

<div>

Sirve para crear secciones o agrupar contenidos:

Ejemplo de div y span

Esto es un párrafo dentro de un div

<iframe>

Permite incrustrar otra página HTML en la página actual, como por ejemplo un enlace a un mapa:

Etiquetas de estructura de grupo

Definen los grupos de elementos de un documento HTML, como las listas, las figuras, los detalles y los diálogos

<ul>

Crea una "Unordered List", que significa lista sin organización

<ol>

Crea una "Ordered List", que significa lista organizada. Las listas pueden ser organizadas numérica y alfabéticamente

<li>

Elemento en una lista:

<ul>

Elemento 1
Elemento 2
Elemento 3

<ol>

Elemento 1
Elemento 2
Elemento 3

<dl>, <dt> y <dd>

<dl>: Representa una lista de descripciones
<dt>: Especifica el término en una descripción o lista de definiciones
<dd>: Detalles de la definición

Razas de gatos

Gato tricolor: Un gato con color negro, café y blanco. La mayoría son hembras.
Gato esmoquin: Un gato de color blanco y negro.
Gato bengala: Un gato con un patrón particular como el de un guepardo

<figure>

Una imagen, una ilustración, un diagrama, un fragmento de código, o un esquema al que se hace referencia en el texto principal, pero que se puede mover a otra página o a un apéndice sin que afecte al flujo principal.

<figcaption>

Subtítulo o leyenda asociado al contenido del elemento figure

<details>

Widget de revelación a través del cual el usuario puede obtener información adicional:

<summary>

Especifica una legenda para un elemento <details>.

Summary con informacion

<dialog>

Una caja de diálogo u otro componente interactivo, como inspector o ventana.

Etiquetas de texto

Definen el texto de un documento HTML, como los párrafos, los saltos de línea, las citas, los énfasis y las marcas

<p>

Los parrafos del documento HTML, son los que se han usado para describir las diferentes etiquetas.

<br>

Un salto de linea
en el texto.

<pre>

Representa texto preformateado que que se muestra en una fuente fija.

      body{
         color:  red;
      }
      a   {
        color:green;
      }

<blockquote>

Crea citas en bloque, marca las citas a otros autores o documentos.

Nota.

<q>

Indica que el texto adjunto es una cita corta en línea.

Esto es una cita corta de imdb: I'm sorry, Dave. I'm afraid I can't do that.

<cite>

Marca una referencia a una fuente, o el autor de un texto citado.

Galileo dijo: "... y sin embargo, se mueve."

<abbr>

Representa una abreviación o acrónimo.

Esto es un documento HTML

<dfn>

Marca el término que se quiere definir.

El HTML es un lenguaje de marcado para hipertextos.

<code>

Marca el código de un programa.


      #include main() { for(;;) { printf ("Hello World!\n"); } }

<kbd>

Marca el texto que debe introducir el usuario.

Si está conforme escriba sí. Si no, pulse esc

<b>

Cambia el texto a negrita.

<strong>

Marca énfasis en una parte importante del texto.

<i>

Cambia el texto a cursiva.

<em>

Enfatiza el tono de un texto.

<mark>

Resalta una parte del texto.

<small>

Hace el tamaño del texto más pequeño.

<del>

Marca partes de un texto o documento que han sido ~~suprimidas o~~ sustituidas.

<ins>

Marca partes de un texto o documento que han sido añadidas.

<sub>

Marca un _subindice en el texto.

<sup>

Marca un ^superindice en el texto.

<time>

Define un periodo específico en el tiempo.

Hoy es 4 de febrero

<data>

Vincula un contenido dado con una traducción legible por una máquina.

Productos

Ketchup
Mayonesa
Jamon

<span>

Aplica estilo al texto o agrupar elementos en línea.

Ejemplo de div y span

Esto es un párrafo dentro de un div, y esto un span dentro de un párrafo.

Here's how you can add an image:

To learn more HTML/CSS, check out these tutorials!