Explicacion Basica Html
DAR FORMATO A LAS LETRAS
Cambiar los atributos de las letras utilizamos el comando <font> </font> (fuente o tipo de letra). El color o el tamaño son atributos del elemento tipo de letra.
Podemos dar distintos atributos a las letras.
A) TAMAÑO DEL TEXTO
* Si queremos poner las letras de distinto tamaño empleamos el atributo
* Si queremos poner las letras de distinto tamaño empleamos el atributo
SIZE="".
* Dentro de las comillas pondremos "+" para aumentar el tamaño y "-" para disminuirlo
EJEMPLO 1
<FONT SIZE="+1">este texto se ve con mayor tamaño</FONT>
El resultado:
Este texto se ve con mayor tamaño
EJEMPLO 2
Si queremos aun mayor tamaño ponemos un número mayor. Voy a probar con 4
<FONT SIZE="+4">este texto se ve muy grande</FONT>
Este texto se ve muy grande
EJEMPLO 3
Para disminuir el tamaño ponemos -1
<FONT SIZE="-1">al poner -1 disminuye el tamaño</FONT>
Al poner -1 disminuye el tamaño
Podemos poner el texto en negrilla, en cursiva o subrayado
PONER EL TEXTO EN NEGRILLA
Para poner el texto en negrilla utilizamos el tag "b" (de bold)
Soy el <b>mejor</b> de la clase
Soy el mejor de la clase
PONER EL TEXTO EN CURSIVA
Para ponerlo en cursiva utilizamos "i" (de italian)
Poner un <i>texto en cursiva</i>
Poner un texto en cursiva
PONER EL TEXTO SUBRAYADO
Para subrayado
Ahora toca el <u>subrayado</u> de parte de la frase
Ahora toca el subrayado de parte de la frase
LECCION 8ª
PONER COLORES
PONER COLORES
La instrucción para poner color a las letras es
<FONT COLOR="entre estas comillas va el nombre o el número del color">aquí el texto al que queremos dar color</FONT>
EJEMPLO 1
Para poner el texto en rojo
<FONT COLOR="RED">este texto se pone rojo</font>
El resultado si lo ponemos dentro de los códigos del fichero html será
este texto se pone rojo
EJEMPLO 2
Para poner el texto en azul
<FONT COLOR="BLUE">este texto se pone en azul</font>
este texto se pone en azul
Por tanto vemos que las instrucciones de HTML tienen varias partes.
Las Instrucciones de html se Componen De Tres Partes Fundamentales:
Las Instrucciones de html se Componen De Tres Partes Fundamentales:
A) El Elemento al que se refiere la instruccion. Es la palabra que va después del signo <.
Por ejemplo <font es un elemento. En este caso el elemento es el tipo de letra. La instrucción por tanto se refiere al tipo de letra.
B) El atributo. El tamaño o el color son atributos posibles del tipo de letra.
C) El valor que toma el atributo. Por ejemplo rojo o verde.
Por ejemplo, queremos:
A) Al elemento tipo de letra
B) Darle el atributo color
C) Con el valor rojo.
|
Elemento
|
Atributo
|
Valor
|
El tag de cierre
|
|
<FONT
|
COLOR=
|
"RED">
|
</FONT>
|
Otro ejemplo, letra tamaño grande
|
Elemento
|
Atributo
|
Valor
|
|
|
<FONT
|
SIZE=
|
"+1">
|
</FONT>
|
LECCION 10ª
ALINEAR EL TEXTO
ALINEAR EL TEXTO
Para alinerar un texto utilizamos el atributo align
align=left para alinear a la izquierda
align=left para alinear a la izquierda
align=right para alinear a la derecha
align=center para centrar el texto
EJEMPLO ALINEAR A LA IZQUIERDA
<p align="left">alineamos el texto a la derecha</p>
alineamos el texto a la izquierda
EJEMPLO "ALINEAR A LA DERECHA"
<p align="right">alineamos el texto a la derecha</p>
alineamos el texto a la derecha
EJEMPLO DE CENTRAR
<p align="center">centramos el texto</p>
centramos el texto
El elemento para crear una línea horizontal es HR. Este "tag" no necesita un "tag" de cierre
Y a este elemento podemos darle distintos atributos
width para definir el largo de la línea con un cierto número de pixel o un porcentaje del documento>
size para asignar el ancho de la linea
noshade para el fondo de la línea
EJEMPLO
Línea de 100 pixels
<HR WIDTH=100>
Línea de 200 pixels
<HR WIDTH=200
Línea de un 50% del ancho del documento
<HR WIDTH=50%>
Línea del 100% del ancho del documento
<HR WIDTH=100%>
Línea con 10 de ancho
<HR SIZE=10>
Podemos combinar varios atributos. Por ejemplo línea de un 50% de largo y 10 pixel de ancho
<HR WIDTH=50% SIZE=10>
LOS PARRAFOS Y EL CAMBIO DE LINEA
Para mantener el texto formando un párrafo o bloque de texto utilizamos el "tag" <p>aqui va el texto</p>
<p>Si utilizamos la instrucción de párrafo nos aseguramos que el texto se mantenga junto y controlamos cuando queremos que exista una línea de espacio en blanco</p>
Si utilizamos la instrucción de párrafo nos aseguramos que el texto se mantenga junto y controlamos cuando queremos que exista una línea de espacio en blanco
PASAR A LA SIGUIENTE LINEA
Cuando queremos pasar el texto a otra línea podemos utilizar el "tag" <br> que no tiene tag de cierre.
Si queremos separar el siguiente texto en varias líneas.
la casa el perro el niño las vacaciones
Pondremos:
la casa<br>
el perro<br>
el niño<br>
las vacaciones<br>
Y en el documento HTML mostrara en el navegador:
la casa
el perro
el niño
las vacaciones
el perro
el niño
las vacaciones
LECCION 13ª
PONER TITULARES
PONER TITULARES
Los titulares o encabezamiento de los textos son otra forma de modificar el tamaño del texto.
La orden para encabezamiento es "H1" para un titular muy grande, "H2" para uno grande, H3, H4, H5 y para letra pequeña H6
<H1>Encabezamiento muy grande</H1>
Encabezamiento muy grande
<H2>Encabezamiento grande</H2>
Encabezamiento grande
<H3>Encabezamiento menos grande</H3>
Encabezamiento menos grande
<H6>Encabezamiento muy pequeño</H6>
Encabezamiento muy pequeño
LECCION 14ª
LAS UTILES TABLAS
LAS UTILES TABLAS
Las páginas web necesitan tener los elementos que colocamos ordenados y que se mantengan ordenados en los distintos navegadores.
Para definir el orden o la estructura de una página web se utilizan tablas con bordes ocultos. La mayoría de las páginas importantes se estructuran utilizando tablas ocultas.
Vamos a realizar una tabla con los bordes visibles
A) Las tablas comienzan con <table> y terminan con </table>
B) Definimos el borde de la tabla. Las tablas que se utilizan para ordenar los elementos sulen tener bordes invisibles para los navegadores y empleamos border="0". Si queremos un borde visible asignamos otro número al atributo borde. Nosotros en el primer ejemplo vamos a utilizar un borde visible border="1"
C) Definimos el tamaño de la tabla. Podemos definirlo como porcentaje del ancho de la página utilizando width
WIDTH="100%" nos genera una tabla que ocupa todo el ancho de la página que estamos creando.
WIDTH="50%" genera una tabla con la mitad del ancho del documento que creamos.
Podemos igualmente definir el tamaño de la tabla en número de pixel
WITH="100" ahora al no poner el % serán 100 pixel de larga la tabla y no el 100% del documento
D) Tenemos que definir las filas que lleva la tabla
<TR> </TR>
E) Y definimos las columnas utilizando
<TD> </TD>
Estas instrucciones de columna las pondremos dentro de las de fila.
EJEMPLO
Vamos a construir una tabla con el borde visible de tamaño el 100 por 100 del ancho del documento con dos filas y tres columnas.
Por tanto utilizamos al principio el "tag" <table> y al final </table>.
Definimos el borde border="1" y el ancho witdh="100%"
Definimos la primera fila con <tr> y </tr> y dentro las tres columnas <td> </td>
<tr> <td></td><td></td><td></td> </tr>
Y hacemos lo mismo con la segunda fila y sus tres columnas
<tr> <td></td><td></td><td></td> </tr>
Las instrucciones para construir la tabla nos queda. Recuerda que da igual que las instrucciones se escriban en mayúsculas o minúsculas. Los espacios en blanco no afectan al resultado por tanto es lo mismo poner <tr> <td></td><td></td><td></td> </tr> en una columna como lo ponemos a continuación.
<table border="1" witdh="100%">
<TR>
<td></td>
<td></td>
<td></td>
</TR>
<TR>
<td></td>
<td></td>
<td></td>
</TR>
</Table>
<TR>
<td></td>
<td></td>
<td></td>
</TR>
<TR>
<td></td>
<td></td>
<td></td>
</TR>
</Table>
Y el resultado.
|
|
|
|
|
|
|
|
TAMAÑO DE LAS COLUMNAS Y MARGENES DE LAS CELDAS DE LAS TABLAS
FIJAR EL TAMAÑO DE LAS COLUMNAS
El mismo atributo utilizado para definir el tamaño de la tabla se utiliza para definir o fijar el tamaño de las columnas.
Definimos el tamaño de la columna con WIDTH
Por ejemplo, queremos que en una tabla de dos columnas, la primera columna ocupe el 20 por ciento de la tabla y la segunda el 80 por ciento.
Pondremos Width=20% en las celdas de la primera columna y Width=80% en las celdas de la segunda columna.
EL MARGEN DE LAS CELDAS
Podemos asignar márgenes a las celdas, de forma que lo que pongamos dentro no quede pegado a los bordes de la celda.
Para el margen de las celdas utilizamos el atributo cellpadding="aqui ponemos el número"
EJEMPLO
Realizaremos una tabla de 2 por 3
A) Una tabla con dos filas y tres columnas, con borde de la tabla 1 y el ancho de la tabla un 75% del ancho de la página.
B) Las celdas con un margen de 15 píxeles y el tamaño de las celdas un 10% del tamaño de la tabla la primera columna, un 20% del tamaño de la tabla la segunda columna y un 70% del tamaño de la tabla la tercera columna.
C) Pondremos dentro de las celdas las letras a,b,c,d,e,f
Quedaría
<table border="1" cellpadding="15" cellspacing="0" width="75%">
<tr>
<td width="10%">a</td>
<td width="20%">b</td>
<td width="70%">c</td>
</tr>
<tr>
<td width="10%">d</td>
<td width="20%">e</td>
<td width="70%">f</td>
</tr>
</table>
Y el resultado
|
a
|
b
|
c
|
|
d
|
e
|
f
|
EL COLOR DE LAS TABLAS
Para ponerle color a una celda utilizamos el atributo bgcolor="aqui ponemos el nombre o número del color"
EJEMPLO
Vamos a realizar una tabla de dos filas y dos columnas, con borde de tamaño "1" y de largo el 50% del ancho de página. Y le ponemos a una celda fondo rojo con el atributo bgcolor="red" y a otra fondo azul
<table border="1" cellpadding="0" cellspacing="0" width="50%">
<tr>
<td width="50%" bgcolor="red"></td>
<td width="50%" bgcolor="blue"></td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>
<tr>
<td width="50%" bgcolor="red"></td>
<td width="50%" bgcolor="blue"></td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>
El resultado que veremos:
|
|
|
|
|
|
COLOR DEL FONDO DE LA TABLA
Para darle color a toda la tabla es suficiente con poner el atributo bgcolor"" dentro de la instrucción de tabla. Para poner fondo amarillo bgcolor="yellow"
<table border="1" cellpadding="0" cellspacing="0" width="50%" bgcolor="yellow">
EJEMPLO
Una tabla de tres filas y dos columnas con un largo del 75%.
Y fondo amarillo
Y fondo amarillo
<table border="1" cellpadding="0" cellspacing="0" width="75%" bgcolor="yellow">
<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
</table>
|
|
|
|
|
|
|
|
|
LECCION 17ª
PONER ENLACES
PONER ENLACES
Lo más característico de Internet es ser un medio que no es lineal sino hipertexto es decir que utiliza enlaces para movernos entre distintos niveles o páginas.
La instrucción para un enlace es de la forma <A HREF="aqui ponemos la dirección a la que queremos que apunte el enlace">el texto que queremos que se vea en el documento</A>
EJEMPLO
Queremos enlazar con la página 100mejores.com y que el texto que se vea sea "La mejor selección de enlaces"
<A HREF="http://www.100mejores.com/">La mejor selección de enlaces"</A>
Recordar que los enlaces externos a otras páginas deben llevar la dirección completa de la página.
INSERTAR IMAGENES
Para insertar imágenes utilizamos <img src="aquí ponemos la dirección de la imagen">
Este tag no tiene tag de cierre.
En Internet tenemos numerosas páginas que proporcionan imágenes gratis. Por ejemplo
Nos vamos a gifmania para obtener una imagen de una ejecutiva
Seleccionamos mujeres y ejecutivas.
Nos situamos sobre la imagen y pulsamos el botón DERECHO