Introducción: páginas web y navegadores

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

Download "Introducción: páginas web y navegadores"

Transcripción

1 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 mostrarnos cuando accedemos a ella, es simplemente un fichero de texto que contiene solamente información textual y órdenes de cómo representarla gráficamente, añadiendo posiblemente ficheros externos con imágenes, sonidos, etcétera. Los navegadores son programas cuya misión fundamental, además de conectarse al servidor a través de Internet y obtener la página y los ficheros que esta indique, es entender la información escrita en la página web y presentarla por pantalla de forma adecuada. Para que todos los navegadores puedan entender la información de todas las páginas web es necesario que la información contenida en la página se ajuste a unas normas estandarizadas, conocidas por los diseñadores de páginas y los programadores de navegadores y otras aplicaciones capaces de entender las páginas web. Aunque hoy en día existen muchos lenguajes de descripción o de programación estandarizados y que entienden los navegadores o sus ampliaciones plugins-, tales como el php, javascript, etcétera, el lenguaje estándar de descripción que utilizan las páginas web es el Hypertext Markup Language o HTML. Como su nombre indica con la palabra hypertext, se trata de un lenguaje que define textos y su representación en pantalla; enlaces entre documentos, textos u otros formatos de información, etcétera, gracias a un sistema de marcas o etiquetas que indican cómo tratar el texto que encierran. Este documento va a presentar de forma sencilla las características y funciones del lenguaje HTML necesarias para realizar páginas web simples como las que se proponen en las prácticas. Existen numerosos cursos completos de HTML en Internet. En la página web de la asignatura, existen enlaces a algunos cursos y al manual de referencia del lenguaje HTML. El editor Notepad++ Los documentos HTML se pueden crear con cualquier editor de texto que no añada información de formato, como el programa Notepad que se distribuye con los sistemas operativos Windows. Sin embargo existen editores que, manteniendo esa característica, entienden el lenguaje HTML coloreando las etiquetas reconocidas, detectando errores de sintaxis y facilitando enormemente la tarea de edición del texto HTML.

2 De entre estos editores se recomienda el programa gratuito Notepad++, que además de HTML entiende una gran cantidad de lenguajes, es configurable, carga poco el ordenador y es, en definitiva, muy cómodo de usar. Este programa se ha desarrollado bajo la modalidad Open Source, por lo que cualquiera está autorizado para utilizarlo sin coste alguno. Se encuentra disponible en Internet en la dirección La figura inferior muestra el aspecto de un fichero HTML editado con el programa Notepad++.

3 Conceptos básicos de HTML Como se ha dicho más arriba, el lenguaje HTML consiste en una serie de etiquetas o marcas que indican qué debe hacer el navegador. Muchas veces estas marcas encierran texto y su función es indicar cómo se debe mostrar por pantalla. En este caso, la marca inicial tiene la forma <marca> y la final, que indica límite de su acción, </marca>. Por ejemplo la expresión <b>este texto aparecerá en negrita</b> generaría por pantalla una salida como Este texto aparecerá en negrita Otras etiquetas no se aplican al texto encerrado entre su inicio y final, sino que indican efectos o modificaciones en ellas mismas. Por ejemplo <br> inserta un salto de línea, <hr> una línea de separación horizontal, etcétera. Muchas etiquetas admiten calificadores que añaden información u opciones al modo básico de tratar el texto. Así por ejemplo, si la etiqueta <div></div> trata como un bloque el texto encerrado, <div align= center ></div> indicará que ese texto debe mostrarse centrado en la pantalla. A lo largo de los siguientes apartados se describirán las etiquetas necesarias para realizar la práctica, con sus calificadores más útiles. Para una descripción completa la referencia más autorizada es la especificación del lenguaje HTML. Una forma sencilla de empezar a familiarizarse con el código HTML y sus efectos es observar el código fuente de las páginas web que visitamos. Los navegadores más populares nos lo muestran seleccionando en la barra de menú la opción Ver -> Código fuente de la página. En las dos figuras siguientes aparece la opción en el menú del navegador Firefox y la ventana que muestra el código HTML de la página.

4

5 Estructura de un archivo HTML Un archivo con código HTML comienza con una etiqueta opcional- que indica la versión del lenguaje que se está usando y la marca <html></html> que indica al navegador que se utiliza código HTML, que vendría encerrado entre inicio y final de marca. Así nuestro documento tendrá el aspecto <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> Aquí en medio se pondrán las líneas necesarias para crear nuestra página web. </html> El código HTML encerrado entre las marcas se divide en dos partes bien diferenciadas: la cabecera y el cuerpo. La primera va encerrada entre las etiquetas <head></head> y contiene el nombre de la página, que puede ser mostrado por el navegador mientras la carga, información de estilos a utilizar en la página, scripts en otros lenguajes de programación, etcétera. El cuerpo viene encerrado entre <body></body> y contiene la información que servirá para mostrar la página: textos, formatos, enlaces, etcétera. Esta etiqueta admite varios calificadores para indicar el color del fondo (bgcolor), texto (text), enlaces (link, vlink, alink), etcétera, o para indicar una imagen de fondo (background). Los colores se especifican mediante palabras reservadas (black, red, blue ) o indicando en hexadecimal sus tres componentes RGB (en la ventana de selección de color del programa GIMP, nos aparecen como notación html).

6 A continuación aparece un ejemplo que es ya un texto HTML completo y generaría la página correspondiente al cargarlo en un navegador. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <title>ejemplo HTML completo</title> </head> <body bgcolor= yellow text= #0202E4 > Primer documento HTML </body> </html> Tipos de letra Aunque existen formas de definir tipos de letra y formatos más completos para los caracteres, sólo vamos a comentar las etiquetas básicas de que disponemos para modificar el tipo de letra. La etiqueta <b></b> hace que el texto que encierra se represente en negrita, <i></i> en itálica, <u></u> sirve para representar texto subrayado y <s></s> texto tachado. Además disponemos de <tt></tt> para texto monoespacio o en formato teletipo, <big></big> para representar texto de mayor tamaño y <small></small> para texto menor. Se pueden también indicar subíndices y superíndices con <sub></sub> y <sup></sup> respectivamente. Estas etiquetas se pueden mezclar en distintas letras de una palabra y se pueden además combinar, incluyendo varios modificadores. Por ejemplo <b>t<i>e<u>xto</u></i></b> r<u>a</u><i>r</i><b>o</b> se representaría como Texto raro Existe un conjunto de etiquetas, desde <h1></h1> hasta <h6></h6> que nos permite definir hasta 6 niveles de título distintos, siento el 1 el más importante. Cómo se representen estos niveles depende del estilo aplicado o del navegador. Formateando el texto Una vez visto cómo podemos definir la apariencia de los caracteres en pantalla, queda por estudiar como dar formato a os párrafos e incluir otros elementos tales como listas, tablas etcétera.

7 La etiqueta más útil para definir trozos de texto con un formato común es <div></div>. Admite el atributo align con los valores center, justify, left y right que indican de manera evidente el tipo de alineamiento del texto encerrado. De esta forma, para incuir texto centrado podríamos usar <div align= center >Este texto aparecerá centrado</div> Además, al organizar texto común, la etiqueta fuerza un salto de línea antes y después del texto encerrado. Es interesante comentar que HTML ignora los caracteres de formato introducidos en el propio fichero, tales como saltos de línea y espacios. Si se quiere forzar un salto de línea para separar párrafos se debe hacer con la etiqueta <br>. Si se quieren insertar manualmente espacios entre palabras, se hará con. Otro elemento interesante para el formato es la línea horizontal. Generada con <hr> muestra por pantalla una línea que divide horizontalmente la página. Otro elemento de formato muy usado es la lista. HTML permite generar listas sin orden, es decir, cuyas opciones no van numeradas, con la etiqueta <ul></ul> y listas ordenadas con <ol></ol>. Dentro de cada lista, los elementos se delimitan con <li></li>. Por supuesto, está permitido incluir listas dentro de otras listas como aparece en el ejemplo siguiente. <ol> </ol> <li>primer elemento de la lista con orden.</li> <li>este segundo elemento es más raro.<br>incluye un salto de ínea sólo para liar.</li> <li>el tercero muestra cómo se pueden hacer listas anidadas. <ul> </ul> </li> <li>elemento de la lista de la lista.</li> <li>otro.</li> <li>así hasta cansarnos </li> <li>este, que es el último, nos devuelve a la normalidad.</li> La salida por pantalla generada, que aparece en la fgura siguiente, se puede comprobar fácilmente copiando el texto en un archivo HTML y abriéndolo con un navegador. Como se puede ver en el ejemplo, se ha mantenido la estructura más o menos esperada organizando con tabuladores el texto introducido. Esta forma de estructurar los textos, llamada indentación, se utiliza al escribir programas y es una

8 buena práctica para evitar confundirse al ver el texto tal como lo vamos escribiendo, sin formato. El último elemento de formato que vamos a considerar en este documento es la tabla. Es un instrumento de una gran potencia porque permite organizar de forma muy versátil y completa la información en las dos dimensiones de la pantalla. La etiqueta que define una tabla es <table></table> y admite varios atributos. Algunos de ellos, ya vistos como align y bgcolor, tienen el efecto esperado. El primero nos indica el alineamiento de la tabla en la página y el segundo su color de fondo. Otro conjunto de atributos definen el tamaño y apariencia de la tabla en pantalla. Así border nos permite definir el ancho en píxeles de los bordes de la tabla. Un valor de 0 (border=0) los ocultará, permitiendo organizar la información en pantalla sin que parezca tabulada. Los atributos frame y rules indican además qué líneas alrededor de la tabla y entre las celdas se muestran. El atributo width ajusta el ancho de la tabla en pantalla, bien en píxeles bien en porcentaje de la anchura disponible, si se añade el símbolo % tras el valor numérico (width=25%). Por último, cellspacing y cellpadding indican, respectivamente, la distancia, en píxeles o porcentaje, entre las celdas y desde el extremo de la celda hasta el principio de su contenido. El número de filas y columnas de la tabla no se especifica. El navegador lo obtiene contando las definiciones de filas, identificadas por la etiqueta que aparecen dentro de la tabla y las de columnas, con <td></td>, que encuentra dentro de cada fila. Una tabla con 3 filas y 4 columnas sería

9 <table bgcolor= cyan cellspacing=1 cellpadding=2 border=3> <td>fila 1, columna 1</td> <td>fila 1, columna 2</td> <td>fila 1, columna 3</td> <td>fila 1, columna 4</td> <td>fila 2, columna 1</td> <td>fila 2, columna 2</td> <td>fila 2, columna 3</td> <td>fila 2, columna 4</td> <td>fila 3, columna 1</td> <td>fila 3, columna 2</td> <td>fila 3, columna 3</td> <td>fila 3, columna 4</td> </table> Y su apecto en el navegador:

10 La etiqueta admite los atributos bgcolor y align, ya descritos anteriormente, y valign que indica la posición del texto en vertical (top, middle, bottom y baseline). La marca <td></td> admite los mismos atributos, además de otros muy interesantes para definir tamaños y agrupaciones de celdas. height y width permiten definir la altura y anchura de las celdas en píxeles o porcentaje, como se ha visto anteriormente. Por otra parte, colspan y rowspan indican que la celda actual se expande por el número de columnas y filas especificado. En este caso, la expansión se debe tener en cuenta en las siguientes definiciones de fila, que tendrán menos elementos. El ejemplo siguiente muestra el uso de estos atributos. <table bgcolor= cyan align= center cellspacing=5 cellpadding=5 border=1> </table> <td colspan=2 rowspan=2 bgcolor= yellow >Fila 1 y 2, columna 1 y 2</td> <td>fila 1, columna 3</td> <td>fila 1, columna 4</td> <td>fila 2, columna 3</td> <td rowspan=2 bgcolor= green >Fila 2 y 3, columna 4</td> <td>fila 3, columna 1</td> <td>fila 3, columna 2</td> <td>fila 3, columna 3</td>

11 Y la imagen obtenida en pantalla: Aunque no se ha comentado explícitamente, la potencia de las tablas viene de la propia naturaleza recursiva del lenguaje HTML. Un elemento de datos de una tabla, encerrado entre <td></td>, puede ser casi cualquier elemento del lenguaje, por ejemplo una lista u otra tabla. Y esto se aplica también dentro de la nueva lista o la nueva tabla. La imagen siguiente nos muestra cómo se puede utilizar esta etiqueta para organizar distintos elementos en las dos dimensiones de la pantalla. El código que se ha utilizado para generarla aparece después ( para no asustar a nadie antes de tiempo!)

12 <table bgcolor="white" border=0 cellspacing=50> <tr bgcolor="cyan"> <td align="center" colspan=2><h1>ejemplo de tabla potente</h1> <td height=100 align="center">aquí va una tabla</td> <td align="left">aquí va una lista</td>

13 <td valign="middle" align="center"> <table bgcolor="pink" border=2> <tr bgcolor="cyan" align="center"> <td>c1</td> <td>c2</td> <td>c3</td> <td>c4</td> <td bgcolor="cyan">f1</td> <td>texto1</td> <td>texto2</td> <td>texto3</td> <td bgcolor="cyan">f2</td> <td>texto4</td> <td>texto5</td> <td>texto6</td> </table> </td> <td valing="middle" align="left"> Ahora viene la lista <ol> <li>elemento 1</li> <li>elemento 2</li> <li>elemento 3</li> <li>elemento 4</li> <li>elemento 5</li> </ol> </td> </table>

14 Enlaces Hasta ahora hemos visto funciones de HTML para el formato de los textos y su representación en pantalla. Sin embargo, su característica principal como lenguaje de hipertexto es su capacidad para incorporar en los textos otro tipo de información: imágenes, vídeo, sonidos u otros textos, y permitirnos navegar de unos a otros con facilidad. Estas funciones del lenguaje se consiguen mediante etiquetas que constituyen enlaces a otros ficheros o páginas. El primer elemento que nos puede interesar incluir es una imagen. Esto se consigue con la etiqueta <img> que requiere el atributo src para indicar dónde se encuentra el fichero que contenga la imagen. Los tipos de ficheros que pueden ser representados dependen del navegador. Normalmente los formatos de imagen más comunes (.jpg,.bmp,.gif,.png ) pueden ser utilizados. Otros atributos interesantes son los ya vistos height y width para indicar el tamaño, align para indicar la posición con respecto a la página y border para situar, si se desea, un marco de los píxeles indicados alrededor. Además, hspace y vspace nos permiten indicar el espacio libre a dejar alrededor de la imagen, tanto en horizontal como en vertical. Por último vale la pena comentar la etiqueta alt que permite definir un texto que aparecerá en lugar de la imagen mientras esta se carga o cuando pasemos el puntero del ratón sobre ella. A continuación aparece un ejemplo de cómo incluir una imagen en una página: <img src= mi_imagen.jpg alt= Foto de mis vacaciones align= middle > Es necesario indicar que los navegadores pueden interpretar de formas distintas el alineamiento de las imágenes. Una buena forma de situarla correctamente es incluirla dentro de un bloque <div></div> con el alineamiento horizontal deseado. Se recomienda así mismo leer detenidamente el apartado de este documento acerca de la ubicación de los ficheros en el disco y de cómo referirse a ellos en los enlaces. El enlace por excelencia en las páginas web, el que nos permite enlazar otras páginas, otras zonas de la propia página, ficheros, enviar correo electrónico, etcétera es el etiquetado con <a></a> (del inglés, anchor). El atributo más importante es href, que indica la dirección de la hiper-referencia y por construcción de esta, su tipo. De esta manera, para enlazar una página web de Internet el texto que utilizamos para el atributo será ; si queremos enlazar un fichero en nuestro servidor, pondremos nombre_de_fichero. Si queremos enviar un correo electrónico mediante el enlace usaremos la expresión mailto:dirección_de_correo. Los siguientes ejemplos sirven para mostrar estos distintos tipos de enlaces y su uso.

15 <a href= >Página de la Universitat Jaume I</a> <a href= un correo a tu profesor</a> <a href= mi_imagen.jpg target= blank >Si quieres ver la foto a pantalla completa</a> El atributo target, que aparece en el último ejemplo, permite definir cómo se va a realizar el enlace. Si indicamos blank este se realizará en una nueva ventana abierta por el navegador. En el caso de utilizar marcos, como se explicará a continuación, especificaremos el marco en el que se va a cargar la página enlazada. Páginas con varios marcos HTML nos permite dividir la pantalla en varias zonas que pueden tratarse y enlazarse individualmente pero que forman la misma página web. Esto se consigue mediante el uso de marcos. La etiqueta <frameset></frameset> nos permite dividir la pantalla en secciones horizontales o verticales que se podrán luego tratar individualmente. Especificando como atributos rows o cols con una lista de tamaños, determinaremos la estructura resultante. Como esta estructura define toda la página web, una definición de marcos aparece en una página web en lugar del cuerpo de la misma, reemplazando a la etiqueta antes vista <body></body>. Dentro de un frameset se utiliza la etiqueta <frame></frame> para especificar los contenidos y otros aspectos de cada uno de los marcos. Sus atributos más interesantes son frameborder que admite los valores 1 ó 0 para indicar que se representa o no con borde, src que nos indica la página que se cargará inicialmente y name, que nos servirá para dirigir los enlaces al marco que se desee, según se ha dicho antes. Como siempre, HTML permite definir elementos dentro de otros elementos idénticos. Así el siguiente ejemplo muestra cómo, mediante dos definiciones de marcos, creamos una página versátil con tres marcos efectivos. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <title>ejemplo de marcos</title> </head> <frameset rows= 20%, 80% > </frameset> </html> <frame src= titulo.html name= titulo > <frameset cols= 15%, 85% > </frameset> <frame src= margen.html name= margen > <frame src= principal.html name= principal >

16 La página resultante se vería: Para saber más Además de estas breves notas, se recomienda leer los tutoriales en línea que existen en la página web de la asignatura y consultar el código HTML de las páginas que nos gusten. Para resolver cualquier duda la referencia mejor es el manual del lenguaje HTML. Acerca de los ficheros y sus referencias Cuando se quiere hacer una referencia a un fichero desde un enlace en una página web, además de indicar su nombre, incluyendo extensión, es necesario indicar el camino a seguir en el sistema de ficheros para encontrarlo. Esto siempre se puede hacer de dos formas. La primera consiste en dar la referencia absoluta desde el origen del sistema de ficheros. En los sistemas operativos Windows sería, por ejemplo C:\dir1\dir2\nombre.ext. Esta referencia sin embargo tiene el inconveniente de no ser correcta si cambiamos de lugar la página y todos los archivos enlazados, por ejemplo para publicarla. Se recomienda por ello utilizar referencias relativas al archivo desde el que se hace el enlace. Si nuestra página desea enlazar un archivo en su propia carpeta,

17 pondremos simplemente el nombre del archivo en el enlace. Si, por el contrario, el archivo se encuentra en un subdirectorio llamado por ejemplo img, escribiremos en el enlace img/nombre_de_fichero. Si ocurre al contrario, que queremos referenciar un archivo en el directorio padre de aquél en que se encuentra la página, lo indicaremos mediante../, de la forma../nombre_de_fichero. En general, si queremos descender varias carpetas que son subdirectorios de subdirectorios de aquélla en la que está la página, pondremos sus nombres hasta obtener algo como subdir1/subdir2/subdir3/imagen.jpg. Este sería el caso que se ilustra en la figura, con nuestra página HTML residiendo en la Origen, Si por el contrario queremos remontarnos varios directorios por encima del actual nada nos impide poner../../../imagen.jpg. si, como en la figura inferior, la página estuviera en subdir3 y el fichero imagen.jpg en Origen.

18 Y si queremos descender por otros subdirectorios de alguno por encima del actual, la expresión quedará cómo../../subdir2_2/subdir2_22/imagen.jpg si, como aparece en esta última figura, la página se encuentra en subdir2_12 e imagen.jpg en subdir2_22. Para comprender las referencias relativas basta con tener en cuenta que cada../ asciende una carpeta desde la que estamos, y cada nombre de carpeta desciende. Así../../ nos sitúa en subdir2 y de allí vamos a subdir2_2 y subdir2_22. En el fichero comprimido ejemplohtml.zip aparecen todos los ejemplos de este texto, incluyendo el uso de referencias relativas. Para verlo con un navegador entrar en la carpeta primera y hacer doble clic en primera.html.

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

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

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

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

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

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

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

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

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

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

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

EDICIÓN WEB CÓDIGO HTML

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

Más detalles

Curso Diseño Web con Software libre, VNU

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

Más detalles

Profesor: Víctor Cárdenas Schweiger

Profesor: Víctor Cárdenas Schweiger Profesor: Víctor Cárdenas Schweiger 2014 En primer lugar se debe especificar que el archivo de texto que se esta escribiendo es un documento HTML, para ello usamos las instrucciones de inicio y fin de

Más detalles

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

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

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

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

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

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

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

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

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

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

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

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

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

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

COLEGIO AGUSTINIANO CIUDAD SALITRE AREA DE TECNOLOGÍA E INFORMATICA GUIA DE APOYO SEGUNDO BIMESTRE 2015 GRADO UNDECIMO

COLEGIO AGUSTINIANO CIUDAD SALITRE AREA DE TECNOLOGÍA E INFORMATICA GUIA DE APOYO SEGUNDO BIMESTRE 2015 GRADO UNDECIMO COLEGIO AGUSTINIANO CIUDAD SALITRE AREA DE TECNOLOGÍA E INFORMATICA GUIA DE APOYO SEGUNDO BIMESTRE 2015 GRADO UNDECIMO CONCEPTOS BÁSICOS PARA EL DISEÑO DE PAGINAS WEB UNIDAD TEMÁTICA: INICIANDO CON HTML

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

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

HTML. El Lenguaje de Programación de Páginas Web. Iván Martínez Toro

HTML. El Lenguaje de Programación de Páginas Web. Iván Martínez Toro HTML El Lenguaje de Programación de Páginas Web Iván Martínez Toro ÍNDICE DECONTENIDOS Introducción al HTML. Estructura general de una página: etiquetas HTML, HEAD y BODY. Dar título a la página con la

Más detalles

Herramientas para crear páginas.

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

Más detalles

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

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

INTRODUCCIÓN AL LENGUAJE HTML

INTRODUCCIÓN AL LENGUAJE HTML 1 INTRODUCCIÓN A ENGUAJE HTM En otro de los cursos de esta serie de apuntes ya aprendimos a navegar y buscar información en Internet. De esta forma, es posible acceder a recursos que pueden ser útiles

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

ACTIVIDADES PÁGINAS WEB

ACTIVIDADES PÁGINAS WEB ACTIVIDADES PÁGINAS WEB PRÁCTICA 1: Plantilla Nuestro primer ejercicio consiste en diseñar una plantilla de documento HTML para iniciar rápidamente todas nuestras páginas y ahorrarnos escribir los elementos

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

Manual de Plantillas para Listados

Manual de Plantillas para Listados 1 Manual de Plantillas para Listados www.sagasoluciones.com info@sagasoluciones.com C/ Salado 11 Local 10. 41010 Sevilla T. + 34 954 45 72 75 F. + 34 954 45 75 72 CONTROL DEL DOCUMENTO Realizado 21/09/2010

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

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

Luis José Sánchez González INTRODUCCIÓN CURSO BÁSICO DE HTML INTRODUCCIÓN Para crear una página web podemos optar por una de los siguientes métodos: a) Utilizar una herramienta de diseño web como Screem, Blue Fish, Front Page o incluso un procesador

Más detalles

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

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

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

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

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

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

CÓMO CREAR UNA WEBQUEST Paso a Paso

CÓMO CREAR UNA WEBQUEST Paso a Paso CÓMO CREAR UNA WEBQUEST Paso a Paso 1.- Lo primero que tenemos que hacer es acceder a la página del instituto usando Mozilla (no usar el navegador Firefox que puede dar problemas) URL: www.ieseltablero.org

Más detalles

El módulo de texto plano es un sencillo editor. Al seleccionarlo en la caja de módulos, el área central adoptará al siguiente aspecto:

El módulo de texto plano es un sencillo editor. Al seleccionarlo en la caja de módulos, el área central adoptará al siguiente aspecto: Plantilla de texto plano El módulo de texto plano es un sencillo editor. Al seleccionarlo en la caja de módulos, el área central adoptará al siguiente aspecto: Título: Es el título que aparecerá identificando

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

CURSO PÁGINAS WEB HTML: CÓDIGO EN EL EDITOR GEDIT

CURSO PÁGINAS WEB HTML: CÓDIGO EN EL EDITOR GEDIT CURSO PÁGINAS WEB HTML: CÓDIGO EN EL EDITOR GEDIT Colegio Concertado Valdecás 1. Estructura de una página web a) Etiquetas de comienzo y fin del documento (etiqueta de entrada)... (etiqueta

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

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

MOODLE 1.9 EDITOR DE TEXTO HTML

MOODLE 1.9 EDITOR DE TEXTO HTML MOODLE 1.9 EDITOR DE TEXTO HTML Unitat de Suport Tecnicopedagògic - CAMPUS EXTENS Universitat de les Illes Balears. Edifici Aulari. Ctra. de Valldemossa Km. 7.5. 07122 Palma (Illes Balears) Primera edición:

Más detalles

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

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

Más detalles

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION CICLO 01-2014 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION GUIA DE LABORATORIO Nº 2 Nombre de la practica: Fundamentos del Lenguaje HTML Lugar de ejecución: Laboratorio

Más detalles

Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver

Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver UNIVERSIDAD CARLOS III DE MADRID. ESCUELA DE TURISMO. Informática aplicada al sector turístico Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver En esta práctica guiada vamos a ver

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

Prólogo 3. Convenciones Tipográficas... 3 Sugerencias... 4. Introducción 5. Familiarizándose con el interfaz de SiteBuilder 6

Prólogo 3. Convenciones Tipográficas... 3 Sugerencias... 4. Introducción 5. Familiarizándose con el interfaz de SiteBuilder 6 Parallels Panel Contenidos Prólogo 3 Convenciones Tipográficas... 3 Sugerencias... 4 Introducción 5 Familiarizándose con el interfaz de SiteBuilder 6 Creación de un sitio web 8 Edición de un sitio web

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

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

Editor de textos para Drupal: TinyMCE

Editor de textos para Drupal: TinyMCE Editor de textos para Drupal: TinyMCE Cuando vayamos a editar el texto de una página, normalmente nos encontraremos con un editor de textos, similar a Word, pero para la web. Donde podamos usarlo encontraremos

Más detalles

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION CICLO 01-2016 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION GUIA DE LABORATORIO Nº 1 Nombre de la practica: Introducción y conceptos básicos de HTML Lugar de ejecución:

Más detalles

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

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

Más detalles

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 y objetos IMÁGENES

Imágenes y objetos IMÁGENES IMÁGENES Y OBJETOS Imágenes y objetos 2 IMÁGENES Uno de los elementos más vistosos e importantes de las páginas web. Su introducción puede explicar de manera más fácil y agradable nuestra información al

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

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

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

Guía para creación de temas para editor de EditandSend

Guía para creación de temas para editor de EditandSend Guía para creación de temas para editor de EditandSend En este documento se describen las acciones que debe realizar el diseñador/maquetador para personalizar un tema y poder ser utilizado en el EDIT.

Más detalles

IB14 Informática Aplicada a la Construcción

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

Más detalles

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

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

Web. Microsoft Excel: Capítulo 1 Creación de páginas web con Dreamweaver

Web. Microsoft Excel: Capítulo 1 Creación de páginas web con Dreamweaver Web Microsoft Excel: Capítulo 1 Creación de páginas web con Dreamweaver Álvarez, S., Bravo, S., Departamento de Informática y automática Universidad de Salamanca Sumario 1. Qué es Dreamweaver? 2. El entorno

Más detalles

HTML HTML HTML. Diseño de Sitios Web. Qué es HTML?

HTML HTML HTML. Diseño de Sitios Web. Qué es HTML? Diseño de Sitios Web 5 (I) Qué es? Es un lenguaje descriptivo con el cual se describe la estructura del texto y todos los elementos que se muestran en la página. Es el método más usado para publicar documentos

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

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

7. Desarrollo de aplicaciones multimedia.

7. Desarrollo de aplicaciones multimedia. 7. Desarrollo de aplicaciones multimedia. Dpt. Informática Univ. Valencia Índice 7.1 El sistema WWW y el lenguaje HTML...3 7.2 El lenguaje HTML...4 7.2.1. HTML 4.0 y otros estándares HTML...5 7.2.2. Identificación

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

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

SPIP (v.1.8) Manual para redactores Alfredo Sánchez Alberca (asalber@ceu.es)

SPIP (v.1.8) Manual para redactores Alfredo Sánchez Alberca (asalber@ceu.es) SPIP (v.1.8) Manual para redactores Alfredo Sánchez Alberca (asalber@ceu.es) 1. Arquitectura de SPIP SPIP es un sistema para la publicación digital de documentos en un sitio web. Tanto la creación de nuevos

Más detalles

Qué es HTML? Páginas WEB. Etiquetas

Qué es HTML? Páginas WEB. Etiquetas Guía de Html 2015 QUÉ ES HTML PÁGINAS WEB ETIQUETAS ESTRUCTURA BÁSICA DE UNA PÁGINA WEB CÓMO SE UTILIZAN LOS COLORES EN HTML? TEXTO EN HTML ENCABEZADOS UBICACIÓN, FORMATO Y ATRIBUTOS DE TEXTO TABLAS NUMERACIÓN

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

Taller 1. Creación una Página Web Personal

Taller 1. Creación una Página Web Personal Taller 1 Creación una Página Web Personal El objetivo de este taller es comenzar a trabajar los elementos básicos utilizados en HTML como imágenes, hipervínculos (links), listas, tablas, para crear una

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

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

1 DISEÑO WEB de ANCHO FIJO con 2 COLUMNAS FLOTANTES

1 DISEÑO WEB de ANCHO FIJO con 2 COLUMNAS FLOTANTES Diseño WeB de ancho fijo con 2 columnas flotantes _TIN 1º Bachillerato página 1/5 1 DISEÑO WEB de ANCHO FIJO con 2 COLUMNAS FLOTANTES..1 1.1 Diseños de ancho fijo, elástico y líquido.1 1.2 Diseño de ancho

Más detalles

Páginas Web Barcelona

Páginas Web Barcelona Páginas Web Barcelona Requisito previo: Todos los asistentes deben de tener previo conocimiento de las plataformas Macintosh o Windows. Se prefiere que los delegados tengan una experiencia básica en HTML

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

Manual de gestión de contenidos web en entorno Drupal. Versión sitio maestro para servicios 1.0

Manual de gestión de contenidos web en entorno Drupal. Versión sitio maestro para servicios 1.0 Manual de gestión de contenidos web en entorno Drupal Versión sitio maestro para servicios 1.0 Contenido Gestión de contenidos... 5 Crear contenidos... 5 Tipos de contenido... 5 Página básica o basic

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

INTRODUCCIÓN AL WEB. Pag. 1 de 10

INTRODUCCIÓN AL WEB. Pag. 1 de 10 INTRODUCCIÓN AL WEB La World Wide Web o simplemente WWW o Web es uno de los métodos más importantes de comunicación que existe en Internet. Consiste en un sistema de información basado en Hipertexto (texto

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

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

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

Más detalles

SERVICE DEFINITION MANUAL DEL ADMINISTRADOR

SERVICE DEFINITION MANUAL DEL ADMINISTRADOR SERVICE DEFINITION MANUAL DEL ADMINISTRADOR Versión de producto: 1.5 Última revisión: 11-11-2008 2008 Carabela Consulting, S.L. Este documento contiene información confidencial. Página 1 de 18 ÍNDICE 1.

Más detalles

Diseño de páginas web 2011

Diseño de páginas web 2011 Diseño de páginas web 2011 Al finalizar el curso, el alumno será capaz de planificar y diseñar correctamente desde sencillas páginas web hasta completos sitios web. Para ello, se le proporciona primero

Más detalles