Nociones basicas de HTML
|
|
|
- Laura Torres Olivera
- hace 8 años
- Vistas:
Transcripción
1 Nociones basicas de HTML Para comprender lo que veremos mas adelante es necesario tener conocimientos basicos de informatica e Internet en entorno Windows. Para hacer los ejercicios basta con un Navegador y el Block de Notas de Windows u otro procesador de texto simple. Los ejemplos de codigo HTML estaran resaltados en color azul, y cuando queremos representar el efecto de un codigo en pantalla usaremos un celeste de fondo. HTML se hizo famoso gracias al World Wide Web (WWW), poniendo a disposicion de millones de personas, en todas partes del mundo, informacion y documentos de todo tipo, que contienen imagenes, sonidos y enlaces a otros documentos, asi como tambien muchisima informacion. Indice: Introduccion Estructura de un documento html Algunos tag muy usados Forma de textos Fondos de pagina Listas Enlaces o Links Imagenes Tablas Frames o Marcos HTML significa Hypertext Markup Languaje, o lenguaje de marcas de hipertexto. Los ficheros htm(paginas web) son ficheros de texto, y la forma en que este texto aparece en pantalla viene definida por un conjunto de marcas o "tags" La especificacion de estos tags la decide un organismo internacional, aunque ultimamente algunos fabricantes implementan nuevas capacidades a sus navegadores que no son compatibles con el resto. El Navegador distingue a los tags del resto del texto porque van dentro de los simbolos: <..>. Por ejemplo la secuencia <i>hola<i> produce en pantalla hola: El tag <i> indica que el texto debe inclinarse, y para cerrar el tag escribimos </i> Existen muchos tags, pero solo vamos a ver los basicos. Para crear las paginas html solo hace falta un procesador de textos. Ultimamente es posible hacer documentos htm desde programas como Word o Excel, sin embargo, en estas paginas solo usaremos el Block de Notas de Windows, asi tendremos un control total sobre el codigo generado.
2 Un documento html esta dividido en cabecera (HEAD) y cuerpo (BODY). La cabecera tiene informacion sobre el documento, como el titulo, y el cuerpo es donde va el contenido. Podemos verlo sencillamente asi: <html> <head> <TITLE>Nuestra primera pagina</title> </head> <body> <H1>Nuestra primera pagina</h1> <P>Este es el primer parrafo </P> <P>Este es el segundo parrafo.</p> </body> </html> Veamos linea por linea: <html>: indica el comienzo del documento html <head>: indica el comienzo de la cabecera <TITLE>Nuestra primera pagina</title>: Comienzo del titulo, el titulo, y final de titulo </head>: Final de la cabecera <body>: comienzo del cuerpo del documento <H1>Nuestra primera pagina</h1>: El tag <H1> indica al navegador que el texto debe estar en negrita y con tamaño de letra grande y deja el cursor al comienzo de la linea siguiente. <P>Este es el primer parrafo </P>: El tag <P> indica principio de parrafo </body>: fin de cuerpo del documento </html>: fin de documento html Hagamos unos cambios en el codigo anterior: <html> <head> <TITLE>Nuestra primera pagina</title> </head> <body> <center> <H1>Nuestra primera pagina</h1> <hr width=200> </center> <P>Este es el primer parrafo </P> <P>Este es el segundo parrafo.</p> </body> </html> Agregamos dos tags nuevos: <center>: Por defecto el texto se alinea siempre a la izquierda. Con este tag le decimos al navegador que todos los elementos entre <center> y </center> deben estar centrados en la pantalla. <hr>: sirve para dibujar una linea y coloca el cursor al comienzo de la linea siguiente. Vemos que este tag tiene un modificador o parametro, width=200, que indica que la linea debe tener una longitud de 200 pixels.
3 Casi todos los tags tienen varios parametros que alteran la forma en que el navegador dibuja la pagina. En esta pagina vamos a ver los tag mas usados para dar forma al texto: <b>: Sirve para poner en negrita. Hay que cerrar con </b>. <i>: Para inclinar el texto. Se cierra con </i>. <br>: Coloca el cursor al comienzo de la linea. Hay que diferenciarlo del tag <p>. <p>: Tag de parrafo: Hace un retorno de carro y ademas añade una linea en blanco. Admite parametros: o align="": alinea el texto dentro del parrafo. Por defecto se alinea a la izquierda, y los valores admitidos (dentro de las comillas) son : center, right, left y justify. <font>: Cada navegador usa por defecto un tipo y tamaño de letra determinado. Netscape y Explorer usan Times New Roman, aunque pueden variar en Apple o Unix. Si queremos usar otros tipos de letra usaremos este tag, que admite varios parametros: o face="": tipo de letra: podemos usar cualquiera que tengamos instalada, pero hay que tener en cuenta que no todo el mundo tiene instalados los mismos tipos de letra que nosotros. Algunos tipos muy usados son: Arial, Courier, Verdana. o color="": color: Los navegadores reconocen algunos colores predefinidos, como:black, red, white, etc... Para mas exactitud hay que usar la notacion exagesimal. Por ejemplo <font color="black"> es lo mismo que <font color="#000000">. o size="": Tamaño: Generalmente suele ser 2. Podemos fijar un tamaño en terminos absolutos, p.ej. <font size="3">, o respecto al tamaño, p.ej. <font size="+1">. Nota: Hay algunas diferencias entre navegadores y plataformas, y no es posible controlar que el texto aparezca siempre igual en todos. <blockquote>: Parrafos indentados: Es necesario cerrarlo con </blockquote> En este texto tenemos ejemplos de todos los tags: <html> <head> <TITLE>Formateo de texto</title> </head> <body> <center> <font face="arial" size="+2">formateo de texto</font> <hr width=200> </center> <P align="center">este es el primer parrafo. Esta centrado y escrito en la letra del navegador. Algunas palabras estan en <B>negrita</B>, y otras en <I>cursiva.</I></P> <P><font face="arial" size="2">en el segundo parrafo toda la letra es Arial y tamaño 2. Esta alineado a la izquierda(por defecto) y coloca el cursor al cominezo de la linea siguiente.<br> Para terminar el parrafo usamos un <font color="#ff0000">color diferente</font></font>.</p> <blockquote><font face="arial" size="3">tercer parrafo. Para finalizar, tenemos un parrafo indentado, con letra Arial y tamaño 3 (un poco mas grande).</font>.</blockquote> </body> </html>
4 Como vimos hasta ahora, el navegador dibuja la pagina con un fondo gris no muy agradable. Por suerte, es posible fijar el fondo con otro color, o usar una imagen de fondo. Fondo de color: Usamos el parametro bgcolor, p.ej <body bgcolor="#ffffff"> Si queremos usar otros colores de fondo, hay que asegurarse de que los textos se leen sin dificultad. Imagen de fondo: Usamos el parametro background="fondo.gif", p.ej <body background="fondo.gif"> Usar imagenes de fondo es un tema complicado. Es muy dificil acertar con una imagen adecuada, y sobre todo hay que dejar de lado los colores chillones. Si la imagen es mas chica que la pantalla, se repetira hasta llenarla completamente. Un buen truco es usar una imagen de altura 5 pixels (o menos), con el consiguiente ahorro de espacio. Por ejemplo: vamos a usar de fondo la imagen: Para ver el resultado en la pagina copiamos el siguiente codigo: <html> <head> <TITLE>Fondos</TITLE> </head> <body background="fondo.gif"> <center> <font face="arial" size="+2">fondos</font> <hr width=200> </center> <P align="center">este es el primer parrafo. Esta centrado y escrito en la letra por defecto del navegador. Algunas palabras estan en <B>negrita</B>, y otras en <I>cursiva.</I></P> </body> </html> Nota: En este caso la imagen debe estar en el mismo directorio que el fichero.htm, para que el navegador pueda encontrarla. Si la imagen esta en otro directorio debemos escribir la ruta correcta. Con todo lo que vimos de HTML hasta ahora ya podriamos saber hacer una lista numerada, p.ej. <P><blockquote>1.Elemento numero 1</blockquote> <blockquote>2.elemento numero 2</blockquote> Este codigo quedaria en pantalla: 1.Elemento numero 1 2.Elemento numero 2 Sin embargo, nos podemos ahorrar todo este codigo, ya que existen unos tags especificos para listas. Tenemos tres tipos de listas: desordenadas, ordenadas y listas de definicion. Listas desordenadas: <UL> <LI> primer elemento <LI> segundo elemento </UL>
5 Toda la lista va entre los tag <UL>(unordered list) y </UL>, y cada elemento se señala tambien con el tag <LI>(list item). El resultado es: primer elemento segundo elemento Listas ordenadas: <OL> <LI> primer elemento <LI> segundo elemento </OL> Toda la lista va entre los tag <OL>(ordered list) y </OL>, y cada elemento se señala tambien con el tag <LI>(list item). El resultado es: 1. primer elemento 2. segundo elemento Listas de definicion: <DL> <DT> primer titulo <DD> primera definicion <DT> segundo titulo <DD> segunda definicion </DL> Toda la lista va entre los tag <DL>(definition list) y </DL>, y los elementos se señalan con los tag <DT>y <DD>. El resultado es: primer titulo primera definicion segundo titulo segunda definicion Por ultimo, podemos insertar listas dentro de otras listas: <OL> <LI> primer elemento lista 1 <UL> <LI> primer elemento lista 2 <LI> segundo elemento lista 2 </UL> <LI> segundo elemento lista 1 </OL> El resultado es: 1. primer elemento lista 1 o primer elemento lista 2 o segundo elemento lista 2 2. segundo elemento lista 1 Los enlaces o "links" son textos o imagenes que al ser pulsados, hacen que el navegador pase a otra pagina. Generalmente estan subrayados y de un color diferente al texto normal.
6 El tag de los enlaces es <a>, con la sintaxis: <A HREF="destino"> titulo </A> El titulo es el texto que aparece subrayado, y el destino es la direccion del documento al que apunta el enlace. Este destino puede ser una direccion completa, p.ej. href=" o un documento en el mismo directorio href="hola.htm" Como ejemplo vamos a analizar el "link" de la parte inferior derecha que nos lleva a la siguiente pagina. El codigo es: <P align="right"><a HREF="cap7.htm">Cap 7: Imagenes</A> El resultado en pantalla esta a la vista... Enlaces internos Podemos usar este tag para hacer enlaces dentro de una misma pagina. Primero marcamos el sitio destino de la pagina con el codigo: <a name="nombre"></a> Y para saltar a ese punto debemos escribir : <A HREF="destino#nombre"> titulo </A> Gracias a las imagenes, la web se ha hecho tan popular, tanto que hoy no se entiende una pagina web sin ellas. En nuestro directorio de trabajo tenemos un pequeño gif llamado "palas.gif", que vamos a usar en los siguientes ejemplos El tag basico que nos permite incluir imagenes es <IMG SRC="palas.gif">, que produce en pantalla: Este tag admite muchos parametros utiles: width, height: con estos parametros le indicamos al navegador las dimensiones del grafico. Es conveniente incluirlos porque asi la pagina aparece en pantalla antes de que lleguen los graficos (que generalmente vienen despues del texto). En nuestro caso, <IMG SRC="palas.gif" width=60 height=53>, produce en pantalla: Tambien podemos poner dimensiones 'falsas', y el navegador alterara las dimensiones de la imagen. Por ejemplo, <IMG SRC="palas.gif" width=200 height=53>, produce en pantalla: border: Este parametro hace que aparezca un borde rodeando la imagen. Por ejemplo, <IMG SRC="palas.gif" width=60 height=53 border=2>, produce en pantalla: alt: Con este parametro podemos incluir un texto para los navegadores que no soportan los graficos. Por ejemplo, <IMG SRC="palas.gif" alt="pagina en construccion" width=60 height=53 border=2>, produce en pantalla:
7 align: Alinea la imagen respecto del texto y puede valer: left, right, top, bottom y middle. Por ejemplo, <IMG SRC="palas.gif" alt="pagina en construccion" width=60 height=53 border=2 align=middle> texto de ejemplo, produce en pantalla: texto de ejemplo hspace, vspace: Separa la imagen horizontal y verticalmente (en pixels y por ambos lados). Por ejemplo, <IMG SRC="palas.gif" alt="pagina en construccion" width=60 height=53 border=2 vspace=10 align=middle hspace=10> texto de ejemplo, produce en pantalla: texto de ejemplo Sobre imagenes se puede decir mucho mas, pero solo vamos a añadir algunos comentarios: Una pagina web en su totalidad (texto y graficos) no deberia sumar mas de 80 Kb (1 minuto de carga aprox. para un modem de bps). Un diseñador de paginas web necesitara un programa de retoque fotografico, como Paint Shop Pro Las imagenes pueden servir como links, p.ej el codigo <a href="palas.htm"><img SRC="palas.gif"></a> pueden servir como links en pantalla. El icono del mouse va a cambiar al pasar por la imagen, y aparecera un borde de color azul rodeandola. Casi siempre que usemos imagenes como enlaces añadiremos border=0 para evitarlo. Las tablas son los elementos mas importantes del HTML. Saber como construirlas es bueno para poder manejar el lenguaje. Vamos a ver el ejemplo con una tabla de 2x2 celdas que vamos a ir modificando sobre la marcha. El codigo para construirla es: <TABLE border=1> <TD>fila1/celda1</TD> <TD>fila1/celda2</TD> <TD><img src="palas.gif" width=60 height=53 border=0></td> <TD></TD> </TABLE> El resultado en la pantalla sera el siguiente: fila1/celda1 fila1/celda2 Tenemos tres tags principales, <TABLE>(inicio y final de tabla),(inicio y final de fila),<td>(inicio y final de celda). Cada uno de los tags admite varios parametros, veamos los basicos: <TABLE> border: Borde de la tabla, generalmente debemos ponerlo a cero. width: Ancho de la tabla. Esta pagina esta toda dentro de una tabla con un ancho de 600 pixels centrada en la pagina.
8 cellpadding: Separacion entre el contenido de las celdas y el borde de la celda. Por defecto es igual a 2 y si lo subimos a 10 el efecto es: fila1/celda1 fila1/celda2 cellspacing: Es la separacion entre las celdas. Es decir que, es igual a 2 y si lo subimos a 10 el efecto es: fila1/celda1 fila1/celda2 bgcolor: Color de fondo. (lo vemos en celeste con la ultima tabla). fila1/celda1 fila1/celda2 <TD> width, height: Altura y ancho de la celda. Vamos a dimensionar la celda superior izquierda. <TABLE border=1> <TD width=100 height=100>fila1/celda1</td> <TD>fila1/celda2</TD> <TD><img src="palas.gif" width=60 height=53 border=0></td> <TD></TD> </TABLE> fila1/celda1 fila1/celda2
9 align, valign: Alineamiento horizontal y vertical del contenido de la celda. Vamos a seguir modificando la celda superior izquierda. <TABLE border=1> <TD width=100 align=right valign=top height=100>fila1/celda1</td> <TD>fila1/celda2</TD> <TD><img src="palas.gif" width=60 height=53 border=0></td> <TD></TD> </TABLE> fila1/celda1 fila1/celda2 bgcolor: Color de la celda. Ponemos en celeste la celda superior izquierda. fila1/celda1 fila1/celda2 rowspan: Con este tag le decimos al navegador que esa celda es tan alta como varias de las otras columnas, es decir, que la celda ocupa varias filas. <TABLE border=1> <TD rowspan=2>fila1/celda1</td> <TD>fila1/celda2</TD> <TD></TD> </TABLE> fila1/celda1 fila1/celda2 colspan: Con este tag le decimos al navegador que esa celda es tan ancha como varias de las otras filas, es decir, que la celda ocupa varias columnas.
10 <TABLE border=1> <TD colspan=2>fila1/celda1</td> <TD><img src="palas.gif" width=60 height=53 border=0></td> <TD></TD> </TABLE> fila1/celda1 Comprender colspan y rowspan es, seguramente lo mas dificil del lenguaje HTML, pero hacer tablas complejas nos permitira distribuir con exactitud los elementos de la pagina. Los frames o marcos se usan para dividir la pantalla en varias zonas independientes, cada una con su propia barra de desplazamiento. Un uso muy comun es en esos sitios que tienen un menu fijo en la parte izquierda de la pagina, y los textos aparecen en la parte derecha. Vamos a crear una pagina de ese tipo, con un menu que ocupe el 15% de la pantalla. Primero tenemos que crear la pagina con la definicion de los frames: Escribimos entonces el siguiente codigo: <HTML> <HEAD> <TITLE>Pagina con frames</title> </HEAD> <FRAMESET COLS="15%, 85%"> <FRAME SRC="menu.htm" NAME="menu"> <FRAME SRC="portada.htm" NAME="contenido"> <NOFRAMES> <BODY> Esta pagina esta pensada para ser vista con frames. <P>Pulsa en el enlace para <A HREF="portada.htm"> entrar</a>. </BODY> </NOFRAMES> </FRAMESET> </HTML> Tenemos varios tag nuevos, que admiten varios parametros: <FRAMESET> Es el tag que define las caracteristicas del conjunto de los frames: Cols, Rows: Podemos definir los frames como columnas o filas, y para indicar su tamaño tenemos varias opciones: o En pixels: Por ejemplo, <FRAMESET COLS="100, 500, *"> Le estamos diciendo al navegador que hay tres frames columna: el primero tiene un ancho de 100 pixels, el segundo, 500, y el tercero debe rellenar el resto de la pagina o En porcentaje: <FRAMESET COLS="15%, 85%"> Dos frames, uno que ocupa el 15% de la pantalla y otro, el 85%. Hay otros atributos, como Frameborder, border, framespacing.
11 <FRAME> Define las caracteristicas de un frame en concreto: SRC: Fichero.htm que debe cargar en el frame. name: Nombre del frame. Muy importante porque se necesita para los enlaces (links). Scrolling: Nos permite decidir si queremos que aparezca la barra deslizadora. Noresize: (Sin valor numerico). Si lo añadimos, el frame no podra redimensionarse con el mouse. <NOFRAMES> Lo que va dentro de este tag aparecera en los navegadores que no soporten frames. Ahora que hemos creado la pagina con las definiciones de los frames, nos faltan crear dos paginas mas: el menu y la portada. menu.htm <HTML> <HEAD> <TITLE> Menu </TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <P><A HREF="portada.htm" TARGET="contenido"> Portada </A> <P><A HREF="pagina1.htm" TARGET="contenido"> Pagina1 </A> </BODY> </HTML> Es simplemente una pagina con dos opciones de menu (dos links), y lo unico que ha cambiado es que el tag <a> del link, tiene el atributo <target="contenido">. La pagina enlazada se abrira en "contenido" que es el frame derecho que hemos definido antes. portada.htm Vamos a guardar dos paginas muy sencillas: portada.htm y pagina1.htm: <HTML> <HEAD> <TITLE> Portada </TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <h1>esto es la portada</h1> </BODY> </HTML> <HTML> <HEAD> <TITLE> pagina 1 </TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <h1>esto es la pagina numero 1</h1> </BODY> </HTML> Los frames tienen varias ventajas e inconvenientes, pero se ha abusado tanto de ellos que ultimamente estan en desuso. En general no se deberia: Nunca usar mas de dos frames en una pagina. Encerrar dentro de un frame un enlace externo. Para que un enlace rompa los frames debemos escribir <target="_top">, o para que se abra en una nueva ventana, <target="_new">.
Curso HTML. Introducción. Estructura de un documento html
Curso HTML. Introducción HTML significa Hypertext Markup Languaje, o lenguaje de marcas de hipertexto. Los ficheros htm (paginas web) son ficheros de texto, y la forma en que este texto aparece en pantalla
TEMA 2. CREAR SITIOS WEB USANDO. Tecnologías de la Información 1ºBachillerato IES Zurbarán (Badajoz)
TEMA 2. CREAR SITIOS WEB USANDO CÓDIGO HTML Tecnologías de la Información 1ºBachillerato IES Zurbarán (Badajoz) Sesión 10 Tablas Introducción Las tablas son posiblemente la manera más clara de organizar
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
ELABORADO POR: BRENDA PATRICIA GONZALEZ MANRIQUEZ
CECYTEM PLANTEL NICOLAS ROMERO II Manual para crear páginas web en HTML GRUPO: 301 ELABORADO POR: BRENDA PATRICIA GONZALEZ MANRIQUEZ HTML (HyperText Markup Language - Lenguaje de Marca de Hipertextos)
Imágenes y objetos IMÁGENES
IMÁGENES Y OBJETOS Imágenes y objetos 2 IMÁGENES Uno de los elementos más vistosos e importantes de las páginas web. Su introducción puede explicar de manera más fácil y agradable nuestra información al
Prácticas H T M L U.A.C.M COMPUTACIÓN II
Prácticas H T M L U.A.C.M COMPUTACIÓN II M a r c o s Práctica VI HTML Básico El primer objetivo de esta práctica es familiarizarse con el uso de los marcos y posteriormente ubicar la forma de como podemos
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
MICROSOFT WORD 2007 AVANZADO. Unidad Didáctica Nº 1
MICROSOFT WORD 2007 AVANZADO Unidad Didáctica Nº 1 I Tablas A) Explicación conceptual y de uso de una tabla B) Creación de tablas C) Trabajo con tablas D) Formato de las tablas Ejercicio de Repaso Portal
para jóvenes programadores
Manual de Kompozer para jóvenes programadores Por Angel Pablo Hinojosa Gutiérrez Para la Oficina de Software Libre de la Universidad de Granada Copyright 2010: Angel Pablo Hinojosa Gutiérrez El Manual
Etiquetas Básicas (Estructura HTML) Etiquetas Atributos Valores Descripción. Formato de Presentación Etiquetas Atributos Valores Descripción
Etiquetas Básicas (Estructura HTML) Inicio y final del documento html text link alink vlink topmargin (IE) leftmargin (IE) marginheight margin
Para crear una lista como la anterior, primero escribe la información, y después selecciona el texto y aplícale el formato de viñetas.
Módulo 3 Herramientas de Cómputo Listas, tabulaciones, columnas y cuadros de texto Listas En muchas ocasiones es necesario que enumeres diferentes elementos en tus documentos. Word no sólo reconoce números
Hacer una página web con Kompozer
Hacer una página web con Kompozer INTRODUCCIÓN Qué es Kompozer? es un editor de páginas web gratuito, con el que podemos crear las mismas de forma intuitiva sin tener que utilizar el lenguaje html (lenguaje
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
Manual de usuario de Windows Live Writer
Manual de usuario de Windows Live Writer Índice 0.- Introducción. 3 1.- Descarga e Instalación. 4 2.- Conexión a un blog. 7 3.- Interfaz de Windows Live Writer. 12 4.- Creación de un Post. 13 5.- Creación
La pestaña Inicio contiene las operaciones más comunes sobre copiar, cortar y pegar, además de las operaciones de Fuente, Párrafo, Estilo y Edición.
Microsoft Word Microsoft Word es actualmente (2009) el procesador de textos líder en el mundo gracias a sus 500 millones de usuarios y sus 25 años de edad. Pero hoy en día, otras soluciones basadas en
Apuntes básicos de HTML I.E.S. Pintor José María Fernández
Manual Básico de HTML Este manual lo he realizado con la intención de servir como primer contacto con el lenguaje HTML (Hyper Text Markup Language), que es el que se utiliza para la creación de páginas
INSTRUCTIVO PARA LA CREACIÓN DE PÓSTER DIGITAL CON PowerPoint Versión 2010
INSTRUCTIVO PARA LA CREACIÓN DE PÓSTER DIGITAL CON PowerPoint Versión 2010 Abrir el programa PowerPoint desde el menú INICIO TODOS LOS PROGRAMAS MICROSOFT OFFICE MICROSOFT OFFICE POWERPOINT (Fig. 1) (Fig.
Creando un Sitio Web personal.
Creando un Sitio Web personal. FrontPage Express FrontPage Express de Microsoft es un sencillo editor htm 1 l que venía instalado por defecto con Windows 98 o con el Internet Explorer 4 para Windows 95.
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,
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
MANUAL DE USUARIO CMS- PLONE www.trabajo.gob.hn
MANUAL DE USUARIO CMS- PLONE www.trabajo.gob.hn Tegucigalpa M. D. C., Junio de 2009 Que es un CMS Un sistema de administración de contenido (CMS por sus siglas en ingles) es un programa para organizar
Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver
UNIVERSIDAD CARLOS III DE MADRID. ESCUELA DE TURISMO. Informática aplicada al sector turístico Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver En esta práctica guiada vamos a ver
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
CONCEPTOS BÁSICOS PARA EL DISEÑO DE PAGINAS WEB
COLEGIO AGUSTINIANO CIUDAD SALITRE AREA DE TECNOLOGÍA E INFORMATICA GUIA DE APOYO PRIMER BIMESTRE GRADO UNDECIMO CONCEPTOS BÁSICOS PARA EL DISEÑO DE PAGINAS WEB UNIDAD TEMÁTICA: INICIANDO CON HTML Y DREAMWEAVER
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
Editor de textos para Drupal: TinyMCE
Editor de textos para Drupal: TinyMCE Cuando vayamos a editar el texto de una página, normalmente nos encontraremos con un editor de textos, similar a Word, pero para la web. Donde podamos usarlo encontraremos
Instituto Mar de Cortés Elaborar Documentos en Procesador de Texto
Instituto Mar de Cortés Elaborar Documentos en Procesador de Texto Configurar página Cuando estamos escribiendo en un documento Word es como si lo hiciéramos en una hoja de papel que luego puede ser impresa.
Módulo I - Word. Iniciar Word... 2. Finalizar Word... 3. Definición de elementos de pantalla... 4. Escribir texto en un documento... 5. El cursor...
Módulo I - Word Índice Iniciar Word... 2 Finalizar Word... 3 Definición de elementos de pantalla... 4 Escribir texto en un documento... 5 El cursor... 5 Control de párrafos... 5 Nuevos párrafos... 5 Abrir
Sesión No. 4. Contextualización INFORMÁTICA 1. Nombre: Procesador de Texto
INFORMÁTICA INFORMÁTICA 1 Sesión No. 4 Nombre: Procesador de Texto Contextualización La semana anterior revisamos los comandos que ofrece Word para el formato del texto, la configuración de la página,
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
TEMA 5: HOJAS DE CÁLCULO. Edición de hojas de cálculo con OpenOffice Calc
TEMA 5: HOJAS DE CÁLCULO Edición de hojas de cálculo con OpenOffice Calc Qué vamos a ver? Qué es una hoja de cálculo y para qué sirve El entorno de trabajo de OpenOffice Calc Edición básica de hojas de
H T M L. Marquesinas y Listas U.A.C.M COMPUTACIÓN II. Prácticas
Prácticas H T M L U.A.C.M COMPUTACIÓN II Marquesinas y Listas Práctica VII HTML Básico El objetivo es trabajar con dos elementos que nos darán un mejor aspecto a la información que se visualice en nuestra
Introducción: páginas web y navegadores
IB14 Informática Aplicada a la Construcción Creación de páginas web con HTML Introducción: páginas web y navegadores Una página web, pese a la gran cantidad de colores, imágenes e información que puede
Guía de Aprendizaje No. 1
MICROSOFT WORD Fundamentos básicos, ejecutar Word, su ventana y sus barras de herramientas Objetivos de la Guía de Aprendizaje No. 1 Obtener fundamentos básicos sobre Procesador de Texto Microsoft Word
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
Luis José Sánchez González INTRODUCCIÓN
CURSO BÁSICO DE HTML INTRODUCCIÓN Para crear una página web podemos optar por una de los siguientes métodos: a) Utilizar una herramienta de diseño web como Screem, Blue Fish, Front Page o incluso un procesador
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
Laboratorio 6. Creación de sitios Web - Dreamweaver
UNIVERSIDAD CARLOS III DE MADRID. ESCUELA DE TURISMO. Informática aplicada al sector turístico Laboratorio 6. Creación de sitios Web - Dreamweaver El objetivo de este laboratorio es aprender a crear sitios
AGREGAR COMPONENTES ADICIONALES DE WINDOWS
INSTALACIÓN DE IIS EN WINDOWS XP El sistema está desarrollado para ejecutarse bajo la plataforma IIS de Windows XP. Por esta razón, incluimos la instalación de IIS (Servidor de Web) para la correcta ejecución
Manual de Front Page 2003
Manual de Front Page 2003 FREDDY OSWALDO OVALLES PABÓN Tutor Virtual CEV SENA NDS Guía Rápida para el Desarrollo de un Archivo de paquete o Material en Línea en el Área de Contenido de Materiales del Curso
A continuación, se detalla el uso de los accesorios más comunes:
4 Los Accesorios de Windows I El sistema operativo Windows incorpora una serie de programas de utilidad general, de forma que pueda trabajar con su ordenador sin tener que recurrir a programas comerciales.
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
HTML. HyperText Markup Language (Lenguaje de Marcas de Hipertexto)
HTML HyperText Markup Language (Lenguaje de Marcas de Hipertexto) Introducción Un lenguaje de marcas es una forma de codificar junto con el texto, incorporando etiquetas que contienen información adicional
Tutorial de FrontPage
Tutorial de FrontPage Con este tutorial vamos a hacer una presentación, utilizando el programa FrontPage, similar a la que se ha elaborado con el programa Neobook. FrontPage 2000 es un programa que se
Combinar correspondencia (I)
Combinar correspondencia (I) Mediante la opción Combinar correspondencia Word2007 nos permite incluir en un documento, datos almacenados en otro sitio. De esta forma podremos obtener copias de un mismo
CURSO DE INTRODUCCIÓN AL WORD
CURSO DE INTRODUCCIÓN AL WORD 1. INTRODUCCIÓN 2. PRIMER DOCUMENTO 3. UN EJEMPLO 4. TABLAS 5. FORMATO DE PAGINAS Y COLUMNAS 6. ORTOGRAFÍA, GRAMÁTICA Y SINÓNIMOS 7. WORDART 8. IMPRIMIR UN DOCUMENTO INTRODUCCIÓN
Adaptación al NPGC. Introducción. NPGC.doc. Qué cambios hay en el NPGC? Telf.: 93.410.92.92 Fax.: 93.419.86.49 e-mail:atcliente@websie.
Adaptación al NPGC Introducción Nexus 620, ya recoge el Nuevo Plan General Contable, que entrará en vigor el 1 de Enero de 2008. Este documento mostrará que debemos hacer a partir de esa fecha, según nuestra
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
HTML. guía rápida de referencia. Autor: Jorge Sánchez (www.jorgesanchez.net) año 2003
HTML guía rápida de referencia Autor: Jorge Sánchez (www.jorgesanchez.net) año 2003 Basado en la normativa sobre HTML4 disponible en: http://www.w3.org/tr/html4/ Jorge Sánchez 2003 índice introducción...
Plataforma e-ducativa Aragonesa. Manual de Administración. Bitácora
Plataforma e-ducativa Aragonesa Manual de Administración Bitácora Í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 Modificar
Uso de Visual C++ Pre-Practica No. 3
Pre-Practica No. 3 Uso de Visual C++ Microsoft Visual C++ 2010 es una versión de Visual Studio específica para el lenguaje de programación C++. Es un entorno de desarrollo muy completo y profesional. Por
1.- MENU DE CONTROL O MENU VENTANA: permite cerrar la ventana cambiarla de tamaño y pasar a otra ventana
EXCEL PRÓLOGO Microsoft Excel es una hoja de cálculo de gran capacidad y fácil uso. Excel no solo es una hoja de calculo, sino también tiene capacidad para diseñar bases de datos (listas) de forma totalmente
Gestor de contenidos de la plataforma web
Gestor de contenidos de la plataforma web 2011 1 de 24 Funcionamiento del gestor de contenidos Acceso Para acceder al la extranet es necesario ir a la dirección web: http://www.tudominio.com/adm e introducir
Diseño de páginas web 2011
Diseño de páginas web 2011 Al finalizar el curso, el alumno será capaz de planificar y diseñar correctamente desde sencillas páginas web hasta completos sitios web. Para ello, se le proporciona primero
Práctica 3: Introducción a Word
Departament d Enginyeria i Ciència dels Computadors Práctica 3: Introducción a Word B12. Informática I. Curso 2001/2002 Profesores: Julio Pacheco Juanjo Murgui Raul Montoliu Mª Carmen Ortiz Octubre 2001
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
Apuntes para hacer páginas Web con FrontPage
1 ASIGNATURA: USOS MATEMÁTICOS DE INTERNET PARA SECUNDARIA Y BACHILLERATO CURSO: Cursos y acciones de postgrado, 2004-2005 PROFESORA: Inés M. Gómez-Chacón CARÁCTER/CRÉDITOS: 3 DEPARTAMENTO: ÁLGEBRA FACULTAD
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
Para iniciarnos en el estudio de este curso necesitamos estar familiarizados con ciertos conceptos generales, entre ellos:
Conceptos básicos de la internet y la web Para iniciarnos en el estudio de este curso necesitamos estar familiarizados con ciertos conceptos generales, entre ellos: Internet: Red mundial de computadoras
Guía N 1: Fundamentos básicos(i)
1 Guía N 1: Fundamentos básicos(i) Objetivos Generales: Ver una breve descripción de las capacidades más comunes de Excel Objetivos específicos: Descripción de los elementos de un libro: Hojas, iconos,
Crea tus Tarjetas de Visita con Word 2007
Crea tus Tarjetas de Visita con Word 2007 Hola Amigos, en este Ejercicio vamos a crear Nuestras Tarjetas de Visita. El Material que necesitaremos será una Impresora de Color y unas cuantas cartulinas de
Tutorial 2: Creación de páginas web con Compozer
Tutorial 2: Creación de páginas web con Compozer Nota: el propósito del curso no es aprender a elaborar páginas web complejas. Por eso, únicamente vamos a aprender a manejar siete procedimientos: Crear
Bases de datos en Excel
Universidad Complutense de Madrid CURSOS DE FORMACIÓN EN INFORMÁTICA Bases de datos en Excel Hojas de cálculo Tema 5 Bases de datos en Excel Hasta ahora hemos usado Excel básicamente para realizar cálculos
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
Marta Soler Tel: 902 33 12 12 Fax: 93 352 36 14 http://www.interdigital.es acc@interdigital.es TUTORIAL DEL GESTOR DE CONTENIDOS DOTNETNUKE
. Marta Soler Tel: 902 33 12 12 Fax: 93 352 36 14 http://www.interdigital.es acc@interdigital.es TUTORIAL DEL GESTOR DE CONTENIDOS DOTNETNUKE El entorno de trabajo La página tiene como base una plantilla
TEMA 2 WINDOWS XP Lección 4 BLOC DE NOTAS
TEMA 2 WINDOWS XP Lección 4 BLOC DE NOTAS 1) EL PEQUEÑO EDITOR El Bloc de notas de Windows XP es un básico editor de texto con el que podemos escribir anotaciones, de hasta 1024 caracteres por línea y
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
Creación de páginas Web FrontPage
Creación de páginas Web FrontPage 1.- Introducción Las páginas web están basadas en lo que se llama el hipertexto. En el hipertexto no hace falta seguir el documento de forma lineal, sino que se establecen
1 DISEÑO WEB de ANCHO FIJO con 2 COLUMNAS FLOTANTES
Diseño WeB de ancho fijo con 2 columnas flotantes _TIN 1º Bachillerato página 1/5 1 DISEÑO WEB de ANCHO FIJO con 2 COLUMNAS FLOTANTES..1 1.1 Diseños de ancho fijo, elástico y líquido.1 1.2 Diseño de ancho
Internet Information Server
Internet Information Server Internet Information Server (IIS) es el servidor de páginas web avanzado de la plataforma Windows. Se distribuye gratuitamente junto con las versiones de Windows basadas en
Herramientas Informáticas para la Documentación Práctica 1. Introducción al navegador Netscape
Herramientas Informáticas para la Documentación Práctica 1. Introducción al navegador Netscape Introducción y objetivos De modo muy resumido Internet es una red que interconecta redes de ordenadores. Conectándose
Í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
Tutorial 1: Creación de páginas web con Editor HTML de OpenOffice
Tutorial 1: Creación de páginas web con Editor HTML de OpenOffice Nota: el propósito del curso no es aprender a elaborar páginas web complejas. Por eso, únicamente vamos a aprender a manejar ocho procedimientos:
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
Colegio de Ingenieros de Caminos, Canales y Puertos. Manual de Gestión de correo electrónico y SMS
Colegio de Ingenieros de Caminos, Canales y Puertos. Manual de Gestión de correo electrónico y SMS Versión 2.0 3/05/2010 Manual de Gestión de correo electrónico y SMS (v 2.0) 1 GESTOR DE CORREO ELECTRÓNICO
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...
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
3_formato I. NOTA: al pegar unas celdas sobre otras no vacías, se borrará el contenido de estas últimas.
3. Luego se seleccionan las celdas donde se quiere que se sitúen las celdas cortadas. No hace falta seleccionar el rango completo sobre el que se va a pegar, ya que si se selecciona una única celda, Calc
PRÁCTICAS DE GESTIÓN GANADERA:
PRÁCTICAS DE GESTIÓN GANADERA: MANEJO DE HOJA DE CÁCULO (EXCEL) 1. INTRODUCCIÓN AL MANEJO DE EXCEL La pantalla del programa consta de una barra de herramientas principal y de una amplia cuadrícula compuesta
Manual de NVU Capítulo 4: Los enlaces
Manual de NVU Capítulo 4: Los enlaces Pág. 1 Manual de NVU Capítulo 4: Los enlaces Reconocimiento-NoComercial-CompartirIgual 2.5 España Realizado por: Julio Ruiz Palmero (Universidad de Málaga) julioruiz@uma.es
Word. Qué es Office? Cuando se abre el programa, se muestra una pantalla como la siguiente. Manual Microsoft Office 2007 - MS Word
Word Qué es Office? Microsoft Office (MSO) es una suite ofimática creada por la empresa Microsoft. Funciona oficialmente bajo los sistemas operativos Microsoft Windows y Apple Mac OS. Word Microsoft Word
Plantillas Office. Manual de usuario Versión 1.1
Manual de usuario Para comprender y seguir este manual es necesario: Disponer del fichero lasolucion50.exe Asegurarse de trabajar con la versión 5.0.0.7 o superior. Para comprobar que versión esta utilizando
Qué es y para qué sirve Excel2007?
Excel es un programa del tipo Hoja de Cálculo que permite realizar operaciones con números organizados en una cuadrícula. Es útil para realizar desde simples sumas hasta cálculos de préstamos hipotecarios.
Unidad 1. Introducción a HTML (I)
Unidad 1. Introducción a HTML (I) A lo largo de este tema vamos a conocer los conceptos básicos sobre HTML, y cómo se utiliza para crear páginas web. Qué es HTML El HTML (Hyper Text Markup Language) es
CÓMO CREAR NUESTRO CATÁLOGO
CÓMO CREAR NUESTRO CATÁLOGO Mediante la aplicación (http://www.prensasoft.com/programas/conline) podemos crear nuestros propios catálogos. Para crear un catálogo necesitamos: - Varios productos que mostrar,
ESTRUCTURA DE LOS SITIOS DE CATEDRAS
ESTRUCTURA DE LOS SITIOS DE CATEDRAS El de la FCE le enviará el esqueleto vacío del sitio de la cátedra, al cual usted ingresara el contenido de acuerdo a sus necesidades. La tarea principal que tiene
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
Práctica 6 - Página Web
Práctica 6 - Página Web Teoría. Una Página Web es un recurso de información que esta diseñada para la Word Wide Web (Red Mundial) y puede ser vista por medio un Navegador Web. Esta información se encuentra
4.- Composer: Formato de párrafos, títulos y listas
4.- Composer: Formato de párrafos, títulos y listas 4.1 Antes de empezar Vamos a configurar el composer antes de empezar a trabajar con él, para ello nos vamos al menú Editar/Preferencias y seleccionamos
BASES DE DATOS - Microsoft ACCESS 2007-
BASES DE DATOS - Microsoft ACCESS 2007- Una base de datos es un archivo estructurado de datos que nos permite almacenarlos, modificarlos, ordenarlos, generar informes etc., de manera rápida. Un listín
DESCARGA DE CARPETAS DE MENSAJES DE CORREO DESDE EL WEBMAIL A PC S LOCALES
DESCARGA DE CARPETAS DE MENSAJES DE CORREO DESDE EL WEBMAIL A PC S LOCALES 1.- Introducción El objetivo de este documento es la descripción de los pasos a seguir para descargar a nuestros PCs los mensajes
Páginas multimedia Pizarra www.webardora.net
Página donde el usuario tiene un espacio (pizarra) para crear sus propias composiciones con gráficos y textos previamente insertados por el autor; además de poder escribir sus propios textos: PESTAÑA IMÁGENES
Ejercicio 1. Formato de Fuente y Párrafo.
Ejercicio 1 Formato de Fuente y Párrafo. Para realizar este ejercicio, primero inicie Word. De clic en el Menú Inicio, Todos los programas, Microsoft Office y Seleccionamos Microsoft Word 2003. Se abrirá
5. Composer: Publicar sus páginas en la web
5. Composer: Publicar sus páginas en la web Si nuestras páginas existen únicamente en el disco duro local, sólo nosotros podremos navegar por ellas, pero nadie más podrá hacerlo. Composer nos permite publicarlas
TUTORIAL SOBRE CÓMO CREAR Y GESTIONAR UN BLOG CON BLOGGER
TUTORIAL SOBRE CÓMO CREAR Y GESTIONAR UN BLOG CON BLOGGER Existen muchos proveedores de servicios para crear un blog. En nuestro caso se ha decidido crear uno en Blogger, que es, a su vez, donde muchas
MANUAL DE REFERENCIA DE PROGRAMACIÓN HTML
MANUAL DE REFERENCIA DE PROGRAMACIÓN HTML HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con
MINI MANUAL PARA CREAR FORMULARIOS CON PHP Marzo 2007
MINI MANUAL PARA CREAR FORMULARIOS CON PHP Marzo 2007 Servicio de Informática y Comunicaciones Para poder diseñar un formulario y que éste nos envíe los resultados a nuestro correo electrónico, necesitamos
Para aquellos que tengan conocimientos de Access es lo más parecido a una consulta de referencias cruzadas, pero con más interactividad.
Las tablas dinámicas Crear una tabla dinámica Una tabla dinámica consiste en el resumen de un conjunto de datos, atendiendo a varios criterios de agrupación, representado como una tabla de doble entrada
SPIP (v.1.8) Manual para redactores Alfredo Sánchez Alberca (asalber@ceu.es)
SPIP (v.1.8) Manual para redactores Alfredo Sánchez Alberca (asalber@ceu.es) 1. Arquitectura de SPIP SPIP es un sistema para la publicación digital de documentos en un sitio web. Tanto la creación de nuevos