El acrónimo HTML significa Lenguaje de marcado de hipertexto. Es el lenguaje de marcado primario utilizado para escribir contenido en la web. Cada página web en Internet tiene al menos algunas marcas HTML incluidas en su código fuente, y la mayoría de los sitios web están compuestos por muchos archivos .HTML o .HTM.
Si usted tiene la intención de construir un sitio web es irrelevante. Saber qué es HTML, cómo llegó a existir y los conceptos básicos de cómo se construye el lenguaje de marcado realmente muestra la increíble versatilidad de esta arquitectura básica de sitio web y cómo sigue siendo una parte importante de cómo vemos la web.
Si estás en línea, entonces has encontrado al menos algunas instancias de HTML, probablemente sin siquiera darte cuenta.
¿Quién inventó HTML?
HTML fue creado en 1991 por Tim Berners-Lee, el creador oficial y fundador de lo que ahora conocemos como la World Wide Web.
Se le ocurrió la idea de compartir información sin importar dónde estaba ubicada una computadora, mediante el uso de hipervínculos (enlaces codificados en HTML que conectan un recurso con otro), HTTP (un protocolo de comunicación para servidores web y usuarios web) y la URL (un sistema de dirección simplificado para cada página web en Internet).
HTML v2.0 se lanzó en noviembre de 1995, después de lo cual fueron otros siete los que formaron HTML 5.1 en noviembre de 2016. Se publicó como W3C.
Recomendación.
¿Qué aspecto tiene HTML?
El lenguaje HTML usa lo que se llama etiquetas, que son palabras o acrónimos rodeados de corchetes. Una etiqueta HTML típica se parece a lo que ve en la imagen de arriba.
Las etiquetas HTML se escriben como pares; debe haber una etiqueta inicial y una etiqueta final para que el código se muestre correctamente. Puede pensarlo como una declaración de apertura y cierre, o como una letra mayúscula para comenzar una oración y un período para finalizarla.
La primera etiqueta designa cómo se agrupará o mostrará el siguiente texto, y la etiqueta de cierre (señalada con una barra invertida) designa el final de este grupo o pantalla.
¿Cómo usan las páginas web HTML?
Los navegadores web leen el código HTML contenido en las páginas web, pero no muestran el marcado HTML para el usuario. En cambio, el software del navegador traduce la codificación HTML en contenido legible.
Este marcado puede contener los componentes básicos de una página web como el título, los titulares, los párrafos, el texto del cuerpo y los enlaces, así como los titulares de imágenes, listas, etc. También puede designar el aspecto básico del texto, titulares, etc. dentro del HTML mismo utilizando la etiqueta negrita o título.
Cómo aprender HTML
Se dice que HTML es uno de los idiomas más fáciles de aprender, porque gran parte es legible y relatable por los humanos.
Uno de los lugares más populares para aprender HTML en línea es W3Schools. Puede encontrar toneladas de ejemplos de varios elementos HTML e incluso aplicar esos conceptos con ejercicios prácticos y cuestionarios. Hay información sobre formateo, comentarios, CSS, clases, rutas de archivos, símbolos, colores, formularios y más.
¿Qué son los códigos de color HTML?
Los códigos de colores son formas de representar los colores que vemos todos los días en un formato que una computadora puede interpretar y mostrar. Comúnmente utilizado en sitios web y otras aplicaciones de software, hay una variedad de formatos, incluidos códigos de color Hex, valores RGB y HSL, y nombres de colores HTML, entre otros.
Colores html:
CÓDIGOS DE COLOR HEXADECIMAL
Los más populares son los códigos de color Hex; números hexadecimales de tres bytes (lo que significa que constan de seis dígitos), con cada byte o par de caracteres en el código hexadecimal, que representa la intensidad de rojo, verde y azul en el color, respectivamente.
# XX XX XX
Los valores de bytes de código hexadecimal van desde 00, que es la intensidad más baja de un color, hasta FF, que representa la intensidad más alta. El color blanco, por ejemplo, se obtiene mezclando cada uno de los tres colores primarios con toda su intensidad, lo que da como resultado el código de color Hex de #FFFFFF.
#FFFFFF
Negro, la ausencia de cualquier color en una pantalla, es todo lo contrario, con cada color mostrado en su intensidad más baja posible y un código de color Hex de # 000000.
# 000000
Al comprender los conceptos básicos de la notación de código de color Hex podemos crear colores en escala de grises muy fácilmente, ya que consisten en intensidades iguales de cada color:
# 454545
# 999999
Los tres colores primarios, rojo, verde y azul, se obtienen mezclando la intensidad más alta del color deseado con las intensidades más bajas de los otros dos:
# FF0000
# 00FF00
# 0000FF
Con los navegadores modernos que admiten todo el espectro de color de 24 bits, hay 16.777.216 posibilidades de color diferentes.Utilice nuestro selector de color para explorar los 16,7 millones de ellos, o si son demasiados, consulte nuestras tablas de colores para ver una selección de paletas centradas en el diseño plano, el diseño de materiales y los colores seguros para la web.
Lista de códigos de color HTML comunes
| COLOR |
NOMBRE DEL COLOR |
CÓDIGO DE COLOR HEXADECIMAL |
CÓDIGO DE COLOR RGB |
|---|---|---|---|
| BLANCO | #FFFFFF | RGB (255, 255, 255) | |
| PLATA | # C0C0C0 | RGB (192, 192, 192) | |
| GRIS | # 808080 | RGB (128, 128, 128) | |
| NEGRO | # 000000 | RGB (0, 0, 0) | |
| ROJO | # FF0000 | RGB (255, 0, 0) | |
| GRANATE | # 800000 | RGB (128, 0, 0) | |
| AMARILLO | # FFFF00 | RGB (255, 255, 0) | |
| ACEITUNA | # 808000 | RGB (128, 128, 0) | |
| LIMA | # 00FF00 | RGB (0, 255, 0) | |
| VERDE | # 008000 | RGB (0, 128, 0) | |
| AGUA | # 00FFFF | RGB (0, 255, 255) | |
| TEAL | # 008080 | RGB (0, 128, 128) | |
| AZUL | # 0000FF | RGB (0, 0, 255) | |
| ARMADA | # 000080 | RGB (0, 0, 128) | |
| FUCSIA | # FF00FF | RGB (255, 0, 255)) | |
| PÚRPURA | # 800080 | RGB (128, 0, 128)) |
html img
Comentarios en html
El comentario es una pieza 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 para cualquiera que mire el código. Los comentarios lo ayudan a usted y a otros a entender su código y aumenta la legibilidad del código.
Los comentarios HTML se colocan entre las etiquetas <! – … -> . Por lo tanto, cualquier contenido colocado con las etiquetas <! – … -> será tratado como comentario y será completamente ignorado por el navegador.
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 vs Inválidos
Los comentarios no anidan, lo que significa que un comentario no se puede incluir en otro comentario. En segundo lugar, la secuencia de dos guiones “-” puede no aparecer 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 comentario de inicio.
Ejemplo
Aquí, el comentario dado es un comentario válido y será borrado por el navegador.
<!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:
Sin embargo, la siguiente línea no es un comentario válido y se mostrará en el navegador. Esto se debe a que hay un espacio entre el corchete angular 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 mediante la etiqueta inicial especial <! – y la etiqueta final -> colocada antes de la primera línea y el final de la última línea, como se muestra en el ejemplo dado a continuación.
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>
Verás una situación en la que necesitarás aplicar una hoja de estilos diferente basada en diferentes versiones de Internet Explorer, en tal situación los comentarios condicionales serán útiles.
Usando la etiqueta de comentario
Hay pocos navegadores que admiten la etiqueta <comment> para comentar una parte del código HTML.
Nota : la etiqueta <comment> desaprobada en HTML5. No use 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, entonces producirá el siguiente resultado:
Pero si no está utilizando IE, entonces producirá el siguiente resultado:
Comentar código de secuencia de comandos
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, entonces se recomienda poner el código del script dentro de los comentarios HTML adecuados para que el viejo 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:
Comentando hojas de estilo
Aunque aprenderás a usar hojas de estilo con HTML en un tutorial separado, aquí debes tomar nota de que si utilizas la Hoja de estilos en cascada (CSS) en tu código HTML, entonces se recomienda poner ese código de hoja de estilo dentro de los comentarios HTML correctos. para que los navegadores antiguos puedan funcionar 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>
Html Table
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 la etiqueta <table> en la que la etiqueta <tr> se usa para crear filas de tablas y la etiqueta <td> se usa para crear celdas de datos. Los elementos en <td> son regulares y 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 borde es 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 tabla
El encabezado de la tabla se puede definir con la etiqueta <th> . Esta etiqueta se reemplazará con la etiqueta <td>, que se usa para representar la celda de datos real. Normalmente colocará su fila superior como encabezado de la tabla como se muestra a continuación; de lo contrario, puede usar el elemento <th> en cualquier fila. Los títulos, que se definen en la etiqueta <th> están centrados y en negrita por defecto.
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:
Cellpadding y Cellspacing Atributos
Hay dos atributos llamados cellpadding y cellspacing que usará para ajustar el espacio en blanco en las celdas de su tabla. El atributo de espacio de celda define el espacio entre las celdas de la tabla, mientras que el relleno de celdas representa la distancia entre los bordes de la celda 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:
Colspan y Rowspan Atributos
Utilizará el atributo colspan si desea fusionar dos o más columnas en una sola columna. De forma similar, usarás rowspan si deseas unir 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 mesas
Puede establecer el fondo de la tabla usando una de las siguientes dos formas:
- Atributo bgcolor : puede establecer el color de fondo para toda la tabla o solo para una celda.
- atributo de fondo : puede establecer una imagen de fondo para toda la tabla o solo para una celda.
También puede establecer el color del borde usando el atributo bordercolor .
Nota : los atributos bgcolor , background y bordercolor están en desuso en HTML5. No use 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 de atributo de fondo . 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 alto de una tabla usando atributos de ancho y alto . Puede especificar el ancho o la altura 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:
Pie de tabla
La etiqueta de título servirá como un título o una explicación para la tabla y se mostrará en la parte superior de la tabla. Esta etiqueta está en desuso 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 tabla
Las tablas se pueden dividir en tres porciones: un encabezado, un cuerpo y un pie. La cabeza y el pie son bastante similares a los encabezados y pies de página en un documento procesado por palabras que siguen siendo los mismos para cada página, mientras que el cuerpo es el titular principal del 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 separado.
- <tbody> – para indicar el cuerpo principal de la mesa.
- <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 de <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
Puedes usar una tabla dentro de otra mesa. No solo las tablas puede usar casi todas las etiquetas dentro de la etiqueta de datos de la 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>