UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION
|
|
|
- Encarnación Ortíz Toledo
- hace 8 años
- Vistas:
Transcripción
1 CICLO UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION GUIA DE LABORATORIO Nº 1 Nombre de la practica: Introducción y conceptos básicos de HTML Lugar de ejecución: Laboratorio de Informática Tiempo estimado: 3 horas Materia: Lenguajes de Marcado y Estilo Web I. Objetivos Que el estudiante sea capaz de: 1. Tener claridad en el proceso a seguir para visualizar un documento HTML a través de un navegador. 2. Identificar la estructura básica de un documento web. II. Introducción Teórica Qué es HTML? HTML son las siglas de HyperText Markup Language, que significa, en español, Lenguaje de Marcas de Hipertexto. El concepto de hipertexto apareció por 1965, basado en la idea general de unos elementos de texto especiales dentro de un documento que permitieran enlazar con otra parte de ese mismo documento, o con otro documento diferente. La idea original era poder transferir y compartir recursos a través de Internet. Esto implicaba nuevas formas de comunicación entre equipos informáticos, y así, la CERN (Consejo Europeo para la Investigación Nuclear), junto con otras instituciones, implementaron la tecnología de base para que esto fuera posible. Lo primero fue el protocolo de red específico, que se denominó http (HyperText Transfer Protocol), que permitiría transferir de forma adecuada los diferentes documentos de hipertexto. Lo segundo, fue desarrollar un mecanismo de identificación de los recursos, esto se plasmó en lo que hoy conocemos como URL (Uniform Resource Lacator), o Identificador Uniforme de Recursos. Este URL indica tanto la localización exacta del recurso, así como, el protocolo necesario para su transferencia. La forma genérica de una URL es la siguiente: Protocolo:// Un ejemplo concreto sería: 1
2 Estructura básica de un documento HTML 5 En general, se suele decir que una página web tiene tres secciones bien identificadas, que son: La precabecera La cabecera (head) El cuerpo (body) La precabecera Es la parte del documento que está situada por encima de la etiqueta <HTML>. En esta sección suele colocarse la Definición del Tipo de Documento (DTD). Figura 1. Estructura básica de un documento HTML <!DOCTYPE> En primer lugar necesitamos indicar el tipo de documento que estamos creando. Esto en HTML5 es extremadamente sencillo: IMPORTANTE: Esta línea debe ser la primera línea del archivo, sin espacios o líneas que la precedan. De esta forma, el modo estándar del navegador es activado y las incorporaciones de HTML5 son interpretadas siempre que sea posible, o ignoradas en caso contrario. La cabecera Es el código HTML, comprendido entre las etiquetas <HEAD> </HEAD>. El contenido de la cabecera no es visible en el navegador del cliente. A excepción del elemento TITLE que permite colocar un título en la barra de título del navegador del usuario. Las etiquetas más importantes que puede contener la cabecera son: <TITLE>, <BASE>, <LINK>, <META>, <STYLE>, <SCRIPT>, etc. <meta> Se utiliza para identificar propiedades de un documento y para asignar valores a esas propiedades. El atributo name identifica la propiedad y el atributo content especifica el valor de la propiedad. Esta información no es mostrada en la ventana del navegador, es solo importante para motores de búsqueda y dispositivos que necesitan hacer una vista previa del documento u obtener un sumario de la información que contiene. Por ejemplo: <title> La etiqueta <title> simplemente especifica el título del documento. Por ejemplo: 2
3 <link> Otro importante elemento que va dentro de la cabecera del documento es <link>. Este elemento es usado para incorporar estilos, códigos Javascript, imágenes o iconos desde archivos externos. Uno de los usos más comunes para <link> es la incorporación de archivos con estilos CSS: Solo necesitamos dos atributos para incorporar nuestro archivo de estilos: rel y href. El atributo rel significa relación y es acerca de la relación entre el documento y el archivo que estamos incorporando por medio de href. En este caso, el atributo rel tiene el valor stylesheet que le dice al navegador que el archivo misestilos.css es un archivo CSS con estilos requeridos para presentar la página en pantalla (en las próximas clases estudiaremos cómo utilizar estilos CSS). CUERPO DE LA PÁGINA WEB Es la parte del código comprendida entre las etiquetas <BODY> </BODY>. Es la parte que será visible en el navegador del cliente. Acá pueden ir elementos HTML y el contenido de la página. Líneas En HTML se pueden dibujar líneas horizontales en las páginas. Para ello se utilizar la etiqueta o elemento <HR>. Saltos de linea Para indicar un Enter o salto de línea se utiliza el elemento <BR>. Está en su primera práctica de lenguaje HTML. <BR> Empezará creando páginas sencillas, con puro texto plano. <BR> Más adelante comenzará a utilizar listas, tablas, formularios, etc. <BR> Párrafos Si se desea separar el texto de una página web en párrafos, para una mejor presentación, se puede utilizar la etiqueta <P></P>. <P> La comprensión psicológica del miedo experimentado como consecuencia de las experiencias represivas requiere ser ubicado en el contexto de la situación específica y referido a los distintos niveles de comprensión de los procesos psicológicos como tales. </P> <P> Así, se observa que el miedo puede provocar conductas específicas que pueden ser descritas como procesos adaptativos como algo que se anticipa como un desastre, o como una catástrofe personal, inminente e imprevista. </P> 3
4 Etiquetas de cabeceras o títulos. Este tipo de etiquetas se suelen utilizar para los títulos en el texto de las páginas. Existen en total seis etiquetas para este propósito. Estas se muestran en la siguiente tabla: Etiqueta <H1>... </H1> <H2>... </H2> <H3>... </H3> <H4>... </H4> <H5>... </H5> <H6>... </H6> Resultado Cabecera de nivel 1 Cabecera de nivel 2 Cabecera de nivel 3 Cabecera de nivel 4 Cabecera de nivel 5 Cabecera de nivel 6 Colocar comentarios <!-- -->: Comentarios. Son etiquetas que nunca se mostrarán a través del navegador y que le servirán para recordatorios en futuras revisiones del documento. Capas El elemento HTML <DIV> </DIV> permite a los autores asignar ciertos atributos a bloques de contenido. Se utiliza para definir una sección o división en un documento HTML. Es principalmente utilizado en conjunto con hojas de estilo para dar atributos visuales a porciones de contenido en un documento. Negritas, cursiva, subrayado y otros Para llamar la atención del usuario sobre una letra, palabra o frase, una técnica a la que se recurre con frecuencia en HTML es utilizar texto en negritas (bold) o quizá texto con letras itálicas (italic), justo como sucede en prácticamente todo los procesadores de palabras actuales. Para utilizar negritas utilice la etiqueta con cierre <b> y para itálicas la etiqueta, también con cierre <i>. Para utilizar estas etiquetas simplemente coloque dentro de ellas el texto que se quiere resaltar, por ejemplo: Es posible que usted desee que algún texto se vea con negritas y con itálica al mismo tiempo, para lograr esto usted puede anidar ambas etiquetas como sigue: 4
5 De la misma manera trabaja la etiqueta <ins>, que sirve para resaltar un texto con una línea de subrayado. Subíndices y superíndices HTML contiene un par de etiquetas para escribir subíndices (<sub>) y superíndices (<sup>), ambas con cierre. Bloque de citas La etiqueta con cierre <blockquote> da un resultado similar al párrafo, inserta espacio antes y después de un bloque de código, pero también inserta un margen a la izquierda y a la derecha. El resultado visual tiene la finalidad de manejar el texto dentro las etiquetas <blockquote> </blockquote> como los libros lo hacen con una frase que ha dicho alguien más, es decir, manejar el texto como una fuente de información externa, el código sería: Elementos semánticos de estructura en HTML5 La figura 2 representa un diseño común encontrado en la mayoría de los sitios webs estos días. A pesar del hecho de que cada diseñador crea sus propios diseños, en general podremos identificar estas secciones en cada sitio web estudiado. Figura 2. Diseño común para sitios web Figura 3. Elementos de estructura de HTML5 5
6 HTML5 considera esta estructura básica y provee nuevos elementos para diferenciar y declarar cada una de sus partes (Figura 3). A partir de ahora podemos decir al navegador para qué es cada sección. <header> Uno de los nuevos elementos incorporados en HTML5 es <header>. El elemento <header> no debe ser confundido con <head> usado antes para construir la cabecera del documento. Del mismo modo que <head>, la intención de <header> es proveer información introductoria (títulos, subtítulos, logos), pero difiere con respecto a <head> en su alcance. Mientras que el elemento <head> tiene el propósito de proveer información acerca de todo el documento, <header> es usado solo para el cuerpo o secciones específicas dentro del cuerpo. <nav> Siguiendo con nuestro ejemplo, la siguiente sección es la Barra de Navegación. Esta barra es generada en HTML5 con el elemento <nav>: <section> El elemento section representa un documento genérico o de la sección de aplicación. Una sección, en este contexto, es una agrupación temática de los contenidos. Puede ser un capítulo, una sección de un capítulo o básicamente cualquier cosa que incluya su propio encabezado. Una página de inicio de un sitio Web puede ser dividida en secciones para una introducción, noticias, información de contacto etc. <aside> En un típico diseño web (como el mostrado en la figura 2) la columna llamada Barra Lateral se ubica al lado de la columna Información Principal. Esta es una columna o sección que normalmente contiene datos relacionados con la información principal pero que no son relevantes o igual de importantes. En HTML5 podemos diferenciar esta clase secundaria de información utilizando el elemento <aside>: <footer> El elemento footer se utiliza para indicar el pié de la página o de una sección. Un pie de página contiene información general acerca de su sección el autor, enlaces a documentos relacionados, datos de derechos de autor etc. 6
7 <article> El elemento article representa una entrada independiente en un blog, revista, periódico etc. Cuando se anidan los elementos article, los artículos internos están relacionados con el contenido del artículo exterior. Por ejemplo, una entrada de blog en un sitio que acepta comentarios, el elemento article principal agrupa el artículo propiamente dicho y otro bloque article anidado con los comentarios de los usuario. Del mismo modo que los blogs están divididos en entradas, sitios web normalmente presentan información relevante dividida en partes que comparten similares características. El elemento <article> nos permite identificar cada una de estas partes. Agregando imágenes La etiqueta <img>, permite definir una imagen en el documento web. Entre los formatos más populares de imagen aceptados, sin duda se encuentran el formato JPEG, y el formato PNG. Aunque se pueden utilizar muchos más formatos. Se ha de observar que la etiqueta no tiene etiqueta de cierre. La sintaxis de la etiqueta es la siguiente. <img alt= valor height= valor width= valor src= ruta /> Los atributos que pueda utilizar la etiqueta son los siguientes: Atributo src height width alt Descripción Permite especificar el origen de la imagen, es decir su ubicación, bien mediante una ruta absoluta o relativa. Permite especificar el alto de la imagen en pixeles. El especificar ancho y alto de la imagen, no significa que se realice una reducción o ampliación del tamaño en bytes de la imagen, es decir la imagen se ha de leer completa, independientemente del tamaño especificado. Si se especifica un tamaño que no siendo el tamaño real de la imagen, se puede producir un efecto de pixelado, con la respectiva pérdida de calidad en la visualización de la imagen. El atributo width, permite especificar el ancho de visualización de la imagen, con un valor numérico en pixeles. El atributo alt, permite especificar un texto alternativo para la imagen. Este texto alternativo es visualizado cuando se produce un error en el atributo src, la conexión fuese muy lenta o si el usuario utiliza un lector de pantalla. 7
8 Agregando enlaces La etiqueta <a>, sirve para definir y crear un hiperenlace, el cual permite realizar enlaces del documento web con otros documentos o recursos disponibles. Por defecto al pulsar sobre un enlace, el contenido al cual se está accediendo se ha de mostrar en la misma ventana del navegador, sustituyendo el documento web actual por el que se quiere acceder. La sintaxis básica de esta etiqueta es la siguiente: <a href= ruta target= valor >Este es un vinculo</a> Atributo href Este atributo permite establecer la URL en la que se encuentra el documento el cual se quiere enlazar, con el documento web. Se puede especificar una URL absoluta, relativa o un ancla enlace en el mismo documento. Atributo target Permite especificar el destino por defecto del enlace. Entre los posibles valores que se le pueden aplicar al atributo target, encontramos los siguientes: target _blank _self Descripción Especifica que el destino sea una nueva ventana del navegador, o una pestaña nueva Por defecto. Abre el destino en el mismo lugar donde se haya realizado el click III. Requerimientos Nº Cantidad Descripción 1 1 PC con uno de los editores de páginas Web: Sublime Text, Brackets, Notepad ++, BlueFish y HTML Kit y cualquiera de los navegadores siguiente: Internet Explorer 7 u 8, Firefox (última versión disponible), Google Chrome (última versión disponible), Opera (última versión disponible), Safari (última versión disponible). 2 1 Guía de Laboratorio #1 de Lenguajes de Marcado y Estilo Web 3 1 Memoria USB IV. Procedimiento Ejercicio 1. Creando la estructura básica HTML 1. Cuando cargue el sistema operativo, crear una carpeta en Mis Documentos con el nombre: NºCarnet_Guia1, Nota: Cambiar NºCarnet por su número de carnet de la Universidad. 2. Cuando haya creado la carpeta, dar clic en el botón inicio de Windows. 3. Ir a todos los programas y hacer clic en Sublime Text o en el editor de código de su preferencia. 4. Dar clic en la opción File>New File del menú ubicado en la parte superior de la ventana. Se genera un documento vacío. 5. Dar clic en la opción File>Save (o Ctrl+s) para guardar el archivo. Busque la carpeta creada en el paso 1 y guarde el archivo con el nombre estructura_basica.html. 8
9 6. Digitar el siguiente código en el archivo creado. 7. Guardar los cambios realizados puesto que este archivo nos servirá como base para los siguientes ejemplos. Recomendaciones: Debe guardar todos los archivos en una sola carpeta, para que no tenga problemas a la hora de trabajar con ellos. Cuando guarde el documento Web siempre digite la extensión.html Cuando realice cambios a un documento Web, y su página ya está cargada en un navegador solamente actualice el navegador y observara los nuevos cambios. Ejercicio 2. Utilizando etiquetas para texto 1. Crear una copia del archivo estructura_basica.html y nombrarla etiquetas_texto.html. 2. Abrir el archivo etiquetas_texto.html con el programa Sublime Text. 3. Colocar como título de la página (etiqueta <title>) el texto Etiquetas para Textos. 4. Agregar el siguiente código dentro del cuerpo (body) de la pagina web. 9
10 5. Guardar los cambios y visualizar el resultado obtenido en el navegador de su preferencia. 6. Incluir las siguientes etiquetas metas en la cabecera de la página (head). Tomar como referencia el ejemplo presentado. Name description keywords author content Esta página muestra ejemplos sobre el uso de las etiquetas para texto de HTML. Html, etiquetas, texto Colocar su nombre Ejemplo: 10
11 7. Actualice la página en su navegador y pregúntese Hay cambios en la visualización del sitio web? Si la respuesta es negativa, razone Entonces para qué sirven las etiquetas meta? Busque esa respuesta en la introducción teórica de la guía o consulte con su instructor. Ejercicio 3. Agregando vínculos e imágenes 1. Crear una copia del archivo estructura_basica.html y nombrarla imágenes_vinculos.html. 2. Abrir el archivo imágenes_vinculos.html con el programa Sublime Text. 3. Colocar como título de la página (etiqueta <title>) el texto Agregando vínculos e imágenes. 4. Crear una carpeta llamada imágenes dentro de la carpeta creada en el ejercicio Descargar una imagen de internet en formato jpg y nombrarla imagen.jpg. Guardar dicha imagen en la carpeta creada en el paso anterior. 6. Agregar el siguiente código dentro del cuerpo (body) de la pagina web. 7. Guardar los cambios y visualizar el resultado obtenido en el navegador de su preferencia. 8. Asegúrese de entender el valor del atributo src de la etiqueta img. Qué pasaría si la imagen esta guardada en la misma carpeta de la página web? Y si está en una carpeta superior? Consulte con su docente. 9. Pregúntese, Cómo se consigue que el último enlace se abra en una nueva ventana? 11
12 Ejercicio 4. Estructura semántica HTML5 1. Crear una copia del archivo estructura_basica.html y nombrarla centroamerica.html. 2. Abrir el archivo centroamerica.html con el programa Sublime Text. 3. Colocar como título de la página (etiqueta <title>) el texto Centroamerica. 4. En este ejemplo construiremos una pagina web con una estructura similar a la mostrada en la Figura 3 (ver introducción teorica). 5. Agregar el siguiente codigo al body de la pagina web: 12
13 6. Guardar los cambios y visualizar el resultado obtenido en el navegador de su preferencia. 7. El resultado obtenido es similar al mostrado en la figura 3 de la introducción teórica? Por qué? Razónelo y consulte con su docente. V. Análisis de resultados 1. Realice una página web que contenga su información por ejemplo carnet, nombre completo, carrera que estudia y materias inscritas. El instructor evaluará el desempeño de su trabajo dentro la clase. Estos ejercicios se evaluaran en la misma hora de clase. VI. Ejercicios complementarios 1. Realice una página web con la información de su programa de televisión favorito por ejemplo nombre del programa, personajes principales, tipo de programa (comedia, romance, documental, etc). 2. Realice una página web para cada uno de los países de Centroamérica. En dichas páginas se debe mostrar los símbolos patrios, historia, extensión territorial, lista de departamentos y lugares turísticos más importantes. En este ejercicio se debe hacer uso de las etiquetas semánticas (header, section, footer, etc), imágenes, párrafos, etc. 3. Actualizar los enlaces del archivo creado en el ejemplo 4 (centroamerica.html) de tal forma que dichos vínculos se dirijan hacia las paginas creadas en el punto anterior. Fecha de entrega: Próxima semana 13
HTML. HTML (HyperText Markup Language) Creado en 1989 por el físico nuclear TIM BERNERS- LEE
HTML HTML (HyperText Markup Language) Creado en 1989 por el físico nuclear TIM BERNERS- LEE Se elaboró un protocolo para soportar e envío de información por la red. HTTP (Hyper Text Transfer Protocol)
Capítulo 1 Documentos HTML5
Capítulo 1 Documentos HTML5 1.1 Componentes básicos HTML5 provee básicamente tres características: estructura, estilo y funcionalidad. Nunca fue declarado oficialmente pero, incluso cuando algunas APIs
Cursito 28: Curso de HTML Parte 4
Por Roxana Bassi rox@roxanabassi.com.ar / http://www.roxanabassi.com.ar Publicado en la sección los cuadernos de Internet World en la revista Internet World Latinoamérica en el período 1995-1999 Cursito
Plantilla de texto plano
Plantilla de texto plano Esta es la plantilla seleccionada por defecto al crear una nueva página. Título: Es el título que aparecerá identificando a la página, así como en la cabecera del documento en
DISEÑOS DE PÁGINAS WEB CON N.V.U. E INICIACIÓN AL CÓDIGO HTML
DISEÑOS DE PÁGINAS WEB CON N.V.U. E INICIACIÓN AL CÓDIGO HTML Una página web es un documento escrito empleando un lenguaje denominado HTML (Hyper text Markup language; Lenguaje de marcas de hipertexto).
CREAR UN BLOG CON BLOGGER
CURSO CREAR UN BLOG CON BLOGGER MATERIAL REALIZADO POR EL EQUIPO TIC DEL COLEGIO LA MILAGROSA DE SALAMANCA Curso Crear un blog con Blogger. Equipo TIC del Colegio La Milagrosa de Salamanca (p. 2) Para
Creación de una página web accesible sencilla
Unidad 2: Las hojas de estilo en cascada Creación de una página web accesible sencilla Objetivos: -Agregar formato a la página creada, a través de una hoja de estilo. Contenidos: -Incorporación de una
Para crear formularios se utiliza la barra de herramientas Formulario, que se activa a través del comando Ver barra de herramientas.
Formularios TEMA: FORMULARIOS. 1. INTRODUCCIÓN. 2. CREACIÓN DE FORMULARIOS. 3. INTRODUCIR DATOS EN UN FORMULARIO. 4. MODIFICAR UN FORMULARIO 5. MANERAS DE GUARDAR UN FORMULARIO. 6. IMPRIMIR FORMULARIOS.
La ventana de Microsoft Excel
Actividad N 1 Conceptos básicos de Planilla de Cálculo La ventana del Microsoft Excel y sus partes. Movimiento del cursor. Tipos de datos. Metodología de trabajo con planillas. La ventana de Microsoft
OBJETIVO: Introducción al editor de páginas web Macromedia Dreamweaver.
SEMINARIO DIOCESANO DE CRISTO SACERDOTE TECNOLOGIA EN INFORMATICA GRADO: 11 TEMA: INTRODUCCIÓN A MACROMEDIA DREAMWEAVER OBJETIVO: Introducción al editor de páginas web Macromedia Dreamweaver. 1 Qué es
MATERIAL 2 EXCEL 2007
INTRODUCCIÓN A EXCEL 2007 MATERIAL 2 EXCEL 2007 Excel 2007 es una planilla de cálculo, un programa que permite manejar datos de diferente tipo, realizar cálculos, hacer gráficos y tablas; una herramienta
MANUAL DE USUARIO Joomla 1.5. Parte 2
MANUAL DE USUARIO Joomla 1.5 Parte 2 Página 1 de 26 Tabla de contenido 2. Gestión del contenido... 3 2.1 Gestión de contenido para usuarios del Front-end... 3 2.2 Gestión de contenido para usuarios del
LABORATORIO Nº 2 GUÍA PARA REALIZAR FORMULAS EN EXCEL
OBJETIVO Mejorar el nivel de comprensión y el manejo de las destrezas del estudiante para utilizar formulas en Microsoft Excel 2010. 1) DEFINICIÓN Una fórmula de Excel es un código especial que introducimos
1.1.- Introducción a la Web Vemos una introducción al medio donde se encajan los lenguajes que vamos a tratar: la web.
Sesión 01: Introducción a los lenguajes web COMPUTACION E INFORMATICA WEB DEVELOPPER III Competencias a Conseguir: - Introducción general a la programación web. - Conocer y diferenciar el concepto de páginas
CAPAS O CONTENEDORES EN HTML. ETIQUETAS DIV Y SPAN. EJEMPLOS. MAQUETAR O DAR ESTRUCTURA A LAS PÁGINAS WEB. (CU00726B)
APRENDERAPROGRAMAR.COM CAPAS O CONTENEDORES EN HTML. ETIQUETAS DIV Y SPAN. EJEMPLOS. MAQUETAR O DAR ESTRUCTURA A LAS PÁGINAS WEB. (CU00726B) Sección: Cursos Categoría: Tutorial básico del programador web:
Páginas web ::: Hojas de estilo CSS Diseño de materiales multimedia. Web 2.0. 1.7 Hojas de estilo CSS
49 1.7 Hojas de estilo CSS 50 1.7 Hojas de estilo CSS 1.7.1 Qué es una hoja de estilo? Una hoja de estilo es un archivo de extensión *.CSS (CSS, Cascading Style Sheets = Hojas de estilo) que contempla
Combinar comentarios y cambios de varios documentos en un documento
Combinar comentarios y cambios de varios documentos en un documento Si envía un documento a varios revisores para que lo revisen y cada uno de ellos devuelve el documento, puede combinar los documentos
5.2.1 La Página Principal
5.2 Las Páginas WEB Una página Web es un documento electrónico escrito en un lenguaje de ordenador llamado HTML, o Hypertext Markup Language (lenguaje de marcación de hipertexto). Como ya hemos dicho,
Menús. Gestor de Menús
Menús Para dar acceso a las categorías, artículos y generar espacio para los módulos se deben crear menús, éstos son enlaces a determinado recurso en el portal Web, sin ellos no es posible visualizar ninguno
13.2 WORLD WIDE WEB (www)
13.2 WORLD WIDE WEB (www) INTRODUCCIÓN World Wide Web o simplemente web se puede traducir como la telaraña mundial, haciendo referencia al hecho de que existen multitud de servidores web distribuidos por
GENERAR DOCUMENTOS HTML USANDO LENGUAJE PHP. EJERCICIO RESUELTO EJEMPLO SENCILLO. (CU00733B)
APRENDERAPROGRAMAR.COM GENERAR DOCUMENTOS HTML USANDO LENGUAJE PHP. EJERCICIO RESUELTO EJEMPLO SENCILLO. (CU00733B) Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero Fecha
Elementos de Microsoft Word
Contenido 1. Distintas formas de iniciar Word 2007... 2 2. Ayuda de Word... 2 3. Las barras de herramientas... 3 4. Funcionamiento de las pestañas. Cómo funcionan?... 4 5. Personalizar barra de acceso
PASOS PARA CREAR UNA PÁGINA WEB
http://www.rafatux.com PASOS PARA CREAR UNA PÁGINA WEB Con éste documento trato de orientar de una forma genérica los distintos pasos que deben de realizarse para crear una página web. PRIMER PASO: Estructura
Tema 3.1: Principios de diseño web accesibles
Tema 3.1: Principios de diseño web accesibles Lourdes Moreno, Paloma Martínez Universidad Carlos III de Madrid {lmoreno,pmf}@inf.uc3m.es Asignatura Humanidades: Evitando las barreras de accesibilidad en
Versión 1.0 MANUAL DEL USUARIO
Versión 1.0 MANUAL DEL USUARIO ÍNDICE Introducción....2 Acceso a Geocatálogo...3 Descripción de Geocatálogo....4 Página inicial de Geocatálogo...4 Árbol de categorías....5 Lista de recursos...6 Información
Mapas colaborativos en línea
MÓDULO: COMUNIDADES DE APRENDIZAJE Universidad Nacional de Córdoba Mapas colaborativos en línea La propuesta que le presentamos se basa en la realización de un mapa colaborativo en línea. La idea es que
Un Navegador es un programa que nos conecta a Internet y nos permite organizar nuestro
Introducción Un Navegador es un programa que nos conecta a Internet y nos permite organizar nuestro acceso al mundo Web. Cuando queremos entrar a Internet, lo primero que se abre en el ordenador es el
Manual Impress Impress Impress Impress Impress Draw Impress Impress
Manual Impress Se puede definir Impress como una aplicación dirigida fundamentalmente a servir de apoyo en presentaciones o exposiciones de los más diversos temas, proyectando una serie de diapositivas
Cómo gestionar menús en Drupal 7
Cómo gestionar menús en Drupal 7 Los menús en Drupal son unas herramientas muy poderosas porqué proporcionan maneras para que los visitantes de nuestro sitio puedan llegar a páginas específicas. Estos
Instructivo Asesoría Básica Comunidad Virtual SharePoint 2010
Instructivo Asesoría Básica Comunidad Virtual SharePoint 2010 CONTENIDO 1. Qué es? 2. Cómo crear y acceder a la Comunidad Virtual en Microsoft SharePoint 2010? Ejemplo. 3. Qué tengo en la página de inicio
Ingreso al Sistema Administrador
Ingreso al Sistema Administrador Para ingresar a esta herramienta se deberá definir un usuario y un password o clave la cual será definida de antemano para usted. Una vez dentro del sistema, usted podrá
Manual Usuario Wordpress. Índice
2 Índice 1. Manual usuario...2 1.1 Zona de mensajes...2 1.2 Zona de usuarios...5 1.2.1 Identificarse...5 1.2.2 Registrarse...6 1.3 Categorías...6 1.4 Subscribirse...6 1.5 Archivos...7 1.6 Calendario...7
Un kilobyte (KB) son 1024 bytes, un Megabyte (MB) son 1024 KB, un Gigabyte son 1024 Mb
El Explorador de Windows es la herramienta básica en un Sistema Operativo porque con ella controlaremos toda la información que tenemos guardada en nuestro disco duro, disquete, CD, USB, etc. Terminología
EJEMPLO DE APERTURA Y CIERRE DE UNA ETIQUETA.
DOCUMENTOS HTML QUÉ SON? Los documentos HTML son archivos creados con etiquetas en lenguaje de hyper text markup language (lenguaje de hipertexto). Estos documentos son interpretados por los programas
Pasos a seguir para la realización del ejercicio final
Pasos a seguir para la realización del ejercicio final 1 - Crear Página con WordArt e insertar el texto con un tipo de letra similar y los formatos adecuados. Activar la barra de herramientas de dibujo
S I S T E M A E N L Í N E A
S I S T E M A E N L Í N E A El Sistema en Línea de AGROIDEAS - Programa de Compensaciones para la Competitividad es la herramienta mediante la cual las Organizaciones de Productores Agrarios podrán inscribirse
GUÍA RÁPIDA DE TRABAJOS CON ARCHIVOS.
GUÍA RÁPIDA DE TRABAJOS CON ARCHIVOS. 1 Direcciones o Ubicaciones, Carpetas y Archivos Botones de navegación. El botón Atrás permite volver a carpetas que hemos examinado anteriormente. El botón Arriba
Guía del Usuario. Transferencia de Archivos
Sistema de Compras online de Drogueria Sur S.A. Guía del Usuario Transferencia de Archivos Villarino 46/58 Tel/Fax: 0291-5507777 e-mail: sursa@drogueriasur.com.ar www.drogueriasur.com.ar (B8000JIB) Bahía
Guía para realizar trabajos universitarios
Guía para realizar trabajos universitarios Recurso de apoyo para el proceso de migración a de la. Este manual fue elaborado para Libre Office Writer Introducción Además puede establecerse que tengan un
Índice general de materias LECCIÓN 7 74
Índice general de materias LECCIÓN 7 74 BUSCAR 74 BUSCAR CON FORMATO 77 REEMPLAZAR 78 REEMPLAZAR CON FORMATO 79 NOTAS AL PIE DE PÁGINA 79 CONFIGURAR LAS NOTAS 81 INSERTAR NOTAS AL PIE 83 MODIFICAR NOTAS
Amnistía Internacional Sección Española
Amnistía Internacional Sección Española Webs locales Manual para editores Diciembre 2007 Versión 1.0 INTERNO SECRETARIADO ESTATAL. FERNANDO VI, 8, 1º IZDA. 28004 MADRID Telf.: + 34 91 310 12 77 Fax: +
La visualización de la ventana de Word tiene las siguientes partes:
TRABAJANDO CON WORD Ventanas de Word La visualización de la ventana de Word tiene las siguientes partes: Visualización de página Barra de título, Barra de Menús, donde se indica el nombre de la aplicación
2011-2012 RESOLUCIÓN DE ERRORES EN MOODLE CAMPUS VIRTUAL-BIRTUALA UPV-EHU
2011-2012 RESOLUCIÓN DE ERRORES EN MOODLE CAMPUS VIRTUAL-BIRTUALA UPV-EHU Antecedentes:... 2 1. Introducción... 3 2. Imágenes que no se visualizan... 3 3. URLs de recursos o actividades que no son autocontenido...
generar columnas de texto y números disponer texto en columnas paralelas (para traducciones por ejemplo) situar imágenes junto a textos.
Módulo 3 Herramientas de Cómputo Tablas y Gráficos Las tablas de Word tienen una función similar a las tabulaciones pero con muchas más opciones de formato permitiendo mejores acabados. Mediante tablas
Manual de usuario Sitio
Versión 7.08.03 Página 1 Índice de contenidos Introducción... 3 Áreas del Sitio Web... 4 1. Encabezado... 4 2. Secciones y Páginas definidas... 5 3. Contenidos... 5 4. Novedades Destacadas... 5 5. Botones
MANUAL BÁSICO DE WRITER
MANUAL BÁSICO DE WRITER Los contenidos que vamos a tratar en este pequeño manual son los siguientes: 1. 2. 3. 4. 5. 6. 7. 8. Qué es OpenOffice y qué es Writer? Cómo accedemos a Writer? Principales opciones
MANUAL DE USUARIO DEL SISTEMA PARA EL REDACTOR
MANUAL DE USUARIO DEL SISTEMA PARA EL REDACTOR Conceptos Básicos. Drupal es un sistema de gestión de contenido que permite manejar artículos, fotos, archivos, etc. Es un sistema dinámico que administra
BUSINESS OBJECTS EDICIÓN DE REPORTES NIVEL I
BUSINESS OBJECTS EDICIÓN DE REPORTES NIVEL I [Escriba texto] Contenido INTRODUCCIÓN... 3 CAPÍTULO I: Crear Reportes Desde Carpetas Publicas... 4 CAPÍTULO II: Editar Reportes... 6 CAPÍTULO III: Visualización
GUÍA PARA MANEJAR GOOGLE DRIVE
GUÍA PARA MANEJAR GOOGLE DRIVE 1 Universidad de Córdoba Grupo de Investigación AVI Ambientes Virtuales Interactivos GOOGLE DRIVE GOOGLE DOCS O GOOGLE DRIVE Google Docs es una sencilla pero potente suite
MANUAL DEL PROGRAMA DE ASESORAMIENTO (Asesores) Navegador y limpiar caché/cookies...2 Acceso al programa de Asesoramiento... 7
MANUAL DEL PROGRAMA DE ASESORAMIENTO (Asesores) Índice Pasos previos a la visualización del programa: Navegador y limpiar caché/cookies...2 Acceso al programa de Asesoramiento... 7 Conceptos e información
Plataforma Helvia. Manual de Administración. Bitácora. Versión 6.06.04
Plataforma Helvia Manual de Administración Bitácora Versión 6.06.04 ÍNDICE Acceso a la administración de la Bitácora... 3 Interfaz Gráfica... 3 Publicaciones... 4 Cómo Agregar una Publicación... 4 Cómo
CASO PRÁCTICO DISTRIBUCIÓN DE COSTES
CASO PRÁCTICO DISTRIBUCIÓN DE COSTES Nuestra empresa tiene centros de distribución en tres ciudades europeas: Zaragoza, Milán y Burdeos. Hemos solicitado a los responsables de cada uno de los centros que
La presente documentación está protegida por la legislación vigente en materia de propiedad intelectual prohibiéndose
Aviso legal La presente documentación está protegida por la legislación vigente en materia de propiedad intelectual prohibiéndose expresamente reproducir, copiar, distribuir, poner a disposición o de cualquier
Vamos a ver las dos formas básicas de arrancar PowerPoint.
Iniciar Powerpoint Vamos a ver las dos formas básicas de arrancar PowerPoint. 1) Desde el botón Inicio situado, normalmente, en la esquina inferior izquierda de la pantalla. Coloca el cursor y haz clic
De Word 2010 a Office 365 para empresas
De Word 2010 a Office 365 para empresas Haga el cambio Como el aspecto del escritorio de Microsoft Word 2013 es diferente de las versiones anteriores, le ofrecemos una breve introducción a las nuevas características
Programa por Clase. 8. CSS3 9. Ejercicio Práctico 10. Examen
Curso CSS Clase 5 Programa por Clase 1. Repaso HTML. Introducción. Reglas CSS internas. 2. Etiquetas básicas de CSS (tipografía, subrayado, etc.) 3. Archivos CSS externos. Colores. Imágenes. 4. Modelo
BUSINESS OBJECTS EDICIÓN DE REPORTES NIVEL II
BUSINESS OBJECTS EDICIÓN DE REPORTES NIVEL II [Escriba texto] Contenido CAPÍTULO I: ESTRUCTURANDO UN REPORTE... 4 CAPÍTULO II: FICHA DE INFORMES... 5 CAPÍTULO III: BARRA DE HERRAMIENTAS INFORME... 19 EJERCICIOS...
Tablas en HTML. Tipos de celdas. Ing. Tomás Urbina Programación Web y Desarrollo de la Plataforma Web
Tablas en HTML Ing. Tomás Urbina Programación Web y Desarrollo de la Plataforma Web Una tabla HTML puede ser considerada de manera simple como un grupo de filas donde cada una de ellas contiene un grupo
Manual de usuario para Android de la aplicación PORTAFIRMAS MÓVIL
Manual de usuario para Android de la aplicación PORTAFIRMAS MÓVIL Índice 1 Introducción... 5 1.1 Perfil de la aplicación... 5 1.2 Requisitos técnicos... 5 2 Manual de usuario... 7 2.1 Instalación del certificado...
Módulo 8: Ofimática básica. Unidad didáctica 4: Introducción y modificación de datos. Access
Módulo 8: Ofimática básica Unidad didáctica 4: Introducción y modificación de datos Access UNIDAD DIDÁCTICA 4 Introducción y modificación de datos Créditos Autor/es: Fuentes Innovación y Cualificación
1. La nueva interfaz del programa
1. La nueva interfaz del programa 13 1. La nueva interfaz del programa 1.1 La interfaz del nuevo Flash CS4 Al acceder por primera vez a Adobe Flash CS4 llama la atención la nueva disposición de las paletas,
Centro de Capacitación en Informática
Fórmulas y Funciones Las fórmulas constituyen el núcleo de cualquier hoja de cálculo, y por tanto de Excel. Mediante fórmulas, se llevan a cabo todos los cálculos que se necesitan en una hoja de cálculo.
MICROSOFT EXCEL 2007. Introducción: Qué es y para qué sirve Excel2007? TECNOLOGIA/ INFORMATICA: MS-EXCEL
MICROSOFT EXCEL 2007 Qué es y para qué sirve Excel2007? Excel 2007 es una hoja de cálculo integrada en Microsoft Office. Esto quiere decir que si ya conoces otro programa de Office, como Word, Access,
UNIVERSIDAD DE MEDELLÍN NUEVO PORTAL WEB MANUAL DE USUARIO GESTOR DE CONTENIDOS
UNIVERSIDAD DE MEDELLÍN MANUAL DE USUARIO GESTOR DE CONTENIDOS NUEVO PORTAL WEB TABLA DE CONTENIDO Tabla de Contenido 2 Consideraciones Iniciales 3 Ingreso al Sistema 4 Opciones de Gestor de contenidos
Ofimática Aplicada UNIDAD II : HERRAMIENTAS DE ESCRITORIO WORD
Ofimática Aplicada UNIDAD II : HERRAMIENTAS DE ESCRITORIO WORD Contenido: Edición Básica. Formato del documento (color, efecto y tamaño) Ejercicios Elaborado por: Lic. Ronald Méndez 1 Guía Rápida de Microsoft
Instructivo de inducción al aula virtual. Blackboard
Lea atentamente las siguientes instrucciones para soportes: Información de contacto soporte técnico aulas virtuales A través del Centro de contactos 5936464 en Bogotá o línea 018000931000 para los residentes
Novell Vibe 4.0. Marzo de 2015. Inicio rápido. Inicio de Novell Vibe. Introducción a la interfaz de Novell Vibe y sus funciones
Novell Vibe 4.0 Marzo de 2015 Inicio rápido Cuando se empieza a usar Novell Vibe, en primer lugar se recomienda configurar un área de trabajo personal y crear un área de trabajo de Este documento explica
CRECE CON INTERNET. Empieza a navegar por la Red
CRECE CON INTERNET Empieza a navegar por la Red Empieza a navegar por la Red 1. Qué es Internet i para qué sirve? 2. Qué es e una web? 3. Qué es e navegar por Internet? 4. Cómo nos conectamos a InterneT?
Diseño de páginas web
Diseño de páginas web Utilidades en Dreamweaver Ricardo Esteban Alonso Preferencias. Edición En el menú Edición > Preferencias...,podemos modificar a nuestro gusto las opciones que de forma predeterminada
Publicando información en Internet.
Publicando información en Internet. Que es un sitio Web? Es un conjunto de archivos computacionales (imágenes, animaciones, etc) y páginas Web referentes a un tema en particular, incluye una página inicial
Para ingresar a la aplicación Microsoft PowerPoint 97, los pasos que se deben seguir pueden ser los siguientes:
Descripción del ambiente de trabajo Entrar y salir de la aplicación Para ingresar a la aplicación Microsoft PowerPoint 97, los pasos que se deben seguir pueden ser los siguientes: A través del botón :
Exporta la construcción para su visualización en Internet, es decir, como applet dentro de una página html.
13. Applets, JavaScript y XML 13.2 Applets Objetivos GeoGebra permite de una forma muy sencilla incorporar cualquier construcción a una página web, creando así una "miniaplicación" web. Cada una de estas
Informática I Notas del curso
EXCEL Objetivo: Identificar la funcionalidad general de Excel, sus herramientas y recursos Excel Objetivo Particular: Conocer los métodos básicos de trabajo de Excel, para el manejo de registros, datos
CÓMO CREAR UNA PÁGINA WEB v.1
CÓMO CREAR UNA PÁGINA WEB v.1 Índice 1 Introducción 1 2 Diseño gráfico 1 3 El lenguaje HTML 1 4 Alojamiento y publicación 2 5 Promoción 5 1 Introducción 2 Diseño gráfico Una página web es un espacio virtual
El módulo de texto plano es un sencillo editor. Al seleccionarlo en la caja de módulos, el área central adoptará al siguiente aspecto:
Plantilla de texto plano El módulo de texto plano es un sencillo editor. Al seleccionarlo en la caja de módulos, el área central adoptará al siguiente aspecto: Título: Es el título que aparecerá identificando
Presentaciones compartidas con Google Docs (tutorial)
Presentaciones compartidas con Google Docs (tutorial) G oogle Docs es una muy sencilla suite ofimática online que nos permite crear nuevos documentos, planillas de cálculo y presentaciones multimedia,
Profesor: Víctor Cárdenas Schweiger
Profesor: Víctor Cárdenas Schweiger 2014 En primer lugar se debe especificar que el archivo de texto que se esta escribiendo es un documento HTML, para ello usamos las instrucciones de inicio y fin de
Manual del Profesor Campus Virtual UNIVO
Manual del Profesor Campus Virtual UNIVO Versión 2.0 Universidad de Oriente UNIVO Dirección de Educación a Distancia INDICE 1. Campus Virtual. 03 1.1 Accesos al Curso 04 1.2 Interfaz del Curso...06 1.3
TEMA 9 CREACIÓN DE PÁGINAS WEB
TEMA 9 CREACIÓN DE PÁGINAS WEB OBJETIVOS Conocer las páginas web y sus elementos. Insertar tablas, capas, enlaces en las páginas web. Crear páginas web con NVU. Crear un sitio web. Configurar un sitio
Guía de usuario del Administrador CPA BT icomms
Guía de usuario del Administrador CPA BT icomms Enero 2015 Contenido Bienvenido... 3 Usuarios... 3 Convenciones de texto... 3 Siglas... 4 Publicaciones relacionadas... 4 Cómo obtener ayuda... 4 Capítulo
Organizando mi clase en el GES Material de apoyo
Tabla de contenido 1. Cómo subir el programa del curso?... 1 1.1. Subir el programa del curso... 1 1.2 Enlazar un programa... 3 1.3 Crear un programa en GES... 5 2. Cómo agrego apuntes o material de clase?...
Cómo Google indexa tu sitio?
Cómo Google indexa tu sitio? En este artículo comentaremos porque es tan preciado el posicionamiento en Google, repasaremos su algoritmo de indexación y rankeo, y veremos tips necesarios para que tu página
Tutorial de Introducción a la Informática Tema 0 Windows. Windows. 1. Objetivos
1. Objetivos Este tema de introducción es el primero que debe seguir un alumno para asegurar que conoce los principios básicos de informática, como el manejo elemental del ratón y el teclado para gestionar
Para obtener una cuenta de padre
Orientación de Calificaciones Portal Padres Temas Principales Características Para obtener una Cuenta de Padres Lineamientos sobre el uso Manejo de la Cuenta Información de apoyo Calificaciones en Portal
Cuando creas tu blog, puedes albergarlo de forma gratuita en Blog*Spot. Escoge simplemente una URL disponible y ya puedes utilizarlo.
Un blog es un diario personal de colaboración y una fuente de noticias impactantes. Su blog será como usted quiera que sea, no debe seguirse ningún patrón. Puedes accesar a Blogger desde la barra de direcciones
Manual de ayuda para la utilización del Correo Interno en el Campus Virtual
Manual de ayuda para la utilización del Correo Interno en el Campus Virtual Página 1 de 12 Contenido 1. INTRODUCCIÓN... 3 2. CONFIGURACIÓN DEL BLOQUE DE CORREO INTERNO... 3 3. GESTIÓN DEL CORREO... 4 4.
Guía de uso de Moodle para participantes
Guía de uso de Moodle para participantes ÍNDICE 1 ACCESO... 4 1.1 PORTAL... 4 1.2 INGRESAR A PLATAFORMA... 6 1.3 ESTRUCTURA DEL CURSO... 7 1.3.1 BLOQUES... 8 2 RECURSOS Y MÓDULOS... 10 LOS RECURSOS SE
UF0320: Aplicaciones informáticas de tratamiento de textos
UF0320: Aplicaciones informáticas de tratamiento de textos TEMA 1. Conceptos generales y características fundamentales del programa de tratamiento de textos TEMA 2. Introducción, desplazamiento del cursor,
Introducción a Microsoft Word
La barra de herramientas de Word La barra de herramientas de Word ha evolucionado a través de las distintas versiones, manteniéndose más o menos constante desde la versión 97 hasta la 2003 y cambiando
Dependiendo de la utilización, forma y resultado deseado, Word propone diferentes columnas:
COLUMNAS Dependiendo de la utilización, forma y resultado deseado, Word propone diferentes columnas: de Las periodísticas simples. En ellas, el usuario define las columnas antes de escribir y salta de
SESIÓN 6 INTRODUCCIÓN A WORD.
SESIÓN 6 INTRODUCCIÓN A WORD. I. CONTENIDOS: 1. La pantalla de Word. 2. Partes de la pantalla de Word. 3. Funcionamiento de los menús. 4. Distintas formas de ver un documento. 5. Trabajar con varios documentos
En primer lugar necesitamos indicar el tipo de documento que estamos creando. Esto en HTML5 es extremadamente sencillo:
1 Estructura global Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento está diferenciada, declarada y determinada por etiquetas específicas. En esta parte del capítulo
GUÍA Nro. 1 TECNOLOGÍA DE INTERNET. TIII PIII
GUÍA Nro. 1 TECNOLOGÍA DE INTERNET. TIII PIII GUIA DISPONIBLE EN: http://preparadorivan.blogspot.com/ - http://preparadormssi.50webs.com/inicio.html La World Wide Web o la Web, es una de las múltiples
TECNOLOXÍAS E ANÁLISE DOS DATOS
TECNOLOXÍAS E ANÁLISE DOS DATOS LINGÜÍSTICOS M.J. Ginzo 3 de diciembre de 2012 Esquema presentación 1 Introducción 2 Accediendo al administrador 3 Elementos de Joomla 1 Artículos 2 Categorías 3 Usuarios
Módulo II - PowerPoint
Módulo II - PowerPoint Índice Copiando diapositivas Menú Edición... 2 Copiando diapositivas utilizando la barra de herramientas... 3 Copiando diapositivas utilizando el menú contextual... 3 Copiando diapositivas
Que es Velneo vdataclient V7?
Página 1 de 14 Que es Velneo vdataclient V7? Es el cliente de datos que nos permitirá de una forma remota acceder como administrador a una base de datos, observar el estado de la información e interactuar
Adobe Dreamweaver CS6 Mi Sitio Web
Adobe Dreamweaver CS6 Mi Sitio Web Mg. Carlos Antonio Huamán Terrazas. Presentación Una de las reglas que se debe respetar en la creación de un Sitio Web es ordenar lar páginas web y los archivos a utilizar
SISTEMA DE GESTIÓN DEL SERVICIO (SGS) Herramienta de Trabajo en Grupo: BSCW. Manual básico BSCW 5.0
SISTEMA DE GESTIÓN DEL SERVICIO (SGS) Herramienta de Trabajo en Grupo: BSCW Manual básico BSCW 5.0 Vicerrectorado de TIC, Calidad e Innovación Centro de Informática y Comunicaciones Título Herramienta
Plantilla de texto plano
Plantilla de texto plano Esta es la plantilla seleccionada por defecto al crear una nueva página. Título: Es el título que aparecerá identificando a la página, así como en la cabecera del documento en
En este tutorial vamos a calificar una tarea por el método "Calificación simple directa"que es el que utiliza por defecto moodle.
1 de 9 Calificar Tarea En este tutorial vamos a calificar una tarea por el método "Calificación simple directa"que es el que utiliza por defecto moodle. La evaluación por guías de calificación y las rúbricas