HTML significa lenguaje de marcado de hipertexto. Es el lenguaje más básico y fácil de aprender y modificar. Es una combinación de hipertexto y lenguaje de marcado. Contiene los elementos que pueden cambiar/desarrollar el aspecto de una página web y los contenidos que se muestran. O podemos decir que HTML crea o define la estructura de las páginas web. Podemos crear sitios web utilizando HTML que se pueden ver en dispositivos conectados a Internet, como computadoras portátiles, teléfonos móviles Android, etc. Fue creado por Tim Berners-Lee en 1991. La primera versión de HTML es HTML 2.0, que se publicó en 1999 y la última versión es HTML 5. Podemos guardar archivos HTML con extensión .html.
¿Qué es Hipertexto?
El texto que no está restringido a un formato secuencial y que incluye enlaces a otro texto se denomina Hipertexto. Los enlaces pueden conectar páginas en línea dentro de un sitio web único o diferente.
¿Qué es el lenguaje de marcado?
Markup Language es un lenguaje que es interpretado por el navegador y define los elementos dentro de un documento usando «etiquetas». Es legible por humanos, lo que significa que los archivos de marcado usan palabras comunes en lugar de la sintaxis complicada de los lenguajes de programación.
¿Por qué usar HTML?
HTML es el primer lenguaje que debes aprender si quieres dedicarte al desarrollo web. HTML es un lenguaje de marcado que se carga rápido y también es liviano. Cada vez que utilice su navegador para ponerse en contacto con un servidor, recibirá una respuesta en forma de HTML y CSS. Muchas etiquetas son compatibles con HTML, lo que hace que su página web sea más atractiva y reconocible. HTML5 ha incorporado recientemente nuevas etiquetas y elementos para ayudar en el desarrollo de páginas web de aspecto profesional.
¿Qué son las etiquetas y los elementos en HTML?
Etiquetas HTML: Las etiquetas HTML son palabras clave especiales que especifican cómo se mostrarán los datos o cómo formatearán los datos los navegadores web. Con las etiquetas, el navegador web puede distinguir en el documento qué es el contenido HTML y cuál es el contenido sin formato normal (ya que las etiquetas siempre se escriben entre corchetes angulares <>). Por lo general, el inicio de las etiquetas viene dado por corchetes angulares <> y el final por corchetes angulares, y / eso es </>.
Ejemplo:
<head></head>
Elemento HTML: la colección de etiquetas de inicio y finalización con el contenido insertado entre ellas se conoce como elemento HTML.
Ejemplo:
<head> I am HTML element </head>
Etiquetas HTML importantes:
- <!DOCTYPE html>: Define el tipo de documento. Aquí define que el tipo de documento es HTML.
- <html> </html>: Es el elemento raíz y todas las demás etiquetas están contenidas en él. Determina el inicio y el final del documento HTML.
- <head> </head>: contiene metadatos del documento HTML y en realidad no se muestra en la página web. El encabezado comienza con <head> y termina con </head>.
- <title> </title>: Se utiliza para crear un título del documento y el título aparece en la barra de título en la parte superior. Al menos un título aparece en cada documento. La parte del título del documento comienza con <título> y termina con </título>, y en el medio, ingrese el texto que desea como título.
- <body> </body>: Contiene el contenido del documento a mostrar en la página web. El contenido puede ser una imagen, algún texto, algunos enlaces, etc. Esta parte representa el cuerpo del documento web, que suele incluir encabezados, texto y párrafos.
- <p>: Se utiliza para definir un párrafo.
- <br>: Se utiliza para un salto de una sola línea.
- <img>: Se utiliza para definir una imagen con una fuente determinada.
- <sup>: Se utiliza para definir datos en superíndice.
- <b>: Se utiliza para definir texto en negrita.
- <sub>: Se utiliza para definir datos subíndice, etc.
Ejemplo 1: Guarde lo siguiente por MyGeeksHtml.html.
HTML
<!DOCTYPE html> <html> <head> <title> Geeksforgeeks webpage</title> </head> <body> My First Geeksforgeeks WebPage <p> I am using paragraph tag </p> Now i am out of paragraph tag No line break <br> I am using line break tag <b> Now using Bold Tag </b> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png" width="200" height="100"> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, usaremos todas las etiquetas de encabezado de <h1> a <h6>.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML</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>
Producción:
Características de HTML:
- Es fácil de aprender y fácil de usar.
- Es independiente de la plataforma.
- Se pueden agregar imágenes, videos y audio a una página web.
- Se puede agregar hipertexto al texto.
- Es un lenguaje de marcas.
¿Por qué aprender HTML?
- Es un lenguaje de marcado simple. Su implementación es fácil.
- Se utiliza para crear un sitio web.
- Ayuda en el desarrollo de los fundamentos de la programación web.
- Impulsar la carrera profesional.
ventajas:
- HTML se utiliza para construir sitios web.
- Es compatible con todos los navegadores.
- Se puede integrar con otros lenguajes como CSS, JavaScript, etc.
Desventajas:
- HTML solo puede crear páginas web estáticas. Para páginas web dinámicas, se deben utilizar otros idiomas.
- Se debe escribir una gran cantidad de código para crear una página web simple.
- La función de seguridad no es buena.
¿Cómo crear un programa HTML?
Para crear un documento HTML, siga los pasos dados:
Paso 1: abre el bloc de notas.
Paso 2: Escriba el código HTML como se muestra en la siguiente imagen:
Paso 3: Guarde el documento haciendo clic en el archivo (en la parte superior) y seleccionando guardar como.
Paso 4: Selecciona el destino donde quieres guardar el documento HTML y dale el nombre al documento y usa la extensión .html. Ejemplo: Geeks.html
Paso 5: Haga clic en Guardar.
Paso 6: Su archivo se guardará con un icono en el navegador web.
Paso 7: Haga doble clic en el archivo para ejecutarlo.
Guardará que la página web se abrirá en el mismo navegador cuyo icono se mostró con el nombre del documento después de guardarlo.
Verá que aparece una ventana del navegador y la página que se muestra será:
Ejemplos de preguntas:
Pregunta 1. Compara las etiquetas <p> y <br>.
Solución: la etiqueta <br> se usa para saltos de una sola línea, mientras que <p> se usa para definir un párrafo. Aunque la etiqueta <br> inserta una línea, no se agrega espacio adicional antes de la línea, mientras que en <p> se agrega espacio adicional antes y después del texto del párrafo.
Pregunta 2. ¿Qué es una etiqueta vacía?
Solución: en HTML, los elementos suelen tener etiquetas de inicio y finalización. Pero cuando usamos solo la etiqueta de inicio y no la final, se llama etiqueta vacía. Ejemplo: <br>. Las etiquetas vacías no pueden contener otras etiquetas dentro de sí mismas.
Pregunta 3. ¿Qué etiqueta se usa para agregar una imagen en el fondo?
Solución: en la etiqueta <body> (después de la etiqueta <head>), puede agregar un atributo de fondo para insertar una imagen en el fondo como se muestra:
<body background = "myimage.gif">
Tienes que dar la fuente (ruta completa) de la imagen aquí.
Pregunta 4. Proporcione los nombres de los formatos de video compatibles con HTML5.
Solución: Los nombres de los formatos de video compatibles con HTML5 son: ogg, webM y mp4.
Pregunta 5. ¿Cómo puedes agregar el texto: (x 1 ) 2 = 9 en el cuerpo de la página HTML?
Solución: use el siguiente código HTML:
HTML
<!DOCTYPE html> <html> <head> <title> Geeksforgeeks webpage</title> </head> <body> (x<sub>1</sub>) <sup>2</sup> = 9 </body> </html>
Publicación traducida automáticamente
Artículo escrito por sameekshakhandelwal1712 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA