ENLACE A GALEON
http://galeon.com/magdalena05/
jueves, 13 de junio de 2013
MARCAS
Las marcas delimitan elementos de un documento como cabeceras, párrafos, etc. Son utilizados para dar un tratamiento diferente al texto que se encuentra entre las marcas.
En HTML las marcas se delimitan con los signos:
< inferior (abrir) > superior (cerrar).
Atributos de las marcas. Los atributos algunas marcas pueden admitirlos pudiendo tener cada uno de estos un valor. Este valor ira, entre comillas se dicho valor es el alfanumérico.
Encabezado H # Width= “20” Font= “areal”
Estructura de los documentos. Definición de bloques. Comentarios.
se emplea para facilitar información acerca del documento y esta delimitada por, <HEAD> prologo </HEAD>. Dentro de la cabecera podemos destacar el titulo que indica el documento con su nombre.
1er programa:
<HTML>
< HEAD> Bienvenidos a mi 1er programa.
</HEAD> <TITLE>
</HTML>
Cuerpo del documento: El resto del documento recibirá entre las marcas <BODY>… </BODY>, esta es la estructura mínima que debe de poseer:
<HTML>
<TITLE> Bienvenido </TITLE>
<BODY>
Documento
</BODY>
</HEAD>
</HTML>
Encabezado:
<H1> Tamaño mayor </H1>
:
:
<H6> Tamaño menor </H6>
Definición de los bloques:
Para definir y separar bloques de texto se emplean una serie de marcas que definen párrafos, texto preformatizado o bloque con significado especial como direcciones o citas.
Marcas del bloque:
<P> Y </P>: se utiliza para separar párrafos, dado que para el HTML todo el texto es continuo y necesitamos algún mecanismo para indicar el principio y el fin del párrafo.
<PRE>……. </PRE>: el texto insertado entre las marcas para ser visualizado respetando el formato con el que se fue escrito en el archivo fuente.
<ADDRESS>…… </ADDRESS>: empleada para indicar que un texto representa una dirección o una forma. Generalmente se activa en cursiva y suele estar tabulada.
<BLOCKQUOTED>…… </BLOCKQUOTED>: se suele representar con tabulaciones a la izquierda y derecha, en cursiva en sistemas que no permiten representar en cursiva se pueden emplear algún tipo de símbolo al principio.
<BR>: Este elemento solo tiene marca inicial e indica un salto de línea.
<HR>: solo tiene una marca inicial y se emplea para representar una línea horizontal.
Comentarios:
Todo texto que empiece por <!..... Comentario…..> será ignorado por el HTML y por lo tanto no será visible, esto sirve al autor del documento para documentar su fichero fuerte.
Fondos y colores de texto:
Un cierto número de números de la marca Body permiten controlar el color de fondo de la ventana, el color de los enlaces.
<Body atributo1, atributo 2, atributo 3…. Atributo>
<!--[endif]-->El atributo BG color: permite escoger un color para el fondo de la página. <BG color=“#rrggbb”. Donde “rr”, “bb”, con valores sexagesimales comprendidos entre 00 ff que especifica el grado de saturación de los colores.
Atributo BACKGROUND. Este atributo especifica una imagen residente la cual se utilizara como fondo de página. <Body Background= “fichero.gift”>
Atributo Text permite controlar el color del texto estándar, es decir todo texto que no especifique un enlace:
Ejemplo:
El color depende de la tabla que escojas. <Body Text=“#rrggbb”>
Atributo Link, Vlink, Alink: para enlaces o vínculos: controla el color de los enlaces: Link color del enlace que a un no ha sido visitado <Body Link=“#rrggbb”>
A link color de fugas que apare cuando se hace clic en el enlace. <Body Alink=“#rrggbb”>
Vlink es el color de un enlace que ya a sido visitado <Body Vlink=“#rrggbb”>
Letra:
Titulo <HN> es la marca que asigna el tamaño de los caracteres donde n varía. De 1 a 6. Los más grandes tienen valor de 1 y los más pequeños valor de 6. El texto entre estas marcas se trata en negritas.
Tamaño de letra y color:
<Font> permite actuar sobre bloques distintos de caracteres situados en misma línea.
El atributo size: regula la altura de los caracteres de uno a siete.
El atributo color: especifica el color de los caracteres. <Font size=3 color=“#008007…..texto…</Font>
Estilo físico o estilo de caracteres:
<B> negrita <b> Hola </b>
<i> cursiva <i> Hola </i>
<u>subrayado <u> Hola </u>
Estilos lógicos y estilos de párrafo.
<Cite> cita
<Code> código de fuente
<DFN> definido
<EM> enfatiza
<KDB> palabra clave
<SAMP> ejemplo
<Strong> resalta
<UR> variable
Ejemplo 1:
<HTML>
<HEAD>
<TITLE> ejemplo 1. Mi primera pagina web </TITLE>
</HEAD>
<BODY>
<CENTER> <H1> mi primera pagina web </H4> </CENTER>
<HRL>
Esta es mi primera pagina web aunque todavía es sencilla <BR> como el lenguaje HTML no es difícil, pronto estaré en condiciones de hacer cosas más interesantes.
<P> Aquí va un segundo párrafo </P>
</BODY>
</HTML>
Ejemplo 2:
<HTML>
<HEAD>
<TITLE> ejemplo 2. Comandos básicos </TITLE>
</HEAD>
<BODY>
<CENTER> <H1> commandos b´ sicos </H1> </CENTER>
<!--- Este documento contiene todo lo que ha aprendido hasta ahora sobre HTML--->
<H2>párrafos</H2>
<P> Este es mi primer párrafo del ejemplo 2 </P>
<P> este es mi segundo párrafo, aquí hay una ruptura de línea<BR> de texto </P>
<HR>
<H2> listas </H2>
<H3> ordenadas </H3>
<P> la <front size=“I”><I> musica </I> </front>
Combinación de tamaño y estilo.
Toda ventana trabaja bajo el efecto de solo un par cerrado de marcas:
Ejemplo:
<i>
<Font size=5>
<b> Hola </b> como
<Font size=6>estas? </Font>
Quedaría:
Hola, como, estas?
Hiperenlaces.
El lector explora un documento en el web asiendo clic sobre las zonas activas para así hacer aparecer nuevos documentos. En HTML definimos una zona activa (puede ser un texto o una imagen) que se asocia al URL: (protocolo de direccionamiento de documentos). El documento que sustituiría al documento visualizado cuando se haga sobre esa zona. Un ancla, por lo tanto sirve para especificar la partida y la llegada de un enlace hipertexto
<A> (ancla).
El atributo HREF, ancla de partida hacia un enlace externo, crea un enlace hacia un servidor, situado en algún punto de internet o hacia un documento propuesto por dicho servidor. La marca especifica de atributo HREF cuyo valor precisa el URL del documento a recuperar:
Zona activable:
<A HREF=“URL_de_destino”> zona_activa </A>
El atributo HREF, ancla de partida a 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) y un ancla inactiva (ancla de llegada). El ancla de partida se define:
Zona activable con atributos visuales.
<A HREF=#etiquetas>zona_activable_con_atributos_visuales </A>
El atributo NAME ancla de llegada.
Define el ancla de llegada lugar que se podrá acceder haciendo un clic sobre un ancla de partida zona no activable sin atributos visuales.
<A NAME=“label”>zona_no_activable_sin_atributos_visuales </A>
Marca table:
<table> se define entre las marcas <table> y </table>. Esta primera marca regula la capacitación de la tabla mediante atributos.
Border: define el grosor del marco exterior.
Cellpadding: Define el espacio alrededor del texto de una celda.
Cellspacing: define el espaci entre celdas.
Widih: define la anchura de la tabla relativa a la anchura de la ventana.
Marca <TR>:
define una nueva fila son <TR> Y </TR>. Que admiten los siguientes atributos de alineación del texto en el interior de todas las celdas de la fila.
Valign: (alineación vertical) puede tomar los valores:
Top: coloca el texto en la parte exterior de la tabla.
Bottom: coloca el texto en la parte inferior de la celda.
Middle: coloca el texto en el centro de la celda.
Alight: (alineación horizontal) que puede tomar valores:
Right: coloca el texto a la derecha de la celda.
Left: coloca el texto a la izquierda de la celda.
Center: coloca el texto en el centro de la celda.
Marca <TD>:
es el elemento de inicio en una columna puede implementarse con los atributos valing y alight. Que se da entonces paritarios sobre los mismos valores definidos en la marca <TR>.
Dos atributos suplementarios Colspan y Rowspan permiten generar celdas cuya superficie es un múltiplo de la celda elemental. La matriz de la tabla que define el numero de celdas elementales se calcula por el numero de líneas de la tabla (numero de instituciones TR), multiplicando por el numero de celdas (numero de celdas TD), de la línea que define mas celdas (mayor numero de TD).
El número de celdas por línea de la tabla se calcula sobre la línea que define el mayor número de celdas, el atributo TD es Nawrap que impide dividir el texto de la celda en varias líneas.
Marca <TH>:
funciona de forma similar a TD admitiendo los valores de los mismos atributos pero se consideran como una marca de titulo, automáticamente centra el texto y lo pone en negrita.
Marca <Caption>:
esta marca permite poner un titulo encima (Atributo Align=top) o debajo (atributo Align=Bottom) de la tabla.
Marca <IMG>:
permite incluir una imagen esta marca ira siempre complementada por el Atributo SRC que permiten dar la redaccion del fichero grafico que contiene la imagen.
<IMG> SCR=nombre de imagen>
El valor del atributo SRC permite especificar un URL y es por lo tanto correcto encontrar imágenes definidas como una dirección de internet <IMG SCR=Http://nombre del fichero>
Alineación de imágenes:
la marca <IMG> admite el atributo Align que permite situar la imagen a la línea de texto actual y puede tomar los siguientes valores.
Top: para alinear la parte superior de la imagen.
Middle: para alinear al centro de la imagen.
Bottom: para alinear la base de la imagen.
<IMG SCR=”new.gift”align=top>
<IMG SCR=”new.gift”align=middle>
Las imágenes como anclas:
Se pueden remplazar el texto de una 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 hipertexto con el que se puede hacer un clic.
<A HREF=”archivo.gif> <IMG SCR=”imagen.gif> </A>
Formulario:
Un formulario es la plantilla para representar un conjunto de datos y generar en la pantalla cuadro de dialogo con el lector. Como en un formulario en papel se podrán tener zonas en las que se introducirá un texto, casilla de verificación, listas de selección etc.
El usuario rellenara formas 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 la utilidad de los formularios esta alimentada al uso de las paginas junto con sectores, ya que las acciones asociadas son programas estos programas deben funcionar a un servidor que se le proporciona los datos de un formulario para ser procesado.
Declaración de formulario:
<Form> y </form> definen 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 dos atributos:
Method: esta dirigido al programador que codifica al escrito al que puede dársele el valor
Que define el modo de transferencia de los datos hacia el script.
Action: que define el URL de un programa script encargado de tratar los datos adquiridos desde el formulario.
< form=”pot” action= “cg i –bin/inscription”>
<form method= tipo_de_metodo action= URL_del_script>
Todas las marcas se definirán con los siguientes atributos comunes:
El atributo Name:
define el nombre que permitirá al script y identificar el origen de los datos este nombre debe de ser único.
El atributo value:
definido para un campo de: texto que permite definir el contenido del campo Bottom.
Submit:
indica el texto a escribir en el Bottom.
Botón radio y botón checkbox:
valor asociado al botón cuando esta pulsado Name que identifica el bloque de botones.
Campos de entrada <input>:
servirá para definir campos para entrar en un texto y botones que permiten escoger opciones.
El atributo type:
asociado a la marca input permite la selección del elemento de entrada. Puede tomar los siguientes elementos:
desencadena el envoi del formulario hacia el clip, el texto definido en valué se escribirá en el botón (salida)
<Form>
<input type=”submit” value= “salida”>
</Form>
permite borrar los datos ya centrados.
<Form>
<input type=”submit” value= “borrar”>
</Form>
Password:
permite entrar una palabra clave de forma confidencial.
<Form>
<input type=”submit” value= “pwd”>
</Form>
crea un bloque de botones que permiten una selección múltiple de opciones.
<Form>
Macintosh
<input type=”chechbox”name=”micro” value= “pc”>
</Form>
Hidden:
sirve para pasar datos adquiridos de un formulario a otro sin que aparezca nada en pantalla.
<input type=”hidden”name=nombre de variable valué= valor_de_la_variable>
</Form>
Campos de selección:
La marca <select> permite generar listas de selección 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 las listas depende del atributo size; su valor es inferior a 2 o esta ausente, la lista se interpreta como un menú desplegable (pop-list). En caso contrario la lista se visualizara en una ventana con barra de desplazamiento. El valor dado entonces al atributo size, da entonces el numero de líneas visibles en la ventana, la opción de selección múltiple se deriva de la presencia del atributo múltiple.
Menú desplegable:
<Select Name=”sede”>
<Option> entrada indirecta
<Option> entrada lateral
<Option selected> entrada directa
</Select>
</Form>
Ventana con barra de desplazamiento (opción de selección múltiple)
<Form>
<Option selected> ad a
<Option> c++
<Option> clipper
<Option> Pascal
<Option> Fortran
<Option> Cobol
</Select>
</Form>
Área de texto:
La marca <Text area> permite crear una ventana con barra de desplazamiento horizontal y verticales en la que se podrá escribir texto, el valor dado a los atributos Rows (líneas), Cols (columnas).
<Form>
<Textarea Name=”comment” Rows=5 cds=40>
(Introduzca aquí sus comentarios)
</Textarea>
</Form>
sistema operativo androi.
Android es un sistema operativo inicialmente pensado para teléfonos móviles, al igual que iOS, Symbian y Blackberry OS. Lo que lo hace diferente es que está basado en Linux, un núcleo de sistema operativo libre, gratuito y multiplataforma.
El sistema permite programar aplicaciones en una variación de Java llamada Dalvik. El sistema operativo proporciona todas las interfaces necesarias para desarrollar aplicaciones que accedan a las funciones del teléfono (como el GPS, las llamadas, la agenda, etc.) de una forma muy sencilla en un lenguaje de programación muy conocido como es Java. Esta sencillez, junto a la existencia de herramientas de programación gratuitas, hacen que una de las cosas más importantes de este sistema operativo sea la cantidad de aplicaciones disponibles, que extienden casi sin límites la experiencia del usuario.
Una de las mejores características de este sistema operativo es que es completamente libre. Es decir, ni para programar en este sistema ni para incluirlo en un teléfono hay que pagar nada. Y esto lo hace muy popular entre fabricantes y desarrolladores, ya que los costes para lanzar un teléfono o una aplicación son muy bajos.
Cualquiera puede bajarse el código fuente, inspeccionarlo, compilarlo e incluso cambiarlo. Esto da una seguridad a los usuarios, ya que algo que es abierto permite detectar fallos más rápidamente. Y también a los fabricantes, pues pueden adaptar mejor el sistema operativo a los terminales.
Android es el sistema operativo propiedad de google, disponible para dispositivos portátiles, como tablets y smartphones. Es la competencia de Windows pero mas enfocado a este tipo de dispositivos. Cuenta con una plataforma de descarga de aplicaciones y juegos llamada Android Market, la cual tiene más de 100 mil opciones para descargar, la mayoría gratuitas.
Gracias a la popularidad que ha adquirido Android, cada día se registran nuevas y divertidas aplicaciones al Android Market, la mayoría son gratuitas y de gran calidad. Así que para los interesados en hacer
PROGRAMA DE ESTUDIOS DE SUBMODULO II “elaboración de páginas web”
Elaboración de páginas web
Objetivo
Diseñar y programar páginas web por medio de tecnologías HTML Y PHP
COMPETECIAS GENERALES
Sustenta una postura personal sobre temas de interés y relevancia personal considerando otros puntos de vista de manera crítica y reflexiva.
Aprender por iniciativa de interés propio participar y colaborar de manera efectiva en equipos diversos.
COMPETENCIAS DISCIPLINARES
Identifica ordena e interpreta las ideas, datos y conceptos explícitos e implícitos de un texto considerando el contexto en que se generó y en que se recibe.
Expresa ideas y conceptos en composiciones coherentes y creativas con introducciones, desarrollo conclusiones claras.
BLOQUE 1:“utiliza los elementos fundamentales del diseño”
ACT.1 conocer el programa de la materia.
ACT.2 solicitar a los alumnos la recopilación de la terminología básica de las aplicaones web.
ACT.3descripción de los elementos, recursos, tipos y programas para crear páginas web mediante la recopilación de los conceptos solicitados con la finalidad de interactuar.
ACT.4 solicitar a los alumnos la consulta de la estructura y diseño de una página web.
BLOQUE 2: “manejar los elementos básicos de un lenguaje utilizable en la creación de páginas web (HTML Y PHP)”
Objetivo
Guardar los archivos electrónicos de las páginas creadas.
ACT.1proyectar los elementos de HTML llamados marcadores como son: cabeceras, párrafos, marcas, etc.
ACT.2 insertar fotografías, imágenes, ficheros y comentarios.
ACT.3 aplicar formato de párrafos, estilos,
ATC.4creación de enlaces y vincules con documentos locales, vinculación con un punto específico en documentos internos.
BLOQUE 3:“diseñar una página web con software de aplicación”
OBJETIVO
Hacer uso de la aplicación drynwiber
ACT.1 proyectar un entorno
ACT.2 configuración de un sitio local
ACT.3 estructuras de las páginas web en entornos dry
ACT.4 inserción de listas, tablas, hipervínculo, imágenes de fondo y sonido
ACT.5 inserción de video
BLOEQUE 4:“publicación de página web”
Objetivo
Alojamiento del sitio en una dirección electrónica
ACT.1 explicar que es un servidor web y sus ventajas
ACT.2 ejemplificar el procedimiento para configurar y alojar un sitio
ACT.3 utilizar páginas web creadas para alojarlas en un sitio web gratuito
Suscribirse a:
Entradas (Atom)