ENLACE A GALEON

http://galeon.com/kaxorrita/

Apuntes de submodulo 3

POR Karla Figueroa Resendiz

Submódulo III.

Diseñar y programar páginas web utilizando las tics.

Conocer las tecnologías HTML. Y PHP.

Competencias genéricas:

Sustentar una postura de internes y relevancia sobre los temas, considerando otros puntos de vista de manera critica y reflexiva aprender por iniciativa e interés propio a lo largo de la vida participa y colabora de manera afectiva en equipos diverso.

Competencias disciplinares, identifica e interpreta las ideas, los datos y conceptos explícitos de un texto considerando el contexto en que se genera y que se recibe, expresar ideas o conceptos con introducciones, desarrollados y conclusiones claras.

Bloque I.

Utilizar los elementos fundamentales de diseño.

Objetivos:

1.- Identifica  los elementos básicos de una página web.

2.- Identifica la terminología de las páginas web.

Actividades:

Act.1   Examen diagnostico.

Act.2   Conocer el programa de la asignatura.

Act.3   Solicitar la recopilación de la terminología básica de las páginas web.

Act.4   Descripción de los elementos, recursos, tipos y programas para crear páginas.

Act.5   Solicitar consulta de la estructura de una página web.

Bloque II.

Manejar los elementos básicos del lenguaje HTML en la creación de página web.

Objetivos:

1.- Crear archivos.

2.- Describir la estructura de una página web.

Actividades

Act.1 proyectar los elementos llamados marcadores como cabeceras y párrafos.

Act.2 Determinar los atributos de los comandos y etiquetas.

Act.3 Empleo de encabezados, estilos, comentario, párrafos, fondos y colores.

Act.4 Empleo de vinculación con documentos locales; vinculación con un punto especifico del documento (enlaces internos), redacción de pistas.

Bloque III.

Diseñar una página web con software de aplicación.

Objetivos

1.- Crear archivos electrónicos de páginas web por medio del software Dreamweaver.

Actividades:

            Act.1 Proyectar el entorno Dreamweader.

            Act.2 Descripción de la configuración.

            Act.3 Elaboración de páginas web en el entorno Dreamweader.

            Act.4 Inserción de lista de hipervínculos y tablas.

            Atc.5 Inserción de sonido y video.

Bloque IV.

Publicación de páginas web.

Objetivos:

1.- Crear direcciones electrónicas de alojamientos de páginas web en servidores gratuitos.

Actividades:

Act.1 Ventajas de un Servidor web.

Act.2 Desventajas de un servidor web.

Act.3 Procedimiento de configuración y alojamiento de un sitio web.

Apuntes

<FRAMESET rows="20%,*">

TEMPLATES:

(Plantilla) permite definir la plantilla HTML a utilizar para el área de informe rápido referenciada por area. Esta plantilla será utilizada durante la creación del informe en formato HTML.

La plantilla utiliza un conjunto de etiquetas para procesar los datos. Este funcionamiento permite generar documentos HTML cercanos al informe original o documentos con apariencia totalmente personalizada.

Nota: Primero debe llamar QR SET DESTINATION para definir el formato HTML como destino de salida.

APLICATION:

Es un término que proviene del vocablo latino applicatĭo y que hace referencia a la acción y el efecto de aplicar o aplicarse (poner algo sobre otra cosa, emplear o ejecutar algo, atribuir).

TABLES:

Las tablas nos permiten representar y ordenar cualquier elemento de nuestra presentación en diferentes filas y columnas de modo que podamos resumir grandes cantidades de información de una manera que puede representarse rápida y fácilmente.

 <table>

<tr colspan="N">
<td rowspan="N">

</table>
    Comandos para definir una tabla,

<tr></tr> Se utiliza para definir una fila.  

<td> </td>Define una columna de la tabla 

TITLE:

La etiqueta <title> se requiere en todos los documentos HTML y define el título del documento.

El elemento <title>:

define un título en la barra del navegador

proporciona un título para la página cuando se añada a favoritos

Muestra el título de la página en los motores de búsqueda

MODIFY:

 La edición de un archivo puede hacerse a nivel texto con un procesador de textos. Si el archivo tiene un formato específico, lo usual es editarlo con alguna aplicación que pueda manejar ese tipo de formato. Esas aplicaciones se pueden categorizar dependiendo del tipo de formato que manejan, por ejemplo, editor de audio, editor de video, editor gráfico, etc. En general, estos editores tienen herramientas apropiadas para crear y modificar archivos de su tipo, y algunos son más poderosos que otros.

COMMANDS:

Son las aplicaciones que se le pueden dar a las páginas de HTML quien por medio de ellas se da una acción para que en la página se vea de algunas manera.

SITE:

Se refiere a la dirección de enlace que se pone en el navegador web para poder ubicarlo como por ejemplo http://www.blogger.com/preview-loading.g

WINDOWS:

Es posible abrir ventanas del navegador independientes de la principal de tres maneras diferentes:

Con la simple marca <A HREF="http://www.htmlpoint.com" target="_new">haz clic</a> que abre una nueva ventana con todas las opciones típicas de MsIe

Con sintaxis Javascript que abre una nueva ventana de enlace con la dimensión y opciones deseadas. 

Con sintaxis Javascript que pone en marcha automáticamente una ventana con la dimensión y opciones deseadas cuando se abre la página.

DESING:

Diseño se refiere a la manera en que nosotros ágamos nuestras paginas dependiendo que le queramos poner imágenes videos color de fuente etc.

CODE:

El elemento HTML code inserta texto que representa código de computadora. Puede ser útil para mostrar funciones, código de programación o variables.

El contenido de este elemento es usualmente mostrado por los navegadores con un estilo de fuente de ancho fijo.

WEB:

Una página web es el nombre de un documento o información electrónica adaptada para la World Wide Web y que puede ser accedida mediante un navegador . Esta información se encuentra generalmente en formato HTML o XHTML, y puede proporcionar navegación a otras páginas web mediante enlaces de hipertexto. Las páginas web frecuentemente incluyen otros recursos como hojas de estilo en cascada, guiones (scripts) e imágenes digitales, entre otros.

Las páginas web pueden estar almacenadas en un equipo local o un servidor web remoto. El servidor web puede restringir el acceso únicamente para redes privadas, p. ej., en una intranet corporativa, o puede publicar las páginas en la World Wide Web. El acceso a las páginas web es realizado mediante su transferencia desde servidores utilizando el protocolo de transferencia de hipertexto (HTTP).

Documentos:

Marcas:

Las marcas delimitan el tamaño y los elementos de un documento como cabeceras, párrafos, etc. Y son utilizados para dar un tratamiento diferente al texto que se encuentre entre las marcas.

El HTML. Las marcas se delimitan con signos para abrir menor que y cerrar mayor que (“<”, “>”).

Atributos de las marcas:

Algunas marcas pueden admitir atributos pudiendo tener cada uno de estos atributos un valor, como por ejemplo ancho, alto, color, formato y estilo. Este valor dirá “si dicho valor es alfanumérico”.

Estructura de los documentos

Cabecera:

La cabecera se emplea para facilitar información acerca del documento y esta delimitada por:

<HEAD>…Texto</HEAD>

Dentro de la cabecera podemos destacar el titulo que indica el nombre del documento:

Cuerpo:

El resto del documento residirá entre las marcas <BODY>y </BODY>.

Encabezado:

Los encabezados se emplean para dividir los documentos en secciones o mas concretamente para marcar los títulos de esas secciones.

Las marcas son entre 1 y 6 donde 1 tiene mayor tamaño:

<H1> Tamaño Mayor </H1>

<H6> Tamaño Menor </H6>

Definición de Bloques:

Para definir y separar bloques de texto, se emplean una serie de marcas que definen párrafos, texto pre formateado o bloques con significado especial como direcciones o citas.

<P>:  

Se utiliza para separar párrafos, dado que para el HTML. Todo el  texto es continuo necesitamos algún mecanismo para indicar el principio y el fin de un párrafo. La marca inicial y final son <P> y </P>.

<PRE>:

El texto insertado entre las marcas <PRE> y </PRE> será visualizado respetando el formato con el que se fue escrito en el fichero fuente HTML.

<ADDRESS>:

Emplea para indicar que un texto representa una dirección o una firma. Generalmente se activa en cursiva y suele estar tabulado.

<BLOCKQUOTE>:

Se suele representar con tabulaciones a la izquierda y derecha y en cursiva. En sistemas que no permiten representar en cursiva se puede emplear algún tipo de símbolo al principio de las líneas.

<BR>:

Este elemento solo tiene marca inicial se emplea para representar una línea horizontal.

<HR>:

Solo tiene marca inicial y se emplea para representar una línea horizontal.

Contexto que empiece por <!... comentario…> será ignorada por el buscador por lo tanto no será visible esto sirve al autor del documento para comentar en su archivo fuente.

Fondos y colores de texto: un cierto número de atributos de la marca <BODY> permite controlar el color del fondo de la ventana, el color de los enlaces atributo BGCOLOR  este atributo permite escoger un color para el fondo de la página:

<BODY BGCOLORS= #rrggbb>

Donde:

“rr” “gg” “bb”

Son colores hexadecimales

Entre 00 y FF

Atributo BACK GROUND

Este atributo especifica una imagen residente en el servidor la cual se utilizara como fondo de página

<BODYBACKGROUND=“archivos .gif”>

Atributo TEXT:

Permite controlar el color del texto estándar es decir todo texto que no especifique un enlace:

<BODYTEXT=“#rrggbb”>

Atributo LINK:

Color de enlace que aun no ha sido visitado:

<BODYLINK=“#rrggbb”>

Atributo ALINK:

Color muy fugas que aparece cuando se hace clic sobre el enlace:

<BODYALINK=“#rrggbb”>

Atributo VLINK:

El color de un enlace que ya ha sido visitado

<BODYVLINK=“#rrggbb”>

Letra: Es la marca que asigna el tamaño de los caracteres donde “n” varia de 1 a 6. Los más grandes tienen el valor 1 y los mas pequeños valor 6. El texto entre estas marcas se trata en negrita:

<HN> titulo

Tamaño de la letra y color, la marca FONT permite actuar sobre bloques distintos de caracteres, situados en la misma línea:

Atributo SIZE:

Regula la altura de los caracteres (1 a 7)

Atributo COLOR:

Especifica el color de los caracteres ejemplo:

<FONTSIZE=3COLOR=“#008000>…Texto..</FNT>

Estilo físico o estilo de características

<B> Negrita <b> hola! </b> hola!

<I> Cursiva   <i> hola! </i> hola!

<v> Subrayado        <v> hola! </v> hola!

Estilos lógicos:

<CITE> Cita

<CODE> Código y fuente

<DFN> Definido

<EM> Enfatiza

<KDB> Palabra clave

<SAMP> Ejemplo

<STRONG> Resalta

<VAR> Variable

Se llama combinación de tamaño y estilo, la ventana trabaja bajo el efecto de solo un par cerrado de marcas ejemplo.

<i>

<front site=5>                                              Tamaño de la fuente

<b> hola, </b> como

<front site=6> estas? </front>

</front>

</i>

 (Hola cómo estas?)

Hiperenlace

El lector explora un documento en la web haciendo clic sobre las zonas activas para así hacer aparecer nuevos documentos. En HTML, definimos una zona activa (que puede ser un texto o una imagen) de documento. Del documento que sustituirá al documento visualizado cuando se haga clic sobre esta zona.

Un ancla por lo tanto sirve para especificar la partida y la llegada de un enlace hipertexto (<A>).

El atributo HREF ancla de partida hacia un enlace externo.

Crea un enlace hasta un servidor situado en algún documento propuesto, por dicho servidor la marca especifica del atributo HREF  cuyo valor precisa el URL del documento a recuperar.

Zonacativable

<A HREF=“URL-de-destino”> zona_activable</A>

El atributo HREF ancla de partida a un enlace interno crea un enlace interno crea un enlace a un punto determinado del fichero en ejecución. Para ello hay que colocar un ancla activa “ancla de partida”.

Un ancla inactiva (ancla de llegada)

El ancla de partida se define de la siguiente forma, zona activable con atributos visuales.

<A HREF=#Etiqueta>zona activable con atributos visuales

</A>

El atributo NAME, ancla de llegada.

Define el ancla de llegada lugar que se podrá acceder o haciendo el clic sobre un ancla de partida.

-zona no activable sin atributos visuales.

<A NAME=“Label” 7 zona_no_activable_sin_atributos_visuales </A>

·         Tablas

Una tabla se define entre las marcas <TABLE> y </TABLE>

Esta 1ra marca regula la presentación general de la tabla mediante 3 atributos: BORDER: Define el grosor del marco exterior.

CELLPADDING: Define el espacio alrededor del texto de una celda.

CELLSPADDING: Define el espacio entre la celda.

WIDTH: Define la anchura de la tabla relativa dela ventana.

Las marcas que define una nueva fila son:

<TR7> y </TR7> que admiten los siguientes atributos de alineación del texto en el interior de todas las celdas de la fila.

VALING (alineación vertical)

Puede tomar los valores:

·         TOP: coloca el texto en la parte superior de la celda.

·         BOTTOM: Coloca el texto en la parte inferior de la celda.

·         MIDDLE: Coloca el texto en el centro de la celda.

ALING (alimentación) que puede tomar los valores

·         RIGHT: Coloca el texto a la derecha de la celda.

·         LEFT: Coloca el texto a la izquierda de la celda.

·         CENTER: Centra el texto de la celda.

La marca <TD> Es el elemento de inicio de una columna. Puede completarse con los atributos; VALING y ALING  que será entonces prioritarios sobre los mismos valores definidos en la marca <DR7>

La marca <TH> Esta marca funciona de forma similar a <TD> admitiendo los mismos atributos pero se considera, como una marca de titulo de celda automáticamente centra el texto y lo pone en negrita.

<IMG> Permite incluir una imagen. Esta marca ira siempre complementada con el atributo (scr) que permite dar la dirección de fichero grafico (imagen foto animación) que contiene la imagen.

<IMG SCR=nombre del fichero>

El valor del atributo es (scr) permite especificar un URL y es por tanto correcto encontrar imágenes definidas como sigue.

<IMG SRC:“http://...../rosa.gif>

Alineación de imágenes.

La marca (<IMG>) admite el atributo AUNH que permite situar la imagen en relación a la línea de texto puede tomar los siguientes valores:

·         TOP: Para alinear la parte superior de la imagen.

·         MIDDLE: Para alinear el centro de la imagen.

·         BOTTOM: Para alinear la base de la imagen por ejemplo.

<IMG SRC=“new.gif” aling=top>

Imágenes externas: Este tipo de imágenes no aparecen en la pantalla cuando se carga la página sino cuando se crea un enlace hipertexto cuyo extremo podrá ser una imagen:

<A HREF=“image/new.gif”>hacer clic aquí </A>

Imágenes como anclas:

Se puede remplazar el texto de un ancla por una marca que define una imagen en este caso  la imagen tiene un borde de color para indicar que se trata de un enlace contexto del que se puede hacer un link ejemplo:

<A HREF=“image/new.gif”><IMG SRC=Image.gif></A>

Formularios.

Un formulario es una plantilla para representar un conjunto de datos y generar en la pantalla cuadros de dialogo con el lector.

Como en un formulario en papel, se podrán tener zonas en las que se introducirá un texto, casillas de verificar de verificación, vistas de selección.

El usuario rellenara zonas en su formulario que se identifican con un nombre simbólico cuando el formulario se envía al programa que lo va a tratar este recibe el identificador de cada zona y el valor introducido. Es importante señalar que en la utilidad de los formularios esta limitado al uso de las páginas junto con sus servidores ya que las acciones asociadas son programas (generalmente scripts CGI)

Estos programas deben funcionar en un servidor al que se le proporcionara los datos de un formulario para ser procesados.

Declaración de formulario.

La marca <FORM> y </FORM>: Define un formulario y entre ellas se situaran todas las marcas que generan los diversos elementos que componen un formulario. Esta marca debe ir acompañada obligatoriamente por 2 atributos:

·         El atributo METHOD: Esta dirigido al programador que codifica el script al que se puede darse el valor POST o el valor GET que define el modo de transferencia de los datos hacia el script.

·         El atributo “ACTION” que define el URL de un programa script encargado de tratar los datos adquiridos desde el formulario.

“Campos de selección”:

La marca <SELECT> permite general vistas de selección general simple o de selección variable. Se programa con una lista en la que los ítems se especifican mediante la marca <OPTION> la presentación de la lista depende del atributo SIZE; si su valor es inferior a 2 esta ausente la lista se interpreta, cómo un menú desplegable (pop-list). En casa contrario la lista se visualiza en una ventana con barra de desplazamiento el valor dado entonces al atributo “sise” da entonces el número de líneas invisible en la ventana, la opción de selección múltiple deriva en la presencia del atributo <MULTIPLE> por ejemplo:

Menú desplegable

<FORM>

  <Select Name =“Sede”>

  <Option> Entrada indirecta

  <Option> Entrada lateral

  <Option SELECTED>Entrada directa

  </Select>

</FORM>

Área de texto

La marca <TEX TAREA> permite crear una ventana con barras de desplazamiento horizontales y verificarles en las que podrán escribir texto. El valor dado a los atributos Rows (líneas) cols (columnas) delimita el tamaño de esta ventana ejemplo:

<FORM>

  <Textarea name=“comment” rows 5 cos 40>

  Introduce aquí tus comentarios

  </Textarea>

</FORM>

<FORM METHOD=tipo_de_metodo=URL_del_script>

<FORM METHOD=“post” ACTION=“cgi_bin/inscripción”>

Todas las marcas que se definirán tienen los siguientes atributos comunes: el atributo NAME define el nombre que permitirá al script identificar el origen de los datos. Este nombre debe ser único.

NAME: Nombre_de_la_variable_asociada.

El atributo VALUE definido para un campo de texto.

TEXTO: permite definir el contenido del campo.

Botón SUBMINT: Indica el texto a escribir en el botón.

Botón RADIO, Botón CHECKBOX: Valor asociado al botón cuando esta cursando.

NAME: Identifica el bloque de botones.

Campos de entrada la marca <IMPUT> Servira para definir campos para entrar un texto entre botones y botones que permite escoger opciones.

El atributo TYPE asociado a la marca IMPUT permite la selección del elemento de entrada. Puede tomar los siguientes valores.

SUBMIT: Desencadena el envio de formulario hacia el script. El texto definido en value se escribirá en el botón salida.

<FORM>

<imput type=“submit” value=“salida”>

</FORM>

RESET: Permite borrar los datos ya entrados:

<FORM>

<imput type=“reset” value=“Borrador”>

</FORM>

PASWORD: Permite entrar una palabra clave de forma confidencial

<FORM>
<imput type=“pasword” name=“pwd”

</FORM>

CHECKBOX

Crea un bloque de botones que permiten una selección múltiple de opciones.

<FORM>

 <imput type=“checkbox” name=“micro” value=“mac”>Macintosh

 <imput type=“checkbox” name=“micro” value=“pc”>Pc

</FORM>

RADIO: Crea un bloque de botones que permiten una selección exclusiva entre varias opciones

<FORM>

  <imput type=“radio” name=“media” value=“CD” ckecked>CD-ROM

  <imput type=“radio” name=“media” value=“Disquete” ckecked>Disquete

</FORM>