Vamos a ir Estudiando las Etiquetas HTML.
En la lección anterior Curso de Programación Web – HTML Parte 1 aprendíamos la bases del Lenguaje HTML
Al final listaba una gran parte de las etiquetas que se utilizan en esta lección voy a mostrar una serie de ejemplos para aprender el uso de las mismas.
Solo mostrare ejemplos de las etiquetas que serán necesarias para construir la plataforma web.
EJEMPLO 1
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>
Definimos títulos para el contenido de nuestra pagina en diferentes jerarquías o tamaños.
<hr> Etiqueta utilizada para «romper» entre dos secciones de una web. Usada comúnmente como separador.
<pre> </pre> Usada para pegar texto manteniendo el pre formato propio del texto.
<ol> </ol> Etiquetas para crear una lista ordenada
<ul> </ul> Etiquetas para crear una lista des-ordenada
<li> </li> Etiquetas que recogen el contenido de un elemento de una lista, sea ordenada o no.
<div> </div> Etiqueta común utilizada para crear un contenedor genérico. (la mas utilizada)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo 1 - Leccion 2</title>
</head>
<body>
<h1>Titulo 1</h1>
<h2>Titulo 2</h2>
<h3>Titulo 3</h3>
<h4>Titulo 4</h4>
<h5>Titulo 5</h5>
<h6>Titulo 6</h6>
<hr />
<h1>Listas </h1>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
<br />
<ul type="circle">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<ul type="disc">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<ul type="square">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<br />
<br />
<!-- asi se coloca un comentario -->
<div> Esta etiqueta es la mas utilizada hoy en dia es un cotenedor </div>
<div> Pero de esta la explicare mas adelante </div>
</body>
</html>
Guárdalo como paginaweb_leccion2.html
EJEMPLO 2
<img> Etiqueta para «pintar» una imagen en la página web.
<iframe> </iframe> Es una etiqueta que sirve para anidar otro documento HTML dentro del documento principal.
<video> </video> Se usa para reproducir video en la página web junto a sus archivos de audio y capciones asociadas.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo 2 - Leccion 2</title>
</head>
<body>
<h1>Etiqueta Imagen</h1>
<img src="imagen/login.png" alt="Imagen" />
<h1>Iframe</h1>
<iframe src="https://www.programaresfacil.co/" width="500" height="400">
</iframe>
<h1>Videos</h1>
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
El video no es soportado por el navegador
</video>
</body>
</html>
Guárdalo como paginaweb_leccion2_ejemplo2.html
EJEMPLO 3
<table> </table> Etiquetas de apertura y cierre de una tabla. El resto de etiquetas de la tabla han de ir siempre recogidas entre estas dos etiquetas.
<tbody> </tbody> Usada para describir los datos concretos de una tabla.
<thead> </thead> Indica el bloque de filas que describen las etiquetas de las columnas de la tabla.
<tr> </tr> Se usa para indicar una fila de celdas de una tabla.
<td> </td> Usada para definir una celda de una tabla.
<th> </th> Etiqueta que se usa para definir el encabezado de una celda
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo 3</title>
</head>
<body>
<h1>Tablas</h1>
<table width="715" border="1">
<thead>
<tr>
<th width="144">Código</th>
<th width="174">Nombres</th>
<th width="200">Apellidos</th>
<th width="169">Telefono</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Carlos</td>
<td>Sanchez</td>
<td>345455445</td>
</tr>
<tr>
<td>2</td>
<td>Andres</td>
<td>Perez</td>
<td>345555454</td>
</tr>
<tr>
<td>3</td>
<td>Maria</td>
<td>Martinez</td>
<td>898989898</td>
</tr>
</tbody>
</table>
</body>
</html>
Guárdalo como paginaweb_leccion2_ejemplo3.html
Índice
Por ultimo se crea un índice para aprender el uso de la etiqueta <a> que es un link
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Indice del Curso</title>
</head>
<body>
<ul>
<li><a href="paginaweb_leccion2.html" title="Ejemplo 1">Ejemplo 1</a> </li>
<li><a href="paginaweb_leccion2_ejemplo2.html" title="Ejemplo 2">Ejemplo 2</a> </li>
<li><a href="paginaweb_leccion2_ejemplo3.html" title="Ejemplo 3">Ejemplo 3</a> </li>
</ul>
</body>
</html>
Recuerda que todo lo debes guardar en la misma carpeta para que no tengas problemas al desplazarte de una pagina a otra.