Curso de Programación Web – HTML Parte 2

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.