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
|
---
language: html
filename: learnhtml-es.html
contributors:
- ["Christophe THOMAS", "https://github.com/WinChris"]
translators:
- ["Gino Amaury", "https://github.com/ginoamaury"]
lang: es-es
---
HTML significa Lenguaje de marcado de hipertexto (HyperText Markup Language).
Este es un lenguaje usado para escribir páginas en la web (WWW).
Este es un lenguaje de marcado, es usado para escribir páginas web usando código para indicar cómo se debe mostrar el texto y los datos.
En efecto, los archivos html son simples archivos de texto.
Qué es esto de marcado? es un método para organizar los datos de la página encerrandolos con etiquetas de apertura y cierre.
Este marcado sirve para darle significancia al texto que éste encierra.
Como en otros lenguajes computacionales, HTML tiene varias versiones. Aquí hablaremos acerca de HTML5.
**Nota :** Puedes probrar las diferentes etiquetas y elementos a medida que progresas en un tutorial en un sitio como [codepen](http://codepen.io/pen/) con el fin de ver sus efectos, entender como funcionan y familiarizarse con el lenguaje.
Este artículo está centrado principalmente en la sintaxis HTML y algunos tips de importancia.
```html
<!-- los comentarios están encerrados como en esta línea! -->
<!-- #################### Las Etiquetas #################### -->
<!-- Este es un ejemplo de un archivo HTML que analizaremos! -->
<!doctype html>
<html>
<head>
<title>Mi Sitio</title>
</head>
<body>
<h1>Hola, Mundo!</h1>
<a href = "http://codepen.io/anon/pen/xwjLbZ">ven mira lo que esto muestra. </a>
<p>Esto es un párrafo</p>
<p>Este es otro párrafo</p>
<ul>
<li>Este es un elemento de una lista no numerada (lista de viñetas)</li>
<li>Este es otro ítem</li>
<li>Y este es el último ítem de la lista</li>
</ul>
</body>
</html>
<!-- En un archivo HTML siempre inicia indicando le al buscador que esta es una página HTML. -->
<!doctype html>
<!-- Después de esto, iniciamos abriendo una etiqueta html <html> -->
<html>
<!-- Cuando termine el archivo cerraremos la etiqueta así </html>. -->
</html>
<!-- Después de la etiqueta final nada aparecerá o podrá aparecer -->
<!-- Dentro (Entre las etiquetas de apertura y cierre <html></html>), encontraremos: -->
<!-- Un encabezado definido por <head> (Este debe ser cerrado por </head>). -->
<!-- El encabezado contiene alguna descripción y información adicional que no se muestra; estos son los metadatos. -->
<head>
<title>Mi Sitio</title><!-- La etiqueta <title> Indica al buscador el título a mostrar en la ventana del buscador en la barra de título y en el nombre de la pestaña. -->
</head>
<!-- Después de la sección del encabezado <head> , Encontraremos la etiqueta de cuerpo - <body> -->
<!-- Hasta este punto. no hay nada descrito para que se muestre en la ventana del navegador -->
<!-- Debemos llenar el cuerpo con el contenido que se mostrará -->
<body>
<h1>Hola, Mundo!</h1> <!-- La etiqueta <h1> crea un título. -->
<!-- También tenemos subtítulos para <h1> desde la más importante <h2> a la más precisa <h6> -->
<a href = "http://codepen.io/anon/pen/xwjLbZ">ven mira lo que esto muestra.</a> <!-- Un hipervínculo a la URL dada por el atributo href="" -->
<p>Esto es un párrafo.</p> <!-- La etiqueta <p> nos permite incluir texto en nuestra página HTML -->
<p>Este es otro párrafo.</p>
<ul> <!-- La etiqueta <ul> crea una lista de viñetas -->
<!-- Para tener una lista numerada usamos la etiqueta <ol> dando 1. para el primer elemento, 2. para el segundo, etc. -->
<li>Este es un elemento de una lista no numerada (lista de viñetas)</li>
<li>Este es otro ítem</li>
<li>Y este es el último ítem de la lista</li>
</ul>
</body>
<!-- Y esto es todo, la creación de un archivo HTML puede ser muy simple. -->
<!-- Sin embargo, es posible añadir muchos otros tipos de etiquetas HTML -->
<!-- Para insertar una imagen -->
<img src="http://i.imgur.com/XWG0O.gif"/> <!-- La fuente donde se localiza la imagen se indica utilizando el atributo src=""-->
<!-- La fuente puede ser una URL o incluso una ruta a una archivo en tu computador. -->
<!-- También es posible crear una tabla -->
<table> <!-- Abrimos una etiqueta o elemento tabla <table> -->
<tr> <!-- <tr> Nos permite crear una fila. -->
<th>Primer encabezado</th> <!-- <th> Nos permite dar un título a una columna de una tabla -->
<th>Segundo encabezado</th>
</tr>
<tr>
<td>Primera fila, primera columna</td> <!-- <td> nos permite crear una celda -->
<td>Primera fila, segunda columna</td>
</tr>
<tr>
<td>Segunda fila, primera columna</td>
<td>Segunda fila, segunda columna</td>
</tr>
</table>
```
## Uso
HTML es escrito en archivos que terminan con (extensión) `.html`.
## Para aprender más!
* [wikipedia](https://es.wikipedia.org/wiki/HTML)
* [HTML tutorial](https://developer.mozilla.org/es/docs/Web/HTML)
* [W3School (EN)](http://www.w3schools.com/html/html_intro.asp)
|
