En este artículo, veremos los conceptos básicos de HTML mediante la comprensión de todo lo básico de la codificación HTML. Hay varias etiquetas que debemos considerar e incluir al comenzar a codificar en HTML. Estas etiquetas ayudan en la organización y el formato básico de elementos en nuestro script o páginas web. Estos procedimientos paso a paso lo guiarán a través del proceso de escritura de HTML.
Documento HTML básico: a continuación se mencionan las etiquetas HTML básicas que dividen todo el documento en varias partes, como cabeza, cuerpo, etc.
- Cada documento HTML comienza con una etiqueta de documento HTML. Aunque esto no es obligatorio, es una buena convención comenzar el documento con esta etiqueta mencionada a continuación. Consulte el artículo HTML Doctypes para obtener más información relacionada con los Doctypes.
<!DOCTYPE html>
- <html> : Cada código HTML debe estar encerrado entre etiquetas HTML básicas. Comienza con <html> y termina conla etiqueta </html> .
- <head> : la etiqueta de encabezado viene a continuación, que contiene toda la información del encabezado de la página web o documentos como el título de la página y otra información diversa. Esta información se incluye dentro de la etiqueta de encabezado que se abre con <head> y termina con </head> . El contenido de esta etiqueta se explicará en las secciones posteriores del curso.
- <title> : Podemos mencionar el título de una página web usando laetiqueta <title> . Esta es información de encabezado y, por lo tanto, se menciona dentro de las etiquetas de encabezado. La etiqueta comienza con <title> y termina con </title>.
- <body> : El siguiente paso es el más importante de todas las etiquetas que hemos aprendido hasta ahora. La etiqueta del cuerpo contiene el cuerpo real de la página que será visible para todos los usuarios. Esto abre con <body> y termina con </body> . Todo el contenido incluido en esta etiqueta se mostrará en la página web, ya sean escritos, imágenes, audio, videos o incluso enlaces. Veremos más adelante en la sección cómo usando varias etiquetas podemos insertar dichos contenidos en nuestras páginas web.
Todo el patrón del código se parecerá al siguiente ejemplo de código.
Ejemplo: Este ejemplo ilustra la estructura básica de HTML .
HTML
<html> <head> <!-- Information about the page --> <!--This is the comment tag--> <title>GeeksforGeeks</title> </head> <body> <!--Contents of the webpage--> </body> </html>
Este código no mostrará nada. Simplemente muestra el patrón básico de cómo escribir el código HTML y nombrará el título de la página como GeeksforGeeks . <! – – comenta aquí – – > es la etiqueta de comentario en HTML y no lee la línea presente dentro de esta etiqueta.
Encabezados HTML : Estas etiquetas nos ayudan a dar encabezados al contenido de una página web. Estas etiquetas se escriben principalmente dentro de la etiqueta del cuerpo. HTML nos proporciona seis etiquetas de encabezado de <h1> a <h6> . Cada etiqueta muestra el encabezado en un estilo y tamaño de fuente diferente.
La mayoría de las etiquetas de encabezado HTML que usamos: –
- Título 1
- Título 2
- Título 3
Ejemplo : este ejemplo ilustra el uso de 6 etiquetas de encabezado de <h1> a <h6> en HTML.
HTML
<html> <head> <title>GeeksforGeeks</title> </head> <body> <h1>Hello GeeksforGeeks</h1> <h2>Hello GeeksforGeeks</h2> <h3>Hello GeeksforGeeks</h3> <h4>Hello GeeksforGeeks</h4> <h5>Hello GeeksforGeeks</h5> <h6>Hello GeeksforGeeks</h6> </body> </html>
Salida :
Encabezados HTML
Párrafo HTML : estas etiquetas nos ayudan a escribir párrafos en una página web. Comienzan con la etiqueta <p> y terminan con </p> .
Salto HTML: estas etiquetas se utilizan para insertar un salto de tipo de línea única. No tiene ninguna etiqueta de cierre. En HTML, la etiqueta de interrupción se escribe como <br>.
Ejemplo : este ejemplo ilustra el uso de la etiqueta <p> para escribir una declaración de párrafo en HTML.
HTML
<html> <head> <title>GeeksforGeeks</title> </head> <body> <h1>Hello GeeksforGeeks</h1> <p> A Computer Science portal for geeks<br> A Computer Science portal for geeks<br> A Computer Science portal for geeks<br> </p> </body> </html>
Salida :
Párrafo HTML
Línea horizontal HTML: la etiqueta <hr> se usa para dividir la página en varias partes, creando márgenes horizontales con la ayuda de una línea horizontal que se extiende desde el lado izquierdo al derecho de la página. Esta también es una etiqueta vacía y no requiere declaraciones adicionales.
Ejemplo : este ejemplo ilustra el uso de la etiqueta <hr> para la línea horizontal en HTML.
HTML
<html> <head> <title>GeeksforGeeks</title> </head> <body> <h1>Hello GeeksforGeeks</h1> <p> A Computer Science portal for geeks<br> A Computer Science portal for geeks<br> A Computer Science portal for geeks<br> </p> <hr> <p> A Computer Science portal for geeks<br> A Computer Science portal for geeks<br> A Computer Science portal for geeks<br> </p> <hr> <p> A Computer Science portal for geeks<br> A Computer Science portal for geeks<br> A Computer Science portal for geeks<br> </p> <hr> </body> </html>
Salida :
Agregando una línea horizontal usando la etiqueta <hr>
Imágenes HTML : La etiqueta de imagen se utiliza para insertar una imagen en nuestra página web. La fuente de la imagen a insertar se coloca dentro de la etiqueta <img src=” source_of_image “> .
La imagen se puede insertar en la etiqueta de imagen en dos formatos: –
- Si la imagen está en la misma carpeta, podemos escribir el nombre de la imagen y el formato como ruta.
- Si la imagen está en otra carpeta, entonces debemos mencionar la ruta de la imagen y el nombre de la imagen, así como el formato de la imagen.
Ejemplo : este ejemplo ilustra el uso de la etiqueta <img> para insertar imágenes en HTML.
HTML
<html> <head> <title>GeeksforGeeks</title> </head> <body> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png"> </body> </html>
Salida :
Agregar imagen usando la etiqueta <img>
Navegadores compatibles:
- Google Chrome 93.0 y superior
- Internet Explorer 11.0
- Microsoft Edge 93.0
- Firefox 92.0 y superior
- Ópera 79.0
- Safari 14.1
También hay varias otras etiquetas en HTML para insertar enlaces, audios y varias otras etiquetas de formato que aprenderemos en las secciones posteriores.
Este artículo es una contribución de Chinmoy Lenka . Si te gusta GeeksforGeeks y te gustaría contribuir, también puedes escribir un artículo usando write.geeksforgeeks.org o enviar tu artículo por correo a review-team@geeksforgeeks.org. Vea su artículo que aparece en la página principal de GeeksforGeeks y ayude a otros Geeks.
Escriba comentarios si encuentra algo incorrecto o si desea compartir más información sobre el tema tratado anteriormente.
HTML es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA