Mostrando entradas con la etiqueta listas. Mostrar todas las entradas
Mostrando entradas con la etiqueta listas. Mostrar todas las entradas

sábado, 29 de agosto de 2020

03 Listas

 Como crear listas en nuestro documento HTML.


El codigo utilizado es el siguiente:

<!DOCTYPE html>

<html lang="es">

<head>

<title>Listas</title>

</head>

<body>

<h1>Listas</h1>

<h2>Listas ordenadas</h2>

<ol>

<li>Elemento 1</li>

<li>Elemento 2</li>

<li>Elemento 3</li>

</ol>

<h2>Listas desordenadas</h2>

<ul>

<li>Elemento 1

    <ol>

        <li>Subelemento 1

            <ul>

                <li>Subelemento 1</li>

                <li>Subelemento 2</li>

            </ul>

        </li>

        <li>Subelemento 2</li>

        <li>Subelemento 3</li>

    </ol>

</li>

<li>Elemento 2</li>

<li>Elemento 3</li>

</ul>

</body>

</html>



lunes, 7 de enero de 2019

07 Html Css. Enlaces, listas e imagenes

Como crear enlaces, listas e imagenes con etiquetas #Html, crea tu #web



Este seria el codigo de ejemplo:


<!DOCTYPE html><html><head><title>Enlaces, Imagenes y Listas</title><meta charset="utf-8"></head><body><!--Cabecera--><header>
</header> <!--Barra navegacion--><nav>
</nav><!--Contenido principal--><section><article><!--Enlaces--><a href="#">Enlace</a><a href="http://www.google.es">Google</a><a href="http://www.google.es" target="_blank">Google</a><!--Imagenes--><figure><img src="milogo.jpg" alt="logo"></figure><!--Listas--><h2>Listas</h2><h3>Ordenadas</h3><ol><li>Elemento 1</li><li>Elemento 2</li><li>Elemento 3</li></ol><h3>Desordenadas</h3><ul><li>Elemento 1</li><li>Elemento 2</li><li>Elemento 3</li></ul></article></section><!--Complemento lateral--><aside>
</aside><!--Pie de pagina--><footer>
</footer></body></html>


sábado, 10 de septiembre de 2016

05. CSS Listas

En este video se ven algunas propiedades que se pueden modificar de las listas HTML con CSS.



El codigo HTML es:

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/listas.css">
<title>
Listas
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>
<ol class="listaordenada">
    <li>Blanco</li>
    <li>Rojo</li>
    <li>Verde</li>
</ol>
<ul class="listadesordenada">
    <li>Coche</li>
    <li>Bicicleta</li>
    <li>Patinete</li>
</ul>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>

El codigo CSS es:

/*Comentario de CSS*/
/*selector universal*/
*{
   
}
.listaordenada{
    list-style-type:lower-alpha;
    list-style-position:outside;
}
.listadesordenada{
    list-style-type:square;
    list-style-position:inside;   
    background-color:BLUE;
}

Espero os sea util, gracias.