CodeGym /Cursos /Frontend SELF ES /Introducción a HTML

Introducción a HTML

Frontend SELF ES
Nivel 1 , Lección 1
Disponible

1. Documento HTML

Como probablemente ya sabes, todos los sitios en internet están hechos de páginas web. También se les llama páginas HTML. Entonces, ¿qué es esta cosa?

Un documento HTML es un archivo de texto que consiste en texto y etiquetas. Las etiquetas fueron inventadas todavía en los años 70 del siglo pasado para que las personas pudieran añadir información de servicio en documentos para programas que procesaban estos documentos.

Una etiqueta es una palabra clave (de servicio), la mayoría de las veces en inglés, que se encierra entre corchetes angulares (los símbolos de 'mayor que' y 'menor que') para que los programas no confundan etiquetas con palabras normales.

Ejemplo:


<img>

Además, una etiqueta puede contener diversa información de servicio que es útil para el programa que procesa el documento.

2. Ejemplo de documento HTML

El programa más popular para trabajar con etiquetas es el navegador. Todo lo que muestra tu navegador es el resultado del procesamiento de etiquetas añadidas dentro de un documento HTML.

Supongamos que el navegador te muestra esta página:

Manul

El manul es un mamífero carnívoro de la familia de los felinos. A simple vista y en tamaño se parece a un gato doméstico, pero se distingue por un torso corto y robusto, patas pequeñas, pupilas redondas, orejas bajas, y además un pelaje largo y denso.

Así es como se vería su documento HTML:

HTML
      
<h1>Manul</h1>
<p> El manul es un mamífero carnívoro de la familia de los felinos. A simple vista y en tamaño se parece a 
<a href="#">gato doméstico</a>, pero se distingue por un torso corto y robusto, 
patas pequeñas, pupilas redondas, orejas bajas, y además un pelaje largo y denso. </p>
<img src="manul.jpg">
      
    

En este ejemplo vemos texto y etiquetas: h1, p, a y img. El navegador reconoce las etiquetas y convierte el texto dentro de las etiquetas en un encabezado, un enlace, además añade una imagen debajo del texto. ¡Es pura magia!

Comentarios
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION