MATERIALES Leer previamente la Guía número 3 Elementos proporcionados por docente para realización de asignación.
|
|
|
- José Rodríguez Cárdenas
- hace 6 años
- Vistas:
Transcripción
1 Tema: Hipervínculos CONTENIDOS Qué es un hipervínculo? Referencia absoluta y referencia relativa Destino _blank y _self Formato y tipos de los enlaces Div y CSS OBJETIVOS ESPECÍFICOS Que el estudiante aprenda a crear una página de inicio para que los alumnos puedan aplicar los diferentes tipos de enlaces de hipertexto que existen en la web. MATERIALES Leer previamente la Guía número 3 Elementos proporcionados por docente para realización de asignación. Qué es un hipervínculo? Es un enlace, un elemento de un documento electrónico que hace referencia a otro recurso. Un enlace puede ser un texto, una imagen, video o audio y para esto ocuparemos la etiqueta <a> </ a> y el atributo href se especifica la página a la que está asociado el enlace. Existen diferentes formas de expresar una referencia a una página a través del atributo href: Referencia absoluta Conduce a una ubicación externa al sitio en el que se encuentra el documento. La ubicación es en Internet, en este caso hay que empezar la referencia por medio de el nombre del dominio y algunas veces el nombre de la página. Por ejemplo: <a href= > Visita el Sitio de la UDB </a> <a href= > Ver un video </a> <a href= > Facebook </a>
2 Al visualizarlo en el navegador aparecerá lo siguiente: Al dar click a cada enlace nos redirige al sitio web de la Universidad Don Bosco, un video y a la red social de Facebook. Referencia relativa Conduce a un documento situado dentro del mismo sitio que el documento actual. Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común, estando todos ellos dentro de una misma carpeta, conocida como carpeta raíz del sitio. Por ejemplo: Teniendo en cuenta que el documento ejemplo.html se encuentra directamente dentro de la carpeta raíz del sitio, para insertar el enlace: <a href= ejemplo.html > Ir a la página ejemplo </a> <a href= perro.jpg > Ver una imagen </a> <a href= guia3.pdf >Ver un pdf </a> Al visualizarlo en el navegador aparecerá lo siguiente: Al dar click a cada enlace nos redirige a un html dentro del mismo proyecto web, visualizar una imagen y pdf.
3 Destino o target del enlace El destino del enlace determina en qué ventana va a ser abierta la página vinculada, se especifica a través del atributo target al que se le puede asignar los siguientes valores: _blank: Abre el documento vinculado en una ventana nueva del navegador. _self: Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo. Veamos aplicado el destino en referencia absoluta: <a href= target= _blank > Visita el sitio de la UDB en una ventana nueva </a> a href= target= _self > Visita el sitio de la UDB en la misma ventana </a> Veamos aplicado el destino en referencia relativa: <a href= ejemplo.html target= _blank > Abre el enlace en una ventana nueva </a> a href= ejemplo.html target= _self > Abre el enlace en la misma ventana </a> Estilo de enlaces Normalmente los vínculos de texto cambian de color cuando el enlace ha sido ya pulsado o cuando el puntero del ratón se posiciona sobre él, estos cambios están predefinidos en cada navegador, pero nosotros podemos cambiar esos colores. Los colores de los vínculos pueden especificarse a través de las propiedades de la página, en la etiqueta <body>. Estos colores se asignan a través de los atributos link (vínculo), alink (vínculo activo), y vlink (vínculo visitado). Explicado de una forma más detallada: link: permite determinar el color de los enlaces sin visitar (enlace que no ha sido pulsado ninguna vez). alink: permite determinar el color del enlace activo (enlace que acaba de ser pulsado). vlink: permite determinar el color de los enlaces visitados (enlaces que ya han sido pulsados). Por ejemplo: <body link= #FF0000 vlink= #FF0099 alink= #FF9900 >
4 Mientras no se visite la página el enlace será de color rojo (#FF0000): Mientras la página sea la última visitada, el enlace será de color fucsia (#FF0099): Cuando se haya visitado la página el enlace será de color naranja (#FF9900): Enlaces a correo electrónico Abre la aplicación Outlook Express o Mail; para escribir un correo electrónico, cuyo destinario será el especificado en el enlace. Para ello la referencia del vínculo debe ser mailto:escribircorreodedestino. Por ejemplo: <a href= mailto:info@udb.edu.sv > Escríbenos a un mensaje</a>
5 PROCEDIMIENTO: 1. Cree una carpeta con el nombre de la guia Dentro de la carpeta de guia 3, coloque los archivos proporcionados por su docente. 3. Administre el sitio o proyecto con el nombre de guía 3 más su nombre y apellido. 4. Abra Dreamweaver cree el HTML y guardelo en la carpeta de la guia 3 con el nombre de: guia3.html no deje espacios al momento de guardarlo. 5. Coloque las etiquetas de apertura y cierre de HTML, HEAD, TITLE Y BODY, como se presenta a continuación: <!doctype html> <html> <head> <meta charset= UTF-8 > <title>the Pocketbook</title> </head> Guarde el archivo y visualícelo con el menú Archivo / Vista previa en el navegador o si lo prefiere más inmediatamente con la herramienta de Dreamweaver Vista Previa Lo que observará será una página HTML en blanco, pero note que la barra del título tiene el nombre del la práctica de ahora: The Pocketbook que usted puso dentro de la etiqueta TITLE de su HTML.
6 6. Agregaremos un fondo a la composición y nos vamos ayudar del atributo background dentro de etiqueta BODY. <body background= background.jpg > </body> Con la etiqueta BODY BACKGROUND usted puede otorgarle una imagen de fondo a la página creada, esta imagen debe de estar guardada en la carpeta Imagenes/img/images de la carpeta raíz del proyecto. A la etiqueta BODY BACKGROUND le colocaremos un parámetro, el parámetro será STYLE, para que la imagen quede fija y solo se repita a los lados: <body background= background.jpg style= background-repeat:repeat-x > </body> En el navegador visualizaremos algo como lo siguiente: 7. Aplicar estilos a los enlaces para eso colocaremos las siguientes propiedades siempre dentro de la etiqueta BODY: <body background= background.jpg style= background-repeat:repeat-x link= # alink= #FFFF00 vlink= #FF00FF > </body>
7 8. Ahora agregaremos las hojas de estilo CSS, necesitamos dirigirnos en Archivo / Nuevo... y seleccionamos el tipo de página CSS. 9. Guardamos la hoja de estilo dentro de nuestra carpeta guia3 o guia_3, esta hoja le otorgaremos el nombre de: estilos_guia3.css 10. Ahora damos paso a enlazar nuestra guia3.html, con la hoja de estilos CSS, en este caso dentro de la etiqueta <head> aplicaremos el siguiente código: <head> <link href= estilos_guia3.css rel= stylesheet type= text/css > </head> Nota: El atributo rel= stylesheet especifica que el documento en cuestión es una hoja de estilo externa y el atributo type= text/css se usa para especificar un tipo de medio 11. Puede notar que en la parte superior la hoja de estilo ya esta vinculada a nuestro HTML: 12. En este momento ya podemos aplicar la etiqueta DIV, a nuestra guía 3. Qué es la etiqueta DIV? se emplea para definir un bloque de contenido o sección de la página, para poder aplicarle diferentes estilos e incluso para realizar operaciones sobre ese bloque específico.
8 Dentro de la etiqueta BODY se aplica el código de la siguiente manera: <body> <div> </div> </body> En la guía 2 aprendimos como agregar imágenes dentro del código html, así que vamos agregar la imagen del logotipo de The pocketbook, que esta dentro de la carpeta img denomiado: logopocketbook.png dentro de la etiqueta div, que acabamos de crear, el código se presenta de la siguiente manera: <body> <div> <img src= img/logopocketbook.png width= 287 height= 197 /> </div> </body> En el navegador visualizaremos algo como lo siguiente: Si pueden notar el logotipo esta justificado es a la derecha y nosotros necesitamos que su posición sea al centro de la composición, es por ello que nos vamos ayudar de agregar un atributo a la etiqueta DIV, y ese atributo es align= center, el código queda de la siguiente manera: <body> <div align= center > <img src= img/logopocketbook.png width= 287 height= 197 /> </div> </body>
9 13. Ahora agregaremos textos a nuestra composición a continuación los textos que utilizaremos:... The Pocketbook is a creative commons book that collects 120 tips from featured creatives of the design world adressed to newcomer graphic designers.... Con la ayuda de los CSS le daremos formato al texto, en la parte superior abrimos los estilos_guia3.html header { } p{ font-family:baskerville, Palatino Linotype, Palatino, Century Schoolbook L, Times New Roman, serif; font-size:24px; font-style:normal; color:#330099; text-align:justify; } Ahora vamos agregar otra etiqueta DIV con el id denominado: enlaces, en el cual vamos agregar una tabla con las siguientes especificaciones: 1 fila, 6 columnas y espacio entre celdas 5. En la tabla vamos organizar los elementos de la siguiente manera: -Columna 1: isotipo1.png -Columna 2: texto: FACEBOOK -Columna 3: isotipo2.png -Columna 4: texto: Descarga The Pocketbook -Columna 5: isotipo3.png -Columna 6: texto: Wallpaper #enlaces{ font-family:baskerville, Palatino Linotype, Palatino, Century Schoolbook L, Times New Roman, serif; font-size:8px; color:#ffffff; text-align:center; }
10 15.Recordar que guardar los cambios que hacemos en CSS, así como también en la hoja de HTML. Para que se aplique lo que hemos programado. 16.Ahora vamos a vincular los textos Facebook, Descarga The Pocketbook y Wallpaper, para ellos nos vamos ayudar del panel de propiedades, que en muchas ocaciones lo encontramos en la parte inferior del programa, si no tienes activo el panel, busca en Ventana/Propiedades y listo. 17.Selecciona el texto con el cursor, nos dirigimos al panel de propiedades y vinculamos así: Facebook <a href= Destino: _blank Descarga The Pocketbook <a href= pdf/thepocketbook.pdf >Descarga The Pocketbook</a> Destino: _blank Wallpaper <a href= img/wallpaper.jpg >Wallpaper</a> Destino: _blank 18. Agregamos otra tabla más para invitar a las personas que nos escriban un correo Así que escribimos el texto Escríbenos y vinculamos así: <p> <a href= mailto:info@thepocketbook.com > Escríbenos un mensaje </a> </p> 19. Ya para finalizar utilizaremos la etiqueta FOOTER, la cual nos sirve para: representa el pie de un documento o sección. <footer> 2015 The Pocketbook. Todos los derechos reservados. </footer>
11 REFERENCIAS BIBLIOGRÁFICAS //Guía HTML, Antonio Berciano Alonso ABA Noviembre platea.pntic.mec.es/~abercian/guiahtml/index. html //Manual de HTML: // Wikipedia. //Guía 1, Guía 2 Diseño Digital 5, Universidad Don Bosco
GUIA 3. Tema: Hipervínculos. Qué es un hipervínculo?
GUIA 3 Tema: Hipervínculos. Objetivo General Crear una página de inicio para que los alumnos puedan aplicar los diferentes tipos de enlaces de hipertexto que existen en la web. Objetivos Específicos Crear
Qué es HTML? Estructura interna de una página HTML. Cabecera de la página <head>
Qué es HTML? El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada,
Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son un elemento esencial para cualquier página web.
Unidad 4. Hiperenlaces (I) Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son un elemento esencial para cualquier página web. Hiperenlace Un hiperenlace, hipervínculo,
<DOCTYPE HTML PUBLIC> <HTML> <HEAD>... </HEAD> <FRAMESET>... </FRAMESET> </HTML>
... ... Marcos en HTML
UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION
CICLO 01-2016 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION GUIA DE LABORATORIO Nº 2 Nombre de la practica: Introducción y conceptos básicos de CSS Lugar de ejecución:
En que nos ayuda las hojas de estilo cascada (css)?
HECHO POR CREACIONES Y DESARROLLO WEB COSTA RICA, CUALQUIER MACRO CON GUSTO ESTAMOS PARA AYUDARLE, LLAMENOS Y CON GUSTO LE ATENDEREMOS TEL 8364-3733 // 8348-9439 En que nos ayuda las hojas de estilo cascada
UNIDAD 1 GENERALIDADES HTML
UNIDAD 1 GENERALIDADES HTML GENERALIDADES HTML5 Una página web es un archivo con texto en el que se insertan diferentes etiquetas HTML, para que ese contenido pueda ser interpretado por el navegador web.
GUÍA 6 Tema: Imágenes por sustitución, audio y video
Tema: Imágenes por sustitución, audio y video CONTENIDOS Aplicación de imágenes por sustitución. Aplicar video por medio del programa de Dreamweaver y plataforma Youtube. Agregar audio en una plantilla
DreamWeaver CS5 PERTENECE A: TEORIAS Y SISTEMAS TECNICO- CIENTIFICOS
DreamWeaver CS5 PERTENECE A: TEORIAS Y SISTEMAS TECNICO- CIENTIFICOS Configuración Inicial Primero Configuraremos un sitio para que de forma automática todo se guarde y se extraiga de la carpeta seleccionada.
Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales
UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES Licenciatura en Artes Multimediales Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales CSS CSS - Hojas
Conceptos básicos de Dreamweaver CS3
Conceptos básicos de Dreamweaver CS3 Empezar con Dreamweaver Al abrir Dreamweaver elegimos un documento nuevo y seleccionamos la Categoría Página básica, HTML. Antes de empezar con Dreamweaver debemos
Actividad 3: Codificación básica de un texto en HTML
Actividad 3: Codificación básica de un texto en HTML Abrir un editor de texto, por ejemplo en nuestro caso notepad, después codificar los elementos básicos y guardar en una carpeta con la extensión.html
Sintaxis de CSS CSS ({ })
Qué es CSS? CSS (Cascading Style Sheets - Hojas de Estilo en Cascada), son un mecanismo simple que describe como se va a presentar un documento en la pantalla. CSS nos permite controlar el estilo y el
Conceptos Teóricos de HTML5 (material extra adicional libro):
Temario de Examen Unidad I Materia: Informática Catedráticos: Víctor Aquino/Débora Santizo Temas: Uso del programa Sublime Text Forma Correcta de guardar archivos html y css (.html y.css) Uso de la etiquetas
Un paseo por la Web Qué es el HTML? Hojas de estilo en cascada (CSS) Qué herramientas necesitamos? LECCIÓN 2: ESTRUCTURA DEL CÓDIGO HTML
NDICE LECCIÓN 1: INTRODUCCIÓN Un paseo por la Web Qué es el HTML? Hojas de estilo en cascada (CSS) Qué herramientas necesitamos? LECCIÓN 2: ESTRUCTURA DEL CÓDIGO HTML Las etiquetas HTML Guardar páginas
Técnicas de visualización
Técnicas de visualización LENGUAJE HTML Máster en Tecnologías de la Información Geográfica Laboratori d Informació Geogràfica i de Teledetecció (LIGIT) Departament de Geografia. UAB Anna Jiménez Introducción
QUÉ SE NECESITA PARA UTILIZAR HTML5
Una página web es un archivo con texto en el que se insertan diferentes etiquetas HTML, para que ese contenido pueda ser interpretado por el navegador web. Existen diferentes versiones del lenguaje HTML,
Curso Básico de HTML
Curso Básico de HTML Qué es HTML? HTML es un pseudo-lenguaje de programación, no es un lenguaje en sí. Utiliza tags o etiquetas específicas para crear contenido y dar una estructura al documento. Existen
4º ESO INFORMÁTICA TEMA 7: LENGUAJE HTML ACTIVIDADES. A continuación abriéremos el bloc de notas: Inicio>Programas>Bloc de notas.
4º ESO INFORMÁTICA TEMA 7: LENGUAJE HTML ACTIVIDADES FECHA LÍMITE: 13 de mayo Práctica 1: Lo primero que vamos a hacer es crear en nuestro pendrive una carpeta que llamaremos WEBnuestronombre como por
ESTRUCTURA DEL CÓDIGO HTML5
ESTRUCTURA DEL CÓDIGO HTML5 1. DocType Es la etiqueta que se escribe en la primera línea del código. Permite declarar el tipo de documento. Es decir, el doctype indica que el documento está escrito siguiendo
HIPERVÍNCULOS, LINKS O ENLACES HTML. ETIQUETA <A>. ATRIBUTOS HREF, TARGET Y TITLE. TIPOS DE HIPERVÍNCULOS. ANCLAS O ANCHORS (CU00717B)
APRENDERAPROGRAMAR.COM HIPERVÍNCULOS, LINKS O ENLACES HTML. ETIQUETA . ATRIBUTOS HREF, TARGET Y TITLE. TIPOS DE HIPERVÍNCULOS. ANCLAS O ANCHORS (CU00717B) Sección: Cursos Categoría: Tutorial básico
Identificar cuál es la estructura de una página Web y sus principales secciones. Desarrollar una página Web en un editor.
MÓDULO 2. Introducción Después de conocer los conceptos básicos sobre el lenguaje de programación HTML, en este módulo identificaremos la estructura de una página Web y lo haremos revisando el lenguaje
Construcción de páginas web. San&ago Mar+n de Jesús
Construcción de páginas web San&ago Mar+n de Jesús COLORES 2 LOS COLORES Existen diversas e&quetas y atributos en HTML que permiten dar color a los elementos de una página o incluso el color de fondo de
Demostrar los pasos para la creación y aplicación de elementos multimedia al sitio Simplify.
Tema: Galería de imágenes, formularios y recursos para desarrolladores: Google fonts y Google maps. CONTENIDOS Creación de galería de imágenes por medio del panel comportamiento. Aplicación de formulario
KOMPOZER. Algunas opciones avanzadas: CSS, plantillas...
KOMPOZER Algunas opciones avanzadas: CSS, plantillas... Estilos CSS Hemos visto que cada página, e incluso cada párrafo de una página, puede tener un formato propio y diferente del resto Sin embargo, en
Antes de comenzar a utilizar Kompozer vamos a crear una carpeta en nuestra memoria externa, podéis poner vuestro nombre y dentro de la misma
Taller Elaboración de webs docentes: ficheros html. Nivel básico. 25 de junio de 2008 TRABAJANDO CON KOMPOZER Rosa Mª Bernal Galindo. Instituto de Ciencias de la Educación. Universidad de Murcia Antes
2. Manejar los elementos básicos de un lenguaje usado en la creación de Páginas Web. 2.1 Definición de objetos y contenidos de la página web.
2. Manejar los elementos básicos de un lenguaje usado en la creación de Páginas Web. 2.1 Definición de objetos y contenidos de la página web. INTERNET En 1969, el Departamento de Defensa de E.U construyo
LAS HOJAS DE ESTILO EN DREAMWEAVER MX
LAS HOJAS DE ESTILO EN DREAMWEAVER MX 1 - Introducción a las hojas de estilo en cascada (CSS) Las hojas de estilo en cascada, conocidas también como CSS (Cascade Style Sheets), nos permiten controlar los
1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers ver 2.
Barra de navegación vertical con Botones rollovers ver. 2_TIC 1º Bachillerato página 1/8 1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers ver 2...1 1.1 Intro...1 1.2 Código HTML de la lista de vínculos...2
Índice de contenido Crear un tema nuevo...3 Editar un tema...6 Insertar diferentes elementos en el body...7 Insertar una imagen...
1 Manual de foros Índice de contenido Crear un tema nuevo...3 Editar un tema...6 Insertar diferentes elementos en el body...7 Insertar una imagen...7 Insertar una imagen que se abra en tamaño original...12
Unidad 1.- Fundamentos de sitios web. El lenguaje HTML. Desarrollo de aplicaciones Web. Felipe LC
Unidad 1.- Fundamentos de sitios web. El lenguaje HTML Desarrollo de aplicaciones Web. Felipe LC La actividad #1 En qué consistió la actividad 1? Qué conceptos aprendimos? Demos algunos ejemplos. Qué aprendimos
En la carpeta css, crear una hoja de estilo para cada una de las plantillas, en este caso:
Estilos Personalizados Una vez que se han definido las plantillas, se pueden empezar a crear hojas de estilos para cada una de ellas, esto facilita el modificarlas de manera personalizada sin afectar al
Guía de edición del Recurso Cabecera
Guía de edición del Recurso Cabecera Contenido Acceso a la Edición del recurso... - 2 - Desde el ADE... - 2 - Desde el workplace... - 2 - Cómo editar el recurso... - 2 - Guía Saga Suite Carrusel - 1 -
Manual de utilización del Dreamweaver MX 2004 CLASE 03.
Manual de utilización del Dreamweaver MX 2004 CLASE 03. IMÁGENES y VÍNCULOS en DREAMWEAVER. Para insertar una imagen es conveniente tenerla previamente guardada en la carpeta del sitio. De lo contrario
LENGUAJE DE MARCADO HIPERTEXTO HTML
LENGUAJE DE MARCADO HIPERTEXTO HTML 1. QUÉ ES HTML? HTML, siglas de Lenguaje de Marcas de HiperTexto (HyperText Markup Language), hace referencia al lenguaje de marcado Hipertexto. HTML es base de todo
MANUAL PARA CREAR NUESTRA PAGINA WEB EN DREAMWEAVER
1 MANUAL PARA CREAR NUESTRA PAGINA WEB EN DREAMWEAVER INDICE 1. Como crear mí sitio. 2. Entorno. 3. Insertar texto. 4. Como crear un vínculo. Formas: 5. Como insertar una imagen. 6. Insertar Tabla. 7.
TECNOLOGÍA DE LA INFORMACIÓN Y COMUNICACIÓN ÁREA SISTEMAS INFORMÁTICOS. Entorno dreamweaver DESARROLLO DE APLICACIONES WEB I
TECNOLOGÍA DE LA INFORMACIÓN Y COMUNICACIÓN ÁREA SISTEMAS INFORMÁTICOS Entorno dreamweaver DESARROLLO DE APLICACIONES WEB I Lic. RUBICELL PINEDA TELLEZ ALUMNA: DURÁN VARGAS CLAUDIA MATRICULA: 10292047
1.2. MOVERSE DE UN DOCUMENTO A OTRO BUSCAR TEXTO.
9 1.2. MOVERSE DE UN DOCUMENTO A OTRO BUSCAR TEXTO. Word nos permite buscar un texto de varias formas: a través del panel Navegación o con la página Buscar del cuadro de diálogo Buscar y reemplazar. La
CONTENIDOS DEL CURSO ONLINE DE DISEÑO Y DESARROLLO WEB CON HTML5, CSS Y DREAMWEAVER CS4:
Curso Online Diseño y Desarrollo Web con HTML5, CSS y Dreamweaver CS4 Completo Curso Online de Diseño y Desarrollo Web mediante el lenguaje programación HTML5, la hoja de estilos CSS y el programa de diseño
DIRECCIÓN GENERAL DEL BACHILLERATO CENTRO DE ESTUDIOS DE BACHILLERATO N 2 LIC. JESÚS REYES HEROLES
PROFA. STEPHANY LUCIOTTO V. ACADEMIA: INFORMÁTICA ASIGNATURA: PAG. WEB GUIA DE ESTUDIO PERIODO: 2012-2013 A ALUMN@: GRUPO: FECHA: ESCRIBE EN EL PARENTESIS SI LA RESPUESTA ES VERDADREA O FALSA 1. Las páginas
Universidad Politécnica de El Salvador Computación Básica. HTML Guía 1. Requerimientos y material. Qué es HTML? Etiquetas
Universidad Politécnica de El Salvador Computación Básica HTML Guía 1 Requerimientos y material Internet es un medio que no precisa de mucho conocimiento, el prerrequisito inmediato para poder usar esta
Estructura básica de un documento de HTML5
Estructura básica de un documento de HTML5 Todos tenemos una estructura básica al realizar un sitio web y en HTML5 no hay excepción, lo que es muy fácil de hacer ya que HTML5 tiende a ser una estructura
GUIA 1 CONCEPTOS BÁSICOS
DEFINICIÓN DE HTML5 CESDE GUIA 1 CONCEPTOS BÁSICOS HTML5 es una combinación de nuevas etiquetas del lenguaje HTML (HyperText Markup Language - lenguaje de marcas de hipertexto), el hipertexto es la unión
NATIONAL SOFT HOTELES GUÍA DE CONFIGURACIÓN DEL COMPROBANTE DE RESERVACIÓN
NATIONAL SOFT HOTELES Versión 3.0 GUÍA DE CONFIGURACIÓN DEL COMPROBANTE DE RESERVACIÓN National Soft de México INDICE GENERAL 1. INTRODUCCIÓN... 2 2. ESTABLECER LOS PARÁMETROS DE ENVÍO... 2 3. EDITAR EL
Manual Power Point Manejo de Hipervínculos
Manual Power Point 2010 Manejo de Hipervínculos CONTENIDO Insertar hipervínculos Crear hipervínculo a un archivo o página web existente Crear hipervínculo a un lugar de este documento Crear un hipervínculo
HOJAS DE ESTILOS EN CASCADA CSS (Cascading Style Sheet)
HOJAS DE ESTILOS EN CASCADA CSS (Cascading Style Sheet) 1. QUÉ ES UNA HOJA DE ESTILOS? Las hojas de estilos son un conjunto de instrucciones, el cual permiten manejar el formato y presentación de contenido
WORD AVANZADO. Guía Paso a Paso. Desarrollado por Ing. Marcelo Pickelny Lic. Eugenia Tarrachano
WORD AVANZADO Guía Paso a Paso Desarrollado por Ing. Marcelo Pickelny Lic. Eugenia Tarrachano INSERTAR PORTADA... 2 DAR FORMATO AL TEXTO... 2 MODIFICAR INTERLINEADO... 3 CREAR ESTILOS PERSONALIZADOS...
QUÉ ES UNA HOJA DE ESTILOS? Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que definimos el formato que va a tomar un
QUÉ ES UNA HOJA DE ESTILOS? Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que definimos el formato que va a tomar un determinado elemento de una página web. Siglas CCS significa "Cascading
Hipervínculos o enlaces
1. INTRODUCCIŁN E n la mayoría de los casos, es conveniente repartir la información en varias páginas en lugar de incluir demasiado contenido en una única página. Por ello, cuando nuestro proyecto incluye
IES María de Molina Ejercicios de KompoZer KOMPOZER. Vamos a crear una página Web que contendrá información sobre MECANISMOS.
KOMPOZER Vamos a crear una página Web que contendrá información sobre MECANISMOS. 1. CREACIÓN DE LA ESTRUCTURA DE UN SITIO 1.1. CREACIÓN DE LA CARPETA DEL SITIO WEB Para empezar hay que crear un sitio
Cómo insertar un encabezado y pie de página en todas las páginas de un PDF on line
Cómo insertar un encabezado y pie de página en todas las páginas de un PDF on line www.funcionarioseficientes.es 1 Índice Insertar un encabezado o pie de página en una sola página... 3 Pág Insertar un
Hipervínculos. Word Autor: Viviana M. Lloret Prof. de Matemática e Informática Blog: aulamatic.blogspot.com
Hipervínculos Word 2003 Autor: Viviana M. Lloret Prof. de Matemática e Informática Blog: aulamatic.blogspot.com Microsoft Word Hipervínculos Un hipervínculo es un elemento de un documento electrónico que
H T M L. A c a d e m i a d e U.A.C.M COMPUTACIÓN II. Prácticas
Prácticas H T M L U.A.C.M COMPUTACIÓN II A c a d e m i a d e I n f o r m á t i c a Práctica X Hojas de estilo. El objetivo de esta práctica es conocer y aprender a utilizar uno de los recursos más poderosos
Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4
Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4 Código: DWEB003 Duración: 160 Horas Objetivos: Diseño y desarrollo Web con HTML 5 y CSS Dotar al alumno de conocimientos teóricos y prácticos
HOJAS DE ESTILO: CSS3
HOJAS DE ESTILO: CSS3 ETIQUETAS HTML5 HOJAS DE ESTILO CSS3 CONTENIDO PRESENTACIÓN El mismo contenido puede visualizarse en función de la hoja de estilo. Permiten actualizar y cambiar la presentación de
CSS. Rogelio Ferreira Escutia
CSS Rogelio Ferreira Escutia Definición La hojas de estilo en cascada (en inglés Cascading Style Sheets), CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML
2.4.- Estructura del sitio Web. a) Definición del sitio Sitio Web.- b) Crear y guardar un documento
2.4.- Estructura del sitio Web. a) Definición del sitio Sitio Web.- Es un conjunto de documentos que comparten ciertos atributos, objetivos o subjetivos, tales como tema, apariencia, propósito, etc. Para
Práctica de HTML (Curso )
Práctica de HTML (Curso 2007-2008) Introducción HTML (Hypertext Markup Language) es un lenguaje estándar utilizado en Internet para representar la información intercambiada por sus usuarios en forma de
1. En primer lugar, abrimos la copia modificada del documento original.
MÓDULO VII: TRABAJO COLABORATIVO 7.1. Comparar y combinar documentos La herramienta Comparar y combinar documentos nos permite comparar dos documentos (origen y destino) y ver las diferencias entre ellos
LÍNEAS SEPARADORAS. ETIQUETA <HR>. COMENTARIOS EN HTML. ATRIBUTOS SIZE, WIDTH, NOSHADE (DEPRECATED). EJEMPLOS (CU00716B)
APRENDERAPROGRAMAR.COM LÍNEAS SEPARADORAS. ETIQUETA . COMENTARIOS EN HTML. ATRIBUTOS SIZE, WIDTH, NOSHADE (DEPRECATED). EJEMPLOS (CU00716B) Sección: Cursos Categoría: Tutorial básico del programador
Normalmente el destino se puede saber mirando la barra de estado del navegador cuando el ratón esté sobre el hipervínculo.
Qué es un hipervínculo? Un hipervínculo es un enlace, normalmente entre dos páginas web de un mismo sitio, pero un enlace también puede apuntar a una página de otro sitio web, a un fichero, a una imagen,
Cap. IV - Selectores, identificadores, clases y otros by Tux Merlin - Joomla-gnu.com
CSS como dijimos significa Cascading Style Sheet, traducido Hojas de Estilo en Cascada, pero por qué lo de "cascading"? Esto se refiere a la de herencia que poseen los elementos, es decir, cuando definimos
NUEVAS ETIQUETAS HTML 5
NUEVAS S HTML 5 Se muestra a continuación el listado completo de las etiquetas indicando las nuevas HTML 5, las mismas se agrupan en base a su funcionalidad dentro del documento html. Establece
Podemos configurar Internet Explorer para que nos muestre la página inicial al que queramos abrir el
INTERNET INTERNET NIVEL MEDIO DE INTERNET ESTABLECIENDO PÁGINA DE INICIO: Podemos configurar Internet Explorer para que nos muestre la página inicial al que queramos abrir el programa. Para ello debemosir
Constructor de sitios. Manual de Usuario
Constructor de sitios Manual de Usuario Contenido Introducción... 1 Comienza a crear tu sitio... 2 1.- Inicia sesión... 2 2.-Comenzar con la creación... 3 3.-Crear un proyecto... 3 4.-Seleccionar la plantilla...
DREAMWEAVER CS4 Código: 3492
DREAMWEAVER CS4 Código: 3492 Modalidad: Distancia Duración: Tipo A Objetivos: Aportar al alumno de un modo rápido y sencillo las competencias necesarias para la creación y diseño de páginas Web en Dreamweaver.
Unidad I - INTRODUCCIÓN AL HTML. Profesor: Marcos Tulio Jerez Bastidas. Barinas, abril 2015
República Bolivariana de Venezuela Universidad Nacional Experimental de los Llanos Occidentales Ezequiel Zamora Programa de Ingeniería, Arquitectura y Tecnología Subproyecto de Algoritmo y Programación
Plantillas y formularios. Word Autor: Viviana M. Lloret Prof. de Matemática e Informática Blog: aulamatic.blogspot.com
Plantillas y formularios Word 2003 Autor: Viviana M. Lloret Prof. de Matemática e Informática Blog: aulamatic.blogspot.com PLANTILLAS Y FORMULARIOS Una plantilla es un archivo que se utiliza como modelo
NIVEL 2. Andrés Castillo Martín. Curso TICs Colegio Sagrado Corazón Granada
NIVEL 2 Andrés Castillo Martín Curso TICs Colegio Sagrado Corazón Granada Índice Libros y hojas Referencias relativas y absolutas Clonación de hojas Fórmulas que relacionan distintas hojas Hipervínculos
Word 2010 Manejo de archivos
Word 2010 Manejo de archivos Contenido CONTENIDO... 1 MANEJO DE ARCHIVOS... 2 WORD WEB APPS MANEJO DE ARCHIVOS... 7 1 Manejo de archivos Word nos permite crear un nuevo documento en blanco de las siguientes
ETIQUETAS PRINCIPALES
HTML... 1 ETIQUETAS PRINCIPALES... 1 ETIQUETAS DE TÍTULOS, PÁRRAFOS Y SEPARACIONES... 3 FORMATO DE TEXTO... 5 LISTAS... 6 ENLACES E IMÁGENES... 7 TABLAS... 9 HTML Las páginas web son documentos de texto,
Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales
UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES Licenciatura en Artes Multimediales Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales HTML Desarrollo
MANUAL DE USUARIO AULA VIRTUAL (Docente)
MANUAL DE USUARIO AULA VIRTUAL (Docente) TABLA DE CONTENIDOS Ingreso al Aula Virtual 3 Entorno del Aula Virtual 6 Herramientas del Aula Virtual 10 Estructura de cursos 21 Objetivos del manual de usuario
ANEXO A. FRAMEWORK SARA
ANEXO A. FRAMEWORK SARA Universidad Distrital Francisco José de Caldas 1 1. COMPONENTES SARA se compone de bloques, y cada bloque contiene: Carpeta css: contiene los archivos que le dan estilo al bloque
Programación II. Creando código fuente. Guía didáctica del módulo 3
Programación II. Creando código fuente Índice Tabla de contenido Unidad 1: Horario... 3 Objetivos... 3 Temporización... 3 Actividades... 3 Seguimiento para la consecución de los objetivos... 3 Descripción
Temario Programación Web para Web
Temario Programación Web para Web 1 Introducción al HTML 1 Qué es una página web? T 2 Qué es HTML? T 3 Porqué aprender HTML T 4 Base del lenguaje: las etiquetas HTML V 5 Estructura de un documento HTML
Ejercicios - Introducción al desarrollo web para móviles
Ejercicios - Introducción al desarrollo web para móviles Índice 1 Ejercicio 1 - Estructura en HTML (0.6 puntos)... 2 2 Ejercicio 2 - Terminando la Web de ejemplo (0.6 puntos)... 2 3 Ejercicio 3 - Estructura
CSS BÁSICO Hojas de Estilo. Iván Martínez Toro
CSS BÁSICO Hojas de Estilo Iván Martínez Toro ÍNDICE DECONTENIDOS Introducción al CSS. Cómo es CSS? Sintaxis general. Reglas. Selectores. Class. Divy Span. Uso de las hojas de estilo. CSS (CASCADING STYLE
GUIA DE LABORATORIO 05
UNIVERSIDAD DE EL SALVADOR FACULTAD DE INGENIERIA Y ARQUITECTURA ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS MANEJO DE SOFTWARE PARA MICROCOMPUTADORAS Ciclo II 2012 GUIA DE LABORATORIO 05 En este material
MICROSOFT EXCEL 2007
INGRESAR A EXCEL 007 MICROSOFT EXCEL 007. Clic en Inicio. Colocar el puntero del ratón (flecha) en Todos los programas. Colocar el puntero del ratón (flecha) en Microsoft Office. Clic en Microsoft Excel
Las practicas deberás hacerlas sin la ayuda de tu asesor
3 Introducción HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que
Prof. Víctor José Aquino y Miss Débora Santizo Morales
Colegio Salesiano Don Bosco de Guatemala Proyecto de la Segunda Unidad Diseño de una página web usando la estructura web HTML y CSS Primero Básico Secciones A, B, C, D y E Curso: Tecnologías de la información
1. La evolución de HTML La evolución de las CSS 16
HTML5 y CSS3 1. La evolución de HTML 15 2. La evolución de las CSS 16 2.1 La noción de módulo 16 2.2 La evolución de los estados 16 2.3 Los prefijos comerciales 17 2.4 Utilizar los prefijos comerciales
Kompozer: Crear una hoja de estilos
Kompozer: Crear una hoja de estilos Las hojas de estilo en cascada (en inglés, Cascading Style Sheets), son archivos con extensión.css que se utilizan para dar estilo a nuestros documentos html, separando
Consejos y Técnicas Profesionales NIVEL PRINCIPIANTES - AVANZADOS
Consejos y Técnicas Profesionales NIVEL PRINCIPIANTES - AVANZADOS Este curso manual está realizado con el fin de aprovechar todas las opciones de Office, en su caso de Excel (los demás programas los veremos
QUÉ ES Y PARA QUÉ SIRVE EL LENGUAJE CSS (CASCADING STYLE SHEETS HOJAS DE ESTILOS EN CASCADA)? (DV00203A)
APRENDERAPROGRAMAR.COM QUÉ ES Y PARA QUÉ SIRVE EL LENGUAJE CSS (CASCADING STYLE SHEETS HOJAS DE ESTILOS EN CASCADA)? (DV00203A) Sección: Divulgación Categoría: Lenguajes y entorno Fecha revisión: 2029
Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta ADDRESS ADDRESS CITE CITE B: NEGRITA B: NEGRITA.
En la presente tabla se hace una comparación entre las etiquetas de formato de texto. Netscape no soporta : ni (tachado). Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta
Cómo crear documentos interactivos en Word 2003 y PDF utilizando vínculos
Cómo crear documentos interactivos en Word 2003 y PDF utilizando vínculos www.funcionarioseficientes.com En un artículo anterior Cómo crear índices automáticamente en Word 2007 y 2010 hemos mencionado
MATERIALES Leer previamente la Guía Número 5. Materiales proporcionados por el docente para el desarrollo de la Guía 5.
Tema: Sectorización y Banner web (Slider) CONTENIDOS Creación de sitios locales. Administración de sitios locales. OBJETIVOS ESPECÍFICOS Desarrollo de un banner web, aplicando los conocimientos de webkit
Creación de elementos para una página Web
Creación de elementos para una página Web 147 Creación de elementos para una página Web Contenido Concepto de página Web Vista previa de la página Web Guardar libro de trabajo como página Web Visualizar
Unidad Didáctica 9. Comportamientos
Unidad Didáctica 9 Comportamientos Contenido 1. Introducción 2. Abrir ventana de navegador 3. Mensaje emergente 4. Validar formularios U.D. 9 Comportamientos 1. Introducción Los comportamientos son acciones
GUÍA RÁPIDA PARA KOMPOZER
Configuración inicial GUÍA RÁPIDA PARA KOMPOZER Menú Herramientas > Preferencias > General. Desactivar la casilla: Usar estilos CSS en lugar de aytributos y elementos HTML. Menú Herramientas > Preferencias
Hojas de estilo. CI-2413 Desarrollo de aplicaciones para Internet Prof. Braulio José Solano Rojas ECCI, UCR
Hojas de estilo CI-2413 Desarrollo de aplicaciones para Internet Prof. Braulio José Solano Rojas ECCI, UCR Hojas de estilo Las hojas de estilo son un gran avance para los diseñadores, ya que expanden su
3. CREAR FORMULARIOS 3.2. APLICAR OPCIONES DE DISEÑO DE FORMULARIOS
3. CREAR FORMULARIOS 3.2. APLICAR OPCIONES DE DISEÑO DE FORMULARIOS En este punto nos familiarizaremos con otros comandos y opciones de la ficha Diseño en Herramientas de presentación de formulario o Herramientas
4.1 COMBINAR CORRESPONDENCIA.
4.1 COMBINAR CORRESPONDENCIA. COMBINAR CORRESPONDENCIA Así es la ficha Correspondencia (véase la figura4.1) con ella podrá configurar y ejecutar una operación de combinación de correspondencia. Figura
H&O SYSTEM S.A.C. Consultores en Sistemas de Información. Calle Viña Tovar Nº 173 Urb. Los Jardines de Surco Santiago de Surco
H&O SYSTEM S.A.C Consultores en Sistemas de Información Calle Viña Tovar Nº 173 Urb. Los Jardines de Surco Santiago de Surco Central Telefónica: 719 7870 / 719 7873 / 798 8496 e - mail: administrador@hyosystem.com
HTML Introducción. 2. Nuevos Conceptos
HTML 5 1. Introducción HTML5 es el lenguaje de etiquetas que permite diseñar documentos web estáticos la cual ofrece (a diferencia de las versiones anteriores) un conjunto de funciones que permitirá dar
TRABAJANDO CON KOMPOZER
Taller Diseño de una web docente con software libre: ficheros html. Nivel Introductorio. TRABAJANDO CON KOMPOZER Rosa Mª Bernal Galindo rosabg@um.es José Miguel Zamarro Minguell jmz@um.es Universidad de
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