Elementos HTML

La versión actual de la página aún no ha sido revisada por colaboradores experimentados y puede diferir significativamente de la versión revisada el 11 de diciembre de 2015; las comprobaciones requieren 50 ediciones .

El elemento HTML  es la unidad estructural básica de una página web , escrita en lenguaje HTML . Puede ver este elemento en el código fuente de todas las páginas web después de configurar el tipo de documento en la primera línea de la página. DOCTYPE especifica qué versión de (X)HTML está usando esta página. Los elementos de la página se encuentran entre la etiqueta de apertura <HTML> y la de cierre </HTML>. El elemento <html> se denomina elemento raíz. [una]


La estructura de un documento HTML

HTML  es un lenguaje de marcado de documentos etiquetados , es decir, cualquier documento en el lenguaje HTML es un conjunto de elementos, y el principio y el final de cada elemento se indican mediante marcas especiales denominadas etiquetas . El caso en que se escribe el nombre de la etiqueta no importa en HTML. Los elementos pueden estar vacíos , es decir, no contener texto u otros datos (por ejemplo, una etiqueta de salto de línea <br> ). En este caso, la etiqueta de cierre generalmente no se especifica. Además, los elementos pueden tener atributos que definen algunas de sus propiedades (por ejemplo, el tamaño de fuente para la etiqueta <font> ). Los atributos se especifican en la etiqueta de apertura. Este es un ejemplo de una parte marcada de un documento HTML:

< p > Texto entre dos etiquetas: apertura y cierre. </ p > <a href="http://example.com"> Aquí , el elemento contiene el atributo href . </a> He aquí un ejemplo de un elemento vacío : <br>

Todo documento HTML que se ajuste a una versión de la especificación HTML debe comenzar con una línea de declaración de versión HTML <!DOCTYPE>, que generalmente se parece a esto:

<!DOCTYPE HTML PÚBLICO "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Si no se especifica esta línea, se vuelve más difícil lograr la visualización correcta del documento en el navegador .

Además, el principio y el final del documento se indican mediante etiquetas <html>y, </html>respectivamente. Dentro de estas etiquetas se encuentran las etiquetas de encabezado ( <head></head>) y cuerpo ( <body></body>) del documento.

Opciones de DOCTYPE para HTML 4.01

  • Estricto: no contiene etiquetas marcadas como obsoletas o en desuso.
<!DOCTYPE HTML PÚBLICO "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • Transicional: contiene etiquetas obsoletas para compatibilidad y facilidad de transición desde versiones anteriores de HTML.
<!DOCTYPE HTML PÚBLICO "-//W3C//DTD HTML 4.01 Transicional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • Con marcos (Frameset): similar a la transición, pero también contiene etiquetas para crear conjuntos de marcos.
<!DOCTYPE HTML PÚBLICO "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

DOCTYPE para HTML 5

A diferencia de las versiones anteriores, solo hay una etiqueta. [2]

<!DOCTYPEhtml>

Elementos básicos

Las etiquetas y sus parámetros no distinguen entre mayúsculas y minúsculas. Es decir, <A HREF="http://example.com"> y <a href="http://example.com"> significan lo mismo.

En las últimas versiones de HTML, casi todas las etiquetas tienen una gran cantidad de parámetros opcionales, generalmente al menos 15. Proporcionamos solo los parámetros principales de la etiqueta.

Hipervínculos

< a href = "nombre de archivo" target = "_self" > nombre del enlace </ a >
  • El atributo hrefespecifica el valor de la dirección del documento al que apunta el enlace.
  • filename — nombre de archivo o dirección de Internet a la que desea hacer referencia.
  • название ссылки - el nombre del enlace de hipertexto que se mostrará en el navegador, es decir, se mostrará a aquellos que han visitado la página.
  • target - establece el valor de la ventana o marco en el que se abrirá el documento al que apunta el enlace. Posibles valores de atributo:
    • _top — abrir un documento en la ventana actual;
    • _blank - abrir un documento en una nueva ventana;
    • _self - abrir un documento en el marco actual;
    • _parent — abriendo el documento en el marco principal.

Valor por defecto: _self.

Ancla

El mismo elemento se usa para crear los llamados "anclas" (ancla), que luego se pueden usar en hipervínculos dirigidos a un elemento específico de la página. Por ejemplo:

<!DOCTYPE html> < html > < cabeza > < juego de caracteres meta = "utf-8" > < título > Anclar dentro del documento </ título > </ cabeza > < cuerpo > < p >< un nombre = "arriba" > < / a ></ p > < p > texto </ p > < p >< a href = "#top" > Superior </ a ></ p > </ body > </ html >

De manera similar, se puede colocar un ancla en un marcador ubicado en otra página web o en otro sitio: hacia dónde se dirige el enlace, debe ser <a name="xxx"></a>, y de dónde proviene el enlace, se hrefagrega un signo de almohadilla y el nombre del ancla . valor.

Además, la identificación de cualquier elemento puede servir como ancla en los navegadores modernos.

Bloques de texto

  • <H1> … </H1>, <H2> … </H2>, … , <H6> … </H6> — rúbricas 1, 2, … 6 niveles. Se utiliza para resaltar partes del texto (el encabezado 1 es el más grande, el 6 es el más pequeño).
  • <P> - Nuevo párrafo. Puede poner al final del párrafo </P>, pero esto no es obligatorio.
  • <BR> - nueva línea. Esta etiqueta no está cerrada (es decir, la etiqueta no existe </BR>)
  • <HR> - linea horizontal
  • <BLOCKQUOTE> … </BLOCKQUOTE>  - cotizar. Normalmente el texto se desplaza a la derecha.
  • <PRE> … </PRE>  — modo de vista previa (texto con formato previo). Los espacios en blanco permanecen donde están en el documento original (se ignoran en otras etiquetas). Internamente, se pueden procesar etiquetas en línea que no sean img, object, big, small, sup y sub.
  • <DIV> … </DIV>  - bloque (usualmente usado para aplicar estilos CSS )
  • <SPAN> … </SPAN>  - cadena (generalmente se usa para aplicar estilos CSS )

Formato de texto

  • <EM> … </EM>  - estrés lógico (generalmente se muestra en cursiva )
  • <STRONG> … </STRONG>  - énfasis lógico reforzado (generalmente se muestra en negrita )
  • <I> … </I>  - texto en cursiva
  • <B> … </B>  - texto en negrita
  • <U> … </U>  - texto subrayado
  • <S> … </S> (o <STRIKE> … </STRIKE> ) - texto tachado
  • <BIG> … </BIG>  - aumento del tamaño de fuente
  • <SMALL> … </SMALL>  - reducción de fuente
  • <BLINK> … </BLINK>  - texto parpadeante. ¡Atención! Esta etiqueta no funciona en Internet Explorer 5 y versiones anteriores sin JavaScript
  • <MARQUEE> … </MARQUEE>  - texto que se desliza por la pantalla.
  • <SUB> … </SUB>  - subíndice de texto. Por ejemplo, H <SUB>2</SUB>O creará el texto H 2 O.
  • <SUP> … </SUP>  - texto en superíndice. Por ejemplo, E=mc <SUP>2</SUP> creará el texto E=mc 2 .
  • <FONT параметры> … </FONT>  — establecer parámetros de fuente. Esta etiqueta tiene las siguientes opciones:
    • COLOR=цвет - establecer color. El color se puede especificar en forma hexadecimal como #rrggbb (los primeros 2 dígitos hexadecimales son el componente rojo, los 2 siguientes son verdes, los 2 últimos son azules), o por un nombre.
    • FACE=шрифтconfigurando el tipo de letra
    • SIZE=размерconfigurando el tamaño de fuente. Tamaño 1 a 7: el tamaño predeterminado es 3. Hay muchas formas de cambiar el tamaño predeterminado.
    • SIZE=+изменениеo  — cambie el tamaño de fuente del estándar. Por ejemplo, +2 significa que el tamaño es 2 más que el tamaño estándar.SIZE=-изменение

Por ejemplo,

< U > tres </ U > < FONT SIZE = "+2" > grande </ FONT > < FONT COLOR = "green" > verde </ FONT > silbatos son la señal para iniciar el ataque .

creará texto

Сигналом к началу атаки являются три больших зелёных свистка.

Listas

< UL > < LI > primer elemento </ LI > < LI > segundo elemento </ LI > < LI > tercer elemento </ LI > </ UL >

crea una lista

  • primer elemento
  • segundo elemento
  • tercer elemento

Si en lugar de <UL> ( Lista Desordenada  - lista desordenada) pone <OL> ( Lista Ordenada  - lista numerada), la lista será numerada:

  1. primer elemento
  2. segundo elemento
  3. tercer elemento

Estas etiquetas tienen parámetros:

tipo = "tipo"

donde tipo  es formulario:

en <UL>  - caracteres

  • square - cuadrado
  • circle - circunferencia
  • disk - círculo: predeterminado

y en <OL>  - números o letras

  • A o a (en letras latinas) - lista alfabética: respectivamente en mayúsculas o minúsculas
  • I o i - Números romanos: respectivamente en mayúsculas o minúsculas (los números romanos muestran números del 1 al 3999, el resto - árabe)
  • 1 - Números arábigos: predeterminado

se escribe asi:

< tipool = " yo" > < li > Primero </ li > < li > Segundo </ li > < li > Etc </ li > </ ol >

y creará lo siguiente:

  1. Primero
  2. Segundo
  3. Etc.

Parámetro start ="start" (solo para <OL> ), que define el comienzo de una nueva cuenta regresiva: por ejemplo, si no necesita 1, 2, 3, sino 24, 25, 26

Está escrito así:

< comienzo anterior = " 24" > < li > Veinticuatro </ li > < li > Veinticinco </ li > < li > Etc </ li >

y creará lo siguiente:

  1. Veinticuatro
  2. Veinticinco
  3. Etc.

y finalmente, para la etiqueta , un <LI> parámetro  - si necesita saltar de un dígito a otro: por ejemplo, no 1, 2, 3, 4, sino 1, 2, 22, 23 value="следующий"

< viejo > < li > Uno </ li > < li > Dos </ li > < valor li = "22" > Veintidós </ li > < li > Veintitrés </ li >

creará lo siguiente:

  1. Una
  2. Dos
  3. Veintidós
  4. Veintitres

Finalmente, la tercera y última lista es la lista de definiciones :

< DL > < DT > Gato </ DT > < DD > Mascota maullando </ DD > < DT > Gato </ DT > < DD > Marido de gato </ DD > < DT > Cocodrilo </ DT > < DD > Gran africano bestia con dientes afilados </ DD > </ DL >

creará lo siguiente:

Gato mascota maullando Gato marido gato Cocodrilo gran bestia africana con dientes afilados

Por cierto, es posible que las etiquetas <LI>, <DT>, <DD>no estén cerradas.

Diferencias en la visualización de listas numeradas

Con valores no positivos en la numeración, los navegadores se comportan de manera diferente. Por ejemplo, Internet Explorer ignora value=0, value=-1etc., mientras que otros navegadores como Chrome , Firefox , muestran el valor dado. Al mismo tiempo, Internet Explorer no ignora start=0, start=-1etc., es decir, puede comenzar la lista con un valor no positivo, pero no puede saltar a un valor no positivo en la numeración.

marcado HTML este navegador cromo, firefox explorador de Internet
<ol inicio=-2><li><li valor=0><li valor=2></ol>
  1.  
  2.  
  3.  
 -2, 0, 2 -2, -1, 2

En la lista alfabética ( type=Ao type=a), algunos navegadores, como Chrome, Firefox, muestran valores no positivos como números, mientras que Internet Explorer (en modo Quirks , es decir, si la página no especifica HTML 4.01 o 5 en la etiqueta !DOCTYPE HTML) muestra valores negativos como letras con un signo menos y cero con el símbolo @.

marcado HTML este navegador cromo, firefox Internet Explorer (modo Quirks)
<ol tipo=A inicio=-1><li><li><li></ol>
  1.  
  2.  
  3.  
 -10 A -A, @, A

Algunos navegadores, como Chrome, Firefox, ignoran un valor vacío o no numérico ( value=, value=A, value=B), mientras que Internet Explorer lo percibe como value=1.

marcado HTML este navegador cromo, firefox explorador de Internet
<ol inicio=-2><li><li valor=B><li valor=2></ol>
  1.  
  2.  
  3.  
 -2, -1, 2 -2, 1, 2

Hay diferencias al mostrar números en números romanos ( type=Io type=i), porque Internet Explorer (en modo Quirks , es decir, si la página no especifica la versión de HTML 4.01 o 5 en la etiqueta !DOCTYPE HTML) muestra algunos números de forma incorrecta.

marcado HTML este navegador cromo, firefox Internet Explorer (modo Quirks)
<ol tipo=Empiezo=3300><li><li><li><li></ol>
  1.  
  2.  
  3.  
  4.  
MMMCCC
MMMCCCCI
MMMCCCII
MMMCCCIII 		MMMCCC
MMMCCC
MMMCCC
MMMCCC

Internet Explorer muestra correctamente todos los números del intervalo de 1 a 1880, pero no todos los del intervalo de 1881 a 3999. Para 603 números, 67 grupos de 9 números (xxx1-xxx9), el dígito menos significativo no se incluye en la entrada del número romano. Y esto, muy probablemente, no es para acortar un registro largo, porque 3888 - el número con la entrada de números romanos más larga (entre 1 y 3999) (MMMDCCCLXXXVIII) - se muestra correctamente.

Los grupos de números que se muestran incorrectamente en Internet Explorer (en modo Quirks ) están marcados con una cruz en la tabla:

01-09 11-19 21-29 31-39 41-49 51-59 61-69 71-79 81-89 91-99
1800 ✘
2300 ✘ ✘ ✘
2700 ✘ ✘ ✘
2800 ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘
3100 ✘
3200 ✘ ✘ ✘ ✘ ✘ ✘ ✘
3300 ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘
3400 ✘ ✘ ✘ ✘ ✘ ✘ ✘
3500 ✘
3600 ✘ ✘ ✘ ✘ ✘ ✘ ✘
3700 ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘
3800 ✘ ✘ ✘
3900 ✘ ✘ ✘ ✘ ✘ ✘ ✘

Objetos

  • EMBED - insertar varios objetos: documentos no HTML y archivos multimedia
  • APPLET - insertar subprogramas de Java
  • SCRIPT - insertar guiones.

Imágenes

  • IMG - insertar imagen. Esta etiqueta no está cerrada.
    • SRC - nombre o URL
    • ALT - nombre alternativo (se mostrará si el navegador prohíbe mostrar imágenes)
    • TITLE - una breve descripción de la imagen (que se muestra al pasar el cursor sobre la imagen)
    • WIDTH, HEIGHT - dimensiones (si no coinciden con las dimensiones reales de la imagen, la imagen se "estirará" o "encogerá")
    • ALIGN — establece los parámetros de ajuste de texto (superior, medio, inferior, izquierda, derecha)
    • VSPACE, HSPACE - establecer las dimensiones del espacio vertical y horizontal alrededor de la imagen

Ejemplo:

< IMG SRC = url ALT = "texto" TITLE = "texto" ANCHO = "tamaño (px, %)" ALTO = "tamaño (px, %)" >

Una imagen se puede hacer un enlace:

< A HREF = URL >< IMG SRC = URL ></ A >

Mapa de imágenes

Ejemplo:

< IMG ancho = "500" alto = "200" usemap = "#somemap" src = "url" > < MAP name = "somemap" > < AREA forma = "rect" coords = "6, 7, 140, 196" href = "url1" > < AREA forma = "círculo" coords = "239, 98, 92" href = "url2" > < AREA forma = "polígono" coords = "386.16, 344.56, 350.189, 385.132, 489.190, 496.74" href = "url3" > </ MAPA >

Tablas

  • TABLE - creación de una tabla. Opciones de etiqueta:
    • BORDER — grosor de las líneas divisorias en la tabla
    • CELLSPACING - distancia entre celdas
    • CELLPADDING- sangría desde el marco hasta el contenido de la celda.
  • CAPTION - título de la tabla (esta etiqueta es opcional)
  • TR - fila de la tabla
  • TH - encabezado de columna de tabla (esta etiqueta es opcional)
  • TD - celda de tabla
  • height - altura de la mesa
  • width - ancho de la mesa

Por ejemplo,

< BORDE DE LA MESA = "1" CELLSPACING = "0" > < CAPTION > Captura de cocodrilo Mumbe Yumba </ CAPTION > < TH > Año </ TH > < TH > Captura </ TH > < TR > < TD > 1997 </ TD > < TD > 214 </ TD > </ TR > < TR > < TD > 1998 </ TD > < TD > 216 </ TD > </ TR > < TR > < TD > 1999 </ TD > < TD > 207 </ TD > </ TR > </ TABLA >

Crea una tabla:

Captura de cocodrilos en Mumbe-Yumbe
Año Captura
1997 214
1998 216
1999 207

La etiqueta TABLE también tiene un parámetro CELLPADDING. Define la distancia en píxeles entre el borde de la celda y su contenido. Por ejemplo, si reemplaza la primera fila de la tabla con

< BORDE DE LA MESA = "1" ESPACIO DE CELDAS = "0" RELLENO DE CELDAS = "5" >

la tabla se verá así:

Captura de cocodrilos en Mumbe-Yumbe
Año Captura
1997 214
1998 216
1999 207

Otro parámetro de las etiquetas TABLE, TR, TH, TD es ALIGN. Define la alineación. Los valores posibles son center(centro), left(izquierda), right(derecha).

El parámetro ALIGNin TDo THdetermina la alineación del contenido dentro de la celda dada, in TR - para el contenido de todas las celdas en la fila, TABLE - para la tabla misma en la página. Para cada celda, la alineación se toma desde TDo TH, si no está configurado, desde TR, si no está configurado, centro para THo izquierda para TD.

Por ejemplo, si reemplaza las primeras filas de la tabla con

< BORDE DE LA MESA = "1" CELLSPACING = "0" ALIGN = "center" > < CAPTION > Captura de cocodrilo Mumbe Yumba </ CAPTION > < TH > Año </ TH > < TH > Captura </ TH > < TR > < TD > 1997 </ TD > < TD ALINEAR = "CENTRO" > 214 </ TD >

la tabla se verá así:

Captura de cocodrilos en Mumbe-Yumbe
Año Captura
1997 214
1998 216
1999 207

Las etiquetas no cerradas TD , TR y TH conducen a una visualización incorrecta, especialmente cuando se trabaja con tablas anidadas.

Formularios

Crear formularios en HTML es bastante complejo. Aquí solo se dan los nombres de las etiquetas principales.

  • FORM - creando un formulario
  • INPUT - elemento de entrada (puede tener diferentes funciones, desde ingresar texto hasta enviar un formulario)
  • TEXTAREA - área de texto (campo de entrada de texto de varias líneas)
  • SELECT - una lista (normalmente en forma de menú desplegable)
  • OPTION - elemento de la lista

Símbolos

Para crear un símbolo, no es necesario buscarlo en el teclado: simplemente puede escribir la etiqueta; por ejemplo, para obtener ¢ , debe escribir &cent;, espacio sin interrupciones  - &nbsp;, acento  - &#x301;etc.

Nombres de colores

Los siguientes colores están definidos en HTML.

Nombre color hexadecimal
negro #000000
Plata #c0c0c0
granate #800000
rojo #ff0000
Armada #000080
azul #0000ff
violeta #800080
fucsia #ff00ff
verde #008000
Lima #00ff00
aceituna #808000
amarillo #ffff00
verde azulado #008080
agua #00ffff
gris #808080
blanco #ffffff

Caracteres básicos

El código Símbolo Sentido
< < menos
> > más
&erio; & ampersand
  espacio que no se rompe (en este espacio la línea no se rompe para envolver)
§a; § párrafo
№ No. habitación
&Copiar; © derechos de autor _ _
reg; ® marca registrada _
™ ™ marca registrada _ _ _
° ° grados
« " cita de apertura en ruso
" » cita de cierre en ruso
&helli; … elipsis
– — estrellarse
• • punto gordo
± ± más o menos
&menos; − menos

Los caracteres del teclado ' y " en ruso no son comillas. También es incorrecto reemplazar №, ©, ®, ™, °C con N, (c), (R), TM, C en los sitios web.

El guión, el guión y el signo menos son tres caracteres diferentes.

  1. Símbolo de teclado : se llama guión y se usa dentro de las palabras.
  2. Un signo menos es más ancho que un guión . Se utiliza para escribir números negativos y operaciones de resta.
  3. El guión es incluso más ancho que el signo menos . Se usa entre palabras y se supera con espacios, y al frente - inseparable . También se utiliza un guión para indicar intervalos numéricos , pero no se completa con espacios.

Más detalles: Artemy Lebedev . Guión, Menos y Guión, o Características de la tipografía rusa . Liderazgo (15 de enero de 2003). Consultado el 23 de abril de 2013. Archivado desde el original el 9 de diciembre de 2007.

Los caracteres < , > y & no se pueden mostrar normalmente en HTML porque tienen un significado especial. Siempre se muestran usando <, > y &erio; respectivamente.

Para la mayoría de los caracteres especiales, consulte about.com .

Notas

  1. ↑ Elemento raíz del documento HTML Descripción
  2. ↑ Estándar HTML . html.spec.whatwg.org . Consultado: 26 de septiembre de 2021.

Enlaces