CURSO BÁSICO DE HTML

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

Download "CURSO BÁSICO DE HTML"

Transcripción

1 UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA DEPARTAMENTO DE INFORMACIÓN ACADÉMICA CURSO BÁSICO DE HTML Delia Esquer Meléndez

2 INDICE INTRODUCCION 3 COMO CREAR UN DOCUMENTO HTML 4 ETIQUETAS PARA TEXTO Y GRAFICAS 4 CARACTERES ESPECIALES 6 ECABEZADOS (Headings) 6 LINEAS HORIZONTALES (Horizontal Rules) 6 LISTAS DE ELEMENTOS 7 LIGAS 10 IMAGENES 12 TABLAS 13 COMENTARIOS 17 SEPARADOR DE PARRAFOS 17 SALTOS DE LINEA 17 EJERCICIOS Ejercicio # 1 Ejercicio # 2 Ejercicio # 3 Ejercicio # 4 Ejercicio # GLOSARIO 21 Delia Esquer M. - Programa Estratégico de Apoyo Académico / CECUUE - 2

3 INTRODUCCION HTML (por sus siglas en inglés: HyperText Markup language) es un lenguaje de programación que se utiliza para crear páginas de Internet (WWW). Por "página" entenderemos que es un archivo de texto que contiene el código HTML que indica a un navegador (browser), como Netscape Navigator o Internet Explorer, como desplegar textos, imágenes, colores, tipos de letra, color de fondo, así como los enlaces de hipertexto hacia otros sitios u otras páginas. Es un lenguaje basado en "etiquetas", que son instrucciones o comandos que nos permiten agregar atributos a los elementos de HTML, tales como remarcado, itálico, subrayado, color, crear hypertexto, etc.. Estas etiquetas o comandos utilizan los caracteres < y > para que sean identificados como acciones de HTML. La mayoría de las etiquetas o comandos tienen una etiqueta inicial y una etiqueta final. Ejemplo: Texto<B>remarcado</B>, en este caso sólo la palabra remarcado se desplegaría con el atributo de remarcado (bold) a la hora de utilizar un navegador (browser). Estas "etiquetas" son interpretadas por el navegador que utilizamos y dependiendo de sus capacidades serán los resultados obtenidos. No todos los navegadores soportan "todas" las etiquetas, en caso de que el navegador que se utilize no pueda interpretar una de las etiquetas simplemente la ignora y no se despliega el efecto deseado por el diseñador de la página. Un documento en HTML puede ser creado en cualquier editor o procesador de texto, siempre y cuando sea salvado/grabado en formato ASCII. Hoy en día existen herramientas especializadas para la creación de estos documentos, las cuales por medio de sus menús de comandos permiten al usuario mayor facilidad y rapidez de edición. Entre los más conocidos se encuentra ANT-HTML, GT-HTML, Internet Assistant y Quaterdeck WebAuthor, los cuales funcionan a través de WORD para Windows, también los editores de web (web editors) HOT DOG, WEB Wizard, HTML Writer, Homesite, Metal, Dreamweaver, etc. El objetivo primordial de HTML es crear una forma universal de construir, almacenar y desplegar la información. Una de las características más importantes de HTML estandard, es que cualquier usuario, con cualquier equipo, con cualquier software puede leer los documentos creados. Algunas compañías han creado sus propias extensiones, como por ejemplo el navegador NETSCAPE ha implementado sus extensiones a HTML 2, las cuales permiten al usuario crear sus documentos con efectos gráficos. Esto ha invitado a muchos usuarios a utilizar este formato, tanto para crear como para visualizar los documentos. La desventaja de esto sería que si un usuario no cuenta con el software de Netscape, no será capaz de visualizar totalmente el documento. Delia Esquer M. - Programa Estratégico de Apoyo Académico / CECUUE - 3

4 COMO CREAR UN DOCUMENTO HTML Las etiquetas básicas de un documento HTML son: <HTML> <HEAD> <TITLE> Introducción a HTML</TITLE> </HEAD> <BODY> </BODY> </HTML> <HTML> Esta etiqueta identifica al archivo como un documento HTML.. Se inserta la etiqueta inicial <HTML> al iniciar el documento y la etiqueta final </HTML> al terminar el documento HTML. Es una etiqueta indispensable aunque es invisible al visualizar un documento. <HEAD> Esta etiqueta contiene información importante acerca del documento. El único elemento requerido de <HEAD> es <TITLE>. <TITLE> Esta etiqueta debe estar dentro de <HEAD>. No debe contener "ligas" (anchors). No hay Iímite para la longitud de un título, pero sin embargo títulos demasiado largos pueden ser truncados por algunas aplicaciones, se recomienda que sean de 1 a 64 caracteres. Debe identificar globalmente el título del documento, ya que es el que aparecerá en las listas de lugares visitados (history lists) y en la parte superior de la pantalla al desplegar el documento. Solo se permite una línea de título por documento. <BODY> Dentro de esta etiqueta deben estar todos los elementos de texto e imágenes que conforman el "cuerpo" (body) del documento. Dentro de esta etiqueta se puede controlar el fondo (background) del documento y globalmente el color, tamaño y tipo de letra, así como también el color de las ligas del documento. Es una etiqueta indispensable aunque es invisible al visualizar un documento. Delia Esquer M. - Programa Estratégico de Apoyo Académico / CECUUE - 4

5 ETIQUETAS PARA TEXTO Y GRAFICAS Como ya se había mencionado anteriormente, HTML está basado en el concepto de "etiquetas", a continuación se listan las etiquetas mas utilizadas: Las etiquetas (tags) se utilizan para agregar atributos al texto o gráficas. Ejemplo: Resultado: <B>ESTE TEXTO ES REMARCADO</B> Y ESTE NO ESTE TEXTO ES REMARCADO Y ESTE NO Lo cual significa que la etiqueta <B> se utiliza para remarcar un texto, y solo el texto dentro de las etiquetas <B> y </B> aparecerá con el atributo de BOLD. ETIQUETA EFECTO ETIQUETAL/RESULTADO <ADDRESS> Dirección <ADDRESS>Esta es una dirección</address> Esta es una dirección <B> Texto remarcado <B>Este es un texto remarcado</b> Este es un texto remarcado <BASEFONT SIZE=n> Define el tamaño del texto <BASEFONT SIZE=3>El tamaño inicial del texto es 3</FONT> Nota: BASEFONT SIZE se utiliza para incrementar o disminuir el tamaño inicial del texto que por ornisión le da HTML, por lo tanto el valor puede ser positivo o negativo. <BLINK> Texto parpadeante <BLINK>Este es un texto que parpadea</blink> <CENTER> Texto centrado <CENTER>Este es un texto centrado</center> Este es un texto centrado <EM> Texto Itálico <EM>Este es un texto itálico</em> Este es un texto itálico <FONT SIZE=n> Define el tamaño del texto <FONT SIZE=3>El tamnaño del texto es 3</FONT> Nota: FONT SIZE también se utiliza para incrementar o disminuir el tamaño del texto, por lo tanto el valor puede ser positivo o negativo en relación al valor por omisión. <H1>...<H6> Encabezados <Hl>Nivel 1 de Encabezados</Hl> Nota: H 1... H6 se utiliza para agregar encabezados o titulos. El tamaño del texto disminuye en cada nivel, siendo el mas grande H1. Delia Esquer M. - Programa Estratégico de Apoyo Académico / CECUUE - 5

6 CARACTERES ESPECIALES (SPECIAL CHARACTERS) Para insertar caracteres especiales (acentos y símbolos), se utilizan las siguientes etiquetas: ETIQUETA EJEMPLO RESULTADO &acute ÁRBOL á rbol ÉSTE éste Índice índice ÓSEO óseo último último ÁRBOL árbol ÉSTE éste ÍNDICE índice ÓSEO óseo ÚLTIMO último &tilde NIÑO niño NIÑO niño &uml GÜERO güero GÜERO güero &reg &reg &copy &copy ENCABEZADOS (HEADINGS) Existen 6 niveles de encabezados (headings) iniciando con <H1>, que es el texto más grande y terminando con <H6>. Todos los encabezados son textos remarcados (bold). Al igual que todas las etiquetas se abre <H1> al iniciar el encabezado y se cierra </H1> al finalizar. Por omisión los textos son alineados a la izquierda, existe la opción de centrarlos utilizando ALIGN=CENTER dentro de la etiqueta. (ej, <H1 ALIGN=CENTER>) <Hl> <H2> <H3> <H4> <H5> <H6> Primer nivel de encabezado. Segundo nivel de encabezado. Tercer nivel de encabezado. Cuarto nivel de encabezado. Quinto nivel de encabezado. Sexto nivel de encabezado. LINEAS (HORIZONTAL RULES) A un documento HTML se le pueden agregar líneas (horizontal rules) para dividir secciones de texto o prrafos. Se utiliza la etiqueta <HR> con los siguientes atributos: <HR> <HR SIZE=n> <HR WIDTH=n I % > <HRALIGN=LEFTIRIGHTICENTER> <HR NOSHADE> Agrega una línea Define el grosor de la línea Define el largo de la línea en relación al tamaño de la pantalla Posiciona la línea de acuerdo a su especificación Elimina el sombreado de una línea Delia Esquer M. - Programa Estratégico de Apoyo Académico / CECUUE - 6

7 LISTAS Existen diferentes tipos de listas de elementos y deben incluirse en el <BODY> del documento. NOTA Todas las listas pueden ser anidadas. <DL>... <IDL> Lista de Definición (Definition List) Es una lista de términos y su correspondiente descripción. Los elementos que se utilizan en estas listas son <DT> (Definition Term) y <DD> <Definition Data>. Ejemplo: LISTA <DL> <DT>ECA<DD>Escuela de Contablidad y Administración <DT>FCS<DD>Facultad de Ciencias <DT>FCM<DD>Facultad de Ciencias Marinas </DL> RESULTADO ECA Escuela de Contabilidad y Administración FCS Facultad de Ciencias FCM Facultad de Ciencias Marinas <OL>... Lista Ordenada (Ordered List) Es una lista de elementos ordenados, como por ejemplo una secuencia de hechos, instrucciones, etc. Por omisión la numeración inicia del 1. Cada elemento es listado con <Ll> (List Item). Ejemplo: LISTA <OL> <LI>Oprimir el botón izquierdo del mouse <LI>Insertar un objeto con INSERT/OBJETC <LI>Seleccionar un objeto <OL> <LI>Oprimir el botón izquierdo del mouse <LI>Insertar un objeto <OL> <LI>INSERT/0BJECT <LI>Seleccionar un objeto <OL> <L1>Oprimir el botón de Seleccionar <L1>0primir el botón de Aceptar RESULTADO 1. Oprimir el botón izquierdo del mouse 2. Insertar un objeto con INSERT/OBJETC 3. Seleccionar un objeto 1. Oprimir el botón izquierdo del mouse 2. Insertar un objeto 1. INSERT/OBJETC 3. Seleccionar un objeto 1. Oprimir el botón de Seleccionar 2. Oprimir el botón de Aceptar Nota 1: Se puede modificar el tipo de numeración de los elementos utilizando las siguientes extensiones: Delia Esquer M. - Programa Estratégico de Apoyo Académico / CECUUE - 7

8 TYPE=1 1,2,3,4,5... TYPE=I I, II,III, IV, IV... TYPE=i i, ii, iii, iv, v... TYPE=A A,B,C,D,E... TYPE=a a,b,c,d,e... LISTA <OL TYPE=A> <LI>Oprimir el botón izquierdo del mouse <L1>Insertar un objeto con INSERT/OBJETC <LI>Seleccionar un objeto RESULTADO A. Oprimir el botón izquierdo del mouse B. Insertar un objeto con INSERT/OBJETC C. Seleccionar un objeto <OL TYPE=i> <LI>Oprimir el botón izquierdo del mouse <Ll>lnsertar un objeto con INSERT/OBJETC <LI>Seleccionar un objeto i. Oprimir el botón izquierdo del mouse ii. Insertar un objeto con INSERT/OBJETC iii. Seleccionar un objeto <OL> <LI>Oprimir el botón izquierdo del mouse <Ll>lnsertar un objeto <OL TYPE=a> <Ll> INSERT/OBJETC <LI>Seleccionar un objeto <OL TYPE=a> <LI>Oprimir el botón de Seleccionar <LI>Oprimir el botón de Aceptar 1. Oprimir el bot6n izquierdo del mouse 2. Insertar un objeto a. INSERT/OBJETC 3. Seleccionar un objeto a.- Oprimir el bot6n de Seleccionar b.- Oprimir el bot6n de Aceptar Nota 2: Se puede alterar el orden de la numeración de los elementos utilizando la extensión START LISTAS <OL START=5> <LI>Oprimir el botón izquierdo del mouse <L1>Insertar un objeto con INSERT/OBJETC <L1>Seieccionar un objeto RESULTADO 5. Oprimir el bot6n izquierdo del mouse 6. Insertar un objeto con INSERT/OBJETC 7. Seleccionar un objeto <OL TYPE=A START=3> <LI>Oprimir el botón izquierdo del mouse <Ll>lnsertar un objeto con INSERTIOBJETC <L1>Seleccionar un objeto C. Oprimir el botón izquierdo del mouse D. Insertar un objeto con INSERT/ OBJETC E. Seleccionar un objeto <UL>... </UL> Lista No Ordenada (Unordered List) Delia Esquer M. - Programa Estratégico de Apoyo Académico / CECUUE - 8

9 Es una lista sin orden, esto quiere decir que no numera los elementos. Por omisión aparece un circulo (circle bullet) antes del elemento. Cada elemento es listado con <Ll> (List Item). Ejemplo: LISTA <UL> <LI>Oprimir el botón izquierdo del mouse <Ll>lnsertar un objeto con INSERT/OBJETC <L1>Seleccionar un objeto </UL> <UL> <LI>Oprimir el botón izquierdo del mouse <Ll>lnsertar un objeto <UL> <LI>INSERT/OBJECT </UL> <LI>Seleccionar un objeto </UL> RESULTADO Oprimir el botón izquierdo del mouse Insertar un objeto con INSERT/OBJETC Seleccionar un objeto Oprimir el botón izquierdo del mouse Insertar un objeto INSERT/OBJETC Seleccionar un objeto Nota 3: Se puede hacer una combinación de listas: LISTA <UL> <LI>Oprimir el botón izquierdo del mouse <Ll>lnsertar un objeto <OL> <Ll> INSERT/OBJETC <LI>Seleccionar un objeto <OL TYPE=a> <LI>Oprimir el botón de Seleccionar <LI>Oprimir el botón de Aceptar </UL> RESULTADO Oprimir el botón izquierdo del mouse Insertar un objeto 1. INSERT/OBJECT Seleccionar un objeto a. Oprimir el botón de Seleccionar b. Oprimir el botón de Aceptar <OL> <LI>Oprimir el botón izquierdo del mouse <Ll>lnsertar un objeto con INSERT/OBJETC <UL> <LI>INSERT/OBJECT </UL> <LI>Seleccionar un objeto <UL TYPE=SQUARE> <LI>Oprimir el botón de Seleccionar <LI>Oprimir el botón de Aceptar </UL> 1. Oprimir el botón izquierdo del mouse 2. Insertar un objeto INSERT/OBJETC 3. Seleccionar un objeto Oprimir el botón de Seleccionar Oprimir el botón de Aceptar Delia Esquer M. - Programa Estratégico de Apoyo Académico / CECUUE - 9

10 LIGAS (ANCHORS) Las "ligas" (anchors) son textos o imágenes que se utilizan como destino hacia otro archivo o sitios, enviar un correo, grabar un archivo, generar un sonido, etc. con solo oprimir (click) un botón del ratón. La etiqueta que se utiliza para las "ligas" es <A>, con la referencia HREF. Esta etiqueta se le puede agregar a un texto o a una imagen. Los resultados por "omisión" de esta etiqueta a la hora de ser interpretada por un navegador son los siguientes: texto, éste aparecerá subrayado en color azul ; y en el caso de una imagen, ésta aparecerá dentro de un marco azul. Tipos de ligas: Externas: Cuando el texto o imagen "apunta" a otro sitio o servidor de www. Ejemplos: <A HREF=" </A> <A HREF=" Conexión al servidor del CECUUE Conexión al servidor del CICESE <A HREF=" UABC</A> Conexión al servidor de rectoría de la UABC, página de la DGAA. Internas (a otro documento): Cuando el texto o imagen "apunta" a otro archivo dentro del mismo servidor de Ejemplos: <A HREF="ejemplos.htm">Ejemplos de una tabla</a> Conexión al archivo ejemplos.htm que se encuentra en el mismo servidor de www. <A HREF="primer.htm>Primer documento HTML</A> Conexión al archivo primer.htm que se encuentra en el mismo servidor de www. Internas (dentro del mismo documento): Cuando el texto o imagen "apunta" a un lugar específico dentro del mismo documento. Se debe definir una "etiqueta destino" que es a donde se conectará la liga interna utizando la etiqueta NAME. Ejemplo: <A HREF="#unidad1">Unidad 1</A> Conexión a la etiqueta unidad1 del archivo actual. Nota: En el archivo matematicas.htm debe estar previamente definida la etiqueta destino: <A NAME="unidad1">UNIDAD 1</A> Internas ( a un lugar específico de otro documento): Cuando el texto o imagen "apunta" a un lugar específico de otro documento. Se debe definir una "etiqueta destino" que es a donde se conectará la liga interna utizando la etiqueta NAME. Delia Esquer M. - Programa Estratégico de Apoyo Académico / CECUUE - 10

11 Ejemplo: <A HREF="matematicas.htm#unidad1">Unidad 1</A> Conexión a la etiqueta unidad1 del archivo matematicas.htm Nota: En el archivo matematicas.htm debe estar previamente definida la etiqueta destino: <A NAME="unidad1">UNIDAD 1</A> Correo (mailto) : La etiqueta mailto: se utiliza para enviar/recibir correo electrónico ( ) de algún usuario. Se debe definir una liga para enviar/recibir correo: Ejemplo: <A HREF="mailto:delia@faro.ens.uabc.mx">Comentarios y Sugerencias</A> Nota: El texto Comentarios y Sugerencias aparecerá subrayado ya que es una liga, pero en lugar de irse a un archivo o a otro sitio de Internet abrirá la ventan del Correo (Messanger) del Navegador Netscape para que el usuario que esté consultando la página en ese momento, nos pueda enviar un mensaje. Delia Esquer M. - Programa Estratégico de Apoyo Académico / CECUUE - 11

12 IMAGENES La etiqueta <lmg SRC> se utiliza para agregar imágenes a un documento HTML. Los formatos de grágica permitidos so:.gif y.jpg. <lmg SRR="grafica1.gif > Despliega el archivo gráfico grafica1.gif. <IMG SRR="grafica1.gif"ALlGN=TOP> <IMG SRC=-"grafica1.gif ALIGN=MIDDLE> <IMG SRC= grafica1.gif ALIGN=BOTTOM> Despliega el archivo gráfico "grafica1.gif y coloca la siguiente, línea de texto en la parte superior de la imagen Despliega el archivo gráfico grafica1.gif y coloca la siguiente línea de texto en la parte media de la imagen. Despliega el archivo gráfico grafica1.gif y coloca la siguiente línea de texto en la parte inferior de la imagen. <IMG SRC-= logo4.gif WlDTH=30 HEIGHT=30> Despliega el archivo gráfico logo4.gif de 30 pixeles de ancho y 30 pixeles de alto. <A HREF="uabc-home.html ><IMG SRC=Iogoc.gif'></A> La imagen "logoc.gif' es una liga al archivo uabc_home.html Nota Aparece un marco alrededor de la imagen <A HREF="uabc-home. htm]"><img SRC="logoc.gif BORDER=O></A> <A HREF=" <IMG SRC="logo4.gif"BORDER=O </A> La imagen "logoc.gif es una liga al archivo uabc_home.html". Nota: BORDER=0 le quita el marco a la imagen La imagen "logo4.gif es una liga a la dirección (URL) hftp:// (rectoria UABC). Nota La imagen no tiene marco alrededor Delia Esquer M. - Programa Estratégico de Apoyo Académico / CECUUE - 12

13 TABLAS La etiqueta <TABLE>...</TABLE> se utiliza para generar "tablas" en un documento HTML. Las tablas se utilizan para dar un formato adecuado a la información que se requiere desplegar en columnas y/o renglones. También se pueden incluir imágenes dentro de las columnas/renglones. Para generar una tabla se utilizan los siguientes elementos: ELEMENTO FUNCION OBSERVACIONES <TABLE> Especifica el inicio de una tabla Al inicio de la tabla </TABLE> Especifica el final de una tabla Al final de la tabla <CAPTION> </CAPTION> Especifica el titulo de la tabla Es Opcional <TR>...</TR> Indica una línea <TH>... </TH> Especifica el titulo de una línea <TD>... </TD> Indica una celda Debe estar dentro de <TR> BORDER=valor Agrega un borde a la tabla El valor" es el tamaño de borde y debe ir dentro de <TABLE BORDER=xx> ALIGN=LEFT RIGHT CENTER TOP BOTTOM COLSPAN=valor ROWSPAN=valor CELLSPACING=valor CELLPADDING=valor Ejemplo: Alinea el texto/imagen Especifica cuantas columnas ocupará una celda Especifica cuantas Iíneas ocupará una celda Espaciamiento entre cada celda Espaciamiento entre el borde de la celda y su contenido Se utilizan los tres primeros para <TR>, <TH>, <TD> y los dos últimos para <CAPTION> Debe ir en <TH> o en <TD>. El "valor" es el número de columnas Debe ir en <TH> o en <TD>. El "valor" es el número de líneas <TABLE> <CAPTION>ESTA ES UNA TABLA</CAPTION> <TR> <TD>CELDA 1 </TD> <TD>CELDA 2</TD> </TR> <TR> <TD>CELDA 3</TD> <TD>CELDA 4</TD> </TR> </TABLE> Delia Esquer M. - Programa Estratégico de Apoyo Académico / CECUUE - 13

14 RESULTADO: ESTA ES UNA TABLA CELDA1 CELDA 2 CELDA3 CELDA 4 Ejemplo 2: <TABLE BORDER=1> <CAPTION>ESTA ES UNA TABLA</CAPTION> <TR> <TH>La primera Línea</TH> <TD>CELDA 1 </TD> <TD>CELDA 2</TD> </TR> <TR> <TH>La segunda Línea</TH> <TD>CELDA 3</TD> <TD>CELDA 4</TD> </TR> </TABLE> RESULTADO: ESTA ES UNA TABLA La primera Linea CELDA 1 CELDA 2 La segunda Linea CELDA 3 CELDA 4 Ejemplo 3: <CENTER> <TABLE BORDER=2> <CAPTION>CIUDADES POR ESTADO</CAPTION> <TR> <TH COLSPAN=2>B.C.</TH> <TD>Ensenada</TD> <TD>Tijuana</TD> <TD>Mexicali</TD> </TR> <TR> <TH COLSPAN=2>SONORA</TH> <TD>Hermosillo</TD> <TD>Cd. Obregon</TD> </TR> </TABLE> </CENTER> RESULTADO: CIUDADES POR ESTADO B.C. Ensenada Tijuana Mexicali SONORA Hermosillo Cd. Obregon Delia Esquer M. - Programa Estratégico de Apoyo Académico / CECUUE - 14

15 Ejemplo 4: <TABLE CELLSPACING=5 BORDER=2> <CAPTION> UNIVERSIDAD AUTONOMA DE BAJA CALIFORNIA</CAPTION> <TR><TH ROWSPAN=7> ENSENADA</TH></TR> <TR><TD>Escuela de Contabilidad y Administración </TD></TR> <TR><TD>Escuela de Ingeniería </TD></TR> <TR><TD>Facultad de Ciencias</TD></TR> <TR><TD>Facultad de Ciencias Marinas</TD><[TR> <TR><TD>Instituto de Investigaciones Oceanológicas</TD><ITR> <TR><TD>Instituto de Investigación y Desarrollo Educativo<fTD></TR> <TR><TH ROWSPAN=8>TIJUANA</TH></TR> <TR><TD>Escuela de Humanidades</TD><TR> <TR><TD>Escuela de Turismo</TD></TR> <TR><TD>Facultad de Contaduría y Administración</TD></TR> <TR><TD>Facultad de Ciencias Químicas</TD></TR> <TR><TD>Facultad de Derecho</TD></TR> <TR><TD>Facultad de Economía</TD></TR> <TR><TD>Facultad de Medicina</TD></TR> <TR><TD>Instituto de Investigaciones Históricas</TD></TR> </TABLE> RESULTADO: ENSENADA TIJUANA Escuela de Contabilidad y Administración Escuela de Ingeniería Facultad de Ciencias Facultad de Ciencias Marinas Instituto de Investigaciones Oceanológicas Instituto de Investigación y Desarrollo Educativo Escuela de Humanidades Escuela de Turismo Facultad de Contaduría y Administración Facultad de Ciencias Químicas Facultad de Derecho Facultad de Economía Facultad de Medicina Instituto de Investigaciones Históricas Ejemplo 5: <TABLE CELLSPACING=5 BORDER=10> <CAPTION>COMPUSERVE</CAPTION> <TR> <TD>COMPUTADORAS</TD> <TD ROWSPAN=4 ALIGN=LEFT><IMG SCR="man2.gif ></TD>\ </TR> <TR> <TD>ACCESORIOS </TD> </TR> <TR> <TD>SERVICIOS</TD></TR> <TR><TD>ASESORIAS</TD></TR> </TABLE> Delia Esquer M. - Programa Estratégico de Apoyo Académico / CECUUE - 15

16 RESULTADO: COMPUTADORAS ACCESORIOS SERVICIOS ASESORIAS COMPUSERVE Delia Esquer M. - Programa Estratégico de Apoyo Académico / CECUUE - 16

17 COMENTARIOS Para agregar comentarios a un documento HTML se utilizan las etiquetas <!--comentario--> en cada línea. Ejemplo: <'--Este es un comentario de mi home-page --> SEPARADOR DE PARRAFOS (Paragraph Separator) Para separar párrafos se utiliza la etiqueta <P>. Ejemplo: <H1>SEPARADOR DE PARRAFOS</H1> Esta es el primer párrafo <P> y este es el segundo SALTOS DE LINEA (Break) La etiqueta <BR> genera un salto de linea sin dejar ningon espacio en blanco. Ejemplo: <H1>SALTO DE LINEA</Hl> Esta es la primera línea<br> y esta es la segunda Delia Esquer M. - Programa Estratégico de Apoyo Académico / CECUUE - 17

18 EJERCICIOS Los siguientes ejercicios se elaborarán en el editor Notepad y se deberán seguir los siguientes pasos: 1. Abrir el Notepad (Start/ Programs / Accessories / Notepad). 2. Insertar los elementos básicos de un documento HTML (HTML, HEAD, TITLE, BODY). 3. Insertar el código que se indica en cada ejercicio. 4. Grabar el archivo con la extensión.htm (ej. ejercicio1.htm) 5. Abrir la aplicación del navegador Netscape. 6. Abrir el archivo que se desea desplegar (File / Open file) EJERCICI0 # 1 - ELEMENTOS BASICOS Y ATRIBUTOS DEL TEXTO Crear un documento HTML incluyendo los elementos básicos y los atributos de texto: <HTML> <HEAD> <TITLE >Atributos de Texto</TITLE> </HEAD> <BODY> <H1 >ATRI BUTOS DE TEXTO</H1 > <ADDRESS>Esta es mi dirección de correo electrónico: delia@faro.ens.uabc.mx</address> <B>Este es un texto remarcado</b> <BLINK> Este es un texto parpadeante</blink> <CENTER>Este es un texto centrado</center> <EM>Este es un texto itálico</em> Este texto es de tamaño normal, <FONT SIZE=5>pero este es de 5</FONT> <FONT SIZE=-l> y este de -1 <IFONT> </BODY> </HTML> EJERCICI0 # 2 - CARACTERES ESPECIALES Y SALTO DE LINEA Crear un documento HTML en el editor Notepad que contenga palabras con caracteres especiales: <HTML> <HEAD> <TITLE>Caracteres Especiales</TITLE> </HEAD> <BODY> <H1>CARACTERES ESPECIALES</H1> ÁRBOL <BR> árbol <BR> ÉSTE <BR> éste <BR> Índice <BR> índice <BR> ÓSEO <BR> óseo <BR> ÚLTIMO <BR> último NI <BR> ÑO niño <BR> GÜERO <BR> güero <BR> &reg &copy </BODY> </HTML> Delia Esquer M. - Programa Estratégico de Apoyo Académico / CECUUE - 18

19 EJERCICI0 # 3 - ENCABEZADOS (HEADINGS) Y LINEAS HORIZONTALES Crear un documento HTML incluyendo los elementos básicos, y los seis niveles de encabezados: <HTML> <HEAD> <TITLE>Niveles de Encabezados</TITLE> </HEAD> <BODY> <H1 ALIGN=CENTER>Nivel 1</Hl> <HR> <H2>Nivel 2</H2> <HR> <H3>Nivel 3</H3> <HR> <H4>Nivel 4</H4> <HR> <H5>Nivel 5</H5> <HR> <H6>Nivel 6</H6> </BODY> </HTML> EJERCICIO # 4 - LIGAS Crear un documento HTML que contenga una "lista" de "ligas" a los archivos que se generaron en la prácticas anteriores <HTML> <HEAD> <TITLE>Archivo con ligas</title> </HEAD> <BODY> <OL> <LI>Este es un ejemplo de una liga al<a HREF="atributo.htm">archivo de atributos de texto</a> <LI>Este es un ejemplo de una liga al <A HREF="titulos.htm">archivo de títulos</a> <LI>Este es un ejemplo de una liga a la dirección de la página principal del <A HREF= " Centro de Computo </A> </BODY> </HTML> Delia Esquer M. - Programa Estratégico de Apoyo Académico / CECUUE - 19

20 EJERCICIO # 5 - LISTAS DE ELEMENTOS Y LIGAS Crear un documento HTML que contenga un encabezado (heading), una línea (horizontal rule), una "lista" de "ligas" a diferentes archivos y sitios, así como una liga tipo correo. <HTML> <HEAD> <TITLE>Diferentes tipos de ligas </TITLE> </HEAD> <BODY> <H1>COMO PUEDO RECIBIR UN CORREO DE UN USUARIO</H1> <HR> <OL> <LI>Este es un ejemplo de una liga al <A HREF="atributo.htm">archivo de atributos de texto</a> <LI>Este es un ejemplo de una liga al <A HREF="titulos.htm">archivo de títulos</a> <LI>Este es un ejemplo de una liga a la dirección de la página principal del <A HREF= " Centro de Computo </A> <HR> Si tiene algún comentario o sugerencia acerca de esta página por favor envíalo a <A HREF="mailto:cecuue@faro.ens.uabc.mx">Centro de Cómputo</A> </BODY> </HTML> Delia Esquer M. - Programa Estratégico de Apoyo Académico / CECUUE - 20

21 GLOSARIO FTP File Transfer Protocol Protocolo utilizado para transferir archivos por medio de internet de una computadora a otra. HTML HyperText Markup Language Lenguage que se utiliza para dar formato y diseflo a los documentos que se publican en el World Wide Web (WWW, W3, Web). HTML es parte de SGML y fue inventado por Tim Berners-Lee del CERN. HTTP HyperText Transport Protocol Protocolo diseñado para accesar rápidamente información por uno o más usuarios. GIF Graphics Interchange Format Formato de compresión de archivos gráficos. JPEG Joint Photographic Experts Group Formato de compresión (compression format) diseñado tanto para imágenes digitales de color o tonos de gris. URL Uniform Resource Locator Es un apuntador (dirección) a un recurso que se encuentra disponible en Internet. La primera parte del URL antes de :, indica el método de acceso y la parte después de :, es interpretada por el método de acceso. Ejemplos: - Accesar una página del Web telnet:// - Hacer un Telnet ftp:// - Transferir información mailto: - Enviar un WWW World Wide Web Término dado a una arquitectura de acceso de internet. Por medio de un Web Browser (localizador) se pueden accesar documentos con texto, gráficas y/o ligas (links) a otros recursos de internet. Las tres abreviaciones para el World Wide Web son las siguientes: WWW, W3 y Web SGML HYPERTEXT HYPERMEDIA Standard Generalized Markup Language Lenguaje estándard para describir lenguages markup" (basados es etiquetas) Es el texto que apunta (pointer) a otro texto. Es una versión avanzada de hypertext ya que es el que permite desplegar imágenes, sonido o animación WYSIWYG What You See Is What You Get Ambiente gráfico de desarollo de páginas electrónicas. Delia Esquer M. - Programa Estratégico de Apoyo Académico / CECUUE - 21

22 Tutoriales de HTML: (Introducción) (Tutorial) (Tutorial) (HTML Básico, Avanzado y Estilo) (HTML Básico) (Tutoriales de HTML Básico) (Tutoriales de HTML Avanzado) Delia Esquer M. - Programa Estratégico de Apoyo Académico / CECUUE - 22

TEMA 8. Internet y la World Wide Web. Álvarez, S., Bravo, S., Departamento de Informática y automática Universidad de Salamanca

TEMA 8. Internet y la World Wide Web. Álvarez, S., Bravo, S., Departamento de Informática y automática Universidad de Salamanca TEMA 8 Internet y la World Wide Web Álvarez, S., Bravo, S., Departamento de Informática y automática Universidad de Salamanca Qué es Internet? Algunos autores, Internet es un acrónimo de INTERconected

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

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

GUÍA Nro. 1 TECNOLOGÍA DE INTERNET. TIII PIII

GUÍA Nro. 1 TECNOLOGÍA DE INTERNET. TIII PIII GUÍA Nro. 1 TECNOLOGÍA DE INTERNET. TIII PIII GUIA DISPONIBLE EN: http://preparadorivan.blogspot.com/ - http://preparadormssi.50webs.com/inicio.html La World Wide Web o la Web, es una de las múltiples

Más detalles

Web. Web Diapositiva 1

Web. Web Diapositiva 1 Web Servicio WorldWideWeb Historia de la Web URL Dominios Dominio de alto nivel Cómo funciona? Hipertexto e Hipervínculos Sitios Web y Páginas de Inicio Cómo identificar los hipervínculos? Navegador Web

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

Servicio WWW World Wide Web Office Express

Servicio WWW World Wide Web Office Express Servicio WWW World Wide Web Office Express 2000 Ciclo de Cursos Abiertos a la Comunidad Facultad de Ciencias Exactas, Ingeniería y Agrimensura. Rosario. Servicios de Internet Qué es el servicio WWW (World

Más detalles

Creando un Sitio Web personal.

Creando un Sitio Web personal. Creando un Sitio Web personal. FrontPage Express FrontPage Express de Microsoft es un sencillo editor htm 1 l que venía instalado por defecto con Windows 98 o con el Internet Explorer 4 para Windows 95.

Más detalles

TEMA 9 CREACIÓN DE PÁGINAS WEB

TEMA 9 CREACIÓN DE PÁGINAS WEB TEMA 9 CREACIÓN DE PÁGINAS WEB OBJETIVOS Conocer las páginas web y sus elementos. Insertar tablas, capas, enlaces en las páginas web. Crear páginas web con NVU. Crear un sitio web. Configurar un sitio

Más detalles

Guia para el principiante

Guia para el principiante Guia para el principiante Este documento asume que usted sabe como publicar en WWW. Lenguaje HTML El lenguaje HTML es el usuado actualmente para escribir textos hypermediales en el Web. El siguiente texto,

Más detalles

Práctica 6 - Página Web

Práctica 6 - Página Web Práctica 6 - Página Web Teoría. Una Página Web es un recurso de información que esta diseñada para la Word Wide Web (Red Mundial) y puede ser vista por medio un Navegador Web. Esta información se encuentra

Más detalles

Internet - Web. Internet - Web. Internet. Internet. Diseño de Sitios Web Desarrollo de Paginas Web. Qué es la Internet? - Qué es la Web?

Internet - Web. Internet - Web. Internet. Internet. Diseño de Sitios Web Desarrollo de Paginas Web. Qué es la Internet? - Qué es la Web? Desarrollo de Paginas Web Internet - Web Internet - Web Qué es la Internet? - Qué es la Web? Internet: Una red de computadoras a nivel mundial Web: Una forma de organizar la información existente en Internet

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

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

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

DREAMWEAVER CS3 Guía Rápida

DREAMWEAVER CS3 Guía Rápida UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA Departamento de Información Académica DREAMWEAVER CS3 Guía Rápida Delia Esquer Meléndez desquer@uabc.mx Ensenada, Baja California Enero 2009 INTRODUCCIÓN 1. Qué

Más detalles

INFORMÁTICA IE. Términos a conocer y conceptos básicos. World Wide Web (WWW):

INFORMÁTICA IE. Términos a conocer y conceptos básicos. World Wide Web (WWW): INFORMÁTICA IE MÓDULO INTERNET Términos a conocer y conceptos básicos World Wide Web (WWW): Digamos, simplemente, que es un sistema de información, el sistema de información propio de Internet. Sus características

Más detalles

UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA Departamento de Información Académica

UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA Departamento de Información Académica UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA Departamento de Información Académica Ensenada, Baja California Mayo 2010 Qué es un Sitio Web? Es un conjunto de PÁGINAS WEB que están hospedadas (almacenadas o

Más detalles

CÓMO CREAR UNA PÁGINA WEB

CÓMO CREAR UNA PÁGINA WEB CÓMO CREAR UNA PÁGINA WEB v.2 Índice 1 Introducción 3 2. Diseño gráfico 3 3. El Lenguaje HTML 3 4. Alojamiento y publicación 5 5. Promoción 8 6. Otras utilidades 9 6.1 Estadísticas 9 6.2 Contadores y Formularios

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

URL. Después de los dos puntos: se interpreta según el método de acceso. Suele contener direcciones y puntos de acceso en una máquina. Esquema URL.

URL. Después de los dos puntos: se interpreta según el método de acceso. Suele contener direcciones y puntos de acceso en una máquina. Esquema URL. URL. Un URL ó Uniform Resource Locator (Localizador Uniforme de Recurso) es un medio estándar de identificar direcciones internet en la Web. Tiene dos partes, separadas por dos puntos: Antes de los dos

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

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

MANUAL DE PUBLICACIÓN EN PORTAL UNED

MANUAL DE PUBLICACIÓN EN PORTAL UNED MANUAL DE PUBLICACIÓN EN PORTAL UNED Manual de Publicación en PORTAL-UNED Equipo WEB. Infoportal@csi.uned.es consultasnuevoweb@csi.uned.es ÍNDICE 1. INSERTAR TEXTO EN LA PÁGINA... 2 2. INSERTAR UN ARCHIVO

Más detalles

CÓMO CREAR UNA PÁGINA WEB v.1

CÓMO CREAR UNA PÁGINA WEB v.1 CÓMO CREAR UNA PÁGINA WEB v.1 Índice 1 Introducción 1 2 Diseño gráfico 1 3 El lenguaje HTML 1 4 Alojamiento y publicación 2 5 Promoción 5 1 Introducción 2 Diseño gráfico Una página web es un espacio virtual

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

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

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

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

Web. Web Diapositiva 1. Febrero 2010

Web. Web Diapositiva 1. Febrero 2010 Web Servicio WorldWideWeb Historia de la Web Cómo funciona? URLs Dominios Tipos de Dominio Hipertexto e Hipervínculos Sitios Web y Páginas de Inicio Cómo identificar los hipervínculos? Navegador Web Internet

Más detalles

MANUAL DE USUARIO CMS- PLONE www.trabajo.gob.hn

MANUAL DE USUARIO CMS- PLONE www.trabajo.gob.hn MANUAL DE USUARIO CMS- PLONE www.trabajo.gob.hn Tegucigalpa M. D. C., Junio de 2009 Que es un CMS Un sistema de administración de contenido (CMS por sus siglas en ingles) es un programa para organizar

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

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

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

1.- MENU DE CONTROL O MENU VENTANA: permite cerrar la ventana cambiarla de tamaño y pasar a otra ventana

1.- MENU DE CONTROL O MENU VENTANA: permite cerrar la ventana cambiarla de tamaño y pasar a otra ventana EXCEL PRÓLOGO Microsoft Excel es una hoja de cálculo de gran capacidad y fácil uso. Excel no solo es una hoja de calculo, sino también tiene capacidad para diseñar bases de datos (listas) de forma totalmente

Más detalles

Crear un servidor Web en IIS

Crear un servidor Web en IIS Crear un servidor Web en IIS Qué es un servidor web? Un servidor web es un programa que se ejecuta continuamente en un computador, manteniéndose a la espera de peticiones de ejecución que le hará un cliente

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

Sistema de Gestión Portuaria Sistema de Gestión Portuaria Uso General del Sistema

Sistema de Gestión Portuaria Sistema de Gestión Portuaria Uso General del Sistema Sistema de Gestión Portuaria Uso General del Sistema Uso General del Sistema Página 1 de 21 Contenido Contenido... 2 1.Ingreso al Sistema... 3 2.Uso del Menú... 6 3.Visualizar Novedades del Sistema...

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

Operación de Microsoft Excel

Operación de Microsoft Excel Representación gráfica de datos Generalidades Excel puede crear gráficos a partir de datos previamente seleccionados en una hoja de cálculo. El usuario puede incrustar un gráfico en una hoja de cálculo,

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

Para crear una lista como la anterior, primero escribe la información, y después selecciona el texto y aplícale el formato de viñetas.

Para crear una lista como la anterior, primero escribe la información, y después selecciona el texto y aplícale el formato de viñetas. Módulo 3 Herramientas de Cómputo Listas, tabulaciones, columnas y cuadros de texto Listas En muchas ocasiones es necesario que enumeres diferentes elementos en tus documentos. Word no sólo reconoce números

Más detalles

Tutorial 2: Creación de páginas web con Compozer

Tutorial 2: Creación de páginas web con Compozer Tutorial 2: Creación de páginas web con Compozer Nota: el propósito del curso no es aprender a elaborar páginas web complejas. Por eso, únicamente vamos a aprender a manejar siete procedimientos: Crear

Más detalles

Unidad 1. Introducción a HTML (I)

Unidad 1. Introducción a HTML (I) Unidad 1. Introducción a HTML (I) A lo largo de este tema vamos a conocer los conceptos básicos sobre HTML, y cómo se utiliza para crear páginas web. Qué es HTML El HTML (Hyper Text Markup Language) es

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

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

Indice Dominio y Hosting... 1 Dominio y Hosting fácil de entender con una imagen... 3 Cómo funciona el dominio y hosting?... 4 Términos más usados en

Indice Dominio y Hosting... 1 Dominio y Hosting fácil de entender con una imagen... 3 Cómo funciona el dominio y hosting?... 4 Términos más usados en Dominio y Hosting Indice Dominio y Hosting... 1 Dominio y Hosting fácil de entender con una imagen... 3 Cómo funciona el dominio y hosting?... 4 Términos más usados en el internet... 5 http: hyper text

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

MANUAL DE USUARIO COOPERATIVAS

MANUAL DE USUARIO COOPERATIVAS MANUAL DE USUARIO COOPERATIVAS TABLA DE CONTENIDO 1 INTRODUCCIÓN... 3 2 INGRESO AL SISTEMA... 4 2.1. PANTALLA Y RUTA DE ACCESO...4 2.2. REGISTRO DE USUARIOS...5 2.3. CAMBIAR CONTRASEÑA...9 2.4. RECORDAR

Más detalles

Manual de uso: Editor Web del CMS

Manual de uso: Editor Web del CMS Manual de uso: Editor Web del CMS Este manual sirve de apoyo para aquellas personas que usen el CMS y requieran editar textos dentro del mismo. Índice: 1. Cómo copiar texto desde Word? 2. Cómo resaltar

Más detalles

Introducción a la Interacción Humano-Computadora

Introducción a la Interacción Humano-Computadora Introducción a la Interacción Humano-Computadora Tarea 1. Análisis de la página http://mixtli.utm.mx/~ingcomp/ Consuelo Jaqueline Estrada Bautista Maestría en Medios Interactivos Universidad Tecnológica

Más detalles

OPERACIONES BASICAS. 1. Menú. 2. Barra de Herramientas. 3. Área de trabajo. 3.1 Operaciones Básicas. Revisión 3.0

OPERACIONES BASICAS. 1. Menú. 2. Barra de Herramientas. 3. Área de trabajo. 3.1 Operaciones Básicas. Revisión 3.0 OPERACIONES BASICAS Para iniciar el software EDC IDSE V 3.00 lo primero que debemos hacer es abrir el programa en el menú Inicio de Windows, Programas, EDCIDSE y luego EDCIDSE 3.0 Cuando inicia el EDC

Más detalles

13.2 WORLD WIDE WEB (www)

13.2 WORLD WIDE WEB (www) 13.2 WORLD WIDE WEB (www) INTRODUCCIÓN World Wide Web o simplemente web se puede traducir como la telaraña mundial, haciendo referencia al hecho de que existen multitud de servidores web distribuidos por

Más detalles

MANUAL EASYCHAIR. https://www.easychair.org/account/signin.cgi?conf=cnicc2013

MANUAL EASYCHAIR. https://www.easychair.org/account/signin.cgi?conf=cnicc2013 MANUAL EASYCHAIR La URL para enviar su artículo al congreso es: https://www.easychair.org/account/signin.cgi?conf=cnicc2013 Donde aparece la siguiente pantalla: En este punto hay dos opciones: A) Teclear

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

Manual de Microsoft Power Point 2007 Parte 2 Universidad Politécnica de San Luis Potosí

Manual de Microsoft Power Point 2007 Parte 2 Universidad Politécnica de San Luis Potosí Contenido: Manual de Microsoft Power Point 2007 Parte 2 1. Insertar y dar formato a los cuadros de texto.... 2 2. Insertar cuadros de texto.... 2 3. Estilos de forma - Contornos y colores.... 3 4. Estilos

Más detalles

Plataforma e-ducativa Aragonesa. Manual de Administración. Bitácora

Plataforma e-ducativa Aragonesa. Manual de Administración. Bitácora Plataforma e-ducativa Aragonesa Manual de Administración Bitácora ÍNDICE Acceso a la administración de la Bitácora...3 Interfaz Gráfica...3 Publicaciones...4 Cómo Agregar una Publicación...4 Cómo Modificar

Más detalles

TEMA 4: EMPEZANDO A NAVEGAR ESCUELA UNIVERSITARIA DE INFORMÁTICA. Raúl Martín Martín

TEMA 4: EMPEZANDO A NAVEGAR ESCUELA UNIVERSITARIA DE INFORMÁTICA. Raúl Martín Martín TEMA 4: EMPEZANDO A ESCUELA UNIVERSITARIA DE INFORMÁTICA NAVEGAR Raúl Martín Martín SERVICIOS DE INTERNET SERVICIOS DE INTERNET Las posibilidades que ofrece Internet se denominan servicios. Hoy en día,

Más detalles

Host. En este texto, entenderemos por host toda máquina - léase computadora. Cuenta. Una cuenta, en general, es un espacio de memoria y de disco que

Host. En este texto, entenderemos por host toda máquina - léase computadora. Cuenta. Una cuenta, en general, es un espacio de memoria y de disco que CONCEPTOS BASICOS. Usuario. Un usuario es toda persona que utilice una computadora. Host. En este texto, entenderemos por host toda máquina - léase computadora - conectada a InterNet. También se les llaman

Más detalles

OpenOffice.org Calc MANUAL CALC 1.INTRODUCCIÓN... 2 2. ENTORNO... 3 1.1 BARRAS DE MENÚ... 3 1.2 PERSONALIZACIÓN DE BARRAS... 4

OpenOffice.org Calc MANUAL CALC 1.INTRODUCCIÓN... 2 2. ENTORNO... 3 1.1 BARRAS DE MENÚ... 3 1.2 PERSONALIZACIÓN DE BARRAS... 4 MANUAL CALC Índice de contenido 1.INTRODUCCIÓN... 2 2. ENTORNO... 3 1.1 BARRAS DE MENÚ... 3 1.2 PERSONALIZACIÓN DE BARRAS... 4 3. MANEJO DE DOCUMENTOS... 5 2.1 ABRIR DOCUMENTOS... 5 2.2 GUARDAR DOCUMENTOS

Más detalles

PREPARATORIA DIURNA DE CUAUTLA

PREPARATORIA DIURNA DE CUAUTLA PREPARATORIA DIURNA DE CUAUTLA Taller de computación II Profr. ING. AARON TABOADA LOMEZ Tecnologías de la Información y Comunicación (TIC) Son aquellas herramientas computacionales que procesan, almacenan,

Más detalles

Reflexión. Inicio. Contenido

Reflexión. Inicio. Contenido Exploradores de Internet Navegador WEb Reflexión "Una máquina puede hacer el trabajo de 50 hombres corrientes. Pero no existe ninguna máquina que pueda hacer el trabajo de un hombre extraordinario. Elbert

Más detalles

Manual De Intranet Docentes (versión 1.0)

Manual De Intranet Docentes (versión 1.0) Manual De Intranet Docentes (versión 1.0) Contenido: 1. Acceso 2. Descripción de opciones del modulo. 3. Consultas de notas alumno. 4. Cursos a Dictar 5. Horario de Cursos 6. Listado para Evaluación 7.

Más detalles

Módulo 3 CREANDO MI SITIO WEB. Centro Zonal Sur

Módulo 3 CREANDO MI SITIO WEB. Centro Zonal Sur Módulo 3 CREANDO MI SITIO WEB Centro Zonal Sur 53 3.1 Sitios Web utilizando Word Cree una carpeta con su nombre en el escritorio de Windows. Para ello siga los pasos indicados: a) Botón derecho del mouse

Más detalles

Lectura No. 3. Contextualización. Nombre: Página web DISEÑO DIGITAL 1. Para qué te sirve saber elaborar una página web?

Lectura No. 3. Contextualización. Nombre: Página web DISEÑO DIGITAL 1. Para qué te sirve saber elaborar una página web? Diseño Digital DISEÑO DIGITAL 1 Lectura No. 3 Nombre: Página web Contextualización Para qué te sirve saber elaborar una página web? A través de una página web puedes atraer a una mayor cantidad de clientes

Más detalles

BANCO NACIONAL DE PANAMÁ, BANCO DE DESARROLLO AGROPECUARIO Y BANCO HIPOTECARIO NACIONAL

BANCO NACIONAL DE PANAMÁ, BANCO DE DESARROLLO AGROPECUARIO Y BANCO HIPOTECARIO NACIONAL BANCO NACIONAL DE PANAMÁ, BANCO DE DESARROLLO AGROPECUARIO Y BANCO HIPOTECARIO NACIONAL LICITACION ABREVIADA POR PONDERACIÓN Nº 2010-7-01-0-08-AV-000001 MANUAL DE SEGURIDAD TABLA DE CONTENIDO I. INTRODUCCIÓN

Más detalles

1. Introducción... 3 2. Perfiles de Usuarios... 3 2.1 Definir el primer perfil... 3 3. Añadir perfiles... 6 4. Introducción a Internet... 7 4.1.

1. Introducción... 3 2. Perfiles de Usuarios... 3 2.1 Definir el primer perfil... 3 3. Añadir perfiles... 6 4. Introducción a Internet... 7 4.1. 1. Introducción... 3 2. Perfiles de Usuarios... 3 2.1 Definir el primer perfil... 3 3. Añadir perfiles... 6 4. Introducción a Internet... 7 4.1. World Wide Web... 8 4.2. Las páginas web... 8 4.3.1. Los

Más detalles

Índice. Insertar vínculos a páginas web... 8 Insertar videos... 9 Vínculos a archivos... 9

Índice. Insertar vínculos a páginas web... 8 Insertar videos... 9 Vínculos a archivos... 9 Índice Qué es el administrador de contenidos?... 2 A cuál administrador de contenidos apunta mi comunidad?... 2 Información introductoria a la unidad de aprendizaje... 3 Cómo agregar, editar y eliminar

Más detalles

Tutorial Internet Explorer 5.5

Tutorial Internet Explorer 5.5 Tutorial Internet Explorer 5.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

Más detalles

5.2.1 La Página Principal

5.2.1 La Página Principal 5.2 Las Páginas WEB Una página Web es un documento electrónico escrito en un lenguaje de ordenador llamado HTML, o Hypertext Markup Language (lenguaje de marcación de hipertexto). Como ya hemos dicho,

Más detalles

Te explicamos cómo poner la firma de correo con tu imagen, en los clientes de correo más utilizados:

Te explicamos cómo poner la firma de correo con tu imagen, en los clientes de correo más utilizados: Firmas de correo Te explicamos cómo poner la firma de correo con tu imagen, en los clientes de correo más utilizados: Correo web/webmail(roundcube), Outlook y Thunderbird. También te explicamos, como crear

Más detalles

Accede a su DISCO Virtual del mismo modo como lo Hace a su disco duro, a través de:

Accede a su DISCO Virtual del mismo modo como lo Hace a su disco duro, a través de: Gemelo Backup Online DESKTOP Manual DISCO VIRTUAL Es un Disco que se encuentra en su PC junto a las unidades de discos locales. La información aquí existente es la misma que usted ha respaldado con su

Más detalles

Conciliación bancaria en CheqPAQ Cargado de estado de cuenta

Conciliación bancaria en CheqPAQ Cargado de estado de cuenta Conciliación bancaria en CheqPAQ Cargado de estado de cuenta Introducción Con la finalidad de mantenerte informado respecto a todos los cambios y mejoras de los productos de CONTPAQ i, ponemos a tu disposición

Más detalles

Introducción a la plataforma Moodle Aníbal de la Torre 2006. Plataforma Moodle. Accediendo a los contenidos

Introducción a la plataforma Moodle Aníbal de la Torre 2006. Plataforma Moodle. Accediendo a los contenidos Plataforma Moodle Accediendo a los contenidos Formatos ----------------------------------------------------------------------- 2 Glosarios -----------------------------------------------------------------------

Más detalles

UNIDAD I PROCESADOR DE TEXTOS

UNIDAD I PROCESADOR DE TEXTOS UNIDAD I PROCESADOR DE TEXTOS 1. Entorno de Microsoft Word 2007 Lic. Silvia Mireya Hernández Hermosillo 1.1 INTRODUCCIÓN 1.1.1 Generalidades de Microsoft Word 2007 Microsoft Word 2007 es un procesador

Más detalles

CAPÍTULO I INTRODUCCIÓN

CAPÍTULO I INTRODUCCIÓN CAPÍTULO I INTRODUCCIÓN Una página Web es un documento situado en una red informática al que se accede mediante enlaces de hipertexto, y éste es aquel texto que contiene elementos a partir de los cuales

Más detalles

Prácticas de Word XP 1

Prácticas de Word XP 1 Prácticas de Word XP 1 1. Haciendo clic en el botón derecho del ratón, crea una carpeta en Documentos con vuestros nombres. En ella guardaréis todas las prácticas que se van a realizar. 2. Abre Microsoft

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

Guadalinex Básico Impress

Guadalinex Básico Impress 1 IMPRESS: Editor de Presentaciones Impress es un programa con el que podemos crear diapositivas, transparencias y presentaciones con una variada gama de efectos sin demasiadas complicaciones. Objetivos:

Más detalles

Ejercicio: Creación de una lección en línea: WebQuest

Ejercicio: Creación de una lección en línea: WebQuest Ejercicio: Creación de una lección en línea: WebQuest Una lección en línea le permite al maestro crear materiales educativos que incluyan el uso de recursos confiables en la Web. Estas lecciones son dirigidas

Más detalles

ACREDITACIÓN DE CARRERAS DE INGENIERÍA AGRONÓMICA PRIMERA FASE

ACREDITACIÓN DE CARRERAS DE INGENIERÍA AGRONÓMICA PRIMERA FASE ACREDITACIÓN DE CARRERAS DE INGENIERÍA AGRONÓMICA PRIMERA FASE Pautas de carga específicas para las carreras comprendidas en la Primera Fase del Proceso de Acreditación. Para realizar la carga del formulario

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

COMISIÓN NACIONAL PARA EL AHORRO DE ENERGÍA

COMISIÓN NACIONAL PARA EL AHORRO DE ENERGÍA COMISIÓN NACIONAL PARA EL AHORRO DE ENERGÍA PROGRAMA DE EFICIENCIA ENERGÉTICA SISTEMA DE CONTROLY SEGUIMIENTO DE INDICADORES DEL CONSUMO DE ENERGÍA HERRAMIENTA ELECTRÓNICA DE INDICADORES DEL CONSUMO DE

Más detalles

INSTRUCTIVO CORREOS ELECTRÓNICOS

INSTRUCTIVO CORREOS ELECTRÓNICOS La Secretaría de Educación de Norte de Santander nos presenta un documento de suma utilidad para conocer el manejo de correos electrónicos, compartan esta información con los demás funcionarios de su Secretaría.

Más detalles

CATIE Manual de Administrador

CATIE Manual de Administrador CATIE Manual de Administrador En este manual comprende las instrucciones que debe seguir el administrador para ejecutar las acciones básicas que puede realizar en el panel de administración de la página

Más detalles

3. Número inicial y número final de mensajes mostrados en la página actual.

3. Número inicial y número final de mensajes mostrados en la página actual. Sistema WEBmail El sistema WEBmail permite el acceso rápido y sencillo a su buzón de correo utilizando un navegador de páginas Web. Normalmente es usado como complemento al lector de correo tradicional,

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

Capítulo 1 Documentos HTML5

Capítulo 1 Documentos HTML5 Capítulo 1 Documentos HTML5 1.1 Componentes básicos HTML5 provee básicamente tres características: estructura, estilo y funcionalidad. Nunca fue declarado oficialmente pero, incluso cuando algunas APIs

Más detalles

Guía N 1: Fundamentos básicos(i)

Guía N 1: Fundamentos básicos(i) 1 Guía N 1: Fundamentos básicos(i) Objetivos Generales: Ver una breve descripción de las capacidades más comunes de Excel Objetivos específicos: Descripción de los elementos de un libro: Hojas, iconos,

Más detalles

Manual para el uso del Correo Electrónico Institucional Via Webmail

Manual para el uso del Correo Electrónico Institucional Via Webmail Manual para el uso del Correo Electrónico Institucional Via Webmail Accesando la pagina de webmail DIFSON El primer paso va a ser entrar a la página de internet donde se encuentra el correo de DIFSON.

Más detalles

Guía para la Automatización de Documentos en. Microsoft Word

Guía para la Automatización de Documentos en. Microsoft Word UNIVERSIDAD SAN CARLOS DE GUATEMALA CENTRO UNIVERSITARIO DE SAN MARCOS USAC-CUSAM Guía para la Automatización de Documentos en Microsoft Word ID Y ENSEÑAD A TODOS 2015 PRESENTACIÓN El Instituto de Investigaciones

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 JOOMLA. Antes de empezar a modificar la información debemos introducir una serie de datos para dejar la cuenta preconfigurada.

MANUAL JOOMLA. Antes de empezar a modificar la información debemos introducir una serie de datos para dejar la cuenta preconfigurada. MANUAL JOOMLA Ingresar a : http://www.oceanperu.com CONFIGURACIÓN DE SU CUENTA Antes de empezar a modificar la información debemos introducir una serie de datos para dejar la cuenta preconfigurada. Para

Más detalles

INTRODUCCION. Tema: Protocolo de la Capa de aplicación. FTP HTTP. Autor: Julio Cesar Morejon Rios

INTRODUCCION. Tema: Protocolo de la Capa de aplicación. FTP HTTP. Autor: Julio Cesar Morejon Rios INTRODUCCION Tema: Protocolo de la Capa de aplicación. FTP HTTP Autor: Julio Cesar Morejon Rios Qué es FTP? FTP (File Transfer Protocol) es un protocolo de transferencia de archivos entre sistemas conectados

Más detalles

Sesión No. 4. Contextualización INFORMÁTICA 1. Nombre: Procesador de Texto

Sesión No. 4. Contextualización INFORMÁTICA 1. Nombre: Procesador de Texto INFORMÁTICA INFORMÁTICA 1 Sesión No. 4 Nombre: Procesador de Texto Contextualización La semana anterior revisamos los comandos que ofrece Word para el formato del texto, la configuración de la página,

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

DOCUMENTACIÓN TÉCNICA

DOCUMENTACIÓN TÉCNICA DOCUMENTACIÓN TÉCNICA DOCUMENTACIÓN TÉCNICA 1 Sesión No. 11 Nombre: Los formatos de los documentos Contextualización Una vez que se tienen presentes los conceptos básicos de la documentación técnica y

Más detalles

Introducción a Internet

Introducción a Internet Introducción a Internet Localización y acceso a la informacion Instituto de Ciencias de la Educación Jesús Tramullas Dpto. CC. Documentación http://tramullas.com/lai Historia de Internet Inicio proyecto

Más detalles

CONSEJOS GENERALES PARA EL DISEÑO DE PAGINAS WEB. Autor: Ing. Ester Regalado Miranda. [Reglas para estructurar y diseñar páginas WEB]

CONSEJOS GENERALES PARA EL DISEÑO DE PAGINAS WEB. Autor: Ing. Ester Regalado Miranda. [Reglas para estructurar y diseñar páginas WEB] CONSEJOS GENERALES PARA EL DISEÑO DE PAGINAS WEB Autor: Ing. Ester Regalado Miranda [Reglas para estructurar y diseñar páginas WEB] Pasos a seguir para elaborar una página WEB La realización y creación

Más detalles