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
<!DOCTYPE html>
<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