Teoria HTML

Documentos HTML Solo debe aparecer una vez, en la parte
Todos los documentos HTML deben superior de la página (antes de cualquier

comenzar con una declaración de tipo de etiqueta HTML).
documento: <!DOCTYPE html>. El <!DOCTYPE>declaración no distingue entre
El documento HTML en sí comienza <html>y mayúsculas y minúsculas.
termina con </html>. El <!DOCTYPE>declaración para HTML5 es:
La parte visible del documento HTML está <!DOCTYPE html>
entre <body>y </body>. Encabezados HTML
Ejemplo Los encabezados HTML se definen con
<!DOCTYPE html> las etiquetas <h1>hasta.<h6>
<html> <h1>define el encabezado más
<body> importante. <h6>define el encabezado
<h1>MI PRIMER TITULO</h1> menos importante:
<p>MI PRIMER PARRAFO.</p> Ejemplo
</body> <h1>This is heading 1</h1>
</html> <h2>This is heading 2</h2>
La Declaración <!DOCTYPE> <h3>This is heading 3</h3>
La <!DOCTYPE>declaración representa el tipo Párrafos HTML
de documento y ayuda a los navegadores a Los párrafos HTML se definen con
mostrar correctamente las páginas web. la <p>etiqueta:
Ejemplo
<p>This is a paragraph.</p> Ejemplo
<p>This is another paragraph.</p> <img src="w3schools.jpg" alt="W3Schools.
Enlaces HTML com" width="104" height="142">
Los enlaces HTML se definen con
la <a>etiqueta: Cómo ver la fuente HTML
Ejemplo ¿Alguna vez has visto una página web y te
<a href="https://www.google.com.co">This has preguntado "¡Oye! ¿Cómo hicieron
is a link</a> eso?"
El destino del enlace se especifica en Ver código fuente HTML:
el hrefatributo. Haga clic derecho en una página HTML y
Los atributos se utilizan para proporcionar seleccione "Ver código fuente" (en Chrome)
información adicional sobre los elementos o "Ver código fuente" (en Edge), o similar
HTML. en otros navegadores. Esto abrirá una
Aprenderá más sobre los atributos en un ventana que contiene el código fuente HTML
capítulo posterior. de la página.
Imágenes HTML Inspeccionar un elemento HTML:
Las imágenes HTML se definen con Haga clic con el botón derecho en un
la <img>etiqueta. elemento (o en un área en blanco) y elija
El archivo de origen ( src), el texto "Inspeccionar" o "Inspeccionar elemento"
alternativo ( alt), widthy heightse para ver de qué están compuestos los
proporcionan como atributos: elementos (verá tanto el HTML como el
CSS). También puede editar HTML o CSS <br> none non
sobre la marcha en el panel Elementos o
Estilos que se abre. Nota: algunos elementos HTML no tienen
Elementos HTML contenido (como el elemento <br>). Estos
elementos se denominan elementos
Un elemento HTML se define mediante una
vacíos. ¡Los elementos vacíos no tienen una
etiqueta de inicio, algo de contenido y una
etiqueta de finalización. etiqueta final!
Elementos HTML Elementos HTML anidados
Los elementos HTML se pueden anidar (esto
El elemento HTML es todo, desde la
significa que los elementos pueden contener
etiqueta de inicio hasta la etiqueta final:
< nombre de la etiqueta > otros elementos).
Todos los documentos HTML constan de
El contenido va aquí...
elementos HTML anidados.
< /nombre de la etiqueta >
El siguiente ejemplo contiene cuatro
Ejemplos de algunos elementos HTML: elementos HTML
< h1 > Mi primer encabezado < /h1 > ( , <html>y <body>) :<h1><p>
< p > Mi primer párrafo. < /p > Ejemplo
Start tag Element content End tag
<!DOCTYPE html>
<html>
<h1> My First Heading </h1><body>
<p> My first paragraph. </p>

<h1>My First Heading</h1> Tiene una etiqueta de inicio <body>y una
<p>My first paragraph.</p> etiqueta de fin </body>.
Luego, dentro del <body>elemento hay otros
</body> dos elementos: <h1>y <p>:
</html> <h1>My First Heading</h1>
Ejemplo explicado <p>My first paragraph.</p>
El <html>elemento es el elemento raíz y El <h1>elemento define un encabezado.
define todo el documento HTML. Tiene una etiqueta de inicio <h1>y una
Tiene una etiqueta de inicio <html>y una etiqueta de fin </h1>:
etiqueta de fin </html>. <h1>My First Heading</h1>
Luego, dentro del <html>elemento hay El <p>elemento define un párrafo.
un <body> elemento: Tiene una etiqueta de inicio <p>y una
<body> etiqueta de fin </p>:
<p>My first paragraph.</p>
<h1>My First Heading</h1> Nunca te saltes la etiqueta final
<p>My first paragraph.</p> Algunos elementos HTML se mostrarán
correctamente, incluso si olvida la etiqueta
</body> final:
El <body>elemento define el cuerpo del Ejemplo
documento. <html>
<body>
HTML no distingue entre mayúsculas y minúsculas
<h1>This is a paragraph Las etiquetas HTML no distinguen entre
<p>This is a paragraph mayúsculas y minúsculas: <P>significa lo
mismo que <p>.
</body> El estándar HTML no requiere etiquetas en
</html>
minúsculas, pero
Sin embargo, ¡nunca confíes en W3C recomienda minúsculas en HTML
esto! ¡Pueden ocurrir resultados y exige minúsculas para tipos de
inesperados y errores si olvida la documentos más estrictos como XHTML.
etiqueta final! En W3Schools siempre usamos nombres de
etiquetas en minúsculas.
Elementos HTML vacíos
Los elementos HTML sin contenido se Referencia de etiquetas HTML
denominan elementos vacíos. La referencia de etiquetas de W3Schools
La <br>etiqueta define un salto de línea y es contiene información adicional sobre estas
un elemento vacío sin una etiqueta de etiquetas y sus atributos.
cierre:
Ejemplo Tag Description
<p>This is a <br> paragraph with a line <html> Defines the root of an HTML
break.</p> document
Inténtalo tú mismo "
<body> Defines the document's body  Los atributos siempre se especifican en la
etiqueta de inicio
<h1> to Defines HTML headings  Los atributos generalmente vienen en pares
<h6> de nombre/valor como: nombre="valor"
Para obtener una lista completa de todas las
etiquetas HTML disponibles, visite El atributo href
nuestra Referencia de etiquetas HTML . La <a>etiqueta define un
Atributos HTML hipervínculo. El hrefatributo especifica la
URL de la página a la que va el enlace:
❮ AnteriorPróximo ❯ Ejemplo
<a href="https://www.w3schools.com">Visi
Los atributos HTML proporcionan t W3Schools</a>
información adicional sobre los elementos Inténtalo tú mismo "
HTML. Aprenderá más acerca de los enlaces en
nuestro capítulo Enlaces HTML .
Atributos HTML
 Todos los elementos HTML pueden El atributo src
tener atributos La <img>etiqueta se utiliza para incrustar
 Los atributos proporcionan información una imagen en una página
adicional sobre los elementos . HTML. El srcatributo especifica la ruta a la
imagen que se va a mostrar:
Ejemplo src="img_girl.jpg". Si la URL comienza con
<img src="img_girl.jpg"> una barra inclinada, será relativa al
Inténtalo tú mismo " dominio. Ejemplo:
Hay dos formas de especificar la URL en src="/images/img_girl.jpg".
el src atributo: Sugerencia: casi siempre es mejor usar
1. URL absoluta : enlaces a una imagen URL relativas. No se romperán si cambias
externa alojada en otro sitio de dominio.
web. Ejemplo: src="https://www.w3schools
.com/images/img_girl.jpg" . Los atributos de ancho y alto
Notas: las imágenes externas pueden estar La <img>etiqueta también debe contener los
protegidas por derechos de autor. Si no atributos widthy height, que especifican el
obtiene permiso para usarlo, es posible que ancho y el alto de la imagen (en píxeles):
esté violando las leyes de derechos de Ejemplo
autor. Además, no puede controlar <img src="img_girl.jpg" width="500" heig
imágenes externas; se puede quitar o ht="600">
cambiar repentinamente. Inténtalo tú mismo "
2. URL relativa : enlaces a una imagen
alojada en el sitio web. Aquí, la URL no El atributo alt
incluye el nombre de dominio. Si la URL
El altatributo requerido para
comienza sin una barra inclinada, será
la <img> etiqueta especifica un texto
relativa a la página actual. Ejemplo:
alternativo para una imagen, si la imagen
por algún motivo no se puede mostrar. Esto El styleatributo se usa para agregar estilos
puede deberse a una conexión lenta, a un a un elemento, como color, fuente, tamaño
error en el srcatributo, o si el usuario usa y más.
un lector de pantalla. Ejemplo
Ejemplo <p style="color:red;">This is a red
<img src="img_girl.jpg" alt="Girl with a paragraph.</p>
jacket"> Inténtalo tú mismo "
Inténtalo tú mismo " Aprenderá más sobre estilos en
Ejemplo nuestro capítulo Estilos HTML .
Vea lo que sucede si intentamos mostrar
una imagen que no existe: El atributo lang
<img src="img_typo.jpg" alt="Girl with a Siempre debe incluir el langatributo dentro
jacket"> de la <html>etiqueta, para declarar el idioma
Inténtalo tú mismo " de la página web. Esto está destinado a
Aprenderá más sobre las imágenes en ayudar a los motores de búsqueda y
nuestro capítulo Imágenes HTML . navegadores.
El siguiente ejemplo especifica el inglés
ANUNCIO como idioma:
<!DOCTYPE html>
El atributo de estilo <html lang="en">
<body>
... El atributo del título
</body> El titleatributo define alguna información
</html> adicional sobre un elemento.
Los códigos de países también se pueden El valor del atributo de título se mostrará
agregar al código de idioma en como información sobre herramientas
el lang atributo. Entonces, los dos primeros cuando pase el mouse sobre el elemento:
caracteres definen el idioma de la página Ejemplo
HTML y los dos últimos caracteres definen el <p title="I'm a tooltip">This is a
país. paragraph.</p>
El siguiente ejemplo especifica inglés como Inténtalo tú mismo "
idioma y Estados Unidos como país:
<!DOCTYPE html> Sugerimos: Utilice siempre atributos en minúsculas
<html lang="en-US"> El estándar HTML no requiere nombres de
<body> atributos en minúsculas.
... El atributo de título (y todos los demás
</body> atributos) se pueden escribir en mayúsculas
</html> o minúsculas como título o TÍTULO .
Puede ver todos los códigos de idioma en Sin embargo, W3C recomienda atributos
nuestra Referencia de código de idioma en minúsculas en HTML y exige atributos
HTML . en minúsculas para tipos de documentos
más estrictos como XHTML.
En W3Schools siempre usamos nombres de Inténtalo tú mismo "
atributos en minúsculas. En W3Schools siempre usamos comillas
alrededor de los valores de los atributos.
Sugerimos: Citar siempre los valores de los
atributos ¿Comillas simples o dobles?
El estándar HTML no requiere comillas Las comillas dobles alrededor de los valores
alrededor de los valores de los atributos. de atributo son las más comunes en HTML,
Sin embargo, W3C recomienda citas en pero también se pueden usar comillas
HTML y exige citas para tipos de simples.
documentos más estrictos como XHTML. En algunas situaciones, cuando el propio
Bueno: valor del atributo contiene comillas dobles,
<a href="https://www.w3schools.com/html/ es necesario utilizar comillas simples:
">Visit our HTML tutorial</a> <p title='John "ShotGun" Nelson'>
Malo: O viceversa:
<a href=https://www.w3schools.com/html/> <p title="John 'ShotGun' Nelson">
Visit our HTML tutorial</a> Inténtalo tú mismo "
A veces hay que usar comillas. Este ejemplo Encabezados HTML
no mostrará el atributo de título ❮ AnteriorPróximo ❯
correctamente, porque contiene un espacio:
Ejemplo
<p title=About W3Schools>
Los encabezados HTML son títulos o <h1>Heading 1</h1>
subtítulos que desea mostrar en una página <h2>Heading 2</h2>
web. <h3>Heading 3</h3>
<h4>Heading 4</h4>
Ejemplo <h5>Heading 5</h5>
Heading 1 <h6>Heading 6</h6>
Heading 2 Inténtalo tú mismo "
Heading 3 Nota: los navegadores agregan
Heading 4 automáticamente un espacio en blanco (un
margen) antes y después de un
Heading 5
encabezado.
Heading 6
Inténtalo tú mismo " Los encabezados son importantes
Los motores de búsqueda utilizan los
Encabezados HTML encabezados para indexar la estructura y el
Los encabezados HTML se definen con contenido de sus páginas web.
las etiquetas <h1>to .<h6> Los usuarios a menudo hojean una página
<h1>define el encabezado más por sus títulos. Es importante utilizar
importante. <h6>define el encabezado encabezados para mostrar la estructura del
menos importante. documento.
Ejemplo
<h1>los encabezados deben usarse para los La referencia de etiquetas de W3Schools
encabezados principales, seguidos contiene información adicional sobre estas
de <h2>los encabezados, luego los menos etiquetas y sus atributos.
importantes <h3>, y así sucesivamente. Tag Description
Nota: Use encabezados HTML solo para
encabezados. No use encabezados para <html> Defines the root of an HTML
hacer que el texto sea GRANDE o document
en negrita .
<body> Defines the document's body
Encabezados más grandes <h1> to Defines HTML headings
Cada encabezado HTML tiene un tamaño <h6>
predeterminado. Sin embargo, puede
especificar el tamaño de cualquier
encabezado con el styleatributo, utilizando Párrafos HTML
la propiedad CSS font-size: ❮ AnteriorPróximo ❯
Ejemplo
<h1 style="font-size:60px;">Heading
1</h1> Un párrafo siempre comienza en una nueva
Referencia de etiquetas HTML línea y suele ser un bloque de texto.
Párrafos HTML
El elemento HTML <p>define un párrafo. El navegador eliminará automáticamente
Un párrafo siempre comienza en una nueva cualquier espacio y línea adicional cuando
línea y los navegadores agregan se muestre la página:
automáticamente un espacio en blanco (un Ejemplo
margen) antes y después de un párrafo. <p>
Ejemplo This paragraph
<p>This is a paragraph.</p> contains a lot of lines
<p>This is another paragraph.</p> in the source code,
Inténtalo tú mismo " but the browser
ignores it.
Pantalla HTML </p>
No puede estar seguro de cómo se mostrará
HTML. <p>
Las pantallas grandes o pequeñas y las This paragraph
ventanas redimensionadas crearán contains a lot of spaces
resultados diferentes. in the source code,
Con HTML, no puede cambiar la but the browser
visualización agregando espacios adicionales ignores it.
o líneas adicionales en su código HTML. </p>
Reglas horizontales HTML
La <hr>etiqueta define una ruptura temática Úselo <br>si desea un salto de línea (una
en una página HTML y, con mayor nueva línea) sin comenzar un nuevo
frecuencia, se muestra como una regla párrafo:
horizontal. Ejemplo
El <hr>elemento se usa para separar el <p>This is<br>a paragraph<br>with line
contenido (o definir un cambio) en una breaks.</p>
página HTML: Inténtalo tú mismo "
Ejemplo La <br>etiqueta es una etiqueta vacía, lo
<h1>This is heading 1</h1> que significa que no tiene una etiqueta final.
<p>This is some text.</p>
<hr> El problema del poema
<h2>This is heading 2</h2> Este poema se mostrará en una sola línea:
<p>This is some other text.</p> Ejemplo
<hr> <p>
Inténtalo tú mismo " My Bonnie lies over the ocean.
La <hr>etiqueta es una etiqueta vacía, lo
que significa que no tiene una etiqueta final. My Bonnie lies over the sea.
Saltos de línea HTML My Bonnie lies over the ocean.

El elemento HTML <br>define un salto de
línea. Oh, bring back my Bonnie to me.
</p>
Estilos HTML La propiedad es una propiedad
CSS. El valor es un valor CSS.
❮ AnteriorPróximo ❯
Aprenderá más sobre CSS más adelante en
este tutorial.
El atributo HTML stylese usa para agregar
estilos a un elemento, como color, fuente, Color de fondo
tamaño y más. La propiedad CSS background-colordefine el
color de fondo de un elemento HTML.
Ejemplo Ejemplo
yo soy rojo Establezca el color de fondo de una página
Soy azul en azul polvo:
Soy grande <body style="background-
Inténtalo tú mismo " color:powderblue;">
El atributo de estilo HTML <h1>This is a heading</h1>

La configuración del estilo de un elemento <p>This is a paragraph.</p>
HTML se puede hacer con el styleatributo.
El atributo HTML styletiene la siguiente </body>
sintaxis: Inténtalo tú mismo "
<tagname style="property:value;"> Ejemplo
Establezca el color de fondo para dos <p style="color:red;">This is a
elementos diferentes: paragraph.</p>
<body> Inténtalo tú mismo "
<h1 style="background- fuentes

color:powderblue;">This is a La propiedad CSS font-familydefine la
heading</h1> fuente que se utilizará para un elemento
<p style="background-color:tomato;">This HTML:
is a paragraph.</p> Ejemplo
<h1 style="font-family:verdana;">This is
</body> a heading</h1>
Inténtalo tú mismo " <p style="font-family:courier;">This is
a paragraph.</p>
ANUNCIO Inténtalo tú mismo "
Color de texto Tamano del texto

La propiedad CSS colordefine el color del La propiedad CSS font-sizedefine el
texto de un elemento HTML: tamaño del texto para un elemento HTML:
Ejemplo Ejemplo
<h1 style="color:blue;">This is a <h1 style="font-size:300%;">This is a
heading</h1> heading</h1>
<p style="font-size:160%;">This is a This text is bold
paragraph.</p> This text is italic
Inténtalo tú mismo " This is subscript and superscript
Alineación del texto
La propiedad CSS text-aligndefine la Elementos de formato HTML
alineación horizontal del texto para un Los elementos de formato se diseñaron para
elemento HTML: mostrar tipos especiales de texto:
Ejemplo  <b>- Texto en negrita
<h1 style="text-align:center;">Centered  <strong>- Texto importante
Heading</h1>  <i>- Texto en cursiva
<p style="text-align:center;">Centered  <em>- Texto enfatizado
paragraph.</p>  <mark>- Texto marcado
Formato de texto HTML  <small>- Texto más pequeño
 <del>- Texto eliminado
❮ AnteriorPróximo ❯  <ins>- Texto insertado
 <sub>- Texto de subíndice
HTML contiene varios elementos para definir  <sup>- Texto en superíndice
texto con un significado especial.
Elementos HTML <b> y <strong>
Ejemplo
El elemento HTML <b>define texto en una frase de otro idioma, un pensamiento,
negrita, sin ninguna importancia adicional. el nombre de un barco, etc.
Ejemplo Ejemplo
<b>This text is bold</b> <i>This text is italic</i>
Inténtalo tú mismo " Inténtalo tú mismo "
El elemento HTML <strong>define texto con El elemento HTML <em>define texto
gran importancia. El contenido interior enfatizado. El contenido interior
normalmente se muestra en negrita. normalmente se muestra en cursiva.
Ejemplo Sugerencia: un lector de pantalla
<strong>This text is important!</strong> pronunciará las palabras <em> con énfasis,
Inténtalo tú mismo " usando acento verbal.
Ejemplo
ANUNCIO <em>This text is emphasized</em>
Elementos HTML <i> y <em>
El elemento HTML <i>define una parte del Elemento HTML <pequeño>
texto en una voz o estado de ánimo El elemento HTML <small>define texto más
alternativo. El contenido interior pequeño:
normalmente se muestra en cursiva. Ejemplo
Sugerencia: la <i>etiqueta se usa a <small>This is some smaller
menudo para indicar un término técnico, text.</small>
Inténtalo tú mismo " Elemento HTML <ins>
El elemento HTML <ins>define un texto que
Elemento HTML <marca> se ha insertado en un documento. Los
El elemento HTML <mark>define el texto que navegadores normalmente subrayarán el
debe marcarse o resaltarse: texto insertado:
Ejemplo Ejemplo
<p>Do not forget to <p>My favorite color
buy <mark>milk</mark> today.</p> is <del>blue</del> <ins>red</ins>.</p>
Inténtalo tú mismo " Inténtalo tú mismo "
Elemento HTML <del> Elemento HTML <sub>

El elemento HTML <del>define el texto que El elemento HTML <sub>define el texto del
se ha eliminado de un documento. Los subíndice. El texto del subíndice aparece
navegadores generalmente marcarán una medio carácter por debajo de la línea
línea a través del texto eliminado: normal y, a veces, se representa en una
Ejemplo fuente más pequeña. El texto de subíndice
<p>My favorite color se puede utilizar para fórmulas químicas,
is <del>blue</del> red.</p> como H 2 O:
Inténtalo tú mismo " Ejemplo
<p>This
is <sub>subscripted</sub> text.</p>
Elemento HTML <sup>

El elemento HTML <sup>define texto en
superíndice. El texto en superíndice aparece
medio carácter por encima de la línea
normal y, a veces, se representa en una
fuente más pequeña. El texto en superíndice
se puede usar para notas al pie, como
WWW [1] :
Ejemplo
<p>This
is <sup>superscripted</sup> text.</p>

Teoria HTML

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Teoria HTML

Cargado por

Copyright:

Formatos disponibles

Documentos HTML Solo debe aparecer una vez, en la parte

Todos los documentos HTML deben superior de la página (antes de cualquier

<p> My first paragraph. </p>

Saltos de línea HTML My Bonnie lies over the ocean.

El atributo de estilo HTML <h1>This is a heading</h1>

<h1 style="background- fuentes

Color de texto Tamano del texto

Elemento HTML <del> Elemento HTML <sub>

Elemento HTML <sup>

También podría gustarte