Scribd
Cargar
110 vistas5 páginas

HTML

El documento explica los conceptos básicos de HTML, incluyendo que HTML es un lenguaje de marcado y no de programación, que define la estructura del contenido web mediante elementos como etiquetas, párrafos, encabezados, listas y vínculos. También describe la anatomía básica de un documento HTML y cómo se pueden anidar y combinar diferentes elementos para crear una página web completa.

Cargado por

jylsoluciones empresariales
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
110 vistas5 páginas

HTML

El documento explica los conceptos básicos de HTML, incluyendo que HTML es un lenguaje de marcado y no de programación, que define la estructura del contenido web mediante elementos como etiquetas, párrafos, encabezados, listas y vínculos. También describe la anatomía básica de un documento HTML y cómo se pueden anidar y combinar diferentes elementos para crear una página web completa.

Cargado por

jylsoluciones empresariales
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 5

HTML

El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para estructurar y


desplegar una página web y sus contenidos.

Entonces, ¿qué es HTML en realidad?


HTML no es un lenguaje de programación; es un ​lenguaje de marcado​ que define la
estructura de tu contenido. HTML consiste en una serie de elementos que usarás para
encerrar diferentes partes del contenido para que se vean o se comporten de una
determinada manera.

Anatomía de un elemento HTML

Explora este párrafo en mayor profundidad.

Las partes principales del elemento son:

1. La etiqueta de apertura​: consiste en el nombre del elemento, encerrado por


paréntesis angulares​ (< >) de apertura y cierre. Establece dónde comienza o
empieza a tener efecto el elemento.
2. La etiqueta de cierre​: es igual que la etiqueta de apertura, excepto que incluye una
barra de cierre (/) antes del nombre de la etiqueta. Establece dónde termina el
elemento.
3. El contenido​: este es el contenido del elemento, que en este caso es sólo texto.
4. El elemento​: la etiqueta de apertura, más la etiqueta de cierre, más el contenido
equivale al elemento.

Los elementos pueden también tener atributos, que se ven así:

Los atributos contienen información adicional acerca del elemento, la cual no quieres que
aparezca en el contenido real del elemento. Aquí class es el ​nombre​ del atributo y
editor-note el ​valor​ del atributo. En este caso, el atributo class permite darle al elemento un
nombre identificativo, que se puede utilizar luego para apuntarle al elemento información de
estilo y demás cosas.

Un atributo debe tener siempre:

1. Un espacio entre este y el nombre del elemento (o del atributo previo, si el elemento
ya posee uno o más atributos).
2. El nombre del atributo, seguido por un signo de igual (​=​).
3. Comillas de apertura y de cierre, encerrando el valor del atributo.

Los atributos siempre se incluyen en la etiqueta de apertura de un elemento, nunca en la de


cierre.

Anidar elementos

Puedes también colocar elementos dentro de otros elementos —esto se llama


anidamiento​—. Si, por ejemplo, quieres resaltar una palabra del texto (en el ejemplo la
palabra «muy»), podemos encerrarla en un elemento​ ​<strong>​, que significa que dicha
palabra se debe enfatizar:

<p>En Henry invertimos <strong> en tu educación</strong></p>

Debes asegurarte que los elementos estén correctamente anidados: en el ejemplo de abajo,
creaste la etiqueta de apertura del elemento​ ​<p>​ primero, luego la del elemento​ ​<strong>​,
por lo tanto, debes cerrar esta etiqueta primero, y luego la de <p>. Esto es incorrecto:

<p>En Henry invertimos <strong> en tu educación</p></strong>

Elementos vacíos

Algunos elementos no poseen contenido, y son llamados ​elementos vacíos​. Toma, por
ejemplo, el elemento​ ​<img>​ de nuestro HTML:

<img src="images/henry-icon.png" alt="Mi imagen de prueba">

Posee dos atributos, pero no hay etiqueta de cierre </img> ni contenido encerrado. Esto es
porque un elemento de imagen no encierra contenido al cual afectar. Su propósito es
desplegar una imagen en la página HTML, en el lugar en que aparece.
Anatomía de un documento HTML

Ahora verás cómo los elementos individuales son combinados para formar una página
HTML entera.

Tienes:

● <!DOCTYPE html>​ — el tipo de documento. Es un preámbulo requerido.


Anteriormente, cuando HTML era joven, los tipos de documento actuaban como
vínculos a un conjunto de reglas que el código HTML de la página debía seguir para
ser considerado bueno. Sin embargo, hoy día es simplemente debe ser incluido para
que todo funcione correctamente.
● <html></html> ​— el elemento​ ​<html>​. Este elemento encierra todo el contenido de
la página entera y, a veces, se le conoce como el elemento raíz (​root element​).
● <head></head>​ — el elemento​ ​<head>​. Este elemento actúa como un contenedor
de todo aquello que quieres incluir en la página HTML que ​no​ es contenido visible
por los visitantes de la página. Incluye cosas como palabras clave (​keywords​), una
descripción de la página que quieres que aparezca en resultados de búsquedas,
código CSS para dar estilo al contenido, declaraciones del juego de caracteres, etc.
● <meta charset="utf-8"> ​—​ ​<meta>​. Este elemento establece el juego de caracteres
que tu documento usará en utf-8, que incluye casi todos los caracteres de todos los
idiomas humanos. Básicamente, puede manejar cualquier contenido de texto que
puedas incluir.
● <title></title>​ — el elemento​ ​<title>​ establece el título de tu página, que es el título
que aparece en la pestaña o en la barra de título del navegador cuando la página es
cargada, y se usa para describir la página cuando es añadida a los marcadores o
como favorita.
● <body></body>​ — el elemento​ ​<body>​. Encierra ​todo​ el contenido que deseas
mostrar a los usuarios web que visiten tu página, ya sea texto, imágenes, videos,
juegos, pistas de audio reproducibles, y demás.
Marcado de texto
Encabezados

Los elementos de encabezado permiten especificar que ciertas partes del contenido son
encabezados, o subencabezados del contenido. HTML posee seis niveles de encabezados,
<h1>​–​<h6>​, aunque probablemente solo llegues a usar 3-4 como mucho:

Párrafos

Los elementos​ ​<p>​ se utilizan para encerrar párrafos de texto; los usarás frecuentemente
para el marcado de contenido de texto regular:

Listas

El marcado de listas se realiza siempre en al menos dos elementos. Los dos tipos de listas
más comunes son las listas ordenadas y las desordenadas:

1. Las listas desordenadas​ son aquellas en las que el orden de los items no es
relevante, como en una lista de compras. Estas son encerradas en un elemento​ ​<ul>
(​unordered list)​ .
2. Las listas ordenadas​ son aquellas en las que el orden sí es relevante, como en una
receta. Estas son encerradas en un elemento​ ​<ol>​ (​ordered list)​ .

Cada elemento de la lista se coloca dentro de un elemento​ ​<li>​ ​(list item​).

Por ejemplo, si quieres transformar parte del siguiente párrafo en una lista:

Podrías hacer lo siguiente:


Vínculos
Los vínculos o enlaces son muy importantes —son los que hacen de la web, la web—. Para
implementar un vínculo, necesitas usar un vínculo simple —​ ​<a>​ — la ​a​ es la abreviatura de
la palabra inglesa «anchor» («​ancla​»). Para convertir algún texto dentro de un párrafo en un
vínculo, sigue estos pasos:

1. Elige algún texto.


2. Encierra el texto en un elemento <a>, así:

3. Proporciónale al elemento <a> un atributo href, así:

4. Completa el valor de este atributo con la dirección web con la que quieras conectar
al vínculo:

Podrías obtener resultados inesperados si al comienzo de la dirección web omites la parte


https:// o http:// llamada ​protocolo​.

href podría parecer, en principio, una opción un tanto oscura para un nombre de atributo. Si
tienes problemas para recordarla, recuerda que se refiere a ​hy​ pertext r​ ef​erence​ (referencia
de hipertexto).

También podría gustarte