La descarga está en progreso. Por favor, espere

La descarga está en progreso. Por favor, espere

Preparado por: Prof. Henry F. Bruckman Vargas Revisión: noviembre 2010.

Presentaciones similares


Presentación del tema: "Preparado por: Prof. Henry F. Bruckman Vargas Revisión: noviembre 2010."— Transcripción de la presentación:

1 Preparado por: Prof. Henry F. Bruckman Vargas Revisión: noviembre 2010

2 ¿Qué es el World Wide Web? Es una telaraña de documentos accesados mediante el Internet. Estos documentos están escritos en Lenguaje Marcado de Híper Texto (HTML), y pueden contener texto, imágenes, videos, y otros multimedios. Los documentos están entrelazados unos a otros por medio de enlaces electrónicos o hiperenlaces.

3 Pero, ¿qué es el Internet? Es un sistema global de redes de computadoras interconectadas. Una red mundial de redes conectadas por varias tecnologías (ej., fibra óptica, cables de teléfono, comunicación inalámbrica, módems, enrutadores y satélites).

4 ¿Cómo funciona el Internet? En tu computadora abres un navegador de Web que actuará como un cliente. Escribes la dirección de la página Web que quieres ver en tu navegador. El navegador interpreta la dirección y se conecta a la computadora correspondiente a esa dirección en el Internet que actúa como servidor. El proceso de encontrar un sitio Web es similar a como un cartero encuentra un apartado o un domicilio una vez dada la dirección. Los posibles servicios ofrecidos por un servidor pueden ser: correo-electrónico; telefonía VoIP y videoconferencia; motor de búsqueda; chats y mensajería instantánea; alojamiento, resguardo y transferencia de archivos; bases de datos; conexión remota; P2P; y varios métodos de publicación en línea, entre muchos otros.

5 Localizador Uniforme de Recursos (URL) La dirección escrita en el navegador es también conocida como un localizador uniforme de recursos (URL). Este sirve para encontrar recursos (ej., archivos) en el Internet. Los formatos generales de un URL son los siguientes: protocolo://máquina/ protocolo://máquina/directorio protocolo://máquina/directorio/archivo El formato completo de un URL es el siguiente: A continuación varios ejemplos: https:// .bayamon.inter.edu/exchange ftp://ftp.adobe.com/pub/adobe/

6 La Función del Navegador Web Usando un DNS traduce el nombre de la maquina en el URL a una dirección IP (que es como un número de teléfono). Ej.www.google.com Ej.bc.inter.edu Entabla una conexión con la maquina servidor y se convierte en su cliente. Solicita el recurso indicado por el directorio/archivo en el URL al servidor haciendo uso del protocolo indicado (ej. http, https, ftp, irc, telnet, file, ed2k). Una vez recibe el recurso, el navegador interpreta el contenido y lo muestra de manera gráfica. En el caso de documentos HTML el navegador interpreta el texto recibido y lo muestra como una página Web.

7 ¿Qué es el World Wide Web? Es una red de documentos entrelazados y accesados mediante el Internet. Estos documentos están escritos en Lenguaje Marcado de Híper Texto (HTML), y pueden contener texto, imágenes, videos, y otros multimedios. Los documentos están entrelazados unos a otros por medio de enlaces electrónicos o hiperenlaces.

8 Y, ¿qué es HTML? Es un lenguaje constituido de elementos y sus respectivos atributos. Estos elementos toman la forma de etiquetas (o tags) distinguidas por estar rodeadas por los símbolos. Ej., Los elementos por lo general están definidos entre un par de etiquetas. A estas se les conoce como etiqueta de apertura o comienzo y etiqueta de clausura o terminado. Las etiquetas de clausura tienen el mismo nombre que sus respectivas etiquetas de comienzo lo único que comienzan con los símbolos y, y Los nombres de las etiquetas no son sensitivos a mayúsculas. Ej., Para generar un documento HTML sólo se necesita un editor de texto.

9 ¡Hola Mundo! Abran un editor de texto (ej., Notepad o Wordpad) en sus computadoras y escriban el siguiente código de HTML. Al terminar guarden el documento con el nombre hola_mundo.html incluyendo las comillas. Hola Mundo! Hola Mundo! Hola Mundo! Hola Mundo!

10 Atributos de Elementos HTML Los atributos son usados para describir y/o modificar un elemento HTML. Los atributos siempre son especificados en la etiqueta de apertura del elemento. Un típico atributo es un par de nombre-valor que toma la forma NOMBRE=valor. Al igual que las etiquetas los atributos no son sensitivos a mayúsculas. (i.e., NOMBRE=valor nombre=valor) Un elemento puede tener cero o varios atributos especificados. Ej. Hay atributos comunes compartidos por todos los elementos HTML. Los más usados son: ID, CLASS, STYLE*, TITLE* Por lo general los atributos son opcionales, pero hay ciertos atributos que son necesarios en ciertos elementos como lo es el atributo HREF en el elemento A. Sin el atributo HREF el elemento A no hace nada. Ej. Wikipedia

11 Insertando Imágenes Abran un editor de texto (ej., Notepad o Wordpad) en sus computadoras y escriban el siguiente código de HTML. Al terminar guarden el documento con el nombre image.html incluyendo las comillas. Image Image

12 Insertando Videos Abran un editor de texto (ej., Notepad o Wordpad) en sus computadoras y escriban el siguiente código de HTML. Al terminar guarden el documento con el nombre video.html incluyendo las comillas. Video El elemento <EMBED> esta prohibido o deshabilitado en tu navegador. Video El elemento <EMBED> esta prohibido o deshabilitado en tu navegador.

13 Insertando Audio Abran un editor de texto (ej., Notepad o Wordpad) en sus computadoras y escriban el siguiente código de HTML. Al terminar guarden el documento con el nombre video.html incluyendo las comillas. Audio Audio

14 Identificador Universal de Recursos (URI) Un URI es una porción de texto que indica la dirección o localización de un recurso dentro de una máquina. Esta dirección puede ser absoluta o relativa. Una dirección absoluta muestra todo el camino desde el principio. Ej. "http://bc.inter.edu/facultad/hbruckman/workshops/HTML/DocumentoA.html"http://bc.inter.edu/facultad/hbruckman/workshops/HTML/DocumentoA.html Una dirección relativa muestra el camino desde la localización actual. Ej. "./DocumentoA.html" Los URIs son usados mayormente por atributos dentro de los elementos de hipertexto. Algunos de estos atributos son: HREF, SRC, ACTION, LONGDESC, USEMAP, DATA, CLASSID, CODEBASE, PROFILE

15 ¿Qué es el World Wide Web? Es una red de documentos entrelazados y accesados mediante el Internet. Estos documentos están escritos en Lenguaje Marcado de Híper Texto (HTML), y pueden contener texto, imágenes, videos, y otros multimedios. Los documentos están entrelazados unos a otros por medio de enlaces electrónicos o hiperenlaces.

16 Creando Hiperenlaces Abre un editor de texto y modifica el hola_mundo.html: Al terminar guarden este documento como hola_mundo2.html incluyendo las comillas.

17 Creando Hiperenlaces (cont.) Abre un editor de texto y crea los siguientes documentos: Documento A Documento A Documento B W3C Documento A Documento A Documento B W3C Documento B Documento B Documento A WDG Documento B Documento B Documento A WDG Al terminar guarden este documento con el nombre DocumentoA.html incluyendo las comillas. Al terminar guarden este documento con el nombre DocumentoB.html incluyendo las comillas.

18 Errores Más Comunes Muchos errores pueden ocurrir en un código HTML. Entre estos errores las causas más comunes son: No emparejar etiquetas. Ej. … Emparejar etiquetas mal. Ej. … No usar comillas para los valores de los atributos. Ej. … No emparejar comillas. Ej. … Emparejar comillas mal. Ej. … Etiquetas mal escritas o no existentes. Ej. … Atributos mal escritos o no existentes. Ej. … Valores ilegales o no definidos para los atributos. Ej. Omisión de atributos necesarios. Ej. Otro tipo de causa común lo es insertar elementos inválidos dentro de otros elementos. Elementos de bloque en elementos integrados. Ej. … Elementos no validos dentro de elementos contenedores. Ej. …

19 Elementos HTML Elementos de Alto Nivel HTML – Comienzo del Documento HTML HEAD – Encabezado del Documento HEAD BODY – Cuerpo del Documento BODY FRAMESET – Varias páginas en una FRAMESET Sub-elementos de BASE – URL Base BASE LINK – Descriptor de Relación LINK META – Metadato META SCRIPT – Script de Cliente SCRIPT STYLE – Hoja de Estilo Integrada STYLE TITLE – Título del Documento TITLE Elementos de Bloque ADDRESS – Información de Contacto ADDRESS BLOCKQUOTE – Bloque de Cita BLOCKQUOTE CENTER – Bloque Centralizado CENTER DIV – Contenedor Genérico DIV H1 – H6 – Secciones y Sub-secciones H1H6 HR – Línea Horizontal HR NOSCRIPT – Contenido Alterno NOSCRIPT P – Párrafo P PRE – Texto Pre-formateado PRE Listas DL – Listado de Definiciones DL DT – Término DT DD – Definición DD LI – Artículo de Lista LI OL – Lista Ordenada OL UL – Lista Sin Orden UL

20 Elementos HTML (cont.) Tablas TABLE – Tabla TABLE CAPTION – Capción CAPTION THEAD – Encabezado de Tabla THEAD TFOOT – Pie de Tabla TFOOT TBODY – Cuerpo de Tabla TBODY TR – Fila de Tabla TR TH – Casilla de Encabezado TH TD – Casilla de Datos TD Formularios FORM – Formulario FORM BUTTON – Botón BUTTON INPUT – Campo de Texto INPUT LABEL – Etiqueta de Campo LABEL SELECT – Seleccionador de Opción SELECT OPTION – Opción de Menú OPTION TEXTAREA – Área de Texto TEXTAREA Elementos Integrados A - Enlace A APPLET – Applet de Java APPLET BR – Divisor de Líneas BR FONT – Cambio de Estilo de Letra FONT IFRAME – Ventana Integrada IFRAME IMG – Imagen Integrada IMG MAP – Imagen Mapa MAP AREA – Región de Mapa AREA OBJECT – Objeto Integrado OBJECT Q – Cita Corta Q SPAN – Contenedor Genérico SPAN SUB – Subíndice SUB SUP – Superíndice SUP

21 Elementos HTML (cont.) Elementos de Frase ABBR - Abreviación ABBR ACRONYM - Acrónimo ACRONYM CITE - Citación CITE CODE – Código CODE EM – Énfasis EM– KBD – Texto a Ser Escrito KBD SAMP – Texto Ejemplo SAMP STRONG – Fuerte Énfasis STRONG VAR – Variable VAR Elementos de Estilo de Letra B – Texto en Negritas B BIG – Texto Agrandado BIG I – Texto en Itálico I S – Texto Tachado S SMALL – Texto Achicado SMALL STRIKE – Texto Tachado STRIKE TT – Texto Mono-espaciado TT U – Texto Subrayado U Sub-Ventanas FRAMESET – Sub-Ventanas FRAMESET FRAME – Sub-Ventana FRAME NOFRAMES – Contenido Alterno a Ventanas NOFRAMES

22 Tipos de Elementos Elementos Estructurales Describen el propósito o estructura semántica del texto contenido entre las etiquetas de apertura y clausura. Ej.,,,, Elementos de Presentación Describen el estilo o la apariencia del texto contenido entre las etiquetas de apertura y clausura. Deprecados en favor de usar elementos semánticos y/o CSS. Ej.,,,, Elementos de Hipertexto Enlazan recursos externos al contenido del documento. Ej.,,,,

23 Repaso Internet World Wide Web URL Navegador Web HTML Elementos Tipos Atributos URI Errores Comunes

24 Recursos del Taller Este documento y los diferentes materiales usados en este taller pueden ser encontrados en: Refiérase a esta pagina Web para conseguir más información acerca del autor y otros talleres.

25 Referencias W3Schools Un tremendo sitio Web lleno de referencias y tutoriales sobre las diferentes tecnologías del World Wide Web. World Wide Web Consortium (W3C) Propone, mantiene y recomienda los estándares y especificaciones para lenguajes, protocolos y tecnologías del World Wide Web. Ej. AJAX, CSS, DOM, HTML, HTTP, PNG, SVG, URI, URL, XHTML, XML, MathML, Mobile Web Web Design Group (WDG) Promueve la creación de páginas Web que sean compatibles con cualquier navegador, cualquier resolución y que sean creativas e informativas. Ofrece varias referencias y tutoriales para varias tecnologías como HTML y CSS. Wikipedia (en Español) Tiene varios artículos donde se explican a cabalidad diferentes elementos del World Wide Web.


Descargar ppt "Preparado por: Prof. Henry F. Bruckman Vargas Revisión: noviembre 2010."

Presentaciones similares


Anuncios Google