Tutorial de introducción a HTML en 30 minutos

Objetivo de este artículo

En 30 minutos entenderás qué es HTML y tendrás un conocimiento básico del mismo. Una vez que te inicies, podrás encontrar en Internet más materiales detallados para continuar aprendiendo.

Qué es HTML

HTML es la abreviatura de Hyper Text Mark-up Language (Lenguaje de Marcado de Hipertexto). Establece sus propias reglas sintácticas para representar significados más ricos que el "texto", como imágenes, tablas, enlaces, etc. Los navegadores (IE, FireFox, etc.) conocen la sintaxis del lenguaje HTML y pueden utilizarse para ver documentos HTML. Actualmente, la gran mayoría de las páginas web en Internet están escritas en HTML.

Cómo es HTML

En resumen, la sintaxis de HTML consiste en añadir al texto aquello que indica su significado:etiquetas(Tag), para que los usuarios (personas o programas) puedan comprender mejor el texto.

A continuación se muestra un documento HTML muy sencillo:

<html>
   <head>
     <title>第一个Html文档</title>
   </head>
   <body>
     欢迎访问<a href="../index.html">Ejemplo</a>！
   </body>
</html>

Todos los documentos HTML deben tener una etiqueta <html>. La etiqueta <html> puede contener dos partes: <head> y <body>.

La etiqueta <head> se utiliza para incluir información general de todo el documento, como el título del documento (la etiqueta <title> se utiliza para incluir el título), la descripción del documento, las palabras clave del documento, etc. El contenido específico del documento debe colocarse dentro de la etiqueta <body>.

La etiqueta <a> se utiliza para representar enlaces. Al ver un documento HTML en un navegador (como IE, Firefox, etc.), al hacer clic en el contenido encerrado por la etiqueta <a>, normalmente se salta a otra página. La dirección de la página a la que se saltará está especificada por el atributo href de la etiqueta <a>. En el ejemplo anterior <a href="../www.example.com/index.html">, el valor del atributo href es http://www.example.com/.

Contenido que puede incluir un documento HTML

Mediante diferentes etiquetas, un documento HTML puede incluir diferentes contenidos, como texto, enlaces, imágenes, listas, tablas, formularios, marcos, etc.

Texto: HTML ofrece el soporte más rico para el texto. Puedes establecer títulos de diferentes niveles, párrafos y saltos de línea, especificar la semántica y la apariencia del texto, indicar que el texto es una cita de otro lugar, etc.
Enlaces: Los enlaces se utilizan para indicar que el contenido está relacionado con otra página o con algún lugar de la página actual.
Imágenes: Las imágenes se utilizan para hacer la página más atractiva o para proporcionar más información.
Listas: Las listas se utilizan para indicar que una serie de elementos están relacionados entre sí.
Tablas: Las tablas son una forma de organizar los datos en filas y columnas. También hay muchas personas que utilizan tablas para el diseño de páginas.
Formularios: Los formularios suelen estar compuestos por cuadros de entrada de texto, botones, casillas de verificación, botones de opción, listas desplegables, etc., lo que hace que las páginas HTML sean más interactivas.
Marcos: Los marcos permiten que una página contenga otras páginas.

Explicación detallada del formato de un documento HTML

Anteriormente se presentó el formato básico de un documento HTML. A continuación se ofrece una explicación detallada.

Un documento HTML puede crearse y editarse con cualquier editor de texto (como el Bloc de notas, UltraEdit, etc.), porque su contenido, en esencia, no es más que texto.

En el texto HTML, la parte encerrada entre corchetes angulares se denomina etiqueta. Si se quiere usar corchetes angulares (o signos mayor y menor, en definitiva lo mismo) en el cuerpo del texto, se debe usarescape de caracteres, es decir, convertir el significado original del carácter. < debe usarse<en su lugar, y para > se usa>, y en cuanto al propio símbolo &, se debe usar&en su lugar (hay que decir que muchos documentos HTML no siguen esta regla; los navegadores comunes también pueden analizar si & es el inicio de un escape o un símbolo, pero esto no se recomienda).

Las etiquetas, en esencia, son una descripción del contenido que encierran, y pueden tener atributos para proporcionar más información. Por ejemplo, la etiqueta <img> (imagen) tiene el atributo src (para indicar la dirección de la imagen) y los atributos width y height (para indicar el ancho y el alto de la imagen). Qué etiquetas se pueden usar en HTML y qué atributos puede tener cada una de ellas están estipulados. Una vez que conozcas estos conocimientos básicos, aprender HTML consiste en aprender estas etiquetas. Más adelante, este artículo hará una breve introducción a las etiquetas HTML comunes.

Las etiquetas generalmente tienen una parte de apertura y una parte de cierre (también llamadas etiqueta de apertura y etiqueta de cierre), que juntas delimitan el contenido que envuelve la etiqueta. Los atributos solo pueden especificarse en la etiqueta de apertura, y los valores de los atributos pueden encerrarse entre comillas simples o dobles. La etiqueta de cierre se representa siempre con una barra inclinada (/) seguida del nombre de la etiqueta. A veces, algunas etiquetas no contienen otro contenido (solo sus propios atributos, o incluso ningún atributo). En ese caso, se puede escribir algo así: <img src="logo.gif.html" />. Observa el último espacio y la barra invertida; esto indica que la etiqueta ya ha terminado y no necesita una etiqueta de cierre separada.

El contenido de ciertas etiquetas puede incluir nuevas etiquetas, e incluso el nombre de la nueva etiqueta puede ser el mismo que el de la etiqueta que la contiene (qué etiquetas pueden contener etiquetas y qué etiquetas pueden contener también está estipulado). Por ejemplo:

<div>
  <div>分类目录...</div>
  <div>当前分类内容列表...</div>
</div>

En este caso, la última etiqueta que aparezca debe cerrarse primero.

Todos los caracteres de espacio en blanco (espacios, tabulaciones, saltos de línea, retornos de carro) en un documento HTML son ignorados por el navegador, con la única excepción del espacio. Con respecto al espacio, el tratamiento es que todos los espacios consecutivos se consideran como un solo espacio, ya sea uno, dos o cien. Esta regla existe porque ignorar los caracteres de espacio en blanco permite al autor del HTML organizar el contenido en el formato que le resulte más conveniente, por ejemplo, aumentar la sangría después de cada etiqueta de apertura y reducirla después de la etiqueta de cierre. Dado que los espacios se usan comúnmente en los textos en inglés (para separar palabras), se les ha dado este tratamiento especial. Si deseas mostrar espacios consecutivos (por ejemplo, para sangrar), debes usar para representar el espacio.

Introducción a las etiquetas comunes

Texto

La etiqueta más utilizada puede ser <font>, que se usa para cambiar la fuente, el tamaño de la fuente y el color del texto.

<font size="6">6</font>
<font size="4">4</font>
<font color="red" size="5">红色的5</font>
<font face="黑体">黑体的字</font>

La negrita, el subrayado y la cursiva también son efectos de texto comunes, que se representan respectivamente con <b>, <u> e <i>:

<b>Bold</b>
<i>italic</i>
<u>underline</u>

También hay otras etiquetas que se utilizan para indicar que el texto incluido tiene un significado especial, como <abbr> (abreviatura), <em> (énfasis), <strong> (énfasis más fuerte), <cite> (cita), <address> (dirección), etc. Estas etiquetas no existen para definir efectos de visualización, por lo que en el navegador pueden no tener ningún efecto, o diferentes navegadores pueden mostrar estas etiquetas de maneras completamente distintas.

Un artículo muy largo, si tiene subtítulos adecuados, permite obtener rápidamente una idea general de su contenido. En HTML, las etiquetas utilizadas para representar títulos son: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, que representan respectivamente el título de nivel 1, título de nivel 2, título de nivel 3...

<h1>HTML 30分钟教程</h1>
<h2>什么是HTML</h2>
...
<h2>HTML是什么样的</h2>
...

Imagen

La etiqueta <hr> se utiliza para añadir una línea horizontal en la página. Se puede controlar la longitud y el color de la línea horizontal especificando los atributos width y color.

<hr width="90%" color="red" />

La etiqueta <img> se utiliza para añadir una imagen en la página. El atributo src especifica la dirección de la imagen. Si no se puede abrir la imagen especificada por src, el navegador normalmente mostrará en el lugar donde debería aparecer la imagen el texto definido por el atributo alt.

<img src="http://www.w3.org/Icons/valid-xhtml10" alt="图片简介" />

Enlace

El hipervínculo se representa con la etiqueta <a>. El atributo href especifica la dirección a la que se enlaza. La etiqueta <a> puede contener texto o también imágenes.

<a href="../index.html">Ejemplo</a>
<a href="http://validator.w3.org"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="验证HTML" /></a>

Párrafos y saltos de línea

Dado que el documento HTML ignora los caracteres de espacio en blanco, para garantizar párrafos y saltos de línea correctos es necesario indicar qué texto pertenece al mismo párrafo; para ello se utiliza la etiqueta <p>.

<p>这是第一段。</p>
<p>这是第二段。</p>

Algunas personas no usan <p>, sino <br>. <br> solo indica un salto de línea, no el inicio o el final de un párrafo, por lo que normalmente no tiene etiqueta de cierre.

这是第一段。<br>
这是第二段。<br />
这是第三段。

A veces, el documento debe considerarse como una combinación de diferentes partes. Por ejemplo, una página típica puede incluir tres partes: cabecera, cuerpo y pie de página. La etiqueta <div> se utiliza específicamente para marcar diferentes partes:

<div>页头内容</div>
<div>主体内容</div>
<div>页脚内容</div>

Tabla

Los documentos HTML normalmente se muestran en el navegador de izquierda a derecha y de arriba a abajo, y saltan de línea automáticamente al llegar al borde derecho de la ventana. Para lograr el efecto de varias columnas, muchas personas usan tablas (<table>) para el diseño de la página (aunque el propósito original de las tablas en HTML no era el diseño).

La etiqueta <table> normalmente contiene varias etiquetas <tr>, y <tr> representa una fila de la tabla. La etiqueta <tr> a su vez contiene etiquetas <td>, y cada <td> representa una celda.

<table>
  <tr>
    <td>2000</td><td>悉尼</td>
  </tr>
  <tr>
    <td>2004</td><td>雅典</td>
  </tr>
  <tr>
    <td>2008</td><td>北京</td>
  </tr>
</table>

La etiqueta <tr> también puede estar contenida por <thead>, <tbody> o <tfoot> dentro de <table>. Representan respectivamente el encabezado de la tabla, el cuerpo de la tabla y el pie de la tabla. Al imprimir una página web, si la tabla es muy grande y no cabe en una página, <thead> y <tfoot> aparecerán en cada página.

<th> y <td> son muy similares y también se usan dentro de <tr>. La diferencia es que <th> representa que esta celda es el título de la fila o columna en la que se encuentra.

<table>
  <thead>
    <tr><th>时间</th><th>地点</th></tr>
  </thead>
  <tbody>
    <tr><td>2000</td><td>悉尼</td></tr>
    <tr><td>2004</td><td>雅典</td></tr>
    <tr><td>2000</td><td>北京</td></tr>
  </tbody>
</table>

Lista

La tabla se utiliza para representar datos bidimensionales (filas, columnas), mientras que los datos unidimensionales se representan con listas. Las listas se pueden dividir en listas desordenadas (<ul>), listas ordenadas (<ol>) y listas de definición (<dl>). Las dos primeras son más comunes y ambas usan la etiqueta <li> para contener los elementos de la lista.

Una lista desordenada representa una serie de elementos similares sin un orden específico entre ellos.

<ul>
  <li>苹果</li>
  <li>桔子</li>
  <li>桃</li>
</ul>

En una lista ordenada, el orden entre los elementos es importante; el navegador suele numerarlos automáticamente.

<ol>
  <li>打开冰箱门</li>
  <li>把大象赶进去</li>
  <li>关上冰箱门</li>
</ol>

Marcos

Por último, hablemos de los marcos, una tecnología que fue muy popular. Los marcos permiten mostrar varios documentos a la vez en una misma ventana. La página principal del marco no contiene la etiqueta <body>; en su lugar, se utiliza <frameset>.

Los atributos Rows y Cols de la etiqueta <frameset> se utilizan para especificar cuántas filas (o columnas) hay en el conjunto de marcos (frameset) y la altura (o anchura) de cada fila (o columna).

La etiqueta <frameset> puede contener etiquetas <frame>; cada etiqueta <frame> representa un documento (el atributo src especifica la dirección del documento).

Si crees que la página aún no es lo suficientemente compleja, también puedes incluir etiquetas <frameset> dentro de la etiqueta <frameset>.

<frameset rows="15%,*">
     <frame src="top.html" name=title scrolling=no>
     <frameset cols="20%,*">
          <frame src="left.html" name=sidebar>
          <frame src="right.html" name=recipes>
     </frameset>
</frameset>

Qué hacer después de 30 minutos

Este artículo solo pretende dar una impresión preliminar de HTML a quienes nunca han tenido contacto con él, por lo que muchas cosas no se han tratado. Este artículo no enumera todas las etiquetas de HTML, ni presenta todos los atributos de las etiquetas mencionadas. Además, entre lo que no se ha mencionado se incluyen CSS, JavaScript, XHTML, XML, Web Standards, y su relación con HTML, que considero muy importantes. Sin embargo, es poco probable que se puedan aprender en 30 minutos. Afortunadamente, una vez que te inicias, puedes aprovechar muchos recursos en línea para seguir aprendiendo. Por supuesto, si tienes un libro en papel, es aún mejor; al respecto recomiendo “HTML y XHTML: La guía definitiva”. A continuación, algunos recursos en línea que me parecen buenos:

Fuente: http://deerchao.net/tutorials/html/html.htm