Scribd
Cargar
25 vistas15 páginas

HTML

El documento proporciona una guía sobre las etiquetas HTML, explicando su función y estructura en la creación de páginas web. Se detalla cómo las etiquetas permiten a los navegadores interpretar y mostrar el contenido, además de describir las partes básicas de las etiquetas como elementos, atributos y contenido. También se incluyen ejemplos de etiquetas comunes y su uso, así como actividades prácticas para aprender sobre ellas.

Cargado por

Marisol De La Cruz
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 DOCX, PDF, TXT o lee en línea desde Scribd
25 vistas15 páginas

HTML

El documento proporciona una guía sobre las etiquetas HTML, explicando su función y estructura en la creación de páginas web. Se detalla cómo las etiquetas permiten a los navegadores interpretar y mostrar el contenido, además de describir las partes básicas de las etiquetas como elementos, atributos y contenido. También se incluyen ejemplos de etiquetas comunes y su uso, así como actividades prácticas para aprender sobre ellas.

Cargado por

Marisol De La Cruz
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 DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 15

SECUENCIA DIDACTICA DE INFORMÁTICA

INSTITUCIÓN EDUCATIVA DISTRITAL NUESTRA SEÑORA DE LAS NIEVES


Lic. De Funcionamiento N° 008001003386 De 17 DE MARZO 2003 Nit. 802004411-1

ETIQUETAS HTML

Las etiquetas HTML son bloques de código que dan formato, funcionalidad y estructura al contenido
de las páginas web. Estos fragmentos sirven como indicadores o instrucciones para que un navegador
muestre de forma adecuada la información contenida en tus documentos.

Es importante mencionar que el HTML no se considera un lenguaje de programación, pues no crea


funciones dinámicas. No obstante, con el apoyo de las etiquetas HTML, los desarrolladores pueden
configurar diversas estructuras para sus sitios web; por ejemplo: secciones, tablas, párrafos, enlaces y
atributos.

Actualmente existen muchas etiquetas HTML disponibles que pueden ayudarte a crear varios aspectos
de tu sitio web. En esta ocasión te hablaremos de las más básicas que debes conocer. Pero antes,
ahondemos un poco más en la funcionalidad de estos elementos.

Para qué sirven las etiquetas HTML

Las etiquetas HTML son un estándar adoptado por todos los desarrolladores que —mediante etiquetas
de texto— les permite a los navegadores interpretar los elementos de una página web sin importar en
dónde, cuándo o en qué idioma fue creada, con la finalidad de mostrar el contenido a los usuarios.

En otras palabras, las etiquetas HTML determinan cómo se verá un sitio web. Cada una indica y
representa un atributo que los navegadores deben interpretar y mostrar al usuario cuando visita
cualquier sitio en internet.

Cómo funcionan las etiquetas HTML

Gracias a las etiquetas de HTML, la construcción de una página puede ser entendida por máquinas y
humanos, pues el código se basa en la descripción de los elementos que la componen. Lo mejor de todo
es que son accesibles y sencillas de aprender, por lo que no necesitas ser un experto o experta en
desarrollo web para insertar imágenes, videos, enlaces, documentos o dar un formato enriquecido a tus
contenidos.

Cuando tienes acceso a la estructura de una página web, reconocerás las etiquetas de HTML de
inmediato, pues están escritas entre estos signos: <tipo-de-etiqueta>texto</tipo-de-etiqueta>. La
primera parte encerrada entre signos es la apertura de la etiqueta, y la segunda, que cuenta con una
diagonal, indica el cierre de esa etiqueta. Esto sirve para indicarle al navegador la porción de texto que
deberá modificarse por dicha indicación. Si se trata de una imagen, un salto de línea o video no es
necesario señalar el cierre, pero eso lo hablaremos adelante.

Por otro lado, todas las páginas web que utilizan este lenguaje lo indican desde la primera etiqueta, al
inicio, y luce así: <HTML>. Al pie de esa página, se muestra la de cierre: </HTML>.

Partes básicas de las etiquetas HTML


SECUENCIA DIDACTICA DE INFORMÁTICA
INSTITUCIÓN EDUCATIVA DISTRITAL NUESTRA SEÑORA DE LAS NIEVES
Lic. De Funcionamiento N° 008001003386 De 17 DE MARZO 2003 Nit. 802004411-1
Para comprender, a grandes rasgos, lo que son las etiquetas HTML te mostramos cuáles son sus partes
básicas y para qué sirve cada una:

 Elemento: Es el nombre de la etiqueta, generalmente pareada (es decir: con apertura y cierre,
como lo acabamos de mencionar), y aparece entre los signos de apertura. Por ejemplo:
<title>Partes básicas de etiquetas HTML</title>, que indica que esa frase es un título.

 Atributo: Es lo que diferencia a un elemento y que le da ciertas características, como tamaño,


color, tipo de fuente. Se escribe antes del signo de igual (=), junto al elemento de la etiqueta,
únicamente en la apertura y antes de la variable. Por ejemplo: <font face="Arial">. Este texto
aparecerá en tipografía Arial</font>. El atributo es el tipo letra, es decir: face.
 Contenido: Es el texto que modifica las etiquetas, lo que aparece entre las etiquetas y atributos.
 Variable: Es la característica del atributo de una etiqueta: color, tamaño, tipo de letra, y se
escribe generalmente entrecomillado después del signo de igual. En el ejemplo de atributo, la
variable es Arial.

MOMENTO DE PRACTICAR

Actividad.

1. Ingresa al blog tecnologiaeinformaticanievista.blogspot.com


2. Consulta en el blog escolar las funciones de las siguientes etiquetas

<!doctype>, <html> </html>, <head> </head>, <title> </title>, <body> </body>, <h1> ... <h6>

<p> </p>, <font> </font>, <strong> </strong>, <em> </em>, <u> </u>, <sub> </sub>, <a> </a>

<sup> </sup>, <br>, <nobr>, <p align="..."> </p>, <ul> </ul>, , <ol> </ol>, <li> </li> , <img>

2. Abre el enlace Practica de etiquetas y realiza los pasos ahí indicados.

Enviar evidencias del trabajo al correo [email protected] o muestra en tu Pc


SECUENCIA DIDACTICA DE INFORMÁTICA
INSTITUCIÓN EDUCATIVA DISTRITAL NUESTRA SEÑORA DE LAS NIEVES
Lic. De Funcionamiento N° 008001003386 De 17 DE MARZO 2003 Nit. 802004411-1

ETIQUETAS HTML

1. <!doctype> 9. <strong> 16. <p align="...">


2. <html> </html> </strong> </p>
3. <head> </head> 10. <em> </em> 17. <ul> </ul>
4. <title> </title> 11. <u> </u> 18. <ol> </ol>
5. <body> </body> 12. <sub> </sub> 19. <li> </li>
6. <h1> ... <h6> 13. <sup> </sup> 20. <a> </a>
7. <p> </p> 14. <br> 21. <img>
8. <font> </font> 15. <nobr>

<!doctype>

Existen etiquetas HTML para indicar el lenguaje en que está configurado el texto. Estas
determinan la manera en que el navegador debe procesar el documento.

Ejemplo de etiqueta HTML para indicar tipo de lenguaje

La etiqueta <!doctype> informa al navegador qué versión se usó de HTML o XML para
escribir el documento. Se agrega siempre al inicio del documento y no debe olvidarse nunca,
pues es una información clave que necesitan los navegadores o cualquier otra herramienta
para procesar el documento.

<html> </html>

Este tipo de etiquetas HTML definen el documento entero de una página y el resto de los
elementos descenderán de ellas.

Ejemplo de etiqueta HTML para indicar la raíz del documento

Estas son una de las etiquetas HTML más familiares: <html>...</html>; si bien la primera
puede ser implícita, es esencial para abrir y cerrar cualquier documento en HTML.
SECUENCIA DIDACTICA DE INFORMÁTICA
INSTITUCIÓN EDUCATIVA DISTRITAL NUESTRA SEÑORA DE LAS NIEVES
Lic. De Funcionamiento N° 008001003386 De 17 DE MARZO 2003 Nit. 802004411-1

<head> </head>

Dentro de estas etiquetas se encuentra la información sobre el documento que no se muestra al


usuario. Ahí se puede encontrar el título que tendrá la pestaña de la página web, los metadatos de la
autoría o la licencia.

Ejemplo de etiqueta HTML para indicar información general del documento

Las etiquetas HTML <head> y </head> brindan todo tipo de información conocida como metadatos,
donde se incluyen títulos, párrafos, enlaces, entre otros. Para incluir metadatos y metatítulos claros
en tu código puedes utilizar un generador de metadescripciones; esto hará más sencillo tu proceso de
escritura y, además, te ayudará a elevar tu tasa de clickthrough.

<title> </title>

Sirve para indicar el título del documento y la forma en que aparecerá en la barra del navegador y
en la pestaña en la que esté abierta. No es el título del texto, sino de la página, y se incluye junto a
la etiqueta de <head>.

Ejemplo de etiqueta HTML para indicar el título del documento

Las etiquetas HTML <title> y </title> son utilizadas para indicar el título del documento y se
componen únicamente por texto.

<body> </body>

Las etiquetas HTML que señalan el cuerpo del documento sirven para agregar diversos atributos
de color o imagen de fondo de página, color de enlaces, color de texto, entre otros.

Ejemplo de etiqueta HTML para indicar el cuerpo del documento

Una vez que se cierra el contenido con la etiqueta </head>, las etiquetas de <body> y
</body> abren y cierran el texto, como si se tratara de los límites del contenido que se muestra en
la página web y que puede ver el usuario. Para establecer un símil con un libro, esta etiqueta indica
dónde inicia la primera línea y dónde termina la última de una página.
SECUENCIA DIDACTICA DE INFORMÁTICA
INSTITUCIÓN EDUCATIVA DISTRITAL NUESTRA SEÑORA DE LAS NIEVES
Lic. De Funcionamiento N° 008001003386 De 17 DE MARZO 2003 Nit. 802004411-1

<h1> ... <h6>

Con las etiquetas indicas los títulos y subtítulos de un texto, en diferentes tamaños, según su nivel
de importancia.

Ejemplo de etiqueta HTML para indicar el título y subtítulo del documento

Las etiquetas pueden ir desde <h1>...</h1> a <h6>...</h6>. El <h1> es el más grande y debería
dedicarse al título del texto. En el caso de una de nuestras publicaciones de blog, ese lugar le
corresponde al que resaltamos:

<p> </p>

Con estas etiquetas HTML puedes indicar dónde empieza y termina cada párrafo de texto, para que
los bloques de información no aparezcan como una lista larga sin pausas. Es decir, agrega un salto de
línea entre párrafos.

Ejemplo de etiqueta HTML para indicar el párrafo del documento

Las etiquetas <p> y </p> sirven para crear los párrafos y dentro de ellas también se indican
atributos específicos, como la alineación del texto, ya sea izquierda, derecha, centrada o
justificada.

Así lucen las etiquetas de párrafo que inciden en el segundo párrafo. Lo puedes leer en esta nota
del diario El País, y es la razón por la que está separado del primero y el tercero:
SECUENCIA DIDACTICA DE INFORMÁTICA
INSTITUCIÓN EDUCATIVA DISTRITAL NUESTRA SEÑORA DE LAS NIEVES
Lic. De Funcionamiento N° 008001003386 De 17 DE MARZO 2003 Nit. 802004411-1

<font> </font>

Esta etiqueta básica sirve para indicar la fuente que se utilizará en una selección de texto. Por sí
sola no funciona, pues necesita atributos y variables que indiquen cuál tipografía será, tamaño y
colores.

Ejemplo de etiqueta HTML para indicar la fuente del documento

Las etiquetas de <font> y </font> señalan el tamaño, color o fuente del documento. Por ejemplo, si
debes indicar la fuente, la etiqueta se escribe así:

Para que aparezca en otro color, puedes utilizar como variable el código hexadecimal o el RGB,
según prefieras. Si te inclinas por uno de los colores básicos, solo escribe su nombre en inglés:

Para cambiar el tamaño de la fuente, pero sin marcar que es un título o subtítulo que cambia de tema,
puedes elegir entre el 1 y 7. El número base es 3, para que te des una idea:
SECUENCIA DIDACTICA DE INFORMÁTICA
INSTITUCIÓN EDUCATIVA DISTRITAL NUESTRA SEÑORA DE LAS NIEVES
Lic. De Funcionamiento N° 008001003386 De 17 DE MARZO 2003 Nit. 802004411-1

<strong> </strong>

Con estas etiquetas conviertes a negritas el texto señalado para destacar una idea o un concepto.

Ejemplo de etiqueta HTML para indicar texto en negritas del documento

Las etiquetas <strong> y </strong> cumplen esta función, aunque también puedes utilizar: <b>
y </b>, que se refieren al término «bold», como lo hacen los creadores de tipografías.

<em> </em>

Similar a las etiquetas para indicar negritas en el texto, estas sirven cuando necesitas convertir en
cursivas una porción de texto.

Ejemplo de etiqueta HTML para indicar texto en cursiva del documento

Las etiquetas <em> y </em> cumplen esta función. Otra variante es <i>...</i>, pero la primera se
utiliza más.

<u> </u>

Estas etiquetas HTML sirven para subrayar un texto que no tendrá hipervínculo. Ejemplo de

etiqueta HTML para subrayar texto del documento

Las etiquetas más utilizadas son <u>...</u>.

<sub> </sub>
SECUENCIA DIDACTICA DE INFORMÁTICA
INSTITUCIÓN EDUCATIVA DISTRITAL NUESTRA SEÑORA DE LAS NIEVES
Lic. De Funcionamiento N° 008001003386 De 17 DE MARZO 2003 Nit. 802004411-1

Estas etiquetas son funcionales sobre todo al compartir un texto que tiene llamados de citas a pie de
página, ya que el subíndice ayuda a enumerarlas correctamente, o cuando se escribe un artículo
científico. Con esta etiqueta podrás alinear el llamado en la parte baja de la línea de texto a la que
acompaña.

Ejemplo de etiqueta HTML para agregar un subíndice al documento

Si requieres definir un fragmento de texto haz uso de las etiquetas <sub> y </sub>.

<sup> </sup>

Estas etiquetas muestran un fragmento de texto que, por razones tipográficas, debe mostrarse más
alto, pero más pequeño que el tramo principal del texto general. A esto se le conoce como
superíndice. También se usa para agregar una marca que lleve a una nota a pie de página, como
una aclaración o un dato legal de la información que compartes.

Ejemplo de etiqueta HTML para agregar un superíndice al documento

Si necesitas agregar un dato legal o cualquier otro de los elementos destacados arriba, necesitas las
etiquetas <sup> y </sup> para que el llamado aparezca, más pequeño que el texto al que
acompaña, en la parte superior del renglón.

<br>

Esta etiqueta es tu aliada para indicar que deseas agregar un salto de línea, ya que no le agrega
formato a un texto. No se necesita señalar el cierre, solo la apertura. Es muy útil cuando deseas que
la línea se corte en cualquier punto, de manera que, si lo considera necesario, el navegador
agregará una barra de deslizado vertical.

Ejemplo de etiqueta HTML para agregar un salto de línea al documento

El periódico argentino Página 12 utiliza la etiqueta <br> en uno de sus artículos, para que el lector
pueda visualizar un salto de párrafo más amplio.
SECUENCIA DIDACTICA DE INFORMÁTICA
INSTITUCIÓN EDUCATIVA DISTRITAL NUESTRA SEÑORA DE LAS NIEVES
Lic. De Funcionamiento N° 008001003386 De 17 DE MARZO 2003 Nit. 802004411-1

<nobr>

Si, por el contrario, quieres que el contenido se extienda horizontalmente, sin romper líneas de texto,
indícalo con esta etiqueta al inicio. Así, el lector podrá avanzar hacia la derecha gracias al cursor que
el navegador agregará de forma horizontal.

Ejemplo de etiqueta HTML para impedir agregar un salto de línea al documento

La etiqueta <nobr> cumple esta función, pero ,debido a que no es tan amigable para la lectura, te
recomendamos que no la utilices mucho.

<P align="..."> </p>

La combinación de esta esta etiqueta junto con un atributo y variable te permite alinear tu párrafo
en la dirección que prefieras. Solo debes cambiar la variable, que está entre comillas, según lo que
quieras: left (izquierda), right (derecha), center (al centro)
o justify(para justificar el texto).

Ejemplo de etiqueta HTML para alinear párrafo del documento

Las siguientes etiquetas <P align="..."> y </P> te servirán para alinear tu párrafo: solo debes
señalar hacia dónde lo quieres. Como puedes intuir, está pensada para párrafos completos. Pero
cuando desees hacerlo solo para líneas de texto, de forma independiente, cambia la P por DIV.

<ul> </ul>

Si necesitas agregar una lista que solo tendrá viñetas, es decir, que no tiene que enumerarse, utiliza
esta etiqueta.

Ejemplo de etiqueta HTML para crear listas en el documento

Las etiquetas <ul> y </ul> harán que lo que escribas entre los elementos (que están entre los
signos) se acompañe por un punto a la izquierda.
SECUENCIA DIDACTICA DE INFORMÁTICA
INSTITUCIÓN EDUCATIVA DISTRITAL NUESTRA SEÑORA DE LAS NIEVES
Lic. De Funcionamiento N° 008001003386 De 17 DE MARZO 2003 Nit. 802004411-1

1. <ol> </ol>

En cambio, si quieres que los elementos de la lista aparezcan enumerados en orden ascendente,
esta es la etiqueta correcta.

Ejemplo de etiqueta HTML para crear listas numeradas en el documento

Al igual que el ejemplo anterior, solo haz uso de las etiquetas HTML de <ol> y </ol> y obtendrás
listas con numeración.

2. <li> </li>

En contexto con el ejemplo anterior, cada uno de los elementos de una lista debe escribirse con una
etiqueta especial, no importa si serán numerados o no.

Ejemplo de etiqueta HTML para listar elementos en el documento

En un artículo de nuestro blog donde se mencionan ideas en lista, hacemos uso de las etiquetas
<li> y </li>.

3. <a> </a>

Para agregar hipervínculos que llevan a otros documentos, hay una etiqueta general que indica al
navegador que, cuando se haga clic al enlace, este debe abrirse en la misma ventana.

Ejemplo de etiqueta HTML para agregar hipervínculo al documento


SECUENCIA DIDACTICA DE INFORMÁTICA
INSTITUCIÓN EDUCATIVA DISTRITAL NUESTRA SEÑORA DE LAS NIEVES
Lic. De Funcionamiento N° 008001003386 De 17 DE MARZO 2003 Nit. 802004411-1

La etiqueta <a href="destino"> y su cierre </a> cumplen este objetivo. «Destino» es el enlace
a donde llevará a los visitantes, y los puntos suspensivos son el texto que se convertirá en el
hipervínculo.

El código de una página de Buzzfeed nos indica dónde agregaron un enlace y sobre cuál
texto:

Si quieres que el enlace se abra en una ventana nueva, toma este modelo: <a href="destino"
target="_blank">...</a>

Por supuesto, además de las páginas de otros que deseamos vincular, existen otros elementos
externos que pueden enlazarse en tus contenidos, como correos y servidores FTP. También
están los locales (dentro del mismo directorio) o los que se conocen como ancla. Estos
últimos son muy útiles para leer un texto amplio, con diferentes secciones a las que se puede
«brincar» haciendo clic en una lista de títulos y subtítulos, en lugar de mover el cursor
durante horas.

4. <img>

Hay una etiqueta HTML muy básica que te ayuda a incluir imágenes en tu documento, con la
cual también podrás agregar ciertos atributos para una mejor experiencia de usuario.

Ejemplo de etiqueta HTML para agregar imágenes al documento

La etiqueta <img> es la que debes utilizar, pero junto con ella también debes agregar el
atributo src («source», u «origen» en español), porque es el que indica la ruta en donde se
encuentra la imagen. Esta puede estar en el mismo directorio HTML que tu texto o en una
URL. Te recomendamos que sea la primera opción, porque al elegir una que está alojada de
manera externa pondrás a tu servidor a buscar el enlace cada vez que alguien abra la página.

Así que, siguiendo el ejemplo de una imagen que está dentro del mismo directorio HTML,
tendría que escribirse así:

Si está en un subdirectorio, se indica de esta manera:

Y cuando se trata de una URL:


SECUENCIA DIDACTICA DE INFORMÁTICA
INSTITUCIÓN EDUCATIVA DISTRITAL NUESTRA SEÑORA DE LAS NIEVES
Lic. De Funcionamiento N° 008001003386 De 17 DE MARZO 2003 Nit. 802004411-1

Este es un ejemplo real que corresponde a dos imágenes que aparecen en otro artículo de
HubSpot:

Al igual que la etiqueta HTML <br>, no necesita cierre.


SECUENCIA DIDACTICA DE INFORMÁTICA
INSTITUCIÓN EDUCATIVA DISTRITAL NUESTRA SEÑORA DE LAS NIEVES
Lic. De Funcionamiento N° 008001003386 De 17 DE MARZO 2003 Nit. 802004411-1

PRÁCTICA 1: Plantilla

Nuestro primer ejercicio consiste en diseñar una plantilla de documento HTML para iniciar
rápidamente todas nuestras páginas y ahorrarnos escribir los elementos mínimos de una página.
1) Para comenzar a escribir un código, podemos utilizar un editor de texto cualquiera, por ejemplo Bloc de
notas.
2) Como cualquier página HTML, constará de la cabecera y el cuerpo del documento, ambas partes
situadas entre la etiqueta de apertura <html> y su análoga de cierre </html>.
3) La cabecera del documento sería:
<html>
<head>
<title>plantilla</title>
</head>
El cuerpo del documento quedaría como el siguiente:
<body>
<!--etiquetas que forman el cuerpo-->
Esta pagina es la primera que hacemos.
</body>
4) Por último, terminaremos con la etiqueta de finalización de un documento html, </html>.
5) Guardaremos el documento con el nombre “Practica” y la extensión .html . “practica.html”
6) Por lo tanto el documento completo será:
<html>
<head>
<title>plantilla</title>
</head>
<body>
<!--etiquetas que forman el cuerpo-->
Esta página es la primera que hacemos.
</body>
</html>
SECUENCIA DIDACTICA DE INFORMÁTICA
INSTITUCIÓN EDUCATIVA DISTRITAL NUESTRA SEÑORA DE LAS NIEVES
Lic. De Funcionamiento N° 008001003386 De 17 DE MARZO 2003 Nit. 802004411-1

PRÁCTICA 2: Colores
Otro aspecto muy llamativo a la hora de diseñar una página, es el uso de colores. Realiza un
documento html lo más parecido posible a la imagen final.
1) La cabecera del documento junto con la etiqueta de apertura sería:
<html>
<head>
<title>colores</title>
</head>
2) El cuerpo del documento quedaría como el siguiente:
<body style="color: rgb(0, 0, 0); background-color: rgb(122, 122, 122);">
<p style="color: black; font-weight: bold; font-size: xx-large;">#000000 negro</p>
<p style="color: white; font-weight: bold; font-size: xx-large;">#FFFFFF blanco</p>
<p style="color: red; font-weight: bold; font-size: xx-large;">#FF0000 rojo</p>
<p style="color: lime; font-weight: bold; font-size: xx-large;">#00FF00 verde</p>
<p style="color: blue; font-weight: bold; font-size: xx-large;">#0000FF azul</p>
<p style="color: yellow; font-weight: bold; font-size: xx-large;">#FFFF00 amarillo</p>
<p style="color: fuchsia; font-weight: bold; font-size: xx-large;">#FF00FF morado, mezcla
de rojo y azul</p>
</body>
</html>
3) Guardar como practica.html
SECUENCIA DIDACTICA DE INFORMÁTICA
INSTITUCIÓN EDUCATIVA DISTRITAL NUESTRA SEÑORA DE LAS NIEVES
Lic. De Funcionamiento N° 008001003386 De 17 DE MARZO 2003 Nit. 802004411-1

También podría gustarte