Diseño de Sitios Web (TUW) Desarrollo de Páginas Web (TUR) Introducción al desarrollo de páginas Web Antes de empezar
|
|
|
- Benito Olivera Rojo
- hace 7 años
- Vistas:
Transcripción
1 Diseño de Sitios Web (TUW) Desarrollo de Páginas Web (TUR) Introducción al desarrollo de páginas Web Antes de empezar Parece muy obvio, pero a veces no es así. Antes de iniciar con el diseño de tu página, debes tener en mente qué quieres poner en ella. Si tienes idea de lo que quieres hacer será mucho más fácil. Aquí te doy unos tips sobre lo que puede tratarse tu página: - Información personal. - Artista favorito. - Cualquier disciplina: Computación, artes, deportes, música, etc. - Manuales: computadoras, mecánica, recetas de cocina, etc. - Tu región: país, ciudad, etc. - Una combinación de todos. En fin, los temas son inagotables y depende de tu creatividad e imaginación el que decidas elegir. Qué necesitas... Para empezar a crear tu página necesitas un editor de textos, o sea, un programa en el que puedas teclear el código de tu página. Si tienes Windows en tu computadora puedes usar el Bloc de notas, Notepad++, que sería lo más práctico y sencillo. No te recomiendo por ahora usar el Word o algún programa similar porque podría haber problemas con los formatos, pero si de todas maneras decides utilizarlo, recuerda guardar la información sólo como texto simple (extensión.txt). Otra cosa que necesitas es un navegador de Internet para poder ver como está quedando tu página. Estos navegadores de Internet pueden ser Netscape Navigator, Internet Explorer, Mozilla firefox. Para diseñar tu página no es necesario que dispongas de una conexión a Internet. Puedes estar modificando el código de tu archivo en el editor de textos y estarlo visualizando en el navegador sin tener que conectarte. Inicio Entra al editor de textos (Bloc de notas) y crea un archivo nuevo; no tienes que escribir nada todavía en él. Puedes llamarlo como quieras pero de preferencia nómbralo prueba, ya que es el ejemplo que se manejará en este manual. Es necesario que le pongas la extensión htm o html a ese archivo para que lo puedas visualizar en el navegador. Entonces el archivo quedará así: prueba.htm y deberá estar guardado en alguna carpeta de tu disco duro. Para ver como está quedando tu página (cuando hayas empezado con el diseño) haz lo siguiente:
2 Para Netscape Navigator o Communicator: Ve a File en el menú y escoge Open Page (Open File para otras versiones). Escoge Choose File y dale la dirección en la que tienes guardado tu archivo prueba.htm. Ya que tengas la dirección correcta dale Aceptar y verás tu página. Para Internet Explorer: Te vas al menú y selecciona Archivo, luego Abrir y pulsa Examinar para darle la dirección en donde se encuentra tu archivo prueba.htm. Ya que lo tengas le das Aceptar y tu archivo se visualizará en el navegador. Ahora sí, que ya tienes tu archivo listo y sabes como visualizarlo, lo que sigue es empezar a programar en html. Estructura básica de un documento en HTML El lenguaje html trabaja con etiquetas (tags) que tienen diferentes usos. Por ejemplo <TITLE> </TITLE> sirve para colocar el nombre de la página en el marco superior del navegador. La mayoría de las etiquetas necesitan cerrarse y modifican la información contenida dentro de ellas. Algunas como <BR> no necesitan cerrarse. Después se explicará mejor el significado de éstas y otras más. Todos los documentos en html deben tener la siguiente estructura: <TITLE>Mi página</title> <BODY> Aquí va todo el contenido del programa. Este formato debe seguirse siempre como una regla. El uso de las demás etiquetas y el contenido del programa irá dentro de la etiqueta <BODY>. El título va a ser el nombre que le quieras dar a tu página. *** Ahora comienza lo interesante, vamos a empezar a construir nuestra página de Internet. Entra al editor de textos, carga tú archivo prueba.htm (que por ahora debe estar vacío) y teclea lo siguiente: <TITLE>Historia de Internet</TITLE> <BODY> En esta página explicaremos brevemente los inicios de la red de redes. *****************
3 Lo que estamos haciendo aquí es generando el esqueleto de nuestra página. Estas son las etiquetas básicas para cualquier diseño. El título de esta página-ejemplo es Historia de Internet y aparece en el marco superior del navegador. Como se acaba de mencionar, dentro de las etiquetas <BODY> desarrollaremos todo nuestro contenido. Pulsa Guardar en el editor de textos para grabar en prueba.htm lo que acabamos de programar. Texto Ya sabemos cómo es la estructura de un documento en html. Es el momento de empezar a manipular los elementos de nuestra página. El elemento fundamental en Internet es el texto. Aunque el auge de los últimos años se ha debido principalmente al contenido multimedia, (gráficos, sonido y video) el texto sigue siendo la base de todo documento en la red. A diferencia de los procesadores de texto comerciales (Word, WordPerfect, etc.), la manipulación de texto en html está un tanto limitada y es necesario utilizar ciertas etiquetas para modificar el texto a nuestro gusto. Enseguida se muestran algunas de las etiquetas más populares en el manejo de texto. <PRE> </PRE> Permite que el texto que se encuentre dentro de ella se visualice tal como se creó en la página origen, respetando espaciado, salto de línea, salto de párrafo, tabulación, etc. <BR> Realiza un salto de línea. Esta etiqueta no necesita cerrarse. <P> Realiza un salto de párrafo. Tampoco necesita cerrarse. <CENTER> </CENTER> Posiciona el texto seleccionado en el centro de la página. También puede aplicarse a gráficos. <Hx> </Hx> Se utiliza para resaltar encabezados. La x son números que van del 1 al 6, siendo el 1 el encabezado más grande y resaltado, el 2 un poco menos y así sucesivamente. <H1>Encabezado</H1> <H2>Encabezado</H2>
4 <H3>Encabezado</H3> <H4>Encabezado</H4> <FONT SIZE=x> </FONT> Sirve para cambiar el tamaño de las letras. La x es un número que indica el tamaño de la letra y va del 1 al 7. El número predeterminado es el 3. Texto en <B>Negritas</B> Texto en <I>Itálica</I> Texto <U>subrayado</U> <ADDRESS> Dirección </ADDRESS> <HR> Se utiliza como línea separadora. Tiene algunos atributos que la modifican. WIDTH indica la longitud, SIZE indica la altura, ALIGN la colocación de la línea y NOSHADE que no tenga relieve y además le añade un color gris más fuerte. <HR> <HR WIDTH=20% ALIGN=RIGHT SIZE=7> <HR WIDTH=250 ALIGN=CENTER SIZE=5 NOSHADE> Vamos a utilizar en nuestra página algunas de éstas etiquetas para modificar texto. Carga prueba.htm y teclea lo siguiente: <TITLE>Historia de Internet</TITLE> <BODY> <h2>en esta página explicaremos brevemente los inicios de la red de redes.</h2><br> <h3>introducción</h3><p> El mundo de las telecomunicaciones ha tenido un crecimiento acelerado En los últimos años, en el que <b>internet</b> ha sido pieza clave. Hace unas décadas atrás, cuando el Departamento de Defensa de los Estados Unidos desarrollaba una red de comunicaciones que fuera capaz de soportar un ataque externo durante la guerra fría, nadie se imaginó que después de transferir el control de esa red
5 llamada <u>arpanet</u> a los investigadores universitarios, ésta crecería exponencialmente involucrando significativamente a toda la sociedad. <hr> <font size=2>documento creado en Febrero del 2000</font> Color Con el fin de hacer un documento más agradable y atractivo a la vista, es necesario en algunas ocasiones resaltarlo con un color diferente. Esto se puede aplicar al fondo, a un enlace, al texto, a una palabra o a una letra. Para poder representar un color en html, se deben utilizar 6 números hexadecimales. ROJO FF0000 VERDE 00FF00 AZUL 0000FF MAGENTA FF00FF VIOLETA 9900DD ROSA CLARO FFDDFF Aunque se ve un poco complicado en realidad no lo es. Lo que te recomiendo hacer es jugar con las combinaciones hasta que encuentres la que te gusta. Tomando los colores básicos de la tabla anterior puedes variar los números (0-9) o las letras (A-F) y ver cómo cambian las tonalidades. Html también acepta los nombres de los colores en lugar de los números hexadecimales, por ejemplo "RED" en lugar de "FF0000", o "BLUE" en lugar de "0000FF", pero tiene la limitante de que solamente reconoce unos cuantos colores. Se pueden seleccionar los colores deseados desde el inicio del documento en la etiqueta <BODY> por ejemplo: <BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" LINK="#00AEFF"> donde: BGCOLOR es el color del fondo. TEXT es el color del texto. LINK es el color del enlace. Ojo: En este ejemplo se ve que antes del color siempre se coloca un signo "#". También se puede cambiar el color sólo para un segmento deseado como: <FONT COLOR="#FF0000">Texto</FONT> *** Sigamos con nuestro ejemplo; cargamos el archivo prueba.htm y le agregamos lo siguiente: <head> <TITLE>Historia de Internet</TITLE> <BODY BGCOLOR="#0FF0FF">
6 <h2>en esta página explicaremos brevemente los inicios de la red de redes.</h2><br> <h3>introducción</h3><p> El mundo de las telecomunicaciones ha tenido un crecimiento acelerado en los últimos años, en el que <b>internet</b> ha sido pieza clave. Hace unas décadas atrás, cuando el <font color=red>departamento de Defensa de los Estados Unidos</font> desarrollaba una red de comunicaciones que fuera capaz de soportar un ataque externo durante la guerra fría, nadie se imaginó que después de transferir el control de esa red llamada <u>arpanet</u> a los investigadores universitarios, ésta crecería exponencialmente involucrando significativamente a toda la sociedad. <hr> <font size=2>documento creado en Febrero del 2000</font> Las modificaciones hechas a nuestro archivo deben ser evidentes. En la etiqueta <BODY> hemos agregado un determinado color para el fondo. También hemos especificado que sólo un segmento del texto sea de color rojo. Imágenes Una característica muy importante en las páginas de Internet son los gráficos o imágenes. Estos elementos contribuyen a hacer más completa una página proporcionando mayor realce. Las imágenes se pueden usar como fondo de nuestra página, como complemento y apoyo visual para cierta información, vínculos hacia otras páginas, etc. Los formatos de imágenes más comunes en Internet son los.gif y.jpg, así que si queremos introducir un gráfico, éste tiene que cumplir con estos formatos. Para agregar una imagen en un documento se utiliza la etiqueta <IMG>. <IMG SRC="home2.jpg" ALT="Casa azul"> Donde: IMG indica el deseo de cargar una imagen. SRC indica la ruta en la que se encuentra nuestro gráfico. Este puede estar en el mismo directorio de nuestra página, en otro directorio, o incluso en un servidor en algún lugar del mundo. <IMG SRC="../web/imagen/home2.jpg" ALT="Casa azul"> ALT asigna un nombre a la imagen para que cuando alguien cargue nuestra página desde un navegador que no despliegue gráficos, pueda saber que en ese lugar existe una imagen.
7 Existen una serie de atributos que modifican las imágenes de diferente forma, aquí están algunos: ALIGN=left right top middle bottom Las opciones para ALIGN sitúan al gráfico en diferentes posiciones con respecto al texto. BORDER=n Le agrega un borde a la imagen y "n" indica el grosor. WIDTH=n, HEIGHT=n Especifican la altura y la anchura de la imagen, cuyas unidades se dan en pixels. VSPACE=n, HSPACE=n Se utiliza para dejar espacio tanto vertical como horizontal entre la imagen y el texto que la rodee. Este ejemplo mostrará una imagen alineada a la izquierda del texto y separada de él horizontalmente 10 unidades con un borde de grosor 2. Agreguemos ahora una imagen a nuestro diseño. Carga prueba.htm y realiza la modificación. <TITLE>Historia de Internet>/TITLE> <BODY BGCOLOR="#0FF0FF"> <h2>en esta página explicaremos brevemente los inicios de la red de redes.</h2><br> <h3>introducción</h3><p> El mundo de las telecomunicaciones ha tenido un crecimiento acelerado en los últimos años, en el que <b>internet</b> ha sido pieza clave. Hace unas décadas atrás, cuando el <font color=red> Departamento de Defensa de los Estados Unidos </font> desarrollaba una red de comunicaciones que fuera capaz de soportar un ataque externo durante la guerra fría, nadie se imaginó que después de transferir el control de esa red llamada <u>arpanet</u> a los investigadores universitarios, ésta crecería exponencialmente involucrando significativamente a toda la sociedad. <hr> <font size=2>documento creado en Febrero del 2000</font> <center><img SRC="home2.jpg" ALT="Casa azul"></center> Enlaces (Links) El poder verdadero de html radica en la capacidad de manejar hipertexto o hipervínculo como algunos le llaman, y se logra por medio de enlaces o links. Esto es, a través de un click en un segmento de texto o una imagen, es posible encontrar más información
8 relacionada con la que originó ese click. Dicha información puede encontrarse en otras páginas dentro y fuera de nuestro servidor, o en algún punto concreto de páginas dentro y fuera de nuestro servidor. El enlace por definición aparece en nuestras páginas subrayado y de color azul. Como ya se vió anteriormente, el color del enlace puede cambiarse al gusto. La etiqueta encargada de establecer un enlace es: <A> </A>. Dentro de esta etiqueta está la función HREF en la cual se debe indicar la dirección donde está la información a enlazar y también el tipo de protocolo* utilizado. Con HREF es posible también hacer enlaces directos hacia imágenes, sonidos, etc. *El protocolo son las normas o reglas utilizadas para diferentes tipos de servicios como documentos hipertexto, transferencia de archivos, correo electrónico, etc. HTTP, FTP, MAILTO, GOPHER, etc. <A HREF=" USA Today</A> También es posible crear un enlace a través de una imagen en lugar de utilizar un segmento de texto. Esto se hace de la misma manera que los ejemplos anteriores, sólo que en lugar de escribir texto entre las etiquetas se inserta una imagen como las que ya hemos visto. <A HREF=" SRC="logo.gif"></A> Vamos ahora a aplicar enlaces en nuestro ejemplo. Carga prueba.htm <TITLE>Historia de Internet</TITLE> <BODY BGCOLOR="#0FF0FF"> <h2>en esta página explicaremos brevemente los inicios de la red de redes.</h2><br> <h3>introducción</h3><p> El mundo de las telecomunicaciones ha tenido un crecimiento acelerado en los últimos años, en el que <b>internet</b> ha sido pieza clave. Hace unas décadas atrás, cuando el <font color=red> Departamento de Defensa de los Estados Unidos </font> desarrollaba una red de comunicaciones que fuera capaz de soportar un ataque externo durante la guerra fría, nadie se imaginó que después de transferir el control de esa red llamada <u>arpanet</u> a los investigadores universitarios, ésta crecería exponencialmente involucrando significativamente a toda la sociedad.<p> * Más información sobre este tema en: <A HREF=" <hr> <font size=2>documento creado en Febrero del 2000</font>
9 <center><a HREF="index.html"><IMG SRC="home2.jpg" ALT="Casa azul"></a></center> Donde coloco mi página? Ahora que ya tienes lista tu página hay que saber en qué servidor montarla para que todos puedan verla. Si dispones de una conexión a Internet en tu casa o negocio, tu proveedor tiene la obligación de proporcionarte espacio en su servidor para tu página. Si no dispones de una conexión a Internet existen algunas compañías que ofrecen este servicio de manera gratuita. Ahí te va una lista de algunas de estas compañías en Internet:
El hardware informático tan solo entiende de ceros y unos (sistema binario). La combinación de BITS genera tamaños de palabra, de 8, 16, 32, y
El hardware informático tan solo entiende de ceros y unos (sistema binario). La combinación de BITS genera tamaños de palabra, de 8, 16, 32, y actualmente 64 BITS. Las personas nos comunicamos en base
Qué es HTML? Estructura interna de una página HTML. Cabecera de la página <head>
Qué es HTML? El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada,
4º ESO INFORMÁTICA TEMA 7: LENGUAJE HTML ACTIVIDADES. A continuación abriéremos el bloc de notas: Inicio>Programas>Bloc de notas.
4º ESO INFORMÁTICA TEMA 7: LENGUAJE HTML ACTIVIDADES FECHA LÍMITE: 13 de mayo Práctica 1: Lo primero que vamos a hacer es crear en nuestro pendrive una carpeta que llamaremos WEBnuestronombre como por
INTRODUCCIÓN A HTML. Qué es HTML. Etiquetas
INTRODUCCIÓN A HTML Qué es HTML El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto
Universidad Politécnica de El Salvador Computación Básica. HTML Guía 1. Requerimientos y material. Qué es HTML? Etiquetas
Universidad Politécnica de El Salvador Computación Básica HTML Guía 1 Requerimientos y material Internet es un medio que no precisa de mucho conocimiento, el prerrequisito inmediato para poder usar esta
Curso Básico de HTML
Curso Básico de HTML Qué es HTML? HTML es un pseudo-lenguaje de programación, no es un lenguaje en sí. Utiliza tags o etiquetas específicas para crear contenido y dar una estructura al documento. Existen
PRÁCTICA 2. AMPLIAR LA WEB
PRÁCTICA 2. AMPLIAR LA WEB Ejercicio 1. Amplia la página Web que diseñaste en la práctica 1 con los siguientes elementos: fondos, marquesinas, tablas, hipervínculos y vídeos youtube. PASOS A SEGUIR 1.
5.CREACIÓN DE TABLAS.
5.CREACIÓN DE TABLAS. Cómo se crea una tabla?. Para crear las tablas será necesario usar una nueva etiqueta: TABLE, que significa, en inglés, tabla. Esta etiqueta consta de instrucción de inicio,, e instrucción
TEST TICO 2º BACHILLERATO
TEST TICO 2º BACHILLERATO UNIDAD: DISEÑO Y EDICIÓN PÁGINAS WEB CON HTML (COMPLETO) Cada pregunta consta de 3 opciones, siendo solo una respuesta la correcta. Calificación: Respuesta correcta: +1 Respuesta
2. Manejar los elementos básicos de un lenguaje usado en la creación de Páginas Web. 2.1 Definición de objetos y contenidos de la página web.
2. Manejar los elementos básicos de un lenguaje usado en la creación de Páginas Web. 2.1 Definición de objetos y contenidos de la página web. INTERNET En 1969, el Departamento de Defensa de E.U construyo
UNIDAD 6 TEMA 4: OFIMÁTICA AVANZADA. CLASE 03: PÁGINAS WEB CON WORD
UNIDAD 6 TEMA 4: OFIMÁTICA AVANZADA. CLASE 03: PÁGINAS WEB CON WORD Vamos a ver cómo se puede hacer una sencillapágina web usando Word. Abre un nuevo documento en Word 2007. 1. Lo primero va a ser convertirlo
Introducción a HTML Manual-Estructura Básica. Prof. César S. Rangel Farias.
Introducción a HTML Manual-Estructura Básica. Prof. César S. Rangel Farias. Índice. 2 HTML... 3 Estructura Básica.... 3 Formato de texto... 3 Estilos... 3 Alineaciones de Párrafo... 4 Colores... 5 Listas...
A lo largo de este tema vamos a aprender a crear una página básica.
Unidad 2. Estructura de una página (I) A lo largo de este tema vamos a aprender a crear una página básica. La estructura básica de una página es: Ahora veamos cómo funcionan estas etiquetas. Identificador
PROPÓSITOS. Tecnicatura en Informática Profesional y Personal [ 1 ]
![PROPÓSITOS. Tecnicatura en Informática Profesional y Personal [ 1 ]](/thumbs/87/95199557.jpg "PROPÓSITOS. Tecnicatura en Informática Profesional y Personal [ 1 ]")
PROPÓSITOS Unidad 1 Reconocer el funcionamiento de internet y sus características. Interpretar el concepto de ISP, HTTP y MySQL Reconocer y aplicar criterios de adaptación del ambiente de trabajo a las
En ocasiones, nos puede interesar guardar una página web para
1. ALMACENAR LAS PÁGINAS En ocasiones, nos puede interesar guardar una página web para poder visualizarla posteriormente, incluso sin disponer de una conexión a Internet. Para ello, utiliza el comando
GUIA 1 CONCEPTOS BÁSICOS
DEFINICIÓN DE HTML5 CESDE GUIA 1 CONCEPTOS BÁSICOS HTML5 es una combinación de nuevas etiquetas del lenguaje HTML (HyperText Markup Language - lenguaje de marcas de hipertexto), el hipertexto es la unión
Actividad 3: Codificación básica de un texto en HTML
Actividad 3: Codificación básica de un texto en HTML Abrir un editor de texto, por ejemplo en nuestro caso notepad, después codificar los elementos básicos y guardar en una carpeta con la extensión.html
(X)HTML. Los vínculos son la característica distintiva de la World Wide Web.
Hipertexto y marcadores Los vínculos son la característica distintiva de la World Wide Web. Permiten saltar de una página a otra, invocar una película o una grabación y descargar archivos con FTP. Un vínculo
Construcción de páginas web. San&ago Mar+n de Jesús
Construcción de páginas web San&ago Mar+n de Jesús COLORES 2 LOS COLORES Existen diversas e&quetas y atributos en HTML que permiten dar color a los elementos de una página o incluso el color de fondo de
INFOTECH MÓDULO 1 CURSO. Aprendiendo sobre Dreamweaver. Creación de páginas web con Adobe Dreamweaver
INFOTECH MÓDULO 1 Aprendiendo sobre Dreamweaver CURSO Creación de páginas web con Adobe Dreamweaver INFOTECH Capacidades específicas Nombre del módulo 1 Contenidos Recursos Comprensión e Indagación y Actitudes
RESUMEN HTML. Elementos de estructura
RESUMEN HTML Elementos de estructura primer elemento que enmarca todo el fichero HTML (obligatorio) zona de cabecera (obligatorio) definición de un título (obligatorio) cuerpo
VÍNCULOS VÍNCULOS DENTRO DE LA PÁGINA
VÍNCULOS Como ya se mencionó, una de las etiquetas más importantes de HTML es la que permite, a través de vínculos o enlaces, navegar por las diferentes páginas y sitios en la red. Se pueden colocar enlaces
UNIDAD 1 GENERALIDADES HTML
UNIDAD 1 GENERALIDADES HTML GENERALIDADES HTML5 Una página web es un archivo con texto en el que se insertan diferentes etiquetas HTML, para que ese contenido pueda ser interpretado por el navegador web.
Las practicas deberás hacerlas sin la ayuda de tu asesor
3 Introducción HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que
TEMA 5: INTERNET Y PÁGINAS WEB. Realización de páginas web con HTML. Servicios de Internet
TEMA 5: INTERNET Y PÁGINAS WEB Realización de páginas web con HTML. Servicios de Internet Qué vamos a ver? Qué es el lenguaje HTML Uso de sus características básicas: párrafos, títulos, y algunos estilos
Universidad de Puerto Rico Recinto Universitario de Mayagüez Centro de Cómputos HTML. Por: Isabel Rios Lopez Unidad de Servicios al Usuario
Universidad de Puerto Rico Recinto Universitario de Mayagüez Centro de Cómputos HTML Por: Isabel Rios Lopez Unidad de Servicios al Usuario Comandos básicos para la creación de Páginas de Internet El sistema
La Resolución de pantalla está determinada por sus dimensiones en píxeles.
Mi primera Web LA PANTALLA EL NAVEGADOR EL LENGUAJE EL ASISTENTE EL SERVIDOR MÁS OPCIONES LA RESOLUCIÓN DE PANTALLA La Resolución de pantalla está determinada por sus dimensiones en píxeles. La mayoría
Práctica de HTML (Curso )
Práctica de HTML (Curso 2007-2008) Introducción HTML (Hypertext Markup Language) es un lenguaje estándar utilizado en Internet para representar la información intercambiada por sus usuarios en forma de
Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta ADDRESS ADDRESS CITE CITE B: NEGRITA B: NEGRITA.
En la presente tabla se hace una comparación entre las etiquetas de formato de texto. Netscape no soporta : ni (tachado). Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta
Transparencias de J2EE. Tema 2: HTML. Uploaded by Ingteleco
Transparencias de J2EE Tema 2: HTML Uploaded by Ingteleco http://ingteleco.webcindario.com ingtelecoweb@hotmail.com La dirección URL puede sufrir modificaciones en el futuro. Si no funciona contacta por
Identificar cuál es la estructura de una página Web y sus principales secciones. Desarrollar una página Web en un editor.
MÓDULO 2. Introducción Después de conocer los conceptos básicos sobre el lenguaje de programación HTML, en este módulo identificaremos la estructura de una página Web y lo haremos revisando el lenguaje
COLEGIO JORGE ISAACS
COLEGIO JORGE ISAACS EVALUACION DE RECUPERACION DE LOGROS DOCENTE: MARIA ANGELICA MENDOZA ASIGNATURA: SISTEMAS GRADO: 8ª-8b ESTUDIANTE: VALOR DEL MES:HONESTIDAD GUIA No: 1 FECHA DE INICIO: JULIO 16 DE
En este tema vamos a ver qué son los marcos, para qué se utilizan, y cómo insertarlos.
MARCOS En este tema vamos a ver qué son los marcos, para qué se utilizan, y cómo insertarlos. Conjunto de marcos Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya
Tutorial Internet Explorer 4.5
Tutorial Internet Explorer 4.5 Introducción Los navegadores como Netscape Communicator o Internet Explorer son sistemas hipermedia diseñados para recuperar información distribuida sobre la red Internet
Texto en movimiento. <MARQUEE> Texto que se desplaza </MARQUEE>
Texto en movimiento Vamos a ver distintas soluciones para conseguir texto en movimiento: haciendo uso del lenguaje HTML (las marquesinas), con un GIF animado, con Javascript, etc. Marquesinas (Marquees)
DISEÑO Y DESARROLLO DE PÁGINAS WEB
DISEÑO Y DESARROLLO DE PÁGINAS WEB Enrique Ruiz-Velasco Sánchez CESU-UNAM LA PÁGINA MÁGICA NETSCAPE El navegador Netscape Navigator, ofrece una manera más sencilla todavía para la creación de páginas Web,
COLEGIO PABLO DE TARSO IED CONSTRUCCION DE PROYECTOS DE VIDA PRODUCTIVOS HTML - PRÁCTICAS DOC RAUL MONROY PAMPLONA
Introducción al curso de HTML COLEGIO PABLO DE TARSO IED Desarrolla comprensión al conocer, interpretar, socializar y argumentar diferentes temáticas relacionadas con la tecnología informática de punto
PRÁCTICA 3: DISEÑO DE PLANTILLAS WEB
PRÁCTICA 3: DISEÑO DE PLANTILLAS WEB Las plantillas son herramientas de las que disponemos para crear un formato determinado para que todas las páginas tengan unas características similares, de forma que
Software para crear presentaciones
Software para crear presentaciones por Leticia Pureco Reyes El software de presentaciones se usa para crear diapositivas que apoyen a una persona durante una conferencia, presentación, exposición, etc.
How to 24 Creación página web
How to 24 Creación página web Jesús Betances 2011-3914 Página 1 Qué es una página web? Es el nombre de un documento o información electrónica capaz de contener texto, sonido, vídeo, programas, enlaces,
GUIA 3. Tema: Hipervínculos. Qué es un hipervínculo?
GUIA 3 Tema: Hipervínculos. Objetivo General Crear una página de inicio para que los alumnos puedan aplicar los diferentes tipos de enlaces de hipertexto que existen en la web. Objetivos Específicos Crear
NATIONAL SOFT HOTELES GUÍA DE CONFIGURACIÓN DEL COMPROBANTE DE RESERVACIÓN
NATIONAL SOFT HOTELES Versión 3.0 GUÍA DE CONFIGURACIÓN DEL COMPROBANTE DE RESERVACIÓN National Soft de México INDICE GENERAL 1. INTRODUCCIÓN... 2 2. ESTABLECER LOS PARÁMETROS DE ENVÍO... 2 3. EDITAR EL
Adaptación al Ambiente de Trabajo Curso: 7mo año, Ciclo Superior Profesor: Quevedo, Alejandro Programa 2016
Adaptación al Ambiente Trabajo UNIDAD 1 Contenidos: Adaptación l ambiente trabajo. Propósitos Ejes Contenidos Reconocer el Internet. Concepto Internet Cómo funciona?, funcionamiento Características y Ergonomía,
Qué es CSS. Si necesitamos hacer modificaciones lo hacemos en un sólo lugar y no tenemos que editar todos los documentos HTML por separado.
Qué es HTML y CSS Una página web es un documento de texto el cual se escribe en lenguaje HTML, con el que se que crea el contenido de una web. Aquí se manejan los contenidos. Por otro lado, existe el código
Diseño de páginas web
Qué es una página web? Diseño de páginas web Fundamentos de HTML Informática 4º ESO Un documento que puede incluir texto, imágenes, tablas, e incluso contenido multimedia Unas páginas web se pueden enlazar
Unidad 1.- Fundamentos de sitios web. El lenguaje HTML. Desarrollo de aplicaciones Web. Felipe LC
Unidad 1.- Fundamentos de sitios web. El lenguaje HTML Desarrollo de aplicaciones Web. Felipe LC La actividad #1 En qué consistió la actividad 1? Qué conceptos aprendimos? Demos algunos ejemplos. Qué aprendimos
Dentro de las funciones básicas de un procesador de textos están; escribir, guardar e imprimir documentos.
Elementos de la ventana del procesador de texto Para iniciar el procesador de textos Word de Microsoft en el sistema operativo Windows, debes llevar a cabo los siguientes pasos. 1. 2. 3. 4. Das clic en
1. Introducción a HTML
Introducción a HTML 1. Introducción a HTML 1. Introducción a HTML Qué es HTML? El HTML (Hyper Text Markup Language) es un lenguaje que sirve para escribir hipertexto, es decir, documentos de texto estructurado,
5. EL EDITOR DE TEXTO HTML.
5. EL EDITOR DE TEXTO HTML. El editor de texto HTML proporciona una interfaz muy parecida a la de un procesador de textos para generar de una forma cómoda el código HTML correspondiente a los elementos
Cómo manejar el editor HTML de Moodle?
Cómo manejar el editor HTML de Moodle? El editor HTML nos permite agregar textos, imágenes, videos y audios, entre otras posibilidades. Cada vez que entramos a alguno de los recursos para Agregar una actividad
2.4.- Estructura del sitio Web. a) Definición del sitio Sitio Web.- b) Crear y guardar un documento
2.4.- Estructura del sitio Web. a) Definición del sitio Sitio Web.- Es un conjunto de documentos que comparten ciertos atributos, objetivos o subjetivos, tales como tema, apariencia, propósito, etc. Para
LÍNEAS SEPARADORAS. ETIQUETA <HR>. COMENTARIOS EN HTML. ATRIBUTOS SIZE, WIDTH, NOSHADE (DEPRECATED). EJEMPLOS (CU00716B)
APRENDERAPROGRAMAR.COM LÍNEAS SEPARADORAS. ETIQUETA . COMENTARIOS EN HTML. ATRIBUTOS SIZE, WIDTH, NOSHADE (DEPRECATED). EJEMPLOS (CU00716B) Sección: Cursos Categoría: Tutorial básico del programador
QUÉ SE NECESITA PARA UTILIZAR HTML5
Una página web es un archivo con texto en el que se insertan diferentes etiquetas HTML, para que ese contenido pueda ser interpretado por el navegador web. Existen diferentes versiones del lenguaje HTML,
EJERCICICIO Nº11: INSERTAR CONTENIDOS DENTRO DE CADA TEMA
EJERCICICIO Nº11: INSERTAR CONTENIDOS DENTRO DE CADA TEMA Una vez se han definido los títulos de cada tema ha llegado la hora de saber incluir varios tipos de contenidos, en este caso: 1. Una imagen descriptiva
Manual de Usuario. endocrinologiaelsalvador.com
Manual de Usuario endocrinologiaelsalvador.com 1 Ingresar al Panel administrador del sitio web Debe entrar al administrador colocando esta dirección en el explorador (Explorer,firefox) http://www.funeraleslasflores.com/wp-admin
Unidad I - INTRODUCCIÓN AL HTML. Profesor: Marcos Tulio Jerez Bastidas. Barinas, abril 2015
República Bolivariana de Venezuela Universidad Nacional Experimental de los Llanos Occidentales Ezequiel Zamora Programa de Ingeniería, Arquitectura y Tecnología Subproyecto de Algoritmo y Programación
DISEÑO DE PAGINAS WEB
DISEÑO DE PAGINAS WEB HTML HTML El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben laspáginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto
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
Manual: Catálogo. Crear una categoria. Crear un producto. Publicar y despublicar productos
Manual: Catálogo 01 Crear una categoria 02 Crear un producto 03 Publicar y despublicar productos 01 Crear una categoría Mantener tu web actualizada es muy sencillo. Te animamos a hacerlo puesto que entrar
Conocimientos previos
Tema: Los controles de formularios e informes Ficha de aprendizaje 12 n Logro Aprende a usar los controles para mejorar el diseño de formularios e informes. Indaga en la sección Controles cuáles permiten
Vamos a ver cómo insertar imágenes, y cómo modificar algunas de sus propiedades.
Unidad 5. Imágenes (I) Vamos a ver cómo insertar imágenes, y cómo modificar algunas de sus propiedades. Imagen Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten
ESTRUCTURA DEL CÓDIGO HTML5
ESTRUCTURA DEL CÓDIGO HTML5 1. DocType Es la etiqueta que se escribe en la primera línea del código. Permite declarar el tipo de documento. Es decir, el doctype indica que el documento está escrito siguiendo
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
Crear una lista en HTML
DREAMWEAVER Crear una lista en HTML 1 Abre Dreamweaver y genera un documento nuevo en HTML 2 La ventana principal de Dreamweaver permite visualizar el contenido en 3 formas: code (sólo código), split (código
HIPERDOCUMENTOS. Prof. Emiro Coronado Cabrera
HIPERDOCUMENTOS Prof. Emiro Coronado Cabrera Hiperdocumento Un hiperdocumento es un documento no secuencial basado en una estructura jerárquica o de red de nodos que contienen información y/o datos multimedia
Elaboración de contenidos educativos digitales. Guía sobre Prezi
Elaboración de contenidos educativos digitales Guía sobre Prezi PREZI 1.1. Qué es Prezi? Prezi es una aplicación enteramente basada en flash que permite escapar del enfoque slide por slide de la mayoría
Capítulo 4. Introducción a HTML
Capítulo 4. Introducción a HTML 4.1 Introducción HTML (HyperText Markup Language) es el lenguaje utilizado para representar documentos en la World Wide Web. Además de texto normal, incluye también elementos
La manera más sencilla de agregar texto a una diapositiva es escribirlo directamente en cualquier marcador de posición definido para tal fin.
Trabajar con texto Agregar texto a las diapositivas La manera más sencilla de agregar texto a una diapositiva es escribirlo directamente en cualquier marcador de posición definido para tal fin. Marcador
Índice del curso. Elementos HTML. Elementos HTML. Elementos de texto. Creación de páginas web básicas. 1.Introducción a Internet. Lenguaje HTML.
Índice del curso 1.Introducción a Internet. Lenguaje HTML. Elementos HTML Creación de páginas web básicas 2.Elementos HTML. 3.Creación y gestión de imágenes con GIMP. 4.Hojas de estilo. 5.Creación de páginas
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
Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son un elemento esencial para cualquier página web.
Unidad 4. Hiperenlaces (I) Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son un elemento esencial para cualquier página web. Hiperenlace Un hiperenlace, hipervínculo,
HTML: Organización del Contenido
Francisco J. Martín Mateos Carmen Graciani Díaz Dpto. Ciencias de la Computación e Inteligencia Artificial Universidad de Sevilla Encabezados Usualmente el contenido de un texto se organiza en secciones
Manual FOXTIR Editor HTML MOBILE MARKETING
Manual FOXTIR Editor HTML MOBILE MARKETING Editor de HTML: en las siguientes páginas te explicaré una por una las diferentes funciones del Editor de HTML. Una vez ampliada la pantalla al espacio que te
LENGUAJE DE MARCADO HIPERTEXTO HTML
LENGUAJE DE MARCADO HIPERTEXTO HTML 1. QUÉ ES HTML? HTML, siglas de Lenguaje de Marcas de HiperTexto (HyperText Markup Language), hace referencia al lenguaje de marcado Hipertexto. HTML es base de todo
COMO USAR PLATAFORMA DEL SISTEMA DIGITAL PERÚ EDUCA
COMO USAR PLATAFORMA DEL SISTEMA DIGITAL PERÚ EDUCA Una vez que en el salón de centro de recursos tecnológicos con la orientación de la daip responsable y tu docente de curso, te has creado una cuenta
COLEGIO PABLO DE TARSO IED CONSTRUCCION DE PROYECTOS DE VIDA PRODUCTIVOS DREAMWEAVER UNO- PRÁCTICAS DOC RAUL MONROY PAMPLONA
Metas de comprensión cuarto periodo Comprende sus responsabilidades a la hora de formular sus propuestas como soluciones a problemas reales que impliquen el uso de las tecnologías de información y la gestión
CURSO MOODLE Curso
EDITAR NUESTRO PRIMER MOODLE CURSO MOODLE Curso 2012-2013 Accedemos al curso que hemos creado con el nombre Prueba desde la plataforma educastur. Una vez creado el curso, en cuanto entremos en la plataforma
Guía Segundo Periodo. Séptimo. Cristian Hernández 1/1/18 Dreamweaver
Guía Segundo Periodo Séptimo Cristian Hernández 1/1/18 Dreamweaver 1 Colegio Agustiniano Ciudad Salitre Área de Tecnología e Informática Guía de Apoyo 2018 Bimestre: Segundo Grado: Séptimo Docente: Cristian
ETIQUETAS PRINCIPALES
HTML... 1 ETIQUETAS PRINCIPALES... 1 ETIQUETAS DE TÍTULOS, PÁRRAFOS Y SEPARACIONES... 3 FORMATO DE TEXTO... 5 LISTAS... 6 ENLACES E IMÁGENES... 7 TABLAS... 9 HTML Las páginas web son documentos de texto,
QUÉ ES UNA HOJA DE ESTILOS? Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que definimos el formato que va a tomar un
QUÉ ES UNA HOJA DE ESTILOS? Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que definimos el formato que va a tomar un determinado elemento de una página web. Siglas CCS significa "Cascading
APLICACIÓN DE LA EVALUACION DIAGNOSTICA. Elaboración de Páginas Web 6 Semestre
Elaboración de Páginas Web 6 Semestre Nombre: Fecha: Grupo: Semestre: Calificación: 1. Una página Web es: 2. Los elementos de una página Web son: 3. En que lenguaje se elaboran las páginas Web: 4. Menciona
MATERIALES Leer previamente la Guía número 3 Elementos proporcionados por docente para realización de asignación.
Tema: Hipervínculos CONTENIDOS Qué es un hipervínculo? Referencia absoluta y referencia relativa Destino _blank y _self Formato y tipos de los enlaces Div y CSS OBJETIVOS ESPECÍFICOS Que el estudiante
Curso HTML. Introducción. Estructura de un documento html
Curso HTML. Introducción HTML significa Hypertext Markup Languaje, o lenguaje de marcas de hipertexto. Los ficheros htm (paginas web) son ficheros de texto, y la forma en que este texto aparece en pantalla
February 10, wordpress.notebook. Tema 4. Wordpress. Sonia Lafuente Martínez
Wordpress Tema 4 Sonia Lafuente Martínez 1 1. Introducción a Wordpress Acceder a Wordpress: http://es.wordpress.com/ Pulsa sobre Acceder para registrarte como usuario nuevo. Como somos nuevos usuarios
Texto y Organización del contenido
Opciones de formateo de texto y de organización del contenido de una página. Texto y Organización del contenido Bases de Datos 2012/2013 Luis Valencia Cabrera Contenido Organización del texto. Encabezado...
10 herramientas para diseñar s marketing en HTML
10 herramientas para diseñar emails marketing en HTML www.funcionarioseficientes.es Existen muchas herramientas online para crear y monitorizar campañas de email marketing o diseñar y enviar un boletín
MOS EXCEL APLICAR FORMATO A CELDAS Y RANGOS. Aplicar formato a la estructura de las celdas.
2.2. APLICAR FORMATO A CELDAS Y RANGOS. Aplicar formato a la estructura de las celdas. El formato de las celdas puede aplicarse a una celda, una fila, una columna o a toda la hoja de cálculo. Sin embargo,
ACTIVIDADES DE HTML. <TITLE> ejemplo de código HTML</TITLE> Aquí va el contenido de la página
ACTIVIDADES DE HTML 1.- Estructura básica de un archivo HTML: ejemplo de código HTML Aquí va el contenido de la página Guardamos el archivo
Constructor de sitios. Manual de Usuario
Constructor de sitios Manual de Usuario Contenido Introducción... 1 Comienza a crear tu sitio... 2 1.- Inicia sesión... 2 2.-Comenzar con la creación... 3 3.-Crear un proyecto... 3 4.-Seleccionar la plantilla...
KOMPOZER. Opciones básicas para diseño web
KOMPOZER Opciones básicas para diseño web Kompozer: pantalla inicial Es un programa especializado en crear webs Al iniciarlo, aparece una página en blanco lista para editar, y los controles básicos en
Extras para
Extras para alumn@s avanzad@s Para l@s que tienen más nivel y este curso les ha sabido a poco, ahí van unos cuantos recursos para mejorar el formato y la presentación de los libros digitales. 1. Dar formato
Universidad de El Salvador Facultad Multidisciplinaria de Occidente Departamento de Ingeniería
Universidad de El Salvador Facultad Multidisciplinaria de Occidente Departamento de Ingeniería Este es un documento para producir documentos en HTML, "Lenguaje de Marcación de Hipertexto", usado en la
Cómo utilizar el Editor de contenidos en 3.0
UNLVIRTUAL Cómo utilizar el Editor de contenidos en 3.0 El Editor de contenidos es una adaptación de los procesadares de texto más conocidos (Word o Writer), con las funciones que el docente necesita para
La primera etiqueta que vamos a aprender es aquella por la que deben empezar todos los documentos que queramos sean considerados HTML; esta es:
TEMA P1. CURSO BÁSICO DE PROGRAMACIÓN EN LENGUAJE HTML HTML es un acrónimo de HiperText Markup Language que, traducido al español, quiere decir algo así como lenguaje de definición por marcas para hipertexto,
Tus primeros pasos con HTML
Tus primeros pasos con HTML Por: Héctor Hugo Luna Miranda Conceptos básicos Antes de empezar a construir tu primera página Web, debes conocer y comprender los siguientes conceptos: Navegador Web: técnica
Guardar y abrir documentos (I)
Guardar y abrir documentos (I) Guardar. Guardar como Materia: Computación Puedes utilizar los comandos Guardar y Guardar como... del Botón Office (o el icono de la barra de acceso rápido) para guardar
PORTAL DE INFORMACIÓN FUNDAMENTAL TRANSPARENCIA
PORTAL DE INFORMACIÓN FUNDAMENTAL TRANSPARENCIA Captura de información fundamental basado en la Ley de Información Pública del estado de Jalisco y sus Municipios, artículos 8, 10 y 15. Elaborado por: Dirección
GUÍA RÁPIDA PARA ELABORAR UN BLOG
GUÍA RÁPIDA PARA ELABORAR UN BLOG Los blogs son sitios Web frecuentemente actualizados, en donde los contenidos aparecen en orden cronológico inverso (es decir, que los últimos aparecen primero). Es un
Los documentos HTML son ficheros de texto plano (también conocidos como ASCII) que pueden ser editados con cualquier editor de texto (como Vim o el
El lenguaje HTML HTML significa HyperText Markup Language. Es el lenguaje en que se escriben los millones de documentos que hoy existen en el World Wide Web. Cuando accedemos a uno de estos documentos,
Pestana Insertar de Office Word
Pestana Insertar de Office Word 1. Página: El primer apartado dentro de la pestaña insertar es el de paginas. 1.1 Portada: Inserta una portada con formato completo, con autor, titulo, fecha y otros datos