100% encontró este documento útil (1 voto)

113 vistas

Manual de HTML

Este manual proporciona una introducción al lenguaje HTML. Explica que HTML se utiliza para crear páginas web y está formado por elementos que indican cómo se debe mostrar el contenido. Incluye un ejemplo simple de código HTML con un encabezado y un párrafo. Además, describe brevemente la historia de HTML y diferentes editores que se pueden usar para crear páginas web, como el Bloc de notas.

Cargado por

Carol Escobar

Derechos de autor

Formatos disponibles

Descarga como PDF, TXT o lee en línea desde Scribd

100% encontró este documento útil (1 voto)

113 vistas

Manual de HTML

Cargado por

Carol Escobar

Derechos de autor

Formatos disponibles

Descarga como PDF, TXT o lee en línea desde Scribd

Está en la página 1/ 131

INDICE

HTML Tutorial ................................................................................................................................ 1

INICIO HTML................................................................................................................................... 2
troducción HTML ........................................................................................................................... 3
Editores HTML ............................................................................................................................... 4
Editores HTML............................................................................................................................... 5
Editores HTML .............................................................................................................................. 6
Elementos HTML……………………………………………………………………………………………………………………7
Atributos HTML………………………………………………………………………………………………………………………8
Encabezados HTML…………………………………………………………………………………………………………….….9
Párrafos HTML……………………………………………………………………………………………………………………..10
Estilos HTML…………………………………………………………………………………………………………………………11
Formato HTML………………………………………………………………………………………………………………………12
Citas HTML……………………………………………………………………………………………………………………………13
Comentarios HTML………………………………………………………………………………………………………………14
Colores HTML………………….…………………………………………………………………………………………………..15
HTML CSS…………………….………………………………………………………………………………………………………16
Enlaces HTML………………………………………………………………………………………………………………………17
Imágenes HTML………………………………………………………………………………………………………………….18
HTML Favicon……………………………………………………………………………………………………………………..19
Tablas HTML……………………………………………………………………………………………………………………….20
Listas HTML………………………………………………………………………………………………………………………..21
Bloque HTML y en línea………………………………………………………………………………………………………22
Clases HTML………….……………………………………………………………………………………………………………23
HTML Iframes……………………………………………………………………………………………………………………..24
HTML JavaScript…………………………………………………………………………………………………………………..25
Cabezal HTML……………………………………………………………………………………………………………………….26
Símbolos HTML…………………………………………………………………………………………………………………….27
HTML Emojis………………………………………………………………………………………………………………………..28
HTML Grafismo…………………………………………………………………………………………………………………….29
Vídeo HTML………………………………………………………………………………………………………………………….30
HTML Audio………………………………………………………………………………………………………………………….31
Complementos HTML…………………………………………………………………………………………………………..32
HTML YouTube……………………………………………………………………………………………………………………..33
HTML Apis…………………………………………………………………………………………………………………………….34
Geolocalización HTML………………………………………,.…………………………………………………………………35
Métodos abreviados de teclado……………………………………………………………………………………………36
MANUAL DE HTML……………………………….………………………………………………………………………………37
Tabla de colores…………………………………………………………………………………………………………………
HTML

Bienvenidos al manual de HTML. En este manual aprenderemos el lenguaje

utilizado para la creación de páginas web: el Hyper Text Markup Language,
o también HTML.
HTML es un lenguaje informático con el cual nos comunicamos con el
ordenador para decirle que haga lo que nosotros queremos. Lo de
"lenguaje" indica que nos comunicaremos con el ordenador por medio de
palabras y signos de escritura.

¿Qué es HTML?
 HTML significa Hyper Text 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 al navegador cómo mostrar el contenido
 Los elementos HTML etiquetan piezas de contenido como "esto es un
encabezado", "esto es un párrafo", "esto es un enlace", etc.

Un documento HTML simple

Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Ejemplo explicado

 La declaración define que este documento es un documento

HTML5<!DOCTYPE html>
 El elemento es el elemento raíz de una página HTML<html>
 El elemento contiene metainformación sobre la página HTML<head>
 El elemento especifica un título para la página HTML (que se muestra
en la barra de título del navegador o en la pestaña de la página)<title>
 El elemento define el cuerpo del documento, y es un contenedor para
todos los contenidos visibles, como encabezados, párrafos,
imágenes, hipervínculos, tablas, listas, etc.<body>
 El elemento define un encabezado grande<h1>
 El elemento define un párrafo<p>

¿Qué es un elemento HTML?

Un elemento HTML se define mediante una etiqueta de inicio, algo de

contenido y una etiqueta de fin:

<tagname> El contenido va aquí... </tagname>

El elemento HTML es todo, desde la etiqueta de inicio hasta la etiqueta de

fin:

<h1> Mi primer encabezado</h1>

<p> Mi primer párrafo. </p>
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none
Nota: Algunos elementos HTML no tienen contenido (como el elemento
<br>). Estos elementos
Navegadores Web
El propósito de un navegador web (Chrome, Edge, Firefox, Safari) es leer
documentos HTML y mostrarlos correctamente.
Un explorador no muestra las etiquetas HTML, pero las utiliza para
determinar cómo mostrar el documento:
Estructura de página HTML
A continuación se muestra una visualización de una estructura de página
HTML:
<html>
<cabeza>
<título>Titulación de la página</título>
</cabeza>
<>
<h1>Este es un encabezado</h1>
<p>Este es un párrafo.</p>
<p>Este es otro párrafo.</p>
</cuerpo>
</html>
Nota: El contenido dentro de la sección <cuerpo> (el área blanca de arriba)
se mostrará en un navegador. El contenido dentro del elemento <title> se
mostrará en la barra de título del navegador o en la pestaña de la página.

Historia HTML
Desde los primeros días de la World Wide Web, ha habido muchas
versiones de HTML:
Year Version

1989 Tim Berners-Lee invented www

1991 Tim Berners-Lee invented HTML

1993 Dave Raggett drafted HTML+

1995 HTML Working Group defined HTML 2.0

1997 W3C Recommendation: HTML 3.2

1999 W3C Recommendation: HTML 4.01

2000 W3C Recommendation: XHTML 1.0

2008 WHATWG HTML5 First Public Draft

2012 WHATWG HTML5 Living Standard

2014 W3C Recommendation: HTML5

2016 W3C Candidate Recommendation: HTML 5.1

2017 W3C Recommendation: HTML5.1 2nd Edition

2017 W3C Recommendation: HTML5.2

MANUAL DE HTML

HTML es el lenguaje de marcado estándar para páginas Web.

Con HTML puedes crear tu propio sitio web.
HTML es fácil de aprender - ¡Lo disfrutarás!
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Page
Title</title>
</head>
<body>

<h1>This is a
Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Editores HTML
Un editor de texto simple es todo lo que necesitas para aprender HTML.

Aprender HTML con el Bloc de notas o TextEdit

Las páginas web se pueden crear y modificar mediante el uso de editores

HTML profesionales.

Sin embargo, para aprender HTML recomendamos un editor de texto simple

como Notepad (PC) o TextEdit (Mac).

Creemos que usar un editor de texto simple es una buena manera de

aprender HTML.

Siga los pasos a continuación para crear su primera página web con el Bloc
de notas o TextEdit.

Paso 1: Abra el Bloc de notas (PC)

Windows 8 o posterior:

Abra la pantalla de inicio (el símbolo de la ventana en la parte inferior

izquierda de la pantalla). Escriba Bloc de notas.

Windows 7 o anterior:

Abrir Inicio > programas > accesorios > Bloc de notas

Paso 1: Abre TextEdit (Mac)

Abra el Finder > aplicaciones > TextEdit

También cambie algunas preferencias para que la aplicación guarde los

archivos correctamente. En Preferencias > Formato > elija "Texto sin
formato"

Luego, en "Abrir y guardar", marque la casilla que dice "Mostrar archivos

HTML como código HTML en lugar de texto formateado".

A continuación, abra un nuevo documento para colocar el código.

Paso 2: Escribe algo de HTML

Escriba o copie el siguiente código HTML en el Bloc de notas:

<!DOCTYPE html>
<html>
<body>

<h1>My First
Heading</h1>

<p>My first
paragraph.</p>

</body>
</html>

Paso 3:
Guardar la página HTML
Guarde el archivo en su computadora. Seleccione Archivo > Guardar como en el
menú Bloc de notas.

Asigne al archivo el nombre "index.htm" y establezca la codificación en UTF-8 (que

es la codificación preferida para los archivos HTML).

Propina: Puede usar .htm o .html como extensión de archivo. No hay

diferencia; depende de ti.

Paso 4: Ver la página HTML en su

navegador
Abra el archivo HTML guardado en su navegador favorito (haga doble clic en el
archivo o haga clic con el botón derecho y elija "Abrir con").

El resultado se verá muy parecido a esto:

W3Schools Online Editor - "Pruébalo
tú mismo"
Con nuestro editor en línea gratuito, puede editar el código HTML y ver el
resultado en su navegador.

Es la herramienta perfecta cuando quieres probar código rápidamente. También

tiene codificación de colores y la capacidad de guardar y compartir código con
otros:

Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

HTML BASICO

Documentos HTML
Todos los documentos HTML deben comenzar con una declaración de tipo de
documento: .<!DOCTYPE html>

El documento HTML en sí comienza con y termina con .<html></html>

La parte visible del documento HTML está entre y . <body></body>

Ejemplo
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

¡El <! Declaración DOCTYPE>

La declaración representa el tipo de documento y ayuda a los exploradores
a mostrar las páginas Web correctamente.<!DOCTYPE>

Solo debe aparecer una vez, en la parte superior de la página (antes de

cualquier etiqueta HTML).

La declaración no distingue entre mayúsculas y minúsculas.<!DOCTYPE>

La declaración para HTML5 es:<!DOCTYPE>

<!DOCTYPE html>

Encabezados HTML
Los encabezados HTML se definen con las etiquetas to.<h1><h6>

<h1> define el epígrafe más importante. define el epígrafe menos

importante: <h6>

Ejemplo
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

Párrafos HTML
Los párrafos HTML se definen con la etiqueta:<p>

Ejemplo
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Enlaces HTML
Los enlaces HTML se definen con la etiqueta:<a>

Ejemplo
<a href="https://www.w3schools.com">This is a link</a>

El destino del vínculo se especifica en el atributo. href

Los atributos se utilizan para proporcionar información adicional sobre los

elementos HTML.

Aprenderá más sobre los atributos en un capítulo posterior.

Imágenes HTML
Las imágenes HTML se definen con la etiqueta.<img>

El archivo de origen (), el texto alternativo (), y se proporcionan como

atributos:srcaltwidthheight

Ejemplo
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"
>

Cómo ver el origen HTML

¿Alguna vez has visto una página web y te has preguntado "¡Oye! ¿Cómo lo
hicieron?"

Ver código fuente HTML:

Haga clic con el botón derecho en una página HTML y seleccione "Ver
fuente de página" (en Chrome) o "Ver fuente" (en Edge), o similar en otros
navegadores. Esto abrirá una ventana que contiene el código fuente HTML
de la página.

Inspeccionar un elemento HTML:

Haga clic con el botón derecho en un elemento (o un área en blanco) y elija
"Inspeccionar" o "Inspeccionar elemento" para ver de qué elementos están
compuestos (verá tanto el HTML como el CSS). También puede editar el
HTML o CSS sobre la marcha en el panel Elementos o Estilos que se abre.
Elementos HTML

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> none none

Un elemento HTML se define mediante una etiqueta de inicio, algo de

contenido y una etiqueta de fin.

Elementos HTML
El elemento HTML es todo, desde la etiqueta de inicio hasta la etiqueta de
fin:

<tagname> El contenido va aquí... </tagname>

Ejemplos de algunos elementos HTML:

<h1> Mi primer encabezado</h1>

<p> Mi primer párrafo. </p>
Nota: Algunos elementos HTML no tienen contenido (como el elemento
<br>). Estos elementos se denominan elementos vacíos. ¡Los elementos
vacíos no tienen una etiqueta final!

Elementos HTML anidados

Los elementos HTML se pueden anidar (esto significa que los elementos
pueden contener otros elementos).

Todos los documentos HTML constan de elementos HTML anidados.

El ejemplo siguiente contiene cuatro elementos HTML (, , y

):<html><body><h1><p>
Ejemplo
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Ejemplo explicado
El elemento es el elemento raíz y define todo el documento HTML.<html>

Tiene una etiqueta de inicio y una etiqueta de fin.<html></html>

Entonces, dentro del elemento hay un elemento:<html><body>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

El elemento define el cuerpo del documento.<body>

Tiene una etiqueta de inicio y una etiqueta de fin.<body></body>

Luego, dentro del elemento hay otros dos elementos: y :<body><h1> <p>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

El elemento define un encabezado.<h1>

Tiene una etiqueta de inicio y una etiqueta de fin:<h1></h1>

<h1>My First Heading</h1>

El elemento define un párrafo.<p>

Tiene una etiqueta de inicio y una etiqueta de fin:<p></p>

<p>My first paragraph.</p>

ANUNCIO

Nunca se salte la etiqueta final

Algunos elementos HTML se mostrarán correctamente, incluso si olvida la
etiqueta final:
Example
<html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>

Sin embargo, ¡nunca confíes en esto! ¡Pueden producirse resultados

y errores inesperados si olvida la etiqueta final!

Elementos HTML vacíos

Los elementos HTML sin contenido se denominan elementos vacíos.

La etiqueta define un salto de línea y es un elemento vacío sin una etiqueta

de cierre:<br>

Ejemplo
<p>This is a <br> paragraph with a line break.</p>

HTML no distingue entre mayúsculas y

minúsculas
Las etiquetas HTML no distinguen entre mayúsculas y minúsculas: significa
lo mismo que .<P><p>

El estándar HTML no requiere etiquetas en minúsculas, pero el

W3C recomienda minúsculas en HTML y exige minúsculas para tipos de
documentos más estrictos como XHTML.

En W3Schools siempre usamos nombres de etiquetas en minúsculas.

Referencia de etiqueta HTML

La referencia de la etiqueta de W3Schools contiene información adicional
sobre estas etiquetas y sus atributos.

Tag Description
<html> Defines the root of an HTML document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

Para obtener una lista completa de todas las etiquetas HTML disponibles,
visite nuestra Referencia de etiquetas HTML.

Atributos HTML
Los atributos HTML proporcionan información adicional sobre los
elementos HTML.

Atributos HTML
 Todos los elementos HTML pueden tener atributos
 Los atributos proporcionan información adicional sobre los
elementos
 Los atributos siempre se especifican en la etiqueta de inicio
 Los atributos generalmente vienen en pares de nombre/valor
como: name="value"

El atributo href
La etiqueta define un hipervínculo. El atributo especifica la dirección URL de
la página a la que va el vínculo:<a>href

Ejemplo
<a href="https://www.w3schools.com">Visit W3Schools</a>

Aprenderá más sobre los enlaces en nuestro capítulo Enlaces HTML.

El atributo src
La etiqueta se utiliza para incrustar una imagen en una página HTML. El
atributo especifica la ruta de acceso a la imagen que se va a
mostrar:<img>src
Ejemplo
<img src="img_girl.jpg">

Hay dos formas de especificar la dirección URL en el atributo:src

1. URL absoluta: enlaces a una imagen externa que está alojada en otro
sitio web.
Ejemplo: src="https://www.w3schools.com/images/img_girl.jpg"..

Notas: Las imágenes externas pueden estar bajo derechos de autor. Si no

obtiene permiso para usarlo, puede estar violando las leyes de derechos de
autor. Además, no puede controlar imágenes externas; se puede quitar o
cambiar repentinamente.

2. URL relativa: enlaces a una imagen alojada en el sitio web. Aquí, la

URL no incluye el nombre de dominio. Si la URL comienza sin una barra
diagonal, será relativa a la página actual. Ejemplo: src="img_girl.jpg". Si la
URL comienza con una barra diagonal, será relativa al dominio. Ejemplo:
src="/images/img_girl.jpg".

Propina: Casi siempre es mejor usar URL relativas. No se romperán si

cambias de dominio.

Los atributos de ancho y alto

La etiqueta también debe contener los atributos y, que especifican el ancho
y el alto de la imagen (en píxeles):<img>width height

Ejemplo
<img src="img_girl.jpg" width="500" height="600">

El atributo alt
El atributo requerido para la etiqueta especifica un texto alternativo para
una imagen, si la imagen por alguna razón no se puede mostrar. Esto
puede deberse a una conexión lenta, o a un error en el atributo, o si el
usuario utiliza un lector de pantalla.alt<img>src
Ejemplo
<img src="img_girl.jpg" alt="Girl with a jacket">

Example
See what happens if we try to display an image that does not exist:

<img src="img_typo.jpg" alt="Girl with a jacket">

You will learn more about images in our HTML Images chapter.

El atributo de estilo
El atributo se usa para agregar estilos a un elemento, como color, fuente,
tamaño y más.style

Ejemplo
<p style="color:red;">This is a red paragraph.</p>

Aprenderá más sobre los estilos en nuestro capítulo Estilos HTML.

El atributo lang
Siempre debe incluir el atributo dentro de la etiqueta, para declarar el
idioma de la página Web. Esto está destinado a ayudar a los motores de
búsqueda y navegadores.lang<html>

En el ejemplo siguiente se especifica el inglés como idioma:

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

Los códigos de país también se pueden agregar al código de idioma en el

atributo. Por lo tanto, los dos primeros caracteres definen el idioma de la
página HTML, y los dos últimos caracteres definen el país.lang

En el ejemplo siguiente se especifica el inglés como idioma y los Estados

Unidos como país:

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

Puede ver todos los códigos de idioma en nuestra Referencia de código de

lenguaje HTML.

El título Atributo
El atributo define cierta información adicional sobre un elemento.title

El valor del atributo title se mostrará como información sobre herramientas

cuando pase el ratón por encima del elemento:

Ejemplo
<p title="I'm a tooltip">This is a paragraph.</p>

Sugerimos: Use siempre atributos en

minúsculas
El estándar HTML no requiere nombres de atributos en minúsculas.

El atributo title (y todos los demás atributos) se pueden escribir en

mayúsculas o minúsculas como title o TITLE.

Sin embargo, el W3C recomienda atributos en minúsculas en HTML

y exige atributos en minúsculas para tipos de documentos más estrictos
como XHTML.

En W3Schools siempre usamos nombres de atributos en minúsculas.

Sugerimos: Siempre cite los valores de

atributo
El estándar HTML no requiere comillas alrededor de los valores de atributo.

Sin embargo, el W3C recomienda citas en HTML y exige citas para tipos
de documentos más estrictos como XHTML.

Bien:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

Malo:
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>

A veces hay que usar comillas. En este ejemplo no se mostrará

correctamente el atributo title, ya que contiene un espacio:

Ejemplo
<p title=About W3Schools>

En W3Schools siempre usamos comillas alrededor de los valores de

atributo.

¿Cotizaciones simples o dobles?

Las comillas dobles alrededor de los valores de atributo son las más
comunes en HTML, pero también se pueden usar comillas simples.

En algunas situaciones, cuando el valor del atributo en sí contiene comillas

dobles, es necesario usar comillas simples:

<p title='John "ShotGun" Nelson'>

O viceversa:

<p title="John 'ShotGun' Nelson">

Encabezados HTML
Los encabezados HTML son títulos o subtítulos que desea mostrar en
una página web.

Ejemplo

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Encabezados HTML
Los encabezados HTML se definen con las etiquetas to.<h1><h6>

<h1> define el epígrafe más importante. define el epígrafe menos

importante.<h6>

Ejemplo
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Nota: Los navegadores agregan automáticamente algunos espacios en

blanco (un margen) antes y después de un encabezado.

Los encabezados son importantes

Los motores de búsqueda utilizan los encabezados para indexar la
estructura y el contenido de sus páginas web.

Los usuarios a menudo hojean una página por sus encabezados. Es

importante utilizar encabezados para mostrar la estructura del documento.

<h1> los encabezados deben usarse para los encabezados principales,

seguidos de los encabezados, luego los menos importantes, y así
sucesivamente.<h2><h3>

Nota: Utilice encabezados HTML solo para encabezados. No uses

encabezados para hacer que el texto sea GRANDE o en negrita.

Encabezados más grandes

Cada encabezado HTML tiene un tamaño predeterminado. Sin embargo,
puede especificar el tamaño de cualquier encabezado con el atributo,
utilizando la propiedad CSS:stylefont-size

Ejemplo
<h1 style="font-size:60px;">Heading 1</h1>
Ejercicios HTML
Pruébese a sí mismo con ejercicios
Ejercicio:
Utilice la etiqueta HTML correcta para agregar un encabezado con el texto
"Londres".

<p>London is the capital city of England. It is the most

populous city in the United Kingdom, with a metropolitan area
of over 13 million inhabitants.</p>

Submit Answer »

Start the Exercise

HTML Tag Reference

W3Schools' tag reference contains additional information about these tags
and their attributes.

Tag Description

<html> Defines the root of an HTML document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

Para obtener una lista completa de todas las etiquetas HTML disponibles,
visite nuestra Referencia de etiquetas HTML.

Párrafos HTML
Un párrafo siempre comienza en una nueva línea, y generalmente es un
bloque de texto.
Párrafos HTML
El elemento HTML define un párrafo.<p>

Un párrafo siempre comienza en una nueva línea, y los navegadores

agregan automáticamente algún espacio en blanco (un margen) antes y
después de un párrafo.

Ejemplo
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Pantalla HTML
No puede estar seguro de cómo se mostrará HTML.

Las pantallas grandes o pequeñas y las ventanas redimensionadas crearán

resultados diferentes.

Con HTML, no puede cambiar la visualización agregando espacios

adicionales o líneas adicionales en su código HTML.

El navegador eliminará automáticamente los espacios y líneas adicionales

cuando se muestre la página:

Ejemplo
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>

HTML Horizontal Rules

The tag defines a thematic break in an HTML page, and is most often
displayed as a horizontal rule.<hr>

The element is used to separate content (or define a change) in an HTML

page:<hr>

Example
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

The tag is an empty tag, which means that it has no end tag.<hr>

HTML Line Breaks

The HTML element defines a line break.<br>

Use if you want a line break (a new line) without starting a new
paragraph:<br>

Example
<p>This is<br>a paragraph<br>with line breaks.</p>

The tag is an empty tag, which means that it has no end tag.<br>

The Poem Problem

This poem will display on a single line:

Example
<p>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</p>

Solution - The HTML <pre> Element

The HTML element defines preformatted text.<pre>

The text inside a element is displayed in a fixed-width font (usually

Courier), and it preserves both spaces and line breaks:<pre>

Example
<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</pre>

Ejercicios HTML
Pruébese a sí mismo con ejercicios
Ejercicio:
Use la etiqueta HTML correcta para agregar un párrafo con el texto "Hello
World!".

</body>
</html>

Enviar respuesta »

Comience el ejercicio

Referencia de etiqueta HTML

La referencia de la etiqueta de W3Schools contiene información adicional
sobre los elementos HTML y sus atributos.

Tag Description

<p> Defines a paragraph

<hr> Defines a thematic change in the content

<br> Inserts a single line break

<pre> Defines pre-formatted text

Para obtener una lista completa de todas las etiquetas HTML disponibles,
visite nuestra Referencia de etiquetas HTML.

Estilos HTML
El atributo HTML se utiliza para agregar estilos a un elemento, como
color, fuente, tamaño y más.style

Ejemplo
Soy Rojo

Soy Azul

Soy grande

El atributo de estilo HTML

Establecer el estilo de un elemento HTML, se puede hacer con el
atributo.style

El atributo HTML tiene la sintaxis siguiente:style

La propiedad es una propiedad CSS. El valor es un valor CSS.

Aprenderá más sobre CSS más adelante en este tutorial.

Color de fondo
La propiedad CSS define el color de fondo de un elemento
HTML.background-color
Ejemplo
Establezca el color de fondo de una página en powderblue:

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

Example
Set background color for two different elements:

<body>

<h1 style="background-color:powderblue;">This is a heading</h1>

<p style="background-color:tomato;">This is a paragraph.</p>

</body>

ANUNCIO

Color del texto

La propiedad CSS define el color del texto para un elemento HTML:color

Ejemplo
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

Fuentes
La propiedad CSS define la fuente que se utilizará para un elemento
HTML:font-family

Ejemplo
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

Tamaño del texto

La propiedad CSS define el tamaño de texto de un elemento HTML:font-
size

Ejemplo
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

Text Alignment
The CSS property defines the horizontal text alignment for an HTML
element:text-align

Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
Try it Yourself »

Chapter Summary
 Use the attribute for styling HTML elementsstyle
 Use for background colorbackground-color
 Use for text colorscolor
 Use for text fontsfont-family
 Uso para tamaños de textofont-size
 Uso para la alineación de textotext-align

Ejercicios HTML
Pruébese a sí mismo con ejercicios
Ejercicio:
Utilice el atributo HTML correcto, y CSS, para establecer el color del párrafo en
"azul".

<p =" ;" >Este es un párrafo.</p>

Formato de texto HTML

HTML contiene varios elementos para definir texto con un significado
especial.
Ejemplo
This text is bold

This text is italic

This is subscript and superscript

Elementos de formato HTML

Los elementos de formato se diseñaron para mostrar tipos especiales de
texto:

 <b> - Texto en negrita

 <strong> - Texto importante
 <i> - Texto en cursiva
 <em> - Texto enfatizado
 <mark> - Texto marcado
 <small> - Texto más pequeño
 <del> - Texto borrado
 <ins> - Texto insertado
 <sub> - Texto del subíndice
 <sup> - Texto superíndice

Elementos HTML <b> y <fuerte>

El elemento HTML define el texto en negrita, sin ninguna importancia
adicional.<b>

Ejemplo
<b>This text is bold</b>

El elemento HTML define el texto con gran importancia. El contenido del

interior se muestra normalmente en negrita.<strong>

Ejemplo
<strong>This text is important!</strong>

Elementos HTML <i> y <em>

El elemento HTML define una parte del texto en una voz o estado de ánimo
alternativo. El contenido del interior se muestra normalmente en cursiva.<i>
Propina: La etiqueta se usa a menudo para indicar un término técnico, una
frase de otro idioma, un pensamiento, un nombre de barco, etc.<i>

Ejemplo
<i>This text is italic</i>

El elemento HTML define el texto enfatizado. El contenido del interior se

muestra normalmente en cursiva.<em>

Propina: Un lector de pantalla pronunciará las palabras con énfasis,

usando estrés verbal.<em>

Ejemplo
<em>This text is emphasized</em>

Elemento HTML <small>

El elemento HTML define texto más pequeño:<small>

Ejemplo
<small>This is some smaller text.</small>

Elemento HTML <mark>

El elemento HTML define el texto que debe marcarse o resaltarse:<mark>

Ejemplo
<p>Do not forget to buy <mark>milk</mark> today.</p>

Elemento HTML <del>

El elemento HTML define el texto que se ha eliminado de un documento.
Los navegadores generalmente tacharán una línea a través del texto
eliminado:<del>

Ejemplo
<p>My favorite color is <del>blue</del> red.</p>
Elemento HTML <ins>
El elemento HTML define un texto que se ha insertado en un documento.
Los navegadores generalmente subrayarán el texto insertado:<ins>

Ejemplo
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

Elemento HTML <sub>

El elemento HTML define el texto del subíndice. El texto del subíndice
aparece medio carácter por debajo de la línea normal y, a veces, se
representa en una fuente más pequeña. El texto del subíndice se puede
utilizar para fórmulas químicas, como H<sub>2O:

Ejemplo
<p>This is <sub>subscripted</sub> text.</p>

HTML <sup> Element

The HTML element defines superscript text. Superscript text appears half a
character above the normal line, and is sometimes rendered in a smaller
font. Superscript text can be used for footnotes, like WWW<sup>[1]:

Example
<p>This is <sup>superscripted</sup> text.</p>

Ejercicios HTML
Pruébese a sí mismo con ejercicios
Ejercicio:
Añádase una importancia adicional a la palabra "degradación" en el párrafo
siguiente.

<p> la misión de
WWF es detener la degradación del medio ambiente
natural de nuestro planeta.
</p>
Citas HTML y elementos de
citación
En este capítulo repasaremos los elementos ,, , , , y
HTML.<blockquote><q><abbr><address><cite><bdo>

Ejemplo
Here is a quote from WWF's website:

For nearly 60 years, WWF has been protecting the future of nature. The
world's leading conservation organization, WWF works in 100 countries and
is supported by more than one million members in the United States and
close to five million globally.

HTML <blockquote> para citas

El elemento HTML define una sección que se cita de otra fuente.<blockquote>

Los navegadores suelen aplicar sangría a los elementos.<blockquote>

Ejemplo
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>

HTML <q> para citas cortas

La etiqueta HTML define una cita corta.<q>

Los navegadores normalmente insertan comillas alrededor de la cita.

Ejemplo
<p>WWF's goal is to: <q>Build a future where people live in harmony
with nature.</q></p>

HTML <abbr> for Abbreviations

The HTML tag defines an abbreviation or an acronym, like "HTML", "CSS",
"Mr.", "Dr.", "ASAP", "ATM".<abbr>

Marking abbreviations can give useful information to browsers, translation

systems and search-engines.

Tip: Use the global title attribute to show the description for the
abbreviation/acronym when you mouse over the element.

Example
<p>The <abbr title="World Health Organization">WHO</abbr> was founded
in 1948.</p>

HTML <address> for Contact Information

The HTML tag defines the contact information for the author/owner of a
document or an article.<address>

The contact information can be an email address, URL, physical address,

phone number, social media handle, etc.

The text in the element usually renders in italic, and browsers will always
add a line break before and after the element.<address><address>

Example
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

HTML <cite> for Work Title

The HTML tag defines the title of a creative work (e.g. a book, a poem, a
song, a movie, a painting, a sculpture, etc.).<cite>

Note: A person's name is not the title of a work.

The text in the element usually renders in italic.<cite>

Example
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

HTML <bdo> for Bi-Directional Override

BDO stands for Bi-Directional Override.

La etiqueta HTML se utiliza para anular la dirección de texto actual:<bdo>

Ejemplo
<bdo dir="rtl">This text will be written from right to left</bdo>

Ejercicios HTML
Pruébese a sí mismo con ejercicios
Ejercicio:
Use un elemento HTML para agregar comillas alrededor de las letras "cool".

<p>
Soy genial .
</p>

Enviar respuesta »

Comience el ejercicio

Citas HTML y elementos de citación

Tag Description

<abbr> Defines an abbreviation or acronym

<address> Defines contact information for the author/owner of a document

<bdo> Defines the text direction

<blockquote> Defines a section that is quoted from another source

<cite> Defines the title of a work

<q> Defines a short inline quotation

Comentarios HTML
Los comentarios HTML no se muestran en el navegador, pero pueden
ayudar a documentar el código fuente HTML.

Etiqueta de comentario HTML

Puede agregar comentarios al origen HTML mediante la sintaxis siguiente:

Observe que hay un signo de exclamación (!) en la etiqueta de inicio, pero

no en la etiqueta de final.

Nota: Los comentarios no son mostrados por el navegador, pero pueden

ayudar a documentar su código fuente HTML.

Con los comentarios puedes colocar notificaciones y recordatorios en tu

código HTML:

Ejemplo

<p>This is a paragraph.</p>

Ocultar contenido
Los comentarios se pueden usar para ocultar contenido.

Esto puede ser útil si ocultas contenido temporalmente:

Ejemplo
<p>This is a paragraph.</p>

<p>This is a paragraph too.</p>

También puede ocultar más de una línea. Todo entre el y el estará oculto
de la pantalla.

Ejemplo
Ocultar una sección de código HTML:

<p>This is a paragraph.</p>

<p>This is a paragraph too.</p>

Colores HTML

Los colores HTML se especifican con nombres de color predefinidos o con

valores RGB, HEX, HSL, RGBA o HSLA.

Nombres de color
En HTML, se puede especificar un color mediante un nombre de color:
HTML admite 140 nombres de color estándar.

Color de fondo
Puede establecer el color de fondo para los elementos HTML:

Hola mundo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Ejemplo
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

Color del texto

Puede establecer el color del texto:

Hola mundo
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper

suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Ejemplo
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Color del borde

Puede establecer el color de los bordes:

Hola mundo
Hola mundo
Hola mundo
Ejemplo
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

Valores de color
En HTML, los colores también se pueden especificar utilizando valores RGB,
valores HEX, valores HSL, valores RGBA y valores HSLA.

Los siguientes tres elementos <div> tienen su color de fondo establecido

con valores RGB, HEX y HSL:

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

Los siguientes dos elementos <div> tienen su color de fondo establecido
con valores RGBA y HSLA, que agregan un canal Alfa al color (aquí tenemos
un 50% de transparencia):

rgba(255, 99, 71, 0,5)

hsla(9, 100%, 64%, 0.5)

Ejemplo
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>

<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
Colores HTML RGB y RGBA
Un valor de color RGB representa las fuentes de luz RED, GREEN y
BLUE.

Un valor de color RGBA es una extensión de RGB con un canal Alfa

(opacidad).

Valores de color RGB

En HTML, se puede especificar un color como un valor RGB, utilizando esta
fórmula:

rgb (rojo, verde, azul)

Cada parámetro (rojo, verde y azul) define la intensidad del color con un
valor entre 0 y 255.

Esto significa que hay 256 x 256 x 256 = 16777216 colores posibles!

Por ejemplo, rgb(255, 0, 0) se muestra como rojo, porque el rojo se

establece en su valor más alto (255) y los otros dos (verde y azul) se
establecen en 0.

Otro ejemplo, rgb(0, 255, 0) se muestra como verde, porque el verde se

establece en su valor más alto (255) y los otros dos (rojo y azul) se
establecen en 0.

Para mostrar el negro, establezca todos los parámetros de color en 0, de la

siguiente manera: rgb(0, 0, 0).

Para mostrar blanco, establezca todos los parámetros de color en 255, de

la siguiente manera: rgb(255, 255, 255).

Experimente mezclando los siguientes valores RGB

Tonos de gris
Los tonos de gris a menudo se definen utilizando valores iguales para los
tres parámetros:

Ejemplo

rgb(60, 60, 60)

rgb(100, 100, 100)

rgb(140, 140, 140)

rgb(180, 180, 180)

rgb(200, 200, 200)

rgb(240, 240, 240)

Valores de color RGBA

Los valores de color RGBA son una extensión de los valores de color RGB
con un canal Alfa, que especifica la opacidad de un color.

Se especifica un valor de color RGBA con:

rgba (rojo, verde, azul, alfa)

El parámetro alfa es un número entre 0.0 (totalmente transparente) y 1.0
(no transparente en absoluto):

Experimente mezclando los valores RGBA a continuación:

Colores
HEXADECIMALES HTML
n color hexadecimal se especifica con: #RRGGBB, donde los enteros
hexadecimales RR (rojo), GG (verde) y BB (azul) especifican los
componentes del color.

Valores de color HEX

En HTML, se puede especificar un color utilizando un valor hexadecimal en
el formulario:

#rrggbb
Donde rr (rojo), gg (verde) y bb (azul) son valores hexadecimales entre 00
y ff (igual que el decimal 0-255).

Por ejemplo, #ff0000 se muestra como rojo, porque el rojo se establece en

su valor más alto (ff) y los otros dos (verde y azul) se establecen en 00.

Otro ejemplo, #00ff00 se muestra como verde, porque el verde se

establece en su valor más alto (ff) y los otros dos (rojo y azul) se
establecen en 00.

Para mostrar el negro, establezca todos los parámetros de color en 00, así:
#000000.

Para mostrar blanco, establezca todos los parámetros de color en ff, así:
#ffffff.

Experimente mezclando los valores HEX a continuación:

Tonos de gris
Los tonos de gris a menudo se definen utilizando valores iguales para los
tres parámetros:

Colores HTML HSL y HSLA

HSL significa tono, saturación y ligereza.
Los valores de color HSLA son una extensión de HSL con un canal Alfa
(opacidad).

Valores de color HSL

En HTML, se puede especificar un color utilizando el tono, la saturación y la
luminosidad (HSL) en el formulario:

hsl (tono, saturación, ligereza)

El tono es un grado en la rueda de color de 0 a 360. 0 es rojo, 120 es verde
y 240 es azul.

La saturación es un valor porcentual. 0% significa un tono de gris, y 100%

es el color completo.

La ligereza también es un valor porcentual. El 0% es negro y el 100% es

blanco.

Experimente mezclando los valores de HSL a continuación:

Saturación
La saturación se puede describir como la intensidad de un color.

100% es color puro, sin tonos de gris.

50% es 50% gris, pero aún puedes ver el color.

0% es completamente gris; ya no se puede ver el color.

Estilos HTML - CSS
CSS son las siglas de Cascading Style Sheets.

CSS ahorra mucho trabajo. Puede controlar el diseño de varias páginas

web a la vez.

¿Qué es CSS?
Las hojas de estilo en cascada (CSS) se utilizan para dar formato al diseño
de una página web.

Con CSS, puede controlar el color, la fuente, el tamaño del texto, el

espaciado entre los elementos, cómo se colocan y diseñan los elementos,
qué imágenes de fondo o colores de fondo se utilizarán, diferentes pantallas
para diferentes dispositivos y tamaños de pantalla, ¡y mucho más!

Propina: La palabra en cascada significa que un estilo aplicado a un

elemento primario también se aplicará a todos los elementos secundarios
dentro del padre. Por lo tanto, si establece el color del texto del cuerpo en
"azul", todos los encabezados, párrafos y otros elementos de texto dentro
del cuerpo también obtendrán el mismo color (a menos que especifique
algo más).

Uso de CSS
CSS se puede agregar a los documentos HTML de 3 maneras:

 En línea: mediante el uso del atributo dentro de los elementos

HTMLstyle
 Interno: mediante el uso de un elemento en la sección<style><head>
 Externo: mediante el uso de un elemento para vincular a un archivo
CSS externo<link>

La forma más común de agregar CSS es mantener los estilos en archivos

CSS externos. Sin embargo, en este tutorial usaremos estilos en línea e
internos, porque esto es más fácil de demostrar, y más fácil para que lo
pruebes tú mismo.

CSS en línea
Un CSS en línea se utiliza para aplicar un estilo único a un único elemento
HTML.

Un CSS en línea utiliza el atributo de un elemento HTML.style

En el ejemplo siguiente se establece el color del texto del elemento en azul

y el color del texto del elemento en rojo:<h1><p>

Ejemplo
<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

CSS interno
Un CSS interno se utiliza para definir un estilo para una sola página HTML.

Un CSS interno se define en la sección de una página HTML, dentro de un

elemento.<head><style>

En el ejemplo siguiente se establece el color del texto de TODOS los

elementos (de esa página) en azul y el color del texto de TODOS los
elementos en rojo. Además, la página se mostrará con un color de fondo
"powderblue": <h1><p>

Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Pruébelo usted mismo »

CSS externo
Se utiliza una hoja de estilos externa para definir el estilo de muchas
páginas HTML.

Para usar una hoja de estilos externa, agréguele un enlace en la sección de

cada página HTML:<head>

Ejemplo
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

La hoja de estilos externa se puede escribir en cualquier editor de texto. El

archivo no debe contener ningún código HTML y debe guardarse con una
extensión .css.

Así es como se ve el archivo "styles.css":

"estilos.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Propina: ¡Con una hoja de estilos externa, puede cambiar el aspecto de un
sitio web completo, cambiando un archivo!

Colores, fuentes y tamaños CSS

Aquí, demostraremos algunas propiedades CSS de uso común. Aprenderá
más sobre ellos más adelante.

La propiedad CSS define el color del texto que se va a utilizar.color

La propiedad CSS define la fuente que se va a utilizar.font-family

La propiedad CSS define el tamaño del texto que se va a utilizar.font-size

Ejemplo
Uso de propiedades css de color, familia de fuentes y tamaño de fuente:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Borde CSS
La propiedad CSS define un borde alrededor de un elemento HTML.border

Propina: Puede definir un borde para casi todos los elementos HTML.

Ejemplo
Uso de la propiedad de borde CSS:

p {
border: 2px solid powderblue;
}

Relleno CSS
La propiedad CSS define un relleno (espacio) entre el texto y el
borde.padding

Ejemplo
Uso de las propiedades de borde y relleno CSS:

p {
border: 2px solid powderblue;
padding: 30px;
}
Margen CSS
La propiedad CSS define un margen (espacio) fuera del borde.margin

Ejemplo
Uso de las propiedades de borde y margen CSS:

p {
border: 2px solid powderblue;
margin: 50px;
}

Link to External CSS

External style sheets can be referenced with a full URL or with a path
relative to the current web page.

Example
This example uses a full URL to link to a style sheet:

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.cs

s">

Ejemplo
En este ejemplo se vincula a una hoja de estilos ubicada en la carpeta html
del sitio Web actual:

<link rel="stylesheet" href="/html/styles.css">

Ejemplo
En este ejemplo se vincula a una hoja de estilos ubicada en la misma
carpeta que la página actual:

<link rel="stylesheet" href="styles.css">

Enlaces HTML
Los enlaces se encuentran en casi todas las páginas web. Los enlaces
permiten a los usuarios hacer clic en su camino de una página a otra.
Enlaces HTML - Hipervínculos
Los enlaces HTML son hipervínculos.

Puede hacer clic en un enlace y saltar a otro documento.

Cuando mueva el mouse sobre un enlace, la flecha del mouse se convertirá

en una manita.

Nota: Un enlace no tiene que ser texto. ¡Un enlace puede ser una imagen o
cualquier otro elemento HTML!

Enlaces HTML - Sintaxis

La etiqueta HTML define un hipervínculo. Tiene la siguiente sintaxis:<a>

<a href="url">link text</a>

El atributo más importante del elemento es el atributo href, que indica el

destino del enlace.<a>

El texto del enlace es la parte que será visible para el lector.

Al hacer clic en el texto del enlace, se enviará al lector a la dirección URL

especificada.

Ejemplo
En este ejemplo se muestra cómo crear un vínculo a W3Schools.com:

<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

De forma predeterminada, los enlaces aparecerán de la siguiente manera

en todos los navegadores:

 Un enlace no visitado está subrayado y en azul

 Un enlace visitado está subrayado y morado
 Un enlace activo está subrayado y en rojo

Propina: Los enlaces, por supuesto, se pueden diseñar con CSS, ¡para
obtener otro aspecto!

Vínculos HTML: el atributo de destino

De forma predeterminada, la página vinculada se mostrará en la ventana
actual del navegador. Para cambiar esto, debe especificar otro destino para
el vínculo.

El atributo especifica dónde abrir el documento vinculado.target

El atributo puede tener uno de los siguientes valores:target

 _self - Por defecto. Abre el documento en la misma ventana/pestaña
en la que se hizo clic en él
 _blank - Abre el documento en una nueva ventana o pestaña
 _parent - Abre el documento en el marco padre
 _top - Abre el documento en todo el cuerpo de la ventana

Ejemplo
Utilice target="_blank" para abrir el documento vinculado en una nueva
ventana o pestaña del navegador:

<a href="https://www.w3schools.com/" target="_blank">Visit

W3Schools!</a>

URL absolutas frente a URL relativas

Los dos ejemplos anteriores utilizan una URL absoluta (una dirección web
completa) en el atributo.href

Un enlace local (un enlace a una página dentro del mismo sitio web) se
especifica con una URL relativa (sin la parte "https://www"):

Ejemplo
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

Enlaces HTML - Diferentes

colores
Un enlace HTML se muestra en un color diferente dependiendo de si se
ha visitado, no se ha visitado o está activo.

Colores de enlace HTML

De forma predeterminada, aparecerá un enlace como este (en todos los
navegadores):

 Un enlace no visitado está subrayado y en azul

 Un enlace visitado está subrayado y morado
 Un enlace activo está subrayado y en rojo

Puede cambiar los colores de estado del vínculo mediante CSS:

Ejemplo
Aquí, un enlace no visitado será verde sin subrayado. Un enlace visitado
será de color rosa sin subrayado. Un enlace activo será amarillo y
subrayado. Además, al pasar el ratón sobre un enlace (a:hover) se volverá
rojo y subrayado:

a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}

a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}

a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>

Botones de enlace
Un enlace también se puede diseñar como un botón, mediante CSS:

Este es un enlace
Ejemplo
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: red;
}
</style>
Enlaces HTML - Crear
marcadores
Los enlaces HTML se pueden usar para crear marcadores, de modo que
los lectores puedan saltar a partes específicas de una página web.

Crear un marcador en HTML

Los marcadores pueden ser útiles si una página web es muy larga.

Para crear un marcador, primero cree el marcador y, a continuación,

agréguele un enlace.

Cuando se hace clic en el enlace, la página se desplazará hacia abajo o

hacia arriba hasta la ubicación con el marcador.

Ejemplo
Primero, use el atributo para crear un marcador:id

<h2 id="C4">Chapter 4</h2>

Luego, agregue un enlace al marcador ("Saltar al Capítulo 4"), desde la

misma página:

Ejemplo
<a href="#C4">Jump to Chapter 4</a>

También puede agregar un enlace a un marcador en otra página:

<a href="html_demo.html#C4">Jump to Chapter 4</a>

Imágenes HTML
Las imágenes pueden mejorar el diseño y la apariencia de una página
web.

Ejemplo
<img src="pic_trulli.jpg" alt="Italian Trulli">
Ejemplo
<img src="img_girl.jpg" alt="Girl in a jacket">
Ejemplo
<img src="img_chania.jpg" alt="Flowers in Chania">

Sintaxis de imágenes HTML

La etiqueta HTML se utiliza para incrustar una imagen en una página
web.<img>

Las imágenes no se insertan técnicamente en una página web; las

imágenes están vinculadas a páginas web. La etiqueta crea un espacio de
retención para la imagen a la que se hace referencia.<img>

La etiqueta está vacía, contiene solo atributos y no tiene una etiqueta de

cierre.<img>

La etiqueta tiene dos atributos obligatorios:<img>

 src: especifica la ruta de acceso a la imagen

 ALT: especifica un texto alternativo para la imagen

Sintaxis
<img src="url" alt="alternatetext">

El atributo src
El atributo requerido especifica la ruta de acceso (URL) a la imagen.src

Nota: Cuando se carga una página web, es el navegador, en ese momento,

el que obtiene la imagen de un servidor web y la inserta en la página. Por
lo tanto, asegúrese de que la imagen realmente permanezca en el mismo
lugar en relación con la página web, de lo contrario sus visitantes
obtendrán un icono de enlace roto. El icono de enlace roto y el texto se
muestran si el navegador no puede encontrar la imagen.alt

Ejemplo
<img src="img_chania.jpg" alt="Flowers in Chania">
ANUNCIO

El atributo alt
El atributo requerido proporciona un texto alternativo para una imagen, si
el usuario por alguna razón no puede verla (debido a una conexión lenta,
un error en el atributo src o si el usuario utiliza un lector de pantalla).alt

El valor del atributo debe describir la imagen:alt

Ejemplo
<img src="img_chania.jpg" alt="Flowers in Chania">

Si un navegador no puede encontrar una imagen, mostrará el valor del

atributo:alt

Ejemplo
<img src="wrongname.gif" alt="Flowers in Chania">
Propina: Un lector de pantalla es un programa de software que lee el
código HTML y permite al usuario "escuchar" el contenido. Los lectores de
pantalla son útiles para las personas con discapacidad visual o con
discapacidades de aprendizaje.

Tamaño de la imagen- Ancho y alto

Puede utilizar el atributo para especificar el ancho y el alto de una
imagen.style

Ejemplo
<img src="img_girl.jpg" alt="Girl in a
jacket" style="width:500px;height:600px;">

Alternativamente, puede utilizar los atributos y:widthheight

Ejemplo
<img src="img_girl.jpg" alt="Girl in a
jacket" width="500" height="600">

Los atributos y siempre definen el ancho y el alto de la imagen en

píxeles.widthheight

Nota: Especifique siempre el ancho y el alto de una imagen. Si no se

especifican el ancho y el alto, la página web puede parpadear mientras se
carga la imagen.

¿Ancho y alto, o estilo?

Los atributos , y , son válidos en HTML.widthheightstyle

Sin embargo, sugerimos usar el atributo. Evita que las hojas de estilos
cambien el tamaño de las imágenes:style

Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<img src="html5.gif" alt="HTML5

Icon" style="width:128px;height:128px;">

</body>
</html>

Mapas de imágenes HTML

Con los mapas de imágenes HTML, puede crear áreas en las que se
puede hacer clic en una imagen.

Mapas de imágenes
La etiqueta HTML define un mapa de imagen. Un mapa de imagen es una
imagen con áreas en las que se puede hacer clic. Las áreas se definen con
una o más etiquetas. <map><area>

Intente hacer clic en la computadora, el teléfono o la taza de café en la

imagen a continuación:
Ejemplo
Aquí está el código fuente HTML para el mapa de imagen de arriba:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

¿Cómo funciona?
La idea detrás de un mapa de imagen es que debería poder realizar
diferentes acciones dependiendo de en qué parte de la imagen haga clic.

Para crear un mapa de imagen, necesita una imagen y algún código HTML
que describa las áreas en las que se puede hacer clic.

The Image
The image is inserted using the tag. The only difference from other images
is that you must add a attribute:<img>usemap

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

The value starts with a hash tag followed by the name of the image map,
and is used to create a relationship between the image and the image
map.usemap#

Tip: You can use any image as an image map!

Create Image Map

Then, add a element.<map>

The element is used to create an image map, and is linked to the image by
using the required attribute:<map>name

The attribute must have the same value as the 's attribute .name<img>usemap

The Areas
Then, add the clickable areas.

A clickable area is defined using an element.<area>

Shape
You must define the shape of the clickable area, and you can choose one of
these values:

 rect - defines a rectangular region

 circle - defines a circular region
 poly - defines a polygonal region
 default - defines the entire region

You must also define some coordinates to be able to place the clickable
area onto the image.

Shape="rect"
The coordinates for come in pairs, one for the x-axis and one for the y-
axis.shape="rect"

So, the coordinates is located 34 pixels from the left margin and 44 pixels
from the top:34,44
The coordinates is located 270 pixels from the left margin and 350 pixels
from the top:270,350

Now we have enough data to create a clickable rectangular area:

Example
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">

This is the area that becomes clickable and will send the user to the page
"computer.htm":
Shape="circle"
To add a circle area, first locate the coordinates of the center of the circle:

337,300

A continuación, especifique el radio del círculo:

44 Píxeles
Ahora tiene suficientes datos para crear un área circular en la que se pueda
hacer clic:

Ejemplo
<area shape="circle" coords="337, 300, 44" href="coffee.htm">

Esta es el área en la que se puede hacer clic y enviará al usuario a la

página "café.htm":

Forma="poli"
Contiene varios puntos de coordenadas, lo que crea una forma formada con
líneas rectas (un polígono).shape="poly"
Esto se puede utilizar para crear cualquier forma.

¡Como tal vez una forma de croissant!

¿Cómo podemos hacer que el croissant de la imagen de abajo se convierta

en un enlace en el que se pueda hacer clic?

We have to find the x and y coordinates for all edges of the croissant:
Las coordenadas vienen en pares, uno para el eje x y otro para el eje y:

Ejemplo
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,14
0,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.ht
m">

Esta es el área en la que se puede hacer clic y enviará al usuario a la

página "croissant.htm":
Mapa de imágenes y JavaScript
Un área en la que se puede hacer clic también puede activar una función
javascript.

Agregue un evento al elemento para ejecutar una función

javascript:click<area>

Ejemplo
Aquí, usamos el atributo onclick para ejecutar una función javascript
cuando se hace clic en el área:

Resumen del capítulo

 Usar el elemento HTML para definir un mapa de imagen<map>
 Utilice el elemento HTML para definir las áreas en las que se puede
hacer clic en el mapa de imágenes<area>
 Utilice el atributo HTML del elemento para apuntar a un mapa de
imagenusemap<img>

Etiquetas de imagen HTML

Tag Description

<img> Defines an image

<map> Defines an image map

<area> Defines a clickable area inside an image map

<picture> Defines a container for multiple image resources

Imágenes de fondo HTML

Se puede especificar una imagen de fondo para casi cualquier elemento
HTML.

Imagen de fondo en un elemento HTML

Para agregar una imagen de fondo en un elemento HTML, utilice el atributo
HTML y la propiedad CSS:stylebackground-image

Ejemplo
Agregar una imagen de fondo en un elemento HTML:
<p style="background-image: url('img_girl.jpg');">

También puede especificar la imagen de fondo en el elemento, en la

sección:<style><head>

Ejemplo
Especifique la imagen de fondo en el elemento:<style>

Imagen de fondo en una página

Si desea que toda la página tenga una imagen de fondo, debe especificar la
imagen de fondo en el elemento:<body>

Ejemplo
Agregue una imagen de fondo para toda la página:

Ejemplo
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>

Para evitar que la imagen de fondo se repita, establezca la propiedad en

.background-repeatno-repeat

Ejemplo
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>

Elemento HTML <picture>

El elemento HTML le permite mostrar diferentes imágenes para
diferentes dispositivos o tamaños de pantalla.<picture>

El elemento HTML <imagen>

El elemento HTML ofrece a los desarrolladores web más flexibilidad para
especificar recursos de imagen.<picture>

El elemento contiene uno o más elementos, cada uno de los cuales se

refiere a diferentes imágenes a través del atributo. De esta manera, el
navegador puede elegir la imagen que mejor se adapte a la vista y / o
dispositivo actual.<picture><source>srcset

Cada elemento tiene un atributo que define cuándo la imagen es la más

adecuada.<source>media

Ejemplo
Mostrar diferentes imágenes para diferentes tamaños de pantalla:
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>

FAVICON HTML
Un favicon es una pequeña imagen que se muestra junto al título de la
página en la pestaña del navegador.

Cómo agregar un favicon en HTML

Puedes usar cualquier imagen que te guste como tu favicon. También
puede crear su propio favicon en sitios como https://www.favicon.cc.

Propina: Un favicon es una imagen pequeña, por lo que debe ser una
imagen simple con alto contraste.

Una imagen de favicon se muestra a la izquierda del título de la página en

la pestaña del navegador, como esta:

Para agregar un favicon a su sitio web, guarde su imagen de favicon en el

directorio raíz de su servidor web, o cree una carpeta en el directorio raíz
llamada images, y guarde su imagen de favicon en esta carpeta. Un
nombre común para una imagen de favicon es "favicon.ico".

A continuación, agregue un elemento a su archivo "index.html", después

del elemento, como este:<link><title>

Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Tablas HTML
Las tablas HTML permiten a los desarrolladores web organizar los datos
en filas y columnas.

Definir una tabla HTML

Una tabla en HTML consta de celdas de tabla dentro de filas y columnas.

Ejemplo
Una tabla HTML simple:

<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>

Celdas de tabla
Cada celda de la tabla está definida por una y una etiqueta.<td></td>

td significa datos de tabla.

Todo entre y son el contenido de la celda de la tabla.<td></td>

Ejemplo
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>

Bordes de tabla HTML

Las tablas HTML pueden tener bordes de diferentes estilos y formas.

Cómo agregar un borde

Cuando se agrega un borde a una tabla, también se agregan bordes
alrededor de cada celda de la tabla:

Para agregar un borde, utilice la propiedad CSS en , , y los

elementos:bordertablethtd

Ejemplo
table, th, td {
border: 1px solid black;
}
Bordes de tabla contraídos
Para evitar tener bordes dobles como en el ejemplo anterior, establezca la
propiedad CSS en .border-collapsecollapse

Esto hará que las fronteras colapsen en una sola frontera:

Ejemplo
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

Tamaños de tabla HTML

Las tablas HTML pueden tener diferentes tamaños para cada columna,
fila o toda la tabla.

Utilice el atributo con las propiedades o para especificar el tamaño de

una tabla, fila o columna.stylewidthheight
Ancho de tabla HTML
Para establecer el ancho de una tabla, agregue el atributo al
elemento:style<table>

Ejemplo
Establezca el ancho de la tabla en 100%:

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Encabezados de tabla HTML

Las tablas HTML pueden tener encabezados para cada columna o fila, o
para muchas columnas/filas.

EMIL TOBIAS LINUS

8:00
9:00
10:00
11:00
12:00
13:00
Mon Martes Miércoles JUE Vie
8:00
9:00
10:00
11:00
12:00
DICIEMBRE

Encabezados de tabla HTML

Los encabezados de tabla se definen con elementos. Cada elemento
representa una celda de tabla.thth

Ejemplo
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Encabezados de tabla verticales

Para utilizar la primera columna como encabezados de tabla, defina la
primera celda de cada fila como un elemento: <th>

Ejemplo
<table>
<tr>
<th>Firstname</th>
<td>Jill</td>
<td>Eve</td>
</tr>
<tr>
<th>Lastname</th>
<td>Smith</td>
<td>Jackson</td>
</tr>
<tr>
<th>Age</th>
<td>94</td>
<td>50</td>
</tr>
</table>
Alinear encabezados de tabla
De forma predeterminada, los encabezados de tabla están en negrita y
centrados:

Nombre de pila Apellido Edad

Jill Herrero 50
Víspera Jackson 94

Para alinear a la izquierda los encabezados de tabla, utilice la propiedad

CSS:text-align

Ejemplo
th {
text-align: left;
}

Encabezado para varias columnas

Puede tener un encabezado que abarque más de dos o más columnas.

Nombre Edad
Jill Herrero 50
Víspera Jackson 94

Para ello, utilice el atributo del elemento:colspan<th>

Ejemplo
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Relleno y espaciado de
tablas HTML
Las tablas HTML pueden ajustar el relleno dentro de las celdas y
también el espacio entre las celdas.

Con acolchado

Hola Hola Hola

Con espaciado
Hola Hola Hola
Hola Hola Hola
Hola Hola Hola

Tabla HTML - Relleno de celdas

El relleno de celdas es el espacio entre los bordes de las celdas y el
contenido de las celdas.

De forma predeterminada, el relleno se establece en 0.

Para agregar relleno en celdas de tabla, utilice la propiedad CSS:padding

Ejemplo
th, td {
padding: 15px;

Para agregar relleno solo por encima del contenido, use la

propiedad.padding-top

Y los otros lados con el , , y las propiedades:padding-bottompadding-

leftpadding-right

Ejemplo
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}

Tabla HTML - Espaciado de celdas

El espaciado de celdas es el espacio entre cada celda.
De forma predeterminada, el espacio se establece en 2 píxeles.

Para cambiar el espacio entre las celdas de la tabla, utilice la propiedad

CSS del elemento: border-spacingtable

Ejemplo
table {
border-spacing: 30px;
}

Tabla HTML Colspan &

Rowspan
Las tablas HTML pueden tener celdas que se extienden sobre varias filas
y/o columnas.

NOMBRE

ABRIL

2022

FIESTA

Tabla HTML - Colspan

Para hacer que una celda se extienda sobre varias columnas, utilice el
atributo:colspan

Ejemplo
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>

Nota: El valor del atributo representa el número de columnas que se van a

abarcar.colspan

Tabla HTML - Rowspan

Para hacer que una celda se extienda sobre varias filas, utilice el
atributo:rowspan

Ejemplo
<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>

Estilo de tabla HTML

Usa CSS para que tus tablas se vean mejor.

Tabla HTML - Zebra Stripes

Si agrega un color de fondo en cada fila de la tabla, obtendrá un bonito
efecto de rayas de cebra.

1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
17 18 19 20

Para aplicar estilo a todos los demás elementos de fila de la tabla, utilice el
selector de la siguiente manera::nth-child(even)

Ejemplo
tr:nth-child(even) {
background-color: #D6EEEE;
}
Colgroup de tabla HTML
El elemento se utiliza para aplicar estilo a columnas específicas de una
tabla.<colgroup>

Colgroup de tabla HTML

Si desea aplicar estilo a las dos primeras columnas de una tabla, utilice los
elementos y. <colgroup><col>

Mon Martes Miércoles JUE Vie Sábado Sol

1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28

El elemento debe utilizarse como contenedor para las especificaciones de la

columna.<colgroup>

Cada grupo se especifica con un elemento.<col>

El atributo especifica cuántas columnas obtienen el estilo.span

El atributo especifica el estilo que se va a dar a las columnas.style

Nota: Hay una selección muy limitada de propiedades CSS legales para
colgroups.

Ejemplo
<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>

Listas HTML
Las listas HTML permiten a los desarrolladores web agrupar un conjunto
de elementos relacionados en listas.

Ejemplo
Una lista HTML desordenada:

 Artículo
 Artículo
 Artículo
 Artículo

Una lista HTML ordenada:

1. Primer punto
2. Segundo punto
3. Tercer punto
4. Cuarto punto

Lista HTML desordenada

Una lista desordenada comienza con la etiqueta. Cada elemento de lista
comienza con la etiqueta.<ul><li>

Los elementos de la lista se marcarán con viñetas (pequeños círculos

negros) de forma predeterminada:

Ejemplo
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Lista HTML ordenada

Una lista ordenada comienza con la etiqueta. Cada elemento de lista
comienza con la etiqueta.<ol><li>

Los elementos de la lista se marcarán con números de forma

predeterminada:

Ejemplo
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Bloque HTML y elementos en

línea
Cada elemento HTML tiene un valor de visualización predeterminado,
dependiendo del tipo de elemento que sea.

Hay dos valores de visualización: bloque y en línea.

Elementos a nivel de bloque
Un elemento de nivel de bloque siempre comienza en una nueva línea, y los
navegadores agregan automáticamente algo de espacio (un margen) antes
y después del elemento.

Un elemento a nivel de bloque siempre ocupa todo el ancho disponible (se

extiende a la izquierda y a la derecha hasta donde puede).

Dos elementos de bloque de uso común son: y .<p><div>

El elemento define un párrafo en un documento HTML.<p>

El elemento define una división o una sección en un documento HTML.<div>

El elemento <p> es un elemento de nivel de bloque.

El elemento <div> es un elemento de nivel de bloque.

Ejemplo
<p>Hello World</p>
<div>Hello World</div>

Estos son los elementos de nivel de bloque en HTML:

<dirección>
<artículo>
<sósido>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcapción>
<figura>
<footer>
<formulario>
<1>-<h6>
<cabezado>
<hr>
<li>
<mantener>
<nave>
<noscript>
<ol>
<p>
<pre>
<sección>
<tablable>
<piezo>
<ul>
<video>

Elementos en línea
Un elemento en línea no comienza en una línea nueva.

Un elemento en línea solo ocupa la anchura necesaria.

Este es un elemento <pan> dentro de un párrafo.

Ejemplo
<span>Hello World</span>

Estos son los elementos en línea en HTML:

<a>
<abbr>
<acrónimo>
<b>
<bdo>
<big>
<br>
<botón>
<cite>
<código>
<d.>
<em>
<i>
<img>
<input>
<kbd>
<etiqueta>
<mapa>
<objeto>
<despertenido>
<q>
<samp>
<índice>
<seleccionar>
<pequeño>
<spano>
< fuerte>
<sub>
<sué>
<textarea>
<tiempo>
<tt>
<var>
Nota: ¡Un elemento en línea no puede contener un elemento de nivel de
bloque!

El elemento <div>
El elemento se utiliza a menudo como contenedor para otros elementos
HTML.<div>

El elemento no tiene atributos obligatorios, pero , y son

comunes.<div>styleclassid

Cuando se usa junto con CSS, el elemento se puede usar para aplicar estilo
a bloques de contenido:<div>

Ejemplo
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous
city in the United Kingdom, with a metropolitan area of over 13
million inhabitants.</p>
</div>

Atributo de clase HTML

El atributo HTML se utiliza para especificar una clase para un elemento
HTML.class

Varios elementos HTML pueden compartir la misma clase.

Uso del atributo de clase

El atributo se utiliza a menudo para apuntar a un nombre de clase en una
hoja de estilos. También puede ser utilizado por un JavaScript para acceder
y manipular elementos con el nombre de clase específico.class

En el siguiente ejemplo tenemos tres elementos con un atributo con el

valor de "ciudad". Los tres elementos se diseñarán por igual de acuerdo con
la definición de estilo en la sección de la cabeza:<div>class<div>.city
Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>

<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>

<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>

<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>

Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>

<p>This is some <span class="note">important</span> text.</p>

</body>
</html>

La sintaxis de la clase
Para crear una clase; escriba un carácter de punto (.), seguido de un
nombre de clase. A continuación, defina las propiedades CSS dentro de las
llaves rizadas {}:
Ejemplo
Cree una clase denominada "ciudad":

<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</body>
</html>

Múltiples clases
Los elementos HTML pueden pertenecer a más de una clase.

Para definir varias clases, separe los nombres de clase con un espacio, por
ejemplo, <div class="city main">. El elemento se diseñará de acuerdo con
todas las clases especificadas.

En el ejemplo siguiente, el primer elemento pertenece tanto a la clase

como a la clase, y obtendrá los estilos CSS de ambas
clases: <h2> citymain

Ejemplo
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

Diferentes elementos pueden compartir

la misma clase
Diferentes elementos HTML pueden apuntar al mismo nombre de clase.
En el siguiente ejemplo, ambos y apuntan a la clase "city" y compartirán el
mismo estilo:<h2><p>

Ejemplo
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>

Uso del atributo de clase en JavaScript

JavaScript también puede utilizar el nombre de la clase para realizar ciertas
tareas para elementos específicos.

JavaScript puede acceder a elementos con un nombre de clase específico

con el método:getElementsByClassName()

Ejemplo
Haga clic en un botón para ocultar todos los elementos con el nombre de
clase "ciudad":

Atributo de
identificador HTML
El atributo HTML se utiliza para especificar un identificador único para un
elemento HTML.id

No puede tener más de un elemento con el mismo identificador en un

documento HTML.

Uso del atributo id

El atributo especifica un identificador único para un elemento HTML. El
valor del atributo debe ser único dentro del documento HTML.idid

El atributo se utiliza para apuntar a una declaración de estilo específica en

una hoja de estilos. También es utilizado por JavaScript para acceder y
manipular el elemento con el id específico.id
La sintaxis de id es: escribir un carácter hash (#), seguido de un nombre
id. A continuación, defina las propiedades CSS dentro de las llaves rizadas
{}.

En el siguiente ejemplo tenemos un elemento que apunta al nombre id

"myHeader". Este elemento se diseñará de acuerdo con la definición de
estilo en la sección de la cabeza:<h1><h1>#myHeader

Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>

Nota: ¡El nombre de la identificación distingue entre mayúsculas y

minúsculas!

Nota: El nombre del identificador debe contener al menos un carácter, no

puede comenzar con un número y no debe contener espacios en blanco
(espacios, pestañas, etc.).

Diferencia entre clase e ID

Un nombre de clase puede ser utilizado por varios elementos HTML,
mientras que un nombre de id sólo debe ser utilizado por un elemento
HTML dentro de la página:

Ejemplo
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}

/* Style all elements with the class name "city" */

.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>

<h1 id="myHeader">My Cities</h1>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

Iframes HTML
Un iframe HTML se utiliza para mostrar una página web dentro de una
página web.

Sintaxis de Iframe HTML

La etiqueta HTML especifica un marco en línea.<iframe>

Un marco en línea se utiliza para incrustar otro documento dentro del

documento HTML actual.

Sintaxis
<iframe src="url" title="description"></iframe>

Propina: Es una buena práctica incluir siempre un atributo para el archivo

. Esto es utilizado por los lectores de pantalla para leer cuál es el contenido
del iframe. title<iframe>

Iframe - Establecer altura y anchura

Utilice los atributos y para especificar el tamaño del iframe.heightwidth
La altura y el ancho se especifican en píxeles de forma predeterminada:

Ejemplo
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe
Example"></iframe>

O puede agregar el atributo y usar el CSS y las propiedades:styleheightwidth

Ejemplo
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title
="Iframe Example"></iframe>

JavaScript HTML
JavaScript hace que las páginas HTML sean más dinámicas e
interactivas.

Ejemplo

My First JavaScript
Click me to display Date and Time

La etiqueta HTML <script>

La etiqueta HTML se utiliza para definir un script del lado del cliente
(JavaScript).<script>

El elemento contiene instrucciones de script o apunta a un archivo de script

externo a través del atributo.<script>src

Los usos comunes de JavaScript son la manipulación de imágenes, la

validación de formularios y los cambios dinámicos de contenido.

Para seleccionar un elemento HTML, JavaScript utiliza con mayor frecuencia

el método.document.getElementById()

Este ejemplo de JavaScript escribe "Hello JavaScript!" en un elemento

HTML con id="demo":

Ejemplo
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
Propina: Puede aprender mucho más sobre JavaScript en nuestro Tutorial
de JavaScript.

Un sabor de JavaScript
Estos son algunos ejemplos de lo que JavaScript puede hacer:

Ejemplo
JavaScript puede cambiar el contenido:

document.getElementById("demo").innerHTML = "Hello JavaScript!";

Ejemplo
JavaScript puede cambiar estilos:

document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";

Ejemplo
JavaScript puede cambiar atributos:

document.getElementById("image").src = "picture.gif";

Rutas de archivo HTML

Una ruta de acceso de archivo describe la ubicación de un archivo en la
estructura de carpetas de un sitio web.

Ejemplos de ruta de archivo

Rutas de archivo HTML
Una ruta de acceso de archivo describe la ubicación de un archivo en la
estructura de carpetas de un sitio web.

Las rutas de archivo se utilizan al vincular a archivos externos, como:

 Páginas web
 Imágenes
 Hojas de estilo
 JavaScripts

Rutas absolutas de archivo

Una ruta de archivo absoluta es la URL completa de un archivo:

Ejemplo
<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain
">

La etiqueta <img> se explica en el capítulo: Imágenes HTML.

Rutas de archivo relativas

Una ruta de acceso de archivo relativa apunta a un archivo relativo a la
página actual.

En el ejemplo siguiente, la ruta de acceso del archivo apunta a un archivo

de la carpeta images ubicada en la raíz del web actual:

Ejemplo
<img src="/images/picture.jpg" alt="Mountain">

En el ejemplo siguiente, la ruta de acceso del archivo apunta a un archivo

de la carpeta de imágenes ubicada en la carpeta actual:

Ejemplo
<img src="images/picture.jpg" alt="Mountain">

En el ejemplo siguiente, la ruta de acceso del archivo apunta a un archivo

de la carpeta de imágenes ubicada en la carpeta un nivel superior a la
carpeta actual:

Ejemplo
<img src="../images/picture.jpg" alt="Mountain">

HTML - El elemento Head

El elemento HTML es un contenedor para los siguientes elementos: , , , ,
, y .<head><title><style><meta><link><script><base>

El elemento HTML <head>

El elemento es un contenedor de metadatos (datos sobre datos) y se coloca
entre la etiqueta y la etiqueta.<head><html><body>

Los metadatos HTML son datos sobre el documento HTML. No se muestran

los metadatos.

Los metadatos suelen definir el título del documento, el juego de

caracteres, los estilos, los scripts y otra metainformación.

El elemento HTML <title>

El elemento define el título del documento. El título debe ser solo de texto y
se muestra en la barra de título del navegador o en la pestaña de la
página.<title>

¡El elemento es necesario en los documentos HTML!<title>

¡El contenido del título de una página es muy importante para la

optimización de motores de búsqueda (SEO)! El título de la página es
utilizado por los algoritmos de los motores de búsqueda para decidir el
orden al enumerar las páginas en los resultados de búsqueda.

El elemento:<title>

 define un título en la barra de herramientas del explorador

 Proporciona un título para la página cuando se agrega a Favoritos
 muestra un título para la página en los resultados del motor de
búsqueda

Por lo tanto, ¡trata de hacer que el título sea lo más preciso y significativo
posible!

Un documento HTML simple:

Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page Title</title>
</head>
<body>

The content of the document......

</body>
</html>

El elemento HTML <style>

El elemento se utiliza para definir información de estilo para una sola
página HTML:<style>

Ejemplo
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>

Elementos y técnicas de
diseño HTML
Los sitios web a menudo muestran contenido en varias columnas (como
una revista o un periódico).

Diseño Web HTML

Responsive
El diseño web responsivo se trata de crear páginas web que se vean
bien en todos los dispositivos!

Un diseño web responsivo se ajustará automáticamente para diferentes

tamaños de pantalla y ventanas gráficas.

¿Qué es el Diseño Web Responsive?

El diseño web responsivo se trata de usar HTML y CSS para cambiar
automáticamente el tamaño, ocultar, reducir o ampliar un sitio web, para
que se vea bien en todos los dispositivos (computadoras de escritorio,
tabletas y teléfonos):

Configuración de la ventana gráfica

Para crear un sitio web responsivo, agregue la siguiente etiqueta a todas
sus páginas web:<meta>

Ejemplo
<meta name="viewport" content="width=device-width, initial-
scale=1.0">

Esto establecerá la ventana gráfica de su página, que le dará al navegador

instrucciones sobre cómo controlar las dimensiones y la escala de la
página.

Aquí hay un ejemplo de una página web sin la metaetiqueta viewport y la

misma página web con la metaetiqueta viewport:
Sin la metaetiqueta viewport:

Con la metaetiqueta viewport:

Elementos de código
informático HTML
HTML contiene varios elementos para definir la entrada del usuario y el
código informático.

Ejemplo
<code>
x = 5;
y = 6;
z = x + y;
</code>
HTML <kbd> para entrada de teclado
El elemento HTML se utiliza para definir la entrada del teclado. El contenido
interior se muestra en la fuente monoespacio predeterminada del
navegador.<kbd>

Ejemplo
Defina parte del texto como entrada de teclado en un documento:

<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>

Resultado:

Save the document by pressing Ctrl + S

HTML <samp> para la salida del

programa
El elemento HTML se utiliza para definir la salida de ejemplo de un
programa informático. El contenido interior se muestra en la fuente
monoespacio predeterminada del navegador.<samp>

Ejemplo
Defina algún texto como salida de ejemplo de un programa informático en
un documento:

<p>Message from my computer:</p>

<p><samp>File not found.<br>Press F1 to continue</samp></p>

Resultado:

Message from my computer:

File not found.
Press F1 to continue

ANUNCIO

CÓDIGO < HTML> para código

informático
El elemento HTML se utiliza para definir una pieza de código informático. El
contenido interior se muestra en la fuente monoespacio predeterminada del
navegador.<code>

Ejemplo
Defina algún texto como código informático en un documento:

Resultado:
x = 5; y = 6; z = x + y;

Observe que el elemento no conserva espacios en blanco adicionales ni

saltos de línea.<code>

Para solucionar esto, puede colocar el elemento dentro de un

elemento:<code><pre>

Ejemplo
<pre>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>

Resultado:

x = 5;
y = 6;
z = x + y;

Elementos semánticos HTML

Elementos semánticos = elementos con un significado.

¿Qué son los elementos semánticos?

Un elemento semántico describe claramente su significado tanto para el
navegador como para el desarrollador.

Ejemplos de elementos no semánticos: y - No dice nada sobre su

contenido.<div><span>

Ejemplos de elementos semánticos: , , y - Define claramente su

contenido.<form><table><article>

Elementos semánticos en HTML

Muchos sitios web contienen código HTML como: <div id="nav"> <div
class="header"> <div id="footer"> para indicar navegación, encabezado y
pie de página.
En HTML hay algunos elementos semánticos que se pueden utilizar para
definir diferentes partes de una página web:

 <artículo>
 <sósido>
 <detalles>
 <figcapción>
 <figura>
 <footer>
 <cabezado>
 <mantener>
 <marca>
 <nave>
 <sección>
 <resumen>
 <tiempo>

Elemento HTML <section>

El elemento define una sección en un documento.<section>

Según la documentación HTML del W3C: "Una sección es una agrupación

temática de contenido, generalmente con un encabezado".

Ejemplos de dónde se puede utilizar un elemento:<section>

 Capítulos
 Introducción
 Noticias
 Información de contacto

Una página web normalmente podría dividirse en secciones para la

introducción, el contenido y la información de contacto.

Ejemplo
Dos secciones de un documento:

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international
organization working on issues regarding the conservation, research
and restoration of the environment, formerly named the World Wildlife
Fund. WWF was founded in 1961.</p>
</section>

<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo
of WWF originated from a panda named Chi Chi that was transferred
from the Beijing Zoo to the London Zoo in the same year of the
establishment of WWF.</p>
</section>

Guía de estilo HTML

Un código HTML consistente, limpio y ordenado hace que sea más fácil
para otros leer y entender su código.

Aquí hay algunas pautas y consejos para crear un buen código HTML.

Declarar siempre el tipo de documento

Declare siempre el tipo de documento como la primera línea del
documento.

El tipo de documento correcto para HTML es:

<!DOCTYPE html>

Usar nombres de elementos en

minúsculas
HTML permite mezclar letras mayúsculas y minúsculas en nombres de
elementos.

Sin embargo, se recomienda utilizar nombres de elementos en minúsculas,

ya que:

 Mezclar nombres en mayúsculas y minúsculas se ve mal

 Los desarrolladores normalmente usan nombres en minúsculas
 Las minúsculas se ven más limpias
 Las minúsculas son más fáciles de escribir

Bien:
<body>
<p>This is a paragraph.</p>
</body>

Malo:
<BODY>
<P>This is a paragraph.</P>
</BODY>

ANUNCIO

Cerrar todos los elementos HTML

En HTML, no es necesario cerrar todos los elementos (por ejemplo, el
elemento). <p>

Sin embargo, recomendamos encarecidamente cerrar todos los elementos

HTML, como este:

Bien:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>

Malo:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>

Usar nombres de atributos en minúsculas

HTML permite mezclar letras mayúsculas y minúsculas en nombres de
atributos.

Sin embargo, se recomienda utilizar nombres de atributos en minúsculas,

ya que:

 Mezclar nombres en mayúsculas y minúsculas se ve mal

 Los desarrolladores normalmente usan nombres en minúsculas
 Las minúsculas se ven más limpias
 Las minúsculas son más fáciles de escribir

Bien:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

Malo:
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Citar siempre valores de atributo
HTML permite valores de atributo sin comillas.

Sin embargo, recomendamos citar los valores de atributo, porque:

 Los desarrolladores normalmente citan valores de atributos

 Los valores citados son más fáciles de leer
 DEBE usar comillas si el valor contiene espacios

Bien:
<table class="striped">

Malo:
<table class=striped>

Muy malo:
Esto no funcionará, porque el valor contiene espacios:

<table class=table striped>

Especifique siempre alt, ancho y alto para

las imágenes
Especifique siempre el atributo para las imágenes. Este atributo es
importante si la imagen por alguna razón no se puede mostrar.alt

Además, defina siempre el y de las imágenes. Esto reduce el parpadeo,

porque el navegador puede reservar espacio para la imagen antes de
cargarla.width height

Bien:
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Malo:
<img src="html5.gif">

Espacios y signos iguales

HTML permite espacios alrededor de signos iguales. Pero sin espacio es
más fácil de leer y agrupa mejor las entidades.

Bien:
<link rel="stylesheet" href="styles.css">
Malo:
<link rel = "stylesheet" href = "styles.css">

Evite las largas líneas de código

Cuando se utiliza un editor HTML, NO es conveniente desplazarse hacia la
derecha y la izquierda para leer el código HTML.

Trate de evitar líneas de código demasiado largas.

Líneas en blanco y sangría

No agregue líneas, espacios o sangrías en blanco sin una razón.

Para facilitar la lectura, agregue líneas en blanco para separar bloques de

código grandes o lógicos.

Para facilitar la lectura, agregue dos espacios de sangría. No utilice la tecla

tab.

Bien:
<body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo
Area, and the most populous metropolitan area in the world.</p>

<h2>London</h2>
<p>London is the capital city of England. It is the most populous
city in the United Kingdom.</p>

<h2>Paris</h2>
<p>Paris is the capital of France. The Paris area is one of the
largest population centers in Europe.</p>

</body>

Malo:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2><p>Tokyo is the capital of Japan, the center of the
Greater Tokyo Area, and the most populous metropolitan area in the
world.</p>
<h2>London</h2><p>London is the capital city of England. It is the
most populous city in the United Kingdom.</p>
<h2>Paris</h2><p>Paris is the capital of France. The Paris area is
one of the largest population centers in Europe.</p>
</body>

Buen ejemplo de tabla:

<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>

Buen ejemplo de lista:

<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>

Nunca omita el elemento <title>

El elemento es necesario en HTML.<title>

¡El contenido del título de una página es muy importante para la

El elemento:<title>

 define un título en la barra de herramientas del explorador

 Proporciona un título para la página cuando se agrega a Favoritos
 muestra un título para la página en los resultados del motor de
búsqueda

Por lo tanto, trate de hacer que el título sea lo más preciso y significativo
posible:

<title>HTML Style Guide and Coding Conventions</title>

¿Omitir <html> y <body>?

Una página HTML se validará sin las etiquetas y:<html><body>

Ejemplo
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>

Sin embargo, ¡recomendamos encarecidamente agregar siempre las

etiquetas y!<html><body>

Omitir puede producir errores en navegadores más antiguos.<body>

Omitir y también puede bloquear el software DOM y XML.<html><body>

¿Omitir <>?
También se puede omitir la etiqueta HTML <head>.

Los navegadores agregarán todos los elementos antes de , a un elemento

predeterminado.<body><head>

Ejemplo
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Sin embargo, recomendamos usar la etiqueta.<head>

¿Cerrar elementos HTML vacíos?

En HTML, es opcional cerrar elementos vacíos.

Allowed:
<meta charset="utf-8">

Also Allowed:
<meta charset="utf-8" />

If you expect XML/XHTML software to access your page, keep the closing
slash (/), because it is required in XML and XHTML.

Add the lang Attribute

You should always include the attribute inside the tag, to declare the
language of the Web page. This is meant to assist search engines and
browsers.lang<html>

Example
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Metadatos
Para garantizar una interpretación adecuada y una correcta indexación en
los motores de búsqueda, tanto el lenguaje como la codificación de
caracteres deben definirse lo antes posible en un documento HTML:<meta
charset="charset">

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>

Entidades HTML
Los caracteres reservados en HTML deben reemplazarse por entidades
de caracteres.

Entidades HTML
Algunos caracteres están reservados en HTML.

Si utiliza los signos menos que (<) o mayor que (>) en el texto, el
navegador podría mezclarlos con etiquetas.

Las entidades de caracteres se utilizan para mostrar caracteres reservados

en HTML.

Una entidad de carácter tiene este aspecto:

&entity_name;
OR

&#entity_number;

Para mostrar un signo menor que (<) debemos escribir: < o <

Ventaja de usar un nombre de entidad: El nombre de una entidad es

fácil de recordar.
Desventaja de usar un nombre de entidad: Es posible que los
navegadores no admitan todos los nombres de entidad, pero la
compatibilidad con los números de entidad es buena.

Espacio que no se rompe

Una entidad de uso común en HTML es el espacio de no ruptura:  

Un espacio que no se rompe es un espacio que no se romperá en una

nueva línea.

Dos palabras separadas por un espacio que no se rompe se pegarán entre

sí (no se romperán en una nueva línea). Esto es útil cuando romper las
palabras puede ser perjudicial.

Ejemplos:

 § 10
 10 km/h
 22:00

Otro uso común del espacio sin ruptura es evitar que los navegadores
trunquen espacios en las páginas HTML.

Si escribe 10 espacios en su texto, el navegador eliminará 9 de ellos. Para

agregar espacios reales al texto, puede utilizar la entidad de
caracteres  .

Uso de emojis en HTML

Los emojis son caracteres del juego de caracteres UTF-8: 😄 😍 💗

¿Qué son los Emojis?

Los emojis parecen imágenes o iconos, pero no lo son.

Son letras (caracteres) del juego de caracteres UTF-8 (Unicode).

El atributo de conjunto de caracteres

HTML
Para mostrar una página HTML correctamente, un navegador web debe
conocer el juego de caracteres utilizado en la página.

Esto se especifica en la etiqueta:<meta>

Caracteres UTF-8
Muchos caracteres UTF-8 no se pueden escribir en un teclado, pero siempre
se pueden mostrar usando números (llamados números de entidad):

 A es 65
 B es 66
 C es 67

Ejemplo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<p>I will display A B C</p>

</body>
</html>

Ejemplo explicado
El elemento define el juego de caracteres.<meta charset="UTF-8">

Los caracteres A, B y C se muestran con los números 65, 66 y 67.

Para que el navegador entienda que está mostrando un carácter, debe

iniciar el número de entidad con &# y terminarlo con ; (punto y coma).

Caracteres emoji
Los emojis también son caracteres del alfabeto UTF-8:

 😄 es 128516
 😍 es 128525
 💗 es 128151

Ejemplo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<h1>My First Emoji</h1>

</body>
</html>

Elementos de
formulario HTML
En este capítulo se describen todos los diferentes elementos de
formulario HTML.

Elementos HTML <form>

El elemento HTML puede contener uno o varios de los siguientes elementos
de formulario:<form>

 <input>
 <label>
 <select>
 <textarea>
 <button>
 <fieldset>
 <legend>
 <datalist>
 <output>
 <option>
 <optgroup>
El elemento <input>
Uno de los elementos de forma más utilizados es el elemento. <input>

El elemento se puede mostrar de varias maneras, dependiendo del

atributo.<input>type

Ejemplo
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

Todos los diferentes valores del atributo se tratan en el siguiente

capítulo: Tipos de entrada HTML. type

El elemento <etiqueta>
El elemento define una etiqueta para varios elementos de formulario.<label>

El elemento es útil para los usuarios de lectores de pantalla, porque el

lector de pantalla leerá en voz alta la etiqueta cuando el usuario se centre
en el elemento de entrada.<label>

El elemento también ayuda a los usuarios que tienen dificultades para

hacer clic en regiones muy pequeñas (como botones de opción o casillas de
verificación), porque cuando el usuario hace clic en el texto dentro del
elemento, alterna el botón de opción / casilla de verificación.<label><label>

El atributo de la etiqueta debe ser igual al atributo del elemento para

unirlos. for<label>id<input>

El elemento <seleccionar>
El elemento define una lista desplegable:<select>

Ejemplo
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

Los elementos definen una opción que se puede seleccionar.<option>

De forma predeterminada, se selecciona el primer elemento de la lista

desplegable.
Para definir una opción preseleccionada, agregue el atributo a la
opción: selected

Ejemplo
<option value="fiat" selected>Fiat</option>

Tipos de entrada HTML

En este capítulo se describen los diferentes tipos para el elemento
HTML. <input>

Tipos de entrada HTML

Estos son los diferentes tipos de entrada que puede usar en HTML:

 <input type="button">
 <input type="checkbox">
 <input type="color">
 <input type="date">
 <input type="datetime-local">
 <input type="email">
 <input type="file">
 <input type="hidden">
 <input type="image">
 <input type="month">
 <input type="number">
 <input type="password">
 <input type="radio">
 <input type="range">
 <input type="reset">
 <input type="search">
 <input type="submit">
 <input type="tel">
 <input type="text">
 <input type="time">
 <input type="url">
 <input type="week">

Propina: El valor predeterminado del atributo es "text".type

Texto de tipo de entrada

<input type="text"> define un campo de entrada de texto de una sola
línea:

Ejemplo
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

Así es como se mostrará el código HTML anterior en un navegador:

Nombre:

Apellido:

Contraseña de tipo de entrada

<input type="password"> define un campo de contraseña:

Ejemplo
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>

Así es como se mostrará el código HTML anterior en un navegador:

Nombre de usuario:

Contraseña:

Formulario de entrada HTML*

Atributos
En este capítulo se describen los diferentes atributos del elemento
HTML. form*<input>

El atributo de formulario
El atributo input especifica el formulario al que pertenece el
elemento.form<input>

El valor de este atributo debe ser igual al atributo id del elemento <form>
al que pertenece.

Ejemplo
Un campo de entrada ubicado fuera del formulario HTML (pero que sigue
siendo una parte del formulario):

<form action="/action_page.php" id="form1">

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>

<label for="lname">Last name:</label>

El atributo formaction
El atributo input especifica la dirección URL del archivo que procesará la
entrada cuando se envíe el formulario.formaction

Nota: Este atributo reemplaza el atributo del elemento. action<form>

El atributo funciona con los siguientes tipos de entrada: enviar e

imagen.formaction

Ejemplo
Un formulario HTML con dos botones de envío, con diferentes acciones:

<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formaction="/action_page2.php" value="Submit
as Admin">
</form>

El atributo formenctype
El atributo input especifica cómo se deben codificar los datos del formulario
cuando se envían (solo para formularios con method="post").formenctype

Nota: Este atributo reemplaza el atributo enctype del elemento.<form>

El atributo funciona con los siguientes tipos de entrada: enviar e

imagen.formenctype

Ejemplo
Un formulario con dos botones de envío. El primero envía los datos del
formulario con la codificación predeterminada, el segundo envía los datos
del formulario codificados como "multipart/form-data":
<form action="/action_page_binary.asp" method="post">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>

Gráficos HTML Canvas

El elemento HTML se utiliza para dibujar gráficos en una página
web.<canvas>

El gráfico de la izquierda se crea con .

Muestra cuatro elementos: un rectángulo
rojo, un rectángulo degradado, un
rectángulo multicolor y un texto
multicolor.<canvas>

¿Qué es HTML Canvas?

El elemento HTML se utiliza para dibujar gráficos, sobre la marcha, a través
de JavaScript.<canvas>

El elemento es sólo un contenedor para gráficos. Debe usar JavaScript para

dibujar realmente los gráficos.<canvas>

Canvas tiene varios métodos para dibujar trazados, cuadros, círculos, texto
y agregar imágenes.

Soporte de navegador
Los números de la tabla especifican la primera versión del explorador que
admite completamente el elemento.<canvas>

Ejemplos de Canvas
Un lienzo es un área rectangular en una página HTML. De forma
predeterminada, un lienzo no tiene borde ni contenido.

El marcado se ve así:

<canvas id="myCanvas" width="200" height="100"></canvas>

Nota: Especifique siempre un atributo (al que se hará referencia en un
script) y un atributo y para definir el tamaño del lienzo. Para agregar un
borde, utilice el atributo.idwidthheightstyle

Aquí hay un ejemplo de un lienzo básico y vacío:

Ejemplo
<canvas id="myCanvas" width="200" height="100" style="border:1px
solid #000000;">
</canvas>

HTML Multimedia
¿Qué es Multimedia?
Multimedia viene en muchos formatos diferentes. Puede ser casi cualquier
cosa que pueda escuchar o ver, como imágenes, música, sonido, videos,
discos, películas, animaciones y más.

Las páginas web a menudo contienen elementos multimedia de diferentes

tipos y formatos.

Soporte de navegador
Los primeros navegadores web tenían soporte para texto solamente,
limitado a una sola fuente en un solo color.

¡Más tarde llegaron los navegadores con soporte para colores, fuentes,
imágenes y multimedia!

Formatos multimedia
Los elementos multimedia (como audio o video) se almacenan en archivos
multimedia.

La forma más común de descubrir el tipo de archivo es mirar la extensión

del archivo.

Los archivos multimedia tienen formatos y diferentes extensiones como:

.wav, .mp3, .mp4, .mpg, .wmv y .avi.

Formatos de video comunes

Hay muchos formatos de video por ahí.

Los formatos MP4, WebM y Ogg son

compatibles con HTML.

El formato MP4 es recomendado por YouTube.

Vídeo HTML

El elemento HTML <video>

Para mostrar un vídeo en HTML, utilice el elemento:<video>

Ejemplo
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Cómo funciona
El atributo agrega controles de vídeo, como reproducción, pausa y
volumen.controls
Es una buena idea incluir siempre y atributos. Si la altura y la anchura no
están establecidas, es posible que la página parpadee mientras se carga el
vídeo.widthheight

El elemento le permite especificar archivos de video alternativos entre los

que el navegador puede elegir. El navegador utilizará el primer formato
reconocido.<source>

El texto entre las etiquetas y solo se mostrará en navegadores que no

admitan el elemento.<video></video><video>

Reproducción automática de HTML

<video>
Para iniciar un vídeo automáticamente, utilice el atributo:autoplay

Ejemplo
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Audio HTML
El elemento HTML se utiliza para reproducir un archivo de audio en una
página web.<audio>

El elemento HTML <audio>

Para reproducir un archivo de audio en HTML, utilice el elemento:<audio>
Ejemplo
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Audio HTML - Cómo funciona

El atributo agrega controles de audio, como reproducción, pausa y
volumen.controls

El elemento le permite especificar archivos de audio alternativos entre los

que el navegador puede elegir. El navegador utilizará el primer formato
reconocido.<source>

El texto entre las etiquetas y solo se mostrará en navegadores que no

admitan el elemento.<audio></audio><audio>

REPRODUCCIÓN automática de HTML

<audio>
Para iniciar un archivo de audio automáticamente, utilice el
atributo:autoplay

Ejemplo
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

API de geolocalización HTML

API de arrastrar y soltar HTML

API de almacenamiento
web HTML

¿Qué es el almacenamiento web HTML?

Con el almacenamiento web, las aplicaciones web pueden almacenar datos
localmente dentro del navegador del usuario.

Antes de HTML5, los datos de la aplicación tenían que almacenarse en

cookies, incluidas en cada solicitud del servidor. El almacenamiento web es
más seguro y se pueden almacenar grandes cantidades de datos
localmente, sin afectar el rendimiento del sitio web.

A diferencia de las cookies, el límite de almacenamiento es mucho mayor

(al menos 5 MB) y la información nunca se transfiere al servidor.

El almacenamiento web es por origen (por dominio y protocolo). Todas las

páginas, de un solo origen, pueden almacenar y acceder a los mismos
datos.

Soporte de navegador
Los números de la tabla especifican la primera versión del explorador que
es totalmente compatible con el almacenamiento web.
Has aprendido HTML, ¿y
ahora qué?
Resumen HTML
Este tutorial le ha enseñado cómo usar HTML para crear su propio sitio
web.

HTML es el lenguaje de marcado universal para la Web. HTML le permite

dar formato al texto, agregar gráficos, crear enlaces, formularios de
entrada, marcos y tablas, etc., y guardarlo todo en un archivo de texto que
cualquier navegador puede leer y mostrar.

Para obtener más información sobre HTML, eche un vistazo a nuestros

ejemplos de HTML y nuestra referencia HTML.

También puede poner a prueba sus habilidades HTML con ejercicios HTML y
cuestionarios HTML.

Ahora que sabes HTML, ¿qué sigue?

Aprende CSS
CSS te permite aplicar estilo a tus páginas HTML.

CSS le da un control total del diseño, sin estropear el contenido del

documento.

Para obtener más información sobre CSS, visite nuestro tutorial de CSS.

Aprende JavaScript
JavaScript hace que su sitio web sea más dinámico. Un sitio web dinámico
puede reaccionar a los eventos y permitir la interacción del usuario.

JavaScript es el lenguaje de scripting más popular en Internet y funciona

con todos los principales navegadores.
Si desea obtener más información sobre JavaScript, visite nuestro tutorial
de JavaScript.

Publicación de su sitio web

Para que su sitio web esté disponible para el mundo, debe publicarlo.

Para ello, tienes dos opciones:

 Usar un proveedor de servicios de Internet

 Aloja tu propio sitio web

Uso de un proveedor de servicios de

Internet
Un proveedor de servicios de Internet (ISP) es una empresa que
proporciona servicios para acceder y utilizar Internet.

Los servicios de Internet que normalmente proporcionan los ISP incluyen

acceso a Internet, tránsito de Internet, registro de nombres de dominio,
alojamiento web, servicio Usenet y colocación.

El uso de un proveedor de servicios de Internet (ISP) es la opción más

común.

Ventajas:
 Velocidad de conexión: los ISP tienen conexiones muy rápidas a
Internet.
 Hardware potente: los ISP tienen servidores web potentes que
pueden ser compartidos por varios clientes. También puede esperar
un equilibrio de carga efectivo y los servidores de copia de seguridad
necesarios
 Seguridad y estabilidad - Los ISP son especialistas en alojamiento
web. Espere más del 99% de tiempo de actividad, los últimos
parches de software y la mejor protección contra virus

Cosas a considerar:
 Soporte las 24 horas: el ISP debe ofrecer soporte las 24 horas. El
teléfono gratuito también podría ser vital
 Copia de seguridad diaria: el ISP debe ejecutar una rutina de
copia de seguridad diaria
 Volumen de tráfico: verifique las restricciones de volumen de
tráfico del ISP (no termine pagando una fortuna por un alto tráfico
inesperado)
 Restricciones de ancho de banda o contenido: verifique las
restricciones de ancho de banda y contenido del ISP (¿Es posible
publicar imágenes, videos o sonido?)
 Capacidades de correo electrónico: asegúrese de que el ISP
admita las capacidades de correo electrónico que necesita
 Acceso a la base de datos: asegúrese de que el ISP admita el
acceso a la base de datos que necesita

Alojamiento de su propio sitio web

Alojar su propio sitio web, en su propio servidor, también es una opción.

Cosas a considerar:
 Gastos de hardware: para ejecutar un sitio web "real", debe
comprar hardware de servidor potente (una PC de bajo costo no hará
el trabajo). También necesitará una conexión permanente (24/7) de
alta velocidad
 Gastos de software: las licencias de servidor suelen ser más altas
que las licencias de cliente. Las licencias de servidor también pueden
tener límites en el número de usuarios
 Gastos laborales - No esperes gastos laborales bajos. Tienes que
instalar tu propio hardware y software. También tiene que lidiar con
errores y virus, y mantener su servidor en constante funcionamiento

Referencia del
elemento HTML
Tag Description

Defines a comment

<!DOCTYPE> Defines the document type

<a> Defines a hyperlink

<abbr> Defines an abbreviation or an acronym

<acronym> Not supported in HTML5. Use <abbr>

instead.

Defines an acronym

<address> Defines contact information for the

author/owner of a document

<applet> Not supported in HTML5. Use <embed> or

<object> instead.

Defines an embedded applet

<area> Defines an area inside an image map

<article> Defines an article

<aside> Defines content aside from the page

content

<audio> Defines embedded sound content

<b> Defines bold text

<base> Specifies the base URL/target for all relative

URLs in a document

<basefont> Not supported in HTML5. Use CSS instead.

Specifies a default color, size, and font for all text in a document

<bdi> Isolates a part of text that might be

formatted in a different direction from other text outside it

<bdo> Overrides the current text direction

<big> Not supported in HTML5. Use CSS instead.

Defines big text

<blockquote> Defines a section that is quoted from

another source

<body> Defines the document's body

<br> Defines a single line break

<button> Defines a clickable button

<canvas> Used to draw graphics, on the fly, via

scripting (usually JavaScript)

<caption> Defines a table caption

<center> Not supported in HTML5. Use CSS instead.

Defines centered text

<cite> Defines the title of a work

<code> Defines a piece of computer code

<col> Specifies column properties for each column

within a <colgroup> element

<colgroup> Specifies a group of one or more columns in

a table for formatting

<data> Adds a machine-readable translation of a

given content

<datalist> Specifies a list of pre-defined options for

input controls

<dd> Defines a description/value of a term in a

description list

<del> Defines text that has been deleted from a

document

<details> Defines additional details that the user can

view or hide

<dfn> Specifies a term that is going to be defined

within the content
<dialog> Defines a dialog box or window

<dir> Not supported in HTML5. Use <ul> instead.

Defines a directory list

<div> Defines a section in a document

<dl> Defines a description list

<dt> Defines a term/name in a description list

<em> Defines emphasized text

<embed> Defines a container for an external

application

<fieldset> Groups related elements in a form

<figcaption> Defines a caption for a <figure> element

<figure> Specifies self-contained content

<font> Not supported in HTML5. Use CSS instead.

Defines font, color, and size for text

<footer> Defines a footer for a document or section

<form> Defines an HTML form for user input

<frame> Not supported in HTML5.

Defines a window (a frame) in a frameset

<frameset> Not supported in HTML5.

Defines a set of frames

<h1> to <h6> Defines HTML headings

<head> Contains metadata/information for the

document

<header> Defines a header for a document or section

<hr> Defines a thematic change in the content

<html> Defines the root of an HTML document

<i> Defines a part of text in an alternate voice

or mood

<iframe> Defines an inline frame

<img> Defines an image

<input> Defines an input control

<ins> Defines a text that has been inserted into a

document

<kbd> Defines keyboard input

<label> Defines a label for an <input> element

<legend> Defines a caption for a <fieldset> element

<li> Defines a list item

<link> Defines the relationship between a

document and an external resource (most used to link to style sheets)

<main> Specifies the main content of a document

<map> Defines an image map

<mark> Defines marked/highlighted text

<meta> Defines metadata about an HTML document

<meter> Defines a scalar measurement within a

known range (a gauge)

<nav> Defines navigation links

<noframes> Not supported in HTML5.

Defines an alternate content for users that do not support frames

<noscript> Defines an alternate content for users that

do not support client-side scripts

<object> Defines a container for an external

application

<ol> Defines an ordered list

<optgroup> Defines a group of related options in a

drop-down list

<option> Defines an option in a drop-down list

<output> Defines the result of a calculation

<p> Defines a paragraph

<param> Defines a parameter for an object

<picture> Defines a container for multiple image

resources

<pre> Defines preformatted text

<progress> Represents the progress of a task

<q> Defines a short quotation

<rp> Defines what to show in browsers that do

not support ruby annotations

<rt> Defines an explanation/pronunciation of

characters (for East Asian typography)

<ruby> Defines a ruby annotation (for East Asian

typography)
<s> Defines text that is no longer correct

<samp> Defines sample output from a computer

program

<script> Defines a client-side script

<section> Defines a section in a document

<select> Defines a drop-down list

<small> Defines smaller text

<source> Defines multiple media resources for media

elements (<video> and <audio>)

<span> Defines a section in a document

<strike> Not supported in HTML5. Use <del> or <s>

instead.

Defines strikethrough text

<strong> Defines important text

<style> Defines style information for a document

<sub> Defines subscripted text

<summary> Defines a visible heading for a <details>

element

<sup> Defines superscripted text

<svg> Defines a container for SVG graphics

<table> Defines a table

<tbody> Groups the body content in a table

<td> Defines a cell in a table

<template> Defines a container for content that should

be hidden when the page loads

<textarea> Defines a multiline input control (text area)

<tfoot> Groups the footer content in a table

<th> Defines a header cell in a table

<thead> Groups the header content in a table

<time> Defines a specific time (or datetime)

<title> Defines a title for the document

<tr> Defines a row in a table

<track> Defines text tracks for media elements

(<video> and <audio>)

<tt> Not supported in HTML5. Use CSS instead.

Defines teletype text

<u> Defines some text that is unarticulated and

styled differently from normal text

<ul> Defines an unordered list

<var> Defines a variable

<video> Defines embedded video content

<wbr> Defines a possible line-break

Referencia de elemento
HTML - Por categoría
HTML básico

Tag Description

<!DOCTYPE> Defines the document type

<html> Defines an HTML document

<head> Contains metadata/information for the document

<title> Defines a title for the document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

<p> Defines a paragraph

<br> Inserts a single line break

<hr> Defines a thematic change in the content

Defines a comment

Formateo

Tag Description

<acronym> Not supported in HTML5. Use <abbr> instead.

Defines an acronym

<abbr> Defines an abbreviation or an acronym

<address> Defines contact information for the author/owner of a

document/article

<b> Defines bold text

<bdi> Isolates a part of text that might be formatted in a

different direction from other text outside it
<bdo> Overrides the current text direction

<big> Not supported in HTML5. Use CSS instead.

Defines big text

<blockquote> Defines a section that is quoted from another source

<center> Not supported in HTML5. Use CSS instead.

Defines centered text

<cite> Defines the title of a work

<code> Defines a piece of computer code

<del> Defines text that has been deleted from a document

<dfn> Specifies a term that is going to be defined within the

content

<em> Defines emphasized text

<font> Not supported in HTML5. Use CSS instead.

Defines font, color, and size for text

<i> Defines a part of text in an alternate voice or mood

<ins> Defines a text that has been inserted into a

document

<kbd> Defines keyboard input

<mark> Defines marked/highlighted text

<meter> Defines a scalar measurement within a known range

(a gauge)

<pre> Defines preformatted text

<progress> Represents the progress of a task

<q> Defines a short quotation

<rp> Defines what to show in browsers that do not support

ruby annotations

<rt> Defines an explanation/pronunciation of characters

(for East Asian typography)

<ruby> Defines a ruby annotation (for East Asian

typography)

<s> Defines text that is no longer correct

<samp> Defines sample output from a computer program

<small> Defines smaller text

<strike> Not supported in HTML5. Use <del> or <s> instead.

Defines strikethrough text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<template> Defines a container for content that should be hidden

when the page loads

<time> Defines a specific time (or datetime)

<tt> Not supported in HTML5. Use CSS instead.

Defines teletype text

<u> Defines some text that is unarticulated and styled

differently from normal text

<var> Defines a variable

<wbr> Defines a possible line-break

Referencia HTML - Soporte

de navegador
Referencia HTML con soporte de navegador
La siguiente tabla enumera todos los elementos HTML y sus atributos,
junto con la compatibilidad con el navegador:

<a> Yes Yes Yes Yes Yes

download 14.0 18.0 20.0 10.1 15.0

href Yes Yes Yes Yes Yes

hreflang Yes Yes Yes Yes Yes

media Yes Yes Yes Yes Yes

ping Yes No Yes No Yes

referrerpolicy 51.0 79.0 50.0 11.1 38.0

rel Yes Yes Yes Yes Yes

target Yes Yes Yes Yes Yes

type Yes Yes Yes Yes Yes

<abbr> Yes Yes Yes Yes Yes

<address> Yes Yes Yes Yes Yes

<area> Yes Yes Yes Yes Yes

alt Yes Yes Yes Yes Yes

coords Yes Yes Yes Yes Yes

download Yes Yes Yes Yes Yes

href Yes Yes Yes Yes Yes

hreflang Yes Yes Yes Yes Yes

media Yes Yes Yes Yes Yes

referrerpolicy 51.0 79.0 50.0 11.1 38.0

rel Yes Yes Yes Yes Yes

shape Yes Yes Yes Yes Yes

target Yes Yes Yes Yes Yes

type Yes Yes Yes Yes Yes

<article> 6.0 9.0 4.0 5.0 11.1

<aside> 6.0 9.0 4.0 5.0 11.1

<audio> 4.0 9.0 3.5 4.0 11.5

autoplay 4.0 9.0 3.5 4.0 11.5

controls 4.0 9.0 3.5 4.0 11.5

loop 4.0 9.0 3.5 4.0 11.5

muted 4.0 10.0 11.0 7.1 11.5

preload 4.0 9.0 4.0 4.0 11.5

src 4.0 9.0 3.5 4.0 11.5

<b> Yes Yes Yes Yes Yes

<base> Yes Yes Yes Yes Yes

href Yes Yes Yes Yes Yes

target Yes Yes Yes Yes Yes

<bdi> 16.0 79.0 10.0 No 15.0

<bdo> Yes Yes Yes Yes Yes

dir Yes Yes Yes Yes Yes

<blockquote> Yes Yes Yes Yes Yes

cite Yes Yes Yes Yes Yes

<body> Yes Yes Yes Yes Yes

<br> Yes Yes Yes Yes Yes

<button> Yes Yes Yes Yes Yes

autofocus 5.0 10.0 4.0 5.0 9.6

disabled Yes Yes Yes Yes Yes

form 10.0 16.0 4.0 5.1 9.5

formaction 9.0 10.0 4.0 5.1 15.0

formenctype 9.0 10.0 4.0 5.1 11.5

formmethod 9.0 10.0 4.0 5.1 15.0

formnovalidate 6.0 11.0 4.0 Yes Yes

formtarget 9.0 10.0 4.0 5.1 10.6

name Yes Yes Yes Yes Yes

type Yes Yes Yes Yes Yes

value Yes Yes Yes Yes Yes

Métodos abreviados
de teclado
Métodos abreviados de teclado para Windows y Mac
Los atajos de teclado se utilizan a menudo en los sistemas operativos
modernos y los programas de software de computadora.

Aprender y usar atajos de teclado puede ahorrarle mucho tiempo.

Accesos directos básicos

Description Windows Mac OS

Edit menu Alt + E Ctrl + F2 + F

File menu Alt + F Ctrl + F2 + E

View menu Alt + V Ctrl + F2 + V

Select all text Ctrl + A Cmd + A

Copy text Ctrl + C Cmd + C

Find text Ctrl + F Cmd + F

Find and replace text Ctrl + H Cmd + F

New Document Ctrl + N Cmd + N

Open a file Ctrl + O Cmd + O

Print options Ctrl + P Cmd + P

Save file Ctrl + S Cmd + S

Paste text Ctrl + V Cmd + V

Cut text Ctrl + X Cmd + X

Redo text Ctrl + Y Shift + Cmd + Z

Undo text Ctrl + Z Cmd + Z

Edición de texto
Description Windows Mac OS

Cursor Movement

Go to the right or to the beginning of next line break Right Arrow

Right Arrow

Go to the left or to the end of previous line break Left Arrow Left
Arrow

Go up one row Up Arrow Up Arrow

Go down one row Down Arrow Down Arrow

Go to the beginning of the current line HomeCmd + Left Arrow

Go to the end of the current line End Cmd + Right Arrow

Go to the beginning of the document Ctrl + Home Cmd + Up

Arrow

Go to the end of the document Ctrl + End Cmd + Down Arrow

Move up one frame Page Up Fn + Up Arrow

Move down one frame Page Down Fn + Down Arrow

Go to beginning of previous word Ctrl + Left Arrow Option + Left Arrow

Go to beginning of next word Ctrl + Right Arrow Option + Right

Arrow

Go to beginning of line break Ctrl + Up Arrow Cmd + Left Arrow

Go to end of line break Ctrl + Down Arrow Cmd + Right Arrow

Text Selection

Select characters to the left Shift + Left Arrow Shift + Left Arrow

Select characters to the right Shift + Right Arrow Shift + Right Arrow

Select lines upwards Shift + Up Arrow Shift + Up Arrow

Select lines downwards Shift + Down Arrow Shift + Down Arrow

Select words to the left Shift + Ctrl + Left Shift + Opt + Left

Select words to the right Shift + Ctrl + Right Shift + Opt + Right

Select paragraphs to the left Shift + Ctrl + Up Shift + Opt + Up

Select paragraphs to the right Shift + Ctrl + Down Shift + Opt +

Down

Select text between the cursor and the beginning of the current line
Shift + Home Cmd + Shift + Left Arrow

Select text between the cursor and the end of the current line Shift +
End Cmd + Shift + Right Arrow
Select text between the cursor and the beginning of the document
Shift + Ctrl + Home Cmd + Shift + Up Arrow or
Cmd + Shift + Fn + Left Arrow

Select text between the cursor and the end of the document Shift +
Ctrl + End Cmd + Shift + Down Arrow or Cmd + Shift + Fn +
Right Arrow

Select one frame at a time of text above the cursor Shift + Page Up
Shift + Fn + Up Arrow

Select one frame at a time of text below the cursor Shift + Page Down
Shift + Fn + Down Arrow

Select all text Ctrl + A Cmd + A

Find text Ctrl + F Cmd + F

Text Formatting

Make selected text bold Ctrl + B Cmd + B

Make selected text italic Ctrl + I Cmd + I

Underline selected text Ctrl + U Cmd + U

Make selected text superscript Ctrl + Shift + = Cmd + Shift + =

Make selected text subscript Ctrl + = Cmd + =

Text Editing

Delete characters to the left Backspace Backspace

Delete characters to the right Delete Fn + Backspace

Delete words to the right Ctrl + Del Cmd + Backspace

Delete words to the left Ctrl + Backspace Cmd + Fn + Backspace

Indent Tab Tab

Outdent Shift + Tab Shift + Tab

Copy text Ctrl + C Cmd + C

Find and replace text Ctrl + H Cmd + F

Paste text Ctrl + V Cmd + V

Cut text Ctrl + X Cmd + X

Redo text Ctrl + Y Shift + Cmd + Z

Undo text Ctrl + Z Cmd + Z

Mi paleta de colores es

También podría gustarte

Programación con lenguajes de guión en páginas web. IFCD0110
De Everand
Programación con lenguajes de guión en páginas web. IFCD0110
Antonio Luís Cardador Cabello
Aún no hay calificaciones
UF1303 - Elaboración de hojas de estilo
De Everand
UF1303 - Elaboración de hojas de estilo
Lorena Rodríguez Cortés
Aún no hay calificaciones
Curso de HTML5 PDF
100% (10)
Curso de HTML5 PDF
118 páginas
La programación JavaScript
De Everand
La programación JavaScript
Preston Prescott
Aún no hay calificaciones
Elaboración de hojas de estilo. IFCD0110
De Everand
Elaboración de hojas de estilo. IFCD0110
José María Tomás Zafra
Aún no hay calificaciones
Programación Web Paso a Paso: HTML
De Everand
Programación Web Paso a Paso: HTML
Enrique Vicente
Aún no hay calificaciones
Crea Una Aplicación Sencilla Con HTML5
Aún no hay calificaciones
Crea Una Aplicación Sencilla Con HTML5
10 páginas
HTML 5
Aún no hay calificaciones
HTML 5
156 páginas
HTML & CSS - Egg
Aún no hay calificaciones
HTML & CSS - Egg
93 páginas
Manual Programacion PHP
Aún no hay calificaciones
Manual Programacion PHP
103 páginas
Gestión de Proyectos Con Git: CORE IWEB 2018-2019 Santiago Pavón Juan Quemada Versión: 2019-01-30
Aún no hay calificaciones
Gestión de Proyectos Con Git: CORE IWEB 2018-2019 Santiago Pavón Juan Quemada Versión: 2019-01-30
113 páginas
Curso Bootstrap
Aún no hay calificaciones
Curso Bootstrap
99 páginas
Acces 2019 Funciones Avanzadas
Aún no hay calificaciones
Acces 2019 Funciones Avanzadas
9 páginas
Introducción Al Diseño Web
100% (1)
Introducción Al Diseño Web
55 páginas
PHP
Aún no hay calificaciones
PHP
38 páginas
Ideas para Proyectos de Programacion PDF
Aún no hay calificaciones
Ideas para Proyectos de Programacion PDF
5 páginas
Programación en PHP
100% (1)
Programación en PHP
32 páginas
Guía Visual Basic
100% (1)
Guía Visual Basic
15 páginas
Html5 y Css3
Aún no hay calificaciones
Html5 y Css3
83 páginas
C# 2
Aún no hay calificaciones
C# 2
5 páginas
Manual Css Hojas Estilo
Aún no hay calificaciones
Manual Css Hojas Estilo
68 páginas
Lista de Etiquetas HTML5 PDF
Aún no hay calificaciones
Lista de Etiquetas HTML5 PDF
5 páginas
Curso Básico HTML5
100% (4)
Curso Básico HTML5
59 páginas
Todo C#
100% (1)
Todo C#
29 páginas
Ejercicio de Inicio HTML5
Aún no hay calificaciones
Ejercicio de Inicio HTML5
18 páginas
Clase 1,2 y 3 - Programación en Bash (Preliminar)
Aún no hay calificaciones
Clase 1,2 y 3 - Programación en Bash (Preliminar)
64 páginas
Ejercicios HTML5
100% (2)
Ejercicios HTML5
25 páginas
Curso de HTML PDF
Aún no hay calificaciones
Curso de HTML PDF
60 páginas
Manual HTML
67% (3)
Manual HTML
117 páginas
Curso HTML y CSS
100% (2)
Curso HTML y CSS
15 páginas
Introducción Diseño Web
100% (1)
Introducción Diseño Web
33 páginas
HTML5 CSS3
0% (1)
HTML5 CSS3
166 páginas
Unidad 02 (Incluye Bootstrap 4.6)
0% (1)
Unidad 02 (Incluye Bootstrap 4.6)
64 páginas
Maquetación Web
Aún no hay calificaciones
Maquetación Web
9 páginas
Dam M09 T03 PDF
100% (1)
Dam M09 T03 PDF
23 páginas
05 Primeros Programas en JavaScript
Aún no hay calificaciones
05 Primeros Programas en JavaScript
7 páginas
Windows Forms
Aún no hay calificaciones
Windows Forms
43 páginas
Procesos Batch o Bat o Por Lotes
100% (1)
Procesos Batch o Bat o Por Lotes
30 páginas
Ejercicios de HTML
Aún no hay calificaciones
Ejercicios de HTML
17 páginas
Repaso HTML y CSS
Aún no hay calificaciones
Repaso HTML y CSS
26 páginas
Funciones en Javascript y Formularios
Aún no hay calificaciones
Funciones en Javascript y Formularios
18 páginas
CSS en Web
Aún no hay calificaciones
CSS en Web
44 páginas
04 Ejercicios HTML Preguntas
Aún no hay calificaciones
04 Ejercicios HTML Preguntas
27 páginas
Manual HTML
100% (1)
Manual HTML
29 páginas
CSS Ejercicios
Aún no hay calificaciones
CSS Ejercicios
40 páginas
Microsoft Word 2016 Basico
100% (1)
Microsoft Word 2016 Basico
5 páginas
Manual Completo PHP
100% (3)
Manual Completo PHP
41 páginas
Diseño de Interfaces
Aún no hay calificaciones
Diseño de Interfaces
33 páginas
Guia Ejercicios HTML
Aún no hay calificaciones
Guia Ejercicios HTML
7 páginas
Manual de Windows 10
100% (1)
Manual de Windows 10
109 páginas
Practica Word 2016
Aún no hay calificaciones
Practica Word 2016
12 páginas
9 Json
Aún no hay calificaciones
9 Json
14 páginas
Dam MP 10 VT11
Aún no hay calificaciones
Dam MP 10 VT11
50 páginas
Desarrollo Web Entorno Cliente
100% (1)
Desarrollo Web Entorno Cliente
19 páginas
Tema2 HTML
Aún no hay calificaciones
Tema2 HTML
24 páginas
Laravel PHP
Aún no hay calificaciones
Laravel PHP
5 páginas
Manual HTML Final
100% (1)
Manual HTML Final
177 páginas
Libro Aprendiendo Lenguaje C
Aún no hay calificaciones
Libro Aprendiendo Lenguaje C
20 páginas
Ejemplos Javascript
Aún no hay calificaciones
Ejemplos Javascript
13 páginas
Desarrollo de aplicaciones web en el entorno servidor. IFCD0210
De Everand
Desarrollo de aplicaciones web en el entorno servidor. IFCD0210
Rafael Luis Granados La Paz
Aún no hay calificaciones