HTML/2_HTML5/basicohtml5.html at 049d7b7e65cb0fc69123f75e58fee6a6fe958790 · DSWTL/HTML · GitHub

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
<!DOCTYPE html>
<!-- Documento HTML5 mejorado -->
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>New HTML5 Input Types</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    th, td {
      border: 2px solid #444;
      padding: 8px;
      text-align: left;
    }
    caption {
      font-weight: bold;
      margin-bottom: 8px;
    }
  </style>
</head>
<body>

  <h1 id="encabezado">Encabezado h1 más significativo</h1>
  <h2>Encabezado h2</h2>
  <h3>Encabezado h3</h3>
  <h4>Encabezado h4</h4>
  <h5>Encabezado h5</h5>
  <h6>Encabezado h6</h6>

  <p>Esto es un párrafo <code>&lt;p&gt;</code>, cuando se despliega el párrafo, coloca espacio adicional encima y debajo del texto.</p>

  <!-- Hipervínculos -->
  <p id="hiper"><strong>Elemento "strong" para resaltar la importancia del texto.</strong></p>
  <p>
    <a href="http://www.cursos.danjrosales.com.mx/">"a" de ancla y "href" como referencia de hipertexto para los hipervínculos</a>
  </p>
  <p>
    <a href="http://www.cursos.danjrosales.com.mx/" target="_blank"><strong>Target _blank:</strong> nueva ventana o tab</a>
  </p>
  <p>
    <a href="http://www.cursos.danjrosales.com.mx/" target="_self"><strong>Target _self:</strong> por defecto, mismo frame</a>
  </p>
  <p>
    <a href="http://www.cursos.danjrosales.com.mx/" target="_parent"><strong>Target _parent:</strong> frame padre</a>
  </p>
  <p>
    <a href="http://www.cursos.danjrosales.com.mx/" target="_top"><strong>Target _top:</strong> cuerpo completo ventana</a>
  </p>
  <p>
    <a href="mailto:ejemplo@domain.com" target="_top"><strong>URL mailto:</strong> Vínculo a direcciones de correo electrónico</a>
  </p>
  <p>
    <a href="#encabezado">Ir a <em>encabezado</em></a>
  </p>
  <p>
    <a href="#tablas">Ir a <em>tablas</em></a>
  </p>
  <!-- Fin Hipervínculos -->

  <!-- Tablas -->
  <table id="tablas">
    <caption>Ejemplo de tablas 4 dummies</caption>
    <thead>
      <tr>
        <th rowspan="2">
          <img src="images/image1.png" width="205" height="167" alt="Imagen de Dr. Mono">
        </th>
        <th colspan="3">
          <strong>Dr Mono</strong><br>
          Primate hedonista y vago
        </th>
      </tr>
      <tr>
        <th>Título Columna 1</th>
        <th>Título Columna 2</th>
        <th>Título Columna 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>¿Qué es Lorem Ipsum?</th>
        <td colspan="3">
          Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto...
        </td>
      </tr>
      <tr>
        <th>¿Por qué lo usamos?</th>
        <td colspan="3">
          Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido...
        </td>
      </tr>
      <tr>
        <th>¿De dónde viene?</th>
        <td colspan="3">
          Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de "de Finnibus Bonorum et Malorum"...
        </td>
      </tr>
    </tbody>
  </table>
  <p>
    <a href="#hiper">Ir a <em>hipervínculos</em></a>
  </p>
  <!-- Fin Tablas -->

</body>
</html>