Manual HTML 4.0 y CSS.

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

Download "Manual HTML 4.0 y CSS."

Transcripción

1 Manual HTML 4.0 y CSS. Autor: Gorka Calleja Urraca.

2 INDICE 1-INTRODUCCIÓN EL LENGUAJE HTML CARACTERES ESPECIALES LOS MÁS USADOS ESTRUCTURA DOCTYPE ESTRUCTURA DIRECTIVA <META> ATRIBUTOS ETIQUETAS <META> MÁS COMUNES REDIRECCIONAMIENTOS A OTRAS PÁGINAS DIRECTIVA <BASE> FORMATO DE PÁRRAFOS ATRIBUTOS Y JUSTIFICADO DE PÁRRAFOS CONTENEDORES O LAYERS ENCABEZADOS ETIQUETAS VARIAS LINEA HORIZONTAL Y EL COLOR EN HTML FORMATO DE TEXTO COLOR, TAMAÑO Y TIPO DE LETRA LISTAS LISTAS DESORDENADAS LISTAS ORDENADAS LISTAS DE DEFINICIÓN ANIDAR LISTAS ENLACES DIRECCIÓN URL ENLACES INTERNOS ENLACES LOCALES IMÁGENES ELECCIÓN DE FORMATO GRÁFICO IMÁGENES COMO ENLACES TABLAS ATRIBUTOS DE <TABLE>...21 INDICE

3 9.2- ATRIBUTOS DE <tr> ATRIBUTOS DE <td> ANIDAR TABLAS FORMULARIOS CAMPOS DE TEXTO TEXTO CORTO TEXTO OCULTO TEXTO LARGO LISTAS DE OPCIONES BOTONES DE RADIO CAJAS DE VALIDACIÓN BOTONES NORMALES BOTONES DE ENVIO Y BORRADO DATOS OCULTOS FRAMES FRAMES ANIDADOS QUITAR EL BORDE Y EL ESPACIO ENTRE FRAMES DIRIGIR LOS ENLACES VALORES DEL ATRIBUTO TARGET ATRIBUTOS DE <FRAMESET> ATRIBUTOS DE <FRAME> SONIDO SONIDO ACTIVADO POR EL USUARIO SONIDO DE FONDO ATRIBUTOS DE <BGSOUND> ATRIBUTOS DE <EMBED> MAPAS ATRIBUTOS DE <AREA> MARQUESINAS ATRIBUTOS HOJAS DE ESTILO <STYLE> ESTILOS MEDIANTE CLASES IDENTIFICADORES JERARQUÍA ARCHIVOS.CSS UNIDADES DE LONGITUD...41 INDICE

4 15.7- PROPIEDADES DE LAS HOJAS DE ESTILO FUENTES COLORES Y FONDOS TEXTO CAJAS DE TEXTO DISCRIMINAR NAVEGADOR ESTILO EN LOS ENLACES OBJETOS LA ETIQUETA <APPLET> ETIQUETA <PARAM> ATRIBUTOS DE <APPLET> ETIQUETA <EMBED> ATRIBUTOS DE <EMBED> ETIQUETA <OBJECT> ATRIBUTOS...45 INDICE

5 1- INTRODUCCIÓN Hyper Text Markup Language, más conocido como HTML es el lenguaje usado por los navegadores para mostrar las páginas webs al usuario. Con HTML podemos utilizar textos, sonidos, imágenes, y lo más importante, enlaces a otras páginas. Este lenguaje surge en principio con fines divulgativos y no se tuvo en cuenta que la web llegara a ser un área de ocio con carácter multimedia, debido a esto, el HTML ha ido necesitando actualizaciones con el paso del tiempo y la introducción de otras tecnologías complementarias como es el caso de CSS y JavaScript. Otro problema al que se enfrenta HTML son los distintos navegadores, los cuales, no interpretan un mismo código de manera unificada. Por lo tanto el creador de una página web (webmáster) ha de verse obligado a comprobar que su página es interpretada correctamente por todos los navegadores (en especial Internet Explorer y Netscape). Una página web es un archivo que contiene código HTML en forma de texto. Estos archivos tienen la extensión.html o.htm. Para la creación de un archivo HTML tan sólo necesitamos un sencillo editor de textos como puede ser el Bloc de notas (notepad) de Windows, o el Vi de Linux. También disponemos de herramientas más especializadas como HTML Builder y Macromedia Dreamweaver, los cuales nos permiten aumentar considerablemente nuestra eficiencia debido a las muchas facilidades que nos ofrecen. Nota del autor: Todos los ejemplos del manual que aparezcan numerados están disponibles en archivo HTML. Puedes conseguirlos descargándolos de nuestra página web: 2- EL LENGUAJE HTML La sintaxis del lenguaje HTML se basa en la denominada etiqueta. La etiqueta tiene dos partes: una apertura y un cierre. <etiqueta> texto afectado </etiqueta> La etiqueta del principio activa la orden y la última (que será la del principio precedida del signo /) la desactiva. No todas las etiquetas tienen principio y final pero esto lo veremos más adelante. Es importante resaltar que las mayúsculas o minúsculas son indiferentes a la hora de escribir las etiquetas. De todas formas, resulta aconsejable el acostumbrarse a escribirlas en minúsculas debido a que otras tecnologías que pueden utilizar nuestro HTML necesitan caracteres en minúsculas. Ejemplo: Las etiquetas <b> y </b> muestran un texto en negrita. El código sería: <b>texto en negrita</b> Resultado: Texto en negrita 2.1- CARACTERES ESPECIALES HTML dispone de un mecanismo que permite que una serie de caracteres raros o exclusivos de un país se vean correctamente en todos los ordenadores del mundo. Cuando queramos poner alguno de estos caracteres en una pagina, tenemos que sustituirlo por su correspondiente código LOS MÁS USADOS Significado Código < signo menor que < > signo mayor que > & signo ampersand & comillas " espacio en blanco ñ ñ minúscula ñ Ñ ñ mayúscula Ñ á a minúscula acentuada á Á a mayúscula acentuada Á é e minúscula acentuada é copyright marca registrada Observamos que para acentuar un carácter tenemos que escribir el signo ampersand (&) seguido del carácter en cuestión (en mayúsculas o minúsculas según corresponda) y terminando con acute;. Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 5 de 48

6 3- ESTRUCTURA 3.1- DOCTYPE El estándar HTML 4.0 exige que todos los ficheros que quieran considerarse documentos HTML, deban tener, al menos, dos elementos: un comentario especial SGML que describe el lenguaje y versión utilizado, y un título. El primer componente (DOCTYPE) indica la versión de HTML en la que está codificado el documento y no es más que una referencia al DTD que describe el lenguaje (HTML 4.0, versión de transición). Aunque es ignorado por la mayoría de los browsers (navegadores), se recomienda su utilización, ya que permite a todo tipo de agentes conocer la versión concreta del lenguaje y poder así sacar el máximo partido de las funcionalidades disponibles. El DOCTYPE es lo primero que se escribe en un documento HTML. Tenemos tres versiones distintas: HTML 4.0 Strict DTD: incluye todos los componentes excepto los frames. La declaración es la siguiente: <!DOCTYPE HTML PUBLIC!-//W3C//DTD HTML 4.0//EN > nada del texto del documento. 3.<body>: Encierra el resto del documento, el contenido. ejemplo01: <HTML> <HEAD> <TITLE>Ejemplo01</TITLE> </HEAD> <BODY> Hola mundo </BODY> </HTML> Guardamos este texto como ejemplo01.html y para poder abrirlo simplemente hacemos doble clic sobre el archivo y se lanzará el navegador que tengamos por defecto: HTML Transitional DTD: incluye todos los componentes de HTML 4.0 Strict más aquellos desaconsejados de versiones anteriores, sin incluir los frames. Es la versión más utilizada aunque no obtenga todas las ventajas que persigue HTML 4.0, tiene un soporte mayor por parte de los browsers. <!DOCTYPE HTML PUBLIC!-//W3C//DTD HTML 4.0 Transitional//EN > HTML Frameset: incluye los componentes del HTML Transitional más los frames. <!DOCTYPE HTML PUBLIC!-//W3C//DTD HTML 4.0 Frameset//EN > Debido a la gran difusión de las nuevas versiones de navegadores cuyo soporte es bastante completo, se recomienda utilizar la versión Strict de HTML 4.0. Sólo se debería usar las otras dos versiones en el caso de que utilicemos frames, o bien, nos enfrentemos a navegadores antiguos. El otro elemento que no puede faltar en un documento HTML es el título. Este componente es el que habitualmente emplean los navegadores para encabezar la ventana en la que se muestra el documento, y que se utiliza para identificar el documento en bookmarks, índices,... El título lo veremos en el siguiente apartado ESTRUCTURA Tres son la etiquetas que describen la estructura general de un documento y dan una información sencilla sobre él. Estas etiquetas no afectan a la apariencia del documento y sólo interpretan y filtran los archivos HTML. 1.: Limitan el documento e indica que se encuentra escrito en este lenguaje. 2.: Especifica el prólogo del resto del archivo. Son pocas las etiquetas que van dentro de ella, destacando la de <title> (título) que será utilizado por los marcadores del navegador e identificará el contenido de la página. Sólo puede haber un título por documento, preferiblemente corto aunque significativo, y no caben otras etiquetas dentro de él. En head no hay que colocar 3.3- DIRECTIVA <META> Tiene dos usos: contenedor de metainformación sobre el documento, e información adicional, incluidos comandos, relacionada con el protocolo HTTP. Por norma general, se añaden directivas META para dejar en ellas información que pueda identificar al documento y su contenido, información que utilizan aplicaciones externas como buscadores e índices (Yahoo, Google,...). Todos los <META> son insertados entre las secciones y. El orden no es importante ATRIBUTOS name: identifica la información que se va a exportar. content: contenido de la información. http-equiv: es el nombre de un comando HTTP ETIQUETAS <META> MÁS COMUNES Las vamos a clasificar según su atributo name: AUTHOR: Para definir quién construyó la página web: <META NAME="AUTHOR" CONTENT="Su nombre aquí"> COPYRIGHT: Para el copyright: Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 6 de 48

7 <META NAME="COPYRIGHT" CONTENT="Ingrese aquí el nombre de su compañía"> CONTACT_ADDR: Para definir la dirección de correo electrónico que la gente debería usar para hacer contacto con usted: <META NAME="CONTACT_ADDR" CONTENT="Aquí su dirección "> RATING: Para indicar hacia qué tipo de audiencia está orientado su sitio web disponemos de cuatro posibles valores:? general: para todas las edades.? 14 years: para mayores de 14 años.? mature: para adultos.? restricted: para adultos con restricciones. La etiqueta sería: <META NAME="RATING" CONTENT="El Rating aquí"> ROBOT: Cuando un motor de búsqueda visite su página tratará de seguir sus links e indexará cada página que encuentre. Posibles valores:? all: dirá al robot del motor de búsqueda que siga todos los links sobre su página web, e indexe todos los que encuentre.? noindex: para que el robot no indexe esa página. Pero puede seguir los links sobre ella.? nofollow: que indexe esta página pero que no siga los links sobre ella.? none: que no indexe esta página ni siga los links sobre ella. La etiqueta sería: <META NAME="ROBOT" CONTENT="Ingrese el valor aquí"> REVISIT-AFTER: Para indicar a un robot cuando debe regresar e indexar el sítio de nuevo. Los posibles valores pueden ser la cantidad de tiempo que usted quiera: 10 days, 2 months, 1 week,... La etiqueta sería: <META NAME="REVISIT-AFTER" CONTENT="Ingrese el valor aquí"> Ejemplo: <TITLE>Concentración Motera Acelerados</TITLE> <META NAME="keywords" CONTENT="acelerados, concentración, motos, moteros"> <META NAME="description" CONTENT="Información, programa, rutas, fotos... de la Concentración Motera Acelerados 2004."> <META NAME="rating" CONTENT="General"> <META NAME="expires" CONTENT="never"> <META NAME="language" CONTENT="es"> <META NAME="charset" CONTENT="ISO "> <META NAME="distribution" CONTENT="Global"> <META NAME="robots" CONTENT="INDEX,FOLLOW"> <META NAME="revisit-after" CONTENT="7 Days"> <META NAME=" " <META NAME="author" CONTENT="Gorka"> REDIRECCIONAMIENTOS A OTRAS PÁGINAS Puedes enviar a los visitantes a una página específica, diferente, al incluir este marcador: <META HTTP-EQUIV="REFRESH" CONTENT= 2 ;URL=http://www.sudominio.com/otra_pagina.h tml"> En content, el atributo de valor numérico ( 2 ) indica la cantidad de segundos de pausa antes de cargar el destino, que se encuentra especificado a continuación. De esta manera al cargarse esta página se presentará al visitante durante 2 segundos, dirigiéndose luego a otra_página.html DIRECTIVA <BASE> Sirve para especificar un directorio base para todas las referencias (direcciones URL) relativas del documento. Esta directiva se ha de situar en la cabecera (head) del documento. Mediante el atributo href especificamos la ruta o dirección donde se ha de buscar cualquier página o archivo referido en el documento. Sólo afecta al documento en el que aparece. Por ejemplo, si se apunta a la imagen../imagenes/dibujo.gif, se la buscará en el directorio anterior (superior o previo) al tomado como referencia, es decir, el que contiene el documento. Usando por ejemplo: <base href= > hacemos que, con independencia de donde almacenemos el documento html, el directorio donde va a buscar cualquier referencia relativa va a ser, en nuestro caso, siempre el directorio dirpag. Es decir, a la hora de buscar el archivo dibujo.gif lo buscará en esta ruta: if Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 7 de 48

8 4- FORMATO DE PÁRRAFOS Formatear un texto consiste en definir los párrafos, justificarlos, poner en negrita, en itálica... Para definir los párrafos nos servimos de la etiqueta <p> que introduce un salto y deja una línea en blanco antes de continuar con el resto del documento. Con la etiqueta <br> podemos realizar un salto de linea, puede poner tantas como desee y realizará un salto de línea por cada una de ellas. En esta etiqueta, al igual que sucede en otras tantas, no existe su cierre correspondiente, esto se debe a que un salto de línea no empieza y acaba más adelante sino que sólo tiene presencia en un lugar puntual. Por medio de: <!-- --> <p align="right">texto alineado a la derecha.</p> <p align= "center">texto centrado.</p> </body> podemos insertar comentarios en nuestro código que nos servirán de recordatorios en futuras revisiones del documento. Estos comentarios no se mostrarán a través del navegador ATRIBUTOS Y JUSTIFICADO DE PÁRRAFOS Para justificar un párrafo utilizamos el atributo align. Un atributo es un parámetro incluido en el interior de la etiqueta que ayuda a definir el funcionamiento de la etiqueta de una forma más personal. Los atributos tienen sus valores indicados entre comillas ( ) pero si no los indicamos entre comillas también funcionará en la mayoría de los casos. Eso si, en caso de que el valor del atributo contenga espacios las comillas son obligatorias. De todas maneras, para evitar posibles errores es mejor acostumbrarse a ponerlas siempre. El atributo align puede tener 3 valores: 1. left: texto alineado a la izquierda. 2. right: alineado a la derecha. 3. center: alineado al centro. Para centrar el texto también podemos utilizar la etiqueta <center> seguida del texto que queremos centrar y posteriormente el cierre correspondiente: </center>. ejemplo01: <title>ejemplo01</title> <body> <p>esto es un párrafo, se introduce un salto y deja una línea en blanco antes de continuar con el resto del documento.</p> Vemos que ha dejado un espacio en blanco.<br><br> A través de la etiqueta <br> <br> hacemos un salto de carro. <!-- Esto es un comentario. Los comentarios no son mostrados por el navegador --> <p><center>texto centrado utilizando la etiqueta center.</center></p> <p align="left">texto alineado a la izquierda.</p> 4.2- CONTENEDORES O LAYERS Para cuando tengamos un texto largo y queramos que todos los párrafos estén justificados de alguna manera lo ideal es utilizar la etiqueta <div> denominada contenedor, o comunmente layer (capa). Todo lo que esté incluido dentro de esta etiqueta será alineado tal y como hayamos especificado en el atributo align. Con la versión 4.0 de HTML disponemos también de un nuevo valor para el atributo align, que es justify. Este valor nos permite justificar el texto a ambos márgenes del navegador. ejemplo02: <body> <title>ejemplo02</title> <p>para simplificar el código a la hora de justificar utilizamos la <div align="right"> etiqueta <div>.</p> <p>centrado a la derecha</p> <p>insisto en que está centrado a la derecha</p> </div> <div align="center"> </div> <p>todo lo incluido dentro estará centrado</p> <p>insisto en que está centrado</p> Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 8 de 48

9 <div align="justify"> </div> </body> <p>con el valor "justify" hacemos un justificado a ambos márgenes. A partir de HTML 4.0</p> 4.4- ETIQUETAS VARIAS Disponemos de etiquetas muy útiles como las siguientes: <blockquote>: nos permite indentar un texto. ejemplo04: 4.3- ENCABEZADOS <blockquote>esto está indentado<br>como bien podemos apreciar.<br></blockquote>y esto no está indentado. Los encabezados (headers) son etiquetas que formatean un texto como un titular asignando un tamaño de letra y texto en negrita. Hay seis tipos de encabezados. ejemplo03: <body> <title>ejemplo03</title> <p>vamos a ver los 6 tipos de encabezados:<br> </p> </body> <h1>encabezado de nivel 1</h1> <h2>encabezado de nivel 2</h2> <h3>encabezado de nivel 3</h3> <h4>encabezado de nivel 4</h4> <h5>encabezado de nivel 5</h5> <h6>encabezado de nivel 6</h6> <cite>: para textos que representen citas de autor. ejemplo05: <cite>tanto va el cantaro a la fuente<br>que al final aprende a ir sólo.<br>pedro Reyes.</cite> Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 9 de 48

10 <var>: para representar variables de un código. ejemplo08: La variable <var>x</var> <code>: para representar código. ejemplo06: <p>para cuando queramos mostrar código utilizamos este formato<br>a través de la etiqueta <code>:<code>public int x=0;</code></p> <samp>: para representar literales. ejemplo09: esto es un <samp>literal</samp> <kbd>: para representar texto que ha de teclear el usuario. ejemplo07: El usuario debe teclear: <kbd>supercalifragilisticoespialidoso</kbd> <abbrr>: para representar abreviaturas. Es una etiqueta perteneciente a la versión 4.0 de HTML. ejemplo10: una abreviarura como <abbr>http</abbr> o <abbr>www</abbr> Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 10 de 48

11 <pre>: permite respetar la forma escrita en el código html, a la hora de mostrar la página en el navegador. ejemplo11: <pre>la etiqueta <pre> permite en la que respetar la forma <address>: para escribir direcciones correspondientes a calles... ejemplo13: Ejemplo: <address>c/sierpe Nº1 <br> Valladolid<br> </address> se edito el documento html.</pre> 4.5- LINEA HORIZONTAL Y EL COLOR EN HTML <tt>: para escribir con tipo de letra de paso fijo (estilo teletipo). ejemplo12: Ejemplo: <tt>tipo de letra de paso fijo (estilo teletipo) utilizando la etiqueta <tt>.</tt> Para insertar una línea horizontal tenemos que utilizar la etiqueta <hr>. El resultado final difiere respecto a grosor entre verlo en Netscape y verlo en Internet Explorer. La etiqueta <hr> presenta los siguientes atributos: 1. color: para establecer el color de la línea. Los valores para los colores más frecuentes se pueden asignar a través de su nombre en inglés: Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 11 de 48

12 Nombre aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow Color 5- FORMATO DE TEXTO Y en el caso de querer otra combinación de color debemos utilizar valores RGB. RGB son las abreviaruras de Red (rojo), Green (verde) y Blue (azul), es decir, que para conseguir otro color debemos mezclar cantidades de verde, rojo y azul. Esas cantidades se han de indicar en numeración hexadecimal: 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Los valores los daremos en este formato: #RRGGBB donde cada valor de color puede crecer desde 00 a FF. Vamos a ver de que etiquetas disponemos para poder poner el texto en negrita, itálica... <strong>: por medio de esta etiqueta resaltamos el texto incluido en ella. No es lo mismo que poner en negrita, aunque el resultado sea muy similar en algunos navegadores. ejemplo01: Ejemplo: <strong>texto resaltado utilizando la etiqueta <strong></strong><br> Ejemplo: Naranja #ff8000 Verde turquesa # Azul oscuro # size: número entero de pixels o tanto por ciento para asignar el grosor de la línea. 3. width: número de pixels o tanto por ciento para asignar la anchura, es decir, la longitud de lado a lado del navegador. ejemplo14: <p>podemos modificar su color, tamaño y anchura: <hr color="red"> <b>: para poner el texto en negrita. ejemplo02: Ejemplo: <b>texto en negrita utilizando la etiqueta <b></b> <hr size=6> <hr width=50%> <hr noshade> </p> Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 12 de 48

13 <em>: texto enfatizado. ejemplo03: Ejemplo: <em>texto enfatizado utilizando la etiqueta <em></em> <u>: texto subrayado. <i>: texto tachado. <blink>: sólo funciona en el navegador Netscape. Sirve para hacer que el texto parpadee. ejemplo05: <u>texto subrayado utilizando la etiqueta <u></u><br> <s>texto tachado </s> utilizando la etiqueta <s&gt<br> <i>: texto en itálica. ejemplo04: Ejemplo: <i>texto en italic utilizando la etiqueta <i></i> <sup>: para hacer superíndices. <sub>: para hacer subíndices. <big>: para aumentar el tamaño de la letra. <small>: para disminuir el tamaño de la letra. ejemplo06: <p>letra superíndice utilizando <sup>: E = mc<sup>2</sup></p> <p>letra subíndice utilizando <sub>: a<sub>i, j</sub> = Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 13 de 48

14 b<sub>i, j</sub>+ 1</p> <big>aumentamos el tamaño de la letra por medio de <big>.</big><br> <small>disminuimos el tamaño utilizando <small>.</small><br> mediante valores RGB. ejemplo07: Ejemplo: <font face="comic Sans MS,arial,verdana">Este texto tiene otra tipografía</font><br> <font size="+1">aumentamos 1 nivel mediante +1</font><br> <font size="5">este texto es más grande</font><br> <font color ="red">color en rojo</font><br> <font color ="#339966">Color en verde turquesa</font> 5.1- COLOR, TAMAÑO Y TIPO DE LETRA Este tipo de formatos son controlados actualmente mediante hojas de estilo, las cuales veremos más adelante. La forma clásica de definir el color, tamaño y tipo del letra de un texto determinado es a través de la etiqueta <font> y su cierre correspondiente. Dentro de esta etiqueta especificaremos los atributos correspondientes a cada uno de los parámetros que queramos definir: face: este atributo define el tipo de letra. Hay que tener cuidado porque el usuario puede que no disponga del tipo de letra que nosotros establecemos con lo que el navegador mostrará la fuente que exista por defecto. Para subsanar este problema dentro del atributo pueden seleccionarse varios tipos de letra separados por comas, de tal manera que si el navegador no dispone del primer tipo del letra pasará al segundo y así sucesivamente hasta encontrar un tipo que posea o bien acabar la lista y poner la fuente por defecto. size: define el tamaño de letra. El tamaño se puede asignar de manera absoluta (número entero de 1 a 7 como máximo) o de manera relativa con respecto al texto mostrado precedentemente (estableciendo el número de niveles que queramos aumentar o disminuir por medio de un signo + o -). De manera relativa si definimos nuestro atributo como size= +2 lo que haremos es aumentar en dos niveles el tamaño de letra, es decir, si anteriormente estábamos escribiendo en un nivel 3, pasaremos ahora a un nivel 5. El tamaño que veremos en pantalla dependerá de la definición y del tamaño de fuente elegido por el usuario en el navegador. Debido a esto se suelen emplear las hojas de estilo en cascada (las cuales veremos más adelante) para llevar a cabo una prefijación. color: este atributo define el color del texto. Su valor puede ser asignado utilizando el nombre del color en inglés para los colores más frecuentes, o bien, Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 14 de 48

15 6- LISTAS Las listas sirven para citar, numerar y definir elementos. También son utilizadas para desplazar el comienzo de línea hacia la derecha. Tenemos tres tipos de listas: 6.1- LISTAS DESORDENADAS <li type="square">"square"</li> </ul> <ul compact type="square"> <li>elemento 1</li> <li>elemento 2</li> </ul> Son delimitadas mediante la etiqueta <ul> (unordered list) y la correspondiente etiqueta de cierre </ul>. Y cada uno de los elementos de la lista se establece a través de una etiqueta <li>, la cual no hace falta cerrar. ejemplo01: <ul> <li>la etiqueta <UL> nos permite presentar listas de <br>elementos sin orden alguno.</li> <li>cada elemento de la lista irá normalmente<br>precedido por un círculo.</li> </ul> 6.2- LISTAS ORDENADAS. Son listas en las cuales los elementos aparecen numerados. La viñeta de las listas desordenadas se sustituye por ordenaciones (alfabéticas o numéricas). La numeración se establece automáticamente. Para ello utilizamos la etiqueta <ol> (ordered list) y su correspondiente etiqueta de cierre. Y para cada elemento seguimos utilizando la etiqueta <li>. ejemplo03: <ol> Dentro de la etiqueta de apertura de la lista, <ul>, podemos utilizar el atributo type para cambiar el tipo de viñeta de todos los elementos de la lista. En el caso de que queramos cambiar solamente el de un elemento en especial utilizamos el atributo type sobre la etiqueta de elemento, es decir, sobre <li>. Los valores de type pueden ser: circle: la viñeta es un círculo negro. <li>primer elemento.</li> <li>segundo elemento.</li> <li>tercer elemento.</li> </ol> disc: la viñeta es una circunferencia negra. square: la viñeta es un cuadrado. También disponemos del atributo compact, el cual nos permite compactar el espacio existente entre el texto y la viñeta. Este atributo no requiere valores. ejemplo02: <ul> <li type="disc">"disc"</li> <li type="circle">"circle"</li> Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 15 de 48

16 Utilizando el atributo type podemos especificar el tipo de numeración empleado eligiendo entre números (1, 2, 3...), letras (a, b, c...) y sus mayúsculas (A, B, C...) y números romanos en mayúsculas (I, II, III...) y minúsculas (i, ii, iii...). Los valores son: 1: para ordenar por números. ejemplo04: <ol type= "1"> <li>primer elemento.</li> <li>segundo elemento.</li> <li>tercer elemento.</li> </ol> i: por números romanos. I: por números romanos en mayúsculas. ejemplo06: <ol type= "i"> a: por letras. A: por letras mayúsculas. ejemplo05: <li>primer elemento.</li> <li>segundo elemento.</li> <li>tercer elemento.</li> </ol> <ol type= "I"> <li>primer elemento.</li> <li>segundo elemento.</li> <li>tercer elemento.</li> </ol> <ol type= "a"> <li>primer elemento.</li> <li>segundo elemento.</li> <li>tercer elemento.</li> </ol> <ol type= "A"> <li>primer elemento.</li> <li>segundo elemento.</li> <li>tercer elemento.</li> </ol> Para indicar el número a partir del cual queremos empezar a contar utilizamos el atributo start de la etiqueta <ol>. El valor que se le ha de asignar es un número entero tanto para los números como para las letras o los números romanos, ya que el navegador se encarga de hacer la traducción del número al carácter correspondiente. Por defecto el valor es 1. ejemplo07: Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 16 de 48

17 <ol start="8" type="i"> <li>he puesto que start sea igual a 8.</li> <li>vemos que luego continua por sí sólo.</li> <li>demostrado.</li> </ol> elementos seguido de su definición correspondiente. La etiqueta principal es<dl> (definition list), y las etiquetas de elemento y su definición son <dt> (definition term) y <dd> (definition definition) respectivamente. La etiqueta <dd> desplaza la línea hacia la izquierda, por este motivo este tipo de etiqueta es utilizado para desplazar texto. ejemplo09: <dl> </dl> <dt>primer elemento<dd>esta es la definición del primer elemento. <dt>segundo elemento<dd>esta es la definición del segundo elemento. Para alterar la numeración de la lista a partir de un ítem, utilizamos el atributo value de la etiqueta del elemento en cuestión, la etiqueta <li>. ejemplo08: <ol> <li>primer elemento.</li> </ol> <li>segundo elemento.</li> <li value="15"><strong>utilizamos value="15".</strong></li> <li>automáticamente continúa la numeración a partir del nuevo valor.</li> 6.4- ANIDAR LISTAS Podemos crear listas dentro de otras listas, es decir, anidar listas. ejemplo10: <dl> <dt>españa:<dd>equipos españoles de fútbol LISTAS DE DEFINICIÓN. En este tipo de lista se muestra cada uno de los s <ul> <li>real Madrid</li> <ol> <li value="7"> Raúl</li> <li>figo</li> </ol> <li>valladolid</li> </ul> <dt>alemania:<dd>equipo alemanes de Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 17 de 48

18 ol. </dl> fútb <ul> <li>bayer de Munich</li> <li>borusia Dortmund</li> </ul> 7- ENLACES HTML es un lenguaje para hipertexto, es decir, enlaces. Un enlace o link es una zona de texto o imagen que si son seleccionados nos trasladan a otro documento de hipertexto o a otra posición dentro del documento actual. Para crear un enlace hay que utilizar la etiqueta <a>. Todo lo que encerremos entre <a> y </a>, ya sea texto o imágenes, será considerado como enlace y sufrirá dos modificaciones: 1. Se visualizará de manera distinta en el navegador: el texto aparecerá subrayado y de un color distinto y las imágenes estarán rodeadas por un borde del mismo color que el del texto del enlace. Este color dependerá de la configuración que tenga el usuario en su navegador. 2. Al pulsar sobre el enlace, seremos enviados hacia donde apunte el enlace. El enlace en la página normalmente aparecerá subrayado y en color azul, y al deslizar el puntero del ratón sobre él cambiará su forma original transformándose por regla general en una mano con el dedo índice extendido. Para indicarle la dirección utilizamos el atributo href y le asignamos la dirección entre comillas dobles ( ). La dirección estará en formato URL (Uniform Resource Locator). La sintaxis general de un enlace es: <a href= dirección >contenido</a> Siendo el contenido un texto o imagen que será la parte activa de la página donde deberemos pulsar para acceder al enlace DIRECCIÓN URL A través de una URL podemos indicar tanto una dirección de Internet como un servicio que tenga el servidor al que corresponde la dirección. El formato es: servicio://maquina:puerto/ruta/fichero/fi El servicio puede ser: http: para páginas web. https: es una innovación sobre el anterior, que nos deja acceder a servidores que nos ofrecen el uso de técnicas de encriptación para proteger los datos que intercambiemos con él de terceras personas. ftp: para transmitir ficheros desde servidores de ftp anónimo, y utilizando podemos acceder a servidores privados. mailto: para poder mandar un mensaje . news: para acceder a foros de discusión. Para ello se ha de indicar el servidor y el grupo. telnet: nos permite conectarnos a otro ordenador y entrar en ellos como si nuestro ordenador fuese una terminal del mismo. La dirección de la máquina puede ser indicada también a través de su dirección IP. La ruta es una serie de directorios separados por la barra / donde indicamos el camino hacia el archivo Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 18 de 48

19 que vamos a utilizar. Cuando queremos acceder a un fichero situado en la misma máquina que la página web que estamos creando podemos utilizar rutas relativas: <!--Este es el ancla: --> <a name="abajo"></a> ruta_relativa/fichero En la ruta relativa podremos utilizar los dos puntos (..) para acceder al directorio padre o comenzar con la barra diagonal (/) para acceder a una ruta absoluta dentro de nuestro ordenador. ejemplo01: <a href="http//www.google.com">ir a Google.com</a><br> Enlace ftp: <a ris.es</a><br> Enlace con una dirección <a usuarios.retecal.es</a><br> Enlace con news: <a href="news://news.ibernet.es/es.comp.demos">ne ws</a><br> También podemos acceder a anclas situadas en documentos remotos. Para ello añadimos el nombre del ancla al URL: <a href="enlaces.html#abajo">ir abajo</a> 7.3- ENLACES LOCALES A través de estos enlaces relacionamos los distintos documentos html que componen nuestro sitio web. Para ello en la dirección escribimos la ruta y el nombre del archivo html al que queremos enlazar ENLACES INTERNOS Son los enlaces que apuntan a un lugar diferente dentro de la misma página. Para crearlos necesitamos, aparte del enlace origen, un segundo enlace que será colocado en el destino y que comunmente se denomina ancla. A este enlace destino le hemos de asignar un nombre que le identifique y que en nuestro ejemplo es abajo : <a name="abajo"></a> De la misma manera podemos hacer enlaces a todo tipo de archivos como podría ser un archivo zip. En este tipo de enlaces al pinchar en él el navegador descargará el fichero, no sin antes preguntarnos sobre qué queremos hacer con el archivo: abrirlo o guardarlo en disco. ejemplo03: Enlace con otra página web: <a href="ejemplo01.html">ir al Ejemplo 10</a><br> Enlace con un archivo comprimido (archivo zip): <a href="archivos/ejemplo.zip">archivo.zip</a> Este ancla lo situaremos dentro del código justo en el lugar al que queremos movernos al pulsar en el enlace. El ancla permanecerá invisible para el usuario. ejemplo02: Enlace para ir a la parte de abajo de este documento: <a href="#abajo">ir abajo</a> <!-- se enlaza al ancla de mas abajo--> <!-- Aqui deberíamos de meter texto de relleno para poder comprobar que nos movemos hacia el ancla --> Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 19 de 48

20 height=100 width=160 alt="ordenador saltando"><br> <img src="../imagenes/happysmclr.gif" border="5"> <img src="../imagenes/happysmclr.gif" hspace="75" vspace="50"> 8- IMÁGENES Para hacer que aparezcan imágenes en nuestro documento utilizamos la etiqueta <img> (image) y el atributo src (source) para indicar la ruta. La etiqueta <img> no tiene cierre. Es decir: <img src= ruta a la imagen > Vamos a ver algunos atributos: alt Dentro de las comillas de este atributo colocaremos una breve descripción de la imagen, de tal forma que este comentario se mostrará en lugar de la imagen en el caso de que el navegador no pueda cargar la imagen o durante el tiempo que tarde en cargarla. Una vez cargada la imagen si colocamos el puntero del ratón sobre ella también se nos mostrará la descripción escrita en este atributo. height y width Definen la altura (height) y anchura (width) en pixels de la imagen. border Define el tamaño en pixels del cuadro que rodea a la imagen. En caso de que no queramos que aparezca el borde, damos el valor cero ( 0 ). atributos vspace y hspace Sirven para indicar el espacio libre vertical (vspace) y horizontal (hspace), en pixeles, que tiene que colocarse entre la imagen y los otros elementos que la rodean, como texto, imágenes... lowsrc Con este atributo indicamos un archivo de la imagen que está en baja resolución, de tal forma que cuando el navegador detecta este atributo primero descarga y muestra la imagen de baja resolución y luego descarga la imagen con la resolución correcta. ejemplo01: <img src="../imagenes/happysmclr.gif" alt="ordenador saltando"><br> <img src="../imagenes/happysmclr.gif" align Mediante este atributo alineamos la imagen con respecto al texto. Este atributo puede tener estos valores:? top: coloca el punto más alto de la imagen coincidiendo con el más alto de la línea de texto actual.? middle: alinea el punto medio (en altura) de la imagen con la base del texto.? bottom: alinea el punto más bajo de la imagen con la base del texto.? left: coloca la imagen a la izquierda del texto.? right: a la derecha del texto. Si se quiere interrumpir el proceso de rellenado del texto a los lados de la imagen, para que salte hasta debajo de ella, es decir, dejar un espacio en blanco parcialmente, se pueden emplear las siguientes extensiones de la etiqueta <br>: ejemplo02: <dl>? <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. Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 20 de 48

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

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

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

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

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

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

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

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

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

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

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

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

MANUAL PRACTICO DE HTML

MANUAL PRACTICO DE HTML MANUAL PRACTICO DE HTML 1 La estructura tiene tres partes cabeza, cuerpo, cierre o fin. MI PC... Aquí iría el contenido que ve el usuario final

Más detalles

Bases del HTML CÓMO SE HACE LA WEB ENTENDIENDO LA ESTRUCTURA DE HTML. Sesión 3 10/09/14. Orígenes. Orígenes

Bases del HTML CÓMO SE HACE LA WEB ENTENDIENDO LA ESTRUCTURA DE HTML. Sesión 3 10/09/14. Orígenes. Orígenes 10/09/14 CÓMO SE HACE LA WEB LO QUE VES Bases del HTML CÓMO ES CREADA Sitios pequeños utilizan solamente HTML y CSS. Sesión 3 Sitios más grandes usan CMS, herramientas de blog o comercio de e-commerce.

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

A continuación se confeccionara un formulario para el ingreso de un nombre y un botón para el envío del dato ingresado al servidor:

A continuación se confeccionara un formulario para el ingreso de un nombre y un botón para el envío del dato ingresado al servidor: FORMULARIOS BAJO HTML INTRODUCCION A FORMULARIOS Un formulario permite que el visitante al sitio cargue datos y sean enviados al servidor. Es el medio ideal para registrar comentarios del visitante sobre

Más detalles

DISEÑO DE PAGINAS CON HTML

DISEÑO DE PAGINAS CON HTML DISEÑO DE PAGINAS CON HTML CONCEPTOS HTML (Hyper Text Markup Language) Lenguaje con el que se escriben paginas web. Es un lenguaje de hipertexto. Permite escribir texto de forma estructurada. Compuesto

Más detalles

ETIQUETAS HTML 5 Diseño de Sitios Web TUW

ETIQUETAS HTML 5 Diseño de Sitios Web TUW Etiqueta Descripción Define un comentario nueva nueva nueva nueva

Más detalles

Unidad II: Lenguaje de marcado

Unidad II: Lenguaje de marcado Unidad II: Lenguaje de marcado 2.1 Introducción Un lenguaje de marcado o lenguaje de marcas es una forma de codificar un documento que, junto con el texto, incorpora etiquetas o marcas que contienen informació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

UNIDAD 4: NOCIONES BÁSICAS DE DISEÑO WEB (MAQUETACIÓN HTML) CURSO ELABORACIÓN DE CONTENIDOS FORMATIVOS Plan de Formación Edukanda

UNIDAD 4: NOCIONES BÁSICAS DE DISEÑO WEB (MAQUETACIÓN HTML) CURSO ELABORACIÓN DE CONTENIDOS FORMATIVOS Plan de Formación Edukanda UNIDAD 4: NOCIONES BÁSICAS DE DISEÑO WEB (MAQUETACIÓN HTML) CURSO ELABORACIÓN DE CONTENIDOS FORMATIVOS Plan de Formación Edukanda 1 Índice 1. Introducción... 3 2. Objetivos... 4 3. El lenguaje HTML...

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

4º Unidad Didáctica. Lenguaje HTML. Eduard Lara

4º Unidad Didáctica. Lenguaje HTML. Eduard Lara 4º Unidad Didáctica Lenguaje HTML Eduard Lara 1 ÍNDICE 4.1 Lenguaje HTML 4.2 Etiquetas HTML 4.3 Estructura del documento HTML 4.4 Texto en HTML en HTML 4.5 Hiperenlaces en HTML 4.6 Imágenes en HTML 4.7

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

INTRODUCCIÓN AL LENGUAJE HTML... 2 Características del lenguaje HTML... 2 Sintaxis del HTML... 2 Partes de un documento HTML... 2 FORMATO EN HTML...

INTRODUCCIÓN AL LENGUAJE HTML... 2 Características del lenguaje HTML... 2 Sintaxis del HTML... 2 Partes de un documento HTML... 2 FORMATO EN HTML... INTRODUCCIÓN AL LENGUAJE HTML... 2 Características del lenguaje HTML... 2 Sintaxis del HTML... 2 Partes de un documento HTML... 2 FORMATO EN HTML... 2 Formato de párrafo... 2 Encabezados... 3 Formateando

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

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

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

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

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

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

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

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

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

Abril 2005. Jordi Llonch jordi@laigu.net. Basado en los cursos de: http://www.webestilo.com/html/ http://www.webestilo.com/css/

Abril 2005. Jordi Llonch jordi@laigu.net. Basado en los cursos de: http://www.webestilo.com/html/ http://www.webestilo.com/css/ Abril 2005 Jordi Llonch jordi@laigu.net Basado en los cursos de: http://www.webestilo.com/html/ http://www.webestilo.com/css/ http://creativecommons.org/licenses/by-sa/2.0/ 2 Conceptos básicos World Wide

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

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

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

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

HTML y XHTML. Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014

HTML y XHTML. Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014 HTML y XHTML Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014 Etiquetas Contenido de una página web: Contenido (información). Instrucciones de estructura

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

Formularios HTML. Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014

Formularios HTML. Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014 Formularios HTML Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014 Declaración de un formulario Elemento clave para el desarrollo de aplicaciones

Más detalles

CS3. Jorge A. Villa Saravia 2011. www.jalbertovsa.net 1

CS3. Jorge A. Villa Saravia 2011. www.jalbertovsa.net 1 DREAMWEAVER CS3 Jorge A. Villa Saravia 2011 www.jalbertovsa.net www.jalbertovsa.net 1 1. INTRODUCCIÓN A DREAMWEAVER CS 3... 2 1.1. FLUJO DE TRABAJO DE DREAMWEAVER PARA LA CREACIÓN DE SITIOS WEB... 2 1.2.

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

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

Practicas de HTML. En un procesador de texto cualquiera teclear el siguiente código

Practicas de HTML. En un procesador de texto cualquiera teclear el siguiente código 7 Practicas de HTML 1. Pagina básica En un procesador de texto cualquiera teclear el siguiente código Mi primera pagina Web Esta es mi primera pagina, es muy

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

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

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

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

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

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

Los formularios irán delimitados por las etiquetas
y
, la cual tiene dos parámetros:

Los formularios irán delimitados por las etiquetas <FORM> y </FORM>, la cual tiene dos parámetros: Formularios en HTML Los formularios nos sirven para solicitar información al usuario y procesarla. El formulario se compondrá de diferentes componentes como campos de texto, botones de opción, listas desplegables,...

Más detalles

Qué es HTML? Los diez pasos para crear una página web perfecta

Qué es HTML? Los diez pasos para crear una página web perfecta Qué es HTML? HTML son las siglas de HyperText Markup Language (Lenguaje de Macado de Hipertexto), esto que significa?, pues bien hipertexto es una palabra o frase en especial que apunta hacia otra página.

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

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

PROCEDIMIENTOS BÁSICOS EN LA ELABORACIÓN DE UN SITIO WEB

PROCEDIMIENTOS BÁSICOS EN LA ELABORACIÓN DE UN SITIO WEB Curso de edición de páginas web con Dreamweaver Javier Valera Bernal PROCEDIMIENTOS BÁSICOS EN LA ELABORACIÓN DE UN SITIO WEB Como cuestión previa conviene saber que hay un gran porcentaje de usuarios

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

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

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

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

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

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

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

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

HTML 5 : Formularios

HTML 5 : Formularios HTML 5 : Formularios El formulario es una interfaz fundamental en las páginas web para interactuar con el usuario. Esta interacción se genera a través de variados elementos, como cajas para introducir

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

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

Usar edit-on Pro 4. 1. Advertencia preliminar respecto a las funciones. 2. Descripción general del Editor. Tabla de contenidos

Usar edit-on Pro 4. 1. Advertencia preliminar respecto a las funciones. 2. Descripción general del Editor. Tabla de contenidos Tabla de contenidos 1. Advertencia preliminar respecto a las funciones estándar... 1 2.DescripcióngeneraldelEditor...1 2.1. Trabajar con edit-on Pro 4... 2 2.2. Las fichas WYSIWYG / Texto fuente... 2 3.FuncionesestándardelEditor...2

Más detalles

2.5. Manipular objetos y formularios en una página Web.

2.5. Manipular objetos y formularios en una página Web. 2.5. Manipular objetos y formularios en una página Web. Un formulario es una página web en la cual el usuario puede introducir información que posteriormente recibiremos para que sea procesada, por alguna

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

CUADERNILLO DE PRÁCTICAS

CUADERNILLO DE PRÁCTICAS UNIVERSIDAD INTERAMERICANA PARA EL DESARROLLO CUADERNILLO DE PRÁCTICAS Aplicaciones Educativas WEB CUADERNILLO DE PRÁCTICAS Introducción Las posibilidades que brindan las tecnologías de la información

Más detalles

1. Tutorial Página Personal... 2

1. Tutorial Página Personal... 2 Índice 1. Tutorial Página Personal... 2 1.1. Introducción... 2 1.2. Tutorial de edición de páginas web con Kompozer... 2 1.2.1. Descarga del programa... 2 1.2.2. Edición de la página web... 4 1.3. Como

Más detalles

HTML, PHP y bases de datos

HTML, PHP y bases de datos HTML, PHP y bases de datos Estrella Pulido Cañabate HTML Estructura de un documento HTML Zen and Tumbolia The Zen monk Bassui wrote a letter to one of his disciples

Más detalles

MANUAL DEL LENGUAJE DE MARCADO HTML

MANUAL DEL LENGUAJE DE MARCADO HTML MANUAL DEL LENGUAJE DE MARCADO HTML Redactado por Elkin Beltrán Índice Introducción Que es un Lenguaje de Marcado? Estructura Básica de un archivo HTML Etiquetas(TAGs) Básicas del lenguaje HTML Desventajas

Más detalles

Herramientas de Google

Herramientas de Google 1 Índice de contenido Licencia y condiciones de uso...3 Introducción...4 Crear sitio...5 Acceso a Google Sites...5 Registro del sitio...6 La página de inicio...8 Añadir páginas...9 Añadir páginas...9 Página

Más detalles

Partes del formulario

Partes del formulario Partes del formulario Etiqueta La etiqueta presenta los siguientes atributos: Comando ACTION METHOD ENCTYPE Descripción El valor de este parámetro es la URL del programa o script en el Servidor

Más detalles

Creación de páginas Web

Creación de páginas Web Seminario Creación de páginas Web Santander, mayo 2006 Michael González Harbour (mgh@unican.es) GRUPO DE COMPUTADORES Y TIEMPO REAL Michael González Harbour 1 Creación de páginas Web 1. Introducción 2.

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

Unidad Didáctica 2 GENERACIÓN DE DOCUMENTOS WEB CON GUIONES DE SERVIDOR

Unidad Didáctica 2 GENERACIÓN DE DOCUMENTOS WEB CON GUIONES DE SERVIDOR Unidad Didáctica 2 GENERACIÓN DE DOCUMENTOS WEB CON GUIONES DE SERVIDOR 2.4 FORMULARIOS 18/10/2014 Taboada León IES San Sebastián Huelva 1 Formularios (I) Los formularios permiten al usuario introducir

Más detalles

INDICE Capitulo 1. Internet y la Web Capitulo 2. Páginas Web Capitulo 3. Introducción al Lenguaje HTML Capitulo 4. Imágenes

INDICE Capitulo 1. Internet y la Web Capitulo 2. Páginas Web Capitulo 3. Introducción al Lenguaje HTML Capitulo 4. Imágenes INDICE Antes de comenzar XIII Capitulo 1. Internet y la Web 1 Internet 3 Protocolos de Internet 4 El hipertexto y la Web 4 Funcionamiento de la Web 8 Cliente Web 8 Servidor Web 8 Transferencia de la pagina

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

PLAN DE SESIÓN. 1.1 Determina la estructura del sitio web con base en las necesidades del usuario

PLAN DE SESIÓN. 1.1 Determina la estructura del sitio web con base en las necesidades del usuario DATOS GENERALES: Nombre del Módulo: Diseño y elaboración de páginas web Sesión No. 1 Duración 2 horas 1.1 Determina la estructura del sitio web con base en las necesidades del usuario Estructura y compara

Más detalles

2- Formularios y JavaScript Course: Developing web- based applica=ons

2- Formularios y JavaScript Course: Developing web- based applica=ons 2- Formularios y JavaScript Course: Developing web- based applica=ons Cris*na Puente, Rafael Palacios 2010- 1 Creación de formularios Formularios Un formulario HTML es una sección de un documento que contiene

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

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

13.3. Personalización avanzada

13.3. Personalización avanzada 13.3. Personalización avanzada Cómo crear informes mediante Report Builder Un informe es un documento que nos va a mostrar una información. En un informe disponemos de varias secciones. El encabezado de

Más detalles

Guía de Uso Ndstudio - Editor (CMS) Net Design Studio. Guía de Uso Manual Gestor CMS. Ndstudio-Editor (CMS) Versión Administrador -1-

Guía de Uso Ndstudio - Editor (CMS) Net Design Studio. Guía de Uso Manual Gestor CMS. Ndstudio-Editor (CMS) Versión Administrador -1- Net Design Studio Guía de Uso Manual Gestor CMS Ndstudio-Editor (CMS) Versión Administrador -1- Índice de contenidos 1 Introducción 2 Acceso 2.1 Entrar en el CMS 3 Módulo Gestor de Contenidos 3.1 Cómo

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

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

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

Creación de Páginas WEB con HTML

Creación de Páginas WEB con HTML Universidad de Cantabria Creación de Páginas WEB con HTML Febrero-2006 Ricardo Sáez Marta Zorrilla Creacion paginas Web con HTML 1 Introducción El servicio WEB utiliza para la transferencia de información

Más detalles

...

<ETIQUETA parámetros>... </ETIQUETA> El código de mi primera.html: < HTML> Mi primera pagina Mi Primera pagina Esta es mi primera pagina (chispas). Por el momento no se

Más detalles

PERCISA Manual de Usuario

PERCISA Manual de Usuario 1 PERCISA 2 Índice de contenido 1. INTRODUCCIÓN... 3 1.1. A primera vista (Contenido de la página principal)...3 1.1.1. Qué usos tienen las partes de la portada?...3 1.2. El primer contacto como administrador...4

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

(Recopilado de: http://www.zonagratuita.com/a-cursos/internet/paginaswap.htm)

(Recopilado de: http://www.zonagratuita.com/a-cursos/internet/paginaswap.htm) COMO HACER PÁGINAS WAP (Recopilado de: http://www.zonagratuita.com/a-cursos/internet/paginaswap.htm) La creación de una pagina WAP se puede hacer en cualquier editor de texto, si bien, hay editores y herramientas

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

Figura 146. Tipos de recursos

Figura 146. Tipos de recursos 3. Agregando Recursos a cada semana o tema Figura 146. Tipos de recursos Un archivo o una web Los apuntes son contenidos, información que el maestro quiere que vean sus alumnos. Pueden ser documentos preparados

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