LISTAS EN HTML

vinetasEn las páginas web las listas son muy usadas, principalmente para crear menús, en las cuales hay dos categorias, las listas ordenadas que en word serian los elementos numerados, y las listas sin ordenar que en Word serian las listas con viñetas.

Para lograr la siguiente vista web:

creamos el siguiente código:


<html>
<head>
<title>Ejemplo html</title>
</head>
<body>
<h1>Este es el Título</h1>
<h2>Subtitulo</h2>
<br>
Lista Ordenada<br>
<ol>
<li>Tema1</li>
<li>Tema2</li>
<li>Tema3</li>
</ol>
<br>
Lista sin Ordenar<br>
<ul>
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
</ul>
<br>

<img style=”width: 297px; height: 287px;” alt=”compu” src=”compu.PNG”><br>
</body>
</html>


Explicación:

Los encabezados van desde H1, hasta H7

Ol    Indica lista ordenada

Ul   Indica lista sin ordenar

Li  son cada uno de los elementos de las listas

Br   Son para insertar líneas en blanco

Img   indica que aparecerá una imagen

Style indica que se especificara el estilo de la imagen.

Width   ancho de la imagen

Height   alto de la imagen

Alt   texto alternativo en dado caso que no se pueda mostrar la imagen en el navegador

Src=”Dirección y nombre de la Imagen”


Guardar el código anterior se puede escribir en el bloc de notas, en Sublime text 2, en Geany o cualquier otro editor de textos.

Se guarda con el nombre que se quiera, por ejemplo vinetas.html

La imagen utilizada es la siguiente: compuLa imagen debe estar en la misma carpeta que nuestro documentos html.


 

No olvides compartir...Share on FacebookEmail this to someoneTweet about this on TwitterShare on LinkedInPrint this page