CU C R U S R O S O D E HTM T L María Cives Senra

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

Download "CU C R U S R O S O D E HTM T L María Cives Senra"

Transcripción

1 CURSO DE HTML María Cives Senra

2 2 HTML HTML es un lenguaje que permite definir páginas web. Este lenguaje permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que conducen a otros documentos o fuentes de información relacionadas, y con inserciones multimedia (gráficos, sonido, imágenes, etc.). Hiper Text Markup Language

3 Las etiquetas del lenguaje HTML 3 El lenguaje HTML usa etiquetas o directivas (tags) para indicarle al programa cliente de Web como mostrar el texto. Las etiquetas están formadas por determinados caracteres metidos entre los signos <>, y con la barra </> cuando se trata de la segunda etiqueta de un efecto (la de cierre). Por ejemplo: <title> para abrir y </title> para cerrar. Este lenguaje se escribe en un documento de texto, por eso necesitamos un editor de textos para escribir una página web. Así pues, el archivo donde está contenido el código HTML es un archivo de texto, con una peculiaridad, que tiene extensión.html o.htm (es indiferente cuál utilizar). De modo que cuando programemos en HTML lo haremos con un editor de textos, lo más sencillo posible y guardaremos nuestros trabajos con extensión.htm. El navegador es el programa que conoce el lenguaje de la World Wide Web, por una parte se sabe comunicar con los servidores para pedir los archivos que el usuario solicita (los protocolos), y por otro entiende el código de la página Web para presentar el contenido al usuario (HTML).

4 Estructura de un documento HTML 4 Se codifica a través de unas etiquetas especiales, generalmente van en parejas, una de apertura y otra de cierre. <nombre etiqueta> texto afectado </nombre etiqueta> Cada etiqueta puede poseer una serie de atributos que modifiquen su contenido. Pueden ser obligatorios u opcionales <body bgcolor="#ffffff" > En las etiquetas no hay distinción entre mayúsculas y minúsculas. Si la página contiene algún error HTML, no saldrá por pantalla. El archivo debe tener extensión.htm ó.html

5 5 Estructura de un documento HTML

6 Cabecera y cuerpo del documento 6 <HTML> <HEAD> <TITLE> <BODY> HTML: Limita el documento e indica que se encuentra escrito en este lenguaje. HEAD: define la cabecera del documento HTML, esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario. Como por ejemplo el título de la ventana del navegador. TITLE: define el título de la página. Por lo general, el título aparece en la barra de título de la ventana del navegador. BODY: encierra el contenido del documento.

7 Ejemplo 1 7 Para guardar los distintos ejemplos vamos a crear una carpeta llamada PRÁCTICAS DE HTML. Escribiremos el programa en el block de notas y lo guardaremos con el nombre de Ejemplo 1. <HTML> <HEAD> <TITLE>Ejemplo 1</TITLE> </HEAD> <BODY> Hola mundo </BODY> </HTML>

8 Organización del texto 8 Guardamos el archivo con el nombre de: Ejemplo 1_1 Los saltos de línea, tabuladores y otros separadores (excepto los espacios entre palabras) son ignorados por los navegadores por lo que hay que insertarlos mediante etiquetas. <html> <HEAD> <TITLE>Ejemplo 1_1</TITLE> </HEAD>. <body> Tecnología de la Información y la Comunicación </body> </html>

9 Organización del texto 9 Salto de línea: <br> División de párrafos (mayor espacio que el salto de línea) <p> Alineación del texto Centrado <center> </center> o <p align =center> Derecha <p align=right> Izquierda <p align=left> Sangrado de texto <blockquote> Subrayado <u> </u> Cursiva <i> </i> Negrita <b> </b> Subíndice <sub> </sub> Superíndice <sup> </sup> <!-- --> Comentarios. Son directivas o etiquetas que nunca se mostrarán en el navegador. Sirven al programador para documentar la página web.

10 Ejemplo 1_2 10 Escribimos el programa en el block de notas y lo guardamos con el nombre de Ejemplo 1_2. <html> <HEAD> <TITLE> Ejemplo 1_2</TITLE> </HEAD> <body> <br> <br> <b><center> texto centrado en negrita</b> <br> <p align=right> texto alineado a la derecha <br> <p align=left> texto alineado a la izquierda <center><u><i> texto centrado, subrayado y en cursiva</u></i> <br> <br> <p align=left>la República Oriental del Uruguay es un país de América del Sur cuyo territorio es el segundo más pequeño del subcontinente, con una superficie de km². Limita con el Brasil al norte y noreste y con Argentina al oeste. El límite es el Río Uruguay. Por el sur, tiene costas sobre el Río de la Plata, el cual lo separa de la provincia de Buenos Aires y de la ciudad de Buenos Aires. Por el sureste, tiene costas sobre el Océano Atlántico. <blockquote><p align=left>la República Oriental del Uruguay es un país de América del Sur cuyo territorio es el segundo más pequeño del subcontinente, con una superficie de km². Limita con el Brasil al norte y noreste y con Argentina al oeste. El límite es el Río Uruguay. Por el sur, tiene costas sobre el Río de la Plata, el cual lo separa de la provincia de Buenos Aires. Por el sureste, tiene costas sobre el Océano Atlántica</blockquote> </body> </html>

11 11 Resultado del archivo Ejemplo 1_2.htm En este ejemplo se han aplicado varias etiquetas para cambiar la alineación y los atributos del texto (cursiva, negrita y subrayado).

12 Organización del texto 12 El tag FONT permite modificar la apariencia del la fuente utilizada en la página. Su estructura es la siguiente: <FONT atributo=valor del atributo> Los atributos del tag FONT son los siguientes:

13 13 Atributos de Font face - color - size Atributo Valor del Atributo Ejemplo del uso del tag y atributo Función del tag Apariencia del atributo face Nombre de la fuente <font face="arial,helvetica" >Fuente arial </font> Aplicar una fuente a cierta parte del texto Fuente arial color Número hexadecimal o la palabra clave del color <font color="#ff0000">letr a roja </font> Aplica un color a una fuente que se usa en cierta parte del texto Letra roja size Un número entero positivo o negativo <font size=1> Letra tamaño 1 </font> Define el tamaño de la fuente que se usa en cierta parte del documento (valores entre 1 y 7) Letra tamaño 1

14 Ejemplo 1_3 14 En este ejemplo pondremos en práctica los atributos de color, y tamaño de la fuente del texto. También cambiaremos de tipo de fuente. Guardar el archivo con el nombre de Ejemplo 1_3.htm <html> <HEAD> <TITLE>Ejemplo 1_3</TITLE> </HEAD> <body> <br> <br> <b><center><font size=2> Texto en tamaño 2 centrado y en negrita</font></b> <br> <p align=right> <font size=7>texto alineado a la derecha y en tamaño 7 </font> <br> <center><u><i><font color="#ff0000" size=5>texto centrado, subrayado, en cursiva y de color rojo. De tamaño 5 </font></u></i> <br> <br> <p align=left> <font size=3 face="comic sans ms">texto alineado a la izquierda. Fuente Comic Sans ms y en tamaño 3 </font> </body> </html>

15 15 Ejecución del archivo Ejemplo 1_3 En este documento se han utilizado distintos atributos del texto (Alineación, tipos de fuentes y atributos del texto)

16 Encabezados 16 <H1> <H2> <H3> <H4> <H5> <H6> Se utilizan para crear títulos dentro de una página. Sintaxis general: <H número de encabezado> La diferencia entre los distintos tipos de encabezados es el tamaño de la letra, el tipo de resaltado, y la separación existente entre el texto y los elementos que tienen encima y debajo de él. Se puede alinear el texto mediante la propiedad align. <H3 align= center >

17 17 Encabezados En la tabla anterior se puede observar el comportamiento de los distintos encabezados. Pueden llevar el atributo color, por ejemplo: H1 { color: blue } H2 { color: # }

18 Ejemplo 2_1 18 Guardamos el documento con el nombre de: Ejemplo 2_1 <HTML> <HEAD> <TITLE>Ejemplo 2_1</TITLE> </HEAD> <BODY> <H1>LOS ENCABEZADOS (este es un encabezado H1)</H1> <br> <h3 align="center"> <font color="00800">este segundo titular es H3 y de color verde </font></h3> <!-- Aquí va un comentario que no es interpretado por el navegador --> <P>Esta es un página con titulares, que tiene también un párrafo (este) y unos cuantos saltos de línea (más abajo).</p> Primer salto<br> Segundo salto<br> Tercer salto<br> </BODY> </HTML>

19 Marquesinas 19 <marquee> Las marquesinas son líneas de texto que pueden desplazarse de un lado a otro de la ventana en forma lineal. Por defecto se desplaza de derecha a izquierda indefinidamente, pero se pueden modificar estas propiedades. Atributo direction: permite modificar la dirección en la que se mueve el texto. down: de arriba abajo up: de abajo a arriba right, de derecha a izquierda o left de izquierda a derecha.

20 Marquesinas 20 Al archivo Ejemplo 2_1 le añadimos al principio de la sección <body> la siguiente orden. Volvemos a guardar el archivo (ejemplo 2_2). Atributo behavior: este atributo modifica el tipo de movimiento. alternate: de lado a lado de la ventana como si rebotara. scroll: de un lado a otro, continuamente. slide: de un lado a otro, pero una sola vez Atributo bgcolor: nos permite cambiar el color de fondo de la marquesina. <marquee bgcolor="#006699" behavior="alternate" direction="right"> <font color= #FFFF00 size="5">ejemplo de marquesina </font> </marquee>

21 HIPERTEXTO 21 El hipertexto permite conectar entre sí diferentes documentos, elementos multimedia, páginas web, etc. Los elementos sobre los que se inserta el enlace o hipervínculo debe estar entre las etiquetas <a> y </a>. La etiqueta <a> llevará siempre un atributo, que puede ser: href name

22 HIPERTEXTO Realizar la página enlace0 (Santiago) 22 <A HREF="URL">...</A>: Es el más habitual de los atributos y sirve para saltar entre diferentes URLs. <A HREF=" esta página</a> <A NAME="parte1">Primera parte</a>: Utilizamos el atributo name para dar nombre a una sección de nuestro documento. Posteriormente, cuando en nuestro documento queramos incluir un vínculo a dicha sección escribiremos: <A HREF="#parte1">Ir a la primera parte</a>

23 HIPERTEXTO Ejemplo 3 23 <HTML> <HEAD> <TITLE>Ejemplo 3</TITLE> </HEAD> <BODY> <A NAME="arriba"><H1>Página de enlaces</h1></a> <A HREF="#abajo">Ir abajo</a><br> <A HREF="ejemplo1_1.htm">Ir a ejemplo 1</A><br><br> <A HREF=" a peleteiro</a><br> <br>.<br>.<br>.<br>.<br>.<br>.<br>.<br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br>.<br>.<br>.<br>.<br>.<br> <A NAME="abajo"><br></A> <A HREF="#arriba">Ir arriba</a> </BODY> </HTML>

24 HIPERTEXTO Tipos de referencias 24 Referencia absoluta Referencia relativa al sitio Punto de fijación Enlaza con una ubicación externa al sitio en el que se encuentra el documento. La ubicación pertenece a Internet, por lo que hay que empezar la referencia por el nombre del dominio y a veces el nombre de la página. Si no se escribe el nombre de la página se cargará la página de inicio asociada al dominio. <a href= http// > Colegio Peleteiro

25 HIPERTEXTO Tipos de referencias 25 Carpeta principal Documento.htm CARPETA Ejemplo1_1.htm Referencia absoluta Referencia relativa al sitio Punto de fijación Enlaza con un documento Carpeta que principal se encuentra en el mismo directorio que el documento actual. Documento.htm Documento que contiene Deberá indicarse el nombre el enlace y la extensión del archivo. Por ejemplo: CARPETA 1 <a href= ejemplo1_1.htm Primer ejercicio</a> Ejemplo1_1.htm Si el documento con el que se quiere enlazar esta en una carpeta diferente a la actual deberá indicarse, delante del nombre del archivo, la ruta de acceso a dicha carpeta. CARPETA 2 <a href= carpeta1/ejemplo1_1.htm Primer ejercicio</a> CARPETA 2 (suponemos que carpeta1 está dentro de la carpeta o directorio donde se encuentra el documento)

26 HIPERTEXTO Tipos de referencias 26 Referencia absoluta Referencia relativa al sitio Punto de fijación Enlaza con un punto determinado del documento actual o de otro diferente. Para definir el punto de enlace utilizaremos la etiqueta <a name>. Por ejemplo: <a name= arriba > Título de esa sección </a> La sintaxis del enlace sería: <a href= nombre del documento#nombre del punto de enlace texto que lleva el enlace </a> opcional

27 Ejemplo 3_1 27 <HTML> <HEAD> <TITLE>Ejemplo 3_1</TITLE> </HEAD> <BODY> <A NAME="arriba"><H1>Página de enlaces</h1></a> <A HREF="#abajo">Ir abajo</a><br> <A HREF="imagenes\enlace0.htm">Ir a enlace</a><br><br> <A HREF=" a peleteiro</a><br> <br>.<br>.<br>.<br>.<br>.<br>.<br>. Enlace a una imagen<br><br> <a href="imagenes/rosas.jpg" target="_blank" > foto rosas </a> <br><br><br><br><br><br> Para realizar este ejercicio se hará una copia del archivo ejemplo 3 y se le añadirán las línea marcadas como nuevas. El archivo se guardará con el nombre de Ejemplo 3_1 Enlace a un archivo pdf<br><br> <br><a href="imagenes/santiago.pdf" target="_blank" > Archivo pdf <br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br>.<br>.<br>.<br>.<br>.<br> <A NAME="abajo"><br></A> <A HREF="#arriba">Ir arriba</a> </BODY> </HTML>

28 HIPERTEXTO Destino del enlace 28 El destino del enlace determina en qué ventana va a ser abierta la página vinculada. El atributo target determina el destino del enlace. Valor _blank _parent _self _top Significado Abre el documento vinculado en una ventana nueva del navegador. Abre el documento vinculado en la ventana del marco que contiene el vínculo. Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo. Abre el documento vinculado en la ventana completa del navegador.

29 Ejemplo: Enlaces 29 Guardar este documento con el nombre de ENLACE. <html> <head> <title> Página de Enlaces</title> </head> <body> <br><br><br><br> <a href =" target="_blank"> Visita a Peleteiro (_blank) </a> <br><br><br><br> <a href =" target= "_parent"> Visita a la NASA (_parent) </a> <br><br><br><br> </body > </html>

30 HIPERTEXTO Cambiar el color de los enlaces 30 Se puede modificar el color predefinido para el enlace (normal, visitado y activo). También se puede eliminar el típico subrayado. Los atributos que modifican el color del enlace pertenecen a la etiqueta <Body>. link = código de color : para los enlaces normales. vink = código de color : para los enlaces visitados. alink = código de color : para los enlaces activos (o en el momento de ser pulsados. Para eliminar el subrayado utilizaremos el atributo style="text-decoration:none en la etiqueta <A>.

31 STYLE 31 Permite definir reglas de estilo en el encabezado del documento. Puede utilizarse para poner un color de fondo al documento o adjudicar un color de fuente y fondo a las cabeceras.

32 <html> <head> <title> Ejercicio 3_2 </title> <body> </BODY> </HTML> <style> body { </style> </head> background-color: #FFCC66;} h1 {color: white; background-color: #FC9804;} <center><h1>tecnología </h1></center> <br> <br><br> <br><br> <br> <center><h1>información </h1></center> 32 Ejemplo 3_2 En el estilo del body añadimos la siguiente línea: background-image: url(imagenes/rosas.jpg)

33 Background-repeat 33 El valor inicial de "background-repeat es "repetir. Por eso en el ejemplo anterior la imagen de fondo se repite en sentido horizontal y vertical, formando un mosaico. Para que la imagen se repita solamente en sentido horizontal debemos usar: BODY {background-color: # FFFFFF; background-image: url (imagenes/rosas.jpg); background-repeat: repeat-x; } Para que la imagen se repita solamente en sentido vertical debemos usar: BODY {background-color: # FFFFFF; background-image: url (imágenes/rosas.jpg) background-repeat: repeat-y;}

34 Background-repeat 34 Finalmente, para que la imagen aparezca solamente una vez debemos usar: BODY {background-color: # FFFFFF; background-image: url (bg-flecha.gif); background-repeat: no-repeat; } Para colocar la imagen en el centro se utilizó backgroundposition

35 35 Ubicación de la imagen de fondo background-position Por defecto, una imagen de fondo se posiciona en la esquina superior izquierda de la pantalla. La propiedad background-position permite cambiar el valor por defecto y posicionar la imagen de fondo en cualquier lugar de la pantalla. Las coordenadas se pueden indicar como porcentajes del ancho de la pantalla, como unidades fijas (píxeles, centímetros, etc.) o se pueden usar las palabras "top" (superior), "bottom" (inferior), "center" (centro), "left" (izquierda) y "right" (derecha).

36 36 background-position

37 background-position 37 El modelo siguiente ilustra cómo funciona el sistema: La tabla siguiente proporciona varios ejemplos.

38 IMÁGENES 38 SRC ALIGN ALT BORDER WIDTH HEIGHT Para colocar una imagen debemos utilizar la etiqueta <img>. Los principales atributos de la etiqueta son: SRC = ruta_imagen ALIGN= left/right/top/middle/bottom. ALT = texto explicativo. BORDER=valor del borde. WIDTH= valor del ancho, HEIGHT = valor de la altura

39 IMÁGENES - SRC 39 Establece la localización de la imagen que queremos insertar, es decir, la ruta de acceso al archivo gráfico (imagen). La ruta de acceso puede ser relativa a la estructura de carpetas del sitio web o absoluta, en cuyo caso se debe dar la URL completa del archivo gráfico. <img SRC="imagenes/rosas.jpg"> (Creamos una carpeta llamada IMÁGENES y en ella guardamos una imagen llamada rosas.jpg)

40 IMÁGENES - ALIGN 40 Establece la alineación que va a tener la imagen en la página con respecto a la línea en la que se encuentra. La alineación puede ser: Horizontal (left o right) Vertical (top o bottom)

41 Ejemplo: Imágenes 41 <HTML> <HEAD> <TITLE> IMÁGENES </TITLE> </HEAD> <BODY> <marquee bgcolor="#006699" behavior="alternate" direction="rigth"> <font color="#ffff00" size="5"> IMÁGENES </font> </marquee> <H1> PÁGINA CON IMÁGENES </H1> <br> <h3 align="center"> <font color="00800"> Imagen sin texto </font></h3> <img SRC="imagenes/rosas.jpg"> <img src="imagenes/rosas.jpg" align="left> <BR><BR><BR><BR> En este ejemplo el texto aparece a la derecha de la imagen y si es muy extenso de dividirá en varias líneas. En este ejemplo el texto aparece a la derecha de la imagen y si es muy extenso de dividirá en varias líneas. </BODY> </HTML>

42 IMÁGENES - ALT 42 Permite mostrar una descripción de la imagen cuando no puede visualizarse o cuando pasamos el cursor del ratón sobre ella. <img alt="ramo de rosas" SRC="imagenes/rosas.jpg">

43 IMÁGENES - border 43 Este atributo permite definir un borde para la imagen. Puede tomar valores numéricos que representan el grosor del borde expresado en píxeles. Por defecto aparecerá el color negro a no ser que la imagen sea un enlace, en cuyo caso el color del borde será el color establecido por los vínculos. <img alt="ramo de rosas" SRC="imagenes/rosas.jpg" border="6">

44 IMÁGENES Y ENLACES 44 Podemos utilizar una imagen como objeto de enlace. <a href= <img alt="ramo de rosas" SRC="imagenes/rosas.jpg" border="6"> </a> Si no se desea el borde debemos escribir border= 0

45 TABLAS 45 Las tablas son posiblemente la manera más clara y cómoda de organizar la información. También es el modo más adecuado de maquetar texto y gráficos. Proporciona un mayor control sobre los textos que el parámetro ALIGN. Para definir una tabla, primero se deben especificar las características de la tabla, luego las de cada fila y dentro de ésta, cada celda. De un modo simplificado, el código de una tabla de una fila y dos columnas sería el siguiente: <TABLE> <TR> <TD> Contenido de la 1ª celda </TD> <TD> Contenido de la 2ª celda </TD> </TR> </TABLE>

46 TABLAS 46 Para mejorar el aspecto de la tabla, podemos añadir una serie de atributos a la etiqueta <table> que nos van a permitir modificar los siguientes parámetros: border cellspacing cellpadding width bgcolor background bordercolor align Grosor del borde que se dibujará alrededor de las celdas. Define el número de píxeles que separarán las celdas. Especifica el número de píxeles que habrá entre el borde de una celda y su contenido. Especifica la anchura de la tabla. Color de fondo. Imagen de fondo. Color del borde. Alinea la tabla a la izquierda (LEFT), derecha (RIGHT) o centro (CENTER)

47 TABLAS - Filas 47 Cada fila se define con una etiqueta <TR>, que puede tener los siguientes atributos: align valign Alinea el contenido de las celdas de la fila horizontalmente a izquierda (LEFT), a derecha (RIGHT) o centro (CENTER). Alinea el contenido de las celdas de la fila verticalmente arriba (TOP), abajo (BOTTOM) o centro (MIDDLE).

48 TABLAS - Celdas 48 Cada celda se define con una etiqueta <td> o <th> Estas etiquetas son equivalentes, pero <th> se utiliza para encabezados, de modo que su interior se escribirá por defecto en negrita y centrado. La etiqueta <td> tiene una serie de atributos que tienen como objetivo controlar el formato de la celda y su contenido.

49 TABLAS Atributos de la celda 49 align valign width nowrap colspan bgcolor background bordercolor rowspan Alinea el contenido de la celda horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro (CENTER). Alinea el contenido de la celda verticalmente arriba (TOP), abajo (BOTTOM) o centro (MIDDLE) Especifica el ancho de la celda en píxeles Impide que, en el interior de la celda, se rompa la línea de texto aunque esta sea larga (si no figura nowrap el texto se distribuye en varios renglones respetando el ancho de la celda). Especifica el número de celdas de la fila situadas a la derecha de la actual que se unen a ésta (contando la celda actual). Color de fondo. Imagen de fondo. Color de borde Especifica el número de celdas de la columna situadas debajo de la actual que se unen a ésta

50 TABLAS - Título 50 La etiqueta <CAPTION> permite incluir un título en la tabla. Esta etiqueta tiene un atributo: ALIGN. ALIGN puede tomar dos valores: TOP (valor por defecto) pondrá el título en la parte superior de la tabla. BOTTOM coloca el título al final de la tabla.

51 LISTAS 51 Permiten enumerar una serie de contenidos. Todas ellas se pueden meter unas dentro de otras formando árboles o jerarquías. El formato general es el siguiente: <tipo_lista> <LI>Primer elemento <LI>Segundo elemento </tipo_lista> Donde <tipo_lista> pueden ser listas desordenadas <ul>, listas ordenadas <ol>, o listas de definiciones <dl>.

52 LISTAS Listas desordenadas (I) 52 La etiqueta <UL> nos permite presentar listas de elementos sin orden alguno. Cada elemento de la lista irá normalmente precedido por un círculo como se puede ver en el ejemplo: <ul> <LI>Primer elemento <LI>Segundo elemento </ul> Primer elemento Segundo elemento

53 LISTAS Listas desordenadas (II) 53 La etiqueta <UL> admite el parámetro TYPE donde se le puede indicar al navegador el dibujo que precederá a cada elemento de la lista. Para mayor flexibilidad se admite también como parámetro de la etiqueta <LI>. <ul> <LI type= square >Primer elemento <LI type= circle >Segundo elemento <LI type= disc >Tercer elemento </ul> Primer elemento osegundo elemento Tercer elemento

54 LISTAS Listas ordenadas (I) 54 La etiqueta <OL> nos permite presentar listas de elementos ordenados de menor a mayor. Normalmente cada elemento de la lista irá precedido por su número en el orden. <ol> <LI>Primer elemento <LI>Segundo elemento </ol> 1. Primer elemento 2. Segundo elemento

55 55 <ol> LISTAS Listas ordenadas (II) La etiqueta <OL> admite una serie de atributos para cambiar sus características. TYPE Indica al navegador el tipo de numeración que precederá a cada elemento de la lista. Puede ser igual a l, a, A, i, I. START = num,indica al navegador el número por el que se empezarán a contar los elementos de la lista. <LI TYPE="a">Primer elemento <LI TYPE="A">Segundo elemento <LI TYPE="i">Tercer elemento <LI TYPE="I">Cuarto elemento <LI TYPE= 1">Quinto elemento </ol> a. Primer elemento B. Segundo elemento iii. Tercer elemento IV. Cuarto elemento 5. Quinto elemento

56 LISTAS Listas de definiciones 56 Es el único tipo de lista que no utiliza la etiqueta <LI>. Al presentar una lista de definiciones, tiene que plasmar de manera distinta el objeto definido y la definición. Esto se hace por medio de las etiquetas <DT> y <DD> de la siguiente manera: <DL> <DT>Primer elemento <DD> Definición del primer elemento. <DT>Segundo elemento <DD> Definición del segundo elemento. </DL> Primer elemento Definición del primer elemento Segundo elemento Definición del segundo elemento.

57 57 Paleta de colores estándar Se puede usar cualquiera de las palabras clave o números hexadecimales mostrados en la tabla de arriba. DIRECCIONES DE INTERÉS:

58 Actividad Realiza una copia del documento Ejemplo 2_2 Sobre la copia define distintas marquesinas. En distintas partes del documento Con distintos movimientos Y con distintos tipos de textos. 58 Guarda el archivo con el nombre de Copia Ejemplo 2_2 NOTA: Combina los encabezados con la marquesina. VOLVER

59 Ejercicio de enlaces 59 Crea tres documentos HTML cada uno con nombres diferentes. Créalos usando los tags que hemos visto en los capítulos anteriores. En el primer documento crea hipervínculos hacia los otros dos documentos. Cada uno de los otros documentos debe tener vínculos hacia los otros documentos. Marca una parte de alguno de los documentos usando el tag <A> y el atributo "name". Haz que la parte que marcaste en el punto anterior sea accesible a través de un hipervínculo en cada uno de los documentos.

CURSO DE HTML. María Cives Senra

CURSO DE HTML. María Cives Senra CURSO DE HTML María Cives Senra 2 Curso de Básico de HTML 3 HTML HTML es un lenguaje que permite definir páginas web. Este lenguaje permite describir hipertexto, es decir, texto presentado de forma estructurada

Más detalles

Curso Básico de HTML

Curso Básico de HTML Curso Básico de HTML Qué es HTML? HTML es un pseudo-lenguaje de programación, no es un lenguaje en sí. Utiliza tags o etiquetas específicas para crear contenido y dar una estructura al documento. Existen

Más detalles

Qué es HTML? Estructura interna de una página HTML. Cabecera de la página <head>

Qué es HTML? Estructura interna de una página HTML. Cabecera de la página <head> Qué es HTML? El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada,

Más detalles

2. Manejar los elementos básicos de un lenguaje usado en la creación de Páginas Web. 2.1 Definición de objetos y contenidos de la página web.

2. Manejar los elementos básicos de un lenguaje usado en la creación de Páginas Web. 2.1 Definición de objetos y contenidos de la página web. 2. Manejar los elementos básicos de un lenguaje usado en la creación de Páginas Web. 2.1 Definición de objetos y contenidos de la página web. INTERNET En 1969, el Departamento de Defensa de E.U construyo

Más detalles

INTRODUCCIÓN A HTML. Qué es HTML. Etiquetas

INTRODUCCIÓN A HTML. Qué es HTML. Etiquetas INTRODUCCIÓN A HTML Qué es HTML El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto

Más detalles

Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta ADDRESS ADDRESS CITE CITE B: NEGRITA B: NEGRITA.

Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta ADDRESS ADDRESS CITE CITE B: NEGRITA B: NEGRITA. En la presente tabla se hace una comparación entre las etiquetas de formato de texto. Netscape no soporta : ni (tachado). Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta

Más detalles

Unidad 1.- Fundamentos de sitios web. El lenguaje HTML. Desarrollo de aplicaciones Web. Felipe LC

Unidad 1.- Fundamentos de sitios web. El lenguaje HTML. Desarrollo de aplicaciones Web. Felipe LC Unidad 1.- Fundamentos de sitios web. El lenguaje HTML Desarrollo de aplicaciones Web. Felipe LC La actividad #1 En qué consistió la actividad 1? Qué conceptos aprendimos? Demos algunos ejemplos. Qué aprendimos

Más detalles

ETIQUETAS PRINCIPALES

ETIQUETAS PRINCIPALES HTML... 1 ETIQUETAS PRINCIPALES... 1 ETIQUETAS DE TÍTULOS, PÁRRAFOS Y SEPARACIONES... 3 FORMATO DE TEXTO... 5 LISTAS... 6 ENLACES E IMÁGENES... 7 TABLAS... 9 HTML Las páginas web son documentos de texto,

Más detalles

La primera etiqueta que vamos a aprender es aquella por la que deben empezar todos los documentos que queramos sean considerados HTML; esta es:

La primera etiqueta que vamos a aprender es aquella por la que deben empezar todos los documentos que queramos sean considerados HTML; esta es: TEMA P1. CURSO BÁSICO DE PROGRAMACIÓN EN LENGUAJE HTML HTML es un acrónimo de HiperText Markup Language que, traducido al español, quiere decir algo así como lenguaje de definición por marcas para hipertexto,

Más detalles

Transparencias de J2EE. Tema 2: HTML. Uploaded by Ingteleco

Transparencias de J2EE. Tema 2: HTML. Uploaded by Ingteleco Transparencias de J2EE Tema 2: HTML Uploaded by Ingteleco http://ingteleco.webcindario.com ingtelecoweb@hotmail.com La dirección URL puede sufrir modificaciones en el futuro. Si no funciona contacta por

Más detalles

RESUMEN HTML. Elementos de estructura

RESUMEN HTML. Elementos de estructura RESUMEN HTML Elementos de estructura primer elemento que enmarca todo el fichero HTML (obligatorio) zona de cabecera (obligatorio) definición de un título (obligatorio) cuerpo

Más detalles

Capítulo 0. Repaso de HTML

Capítulo 0. Repaso de HTML ESCUELA TÉCNICA SUPERIOR DE INGENIERÍA ICAI Desarrollo de Aplicaciones web Cristina Puente, Rafael Palacios 2010-2011 HTTP (repaso) El protocolo HTTP (Hyper-Text Transfer Protocol) es un protocolo encargado

Más detalles

Actividad 3: Codificación básica de un texto en HTML

Actividad 3: Codificación básica de un texto en HTML Actividad 3: Codificación básica de un texto en HTML Abrir un editor de texto, por ejemplo en nuestro caso notepad, después codificar los elementos básicos y guardar en una carpeta con la extensión.html

Más detalles

5.CREACIÓN DE TABLAS.

5.CREACIÓN DE TABLAS. 5.CREACIÓN DE TABLAS. Cómo se crea una tabla?. Para crear las tablas será necesario usar una nueva etiqueta: TABLE, que significa, en inglés, tabla. Esta etiqueta consta de instrucción de inicio,, e instrucción

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

Tablas Formularios Frames

Tablas Formularios Frames Tablas Formularios Frames Una tabla nos permite organizar y distribuir los espacios de la página de la manera más optima. Nos puede ayudar a : generar texto en columnas como los periódicos prefijar los

Más detalles

Hipertexto y Marcadores Hipertexto: Escritura no secuencial, un texto que bifurca, que permite que el lector elija y que se lea mejor en una pantalla

Hipertexto y Marcadores Hipertexto: Escritura no secuencial, un texto que bifurca, que permite que el lector elija y que se lea mejor en una pantalla HTML 5 (II) Hipertexto y Marcadores Hipertexto: Escritura no secuencial, un texto que bifurca, que permite que el lector elija y que se lea mejor en una pantalla interactiva. Serie de bloques de texto

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

Práctica de HTML (Curso )

Práctica de HTML (Curso ) Práctica de HTML (Curso 2007-2008) Introducción HTML (Hypertext Markup Language) es un lenguaje estándar utilizado en Internet para representar la información intercambiada por sus usuarios en forma de

Más detalles

Introducción a HTML Manual-Estructura Básica. Prof. César S. Rangel Farias.

Introducción a HTML Manual-Estructura Básica. Prof. César S. Rangel Farias. Introducción a HTML Manual-Estructura Básica. Prof. César S. Rangel Farias. Índice. 2 HTML... 3 Estructura Básica.... 3 Formato de texto... 3 Estilos... 3 Alineaciones de Párrafo... 4 Colores... 5 Listas...

Más detalles

TABLE. La etiqueta general, que engloba a las siguientes.

TABLE. La etiqueta general, que engloba a las siguientes. TABLE La etiqueta general, que engloba a las siguientes. TR TD En el siguiente nivel, dentro de TABLE, están las etiquetas para formar cada fila de la tabla. Hay que repetirlas tantas veces como filas

Más detalles

Curso HTML. Introducción. Estructura de un documento html

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

Más detalles

1. Introducción a HTML

1. Introducción a HTML Introducción a HTML 1. Introducción a HTML 1. Introducción a HTML Qué es HTML? El HTML (Hyper Text Markup Language) es un lenguaje que sirve para escribir hipertexto, es decir, documentos de texto estructurado,

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

Unidad I - INTRODUCCIÓN AL HTML. Profesor: Marcos Tulio Jerez Bastidas. Barinas, abril 2015

Unidad I - INTRODUCCIÓN AL HTML. Profesor: Marcos Tulio Jerez Bastidas. Barinas, abril 2015 República Bolivariana de Venezuela Universidad Nacional Experimental de los Llanos Occidentales Ezequiel Zamora Programa de Ingeniería, Arquitectura y Tecnología Subproyecto de Algoritmo y Programación

Más detalles

GUIA 3. Tema: Hipervínculos. Qué es un hipervínculo?

GUIA 3. Tema: Hipervínculos. Qué es un hipervínculo? GUIA 3 Tema: Hipervínculos. Objetivo General Crear una página de inicio para que los alumnos puedan aplicar los diferentes tipos de enlaces de hipertexto que existen en la web. Objetivos Específicos Crear

Más detalles

HTML GUIA 5 TABLAS EN HTML

HTML GUIA 5 TABLAS EN HTML HTML GUIA 5 TABLAS EN HTML Hoy en día, la mayoría de las páginas web se basan en tablas, ya que resultan de gran utilidad al mejorar notablemente las opciones de diseño. Todos los objetos se alinean por

Más detalles

(X)HTML. Tablas. Las tablas son grupos de celdas que contienen información.

(X)HTML. Tablas. Las tablas son grupos de celdas que contienen información. Las tablas son grupos de celdas que contienen información. Toda celda de una tabla puede albergar cualquier elemento disponible en una página web (siempre que pueda incluirse en el elemento body). Para

Más detalles

Manual básico de HTML

Manual básico de HTML Manual básico de HTML 1 Índice 1Estructura básica...3 Atributos de la etiqueta BODY...3 2Formación de parráfos:...4 Cabeceras / Headings...4 Párrafos / Paragraph...4 Múltiples espacios...4 Salto línea...5

Más detalles

Texto en movimiento. <MARQUEE> Texto que se desplaza </MARQUEE>

Texto en movimiento. <MARQUEE> Texto que se desplaza </MARQUEE> Texto en movimiento Vamos a ver distintas soluciones para conseguir texto en movimiento: haciendo uso del lenguaje HTML (las marquesinas), con un GIF animado, con Javascript, etc. Marquesinas (Marquees)

Más detalles

ESTRUCTURA DEL CÓDIGO HTML5

ESTRUCTURA DEL CÓDIGO HTML5 ESTRUCTURA DEL CÓDIGO HTML5 1. DocType Es la etiqueta que se escribe en la primera línea del código. Permite declarar el tipo de documento. Es decir, el doctype indica que el documento está escrito siguiendo

Más detalles

LENGUAJE DE MARCADO HIPERTEXTO HTML

LENGUAJE DE MARCADO HIPERTEXTO HTML LENGUAJE DE MARCADO HIPERTEXTO HTML 1. QUÉ ES HTML? HTML, siglas de Lenguaje de Marcas de HiperTexto (HyperText Markup Language), hace referencia al lenguaje de marcado Hipertexto. HTML es base de todo

Más detalles

5. EL EDITOR DE TEXTO HTML.

5. EL EDITOR DE TEXTO HTML. 5. EL EDITOR DE TEXTO HTML. El editor de texto HTML proporciona una interfaz muy parecida a la de un procesador de textos para generar de una forma cómoda el código HTML correspondiente a los elementos

Más detalles

Las practicas deberás hacerlas sin la ayuda de tu asesor

Las practicas deberás hacerlas sin la ayuda de tu asesor 3 Introducción HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que

Más detalles

Imágenes de fondo [background-image] La propiedad CSS background-image se usa para insertar una imagen de fondo.

Imágenes de fondo [background-image] La propiedad CSS background-image se usa para insertar una imagen de fondo. Lección 3: Colores y fondos En esta lección aprenderás a aplicar colores y colores de fondo a tus sitios web. Examinaremos también métodos avanzados para posicionar y controlar imágenes de fondo. Se explicarán

Más detalles

Páginas WEB Parte II INTRODUCCIÓN A LAS TECNOLOGÍAS INFORMÁTICAS. Escuela de Ingeniería de Sistemas y Computación Universidad del Valle

Páginas WEB Parte II INTRODUCCIÓN A LAS TECNOLOGÍAS INFORMÁTICAS. Escuela de Ingeniería de Sistemas y Computación Universidad del Valle Páginas WEB Parte II INTRODUCCIÓN A LAS TECNOLOGÍAS INFORMÁTICAS Escuela de Ingeniería de Sistemas y Computación Universidad del Valle Contenido Implementación de Sitios Web Herramientas de desarrollo

Más detalles

TEMA 5: INTERNET Y PÁGINAS WEB. Realización de páginas web con HTML. Servicios de Internet

TEMA 5: INTERNET Y PÁGINAS WEB. Realización de páginas web con HTML. Servicios de Internet TEMA 5: INTERNET Y PÁGINAS WEB Realización de páginas web con HTML. Servicios de Internet Qué vamos a ver? Qué es el lenguaje HTML Uso de sus características básicas: párrafos, títulos, y algunos estilos

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

HOJAS DE ESTILOS EN CASCADA CSS (Cascading Style Sheet)

HOJAS DE ESTILOS EN CASCADA CSS (Cascading Style Sheet) HOJAS DE ESTILOS EN CASCADA CSS (Cascading Style Sheet) 1. QUÉ ES UNA HOJA DE ESTILOS? Las hojas de estilos son un conjunto de instrucciones, el cual permiten manejar el formato y presentación de contenido

Más detalles

Universidad Politécnica de El Salvador Computación Básica. HTML Guía 1. Requerimientos y material. Qué es HTML? Etiquetas

Universidad Politécnica de El Salvador Computación Básica. HTML Guía 1. Requerimientos y material. Qué es HTML? Etiquetas Universidad Politécnica de El Salvador Computación Básica HTML Guía 1 Requerimientos y material Internet es un medio que no precisa de mucho conocimiento, el prerrequisito inmediato para poder usar esta

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

Texto y Organización del contenido

Texto y Organización del contenido Opciones de formateo de texto y de organización del contenido de una página. Texto y Organización del contenido Bases de Datos 2012/2013 Luis Valencia Cabrera Contenido Organización del texto. Encabezado...

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

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

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

4º ESO INFORMÁTICA TEMA 7: LENGUAJE HTML ACTIVIDADES. A continuación abriéremos el bloc de notas: Inicio>Programas>Bloc de notas.

4º ESO INFORMÁTICA TEMA 7: LENGUAJE HTML ACTIVIDADES. A continuación abriéremos el bloc de notas: Inicio>Programas>Bloc de notas. 4º ESO INFORMÁTICA TEMA 7: LENGUAJE HTML ACTIVIDADES FECHA LÍMITE: 13 de mayo Práctica 1: Lo primero que vamos a hacer es crear en nuestro pendrive una carpeta que llamaremos WEBnuestronombre como por

Más detalles

CURSO PÁGINAS WEB HTML:

CURSO PÁGINAS WEB HTML: CURSO PÁGINAS WEB HTML: CÓDIGO EN EL BLOC DE NOTAS Colegio Concertado Valdecás HTML: EDICIÓN DE PÁGINAS WEB 1. Cómo escribir una página web? Detrás de las páginas que vemos por Internet se esconde un código,

Más detalles

Construcción de páginas web. San&ago Mar+n de Jesús

Construcción de páginas web. San&ago Mar+n de Jesús Construcción de páginas web San&ago Mar+n de Jesús COLORES 2 LOS COLORES Existen diversas e&quetas y atributos en HTML que permiten dar color a los elementos de una página o incluso el color de fondo de

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

NATIONAL SOFT HOTELES GUÍA DE CONFIGURACIÓN DEL COMPROBANTE DE RESERVACIÓN

NATIONAL SOFT HOTELES GUÍA DE CONFIGURACIÓN DEL COMPROBANTE DE RESERVACIÓN NATIONAL SOFT HOTELES Versión 3.0 GUÍA DE CONFIGURACIÓN DEL COMPROBANTE DE RESERVACIÓN National Soft de México INDICE GENERAL 1. INTRODUCCIÓN... 2 2. ESTABLECER LOS PARÁMETROS DE ENVÍO... 2 3. EDITAR EL

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

Conceptos básicos de Dreamweaver CS3

Conceptos básicos de Dreamweaver CS3 Conceptos básicos de Dreamweaver CS3 Empezar con Dreamweaver Al abrir Dreamweaver elegimos un documento nuevo y seleccionamos la Categoría Página básica, HTML. Antes de empezar con Dreamweaver debemos

Más detalles

Notas sobre HTML Estándar

Notas sobre HTML Estándar Notas sobre HTML Estándar Estructura... 2 Insertar comentarios en el código... 3 Salto de línea. ... 3 Línea horizontal. ... 3 Encabezados ... 4 Párrafos. Etiqueta ... 4 Cita textuales.

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

DIRECCIÓN GENERAL DEL BACHILLERATO CENTRO DE ESTUDIOS DE BACHILLERATO N 2 LIC. JESÚS REYES HEROLES

DIRECCIÓN GENERAL DEL BACHILLERATO CENTRO DE ESTUDIOS DE BACHILLERATO N 2 LIC. JESÚS REYES HEROLES PROFA. STEPHANY LUCIOTTO V. ACADEMIA: INFORMÁTICA ASIGNATURA: PAG. WEB GUIA DE ESTUDIO PERIODO: 2012-2013 A ALUMN@: GRUPO: FECHA: ESCRIBE EN EL PARENTESIS SI LA RESPUESTA ES VERDADREA O FALSA 1. Las páginas

Más detalles

Técnicas de visualización

Técnicas de visualización Técnicas de visualización LENGUAJE HTML Máster en Tecnologías de la Información Geográfica Laboratori d Informació Geogràfica i de Teledetecció (LIGIT) Departament de Geografia. UAB Anna Jiménez Introducción

Más detalles

HIPERVÍNCULOS, LINKS O ENLACES HTML. ETIQUETA <A>. ATRIBUTOS HREF, TARGET Y TITLE. TIPOS DE HIPERVÍNCULOS. ANCLAS O ANCHORS (CU00717B)

HIPERVÍNCULOS, LINKS O ENLACES HTML. ETIQUETA <A>. ATRIBUTOS HREF, TARGET Y TITLE. TIPOS DE HIPERVÍNCULOS. ANCLAS O ANCHORS (CU00717B) APRENDERAPROGRAMAR.COM HIPERVÍNCULOS, LINKS O ENLACES HTML. ETIQUETA . ATRIBUTOS HREF, TARGET Y TITLE. TIPOS DE HIPERVÍNCULOS. ANCLAS O ANCHORS (CU00717B) Sección: Cursos Categoría: Tutorial básico

Más detalles

Manual FOXTIR Editor HTML MOBILE MARKETING

Manual FOXTIR Editor HTML MOBILE MARKETING Manual FOXTIR Editor HTML MOBILE MARKETING Editor de HTML: en las siguientes páginas te explicaré una por una las diferentes funciones del Editor de HTML. Una vez ampliada la pantalla al espacio que te

Más detalles

REPASO DE TABLAS HTML

REPASO DE TABLAS HTML REPASO DE TABLAS HTML Las tablas HTML se dividen en filas y celdas. A la hora de dibujar tablas hay que hacerlo de arriba a abajo y de izquierda a derecha. Es decir, primero empezaremos dibujando la primera

Más detalles

La etiqueta TABLE. Hay que cerrarla con </TABLE>

La etiqueta TABLE. Hay que cerrarla con </TABLE> La etiqueta TABLE La etiqueta sirve para crear tablas. Tiene diversos parámetros: Border: indica el borde de la tabla. Si se omite, el valor por defecto es 0. Cellpadding: varía el espacio que

Más detalles

HTML 2 / Atributos/etiquetas(Tags)

HTML 2 / Atributos/etiquetas(Tags) HTML 2 / Atributos/etiquetas(Tags) ATRIBUTOS bgcolor=#ff0000 Asigna un color en hexadecimal o en RGB a el fondo de todo el body ( la página) FGCOLOR="#00FF00" Asigna un color en hexadecimal

Más detalles

Identificar cuál es la estructura de una página Web y sus principales secciones. Desarrollar una página Web en un editor.

Identificar cuál es la estructura de una página Web y sus principales secciones. Desarrollar una página Web en un editor. MÓDULO 2. Introducción Después de conocer los conceptos básicos sobre el lenguaje de programación HTML, en este módulo identificaremos la estructura de una página Web y lo haremos revisando el lenguaje

Más detalles

Universidad de El Salvador Facultad Multidisciplinaria de Occidente Departamento de Ingeniería

Universidad de El Salvador Facultad Multidisciplinaria de Occidente Departamento de Ingeniería Universidad de El Salvador Facultad Multidisciplinaria de Occidente Departamento de Ingeniería Este es un documento para producir documentos en HTML, "Lenguaje de Marcación de Hipertexto", usado en la

Más detalles

QUÉ ES UNA HOJA DE ESTILOS? Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que definimos el formato que va a tomar un

QUÉ ES UNA HOJA DE ESTILOS? Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que definimos el formato que va a tomar un QUÉ ES UNA HOJA DE ESTILOS? Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que definimos el formato que va a tomar un determinado elemento de una página web. Siglas CCS significa "Cascading

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

ACTIVIDADES DE HTML. <TITLE> ejemplo de código HTML</TITLE> Aquí va el contenido de la página

ACTIVIDADES DE HTML. <TITLE> ejemplo de código HTML</TITLE> Aquí va el contenido de la página ACTIVIDADES DE HTML 1.- Estructura básica de un archivo HTML: ejemplo de código HTML Aquí va el contenido de la página Guardamos el archivo

Más detalles

PEQUEÑOS TRUCOS PARA LA REALIZACIÓN DE UNA WEB CON HTML. <title>seguridad Informática por nombre y apellido alumno</title>

PEQUEÑOS TRUCOS PARA LA REALIZACIÓN DE UNA WEB CON HTML. <title>seguridad Informática por nombre y apellido alumno</title> PEQUEÑOS TRUCOS PARA LA REALIZACIÓN DE UNA WEB CON HTML Se establece el título de la web que se usa en el navegador y el que aparece si por ejemplo queremos añadirlo a favoritos.

Más detalles

Las tablas pueden ser consideradas como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Una tabla puede ser insertada en un

Las tablas pueden ser consideradas como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Una tabla puede ser insertada en un Las tablas Las tablas pueden ser consideradas como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Una tabla puede ser insertada en un documento HTML usando tres elementos básicos:

Más detalles

Universidad de Puerto Rico Recinto Universitario de Mayagüez Centro de Cómputos HTML. Por: Isabel Rios Lopez Unidad de Servicios al Usuario

Universidad de Puerto Rico Recinto Universitario de Mayagüez Centro de Cómputos HTML. Por: Isabel Rios Lopez Unidad de Servicios al Usuario Universidad de Puerto Rico Recinto Universitario de Mayagüez Centro de Cómputos HTML Por: Isabel Rios Lopez Unidad de Servicios al Usuario Comandos básicos para la creación de Páginas de Internet El sistema

Más detalles

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

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

HIPERDOCUMENTOS. Prof. Emiro Coronado Cabrera

HIPERDOCUMENTOS. Prof. Emiro Coronado Cabrera HIPERDOCUMENTOS Prof. Emiro Coronado Cabrera Hiperdocumento Un hiperdocumento es un documento no secuencial basado en una estructura jerárquica o de red de nodos que contienen información y/o datos multimedia

Más detalles

DISEÑO DE PÁGINAS WEB CON CÓDIGO HTML TEXTO EN MOVIMIENTO

DISEÑO DE PÁGINAS WEB CON CÓDIGO HTML TEXTO EN MOVIMIENTO MARQUEE es una de esas etiquetas no estándar de HTML, que soportan los navegadores más comunes, pero que no están comprendidas dentro de las especificaciones de HTML. Sirve para animar elementos

Más detalles

UNIDAD 1 GENERALIDADES HTML

UNIDAD 1 GENERALIDADES HTML UNIDAD 1 GENERALIDADES HTML GENERALIDADES HTML5 Una página web es un archivo con texto en el que se insertan diferentes etiquetas HTML, para que ese contenido pueda ser interpretado por el navegador web.

Más detalles

GUIA 1 CONCEPTOS BÁSICOS

GUIA 1 CONCEPTOS BÁSICOS DEFINICIÓN DE HTML5 CESDE GUIA 1 CONCEPTOS BÁSICOS HTML5 es una combinación de nuevas etiquetas del lenguaje HTML (HyperText Markup Language - lenguaje de marcas de hipertexto), el hipertexto es la unión

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

HOJAS DE ESTILO PORTAL PISTA LOCAL PÁGINA DE INICIO

HOJAS DE ESTILO PORTAL PISTA LOCAL PÁGINA DE INICIO HOJAS DE ESTILO PORTAL PISTA LOCAL PÁGINA DE INICIO PORTADA Las hojas de estilo referenciadas en la portada (http://pistalocal.pista-femp.org.es/index.php) son:

Más detalles

INFORMATICA I FORMATO

INFORMATICA I FORMATO INFORMATICA I 2.4.5 FORMATO El formato es una de las herramientas con que cuenta un procesador de textos para comunicar de distintas formas una palabra y/o frase, resaltándola, en negrita, dándole colores,

Más detalles

Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son un elemento esencial para cualquier página web.

Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son un elemento esencial para cualquier página web. Unidad 4. Hiperenlaces (I) Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son un elemento esencial para cualquier página web. Hiperenlace Un hiperenlace, hipervínculo,

Más detalles

LÍNEAS SEPARADORAS. ETIQUETA <HR>. COMENTARIOS EN HTML. ATRIBUTOS SIZE, WIDTH, NOSHADE (DEPRECATED). EJEMPLOS (CU00716B)

LÍNEAS SEPARADORAS. ETIQUETA <HR>. COMENTARIOS EN HTML. ATRIBUTOS SIZE, WIDTH, NOSHADE (DEPRECATED). EJEMPLOS (CU00716B) APRENDERAPROGRAMAR.COM LÍNEAS SEPARADORAS. ETIQUETA . COMENTARIOS EN HTML. ATRIBUTOS SIZE, WIDTH, NOSHADE (DEPRECATED). EJEMPLOS (CU00716B) Sección: Cursos Categoría: Tutorial básico del programador

Más detalles

Extras para

Extras para Extras para alumn@s avanzad@s Para l@s que tienen más nivel y este curso les ha sabido a poco, ahí van unos cuantos recursos para mejorar el formato y la presentación de los libros digitales. 1. Dar formato

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

PROCESADORES DE TEXTO. MICROSOFT WORD.

PROCESADORES DE TEXTO. MICROSOFT WORD. PROCESADORES DE TEXTO. MICROSOFT WORD. VENTANA DE MICROSOFT WORD Nombre documento Barra Títulos Barra menús Herramientas estándar Herramientas formato Reglas Área Edición Iconos Vista Barras desplazamiento

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

En que nos ayuda las hojas de estilo cascada (css)?

En que nos ayuda las hojas de estilo cascada (css)? HECHO POR CREACIONES Y DESARROLLO WEB COSTA RICA, CUALQUIER MACRO CON GUSTO ESTAMOS PARA AYUDARLE, LLAMENOS Y CON GUSTO LE ATENDEREMOS TEL 8364-3733 // 8348-9439 En que nos ayuda las hojas de estilo cascada

Más detalles

Profesor: Vicente Destruels Moreno. Teoría: Imágenes

Profesor: Vicente Destruels Moreno. Teoría: Imágenes Teoría: Imágenes Introducción Insertar imágenes en un documento permite crear páginas mucho más atractivas. Según el tipo de gráfico utilizado se pueden conseguir efectos realmente sorprendentes. Existen

Más detalles

CURSO MOODLE Curso

CURSO MOODLE Curso EDITAR NUESTRO PRIMER MOODLE CURSO MOODLE Curso 2012-2013 Accedemos al curso que hemos creado con el nombre Prueba desde la plataforma educastur. Una vez creado el curso, en cuanto entremos en la plataforma

Más detalles

En HTML, para indicar el orden de tabulación entre los controles de un formulario se emplea

En HTML, para indicar el orden de tabulación entre los controles de un formulario se emplea HTML completo Pregunta 1 En HTML, para indicar el orden de tabulación entre los controles de un formulario se emplea Solución: El atributo tabindex Pregunta 2 El elemento de HTML que se emplea para definir

Más detalles

PHP WEBQUEST. Este botón que representa un disquete sirve para guardar la webquest.

PHP WEBQUEST. Este botón que representa un disquete sirve para guardar la webquest. PHP WEBQUEST 1. BOTONES DE PHPWEBQUEST Este botón que representa un disquete sirve para guardar la webquest. Este otro representado por un folio en blanco crea un documento nuevo. Estos botones realizan

Más detalles

PRÁCTICA 2. AMPLIAR LA WEB

PRÁCTICA 2. AMPLIAR LA WEB PRÁCTICA 2. AMPLIAR LA WEB Ejercicio 1. Amplia la página Web que diseñaste en la práctica 1 con los siguientes elementos: fondos, marquesinas, tablas, hipervínculos y vídeos youtube. PASOS A SEGUIR 1.

Más detalles

COLEGIO PABLO DE TARSO IED CONSTRUCCION DE PROYECTOS DE VIDA PRODUCTIVOS HTML - PRÁCTICAS DOC RAUL MONROY PAMPLONA

COLEGIO PABLO DE TARSO IED CONSTRUCCION DE PROYECTOS DE VIDA PRODUCTIVOS HTML - PRÁCTICAS DOC RAUL MONROY PAMPLONA Introducción al curso de HTML COLEGIO PABLO DE TARSO IED Desarrolla comprensión al conocer, interpretar, socializar y argumentar diferentes temáticas relacionadas con la tecnología informática de punto

Más detalles

MICROSOFT EXCEL MICROSOFT EXCEL Manual de Referencia para usuarios. Salomón Ccance CCANCE WEBSITE

MICROSOFT EXCEL MICROSOFT EXCEL Manual de Referencia para usuarios. Salomón Ccance CCANCE WEBSITE MICROSOFT EXCEL MICROSOFT EXCEL 2013 Manual de Referencia para usuarios Salomón Ccance CCANCE WEBSITE IMPRESIÓN 11.1. Vista de Diseño de página En anteriores versiones existía la vista preliminar como

Más detalles

Creación y modificación de tablas

Creación y modificación de tablas Creación y modificación de tablas Una tabla es un objeto que contiene datos dispuestos en filas y columnas. Es posible crear un objeto de tabla a partir de una tabla o estilo de tabla vacío. También se

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

OPENOFFICE CALC. Manejo básico de hojas de cálculo

OPENOFFICE CALC. Manejo básico de hojas de cálculo OPENOFFICE CALC Manejo básico de hojas de cálculo Qué es una hoja de cálculo? Podemos verla como una gran tabla para mostrar información y realizar operaciones con esa información Cada una de las casillas

Más detalles

CONALEP CANCUN 2 PROCESAMIENTO DE LA INFORMACION POR MEDIOS DIGITALES

CONALEP CANCUN 2 PROCESAMIENTO DE LA INFORMACION POR MEDIOS DIGITALES ú 1.-Para el uso de las herramientas para edición de textos con tablas, objetos, numeraciones, viñetas y formatos avanzados solo se tiene que entrar a Word para poder insertar las tablas y la viñeta. 2.-

Más detalles

En Fireworks, puede crear una bar nav creando un símbolo en el Editor de botones y luego poniendo instancias de dicho símbolo en el lienzo.

En Fireworks, puede crear una bar nav creando un símbolo en el Editor de botones y luego poniendo instancias de dicho símbolo en el lienzo. Creación de barras de navegación Una barra de navegación, también denominada bar nav, es un grupo de botones que ofrece vínculos a otras áreas de un sitio Web. Normalmente, no cambia de aspecto en el sitio,

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

MATERIALES Leer previamente la Guía número 3 Elementos proporcionados por docente para realización de asignación.

MATERIALES Leer previamente la Guía número 3 Elementos proporcionados por docente para realización de asignación. Tema: Hipervínculos CONTENIDOS Qué es un hipervínculo? Referencia absoluta y referencia relativa Destino _blank y _self Formato y tipos de los enlaces Div y CSS OBJETIVOS ESPECÍFICOS Que el estudiante

Más detalles

Conceptos Teóricos de HTML5 (material extra adicional libro):

Conceptos Teóricos de HTML5 (material extra adicional libro): Temario de Examen Unidad I Materia: Informática Catedráticos: Víctor Aquino/Débora Santizo Temas: Uso del programa Sublime Text Forma Correcta de guardar archivos html y css (.html y.css) Uso de la etiquetas

Más detalles