Hoy aprenderemos a darle mas forma a nuestro documento html, en la
clase anterior aprendimos sobre colores hexadecimales y como poner un
color de fondo y un color de texto.
Lo primero que analizaremos es como darle color, una tipografía y un
tamaño a las letras de una parte específica del documento. Para ello
utilizaremos la etiqueta <font>, dicha etiqueta tiene los siguientes
atributos:
* color: determina el color de la letra.
* size: determina el tamaño de la letra que puede ir entre 1 a 7. El 7
indica mayor tamaño.
* face: indica la tipografía a utilizar en el texto.
ejemplo de uso:
<font face="arial" size=5 color="red">Texto para formatear</font>
nota: recordamos que los colores se pueden indicar en inglés o en
hexadecimal.
veamos un ejemplo completo de utilización:
<html>
<head>
<title>Ejemplo de estilos</title>
</head>
<body>
<h1><font color="red" face="Arial" size="5">un titulo</font></h1>
<p><font color="gray" face="Verdana" size="2">Un párrafo de texto no
muy largo.</font></p>
</body>
</html>
Si la analizan con detenimiento utilicé código html 4, ya que esta
no es una forma aconsejable de diseñar páginas web, desde html 5 ya no
se utiliza mas. Pero tomé la decisión de enseñarla igual porque alguna
vez se toparán con cursos viejos o códigos viejos y es importante que
sepan como actualizarlos. Desde html 5 se empieza a usar diseño desde
hoja de estilos css. Para explicarlo rápidamente es un lenguaje que se
complementa con el html para armar diseños. En futuras clases, veremos
una introducción al css, y estudiaremos un poco sobre él.
Marcas de estilos:
Ahora veremos como darle estilo al texto: Todas las siguientes
etiquetas deben tener su apertura y cierre.
Texto en negrita: para demarcar un texto se debe utilizar la
etiqueta <b> esto indicará que el texto está en negrita. La b es de
"bold". ejemplo:
<B> Texto en negrita </B>
Para formatearlo en cursiva utilizaremos la etiqueta <i>, que indica
"italic". Ejemplo:
<I> Texto en cursiva </I>
Para subrayado utilizaremos la etiqueta <U>, la u proviene de
"underline". Ejemplo:
<U> Texto subrayado </U>
para hacer un texto tachado tenemos la etiqueta <strike>, ejemplo :
<strike> Texto tachado </strike>
Y para cerrar esta lección dejo un ejemplo de utilización de todas
las etiquetas anteriores:
<html>
<head>
<title>estilos de texto</title>
</head>
<body bgcolor="white">
<B> Texto negrita con B </B><br><br>
<I> Texto cursiva con I </I><br><br>
<U> Texto subrayado con U </U><br><br>
<STRIKE> Texto tachado con STRIKE </STRIKE>
</body>
</html>
Hasta la próxima clase!
No hay comentarios:
Publicar un comentario