1 / 21

Especialización en Programación WEB

Especialización en Programación WEB. Ing. Ramón Olmos. World Wide Web (WWW) - Red informática mundial Sistema de distribución de documentos de hipertexto o hipermedios interconectados y accesibles vía Internet. Con un navegador web,

zagiri
Download Presentation

Especialización en Programación WEB

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Especialización en Programación WEB Ing. Ramón Olmos

  2. World Wide Web (WWW) - Red informática mundial Sistema de distribución de documentos de hipertexto o hipermedios interconectados y accesibles vía Internet. Con un navegador web, un usuario visualiza sitios web compuestos de páginas que pueden contener texto, imágenes, vídeos u otros contenidos multimedia, navegando a través de esas páginas usando hiperenlaces. Ing. Ramón Olmos

  3. Domain Name System (Sistema de Nombre de Dominios) Ing. Ramón Olmos

  4. Arquitectura WEB Servidor HTTP HTTP Response Process Internet HTTP Request (URL) HTTP Response HTTP Request HTTP Request HTTP Request HTTP Response HTTP Response HTTP Response Cliente 1 Cliente 4 Cliente 3 Cliente 2 Ing. Ramón Olmos

  5. HTML HyperText Markup Language

  6. Estructura de un documento HTML <HTML> <HEAD>Definiciones de la cabecera</HEAD> <BODY>Instrucciones HTML</BODY> </HTML> HTML BODY HEAD HTML Ing. Ramón Olmos

  7. Identificación del Documento Siguiendo las indicaciones del W3C (consorcio internacional que se ocupa de normalizar el uso del HTML) Doctype debe ser el primer elemento que abra un documento. Esto quiere decir que debería preceder a <HTML>.Se trata de una marca que no necesita cierre y cuya función es facilitar información al servidor web que aloja la página. La información facilita por DOCTYPE se refiere al tipo de documento visualizado además de ser necesaria para la comunicación entre navegador y servidor. DOCTYPE se debe escribir de forma estándar:<!DOCTYPE HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN">Esta línea proporciona algunos datos sobre el documento: • HTML PUBLIC: el documento es público • IETF: el tipo de HTML público está gestionado por la Internet Engineering Task Force • DTD HTML 4.0: la versión de HTML soportada es la 4.0 • EN: el idioma del documento es el inglésEl uso de DOCTYPE no es obligatorio y puede omitirse. Seguramente su uso ayuda al servidor web a interpretar correctamente el documento, pero su ausencia no condiciona la correcta visualización. Ing. Ramón Olmos

  8. Conformación de una Etiqueta HTML Ing. Ramón Olmos

  9. Etiquetas HTML En HTML siempre las etiquetas deben cerrar como en el siguiente ejemplo. <title>My Title</title> Teniendo en cuenta algunas excepciones: Ing. Ramón Olmos

  10. Etiquetas HTML Formateando Texto en HTML H1 H2 H3 H4 H5 H6 Ing. Ramón Olmos

  11. Etiquetas HTML <font color="#00CC00" > Texto de Ejemplo </font> Ing. Ramón Olmos

  12. Etiquetas HTML Podemos forzar al navegador a mostrar un texto tal y como queremos, impidiendo que saltelos espacios en blanco, las tabulaciones y los saltos de línea.Para ello utilizaremos la directiva de texto preformateado <PRE> y </PRE>, de modo que todo el texto que aparece entre estas directivas se muestra tal y como está escrito en el documento HTML. • <PRE>Escrito con espacios Escrito con espacio</PRE> • <font>Escrito con espacios Escrito con espacio</font> PRE font Ing. Ramón Olmos

  13. Etiquetas HTML Lista ordenada y no ordenada en HTML Lista Ordenada <ol> <li value="20">Lista uno</li> <li>Lista 21</li> </ol> Lista No Ordenada <ul> <li>Lista uno</li> <li>Lista 21</li> </ul> Ing. Ramón Olmos

  14. Etiquetas HTML • Enlaces con otras paginas • Los enlaces nos permiten de una manera muy cómoda redirigir al usuario a otra parte, cuando éste pinche en dicho enlace. Podemos hacer que el usuario se vaya a otra url distinta a la que está, o podemos hacer que vaya a otra parte pero dentro del mismo archivo en el que está, dentro de la misma url. • - Ruta Absoluta • <a href="http://www.noticia.com"> Ir a noticias </a> www.noticia.com

  15. Etiquetas HTML • Enlaces con otras paginas (Indice.html) • - Ruta Relativa • <a href="secundaria.html"> Ir a la pagina </a>

  16. Etiquetas HTML • Imágenes en HTML • <html> • <head> • <title>Mi Pagina</title> • </head> • <body> • <img src="http://html.hazunaweb.com/html/imagenes/prueba.jpg" /> • </body> • </html>

  17. Etiquetas HTML • Enlace de Imágenes en HTML • <html> • <head> • <title>Mi Pagina</title> • </head> • <body> • <a href="http://www.google.co.ve"> • <img src="http://html.hazunaweb.com/html/imagenes/prueba.jpg" • alt= " imagen" /> • </a> • </body> • </html>

  18. Etiquetas HTML • Caracteres especiales en HTML

  19. Etiquetas HTML • Entre otras etiquetas.. • <!– Comentario en HTML --> • <center> Permite Centrar el contenido en una pagina • <p> Etiqueta para párrafo • <pre> Texto Preformateado • <font> Fuentes de Texto • <img> Imágenes • <h1><h2><h3><h4><h5><h6> Títulos de Texto • <div> Bloque de contenido • <blockquote> Cita en forma de párrafo • <title> Titulo de la pagina

  20. Atributos HTML • Atributos para Etiquetas HTML • Height Especifica el tamaño de altura • Width Especifica el tamaño de ancho • Href Pagina a referenciar • Value Valor a tomar • Color Color especificado • SizeTamaño de Fuente • Src Establece qué documento se va a cargar inicialmente en el marco. • Align Establece la alineación del texto. • Alt Texto alternativo al momento de no cargar componente.

  21. Practica.. • Ejemplos Prácticos.. • Desarrollar una pagina con un cuatro enlaces.. • Dos enlaces de imágenes y dos de texto. • Los enlaces de texto deben de usar algún carácter especial • Una de las imágenes debe estar centrada en la pagina

More Related