Suscríbete a DeepL Pro para poder traducir archivos de mayor tamaño.
Más información disponible en www.DeepL.com/pro.
Explicaciones de HTML en alemán
para principiantes
Ejemplo 1: Enlace simple
En este ejemplo, se crea un enlace en el sitio web.
<body>
<a href="https://google.com/">Ir al google</a>
</body>
¿Qué hace <body>?
La etiqueta <body> es la parte principal de su sitio web. Todo lo que la
gente puede ver pertenece a esta parte, como texto, imágenes o enlaces.
¿Qué hace <a>?
La etiqueta <a> crea un enlace. Es como una puerta por la que se accede
a otro sitio web.
¿Qué significa href?
El href es la clave del enlace. Indica a dónde conduce, es decir, la
dirección del sitio web.
Ejemplo:
-Si escribe https://google.com/ en href, el enlace lleva a Google.
-Si quieres ir a YouTube, tienes que escribir https://www.youtube.com/.
Puedes sustituir simplemente la dirección.
Ejemplo 2: El enlace se abre en una ventana
nueva
Aquí puede especificar que un enlace se abra en una nueva ventana o
pestaña.
<body>
<a href="https://www.google.com/" target="_blank">Ir al
google</a>
</body>
¿Qué significa target="_blank"?
El target="_blank" le dice al navegador: "Abre una nueva ventana o
pestaña cuando alguien haga clic en el enlace".
Esto es útil si desea dejar abierta la página original.
Ejemplo 3: Enlace a una sección de la misma
página
Con este ejemplo puede crear un enlace que no lleve a otra página web,
sino que salte a una parte específica de la misma página.
<html>
<head>
<title>Marcapginas
á en el documento</title>
</head>
<body>
<a href="#sec5">Ir a la seccion 5</a>
<h3>Sección 1</h3>
<p>Texto, texto y más texto.
<h3>Sección 2</h3>
<p>Texto, texto y más texto.
<h3>Sección 3</h3>
<p>Texto, texto y más texto.
<h3>Sección 4</h3>
<p>Texto, texto y más texto.
<h3><a name="sec5">Sección 5</a></h3>
<p>Texto, texto y más texto.
<h3>Sección 6</h3>
<p>Texto, texto y más texto.
<h3>Sección 7</h3>
<p>Texto, texto y más texto.
<h3>Sección 8</h3>
<p>Texto, texto y más texto.
</body>
</html>
¿Cómo funciona?
1.Crea un ancla:
Escriba <a name="sec5"> en la sección de destino. Este atributo "name
marca esta sección.
Piénsalo como un marcapáginas.
2.Enlace al anclaje:
Escriba href="#sec5" en el enlace. El # significa: "Ve a la sección
llamada así".
Si hace clic en él, la página salta directamente a esta sección.
Ejemplo 4: Creación de un enlace de correo
electrónico
Aquí puedes crear un enlace que abra un nuevo correo electrónico para
alguien.
<body>
<a href="mailto:email@domain.com">Mandar Email</a>
</body>
¿Qué significa mailto:?
El mailto: indica al ordenador que debe abrir un programa de correo
electrónico. A continuación se indica la dirección de correo electrónico del
destinatario.
Ejemplo:
Si escribe a mailto:email@domain.com, se le enviará un correo electrónico a
esta dirección.
Ejemplo 5: Creación de un marco
(frameset)
Un "frameset" es como un marco de ventana que puede mostrar diferentes
contenidos uno al lado del otro.
`html <frameset rows="25%,75%"> <noframes>
<body>Su navegador no soporta
frames</ body> </noframes><frame
src="1.html "><frame src="3.html"> </frameset>
¿Qué hace <frameset>?
El <frameset> divide la pantalla en áreas.
-Con rows="25%,75%" se especifica que una zona ocupe el 25% y la otra
el 75% de la pantalla.
¿Qué es <noframes>?
Si el navegador no admite marcos, muestra el texto en la ventana
Etiqueta <noframes>.
Ejemplo 6: Visualización de una página web
en una ventana (IFrame)
Con un "IFrame" puedes incrustar otro sitio web en el tuyo.
<iframe src="https://www.virtualnauta.com" width="100%">
</iframe>
¿Qué es <iframe >?
Un "IFrame" es como una pequeña ventana en tu página.
Puede utilizarlo para mostrar otro sitio web, como
https:// www.virtualnauta.com, dentro de su página.
¿Cómo se puede cambiar el tamaño?
•Escriba width="100%" para que la ventana ocupe todo el ancho.
•También puede utilizar valores fijos como width="800" y
height="600".
para hacerlo más pequeño.
Ejemplo 7: Una imagen como enlace
Aquí se muestra una imagen en la que puede hacer clic para ir a un sitio
web.
<body>
<a href="https://www.google.com/"><img src="../3/R.gif"
height="520" width="780" alt="Img"></a>
</body>
¿Cómo funciona?
•<a>: Creado el enlace.
•<img>: Muestra la imagen.
•Utilice src para especificar dónde se guarda la imagen.
•Puede utilizar la altura y la anchura para cambiar el tamaño de la
imagen.
Ejemplo 8: Texto en movimiento
Con CSS puedes hacer que el texto se mueva en tu página.
html <!DOCTYPE html> <html lang="es">
<head><meta charset="UTF-8 "><meta
name="viewport" content="width=ancho dispositivo, initial-
scale=1.0"><title>Texto en movimiento</title> <style>body
{display :
flex; justify-content: center; alinear-
lementos: centro;altura: 100vh;margen: 0;
color de fondo:
#1a1b26;
.movimiento {font-size: 48px; font-family:
'Segoe UI', 'Helvetica Neue', Arial, sans-serif;font-weight: bold;
olor: #627cff;posición:
relativa; animación: mover 12s lineal infinito;
keyframes mover {0% {left:
100%; }100% { izquierda:
-100%; } }</style> </head> <body>
<div class="movimiento">David Starinski</div> </body> </html>
¿Qué es <style >?
La etiqueta <style> se utiliza para que el documento HTML tenga un
aspecto más agradable.
hacer. Contiene las reglas del diseño, como los colores, los tipos de letra o
las animaciones.
¿Cómo funciona el movimiento?
1.Crear animación:
Con @keyframes se determina cómo debe moverse el texto.
Puede definir las posiciones inicial y final, por ejemplo, de derecha a
izquierda.
•0% (inicio de la animación):
◦Al inicio de la animación, el elemento se encuentra fuera de la
zona visible a la derecha de la pantalla. La página
comienza fuera de la pantalla.
•100% (fin de la animación):
◦Al final de la animación, el elemento ha alcanzado el lado
izquierdo de la pantalla y se desplaza más hacia la izquierda, de
modo que desaparece completamente de la zona visible.
1.Aplicar animación:
Añade la animación a un elemento escribiendo animation: mover 12s
linear infinite;.
◦12s: El movimiento dura 12 segundos.
◦ infinito : el movimiento nunca se detiene.
Ejemplo 9: Mover la imagen arriba y abajo
Aquí, una imagen de Papá Noel, por ejemplo, se mueve arriba y abajo.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=anchura-dispositivo,
escala-inicial=1.0">
<title>Papá Noel Subiendo y Bajando</title>
<style>
cuerpo{
margin: 0;
overflow: hidden;
height: 100vh;
color de fondo: #f0f8ff;
}
.santa {
posición: absoluta;
top: -150px;
left: 20px;
width: 100px;
animación: mover 5s infinite ease-in-out;
}
@keyframes mover {
0% {
arriba: -150px;
} 50%
{
arriba: calc(100vh - 150px);
} 100%
{
arriba: -150px;
}
}
</style>
</head>
<body>
<img src="papa-noel.png" alt="Papá Noel" class="santa">
</body>
</html>
¿Cómo funciona?
1.Usa el estilo:
Con @keyframes se determina el movimiento de arriba a abajo y
viceversa.
•0% (inicio de la animación):
◦Al inicio de la animación, el elemento se sitúa 150 píxeles por
encima del borde superior de la pantalla, de modo que
inicialmente es invisible, ya que se encuentra fuera del área
visible.
•50% (centro de la animación):
◦En el centro de la animación, el elemento se desplaza hacia la
parte inferior de la pantalla. Esto utiliza 100vh (toda la altura del
área visible), pero se utilizan 150 píxeles.
para que el elemento no quede demasiado cerca del borde de la
pantalla.
•100% (fin de la animación):
◦Al final de la animación, el elemento se desplaza de nuevo
hacia arriba para que vuelva a ser invisible, ya que vuelve a
situarse 150 píxeles por encima de la zona visible.
1.Aplicar animación:
Le dices a la imagen: "Muévete por esta ruta" mediante
animación: mover 5s infinite ease-in-out; escribir.
◦ease-in-out: el movimiento empieza despacio, se acelera y
vuelve a terminar despacio.
Fotograma clave:
•@keyframes: Esta regla se utiliza para definir una animación en CSS.
Describe cómo debe cambiar un elemento en diferentes puntos de la
animación.
•top e left: Estas propiedades controlan la posición de un elemento en
la página. top lo mueve verticalmente (arriba o abajo), e left lo
mueve horizontalmente (a la derecha o a la izquierda).
•calc(): Esta función ayuda a realizar cálculos complejos. En este caso,
calcula la posición del elemento en relación con el elemento
Altura de la pantalla.
Con estas animaciones puede hacer que un elemento se mueva por la
pantalla, lo que resulta útil para sitios web interactivos y dinámicos.
