-
Notifications
You must be signed in to change notification settings - Fork 0
/
02_Listas, rutas y enlaces.html
130 lines (107 loc) · 4.96 KB
/
02_Listas, rutas y enlaces.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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Listas, enlaces y rutas</title>
</head>
<body>
<h3>Listas</h3>
<p>Una lista ordenada</p>
<!-- Ordered list-->
<ol>
<li>Lunes</li>
<li>Martes</li>
<li>Miércoles</li>
</ol>
<p>Una lista desordenada</p>
<!-- Unordered list-->
<ul type="square" id="Lista desordenada">
<!--El atributo type="square" es opcional para que la lista no posea círculos y esté ordenada con cuadrados.-->
<li class="list-item">Lunes</li>
<li class="list-item">Martes</li>
<li class="list-item">Miércoles</li>
<!-- Hay atributos globales y específicos. El atributo "id" es un atributo global, como "class". En este sentido, todos los elementos se pueden repetir por medio de clases,
pero a cada elemento le corresponde un "id" específico. Por otro lado, existen atributos booleanos, como por ej. hidden--->
</ul>
<!-- Anidamiento-->
<h3>Listas dependientes o anidadas</h3>
<ul>
<li>Lunes</li>
<ul>
<li>Lengua y literatura</li>
<li>Física</li>
</ul>
<li>Martes</li>
<ul>
<li>Psicología</li>
<li>Python</li>
</ul>
</ul>
<!--Listas de descripción o definición-->
<h3>Listas de definición</h3>
<dl>
<dt>Leche</dt>
<dd>Entera</dd>
<dd>Descremada</dd>
<dt>Verduras</dt>
<dd>Tomate</dd>
<dd>Zanahoria</dd>
</dl>
<h3>-------------------------------------------------------------------------------</h3>
<h3>Rutas</h3>
<p>Cuando hablamos de una ruta (o path) nos referimos a la dirección de destino al hacer clic en el link. <br>
Esta ruta puede ser relativa, si hace referencia a una ubicación interna, o puede ser absoluta, si hace referencia a un dominio externo.</p>
<h3>Enlaces</h3>
<!--Permiten vincular unas páginas con otras. Para hacer esto utilizamos la etiqueta <a> con
el atributo href (Hypertext Reference). Hay 3 tipos de enlaces:
-->
<p>Enlaces absolutos</p>
<!-- Son enlaces que incluyen el link a un sitio web completo. Por ej.:-->
<a href="https://www.google.com/?hl=es">Ir a Google</a>
<p>Enlaces relativos</p>
<!-- Hacen referencia a los recursos que se encuentran en una posición relativa a nuestra URL o en un directorio interno.
Por ej.:--> <a href="./imagen1.jpg">Ver imagen</a>
<p>Enlaces internos o anclas</p>
<!--Se utilizan para indicar elementos dentro de nuestra página web, dirigiendo al usuario a un sector específico.
Para utilizarlos necesitamos el enlace y el nombre (del atributo name) del ancla a la que queremos dirigirnos.-->
<a href="#Listas">Ir a listas</a>
<a name="Listas"></a>
<!--Incluso se pueden vincular a anclas dentro de otra página de destino.
En ese caso, es igual, dentro del atributo href hay que referenciar el archivo html, la sección -con un #- y, por otro lado,
en el script a referenciar hay que establecer el ancla correspondiente.
Por ejemplo:-->
<a href="01_Etiquetas básicas.html#section">Ir a etiquetas</a>
<a name="section"></a>
<!--Nota: Otra forma de hacer lo mismo es usar la etiqueta ancor normalmente, y a la sección -por ejemplo, dentro de un H2-
agregarle un atributo id="" ka referencia, el ancla específica.-->
<h4>Atributos para los enlaces:</h4>
<dl>
<dt>download</dt>
<dd>Especifica cuál es el objetivo que se descargará cuando un usuario haga clic en el hipervínculo.</dd>
<dt>href</dt>
<dd>Especifica la URL de la página a la que se dirige el enlace.</dd>
<dt>target</dt>
<dd>Especifica dónde abrir el documento vinculado. Algunas de las opciones son: <br>
_blank: Abre el documento vinculado en una nueva ventana o pestaña <br>
_self: Abre el documento vinculado en el mismo marco en el que se hizo clic (predeterminado).
</dd>
<dt>title</dt>
<dd>Especifica información adicional sobre un elemento. La información generalmente se muestra como
un texto de información sobre herramientas cuando el mouse se mueve sobre el enlace.
</dd>
</dl>
<!--Si aún no tenemos definido a dónde queremos hacer un hipervínculo podemos colocar dentro del atributo href el valor #.-->
<h4>Enlaces locales</h4>
<a href="0_Buen día mundo!.html" title="Hello world!"> Buen día mundo!</a>
<!--Permiten vincular nuestra página con otra página del mismo Sitio Web.-->
<h4>Enlaces a direcciones de correo y archivos</h4>
<a href="mailito:juliandorao@gmail.com">Enviar correo</a><br>
<!--Permiten vincular nuestra página con el cliente de correo predeterminado en la computadora:-->
<a href="mailito:juliandorao@gmail.com?subjet=Pedido">Enviar</a>
<!--Además, permiten agregar un asunto predeterminado.-->
<p>Los enlaces también permiten vincular nuestro documento HTML con archivos:</p>
<a href="#CLASE1.pdf">Abrir PDF</a><br>
<a href="#CLASE1.PDF" download>Descargar PDF</a>
</body>
</html>