update
This commit is contained in:
tuz
parent
e3cf1eb82d
commit
e57ac9f526
159
README.md
159
README.md
|
|
@ -1,4 +1,4 @@
|
||||||
# HTML CSS JS
|
# Web
|
||||||
|
|
||||||
`html`
|
`html`
|
||||||
`HyperText Markup Language`
|
`HyperText Markup Language`
|
||||||
|
|
@ -6,20 +6,7 @@
|
||||||
`Cascading Style Sheets`
|
`Cascading Style Sheets`
|
||||||
`js`
|
`js`
|
||||||
|
|
||||||
## Basic reset
|
|
||||||
|
|
||||||
```css
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
## !
|
|
||||||
|
|
||||||
```html
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
## div
|
## div
|
||||||
```html
|
```html
|
||||||
|
|
@ -67,7 +54,6 @@
|
||||||
<a href="#" target="_blank" rel="noopener noreferrer"></a>
|
<a href="#" target="_blank" rel="noopener noreferrer"></a>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<img src="" alt="">
|
<img src="" alt="">
|
||||||
<hr>
|
<hr>
|
||||||
<br>
|
<br>
|
||||||
|
|
@ -188,66 +174,17 @@ https://www.w3schools.com/graphics/svg_hyperlinks.asp
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# Web
|
|
||||||
|
|
||||||
## Lang
|
|
||||||
|
|
||||||
- html
|
|
||||||
- css
|
|
||||||
- js
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Link:
|
|
||||||
http://fngggljygpsc653xd22hyyvubyxeubymaomjqjwnd5tjo64mwo73fsad.onion
|
|
||||||
http://fngggljygpsc653xd22hyyvubyxeubymaomjqjwnd5tjo64mwo73fsad.onion/public/
|
|
||||||
|
|
||||||
|
|
||||||
---------------------------------------------
|
---------------------------------------------
|
||||||
|
|
||||||
nginx
|
|
||||||
https://nginx.org/en/
|
|
||||||
|
|
||||||
command:
|
command:
|
||||||
taskkill /IM nginx.exe /F
|
taskkill /IM nginx.exe /F
|
||||||
|
|
||||||
|
|
||||||
Tor Browser
|
|
||||||
https://www.torproject.org/
|
|
||||||
https://www.torproject.org/download/
|
|
||||||
|
|
||||||
command:
|
command:
|
||||||
taskkill /IM tor.exe /F
|
taskkill /IM tor.exe /F
|
||||||
|
|
||||||
---------------------------------------------
|
---------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
Config:
|
|
||||||
|
|
||||||
Tor
|
|
||||||
1:
|
|
||||||
C:\root\src\zarga\TorBrowser\Browser\TorBrowser\Data\Tor\torrc
|
|
||||||
|
|
||||||
torrc.txt =
|
|
||||||
HiddenServiceDir C:\root\src\zarga\TorBrowser\hidden_service
|
|
||||||
HiddenServicePort 80 127.0.0.1:8080
|
|
||||||
|
|
||||||
|
|
||||||
---------------------------------------------
|
|
||||||
|
|
||||||
nginx
|
|
||||||
2:
|
|
||||||
nginx/conf =
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Check url:
|
Check url:
|
||||||
|
|
||||||
hidden_Service = Hotname = fngggljygpsc653xd22hyyvubyxeubymaomjqjwnd5tjo64mwo73fsad.onion
|
hidden_Service = Hotname = fngggljygpsc653xd22hyyvubyxeubymaomjqjwnd5tjo64mwo73fsad.onion
|
||||||
|
|
@ -255,97 +192,3 @@ hidden_Service = Hotname = fngggljygpsc653xd22hyyvubyxeubymaomjqjwnd5tjo64mwo73f
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Start:
|
|
||||||
|
|
||||||
win + r, sysdm.cpl
|
|
||||||
|
|
||||||
path =
|
|
||||||
C:\root\src\zarga\nginx
|
|
||||||
|
|
||||||
Descartado [
|
|
||||||
NGINX_CONF_PATH=C:\root\src\zarga\nginx\conf\nginx.conf
|
|
||||||
Set Variable Name: NGINX_CONF_PATH
|
|
||||||
Set Variable Value: C:\root\src\zarga\nginx\conf\nginx.conf
|
|
||||||
|
|
||||||
C:/root/src/zarga/nginx/conf/nginx.conf
|
|
||||||
|
|
||||||
C:\root\src\zarga\TorBrowser\Browser
|
|
||||||
]
|
|
||||||
|
|
||||||
firefox.exe
|
|
||||||
|
|
||||||
cd C:\root\src\zarga\nginx
|
|
||||||
nginx.exe
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
////////////////////////////////////////////////////////////
|
|
||||||
|
|
||||||
path:
|
|
||||||
C:\root\src\zarga\php-8.4.3-nts-Win32-vs17-x64
|
|
||||||
|
|
||||||
Build web server:
|
|
||||||
|
|
||||||
php:
|
|
||||||
https://windows.php.net/download
|
|
||||||
VS17 x64 Non Thread Safe (2025-Jan-15 11:07:36)
|
|
||||||
|
|
||||||
|
|
||||||
php/php.ini-production
|
|
||||||
|
|
||||||
|
|
||||||
cd C:\root\src\zarga\php-8.4.3-nts-Win32-vs17-x64
|
|
||||||
|
|
||||||
php-cgi.exe -b 127.0.0.1:9000
|
|
||||||
|
|
||||||
nginx -s reload
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Execute compile:
|
|
||||||
|
|
||||||
php-cgi.exe -b 127.0.0.1:9000
|
|
||||||
|
|
||||||
cd C:\root\src\zarga\nginx>
|
|
||||||
nginx.exe
|
|
||||||
|
|
||||||
firefox.exe
|
|
||||||
|
|
||||||
|
|
||||||
Stop run:
|
|
||||||
|
|
||||||
taskkill /IM nginx.exe /F
|
|
||||||
taskkill /F /IM tor.exe
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
---------------------------------------------
|
|
||||||
|
|
||||||
https://www.apachefriends.org/es/index.html
|
|
||||||
https://www.apachefriends.org/es/download_success.html
|
|
||||||
https://www.apachefriends.org/es/download.html
|
|
||||||
|
|
||||||
|
|
||||||
C:\xampp\htdocs\
|
|
||||||
|
|
||||||
taskkill /IM xampp-control.exe /F
|
|
||||||
|
|
||||||
DocumentRoot "C:/xampp/htdocs" to
|
|
||||||
C:/root/src/php/htdocss
|
|
||||||
|
|
||||||
DocumentRoot "C:/root/src/php/htdocs"
|
|
||||||
<Directory "C:/root/src/php/htdocs">
|
|
||||||
|
|
||||||
|
|
||||||
Listen 80
|
|
||||||
ServerName localhost:80
|
|
||||||
|
|
||||||
Listen 8080
|
|
||||||
ServerName localhost:8080
|
|
||||||
|
|
||||||
|
|
||||||
http://localhost:80/
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
# border
|
|
||||||
|
|
||||||
|
|
||||||
```css
|
|
||||||
border-radius
|
|
||||||
```
|
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
# Flex
|
|
||||||
|
|
||||||
```css
|
|
||||||
.div-flex {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
## flex tag
|
|
||||||
|
|
||||||
`Flex equivalent`
|
|
||||||
```css
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
flex: 1 1 0%;
|
|
||||||
|
|
||||||
flex-grow: 1;
|
|
||||||
flex-shrink: 1;
|
|
||||||
flex-basis: 0%;
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
## Order
|
|
||||||
```css
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
```
|
|
||||||
|
|
||||||
### Example
|
|
||||||
```css
|
|
||||||
Center horizontal
|
|
||||||
<--------x-------->
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
|
|
||||||
Center vertical
|
|
||||||
^
|
|
||||||
|
|
|
||||||
|
|
|
||||||
x
|
|
||||||
|
|
|
||||||
|
|
|
||||||
v
|
|
||||||
align-items: center;
|
|
||||||
```
|
|
||||||
|
|
@ -0,0 +1,134 @@
|
||||||
|
# CSS
|
||||||
|
|
||||||
|
## Size
|
||||||
|
```text
|
||||||
|
px | Pixeles
|
||||||
|
mm | Milimetros
|
||||||
|
pt | Puntos
|
||||||
|
|
||||||
|
// ! 16px por defecto | Depende del navegador
|
||||||
|
em | Herrencia [Del contenedor] px
|
||||||
|
|
||||||
|
rem | Referencia el root
|
||||||
|
|
||||||
|
vw | Viwport width [Depende de la pantalla]
|
||||||
|
vh | Viwport height [Depende de la pantalla]
|
||||||
|
|
||||||
|
% | Porcentaje
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## Template
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Movil */
|
||||||
|
|
||||||
|
|
||||||
|
/* Tablet */
|
||||||
|
@media (min-width: 600px) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Desktop 1 */
|
||||||
|
@media (min-width: 900px) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Desktop 2 */
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## border
|
||||||
|
|
||||||
|
|
||||||
|
```css
|
||||||
|
border-radius
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Flex
|
||||||
|
|
||||||
|
```css
|
||||||
|
.div-flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
### flex tag
|
||||||
|
|
||||||
|
`Flex equivalent`
|
||||||
|
```css
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
flex: 1 1 0%;
|
||||||
|
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
flex-basis: 0%;
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
### Order
|
||||||
|
```css
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
```
|
||||||
|
|
||||||
|
### Example
|
||||||
|
```css
|
||||||
|
Center horizontal
|
||||||
|
<--------x-------->
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
|
||||||
|
Center vertical
|
||||||
|
^
|
||||||
|
|
|
||||||
|
|
|
||||||
|
x
|
||||||
|
|
|
||||||
|
|
|
||||||
|
v
|
||||||
|
align-items: center;
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## Zoom
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* <percentage> values */
|
||||||
|
zoom: 50%;
|
||||||
|
zoom: 200%;
|
||||||
|
|
||||||
|
/* <number> values */
|
||||||
|
zoom: 1.1;
|
||||||
|
zoom: 0.7;
|
||||||
|
|
||||||
|
/* Non-standard keyword values */
|
||||||
|
zoom: normal;
|
||||||
|
zoom: reset;
|
||||||
|
|
||||||
|
/* Global values */
|
||||||
|
zoom: inherit;
|
||||||
|
zoom: initial;
|
||||||
|
zoom: revert;
|
||||||
|
zoom: revert-layer;
|
||||||
|
zoom: unset;
|
||||||
|
```
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
# Template
|
|
||||||
```css
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
```css
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Movil */
|
|
||||||
|
|
||||||
|
|
||||||
/* Tablet */
|
|
||||||
@media (min-width: 600px) {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Desktop 1 */
|
|
||||||
@media (min-width: 900px) {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Desktop 2 */
|
|
||||||
@media (min-width: 1200px) {
|
|
||||||
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
# Zoom
|
|
||||||
|
|
||||||
```css
|
|
||||||
/* <percentage> values */
|
|
||||||
zoom: 50%;
|
|
||||||
zoom: 200%;
|
|
||||||
|
|
||||||
/* <number> values */
|
|
||||||
zoom: 1.1;
|
|
||||||
zoom: 0.7;
|
|
||||||
|
|
||||||
/* Non-standard keyword values */
|
|
||||||
zoom: normal;
|
|
||||||
zoom: reset;
|
|
||||||
|
|
||||||
/* Global values */
|
|
||||||
zoom: inherit;
|
|
||||||
zoom: initial;
|
|
||||||
zoom: revert;
|
|
||||||
zoom: revert-layer;
|
|
||||||
zoom: unset;
|
|
||||||
```
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
br
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
<header></header>
|
|
||||||
<nav></nav>
|
|
||||||
<aside></aside>
|
|
||||||
<main></main>
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
|
|
||||||
## Upload files
|
|
||||||
|
|
||||||
`multiple files`
|
|
||||||
|
|
||||||
```html
|
|
||||||
<form action="upload.php" method="post" enctype="multipart/form-data">
|
|
||||||
<input type="file" name="files[]" multiple>
|
|
||||||
<button type="submit">Upload</button>
|
|
||||||
</form>
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<form method="POST" enctype="multipart/form-data">
|
|
||||||
<input type="file" name="file">
|
|
||||||
<button type="submit">Upload & Get Hash</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
```html
|
|
||||||
<form>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<input type="date" required>
|
|
||||||
<input type="date">
|
|
||||||
<input type="time">
|
|
||||||
<input type="email">
|
|
||||||
<input type="tel">
|
|
||||||
<input type="color">
|
|
||||||
<input type="range">
|
|
||||||
<input type="number">
|
|
||||||
<input type="submit" value="Submit">
|
|
||||||
|
|
||||||
|
|
||||||
<input type="email">
|
|
||||||
<input type="tel">
|
|
||||||
<input type="range">
|
|
||||||
|
|
||||||
<input type="submit" value="Submit">
|
|
||||||
|
|
||||||
<form>
|
|
||||||
<input type="date" required>
|
|
||||||
<input type="date">
|
|
||||||
<input type="time">
|
|
||||||
<input type="email">
|
|
||||||
<input type="tel">
|
|
||||||
<input type="color">
|
|
||||||
<input type="range">
|
|
||||||
<input type="number">
|
|
||||||
<input list="facultades" name="facultad">
|
|
||||||
<datalist id="facultades">
|
|
||||||
<option value="Ingeniería de Sistemas">
|
|
||||||
<option value="Ingeniería Civil">
|
|
||||||
<option value="Ingeniería Industrial">
|
|
||||||
</datalist>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
@ -0,0 +1,426 @@
|
||||||
|
<!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>
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
# CSS import
|
|
||||||
|
|
||||||
```html
|
|
||||||
<link rel="stylesheet" href="styles.css">
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
## Example
|
|
||||||
```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>
|
|
||||||
<link rel="stylesheet" href="styles.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<main>
|
|
||||||
<div class="main"></div>
|
|
||||||
</main>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,627 @@
|
||||||
|
# Html
|
||||||
|
|
||||||
|
## Template
|
||||||
|
|
||||||
|
**Template 0**
|
||||||
|
```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>
|
||||||
|
|
||||||
|
<form action="" method="get">
|
||||||
|
|
||||||
|
<input type="text" name="" id="">
|
||||||
|
<button type="button"></button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Template !**
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Template 2**
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<nav>
|
||||||
|
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<article></article>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Import
|
||||||
|
|
||||||
|
|
||||||
|
**CSS import**
|
||||||
|
```html
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Semantic
|
||||||
|
|
||||||
|
**Header**
|
||||||
|
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h1></h1>
|
||||||
|
<h2></h2>
|
||||||
|
<h3></h3>
|
||||||
|
<h4></h4>
|
||||||
|
<h5></h5>
|
||||||
|
<h6></h6>
|
||||||
|
```
|
||||||
|
|
||||||
|
**div**
|
||||||
|
```html
|
||||||
|
<header>
|
||||||
|
<nav></nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<article></article>
|
||||||
|
</section>
|
||||||
|
<aside></aside>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## Table
|
||||||
|
|
||||||
|
```html
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th></th>
|
||||||
|
<th></th>
|
||||||
|
<th></th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Form
|
||||||
|
|
||||||
|
## Upload files
|
||||||
|
|
||||||
|
`multiple files`
|
||||||
|
|
||||||
|
```html
|
||||||
|
<form action="upload.php" method="post" enctype="multipart/form-data">
|
||||||
|
<input type="file" name="files[]" multiple>
|
||||||
|
<button type="submit">Upload</button>
|
||||||
|
</form>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
**form**
|
||||||
|
|
||||||
|
```html
|
||||||
|
|
||||||
|
<form method="POST" enctype="multipart/form-data">
|
||||||
|
<input type="file" name="file">
|
||||||
|
<button type="submit">Upload & Get Hash</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<form>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<input type="date" required>
|
||||||
|
<input type="date">
|
||||||
|
<input type="time">
|
||||||
|
<input type="email">
|
||||||
|
<input type="tel">
|
||||||
|
<input type="color">
|
||||||
|
<input type="range">
|
||||||
|
<input type="number">
|
||||||
|
<input type="submit" value="Submit">
|
||||||
|
|
||||||
|
|
||||||
|
<input type="email">
|
||||||
|
<input type="tel">
|
||||||
|
<input type="range">
|
||||||
|
|
||||||
|
<input type="submit" value="Submit">
|
||||||
|
|
||||||
|
<form>
|
||||||
|
<input type="date" required>
|
||||||
|
<input type="date">
|
||||||
|
<input type="time">
|
||||||
|
<input type="email">
|
||||||
|
<input type="tel">
|
||||||
|
<input type="color">
|
||||||
|
<input type="range">
|
||||||
|
<input type="number">
|
||||||
|
<input list="facultades" name="facultad">
|
||||||
|
<datalist id="facultades">
|
||||||
|
<option value="Ingeniería de Sistemas">
|
||||||
|
<option value="Ingeniería Civil">
|
||||||
|
<option value="Ingeniería Industrial">
|
||||||
|
</datalist>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### General
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<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">
|
||||||
|
<title>Titulo</title>
|
||||||
|
|
||||||
|
<!-- * Posicionamiento web | Palabras cables-->
|
||||||
|
<meta name="keywords" content="Contenido,Contenido2,Contenido3">
|
||||||
|
|
||||||
|
<!-- * Describir la pagina -->
|
||||||
|
<!-- * Entre 70 a 140 carracteres -->
|
||||||
|
<meta name="description" content="Descripcion del contenido">
|
||||||
|
|
||||||
|
<!-- * El author de la pagina -->
|
||||||
|
<meta name="author" content="El autor de la pagina">
|
||||||
|
|
||||||
|
<!-- * Copyright -->
|
||||||
|
<meta name="Copyright" content="La empresa inc.">
|
||||||
|
|
||||||
|
<!-- * Indexada o no -->
|
||||||
|
<meta name="robots" content="index">
|
||||||
|
<meta name="robots" content="noindex">
|
||||||
|
|
||||||
|
<!-- * Ni idea que es -->
|
||||||
|
<meta name="robots" content="follow">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- * index.html -->
|
||||||
|
<!-- * Comentario en HTML -->
|
||||||
|
|
||||||
|
<!-- * Titulos con valor semantico -->
|
||||||
|
<h1>H1</h1>
|
||||||
|
<h2>H2</h2>
|
||||||
|
<h3>H3</h3>
|
||||||
|
<h4>H4</h4>
|
||||||
|
<h5>H5</h5>
|
||||||
|
<h6>H6</h6>
|
||||||
|
|
||||||
|
<!-- * Typos de textos -->
|
||||||
|
<p>Parrafo</p>
|
||||||
|
<b>Negrita</b>
|
||||||
|
<i>Italica</i>
|
||||||
|
<strike>Tachada</strike>
|
||||||
|
<small>Chiquita</small>
|
||||||
|
|
||||||
|
<!-- * Salto de linea -->
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<!-- * Botton -->
|
||||||
|
<button atributo="valor">Soy un boton</button>
|
||||||
|
|
||||||
|
<!-- * Links -->
|
||||||
|
<a href="#">Link</a>
|
||||||
|
<a href="index.html">Link Index</a>
|
||||||
|
<a href="../">Link Index</a>
|
||||||
|
<a href="./index.html">Link Index</a>
|
||||||
|
|
||||||
|
<a href="./index.html" target="_blank">Link en una nueva pagina</a>
|
||||||
|
|
||||||
|
<!-- ? Listas -->
|
||||||
|
|
||||||
|
<!-- * Lista desordenada -->
|
||||||
|
<ul>
|
||||||
|
<li>Esto es una lista</li>
|
||||||
|
<li>Esto es una lista</li>
|
||||||
|
<li>Esto es una lista</li>
|
||||||
|
<li>Esto es una lista</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<!-- * Lista ordenadas -->
|
||||||
|
<ol>
|
||||||
|
<li>Esto es una lista</li>
|
||||||
|
<li>Esto es una lista</li>
|
||||||
|
<li>Esto es una lista</li>
|
||||||
|
<li>Esto es una lista</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Deprecate
|
||||||
|
|
||||||
|
```html
|
||||||
|
<br>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<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">
|
||||||
|
<title>Titulo</title>
|
||||||
|
|
||||||
|
<!-- * Posicionamiento web | Palabras cables-->
|
||||||
|
<meta name="keywords" content="Contenido,Contenido2,Contenido3">
|
||||||
|
|
||||||
|
<!-- * Describir la pagina -->
|
||||||
|
<!-- * Entre 70 a 140 carracteres -->
|
||||||
|
<meta name="description" content="Descripcion del contenido">
|
||||||
|
|
||||||
|
<!-- * El author de la pagina -->
|
||||||
|
<meta name="author" content="El autor de la pagina">
|
||||||
|
|
||||||
|
<!-- * Copyright -->
|
||||||
|
<meta name="Copyright" content="La empresa inc.">
|
||||||
|
|
||||||
|
<!-- * Indexada o no -->
|
||||||
|
<meta name="robots" content="index">
|
||||||
|
<meta name="robots" content="noindex">
|
||||||
|
|
||||||
|
<!-- * Ni idea que es -->
|
||||||
|
<meta name="robots" content="follow">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- * index.html -->
|
||||||
|
<!-- * Comentario en HTML -->
|
||||||
|
|
||||||
|
<!-- * Titulos con valor semantico -->
|
||||||
|
<h1>H1</h1>
|
||||||
|
<h2>H2</h2>
|
||||||
|
<h3>H3</h3>
|
||||||
|
<h4>H4</h4>
|
||||||
|
<h5>H5</h5>
|
||||||
|
<h6>H6</h6>
|
||||||
|
|
||||||
|
<!-- * Typos de textos -->
|
||||||
|
<p>Parrafo</p>
|
||||||
|
<b>Negrita</b>
|
||||||
|
<i>Italica</i>
|
||||||
|
<strike>Tachada</strike>
|
||||||
|
<small>Chiquita</small>
|
||||||
|
|
||||||
|
<!-- * Salto de linea -->
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<!-- * Botton -->
|
||||||
|
<button atributo="valor">Soy un boton</button>
|
||||||
|
|
||||||
|
<!-- * Links -->
|
||||||
|
<a href="#">Link</a>
|
||||||
|
<a href="index.html">Link Index</a>
|
||||||
|
<a href="../">Link Index</a>
|
||||||
|
<a href="./index.html">Link Index</a>
|
||||||
|
|
||||||
|
<a href="./index.html" target="_blank">Link en una nueva pagina</a>
|
||||||
|
|
||||||
|
<!-- ? Listas -->
|
||||||
|
|
||||||
|
<!-- * Lista desordenada -->
|
||||||
|
<ul>
|
||||||
|
<li>Esto es una lista</li>
|
||||||
|
<li>Esto es una lista</li>
|
||||||
|
<li>Esto es una lista</li>
|
||||||
|
<li>Esto es una lista</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<!-- * Lista ordenadas -->
|
||||||
|
<ol>
|
||||||
|
<li>Esto es una lista</li>
|
||||||
|
<li>Esto es una lista</li>
|
||||||
|
<li>Esto es una lista</li>
|
||||||
|
<li>Esto es una lista</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```html
|
||||||
|
<table class="database-data">
|
||||||
|
<tr class="tr-head">
|
||||||
|
<th>#</th>
|
||||||
|
<th>Nombre</th>
|
||||||
|
<th>Apellido</th>
|
||||||
|
<th class="test">Email</th>
|
||||||
|
<th>Edad</th>
|
||||||
|
<th class="test">Carrera</th>
|
||||||
|
<th class="a">Acciones</th>
|
||||||
|
</tr>
|
||||||
|
<tr class="database-no-data display-none">
|
||||||
|
<td class="database-no-data" colspan="7">
|
||||||
|
No hay resultados.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
```html
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th>#</th>
|
||||||
|
<th>#</th>
|
||||||
|
<th>#</th>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
```html
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th>Mul</th>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
```html
|
||||||
|
<table>
|
||||||
|
<caption>5 times table (5 × 0–25)</caption>
|
||||||
|
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">n</th>
|
||||||
|
<th scope="col">5 × n</th>
|
||||||
|
<th scope="col">Result</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">0</th>
|
||||||
|
<td>5 × 0</td>
|
||||||
|
<td>0</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">1</th>
|
||||||
|
<td>5 × 1</td>
|
||||||
|
<td>5</td>
|
||||||
|
</tr>
|
||||||
|
<!-- repeat rows -->
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
```html
|
||||||
|
<table>
|
||||||
|
<caption>@Model.msg</caption>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">n</th>
|
||||||
|
<th scope="col">Left</th>
|
||||||
|
<th scope="col">Right</th>
|
||||||
|
<th scope="col">Result</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
@foreach (var row in Model.rows)
|
||||||
|
{
|
||||||
|
<tr>
|
||||||
|
<th scope="row">@row.N</th>
|
||||||
|
<td>@row.Left</td>
|
||||||
|
<td>@row.Right</td>
|
||||||
|
<td>@row.Result</td>
|
||||||
|
</tr>
|
||||||
|
}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
```html
|
||||||
|
<table>
|
||||||
|
<caption></caption>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">#</th>
|
||||||
|
<th scope="col">#</th>
|
||||||
|
<th scope="col">#</th>
|
||||||
|
<th scope="col">#</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody>
|
||||||
|
@foreach (var row in Model.rows)
|
||||||
|
{
|
||||||
|
<tr>
|
||||||
|
<th scope="row">@row.N</th>
|
||||||
|
<td>@row.Left</td>
|
||||||
|
<td>@row.Right</td>
|
||||||
|
<td>@row.Result</td>
|
||||||
|
</tr>
|
||||||
|
}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
@{
|
||||||
|
Layout = null;
|
||||||
|
@model Laboratorio201.Models.WS.MulTable.MulTable
|
||||||
|
}
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
<title></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div>
|
||||||
|
<form action="/Home/Index" method="post">
|
||||||
|
<input type="number" name="val" placeholder="10" />
|
||||||
|
<button type="submit">Send</button>
|
||||||
|
</form>
|
||||||
|
@if (String.IsNullOrEmpty(Model.msg) || Model.msg == "Error parse: try a number")
|
||||||
|
{
|
||||||
|
<h2>Tabla de mul</h2>
|
||||||
|
|
||||||
|
if (Model.msg == "Error parse: try a number")
|
||||||
|
{
|
||||||
|
<p>@Model.msg</p>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<h2></h2>
|
||||||
|
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<caption>@Model.msg</caption>
|
||||||
|
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">Mul</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody>
|
||||||
|
@foreach (var row in Model.result)
|
||||||
|
{
|
||||||
|
<tr>
|
||||||
|
<th scope="row">Table:</th>
|
||||||
|
<td>@row</td>
|
||||||
|
</tr>
|
||||||
|
}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
h1 {color:red;}
|
||||||
|
p {color:blue;}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
class="fixed"
|
||||||
|
<style>
|
||||||
|
table.fixed {
|
||||||
|
table-layout: fixed;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.fixed th,
|
||||||
|
table.fixed td {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title></title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -0,0 +1,258 @@
|
||||||
|
// ! Estas son notas de programacion.
|
||||||
|
|
||||||
|
// ? Curso finalizados
|
||||||
|
|
||||||
|
CodigoFacilito - Curso Online de Inteligencia Artificial para Juegos
|
||||||
|
|
||||||
|
// ! Java script Info
|
||||||
|
|
||||||
|
|
||||||
|
// * Librerias
|
||||||
|
// ? Rust Instalacion
|
||||||
|
cargo init --lib
|
||||||
|
npm init -y
|
||||||
|
npm install -D webpack webpack-cli webpack-dev-server
|
||||||
|
npm install -D html-webpack-plugin
|
||||||
|
|
||||||
|
Web assambly
|
||||||
|
https://github.com/rustwasm/wasm-pack
|
||||||
|
https://rustwasm.github.io/wasm-pack/
|
||||||
|
|
||||||
|
npm install -D @wasm-tool/wasm-pack-plugin
|
||||||
|
|
||||||
|
// ! Comandos
|
||||||
|
Ctrl + Alt + I
|
||||||
|
|
||||||
|
// ! Codigo
|
||||||
|
// ? Esto es codig
|
||||||
|
|
||||||
|
<script src="main.js"></script>
|
||||||
|
|
||||||
|
// ! Para tenerlo en el propia HTML
|
||||||
|
<script stype="text/javascript"></script>
|
||||||
|
|
||||||
|
|
||||||
|
// * Comentarios
|
||||||
|
// Comentarios
|
||||||
|
|
||||||
|
/*
|
||||||
|
Comentaros
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
// * Funciones
|
||||||
|
<- Funcionan en consola
|
||||||
|
|
||||||
|
// * Imprimir en consola
|
||||||
|
console.log()
|
||||||
|
// * Cuidado
|
||||||
|
console.warn()
|
||||||
|
// * Error
|
||||||
|
console.error()
|
||||||
|
// * Informacion
|
||||||
|
console.Info()
|
||||||
|
|
||||||
|
// * Comandos
|
||||||
|
window
|
||||||
|
|
||||||
|
// * Typo de datos
|
||||||
|
typeof()
|
||||||
|
|
||||||
|
// * Enviar una alerta al navegador
|
||||||
|
alert()
|
||||||
|
|
||||||
|
// * Variables
|
||||||
|
// * Siempre utilizar let o const
|
||||||
|
// ! Nunca utilizar var
|
||||||
|
let variables = "Siempre utilizar let"
|
||||||
|
|
||||||
|
// ? Number | Para todos los tipos de numeros, [Enteros & Decimales]
|
||||||
|
0
|
||||||
|
// ? String | Cadena de texto
|
||||||
|
"String"
|
||||||
|
// ? Bolean | false, true
|
||||||
|
true
|
||||||
|
false
|
||||||
|
// ? Coleccion de datos
|
||||||
|
// ? Array (Arreglo) | object
|
||||||
|
["Uno", "Dos", "Tres"]
|
||||||
|
|
||||||
|
// * Falta de valor
|
||||||
|
undefined
|
||||||
|
|
||||||
|
// * Nulo
|
||||||
|
null
|
||||||
|
|
||||||
|
// ! Codigo HTML
|
||||||
|
|
||||||
|
// * Al clickear el boton (Hace una funcion)
|
||||||
|
<button onclick="presiono_click()"></button>
|
||||||
|
|
||||||
|
|
||||||
|
function presiono_click() {
|
||||||
|
console.log("Cick en boton");
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// ! Objtos
|
||||||
|
|
||||||
|
let objeto = {
|
||||||
|
nombre: "Nombre"
|
||||||
|
}
|
||||||
|
|
||||||
|
objeto.nombre = "Objeto"
|
||||||
|
|
||||||
|
let objetos = {
|
||||||
|
nombre: "Objeto",
|
||||||
|
apellido: "Objeti",
|
||||||
|
edad: 3,
|
||||||
|
dirrecion: {
|
||||||
|
tienda: "Salare",
|
||||||
|
cuidad: "Brofoli",
|
||||||
|
edificio: {
|
||||||
|
nombre: "Edificio secundario",
|
||||||
|
contacto: "2222-3333"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log( objetos.dirrecion.tienda)
|
||||||
|
|
||||||
|
objetos.dirrecion.zicode = 00000;
|
||||||
|
console.log( objetos.dirrecion.zicode)
|
||||||
|
|
||||||
|
let edificio = objetos.dirrecion.edificio
|
||||||
|
|
||||||
|
edificio.nopiso = "Piso"
|
||||||
|
|
||||||
|
let objetos_nombre = objetos["nombre"]
|
||||||
|
let objetos_nombre2 = objetos["dirrecion"]["cuidad"]
|
||||||
|
|
||||||
|
let campo_edad = "edad";
|
||||||
|
let objetos_nombre3 = objetos[campo_edad]
|
||||||
|
|
||||||
|
|
||||||
|
// ! Mas codigo
|
||||||
|
|
||||||
|
// ! Funcion
|
||||||
|
function primera_funcion() {
|
||||||
|
let a = 20;
|
||||||
|
console.log(a);
|
||||||
|
}
|
||||||
|
|
||||||
|
primera_funcion();
|
||||||
|
|
||||||
|
// ! Funcion 2
|
||||||
|
function anonima( fn ) {
|
||||||
|
fn();
|
||||||
|
}
|
||||||
|
|
||||||
|
anonima(
|
||||||
|
function() {
|
||||||
|
console.log("Esto es una fncion anonima");
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// ! Funciones
|
||||||
|
|
||||||
|
let mi_funcion = function() {
|
||||||
|
console.log("Mi funcion")
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// * Funcion random
|
||||||
|
Math.random();
|
||||||
|
|
||||||
|
function numero_aleatorio() {
|
||||||
|
|
||||||
|
return Math.random();
|
||||||
|
}
|
||||||
|
|
||||||
|
function obtener_nombre() {
|
||||||
|
return "Nombre"
|
||||||
|
}
|
||||||
|
|
||||||
|
function booleano() {
|
||||||
|
|
||||||
|
if(numero_aleatorio() > 0.5) {
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function a() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// * El nombre de la funcion
|
||||||
|
a.name
|
||||||
|
|
||||||
|
a.apply
|
||||||
|
|
||||||
|
let nombre = "nombre"
|
||||||
|
|
||||||
|
let persona = {
|
||||||
|
nombre: "Maria",
|
||||||
|
apellido: "Dubon",
|
||||||
|
imprimir_nombre: function () {
|
||||||
|
console.log( nombre );
|
||||||
|
},
|
||||||
|
direccion: {
|
||||||
|
pais: "Costa rica",
|
||||||
|
obtener_pais: function () {
|
||||||
|
|
||||||
|
const self = this;
|
||||||
|
|
||||||
|
let nuevaDireccion = function () {
|
||||||
|
console.log( self );
|
||||||
|
console.log(`Direccion es en ${pais}`);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
nuevaDireccion();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
persona.imprimir_nombre();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// ? Palabras reservadas
|
||||||
|
|
||||||
|
// * New
|
||||||
|
// * Crea un objeto vacio
|
||||||
|
|
||||||
|
function personas(nombre, apellido, edad) {
|
||||||
|
const self = this;
|
||||||
|
|
||||||
|
self.nombre = nombre;
|
||||||
|
self.apellido = apellido;
|
||||||
|
self.edad = edad;
|
||||||
|
|
||||||
|
self.nombre_completo = function () {
|
||||||
|
return `${self.nombre} ${self.apellido} ${self.edad}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let persona = new personas("Juan", "Loper", 30);
|
||||||
|
|
||||||
|
|
||||||
|
console.log(persona);
|
||||||
|
console.log(persona.nombre);
|
||||||
|
console.log(persona.nombre_completo());
|
||||||
|
|
||||||
|
|
||||||
|
------------------------------------
|
||||||
|
// ? Nuevo
|
||||||
|
|
||||||
|
// * Macro atribute
|
||||||
|
#[]
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
## Js
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
```js
|
||||||
|
var // Declarar una variable inicializada opcionalmente un valor
|
||||||
|
let // Declarar una vasiable local en un bloque de ambito inicializando opcionales valor
|
||||||
|
const // Declarar
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
```js
|
||||||
|
const pi = 3.141519
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
```js
|
||||||
|
function ()
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
|
||||||
|
var carro = {
|
||||||
|
getCarro: "Carro"
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log(carro.getCarro);
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
**console**
|
||||||
|
```js
|
||||||
|
const a = "Hola mundo!!";
|
||||||
|
console.log(a);
|
||||||
|
|
||||||
|
// No re asignaicon
|
||||||
|
const arr = [1, 2, 3, 4, 5];
|
||||||
|
arr.push(a);
|
||||||
|
|
||||||
|
|
||||||
|
let b = 10;
|
||||||
|
|
||||||
|
const name = "My nombre";
|
||||||
|
const message = `Message Hola soy ${name}`
|
||||||
|
console.log(`${name}`);
|
||||||
|
console.error(`${name}`);
|
||||||
|
|
||||||
|
|
||||||
|
document.querySelector("span").textContent = message;
|
||||||
|
// Function landa
|
||||||
|
// Funcion anonima
|
||||||
|
document.querySelector("button").addEventListener("click", () => {
|
||||||
|
document.querySelector("span").classList.toggle("red");
|
||||||
|
});
|
||||||
|
|
||||||
|
function suma(a, b)
|
||||||
|
{
|
||||||
|
return a + b;
|
||||||
|
}
|
||||||
|
|
||||||
|
suma;
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
# nginx
|
||||||
|
|
||||||
|
https://nginx.org/en/
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
# Tor Browser
|
||||||
|
|
||||||
|
https://www.torproject.org/
|
||||||
|
https://www.torproject.org/download/
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
<?php
|
<?php
|
||||||
$page = "Inicio";
|
$page = "Inicio";
|
||||||
include_once "../private/template/header.php";
|
include_once "../private/template/header.php";
|
||||||
|
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<link rel="stylesheet" href="assets/css/page-home.css">
|
<link rel="stylesheet" href="assets/css/page-home.css">
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
ffmpeg -i input.mp4 out.webm
|
||||||
|
ffmpeg -i input.mp4 out.ogv
|
||||||
|
|
@ -3,7 +3,7 @@ regex101
|
||||||
wappalyze.com
|
wappalyze.com
|
||||||
|
|
||||||
https://builtwith.com/es/
|
https://builtwith.com/es/
|
||||||
|
|
||||||
whois.domaintools.com
|
|
||||||
|
|
||||||
ipinfo
|
ipinfo
|
||||||
|
|
||||||
|
[whois](whois.domaintools.com)
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue