FUENTES
La fuente que se va a utilizar, puede definirse con las etiquetas: <Hx>
La etiqueta <font>, define el tipo de fuente, color y tamaño, utilizando los siguientes atributos
<font size="+2">
<font face="algerian">,
<font color="red">
Pueden ir acompañados de los atributos para centrar <align="center">, a la dercha <align="right"> o justificado <align="justify">
otras etiquetas útiles para fuentes, son:
<b> para insertar texto en negrilla
<i> para texto en itálica
<u> texto subrayado
<s> texto tachado
<sub> texto subíndice
<sup> texto superíndice
<br> inserta un salto de línea
<blockquote> inserta un bloque tabulado
<hr> inserta una línea horizontal, puede acompañarse de los atributos <size="5"> y <width="50%">
LISTAS EN HTML
LISTAS DESORDENADAS - Unordered List -
Se referencian con la etiqueta <ul>
Cada elemento de la lista, se referencia con el tag <li>
También puede aplicarse el atributo type, para definir las viñetas (circle, disc, square,..)
LISTAS ORDENADAS - Ordered List -
Se referencian con la etiqueta <ol>
Puede modificarse el estilo del orden con el atributo type. ("1", "a", "i",...)
Puede complementarse con el atributo start.
LISTAS DE DEFINICIÓN -Definition List -
Su etiqueta principal es <dl>
La etiqueta del elemento es <dt> - definition term -
La etiqueta de definición es <dd>
Las listas anteriores pueden anidarse entre ellas.
MENU
Ejemplo de un menú, sencillo
<ul class="accordion-menu">
<li>
<div class="dropdownlink"><i class="fa fa-road" aria-hidden="true"></i> Historia
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li><a href="#">History book 1</a></li>
<li><a href="#">History book 2</a></li>
<li><a href="#">History book 3</a></li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="fa fa-paper-plane" aria-hidden="true"></i> Ficción
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li><a href="#">Fiction book 1</a></li>
<li><a href="#">Fiction book 2</a></li>
<li><a href="#">Fiction book 3</a></li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="fa fa-quote-left" aria-hidden="true"></i> Fantasia
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li><a href="#">Fantasy book 1</a></li>
<li><a href="#">Fantasy book 2</a></li>
<li><a href="#">Fantasy book 3</a></li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="fa fa-motorcycle" aria-hidden="true"></i> Acción
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li><a href="#">Action book 1</a></li>
<li><a href="#">Action book 2</a></li>
<li><a href="#">Action book 3</a></li>
</ul>
</li>
</ul>
La etiqueta <a href = "">, se utiliza para crear un hipervínculo a una página web o a otro sitio de la página
<p>Puede comunicarse por:</p>
<ul>
<li><a href="https://google.com">Página Web</a></li>
<li><a href="mailto:m.bluth@example.com">Correo Electrónico</a></li>
<li><a href="tel:+123456789">Teléfono</a></li>
</ul>
Para ir a otro sitio de la misma página, debe utilizar <a name="anclaje-1"> en el sitio deseado.
FORMULARIOS EN HTML
Los formularios se definen con la etiqueta <form>
Los formularios pueden enviar información al correo, utilizando el atributo action
<form action="mailto:edleon@sena.edu.co"
Las cajas de texto se definen con <input> con los atributos type, name, size y maxlength.
El atributo Type="password" permite el texto oculto con asteriscos.
Una caja de texto amplia, se define con <textarea> y los atributos rows y cols, que definen filas y columnas.
LISTA DE OPCIONES
La lista de opciones se define con <select> y cada una de sus ítems con <option>
Option, puede acompañarse con el atributo selected y value
ejemplo:
BOTONES DE RADIO
Utiliza la etiqueta <input> con el atributo type="radio"
también puede utilizarse el atributo checked, para mostrar una opción seleccionada
Ejemplo:
<input type="radio" name="estadocivil" value="1">Soltero
<input type="radio" name="estadocivil" value="2">Casado
CAJAS DE VALIDACION
Al igual que el anterior, pero se utiliza el atributo type="checkbox"
BOTON DE ENVÍO, BORRADO y NORMAL
Para el botón de envío se utiliza el atributo type="submit" con la etiqueta <input>
Para el botón de borrado, se utiliza el atributo type="reset" con la etiqueta <input>
Para cualquier otro botón, utilice el atributo type="button"
La librería CSS Bootstrap es una de las muchas librerías de estilos que existen, para poner estilos a los elementos más comunes de una página web, como botones, tarjetas, navbars, etc.
Puede ver la referencia de estilos en https://getbootstrap.com/
ACTIVIDAD DE APRENDIZAJE
Adicione a su página WEB las diferentes librerías que ofrece Bootstrap
No hay comentarios.:
Publicar un comentario