HTML significa lenguaje de marcado de hipertexto . Es un lenguaje importante para diseñar páginas web o sitios web. Estos sitios web son visibles para cualquier persona en Internet. HTML es una combinación de hipertexto y lenguaje de marcado. Donde el hipertexto es un enlace entre las páginas web, y el lenguaje de marcado se usa para definir el documento de texto dentro de una etiqueta, que define la estructura de las páginas web.
HTML utiliza etiquetas predefinidas que le indican al navegador cómo mostrar el contenido. Las etiquetas no son más que algunas instrucciones encerradas entre llaves angulares (es decir, <>). Se divide en tres partes, es decir, etiqueta de apertura, contenido (que se mostrará en el navegador) y etiqueta de cierre, pero algunas etiquetas son etiquetas especiales que no contienen etiquetas de cierre como la etiqueta <BR>. Cuando trabaje con etiquetas HTML, recuerde siempre incluir etiquetas de cierre. Si olvida cerrar la etiqueta, el navegador aplica el efecto de la etiqueta de apertura hasta el final de la página. HTML contiene cuatro etiquetas esenciales que forman la estructura básica de cualquier página web o archivo HTML:
- <html></html>
- <cabeza></cabeza>
- <título></título>
- <cuerpo></cuerpo>
Ahora analicemos cada etiqueta una por una:
1. <!DOCTYPEhtml>
También se conoce como tipo de documento y debe incluirse en un archivo HTML. En realidad, le dice al navegador que se trata de un documento HTML. No es una etiqueta o un elemento sino que es información.
Sintaxis:
<!DOCTYPEhtml>
2. <html></html>
Esta etiqueta marca el comienzo y el final del documento HTML y cualquier código que esté presente entre estas etiquetas es totalmente considerado por el navegador. Además, le dice al navegador que el documento es un documento HTML. Todas las demás etiquetas entre estas etiquetas solo son consideradas por el navegador.
Sintaxis:
<html> Contenido </html>
3. <cabeza></cabeza>
Esta etiqueta almacena los datos que en realidad no aparecen en la página web, pero brinda más información sobre la página web. O en otras palabras, esta etiqueta se usa para definir la parte principal del documento que contiene la información relacionada con la página web. También contiene etiquetas como, <título>, <meta>, <enlace>, <estilo>, etc.
Sintaxis:
<head> <title> Título de la página web </title></head>
4. <título> </título>
Esta etiqueta almacena el título/nombre de la página web. Cualquier título/contenido que se dé en esta etiqueta, el contenido aparece en la pestaña cuando el navegador lo abre. Se describe en la etiqueta principal.
Sintaxis:
<title> Título de la página web </title>
5. <cuerpo></cuerpo>
Esta etiqueta se utiliza para mostrar toda la información o datos, es decir, texto, imágenes, videos de hipervínculos, etc., en la página web para el usuario. Aquí, todo el contenido, como texto, imágenes, videos de hipervínculos, etc., se incluye entre esta etiqueta.
Sintaxis:
<cuerpo> Contenido </cuerpo>
Algunas otras etiquetas HTML son:
1. <!– comentario –>
Esta etiqueta se utiliza para agregar comentarios en los códigos HTML. Estos comentarios ayudan al programa a comprender el código. El contenido dentro de la etiqueta de comentario no se ve en el navegador.
Sintaxis:
<!–Escribe comentarios aquí –>
2. <meta>
Estas metaetiquetas se utilizan dentro de la etiqueta principal y describen los metadatos, es decir, datos sobre datos. Estas etiquetas son útiles en la optimización de motores de búsqueda, lo que significa que cuando los usuarios buscan nuestros sitios web, las posibilidades de que el navegador recomiende nuestra página web aumentan, lo que conduce a un aumento en el tráfico en la página web. Un único documento HTML puede contener varias etiquetas.
Sintaxis:
<metatributo-nombre=”valor”>
3. <enlace rel =”hoja de estilo” href=”archivo.css “>
Esta etiqueta se utiliza para incluir hojas de estilo externas. Utilice esta etiqueta cuando no desee incluir CSS en el documento HTML. Para hacerlo más simple, creamos un archivo CSS con el código e incluimos este archivo en la etiqueta del enlace.
Sintaxis:
<enlace rel =”hoja de estilo” href=”archivo.css “>
4. <guión></guión>
Se utiliza para incluir código javascript. El javascript externo también se puede vincular mediante el atributo src en la etiqueta del script de apertura. Se puede incluir en la etiqueta de cabeza o cuerpo.
Sintaxis:
<script>contenido del guión</script>
5. Título:
HTML proporciona seis tipos de encabezados, es decir, H1, H2, H3, H4, H5 y H6. Aquí, H1 es el encabezado de nivel más alto y H6 es el encabezado de nivel inferior. Estos encabezados se utilizan para resaltar los temas importantes.
Sintaxis:
<h1> contenido </h1>
<h2> contenido </h2>
<h3> contenido </h3>
<h4> contenido </h4>
<h5> contenido </h5>
<h6> contenido </h6>
Ejemplo 1:
Programa HTML sencillo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <!--The description written on title tag get appeared as browser tab name--> <title>Geeks For Geeks </title> </head> <!-- Whatever content in body tag appears on the webpage--> <body> <h1> Geeks For Geeks </h1> <h3> A computer science portal for geeks </h3> </body> </html>
Producción:
Ejemplo 2:
Programa HTML en el que estamos agregando CSS externo usando la etiqueta <link>
HTML
<!DOCTYPE html> <html lang="en"> <head> <!--Meta data--> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--Including css file with name GFG.css--> <link rel="stylesheet" href="GFG.css"> <!--The description written on title tag get appeared as browser tab name--> <title>Geeks For Geeks </title> </head> <!-- Whatever content in body tag appears on the webpage--> <body> <h1> Geeks For Geeks </h1> <h3> A computer science portal for geeks </h3> </body> </html>
GFG.css
body {
text-align: center;
}
h1{
color: darkgreen;
}
h3{
color:darkgreen;
}:
Producción:
Ejemplo 3:
Programa HTML en el que estamos agregando el archivo javascript GFG.JS usando la etiqueta <script>:
HTML
<!DOCTYPE html> <html lang="en"> <head> <!--Meta data--> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--Including css file with name GFG.css--> <link rel="stylesheet" href="GFG.css"> <!--The description written on title tag get appeared as browser tab name--> <title>Geeks For Geeks </title> </head> <!-- Whatever content in body tag appears on the webpage--> <body> <!--Including JS file with name GFG.JS--> <script src ="GFG.JS"> </script> <h1> Geeks For Geeks </h1> <h3> A computer science portal for geeks </h3> <button onclick="darkMode()"> CLICK ME TO GET DARK MODE</button> </body> </html>
Javascript
function darkMode() {
document.body.style.backgroundColor = "black";
}
Producción:
Al hacer clic en el botón.
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA