UTP
Unidad 1: Introducción al lenguaje HTML

Títulos:

lanzador
Ejemplo: Títulos de página.

HTML provee una serie de etiquetas para establecer títulos dentro de la página. Estas etiquetas son:<h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Cada una con su respectivo cierre. Un texto establecido entre alguna de estas etiquetas se mostrará en negrita, con un espaciado arriba y abajo, y con un tamaño que depende de la etiqueta que se use, es decir, un texto entre las etiquetas <h1> y </h1> se verá más grande que un texto entre las etiquetas <h6> y </h6>.

Cabe anotar que estas etiquetas y todas las demás que veremos en esta unidad se escribirán dentro de las etiquetas <body></body>

Un ejemplo del uso de estas etiquetas, se muestra a continuación:

Párrafos:

lanzador
Ejemplo: Párrafos.

Para los párrafos HTML proporciona las etiquetas <p> y </>>. Cada párrafo de la página se debe encerrar entre este par de etiquetas y entre cada párrafo se mostrará un espaciado.

Un ejemplo del uso de estas etiquetas, se muestra a continuación:

Listas

En HTML las listas son similares a las viñetas que colocamos a un texto. A continuación veremos 2 tipos de listas, las listas ordenadas y las no ordenadas.

Listas no ordenadas:

lanzador
Ejemplo: Listas No Ordenadas.

Las listas no ordenadas van dentro de la etiqueta <ul> y </ul>. Cada ítem que queramos añadir a la lista, lo haremos dentro de la etiqueta <li> y su cierre </li> de la siguiente manera:

Las etiquetas HTML pueden tener propiedades, en este caso vemos que la etiqueta <li> tiene una propiedad type en la cual determinamos el tipo de viñeta que queremos utilizar, las cuales pueden ser circle, square o disc.

Listas Ordenadas

lanzador
Ejemplo: Listas Ordenadas.

Las listas ordenadas van enmarcadas dentro de las etiquetas <ol> y </ol>. Cada ítem de la lista se escribe con la misma etiqueta que en las no ordenadas: <li>. Pero al ser listas ordenadas las viñetas serán números y éstos se irán generando automáticamente por orden, conforme agreguemos nuevos ítems.

Títulos de página.

Instrucciones:

Observe el código HTML y haga clic en el botón "Correr" para ejecutarlo, puede realizar modificaciones al código y usar botón "Guardar" para almacenar una copia del código fuente.

Código fuente

Panel de resultados

Párrafos.

Instrucciones:

Observe el código HTML y haga clic en el botón "Correr" para ejecutarlo, puede realizar modificaciones al código y usar botón "Guardar" para almacenar una copia del código fuente.

Código fuente

Panel de resultados

Listas No Ordenadas.

Instrucciones:

Observe el código HTML y haga clic en el botón "Correr" para ejecutarlo, puede realizar modificaciones al código y usar botón "Guardar" para almacenar una copia del código fuente.

Código fuente

Panel de resultados

Listas Ordenadas.

Instrucciones:

Observe el código HTML y haga clic en el botón "Correr" para ejecutarlo, puede realizar modificaciones al código y usar botón "Guardar" para almacenar una copia del código fuente.

Código fuente

Panel de resultados