Comenzando con HTML

Hola Mundo


Introducción

HTML (Hypertext Markup Lidioma) utiliza un sistema de marcado compuesto por elementos que representan contenido específico. Markup significa que con HTML usted declara qué se presenta a un espectador, no cómo se presenta. Las representaciones visuales están definidas por hojas de estilo en cascada (CSS) y realizadas por navegadores. [Todavía existen elementos que permiten tal] 3, como p. font, “son completamente obsoletos y los autores no deben utilizarlos”[1] .

HTML a veces se denomina lenguaje de programación, pero no tiene lógica, por lo que es un lenguaje de marcado. Las etiquetas HTML proporcionan significado semántico y legibilidad automática al contenido de la página.

Un elemento suele constar de una etiqueta de apertura (<nombre_del_elemento>), una etiqueta de cierre (</nombre_del_elemento>), que contienen el nombre del elemento entre corchetes angulares y el contenido intermedio: <nombre_del_elemento>.. .contenido...</element_name>

Hay algunos elementos HTML que no tienen una etiqueta de cierre ni ningún contenido. Estos se llaman elementos vacíos. Los elementos vacíos incluyen <img>, <meta>, <link> y <input>.

Los nombres de los elementos se pueden considerar como palabras clave descriptivas del contenido que contienen, como “video”, “audio”, “tabla”, “pie de página”.

Una página HTML puede constar potencialmente de cientos de elementos que luego son leídos por un navegador web, interpretados y convertidos en contenido audible o legible por humanos en la pantalla.

Para este documento es importante notar la diferencia entre elementos y etiquetas:

Elementos: video, audio, tabla, pie de página

Etiquetas: <video>, <audio>, <tabla>, <pie de página>, </html>, </body>



Conocimiento del elemento

Desglosemos una etiqueta…

La etiqueta <p> representa un párrafo común.

Los elementos suelen tener una etiqueta de apertura y una etiqueta de cierre. La etiqueta de apertura contiene el nombre del elemento entre paréntesis angulares (<p>). La etiqueta de cierre es idéntica a la etiqueta de apertura con la adición de una barra diagonal (/) entre el corchete de apertura y el nombre del elemento (</p>).

El contenido puede ir entre estas dos etiquetas: <p>Este es un párrafo simple.</p>.



Creando una página simple

El siguiente ejemplo de HTML crea una página web simple “Hello World”.

Los archivos HTML se pueden crear utilizando cualquier editor de texto. Los archivos deben guardarse con un .html o .htm[2]</ extensión sup> para ser reconocidos como archivos HTML.

Una vez creado, este archivo se puede abrir en cualquier navegador web.


<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Hello!</title>
    </head>

    <body>
        <h1>Hello World!</h1>
        <p>This is a simple paragraph.</p>
    </body>

</html>



Desglose de página simple

Estas son las etiquetas utilizadas en el ejemplo:

Etiqueta Sentido
<!DOCTYPE> Define la versión HTML utilizada en el documento. En este caso es HTML5.
Consulte el tema de tipos de documentos para obtener más información.
<html> Abre la página. No debe aparecer ningún marcado después de la etiqueta de cierre (</html>). El atributo lang declara el idioma principal de la página utilizando los códigos de idioma ISO (en para inglés).
Consulte el [tema de idioma del contenido](http://stackoverflow.com/ documentation/html/737/content-languages#t=201607221637059314928) para obtener más información.
<cabeza> Abre la sección de encabezado, que no aparece en la ventana principal del navegador pero que contiene principalmente información sobre el documento HTML, llamado metadatos. También puede contener importaciones de hojas de estilo y scripts externos. La etiqueta de cierre es </head>.
<meta> Le da al navegador algunos metadatos sobre el documento. El atributo charset declara la codificación de caracteres. Los documentos HTML modernos siempre deben usar UTF-8, aunque no es un requisito. En HTML, la etiqueta <meta> no requiere una etiqueta de cierre.
Consulte el tema Meta para obtener más información.
<título> El título de la página. El texto escrito entre esta apertura y la etiqueta de cierre (</title>) se mostrará en la pestaña de la página o en la barra de título del navegador.
<cuerpo> Abre la parte del documento que se muestra a los usuarios, es decir, todo el contenido visible o audible de una página. No se debe agregar contenido después de la etiqueta de cierre </body>.
<h1> Un encabezado de nivel 1 para la página.
Consulte encabezados para obtener más información.
<p> Representa un párrafo común de texto.

1. ↑ HTML5, 11.2 Funciones no conformes
2. ↑ .htm se hereda del límite de extensión de archivo de tres caracteres heredado DOS.