Curso HTML | Estructura de un documento HTML

INTRODUCCIÓN

Como todos sabemos, HTML es un lenguaje de la web. Se utiliza para diseñar las páginas web o podemos decir estructurar los diseños de página de un sitio web. HTML significa LENGUAJE DE MARCADO DE HIPERTEXTO, ya que su forma completa sugiere que no es un lenguaje de programación cualquiera, un lenguaje de marcado. Entonces, mientras se ejecuta el código HTML, no podemos enfrentar ningún error de este tipo. En el código HTML real, no se compiló ni interpretó porque el navegador representó el código HTML. que es similar a la compilación de un programa. El contenido HTML se reseca a través del navegador para mostrar el contenido de HTML. 

Navegación del curso 
 

ESTRUCTURA DE DOCUMENTOS HTML

Html usaba etiquetas y atributos predefinidos para decirle al navegador cómo mostrar el contenido, en qué formato, estilo, tamaño de fuente e imágenes mostrar. Html es un lenguaje que no distingue entre mayúsculas y minúsculas. Insensible a mayúsculas y minúsculas significa que no hay diferencia entre mayúsculas y minúsculas (mayúsculas y minúsculas), ambas tratadas como iguales, por ejemplo, ‘D’ y ‘d’ son iguales aquí. 
En general, hay dos tipos de etiquetas en HTML: 
 

  1. Etiquetas emparejadas : estas etiquetas vienen en pares. Es decir, tienen etiquetas tanto de apertura (< >) como de cierre (</ >).
  2. Etiquetas vacías : no es necesario cerrar estas etiquetas.

A continuación se muestra un ejemplo de una etiqueta (<b>) en HTML, que le dice al navegador que ponga en negrita el texto que contiene. 
 

Etiquetas y atributos:  Las etiquetas son individuos de estructura html, tenemos que abrir y cerrar cualquier etiqueta con una barra inclinada como esta <h1> </h1>. Hay algunas variaciones con la etiqueta, algunas de ellas son etiquetas de cierre automático que no es necesario cerrar y otras son etiquetas vacías a las que podemos agregar cualquier atributo. Los atributos son propiedades adicionales de las etiquetas html que definen la propiedad de cualquier etiqueta html. es decir, ancho, alto, controles, bucles, entrada y reproducción automática. Estos atributos también nos ayudan a almacenar información en metaetiquetas mediante el uso de atributos de nombre, contenido y tipo. Documentos html estructurados que se mencionan a continuación: 
 

Estructura de un documento HTML

Un documento HTML se divide principalmente en dos partes: 
 

  • HEAD : Contiene la información sobre el documento HTML. Por Ejemplo, el Título de la página, versión de HTML, Meta Data, etc.
  • CUERPO : Contiene todo lo que desea mostrar en la página web.

Estructura del documento HTML

Veamos ahora la estructura básica de HTML. Ese es el código que toda página web debe tener: 
 

HTML

<!DOCTYPE html> 
<!-- Defines types of documents : Html 5.O  -->
<!DOCTYPE html>
<!-- Defines types of documents : Html 5.O -->
<html lang="en">
    <!-- DEfines languages of content : English -->
    <head>
    <!-- Information about website and creator -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Defines the compatibility of version with browser -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- for make website responsive -->
    <meta name="author" content="Mr.X">
    <meta name="Linkedin profile" content="WWW.linkedin.com/Mr.X_123" >
    <!-- To give information about author or owner -->
    <meta name="description " 
    content="A better place to learn computer science">
    <!-- to explain about website in few words -->
    <title>GeeksforGeeks</title>
    <!-- Name of website or content to display -->
</head>
<body>
    <!-- Main content of website -->
    <h1>GeeksforGeeks</h1>
<p>A computer science portal for geeks</p>
</body>
</html>

Toda página web debe contener este código. A continuación se muestra la explicación completa de cada una de las etiquetas utilizadas en el código HTML anterior:
<!DOCTYPE html>: esta etiqueta se utiliza para indicar la versión HTML. Esto actualmente indica que la versión es HTML 5.0 
<html> </html>: <html> es un elemento raíz de html. Es un elemento más grande y principal en el lenguaje html completo, todas las etiquetas, elementos y atributos encerrados en él o podemos decir wrap init, que se usa para estructurar una página web. La etiqueta <html> es la etiqueta principal de la etiqueta <head> y <body>, otras etiquetas están encerradas dentro de <head> y <body>. En la etiqueta <html> usamos los atributos «lang» para definir los idiomas de la página html, como <html lang=”en”> aquí en representa el idioma inglés. algunos de ellos son :
<head>: la etiqueta Head contiene metadatos, título, página CSS, etc. Los datos almacenados en la etiqueta <head> no se muestran al usuario, solo se escriben como referencia y como una marca de agua del propietario.  

 Note: for better understanding refer above code of html.
 <title> = to store website name or content to be displayed.
 <link>   = To add/ link css( cascading style sheet)  file.
 <meta>   = 1. to store data about website, organisation , 
creator/ owner
            2. for responsive website via attributes 
            3. to tell compatibility of html with browser 
 <script> = to add javascript file. 

<body>: una etiqueta de cuerpo se utiliza para encerrar todos los datos que tiene una página web, desde textos hasta enlaces. Todo el contenido que ve renderizado en el navegador está contenido dentro de este elemento. Siguientes etiquetas y elementos utilizados en el cuerpo.

   1 . <h1> ,<h2> ,<h3> a <h6>
   2. <p>
   3. <div> y <span>
   4. <b>, <i> y <u> 
   5. <li>,<ul >y<ol>. 
   6. <img> , <audio> , <video> y <iframe>
   7. <table> <th> , <thead>and<tr>.  
   8. <formulario> 
   9. <etiqueta> y <entrada> otros……….
Para obtener más información sobre la estructura de un documento HTML, visite
 

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 harsh.agarwal0 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *