Introducción a HTML
HTML es el lenguaje de marcado estándar para crear páginas web.
¿Qué es HTML?
· HTML significa Lenguaje de Marcado de Hipertexto
· HTML es el lenguaje de marcado estándar para crear páginas web.
· HTML describe la estructura de una página web.
· HTML consta de una serie de elementos
· Los elementos HTML le indican al navegador cómo mostrar el
contenido.
· Los elementos HTML etiquetan fragmentos de contenido como "este es
un encabezado", "este es un párrafo", "este es un enlace", etc.
Un documento HTML simple
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Ejemplo explicado
· La <!DOCTYPE html> declaración define que este documento es un
documento HTML5.
· El <html> elemento es el elemento raíz de una página HTML.
· El <head> elemento contiene metainformación sobre la página HTML.
· Este <title> elemento especifica un título para la página HTML (que
se muestra en la barra de título del navegador o en la pestaña de la
página).
· Este <body> elemento define el cuerpo del documento y sirve de
contenedor para todo el contenido visible, como encabezados,
párrafos, imágenes, hipervínculos, tablas, listas, etc.
· El <h1> elemento define un encabezado grande.
· El <p> elemento define un párrafo
¿Qué es un elemento HTML?
Un elemento HTML se define mediante una etiqueta de inicio, algún
contenido y una etiqueta de cierre:
<tagname> El contenido va aquí ... </tagname>
El elemento HTML es todo, desde la etiqueta de inicio hasta la etiqueta de
cierre:
< h1 > Mi primer encabezado < /h1 >
<p> Mi primer párrafo . </p>
Etiqueta de inicio Contenido del elemento Etiqueta final
<h1> Mi primer encabezado </h1>
<p> Mi primer párrafo </p>
<br> ninguno ninguno
Nota: Algunos elementos HTML no tienen contenido (como el elemento
<br>). Estos elementos se denominan elementos vacíos. ¡Los elementos
vacíos no tienen etiqueta de cierre!
Navegadores web
La finalidad de un navegador web (Chrome, Edge, Firefox, Safari) es leer
documentos HTML y mostrarlos correctamente.
Un navegador no muestra las etiquetas HTML, sino que las utiliza para
determinar cómo mostrar el documento:
Estructura de la página HTML
A continuación se muestra una visualización de la estructura de una página
HTML:
Nota: El contenido dentro de la sección <body> se mostrará en el
navegador. El contenido dentro del elemento <title> se mostrará en la barra
de título del navegador o en la pestaña de la página.
Documentos HTML
Todos los documentos HTML deben comenzar con una declaración de tipo de
documento: <!DOCTYPE html>.
El documento HTML en sí comienza con <html> y termina con </html>.
La parte visible del documento HTML está entre <body> y </body>.
Ejemplo
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
La declaración <!DOCTYPE>
La <!DOCTYPE> declaración representa el tipo de documento y ayuda a los
navegadores a mostrar las páginas web correctamente.
Debe aparecer únicamente una vez, en la parte superior de la página (antes
de cualquier etiqueta HTML).
La <!DOCTYPE> declaración no distingue entre mayúsculas y minúsculas.
La <!DOCTYPE> declaración para HTML5 es:
<!DOCTYPE html>
Encabezados HTML
Los encabezados HTML se definen con las etiquetas <h1><a> <h6>.
<h1>define el encabezado más importante. <h6> define el encabezado
menos importante:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
Párrafos HTML
Los párrafos HTML se definen con la <p> etiqueta:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Enlaces HTML
Los enlaces HTML se definen con la <a>etiqueta:
<a href="[Link] is a link</a>
El destino del enlace se especifica en el href atributo.
Los atributos se utilizan para proporcionar información adicional sobre los
elementos HTML.
Aprenderás más sobre los atributos en un capítulo posterior.
Imágenes HTML
Las imágenes HTML se definen con la <img>etiqueta.
El archivo fuente ( src), el texto alternativo ( alt), widthy heightse
proporcionan como atributos:
<img src="[Link]" alt="[Link]" width="104" height="14
2">
Cómo ver el código fuente HTML
¿Alguna vez has visto una página web y te has preguntado: "¡Oye! ¿Cómo lo
hicieron?"
Ver código fuente HTML:
Pulsa CTRL + U en una página HTML o haz clic con el botón derecho en la
página y selecciona "Ver código fuente". Esto abrirá una nueva pestaña con
el código fuente HTML de la página.
Inspeccionar un elemento HTML:
Haz clic derecho en un elemento (o en un área en blanco) y selecciona
"Inspeccionar" para ver de qué se compone (verás tanto el HTML como el
CSS). También puedes editar el HTML o el CSS sobre la marcha en el panel
Elementos o Estilos que se abre.
Desafío de código
básico HTML
Reto: Conceptos básicos de HTML
Pon a prueba tus conocimientos básicos de HTML completando estos retos
de codificación.
Instrucciones
Dentro del editor, complete los siguientes pasos:
1. Agregue la <!DOCTYPE html>declaración
2. Agregar un <html>elemento
3. Dentro de él, agregue un <body>elemento
4. Dentro del cuerpo, añade un elemento <h1>con el texto "Hola Mundo".
Elementos HTML
El elemento HTML es todo, desde la etiqueta de inicio hasta la etiqueta de
cierre:
<tagname> El contenido va aquí ... </tagname>
Ejemplos de algunos elementos HTML:
< h1 > Mi primer encabezado < /h1 >
<p> Mi primer párrafo . </p>
Etiqueta de inicio Contenido del elemento Etiqueta final
<h1> Mi primer encabezado </h1>
<p> Mi primer párrafo </p>
<br> ninguno ninguno
Nota: Algunos elementos HTML no tienen contenido (como el elemento
<br>). Estos elementos se denominan elementos vacíos. ¡Los elementos
vacíos no tienen etiqueta de cierre!
Elementos HTML anidados
Los elementos HTML pueden estar anidados (esto significa que un elemento
puede contener otro).
Todos los documentos HTML constan de elementos HTML anidados.
El siguiente ejemplo contiene cuatro elementos HTML
( <html>, <body>, <h1> y <p>):
Ejemplo
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>