HTML - Guía rápida
HTML significa Hypertext MArkup Language, y es el idioma más utilizado para escribir páginas web.
Hypertextse refiere a la forma en que las páginas web (documentos HTML) se vinculan entre sí. Por tanto, el enlace disponible en una página web se denomina hipertexto.
Como sugiere su nombre, HTML es una Markup Language lo que significa que utiliza HTML para simplemente "marcar" un documento de texto con etiquetas que le indican a un navegador web cómo estructurarlo para mostrarlo.
Originalmente, HTML se desarrolló con la intención de definir la estructura de documentos como encabezados, párrafos, listas, etc., para facilitar el intercambio de información científica entre investigadores.
Ahora, HTML se está utilizando ampliamente para formatear páginas web con la ayuda de diferentes etiquetas disponibles en lenguaje HTML.
Documento HTML básico
En su forma más simple, a continuación se muestra un ejemplo de un documento HTML:
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>Etiquetas HTML
Como se dijo anteriormente, HTML es un lenguaje de marcado y hace uso de varias etiquetas para formatear el contenido. Estas etiquetas se incluyen entre llaves angulares<Tag Name>. Excepto algunas etiquetas, la mayoría de las etiquetas tienen sus correspondientes etiquetas de cierre. Por ejemplo,<html> tiene su etiqueta de cierre </html> y <body> la etiqueta tiene su etiqueta de cierre </body> etiqueta, etc.
El ejemplo anterior de documento HTML utiliza las siguientes etiquetas:
| No Señor | Etiqueta y descripción |
|---|---|
| 1 | <!DOCTYPE...> Esta etiqueta define el tipo de documento y la versión HTML. |
| 2 | <html> Esta etiqueta incluye el documento HTML completo y se compone principalmente del encabezado del documento que está representado por <head> ... </head> y el cuerpo del documento que está representado por las etiquetas <body> ... </body>. |
| 3 | <head> Esta etiqueta representa el encabezado del documento que puede mantener otras etiquetas HTML como <title>, <link>, etc. |
| 4 | <title> La etiqueta <title> se usa dentro de la etiqueta <head> para mencionar el título del documento. |
| 5 | <body> Esta etiqueta representa el cuerpo del documento que mantiene otras etiquetas HTML como <h1>, <div>, <p>, etc. |
| 6 | <h1> Esta etiqueta representa el encabezado. |
| 7 | <p> Esta etiqueta representa un párrafo. |
Para aprender HTML, deberá estudiar varias etiquetas y comprender cómo se comportan al formatear un documento de texto. Aprender HTML es simple, ya que los usuarios deben aprender el uso de diferentes etiquetas para formatear el texto o las imágenes para crear una hermosa página web.
El Consorcio World Wide Web (W3C) recomienda utilizar etiquetas en minúsculas a partir de HTML 4.
Estructura del documento HTML
Un documento HTML típico tendrá la siguiente estructura:
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>Estudiaremos todas las etiquetas de encabezado y cuerpo en capítulos posteriores, pero por ahora veamos qué es la etiqueta de declaración de documento.
La declaración <! DOCTYPE>
El navegador web utiliza la etiqueta de declaración <! DOCTYPE> para comprender la versión del HTML que se utiliza en el documento. La versión actual de HTML es 5 y hace uso de la siguiente declaración:
<!DOCTYPE html>Hay muchos otros tipos de declaración que se pueden usar en documentos HTML dependiendo de la versión de HTML que se esté usando. Veremos más detalles sobre esto al discutir la etiqueta <! DOCTYPE ...> junto con otras etiquetas HTML.
Etiquetas de encabezado
Cualquier documento comienza con un encabezado. Puede utilizar diferentes tamaños para sus títulos. HTML también tiene seis niveles de encabezados, que utilizan los elementos<h1>, <h2>, <h3>, <h4>, <h5>, y <h6>. Mientras muestra cualquier encabezado, el navegador agrega una línea antes y una línea después de ese encabezado.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>Esto producirá el siguiente resultado:
Etiqueta de párrafo
los <p>La etiqueta ofrece una forma de estructurar su texto en diferentes párrafos. Cada párrafo de texto debe ir entre una etiqueta de apertura <p> y una de cierre </p> como se muestra a continuación en el ejemplo:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>Esto producirá el siguiente resultado:
Etiqueta de salto de línea
Siempre que use el <br />elemento, todo lo que le siga comienza desde la siguiente línea. Esta etiqueta es un ejemplo deempty elemento, donde no necesita abrir y cerrar etiquetas, ya que no hay nada entre ellas.
La etiqueta <br /> tiene un espacio entre los caracteres. bry la barra diagonal. Si omite este espacio, los navegadores más antiguos tendrán problemas para representar el salto de línea, mientras que si omite el carácter de barra diagonal y solo usa <br>, no es válido en XHTML.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>Esto producirá el siguiente resultado:
Centrar contenido
Puedes usar <center> etiqueta para colocar cualquier contenido en el centro de la página o en cualquier celda de la tabla.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>Esto producirá el siguiente resultado:
Lineas horizontales
Las líneas horizontales se utilizan para dividir visualmente secciones de un documento. los<hr> La etiqueta crea una línea desde la posición actual en el documento hasta el margen derecho y divide la línea en consecuencia.
Por ejemplo, es posible que desee poner una línea entre dos párrafos como en el ejemplo que se muestra a continuación:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>Esto producirá el siguiente resultado:
Otra vez <hr /> etiqueta es un ejemplo de la empty elemento, donde no necesita abrir y cerrar etiquetas, ya que no hay nada entre ellas.
los <hr /> el elemento tiene un espacio entre los caracteres hry la barra diagonal. Si omite este espacio, los navegadores más antiguos tendrán problemas para representar la línea horizontal, mientras que si omite el carácter de barra diagonal y solo usa<hr> no es válido en XHTML
Conservar formato
A veces, desea que su texto siga el formato exacto de cómo está escrito en el documento HTML. En estos casos, puede utilizar la etiqueta preformateada<pre>.
Cualquier texto entre la apertura <pre> etiqueta y el cierre </pre> La etiqueta conservará el formato del documento de origen.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>Esto producirá el siguiente resultado:
Intente usar el mismo código sin guardarlo dentro <pre>...</pre> etiquetas
Espacios que no rompen
Suponga que quiere usar la frase "12 hombres enojados". Aquí, no querrá que un navegador divida "12, Angry" y "Men" en dos líneas:
An example of this technique appears in the movie "12 Angry Men."En los casos en los que no desee que el navegador del cliente divida el texto, debe utilizar una entidad de espacio que no se rompa en lugar de un espacio normal. Por ejemplo, al codificar los "12 hombres enojados" en un párrafo, debe usar algo similar al siguiente código:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie "12 Angry Men."</p>
</body>
</html>Esto producirá el siguiente resultado:
Un HTML elementestá definido por una etiqueta de inicio. Si el elemento contiene otro contenido, termina con una etiqueta de cierre, donde el nombre del elemento está precedido por una barra inclinada como se muestra a continuación con algunas etiquetas:
| Etiqueta de inicio | Contenido | Etiqueta final |
|---|---|---|
| <p> | Este es el contenido del párrafo. | </p> |
| <h1> | Este es el contenido del encabezado. | </h1> |
| <div> | Este es el contenido de la división. | </div> |
| <br /> |
Asi que aqui <p>....</p> es un elemento HTML, <h1>...</h1>es otro elemento HTML. Hay algunos elementos HTML que no necesitan cerrarse, como<img.../>, <hr /> y <br />elementos. Estos se conocen comovoid elements.
Los documentos HTML constan de un árbol de estos elementos y especifican cómo se deben construir los documentos HTML y qué tipo de contenido se debe colocar en qué parte de un documento HTML.
Etiqueta HTML frente a elemento
Un elemento HTML se define mediante una etiqueta inicial . Si el elemento contiene otro contenido, termina con una etiqueta de cierre .
Por ejemplo, <p> es la etiqueta de inicio de un párrafo y </p> es etiqueta de cierre del mismo párrafo pero <p>This is paragraph</p> es un elemento de párrafo.
Elementos HTML anidados
Está muy permitido mantener un elemento HTML dentro de otro elemento HTML -
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>
</html>Esto mostrará el siguiente resultado:
Hemos visto algunas etiquetas HTML y su uso como etiquetas de encabezado. <h1>, <h2>, etiqueta de párrafo <p>y otras etiquetas. Los usamos hasta ahora en su forma más simple, pero la mayoría de las etiquetas HTML también pueden tener atributos, que son bits adicionales de información.
Un atributo se utiliza para definir las características de un elemento HTML y se coloca dentro de la etiqueta de apertura del elemento. Todos los atributos se componen de dos partes: unaname y un value
los namees la propiedad que desea establecer. Por ejemplo, el párrafo<p> elemento en el ejemplo lleva un atributo cuyo nombre es align, que puede utilizar para indicar la alineación del párrafo en la página.
los valuees lo que desea que se establezca el valor de la propiedad y siempre entre comillas. El siguiente ejemplo muestra tres posibles valores del atributo de alineación: left, center y right.
Los nombres y valores de los atributos no distinguen entre mayúsculas y minúsculas. Sin embargo, el World Wide Web Consortium (W3C) recomienda atributos / valores de atributo en minúsculas en su recomendación HTML 4.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align = "left">This is left aligned</p>
<p align = "center">This is center aligned</p>
<p align = "right">This is right aligned</p>
</body>
</html>Esto mostrará el siguiente resultado:
Atributos fundamentales
Los cuatro atributos principales que se pueden utilizar en la mayoría de los elementos HTML (aunque no en todos) son:
- Id
- Title
- Class
- Style
El atributo de identificación
los idEl atributo de una etiqueta HTML se puede utilizar para identificar de forma única cualquier elemento dentro de una página HTML. Hay dos razones principales por las que es posible que desee utilizar un atributo id en un elemento:
Si un elemento lleva un atributo id como identificador único, es posible identificar solo ese elemento y su contenido.
Si tiene dos elementos con el mismo nombre dentro de una página web (u hoja de estilo), puede usar el atributo id para distinguir entre elementos que tienen el mismo nombre.
Discutiremos la hoja de estilo en un tutorial separado. Por ahora, usemos el atributo id para distinguir entre dos elementos de párrafo como se muestra a continuación.
Example
<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>El atributo del título
los titleEl atributo da un título sugerido para el elemento. Ellos sintaxis para eltitle atributo es similar como se explica para id atributo -
El comportamiento de este atributo dependerá del elemento que lo lleve, aunque a menudo se muestra como información sobre herramientas cuando el cursor pasa sobre el elemento o mientras el elemento se está cargando.
Example
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>Esto producirá el siguiente resultado:
Ahora intente llevar el cursor sobre "Ejemplo de etiqueta de título con título" y verá que cualquier título que haya utilizado en su código aparecerá como una descripción emergente del cursor.
El atributo de clase
los classEl atributo se utiliza para asociar un elemento con una hoja de estilo y especifica la clase de elemento. Aprenderá más sobre el uso del atributo de clase cuando aprenda Hoja de estilo en cascada (CSS). Así que por ahora puedes evitarlo.
El valor del atributo también puede ser una lista de nombres de clases separados por espacios. Por ejemplo
class = "className1 className2 className3"El atributo de estilo
El atributo de estilo le permite especificar reglas de hojas de estilo en cascada (CSS) dentro del elemento.
<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style = "font-family:arial; color:#FF0000;">Some text...</p>
</body>
</html>Esto producirá el siguiente resultado:
En este momento, no estamos aprendiendo CSS, así que continuemos sin preocuparnos mucho por CSS. Aquí, debe comprender qué son los atributos HTML y cómo se pueden usar al formatear el contenido.
Atributos de internacionalización
Hay tres atributos de internacionalización, que están disponibles para la mayoría (aunque no para todos) los elementos XHTML.
- dir
- lang
- xml:lang
El atributo dir
los dirEl atributo le permite indicar al navegador la dirección en la que debe fluir el texto. El atributo dir puede tomar uno de dos valores, como puede ver en la siguiente tabla:
| Valor | Sentido |
|---|---|
| ltr | De izquierda a derecha (el valor predeterminado) |
| rtl | De derecha a izquierda (para idiomas como hebreo o árabe que se leen de derecha a izquierda) |
Example
<!DOCTYPE html>
<html dir = "rtl">
<head>
<title>Display Directions</title>
</head>
<body>
This is how IE 5 renders right-to-left directed text.
</body>
</html>Esto producirá el siguiente resultado:
Cuando se usa el atributo dir dentro de la etiqueta <html>, determina cómo se presentará el texto en todo el documento. Cuando se usa dentro de otra etiqueta, controla la dirección del texto solo para el contenido de esa etiqueta.
El atributo lang
los langEl atributo le permite indicar el idioma principal utilizado en un documento, pero este atributo se mantuvo en HTML solo por compatibilidad con versiones anteriores de HTML. Este atributo ha sido reemplazado por elxml:lang atributo en nuevos documentos XHTML.
Los valores del atributo lang son códigos de idioma de dos caracteres estándar ISO-639. ChequeHTML Language Codes: ISO 639 para obtener una lista completa de los códigos de idioma.
Example
<!DOCTYPE html>
<html lang = "en">
<head>
<title>English Language Page</title>
</head>
<body>
This page is using English Language
</body>
</html>Esto producirá el siguiente resultado:
El atributo xml: lang
El atributo xml: lang es el reemplazo XHTML del atributo lang . El valor del atributo xml: lang debe ser un código de país ISO-639 como se mencionó en la sección anterior.
Atributos genéricos
Aquí hay una tabla de algunos otros atributos que se pueden usar fácilmente con muchas de las etiquetas HTML.
| Atributo | Opciones | Función |
|---|---|---|
| alinear | derecha, izquierda, centro | Alinea las etiquetas horizontalmente |
| valignar | arriba, medio, abajo | Alinea las etiquetas verticalmente dentro de un elemento HTML. |
| bgcolor | valores numéricos, hexadecimales, RGB | Coloca un color de fondo detrás de un elemento |
| antecedentes | URL | Coloca una imagen de fondo detrás de un elemento. |
| carné de identidad | Usuario definido | Nombra un elemento para usar con hojas de estilo en cascada. |
| clase | Usuario definido | Clasifica un elemento para su uso con hojas de estilo en cascada. |
| anchura | Valor numérico | Especifica el ancho de tablas, imágenes o celdas de tabla. |
| altura | Valor numérico | Especifica la altura de las tablas, imágenes o celdas de una tabla. |
| título | Usuario definido | Título "emergente" de los elementos. |
Veremos ejemplos relacionados a medida que procedamos a estudiar otras etiquetas HTML. Para obtener una lista completa de etiquetas HTML y atributos relacionados, consulte la referencia a la lista de etiquetas HTML .
Si usa un procesador de texto, debe estar familiarizado con la capacidad de hacer que el texto esté en negrita, cursiva o subrayado; estas son solo tres de las diez opciones disponibles para indicar cómo puede aparecer el texto en HTML y XHTML.
Texto en negrita
Todo lo que aparece dentro <b>...</b> elemento, se muestra en negrita como se muestra a continuación:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>Esto producirá el siguiente resultado:
Texto en cursiva
Todo lo que aparece dentro <i>...</i> El elemento se muestra en cursiva como se muestra a continuación:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses an <i>italicized</i> typeface.</p>
</body>
</html>Esto producirá el siguiente resultado:
Texto subrayado
Todo lo que aparece dentro <u>...</u> elemento, se muestra con subrayado como se muestra a continuación:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses an <u>underlined</u> typeface.</p>
</body>
</html>Esto producirá el siguiente resultado:
Texto de tachado
Todo lo que aparece dentro <strike>...</strike> El elemento se muestra tachado, que es una línea delgada a través del texto como se muestra a continuación:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>Esto producirá el siguiente resultado:
Fuente monoespaciada
El contenido de un <tt>...</tt>El elemento está escrito en fuente monoespaciada. La mayoría de las fuentes se conocen como fuentes de ancho variable porque diferentes letras tienen diferentes anchos (por ejemplo, la letra 'm' es más ancha que la letra 'i'). Sin embargo, en una fuente monoespaciada, cada letra tiene el mismo ancho.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>Esto producirá el siguiente resultado:
Texto en superíndice
El contenido de un <sup>...</sup>el elemento está escrito en superíndice; el tamaño de fuente utilizado es del mismo tamaño que los caracteres que lo rodean, pero se muestra la mitad de la altura de un carácter por encima de los demás caracteres.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>Esto producirá el siguiente resultado:
Texto de subíndice
El contenido de un <sub>...</sub>el elemento está escrito en subíndice; el tamaño de fuente utilizado es el mismo que el de los caracteres que lo rodean, pero se muestra la mitad de la altura de un carácter debajo de los demás caracteres.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>Esto producirá el siguiente resultado:
Texto insertado
Todo lo que aparece dentro <ins>...</ins> El elemento se muestra como texto insertado.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>Esto producirá el siguiente resultado:
Texto eliminado
Todo lo que aparece dentro <del>...</del> elemento, se muestra como texto eliminado.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>Esto producirá el siguiente resultado:
Texto más grande
El contenido del <big>...</big> El elemento se muestra un tamaño de fuente más grande que el resto del texto que lo rodea, como se muestra a continuación:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>Esto producirá el siguiente resultado:
Texto más pequeño
El contenido del <small>...</small> El elemento se muestra con un tamaño de fuente más pequeño que el resto del texto que lo rodea, como se muestra a continuación:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</html>Esto producirá el siguiente resultado:
Agrupar contenido
los <div> y <span> Los elementos le permiten agrupar varios elementos para crear secciones o subsecciones de una página.
Por ejemplo, es posible que desee poner todas las notas al pie en una página dentro de un elemento <div> para indicar que todos los elementos dentro de ese elemento <div> se relacionan con las notas al pie. A continuación, puede adjuntar un estilo a este elemento <div> para que aparezcan utilizando un conjunto especial de reglas de estilo.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id = "menu" align = "middle" >
<a href = "/index.htm">HOME</a> |
<a href = "/about/contact_us.htm">CONTACT</a> |
<a href = "/about/index.htm">ABOUT</a>
</div>
<div id = "content" align = "left" >
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>Esto producirá el siguiente resultado:
El elemento <span>, por otro lado, se puede usar para agrupar elementos en línea solamente. Entonces, si tiene una parte de una oración o párrafo que desea agrupar, puede usar el elemento <span> de la siguiente manera.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style = "color:green">span tag</span>
and the <span style = "color:red">div tag</span> alongwith CSS</p>
</body>
</html>Esto producirá el siguiente resultado:
Estas etiquetas se usan comúnmente con CSS para permitirle adjuntar un estilo a una sección de una página.
Las etiquetas de frase se han desechado para fines específicos, aunque se muestran de forma similar a otras etiquetas básicas como <b>, <i>, <pre>y <tt>, que has visto en el capítulo anterior. Este capítulo lo llevará a través de todas las etiquetas de frases importantes, así que comencemos a verlas una por una.
Texto enfatizado
Todo lo que aparece dentro <em>...</em> El elemento se muestra como texto enfatizado.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>The following word uses an <em>emphasized</em> typeface.</p>
</body>
</html>Esto producirá el siguiente resultado:
Texto marcado
Todo lo que aparece dentro <mark>...</mark> elemento, se muestra marcado con tinta amarilla.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Marked Text Example</title>
</head>
<body>
<p>The following word has been <mark>marked</mark> with yellow</p>
</body>
</html>Esto producirá el siguiente resultado:
Texto fuerte
Todo lo que aparece dentro <strong>...</strong> El elemento se muestra como texto importante.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
<p>The following word uses a <strong>strong</strong> typeface.</p>
</body>
</html>Esto producirá el siguiente resultado:
Abreviatura de texto
Puede abreviar un texto colocándolo dentro de las etiquetas de apertura <abbr> y cerrando </abbr>. Si está presente, el atributo de título debe contener esta descripción completa y nada más.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Text Abbreviation</title>
</head>
<body>
<p>My best friend's name is <abbr title = "Abhishek">Abhy</abbr>.</p>
</body>
</html>Esto producirá el siguiente resultado:
Elemento de acrónimo
los <acronym> El elemento le permite indicar que el texto entre las etiquetas <acronym> y </acronym> es un acrónimo.
Actualmente, los principales navegadores no cambian la apariencia del contenido del elemento <acronym>.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Acronym Example</title>
</head>
<body>
<p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
</body>
</html>Esto producirá el siguiente resultado:
Dirección del texto
los <bdo>...</bdo> elemento significa Anulación bidireccional y se utiliza para anular la dirección del texto actual.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Text Direction Example</title>
</head>
<body>
<p>This text will go left to right.</p>
<p><bdo dir = "rtl">This text will go right to left.</bdo></p>
</body>
</html>Esto producirá el siguiente resultado:
Terminos especiales
los <dfn>...</dfn>elemento (o elemento de definición HTML) le permite especificar que está introduciendo un término especial. Su uso es similar al de las palabras en cursiva en medio de un párrafo.
Normalmente, usaría el elemento <dfn> la primera vez que introduzca un término clave. Los navegadores más recientes muestran el contenido de un elemento <dfn> en cursiva.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Special Terms Example</title>
</head>
<body>
<p>The following word is a <dfn>special</dfn> term.</p>
</body>
</html>Esto producirá el siguiente resultado:
Texto de cita
Cuando desee citar un pasaje de otra fuente, debe ponerlo entre <blockquote>...</blockquote> etiquetas.
El texto dentro de un elemento <blockquote> suele tener sangría desde los bordes izquierdo y derecho del texto circundante y, a veces, utiliza una fuente en cursiva.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Blockquote Example</title>
</head>
<body>
<p>The following description of XHTML is taken from the W3C Web site:</p>
<blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML,following on
from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
</body>
</html>Esto producirá el siguiente resultado:
Citas breves
los <q>...</q> El elemento se usa cuando desea agregar comillas dobles dentro de una oración.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Double Quote Example</title>
</head>
<body>
<p>Amit is in Spain, <q>I think I am wrong</q>.</p>
</body>
</html>Esto producirá el siguiente resultado:
Citas de texto
Si está citando un texto, puede indicar la fuente colocándolo entre una apertura <cite> etiqueta y cierre </cite> etiqueta
Como es de esperar en una publicación impresa, el contenido del elemento <cite> se presenta en texto en cursiva de forma predeterminada.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Citations Example</title>
</head>
<body>
<p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
</body>
</html>Esto producirá el siguiente resultado:
Codigo de computadora
Cualquier código de programación que aparezca en una página web debe colocarse dentro <code>...</code>etiquetas. Por lo general, el contenido del elemento <code> se presenta en una fuente monoespaciada, al igual que el código en la mayoría de los libros de programación.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Computer Code Example</title>
</head>
<body>
<p>Regular text. <code>This is code.</code> Regular text.</p>
</body>
</html>Esto producirá el siguiente resultado:
Texto del teclado
Cuando se habla de computadoras, si desea decirle a un lector que ingrese algún texto, puede usar el <kbd>...</kbd> elemento para indicar qué se debe escribir, como en este ejemplo.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Keyboard Text Example</title>
</head>
<body>
<p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
</body>
</html>Esto producirá el siguiente resultado:
Variables de programación
Este elemento se suele utilizar junto con el <pre> y <code> elementos para indicar que el contenido de ese elemento es una variable.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Variable Text Example</title>
</head>
<body>
<p><code>document.write("<var>user-name</var>")</code></p>
</body>
</html>Esto producirá el siguiente resultado:
Salida del programa
los <samp>...</samp> El elemento indica la salida de muestra de un programa, un script, etc. De nuevo, se utiliza principalmente para documentar conceptos de programación o codificación.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Program Output Example</title>
</head>
<body>
<p>Result produced by the program is <samp>Hello World!</samp></p>
</body>
</html>Esto producirá el siguiente resultado:
Texto de dirección
los <address>...</address> El elemento se utiliza para contener cualquier dirección.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Address Example</title>
</head>
<body>
<address>388A, Road No 22, Jubilee Hills - Hyderabad</address>
</body>
</html>Esto producirá el siguiente resultado:
HTML le permite especificar metadatos: información importante adicional sobre un documento de diversas formas. Los elementos META se pueden utilizar para incluir pares de nombre / valor que describan las propiedades del documento HTML, como el autor, la fecha de vencimiento, una lista de palabras clave, el autor del documento, etc.
los <meta>se utiliza para proporcionar dicha información adicional. Esta etiqueta es un elemento vacío y, por lo tanto, no tiene una etiqueta de cierre, pero lleva información dentro de sus atributos.
Puede incluir una o más metaetiquetas en su documento según la información que desee mantener en su documento, pero en general, las metaetiquetas no afectan la apariencia física del documento, por lo que desde el punto de vista de la apariencia, no importa si incluye ellos o no.
Agregar metaetiquetas a sus documentos
Puede agregar metadatos a sus páginas web colocando etiquetas <meta> dentro del encabezado del documento que está representado por <head> y </head>etiquetas. Una metaetiqueta puede tener los siguientes atributos además de los atributos principales:
| No Señor | Atributo y descripción |
|---|---|
| 1 | Name Nombre de la propiedad. Puede ser cualquier cosa. Los ejemplos incluyen palabras clave, descripción, autor, revisado, generador, etc. |
| 2 | content Especifica el valor de la propiedad. |
| 3 | scheme Especifica un esquema para interpretar el valor de la propiedad (como se declara en el atributo de contenido). |
| 4 | http-equiv Se utiliza para encabezados de mensajes de respuesta http. Por ejemplo, http-equiv se puede utilizar para actualizar la página o para configurar una cookie. Los valores incluyen tipo de contenido, caducidad, actualización y configuración de cookies. |
Especificar palabras clave
Puede utilizar la etiqueta <meta> para especificar palabras clave importantes relacionadas con el documento y, posteriormente, los motores de búsqueda utilizan estas palabras clave al indexar su página web con fines de búsqueda.
Ejemplo
A continuación se muestra un ejemplo, donde agregamos HTML, metaetiquetas, metadatos como palabras clave importantes sobre el documento.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Esto producirá el siguiente resultado:
Descripción del documento
Puede utilizar la etiqueta <meta> para dar una breve descripción sobre el documento. Esto nuevamente puede ser utilizado por varios motores de búsqueda mientras indexa su página web con fines de búsqueda.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Fecha de revisión del documento
Puede utilizar la etiqueta <meta> para proporcionar información sobre cuándo se actualizó el documento por última vez. Esta información puede ser utilizada por varios navegadores web mientras actualiza su página web.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Actualización de documentos
Se puede usar una etiqueta <meta> para especificar una duración después del cual su página web se actualizará automáticamente.
Ejemplo
Si desea que su página se actualice cada 5 segundos, utilice la siguiente sintaxis.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
<meta http-equiv = "refresh" content = "5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Redirección de página
Puede utilizar la etiqueta <meta> para redirigir su página a cualquier otra página web. También puede especificar una duración si desea redirigir la página después de un cierto número de segundos.
Ejemplo
A continuación se muestra un ejemplo de cómo redirigir la página actual a otra página después de 5 segundos. Si desea redirigir la página inmediatamente, no especifique el atributo de contenido .
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
<meta http-equiv = "refresh" content = "5; url = http://www.tutorialspoint.com" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Configuración de cookies
Las cookies son datos que se almacenan en pequeños archivos de texto en su computadora y se intercambian entre el navegador web y el servidor web para realizar un seguimiento de la información diversa según las necesidades de su aplicación web.
Puede utilizar la etiqueta <meta> para almacenar cookies en el lado del cliente y, posteriormente, el servidor web puede utilizar esta información para realizar un seguimiento de los visitantes del sitio.
Ejemplo
A continuación se muestra un ejemplo de cómo redirigir la página actual a otra página después de 5 segundos. Si desea redirigir la página inmediatamente, no especifique el atributo de contenido .
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta http-equiv = "cookie" content = "userid = xyz; expires = Wednesday, 08-Aug-15 23:59:59 GMT;" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Si no incluye la fecha y hora de vencimiento, la cookie se considera una cookie de sesión y se eliminará cuando el usuario salga del navegador.
Note- Puede consultar el tutorial de PHP y cookies para obtener detalles completos sobre las cookies.
Configuración del nombre del autor
Puede establecer un nombre de autor en una página web mediante metaetiqueta. Vea un ejemplo a continuación:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Especificar juego de caracteres
Puede utilizar la etiqueta <meta> para especificar el conjunto de caracteres utilizado dentro de la página web.
Ejemplo
De forma predeterminada, los servidores web y los navegadores web utilizan la codificación ISO-8859-1 (Latin1) para procesar páginas web. A continuación se muestra un ejemplo para configurar la codificación UTF-8:
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Para publicar la página estática con caracteres chinos tradicionales, la página web debe contener una etiqueta <meta> para configurar la codificación Big5:
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
<meta http-equiv = "Content-Type" content = "text/html; charset = Big5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>El comentario es un fragmento de código que cualquier navegador web ignora. Es una buena práctica agregar comentarios en su código HTML, especialmente en documentos complejos, para indicar secciones de un documento y cualquier otra nota a cualquiera que esté mirando el código. Los comentarios le ayudan a usted y a otras personas a comprender su código y aumentan la legibilidad del código.
Los comentarios HTML se colocan entre <!-- ... -->etiquetas. Por lo tanto, cualquier contenido colocado dentro de las etiquetas <! - ... -> se tratará como comentario y el navegador lo ignorará por completo.
Ejemplo
<!DOCTYPE html>
<html>
<head> <!-- Document Header Starts -->
<title>This is document title</title>
</head> <!-- Document Header Ends -->
<body>
<p>Document content goes here.....</p>
</body>
</html>Esto producirá el siguiente resultado sin mostrar el contenido dado como parte de los comentarios:
Comentarios válidos frente a no válidos
Los comentarios no se anidan, lo que significa que no se puede colocar un comentario dentro de otro comentario. En segundo lugar, es posible que la secuencia de dos guiones "-" no aparezca dentro de un comentario, excepto como parte de la etiqueta de cierre ->. También debe asegurarse de que no haya espacios en la cadena de comentarios de inicio de.
Ejemplo
Aquí, el comentario dado es un comentario válido y el navegador lo borrará.
<!DOCTYPE html>
<html>
<head>
<title>Valid Comment Example</title>
</head>
<body>
<!-- This is valid comment -->
<p>Document content goes here.....</p>
</body>
</html>Esto producirá el siguiente resultado:
Pero, la siguiente línea no es un comentario válido y el navegador la mostrará. Esto se debe a que hay un espacio entre el corchete de ángulo izquierdo y el signo de exclamación.
<!DOCTYPE html>
<html>
<head>
<title>Invalid Comment Example</title>
</head>
<body>
< !-- This is not a valid comment -->
<p>Document content goes here.....</p>
</body>
</html>Esto producirá el siguiente resultado:
Comentarios multilínea
Hasta ahora hemos visto comentarios de una sola línea, pero HTML también admite comentarios de varias líneas.
Puede comentar varias líneas con la etiqueta inicial especial <! - y la etiqueta final -> colocada antes de la primera línea y al final de la última línea, como se muestra en el siguiente ejemplo.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Multiline Comments</title>
</head>
<body>
<!--
This is a multiline comment and it can
span through as many as lines you like.
-->
<p>Document content goes here.....</p>
</body>
</html>Esto producirá el siguiente resultado:
Comentarios condicionales
Los comentarios condicionales solo funcionan en Internet Explorer (IE) en Windows, pero otros navegadores los ignoran. Son compatibles desde Explorer 5 en adelante y puede usarlos para dar instrucciones condicionales a diferentes versiones de IE.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Conditional Comments</title>
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
</head>
<body>
<p>Document content goes here.....</p>
</body>
</html>Se encontrará con una situación en la que deberá aplicar una hoja de estilo diferente basada en diferentes versiones de Internet Explorer, en tal situación, los comentarios condicionales serán útiles.
Usar etiqueta de comentario
Hay pocos navegadores que admitan la etiqueta <comment> para comentar una parte del código HTML.
Note- La etiqueta <comment> en desuso en HTML5. No utilice este elemento.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Using Comment Tag</title>
</head>
<body>
<p>This is <comment>not</comment> Internet Explorer.</p>
</body>
</html>Si está utilizando IE, producirá el siguiente resultado:
Pero si no está utilizando IE, producirá el siguiente resultado:
Comentario de código de script
Aunque aprenderá JavaScript con HTML, en un tutorial separado, pero aquí debe tomar nota de que si está utilizando Java Script o VB Script en su código HTML, se recomienda colocar ese código de secuencia de comandos dentro de los comentarios HTML adecuados para que los antiguos los navegadores pueden funcionar correctamente.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Commenting Script Code</title>
<script>
<!--
document.write("Hello World!")
//-->
</script>
</head>
<body>
<p>Hello , World!</p>
</body>
</html>Esto producirá el siguiente resultado:
Comentarios de hojas de estilo
Aunque aprenderá a usar hojas de estilo con HTML en un tutorial separado, aquí debe tomar nota de que si está usando Hoja de estilo en cascada (CSS) en su código HTML, se recomienda poner ese código de hoja de estilo dentro de los comentarios HTML adecuados. para que los navegadores antiguos funcionen correctamente.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Commenting Style Sheets</title>
<style>
<!--
.example {
border:1px solid #4a7d49;
}
//-->
</style>
</head>
<body>
<div class = "example">Hello , World!</div>
</body>
</html>Esto producirá el siguiente resultado:
Las imágenes son muy importantes para embellecer, así como para representar muchos conceptos complejos de manera sencilla en su página web. Este tutorial lo llevará a través de sencillos pasos para usar imágenes en sus páginas web.
Insertar imagen
Puede insertar cualquier imagen en su página web usando <img>etiqueta. A continuación se muestra la sintaxis simple para usar esta etiqueta.
<img src = "Image URL" ... attributes-list/>La etiqueta <img> es una etiqueta vacía, lo que significa que solo puede contener una lista de atributos y no tiene etiqueta de cierre.
Ejemplo
Para probar el siguiente ejemplo, mantengamos nuestro archivo HTML test.htm y el archivo de imagen test.png en el mismo directorio:
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>Esto producirá el siguiente resultado:
Puede usar un archivo de imagen PNG, JPEG o GIF según su comodidad, pero asegúrese de especificar el nombre de archivo de imagen correcto en srcatributo. El nombre de la imagen siempre distingue entre mayúsculas y minúsculas.
los alt atributo es un atributo obligatorio que especifica un texto alternativo para una imagen, si la imagen no se puede mostrar.
Establecer ubicación de imagen
Por lo general, guardamos todas las imágenes en un directorio separado. Así que mantengamos el archivo HTML test.htm en nuestro directorio de inicio y creemos un subdirectorioimages dentro del directorio de inicio donde guardaremos nuestra imagen test.png.
Ejemplo
Suponiendo que la ubicación de nuestra imagen es "image / test.png", prueba el siguiente ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>Esto producirá el siguiente resultado:
Establecer ancho / alto de imagen
Puede establecer el ancho y la altura de la imagen según sus requisitos utilizando width y heightatributos. Puede especificar el ancho y el alto de la imagen en términos de píxeles o porcentaje de su tamaño real.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
</body>
</html>Esto producirá el siguiente resultado:
Establecer borde de imagen
De forma predeterminada, la imagen tendrá un borde alrededor, puede especificar el grosor del borde en términos de píxeles usando el atributo de borde. Un grosor de 0 significa que no hay bordes alrededor de la imagen.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
</body>
</html>Esto producirá el siguiente resultado:
Establecer alineación de imagen
De forma predeterminada, la imagen se alineará en el lado izquierdo de la página, pero puede usar align atributo para establecerlo en el centro o la derecha.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
</body>
</html>Esto producirá el siguiente resultado:
Gráficos web gratuitos
Para obtener gráficos web gratuitos, incluidos los patrones, puede consultar los gráficos web gratuitos
Las tablas HTML permiten a los autores web organizar datos como texto, imágenes, enlaces, otras tablas, etc. en filas y columnas de celdas.
Las tablas HTML se crean utilizando el <table> etiqueta en la que el <tr> se utiliza para crear filas de tabla y <td>La etiqueta se utiliza para crear celdas de datos. Los elementos debajo de <td> son regulares y están alineados a la izquierda por defecto
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>Esto producirá el siguiente resultado:
Aquí el borderes un atributo de la etiqueta <table> y se usa para poner un borde en todas las celdas. Si no necesita un borde, puede usar border = "0".
Encabezado de la tabla
El encabezado de la tabla se puede definir usando <th>etiqueta. Esta etiqueta se colocará para reemplazar la etiqueta <td>, que se utiliza para representar la celda de datos real. Normalmente, colocará su fila superior como encabezado de tabla como se muestra a continuación; de lo contrario, puede usar el elemento <th> en cualquier fila. Los encabezados, que se definen en la etiqueta <th>, están centrados y en negrita de forma predeterminada.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>Esto producirá el siguiente resultado:
Atributos de Cellpadding y Cellspacing
Hay dos atributos llamados relleno de celdas y espacio de celdas que utilizará para ajustar el espacio en blanco en las celdas de su tabla. El atributo de espacio entre celdas define el espacio entre las celdas de la tabla, mientras que el relleno de celdas representa la distancia entre los bordes de las celdas y el contenido dentro de una celda.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>Esto producirá el siguiente resultado:
Atributos Colspan y Rowspan
Usarás colspanatributo si desea fusionar dos o más columnas en una sola columna. De manera similar usarásrowspan si desea fusionar dos o más filas.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>Esto producirá el siguiente resultado:
Fondos De Tablas
Puede configurar el fondo de la tabla utilizando una de las dos formas siguientes:
bgcolor atributo: puede establecer el color de fondo para toda la tabla o solo para una celda.
background atributo: puede establecer una imagen de fondo para toda la tabla o solo para una celda.
También puede establecer el color del borde también usando bordercolor atributo.
Note- Los atributos bgcolor , background y bordercolor están en desuso en HTML5. No utilice estos atributos.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>Esto producirá el siguiente resultado:
Aquí hay un ejemplo de uso backgroundatributo. Aquí usaremos una imagen disponible en el directorio / images.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" background = "/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>Esto producirá el siguiente resultado. Aquí la imagen de fondo no se aplica al encabezado de la tabla.
Altura y ancho de la mesa
Puede establecer el ancho y la altura de la mesa usando width y heightatributos. Puede especificar el ancho o alto de la tabla en términos de píxeles o en términos de porcentaje del área de pantalla disponible.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>Esto producirá el siguiente resultado:
Título de la tabla
los captionLa etiqueta servirá como título o explicación para la tabla y aparecerá en la parte superior de la tabla. Esta etiqueta está obsoleta en la versión más reciente de HTML / XHTML.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>Esto producirá el siguiente resultado:
Encabezado, cuerpo y pie de página de la tabla
Las tablas se pueden dividir en tres partes: un encabezado, un cuerpo y un pie. El encabezado y el pie son bastante similares a los encabezados y pies de página en un documento de procesamiento de texto que siguen siendo los mismos para cada página, mientras que el cuerpo es el principal contenedor de contenido de la tabla.
Los tres elementos para separar la cabeza, el cuerpo y el pie de una mesa son:
<thead> - para crear un encabezado de tabla independiente.
<tbody> - para indicar el cuerpo principal de la tabla.
<tfoot> - para crear un pie de tabla separado.
Una tabla puede contener varios elementos <tbody> para indicar diferentes páginas o grupos de datos. Pero es notable que las etiquetas <thead> y <tfoot> deberían aparecer antes que <tbody>
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>Esto producirá el siguiente resultado:
Tablas anidadas
Puede utilizar una mesa dentro de otra mesa. No solo tablas, puede usar casi todas las etiquetas dentro de la etiqueta de datos de tabla <td>.
Ejemplo
A continuación se muestra el ejemplo del uso de otra tabla y otras etiquetas dentro de una celda de tabla.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Esto producirá el siguiente resultado:
HTML ofrece a los autores web tres formas de especificar listas de información. Todas las listas deben contener uno o más elementos de lista. Las listas pueden contener:
<ul>- Una lista desordenada. Esto mostrará una lista de elementos usando viñetas simples.
<ol>- Una lista ordenada. Esto utilizará diferentes esquemas de números para enumerar sus artículos.
<dl>- Una lista de definiciones. Esto organiza sus elementos de la misma manera que están organizados en un diccionario.
Listas HTML desordenadas
Una lista desordenada es una colección de elementos relacionados que no tienen un orden o secuencia especial. Esta lista se crea utilizando HTML<ul>etiqueta. Cada elemento de la lista está marcado con una viñeta.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Esto producirá el siguiente resultado:
El atributo de tipo
Puedes usar typeatributo para la etiqueta <ul> para especificar el tipo de viñeta que desea. Por defecto, es un disco. A continuación se muestran las posibles opciones:
<ul type = "square">
<ul type = "disc">
<ul type = "circle">Ejemplo
A continuación se muestra un ejemplo en el que usamos <ul type = "square">
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Esto producirá el siguiente resultado:
Ejemplo
A continuación se muestra un ejemplo en el que usamos <ul type = "disc"> -
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Esto producirá el siguiente resultado:
Ejemplo
A continuación se muestra un ejemplo en el que usamos <ul type = "circle"> -
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Esto producirá el siguiente resultado:
Listas ordenadas HTML
Si debe poner sus elementos en una lista numerada en lugar de con viñetas, se utilizará la lista ordenada en HTML. Esta lista se crea usando<ol>etiqueta. La numeración comienza en uno y se incrementa en uno por cada elemento de lista ordenada sucesiva etiquetado con <li>.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Esto producirá el siguiente resultado:
El atributo de tipo
Puedes usar typeatributo de la etiqueta <ol> para especificar el tipo de numeración que desea. De forma predeterminada, es un número. A continuación se muestran las posibles opciones:
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.Ejemplo
A continuación se muestra un ejemplo en el que usamos <ol type = "1">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Esto producirá el siguiente resultado:
Ejemplo
A continuación se muestra un ejemplo en el que usamos <ol type = "I">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Esto producirá el siguiente resultado:
Ejemplo
A continuación se muestra un ejemplo en el que usamos <ol type = "i">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Esto producirá el siguiente resultado:
Ejemplo
A continuación se muestra un ejemplo en el que usamos <ol type = "A">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Esto producirá el siguiente resultado:
Ejemplo
A continuación se muestra un ejemplo en el que usamos <ol type = "a">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "a">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Esto producirá el siguiente resultado:
El atributo de inicio
Puedes usar startatributo de la etiqueta <ol> para especificar el punto de partida de la numeración que necesita. A continuación se muestran las posibles opciones:
<ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.Ejemplo
A continuación se muestra un ejemplo en el que usamos <ol type = "i" start = "4">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i" start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Esto producirá el siguiente resultado:
Listas de definiciones HTML
HTML y XHTML admiten un estilo de lista que se llama definition listsdonde las entradas se enumeran como en un diccionario o enciclopedia. La lista de definiciones es la forma ideal de presentar un glosario, una lista de términos u otra lista de nombres / valores.
Lista de definiciones utiliza las siguientes tres etiquetas.
- <dl>: define el inicio de la lista
- <dt>: un término
- <dd> - Definición de término
- </dl>: define el final de la lista
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>Esto producirá el siguiente resultado:
Una página web puede contener varios enlaces que lo llevan directamente a otras páginas e incluso a partes específicas de una página determinada. Estos enlaces se conocen como hipervínculos.
Los hipervínculos permiten a los visitantes navegar entre sitios web haciendo clic en palabras, frases e imágenes. Por lo tanto, puede crear hipervínculos utilizando texto o imágenes disponibles en una página web.
Note- Te recomiendo que sigas un breve tutorial sobre cómo comprender la URL.
Vinculación de documentos
Un enlace se especifica mediante la etiqueta HTML <a>. Esta etiqueta se llamaanchor tagy cualquier cosa entre la etiqueta de apertura <a> y la etiqueta de cierre </a> se convierte en parte del vínculo y el usuario puede hacer clic en esa parte para acceder al documento vinculado. A continuación se muestra la sintaxis simple para usar la etiqueta <a>.
<a href = "Document URL" ... attributes-list>Link Text</a>Ejemplo
Intentemos seguir el ejemplo que enlaza http://www.tutorialspoint.com en su página:
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://www.tutorialspoint.com" target = "_self">Tutorials Point</a>
</body>
</html>Esto producirá el siguiente resultado, donde puede hacer clic en el enlace generado para llegar a la página de inicio de Tutorials Point (en este ejemplo).
El atributo objetivo
Hemos usado targetatributo en nuestro ejemplo anterior. Este atributo se utiliza para especificar la ubicación donde se abre el documento vinculado. A continuación se muestran las posibles opciones:
| No Señor | Opción y descripción |
|---|---|
| 1 | _blank Abre el documento vinculado en una nueva ventana o pestaña. |
| 2 | _self Abre el documento vinculado en el mismo marco. |
| 3 | _parent Abre el documento vinculado en el marco principal. |
| 4 | _top Abre el documento vinculado en todo el cuerpo de la ventana. |
| 5 | targetframe Abre el documento vinculado en un marco de destino con nombre . |
Ejemplo
Intente seguir el ejemplo para comprender la diferencia básica en algunas opciones dadas para el atributo de destino.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>
<body>
<p>Click any of the following links</p>
<a href = "/html/index.htm" target = "_blank">Opens in New</a> |
<a href = "/html/index.htm" target = "_self">Opens in Self</a> |
<a href = "/html/index.htm" target = "_parent">Opens in Parent</a> |
<a href = "/html/index.htm" target = "_top">Opens in Body</a>
</body>
</html>Esto producirá el siguiente resultado, donde puede hacer clic en diferentes enlaces para comprender la diferencia entre varias opciones dadas para el atributo de destino.
Uso de la ruta base
Cuando vincula documentos HTML relacionados con el mismo sitio web, no es necesario que proporcione una URL completa para cada vínculo. Puede deshacerse de él si usa<base>etiqueta en el encabezado de su documento HTML. Esta etiqueta se utiliza para proporcionar una ruta base para todos los enlaces. Por lo tanto, su navegador concatenará la ruta relativa dada a esta ruta base y creará una URL completa.
Ejemplo
El siguiente ejemplo hace uso de la etiqueta <base> para especificar la URL base y luego podemos usar la ruta relativa a todos los enlaces en lugar de proporcionar la URL completa para cada enlace.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>
<body>
<p>Click following link</p>
<a href = "/html/index.htm" target = "_blank">HTML Tutorial</a>
</body>
</html>Esto producirá el siguiente resultado, donde puede hacer clic en el enlace generado HTML Tutorial para llegar al tutorial HTML.
Ahora la URL dada <a href = "/html/index.htm" se considera <ahref = "http://www.tutorialspoint.com/html/index.htm"
Vinculación a una sección de página
Puede crear un enlace a una sección particular de una página web determinada utilizando nameatributo. Este es un proceso de dos pasos.
Note- El atributo de nombre en desuso en HTML5. No utilice este atributo. En su lugar, utilice el atributo id y title .
Primero cree un enlace al lugar al que desea llegar dentro de una página web y asígnele un nombre usando la etiqueta <a ...> de la siguiente manera:
<h1>HTML Text Links <a name = "top"></a></h1>El segundo paso es crear un hipervínculo para vincular el documento y el lugar al que desea llegar:
<a href = "/html/html_text_links.htm#top">Go to the Top</a>Esto producirá el siguiente enlace, donde puede hacer clic en el enlace generado Go to the Top para llegar a la parte superior del tutorial HTML Text Link.
Go to the TopConfiguración de colores de enlace
Puede configurar los colores de sus enlaces, enlaces activos y enlaces visitados utilizando link, alink y vlink atributos de la etiqueta <body>.
Ejemplo
Guarde lo siguiente en test.htm y ábralo en cualquier navegador web para ver cómo link, alink y vlink los atributos funcionan.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>
<body alink = "#54A250" link = "#040404" vlink = "#F40633">
<p>Click following link</p>
<a href = "/html/index.htm" target = "_blank" >HTML Tutorial</a>
</body>
</html>Esto producirá el siguiente resultado. Simplemente verifique el color del enlace antes de hacer clic en él, luego verifique su color cuando lo active y cuando el enlace haya sido visitado.
Descargar enlaces
Puede crear un enlace de texto para que sus archivos PDF, DOC o ZIP se puedan descargar. Esto es muy simple; solo necesita proporcionar la URL completa del archivo descargable de la siguiente manera:
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<a href = "https://www.tutorialspoint.com/page.pdf">Download PDF File</a>
</body>
</html>Esto producirá el siguiente enlace y se utilizará para descargar un archivo.
Cuadro de diálogo de descarga de archivos
A veces se desea que desee dar una opción en la que un usuario haga clic en un enlace y aparecerá un cuadro de "Descarga de archivo" para el usuario en lugar de mostrar el contenido real. Esto es muy fácil y se puede lograr usando un encabezado HTTP en su respuesta HTTP.
Por ejemplo, si quieres hacer un Filename archivo descargable desde un enlace determinado, su sintaxis será la siguiente.
#!/usr/bin/perl
# Additional HTTP Header
print "Content-Type:application/octet-stream; name = \"FileName\"\r\n";
print "Content-Disposition:attachment; filename = \"FileName\"\r\n\n";
# Open the target file and list down its content as follows
open( FILE, "<FileName" );
while(read(FILE, $buffer, 100)){ print("$buffer");
}Note- Para obtener más detalles sobre los programas PERL CGI, consulte el tutorial PERL y CGI .
Hemos visto cómo crear enlaces de hipertexto utilizando texto y también hemos aprendido a utilizar imágenes en nuestras páginas web. Ahora, aprenderemos a usar imágenes para crear hipervínculos.
Ejemplo
Es sencillo utilizar una imagen como hipervínculo. Solo necesitamos usar una imagen dentro del hipervínculo en el lugar del texto como se muestra a continuación:
<!DOCTYPE html>
<html>
<head>
<title>Image Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://www.tutorialspoint.com" target = "_self">
<img src = "/images/logo.png" alt = "Tutorials Point" border = "0"/>
</a>
</body>
</html>Esto producirá el siguiente resultado, donde puede hacer clic en las imágenes para llegar a la página de inicio de Tutorials Point.
Esta era la forma más sencilla de crear hipervínculos utilizando imágenes. A continuación, veremos cómo podemos crear enlaces de imágenes sensibles al mouse.
Imágenes sensibles al mouse
Los estándares HTML y XHTML proporcionan una función que le permite incrustar muchos enlaces diferentes dentro de una sola imagen. Puede crear diferentes enlaces en una sola imagen basándose en diferentes coordenadas disponibles en la imagen. Una vez que se adjuntan diferentes enlaces a diferentes coordenadas, podemos hacer clic en diferentes partes de la imagen para abrir los documentos de destino. Estas imágenes sensibles al ratón se conocen como mapas de imágenes.
Hay dos formas de crear mapas de imágenes:
Server-side image maps - Esto está habilitado por el ismap atributo de la etiqueta <img> y requiere acceso a un servidor y aplicaciones de procesamiento de mapas de imágenes relacionadas.
Client-side image maps - Esto se crea con el usemap atributo de la etiqueta <img>, junto con las etiquetas <map> y <area> correspondientes.
Mapas de imágenes del lado del servidor
Aquí simplemente coloque su imagen dentro de un hipervínculo y use ismapatributo que lo convierte en una imagen especial y cuando el usuario hace clic en algún lugar dentro de la imagen, el navegador pasa las coordenadas del puntero del mouse junto con la URL especificada en la etiqueta <a> al servidor web. El servidor usa las coordenadas del puntero del mouse para determinar qué documento entregar al navegador.
Cuando se usa ismap , el atributo href de la etiqueta <a> que lo contiene debe contener la URL de una aplicación de servidor como un script cgi o PHP, etc. para procesar la solicitud entrante en función de las coordenadas pasadas.
Las coordenadas de la posición del mouse son píxeles de la pantalla contados desde la esquina superior izquierda de la imagen, comenzando con (0,0). Las coordenadas, precedidas por un signo de interrogación, se agregan al final de la URL.
Por ejemplo, si un usuario hace clic en 20 píxeles por encima y 30 píxeles por debajo de la esquina superior izquierda de la siguiente imagen:
Que ha sido generado por el siguiente fragmento de código:
<!DOCTYPE html>
<html>
<head>
<title>ISMAP Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "/cgi-bin/ismap.cgi" target = "_self">
<img ismap src = "/images/logo.png" alt = "Tutorials Point" border = "0"/>
</a>
</body>
</html>Luego, el navegador envía los siguientes parámetros de búsqueda al servidor web que pueden ser procesados por ismap.cgi guión o map file y puede vincular los documentos que desee a estas coordenadas:
/cgi-bin/ismap.cgi?20,30De esta manera puede asignar diferentes enlaces a diferentes coordenadas de la imagen y cuando se hace clic en esas coordenadas, puede abrir el documento vinculado correspondiente. Para aprender más sobreismapatributo, puede comprobar ¿Cómo utilizar Image ismap?
Note- Aprenderá programación CGI cuando estudie programación en Perl. Puede escribir su script para procesar estas coordenadas pasadas usando PHP o cualquier otro script también. Por ahora, concentrémonos en aprender HTML y luego podrá volver a visitar esta sección.
Mapas de imágenes del lado del cliente
Los mapas de imágenes del lado del cliente están habilitados por el usemap atributo de la etiqueta <img /> y definido por etiquetas especiales de extensión <map> y <area>.
La imagen que va a formar el mapa se inserta en la página usando la etiqueta <img /> como una imagen normal, excepto que lleva un atributo adicional llamado usemap. El valor del atributo usemap es el valor que se utilizará en una etiqueta <map> para vincular etiquetas de mapa e imagen. Las etiquetas <map> junto con <area> definen todas las coordenadas de la imagen y los enlaces correspondientes.
La etiqueta <area> dentro de la etiqueta del mapa, especifica la forma y las coordenadas para definir los límites de cada hotspot disponible en la imagen. Aquí hay un ejemplo del mapa de imágenes:
<!DOCTYPE html>
<html>
<head>
<title>USEMAP Hyperlink Example</title>
</head>
<body>
<p>Search and click the hotspot</p>
<img src = /images/html.gif alt = "HTML Map" border = "0" usemap = "#html"/>
<!-- Create Mappings -->
<map name = "html">
<area shape = "circle" coords = "80,80,20"
href = "/css/index.htm" alt = "CSS Link" target = "_self" />
<area shape = "rect" coords = "5,5,40,40" alt = "jQuery Link"
href = "/jquery/index.htm" target = "_self" />
</map>
</body>
</html>Esto producirá el siguiente resultado:
Sistema coordinado
El valor real de las coordenadas depende totalmente de la forma en cuestión. Aquí hay un resumen, seguido de ejemplos detallados:
rect = x1 , y1 , x2 , y2
x 1 e y 1 son las coordenadas de la esquina superior izquierda del rectángulo; x 2 e y 2 son las coordenadas de la esquina inferior derecha.
circle = xc , yc , radius
x cy y c son las coordenadas del centro del círculo y el radio es el radio del círculo. Un círculo centrado en 200,50 con un radio de 25 tendría el atributo coords = "200,50,25"
poly = x1 , y1 , x2 , y2 , x3 , y3 , ... xn , yn
Los diversos pares xy definen los vértices (puntos) del polígono, con una "línea" dibujada de un punto al siguiente. Un polígono en forma de diamante con su punto superior a 20,20 y 40 píxeles de ancho en sus puntos más anchos tendría el atributo coords = "20,20,40,40,20,60,0,40" .
Todas las coordenadas son relativas a la esquina superior izquierda de la imagen (0,0). Cada forma tiene una URL relacionada. Puede utilizar cualquier software de imagen para conocer las coordenadas de diferentes posiciones.
No es difícil poner un enlace de correo electrónico HTML en su página web, pero puede causar un problema de spam innecesario en su cuenta de correo electrónico. Hay personas que pueden ejecutar programas para recolectar este tipo de correos electrónicos y luego usarlos para enviar spam de varias maneras.
Puede tener otra opción para facilitar que las personas le envíen correos electrónicos. Una opción podría ser usar formularios HTML para recopilar datos del usuario y luego usar un script PHP o CGI para enviar un correo electrónico.
Un ejemplo simple, consulte nuestro formulario de contacto . Tomamos los comentarios de los usuarios mediante este formulario y luego usamos un programa CGI que recopila esta información y nos envía un correo electrónico a la identificación de correo electrónico proporcionada.
Note- Aprenderá sobre formularios HTML en formularios HTML y aprenderá sobre CGI en nuestro otro tutorialPerl CGI Programming.
Etiqueta de correo electrónico HTML
HTML <a>La etiqueta le ofrece la opción de especificar una dirección de correo electrónico para enviar un correo electrónico. Mientras usa la etiqueta <a> como etiqueta de correo electrónico, usarámailto: email addressjunto con el atributo href . A continuación se muestra la sintaxis de usarmailto en lugar de usar http.
<a href = "mailto: [email protected]">Send Email</a>Este código generará el siguiente enlace que puede utilizar para enviar correo electrónico.
Send EmailAhora, si un usuario hace clic en este enlace, inicia un cliente de correo electrónico (como Lotus Notes, Outlook Express, etc.) instalado en la computadora de su usuario. Existe otro riesgo de usar esta opción para enviar correo electrónico porque si el usuario no tiene un cliente de correo electrónico instalado en su computadora, entonces no sería posible enviar correo electrónico.
Configuración por defecto
Puede especificar un asunto y un cuerpo de correo electrónico predeterminados junto con su dirección de correo electrónico. A continuación se muestra el ejemplo para utilizar el asunto y el cuerpo predeterminados.
<a href = "mailto:[email protected]?subject = Feedback&body = Message">
Send Feedback
</a>Este código generará el siguiente enlace que puede utilizar para enviar correo electrónico.
Send FeedbackLos marcos HTML se utilizan para dividir la ventana de su navegador en varias secciones donde cada sección puede cargar un documento HTML separado. Una colección de marcos en la ventana del navegador se conoce como conjunto de marcos. La ventana está dividida en marcos de manera similar a las tablas organizadas: en filas y columnas.
Desventajas de los marcos
Hay algunos inconvenientes con el uso de marcos, por lo que nunca se recomienda usar marcos en sus páginas web:
Algunos dispositivos más pequeños no pueden hacer frente a los marcos a menudo porque su pantalla no es lo suficientemente grande para dividirse.
A veces, su página se mostrará de manera diferente en diferentes computadoras debido a la diferente resolución de pantalla.
Es posible que el botón de retroceso del navegador no funcione como espera el usuario.
Todavía hay pocos navegadores que no admitan la tecnología de marcos.
Crear marcos
Para usar marcos en una página, usamos la etiqueta <frameset> en lugar de la etiqueta <body>. La etiqueta <frameset> define cómo dividir la ventana en marcos. losrows atributo de la etiqueta <frameset> define marcos horizontales y colsatributo define marcos verticales. Cada marco se indica con la etiqueta <frame> y define qué documento HTML se abrirá en el marco.
Note- La etiqueta <frame> en desuso en HTML5. No utilice este elemento.
Ejemplo
A continuación se muestra el ejemplo para crear tres marcos horizontales:
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>Esto producirá el siguiente resultado:
Ejemplo
Pongamos el ejemplo anterior de la siguiente manera, aquí reemplazamos el atributo de las filas por cols y cambiamos su ancho. Esto creará los tres marcos verticalmente:
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols = "25%,50%,25%">
<frame name = "left" src = "/html/top_frame.htm" />
<frame name = "center" src = "/html/main_frame.htm" />
<frame name = "right" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>Esto producirá el siguiente resultado:
Los atributos de etiqueta <frameset>
Los siguientes son atributos importantes de la etiqueta <frameset>:
| No Señor | Atributo y descripción |
|---|---|
| 1 | cols Especifica cuántas columnas contiene el conjunto de marcos y el tamaño de cada columna. Puede especificar el ancho de cada columna en una de las cuatro formas: Valores absolutos en píxeles. Por ejemplo, para crear tres marcos verticales, use cols = "100, 500, 100" . Un porcentaje de la ventana del navegador. Por ejemplo, para crear tres marcos verticales, use cols = "10%, 80%, 10%" . Usando un símbolo comodín. Por ejemplo, para crear tres marcos verticales, use cols = "10%, *, 10%" . En este caso, el comodín ocupa el resto de la ventana. Como anchos relativos de la ventana del navegador. Por ejemplo, para crear tres marcos verticales, use cols = "3 *, 2 *, 1 *" . Esta es una alternativa a los porcentajes. Puede utilizar anchos relativos de la ventana del navegador. Aquí la ventana se divide en sextos: la primera columna ocupa la mitad de la ventana, la segunda ocupa un tercio y la tercera ocupa un sexto. |
| 2 | rows Este atributo funciona igual que el atributo cols y toma los mismos valores, pero se usa para especificar las filas en el conjunto de marcos. Por ejemplo, para crear dos marcos horizontales, use filas = "10%, 90%" . Puede especificar la altura de cada fila de la misma manera que se explicó anteriormente para las columnas. |
| 3 | border Este atributo especifica el ancho del borde de cada fotograma en píxeles. Por ejemplo, border = "5". Un valor de cero significa que no hay borde. |
| 4 | frameborder Este atributo especifica si se debe mostrar un borde tridimensional entre los marcos. Este atributo toma el valor 1 (sí) o 0 (no). Por ejemplo, frameborder = "0" no especifica ningún borde. |
| 5 | framespacing Este atributo especifica la cantidad de espacio entre cuadros en un conjunto de cuadros. Esto puede tomar cualquier valor entero. Por ejemplo, framespacing = "10" significa que debe haber un espacio de 10 píxeles entre cada fotograma. |
Los atributos de etiqueta <frame>
Los siguientes son los atributos importantes de la etiqueta <frame>:
| No Señor | Atributo y descripción |
|---|---|
| 1 | src Este atributo se utiliza para dar el nombre del archivo que debe cargarse en el marco. Su valor puede ser cualquier URL. Por ejemplo, src = "/html/top_frame.htm" cargará un archivo HTML disponible en el directorio html. |
| 2 | name Este atributo le permite dar un nombre a un marco. Se utiliza para indicar en qué marco se debe cargar un documento. Esto es especialmente importante cuando desea crear enlaces en un marco que cargan páginas en otro marco, en cuyo caso el segundo marco necesita un nombre para identificarse como el destino del enlace. |
| 3 | frameborder Este atributo especifica si se muestran o no los bordes de ese marco; anula el valor dado en el atributo frameborder en la etiqueta <frameset> si se da uno, y esto puede tomar valores de 1 (sí) o 0 (no). |
| 4 | marginwidth Este atributo le permite especificar el ancho del espacio entre la izquierda y la derecha de los bordes del marco y el contenido del marco. El valor se da en píxeles. Por ejemplo, marginwidth = "10". |
| 5 | marginheight Este atributo le permite especificar la altura del espacio entre la parte superior e inferior de los bordes del marco y su contenido. El valor se da en píxeles. Por ejemplo, marginheight = "10". |
| 6 | noresize De forma predeterminada, puede cambiar el tamaño de cualquier marco haciendo clic y arrastrando los bordes de un marco. El atributo noresize evita que un usuario pueda cambiar el tamaño del marco. Por ejemplo, noresize = "noresize". |
| 7 | scrolling Este atributo controla la apariencia de las barras de desplazamiento que aparecen en el marco. Esto toma los valores "sí", "no" o "auto". Por ejemplo scrolling = "no" significa que no debe tener barras de desplazamiento. |
| 8 | longdesc Este atributo le permite proporcionar un enlace a otra página que contiene una descripción larga del contenido del marco. Por ejemplo, longdesc = "framedescription.htm" |
Soporte del navegador para marcos
Si un usuario está utilizando un navegador antiguo o cualquier navegador que no admita marcos, entonces el elemento <noframes> debe mostrarse al usuario.
Por lo tanto, debe colocar un elemento <body> dentro del elemento <noframes> porque se supone que el elemento <frameset> reemplaza al elemento <body>, pero si un navegador no comprende el elemento <frameset>, entonces debe comprender qué hay dentro del <body> elemento que está contenido en un elemento <noframes>.
Puede poner un mensaje agradable para su usuario que tiene navegadores antiguos. Por ejemplo, ¡¡Lo siento !! su navegador no admite marcos. como se muestra en el ejemplo anterior.
Nombre del marco y atributos de destino
Uno de los usos más populares de los marcos es colocar barras de navegación en un marco y luego cargar las páginas principales en un marco separado.
Veamos el siguiente ejemplo donde un archivo test.htm tiene el siguiente código:
<!DOCTYPE html>
<html>
<head>
<title>HTML Target Frames</title>
</head>
<frameset cols = "200, *">
<frame src = "/html/menu.htm" name = "menu_page" />
<frame src = "/html/main.htm" name = "main_page" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>Aquí, hemos creado dos columnas para llenar con dos marcos. El primer marco tiene 200 píxeles de ancho y contendrá la barra de menú de navegación implementada pormenu.htmarchivo. La segunda columna llena el espacio restante y contendrá la parte principal de la página y está implementada pormain.htmarchivo. Para los tres enlaces disponibles en la barra de menú, hemos mencionado el marco de destino comomain_page, así que cada vez que haga clic en cualquiera de los enlaces en la barra de menú, el enlace disponible se abrirá en la página principal.
A continuación se muestra el contenido del archivo menu.htm
<!DOCTYPE html>
<html>
<body bgcolor = "#4a7d49">
<a href = "http://www.google.com" target = "main_page">Google</a>
<br />
<br />
<a href = "http://www.microsoft.com" target = "main_page">Microsoft</a>
<br />
<br />
<a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>
</body>
</html>A continuación se muestra el contenido del archivo main.htm:
<!DOCTYPE html>
<html>
<body bgcolor = "#b5dcb3">
<h3>This is main page and content from any link will be displayed here.</h3>
<p>So now click any link and see the result.</p>
</body>
</html>Cuando cargamos test.htm archivo, produce el siguiente resultado:
Ahora puede intentar hacer clic en los enlaces disponibles en el panel izquierdo y ver el resultado. El atributo target también puede tomar uno de los siguientes valores:
| No Señor | Opción y descripción |
|---|---|
| 1 | _self Carga la página en el marco actual. |
| 2 | _blank Carga una página en una nueva ventana del navegador. Abriendo una nueva ventana. |
| 3 | _parent Carga la página en la ventana principal, que en el caso de un único conjunto de marcos es la ventana principal del navegador. |
| 4 | _top Carga la página en la ventana del navegador, reemplazando los marcos actuales. |
| 5 | targetframe Carga la página en un marco de destino con nombre. |
Puede definir un marco en línea con etiqueta HTML <iframe>. La etiqueta <iframe> no está relacionada de alguna manera con la etiqueta <frameset>, sino que puede aparecer en cualquier parte de su documento. La etiqueta <iframe> define una región rectangular dentro del documento en la que el navegador puede mostrar un documento separado, incluidas las barras de desplazamiento y los bordes. Un marco en línea se utiliza para incrustar otro documento dentro del documento HTML actual.
los src El atributo se utiliza para especificar la URL del documento que ocupa el marco en línea.
Ejemplo
A continuación se muestra el ejemplo para mostrar cómo usar el <iframe> -
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<p>Document content goes here...</p>
<iframe src = "/html/menu.htm" width = "555" height = "200">
Sorry your browser does not support inline frames.
</iframe>
<p>Document content also go here...</p>
</body>
</html>Esto producirá el siguiente resultado:
Los atributos de etiqueta <Iframe>
La mayoría de los atributos de la etiqueta <iframe>, incluidos nombre, clase, frameborder, id, longdesc, marginheight, marginwidth, nombre, desplazamiento, estilo y título, se comportan exactamente como los atributos correspondientes de la etiqueta <frame>.
Note- Los atributos frameborder , marginwidth , longdesc , scrolling , marginheight están en desuso en HTML5. No utilice estos atributos.
| No Señor | Atributo y descripción |
|---|---|
| 1 | src Este atributo se utiliza para dar el nombre del archivo que debe cargarse en el marco. Su valor puede ser cualquier URL. Por ejemplo, src = "/html/top_frame.htm" cargará un archivo HTML disponible en el directorio html. |
| 2 | name Este atributo le permite dar un nombre a un marco. Se utiliza para indicar en qué marco se debe cargar un documento. Esto es especialmente importante cuando desea crear enlaces en un marco que cargan páginas en otro marco, en cuyo caso el segundo marco necesita un nombre para identificarse como el destino del enlace. |
| 3 | frameborder Este atributo especifica si se muestran o no los bordes de ese marco; anula el valor dado en el atributo frameborder en la etiqueta <frameset> si se da uno, y esto puede tomar valores de 1 (sí) o 0 (no). |
| 4 | marginwidth Este atributo le permite especificar el ancho del espacio entre la izquierda y la derecha de los bordes del marco y el contenido del marco. El valor se da en píxeles. Por ejemplo, marginwidth = "10". |
| 5 | marginheight Este atributo le permite especificar la altura del espacio entre la parte superior e inferior de los bordes del marco y su contenido. El valor se da en píxeles. Por ejemplo, marginheight = "10". |
| 6 | height Este atributo especifica la altura de <iframe>. |
| 7 | scrolling Este atributo controla la apariencia de las barras de desplazamiento que aparecen en el marco. Esto toma los valores "sí", "no" o "auto". Por ejemplo scrolling = "no" significa que no debe tener barras de desplazamiento. |
| 8 | longdesc Este atributo le permite proporcionar un enlace a otra página que contiene una descripción larga del contenido del marco. Por ejemplo, longdesc = "framedescription.htm" |
| 9 | width Este atributo especifica el ancho de <iframe>. |
Todos los elementos HTML se pueden clasificar en dos categorías (a) Elementos de nivel de bloque (b)Elementos en línea.
Elementos de bloque
Los elementos de bloque aparecen en la pantalla como si tuvieran un salto de línea antes y después de ellos. Por ejemplo, <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr Los elementos />, <blockquote> y <address> son todos elementos de nivel de bloque. Todos comienzan en su propia nueva línea, y todo lo que les sigue aparece en su propia nueva línea.
Elementos en línea
Los elementos en línea, por otro lado, pueden aparecer dentro de oraciones y no tienen que aparecer en una nueva línea propia. <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, < Los elementos code>, <cite>, <dfn>, <kbd> y <var> son todos elementos en línea.
Agrupar elementos HTML
Hay dos etiquetas importantes que usamos con mucha frecuencia para agrupar otras etiquetas HTML (i) etiqueta <div> y (ii) etiqueta <span>
La etiqueta <div>
Esta es la etiqueta de nivel de bloque muy importante que juega un papel importante en la agrupación de otras etiquetas HTML y la aplicación de CSS en un grupo de elementos. Incluso ahora, la etiqueta <div> se puede usar para crear un diseño de página web donde definimos diferentes partes (izquierda, derecha, arriba, etc.) de la página usando la etiqueta <div>. Esta etiqueta no proporciona ningún cambio visual en el bloque, pero tiene más significado cuando se usa con CSS.
Ejemplo
A continuación se muestra un ejemplo simple de etiqueta <div>. Aprenderemos la hoja de estilo en cascada (CSS) en un capítulo separado, pero la usamos aquí para mostrar el uso de la etiqueta <div> -
<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>
<body>
<!-- First group of tags -->
<div style = "color:red">
<h4>This is first group</h4>
<p>Following is a list of vegetables</p>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</div>
<!-- Second group of tags -->
<div style = "color:green">
<h4>This is second group</h4>
<p>Following is a list of fruits</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>
</body>
</html>Esto producirá el siguiente resultado:
La etiqueta <span>
HTML <span> es un elemento en línea y se puede usar para agrupar elementos en línea en un documento HTML. Esta etiqueta tampoco proporciona ningún cambio visual en el bloque, pero tiene más significado cuando se usa con CSS.
La diferencia entre la etiqueta <span> y la etiqueta <div> es que la etiqueta <span> se usa con elementos en línea mientras que la etiqueta <div> se usa con elementos a nivel de bloque.
Ejemplo
A continuación se muestra un ejemplo simple de etiqueta <span>. Aprenderemos la hoja de estilo en cascada (CSS) en un capítulo separado, pero la usamos aquí para mostrar el uso de la etiqueta <span> -
<!DOCTYPE html>
<html>
<head>
<title>HTML span Tag</title>
</head>
<body>
<p>This is <span style = "color:red">red</span> and this is
<span style = "color:green">green</span></p>
</body>
</html>Esto producirá el siguiente resultado:
De forma predeterminada, el fondo de su página web es de color blanco. Puede que no te guste, pero no te preocupes. HTML le ofrece las siguientes dos buenas formas de decorar el fondo de su página web.
- Fondo HTML con colores
- Fondo HTML con imágenes
Ahora veamos ambos enfoques uno por uno usando ejemplos apropiados.
Fondo HTML con colores
los bgcolor El atributo se utiliza para controlar el fondo de un elemento HTML, específicamente el cuerpo de la página y los fondos de la tabla.
Note- El atributo bgcolor en desuso en HTML5. No utilice este atributo.
A continuación se muestra la sintaxis para usar el atributo bgcolor con cualquier etiqueta HTML.
<tagname bgcolor = "color_value"...>Este color_value se puede dar en cualquiera de los siguientes formatos:
<!-- Format 1 - Use color name -->
<table bgcolor = "lime" >
<!-- Format 2 - Use hex value -->
<table bgcolor = "#f1f1f1" >
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(0,0,120)" >Ejemplo
Estos son los ejemplos para establecer el fondo de una etiqueta HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Colors</title>
</head>
<body>
<!-- Format 1 - Use color name -->
<table bgcolor = "yellow" width = "100%">
<tr>
<td>
This background is yellow
</td>
</tr>
</table>
<!-- Format 2 - Use hex value -->
<table bgcolor = "#6666FF" width = "100%">
<tr>
<td>
This background is sky blue
</td>
</tr>
</table>
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(255,0,255)" width = "100%">
<tr>
<td>
This background is green
</td>
</tr>
</table>
</body>
</html>Esto producirá el siguiente resultado:
Fondo HTML con imágenes
los backgroundEl atributo también se puede usar para controlar el fondo de un elemento HTML, específicamente el cuerpo de la página y los fondos de la tabla. Puede especificar una imagen para establecer el fondo de su página HTML o tabla.
Note- El atributo de fondo en desuso en HTML5. No utilice este atributo.
A continuación se muestra la sintaxis para usar el atributo de fondo con cualquier etiqueta HTML.
Note- El atributo de fondo está en desuso y se recomienda utilizar la hoja de estilo para la configuración de fondo.
<tagname background = "Image URL"...>Los formatos de imagen más utilizados son las imágenes JPEG, GIF y PNG.
Ejemplo
Aquí están los ejemplos para configurar imágenes de fondo de una mesa.
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>
<!-- Set table background -->
<table background = "/images/html.gif" width = "100%" height = "100">
<tr><td>
This background is filled up with HTML image.
</td></tr>
</table>
</body>
</html>Esto producirá el siguiente resultado:
Fondos estampados y transparentes
Es posible que haya visto muchos patrones o fondos transparentes en varios sitios web. Esto simplemente se puede lograr utilizando una imagen estampada o una imagen transparente en el fondo.
Se sugiere que al crear patrones o imágenes GIF o PNG transparentes, use las dimensiones más pequeñas posibles, incluso tan pequeñas como 1x1, para evitar una carga lenta.
Ejemplo
Aquí están los ejemplos para establecer el patrón de fondo de una tabla:
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>
<!-- Set a table background using pattern -->
<table background = "/images/pattern1.gif" width = "100%" height = "100">
<tr>
<td>
This background is filled up with a pattern image.
</td>
</tr>
</table>
<!-- Another example on table background using pattern -->
<table background = "/images/pattern2.gif" width = "100%" height = "100">
<tr>
<td>
This background is filled up with a pattern image.
</td>
</tr>
</table>
</body>
</html>Esto producirá el siguiente resultado:
Los colores son muy importantes para darle un buen aspecto a su sitio web. Puede especificar colores a nivel de página usando la etiqueta <body> o puede establecer colores para etiquetas individuales usandobgcolor atributo.
La etiqueta <body> tiene los siguientes atributos que se pueden usar para establecer diferentes colores:
bgcolor : Establece un color para el fondo de la página.
text : Establece un color para el cuerpo del texto.
alink : Establece un color para enlaces activos o enlaces seleccionados.
link : Establece un color para el texto vinculado.
vlink: Establece un color para los enlaces visitados , es decir, para el texto vinculado en el que ya ha hecho clic.
Métodos de codificación de colores HTML
Existen tres métodos diferentes para configurar los colores en su página web:
Color names - Puede especificar nombres de colores directamente como verde, azul o rojo.
Hex codes - Un código de seis dígitos que representa la cantidad de rojo, verde y azul que compone el color.
Color decimal or percentage values - Este valor se especifica mediante la propiedad rgb ().
Ahora veremos estos esquemas de coloración uno por uno.
Colores HTML - Nombres de colores
Puede especificar un nombre de color directo para establecer el texto o el color de fondo. W3C ha enumerado 16 nombres de colores básicos que se validarán con un validador HTML, pero hay más de 200 nombres de colores diferentes compatibles con los principales navegadores.
Note- Consulte una lista completa de nombres de colores HTML.
Estándar W3C 16 colores
Aquí está la lista de nombres de 16 colores estándar del W3C y se recomienda usarlos.
| Negro | gris | Plata | Blanco | ||||
| Amarillo | Lima | Agua | Fucsia | ||||
| rojo | Verde | Azul | Púrpura | ||||
| Granate | Aceituna | Armada | Verde azulado |
Ejemplo
Estos son los ejemplos para establecer el fondo de una etiqueta HTML por nombre de color:
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Name</title>
</head>
<body text = "blue" bgcolor = "green">
<p>Use different color names for for body and table and see the result.</p>
<table bgcolor = "black">
<tr>
<td>
<font color = "white">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>Colores HTML - Códigos hexadecimales
Un hexadecimal es una representación de 6 dígitos de un color. Los dos primeros dígitos (RR) representan un valor rojo, los dos siguientes son un valor verde (GG) y los últimos son el valor azul (BB).
Se puede tomar un valor hexadecimal de cualquier software de gráficos como Adobe Photoshop, Paintshop Pro o MS Paint.
Cada código hexadecimal estará precedido por un signo de almohadilla o almohadilla #. A continuación se muestra una lista de algunos colores que utilizan notación hexadecimal.
| Color | Color HEX |
|---|---|
| # 000000 | |
| # FF0000 | |
| # 00FF00 | |
| # 0000FF | |
| # FFFF00 | |
| # 00FFFF | |
| # FF00FF | |
| # C0C0C0 | |
| #FFFFFF |
Ejemplo
Estos son los ejemplos para establecer el fondo de una etiqueta HTML por código de color en hexadecimal:
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Hex</title>
</head>
<body text = "#0000FF" bgcolor = "#00FF00">
<p>Use different color hexa for for body and table and see the result.</p>
<table bgcolor = "#000000">
<tr>
<td>
<font color = "#FFFFFF">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>Colores HTML - Valores RGB
Este valor de color se especifica mediante el rgb( )propiedad. Esta propiedad toma tres valores, uno para el rojo, el verde y el azul. El valor puede ser un número entero entre 0 y 255 o un porcentaje.
Note - Todos los navegadores no admiten la propiedad de color rgb () por lo que se recomienda no utilizarlo.
A continuación se muestra una lista para mostrar algunos colores utilizando valores RGB.
| Color | Color RGB |
|---|---|
| rgb (0,0,0) | |
| rgb (255,0,0) | |
| rgb (0,255,0) | |
| rgb (0,0,255) | |
| rgb (255,255,0) | |
| rgb (0,255,255) | |
| rgb (255,0,255) | |
| rgb (192,192,192) | |
| rgb (255,255,255) |
Ejemplo
Aquí están los ejemplos para establecer el fondo de una etiqueta HTML por código de color usando valores rgb ():
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by RGB code</title>
</head>
<body text = "rgb(0,0,255)" bgcolor = "rgb(0,255,0)">
<p>Use different color code for for body and table and see the result.</p>
<table bgcolor = "rgb(0,0,0)">
<tr>
<td>
<font color = "rgb(255,255,255)">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>Colores seguros del navegador
Aquí está la lista de 216 colores que se supone que son los colores más seguros e independientes de la computadora. Estos colores van desde el código hexadecimal 000000 hasta FFFFFF y serán compatibles con todas las computadoras que tengan una paleta de 256 colores.
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | Literalmente | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
Las fuentes juegan un papel muy importante en hacer que un sitio web sea más fácil de usar y aumentar la legibilidad del contenido. La fuente y el color de la fuente dependen completamente de la computadora y el navegador que se esté utilizando para ver su página, pero puede usar HTML<font>etiqueta para agregar estilo, tamaño y color al texto de su sitio web. Puedes usar un<basefont> etiqueta para configurar todo el texto con el mismo tamaño, cara y color.
La etiqueta de fuente tiene tres atributos llamados size, colory facepara personalizar sus fuentes. Para cambiar cualquiera de los atributos de fuente en cualquier momento dentro de su página web, simplemente use la etiqueta <font>. El texto que sigue permanecerá cambiado hasta que cierre con la etiqueta </font>. Puede cambiar uno o todos los atributos de fuente dentro de una etiqueta <font>.
Note−Las etiquetas de fuente y fuente base están en desuso y se supone que se eliminarán en una versión futura de HTML. Por lo tanto, no deben usarse en su lugar, se sugiere usar estilos CSS para manipular sus fuentes. Pero aún con el propósito de aprender, este capítulo explicará en detalle las etiquetas de fuente y fuente base.
Establecer tamaño de fuente
Puede establecer el tamaño de fuente del contenido usando sizeatributo. El rango de valores aceptados es de 1 (menor) a 7 (mayor). El tamaño predeterminado de una fuente es 3.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<font size = "1">Font size = "1"</font><br />
<font size = "2">Font size = "2"</font><br />
<font size = "3">Font size = "3"</font><br />
<font size = "4">Font size = "4"</font><br />
<font size = "5">Font size = "5"</font><br />
<font size = "6">Font size = "6"</font><br />
<font size = "7">Font size = "7"</font>
</body>
</html>Esto producirá el siguiente resultado:
Tamaño de fuente relativo
Puede especificar cuántos tamaños más grandes o cuántos tamaños más pequeños que el tamaño de fuente predeterminado debe ser. Puedes especificarlo como<font size = "+n"> o <font size = "−n">
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Relative Font Size</title>
</head>
<body>
<font size = "-1">Font size = "-1"</font><br />
<font size = "+1">Font size = "+1"</font><br />
<font size = "+2">Font size = "+2"</font><br />
<font size = "+3">Font size = "+3"</font><br />
<font size = "+4">Font size = "+4"</font>
</body>
</html>Esto producirá el siguiente resultado:
Configuración de la fuente de la fuente
Puede establecer el tipo de fuente utilizando el atributo de rostro, pero tenga en cuenta que si el usuario que ve la página no tiene la fuente instalada, no podrá verla. En su lugar, el usuario verá la fuente predeterminada aplicable a la computadora del usuario.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Font Face</title>
</head>
<body>
<font face = "Times New Roman" size = "5">Times New Roman</font><br />
<font face = "Verdana" size = "5">Verdana</font><br />
<font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
<font face = "WildWest" size = "5">WildWest</font><br />
<font face = "Bedrock" size = "5">Bedrock</font><br />
</body>
</html>Esto producirá el siguiente resultado:
Especificar fuentes alternativas
Un visitante solo podrá ver su fuente si tiene esa fuente instalada en su computadora. Por lo tanto, es posible especificar dos o más alternativas de tipo de letra enumerando los nombres de tipos de letra, separados por una coma.
<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">Cuando se carga su página, su navegador mostrará la primera fuente disponible. Si no se instala ninguna de las fuentes indicadas, se mostrará la fuente predeterminada Times New Roman .
Note - Consulte una lista completa de HTML Standard Fonts.
Configuración del color de fuente
Puede establecer cualquier color de fuente que desee utilizando el atributo de color . Puede especificar el color que desee mediante el nombre del color o el código hexadecimal para ese color.
Note - Puede consultar una lista completa de HTML Color Name with Codes.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font color = "#FF00FF">This text is in pink</font><br />
<font color = "red">This text is red</font>
</body>
</html>Esto producirá el siguiente resultado:
El elemento <basefont>
Se supone que el elemento <basefont> debe establecer un tamaño de fuente, color y tipo de letra predeterminados para cualquier parte del documento que no esté contenida dentro de una etiqueta <font>. Puede utilizar los elementos <font> para anular la configuración de <basefont>.
La etiqueta <basefont> también toma los atributos de color, tamaño y rostro, y admitirá la configuración relativa de la fuente al dar al tamaño un valor de +1 para un tamaño mayor o -2 para dos tamaños más pequeños.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Setting Basefont Color</title>
</head>
<body>
<basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
<p>This is the page's default font.</p>
<h2>Example of the <basefont> Element</h2>
<p><font size = "+2" color = "darkgray">
This is darkgray text with two sizes larger
</font>
</p>
<p><font face = "courier" size = "-1" color = "#000000">
It is a courier font, a size smaller and black in color.
</font>
</p>
</body>
</html>Esto producirá el siguiente resultado:
Los formularios HTML son necesarios cuando desee recopilar algunos datos del visitante del sitio. Por ejemplo, durante el registro de usuario, le gustaría recopilar información como nombre, dirección de correo electrónico, tarjeta de crédito, etc.
Un formulario tomará la entrada del visitante del sitio y luego lo publicará en una aplicación de back-end como CGI, ASP Script o script PHP, etc. La aplicación de back-end realizará el procesamiento requerido en los datos pasados según la lógica comercial definida dentro la aplicación.
Hay varios elementos de formulario disponibles como campos de texto, campos de área de texto, menús desplegables, botones de radio, casillas de verificación, etc.
El HTML <form> La etiqueta se usa para crear un formulario HTML y tiene la siguiente sintaxis:
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>Atributos de formulario
Además de los atributos comunes, a continuación se muestra una lista de los atributos de formulario más utilizados:
| No Señor | Atributo y descripción |
|---|---|
| 1 | action Script de backend listo para procesar sus datos pasados. |
| 2 | method Método que se utilizará para cargar datos. Los más utilizados son los métodos GET y POST. |
| 3 | target Especifique la ventana o el marco de destino donde se mostrará el resultado del script. Toma valores como _blank, _self, _parent, etc. |
| 4 | enctype Puede utilizar el atributo enctype para especificar cómo el navegador codifica los datos antes de enviarlos al servidor. Los valores posibles son: application/x-www-form-urlencoded - Este es el método estándar que utilizan la mayoría de los formularios en escenarios simples. mutlipart/form-data - Esto se utiliza cuando desea cargar datos binarios en forma de archivos como imagen, archivo de palabra, etc. |
Note- Puede consultar Perl y CGI para obtener detalles sobre cómo funciona la carga de datos del formulario.
Controles de formulario HTML
Hay diferentes tipos de controles de formulario que puede utilizar para recopilar datos mediante formularios HTML:
- Controles de entrada de texto
- Controles de casillas de verificación
- Controles de la caja de radio
- Seleccionar controles de caja
- Cuadros de selección de archivos
- Controles ocultos
- Botones en los que se puede hacer clic
- Botón Enviar y reiniciar
Controles de entrada de texto
Hay tres tipos de entrada de texto que se utilizan en los formularios:
Single-line text input controls- Este control se usa para elementos que requieren solo una línea de entrada del usuario, como cuadros de búsqueda o nombres. Se crean usando HTML<input> etiqueta.
Password input controls- Esta también es una entrada de texto de una sola línea pero enmascara el carácter tan pronto como un usuario lo ingresa. También se crean utilizando la etiqueta HTMl <input>.
Multi-line text input controls- Se utiliza cuando el usuario debe proporcionar detalles que pueden ser más largos que una sola oración. Los controles de entrada de varias líneas se crean mediante HTML<textarea> etiqueta.
Controles de entrada de texto de una sola línea
Este control se usa para elementos que requieren solo una línea de entrada del usuario, como cuadros de búsqueda o nombres. Se crean utilizando la etiqueta HTML <input>.
Ejemplo
A continuación se muestra un ejemplo básico de una entrada de texto de una sola línea que se utiliza para tomar el nombre y el apellido:
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>
</html>Esto producirá el siguiente resultado:
Atributos
A continuación se muestra la lista de atributos de la etiqueta <input> para crear un campo de texto.
| No Señor | Atributo y descripción |
|---|---|
| 1 | type Indica el tipo de control de entrada y para el control de entrada de texto se establecerá en text. |
| 2 | name Se utiliza para dar un nombre al control que se envía al servidor para que sea reconocido y obtenga el valor. |
| 3 | value Esto se puede utilizar para proporcionar un valor inicial dentro del control. |
| 4 | size Permite especificar el ancho del control de entrada de texto en términos de caracteres. |
| 5 | maxlength Permite especificar el número máximo de caracteres que un usuario puede ingresar en el cuadro de texto. |
Controles de entrada de contraseña
Esta también es una entrada de texto de una sola línea, pero enmascara el carácter tan pronto como un usuario lo ingresa. También se crean utilizando la etiqueta HTML <input>, pero el atributo de tipo se establece enpassword.
Ejemplo
Aquí hay un ejemplo básico de una entrada de contraseña de una sola línea utilizada para tomar la contraseña de usuario:
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" />
</form>
</body>
</html>Esto producirá el siguiente resultado:
Atributos
A continuación se muestra la lista de atributos de la etiqueta <input> para crear el campo de contraseña.
| No Señor | Atributo y descripción |
|---|---|
| 1 | type Indica el tipo de control de entrada y para el control de entrada de contraseña se establecerá en password. |
| 2 | name Se utiliza para dar un nombre al control que se envía al servidor para que sea reconocido y obtenga el valor. |
| 3 | value Esto se puede utilizar para proporcionar un valor inicial dentro del control. |
| 4 | size Permite especificar el ancho del control de entrada de texto en términos de caracteres. |
| 5 | maxlength Permite especificar el número máximo de caracteres que un usuario puede ingresar en el cuadro de texto. |
Controles de entrada de texto de varias líneas
Se utiliza cuando el usuario debe proporcionar detalles que pueden ser más largos que una sola oración. Los controles de entrada de varias líneas se crean utilizando la etiqueta HTML <textarea>.
Ejemplo
A continuación, se muestra un ejemplo básico de una entrada de texto de varias líneas que se utiliza para tomar la descripción del artículo:
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>
</body>
</html>Esto producirá el siguiente resultado:
Atributos
A continuación se muestra la lista de atributos para la etiqueta <textarea>.
| No Señor | Atributo y descripción |
|---|---|
| 1 | name Se utiliza para dar un nombre al control que se envía al servidor para que sea reconocido y obtenga el valor. |
| 2 | rows Indica el número de filas del cuadro de área de texto. |
| 3 | cols Indica el número de columnas del cuadro de área de texto |
Control de casilla de verificación
Las casillas de verificación se utilizan cuando se requiere seleccionar más de una opción. También se crean utilizando la etiqueta HTML <input>, pero el atributo de tipo se establece encheckbox..
Ejemplo
Aquí hay un ejemplo de código HTML para un formulario con dos casillas de verificación:
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>
</body>
</html>Esto producirá el siguiente resultado:
Atributos
A continuación se muestra la lista de atributos para la etiqueta <casilla de verificación>.
| No Señor | Atributo y descripción |
|---|---|
| 1 | type Indica el tipo de control de entrada y para el control de entrada de la casilla de verificación se establecerá en checkbox.. |
| 2 | name Se utiliza para dar un nombre al control que se envía al servidor para que sea reconocido y obtenga el valor. |
| 3 | value El valor que se utilizará si se selecciona la casilla de verificación. |
| 4 | checked Configúrelo como marcado si desea seleccionarlo de forma predeterminada. |
Control de botón de radio
Los botones de opción se utilizan cuando hay muchas opciones, solo se requiere seleccionar una. También se crean utilizando la etiqueta HTML <input>, pero el atributo de tipo se establece enradio.
Ejemplo
Aquí hay un código HTML de ejemplo para un formulario con dos botones de opción:
<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>
</body>
</html>Esto producirá el siguiente resultado:
Atributos
A continuación se muestra la lista de atributos para el botón de opción.
| No Señor | Atributo y descripción |
|---|---|
| 1 | type Indica el tipo de control de entrada y para el control de entrada de la casilla de verificación se establecerá en radio. |
| 2 | name Se utiliza para dar un nombre al control que se envía al servidor para que sea reconocido y obtenga el valor. |
| 3 | value El valor que se utilizará si se selecciona la casilla de radio. |
| 4 | checked Configúrelo como marcado si desea seleccionarlo de forma predeterminada. |
Seleccionar control de caja
Un cuadro de selección, también llamado cuadro desplegable que ofrece la opción de enumerar varias opciones en forma de lista desplegable, desde donde un usuario puede seleccionar una o más opciones.
Ejemplo
Aquí hay un código HTML de ejemplo para un formulario con un cuadro desplegable
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>
</html>Esto producirá el siguiente resultado:
Atributos
A continuación se muestra la lista de atributos importantes de la etiqueta <select>:
| No Señor | Atributo y descripción |
|---|---|
| 1 | name Se utiliza para dar un nombre al control que se envía al servidor para que sea reconocido y obtenga el valor. |
| 2 | size Esto se puede utilizar para presentar un cuadro de lista de desplazamiento. |
| 3 | multiple Si se establece en "múltiple", permite al usuario seleccionar varios elementos del menú. |
A continuación se muestra la lista de atributos importantes de la etiqueta <option>:
| No Señor | Atributo y descripción |
|---|---|
| 1 | value El valor que se utilizará si se selecciona una opción en el cuadro de selección. |
| 2 | selected Especifica que esta opción debe ser el valor seleccionado inicialmente cuando se carga la página. |
| 3 | label Una forma alternativa de etiquetar opciones |
Cuadro de carga de archivos
Si desea permitir que un usuario cargue un archivo en su sitio web, deberá usar un cuadro de carga de archivos, también conocido como cuadro de selección de archivos. Esto también se crea usando el elemento <input> pero el atributo type se establece enfile.
Ejemplo
Aquí hay un código HTML de ejemplo para un formulario con un cuadro de carga de archivo:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>
</html>Esto producirá el siguiente resultado:
Atributos
A continuación se muestra la lista de atributos importantes del cuadro de carga de archivos:
| No Señor | Atributo y descripción |
|---|---|
| 1 | name Se utiliza para dar un nombre al control que se envía al servidor para que sea reconocido y obtenga el valor. |
| 2 | accept Especifica los tipos de archivos que acepta el servidor. |
Controles de botones
Hay varias formas en HTML para crear botones en los que se puede hacer clic. También puede crear un botón en el que se puede hacer clic utilizando la etiqueta <input> estableciendo su atributo de tipo enbutton. El atributo de tipo puede tomar los siguientes valores:
| No Señor | Tipo y descripción |
|---|---|
| 1 | submit Esto crea un botón que envía automáticamente un formulario. |
| 2 | reset Esto crea un botón que restablece automáticamente los controles de formulario a sus valores iniciales. |
| 3 | button Esto crea un botón que se usa para activar un script del lado del cliente cuando el usuario hace clic en ese botón. |
| 4 | image Esto crea un botón en el que se puede hacer clic, pero podemos usar una imagen como fondo del botón. |
Ejemplo
Aquí hay un código HTML de ejemplo para un formulario con tres tipos de botones:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
</form>
</body>
</html>Esto producirá el siguiente resultado:
Controles de forma oculta
Los controles de formulario ocultos se utilizan para ocultar datos dentro de la página que luego se pueden enviar al servidor. Este control se esconde dentro del código y no aparece en la página real. Por ejemplo, el siguiente formulario oculto se utiliza para mantener el número de página actual. Cuando un usuario haga clic en la página siguiente, el valor del control oculto se enviará al servidor web y allí decidirá qué página se mostrará a continuación en función de la página actual pasada.
Ejemplo
Aquí hay un código HTML de ejemplo para mostrar el uso del control oculto:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<p>This is page 10</p>
<input type = "hidden" name = "pagename" value = "10" />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>
</body>
</html>Esto producirá el siguiente resultado:
A veces es necesario agregar música o videos a su página web. La forma más fácil de agregar video o sonido a su sitio web es incluir la etiqueta HTML especial llamada<embed>. Esta etiqueta hace que el propio navegador incluya controles para el multimedia proporcionado automáticamente. El navegador admite la etiqueta <embed> y el tipo de medio dado.
También puede incluir un <noembed>etiqueta para los navegadores que no reconocen la etiqueta <embed>. Podría, por ejemplo, utilizar <embed> para mostrar una película de su elección y<noembed> para mostrar una sola imagen JPG si el navegador no admite la etiqueta <embed>.
Ejemplo
Aquí hay un ejemplo simple para reproducir un archivo midi incrustado:
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src = "/html/yourfile.mid" width = "100%" height = "60" >
<noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
</embed>
</body>
</html>Los atributos de etiqueta <embed>
A continuación se muestra la lista de atributos importantes que se pueden usar con la etiqueta <embed>.
Note−Los atributos de alineación y inicio automático están en desuso en HTML5. No utilice estos atributos.
| No Señor | Atributo y descripción |
|---|---|
| 1 | align Determina cómo alinear el objeto. Se puede configurar en el centro, la izquierda o la derecha . |
| 2 | autostart Este atributo booleano indica si los medios deben iniciarse automáticamente. Puede establecerlo como verdadero o falso. |
| 3 | loop Especifica si el sonido debe reproducirse continuamente (establecer el bucle en verdadero), un cierto número de veces (un valor positivo) o no reproducirse en absoluto (falso) |
| 4 | playcount Especifica el número de veces que se reproducirá el sonido. Esta es una opción alternativa para el ciclo si está usando IE. |
| 5 | hidden Especifica si el objeto multimedia debe mostrarse en la página. Un valor falso significa no y los valores verdaderos significan sí. |
| 6 | width Ancho del objeto en píxeles |
| 7 | height Altura del objeto en píxeles |
| 8 | name Un nombre utilizado para hacer referencia al objeto. |
| 9 | src URL del objeto a incrustar. |
| 10 | volume Controla el volumen del sonido. Puede ser de 0 (apagado) a 100 (volumen completo). |
Tipos de video compatibles
Puede utilizar varios tipos de medios como películas Flash (.swf), tipos de archivos AVI (.avi) y MOV (.mov) dentro de la etiqueta de inserción.
.swf files - son los tipos de archivos creados por el programa Flash de Macromedia.
.wmv files - son los tipos de archivos de Windows Media Video de Microsoft.
.mov files - son el formato Quick Time Movie de Apple.
.mpeg files - son archivos de película creados por Moving Pictures Expert Group.
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src = "/html/yourfile.swf" width = "200" height = "200" >
<noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
</embed>
</body>
</html>Esto producirá el siguiente resultado:
Audio de fondo
Puedes usar HTML <bgsound>etiqueta para reproducir una banda sonora en el fondo de su página web. Esta etiqueta solo es compatible con Internet Explorer y la mayoría de los demás navegadores ignoran esta etiqueta. Descarga y reproduce un archivo de audio cuando el usuario descarga y muestra por primera vez el documento anfitrión. El archivo de sonido de fondo también se reproducirá cada vez que el usuario actualice el navegador.
Note- La etiqueta bgsound está obsoleta y se supone que se eliminará en una versión futura de HTML. Por lo tanto, no deben usarse en su lugar, se sugiere usar audio de etiqueta HTML5 para agregar sonido. Pero aún con el propósito de aprender, este capítulo explicará la etiqueta bgsound en detalle.
Esta etiqueta solo tiene dos atributos loop y src . Ambos atributos tienen el mismo significado que se explicó anteriormente.
Aquí hay un ejemplo simple para reproducir un archivo midi pequeño:
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<bgsound src = "/html/yourfile.mid">
<noembed><img src = "yourimage.gif" ></noembed>
</bgsound>
</body>
</html>Esto producirá la pantalla en blanco. Esta etiqueta no muestra ningún componente y permanece oculta.
Internet Explorer también puede manejar solo tres archivos de formato de sonido diferentes: wav, el formato nativo para PC; au, el formato nativo para la mayoría de las estaciones de trabajo Unix; y MIDI, un esquema universal de codificación de música.
Etiqueta de objeto HTML
HTML 4 presenta el <object>elemento, que ofrece una solución universal para la inclusión de objetos genéricos. los<object> El elemento permite a los autores HTML especificar todo lo que requiere un objeto para su presentación por un agente de usuario.
A continuación se muestran algunos ejemplos:
Ejemplo 1
Puede incrustar un documento HTML en un documento HTML de la siguiente manera:
<object data = "data/test.htm" type = "text/html" width = "300" height = "200">
alt : <a href = "data/test.htm">test.htm</a>
</object>Aquí el atributo alt aparecerá en la imagen si el navegador no admite la etiqueta de objeto .
Ejemplo - 2
Puede incrustar un documento PDF en un documento HTML de la siguiente manera:
<object data = "data/test.pdf" type = "application/pdf" width = "300" height = "200">
alt : <a href = "data/test.pdf">test.htm</a>
</object>Ejemplo - 3
Puede especificar algunos parámetros relacionados con el documento con el <param>etiqueta. Aquí hay un ejemplo para incrustar un archivo wav:
<object data = "data/test.wav" type = "audio/x-wav" width = "200" height = "20">
<param name = "src" value = "data/test.wav">
<param name = "autoplay" value = "false">
<param name = "autoStart" value = "0">
alt : <a href = "data/test.wav">test.wav</a>
</object>Ejemplo - 4
Puede agregar un documento flash de la siguiente manera:
<object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id = "penguin"
codebase = "someplace/swflash.cab" width = "200" height = "300">
<param name = "movie" value = "flash/penguin.swf" />
<param name = "quality" value = "high" />
<img src = "penguin.jpg" width = "200" height = "300" alt = "Penguin" />
</object>Ejemplo - 5
Puede agregar un subprograma de Java en un documento HTML de la siguiente manera:
<object classid = "clsid:8ad9c840-044e-11d1-b3e9-00805f499d93"
width = "200" height = "200">
<param name = "code" value = "applet.class">
</object>los classidEl atributo identifica qué versión de Java Plug-in utilizar. Puede utilizar el atributo de base de código opcional para especificar si descargar el JRE y cómo hacerlo.
Una marquesina HTML es un fragmento de texto que se desplaza y se muestra horizontalmente o verticalmente hacia abajo en la página web, según la configuración. Esto se crea utilizando la etiqueta HTML <marquees>.
Note- La etiqueta <marquee> en desuso en HTML5. No use este elemento, en su lugar puede usar JavaScript y CSS para crear tales efectos.
Sintaxis
Una sintaxis simple para usar la etiqueta HTML <marquee> es la siguiente:
<marquee attribute_name = "attribute_value"....more attributes>
One or more lines or text message or image
</marquee>Los atributos de la etiqueta <marquee>
A continuación se muestra la lista de atributos importantes que se pueden usar con la etiqueta <marquee>.
| No Señor | Atributo y descripción |
|---|---|
| 1 | width Esto especifica el ancho del marco. Este puede ser un valor como 10 o 20%, etc. |
| 2 | height Esto especifica la altura de la marquesina. Este puede ser un valor como 10 o 20%, etc. |
| 3 | direction Esto especifica la dirección en la que debe desplazarse la marquesina. Este puede ser un valor como arriba, abajo, izquierda o derecha . |
| 4 | behavior Esto especifica el tipo de desplazamiento del marco. Esto puede tener un valor como desplazarse, deslizarse y alternar . |
| 5 | scrolldelay Esto especifica cuánto tiempo demorar entre cada salto. Esto tendrá un valor como 10, etc. |
| 6 | scrollamount Esto especifica la velocidad del texto de marquesina. Esto puede tener un valor como 10, etc. |
| 7 | loop Esto especifica cuántas veces se repetirá. El valor predeterminado es INFINITO, lo que significa que la marquesina se repite sin cesar. |
| 8 | bgcolor Esto especifica el color de fondo en términos de nombre de color o valor hexadecimal de color. |
| 9 | hspace Esto especifica el espacio horizontal alrededor del marco. Este puede ser un valor como 10 o 20%, etc. |
| 10 | vspace Esto especifica el espacio vertical alrededor de la marquesina. Este puede ser un valor como 10 o 20%, etc. |
A continuación se muestran algunos ejemplos para demostrar el uso de la etiqueta de marquesina.
Ejemplos - 1
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
</body>
</html>Esto producirá el siguiente resultado:
Ejemplos - 2
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee width = "50%">This example will take only 50% width</marquee>
</body>
</html>Esto producirá el siguiente resultado:
Ejemplos - 3
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction = "right">This text will scroll from left to right</marquee>
</body>
</html>Esto producirá el siguiente resultado:
Ejemplos - 4
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction = "up">This text will scroll from bottom to up</marquee>
</body>
</html>Esto producirá el siguiente resultado:
Hemos aprendido que un documento HTML típico tendrá la siguiente estructura:
Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>Este capítulo dará un poco más de detalle sobre la parte del encabezado que está representada por la etiqueta HTML <head>. La etiqueta <head> es un contenedor de varias etiquetas importantes como etiquetas <title>, <meta>, <link>, <base>, <style>, <script> y <noscript>.
La etiqueta HTML <title>
La etiqueta HTML <title> se utiliza para especificar el título del documento HTML. A continuación se muestra un ejemplo para dar un título a un documento HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML Title Tag Example</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>Esto producirá el siguiente resultado:
La etiqueta HTML <meta>
La etiqueta HTML <meta> se utiliza para proporcionar metadatos sobre el documento HTML que incluye información sobre el vencimiento de la página, el autor de la página, la lista de palabras clave, la descripción de la página, etc.
A continuación se muestran algunos de los usos importantes de la etiqueta <meta> dentro de un documento HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML Meta Tag Example</title>
<!-- Provide list of keywords -->
<meta name = "keywords" content = "C, C++, Java, PHP, Perl, Python">
<!-- Provide description of the page -->
<meta name = "description" content = "Simply Easy Learning by Tutorials Point">
<!-- Author information -->
<meta name = "author" content = "Tutorials Point">
<!-- Page content type -->
<meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
<!-- Page refreshing delay -->
<meta http-equiv = "refresh" content = "30">
<!-- Page expiry -->
<meta http-equiv = "expires" content = "Wed, 21 June 2006 14:25:27 GMT">
<!-- Tag to tell robots not to index the content of a page -->
<meta name = "robots" content = "noindex, nofollow">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>Esto producirá el siguiente resultado:
La etiqueta HTML <base>
La etiqueta HTML <base> se utiliza para especificar la URL base para todas las URL relativas en una página, lo que significa que todas las demás URL se concatenarán en la URL base mientras se localiza el elemento dado.
Por ejemplo, todas las páginas e imágenes dadas se buscarán después de prefijar las URL dadas con la URL base http://www.tutorialspoint.com/ directorio -
<!DOCTYPE html>
<html>
<head>
<title>HTML Base Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
</head>
<body>
<img src = "/images/logo.png" alt = "Logo Image"/>
<a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a>
</body>
</html>Esto producirá el siguiente resultado:
Pero si cambia la URL base a otra cosa, por ejemplo, si la URL base es http://www.tutorialspoint.com/home, la imagen y otros enlaces dados se convertirán en http://www.tutorialspoint.com/home/images /logo.png y http://www.tutorialspoint.com/html/index.htm
La etiqueta HTML <link>
La etiqueta HTML <link> se utiliza para especificar las relaciones entre el documento actual y el recurso externo. A continuación se muestra un ejemplo para vincular un archivo de hoja de estilo externo disponible encss subdirectorio dentro de la raíz web -
<!DOCTYPE html>
<html>
<head>
<title>HTML link Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
<link rel = "stylesheet" type = "text/css" href = "/css/style.css">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>Esto producirá el siguiente resultado:
La etiqueta HTML <style>
La etiqueta HTML <style> se usa para especificar la hoja de estilo para el documento HTML actual. A continuación se muestra un ejemplo para definir algunas reglas de hoja de estilo dentro de la etiqueta <style>:
<!DOCTYPE html>
<html>
<head>
<title>HTML style Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
<style type = "text/css">
.myclass {
background-color: #aaa;
padding: 10px;
}
</style>
</head>
<body>
<p class = "myclass">Hello, World!</p>
</body>
</html>Esto producirá el siguiente resultado:
Note- Para obtener más información sobre cómo funciona la hoja de estilo en cascada, consulte un tutorial separado disponible en css
La etiqueta HTML <script>
La etiqueta HTML <script> se utiliza para incluir un archivo de script externo o para definir un script interno para el documento HTML. A continuación se muestra un ejemplo en el que usamos JavaScript para definir una función de JavaScript simple:
<!DOCTYPE html>
<html>
<head>
<title>HTML script Tag Example</title>
<base href = "http://www.tutorialspoint.com/" />
<script type = "text/JavaScript">
function Hello() {
alert("Hello, World");
}
</script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "OK" />
</body>
</html>Esto producirá el siguiente resultado, donde puede intentar hacer clic en el botón dado:
Note- Para obtener más información sobre cómo funciona JavaScript, consulte un tutorial separado disponible en javascript
Las hojas de estilo en cascada (CSS) describen cómo se presentan los documentos en pantallas, impresos o quizás cómo se pronuncian. El W3C ha promovido activamente el uso de hojas de estilo en la Web desde que se fundó el consorcio en 1994.
Las hojas de estilo en cascada (CSS) proporcionan alternativas fáciles y efectivas para especificar varios atributos para las etiquetas HTML. Con CSS, puede especificar una serie de propiedades de estilo para un elemento HTML determinado. Cada propiedad tiene un nombre y un valor, separados por dos puntos (:). Cada declaración de propiedad está separada por un punto y coma (;).
Ejemplo
Primero consideremos un ejemplo de documento HTML que hace uso de la etiqueta <font> y atributos asociados para especificar el color del texto y el tamaño de la fuente -
Note- La etiqueta de fuente en desuso y se supone que se eliminará en una versión futura de HTML. Por lo tanto, no deben usarse en su lugar, se sugiere usar estilos CSS para manipular sus fuentes. Pero aún con el propósito de aprender, este capítulo trabajará con un ejemplo usando la etiqueta de fuente.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p><font color = "green" size = "5">Hello, World!</font></p>
</body>
</html>Podemos reescribir el ejemplo anterior con la ayuda de la hoja de estilo de la siguiente manera:
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p style = "color:green; font-size:24px;" >Hello, World!</p>
</body>
</html>Esto producirá el siguiente resultado:
Puede utilizar CSS de tres formas en su documento HTML:
External Style Sheet - Defina las reglas de la hoja de estilo en un archivo .css separado y luego incluya ese archivo en su documento HTML usando la etiqueta HTML <link>.
Internal Style Sheet - Defina las reglas de la hoja de estilo en la sección de encabezado del documento HTML usando la etiqueta <style>.
Inline Style Sheet - Defina las reglas de la hoja de estilo directamente junto con los elementos HTML utilizando style atributo.
Veamos los tres casos uno por uno con la ayuda de ejemplos adecuados.
Hoja de estilo externa
Si necesita usar su hoja de estilo en varias páginas, siempre se recomienda definir una hoja de estilo común en un archivo separado. Un archivo de hoja de estilo en cascada tendrá la extensión.css y se incluirá en archivos HTML mediante la etiqueta <link>.
Ejemplo
Considere que definimos un archivo de hoja de estilo style.css que tiene las siguientes reglas:
.red {
color: red;
}
.thick {
font-size:20px;
}
.green {
color:green;
}Aquí definimos tres reglas CSS que serán aplicables a tres clases diferentes definidas para las etiquetas HTML. Le sugiero que no se preocupe por cómo se definen estas reglas porque las aprenderá mientras estudia CSS. Ahora hagamos uso del archivo CSS externo anterior en nuestro siguiente documento HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<link rel = "stylesheet" type = "text/css" href = "/html/style.css">
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>Esto producirá el siguiente resultado:
Hoja de estilo interna
Si desea aplicar las reglas de la hoja de estilo a un solo documento, puede incluir esas reglas en la sección de encabezado del documento HTML utilizando la etiqueta <style>.
Las reglas definidas en la hoja de estilo interna anulan las reglas definidas en un archivo CSS externo.
Ejemplo
Reescribamos el ejemplo anterior una vez más, pero aquí escribiremos las reglas de la hoja de estilo en el mismo documento HTML usando la etiqueta <style> -
<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<style type = "text/css">
.red {
color: red;
}
.thick{
font-size:20px;
}
.green {
color:green;
}
</style>
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>Esto producirá el siguiente resultado:
Hoja de estilo en línea
Puede aplicar reglas de hoja de estilo directamente a cualquier elemento HTML usando styleatributo de la etiqueta relevante. Esto debe hacerse solo cuando esté interesado en realizar un cambio particular en cualquier elemento HTML únicamente.
Las reglas definidas en línea con el elemento anulan las reglas definidas en un archivo CSS externo, así como las reglas definidas en el elemento <style>.
Ejemplo
Reescribamos el ejemplo anterior una vez más, pero aquí escribiremos las reglas de la hoja de estilo junto con los elementos HTML usando style atributo de esos elementos.
<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style = "color:red;">This is red</p>
<p style = "font-size:20px;">This is thick</p>
<p style = "color:green;">This is green</p>
<p style = "color:green;font-size:20px;">This is thick and green</p>
</body>
</html>Esto producirá el siguiente resultado:
UN scriptes un pequeño programa que puede agregar interactividad a su sitio web. Por ejemplo, una secuencia de comandos podría generar un mensaje de cuadro de alerta emergente o proporcionar un menú desplegable. Este script se puede escribir usando JavaScript o VBScript.
Puede escribir varias funciones pequeñas, llamadas controladores de eventos, utilizando cualquiera de los lenguajes de programación y luego puede activar esas funciones utilizando atributos HTML.
Hoy en día, solo JavaScript y la mayoría de los desarrolladores web utilizan los marcos asociados, VBScript ni siquiera es compatible con varios de los principales navegadores.
Puede mantener el código JavaScript en un archivo separado y luego incluirlo donde sea necesario, o puede definir la funcionalidad dentro del propio documento HTML. Veamos ambos casos uno por uno con ejemplos adecuados.
JavaScript externo
Si va a definir una funcionalidad que se utilizará en varios documentos HTML, entonces es mejor mantener esa funcionalidad en un archivo JavaScript separado y luego incluir ese archivo en sus documentos HTML. Un archivo JavaScript tendrá la extensión.js y se incluirá en archivos HTML mediante la etiqueta <script>.
Ejemplo
Considere que definimos una pequeña función usando JavaScript en script.js que tiene el siguiente código:
function Hello() {
alert("Hello, World");
}Ahora hagamos uso del archivo JavaScript externo anterior en nuestro siguiente documento HTML:
<!DOCTYPE html>
<html>
<head>
<title>Javascript External Script</title>
<script src = "/html/script.js" type = "text/javascript"/></script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
</body>
</html>Esto producirá el siguiente resultado, donde puede intentar hacer clic en el botón dado:
Guión interno
Puede escribir su código de secuencia de comandos directamente en su documento HTML. Por lo general, mantenemos el código de secuencia de comandos en el encabezado del documento usando la etiqueta <script>; de lo contrario, no hay restricción y puede poner su código fuente en cualquier lugar del documento, pero dentro de la etiqueta <script>.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Internal Script</title>
<base href = "https://www.tutorialspoint.com/" />
<script type = "text/JavaScript">
function Hello() {
alert("Hello, World");
}
</script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
</body>
</html>Esto producirá el siguiente resultado, donde puede intentar hacer clic en el botón dado:
Controladores de eventos
Los controladores de eventos no son más que funciones simplemente definidas que se pueden llamar contra cualquier evento de mouse o teclado. Puede definir su lógica de negocios dentro de su controlador de eventos, que puede variar desde un código de línea único hasta miles.
El siguiente ejemplo explica cómo escribir un controlador de eventos. Escribamos una función simple EventHandler () en el encabezado del documento. Llamaremos a esta función cuando cualquier usuario pase el mouse sobre un párrafo.
<!DOCTYPE html>
<html>
<head>
<title>Event Handlers Example</title>
<base href = "https://www.tutorialspoint.com/" />
<script type = "text/JavaScript">
function EventHandler() {
alert("I'm event handler!!");
}
</script>
</head>
<body>
<p onmouseover = "EventHandler();">Bring your mouse here to see an alert</p>
</body>
</html>Ahora esto producirá el siguiente resultado. Pase el mouse sobre esta línea y vea el resultado:
Ocultar scripts de navegadores más antiguos
Aunque la mayoría (si no todos) de los navegadores en estos días son compatibles con JavaScript, algunos navegadores más antiguos no lo hacen. Si un navegador no es compatible con JavaScript, en lugar de ejecutar su script, mostraría el código al usuario. Para evitar esto, simplemente puede colocar comentarios HTML alrededor del script como se muestra a continuación.
JavaScript Example:
<script type = "text/JavaScript">
<!--
document.write("Hello JavaScript!");
//-->
</script>
VBScript Example:
<script type = "text/vbscript">
<!--
document.write("Hello VBScript!")
'-->
</script>El elemento <noscript>
También puede proporcionar información alternativa a los usuarios cuyos navegadores no admiten scripts y para aquellos usuarios que tienen la opción de script deshabilitada en sus navegadores. Puede hacer esto usando el<noscript> etiqueta.
JavaScript Example:
<script type = "text/JavaScript">
<!--
document.write("Hello JavaScript!");
//-->
</script>
<noscript>Your browser does not support JavaScript!</noscript>
VBScript Example:
<script type = "text/vbscript">
<!--
document.write("Hello VBScript!")
'-->
</script>
<noscript>Your browser does not support VBScript!</noscript>Lenguaje de secuencias de comandos predeterminado
Puede haber una situación en la que incluya varios archivos de script y, en última instancia, utilice varias etiquetas <script>. Puede especificar un lenguaje de secuencia de comandos predeterminado para todas sus etiquetas de secuencia de comandos . Esto le evita tener que especificar el idioma cada vez que usa una etiqueta de secuencia de comandos dentro de la página. A continuación se muestra el ejemplo:
<meta http-equiv = "Content-Script-Type" content = "text/JavaScript" />Tenga en cuenta que aún puede anular el valor predeterminado especificando un idioma dentro de la etiqueta de secuencia de comandos.
El diseño de una página web es muy importante para darle una mejor apariencia a su sitio web. Se necesita un tiempo considerable para diseñar el diseño de un sitio web con una excelente apariencia.
Hoy en día, todos los sitios web modernos utilizan CSS y un marco basado en JavaScript para crear sitios web dinámicos y receptivos, pero puede crear un buen diseño utilizando tablas HTML simples o etiquetas de división en combinación con otras etiquetas de formato. Este capítulo le dará algunos ejemplos sobre cómo crear un diseño simple pero funcional para su página web usando HTML puro y sus atributos.
Diseño HTML: uso de tablas
La forma más sencilla y popular de crear diseños es utilizando la etiqueta HTML <table>. Estas tablas están organizadas en columnas y filas, por lo que puede utilizar estas filas y columnas de la forma que desee.
Ejemplo
Por ejemplo, el siguiente ejemplo de diseño HTML se logra usando una tabla con 3 filas y 2 columnas, pero la columna de encabezado y pie de página abarca ambas columnas usando el atributo colspan:
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout using Tables</title>
</head>
<body>
<table width = "100%" border = "0">
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<h1>This is Web Page Main title</h1>
</td>
</tr>
<tr valign = "top">
<td bgcolor = "#aaa" width = "50">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#eee" width = "100" height = "200">
Technical and Managerial Tutorials
</td>
</tr>
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</td>
</tr>
</table>
</body>
</html>Esto producirá el siguiente resultado:
Diseño de varias columnas: uso de tablas
Puede diseñar su página web para colocar su contenido web en varias páginas. Puede mantener su contenido en la columna del medio y puede usar la columna de la izquierda para usar el menú y la columna de la derecha se puede usar para poner publicidad o algunas otras cosas. Este diseño será muy similar al que tenemos en nuestro sitio web tutorialspoint.com.
Ejemplo
Aquí hay un ejemplo para crear un diseño de tres columnas:
<!DOCTYPE html>
<html>
<head>
<title>Three Column HTML Layout</title>
</head>
<body>
<table width = "100%" border = "0">
<tr valign = "top">
<td bgcolor = "#aaa" width = "20%">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#b5dcb3" height = "200" width = "60%">
Technical and Managerial Tutorials
</td>
<td bgcolor = "#aaa" width = "20%">
<b>Right Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
</tr>
<table>
</body>
</html>Esto producirá el siguiente resultado:
Diseños HTML: uso de DIV, SPAN
El elemento <div> es un elemento de nivel de bloque que se utiliza para agrupar elementos HTML. Mientras que la etiqueta <div> es un elemento de nivel de bloque, el elemento HTML <span> se usa para agrupar elementos a nivel de línea.
Aunque podemos lograr diseños bastante agradables con tablas HTML, las tablas no fueron realmente diseñadas como una herramienta de diseño. Las tablas son más adecuadas para presentar datos tabulares.
Note - Este ejemplo hace uso de la hoja de estilo en cascada (CSS), por lo que antes de comprender este ejemplo, debe comprender mejor cómo funciona CSS.
Ejemplo
Aquí intentaremos lograr el mismo resultado usando la etiqueta <div> junto con CSS, lo que sea que haya logrado usando la etiqueta <table> en el ejemplo anterior.
<!DOCTYPE html>
<html>
<head>
<title>HTML Layouts using DIV, SPAN</title>
</head>
<body>
<div style = "width:100%">
<div style = "background-color:#b5dcb3; width:100%">
<h1>This is Web Page Main title</h1>
</div>
<div style = "background-color:#aaa; height:200px; width:100px; float:left;">
<div><b>Main Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#eee; height:200px; width:350px; float:left;" >
<p>Technical and Managerial Tutorials</p>
</div>
<div style = "background-color:#aaa; height:200px; width:100px; float:right;">
<div><b>Right Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#b5dcb3; clear:both">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</div>
</div>
</body>
</html>Esto producirá el siguiente resultado:
Puede crear un mejor diseño utilizando DIV, SPAN junto con CSS. Para obtener más información sobre CSS, consulte el tutorial de CSS.