 Lección 1 Introducción

 Lección 2 Conceptos Fundamentales

 Lección 3 Mi primera página (I)
 Lección 4 Mi primera página (II)
 Lección 5 Mi primera página (III)
 Lección 6 Guardar
 Lección 7 Formato de Letras
 Lección 8 Colores de las Letras
 Lección 9 Las partes de las instrucciones
 Lección 10 Alinear el Texto
 Lección 11 Líneas Horizontales
 Lección 12 Los párrafos y el cambio de Línea
 Lección 13 Poner Titulares
 Lección 14 Las útiles tablas
 Lección 15 Atributos de las Tablas
 Lección 16 Color de las Tablas
 Lección 17 Poner Enlaces
 Lección 18 Insertar Imágenes
 Lección 19 Imágenes Animadas
 Lección 20 Atributos de Insertar imágenes
 Lección 21 Enlazar una Imagen
 Lección 22 Atributos de la Página
 Lección 23 Poner Notas
 Lección 24 Recomendaciones Finales
Introducción

Oir Lecc.
Para confeccionar una página web lo único que se necesita es un editor
de texto. Existen editores especializados en crear ficheros HTML
Podemos utilizar Notepad, WordPad o el que queramos. Es preferible
utilizar Notepad o un editor especializado para generar ficheros de Html
que en editor más avanzado que puede incluir códigos no deseados.
Seguramente tienes uno de estos programas en tu ordenador. Si no
sabes donde esta pulsa en la esquina inferior izquierda "Inicio" y
"Buscar"

Escribimos el nombre del fichero que estoy buscando en este caso

Notepad y pulsamos "Buscar Ahora"

Y pulsamos dos veces sobre sobre el fichero de Notepad

 Existen editores gratuitos en Internet. Por ejemplo en la página de
Internet
[Link] En la sección de programación tienes editores
gratuitos para descargar.

Conceptos Fundamentales

Oir Lecc.
Pasos para crear la página web:
1. Abrir el programa editor de texto.
2. Escribir los códigos o "tags". Escribimos los comandos como
escribimos en un procesador de textos. Y guardamos el fichero que
creamos como fichero de texto.A lo largo de este curso veremos los
diferentes códigos.
 Una vez abierto el programa editor de texto voy escribiendo los
códigos o "tags"
 Las instrucciones, códigos o "tags" de html van entre dos signos < y
>. Las instrucciones es indiferente si se escriben en mayúsculas o
minúsculas.
 Tenemos que poner un código de inicio y uno de cierre.

Ejemplo: Poner texto en negrilla

La instrucción para que un texto se ponga en negrilla es <b>Soy
magnífico</b>
La instrucción de cierre tiene que llevar el signo /
 Por lo tanto:
A) Ponemos el código de inicio para poner el texto en negrilla <b>
B) A continuación el texto que queremos que aparezca en negrilla y
C) Al final el código de cierre </b>

3. Guardar el fichero. Es recomendable que cree un directorio en el disco

duro de su ordenador para guardar ordenadas los ficheros que iremos
generando.
1. Para guardar el fichero tenemos que ponerle un nombre y como
extensión htm. html o shtml. Es decir nombre, punto y htm. Por
ejemplo [Link]
2. Es preferible no poner acentos, "ñ" ni simbolos extraños para evitar
problemas de compatibilidad
3. No ponerle espacios en blanco al nombre del fichero.
4. Y guardar como documento de TEXTO. Formato de texto ASCII.
Volveremos a ver esta cuestión.
Una vez guardado el fichero podemos ver como queda utilizando el
mismo programa con el que ve esta página. El resultado cuando veamos
con el navegador el documento será

Soy magnífico

Puede ver como quedaría el fichero pulsando el enlace miprimerapagina.

Para volver pulse Atrás en su navegador

[Link]
 Si utiliza una versión avanzada de Internet Explorer, puede ver los
códigos de la página. Una vez que este en miprimerapagina pulse en la
Barra superior:
 Pulsamos Archivo
 Y pulsamos Modificar con Microsoft Front Page. Esperamos unos
segundos.

Y pulsamos sobre la pestaña HTML que se encuentra en la parte

inferior derecha.

Mi primera página (I)


Oir Lecc.
Vamos a realizar nuestra primera página utilizando los códigos html que
denominaremos "La Primera" y en la que aparezca escrito "soy un
fenómeno"
Tenemos que crear un fichero en el que podremos las instrucciones y lo
guardamos como fichero con terminación .htm
A) Todas las páginas html comienzan con el código de inicio
<html> y terminan con el código </html>
Así que ponemos
<html>
</html>
B) Las páginas html se dividen en un encabezado y un
cuerpo. Para el encabezamiento tenemos que poner los "tags"
<head>
</head>
Tenemos que ponerlo dentro de las instrucciones inicial y final de página
(paso A) por lo tanto nos queda
<html>
<head>
</head>
</html>

Mi primera página (II)


Oir Lecc.
C) Igualmente insertamos las instrucciones para el cuerpo de la
página <body> y </body>
Con lo que nos queda
<html>
<head>
</head>
<body>
</body>
</html>
Podemos dejar líneas en blanco para comprender con más claridad la
estructura del programa que estamos escribiendo. las líneas en blanco
serán ignoradas cuando se ejecute el fichero html

Mi primera página (III)


Oir Lecc.
D) Le ponemos título a la página con la instrucción <title>
</title> que tenemos que poner dentro del encabezado (entre head y
head)
<html>

<head>
<title>Mi primera Pagina</title>
</head>

<body>
</body>
</html>
E) Vamos a poner el texto en negrilla "Soy un fenómeno". La
instrucción para negrilla es <b> y <b/>. Y el texto hay que colocarlo
dentro del cuerpo (entre body y body) de la página.
Por tanto nos queda
<html>
<head>
<title>Mi primera Pagina</title>
</head>
<body>
Soy el mejor
</body>
</html>

Guardar

Oir Lecc.
Guardamos el fichero para lo cual es aconsejable ser ordenado y crear
un subdirectorio en el disco duro de nuestro ordenador para ir
almacenando los ficheros.
Es importante:
A) Ponerle al fichero la terminación html
B) Guardarlo como documento de TEXTO (para que no se incluyan otros
códigos)
C) Para evitar problemas es interesante que en el nombre del fichero,
NO DEJAR ESPACIOS y NI PONER SIGNOS NO COMUNES como acentos,
"ñ", o símbolos de distintos idiomas.

Formato de Letras

Oir Lecc.
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
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

Colores de las Letras


Oir Lecc.
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

Las partes de las instrucciones


Oir Lecc.
Por tanto vemos que las instrucciones de HTML tienen varias partes.
Las instrucciones de html se componen de tres partes fundamentales:
A) El elemento al que se refiere la instrucción. 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.

El tag de
Elemento Atributo Valor
cierre

<FONT COLOR= "RED"> </FONT>

Otro ejemplo, letra tamaño grande

Elemento Atributo Valor

<FONT SIZE= "+1"> </FONT>

Alinear el Texto

Oir Lecc.
Para alinear el texto utilizamos el atributo align
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 izquierda</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

Líneas Horizontales

Oir Lecc.
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

Línea de 200 pixels

Línea de un 50% del ancho del documento

Línea del 100% del ancho del documento

Línea con 10 de ancho

Podemos combinar varios atributos. Por ejemplo línea de un 50% de

largo y 10 pixel de ancho

Los párrafos y el cambio de Línea


Oir Lecc.
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

Poner Titulares

Oir Lecc.
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

Las útiles tablas


Oir Lecc.
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>
Y el resultado.

Atributos de las Tablas


Oir Lecc.
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
Color de las Tablas

Oir Lecc.
Para ponerle color a una celda utilizamos el atributo bgcolor=" aquí
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>

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
<table border="1" cellpadding="0" cellspacing="0" width="75%"
bgcolor="yellow">
<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>

<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
</table>

Poner Enlaces

Oir Lecc.
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 [Link] y que el texto que se
vea sea "La mejor selección de enlaces"
<A HREF="[Link] mejor selección de
enlaces"</A>
La mejor selección de enlaces
Recordar que los enlaces externos a otras páginas deben llevar la
dirección completa de la página.

Insertar Imágenes

Oir Lecc.
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
[Link]
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
Lo guardamos con el nombre de fichero ejecutiva y guardar como tipo
de fichero GIF. Podemos guardarlo con varios tipos de ficheros, elegimos
los gif por ocupar poco espacio y dar pocos problemas de
compatibilidad.

Si lo guardamos en el MISMO directorio que el fichero HTML que

estamos creando la instrucción para insertar la imagen de la ejecutiva
nos queda:
<img src="[Link]">

Es MUY IMPORTANTE tener cuidado con las direcciones de la

imágenes. Si las imágenes están en un directorio y el fichero html que
estamos creando en otro directorio, la dirección de la imagen debe
indicar la localización de la imagen en el otro directorio.
Cuando hemos puesto imágenes en un fichero HTML y al enviarlo al
servidor de Internet no aparecen suele ser por dos motivos:
A) Hemos enviado el fichero HTML a Internet pero no los ficheros con las
imágenes.
B) Al enviarlo al servidor la dirección donde el programa busca la
imagen es distinta de donde realmente esta la imagen. Para comprobar
si donde esta la imagen coincide con la dirección que tiene la página nos
colocamos sobre la imagen (o sobre donde debería estar) y pulsando el
botón DERECHO en el menú que aparece pulsamos propiedades.
Lo recomendable es MANTENER LA MISMA ESTRUCTURA DE
DIRECTORIOS en el disco duro de nuestro ordenador y en el servidor de
Internet. Al mover los ficheros en el disco duro y posteriormente
enviarlo al servidor puede que la dirección de la imagen no coincida con
la localización de la imagen.

Imágenes Animadas

Oir Lecc.
Para insertar imágenes animadas se hace todo igual que para insertar
imágenes. Simplemente elegimos una imagen animada para enlazar.
Por ejemplo en la misma página de[Link]
Seleccionamos una imagen animada

La guardamos con el nombre ejecutivaanimada

La instrucción para insertar la imagen queda:
<img src="[Link]">
Y el resultado

Consulta
Los mejores cursos GRATIS

Atributos de Insertar imágenes


Oir Lecc.
Para una correcta visualización en los distintos navegadores es
aconsejable definir el largo y alto de la imagen que se inserta
LARGO Y ALTO
Para definir el largo y el alto de una imagen utilizamos los atributos
WIDTH y HEIGHT
Por ejemplo la imagen ejecutivaanimada tiene unas dimensiones de 167
pixels de largo por 109 pixels de alto. Podemos comprobarlo
situándonos sobre la imagen y pulsando el botón DERECHO del ratón
seleccionar "Propiedades"
La instrucción quedaría
<img src="[Link]" WIDTH="167" HEIGHT="109">
EL BORDE DE LAS IMÁGENES
Podemos ponerle borde a la imagen empleando el atributo border y
asignándole un valor por ejemplo 2. Si no queremos borde podemos
poner border=0
<img border="2" src="[Link]" WIDTH="167"
HEIGHT="109" >

Es posible y recomendable poner un texto para cuando no aparezca la

imagen por algún motivo.

TEXTO ALTERNATIVO A LA IMAGEN

Para poner un texto alternativo se utiliza el "tag" ALT
Vamos a poner la imagen anterior con un borde mayor y en un recuadro
más largo y menos alto y con el texto alternativo "secretaria animada"
<img border="5" src="[Link]" WIDTH="250"
HEIGHT="90" ALT="secretaria animada">

Enlazar una Imagen

 
Oir Lecc.
Si queremos poner un botón o una imagen que al pulsarla el usuario se
encamine a otra página, utilizamos la orden para poner enlaces
combinada con la orden para insertar imágenes.
<a href="dirección del enlace a otra página"> <img src="aquí ponemos
la localización de la imagen"></a>
Vamos a poner la imagen de la secretaria y que al pulsarla lleve al
usuario al portal de secretarias
[Link]
La instrucción nos quedaría:
<a href="[Link] <img
src="[Link]"> </a>
Y se vera al acceder con el navegador a la página. De forma que al
pulsar sobre la imagen nos dirigimos a la página enlazada. Vale, de
acuerdo, pulsa la imagen pero recuerda darle en tu navegador al "pa
tra" "atras" o "Back" y seguir el curso.

Esto nos permite poner botones y flechas que al pulsarlas nos

encaminan a otras páginas de nuestra web o externas.

OTRO EJEMPLO
Insertamos una imagen que al pulsarla nos sitúa en la portada de
aulafacil
<a href="[Link] border="0"
src="[Link]" width="90" height="70"></a>
Atributos de la Página

Oir Lecc.
Hemos visto que los ficheros HTML se dividen en una cabecera y un
cuerpo o body. Los ficheros incorporan las instrucciones

<html>
<head>
</head>
<body>
</body>
</html>

Al "tag" body podemos añadirle una serie de atributos de color para

asignar un color diferente:
A) Al fondo del documento con BGCOLOR
B) Colocar una imagen de fondo BACKGROUND
C) LINK para cambiar el color de los enlaces
D) VLINK para cambiar el color de los enlaces ya visitados por el usuario
E) Podemos cambiar el color del texto con el atributo TEXT

EJEMPLO
Asignaremos un fondo de color amarillo al documento
<html>
<head>
</head>
<body bgcolor=yellow>
</body>
</html>
Nos quedará el fondo de la página en amarillo.

Poner Notas

Oir Lecc.
Una buena idea cuando se programa es ir añadiendo comentarios para
aclarar lo que estamos haciendo. Esto es especialmente importante
cuando después de un tiempo volvemos a revisar un programa o cuando
otro programador tiene que revisar o utilizar el programa.
Los comentarios no aparecen cuando el usuario ve el fichero con un
navegador y no tiene efectos en el programa.
Para añadir comentarios utilizamos <!--aqui ponemos los comentarios
sobre el programa-->
Lo mismo podemos hacer utilizando los "tags" <comment>aqui
ponemos el texto del comentarios</comment>