Hoy cumplimos 2 meses con el curso html, llegamos a la clase 8. En clases anteriores vimos algo de diseño html 4, y no me meteré mas en el tema diseño, porque lo importante es entender el código, las partes de un documento web. En futuras clases si veremos algo de css para ampliar pero son muchas las ramas que podemos dividirnos:
* programación web
* diseño y maquetación web
* armado de contenidos web
* interacción web
* manejo cliente servidor
* etc.
Así que es importante intentar mezclar un poco de todo lo aprendido en clase, cada una de ellas introduce conceptos nuevos y es bueno que se genere una página con diseño y ir incorporando cada vez nuevas cosas. El diseño de cada uno de los ejercicios queda como tarea.
Ya aprendimos a armar una lista de links con la etiqueta <li>, estas son listas no ordenadas. Y aprendimos que cada opción de esta lista va dentro de la etiqueta <li>. Pero tenemos opciones para definir cual es la marca de cada opción con el atributo “type”:
* lista definida por puntos negros: <li type="disc">
* puntos con el fondo blanco: <li type="circle">
* por cuadrados: <li type="square">
Aunque esta apariencia dependerá del navegador. Hay algunos navegadores que dan otras apariencias a estos mismos atributos.
Vamos con un pequeño ejemplo en código:
<ul>
<li type="circle">Esto es un tipo de punto.</li>
<li type="square">Este es otro.</li>
<li type="disc">Y este es otro diferente.</li>
</ul>
nota: recordemos que las listas siempre están dentro del cuerpo.
Listas ordenadas
Para hacer una lista ordenada se utiliza la etiqueta <ol>. Cada opción de la lista también se pone con la misma etiqueta <li>. Pero al ser listas ordenadas los símbolos serán números y éstos se irán generando automáticamente por orden, a medida vayamos poniendo nuevas opciones.
ejemplo:
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
En las listas ordenadas podemos hacer que el primer punto comience con el número que nosotros queramos. Lo conseguiremos gracias al atributo “value”. Los siguientes puntos que escribamos se generarán automáticamente por orden, partiendo de ese número. Por ejemplo, si queremos que nuestra lista empiece por el número 20, sólo deberemos escribir lo siguiente:
<ol>
<li value="20">Este será el número 20. </li>
<li>Este será el 21. </li>
<li> Este será el 22. Y así sucesivamente. </li>
</ol>
Es importante que el que lo desee comparte sus códigos a mi mail y los iré publicando como ejemplo en el blog. También quien tenga dudas sobre los temas tocados en las clases, que lo manifieste por alguno de los medios de contacto, y se hará un post ampliando ese tema.
¡Hasta la próxima clase!
No hay comentarios:
Publicar un comentario