Manual HTML Básico MANUAL HTML BÁSICO. Federico Martín Maglio

Tamaño: px
Comenzar la demostración a partir de la página:

Download "Manual HTML Básico MANUAL HTML BÁSICO. Federico Martín Maglio"

Transcripción

1 1 MANUAL HTML BÁSICO Federico Martín Maglio Para construir una página con el fin de publicarla en Internet, debemos aprender el lenguaje HTML (HyperText Markup Language). Se dirá que es muy fácil construir páginas WEB hoy en día con los programas que se encuentran a disposición de todos. Pero si bien esto es cierto, es necesario conocer lo mínimo del HTML porque siempre se nos presenta la situación de que el resultado final, logrado con programas que generan el código automáticamente, no es el esperado. En tal situación se hace necesario retocar el código manualmente con un procesador de texto puro como el Block de Notas que viene con Windows. Para poder hacerlo no hay otra salida que conocerlo. El HTML se basa en etiquetar lo que se quiere mostrar en la página; estas etiquetas le dicen al programa navegador de Internet cómo debe mostrar en pantalla la información que contiene. A raíz de su forma de funcionamiento, podemos decir que trabajar en HTML no significa programar ya que el resultado no se compila ni se ejecuta independientemente. Para trabajar con HTML se necesitan programas. Estos pueden ser simples o más complejos y depende de lo que se quiera lograr. Lo básico que se necesita para la realización de una página Web es: Necesitamos... Un editor de texto... para escribir el código y guardarlo como.htm o.html (puede ser el Block de Notas de Windows). Un navegador de internet... para ver cómo está quedando la página a medida que se va construyendo. Cuando es necesario realizar tareas más específicas, se usarán otros programas: Usaremos como mínimo... Un editor de textos. Un editor de imágenes... Paint Shop Pro. Un editor de imágenes en movimiento... Gif Animator. Un editor de applets de Java para botones... 1 Cool Button Tool o el Ulead Button.Applet. Un editor de applets de Java para carteles... Applet Marquee Wizard.

2 2 CONSTRUYENDO UNA PÁGINA BÁSICA: Una página de WEB se construye en lenguaje HTML. Su principio esencial es el uso de etiquetas (tags en inglés). Por lo general, hay una etiqueta para abrir y otra para cerrar (a ésta se le agrega delante la barra /). Debemos tener en cuenta que no todas las etiquetas necesitan de otra para cerrar una orden. Las etiquetas funcionan de la siguiente manera... <XXX> Este es el inicio de una etiqueta. </XXX> Este es el cierre de una etiqueta. Todo documento para la WEB se abre y se cierra con las siguientes etiquetas... (Aquí va todo el documento) Todo documento HTML necesita un par de etiquetas HEAD o encabezado que será la información de la página que no se verá directamente en el navegador... Dentro del encabezado debemos poner las etiquetas para el título de nuestra página WEB. Este debe ser corto y descriptivo de nuestra página ya que será lo que se vea cuando alguien guarda su dirección como favorito... El contenido de la página (que es toda la información que queremos mostrar en la WEB) irá entre las etiquetas <body> y </body> que se colocan luego de cerrar el encabezado y antes de finalizar el documento.

3 3 Dentro de las etiquetas que abren y cierran se introduce la información del documento. Ahora pondremos el título a la página... Mi página de WEB Ahora guarde este documento en un directorio o carpeta que se haya creado a tal efecto. Se le da un nombre y la extensión correspondiente para que pueda ser reconocida por los navegadores. Lo guardamos como primera.html o primera.htm (si estamos en un sistema operativo de hasta 8 caracteres para el nombre y 3 caracteres para la extensión). Lo que acabamos de crear es un esqueleto de una página HTML. Todos los documentos HTML requieren que tengas por lo menos estas etiquetas en él, y dónde está el título? El título se ve en la parte de arriba del navegador. Dentro del cuerpo, entre las etiquetas y, está todo lo que queremos que aparezca en la pantalla principal (texto, imágenes, etc.).

4 4 Por tanto, la estructura queda de esta manera: Mi página de WEB [Aquí van las etiquetas que visualizan la página] Vemos un ejemplo introduciendo un texto, guardamos el archivo y lo visualizamos con el navegador... Mi página de WEB Hola, soy yo. Estoy haciendo una página WEB. Si mi intención es dar formatos especiales al texto, entonces debemos utilizar etiquetas específicas. Veremos algunas... La etiqueta <P> separa el texto en diferentes párrafos. La etiqueta <BR> baja un renglón. Mi página de WEB Hola, soy yo. Estoy haciendo una página WEB. <P> Aquí paso a otro párrafo. <BR> Aquí bajo un renglón.

5 5 El texto puede tener unas cabeceras o títulos, comprendidos entre las etiquetas <H1> y </H1>, <H2> y </H2>, etc. (hasta el número 6), siendo el número indicativo del tamaño. El tamaño mayor es el correspondiente al número 1. Veremos cómo queda... Mi página de WEB <H1>Título más grande con H1</H1> <H2>Título menos grande con H2</H2> <H3>Título un poco menos grande con H3</H3> <H4>Título en letra normal con H4</H4> <H5>Título en letra chica con H5</H5> <H6>Título en letra bien chica con H6</H6> Hola, soy yo. Estoy haciendo una página WEB. <P> Aquí paso a otro párrafo. <BR> Aquí bajo un renglón. Al texto lo puedo alinear el texto en el centro con las etiquetas... <CENTER> </CENTER> presenta el texto centrado en la página. Lo aplicamos en un ejemplo... Mi página de WEB <H1>Título más grande con H1</H1> <H2>Título menos grande con H2</H2> <H3>Título un poco menos grande con H3</H3> <H4>Título en letra normal con H4</H4> <H5>Título en letra chica con H5</H5> <H6>Título en letra bien chica con H6</H6> Hola, soy yo. Estoy haciendo una página WEB. <P> Aquí paso a otro párrafo.

6 6 <BR> Aquí bajo un renglón. <P> <CENTER> Este texto está centrado </CENTER> También podemos utilizar líneas o separadores que se consiguen con la etiqueta <HR> (no existe la correspondiente de cierre). Con ella se obtiene una raya horizontal tan ancha como la pantalla, y con la apariencia de estar embutida sobre el fondo. Puedo decirle que no ocupe toda la pantalla sino una parte indicándole qué porcentaje de ella agregándole WIDTH=XX% y hasta puedo cambiarle el ancho agregándole a la etiqueta SIZE=X como se puede observar a continuación: Mi página de WEB <H1>Título más grande con H1</H1> <H2>Título menos grande con H2</H2> <H3>Título un poco menos grande con H3</H3> <H4>Título en letra normal con H4</H4> <H5>Título en letra chica con H5</H5> <H6>Título en letra bien chica con H6</H6> Hola, soy yo. Estoy haciendo una página WEB. <P> Aquí paso a otro párrafo. <BR> Aquí bajo un renglón. <P> <CENTER> Este texto está centrado </CENTER> <HR width=10% SIZE=1> <HR width=30% SIZE=4> <HR width=100% SIZE=8>

7 7 DANDO FORMA AL TEXTO: Debemos tener en cuenta que iniciamos otra página, en este caso, la segunda y por ello, creamos un archivo nuevo que nombraremos segunda.htm o segunda.html. Para destacar alguna parte del texto se pueden usar: <B> y </B> para poner algo en negrita (bold). <I> y </I> para poner algo en cursiva (italic). <PRE> y </PRE> para poner texto preformateado, es decir, aparecerá tal cual uno lo escribe (respetará los espacios en blanco y los enter para bajar líneas). La fuente que usará es de espacio fijo. Vemos un ejemplo: Mi segunda página de WEB <B>Estas palabras están en negrita</b> <P> <I>Estas palabras están en itálica</i> <P> <PRE>Este texto está preformateado y esto va luego de 10 espacios en blanco. El texto actual fue escrito después de dar un enter</pre> Las listas: Si necesitamos presentar las cosas en forma de listas podemos elegir entre tres formas Listas desordenadas (no numeradas) 2. Listas ordenadas (numeradas) 3. Listas de definición. Listas desordenadas (Unordered List): Sirven para presentar cosas que no necesitan ir precedidas por un número. Tipeamos lo siguiente en el documento segundo.* a continuación del trabajo anterior:

8 8 Lista desordenada: <UL> <LI> Monitor. <LI> Placa de sonido. <LI> Teclado. <LI> Etc. </UL> Listas ordenadas (Ordered List): Sirven para presentar cosas en un orden numerado. Tipeamos lo siguiente a continuación del trabajo anterior: Lista ordenada: <OL> <LI> Monitor. <LI> Placa de sonido. <LI> Teclado. <LI> Etc. </OL> Listas de definición: Sirven para presentar definiciones de términos o trabajos similares. A diferencia de las que hemos visto, cada renglón de la lista tiene dos partes: 1. El nombre de la cosa a definir, que se consigue con la etiqueta <DT> (definition term). 2. La definición de dicha cosa, que se consigue con la etiqueta <DD> (definition definition). Lista de definición: <DL> <DT> Monitor: <DD> Hardware de la computadora cuya función es destruir ojos. <DT> Placa de sonido: <DD> Rompe la tranquilidad familiar. <DT> Teclado: <DD> Destructor de uñas. </DL>

9 9 Comentarios no visibles en la pantalla: A veces es muy útil escribir comentarios en el documento HTML sobre el código que escribimos, que nos pueden servir para recordar posteriormente sobre lo que hicimos, y que no queremos que se vea en pantalla. Esto se consigue encerrando dichos comentarios entre estos dos símbolos: <!-- y --> Ejemplo: Mi segunda página de WEB <!-- Esto es un comentario al código que no se verá en pantalla --> El texto que figura como comentario en este código no lo vemos en pantalla. <P> <B>Estas palabras están en negrita</b> <P> <I>Estas palabras están en itálica</i> EJERCITACIÓN: En el documento creado agregar Un título de tipo 2 que diga "CAPÍTULO 2" que esté centrado. 2. Agregar a cada ejercicio realizado una línea que lo divida del otro. 3. Un comentario a cada ejercicio que indique qué es lo que sigue en el código. NOTA: Para la clase siguiente necesitaremos un texto de unas 2 o 3 páginas ya grabado en un disquete.

10 10 ENLACES CON OTRAS PÁGINAS: La característica que más ha influido en el espectacular éxito de la WEB (o tela de araña) ha sido, aparte la de su carácter multimedia, la posibilidad de unir los distintos documentos de un mismo sitio o de otro lugar del mundo por medio de enlaces hipertexto. La llamada a otro documento se realiza con la etiqueta <A HREF> y </A> Estructura de los enlaces: <A HREF="xxx"> yyy </A> xxx es el destino del enlace (va entre comillas). yyy es el texto indicativo del enlace y que en la pantalla se verá de un color especial y, generalmente, subrayado. Tipos de enlaces: 1. Enlaces dentro de la misma página. 2. Enlaces con otra página nuestra (en el mismo sitio). 3. Enlaces con una página fuera de nuestro sitio. 4. Enlaces con una dirección de correo electrónico. 1. Enlaces dentro de la misma página: En el caso de documentos (o páginas) muy extensos es muy útil poder dar un salto de una parte a otra. En este caso, lo que antes hemos llamado XXX, es decir, el destino del enlace, se sustituye por #marca (la palabra marca puede ser cualquier palabra que queramos). Lo que hemos llamado antes YYY es la palabra (o palabras) que aparecerán en la pantalla en color (en forma de hipertexto). Su estructura es... <A HREF="#marca"> YYY </A> Y en el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta: <A NAME="marca"> </A> Si quiero saltar desde aquí a la pantalla final, pongo la siguiente etiqueta: <A HREF="#final"> Pulsa para ir al final</a> Y en el final del documento he puesto esta otra etiqueta: <A NAME="final"> </A>

11 11 Lo vemos en un ejemplo práctico iniciando nuestra tercer página y lo llamamos tercera.htm o tercera.html. AQUÍ INSERTAMOS UN TEXTO LARGO DE UNAS 2 O 3 PÁGINAS. Antes del comienzo del texto ponemos... <A HREF="#medio"> Pulsa para ir al medio del documento</a>...y en la parte central del documento ponemos... <A NAME="medio"> </A> 2. Enlaces con otra página nuestra: Actualmente tenemos 3 documentos. Lo que haremos ahora es enlazarlas entre sí para poder movernos por ellas a nuestro gusto. Lo primero que haremos es enlazar esta página, tercera.htm con la página creada en los ejemplos de los capítulos anteriores y que hemos llamado primera.htm y segunda.htm. Al final del documento y arriba de la etiqueta agregamos... <A HREF="primera.htm"> Ejercicios del capítulo 1 </A> <A HREF="segunda.htm"> Ejercicios del capítulo 2 </A> En los documentos primera.htm y segunda.htm hacemos lo mismo pero teniendo cuidado de cambiarle los nombres de las páginas según corresponda y cuidando que se muestren cada uno de los enlaces en diferentes renglones y que quede estéticamente bien en la página. Ya tenemos armado nuestro primer sitio de Internet... FELICIDADES. Complicando más el asunto, crearemos un enlace desde la primera página hacia el medio del documento de la tercera página (recordemos que ya tiene una marca llamada "#medio"). Lo haremos uniendo la llamada a la página más la llamada a la marca (todo junto). Entonces, quedará así... <A HREF="tercera.htm#medio"> Ir al medio del texto de la página tercera </A>

12 12 Si son páginas de diferentes subdirectorios?: Estoy poniendo enlaces a páginas que se encuentran dentro del mismo subdirectorio. Pero si quiero organizar mi sitio con diferentes directorios (haciendo un árbol) entonces debo indicar el camino correspondiente. Si la página a la que quiero saltar está en el subdirectorio "ejem", entonces en la etiqueta tendría que haber puesto "ejem/tercera.htm". Pero si quiero saltar desde una página a otra que está en un directorio anterior, en la etiqueta tendría que haber puesto "../primera.html". Esos dos puntos hace que se dirija al directorio anterior (como CD en el D.O.S.). Entonces... Para subir un directorio: "ejem/tercera.htm" Para bajar un directorio: "../primera.htm" 3. Enlaces con una página fuera de nuestro sistema Si queremos enlazar con una página que esté fuera de nuestro sitio (es decir, que esté en un servidor distinto al que aloja nuestra página), es necesario conocer su dirección completa, o URL (Uniform Resource Locator). El URL podría ser, además de la dirección de una página del Web, una dirección de ftp, gopher, etc. Una vez conocida la dirección (o URL), lo colocamos en vez de lo que hemos llamado anteriormente xxx (el destino del enlace). Si queremos enlazar con la página de Microsoft la etiqueta sería la siguiente: <A HREF="http://www.microsoft.com/"> Página de Microsoft </A> Esta orden la ponemos al final de la página primera.htm, la ejecutamos y hacemos click en el enlace de Microsoft... qué ocurre? 4. Enlaces con una dirección de correo electrónico Para que el navegador reconozca que es un enlace a una dirección de correo y, al pulsar sobre ella me abra el programa que me permita enviarlo, debemos introducir la orden MAILTO: antes de la dirección. Para enviarme un correo a mí la orden sería: <A Enviar correo a Martín </A> Introducimos la orden al final de la página primera.htm, ejecutamos y hacemos un clic sobre la llamada... qué ocurre?

13 13 IMÁGENES: Aquí una observación... Trabajaremos únicamente con imágenes de tipo.gif y.jpg que son las más difundidas en la WEB. La etiqueta que nos sirve para incluir imágenes en páginas WEB es muy similar a la de enlaces a otras páginas, que hemos visto en el capítulo anterior. La diferencia es que, en lugar de indicar al programa navegador el nombre y la localización de un documento de texto HTML para que lo cargue, se le indica el nombre y la localización de un fichero que contiene la imagen que queremos poner. La etiqueta es IMG SRC (image source o fuente de la imagen). La llamada quedará así... <IMG SRC="imagen1.jpg"> Abrimos la página primera.htm e introducimos el código para llamar a la imagen. Si la imagen estuviese en otro directorio o en otro sitio, antes del nombre de la misma se debe indicar su ubicación. Dentro de la etiqueta se pueden añadir otros comandos, tal como ALT (este permite ver una descripción de la imagen que se carga). Es útil para cuando la imagen tarda en cargarse y el visitante, al señalarla con el ratón, puede ir teniendo una idea de su contenido. <IMG SRC="imagen1.jpg" ALT="descripción"> Cambiamos "descripción" por lo que corresponda según la imagen que tengan. Un aspecto muy importante a tener en cuenta es el tamaño de las imágenes en bytes, porque una imagen que sea muy grande o "pesada" hará el acceso a nuestra página muy tedioso y puede ocasionar que el visitante desista de visitarla. Alineamiento de titulares o descripciones de la imagen: Si queremos que cada imagen tenga una descripción visible que explique de qué se trata, podemos introducir el texto a continuación de la llamada de la imagen. Tenemos tres opciones a saber... <IMG SRC="imagen1.jpg" ALT="descripción" ALIGN=TOP> Titular alineado arriba <IMG SRC="imagen1.jpg" ALT="descripción" ALIGN=MIDDLE> Titular alineado en medio <IMG SRC="imagen1.jpg" ALT="descripción" ALIGN=BOTTOM> Titular alineado abajo También podemos hacer que la misma imagen sea utilizada como enlace hacia otra página. Primeramente haremos el ejemplo con el archivo "imagen2.jpg". Ponemos la dirección de la página en la llamada de enlace y, al terminar tal orden, ponemos la imagen y luego su descripción. Finalmente cerramos con </A>

14 14 <A HREF="segunda.htm"><IMG SRC="imagen2.jpg" ALT="descripción"></A> Si hacemos un clic sobre la imagen veremos que nos redirecciona hacia la página señalada. La imagen aparecerá rodeada de un rectángulo. Si queremos que el mismo desaparezca, entonces le decimos que el BORDE debe ser igual a 0. <A HREF="segunda.htm"><IMG SRC="imagen2.jpg" ALT="descripción" BORDER=0></A> EJERCITACIÓN: 1. Creamos un documento nuevo al que llamaremos index.htm. 2. Ponemos un título de tipo 1 centrado. 3. Separamos con una línea de espesor 5 y que ocupe el 70 % de la página. 4. Ponemos llamadas a los documentos primera.htm, segunda.htm y tercera.htm. 5. Ponemos una llamada al correo electrónico del Instituto. 6. Ponemos llamadas para las siguientes organizaciones: O.N.U., Ministerio de Cultura y Educación y diario Clarín. 7. Ponemos la imagen1.jpg con un enlace a imagen2.jpg. CARACTERES ESPECIALES: Existen algunas limitaciones para escribir el texto... Las etiquetas se forman como un comando escrito entre los símbolos "<" y ">", entonces, si se quisieran escribir estos caracteres como parte normal del texto, daría esto lugar a una ambigüedad, ya que el navegador podría interpretarlos como el comienzo o final de una etiqueta, en vez de un carácter más del texto. El HTML es un lenguaje escrito en idioma inglés, y éste no tiene la letra ñ ni los acentos a las vocales ni apertura de interrogación y exclamación. En los navegadores en castellano esto no es problema, pero tenemos que tener en cuenta que la WEB es mundial y, para que todos puedan ver bien los textos, es conveniente reemplazar algunos caracteres por códigos. Para resolver estos problemas, existen códigos para poder escribir estos caracteres. Estos códigos tienen un inicio y un fin. El inicio es el símbolo & y el final es el ;

15 15 Para que carateres del código que aparezcan en el texto: < para < (menor que) > para > (mayor que) & para & (ampersand) " para " (double quotation) Para vocales, eñes, interrogación y exclamación: á para la á é para la é í para la í ó para la ó ú para la ú Á para la Á É para la É Í para la Í Ó para la Ó Ú para la Ú ñ para la ñ Ñ para la Ñ ü para la ü Ü para la Ü para para Si se escribe en un procesador de textos de forma manual, se puede escribir el código directamente. Por ejemplo... Mi página con caracteres especiales <CENTER> <H1> Mi página realizada en el instituto para ver cómo se escriben los caracteres especiales como la ñ </H1> </CENTER> <HR>

16 16 FORMATO DE FUENTES: Tamaño de las fuentes: El tamaño de las fuentes utilizadas puede cambiarse con el comando SIZE=X, donde X es el número asignado al tamaño que puede variar entre 1 y 7. Por ejemplo... <FONT SIZE=1> Texto en tamaño 1 </FONT> <BR> <FONT SIZE=2> Texto en tamaño 2 </FONT> <BR> <FONT SIZE=3> Texto en tamaño 3 </FONT> <BR> <FONT SIZE=4> Texto en tamaño 4 </FONT> <BR> <FONT SIZE=5> Texto en tamaño 5 </FONT> <BR> <FONT SIZE=6> Texto en tamaño 6 </FONT> <BR> <FONT SIZE=7> Texto en tamaño 7 </FONT> <BR> Para tener una referencia válida, el tamaño normal es el 3 y de tipo Times New Roman que se puede cambiar a gusto. Pero cuidado, podemos poner una fuente que el visitante no tenga en su computadora y así la visualización de la página puede cambiar en su estética. Para cambiar la fuente la orden es FACE=. Por ejemplo, para que el documento se vea con la fuente ARIAL, la parte del texto afectada deberá quedar de la siguiente manera... <FONT FACE="Arial">Este texto está configurado para ver con la fuente Arial</FONT> Se pueden indicar en el atributo varias fuentes distintas, separadas por una coma. Si falla la primera, entonces el texto adopta la forma de la segunda, y así sucesivamente. Si fallan todas, el texto adopta entonces la fuente por defecto. Así, por ejemplo: <FONT FACE="Flexure, Arial">Este texto se verá con la fuente Flexure, y si no está en la computadora lo hará con la fuente Arial</FONT>

17 17 FONDOS DE PÁGINA: Se puede cambiar el fondo de las páginas de dos formas diferentes: Con un color uniforme. Con una imagen que haga de textura. Fondos con un color uniforme: La etiqueta para dar color al fondo es BGCOLOR y se pone a continuación de la etiqueta <BODY BGCOLOR="#RRVVAA"> Donde: RR es un número indicativo de la cantidad de color rojo VV es un número indicativo de la cantidad de color verde AA es un número indicativo de la cantidad de color azul Estos números indican en numeración hexadecimal la cantidad del color primario. En la mezcla final se da el resultado. Esta numeración se caracteriza por tener 16 dígitos (en lugar de los diez de la numeración decimal habitual). Estos dígitos son: A B C D E F Es decir, que en nuestro caso, el número menor es el 00 y el mayor el FF. Así, por ejemplo, el color rojo es el #FF0000, porque tiene el máximo de rojo y cero de los otro dos colores. Los colores primarios son... #FF Rojo #00FF00 - Verde #0000FF - Azul Para blanco y negro serán... #FFFFFF - Blanco # Negro Para hacer un tono más oscuro del color elegido hay que reducir el número de su componente, dejando los otros dos invariables. Así, el rojo #FF0000 se puede hacer más claro con #AA0000, o más oscuro con #

18 18 Para hacer que un color tenga un tono más suave (más pastel), se deben variar los otros dos colores haciéndolos más claros (número más alto), en una cantidad igual. Así, podemos convertir el rojo en anaranjado con #FF7050. Colores del texto y de los enlaces: Podemos cambiar el color al texto y a sus enlaces en toda la página. Las etiquetas son: TEXT: Color del texto. LINK: Color de los enlaces. VLINK: Color de los enlaces visitados. ALINK: Color de los enlaces activos (el que adquieren en el momento de ser pulsados). La etiqueta, con todas sus posibilidades quedaría así (a continuación de ): <BODY BGCOLOR="# RRVVAA" TEXT="# RRVVAA" LINK="# RRVVAA" VLINK="# RRVVAA " ALINK="# RRVVAA"> Cambio del color de una parte del texto (y no en toda la página): <FONT COLOR="#0000FF"> Este texto es de color azul </FONT> Fondos con una imagen: La segunda alternativa es ponerle una imagen de fondo a la página en formato GIF o JPEG. Esta imagen se repite por toda la página en forma de tapiz. La estructura de la etiqueta es: <BODY BACKGROUND="fondo1.gif"> A esta etiqueta puede agregársele otras para el texto y los enlaces. Hay que tener en cuenta que el visitante puede tener deshabilitada carga de imágenes. Esto podría ocasionar que el texto no sea legible (depende de cómo lo hayamos armado). Para evitar el problema, si se pone un fondo que al no ser cargado pueda traer problemas con el texto, también podemos cargar un color que sí lo permita. En tal caso, el color aparecerá si la imagen no es cargada.

19 19 Si queremos poner como fondo con una imagen cuya tonalidad general es verde y arreglamos los colores del texto para que haga un buen contraste, entonces debemos cargar un color parecido a continuación. La etiqueta quedaría así: <BODY BACKGROUND="fondo5.jpg" BGCOLOR="#0000FF"> EJERCITACIÓN: 1. Poner un fondo a la página index.htm con un color alternativo. 2. Poner el mismo fondo a las páginas primera.htm, segunda.htm y tercera.htm con un color alternativo. 3. Hacer que en la página tercera.htm aparezcan partes del texto en diferentes colores, fuentes y tamaños de fuente. ALINEACIÓN Y DIMENSIONADO DE IMÁGENES: Alineación de las imágenes: Se consigue con la etiqueta ALIGN más el tipo de alineación deseado... ALIGN=RIGHT ALIGN=LEFT Alinea la imagen a la derecha de la página. Alinea la imagen a la izquierda de la página. La orden para alinear la imagen a la derecha sería... <IMG SRC="imagen1.jpg" ALIGN=RIGHT> Si queremos que la imagen esté centrada en la página, entonces la orden sería... <CENTER><IMG SRC="imagen1.jpg"></CENTER> Si queremos que el texto no se acomode al costado de la imagen, entonces se utilizan las siguientes etiquetas que fuerzan al texto a buscar otro lugar. La elegiremos de acuerdo a nuestra necesidad.

20 20 <BR CLEAR=LEFT> Busca el primer margen libre (clear) a la izquierda. <BR CLEAR=RIGHT> Busca el primer margen libre a la derecha. <BR CLEAR=ALL> Busca el primer margen libre a ambos lados. Lo vemos en un ejemplo práctico creando un archivo cualquiera y veremos que el texto con la etiqueta <BR CLEAR=ALL> queda debajo de la imagen. Mi página de WEB <IMG SRC="imagen1.jpg" ALIGN=RIGHT> Este texto está al lado de la imagen. <BR> Este texto también. <BR CLEAR=ALL> Busca el primer margen libre a ambos lados. Dimensionando la imagen: Los navegadores cuando cargan un documento HTML y encuentran una etiqueta de una imagen, piden al servidor que les envíe únicamente este archivo. Cuando carga la imagen, recién después cargan los demás datos porque necesita de la imagen para ir armando la página. Para que el navegador sepa qué tamaño tiene la imagen y siga cargando los otros datos de la página (textos), se le puede indicar qué tamaño tendrá y así reservará tal lugar. Para indicar el tamaño en ancho y alto, las etiquetas son... WIDTH (ancho) HEIGHT (alto) Por ejemplo, para imagen1.jpg: <IMG SRC="imagen1.jpg" WIDTH=200 HEIGHT=100> De tal manera, podemos decirle al navegador que muestre la imagen en otro tamaño del que realmente tiene. Podemos decirle... <IMG SRC="imagen1.jpg" WIDTH=100 HEIGHT=50>

21 21 FORMATO DE LAS IMÁGENES: Tamaño de las imágenes: Al cargar una imagen, el tiempo de carga varía según cómo esté la línea y su tamaño en bytes. Debemos tener cuidado en este punto reduciendo el tamaño de la imagen con un programa como el Paint Shop Pro. Tenemos varias alternativas Reducir la resolución de la imagen. Generalmente tienen unos 300 pixeles. Se los puede bajar a Reducir las imágenes.gif a un máximo de 256 colores (las.jpg tienen que ser siempre de 16,7 millones de colores). 3. Reducir la imagen a un tamaño que sea suficiente para apreciarla con claridad. Cuanto más pequeña en pixeles sea, más pequeña en bytes será. GIFs transparentes: Una característica muy útil del formato.gif es la opción de hacer transparente un color determinado, es decir, que en la página del Web ese color concreto no se vea, siendo reemplazado por el fondo de la página. Esto es muy beneficioso cuando queremos realizar ejectos atractivos con imágenes irregulares o de texto. Se debe tener en cuenta que sólo puede tener transparencia el formato.gif de tipo 89 a, ya que también está el tipo 87 a con el que no nos será posible realizarlo. Con el programa Paint Shop Pro podemos elegir el formato final del archivo. GIFs animados: Este formato tiene la particularidad de que es posible superponer varias imágenes diferentes que, al ser cargadas por el navegador, se irán reproduciendo una a una consecutivamente dando la impresión de ver una animación (igual que con los dibujos animados). Para realizar tal efecto, guardamos las imágenes que conformarán la animación en un directorio (pueden ser 4). Luego las unimos con el programa Microsoft Gif Animator, guardamos el archivo (que será uno solo) y, al cargarlo en el navegador, se reproducirán consecutivamente.

22 22 TABLAS: Estructura de una tabla: 1. Una tabla tiene un comienzo y un fin; adentro, todos los atributos necesarios para las filas y columnas. Todo el código debe ir entre y. <TABLE> [resto de las etiquetas] </TABLE> Para que los bordes puedan verse en el navegador, le agregamos la etiqueta BORDER a <TABLE> 2. El siguiente nivel corresponde a las etiquetas para formar cada fila (row) de la tabla, que son <TR> y </TR>. Hay que repetirlas tantas veces como filas queremos que tenga la tabla. Para una tabla con dos filas quedaría así su estructura: <TABLE BORDER> <TR> [etiquetas de las distintas celdas de la primera fila] </TR> <TR> [etiquetas de las distintas celdas de la segunda fila] </TR> </TABLE> 3. En el último nivel están las etiquetas de cada celda, que son <TD> y </TD>, que dan lugar al contenido de cada celda concreta (texto, imágenes, etc.). Hay que repetirla tantas veces como celdas queremos que haya en esa fila teniendo cuidado de que en cada fila tengamos el mismo número de celdas para formar las columnas. En el siguiente ejemplo tendremos 2 columnas y en cada fila 2 celdas: <TABLE BORDER> <TR> <TD>fila1-celda1</TD> <TD>fila1-celda2</TD> </TR> <TR> <TD>fila2-celda1</TD> <TD>fila2-celda2</TD> </TR> </TABLE>

23 23 Dibujada en la hoja quedaría... Para ir apreciando los cambios realizados, creamos un archivo llamado tabla.htm con el siguiente código... <TABLE BORDER> <TR> <TD>fila1-celda1</TD> <TD>fila1-celda2</TD> <TD>fila1-celda3</TD> </TR> <TR> <TD>fila2-celda1</TD> <TD>fila2-celda2</TD> <TD>fila2-celda3</TD> </TR> </TABLE> Probamos sacando la celda 3 de la fila 2 para ver qué pasa... Luego restituimos la etiqueta quitada... Ahora le agregamos un título a la tabla. Lo creamos con las etiquetas <CAPTION> y </CAPTION> que deben ubicarse después de <TABLE BORDER>. Entre las etiquetas tipeamos el título. Ahora vamos a variar el espesor de los bordes. A esto lo hacemos poniendo un signo = y un número. El listado ahora debe estar así:

24 24 <TABLE BORDER=5> <CAPTION>Título de la tabla</caption> <TR> <TD>fila1-celda1</TD> <TD>fila1-celda2</TD> <TD>fila1-celda3</TD> </TR> <TR> <TD>fila2-celda1</TD> <TD>fila2-celda2</TD> <TD>fila2-celda3</TD> </TR> </TABLE> Celdas de cabecera: Seguidamente, pondremos título a cada columna. Es como poner otra fila pero el texto aparecerá en negrita y centrado. La etiqueta es <TH> y </TH> (en vez de la normal <TD> y </TD>). Entonces, el agregado será... <TR> <TH>Columna 1</TH> <TH>Columna 2</TH> <TH>Columna 3</TH> </TR> Agregamos el texto de arriba, guardamos el archivo y lo visualizamos en el navegador... Contenido de las celdas: Dentro de las celdas podemos poner todo lo que querramos. Se hace como hicimos anteriormente pero con el cuidado de introducir todas las órdenes dentro de la celda correspondiente. Para poner un texto... <TD>Este texto está dentro de una celda</a></td>

Apuntes básicos de HTML I.E.S. Pintor José María Fernández

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

Más detalles

CONCEPTOS BÁSICOS PARA EL DISEÑO DE PAGINAS WEB

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

Más detalles

ELABORADO POR: BRENDA PATRICIA GONZALEZ MANRIQUEZ

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)

Más detalles

MANUAL DE REFERENCIA DE PROGRAMACIÓN HTML

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

Más detalles

Elaboración de actividades: Webquest y Caza del Tesoro UNIDAD. Lenguaje HTML. Clase 7 Clase 8

Elaboración de actividades: Webquest y Caza del Tesoro UNIDAD. Lenguaje HTML. Clase 7 Clase 8 Elaboración de actividades: Webquest y Caza del Tesoro UNIDAD Lenguaje HTML Clase 7 Clase 8 Exposición 4.6. Fuentes Tamaño de las fuentes: Texto En el nuevo estándar HTML 3.2 se admite

Más detalles

Objetivos. El alumno conocerá los elementos indispensables para crear una página web. 1. Crear una página web básica utilizando html.

Objetivos. El alumno conocerá los elementos indispensables para crear una página web. 1. Crear una página web básica utilizando html. Objetivos El alumno conocerá los elementos indispensables para crear una página web. Al final de esta práctica el alumno podrá: 1. Crear una página web básica utilizando html. Introducción El lenguaje

Más detalles

Nociones basicas de HTML

Nociones basicas de HTML 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

Más detalles

Para iniciarnos en el estudio de este curso necesitamos estar familiarizados con ciertos conceptos generales, entre ellos:

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

Más detalles

Creación de páginas Web FrontPage

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

Más detalles

Tema 3. Conceptos Básicos de HTML. ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda!

Tema 3. Conceptos Básicos de HTML. ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda! Tema 3. Conceptos Básicos de HTML ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda! Lenguajes de descripción! Grupo de lenguajes que describen cómo representar

Más detalles

EDICIÓN WEB CÓDIGO HTML

EDICIÓN WEB CÓDIGO HTML EDICIÓN WEB CÓDIGO HTML 1. Estructura básica de un documento HTML 1.1. Tipos de etiquetas. Etiqueta cerrada Mi página Web Etiqueta abierta Etiqueta con parámetros

Más detalles

Curso Diseño Web con Software libre, VNU

Curso Diseño Web con Software libre, VNU 1. - QUE ES VNU? NVU (se pronuncia N-view, por "new view") es un editor de páginas web libre y gratuito desarrollado bajo la modalidad Open Source, o sea que cualquiera está autorizado para bajarlo sin

Más detalles

UNIDAD I HOJA ELECTRÓNICA DE CÁLCULO

UNIDAD I HOJA ELECTRÓNICA DE CÁLCULO UNIDAD I HOJA ELECTRÓNICA DE CÁLCULO COMPETENCIA PARTICULAR: Utiliza herramientas de la hoja electrónica de cálculo para el procesamiento de la información en su ámbito académico, social y laboral. PRACTICA

Más detalles

Introducción: páginas web y navegadores

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

Más detalles

En primer lugar necesitamos indicar el tipo de documento que estamos creando. Esto en HTML5 es extremadamente sencillo:

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

Más detalles

Tema 5: La red de redes: Internet

Tema 5: La red de redes: Internet Tema 5: La red de redes: Internet > Qué es Internet? Todo el mundo habla de Internet: se hace referencia en clase, en revistas de moda, entre amigos... Acceder a una página web, hablar con los amigos a

Más detalles

GUÍA DE APRENDIZAJE COMPUTACIÓN BÁSICA II COMPETENCIA GENERAL

GUÍA DE APRENDIZAJE COMPUTACIÓN BÁSICA II COMPETENCIA GENERAL GUÍA DE APRENDIZAJE COMPUTACIÓN BÁSICA II COMPETENCIA GENERAL Maneja herramientas informáticas vigentes que le permiten administrar y difundir información diversa en un contexto social, académico y laboral

Más detalles

GUÍA Nro. 1 TECNOLOGÍA DE INTERNET. TIII PIII

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

Más detalles

Etiquetas Básicas (Estructura HTML) Etiquetas Atributos Valores Descripción. Formato de Presentación Etiquetas Atributos Valores Descripción

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

Más detalles

Cursito 27: Curso de HTML Parte 3

Cursito 27: Curso de HTML Parte 3 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

Más detalles

Crear una página Html con el Editor.

Crear una página Html con el Editor. Crear una página Html con el Editor. El Editor de Páginas HTML de RODAS permite a los usuarios crear, cargar y editar una serie de páginas web HTML que se almacenará en Mis Objetos o en una colección durante

Más detalles

CREACION DE PÁGINAS WEB

CREACION DE PÁGINAS WEB CREACION DE PÁGINAS WEB CREAR LO QUE LLAMAREMOS SITIO WEB LOCAL En el escritorio del ordenador crear una carpeta llamada sitio web que sea donde guardes todos los archivos Dentro de ella guardaremos todos

Más detalles

Curso de Diseño de Páginas Web - HTML. Dando forma al texto del documento HTML 6. Alineación y dimensionado de imágenes 19

Curso de Diseño de Páginas Web - HTML. Dando forma al texto del documento HTML 6. Alineación y dimensionado de imágenes 19 Curso de Diseño de Páginas Web - HTML 1. Estructura básica de un documento HTML 5 Dando forma al texto del documento HTML 6 Caracteres especiales 11 Enlaces 13 Imágenes 16 Alineación y dimensionado de

Más detalles

UNIDAD DIDÁCTICA. Integración de documentos profesionales en la Web. Objetivos. www.adams.es

UNIDAD DIDÁCTICA. Integración de documentos profesionales en la Web. Objetivos. www.adams.es UNIDAD DIDÁCTICA 3 Integración de documentos profesionales en la Web Objetivos Mantener actualizadas páginas Web de acuerdo con el diseño y con los contenidos planificados, organizándolos a través del

Más detalles

Cursito 26: Curso de HTML Parte 2

Cursito 26: Curso de HTML Parte 2 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

Más detalles

TEMA 2. CREAR SITIOS WEB USANDO. Tecnologías de la Información 1ºBachillerato IES Zurbarán (Badajoz)

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

Más detalles

Profesor: Víctor Cárdenas Schweiger

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

Más detalles

Este es el inicio de una etiqueta. Este es el cierre de una etiqueta.

<XXX> Este es el inicio de una etiqueta. </XXX> Este es el cierre de una etiqueta. Introducción. El objetivo de este texto es proporcionar un conocimiento básico acerca de la construcción de páginas Web, para un conocimiento más profundo de este lenguaje posteriormente se desarrollarán

Más detalles

Algunos de los botones ofrecen las funcionalidades básicas para el trabajo con ficheros propias de cualquier programa editor.

Algunos de los botones ofrecen las funcionalidades básicas para el trabajo con ficheros propias de cualquier programa editor. Curso de creación de documentos Web Servicio de Comunicaciones Uso del Netscape Composer para la creación de documentos HTML 1.- Creación de un documento. El Netscape Communicator incluye un programa,

Más detalles

Nueva Web de los SCTs http://www.sct.uniovi.es MANUAL DEL USUARIO

Nueva Web de los SCTs http://www.sct.uniovi.es MANUAL DEL USUARIO Nueva Web de los SCTs http://www.sct.uniovi.es MANUAL DEL USUARIO 1 ÍNDICE DE CONTENIDOS 1 Acceso a la edición de contenidos...3 1.1 Noticias...3 1.2 Utilización del editor de contenidos...6 1. Formato...6

Más detalles

7.1 Estructura Básica de jas Tablas

7.1 Estructura Básica de jas Tablas Las tablas permiten representar los elementos de una página en filas y columnas separadas entre si. Es una herramienta muy útil para ordenar contenidos de distintas partes de nuestra página. Las tablas

Más detalles

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 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

Más detalles

Guia para el principiante

Guia para el principiante Guia para el principiante Este documento asume que usted sabe como publicar en WWW. Lenguaje HTML El lenguaje HTML es el usuado actualmente para escribir textos hypermediales en el Web. El siguiente texto,

Más detalles

Antes de comenzar un sitio. Empezar un sitio web

Antes de comenzar un sitio. Empezar un sitio web Antes de comenzar un sitio Es muy recomendable realizar la siguiente actividad, de evaluación de páginas web, para tener ideas y recursos. http://www.uamvirtual.es/mod/assignment/view.php?id=3228 Empezar

Más detalles

Curso de Diseño de Páginas Web - HTML

Curso de Diseño de Páginas Web - HTML 5 www.monografias.com Curso de Diseño de Páginas Web - HTML 1. Estructura básica de un documento HTML 5 2. Dando forma al texto del documento HTML 6 3. Caracteres especiales 11 4. Enlaces 13 5. Imágenes

Más detalles

Luis José Sánchez González INTRODUCCIÓN

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

Más detalles

Prof. Luis Miguel Oliveros - Computación 3er Año

Prof. Luis Miguel Oliveros - Computación 3er Año NVU / KompoZer NVU es un editor de páginas web libre y gratuito desarrollado bajo la modalidad Open Source. Esta alternativa gratuita trae nuevas herramientas para facilitar el trabajo, convirtiéndola

Más detalles

Curso básico de creación de páginas web

Curso básico de creación de páginas web Curso básico de creación de páginas web Programa de formación docente UAM 2005-2006 Miguel Sevilla Callejo Abril 2006 Departamento de Geografía Universidad Autónoma de Madrid Objetivos Desarrollar las

Más detalles

Lenguaje HTML y páginas web. Alex Sánchez

Lenguaje HTML y páginas web. Alex Sánchez Lenguaje HTML y páginas web Alex Sánchez Introducción: La web y las páginas web Componentes de la web Como funciona la web? Como es la comunicación en la web El acceso a la Web suele basarse en un un explorador

Más detalles

ADMINISTRACIÓN MI PRIMER ARTÍCULO (Parte I) (Última revisión: domingo, 15 de febrero de 2009)

ADMINISTRACIÓN MI PRIMER ARTÍCULO (Parte I) (Última revisión: domingo, 15 de febrero de 2009) JOOMLA! ADMINISTRACIÓN MI PRIMER ARTÍCULO () (Última revisión: domingo, 15 de febrero de 2009) Cuando nos introducimos en el mundo de las páginas Web nuestro objetivo fundamental es poder comunicarnos

Más detalles

IB14 Informática Aplicada a la Construcción

IB14 Informática Aplicada a la Construcción IB14 Informática Aplicada a la Construcción Prácticas. Tema 4: Creación de páginas electrónicas 1 Introducción El objetivo principal de este tema es aprender a crear páginas web sencillas y a publicar

Más detalles

Nos identificamos con nuestro nombre de usuario y la contraseña y llegamos a esta página

Nos identificamos con nuestro nombre de usuario y la contraseña y llegamos a esta página ADMINISTRACIÓN DEL SITIO WEB Todos los jefes de Departamento, coordinadores de proyectos y directivos del Centro somos administradores de la página web. Cada uno tendrá la responsabilidad de administrar

Más detalles

Taller de Internet. Departamento de Formación Apple Computer España

Taller de Internet. Departamento de Formación Apple Computer España Taller de Internet Departamento de Formación Apple Computer España Indice INTRODUCCION... 2 INICIO... 3 CREACION DE UNA PAGINA... 6 Inserción de texto...6 Salvar cambios...10 Copiar Texto de otro documento...12

Más detalles

IMÁGENES. Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web.

IMÁGENES. Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web. IMÁGENES Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información visual. Existen una serie de formatos de imagen más

Más detalles

Diseño Web. Sitio Web Conjunto de páginas web relacionadas entre sí.

Diseño Web. Sitio Web Conjunto de páginas web relacionadas entre sí. Internet Es una red de redes de ordenadores, que intercambian información basándose en el protocolo TCP/IP. Existen diversas formas de acceder a Internet: Correo electrónico, FTP, Videoconferencia, y la

Más detalles

3_formato I. NOTA: al pegar unas celdas sobre otras no vacías, se borrará el contenido de estas últimas.

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

Más detalles

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 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).

Más detalles

CREACIÓN DE PÁGINAS WEB CON NVU

CREACIÓN DE PÁGINAS WEB CON NVU CREACIÓN DE PÁGINAS WEB CON NVU 1. Introducción... 1 2. Instalación... 2 3. Antes de comenzar una página web... 2 4. Editar páginas web con NVU... 5 5. Definir el diseño de nuestro sitio... 6 5.1. Plantillas...

Más detalles

DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA

DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA Nombre del Módulo: DISEÑO DE PAGINAS WEB CON HTML Código: CSTI0085 total: 3 Horas Objetivo General: Construir páginas Web en base

Más detalles

4.- Composer: Formato de párrafos, títulos y listas

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

Más detalles

TEMA 9 CREACIÓN DE PÁGINAS WEB

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

Más detalles

EDITOR DE PÁGINAS WEB KOMPOZER (4º ESO)

EDITOR DE PÁGINAS WEB KOMPOZER (4º ESO) EDITOR DE PÁGINAS WEB KOMPOZER (4º ESO) 1) INSTALACIÓN 2) CREAR LA ESTRUCTURA DE CARPETAS 3) ABRIR EL PROGRAMA 4) GUARDAR LA PÁGINA WEB 5) CERRAR EL PROGRAMA 6) ABRIR EL ARCHIVO HTML DESDE EL KOMPOZER

Más detalles

Manual de NVU Capítulo 2: Elementos básicos de una páginas Web

Manual de NVU Capítulo 2: Elementos básicos de una páginas Web Manual de NVU Capítulo 2: Elementos básicos Pág. 1 Manual de NVU Capítulo 2: Elementos básicos de una páginas Web Reconocimiento-NoComercial-CompartirIgual 2.5 España Realizado por: Julio Ruiz Palmero

Más detalles

Configuración de un sitio local

Configuración de un sitio local Configuración de un sitio local Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común. Es necesario diseñar y planificar el sitio web antes

Más detalles

MANUAL HTML (ENLACES)

MANUAL HTML (ENLACES) MANUAL HTML (ENLACES) Creado por l3 Introducción: En este manual te enseñare como crear enlaces y cómo manejarlos con HTML, ya que sin los enlaces de hipertexto no se podrían conectar las paginas web.

Más detalles

Taller de Paginas Web

Taller de Paginas Web Taller de Paginas Web Las páginas web son documentos de texto que se comparten en la red. La mecánica es la siguiente : Un ordenador de usuario, que llamarermos cliente, hace una petición a una direccion

Más detalles

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 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

Más detalles

Tema 4. Contenido multimedia. ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda!

Tema 4. Contenido multimedia. ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda! Tema 4. Contenido multimedia ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda! Hipertexto! Permiten conectar entre sí entre diferentes documentos, elementos

Más detalles

Estas líneas son permanentes en una página Web. Siempre van a estar presentes no importando qué tan corta o tan larga sea la página y el contenido.

Estas líneas son permanentes en una página Web. Siempre van a estar presentes no importando qué tan corta o tan larga sea la página y el contenido. Estructura de una página Web Toda página Web tiene una estructura que permite al programador saber de antemano qué tipo de información necesita introducir. Esto ayuda a que la página que diseña sea claramente

Más detalles

En el menú Ver, podemos visualizar de distinta forma un mismo documento:

En el menú Ver, podemos visualizar de distinta forma un mismo documento: MICROSOFT WORD Al iniciar Word aparece una pantalla inicial como ésta. En la parte superior se encuentra, en color azul, la barra del título, en la que muestra el nombre del documento sobre el que estamos

Más detalles

JOOMLA! ADMINISTRACIÓN MI PRIMER ARTÍCULO (Parte I) (Última revisión: miércoles, 2 de marzo de 2011)

JOOMLA! ADMINISTRACIÓN MI PRIMER ARTÍCULO (Parte I) (Última revisión: miércoles, 2 de marzo de 2011) JOOMLA! ADMINISTRACIÓN MI PRIMER ARTÍCULO () (Última revisión: miércoles, 2 de marzo de 2011) Cuando nos introducimos en el mundo de las páginas Web nuestro objetivo fundamental es poder comunicarnos con

Más detalles

HTML Guía de trabajo para 3º ESO

HTML Guía de trabajo para 3º ESO HTML Guía de trabajo para 3º ESO Página 2 Índice 1. Qué es HTML?... 3 2. Cómo son las páginas Web?... 3 3. Qué es un sitio Web?... 3 4. Práctica 1. Crear un sitio web local... 4 5. Primera página HTML...

Más detalles

Gestor de Contenidos. Manual del Usuario

Gestor de Contenidos. Manual del Usuario Gestor de Contenidos Manual del Usuario Gestor de Contenidos de Ayuntamiento Acceso al Gestor El acceso al Gestor de Contenidos se realiza a través de la página http://www.emanises.es/empresarialauthor

Más detalles

QUE ES HTML? Las siglas HTML se refieren a:

QUE ES HTML? Las siglas HTML se refieren a: QUE ES HTML? Las siglas HTML se refieren a: HyperText Markup Language Es uno de los lenguajes más utilizados en el Web Wide Web. Las páginas de Internet están escritas en este lenguaje. Le brinda al autor

Más detalles

En Wordpad se puede escribir, editar y dar formato a un texto, así como insertar imágenes de forma sencilla, etc.

En Wordpad se puede escribir, editar y dar formato a un texto, así como insertar imágenes de forma sencilla, etc. Aplicación WordPad Generalidades WordPad es un procesador de textos que permite crear e imprimir documentos de manera muy rápida y sencilla. En Wordpad se puede escribir, editar y dar formato a un texto,

Más detalles

CREACION DE PÁGINAS WEB

CREACION DE PÁGINAS WEB PRESENTA: CREACION DE PÁGINAS WEB OBJETIVO Conocer la aplicación de los paquetes mas utilizados para la implementación t diseño de una pagina Web. DIRIGIDO A: Estudiantes de informática, Ofimática y Personas

Más detalles

Curso de Visual Basic 6.0 - Lección 1 Area Interactiva - www.areaint.com. www.areaint.com CURSO DE. Visual Basic 6.0 WWW.AREAINT.

Curso de Visual Basic 6.0 - Lección 1 Area Interactiva - www.areaint.com. www.areaint.com CURSO DE. Visual Basic 6.0 WWW.AREAINT. www.areaint.com CURSO DE Visual Basic 6.0 Pág. 1 LECCIÓN 1 En esta lección de introducción aprenderemos las principales características de un lenguaje de programación para crear aplicaciones bajo Windows.

Más detalles

TUTORIAL PARA CREAR LA WEB DEL DEPARTAMENTO

TUTORIAL PARA CREAR LA WEB DEL DEPARTAMENTO TUTORIAL PARA CREAR LA WEB DEL DEPARTAMENTO Este tutorial muestra los pasos a seguir para que un departamento organice su espacio web en la intranet (red interna) del Instituto. Se trata de que al acceder

Más detalles

Herramientas para crear páginas.

Herramientas para crear páginas. Herramientas para crear páginas. Herramientas para la creación de páginas Web. Como hemos visto resulta sencillo pero engorroso escribir directamente en HTML. Por ello es más sencillo utilizar un editor

Más detalles

1.- MENU DE CONTROL O MENU VENTANA: permite cerrar la ventana cambiarla de tamaño y pasar a otra ventana

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

Más detalles

HTML. HyperText Markup Language (Lenguaje de Marcas de Hipertexto)

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

Más detalles

(Objetivo) Curso de Informática Básica. Word 2003. Índice. Word 2003. Conceptos Básicos. Uso avanzado de Word. Universidad Rey Juan Carlos

(Objetivo) Curso de Informática Básica. Word 2003. Índice. Word 2003. Conceptos Básicos. Uso avanzado de Word. Universidad Rey Juan Carlos Universidad Rey Juan Carlos Estefanía Martín Liliana P. Santacruz Laboratorio de Tecnologías de la Información en la Educación 2 Objetivo Entender los conceptos procesador de texto y sistema de tratamiento

Más detalles

C APÍTULO 1 Gestión de documentos

C APÍTULO 1 Gestión de documentos C APÍTULO 1 Gestión de documentos En este capítulo encontrará unas sencillas indicaciones para cocripción somera del entorno de trabajo de Word, así como una referencia rápida a las funciones de las teclas

Más detalles

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION

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º 1 Nombre de la practica: Introducción y conceptos básicos de HTML Lugar de ejecución:

Más detalles

Wikis Trabajando en una Wiki

Wikis Trabajando en una Wiki Wikis Trabajando en una Wiki Contenido CONTENIDO... 1 VENTANA PRINCIPAL DEL WIKI... 2 AGREGAR UNA NUEVA PÁGINA... 4 EDICIÓN DE UNA PÁGINA... 5 DAR FORMATO A LA PÁGINA... 7 DESHACER Y REHACER ACCIONES...

Más detalles

14.1 Configuración de las propiedades del documento

14.1 Configuración de las propiedades del documento Capítulo 14 Publicación 14.1 Configuración de las propiedades del documento V amos a abrir la película natura.fla guardada en la carpeta Curso Flash/ejemplos. No es necesario guardar los cambios producidos

Más detalles

Curso de HTML 1. ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML 2. DANDO FORMA AL TEXTO DEL DOCUMENTO HTML 3. CARACTERES ESPECIALES 4. ENLACES 5.

Curso de HTML 1. ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML 2. DANDO FORMA AL TEXTO DEL DOCUMENTO HTML 3. CARACTERES ESPECIALES 4. ENLACES 5. Curso de HTML 1. ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML 2. DANDO FORMA AL TEXTO DEL DOCUMENTO HTML 3. CARACTERES ESPECIALES 4. ENLACES 5. IMÁGENES 6. ALINEACION Y DIMENSIONADO DE IMÁGENES 7. FONDOS Y COLORES

Más detalles

CURSO DE INTRODUCCIÓN AL WORD

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

Más detalles

MICROSOFT FRONTPAGE Contenido

MICROSOFT FRONTPAGE Contenido MICROSOFT FRONTPAGE Contenido CREAR UN SITIO WEB... 2 MARCOS... 5 FONDO DE LA PÁGINA... 7 MARQUESINAS... 8 CREAR HIPERVÍNCULOS... 9 BOTONES ACTIVABLES... 11 LOS MAPAS DE IMÁGENES... 13 INSERTAR SONIDOS...

Más detalles

NEOBOOK. Aplicaciones Multimedia

NEOBOOK. Aplicaciones Multimedia MINISTERIO DE EDUCACIÓN Y CIENCIA SECRETARÍA GENERAL DE EDUCACIÓN DIRECCIÓN GENERAL DE EDUCACIÓN, FORMACIÓN PROFESIONAL E INNOVACIÓN EDUCATIVA CENTRO NACIONAL DE INFORMACIÓN Y COMUNICACIÓN EDUCATIVA NEOBOOK.

Más detalles

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 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...

Más detalles

2_dar formato al texto / documentos I

2_dar formato al texto / documentos I Es posible ejecutar el comando tantas veces como copias se desee hacer, ya que tras pegar el texto, una copia del mismo sigue en el Portapapeles. Se dispone de varios caminos para llegar a estas opciones:

Más detalles

Curso de HTML 4.0. 1. Introducción al curso. Requisitos. Agradecimientos

Curso de HTML 4.0. 1. Introducción al curso. Requisitos. Agradecimientos Curso de HTML 4.0 1. Introducción al curso Este curso ha nacido con la intención de complementar a aquellos interesados en crear y diseñar páginas en Internet. Así podrás comprender mejor de donde surge

Más detalles

DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA

DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA Nombre del Módulo: DISEÑO DE PAGINAS WEB CON HTML Código: CSTI0085 total: 63 Horas Objetivo General: Construir páginas Web a partir

Más detalles

MANUAL DE USUARIO CMS- PLONE www.trabajo.gob.hn

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

Más detalles

5.- Crear páginas web con Nvu

5.- Crear páginas web con Nvu 5.- Crear páginas web con Nvu Nvu permite crear y publicar páginas web sin necesidad de tener conocimientos de HTML y de una forma tan sencilla como utilizar un procesador de textos. La barra de herramientas

Más detalles

Blogger: herramienta de creación y gestión de blogs

Blogger: herramienta de creación y gestión de blogs Blogger: herramienta de creación y gestión de blogs Objetivo de aprendizaje Las personas participantes serán capaces de crear y gestionar un blog con Blogger. Existen numerosos servicios gratuitos para

Más detalles

UNIVERSIDAD DE CASTILLA LA-MANCHA CURSO DE FORMACIÓN FRONTPAGE

UNIVERSIDAD DE CASTILLA LA-MANCHA CURSO DE FORMACIÓN FRONTPAGE UCLM UNIVERSIDAD DE CASTILLA LA-MANCHA CURSO DE FORMACIÓN FRONTPAGE TEMA 1: INTRODUCCIÓN...2 1.1. INTERNET...2 1.2.LA WEB...2 Página Web...2 1.3. CLIENTES Y SERVIDORES...2 2. INICIACIÓN EN HTML...3 2.1.

Más detalles

Práctica 8ª: Concluir la construcción del sitio web

Práctica 8ª: Concluir la construcción del sitio web Práctica 8ª: Concluir la construcción del sitio web Con todos los conocimientos adquiridos vamos a completar nuestro sitio web. Para ello vamos a ir página a página hasta completar el contenido de cada

Más detalles

Tutorial de carga de fotos en www.sonmisamigos.es

Tutorial de carga de fotos en www.sonmisamigos.es Tutorial de carga de fotos en www.sonmisamigos.es Este documento describe paso a paso como cargar un conjunto de fotografías en la web www.sonmisamigos.es Paso 1: Seleccionar las fotos a cargar Antes de

Más detalles

MANUAL DE USUARIO Joomla 1.5. Parte 2

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

Más detalles

proyecto atarraya Pequeño Manual de Publicación en SPIP

proyecto atarraya Pequeño Manual de Publicación en SPIP proyecto atarraya...internet con compromiso social Pequeño Manual de Publicación en SPIP Qué es SPIP? Técnicamente SPIP es un sistema de manejo de contenidos para sitios web, es decir un mecanismo que

Más detalles

Apuntes de Informática Apuntes de Word 2007 Manuales Personales Apuntes Profesor: R.Vásquez.I

Apuntes de Informática Apuntes de Word 2007 Manuales Personales Apuntes Profesor: R.Vásquez.I Apuntes Profesor: R.Vásquez.I Apuntes de Informática Página 1 1. Arrancar Word 2007 FUNCIONES BÁSICAS DE WORD Para comenzar a utilizar nuestro procesador de palabras Word, debemos de saber cómo accesar

Más detalles

FUNDAMENTOS DE INFORMÁTICA

FUNDAMENTOS DE INFORMÁTICA UNIVERSIDAD TECNOLÓGICA NACIONAL FACULTA REGIONAL ROSARIO FUNDAMENTOS DE INFORMÁTICA Profesor: Dra. Sonia Benz. Auxiliares: Ing. Evangelina Delfratte - Ing. Patricia Mores Introducción a MS Word. Herramientas

Más detalles

PHP y MySQL. Aplicaciones Web: HTML II (tercera parte) Autor: Johnny Zulca Mamani

PHP y MySQL. Aplicaciones Web: HTML II (tercera parte) Autor: Johnny Zulca Mamani PHP y MySQL. Aplicaciones Web: HTML II (tercera parte) Autor: Johnny Zulca Mamani 1 Presentación del curso Programación de aplicaciones Web con PHP y MySQL. Ahora continuaremos con el estudio de las páginas

Más detalles

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 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)

Más detalles

[MANUAL DE CAPACITACIÓN PARA LA ADMINISTRACIÓN DEL SITIO WEB DE LA CONTRALORÍA GENERAL]

[MANUAL DE CAPACITACIÓN PARA LA ADMINISTRACIÓN DEL SITIO WEB DE LA CONTRALORÍA GENERAL] [MANUAL DE CAPACITACIÓN PARA LA ADMINISTRACIÓN DEL SITIO WEB DE LA CONTRALORÍA GENERAL] [EDICIÓN DEL INICIO (HOME)] 1 2 3 5 4 1. Cambio Nota del Día Para cambiar la nota del día ubicada en el recuadro

Más detalles

H T M L. Marquesinas y Listas U.A.C.M COMPUTACIÓN II. Prácticas

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

Más detalles