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

Save this PDF as:
 WORD  PNG  TXT  JPG

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

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

Transcripción

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

2 Presentación del curso Programación de aplicaciones Web con PHP y MySQL. Ahora continuaremos con el estudio de las páginas Web HTML. Estudiaremos las listas en HTML. También aprenderás a cerca de los formatos de imágenes para la Web: gif, jpg, png, entre otros. Te enseñaremos a crear mapa de imágenes, a usar los enlaces en la Web y a realizar diseños de Web con tablas y hojas de estilo CSS. 2

3 1. HTML. Listas (primera parte) Listas Existen varios tipos de listas en HTML, todas ellas se pueden crear también listas anidadas. Práctica: html_1.htm - Uso de Listas <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>uso de los tres tipos de Listas</title> </head> <body> <ol>una lista ordenada básica <li>primer ítem ordenado <li>segundo ítem ordenado <li>tercer ítem ordenado </ol> <ul>lista No ordenada <li>primer ítem no ordenado <li>segundo ítem no ordenado <li>tercer ítem no ordenado </ul> <dl>lista Definición <dt>primer ítem definición <dd>primera definición <dt>segundo ítem definición <dd>segunda definición <dt>tercer ítem definición <dd>tercera definición </dl> 3

4 </html> 4

5 2. HTML. Listas (segunda parte) Antes de insertar una imágen a una página HTML se deben tomar en cuenta estas consideraciones: Los formatos de imágenes para la Web; gif, jpg, png * Para incrementar la velocidad de descarga de una página con contenido además de texto imágenes; - limitar tamaño archivos imágenes. - limitar el número de imágenes. - reutilizar imágenes tanto como sea posible. - usar marcos así solo la parte de la ventana, no es utilizado. - usar texto mejor que imágenes donde se pueda. * En la edición de imágenes se podrían realizar algunas modificaciones al momento de guardar el archivo de imágen: - reducir la profundidad de bits y salvar como gif. - indexar el color de la imágen si queremos salvar como gif. - salvar la imágen como gif transparente. - salvar la imágen como un archivo png. - salvar la imágen como un jpg progresivo, o como gif entrelazado. Facilitaría ser descargado rápido. Para insertar una imágen en un documento HTML utilizar la etiqueta <img> 5

6 <img src="" alt="" align="" width="" height="" border="" /> src: la ruta del archivo de la imágen. alt: texto alternativo al no cargarse la imágen. align: alinear de acuerdo al contenido que lo acompaña. width: ancho de la imágen. height: alto de la imágen. border: contorno borde de la imágen "0" no mostrar borde. 6

7 3. Insertar imágenes. Práctica Práctica: html_2.htm - Insertar imágenes en HTML <html> <head> <title>insertar de Imágenes</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> </head> <body> <p>ejemplo de alineamiento con el uso del atributo "top" <img alt="imágen 1" src="images/imagen_1.png" width="48" height="48" align="top"/></p> <p>ejemplo de alineamiento con el uso del atributo "bottom" <img alt="imagen 2" src="images/imagen_2.png" width="48" height="48" align="bottom"/></p> <p>ejemplo de alineamiento con el uso del atributo "middle" <img alt="imagen 3" src="images/imagen_3.gif" width="48" height="48" align="middle"/></p> <p>ejemplo de alineamiento con el uso del atributo "left" <img alt="imágen 2" src="images/imagen_2.png" width="64" height="64" align="left"/></p> <p> </p> <p> </p> <p>ejemplo de alineamiento con el uso del atributo "right" <img alt="imágen 4" src="images/imágen_4.jpg" width="40" height="92" align="right"/></p> <p> </p> <p> </p> <p>enlace desde una imágen</p> <a href="alt="romano" src="images/imágen_4.jpg" width="40" height="92" border="0"></a> </html> 7

8 4. Mapa de imágenes Mapas de imágenes, para la creación de mapas en las imágenes se utiliza la etiqueta <map>, <area>. <img alt="" src="" width="" height="" border="0" usemap="#map"> <map name="map"> <area shape="" coords="" href=""> <area shape="" coords="" href=""> </map> usemap="#": atributo en la etiqueta <img> para identificar el mapa que se va hacer sobre esta imágen. <map name="">: etiqueta para el mapa de imágen <area shape="">: tipo de área a sectorizar <area coords="">: coordenadas del área sobre la imágen <area href="">: enlace a dirección URL Práctica: html_3.htm - Mapas de imágenes <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>mapas de imagen</title> </head> <body> <img alt="sistemas de hosting" src="mapa.png" width="521" height="157" border="0" usemap="#map"> <map name="map"> <area shape="rect" coords="1,-1,170,156" alt="plan Standard" href=" <area shape="rect" coords="172,-1,343,155" alt="plan Avanzado" href=" <area shape="rect" coords="344,1,525,155" alt="plan Profesional" href=" </map> </html> 8

9 5. HTML. Uso de enlaces en la web Uso de enlaces en la Web Un enlace puede ser una zona de texto o gráficos que si son seleccionados nos trasladan a otro documento HTML o a otra posición dentro del documento actual. Siendo HTML el lenguaje de Internet, la diferencia que posee con respecto a otros tipos de hipertexto es que ese otro documento puede estar físicamente en otro lado del mundo. Son los enlaces lo que hacen de la telaraña o World Wide Web. La etiqueta <a> La sintaxis de esta etiqueta es: <a href="" title="" target="">texto a visualizar y en la cual se va hacer clic del enlace</a> href: la dirección de Internet o URL que vamos a abrir. target: el sitio donde se abre la página que deseamos enlazar: _blank, _parent, _self, _top, otros title: texto alternativo sobre el enlace. <a href=" de google</a> Práctica: html_4.htm - Enlaces Web <html> <head> <title>enlaces Web</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> <script language="javascript"> function NewsWindow(){ fin=window.open("","nueva","width=400,height=400"); } </script> </head> <body> <p><a href=" target="_blank">abrir en nueva ventana</a></p> <p><a href=" target="_self">abrir en la misma ventana</a></p> <p>puedes encontrar más información de google <a href=" title=" Página de inicio de Google">aquí</a>.</p> <p><strong>abrir una pagina en una nueva ventana desde una pagina</strong></p> <p><a href="javascript:newswindow()">abrir ventana</a></p> <p><a href=" target="nueva">llenar ventana</a></p> </html> 9

10 6. HTML. Anclas Anclas Crear anclas utilizando este carácter #: <a name="enlace">título enlace</a> y hacemos referencia a el de esta forma <a href=" a Enlace</a> Trabajar con enlaces absolutos y relativos: / hace referencia a un subdirectorio del directorio raíz./ hace referencia a un subdirectorio del directorio padre../ hace referencia al directorio padre por ejemplo: <a href="/cursos/html/">pagina de cursos HTML</a> Práctica: html_5.htm - Enlaces en una misma página <html> <head> <title>enlaces en una misma página</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> </head> <body> <!-- Utilización de Anclas --> <p><a name="capítulo1">capítulo 1</a></p> <p>para más información ver <a href="#capitulo2">capítulo 2</a> </p> <p> </p> <p> </p> <p>... Más HTML...</p> <p> </p><p> </p><p> </p><p> </p><p> </p> <p> </p><p> </p><p> </p><p> </p><p> </p> <p> </p><p> </p><p> </p><p> </p><p> </p> <p> </p><p> </p><p> </p><p> </p><p> </p> <p> </p> <p><a name="capítulo2">capítulo 2</a> <p> </p> <p> </p> <p><a href="#capítulo1">regresar a Capítulo 1</a></p> </html> 10

11 7. La etiqueta Práctica: html_6.htm - Enlace a un contenido especifico de otra pagina <html> <head> <title>enlace a un contenido especifico de otra pagina</title> </head> <body> <p>introduccion</p> <p> </p><p> </p> <p><a href="html_12.htm#capitulo2">ir a Capítulo 2</a></p> <p> </p><p> </p><p> </p><p> </p><p> </p> </html> La etiqueta <link> Para relacionar a enlaces externos <link rel="stylesheet" href="html/estilos.css" type="text/css"> Uso de tablas Las tablas son posiblemente la manera mas clara de organizar la información. También es un modo más adecuado para poder maquetar texto y gráficos de una manera algo mas controlada. A continuación la estructura básica de una tabla: <table align="" width="" border="" cellspacing="" cellpadding=""> <tr> <td></td> <td></td> </tr> </table> A continuación, descripción de los atributos de las tablas: En Tabla: cellspacing: espacio entre celdas cellpadding: espacio en cada uno de los bordes de la celda y el contenido que hay en ellas. width: ancho de la tabla border: grosor del borde la tabla align: center, right, left En Filas: align: alineamiento de horizontal valign: alineamiento vertical 11

12 12

13 8. HTML. Uso de tablas (segunda parte) En Celdas (columnas): align: alineamiento horizontal valign: alineamiento vertical colspan: agrupa columnas rowspan: agrupa filas La estructura estándar de una tabla: <table> <caption>título de la Tabla</caption> <thead> <tr><td colspan="2">cabecera de la Tabla</td></tr> </thead> <tfoot> <tr><td colspan="2">pie de la Tabla</td></tr> </tfoot> <tbody> <tr><th>cabecera Celda 1</th><th>Cabecera de Celda 2</th></tr> <tr><td>cuerpo de Celda 1</td><td>Cuerpo de Celda 2</td></tr> </tbody> </table> Práctica: html_7.htm - Ejemplo de una tabla con contenido <html> <head> <title>tabla de Libros Disponibles</title> </head> <table border="1" cellpadding="3" cellspacing="2"> <caption>libros Disponibles</caption> <tr><th>isbn</th><th>titulo</th><th>autor</th></tr> <tr><td>m </td><td>programación Web</td><td>Sams 2005</td></tr> <tr><td>w </td><td>lenguaje HTML</td><td>Microsoft Development</td></tr> <tr><td>c </td><td>programación Visual C++</td><td>Fco Javier Zeballos</td></tr> <tr><td>m </td><td>base de Datos Web MySQL</td><td>O'Reilly</td></tr> <tr><td>a </td><td>apache Web Server</td><td>Apache Group 2006</td></tr> </table> </html> 13

14 14

15 9. Agrupar columnas. Práctica Práctica: html_8.htm - Agrupar columnas <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>agrupar columnas en tablas</title> </head> <body> <table border="1" cellpadding="5"> <caption>sumario Encuestados por Respuestas</caption> <tr align="center"> <th> </th> <th colspan="2" width="150">agresivo</th> <th colspan="2" width="150">pasivo</th> <th colspan="2" width="150">pasivo/agresivo</th> </tr> <tr align="center"> <th>encuestado</th> <th>a</th><th>b</th><th>c</th><th>d</th><th>e</th><th>f</th> </tr> <tr><td>miguel</td> <td>0</td><td>3</td><td>4</td> <td>0</td><td>5</td><td>2</td> </tr> <tr><td>teresa</td> <td>0</td><td>0</td><td>4</td> <td>6</td><td>2</td><td>2</td> </tr> </table> </html> 15

16 10. Agrupar filas. Práctica Práctica: html_9.htm - Agrupar filas <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>agrupar Filas en Tablas</title> </head> <body> <table border="1" cellpadding="5"> <caption>resumen Encuestados a Preguntas 1-4</caption> <tr align="center"><th>categoría</th><th>edad</th> <th>#1</th><th>#2</th><th>#3</th><th>#4</th></tr> <tr><td rowspan="2">hombres<br>encuestados</td> <td>23</td><td>a</td><td>c</td><td>f</td><td>b</td></tr> <tr><td>29</td><td>b</td><td>f</td><td>a</td><td>a</td></tr> <tr><td rowspan="2">mujeres<br>encuestadas</td> <td>28</td><td>f</td><td>e</td><td>b</td><td>b</td></tr> <tr><td>21</td><td>b</td><td>b</td><td>b</td><td>a</td></tr> </table> </html> 16

17 11. Diseño de páginas Web con tablas Diseño de páginas Web con tablas El diseño Web desde sus inicios se han ido mejorando y cada vez nuevos estándares han dado una idea mas profesional y organizada del manejo de los contenidos de un diseño Web, desde el Diseño Web con Tablas y ahora el diseño Web con Hojas de estilo (CSS), pero ha llevado a generar controversias. Tablas vs CSS Ventajas de tablas frente a CSS * Mayoría de navegadores no admiten CSS * Las tablas readaptan su contenido * Muchos más sencillos que utilizar Ventajas de CSS frente a tablas * CSS va hacer esencial en el futuro ya que atributos de tablas serán desaprobados por versiones HTML * Son independientes del navegador, lo que creamos es lo que se va a ver * Anidar tablas es mas complejo, con CSS son organizadas y fáciles de cambiar en el diseño * Con tablas el diseño es artesanal Diseño Web, podemos elegir una herramienta para el diseño Web (Dreamweaver MX 2004), es el mas utilizado o sino también escribiendo nosotros en algún editor de código HTML el diseño de nuestra pagina Web. Haciendo con ello, lo siguiente: * Diseño de tablas anidadas o utilizar atributos colspan o rowspan * Diseño con código o * Diseño con Dreamweaver Práctica: html_10.htm - Diseño de una pagina con Tablas anidadas y atributos colspan y rowspan 17

18 12. CSS (hojas de estilo) Uso de CSS (hojas de estilo) Introducción a CSS Un estilo se define así: selector {propiedad1: valor1; propiedad2: valor2;} CSS: hojas de estilo en cascada, al crear un estilo estamos creando unas normas de formateo para todo el contenido de la pagina o documento HTML. Pueden utilizarse varios selectores separados con comas: Selector1, selector2, selector3 {propiedad1: valor1;} Existen tres métodos de implementar una hoja de estilos * Definición de estilos dentro de etiquetas individuales <h1 style="color:red;"></h1> Usando elemento "style" < style type="text/css">definición de estilos</style> Hojas de estilo externos <link rel="stylesheet" type="text/css" href="miestilo.css"> podemos tener mas de una hoja de estilo El estilo que predomina de los tres tipos de estilos, depende de las diferentes ubicaciones donde esta el estilo. NOTA: Con este capítulo hemos llegado al final del curso. 18

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

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

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

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

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

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

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

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

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

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

PHP y MySQL. Aplicaciones Web: HTML I (segunda parte) Autor: Johnny Zulca Mamani

PHP y MySQL. Aplicaciones Web: HTML I (segunda parte) Autor: Johnny Zulca Mamani PHP y MySQL. Aplicaciones Web: HTML I (segunda parte) Autor: Johnny Zulca Mamani 1 Presentación del curso Programación de aplicaciones Web con PHP y MySQL. Ahora estudiaremos las páginas Web HTML, la estructura

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

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

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

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

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

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

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

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

1. Temario Curso Web Design 2014

1. Temario Curso Web Design 2014 1. Temario Curso Web Design 2014 FIREWORKS Diseño profesional de interfaces web Nociones generales para qué sirve?, diferencia con Photoshop Espacio de trabajo - Barras de menú, herramientas y paletas

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

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

Manual de v2cms v2cms v1.01

Manual de v2cms v2cms v1.01 Manual de v2cms v2cms v1.01 Introducción v2cms es un sistema de manejo de contenido que ofrece una gran flexibilidad para la creación de sitios web no importa el tamaño del mismo. El mismo permite una

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

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

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

Diseño WEB. Nivel: 5º semestre Horas semanales: 3 horas Código: 130082 Créditos: 2 créditos

Diseño WEB. Nivel: 5º semestre Horas semanales: 3 horas Código: 130082 Créditos: 2 créditos Nivel: 5º semestre Horas semanales: 3 horas Código: 130082 Créditos: 2 créditos Herramientas de DISEÑO: Recursos Gráficos Software de Diseño Lenguaje de Programación Contenido curso practico; LENGUAJE

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

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

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 & CSS HTML. PARTE 3. Profesora: Ana Gómiz Escuela Arte Granada Obtubre 2014

HTML & CSS HTML. PARTE 3. Profesora: Ana Gómiz Escuela Arte Granada Obtubre 2014 05 HTML & CSS HTML. PARTE 3 Profesora: Ana Gómiz Escuela Arte Granada Obtubre 2014 01. Imágenes + Añadir imágenes. + Elegir el formato correcto. + Optimizar imágenes para web. Profesora: Ana Gómiz Escuela

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

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

HTML INDICE: 1 Internet 2 Conceptos básicos 3 Estructura de un documento HTML 4 Dar formato a un documento 5 Listas 6 Imágenes

HTML INDICE: 1 Internet 2 Conceptos básicos 3 Estructura de un documento HTML 4 Dar formato a un documento 5 Listas 6 Imágenes HTML INDICE: 1 Internet 1.1 Qué es Internet 1.2 Los comienzos de Internet 1.3 Aplicaciones que nos ofrece Internet 1.4 Qué es WWW 1.5 Servicios que nos ofrece WWW 1.6 Cuestionario: Internet 2 Conceptos

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

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

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

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

UNIDAD 4 HIPERENLACES

UNIDAD 4 HIPERENLACES UNIDAD 4 HIPERENLACES OBJETIVO El alumno será capaz de crear, modificar y probar hipervínculos personalizados en un documento de Dreamweaver. TEMARIO 4.1 CONCEPTO Y TIPOS DE ENLACES 4.2 PERSONALIZAR NUEVOS

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

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

Adobe Dreamweaver CS6 Mi Sitio Web

Adobe Dreamweaver CS6 Mi Sitio Web Adobe Dreamweaver CS6 Mi Sitio Web Mg. Carlos Antonio Huamán Terrazas. Presentación Una de las reglas que se debe respetar en la creación de un Sitio Web es ordenar lar páginas web y los archivos a utilizar

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

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

Diseño de Páginas Web 2011

Diseño de Páginas Web 2011 Diseño de Páginas Web 2011 PRESENTACIÓN Proporciona ejemplos de páginas web reales, disponibles en Internet; se presenta el lenguaje HTML y las hojas de estilo en cascada (CSS), enfatizando la utilización

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

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

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

Adobe Dreamweaver CS3 - Curso online Creación profesional de sitios web

Adobe Dreamweaver CS3 - Curso online Creación profesional de sitios web Adobe Dreamweaver CS3 - Curso online Creación profesional de sitios web Índice Conceptos básicos En este capítulo se enseñan los conceptos básicos de trabajo en Adobe Dreamveaver CS3. También se describen

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

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

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

ELABORACIÓN DE PÁGINAS WEB. CBTIS No. 02 ISC. RICARDO GARCÍA LÓPEZ

ELABORACIÓN DE PÁGINAS WEB. CBTIS No. 02 ISC. RICARDO GARCÍA LÓPEZ CBTIS No. 02 ISC. RICARDO GARCÍA LÓPEZ Página1 CREACIÓN DE LA BASE DE DATOS EN MySQL REGISTRO DE USUARIOS UTILIZANDO PHP CON MYSQL Una vez instalada nuestro servidor local de Apache, procedemos a crear

Más detalles

Guía para crear, editar y eliminar páginas. WordPress Grupo Mutual

Guía para crear, editar y eliminar páginas. WordPress Grupo Mutual Guía para crear, editar y eliminar páginas WordPress Grupo Mutual Crear una nueva Página (1) 1. Ingresar a WordPress y acceder al panel de "Páginas": Crear una nueva Página (2) 2. Seleccionar uno de los

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

Kompozer: Crear una hoja de estilos

Kompozer: Crear una hoja de estilos Kompozer: Crear una hoja de estilos Las hojas de estilo en cascada (en inglés, Cascading Style Sheets), son archivos con extensión.css que se utilizan para dar estilo a nuestros documentos html, separando

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

DISEÑO Y DESARROLLO WEB CON HTML 5, CSS Y DREAMWEAVER CS4 OBRA COMPLETA 2 VOLÚMENES

DISEÑO Y DESARROLLO WEB CON HTML 5, CSS Y DREAMWEAVER CS4 OBRA COMPLETA 2 VOLÚMENES DISEÑO Y DESARROLLO WEB CON HTML 5, CSS Y DREAMWEAVER CS4 OBRA COMPLETA 2 VOLÚMENES Objetivos Dotar al interesado de conocimientos teóricos y prácticos para poder desarrollar un sitio Web con HTML y aplicar

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

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

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

1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers

1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers Barra de navegación vertical con Botones rollovers_tic 1º Bachillerato página 1/8 1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers...1 1.1 Intro...1 1.2 Código HTML de la lista de vínculos...2 1.3

Más detalles

PROGRAMA FORMATIVO. Diseño y desarrollo web con HTML 5, CSS y Dreamweaver CS4 - Obra completa - 2 volúmenes

PROGRAMA FORMATIVO. Diseño y desarrollo web con HTML 5, CSS y Dreamweaver CS4 - Obra completa - 2 volúmenes PROGRAMA FORMATIVO Diseño y desarrollo web con HTML 5, CSS y Dreamweaver CS4 - Obra completa - 2 volúmenes Sector: Desarrollo Web Multimedia Modalidad: Distancia Duración: Objetivos: Código: 4356 Dotar

Más detalles

Tablas en HTML. Tipos de celdas. Ing. Tomás Urbina Programación Web y Desarrollo de la Plataforma Web

Tablas en HTML. Tipos de celdas. Ing. Tomás Urbina Programación Web y Desarrollo de la Plataforma Web Tablas en HTML Ing. Tomás Urbina Programación Web y Desarrollo de la Plataforma Web Una tabla HTML puede ser considerada de manera simple como un grupo de filas donde cada una de ellas contiene un grupo

Más detalles

PROGRAMA: Diseño y desarrollo Web con HTML 5,

PROGRAMA: Diseño y desarrollo Web con HTML 5, PROGRAMA: Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4 Objetivos: Diseño y desarrollo Web con HTML 5 y CSS Dotar al alumno de conocimientos teóricos y prácticos para poder desarrollar un

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

Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4

Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4 Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4 Modalidad: Distancia, On-Line Duración: 154 horas Objetivos: Diseño y desarrollo Web con HTML 5 y CSS Dotar al alumno de conocimientos teóricos

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

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

Guía para el armado de un HTML

Guía para el armado de un HTML Guía para el armado de un HTML Maquetear una pieza con estándares de usabilidad Utilizar un formato de html clásico: Diseñar con CSS Inline que es un método para insertar el lenguaje de estilo de página

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

CAJA DE ESQUINAS REDONDEADAS Y ANCHO FIJO ver. 3

CAJA DE ESQUINAS REDONDEADAS Y ANCHO FIJO ver. 3 ver. 3 Diseño de cajas de esquinas redondeadas y ancho fijo para Diseño WEB _TICO 1º Bachillerato página 1/10 CAJA DE ESQUINAS REDONDEADAS Y ANCHO FIJO ver. 3...1 Procedimiento 1: Diseño con Gimp de una

Más detalles

<ETIQUETA parámetros>... </ETIQUETA>

<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

BANNERS CÍCLICOS CON JAVASCRIPT

BANNERS CÍCLICOS CON JAVASCRIPT BANNERS CÍCLICOS CON JAVASCRIPT ÍNDICE 1. INTRODUCCIÓN. 2. BANNERS CÍCLICOS. 2.1.BANNER CÍCLICO. 2.2.BANNERS CÍCLICOS CON CAMBIO DE COLOR DEL FONDO DE LA PÁGINA. 2.3.AÑADIR VÍNCULOS A LOS BANNERS CÍCLICOS.

Más detalles

Manual de NVU Capítulo 5: Las hojas de estilo

Manual de NVU Capítulo 5: Las hojas de estilo Manual de NVU Capítulo 5: Las hojas de estilo Pág. 1 Manual de NVU Capítulo 5: Las hojas de estilo Reconocimiento-NoComercial-CompartirIgual 2.5 España Realizado por: Julio Ruiz Palmero (Universidad de

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

DISEÑO DE PÁGINAS WEB

DISEÑO DE PÁGINAS WEB DISEÑO DE PÁGINAS WEB Con Dreamweaver MX Por José Vicente Manga ÍNDICE 1. INTRODUCCIÓN a. Qué es HTML?...3 b. Enlaces y tipos de enlaces...3 c. Qué es Dreamweaver...4 d. Ajustando las preferencias de Dreamweaver...4

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

Programación de aplicaciones WEB

Programación de aplicaciones WEB Programación de aplicaciones WEB Tecnologías del lado del del cliente 1 Tecnologías del lado del cliente Estructura HTML/XHTML Presentación Hojas de estilo (CSS) Comportamiento JavaScript 2 Introducción

Más detalles

Manual de Dreamwaver MX 2004

Manual de Dreamwaver MX 2004 1. INTRODUCCIÓN A DREAMWEAVER... 2 1.1. FLUJO DE TRABAJO DE DREAMWEAVER PARA LA CREACIÓN DE SITIOS WEB... 2 1.2. GUÍA DE RECURSOS DE FORMACIÓN DE DREAMWEAVER... 3 2. ENTORNO DE TRABAJO... 4 2.1. ELEMENTOS

Más detalles

Guía (muy) básica de hojas de estilo (CSS) y de marcado semántico de páginas web (v1.)

Guía (muy) básica de hojas de estilo (CSS) y de marcado semántico de páginas web (v1.) Guía (muy) básica de hojas de estilo (CSS) y de marcado semántico de páginas web (v1.) 1. Hojas de estilo: una base para el marcado semántico Lluís Codina UPF. Abril 2007 Una hoja de estilo es un conjunto

Más detalles

Para instalar la radio en la PC sólo se tiene que seguir estos paso.

Para instalar la radio en la PC sólo se tiene que seguir estos paso. Inicio de servicio: 3 de Marzo del 2008 Para instalar la radio en la PC sólo se tiene que seguir estos paso. 1.- Bajar estos dos programas e instalar en nuestra PC http://www.tuwebhost.com/descargas/1.exe

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

Práctica 4: Edición de contenidos web

Práctica 4: Edición de contenidos web Comercio Electrónico Práctica 4: Edición de contenidos web Antonio Sanz ansanz@unizar.es Rafael del Hoyo rdelhoyo@ita.es Objetivo de la práctica En esta práctica se pretende realizar una introducción a

Más detalles

HTML-5 / DIVS + IFRAMES. Prof: Moisés Mañas Moimacar@esc.upv.es

HTML-5 / DIVS + IFRAMES. Prof: Moisés Mañas Moimacar@esc.upv.es HTML-5 / DIVS + IFRAMES Prof: Moisés Mañas Moimacar@esc.upv.es Básico Define una división o sección en un documento Atributos: align= left/right/center/justify Alineación de la divisió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

Manual de Website Baker Website Baker v2.7.0

Manual de Website Baker Website Baker v2.7.0 Manual de Website Baker Website Baker v2.7.0 Introducción Website Baker es un sistema de manejo de contenido que ofrece una gran flexibilidad para la creación de sitios web no importa el tamaño del mismo.

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

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

DREAMWEAVER CS6. Curso de Iniciación. Diego Rovira

DREAMWEAVER CS6. Curso de Iniciación. Diego Rovira DREAMWEAVER CS6 Curso de Iniciación Diego Rovira 1 Dreamweaver CS6. Curso de Iniciación DREAMWEAVER CS6. Curso de Iniciación Diego Rovira De la edición: INFORBOOK S, S.L. Se ha puesto el máximo interés

Más detalles

Introducción al desarrollo web (idesweb)

Introducción al desarrollo web (idesweb) Introducción al desarrollo web (idesweb) Práctica 3: CSS, maquetación y estilos alternativos 1. Objetivos Aprender a maquetar una página web con CSS. Aprender a emplear estilos alternativos en una página

Más detalles

Diseño web con Oracle Portal

Diseño web con Oracle Portal Diseño web con Oracle Portal Curso práctico Jose A. Espinosa Índice Diseño web Oracle Portal Ejemplo práctico Diseño web Introducción Fundamentos HTML Diseño y usabilidad Navegadores Introducción Qué es

Más detalles

Nivel Intermedio. Escribir lenguaje de marcado HTML. Utilizar programas editores de HTML. Utilizar Hojas de Estilo en Cascada CSS

Nivel Intermedio. Escribir lenguaje de marcado HTML. Utilizar programas editores de HTML. Utilizar Hojas de Estilo en Cascada CSS Diseño Web Estático Nivel Intermedio Escribir lenguaje de marcado HTML Utilizar programas editores de HTML Utilizar Hojas de Estilo en Cascada CSS Configurar sitios web locales Personas provenientes del

Más detalles

I: Formación complementaria en TI

I: Formación complementaria en TI I: Formación complementaria en TI DESARROLLO WEB - MULTIMEDIA FCDW01 Adobe Premiere Pro CS4 FCDW02 Crea tu sitio web con Joomla! FCDW03 Diseño y desarrollo web con HTML 5 y CSS2 FCDW04 DreamWeaver CS4

Más detalles

Índice. HTML HyperText Markup Language. Conceptos básicos. Qué es HTML? Diseño de servicios Web HTML 1

Índice. HTML HyperText Markup Language. Conceptos básicos. Qué es HTML? Diseño de servicios Web HTML 1 Índice HTML HyperText Markup Language Conceptos básicos Historia y evolución de HTML XHTML vs. HTML HTML dinámico Hojas de estilo (CSS) DOM Diseño de servicios Web 2 DATSI Qué es HTML? Lenguaje de publicación

Más detalles

Laboratorio 6. Creación de sitios Web - Dreamweaver

Laboratorio 6. Creación de sitios Web - Dreamweaver UNIVERSIDAD CARLOS III DE MADRID. ESCUELA DE TURISMO. Informática aplicada al sector turístico Laboratorio 6. Creación de sitios Web - Dreamweaver El objetivo de este laboratorio es aprender a crear sitios

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

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

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