Documentos HTML
En este capítulo, mostraremos algunos ejemplos básicos de HTML.
Si hay alguna etiqueta que no conoce, no se preocupe, porque la estudiaremos más adelante.
Todos los documentos HTML deben comenzar con una declaración de tipo de documento: <!DOCTYPE html>.
Como ya mencionamos en capítulos anteriores, esto nos indica qué tipo de documento estamos tratando.
Iniciamos el documento con las etiquetas <html>, terminando con la misma etiqueta, pero con una barra inclinada como se muestra a continuación: </html>.
La parte visible del documento se escribe entre las etiquetas <body> y </body>.
Ejemplo
<html>
<body>
<p>Mi primer párrafo.</p>
<h1>Mi Primer Encabezado</h1>
</body>
</html>
Código del ejemplo
<!DOCTYPE html>
<html>
<body>
<p>Mi primer párrafo.</p>
<h1>Mi Primer Encabezado</h1>
</body>
</html>
...
Declaración <!DOCTYPE>
<!DOCTYPE> La declaración representa el tipo de documento y ayuda a los navegadores a mostrar las páginas web correctamente.
Debe aparecer solo una vez, en la parte superior de la página (antes de cualquier etiqueta HTML).
<!DOCTYPE> La declaración no diferencia entre mayúsculas y minúsculas.
Para HTML5, lo escribimos de la siguiente manera:
<!DOCTYPE html>
Código del ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Mi Página</title>
</head>
<body>
<p>Este es un párrafo en un documento HTML.</p>
</body>
</html>
Encabezados en HTML
En HTML existen 6 tipos de encabezados, cada uno con su etiqueta que va desde H1 hasta H6.
H1 es el encabezado principal, siendo el H6 el menor.
Ejemplo de Encabezados
Soy el encabezado H1
Soy el encabezado H2
Soy el encabezado H3
Soy el encabezado H4
Soy el encabezado H5
Soy el encabezado H6
Código del ejemplo
<h1>Soy el encabezado H1</h1>
<h2>Soy el encabezado H2</h2>
<h3>Soy el encabezado H3</h3>
<h4>Soy el encabezado H4</h4>
<h5>Soy el encabezado H5</h5>
<h6>Soy el encabezado H6</h6>
Párrafos HTML
Para escribir un párrafo usamos la etiqueta <p>.
Ejemplo de Párrafos
Soy un párrafo
Soy otro párrafo
Código del ejemplo
<p>Soy un párrafo</p>
<p>Soy otro párrafo</p>
Enlaces en HTML
Los enlaces en HTML se crean utilizando la etiqueta <a>, que es fundamental para la navegación en la web.
Un enlace (o "hipervínculo") conecta un documento con otro, ya sea en la misma página o en un sitio web diferente. Al hacer clic en un enlace, el navegador navega hacia la dirección especificada.
La estructura básica de un enlace en HTML es la siguiente:
Ejemplo de Enlaces
<a href="URL_DEL_DESTINO" target="_blank" rel="noopener noreferrer">Texto del Enlace</a>
<a href="http://google.com" target="_blank" rel="noopener noreferrer">Visitar Google</a>
Código del ejemplo
<a href="URL_DEL_DESTINO" target="_blank" rel="noopener noreferrer">Texto del Enlace</a>
<a href="http://google.com" target="_blank" rel="noopener noreferrer">Visitar Google</a>
Este enlace abrirá Google en una nueva pestaña cuando se haga clic en él.
Los atributos en las etiquetas HTML, como href, proporcionan información adicional sobre cómo debe comportarse o presentarse un elemento. En el caso de los enlaces, los atributos ayudan a definir tanto el destino como el comportamiento del enlace, ofreciendo mayor control sobre la experiencia de usuario.
Imágenes en HTML
Las imágenes son elementos clave en la construcción de páginas web, y en HTML se definen utilizando la etiqueta <img>. Esta etiqueta es única, ya que no requiere una etiqueta de cierre.
El archivo de origen de la imagen se especifica mediante el atributo src (source). Este atributo contiene la URL o la ruta del archivo de imagen que deseas mostrar en la página.
El atributo alt (texto alternativo) proporciona una descripción de la imagen, la cual es útil para mejorar la accesibilidad y para los motores de búsqueda. Este texto se mostrará en caso de que la imagen no se cargue.
Los atributos width (ancho) y height (altura) permiten controlar las dimensiones de la imagen. Pueden expresarse en píxeles (px) o en porcentaje (%), lo que te permite ajustar el tamaño de la imagen de acuerdo con el diseño de tu página.
Ejemplo de Código
<img src="https://cdn.pixabay.com/photo/2020/05/13/01/45/bird-5165485_1280.jpg" alt="Un hermoso pájaro" width="320" height="240">
Código del ejemplo
<img src="https://cdn.pixabay.com/photo/2020/05/13/01/45/bird-5165485_1280.jpg" alt="Un hermoso pájaro" width="320" height="240">
En el ejemplo anterior, la imagen de un pájaro se carga desde la URL proporcionada, con un tamaño especificado de 320 píxeles de ancho y 240 píxeles de alto. El texto alternativo "Un hermoso pájaro" se mostrará si la imagen no se carga.
Cómo ver el código fuente HTML
Para ver el código fuente HTML de una página web:
- En Google Chrome o Firefox, haz clic derecho en cualquier parte de la página.
- Selecciona la opción Ver código fuente en el menú contextual.
- Se abrirá una nueva pestaña o ventana mostrando el HTML de la página.
También puedes usar el atajo de teclado Ctrl + U (o Cmd + Option + U en Mac) para acceder rápidamente al código fuente.
Cómo inspeccionar un elemento HTML
Para inspeccionar un elemento HTML:
- Haz clic derecho en el elemento que deseas inspeccionar.
- Selecciona Inspeccionar o Inspeccionar elemento en el menú contextual.
- Se abrirán las herramientas de desarrollo del navegador, mostrando el HTML y el CSS del elemento seleccionado.
Las herramientas de desarrollo te permiten modificar el HTML y CSS en tiempo real, lo que facilita la prueba y depuración de los cambios en la página.
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias