Escolar Documentos
Profissional Documentos
Cultura Documentos
:: CDM Informtica ::
HTML bsico
Las pginas que vemos en Internet estn escritas utilizando el lenguaje HTML (Hyper
Text Markup Language). Este lenguaje est basado en etiquetas que marcan el inicio y fin de
cada elemento de la pgina Web.
Por ejemplo, el ttulo de la pgina Web se escribe entre las etiquetas <TITLE> y
</TITLE>. Como vemos, ambas etiquetas consisten en poner un mismo comando entre los
smbolos "<" y ">". La primera etiqueta indica inicio, y la segunda, que incluye el smbolo "/",
indica final.
Las etiquetas disponen de atributos que permiten definir caractersticas del elemento
sobre el que actan. Por ejemplo, <TABLE Border="1"> indica que la tabla tendr un borde de
tipo 1.
Una pgina HTML bsica tendra el siguiente aspecto:
<html>
<head>
<title>Mi primera pgina web</title>
<body>
<a href="http://www.cdminformatica.edu.py"> haz clic aqu para ir a CDM</a>
Contenido adicional de la pgina web
</body>
</html>
:: CDM Informtica ::
Esteban Maidana
:: CDM Informtica ::
Panel de Herramientas
Barra de documentos
Selector de vistas
Barra de Estado
Esteban Maidana
:: CDM Informtica ::
Hiperenlaces
Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado
lleva de una pgina o archivo a otra pgina o archivo.
Es posible asignar un vnculo a un texto, a una imagen, o a parte de una imagen.
Tipos de enlaces
Existen diferentes clases de rutas de acceso a la hora de definir los vnculos.
Capas
Una capa es un rea rectangular, una parte de la pgina, que tiene un comportamiento
muy independiente dentro de la ventana del navegador, ya que la podemos colocar en
cualquier parte de la misma y la podremos mover por ella independientemente. En el uso de
capas se basan muchos de los efectos ms comunes del DHTML.
Dichas capas pueden ocultarse y solaparse entre s, lo que proporciona grandes
posibilidades de diseo.
Las capas pueden moverse de una posicin a otra de la ventana pulsando sobre el
recuadro blanco, y sin soltar el ratn, arrastrndola hacia la nueva posicin.
Tambin pueden ser redimensionadas pulsando
arrastrndolos hasta conseguir el tamao deseado.
sobre
los
recuadros
negros,
Dentro del recuadro de la capa es posible insertar texto, tablas, imgenes, animaciones
flash, y todos los elementos que puede contener un documento HTML.
Este icono
tambin la capa.
Esteban Maidana
:: CDM Informtica ::
Esteban Maidana
:: CDM Informtica ::
Esteban Maidana
:: CDM Informtica ::
Esteban Maidana
:: CDM Informtica ::
Creamos nuestra pgina principal (index.html) incluyendo el Doctype para xhtml 1.0
stric. Modificamos las propiedades de la pgina haciendo clic sobre el cono CSS ubicado en la
barra de herramientas.
Cuando accedemos al editor CSS de un documento que an no fue guardado, KompoZer
nos pedir el ttulo para el documento y posteriormente el nombre y ubicacin del archivo
html.
Esteban Maidana
:: CDM Informtica ::
:: CDM Informtica ::
Hacemos clic sobre el botn Aceptar para cerrar el editor CSS observando el aspecto de
la pgina que debera ser similar al siguiente:
Luego insertamos una capa (etiqueta div) principal con el id contenedor que
justamente contendr a toda la pagina. Accedemos al men Insertar, HTML:
Esteban Maidana
10
:: CDM Informtica ::
En el cuadro siguiente, escribimos la etiqueta HTML que queremos insertar. En este caso
<div>texto cualquiera</div>, luego presionamos el botn Insertar.
Una vez que tengamos la capa contenedor le asignamos un identificador a fin de crear
una regla CSS que defina su apariencia. Hacemos doble clic en el interior de la capa o en la
etiqueta HTML de la capa en la barra de estado:
Esteban Maidana
11
:: CDM Informtica ::
Creamos una nueva regla CSS, seleccionando el selector Estilo aplicado a un elemento
con el atributo ID especificado y escribiendo #contenedor en el cuadro de texto:
Modificamos las siguientes propiedades para la regla CSS que acabamos de crear,
especficamente en la ficha Fondo y Caja:
Posicionamos el cursor del a la derecha del texto texto cualquiera, hacemos clic e
insertamos unos 10 saltos de lnea (Enter) con lo que lograremos el siguiente aspecto:
Esteban Maidana
12
:: CDM Informtica ::
Dentro de la capa contenedor insertamos una nueva capa cuyo ID ser logo. Luego
creamos una nueva regla para esa capa:
Creamos una nueva regla CSS para la capa logo configurando las propiedades mostradas
en la siguiente imagen:
Esteban Maidana
13
:: CDM Informtica ::
Justo debajo de la capa logo insertamos una nueva capa llamada sub_contenedor y
luego creamos una nueva regla CSS para esa capa:
Esteban Maidana
14
:: CDM Informtica ::
Definimos las reglas CSS para la capa sub_contenedor teniendo como referencia las
siguientes imgenes:
Esteban Maidana
15
:: CDM Informtica ::
Dentro de la capa sub_contenedor insertamos una nueva capa que contendr las
esquinas redondeadas, el ID de la capa ser contenido. Luego creamos una nueva regla CSS
para esa capa. Los detalles se muestran en las siguientes imgenes:
Dentro de la capa contenido insertamos una tabla con 1 fila y 4 columnas, no tendr un
ancho especfico, borde 1, relleno de celda 4 y espacio entre celdas 4. Dicha tabla ser el
men principal del sitio web.
Esteban Maidana
16
:: CDM Informtica ::
Una vez que tengamos la tabla, escribimos los textos: Inicio, Nosotros, Productos y
Contacto en cada una de las celdas. Adems, asignamos las siguientes caractersticas a
todas las celdas de la tabla recin creada:
Creamos una regla CSS para la tabla del men configurando el margen izquierdo a 25px.
Esteban Maidana
17
:: CDM Informtica ::
Justo debajo de la tabla del men principal insertamos una nueva capa cuyo ID ser
tablas y que contendr al contenido variante de la pgina.
Tambin creamos una nueva regla CSS para esa capa. Asignndole las propiedades
detalladas en la siguiente imagen:
Eliminamos los saltos de lnea que sobran dentro de la capa contenido, debajo de la
capa tablas:
Esteban Maidana
18
:: CDM Informtica ::
Procedemos a crear una nueva capa, justo debajo de la capa contenido, dentro de la
capa sub_contenedor. El ID de dicha capa ser pie:
Creamos una nueva regla CSS para la capa pie y le asignamos las siguientes
caractersticas (fichas Fondo y Caja):
Esteban Maidana
19
:: CDM Informtica ::
Tras esa configuracin y luego de eliminar los saltos de lnea sobrantes, obtendremos el
siguiente resultado:
Esteban Maidana
20
:: CDM Informtica ::
Esteban Maidana
21
:: CDM Informtica ::
Formularios
Los formularios son una caracterstica del estndar HTML que permite a los autores (Sitio
Web) colectar informacin provista por los visitantes. Estos formularios pueden ser tiles para
recolectar informacin personal, informacin de contacto, preferencias u opiniones, o cualquier
tipo de entrada por parte del visitante que el autor pueda necesitar.
Un formulario est formado, entre otras cosas, por etiquetas, campos de texto, mens
desplegables, y botones.
Para insertar un formulario nos dirigimos a la barra de herramientas, ficha formularios y
luego presionamos el botn:
Elementos de un formulario
Los elementos de formulario pueden insertarse en una pgina a travs del men
Insertar, Formulario. Tambin se pueden insertar desde la barra de herramientas:
Campo de Texto
rea de Texto
Contrasea
Esteban Maidana
22
:: CDM Informtica ::
Botn
Es el botn tradicional de Windows. El botn puede tener ser de tres tipos: Enviar, Restablecer
(borrar todos los campos del formulario), o Botn (para poder asignarle un comportamiento
diferente de los dos anteriores).
Esteban Maidana
23
:: CDM Informtica ::
Casilla de verificacin
Es un cuadro pequeo que se puede activar o desactivar. Puede asignrsele el Estado inicial
como Activado o como Desactivado.
Casilla de Ejemplo
Botn de opcin
Son pequeos botones redondeados que pueden activarse o desactivarse. Si hay varios
del mismo grupo, slo puede haber uno activado. Cuando se activa uno, automticamente se
desactivan los dems.
Esteban Maidana
24
:: CDM Informtica ::
luego
lo
Para publicar nuestro sitio en internet necesitamos tres elementos esenciales: el sitio
web propiamente dicho, un dominio (opcional en el sentido de que los servidores de hosting
gratuito ya ofrecen un subdominio o una URL para nuestra cuenta) y finalmente un servidor de
hosting (puede ser de pago o gratuito).
Una vez que tengamos los tres elementos citados arriba, necesitamos algunos datos del
servidor de hosting, de manera que podamos realizar la conexin y transferir los archivos.
Host (Direccin IP o nombre del servidor): sirve para identificar a que servidor queremos
conectarnos y transferir los archivos.
Usuario: usuario para el acceso en el servidor.
Contrasea: clave para acceso al servidor.
Puerto: canal a travs del cual se realizar la conexin, generalmente es el puerto 21,
pero es probable que algunas empresas de hosting utilicen otro puerto.
Esteban Maidana
25
:: CDM Informtica ::
Todas las informaciones citadas nos la debe indicar nuestro proveedor de hosting
(alojamiento web).
Para conectarnos al servidor FTP, escribimos los datos en los campos indicados en la
siguiente imagen:
Al estar conectados al servidor, tendramos que ver una pantalla similar a la siguiente:
26
:: CDM Informtica ::
En la lista de archivos del sitio local, seleccionamos los archivos y carpetas que deseamos
subir al servidor (generalmente todos, excepto la carpeta recursos). Una vez que tengamos
seleccionados los elementos, hacemos clic derecho sobre cualquiera de los elementos
seleccionados y elegimos la opcin subir. Tras esto, el cliente FTP (FileZilla) automticamente
comenzar a transferir los archivos desde el sitio local hasta el sitio remoto.
: cdm@poravohosting.com
Contrasea
: A2fFiwE1SH
Puerto
: 21
Una vez conectados, debemos crear una carpeta en el sitio remoto (clic derecho, crear
directorio), para que publiquemos dentro de ella nuestros archivos y carpetas. Esto es
necesario debido a que la cuenta es de uso pblico para todos los alumnos.
Una vez que publiquemos nuestro sitio web, lo tendremos disponible en
http://www.poravohosting.com/cdm/carpeta, en donde carpeta es la carpeta que crearon en
el paso anterior (preferentemente una carpeta con sus nombre, sin espacios, sin caracteres
especiales, sin tildes y todo en minscula).
Esteban Maidana
27