Básicos de HTML Letras Para aplicar diferentes tipos ó estilos de

Básicos de HTML
Letras
Para aplicar diferentes tipos ó estilos de letras se pueden utilizar una varieda de códigos. Los siguientes códigos
muestran varios ejemplos de como lograr esto y sus resultados.
Código:
Resultado:
<b>Letra en Bold</b>
Letra en Bold
<i>Letra en italica</i>
Letra en italica
<u>Letra subrayada</u> Letra subrayada
Además de estos estilos existen otros códigos para adjudicar diferentes tamaños, colores y formas. Veamos el
siguiente ejemplo:
Código:
Resultado:
<font face="Arial" color="orange" size=1>El tipo (face) de esta letra
debe ser "Arial", el color (color) debe ser "anaranjado" y el tamaño
(size) debe ser "1"</font>
El tipo (face) de esta letra debe ser "Arial", el color
(color) debe ser "anaranjado" y el tamaño (size)
debe ser "1"
Otros tipos de letras que se pueden utilizar son "Tahoma", "Comic Sans", "Impact", "Verdana"; otros tipos de colores
que se pueden utilizar son "green" (verde), "yellow" (amarillo), "blue" (azul), "gray" (griz); y para aumentar el tamaño
(size) de las letras solo debes aumentar el número dentro del código y listo.
Recuerda que para los códigos tengan efecto debes escribirlos exactamente como aparecen aquí. Si te sirve de
ayuda solo copia y pega (copy paste) los códigos de ejemplos en un editor de texto para que vayas practicando.
Imágenes
Para insertar una imágen en una página de internet debes utilizar el siguiente código:
Código:
<img src="http://www.blogger.com/img/logo40.gif">
Resultado:
Fíjate que la dirección URL se refiere a la dirección en el internet donde se encuentra publicada la imágen. Esta
debe estar publicada en los archivos de tu web o en algún servicio de alojamiento de imágenes
como imageshack para que puedas incluirla en tu web.
Para saber la dirección URL o nombre de una imágen ya publicada en el internet debes hacer un click derecho
(right-click) sobre la imágen y seleccionar la opción de propiedades (properties) y ahí verás la dirección URL. Si
haces esto en la imágen anterior la dirección que debes ver es la siguiente.
Dirección: http://www.blogger.com/img/logo40.gif
Ahora, para que la imágen sea adjudicada por el editor de texto debes incluir la dirección URL dentro del código de
<img src=""> como explica el ejemplo anterior.
Coloca el código donde quieras que se vea la imágen dentro de la página y listo.
Un efecto que podemos añadir a una imágen es el de hacer click sobre esta para que nos lleve a otro lugar. Al igual
que enlazamos un texto (Ver tópico de enlaces) podemos enlazar una imágen. Veamos el siguiente ejemplo:
Código:
<a href="http://www.uanl.mx"><img src="http://localhost/wordpress/wp-content/uploads/2015/03/alfonsito.jpg"></a>
Resultado:
Si colocamos el apuntador del mouse sobre la imágen y hacemos click, esta nos llevará a la dirección indicada en el
código de <a href=>.
Otro efecto que podemos adjudicar a una imagen es el de posición. Para posicionar una imágen dentro de una
página de internet solo debes añadir el siguiente código.
Código:
<center><img src="http://www.blogger.com/img/logo40.gif"></center>
Resultado:
La imágen debe verse centralizada al añadir el código de <center>
Para izquierda o derecha puedes cambiar el código de center por <right> para derecha y <left> para izquierda.
Si deseas que el enlace de la imagen abra en una nueva ventana solo colocas target="_blank" después de la
dirección de la imagen como se aprecia en el siguiente enlace.
<a href="http://www.uanl.mx" target="_blank"><img src="http://localhost/wordpress/wpcontent/uploads/2015/03/alfonsito.jpg"> </a>”la imagen
Líneas
Para insertar una línea en una página de internet solo debes incluir el siguiente código:
Código: <hr>
Resultado:
Para adjudicar color y tamaño a la linea solo debes añadir los siguientes códigos:
Código: <hr color="blue" size=3>
Resultado:
Otros estilos que podemos adjudicar a las líneas pueden hacerse utilizando el código de "width" para indicar el largo
de la línea. De no indicar este código la línea se ajustará automaticamente al largo de la página de internet. Veamos
el siguiente ejemplo:
Código: <hr color="green" size=1 width="150">
Resultado:
Tablas
Para insertar una tabla en una página de internet debes incluir el código que aparece a continuación. Este puede ser
modificado para obtener diferentes resultados y estilos de tablas.
Código:
<table border=1><td>Aqui va el contenido de la tabla, texto, imágenes, etc.</td></table>
Resultado:
Aqui va el contenido de la tabla, texto, imágenes etc.
El número uno se refiere al tamaño del borde de la tabla. Si aumentas el número el borde será mas grueso y si
escribes 0 la tabla no mostrará borde alguno.
Además de una simple tabla podemos adjudicar varios códigos para obtener una tabla dividida en columnas y
encasillados. Veamos los siguientes ejemplos.
Código:
<table border=1><td>Columna #1</td><td>Columna #2</td></table>
Resultado:
Columna #1 Columna #2
Fíjate que antes de cerrar la tabla con el código de </table> añadimos un set de códigos <td></td> para insertar la
seguna columna. ¿Pero que tal si queremos añadir contenido debajo de estas columnas? Veamos el siguiente
ejemplo:
Código:
<table border=1><td>Columna #1</td><td>Columna #2</td><tr><td>Contenido Bajo Columna#1<td>Contenido Bajo
Columna#2</td></table>
Resultado:
Columna #1
Columna #2
Contenido Bajo Columna#1 Contenido Bajo Columna#2
Si queremos añadir más columnas o encasillados solo tenemos que añadir más códigos <td></td> para columnas y
<tr> para encasillados. Fíjate que para añadir encasillados no tienes que cerrar el código <tr>, solo lo escribes donde
quieres que vaya el espacio y listo.
Otro efecto que podemos aplicar a una tabla es el color de los bordes de la tabla y el color de fondo. Esto se hace
añadiendo los códigos de <bordercolor="red"> para el color de borde y <bgcolor="black"> para el color de fondo.
Veamos el siguiente ejemplo:
Código:
<table border=1 bordercolor="silver" bgcolor="black"><td><font color="white">Tabla con borde de color plateado
(silver) y fondo negro (black). El color de letra (font color) es blanco</font></td></table>
Resultado:
Tabla con borde de color plateado (silver) y fondo negro (black). El color de letra (font
color) es blanco
Solo cambia las propiedades de los códigos para obtener otros resultados.