Materia
Ejercicios


Ayuda con lenguaje HTML

Definiciones previas

La mayoría de las páginas web están escritas en un lenguaje llamado HTML. Su navegador (Chrome, Internet Explorer, safari u otro) cuando recibe una página (por ejemplo, index.html), interpreta las instrucciones de dicha página y muestra los contenidos al usuario como corresponde.

Por ejemplo, un hipervínculo son palabras, párrafos o imágenes que al hacer clic sobre ellas te llevan a otra página:

Me gusta la página de programación, es clara y precisa. 

Para mostrar lo anterior en lenguaje HTML se escribiría:

Me gusta la página de <a href="http://progra.usm.cl">programación</a>,
es clara y precisa.

<a> es una etiqueta para hacer hipervínculos. Lo que está entre <a> y </a> es lo que se mostrará en el navegador (en este caso programación). Al hacer clic sobre el hipervínculo, se abrirá lo que está en href=”“ (en este caso http://progra.usm.cl).

Note el siguiente ejemplo más completo:

Título

Me gusta la página
de programación, es clara

y precisa.

Lo anterior fue escrito en lenguaje HTML de la siguiente manera:

<h2>Título</h2>
Me gusta <i>la página</i> <br>de <a href="http://progra.usm.cl">programación</a>,
es <strong>clara</strong> <br><br>y <strong>precisa</strong>.

La etiqueta <strong></strong> sirve para transformat un texto en negrita, la etiqueta <i></i> transforma el texto en cursivas, la etiqueta <br> es simplemente un salto de línea (no hay que utilizar </br>) y la etiqueta <h2></h2> es para poner un título con letra grande.

En fin, usted puede escribir un archivo ejemplo.html cualquier texto en HTML y luego ábralo con su navegador para que vea cómo queda.

Tablas (algo más avanzado)

Una tabla tiene filas y columnas. Para comenzar la definición de la tabla se debe hacer con la etiqueta <TABLE> y para finalizar, con la etiqueta </TABLE>. Para indicar que se agregará una fila se debe escribir <TR></TR> y para agregar una columna <TD></TD>. Mire el siguiente ejemplo escrito en html:

<TABLE BORDER="1">
  <TR>
    <TD>Juan</TD>
    <TD>30 años</TD>
    <TD>70.1 kg.</TD>
  </TR>
  <TR>
    <TD>Pedro</TD>
    <TD>70 años</TD>
    <TD>90.4 kg.</TD>
  </TR>
</TABLE>

La tabla anterior se mostraría así:

Juan 30 años 70.1 kg.
Pedro 70 años 90.4 kg.

Si usted modifica BORDER=”0” la tabla se muestra sin los bordes, con los datos alineados:

Juan 30 años 70.1 kg.
Pedro 70 años 90.4 kg.

Más información

Para conocer más del lenguaje HTML, escriba alguna de estas frases en google:

  • aprender html
  • tablas en html
  • etiquetas básicas en html
  • insertar imágenes en html

Volver a la página de la tarea.