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.
<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
<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
<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
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.
6 de septiembre de 2024 - La demanda de desarrolladores de software sigue en aumento,…
En un movimiento histórico, la Unión Europea ha aprobado la primera ley de inteligencia artificial…
¿Sigues trabajando con Visual Basic 6 y necesitas una forma eficiente de acceder a tus…
OpenAI revoluciona la interacción con IA: ChatGPT ahora interpreta imágenes En un avance significativo para la…
Bienvenido al Curso Básico de Visual Basic 6! Este curso está diseñado para llevarte a…
Introducción a la programación y Visual Basic 6.0 ¿Qué es la programación? La programación es…
Este sitio utiliza cookies desea activarlas
Deja un comentario