426 lines
10 KiB
HTML
426 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<!-- ? Idionas -->
|
|
<!-- ? es español -->
|
|
<!-- ? en ingles -->
|
|
<!-- ? ru Ruso-->
|
|
<!-- ? ja Japones-->
|
|
<!-- https://www.w3schools.com/tags/ref_language_codes.asp -->
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<!-- ? Cotenido clave-->
|
|
<meta name="keywords" content="Test,Web">
|
|
|
|
<!-- ? Descripcon (Descripcion de la pagina)-->
|
|
<meta name="description" content="De 70 a 140 carracteres mas o mendios">
|
|
|
|
<!-- ? Autor de la pagina -->
|
|
<meta name="author" content="Nombre del author">
|
|
|
|
<!-- ? Si hay copyrigth -->
|
|
<meta name="copyright" content="Empresa registrada">
|
|
|
|
<!-- ? Si la pagina tiene que ser indexada o no -->
|
|
<!-- * index | noindex -->
|
|
<meta name="robots" content="">
|
|
|
|
<!-- ! Es para seo -->
|
|
<!-- * nofollow | follow -->
|
|
<meta name="robots" content="nofollow">
|
|
|
|
<!-- ? Icono -->
|
|
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
|
|
|
|
<title>Titulo</title>
|
|
|
|
<!-- ? Link del CSS -->
|
|
<link rel="stylesheet" href="style.css">
|
|
<style></style>
|
|
|
|
<!-- ? Link JS -->
|
|
<script src="scripts.js"></script>
|
|
<script></script>
|
|
|
|
</head>
|
|
<body>
|
|
<!-- ? CSS -->
|
|
<p class=""></p>
|
|
|
|
<!-- ? Link del Java script -->
|
|
<script src=""></script>
|
|
|
|
<!-- ? Etiqueta de seccion -->
|
|
<header>Cabeza</header>
|
|
|
|
<nav> Navegacion | Menu de navegacion </nav>
|
|
|
|
<aside>
|
|
Cualquier contenido relacionado, pero no la principal
|
|
</aside>
|
|
|
|
<main>
|
|
Cuerpo
|
|
<article>Articulo
|
|
<!-- No depende uno del otro. -->
|
|
Secciones
|
|
<section>1</section>
|
|
</article>
|
|
|
|
<!-- ? Divicones internas del mismo contenido -->
|
|
<section>2</section>
|
|
<section>3</section>
|
|
</main>
|
|
|
|
<footer>Pies</footer>
|
|
|
|
<!-- * Salto de linea -->
|
|
<br>
|
|
|
|
<h1>Encabezado 1</h1>
|
|
<h2>Encabezado 2</h2>
|
|
<h3>Encabezado 3</h3>
|
|
<h4>Encabezado 4</h4>
|
|
<h5>Encabezado 5</h5>
|
|
<h6>Encabezado 6</h6>
|
|
|
|
<p>Parrafo</p>
|
|
|
|
<!-- ? Regla horizonta -->
|
|
<!-- ? Sirve una separacion de tema -->
|
|
<hr>
|
|
|
|
<!-- Preformateado -->
|
|
<!-- ? Mostrar el contenido tal cual esta escrito -->
|
|
<!-- ! Respeta los saltos de linea -->
|
|
<pre>
|
|
1
|
|
2
|
|
3
|
|
</pre>
|
|
<code>
|
|
<pre>
|
|
|
|
</pre>
|
|
</code>
|
|
|
|
<!-- ? Br Salto de linea -->
|
|
<br>
|
|
<!-- Blockquote (Bloque de cita) -->
|
|
<blockquote>
|
|
Texto citado
|
|
</blockquote>
|
|
|
|
<!-- Div | Divicion -->
|
|
<div>
|
|
Caja ed divicon
|
|
</div>
|
|
<!-- ? [To toma toda la caja] -->
|
|
<b>Negrita</b>
|
|
<i>Italica</i>
|
|
<Strike>Tachada</Strike>
|
|
<small>Chiquita</small>
|
|
|
|
<div></div>
|
|
|
|
<a href="http://" target="_blank" rel="noopener noreferrer">Link</a>
|
|
<a href="carpeta/dentro_de_carpeta/archivo.html">Ir a archivo</a>
|
|
<a href="../carpeta/dentro_de_carpeta/archivo.html">Ir a archivo</a>
|
|
<a href=""></a>
|
|
|
|
<!-- ! Hacia atras ../ -->
|
|
<!-- ! Hacia delante carpeta/ -->
|
|
<!-- ! Relativa a la raiz / -->
|
|
<!-- ? Siempre utilizar rutas referentes a la raiz -->
|
|
<!-- /img/personajes/ -->
|
|
|
|
<a href="" download="">Descargar</a>
|
|
<a href="" download>Descargar</a>
|
|
|
|
<!-- ! Atrabes delid -->
|
|
<a href="#marcador">Ir a marcadores</a>
|
|
<a id="marcador">Soy elmarcador</a>
|
|
|
|
<a href="carpeta/pagina.html#marcador">Ir a marcadores</a>
|
|
<br>
|
|
<!-- ? Solo puede usarse con # | ID -->
|
|
<a href="#nota">Link nota</a>
|
|
|
|
<p id="nota">Esta es la nota</p>
|
|
|
|
<!-- * Listas
|
|
* Listas ordenadas (ol)
|
|
* Listas no odenadas (ul)
|
|
|
|
* Listas de definicion (<dl>)
|
|
* <dt> Definition term | Que definir
|
|
* <dt> Definition description | Descripcion del termino
|
|
-->
|
|
|
|
<ul>
|
|
<li>Lista no ordenada</li>
|
|
</ul>
|
|
|
|
<ol>
|
|
<li>Lista ordenada</li>
|
|
</ol>
|
|
|
|
<ol>
|
|
<li>Lista ordenada
|
|
<ol>
|
|
<li>Agregado anidados</li>
|
|
<li>Anidados</li>
|
|
</ol>
|
|
</li>
|
|
</ol>
|
|
|
|
<table>
|
|
Tablas | border
|
|
<tr>
|
|
<td>Casillas_1-1</td>
|
|
<td>Casillas_2-1</td>
|
|
<td>Casillas_3-1</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Casillas_1-2</td>
|
|
<td>Casillas_2-2</td>
|
|
<td>Casillas_3-2</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Casillas_1-3</td>
|
|
<td>Casillas_2-3</td>
|
|
<td>Casillas_3-3</td>
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
<center>
|
|
No utilizar esta etiqueta, mejor usar CSS
|
|
<br>
|
|
Centra el contenido
|
|
</center>
|
|
|
|
<!-- * Salto de linea -->
|
|
<br>
|
|
|
|
<!-- ? Etiqueta de imagen -->
|
|
<img src="#" alt="imagen" srcset="" width="" height="">
|
|
<br>
|
|
|
|
<video src="" controls>Video</video>
|
|
|
|
<br>
|
|
<audio src="" controls></audio>
|
|
|
|
|
|
|
|
<form action="">
|
|
Formulario
|
|
<!-- ! required | Obligatorio -->
|
|
<!-- ? Entrada de datos -->
|
|
<input type="text" name="Texto" required="Requerido">
|
|
<input type="password" name="Contraseña">
|
|
<input type="number" name="Numeros">
|
|
<input type="email" name="Email">
|
|
<input type="color" name="Color">
|
|
<input type="range" name="Rango de numero" min="0" max="10">
|
|
<input type="time" name="Tiempo">
|
|
<input type="button" name="Boton" value="Boton">
|
|
|
|
<textarea name="" id="" cols="30" rows="10">Area de texto</textarea>
|
|
<textarea name="" id="" cols="30" rows="10" readonly>Area de texto | Solamente leer</textarea>
|
|
|
|
<input type="submit" name="Enviar todos los datos">
|
|
</form>
|
|
<!-- * Post | Enviado por el servidor -->
|
|
<form method="post" action=""></form>
|
|
<form method="get" action=""></form>
|
|
<form method="dialog" action=""></form>
|
|
|
|
|
|
<!-- ? Forma de ordenar la pagina -->
|
|
|
|
<header>
|
|
Cabeza
|
|
<nav>
|
|
Menu de navegacion
|
|
</nav>
|
|
</header>
|
|
<article>
|
|
Articulos | Todos ls Articulos
|
|
<section>
|
|
Las secciones del articulo
|
|
</section>
|
|
|
|
<section>
|
|
|
|
</section>
|
|
</article>
|
|
|
|
<aside>
|
|
Menu Secundario
|
|
</aside>
|
|
|
|
<footer>
|
|
Pie de pagina
|
|
</footer>
|
|
<!-- Elementos en bloque
|
|
h1, h2, h3, h4, h5, h6
|
|
p
|
|
hr (Horizontalrule)
|
|
pre (preformat)
|
|
blockquote (bloque de cita)
|
|
div (divison)
|
|
-->
|
|
|
|
<!-- Elementos en linea
|
|
em (emphasis)
|
|
strong (Textos mas importantes)
|
|
small (textos menos importantes)
|
|
wbr (Word breaking rule) # Corta una palabra larga
|
|
span (Contenedor delinea)
|
|
-->
|
|
|
|
<!-- Elementos de linea (continuacion)
|
|
b, u, i (bold, underline, italic)
|
|
cite (cita en linea)
|
|
sub, sup (subindice y superindice)
|
|
code (Codigo)
|
|
time (tiempo)
|
|
-->
|
|
|
|
Ctrl + O = Abrir archivos
|
|
|
|
|
|
<!-- * Imagenes vectoriales -->
|
|
<svg></svg>
|
|
|
|
<svg>
|
|
<rect x="4" y="2" width="200" height="200"/>
|
|
</svg>
|
|
|
|
<svg>
|
|
<circle cx="100" cy="100" r="50" fill="red"/>
|
|
</svg>
|
|
|
|
<img src="/img.svg" alt="Circulo">
|
|
|
|
<svg>
|
|
<line x1="0" y1="0" x2="200" y2="200" stroke="red" />
|
|
<line x1="200" y1="0" x2="0" y2="200" stroke="red" />
|
|
<line x1="0" y1="100" x2="200" y2="100" stroke="red" />
|
|
</svg>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<svg>
|
|
<circle cx="100" cy="100" r="100" fill="none" stroke="red"/>
|
|
<circle cx="100" cy="100" r="90" fill="none" stroke="red"/>
|
|
<circle cx="100" cy="100" r="80" fill="none" stroke="red"/>
|
|
<circle cx="50" cy="150" r="50" fill="none" stroke="red"/>
|
|
</svg>
|
|
|
|
<svg>
|
|
<rect x="20" y="20" width="160" height="160"/>
|
|
<rect x="0" y="150" width="50" height="50" fill="#fff"/>
|
|
|
|
<rect x="0" y="0" width="50" height="50" fill="#fff"/>
|
|
|
|
<rect x="150" y="150" width="50" height="50" fill="#fff"/>
|
|
<rect x="150" y="150" width="50" height="50" fill="#fff"/>
|
|
|
|
<rect x="75" y="75s" width="50" height="50" fill="#fff"/>
|
|
</svg>
|
|
|
|
<svg>
|
|
<ellipse cx="100" cy="100" rx="100" ry="40" fill="none" stroke="red" />
|
|
</svg>
|
|
|
|
<svg>
|
|
<defs>
|
|
<!-- ! Envuelve elementos que seran referenciados -->
|
|
<!-- ? Es como guardar una variable ¿ -->
|
|
<style>
|
|
|
|
</style>
|
|
|
|
<g>
|
|
<!-- ! Agrupar muchos elementos ( Manejar como sifuera un solo elemento ) -->
|
|
<desc>
|
|
|
|
</desc>
|
|
</g>
|
|
<symbol>
|
|
<!-- ! Funcionan unicamente como plantilla -->
|
|
</symbol>
|
|
<!-- ! Referenciasuna copia en vivo -->
|
|
<!-- ? Instancia un elemento que se puede utilizar multples veces -->
|
|
<use href="#id"/>
|
|
<!-- href="#id" -->
|
|
|
|
<!-- ! Svg imagenes de mapa de bits -->
|
|
<image href=""></image>
|
|
|
|
</defs>
|
|
|
|
<!-- ? Archivos.svg -->
|
|
</svg>
|
|
|
|
<svg>
|
|
<defs>
|
|
<circle cx="50" cy="50" r="50" id="circle"/>
|
|
</defs>
|
|
<use href="#circle" x="50" y="50" fill="red"/>
|
|
<use href="#circle" x="-50" y="-50" fill="green"/>
|
|
<use href="#circle" x="50" y="-50" fill="blue"/>
|
|
<use href="#circle" x="-50" y="50" fill="yellow"/>
|
|
</svg>
|
|
|
|
<svg>
|
|
<defs>
|
|
<g id="gl" fill="none" stroke="red">
|
|
<circle cx="50" cy="50" r="20"/>
|
|
<circle cx="80" cy="80" r="30"/>
|
|
</g>
|
|
</defs>
|
|
<use href="#g1" x="-50" y="-50" fill="yellow"/>
|
|
</svg>
|
|
|
|
<svg>
|
|
<symbol>
|
|
<g id="gl" fill="none" stroke="red">
|
|
<circle cx="50" cy="50" r="20"/>
|
|
<circle cx="80" cy="80" r="30"/>
|
|
</g>
|
|
</symbol>
|
|
<use href="#g1" x="-50" y="-50" fill="yellow"/>
|
|
</svg>
|
|
|
|
<svg>
|
|
<symbol id="gl" viewBox="0 0 100 100">
|
|
<g fill="none" stroke="red">
|
|
<circle cx="50" cy="50" r="20"/>
|
|
<circle cx="80" cy="80" r="30"/>
|
|
</g>
|
|
</symbol>
|
|
<use href="#g1" x="-50" y="-50" fill="yellow"/>
|
|
</svg>
|
|
<!-- * Mueve lascordenadas del svg
|
|
transform="translate(x y)"
|
|
* Escalar
|
|
! Escala la scordenadas tambien
|
|
transform"scale(x)"
|
|
|
|
* Argumentos
|
|
d=""
|
|
|
|
h Horrizontal
|
|
z = Unir al punto final
|
|
|
|
-->
|
|
|
|
|
|
</body>
|
|
</html> |