HTML
<img alt="Descripción de la imagen" src="elephants.jpg" />
CSS
.myImage {
background-image: url("elephants.jpg");
}
insertar imagen con HTML o CSS
Cómo Hacer Comentarios en HTML
Cómo Hacer Comentarios en HTML
Los comentarios en HTML son elementos que se utilizan para dejar notas o anotaciones dentro del código que no se muestran en la página web al ser renderizada por el navegador. Estos comentarios son útiles para documentar el código, explicar secciones específicas, o desactivar temporalmente partes del código sin eliminarlas.
¿Cómo se Escribe un Comentario en HTML?
Para escribir un comentario en HTML, se utiliza la siguiente sintaxis:
<!-- Este es un comentario -->
Todo el texto que se encuentra entre <!-- y --> se considera un comentario y no será visible en la página web.
Ejemplos de Uso
Ejemplo 1: Comentario Simple
En este ejemplo, se añade un comentario para explicar una sección del código HTML:
<!-- Aquí comienza la sección de la cabecera --> <header> <h1>Bienvenido a mi sitio web</h1> </header>
El comentario <!-- Aquí comienza la sección de la cabecera --> ayuda a entender la función del código que sigue.
Ejemplo 2: Desactivar Código Temporalmente
Los comentarios también se pueden usar para desactivar temporalmente una parte del código sin borrarla:
<!--
<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="about.html">Acerca de</a></li>
<li><a href="contact.html">Contacto</a></li>
</ul>
</nav>
-->
En este caso, el bloque de código dentro del comentario no se mostrará en la página web.
Importancia de los Comentarios en HTML
Utilizar comentarios en HTML es una buena práctica que facilita el mantenimiento y la comprensión del código. Son especialmente útiles cuando se trabaja en equipo, ya que permiten a otros desarrolladores entender rápidamente la estructura y propósito del código.
Consideraciones
- Los comentarios no deben contener el símbolo
--dentro de ellos, ya que esto puede causar errores. - No es recomendable usar comentarios excesivos, ya que pueden hacer que el código sea difícil de leer.
Conclusión
Los comentarios en HTML son una herramienta fundamental para documentar, explicar y manejar el código de manera eficiente. Aprender a utilizarlos correctamente te ayudará a escribir código más claro y mantenible.
TEXT COLOR FADE [ RECOMENDACION ]
una pagina que recomiendo para texto degradado que también uso arto, del autor: patorjkes
TEXT COLOR FADE, tiene una interfaz básica pero simple para poner el texto que quieras para poderlo degradar y lo convierte al lenguaje que quieras, en mi caso seria mas para HTML.
PRUEBA:
TEXTO DE PRUEBAS!
TEXTO DE PRUEBAS!
TEXTO DE PRUEBAS!
TEXTO DE PRUEBAS! :D
PLANTILLA ANIMACION SUAVE ASCII HTML
PLANTILLA ANIMACION SUAVE ASCII
Esto es una plantilla de animacion ascii suave puesto los caracteres son mas basicos y usa los const frames con carasteristica " ` "
CODIGO:
<!DOCTYPE html>
<html lang="en">
<!-- PLANTILLA ANIMACION TIPO ASCII POCO FORMATO V1 -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ASCII Art Person Animation</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
color: #0f0;
font-family: monospace;
font-size: 16px;
}
.person {
width: 600px; /* Ancho fijo del contenedor */
white-space: pre;
line-height: 1.2;
text-align: center; /* Centrar horizontalmente */
}
</style>
</head>
<body>
<div class="person" id="person"></div>
<script>
// Define tus diferentes frames usando elementos <pre>
const frames = [
`
⠀⠀⠀⠀⠀⠀⢀⣤⣶⣶⣖⣦⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢀⣾⡟⣉⣽⣿⢿⡿⣿⣿⣆⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢠⣿⣿⣿⡗⠋⠙⡿⣷⢌⣿⣿⠀⠀⠀⠀⠀⠀⠀
⣷⣄⣀⣿⣿⣿⣿⣷⣦⣤⣾⣿⣿⣿⡿⠀⠀⠀⠀⠀⠀⠀
⠈⠙⠛⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧⡀⠀⢀⠀⠀⠀⠀
⠀⠀⠀⠸⣿⣿⣿⣿⣿⣿⣿⣿⣿⡟⠻⠿⠿⠋⠀⠀⠀⠀
⠀⠀⠀⠀⠹⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠈⢿⣿⣿⣿⣿⣿⣿⣇⠀⠀⠀⠀⠀⠀⠀⡄
⠀⠀⠀⠀⠀⠀⠀⠙⢿⣿⣿⣿⣿⣿⣆⠀⠀⠀⠀⢀⡾⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠻⣿⣿⣿⣿⣷⣶⣴⣾⠏⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠛⠛⠛⠋⠁⠀⠀⠀
`,
`
⠀⠀⠀⠀⠀⠀⢀⣤⣶⣶⣖⣦⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢀⣾⡟⣉⣽⣿⢿⡿⣿⣿⣆⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢠⣿⣿⣿⡗⠋⠙⡿⣷⢌⣿⣿⠀⠀⠀⠀⠀⠀⠀
⣷⣄⣀⣿⣿⣿⣿⣷⣦⣤⣾⣿⣿⣿⡿⠀⠀⠀⠀⠀⠀⠀
⠈⠙⠛⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧⡀⠀⢀⠀⠀⠀⠀
⠀⠀⠀⠸⣿⣿⣿⣿⣿⣿⣿⣿⣿⡟⠻⠿⠿⠋⠀⠀⠀⠀
⠀⠀⠀⠀⠹⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠈⢿⣿⣿⣿⣿⣿⣿⣇⠀⠀⠀⠀⠀⠀⠀⡄
⠀⠀⠀⠀⠀⠀⠀⠙⢿⣿⣿⣿⣿⣿⣆⠀⠀⠀⠀⢀⡾⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠻⣿⣿⣿⣿⣷⣶⣴⣾⠏⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠛⠛⠛⠋⠁⠀⠀⠀
`,
`
⠀⠀⠀⠀⠀⠀⢀⣤⣶⣶⣖⣦⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢀⣾⡟⣉⣽⣿⢿⡿⣿⣿⣆⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢠⣿⣿⣿⡗⠋⠙⡿⣷⢌⣿⣿⠀⠀⠀⠀⠀⠀⠀
⣷⣄⣀⣿⣿⣿⣿⣷⣦⣤⣾⣿⣿⣿⡿⠀⠀⠀⠀⠀⠀⠀
⠈⠙⠛⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧⡀⠀⢀⠀⠀⠀⠀
⠀⠀⠀⠸⣿⣿⣿⣿⣿⣿⣿⣿⣿⡟⠻⠿⠿⠋⠀⠀⠀⠀
⠀⠀⠀⠀⠹⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠈⢿⣿⣿⣿⣿⣿⣿⣇⠀⠀⠀⠀⠀⠀⠀⡄
⠀⠀⠀⠀⠀⠀⠀⠙⢿⣿⣿⣿⣿⣿⣆⠀⠀⠀⠀⢀⡾⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠻⣿⣿⣿⣿⣷⣶⣴⣾⠏⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠛⠛⠛⠋⠁⠀⠀⠀
`,
`
⠀⠀⠀⠀⠀⠀⢀⣤⣶⣶⣖⣦⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢀⣾⡟⣉⣽⣿⢿⡿⣿⣿⣆⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢠⣿⣿⣿⡗⠋⠙⡿⣷⢌⣿⣿⠀⠀⠀⠀⠀⠀⠀
⣷⣄⣀⣿⣿⣿⣿⣷⣦⣤⣾⣿⣿⣿⡿⠀⠀⠀⠀⠀⠀⠀
⠈⠙⠛⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧⡀⠀⢀⠀⠀⠀⠀
⠀⠀⠀⠸⣿⣿⣿⣿⣿⣿⣿⣿⣿⡟⠻⠿⠿⠋⠀⠀⠀⠀
⠀⠀⠀⠀⠹⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠈⢿⣿⣿⣿⣿⣿⣿⣇⠀⠀⠀⠀⠀⠀⠀⡄
⠀⠀⠀⠀⠀⠀⠀⠙⢿⣿⣿⣿⣿⣿⣆⠀⠀⠀⠀⢀⡾⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠻⣿⣿⣿⣿⣷⣶⣴⣾⠏⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠛⠛⠛⠋⠁⠀⠀⠀
`
];
let currentFrame = 0;
const personElement = document.getElementById('person');
function animatePerson() {
personElement.textContent = frames[currentFrame];
currentFrame = (currentFrame + 1) % frames.length;
}
setInterval(animatePerson, 500);
</script>
</body>
</html>
MUESTRA: https://ascii-suav.blogspot.com/
En blogger este script no serviria, talves por la forma del caracter, pero en un documento de HTML si sirve super, solo sirve con dibujos mas simples y sin tantos caracteres.
PLANTILLA ANIMACION FUERTE ASCII HTML
PLANTILLA ANIMACION FUERTE ASCII
Lo llame asi puesto que este dibujo ASCII era de caracteres fuertes para la tipica etiqueta de const frames " ` "
asi que usa la etiqueta " pre " como frames
CODIGO:
<!DOCTYPE html>
<html lang="en">
<!-- PLANTILLA ANIMACION ASCII TIPO FUERTE V1 -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ASCII Art Animación</title>
<style>
body {
background-color: black;
color: lime;
font-family: monospace;
font-size: 12px;
line-height: 1;
white-space: pre;
text-align: center;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
pre {
display: none;
}
pre.active {
display: block;
}
</style>
</head>
<body>
<pre class="active">
.-/+ossooooooo+/:.
`:osydhyo++: :yyyyydN@ho:`
:sho:``. .+o``d@h./N@@@@@@@@s:
-s@dd- :--@s@@@@@@@@@@@@@@@@@Ny:
/dho`. ///N@yy::@@@@N+y@dNhd@N@@+`
/ho` `@@@/- `:::sdosNdd@@@o@@@N+
.h+ :o@@@@@@@@/:---:::::o@@@@@@@@@@-
/h. `+s@@@@@@@@@@@@@@@@@@@@dy@@@@Nd@@@@o
oy` :@@@@@@@@@@@@@@@@@@@@@@Nyyo@@@yNdsh@s
+h: -od@@@@@@@@@@@@@@@@@@@@@@@@N.y@@@@@:`+@s
-@`` y@@@@@@@@@@@@@@@@@@@@@@@@@@@N@-d@@N-``o@:
h/ y@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@h--.```.s@
.NN@y.` hh@@@@@@dhhhN@@@@@@@@@@@@@@@@@@@s````-N:
/dN@@@o` `yyyyyy syN@@@@@@@@@@@@@@@@h+`````so
o@@@@@@s// h@@@@@@@@@@@@@Nd+-``````oy
+N@@@@@@@No++ h@@@@@@@@@@@@@d:.```````ss
.N@@@@@@@@@@@` /+N@@@@@@@@@@@s`````````d:
dh@@@@@@@@N/` @@@@@@@@@@@@/````````:@
-@o@@@@@@@@- yh@@@@@@@@@@@N.ydy````.d/
oy:@@@@@NNs ./@@@@@@@@@N-.:@N:````sy
syh@@@@d` o@@@@@@@Nd+``y+`````oy
+hh@@@N- oh@@@@Nd/`````````.ys
-hhN@@` oN+++:-`````````/d:
+ddd. ..````````````:yo`
`+@d: ``````````/yo`
:yh/ `````````:sy/
`/ss+- ```````-+ss/`
./oss+:-` `-::::///++oyyso/.
`-:+oooyhhhhhyso+/-`
</pre>
<pre>
.-/+ooooooosoo+/:.
`:oy@@yo+oy@@dsshdo@NdNNNyso:`
:ohs/:-. :s+````/+@@@@@N@@@Nooyhds:
-sy+-` -+dN@@@@@@@@NyN@Ny:
/y+` -@@@@@@@@@@N@@@@d+`
/h/ s@@@@@@@@@@@@@@y:h+
.h+ +ddd@@@@@@@@@N/`/h-
/h. .+hy@@@@hyyy::`.ho
oy` `//h@N@@d````+.``ss
+h ---y@@+`.y:``-/ys
-@` `.-:d@y--``-.d:
h/ `````.``d/...:@
.N ```.````-sd@N@:
/h `````````.o@@@o
oy `````````.@@@@y
+d` ` `````````-@@@@s
.@` ` `````````/@@@@:
d/ ```````````-N@@@
-@` .. ```````````.y@@/
o@. ``.`````````-h@y
sN+ ```````````:N@y
+@h` ```````````/N@s
-@h ``````````.s@@:
+h: `+ ```````````/hNo`
`+y/ :: ````````.oddo`
:ss: ````````-ody/
`/ss+- ```````-+ss/`
./ooo+:-` ``.`.-:/osso/.
`-:+oooosyyyhsso+/-`
</pre>
<pre>
.-/+oooooooooo+/:.
`:oy@@@@dyy::--yd@dsy@@@N@yo:`
:sdhy+sh/..``` +d:```:osN@@N@@@s:
-sN@@+ :. `oyN@@@@Ny:
/dNho+ `.:@@@@@@@+`
/dd: ``.s@@@@@@N+
.ho+` ```-+@N@@@@@-
/@: ``````o@N@@@o
od` `````:/hNN:ss
+h. ````````:/s@-ds
-N- ` ```.````.:/hd:
h/ ````````````.+@
.N ```.``````````d:
/@`` ``````````````so
od-``- ``````````````oy
+d` .@++` ``````````````ss
.N /h+` ``````````````d:
d/`h:s: `````````````:@
-@+@d-h :: `````````````.d/
oN@@N@N+` ` ```.`````````sy
s@@@@@@@+- ``````````````oy
+@@@@@@@@+ ```````````.ys
-do.+N@@s ````````````/d:
+h: :y+ /+ ```````````:yo`
`+y/ `. -+- ``````````/yo`
:ss: `` `````````:sy/
`/ss+- ```````-+ss/`
./osys+//.` ``.--/osso/.
`-:+osssoooyssso+/-`
</pre>
<script>
let frames = document.querySelectorAll('pre');
let currentFrame = 0;
function showNextFrame() {
frames[currentFrame].classList.remove('active');
currentFrame = (currentFrame + 1) % frames.length;
frames[currentFrame].classList.add('active');
}
setInterval(showNextFrame, 500);
</script>
</body>
</html>
MUESTRA: https://eartham.blogspot.com/
PLANTILLA HTML PARA DIBUJOS ASCII
PLANTILLA PARA DIBUJOS ASCII HTML
Esto sirve para dibujos simples ASII ya dibujos con caracteristicas fuertes no sabria
se usa mas detodo la etiqueta " pre " o " code " , lo uso mucho para mostrar el codigo html
CODIGO:
<!DOCTYPE html>
<html lang="en">
<!-- ESTA PLANTILLA ES PARA PUBLICAR EN HTML CUALQUIER DIBUJO TIPO ASCII -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ASCII Art Adaptado</title>
<style>
body {
background-color: black;
color: lime;
font-family: monospace;
font-size: 12px;
line-height: 1.2;
white-space: pre;
text-align: center;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<center>
<pre>
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⠀⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⡤⠶⠚⠉⢉⣩⠽⠟⠛⠛⠛⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⠞⠉⠀⢀⣠⠞⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡞⠁⠀⠀⣰⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣾⠀⠀⠀⡼⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⣠⡤⠤⠄⢤⣄⣀⣀⣀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⠀⠀⢰⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⠴⠒⠋⠉⠀⠀⠀⣀⣤⠴⠒⠋⠉⠉⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠻⡄⠀⠀⣧⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⠞⢳⡄⢀⡴⠚⠉⠀⠀⠀⠀⠀⣠⠴⠚⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢦⡀⠘⣧⠀⠀⠀⠀⠀⠀⠀⠀⣰⠃⠀⠀⠹⡏⠀⠀⠀⠀⠀⣀⣴⠟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠳⢬⣳⣄⣠⠤⠤⠶⠶⠒⠋⠀⠀⠀⠀⠹⡀⠀⠀⠀⠀⠈⠉⠛⠲⢦⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⠤⠖⠋⠉⠉⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠱⡀⠀⠁⠀⠀⠀⠀⠀⠀⠀⠉⢳⠦⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⣠⠖⠋⠀⠀⠀⣠⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢱⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⠀⢃⠈⠙⠲⣄⡀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⢠⠞⠁⠀⠀⠀⢀⢾⠃⠀⠀⠀⠀⠀⠀⠀⠀⢢⠀⠀⠀⠀⠀⠀⠀⢣⠀⠀⠀⠀⠀⠀⠀⠀⠀⣹⠮⣄⠀⠀⠀⠙⢦⡀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⣰⠋⠀⠀⢀⡤⡴⠃⠈⠦⣀⠀⠀⠀⠀⠀⠀⢀⣷⢸⠀⠀⠀⠀⢀⣀⠘⡄⠤⠤⢤⠔⠒⠂⠉⠁⠀⠀⠀⠑⢄⡀⠀⠀⠙⢦⡀⠀⠀⠀
⠀⠀⠀⠀⣼⠃⠀⠀⢠⣞⠟⠀⠀⠀⡄⠀⠉⠒⠢⣤⣤⠄⣼⢻⠸⠀⠀⠀⠀⠉⢤⠀⢿⡖⠒⠊⢦⠤⠤⣀⣀⡀⠀⠀⠀⠈⠻⡝⠲⢤⣀⠙⢦⠀⠀
⠀⠀⠀⢰⠃⠀⠀⣴⣿⠎⠀⠀⢀⣜⠤⠄⢲⠎⠉⠀⠀⡼⠸⠘⡄⡇⠀⠀⠀⠀⢸⠀⢸⠘⢆⠀⠘⡄⠀⠀⠀⢢⠉⠉⠀⠒⠒⠽⡄⠀⠈⠙⠮⣷⡀
⠀⠀⠀⡟⠀⠀⣼⢻⠧⠐⠂⠉⡜⠀⠀⡰⡟⠀⠀⠀⡰⠁⡇⠀⡇⡇⠀⠀⠀⠀⢺⠇⠀⣆⡨⢆⠀⢽⠀⠀⠀⠈⡷⡄⠀⠀⠀⠀⠹⡄⠀⠀⠀⠈⠁
⠀⠀⢸⠃⠀⠀⢃⠎⠀⠀⠀⣴⠃⠀⡜⠹⠁⠀⠀⡰⠁⢠⠁⠀⢸⢸⠀⠀⠀⢠⡸⢣⠔⡏⠀⠈⢆⠀⣗⠒⠀⠀⢸⠘⢆⠀⠀⠀⠀⢳⠀⠀⠀⠀⠀
⠀⠀⢸⠀⠀⠀⡜⠀⠀⢀⡜⡞⠀⡜⠈⠏⠀⠈⡹⠑⠒⠼⡀⠀⠀⢿⠀⠀⠀⢀⡇⠀⢇⢁⠀⠀⠈⢆⢰⠀⠀⠀⠈⡄⠈⢢⠀⠀⠀⠈⣇⠀⠀⠀⠀
⠀⠀⢸⡀⠀⢰⠁⠀⢀⢮⠀⠇⡜⠀⠘⠀⠀⢰⠃⠀⠀⡇⠈⠁⠀⢘⡄⠀⠀⢸⠀⠀⣘⣼⠤⠤⠤⣈⡞⡀⠀⠀⠀⡇⠰⡄⢣⡀⠀⠀⢻⠀⠀⠀⠀
⠀⠀⠈⡇⠀⡜⠀⢀⠎⢸⢸⢰⠁⠀⠄⠀⢠⠃⠀⠀⢸⠀⠀⠀⠀⠀⡇⠀⠀⡆⠀⠀⣶⣿⡿⠿⡛⢻⡟⡇⠀⠀⠀⡇⠀⣿⣆⢡⠀⠀⢸⡇⠀⠀⠀
⠀⠀⢠⡏⠀⠉⢢⡎⠀⡇⣿⠊⠀⠀⠀⢠⡏⠀⠀⠀⠎⠀⠀⠀⠀⠀⡇⠀⡸⠀⠀⠀⡇⠀⢰⡆⡇⢸⢠⢹⠀⠀⠀⡇⠀⢹⠈⢧⣣⠀⠘⡇⠀⠀⠀
⠀⠀⢸⡇⠀⠀⠀⡇⠀⡇⢹⠀⠀⠀⢀⡾⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⢠⠃⠀⠀⠠⠟⡯⣻⣇⢃⠇⢠⠏⡇⠀⢸⡆⠀⢸⠀⠈⢳⡀⠀⡇⠀⠀⠀
⠀⠀⠀⣇⠀⡔⠋⡇⠀⢱⢼⠀⠀⡂⣼⡇⢹⣶⣶⣶⣤⣤⣀⠀⠀⠀⣇⠇⠀⠀⠀⠀⣶⡭⢃⣏⡘⠀⡎⠀⠇⠀⡾⣷⠀⣼⠀⠀⠀⢻⡄⡇⠀⠀⠀
⠀⠀⠀⣹⠜⠋⠉⠓⢄⡏⢸⠀⠀⢳⡏⢸⠹⢀⣉⢭⣻⡽⠿⠛⠓⠀⠋⠀⠀⠀⠀⠀⠘⠛⠛⠓⠀⡄⡇⠀⢸⢰⡇⢸⡄⡟⠀⠀⠀⠀⢳⡇⠀⠀⠀
⠀⣠⠞⠁⠀⠀⠀⠀⠀⢙⠌⡇⠀⣿⠁⠀⡇⡗⠉⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠰⠀⠀⠀⠀⠀⠀⠁⠁⠀⢸⣼⠀⠈⣇⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀
⢸⠁⠀⠀⢀⡠⠔⠚⠉⠉⢱⣇⢸⢧⠀⠀⠸⣱⠀⠀⠀⠀⠀⠀⠀⠀⣀⣀⡤⠦⡔⠀⠀⠀⠀⠀⢀⡼⠀⠀⣼⡏⠀⠀⢹⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀
⢸⠀⠀⠀⠋⠀⠀⠀⢀⡠⠤⣿⣾⣇⣧⠀⠀⢫⡆⠀⠀⠀⠀⠀⠀⠀⢨⠀⠀⣠⠇⠀⠀⢀⡠⣶⠋⠀⠀⡸⣾⠁⠀⠀⠈⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀
⢸⡄⠀⠀⠀⠀⠠⠊⠁⠀⠀⢸⢃⠘⡜⡵⡀⠈⢿⡱⢲⡤⠤⢀⣀⣀⡀⠉⠉⣀⡠⡴⠚⠉⣸⢸⠀⠀⢠⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⢧⠀⠀⠀⠀⠀⠀⠀⣀⠤⠚⠚⣤⣵⡰⡑⡄⠀⢣⡈⠳⡀⠀⠀⠀⢨⡋⠙⣆⢸⠀⠀⣰⢻⡎⠀⠀⡎⡇⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠈⢷⡀⠀⠀⠀⠀⠀⠁⠀⠀⠀⡸⢌⣳⣵⡈⢦⡀⠳⡀⠈⢦⡀⠀⠘⠏⠲⣌⠙⢒⠴⡧⣸⡇⠀⡸⢸⠇⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⢠⣿⠢⡀⠀⠀⠀⠠⠄⡖⠋⠀⠀⠙⢿⣳⡀⠑⢄⠹⣄⡀⠙⢄⡠⠤⠒⠚⡖⡇⠀⠘⣽⡇⢠⠃⢸⢀⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⣾⠃⠀⠀⠀⠀⠀⢀⡼⣄⠀⠀⠀⠀⠀⠑⣽⣆⠀⠑⢝⡍⠒⠬⢧⣀⡠⠊⠀⠸⡀⠀⢹⡇⡎⠀⡿⢸⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⡼⠁⠀⠀⠀⠀⠀⠀⢀⠻⣺⣧⠀⠀⠀⠰⢢⠈⢪⡷⡀⠀⠙⡄⠀⠀⠱⡄⠀⠀⠀⢧⠀⢸⡻⠀⢠⡇⣾⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⢰⠇⠀⠀⠀⠀⠀⠀⠀⢸⠀⡏⣿⠀⠀⠀⠀⢣⢇⠀⠑⣄⠀⠀⠸⡄⠀⠀⠘⡄⠀⠀⠸⡀⢸⠁⠀⡾⢰⡏⢳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
</pre>
</center>
</body>
</html>
MUESTRA: https://dibujet.blogspot.com/
ETIQUETA para AUDIO
ETIQUETAS PARA AUDIO EN HTML
Etiqueta Basica
<audio controls>
<source src="ruta/del/archivo.mp3" type="audio/mpeg">
Tu navegador no soporta el elemento de audio.
</audio>
Vamos aver algunos ejemplos:
<audio controls>
<source src="http://www.sonidosmp3gratis.com/sounds/tono-mensaje-3-.mp3" type="audio/mpeg">
Tu navegador no soporta el elemento de audio.
</audio>
Uso de la Etiqueta <hr> para Dividir Contenido en HTML
Uso de la Etiqueta <hr> para Dividir Contenido en HTML
La etiqueta <hr> en HTML se utiliza para insertar una línea horizontal que sirve para dividir contenido dentro de una página web. Esta línea puede ser útil para separar secciones o bloques de contenido, mejorando la organización visual.
Formula del código:
<hr>
Ejemplo de uso:
Contenido antes de la línea horizontal.
Contenido después de la línea horizontal.
El elemento <hr> es un elemento de auto-cierre, lo que significa que no necesita una etiqueta de cierre. Puedes usar CSS para personalizar su apariencia, como el grosor, el color y el estilo de la línea.
Ejemplo con CSS:
<style>
hr {
border: 1px solid #000; /* Color negro */
margin: 20px 0; /* Espacio arriba y abajo */
}
</style>
<hr>
Este código CSS cambiará el color de la línea horizontal a negro y añadirá un espacio arriba y abajo de la línea.
Para más información sobre el uso de <hr> y cómo personalizarlo con CSS, consulta la documentación oficial de HTML y CSS:
ENCABEZADOS EN HTML
ENCABEZADOS EN HTML
En HTML, los encabezados se utilizan para estructurar el contenido de la página. Los encabezados van del nivel <h1> al nivel <h6>, siendo <h1> el más importante y <h6> el menos importante.
Fórmula del código:
<h1>Texto del Encabezado Nivel 1</h1> <h2>Texto del Encabezado Nivel 2</h2> <h3>Texto del Encabezado Nivel 3</h3> <h4>Texto del Encabezado Nivel 4</h4> <h5>Texto del Encabezado Nivel 5</h5> <h6>Texto del Encabezado Nivel 6</h6>
Comencemos con pruebas:
<h1>Encabezado Nivel 1</h1> <h2>Encabezado Nivel 2</h2> <h3>Encabezado Nivel 3</h3> <h4>Encabezado Nivel 4</h4> <h5>Encabezado Nivel 5</h5> <h6>Encabezado Nivel 6</h6>
EJEMPLO:
Encabezado Nivel 1
Encabezado Nivel 2
Encabezado Nivel 3
Encabezado Nivel 4
Encabezado Nivel 5
Encabezado Nivel 6
Estos encabezados se utilizan para organizar el contenido en diferentes niveles de importancia. Puedes aplicar estilos CSS para ajustar el tamaño y el formato según tus necesidades.
Para obtener más información sobre cómo usar HTML y CSS para diseñar tus páginas, consulta la documentación oficial o recursos educativos en línea.
Más información sobre encabezados en MDN Web DocsTIPOS DE INPUTS
ETIQUETAS PARA TIPOS DE INPUT EN HTML
Usando el atributo type en la etiqueta <input> para especificar el tipo de entrada.
Formato del código:
<input type="tipo_de_entrada" id="id_del_input" name="nombre_del_input" placeholder="texto_de_ayuda" />
Comencemos con ejemplos:
1. Campo de Texto (Text)
Permite al usuario ingresar texto de una sola línea.
<input type="text" id="username" name="username" placeholder="Ingrese su nombre de usuario" />
EJEMPLO:
2. Campo de Contraseña (Password)
Permite al usuario ingresar una contraseña, ocultando los caracteres ingresados.
<input type="password" id="password" name="password" placeholder="Ingrese su contraseña" />
EJEMPLO:
3. Campo de Correo Electrónico (Email)
Permite al usuario ingresar una dirección de correo electrónico con validación básica del formato.
<input type="email" id="email" name="email" placeholder="Ingrese su correo electrónico" />
EJEMPLO:
4. Campo de Número (Number)
Permite al usuario ingresar un número. Puedes establecer valores mínimo y máximo.
<input type="number" id="age" name="age" min="1" max="120" placeholder="Ingrese su edad" />
EJEMPLO:
5. Campo de Teléfono (Tel)
Permite al usuario ingresar un número de teléfono. La validación del formato depende del navegador.
<input type="tel" id="phone" name="phone" placeholder="Ingrese su número de teléfono" />
EJEMPLO:
6. Campo de Fecha (Date)
Permite al usuario seleccionar una fecha desde un calendario emergente.
<input type="date" id="birthdate" name="birthdate" />
EJEMPLO:
7. Campo de Hora (Time)
Permite al usuario seleccionar una hora.
<input type="time" id="appointment" name="appointment" />
EJEMPLO:
8. Campo de Selección (Checkbox)
Permite al usuario seleccionar una o más opciones.
<input type="checkbox" id="subscribe" name="subscribe" value="newsletter" /> <label for="subscribe">Suscribirse al boletín</label>
EJEMPLO:
9. Campo de Radio
Permite al usuario seleccionar solo una opción de un grupo de opciones.
<input type="radio" id="male" name="gender" value="male" /> <label for="male">Masculino</label> <br> <input type="radio" id="female" name="gender" value="female" /> <label for="female">Femenino</label>
EJEMPLO:
10. Campo de Archivo (File)
Permite al usuario seleccionar un archivo para cargar.
<input type="file" id="profile-pic" name="profile-pic" />
EJEMPLO:
11. Campo de Color (Color)
Permite al usuario seleccionar un color usando un selector de color.
<input type="color" id="favcolor" name="favcolor" value="#ff0000" />
EJEMPLO:
12. Campo de URL (URL)
Permite al usuario ingresar una URL con validación básica del formato.
<input type="url" id="website" name="website" placeholder="Ingrese su sitio web" />
EJEMPLO:
13. Campo de Texto Multilínea (Textarea)
Permite al usuario ingresar texto en varias líneas. No es un <input>, pero se usa de manera similar en formularios.
<textarea id="message" name="message" rows="4" cols="50" placeholder="Ingrese su mensaje"></textarea>
EJEMPLO:
Para una vista más completa y ejemplos adicionales, puedes visitar la documentación en línea sobre los tipos de <input> en HTML.
ETIQUETA para VIDEO
ETIQUETAS PARA VIDEO EN HTML
▶︎ codigo estandar para video en HTML
<video width="ancho" height="alto" controls>
<source src="url_del_video.mp4" type="video/mp4">
Tu navegador no soporta el formato de video.
</video>
Miremos unos ejemplos
<video width="400" height="200" controls>
<source src="https://files.catbox.moe/hv5d08.mp4" type="video/mp4">
Tu navegador no soporta el formato de video.
</video>
EJEMPLO:
Para subir videos mas rapido use la pagina de almacenamiento catbox
▶︎ VIDEOS DE YOUTUBE EN PAGINA HTML
Para subir videos de youtube a una pagina HTML es mas facil ya que el formato de youtube es de formato embebido (embed) simplemente son unos pasos a seguir
1.- vamos al video que quieras elegir en youtube
2.- le damos click al botón de compartir
3.- le damos en el botón de insertar
4.- esto abrirá las opciones de embed solo es ajustar como quieras en las opciones o personalizarlo ya sea con las medidas de anchura y alto
5.- copiar y pegar donde quieras ubicarlo
<iframe width="560" height="315" src="https://www.youtube.com/embed/B4LvDiIi128?si=bmONoL8DzrsxNqB_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
EJEMPLO:
ETIQUETA para IMAGEN
ETIQUETAS PARA IMAGEN EN HTML
Usando atributos width y height en la etiqueta <img>
Formula del codigo
<img src="url_de_la_imagen" alt="descripción de la imagen" width="ancho" height="alto" />
comencemos con pruebas
<img src="https://i.pinimg.com/236x/21/f3/2d/21f32dc47457599095713072f141a4cb.jpg" alt="Imagen de Ejemplo de gatito" width="300" height="200"/>
EJEMPLO:
Tambien se puede hacer con diferentes tipos de formatos ya sea de imagen o gif
ejemplo con un gif
<img src="https://media.tenor.com/kQA86PqyXZQAAAAi/small-dancing-white-cat-dance-funny.gif" alt="Gif de Ejemplo de gatito" width="300" height="200"/>
EJEMPLO:
Para subir imagenes mas rapido use el almacenamiento de postimages, se usa para subir todo tipo de imagenes y gifs
ETIQUETA <a>
ETIQUETA <a>
¿ PARA QUE SIRVE ?
La etiqueta <a> en HTML se utiliza para crear enlaces a otras páginas web, archivos, ubicaciones dentro de la misma página, direcciones de correo electrónico, y más. El atributo href dentro de la etiqueta <a> especifica la URL del destino del enlace.
Aquí tienes algunos ejemplos de cómo usar la etiqueta <a>
Recuerda que estos ejemplos van dentro de la etiqueta <body>
▶︎ Enlace a otra página web
<a href="https://afdfwe.blogspot.com/">Visitar HTML SYNTAXIS</a>
EJEMPLO:
▶︎ Enlace a un archivo
En el href se colocara la ruta del documento o link de descarga directa del archivo ya sea de internet o de repositorio
<a href="GAGITO.png"> Descargar IMAGEN DE GATITO </a>
EJEMPLO:
▶︎ Enlace a una ubicación dentro de la misma página
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enlace Interno</title>
</head>
<body>
<a href="#seccion">Ir a Sección</a>
<div style="margin-top: 1000px;">
<h2 id="seccion">Sección</h2>
<p>Contenido de la sección.</p>
</div>
</body>
</html>
▶︎ Enlace a una dirección de correo electrónico
<a href="mailto:correo@ejemplo.com">Enviar Correo</a>
▶︎ Dale clic a una imagen para abrir un enlace
<a href="https://www.google.com">
<img src="https://i.postimg.cc/3NMKShxd/google.jpg" alt="Imagen de Ejemplo">
</a>
EJEMPLO:
Tablas con bordes y colores alternados
| Encabezado 1 | Encabezado 2 |
|---|---|
| Celda 1 | Celda 2 |
| Celda 3 | Celda 4 |
CODIGO:
<table style="border-collapse: collapse; width: 100%;">
<tr style="background-color: #f2f2f2;">
<th style="border: 1px solid #ddd; padding: 8px;">Encabezado 1</th>
<th style="border: 1px solid #ddd; padding: 8px;">Encabezado 2</th>
</tr>
<tr>
<td style="border: 1px solid #ddd; padding: 8px;">Celda 1</td>
<td style="border: 1px solid #ddd; padding: 8px;">Celda 2</td>
</tr>
<tr style="background-color: #f2f2f2;">
<td style="border: 1px solid #ddd; padding: 8px;">Celda 3</td>
<td style="border: 1px solid #ddd; padding: 8px;">Celda 4</td>
</tr>
</table>
agregar sombra al texto
Le da sombra al texto
<p style="text-shadow: 2px 2px 4px #000000;">Este texto tiene sombra.</p>
syntaxis simple HTML
Syntaxis simple de HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
USO DE ( & l t ; ) Y ( & g t ; )
El uso de estas nomenclaturas es poder hacer notar < = ( & l t ; ) y > = ( & g t ; ) = <> osea para cerrar codigo ya sea en un (< pre >) o (< code >) ya que en realidad no muestra el <> en HTML ya que ovbio estamos editando en HTML
ejemplo:
separados y con corchetes:
( & l t ; ) hola ( & g t ; )
sin separar:
< hola >