-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
359 lines (345 loc) · 21.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
<!DOCTYPE html>
<html lang="es">
<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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@500&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Source+Code+Pro:wght@500&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="./css/app.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="shortcut icon" href="./img/soft3.png" type="image/x-icon">
<title>Apuntes de programación Web</title>
</head>
<body>
<div class="container">
<header>
<div class="nav-menu-logo">
<i class="fa-solid fa-bars"></i>
<h1>
ArdaDev
</h1>
<div class="nav-menu-logo_button">
<div class="mode-black-button">
<span class="title-switch">Modo Oscuro</span>
<label class="switch">
<input class="cb" type="checkbox">
<span class="slider"></span>
</label>
<!-- <i class="fa-solid fa-language btn-idioma"></i> -->
</div>
<!-- <div class="window-language">
<div class="menu-language">
<span>Seleccione un idioma</span>
<ul>
<li><i class="fa-solid fa-language"></i> <b>ES</b> Español</li>
<li><i class="fa-solid fa-language"></i> <b>EN</b> Inglés</li>
</ul>
</div>
</div> -->
</div>
</div>
<nav>
<div class="subtitulo">
<h2>Apuntes de programación web: HTML, CSS y JavaScript.</h2>
</div>
</nav>
</header>
<div class="nav">
<li class="nav-button-start">
<button class="nav-button nav-button-inicio">INICIO</button>
</li>
<li>
<span class="li-separator"></span>
<button class="nav-button nav-button-html">HTML5</button>
</li>
<li>
<span class="li-separator"></span>
<button class="nav-button nav-button-css">CSS</button>
</li>
<li class="nav-button-end">
<span class="li-separator"></span>
<button class="nav-button nav-button-js">JAVASCRIPT</button>
</li>
<!-- <li class="nav-button-end">
<span class="li-separator"></span>
<button class="nav-button">SOBRE NOSOTROS</button>
</li> -->
</div>
<div class="container-menu">
<div class="menu">
<div class="list">
<div class="navegacion-movil">
<li><a href="#"><i class="fa-solid fa-house"></i><span class="div-list-title1">INICIO</span></a></li>
<div class="li-separator2"></div>
<li><a href="./content/pag-html.html"><i class="fa-brands fa-html5"></i><span class="div-list-title1">HTML5</span></a></li>
<div class="li-separator2"></div>
<li><a href="./content/pag-estilos.html"><i class="fa-brands fa-css3-alt"></i><span class="div-list-title1">CSS</span></a></li>
<div class="li-separator2"></div>
<li><a href="./content/pag-javascript.html"><i class="fa-brands fa-square-js"></i><span class="div-list-title1">JAVASCRIPT</span></a></li>
<!-- <div class="li-separator2"></div>
<li><a href="#sobre-nosotros"><i class="fa-solid fa-user"></i><span class="div-list-title1">SOBRE NOSOTROS</span></a></li> -->
</div>
<li><a href="#int-html"><span class="div-list-title1">Introduccion HTML</span></a></li>
<div class="li-separator2"></div>
<li><a href="#int-css"><span class="div-list-title1">Introduccion CSS</span></a></li>
<div class="li-separator2"></div>
<li><a href="#int-javascript"><span class="div-list-title1">Introduccion Javascript</span></a></li>
</div>
</div>
<div class="cerrar-navegacion-movil">
</div>
<article>
<section id="int-html">
<h3>HTML: Lenguaje de etiquetas de hipertexto</h3>
<br>
<p>
HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup Language) es el componente más básico de la Web. Define el significado y la estructura del contenido web. Además de HTML, generalmente se utilizan otras tecnologías para describir la apariencia/presentación de una página web (CSS) o la funcionalidad/comportamiento (JavaScript).
</p>
<br>
<p>
"Hipertexto" hace referencia a los enlaces que conectan páginas web entre sí, ya sea dentro de un único sitio web o entre sitios web. Los enlaces son un aspecto fundamental de la Web. Al subir contenido a Internet y vincularlo a las páginas creadas por otras personas, te conviertes en un participante activo en la «World Wide Web» (Red Informática Mundial).
</p>
<br>
<p>
HTML utiliza "marcas" para etiquetar texto, imágenes y otro contenido para mostrarlo en un navegador Web. Las marcas HTML incluyen "elementos" especiales como <b><head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output> (en-US), <progress>, <video>, <ul>, <ol>, <li></b> y muchos otros.
</p>
<br>
<p>
Un elemento HTML se distingue de otro texto en un documento mediante "etiquetas", que consisten en el nombre del elemento rodeado por "<" y ">". El nombre de un elemento dentro de una etiqueta no distingue entre mayúsculas y minúsculas. Es decir, se puede escribir en mayúsculas, minúsculas o una mezcla. Por ejemplo, la etiqueta <b><title></b> se puede escribir como <b><Title></b>, <b><TITLE></b> o de cualquier otra forma.
</p>
<br>
<p>
Los siguientes artículos pueden ayudarte a obtener más información sobre HTML.
</p>
</section>
<section id="int-css">
<h3>CSS</h3>
<br>
<p>
Hojas de Estilo en Cascada (del inglés Cascading Style Sheets) o CSS es el lenguaje de estilos utilizado para describir la presentación de documentos HTML o XML (en-US) (incluyendo varios lenguajes basados en XML como SVG, MathML o XHTML). CSS describe como debe ser renderizado el elemento estructurado en la pantalla, en papel, en el habla o en otros medios.
</p>
<br>
<p>
CSS es uno de los lenguajes base de la Open Web y posee una especificación estandarizada por parte del W3C. Anteriormente , el desarrollo de varias partes de las especificaciones de CSS era realizado de manera sincrónica, lo que permitía el versionado de las recomendaciones. Probablemente habrás escuchado acerca de CSS1, CSS2.1, CSS3. Sin embargo, CSS4 nunca se ha lanzado como una versión oficial.
</p>
<br>
<p>
Desde CSS3, el alcance de las especificaciones se incrementó de forma significativa y el progreso de los diferentes módulos de CSS comenzó a mostrar varias diferencias, lo que hizo más efectivo desarrollar y publicar recomendaciones separadas por módulos. En vez de versionar las especificaciones de CSS, la W3C actualmente realiza una captura de las ultimas espcificaciones estables de CSS.
</p>
</section>
<section id="int-javascript">
<h3>Javascript</h3>
<br>
<p>
JavaScript (JS) es un lenguaje de programación ligero, interpretado, o compilado justo-a-tiempo (just-in-time) con funciones de primera clase. Si bien es más conocido como un lenguaje de scripting (secuencias de comandos) para páginas web, y es usado en muchos entornos fuera del navegador, tal como Node.js, Apache CouchDB y Adobe Acrobat JavaScript es un lenguaje de programación basada en prototipos, multiparadigma, de un solo hilo, dinámico, con soporte para programación orientada a objetos, imperativa y declarativa (por ejemplo programación funcional). Lee más en acerca de JavaScript.
</p>
<br>
<p>
Esta sección está dedicada al lenguaje JavaScript en sí, y no a las partes que son específicas de las páginas web u otros entornos host. Para información acerca de APIs específicas para páginas Web, consulta APIs Web y DOM.
</p>
<br>
<p>
El estándar para JavaScript es ECMAScript (ECMA-262) y la especificación de la API para la Internacionalización de ECMAScript (ECMA-402). La documentación en MDN está basada enteramente en las últimas versiones preliminares de ECMA-262 y ECMA-402. Y en algunos casos donde algunas propuestas para nuevas funciones para ECMAScript ya hayan sido implementadas en los navegadores, la documentación y algunos artículos de MDN pueden hacer uso de algunas de estas funciones.
</p>
<br>
<p>
No confundas JavaScript con el lenguaje de programación Java. Ambos "Java" y "JavaScript" son marcas o marcas registradas de Oracle en los Estados Unidos y otros países. Sin embargo, los dos lenguajes de programación tienen sintaxis, semántica y usos muy diferentes.
</p>
</section>
</article>
<div class="focus-menu">
<div class="list-focus">
<h4>Material complementario</h4>
<div class="li-separator2"></div>
<div class="contenido-complementario">
<div class="contenido-enlaces">
<ul>
<li>HTML <a href="https://developer.mozilla.org/es/docs/Web/HTML">https://developer.mozilla.org/es/docs/Web/HTML.</a>
</li>
<li>CSS <a href="https://developer.mozilla.org/es/docs/Web/CSS">https://developer.mozilla.org/es/docs/Web/CSS.</a>
</li>
<li>Javascript <a href="https://developer.mozilla.org/es/docs/Web/JavaScript">https://developer.mozilla.org/es/docs/Web/JavaScript.</a>
</li>
</ul>
</div>
<div class="contenido-videos">
<iframe width="100%" src="https://www.youtube.com/embed/kN1XP-Bef7w" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe width="100%" src="https://www.youtube.com/embed/OWKXEJN67FE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe width="100%" src="https://www.youtube.com/embed/z95mZVUcJ-E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe width="100%" src="https://www.youtube.com/embed/xOinGb2MZSk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe width="100%" src="https://www.youtube.com/embed/EbMi1Qj4rVE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<footer>
<!-- <h4>ARTÍCULOS RELACIONADOS</h4>
<div class="carousel">
<div class="carrusel-list" id="carrusel-list">
<button class="carrusel-arrow carrusel-prev" id="button-prev" data-button="button-prev" onclick="app.processingButton(event)"><</button>
<div class="carrusel-track" id="track">
<div class="carrusel">
<div>
<a href="./pag-estilos.html">
<picture>
<img src="./img/logoHTML.svg">
</picture>
</a>
</div>
</div>
<div class="carrusel">
<div>
<a href="./pag-estilos.html">
<picture>
<img src="./img/logoCSS.svg">
</picture>
</a>
</div>
</div>
<div class="carrusel">
<div>
<a href="./pag-javascript.html">
<picture>
<img src="./img/logoJS.svg">
</picture>
</a>
</div>
</div>
<div class="carrusel">
<div>
<a href="">
<picture>
<img src="./img/logoJava.png">
</picture>
</a>
</div>
</div>
<div class="carrusel">
<div>
<a href="">
<picture>
<img src="./img/logoAndroid.svg">
</picture>
</a>
</div>
</div>
<div class="carrusel">
<div>
<a href="">
<picture>
<img src="./img/logoPython.svg">
</picture>
</a>
</div>
</div>
</div>
<button class="carrusel-arrow carrusel-next" id="button-next" data-button="button-next" onclick="app.processingButton(event)">></button>
</div>
</div>
<h4 id="trabajos-realizados">ALGUNOS TRABAJOS REALIZADOS</h4>
<div class="carrusel-proyectos">
<div class="slider2">
<div class="slides">
<input type="radio" name="radio-btn" id="radio1">
<input type="radio" name="radio-btn" id="radio2">
<input type="radio" name="radio-btn" id="radio3">
<input type="radio" name="radio-btn" id="radio4">
<div class="slide first">
<img src="./img/logoHTML.svg">
</div>
<div class="slide">
<img src="./img/logoHTML.svg">
</div>
<div class="slide">
<img src="./img/logoHTML.svg">
</div>
<div class="slide">
<img src="./img/logoHTML.svg">
</div>
<div class="navigation-auto">
<div class="auto-btn1"></div>
<div class="auto-btn2"></div>
<div class="auto-btn3"></div>
<div class="auto-btn4"></div>
</div>
</div>
<div class="navigation-manual">
<label for="radio1" class="manual-btn"></label>
<label for="radio2" class="manual-btn"></label>
<label for="radio3" class="manual-btn"></label>
<label for="radio4" class="manual-btn"></label>
</div>
</div>
</div> -->
<!-- <div id="sobre-nosotros">
<div class="card-presentation">
<div class="photo">
<img src="./img/foto-perfil.jpg">
<h5>Dev. Daniel Quispe Kuno</h5>
<h5>Ingeniero de Sistemas</h5>
</div>
<div class="presentation">
<p>
Estudiante de la Carrera de Informática en La Universidad Mayor de San Andrés con conocimientos en el área de desarrollo web y Android.
</p>
</div>
</div>
</div> -->
<div class="block-footer">
<div class="description-final">
<h6>ArdaDev</h6>
<p>Desarrollando para hacer más fácil la vida e interacción entre nosotros. Por un sano acercamiento a la tecnología.</p>
</div>
<div class="description-skills">
<h6>Habilidades obtenidas</h6>
<div class="list-skill">
<div class="skill">
<img src="./img/soft3.png">
</div>
<div class="skill">
<img src="./img/soft1.png">
</div>
<div class="skill">
<img src="./img/soft4.png">
</div>
</div>
</div>
<div class="description-company">
<h6>Otras notas</h6>
<a href="./content/pag-html.html">HTML</a>
<a href="./content/pag-estilos.html">CSS</a>
<a href="./content/pag-javascript.html">Javascript</a>
<a href="https://thecomediandan.github.io/notas-git-con-angular-17-no-standalone" target="_blank">Git</a>
</div>
<div class="description-social">
<h6>Redes sociales</h6>
<div class="list-social">
<a href="https://www.youtube.com/channel/UCE7zY6OODXkdP3YLZXeFLeg" target="_blank"><i class="fa-brands fa-youtube"></i></a>
<a href="https://twitter.com/DanielDanish1" target="_blank"><i class="fa-brands fa-twitter"></i></a>
<a href="https://github.com/thecomediandan" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
</div>
<div class="li-separator2 separator-final"></div>
<div class="final">
<p>
Todos los derechos reservados © 2023 | <b>ArdaDev</b>
</p>
</div>
<div class="boton-arriba">
<a href="#"><i class="fa-sharp fa-regular fa-circle-up"></i></a>
</div>
</footer>
</div>
<script src="https://kit.fontawesome.com/4b64eb3a04.js" crossorigin="anonymous"></script>
<script src="./js/js-estilos.js"></script>
<script src="./js/nav-inicio.js"></script>
</body>
</html>