-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
347 lines (289 loc) · 21 KB
/
Copy pathindex.html
File metadata and controls
347 lines (289 loc) · 21 KB
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
<!DOCTYPE html>
<html lang="es">
<head>
<title>Aprendiendo HTML desde 1%</title>
<link rel="stylesheet" href="style.css" />
<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=Montserrat:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<h1 id="comienzo">
Definición de HTML:
</h1>
<p>
Hyper Text Markup Language:<br>
Lenguaje de programación de etiquetas, que sirve como una estructura de arbol anidado
para darle estructura a el contenido de una pagina o aplicacion web.
</p>
<h2>
Estructura HTML
</h2>
<p>
Sistemas de Etiquetas dentado, que se compone por bloques. <br>
<!--aca debo colocar la imagen de ejemplo de la estructura-->
<img src="img/Estructura.png" />
<img src="img/Estructura visual.png" />
<img src="img/estructure_code.png" />
<hr>
</p>
<h3>
La Etiqueta:
</h3>
<p>
Consta de 3 partes:<br><br>
<span style="color:yellowgreen;">1.Apertura:</span><br>
Costa de 2 simbolos de mayor < > y menor y dentro el nombre de la etiqueta <br><br>
<span style="color:blue;" >2 Contenido </span><br>
Entre la Apertura y el Cierre va el cotenido de la etiqueta,
que puede ser: texto,imagen,vinculo..etc. <br><br>
<span style="color:red;"> 3.Cierre </span>
Es como la Apertura, solo que en el simbolo lleva
un slash diagonal como cierre < / > <br><br>
<!--Aca debo colocar la imagen de las 3 partes de una etiqueta desde la imagen del index esta pagina-->
<img src="img/etiqueta.png" /> <br><br>
A continuacion un screen real del principio del codigo desde el archivo index.html de esta pagina
para tener una idea de como se ven las etiquetas formando bloques en cascada, que van dando
estructura a esta pagina web.<br><br>
<img src="img/imagen del html de la pagina de aprendiendo HTML.png" /> <br>
Para mayor informacion, visita la inspección haciendo clic derecho y podras ver todo el codigo.
</p>
<hr>
<h4>
<span style="font-size: 24px; margin-bottom: 10px;">Tipos de Etiquetas y sus propiedades </span>
</h4>
<p>
Existe muchas etiquetas que veremos a continuación con sus propiedades, que sirven para darle
funcionalidades, estructura, diseno a las paginas web. <br><br>
<span style="background-color: gold;"> < DOCTYPE html> </span><br>
Esta etiqueta aunque no es una como tal, sino un elemento que le indica al browser el Tipos
de version de html, y es el primer texto de todo codigo html que significa el modo html-5
sin no esta mencionada en el código, el buscador entraría en modo Quirks mode,
que es el modo de los 90`s (antiguo) de las paginas web.<br><br>
<span style="background-color: gold ;"> < HTML > </ HTML > </span><br>
Este representa el elemento raiz, <br><br>
<span style="background-color: gold;"> < head > </span><br>
Representa la colección del metada que no necesariamente está visible al usuario<br><br>
<span style="background-color: gold;"> < title > </span><br>
Representa el titulos de la pagina web, es importante resaltar
que los motores de busqueda utilizan el titulo para posicionar paginas web.<br><br>
<span style="background-color: gold;"> < body > </span><br>
Representa todo el contenido de la web" aqui es donde se desarollo todo el contenido.<br><br>
<span style="background-color: gold;"> < header > </ header> </span><br>
Se utiliza para agrupar link, tambien alguna imagen o logos y podemos crear tantas queramos siempre y cuando
se cumplan 2 reglas
<ol>
<li> NO se puede colocar una etiqueta de header dentro de otra etiqueta de header</li>
<li> No podemos colocar una de header dentro de una etiqueta de < footer /> </li>
</ol><br>
<span style="background-color: gold;"> < section ></ section> </span><br>
Como lo indica su nombre, nos permite definir secciones dentro de nuestro body> <br><br>
<span style="background-color: gold;"> < footer ></ footer> </span><br>
Se ultiliza para colocar el pie de pagina de la web, alli por lo general va el copyright,
informacion de contacto, del sitios, o del autor, link de returno al inicio etc.<br><br>
<span style="background-color: gold;"> < article> </ article> </span><br>
Representa una composicion auto-contenida en un documento, una pagina, una aplicacion o
en un sitio web, que se quiere que sea distruibuible y/o utilizable de manera independiente
ejemplo podrían ser un mensaje en un foro, un artículo de una revista o un periódico,
una entrada de blog, el comentario de un usuario, un widget o gadget interactivo, o
cualquier otro elemento de contenido independiente.<br><br>
<span style="background-color: gold;"> < div ></ div> </span><br>
Sirve para crear secciones o agrupar contenidos. Es el hermano viejo de < section > </ section> <br><br>
<span style="background-color: gold;"> < h1-h6 > </span><br>
Heading o cabezeras y se utiliza para indicar cabeceras, subcabeceras o sub-sub-cabeceras..
de la pagina, y a pesar que van sustancialmente dreciendo su tamano, no se usa para agrandar
o achicar o modificar stylo del texto sino para fragmentar el contenido de la pagina web
y son utilizados por los motores de búsquedas. y la etiqueta < h7 > no existe ya que se entiende
que si tu codigo tiene mas de 6 cabezeras, se considera no es viable a la semantica de un contenido.<br><br>
<span style="background-color: gold;"> < p > </span><br>
Párrafos: aquí dentro de esta etiqueta es donde podemos colocar los textos<br><br>
<span style="background-color: gold;"> < br > </span><br>
Esta etiqueta sirve para hacer Saltos de Linea en el texto. es decir es la accion cuando precionas
Enter en tu documento de Word. y mientras mas colocas esta etique mas saltos de linea hara.<br><br>
<span style="background-color: gold;"> < hr > </span><br>
Secciona la pagina web haciendo una division en la pagina como salto de pagina.<br><br>
<span style="background-color: gold;"> < !-- -- > </span><br>
Dentro de esta etiqueta se deja un mensaje de comentario, que no se muestra al cliente
solo se lee desde el codigo<br><br>
<span style="background-color: gold;"> < span > </span><br>
Selección silenciosa o de referenciar y se usa para seleccionar una parte del texto dentro
del la etiqueta, para asignar mas propiedades, como estilos (CCS) y manipularla.
Muchas etiquetas aparte de su funcion mencionada, se combina dentro de ella con
otras etiquetas de atributos (CCS) para crear propiedades que veremos a continuacion: <br><br>
<span style="color: blue"> style=</span><span style="color: brown;">"color"</span>: eso le indica que la seleccion
del texto dentro de la etiqueta span, se pintaria de color a elegir.<br><br><br>
<span style="background-color: gold;"> < img /> </span><br>
Esta etiqueta sirve para agregar imagenes, ya sea local o por http. Dentro de esta etiqueta,
tenemos varias propiedades o atributos (CCS)que nos sirve para modificar la imagen, ya sea su posicion, tamano etc: <br><br>
<span style="color: blue;">src</span>=<span style="color: brown;">"ruta de la imagen"/></span> sirve para colocar la ruta o direccion de la imagen dentro de las comillas <br>
<span style="color: blue;">width</span>=<span style="color: brown;">"tamano¨/> </span>valor al en pixeles del ancho de la imagen<br>
<span style="color: blue;"> height</span>=<span style="color: brown;">"tamano¨/> </span>Valor en Pixels del alto de la imagen<br><br>
<img src="img/img1.png" />
<br><br><br>
<span style="background-color: gold;"> < a > </span><br>
Esta etiqueta llamada Anchor se usa como hipervinculo para abrir otra pagina web
desde la misma pagina y se combina con mas etiquetas de propiedades o atributos que veremos a continuacion:<br><br>
<span style="color: blue;">href</span><span style="color: brown;">="www.lapagina.com" </span>: para agregar el link de la pagina web.<br>
<span style="color: blue;">target</span>=<span style="color: brown;">¨_blank¨</span>: para abrir la pagina en otra pestana pero en otra pestana.<br><br>
<!--Aca insertaré colocar un video de youtube de la referencia del contenido de esta pagina web -->
<a target="_blank" href="https://www.youtube.com/watch?v=MJkdaVFHrto&t=1695s"> Ir a video de Youtube </a> <br>
<img src="img/a.png" /> <br><br><br>
<span style="background-color: gold;"> < form > </span><br>
Ya hemos visto varias etiquetas que nos permiten mostrar informacion al usuario.
Ahora vamos ver una forma de interactuar con el usuario y mas que todo una forma de <span style="color: green;">Recopilar informacion</span> para luego enviarla a un servidor
con una etiqueta donde adentro tenemos varias propiedades que veremos a continuacion:
<br><br>
<span style="color: blue;"> < input /> </span>: Que es la propiedad para crear la casilla<br>
<span style="color: blue;"> id<span style="color: brown;">="nombre de la casilla"</span></span>: identifica la casilla con el nombre<br>
<span style="color: blue;"> name<span style="color: brown;">="nombre"</span></span>: le indicara al servidor una
<span style="color: blue;"> llave</span> y un <span style="color: brown;"> valor,</span>
<br><br>
<span style="color: blue;"> < label > </span> Es el nombre de la casilla<br>
<span style="color: blue;"> for</span>=<span style="color: brown;">"id de la casilla"</span></span>: enfoca la casilla al hacer clic en el nombre de la casilla <br>
<span style="color: blue;"> placeholder</span>=<span style="color: brown;">"Aqui va el nombre"</span></span>: colocara dentro de la casilla un texto clarito como sugerencia<br><br>
<img src="img/placerholder.png"/>
<form>
<label for="Nombre"> Nombre</label>
<input id="Nombre" name="nombre" placeholder="Aqui va el Nombre"/>
</form><br><br>
<hr>
<span style="font-size: 24px; margin-bottom: 10px;">Tipos de Castillas</span> <br><br>
<form action="/ruta del servidor" method="get"></form>
<span style="color:blue">type=<span style="color: brown;">"email" /> </span></span> La casilla es de tipo contexto (@correo.com)<br>
<label for="email"> Email </label>
<input type="email" id="email" name="email" placeholder=" introduzca correo"/>
<br><br>
<span style="color: blue;"> type= <span style="color: brown;">"password" /> </span></span><br>
<label for="password"> Password </label>
<input type="password" id="password" name="password" placeholder="introduzca password" />
<br><br>
<span style="color: blue;">type=<span style="color: brown;">"radio" /></span></span><br>
<label>Si</label>
<input type="radio" />
<label>No</label>
<input type="radio" />
<br><br>
<span style="color: blue;">type= <span style="color: brown;">"checkbock" /> </span></span><br>
<label>seleccionar</label>
<input type="checkbox" />
<br><br>
<span style="color: blue;">type= <span style="color: brown;">"file" /> </span></span><br>
<label> Cargar archivo</label>
<input type="file" />
<br><br>
<span style="color: blue;"> < textarea >< textarea /> </span></span><br>
<label for="comentario">Comentarios</label><br>
<textarea id="comentario" name="comentario" placeholder="Agregue un comentario"></textarea>
<br><br>
<span style="color: blue;"> "type" <span style="color: brown;"> "submit" </span></span><br>
<input type="submit"/>
<br><br>
</form>
<hr>
Ahora una vez creada el tipo de formulario para captar datos del usuario
ya sea tipo de texto,file,check…usaremos una propiedad dentro de la etiqueta < form > para enviar esos datos algún servidor</span><br><br>
<span style="color: blue;">action <span style="color: brown;">"/ruta_del_servidor" </span></span><br>
<span style="color: blue;">method <span style="color: brown;">"GET/POST" </span></span><br><br>
<span style="font-size: 24px; margin-bottom: 10px;">Tipos de Botones</span> <br><br>
<span style="color: blue;">type=<span style="color: brown;">"button"</span> </span>: boton generico<br>
<span style="color: blue;">type=<span style="color: brown;">"reset"</span> </span>: al darle click se restablece la info de las casillas de formulario<br>
<span style="color: blue;">type=<span style="color: brown;">"submit</span> </span>: se envia la info al servidor a la ruta que hayamos definido en < action > del < form > </ form> <br><br>
<span style="font-size: 24px; margin: bottom 10px;"> Listas </span><br><br>
<span style="background-color: gold;"> < li > </span><br>
Sirve para mostrar distinto elementos en lista, ya sea ordenada o sin orden en específico dependiendo de las siguiente etiquetas:<br><br>
<span style="background-color: gold;"> < ul > </span> List items: Lista NO ordenada<br>
<ul>
<li> Elemento 1</li>
<li> Elemento 2</li>
<li> Elemento 3</li>
<li> Elemento 4</li>
</ul>
<img src="img/ul.png" /> <br><br>
<span style="background-color: gold;"> < ol > </span> Orden list: Lista Ordenada<br>
<ol>
<li>Etiquetas de Estructuras</li>
<li>Etiquetas de Encabezado</li>
<li>Etiquetas de parrafo y Texto</li>
<li>Etiquetas de Lista</li>
<li>Etiquetas de Imagen y Multimedia</li>
<li>Etiquetas de Formulario</li>
<li>Etiquetas Semanticas</li>
</ol>
<img src="img/ol.png" /><br>
Si deseo editar la lista ordenada incremental que empieze en otro numero o letras u otro estylo
podemos hacerlo<br>
<ol>
<li value="50">Etiquetas de Estructuras</li>
<li>Etiquetas de Encabezado</li>
<li>Etiquetas de parrafo y Texto</li>
<li>Etiquetas de Lista</li>
<li>Etiquetas de Imagen y Multimedia</li>
<li>Etiquetas de Formulario</li>
<li>Etiquetas Semanticas</li>
</ol>
<img src="img/ol_50.png" /><br>
puedo tambien cambiar el <span style="color: blue;"> style </span> del indice de la lista, ya se numero romanos, letras, incluso agregar una sublista de la lista<br>
<ol>
<li value="50">Etiquetas de Estructuras</li>
<li>Etiquetas de Encabezado</li>
<ol>
<li style="list-style: lower-alpha;">h1</li>
<li style="list-style: lower-alpha;">h2</li>
<li style="list-style: lower-alpha;">h3</li>
<li style="list-style: lower-alpha;">h4</li>
<li style="list-style: lower-alpha;">h5</li>
<li style="list-style: lower-alpha;">h6</li>
</ol>
<li>Etiquetas de parrafo y Texto</li>
<li>Etiquetas de Lista</li>
<li>Etiquetas de Imagen y Multimedia</li>
<li>Etiquetas de Formulario</li>
<li>Etiquetas Semanticas</li>
</ol>
<img src="img/olsub.png" />
<br><br>
<span style="font-size: 24px; margin-bottom:10px; "> Tablas</span><br><br>
<span style="background-color: gold;"> < table > </span><br>
Vamos a crear filas y columnas con varios elemtnos y style dentro de esta etiqueta de tabla:<br><br>
<span style="color:blue;"> < tr > </span>: fila dentro de la table<br>
<span style="color:blue;"> < th > </span>: Es la cabecera de la fila<br>
<span style="color:blue;"> < td > </span>: Es el texto que va debajo de la cabeza de la fila
<br><br><br>
<table style="border: 1px solid black;">
<tr>
<th>Producto</th>
<th>precio</th>
<th>fecha</th>
</tr>
<tr>
<td>Teclado</td>
<td>Gratis</td>
<td>02-09-23</td>
</tr>
</table><br>
<img src="img/table.png" />
<br><br>
</p>
<h5>
<span style="font-size: 24px; margin-bottom: 10px;">Atributos </span>
</h5>
<section>
<p>
Los atributos son parametros que van dentro de las etiquetas que sirven para
interactuar con los elementos, ya sea con JavaScript, CCS utilizando y poder asignarles
style, funcionalidades, etc.<br><br>
<span style="color: blue;"> id <span style="color: brown;"> ="valor" </span></span><br>
Le da un nombre al elemento que lo diferencia de todos los demás del documento.
Es Un nombre único. Sensible a M/m. Por defecto: Lo fija el navegador.<br><br>
<span style="color: blue;"> class <span style="color: brown;"> ="valor" </span></span> <br>
Asigna nombres de clases a mas de un elemento. Por defecto, clases CSS.<br><br>
</p>
</section>
<hr>
<footer>
<a href="#comienzo"> Ir al comienzo </a><br><br>
<a href="santi.10334@gmail.com"> Contactame Aqui</a>
<p> Copyright 2023</p>
</footer>
</body>
</html>