You are on page 1of 7

HTML Codificación de caracteres

Para especificar la codificación de caracteres del documento se usa el


HTML (HyperText Markup Language) es un lenguaje de marcado Case ELEMENTOS DE RAÍZ atributo charset=”utf-8”, esto permite que la página pueda manejar la
Insensitive utilizado en la creación de sitios web. Plantilla básica recomendada: visualización de cualquier idioma.
Al iniciar cualquier documento HTML, se utiliza la etiqueta <!doctype
<!DOCTYPE html> html>, la cual define que el documento está bajo el estándar de HTML5. <meta charset="utf-8">
<html>
<head> Por otro lado, la etiqueta <html> … </html> representa la raíz de un Agregando un autor y una descripción
<meta charset=”utf-8”> Muchos elementos <meta …> incluyen atributos name (tipo de elemento
documento HTML. Es el primer elemento del documento, y el resto de
<title>título página</title>
Otra información técnica. elementos descienden de él. que es) y content (tipo de información que contiene). Estos metadatos son
</head> útiles para definir al autor de la página y proporcionar una descripción
<!DOCTYPE html>
<body> concisa de la página (utilizados por los motores de búsqueda).
<html>
Contenido de la página.
<head>...</head> <meta name="author" content="Chris Mills">
</body>
<body>...</body>
</html>
</html> <meta name="description" content="Web with all they
need to know.">
Estableciendo el idioma principal del documento
Se utiliza el atributo lang=” ” a la etiqueta <html>. También se pueden Información relacional
establecer subsecciones en el documento para ser reconocidos en diferentes El elemento <link …> permite agregar información acerca del documento
idiomas. como el ícono de la página, autores, licencias de copyright, hojas de estilo,
tipo de letra, entre otros. El atributo rel=” ” indica el tipo de vínculo
Anidamiento <html lang="en-US"> (author, icon, license, search, stylesheet) y href=” ” indica la dirección del
HTML permite incluir elementos dentro de otros elementos.
<p>Japanese example: <span lang="ja">ご飯が熱い。 vínculo.
<p>Mi gato es <strong>muy</strong> gruñón.</p> </span>.</p
<head>
Categorías de elementos en HTML <link rel="license" href="copyright.html">
CABECERA DEL DOCUMENTO <link rel="search" href="buscar-peliculas.html">
Pueden haber elementos en bloque (forman un bloque visible en la página,

es decir, aparecerá en una nueva línea antes y después de cualquier otro </head>
Contenida por el elemento <head> … </head>, es la parte no mostrada
contenido) y elementos en línea (son aquellos que están contenidos
en el sitio web, que comprende los metadatos de la página como título de la Agregando iconos personalizados a tu sitio
dentro de elementos en bloque como un párrafo, y rodean solo pequeñas
página, autor, descripción, y otra información relevante. Se utiliza la etiqueta <link …> para agregar un ícono (archivo .ico) a la
partes del contenido del documento).
<head> pestaña del navegador.
Elementos vacíos <meta charset="utf-8">
Algunos elementos consisten solo en una etiqueta única, que se utiliza <link rel="icon" href="dirección imagen.ico">
<title>My test page</title>
generalmente para insertar algo en el documento. En HTML5 no es </head> Mejorar aspecto visual agregando estilos con CSS
necesario cerrar etiquetas simples con una barra al final, pero se recomienda Para esto se tienen dos opciones. Se puede utilizar el elemento <link
usar por razones de compatibilidad. Añadiendo un título
Para añadir el título del sitio web (texto que aparece en la pestaña del rel=”stylesheet” href=” ”> para enlazar una hoja de estilo como un
<img src=”ruta de imagen”> navegador), se utiliza la etiqueta <title> … </title>, la cual es obligatoria recurso externo; o también se puede utilizar el elemento <style
<meta charset="utf-8" /> dentro de la cabecera del documento. type=”text/css”> … </style> dentro de la cabecera del documento para
incrustar un bloque de declaraciones de estilo.
Atributos booleanos <head>
Son atributos que pueden ser escritos sin valores, generalmente tienen un <title>Título del sitio web</title> <head>
único valor con el mismo nombre del atributo, el cual se puede omitir. … <title>Título</title>
</head> <link rel="stylesheet" href="estilo.css">
<input type=”text” disabled=”disabled”> </head>
<input type=”text” disabled> URL relativas
El elemento <base href=” ”> … </base> establece la conducta <head>
Espacios en blanco predeterminada para los vínculos dentro del documento HTML. Este
<title>Título</title>
No importa cuantos espacios en blanco se utilicen, el analizador de HTML <style type=”text/css”>
elemento solo se declara únicamente dentro de la cabecera y solo una vez. body {
reduce cada uno a un único espacio. Se utilizan espacios en blanco al escribir color: red;
el código para mayor legibilidad. <head>
background-color: red;
<title>Imágenes de flores</title>
border-color: red;
Inclusión de caracteres especiales en HTML <base href="http://www.imagenes.com/flores/">
}
Los caracteres <, >, “, ‘, & son caracteres especiales, forman parte de la </head>
</style>
sintaxis de HTML. Para incluir en el texto alguno de estos caracteres se debe <body> </head>
utilizar caracteres de referencia (comienzan con & y terminan con ;). <img src="lirio.jpg">
<img src="orquídea.jpg">
Potenciar funcionalidades interactivas con JavaScript
< &lt; “ &quot; & &amp; <img src="loto.jpg"> Para esto se utiliza la etiqueta <script>, la cual se suele colocar justo antes
> &gt; ‘ &apos; </body> de </body>, para asegurarse que todo el contenido HTML se ha leido por
el navegador antes de que intente aplicarle JavaScript.
Comentarios en HTML Metadatos
Los comentarios son invisibles para el usuario, su propósito es permitir Dentro del elemento <meta …> se incluyen los datos que describen otros ...
comentar el código para facilitar su lectura. Para insertar un comentario se datos. <script src="my-js-file.js"></script>
debe envolver en <! … -> </body>

<!esto es un comentario->
3.2. Artículos (Article) </li>
Se usa <article> … </article> para agrupar un bloque de contenido </ul>
PARTES BÁSICAS DEL CUERPO DE UN DOCUMENTO <p>Total cost: $237.89</p>
independiente del sitio web (e.g., entrada de un blog, mensaje de un foro).
</div>
En HTML, dentro del <body> … </body>, se pueden crear distintas
4. Barra lateral (Sidebar)
secciones semánticas de contenido basadas en su funcionalidad, de forma
Se representa con <aside> … </aside>, constituye información CONTENIDO DEL DOCUMENTO
que las tecnologías de ayuda y lectores de pantalla puedan reconocer estos
complementaria, relacionada con el contenido principal de la página (e.g.,
elementos. Títulos y encabezados
glosario, lista de tweets, notas, enlaces).
Para los títulos se utliza <h1> … </h1> (existen seis niveles, en donde <h1>
<aside>
ELEMENTOS SEMÁNTICOS es el de mayor tamaño). En una historia, por ejemplo, <h1> representaría
<nav>
... el título de la historia, <h2> el título de cada capítulo y <h3> las diferentes
1. Encabezado (Header) secciones del capítulo.
</nav>
Suele contener el nombre de la página y un logotipo. Para esto se utiliza </aside>
<header> … </header>. Si este va justo después de <body>, entonces se <h1>Título principal</h1>
convertirá en el encabezado principal del sitio web, pero si va después de 5. Pie de página (Footer) <p>Esto es un párrafo</p>
<article> o <section> entonces, simplemente será el encabezado Es la parte inferior de la página que generalmente contiene la letra pequeña, Si se van a agrupar encabezados consecutivos (e.g., colocar un título y un
particular de cada sección. el copyright o la información de contacto. Para esto, se utiliza <footer> … subtítulo seguidos), se utiliza <hgroup> … </hgroup>.
</footer>.
<header> <hgroup>
<img src="../images/falling-star-logo.png"> <footer> <h1>Título del mensaje uno</h1>
<h1>La estrella fugaz</h1> <address> <h2>Subtítulo del mensaje uno</h2>
<form action="search.php"> Jhonny Doe<br> </hgroup>
<input type="text"> jhonnydoe5468@mypc.com
<input type="submit" value="Buscar"> </address> Se recomienda usar un solo <h1> y no utilizar más de tres niveles por página
</form> <p>Copyright &copy; 1990-2014 J. Doe, todos los (aunque se puede reconstruir la jerarquía en cada sección de la página).
</header> derechos reservados.</p>
</footer> Párrafos
2. Barra de navegación (Navigation bar)
*** Nota: En general, <header> y <footer> se pueden utilizar en Para escribir un bloque de texto se utiliza <p> … </p>.
Es el menú que contiene los enlaces a las principales secciones del sitio web.
Suele estar localizado en la parte superior, debajo del encabezado. Se crea cualquier sección de contenido de la página web. <p>Esto es un párrafo</p>
con la etiqueta <nav> … </nav>.
Cambio de línea en un párrafo
<nav> Para saltar al siguiente renglón dentro de un párrafo, se utiliza <br>. Esto
ELEMENTOS NO SEMÁNTICOS
<ul> sirve para representar series de líneas cortas, como por ejemplo, un poema.
<li><a href="/es/">Inicio</a></li> A veces no encontramos un elemento semántico adecuado para agrupar
<li><a href="/es/tu.html">Tutoriales</a></li> <p>There once was a girl called Nell<br>
<li><a href="/es/re.html">Referencia</a></li> ciertos elementos juntos o englobar cierto contenido. Se puede querer Who loved to write HTML<br>
<li><a href="/es/res.html">Recursos</a></li> agrupar ciertos elementos para referirnos a ellos como una entidad que and her markup didn't read very well.</p>
<li><a href="/es/cont.php">Contáctame</a></li> comparta cierto CSS o JavaScript. Para casos como estos, HTML dispone de
</ul> <div> … </div> y del elemento <span> … </span>. Estos elementos se Oportunidad de quiebre de línea
</nav> deben utilizar con su correspondiente atributo class=” ” para conferirles Se usa <wbr> para indicar al navegador dónde producir un quiebre de línea
su etiqueta correspondiente para ser fácilmente referenciados. Se utiliza el en caso de que sea necesario.
3. Contenido principal (Main content)
Es la parte central de la página, en donde se muestra el contenido de la atributo style=” ” para agregar estilo al interior de la línea. <pre><code>var i = 0, <wbr>a = 10, <wbr>b = 20,
misma. Para esta parte la página se utiliza <main> … </main> (esta Elemento de línea no semántico
<wbr>c = 30, <wbr>radio = 200, <wbr>xCord = 500,
etiqueta solo se puede utilizar una vez por página), junto con varias <wbr>yCord = 1500, <wbr>numeroEjemplo = 5,
Se utiliza <span> … </span> cuando no se nos ocurre el uso de otro <wbr>temperaturaAgua = 100, <wbr>presionAtm =
subdivisiones, representadas por los elementos <section> … </section> elemento semántico de texto en el qué incluir el contenido. Se suelen usar 50;</code></pre>
y <article> … </article>. atributos como title=” ” y lang=” ”.
Cambio en la temática del texto
<main> <p>The King walked drunkenly back <span Se utiliza <hr> para generar una línea horizontal en el documento, la cual
<section> class="editor-note">[Editor's note: At this point
<article> denota un cambio en la temática del texto.
in the play, the lights should be down
... low]</span>.</p> <p>Párrafo.</p>
</article> <hr>
<article> Elemento de bloque no semántico <p>Otro párrafo.</p>
... Se utiliza <div> … </div> cuando no se nos ocurre el uso de otro elemento
</article> Texto con énfasis y en cursiva
</section>
semántico mejor, o si no se desea añadir ningún significado concreto, o solo
para añadir estilo. Se suelen usar atributos como title=” ” y lang=” ”. Para indicar énfasis se utiliza <em> … </em>, mientras que la cursiva se
</main>
indica con <i> … </i>. Sin embargo, el navegador representa ambas
3.1. Secciones (Section) <div class="shopping-cart"> etiquetas con texto en itálica (la diferencia es semántica).
<h2>Shopping cart</h2>
Se usa <section> … </section> para indicar una división genérica, diseñada
<ul> <p>The menu was a sea of exotic words like <i
para contener una parte de un documento temáticamente definido, como <li> lang="uk-latn">vatrushka</i>.</p>
los capítulos dentro de un documento más extenso (e.g., sección de <p><a href=""><strong>Silver
anuncios, sección de últimos artículos publicados, sección de vínculos earrings</strong></a>: $99.95.</p> Texto con importancia y en negrilla
relacionados). <img src="../products/3333-0985/" Para indicar importancia se utiliza <strong> … </strong>, mientras que la
alt="Silver earrings"> negrilla se indica con <b> … </b>, sin embargo, el navegador representa
</li> ambas etiquetas de la misma forma (la diferencia es semántica).
<li>
... <p>This liquid is <strong>highly toxic</strong> —
if you drink it, <strong>you may <dd>Forma de energía radiante que se propaga en <p>Caffeine's chemical formula is
<em>die</em></strong>.</p> línea recta.</dd> C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</
<dt>Arroyo</dt> sub>.</p>
Texto insertado y subrayado <dd>Río pequeño de escaso caudal y
Para indicar un texto insertado, se usa <ins> … </ins>, mientras que el profundidad.</dd> Horarios y fechas
subrayado se indica con <u> … </u>. Sin embargo, el navegador representa </dl> Para marcar fechas se utiliza la etiqueta <time> … </time>.
ambas etiquetas de la misma forma (la diferencia es semántica). Cita del título de una obra <!-- Standard simple date -->
<p>Someday I'll learn how to <u>spel</u> Para citar el título de una obra (libro, artículo científico, pintura, escultura, <time datetime="2016-01-20">20 January 2016</time>
better.</p> canción, película, videojuego, etc.) se utiliza <cite> … </cite>. <!-- Just time, hours and minutes, seconds… -->
Texto sin relevancia y tachado <time datetime="19:30:01.856">19:30:01.856</time>
<p>Cuatro años despuñes, Asimov añadió aún otra
Para indicar un texto sin relevancia, se usa <del> … </del>, mientras que secuela, <cite>Fundación y Tierra</cite> (1986), la <!-- Date and time -->
el texto tachado se indica con <s> … </s>. Se representan ambas etiquetas cual fue seguida por las precuelas <cite>Preludio <time datetime="2016-01-20T19:30">7.30pm, 20
a la Fundación</cite> (1988) y <cite>Hacia la
de la misma forma (la diferencia es semántica). January 2016</time>
Fundación</cite> (1993).</p>
<p>Hola <del>pirobos</del> queridos amigos.</p> Información del autor
Cita de una frase en una línea Se utiliza <address> … </address> para proveer información de contacto
<p><s>$49,99 - Envío gratis!</s></p> Se utiliza <q> … </q> para representar una cita dentro de un párrafo. Los del autor del documento (dirección postal, correo electrónico, número
<p>Ahora $39,99 - Envío gratis!</p> navegadores muestran el contenido de este elemento entre comillas. Asi telefónico, ciudad o país). Esto se suele incluir dentro del <footer>.
mismo, se puede utilizar el atributo cite=” ” con la URL de la fuente de la
Texto remarcado
cita. <address>
Para marcar texto se utiliza <mark> … </mark>. Por ejemplo, cuando se <p>Page written by <a href="../authors/chris-
hace una búsqueda, y la palabra buscada se resalta. <p>Personalmente no creo que <q>...de lo contrario mills/">Chris Mills</a>.</p>
tendré que encontrar otra solución!</q> sea un </address>
<p>Una <mark>estrella</mark> es una esfera de enfoque colaborativo.</p>
plasma masiva y luminosa que se mantiene unida por Citas de un bloque de texto Código de computadora
su propia gravedad. La <mark>estrella</mark> más Se utiliza <code> … </code> para representar el código de HTML.
cercana a la Tierra es el Sol.</p>
Se utiliza <blockquote> … </blockquote> para citar párrafos o listas. Se
puede utilizar el atributo cite=” ” para indicar la URL de la fuente de la cita. <p>Deberías declarar la función así: <code>function
Listas desordenadas El nombre del autor de la cita debe ir por fuera de este elemento. cambiarColor(elemento, evento) { ... }</code>.</p>
Se utiliza <ul> … </ul> para indicar la lista, mientras que cada elemento
dentro de la lista se incluye dentro de <li> … </li>. <blockquote Texto preformateado
cite="http://www.georgerrmartin.com/grrm_book/a-
Para representar un bloque de texto en donde los espacios continuos y los
<ul> game-of-thrones-a-song-of-ice-and-fire-book-
one/"> quiebres de línea sean respetados, tal y como se ven en el editor de texto,
<li>leche</li>
<li>huevos</li> <p>No tenía un destino en mente. Solo quería se utiliza <pre> … </pre>.
<li>pan</li> cabalgar. Siguió el arroyo por un tiempo,
escuchando el goteo del agua congelada sobre las <pre><code>function diHola() {
</ul> console.log('Hola!');
rocas, luego cortó camino a través de los campos
alert('Hola!');
Listas ordenadas hacia el camino del rey.</p>
}</code></pre>
Se utiliza <ol> … </ol>, mientras que cada elemento de la lista se incluye </blockquote>
dentro de <li> … </li>. Se pueden utilizar los atributos: reversed para <p>— Goerge R. R. Martin</p> Nombres de variables
indicar que la lista tiene un orden descendente; start=” ” el cual indica el Comentarios al margen La etiqueta <var> … </var> representa una variable, de una fórmula
valor ordinal del primer ítem en la lista; y type=” ” (1, a, A, i, I) que indica Se usa <small> … </small> para agregar comentarios utilizados en las matemática o un código de computadora, una constante o un parámetro en
el tipo de símbolos a usar en las viñetas. letras pequeñas de las exoneraciones, avisos o restricciones legales, una función.
<ol> declaraciones de derechos de autor o atribuciones. El navegador representa <p>La función genera una variable llamada
<li>A</li> el texto dentro de este elemento con un tamaño de letra menor. <var>temp</var> y la utiliza para intercambiar los
<li>B valores de los parámetros <var>param1</var> y
<ul> <p><small>Al usar este sitio, estás de acuerdo con <var>param2</var>.</p>
<li>B1</li> nuestros "Términos de uso" y nuestra "Política de
<li>B2</li> privacidad".</small></p> Entradas de teclado
</ul> Abreviaciones Se utiliza <kbd> … </kbd>, en donde cada tecla va insertada dentro de
</li>
Se utiliza dentro de <abbr> … </abbr>, una aberviatura o acrónimo, junto esta etiqueta.
</ol>
con el atributo title, el cual proporciona una expansión completa del <p>Select all the text with
El elemento <li> puede tener el atributo value=” ” el cual es un entero término. <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
que indica el valor ordinal del ítem dentro de la lista.
<p>We use <abbr title="Hypertext Markup Salida o reporte de un programa
Listas de descripción Language">HTML</abbr> to structure our web Se utiliza <samp> … </samp>, se suele utilizar dentro de un <pre> para
Tienen como propósito marcar un conjunto de elementos y sus documents.</p> aprovechar las características del texto preformateado.
descripciones asociadas, tales como términos y definiciones, o preguntas y Superíndice y subíndice
respuestas. La lista de descripción se encierra entre <dl> … </dl>, cada <p>Cuando ingresé el comando, la computadora
Se utilizan para marcar fechas, fórmulas químicas y ecuaciones matemáticas. respondió <samp>Error: comando no
término va entre <dt> … </dt>, y cada descripción se encierra entre <dd> Para esto se usan las etiquetas <sup> … </sup> y <sub> … </sub>, encontrado</samp>. Estoy perdido...</p>
… </dd>. respectivamente.
También, el elemento <samp> se puede usar dentro de <kbd>, para indicar
<dl> <p>My birthday is on the 25<sup>th</sup> of May los menús de un programa que el usuario debería acceder.
<dt>Flama</dt> 2001.</p>
<dd>Reflejo o reverberación de la llama.</dd> <p>Para crear un nuevo documento ve a
<dt>Rayo</dt> <kbd><samp>Archivo</samp> →
<samp>Nuevo</samp></kbd>.</p>
Igualmente, <samp> puede estar conteniendo un trozo de texto ingresado Enlace hacia una parte de un documento Para incluir un enlace dentro del archivo index.html del más alto nivel,
previamente por el usuario. Éste último es representado por el elemento Es posible apuntar hacia una parte concreta de un documento HTML. Para apuntando a projects/index.html, se debe bajar hasta el directorio
<kbd>. hacerlo, debemos asignar previamente un atributo id al elemento hacia el projects antes de indicar al archivo al que queremos enlazar.
que queremos apuntar, esto se hace en el encabezado.
<pre><samp>Ingresa tu búsqueda: <p>Visit my <a href="projects/index.html">project
<kbd>balance.txt</kbd> <h2 id=”Mailing_address”>Mailing address</h2> homepage</a>.</p>
Buscando...
No se ha encontrado ningún archivo que coincida con Posteriormente, para hacer referencia a este id concreto, lo añadimos al Enlaces subiendo en el sistema de subdirectorios
tu búsqueda</samp></pre> final de la URL, precedido por un símbolo # Si se quiere incluir un enlace dentro de projects/index.html apuntando a
pdfs/project-brief.pdf, se tendría que subir un nivel en el sistema de
Información para programas <p>Want to write us a letter? Use our <a directorio, para luego bajar dentro del directorio pdfs. Así, para subir un
El elemento <data> … </data> permite proveer una versión de su href="contacts.html#Mailing_address">mailing
nivel se utilizan dos puntos ..
contenido para los programas. Para esto se debe utilizar el atributo value=” address</a>.</p>
”. Por ejemplo, para un producto, su precio y el periodo de garantía, se <p>A link to my <a href="../pdfs/project-
puede utilizar <data value=” ”> para indicar el código de barras, el precio Vínculos hacia descargas
brief.pdf">project brief</a>.</p>
solo en números y la garantía en meses. Si se hace referencia a una descarga, se dispone del atributo download, el Se pueden combinar múltiples instancias, generando URLS más complejas,
<h2>Detalles</h2> cual proporciona un nombre al archivo guardado. como por ejemplo, "../../../complex/path/to/my/file.html".
<p>Producto: <data value="21354860684">TV LED Full
HD</data><br> <a Referencias relativas y absolutas
Precio: <data value="554">$554,00 (USD)</data><br> href=https://download.mozilla.org/?product=firefo Las referencias relativas se usan siempre que estemos haciendo referencia a
Garantía: <data value="24">2 años</data></p> x-39.0-SSL&os=win&lang=en-US download="firefox-39- direcciones dentro de una misma página web. Cuando hagamos referencia a
installer.exe">Download Firefox 39 for Windows</a>
Enlaces a e-mail páginas externas, se utilizan referencias absolutas.
Información desplegable
El elemento <details> … </details> representa un trozo de contenido Es posible crear enlaces que, cuando se pulsen, abran un nuevo correo URL absoluta: Hace referencia a una dirección definida por su ubicación
oculto que puede ser mostrado a pedido por el usuario, y es habitualmente saliente. Esto se consigue con los elementos <a> y mailto:, en su forma absoluta en la web, incluyendo el protocolo y el nombre del dominio. Por
representado por un título, provisto por el elemento <summary> … básica, un enlace mailto: simplemente contiene el email de los destinatarios. ejemplo, http://www.example.com/projects/index.html. La URL
</summary>. El navegador indica el contenido oculto mediante una flecha. Si quitamos href (dejando simplemente “mailto:”), aparecerá una ventana absoluta siempre apunta a la misma dirección.
Además, <details> puede utilizar el atributo open, para que el contenido de nuevo correo saliente en el gestor de correo que no incluirá pre-escrita
del elemento sea inicialmente visible. la dirección del destinatario. URL relativa: Hace referencia a una dirección que depende de la posición
del archivo desde dónde se utiliza. Por ejemplo, si se quiere enlazar desde
<details open> <a href="mailto:nowhere@mozilla.org">Send email to un archivo ubicado en http://www.example.com/projects/index.html
<summary>Título</summary> nowhere</a>
hacia un archivo PDF ubicado en el mismo directorio, la URL es simplemente
<img src=” ”>
<p>Texto</p> Además, se pueden incluir otros atributos como ?cc= (copia), &bcc= (copia el nombre del archivo, por ejemplo: project-brief.pdf. Si el archivo PDF
</details> oculta), &amp;subject= (asunto) y &amp;body= (cuerpo del mensaje). estuviera situado en un subdirectorio dentro de projects llamado pdfs, la
No se usa comillas para el texto, pero si se utiliza %20 para indicar los URL relativa sería: "pdfs/project-brief.pdf"
espacios dentro del texto del asunto y del cuerpo del mensaje.
CREANDO HIPERVÍNCULOS <a
href="mailto:andres@gmail.com?cc=felipe@gmail.com
CONTENIDO INCRUSTRADO
Estos permiten enlazar nuestros documentos a cualquier otro documento o
&bcc=juan@gmail.com&amp;subject=el%20asunto%20del Insertar una imagen
recurso (ficheros HTML, texto, imágenes, audio o video, etc.). Un enlace %20mensaje&amp;body=El%20cuerpo%20del%20mensaje">
básico se crea incluyendo el texto que deseemos convertir en un link dentro Enviar mensaje </a> Se usa la etiqueta <img> con el atributo src=” ” que indica la ruta de la
de un elemento <a> … </a>, dándole un atributo href=” ”, que contendrá imagen, y el atributo alt=” “ que contiene un texto que se muestra en caso
la dirección web hacia dónde apunta el link. URLs y referencias de que la imagen no se pueda visualizar. Como otros atributos se pueden
Las URL definen dónde está situado algo en la red, utilizando las referencias utilizar widht=” ” y height=” ”.
<p> Este es un vínculo hacia <a href=”dirección para encontrar los archivos.
web”>mi página</a> <img src="imagen.jpg" alt=”descripción imagen”
width=”200px” height=”200px”>
<a href="https://www.mozilla.org/en-US/"><img
src="mozilla-image.png" alt="mozilla logo that Imagen con enlace
links to the mozilla homepage"></a> Primero se pone el enlace <a href=”ruta enlace” target=”_blank”> …
Añadir información de soporte al enlace </a> y adentro, la imagen <img src=”ruta imagen” alt=”texto
Se puede añadir a los links, el atributo title=” ”, que proporciona alternativo”>.
información útil sobre el destino, la cual se muestra al pasar el cursor sobre <a href="enlace" target="_blank"> <img
En el ejemplo, dentro del directorio raíz, encontramos el archivo
el vínculo. src="imagen.jpg" alt=”descripción imagen”
index.html, el cual es la página de inicio de la web (observe que pueden width=”200px” height=”200px”> </a>
<p>I'm creating a link to <a haber dos o más index.html alojados en ubicaciones diferentes).
href=https://www.mozilla.org/en-US/ title="The Mapa de imagen
best place to find more information about Mozilla's Enlace en el mismo directorio Es una imagen que contiene adentro distintos hipervínculos. Para esto,
mission and how to contribute">the Mozilla Para incluir un enlace dentro del archivo index.html del nivel más alto, primero se utiliza <map name=” “> … </map> y dentro de esta se
homepage</a>.</p> apuntando al archivo contacts.html, simplemente se especifica el nombre incluye una etiqueta <area> junto con los atributos shape=” ” (rect,
Abrir el enlace en una nueva ventana del archivo al que hace referencia, pues este se encuentra en el mismo circle, poly) que indica el área del hipervínculo, otro atributo coords=” ”
Se utiliza el atributo target=”_blank” para especificar que el vínculo se directorio en donde está el archivo desde donde se quiere llamar. que contiene las coordenadas del área dentro de la imagen, y el atributo
abra en una nueva ventana. <p>Ingesa a <a href="contacts.html">contacts href=” ” con la ruta del hipervínculo. Después de la etiqueta </map> va
page</a>.</p> <img> con los atributos src=” ” y usemap=”# ” el cual indica el nombre
<a href=http://www.hquick.com/
del mapa.
target="_blank">Enlace</a> Enlaces bajando en la estructura de subdirectorios
<map name=”mapa1”>
<area shape=”rect” coords=”16,14,186,40” se hace utilizando <source> junto con el atributo src=” ”. También se que permite realizar exactamente la misma acción pero es compatible con
href=”ruta página”> puede agregar una imagen en caso de que el video no se muestre. todos los navegadores existentes en el mercado.
<area shape=”circle” coords=”30,87,14”
href=”ruta página”> <video width=”400px” height=”200px” controls>
</map> <source src=”video1.mp4” type=”video/mp4”>
<img src=”ruta imagen” usemap=”#mapa1”> <source src=”video1.ogg” type=”video/ogg”> TABLAS DE DATOS
<img=”imagen.jpg” alt=”video no soportado”>
En cuanto a las coordenadas, para un rectángulo se escogen los dos vértices No se soporta video HTML5 Para crear una tabla, primero se utiliza la etiqueta <table> … </table>, la
opuestos, para un círculo se escoge un punto y el radio; y para un polígono </video> cual incluye todas las demás etiquetas. La tabla agrega celdas de izquierda a
se escogen todos los vértices (para ver las coordenadas se puede usar Paint). derecha y de fila en fila. Esta etiqueta puede tener como atributo
<audio controls>
<source src="audio.ogg" type="audio/ogg">
summary=” ”, que permite describir el contenido de la tabla. También, la
Figuras etiqueta <caption> … </caption> agrega un título descriptivo a la tabla.
<source src="audio.mp3" type="audio/mpeg">
Una figura es cualquier unidad de contenido (imágenes, vídeos, párrafos
</audio>
como poemas, citas, código, etc.), independiente del contenido principal y Encabezados
que se puede ubicar en cualquier lugar del documento sin perder sentido. Un encabezado se indica con <th> … </th>. Antes se utilizaba el atributo
Para agregar una figura, primero se utiliza la etiqueta <figure> … </figure>, Agregar subtítulos a los videos scope=” “ (row/col), el cual servía para indicar a qué celdas afectaba un
dentro de la cual se inserta el contenido. También se puede agregar la Se usa la etiqueta <track> … </track> al final, dentro de <video> … encabezado (se podía utilizar con <td> también, pero en HTML5 ya no se
etiqueta <figcaption> … </figcaption> que contiene una breve </video>, con los atributos kind=” ” (puede ser caption o Subtitles), utiliza este atributo).
descripción. label=” ” (etiqueta de los subtítulos), src=” ” (fuente del archivo .vtt) y
<table>
srclang=” ” (idioma del archivo). Se recomienda usar el atributo sandbox <tr>
<figure>
<img src=”imagen.jpg” alt=”decripción imagen”>
para evitar acciones maliciosas de terceros. <th></th>
<figcaption> <th scope="col">Month</th>
<track kind="subtitles" label="Subtítulos en
Esta es la descripción de la imagen. <th scope="col">Savings</th>
español" src="Subtitulo.vtt" srclang="es"></track>
</figcaption> </tr>
</figure> Insertar una página dentro de otra <tr>
<td scope="row">1</td>
<figure> Para esto se utiliza la etiqueta <iframe> … </iframe>, con los atributos <td>January</td>
<iframe src=”ruta video”> src=” ” para indicar la ruta de la página, frameborder=” ” para indicar el <td>$100</td>
<figcaption> ancho del borde, widht=” ” y height=” ” para indicar ancho y alto </tr>
Esta es la descripción del video. respectivamente. <tr>
</figcaption> <td scope="row">2</td>
</figure> <iframe src=”http://templatemonster.com/” <td>February</td>
frameborder=”0” width=”100%” height=”600px” <td>$80</td>
Imagen vectorial sandbox> </iframe> </tr>
Se utiliza la etiqueta <svg> … </svg>. En Adobe Illustrator al guardar una </table>
imagen como .svg se puede copiar el código para agregarlo a la página. YouTube ofrece el código para insertar sus videos en otras páginas utilizando
la etiqueta <iframe>. Filas y celdas
Por otro lado, una fila se representa con <tr> … </tr>, dentro de la cual
<iframe width="560" height="315"
Insertar audio src="https://www.youtube.com/embed/JP_4rOOYJnM?re
se ubican varios encabezados o celdas representadas con <td> … </td>.
Se utiliza la etiqueta <audio> … </audio> junto con el atributo src=” ” l=0" frameborder="0" allow="autoplay; encrypted- <table>
que contiene la ruta del audio. De manera opcional se puede utilizar el media" allowfullscreen></iframe> <caption>Datos de algunas ciudades</caption>
atributo autoplay y el atributo controls. Dentro se incluye un texto que <tr>
Insertar objetos embebidos
se visualiza en caso de no poder correr el audio. <th>Ciudad</th>
La etiqueta <object> … </object> representa contenido externo (imagen, <th>Lengua</th>
<audio src="audio.mp3" type=”audio/mpeg” autoplay documento, plugin, etc.). Se usa principalmente para incluir películas Flash <th>Moneda</th>
controls> dentro de un documento. Además, el elemento <param> … </param> <th>Área</th>
Tu navegador no soporta el audio provee parámetros para los recursos incrustados. </tr>
</audio> <tr>
<object data="../../../flash/light-bulb.swf" <td>Londres</td>
Insertar un video type="application/x-shockwave-flash" width="180" <td>Inglés</td>
Se utiliza la etiqueta <video> … </video> junto con el atributo src=” ” height="350"> <td>GBP</td>
que indica la ruta del video. Otros atributos son: autoplay, si se especifica, <param name="movie" value="../../../flash/light- <td>1,572.00 km<sup>2</sup></td>
el video se reproducirá automáticamente, height=” ” y width=” ”, alto y bulb.swf" /> </tr>
ancho del video, respectivamente, y poster=” “ el cual contiene la ruta de <param name="quality" value="high"/> <tr>
<param name="wmode" value="transparent"/> <td>Washington</td>
una imagen que se mostrará mientras el video comienza a reproducirse, </object> <td>Inglés</td>
type=” ” el cual indica el tipo de video. El atributo controls permite <td>USD</td>
visualizar los controles del video. Otro atributo es muted el cual inicia el También, se puede utilizar la etiqueta <embed> … </embed>, la cual se <td>177.0 km<sup>2</sup></td>
video silenciado, y loop que hace que el video se reproduzca de nuevo al utilizaba frecuentemente para ejecutar películas Flash dentro de un </tr>
terminar. Además, dentro se incluye un texto que se muestra en caso de no documento (además de otros archivos como audio o video). <tr>
visualizarse el video. <td>Moscú</td>
<embed src="../../../flash/light-bulb.swf" <td>Ruso</td>
<video src="videofile.ogg" autoplay type="application/x-shockwave-flash" width="180" <td>RUB</td>
poster="posterimage.jpg" controls> height="350" quality="high" wmode="transparent"> <td>2,511 km<sup>2</sup></td>
No se soporta video HTML5 </tr>
</video> Aunque las etiquetas <video> y <audio> son específicas para dichas </table>
acciones (ver un vídeo o escuchar algún audio), por un tema de
Ofrecer varios formator para audio y video
compatibilidad y comodidad nos encontramos con la etiqueta <embed>,
Debido a que todos los navegadores no aceptan los mismos formatos de
video y audio, es normal incluir alternativas para todos los navegadores. Esto
Tamaño de celdas enctype=”multipart/form-data”), submit (envío, es un botón cuya
Para las etiquetas <th> y <td> se utiliza el atributo rowspan=” ” para etiqueta se indica con el atributo value=” ”), reset (reinicio, es un botón
indicar cuántas filas va a ocupar dicha celda, mientras que, el atributo cuya etiqueta se indica con el atributo value=” ”), button (botón que por
colspan=” “ indica cuántas columnas va a ocupar la celda. defecto, no hace nada, se debe asociar un programa a este).
Agrupación de columnas Etiquetas
Para agrupar columnas semánticamente se usa <colgroup> … Se usa <label> … </label> para indicar una breve descripción asociada a
</colgroup> al comienzo de la tabla, justo después de <caption>, dentro un campo de texto del formulario. Los navegadores pueden enlazar ambos
del cual se indica cada columna con <col>, o se puede usar el atributo span, elementos, de modo que al dar clic sobre la etiqueta, el cursor se redirija
con el número de columnas agrupadas, contando de izquierda a derecha. Se Nota: Para todos los atributos disponibles para dar estilo, se desaconseja hacia el campo de texto. Existen dos formas de enlazar estos elementos:
utilizan para asignar atributos comunes a las columnas. su uso. Es mejor hacerlo con CSS3.
(1) Insertando el elemento <input …> dentro del <label> … </label>.
<table>
<caption>Datos de algunas ciudades</caption> Formularios <p><label>Contraseña: <input type="password"
<colgroup> name="pass"></label></p>
<col>
Se crea utilizando las etiquetas <form> … </form>. El atributo method=”
<col span="2" style=" ... "> ” (get, post), sirve para especificar cómo se van a enviar los datos: get (2) Haciendo que el atributo for=” ” de <label>, coincida con el atributo
</colgroup> limita el envío de datos a 255 caracteres; mientras que post es el más id=” ” de <input> o <textarea> (el id y name pueden tener el mismo
... utilizado. El atributo action=” ”, indica la dirección de la página o programa valor).
</table> que va a procesar la información (e.g., una base de datos hecha con PHP). <p><label for=”pass”>Contraseña: </label>
Además, el atributo target=”_blank” hará que los resultados sean <input type=”password” name=”pass” id=”pass”></p>
Agrupación de filas
Se utiliza <thead> … </thead> para indicar el bloque de filas que describen mostrados en una nueva pestaña. Campo de texto de líneas múltiples
las etiquetas de columna de una tabla, <tbody> … </tbody> representa el <form method="post" action="tratamiento.php"
Se utiliza la etiqueta <textarea> … </textarea>. Así mismo, se debe
bloque de filas que describen los datos concretos de una tabla, y finalmente target=”_blank”> utlizar los atributos name=” ” y id=” ”. En contraste con <input>, el
<tfoot> … </tfoot> representa los bloques de filas que describen los ... elemento <textarea> lleva a su valor inicial como contenido, en lugar de
resúmenes de columna de una tabla. En general, una tabla puede tener un </form> usar el atributo value=” ”.
solo <thead> y <tfoot>, pero varios <tbody>. Se suele escribir el cuerpo Campo de texto de una línea <p><label for="mejora">¿Cómo crees que podría
de la tabla de último. Se utiliza <input …> junto con los atributos type=” ” y name=” ” para mejorar mi página web?</label><br>
saber a qué se refiere el texto introducido (e.g., usuario, contraseña). <textarea name="mejora" id="mejora"></textarea>
<table>
</p>
<caption>Lista de la compra</caption>
<p><input type="text" name="username"></p>
<thead> Se puede cambiar el tamaño de <textarea> utilizando los atributos rows=”
<tr> *** Como este es un elemento en línea, se debe encerrar entre <p> … ” y cols=” ”. Se pueden utilizar los atributos minlength=” ” y
<th>Producto</th>
<th>Cantidad</th>
</p> para saltar de renglón. maxlength=” ” para indicar la cantidad mínima y máxima de caracteres
<th>Precio</th> que el cuadro de texto puede contener. También acepta atributos
- Seleccionar un campo automáticamente
</tr> placeholder=” ” y required.
</thead> Para permitir que el cursor se sitúe sobre un campo de texto en particular
<tfoot> al cargar la página web, se utiliza el atributo autofocus.
<tr> Agrupar campos del formulario
<td colspan="2">Total</td> - Hacer un campo obligatorio Si el formulario tiene muchos campos, se pueden agrupar entre varias
<td>20</td> Se utiliza el atributo required. etiquetas <fieldset>, las cuales pueden contener un título con la etiqueta
</tr> <legend>. El navegador representa esto como un marco que encuadra
</tfoot> - Definir ancho del campo de texto
parte del formulario.
<tbody> Se utiliza el atributo size=” ” (número).
<tr> <fieldset>
<td>Destornillador</td> - Permitir el autocompletado en un campo de texto <legend>Tus datos personales</legend>
<td>1</td> Se utiliza el atributo autocomplete=” ” (on, off). <label for="apellido">¿Cuáles son tus
<td>3</td> apellidos?</label></br>
</tr> - Limitar el número de caracteres en un campo de texto <input type="text" name="apellido"
<tr> Se utiliza el atributo maxlength=” ” (número). id="apellido"></br>
<td>Llave inglesa</td> <label for="nombre">¿Cuál es tu
<td>2</td> - Pre-rellenar el campo con un valor por defecto nombre?</label></br>
<td>5</td> Se utiliza el atributo value=” ”. <input type="text" name="nombre" id="nombre"></br>
</tr> </fieldset>
<tr> - Para dar algún indicio del contenido del campo
<td>Martillo</td> Se utiliza el atributo placeholder=” ”, de modo que al hacer clic dentro Botón de envío y de restaurar
<td>1</td> del campo de texto, la indicación desaparecerá. Se utiliza la etiqueta <input> … </input> con el atributo type=” ”, cuyo
<td>7</td> valor puede ser: “submit” para enviar la información del formulario y
</tr> - Tipo de campo de texto redireccionar a la página especificada en el atributo action=” ”; y “reset”
</tbody> El elemento <input> puede contener el atributo type=” ” el cual puede
</table> el cual restablece el formulario. La etiqueta de los botones se indica con el
tener alguno de estos valores: text (texto, se suele acompañar del atributo atributo value=” ”.
placeholder=” ”), password (contraseña), search (búsqueda), tel
(teléfono), url (url), email (email), date (fecha), month (mes), week <input type="submit" value="Enviar">
(semana), time (hora), datetime-local (fecha-hora), number (número, <input type=”reset” value=”Restaurar”>
acepta los atributos min=” ” y max=” ”), range (rango, se muestra como
un deslizador, acepta los atributos min=” ” y max=” ”), color (color), file
(archivo, el elemento <form> debe tener el atributo
Preguntas con opciones <p>Formato de imagen: <input type="text" Pseudoclases de validación
Existen varios elementos que requieren elegir a partir de una lista de name="formatoimagen" Si el elemento coincide con la pseudo-clase de CSS :invalid, se puede aplicar
posibilidades: (1) Casillas de verificación, (2) Campos de opciones, (3) Listas list="listaformatosimagen"></p> estilos específicos a estos elementos inválidos. De forma similar, los
<datalist id="listaformatosimagen">
desplegables. <select name=”formatoimg”> elementos válidos coinciden con la pseudo-clase :valid.
<option>PNG</option>
1. Casillas de verificación (selección múltiple) input:invalid {
<option>JPEG</option> border: 1px solid red;
Se utiliza la etiqueta <input>, especificando type=”checkbox”. Se puede <option>GIF</option>
tener una casilla marcada por defecto con el atributo checked. En este caso, }
<option>TGA</option>
se debe agregar la etiqueta <label> después. </select> input:valid {
</datalist> border: 1px solid green;
<input type="checkbox" name="ostras" id="ostras" }
cheked> También se puede escribir de la siguiente manera.
<label for="ostras">Ostras</label>
<label>Superhéroe favorito</label> DEPURANDO EL CÓDIGO HTML
2. Campos de opciones (única opción) <input list="superheroes" name="list" />
Se utiliza la etiqueta <input /> con el atributo type=”radio”. Las opciones <datalist id="superheroes"> ¿Qué pasa si algo va mal y desconocemos dónde está el error de
se deben de organizar por grupos (cada opción del grupo debe compartir el <option label="Iron Man" value="Iron Man"> codificación? Para páginas grandes se puede ejecutar la página HTML en el
<option label="The Hulk" value="The Hulk">
mismo valor en name=” ”, pero deben tener un value=” ” diferente). Se </datalist> Servicio de Validación de Etiquetas. Esta página web toma un
puede tener una casilla marcada por defecto con el atributo checked. En documento HTML como entrada, lo procesa y produce un informe de dónde
este caso, se debe agregar la etiqueta <label> después. Buena práctica para hacer formularios están los errores del documento.
Es una buena práctica, encerrar cada parte del formulario entre etiquetas
<p>Indica el grupo de edad al que perteneces: </p>
<div> … </div>. No debemos preocuparnos si no podemos corregir todos los mensajes de
<input type="radio" name="edad" value="menos18" error, es práctico tratar de arreglar unos pocos errores cada vez y volver a
id="menos18">
<label for="menos18">Menos de 18 años</label>
<div> pasar el validador para ver los que quedan. A veces, al arreglar unos cuantos
<label for="name">Name:</label> se arreglan automáticamente otros muchos mensajes, con frecuencia
<input type="radio" name="edad" value="mas18" <input type="text" id="name" />
id="mas18"> </div>
muchos errores son causados por uno solo en un efecto dominó.
<label for="mas18">Más de 18 años</label>
<div>
3. Listas desplegables <label for="mail">E-mail:</label>
Se utiliza la etiqueta <select> … </select>, añadimos el atributo name=” ALGUNOS ATRIBUTOS GLOBALES
<input type="email" id="mail" />
” para darle un nombre a la lista. Después, dentro de la etiqueta, se insertan </div> class=” ”
varias etiquetas <option> … </option> (una para cada opción disponible). Este atributo es utilizado en conjunto con hojas de estilo, e indica al
Añadimos un atributo value=” ” a cada una de ellas para identificar lo que Barra de progreso
navegador qué clases se supone asignarán atributos de diseño al elemento.
el visitante ha elegido. Para que una opción esté seleccionada por defecto, La etiqueta <progress> … </progress> se utiliza para visualizar el
se utiliza el atributo selected. progreso de una tarea. El atributo max=” ” indica la cantidad de trabajo draggable=” ” (true, false)
que demorará la carga. El atributo value=” ” indica qué parte de la tarea ya Indica si el elemento puede ser arrastrado. Si el atributo toma el valor
<label for="pais">¿En qué país vives?</label><br /> se ha completado o cargado, debe especificarse un valor entre 0 y max=” “true”, el navegador le permitirá al usuario que arrastre este elemento. Si
<select name="pais" id="pais"> ”, o entre 0 y 1.0 si max=” ” está omitido.
<option value="espana" selected>España</option>
toma el valor de “false”, no se podrá arrastrar.
<option value="italia">Italia</option> <progress value="70" max="100">70 %</progress> id=” ”
<option value="china">China</option>
<option value="japon">Japón</option> Medida dentro de un rango Es un identificador para el elemento. Este identificador debe ser único en el
</select> La etiqueta <meter> … </meter> representa una medida dentro de un documento y puede ser utilizado para referirse al mismo desde vínculos,
rango conocido. Soporta los atributos min=””, max=”” que indican los scripts, definiciones de estilo y otros atributos.
Las opciones de la lista desplegable, también se pueden agrupar con la
límites inferior y superior del rango. Los atributos low=”” y high=”” que lang=” ”
etiqueta <optgroup> … </optgroup>.
permiten definir los segmentos que contendrán los valores considerados Representa el idioma utilizado en el contenido del elemento y en todos los
<label for="pais">¿En qué país vives?</label><br /> como bajos y altos respectivamente, mientras que optimal=”” indicará cuál atributos que contengan texto. Es importante definir este atributos siempre
<select name="pais" id="pais"> es el valor óptimo en esta medida. Por último, el atributo value=”” que el texto sea presentado en un idioma diferente al del documento.
<optgroup label="Europa"> representa el valor tomado. Las unidades de medida se puede indicar en el
<option value="reinounido">Reino Unido</option> style=” ”
atributo title=””.
<option value="francia">Francia</option>
<option value="espana">España</option> Un conjunto de declaraciones de CSS que serán aplicadas al elemento por
<p>Uso de la memoria RAM: <meter max="2048"
<option value="italia">Italia</option> parte de los navegadores. En contraste con el atributo class=” ”, este es
value="547" title="Megabytes">547/2048</meter></p>
</optgroup> considerado un modo ‘in situ’ de aplicar propiedades de estilo.
<optgroup label="Asia"> Restricciones de validación en elementos <input>
<option value="china">China</option> Cualquier elemento <input> puede ser validado usando el atributo title=” ”
<option value="japon">Japón</option>
pattern=” ”. Este atributo acepta como valor una expresión regular, Una línea de texto que representa información consultiva para el elemento,
</optgroup>
sensible al uso de mayúsculas. Si el elemento no es vacío y no coincide con la cual suele aparecer como una descripción emergente cuando el usuario
</select> pasa el cursor sobre el elemento.
la expresión regular especificada en el atributo pattern, el elemento se
Lista de opciones predefinidas considera inválido.
El elemento <datalist> … </datalist> representa una lista opciones
predefinidas, indicadas con los elementos <option> … </option>. Para <label for="choose">¿Preferirías un plátano o una
cereza?</label>
enlazar un <datalist> a un campo de texto, el valor del atributo id=” ” del <input id="choose" name="i_like"
<datalist> debe coincidir con el valor del atributo list=” ” del <input>. pattern="plátano|cereza">
Además, para mejorar la compatibilidad, un <datalist> puede contener las
opciones dentro un elemento <select> … </select>

You might also like