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="http://www.ens.uabc.mx">CECUUE </A> <A HREF="http://www.cicese.mx">CICESE</A> 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 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="http://www.uabc.mx"> <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://www.uabc.mx (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: <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= "http://www.uabc.mx"> 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= "http://www.uabc.mx"> Centro de Computo </A> <HR> Si tiene algún comentario o sugerencia acerca de esta página por favor envíalo a <A 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

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

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

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

Objetivos. El alumno conocerá los elementos indispensables para crear una página web. 1. Crear una página web básica utilizando html.

Objetivos. El alumno conocerá los elementos indispensables para crear una página web. 1. Crear una página web básica utilizando html. Objetivos El alumno conocerá los elementos indispensables para crear una página web. Al final de esta práctica el alumno podrá: 1. Crear una página web básica utilizando html. Introducción El lenguaje

Más detalles

MANUAL DE REFERENCIA DE PROGRAMACIÓN HTML

MANUAL DE REFERENCIA DE PROGRAMACIÓN HTML MANUAL DE REFERENCIA DE PROGRAMACIÓN HTML HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con

Más detalles

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

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

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

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

Curso básico de creación de páginas web

Curso básico de creación de páginas web Curso básico de creación de páginas web Programa de formación docente UAM 2005-2006 Miguel Sevilla Callejo Abril 2006 Departamento de Geografía Universidad Autónoma de Madrid Objetivos Desarrollar las

Más detalles

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

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

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

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

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

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

PHP y MySQL. Aplicaciones Web: HTML II (tercera parte) Autor: Johnny Zulca Mamani PHP y MySQL. Aplicaciones Web: HTML II (tercera parte) Autor: Johnny Zulca Mamani 1 Presentación del curso Programación de aplicaciones Web con PHP y MySQL. Ahora continuaremos con el estudio de las páginas

Más detalles

Diseño Web. Sitio Web Conjunto de páginas web relacionadas entre sí.

Diseño Web. Sitio Web Conjunto de páginas web relacionadas entre sí. Internet Es una red de redes de ordenadores, que intercambian información basándose en el protocolo TCP/IP. Existen diversas formas de acceder a Internet: Correo electrónico, FTP, Videoconferencia, y la

Más detalles

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

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

Introducción: páginas web y navegadores

Introducción: páginas web y navegadores IB14 Informática Aplicada a la Construcción Creación de páginas web con HTML Introducción: páginas web y navegadores Una página web, pese a la gran cantidad de colores, imágenes e información que puede

Más detalles

Tema 5: La red de redes: Internet

Tema 5: La red de redes: Internet Tema 5: La red de redes: Internet > Qué es Internet? Todo el mundo habla de Internet: se hace referencia en clase, en revistas de moda, entre amigos... Acceder a una página web, hablar con los amigos a

Más detalles

CURSO DE DISEÑO WEB. También existen otro lenguajes de programación de páginas, combinados con el HTML : PHP, JS, ASP. PL, etc.

CURSO DE DISEÑO WEB. También existen otro lenguajes de programación de páginas, combinados con el HTML : PHP, JS, ASP. PL, etc. CURSO DE DISEÑO WEB Internet El Internet, algunas veces llamado simplemente "La Red", es un sistema mundial de redes de computadoras, un conjunto integrado por las diferentes redes de cada país del mundo,

Más detalles

Algunos de los botones ofrecen las funcionalidades básicas para el trabajo con ficheros propias de cualquier programa editor.

Algunos de los botones ofrecen las funcionalidades básicas para el trabajo con ficheros propias de cualquier programa editor. Curso de creación de documentos Web Servicio de Comunicaciones Uso del Netscape Composer para la creación de documentos HTML 1.- Creación de un documento. El Netscape Communicator incluye un programa,

Más detalles

TEMA 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

Nociones basicas de HTML

Nociones basicas de HTML Nociones basicas de HTML Para comprender lo que veremos mas adelante es necesario tener conocimientos basicos de informatica e Internet en entorno Windows. Para hacer los ejercicios basta con un Navegador

Más detalles

Cursito 25: Curso de HTML

Cursito 25: Curso de HTML 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

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

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

Más detalles

Prof. Luis Miguel Oliveros - Computación 3er Año

Prof. Luis Miguel Oliveros - Computación 3er Año NVU / KompoZer NVU es un editor de páginas web libre y gratuito desarrollado bajo la modalidad Open Source. Esta alternativa gratuita trae nuevas herramientas para facilitar el trabajo, convirtiéndola

Más detalles

Estas líneas son permanentes en una página Web. Siempre van a estar presentes no importando qué tan corta o tan larga sea la página y el contenido.

Estas líneas son permanentes en una página Web. Siempre van a estar presentes no importando qué tan corta o tan larga sea la página y el contenido. Estructura de una página Web Toda página Web tiene una estructura que permite al programador saber de antemano qué tipo de información necesita introducir. Esto ayuda a que la página que diseña sea claramente

Más detalles

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

Curso de HTML 4.0. 1. Introducción al curso. Requisitos. Agradecimientos

Curso de HTML 4.0. 1. Introducción al curso. Requisitos. Agradecimientos Curso de HTML 4.0 1. Introducción al curso Este curso ha nacido con la intención de complementar a aquellos interesados en crear y diseñar páginas en Internet. Así podrás comprender mejor de donde surge

Más detalles

INFORMÁTICA Tema: PÁGINA WEB

INFORMÁTICA Tema: PÁGINA WEB INFORMÁTICA Tema: PÁGINA WEB Mucha información se guarda en nuestra computadora, si recorremos las carpetas de nuestro disco duro encontraremos multitud de archivos o ficheros de distinta naturaleza que

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

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

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

Antes de comenzar un sitio. Empezar un sitio web

Antes de comenzar un sitio. Empezar un sitio web Antes de comenzar un sitio Es muy recomendable realizar la siguiente actividad, de evaluación de páginas web, para tener ideas y recursos. http://www.uamvirtual.es/mod/assignment/view.php?id=3228 Empezar

Más detalles

INTRODUCCIÓN AL WEB. Pag. 1 de 10

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

Más detalles

HTML. guía rápida de referencia. Autor: Jorge Sánchez (www.jorgesanchez.net) año 2003

HTML. guía rápida de referencia. Autor: Jorge Sánchez (www.jorgesanchez.net) año 2003 HTML guía rápida de referencia Autor: Jorge Sánchez (www.jorgesanchez.net) año 2003 Basado en la normativa sobre HTML4 disponible en: http://www.w3.org/tr/html4/ Jorge Sánchez 2003 índice introducción...

Más detalles

CUADERNILLO DE PRÁCTICAS

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

Más detalles

Optimización del uso de internet en la gestión cultural

Optimización del uso de internet en la gestión cultural NUEVAS TECNOLOGÍAS APLICADAS A LA GESTIÓN CULTURAL Optimización del uso de internet en la gestión cultural Javier Leiva Aguilera www.javierleiva.info Madrid, 12-14 de noviembre de 2007 Fundamentos de diseño

Más detalles

CREACION DE PÁGINAS WEB

CREACION DE PÁGINAS WEB PRESENTA: CREACION DE PÁGINAS WEB OBJETIVO Conocer la aplicación de los paquetes mas utilizados para la implementación t diseño de una pagina Web. DIRIGIDO A: Estudiantes de informática, Ofimática y Personas

Más detalles

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

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

Más detalles

Páginas Web. Navegadores. Creación de Htmls.

Páginas Web. Navegadores. Creación de Htmls. Colegio Bosque Del Plata Tecnología de la Información y las Comunicaciones UNIDAD 1 Páginas Web E-mail: garcia.fernando.j@gmail.com Profesor: Fernando J. Garcia Ingeniero en Sistemas de Información Unidad

Más detalles

Unidad II: Introducción a HTML

Unidad II: Introducción a HTML Unidad II: Introducción a HTML Introducción En los recientes años, la World Wide Web se ha convertido en el principal sistema de distribución de información sobre Internet. Su crecimiento y popularidad

Más detalles

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

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

Más detalles

World Wide Web: toda la Internet en un solo "documento"

World Wide Web: toda la Internet en un solo documento World Wide Web: toda la Internet en un solo "documento" Pedro Hípola Hípola, Pedro (1994). "World Wide Web: toda la Internet en un solo 'documento'.information World en Español. Oxford: Learned Information,

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

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

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

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

Más detalles

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

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

Taller de Paginas Web

Taller de Paginas Web Taller de Paginas Web Las páginas web son documentos de texto que se comparten en la red. La mecánica es la siguiente : Un ordenador de usuario, que llamarermos cliente, hace una petición a una direccion

Más detalles

Mini Glosario Internet

Mini Glosario Internet Mini Glosario Internet Ancho de banda (Bandwidth) Es la capacidad de un sistema para transferir datos a través de una conexión de red, medida en valores de bits por segundo (kilobits, megabits, etc.);

Más detalles

Tema 3. Conceptos Básicos de HTML. ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda!

Tema 3. Conceptos Básicos de HTML. ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda! Tema 3. Conceptos Básicos de HTML ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda! Lenguajes de descripción! Grupo de lenguajes que describen cómo representar

Más detalles

EDICIÓN WEB CÓDIGO HTML

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

Más detalles

DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA

DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA Nombre del Módulo: DISEÑO DE PAGINAS WEB CON HTML Código: CSTI0085 total: 3 Horas Objetivo General: Construir páginas Web en base

Más detalles

>> Instalación y Configuración de un Servidor WEB. >> HTML & PHP

>> Instalación y Configuración de un Servidor WEB. >> HTML & PHP >> Instalación y Configuración de un Servidor WEB. >> HTML & PHP Nicolás Álvarez S. nalvarezs@vtr.net Juan Monsalve Z. jmonsalve@elo.utfsm.cl Tópicos a tratar Qué es un servidor Web? Dónde puedo instalar

Más detalles

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION

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

Más detalles

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

Introducción al desarrollo WEB. Tecnologías Web

Introducción al desarrollo WEB. Tecnologías Web Introducción al desarrollo WEB Tecnologías Web Un poco de Historia World Wide Web (WWW) Inventada por Tim Berners Lee en 1989!!! Mientras trabajaba European Organization for Nuclear Research (CERN) http://www.w3.org/consortium/history.html

Más detalles

980706 Universidad de Navarra. Introducción a Netscape Communicator Versión 4.04 y 4.5. cti. Centro de Tecnología Informática

980706 Universidad de Navarra. Introducción a Netscape Communicator Versión 4.04 y 4.5. cti. Centro de Tecnología Informática 980706 Universidad de Navarra Introducción a Netscape Communicator Versión 4.04 y 4.5 cti Centro de Tecnología Informática TABLA DE CONTENIDOS 1. Introducción... 1 2. Perfiles de Usuarios... 2 2.1. Definir

Más detalles

Programación de aplicaciones WEB

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

Más detalles

Cursito 26: Curso de HTML Parte 2

Cursito 26: Curso de HTML Parte 2 Por Roxana Bassi rox@roxanabassi.com.ar / http://www.roxanabassi.com.ar Publicado en la sección los cuadernos de Internet World en la revista Internet World Latinoamérica en el período 1995-1999 Cursito

Más detalles

IB14 Informática Aplicada a la Construcción

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

Más detalles

MÓDULO 1: FrontPage 2003 Parte 1ª

MÓDULO 1: FrontPage 2003 Parte 1ª MÓDULO 1: FrontPage 2003 Parte 1ª TEMA 1. Introducción a la Web Internet y el World Wide Web Hipertexto HTML Servidores, Clientes y Redes Protocolos de Comunicación Direcciones, Dominios y Accesos TEMA

Más detalles

UNIDAD DIDÁCTICA. Integración de documentos profesionales en la Web. Objetivos. www.adams.es

UNIDAD DIDÁCTICA. Integración de documentos profesionales en la Web. Objetivos. www.adams.es UNIDAD DIDÁCTICA 3 Integración de documentos profesionales en la Web Objetivos Mantener actualizadas páginas Web de acuerdo con el diseño y con los contenidos planificados, organizándolos a través del

Más detalles

DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA

DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA Nombre del Módulo: DISEÑO DE PAGINAS WEB CON HTML Código: CSTI0085 total: 63 Horas Objetivo General: Construir páginas Web a partir

Más detalles

Manual de publicación de contenido y actualización de sitios web

Manual de publicación de contenido y actualización de sitios web Manual de publicación de contenido y actualización de sitios web Basados en sistemas Wordpress El presente manual le presentará los distintos pasos para publicar contenidos a través de páginas y editar

Más detalles

UNIDAD 4 HIPERENLACES

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

Más detalles

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

SERVICE DEFINITION MANUAL DEL ADMINISTRADOR

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

Más detalles

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

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

Más detalles

Qué es HTML? Páginas WEB. Etiquetas

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

Más detalles

1. Tutorial Página Personal... 2

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

Más detalles

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

Manual HTML Básico MANUAL HTML BÁSICO. Federico Martín Maglio

Manual HTML Básico MANUAL HTML BÁSICO. Federico Martín Maglio 1 MANUAL HTML BÁSICO Federico Martín Maglio Para construir una página con el fin de publicarla en Internet, debemos aprender el lenguaje HTML (HyperText Markup Language). Se dirá que es muy fácil construir

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

Curso Diseño Web con Software libre, VNU

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

Más detalles

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

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

Más detalles

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

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

Más detalles

Päginas web ::: Introducción Diseño de materiales multimedia. Web 2.0. 1.1 Introducción

Päginas web ::: Introducción Diseño de materiales multimedia. Web 2.0. 1.1 Introducción 1. Páginas web 9 1.1 Introducción 10 1.1 Introducción 1.1.1 Conceptos básicos A modo de introducción y con el propósito de unificar terminología a continuación se describe el significado de algunos términos

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

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

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

HTML Guía de trabajo para 3º ESO

HTML Guía de trabajo para 3º ESO HTML Guía de trabajo para 3º ESO Página 2 Índice 1. Qué es HTML?... 3 2. Cómo son las páginas Web?... 3 3. Qué es un sitio Web?... 3 4. Práctica 1. Crear un sitio web local... 4 5. Primera página HTML...

Más detalles

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

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

Más detalles

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

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

Más detalles

7. Desarrollo de aplicaciones multimedia.

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

Más detalles

Taller Básico de Creación y Publicación de Páginas Web para la Web del Profesor. Web: http://webdelprofesor.ula.ve. E-mail: webdelprofesor@ula.

Taller Básico de Creación y Publicación de Páginas Web para la Web del Profesor. Web: http://webdelprofesor.ula.ve. E-mail: webdelprofesor@ula. Taller Básico de Creación y Publicación de Páginas Web para la Web del Profesor Web: http://webdelprofesor.ula.ve E-mail: webdelprofesor@ula.ve Centro de Teleinformación de la Universidad de Los Andes

Más detalles

Área de Desarrollo Programa Agenda de Conectividad Estrategia de Gobierno en línea. República de Colombia - Derechos Reservados

Área de Desarrollo Programa Agenda de Conectividad Estrategia de Gobierno en línea. República de Colombia - Derechos Reservados MANUAL DEL USO DE LAS PLANTILLAS PARA MANTENER EL ESTILO GOBIERNO EN LINEA TERRITORIAL- GELT FASE TRANSACCIONAL Área de Desarrollo Programa Agenda de Conectividad Estrategia de Gobierno en línea República

Más detalles

Páginas Web Barcelona

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

Más detalles

construcción de sitios web

construcción de sitios web MANUAL PARA LA UTILIZANDO N ETSCAPE C OMPOSER 4.X MANUAL DE ESTUDIANTES ITrain es una colección de materiales de capacitación en el uso de Internet para capacitadores y estudiantes. Los materiales ofrecen

Más detalles

Creación de páginas Web

Creación de páginas Web Creación de páginas Web D. José Ramón Balsas Almagro jrbalsas@ujaen.es D. Juan Ruiz de Miras demiras@ujaen.es D. Víctor Manuel Rivas Santos vrivas@ujaen.es Departamento de Informática Universidad de Jaén

Más detalles

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

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

Más detalles

CREACIÓN DE PÁGINAS WEB CON NVU

CREACIÓN DE PÁGINAS WEB CON NVU CREACIÓN DE PÁGINAS WEB CON NVU 1. Introducción... 1 2. Instalación... 2 3. Antes de comenzar una página web... 2 4. Editar páginas web con NVU... 5 5. Definir el diseño de nuestro sitio... 6 5.1. Plantillas...

Más detalles

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

EDITOR DE PÁGINAS WEB KOMPOZER (4º ESO)

EDITOR DE PÁGINAS WEB KOMPOZER (4º ESO) EDITOR DE PÁGINAS WEB KOMPOZER (4º ESO) 1) INSTALACIÓN 2) CREAR LA ESTRUCTURA DE CARPETAS 3) ABRIR EL PROGRAMA 4) GUARDAR LA PÁGINA WEB 5) CERRAR EL PROGRAMA 6) ABRIR EL ARCHIVO HTML DESDE EL KOMPOZER

Más detalles

Curso de capacitación en Moodle

Curso de capacitación en Moodle Curso de capacitación en Moodle Aveleyra, Ema Barbiric, Doris Chiabrando, Laura Corach, Julián Dadamia, Danilo Dominguez, Cristina Ferrini, Adrián Gimenez, Claudia Jiménez Rey, Elizabeth Pérez, Fernando

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