Fundamentos de Programación Entorno Web Mauricio Durán Torres [email_address] [email_address] www.netcode.cl
Qué es Internet Internet  es un conjunto descentralizado de redes de comunicación interconectadas que utilizan la familia de protocolos TCP/IP, garantizando que las redes físicas heterogéneas que la componen funcionen como una red lógica única, de alcance mundial.
Servicios Web Un  servicio web  (en inglés,  Web service ) es un conjunto de protocolos y estándares que sirven para intercambiar datos entre aplicaciones. El principal servicio web ocupado en el mundo es www. (World Wide Web). Soap: Simple Object Access Protocol  XML: Extensible Markup Language Otros Lenguajes para Servicios WEB
Página Web Es un conjunto de instrucciones escritas en Lenguaje básicamente HTML para ser visualizado en Internet por medio de un Browser o Navegador.
HTML HTML , siglas de  HyperText Markup Language  ( Lenguaje de Marcado de Hipertexto ), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes.  (Wikipedia)
Estructura del HTML <HTML> <HEAD> <!-- Comentario de HTML --> <TITLE>TÍTULO PÁGINA WEB </TITLE> </HEAD> <BODY> <!-- ACÁ COMIENZA EL CUERPO DE LO QUE VISUALIZA EL USUARIO --> Mi primera página en HTML </BODY> </HTML>
Características Se puede escribir sobre cualquier editor de texto, ejemplo: notepad.exe (Windows) Vim (Linux) El HTML no es Case Sensitive, es decir no le afecta si su código está en mayúscula o minúscula. HTML es fácil de aprender Las etiquetas HTML se definen por corchetes trinagulaes “<  >” El Final de cada Etiqueta se cierra con un Slach ( / ) <html> </html>
Etiquetas Las Etiquetas en HTML son Definidas por el lenguaje y usadas por el desarrollador, dependiendo del uso y objetivo que quiere dar. Ejemplo: Texto en Negrita <b> Mi nombre es </b>
Algunas Etiquetas Usadas <body>: El contenido de neustro sitio web <span>:  Permite agrupar varios elementos en línea seguidos dentro de un mismo bloque (por ejemplo, varias palabras seguidas en un párrafo), para después darles formato con la hoja de estilo.  <a>:  Inserta vínculos o marcadores  <address>:  Provee información de contacto  <applet>:  Inserta un applet (scripts)  <area />:  Define sectores para mapas de imagen  <bgsound />: Inserta musica de Fondo al sitio web <blockquote>:  Citar párrafos  <button>:  Crea un botón  <font>:  Establece el estilo de fuente  <form>: Permite crear formularios <frame />:  Inserta un marco  <iframe>:  Inserta un marco dentro del documento  <caption>:  Establece un título para una tabla  <div>:  Define un bloque de contenido  <img />: Permite insertar imagen <input />: Define un elemento de Formulario <p>:  Define un párrafo <br>: Fuerza un quiebre de línea.
Ejercicios Prácticos Crear 1 pagina web con los siguientes elementos. Titulo página web: “Mi primera Página” Titulo Documento: “Hola, es mi primera web”  (Verdana, 16px, bold, color: azul, centrado) Imagen en el centro de 2 pixeles de borde
Ejercicios Prácticos Crear una página web que contenga el siguiente formato de tablas. (3 filas y 3 columnas) (2 cubos o celdas de la primera columna fondo amarillo) En la celda central, colocar el texto: Hola En la última celda de la ultima columna colocar el texto. Esto es una Tabla Es una Tabla Hola
Ejercicios Prácticos Creación de un formulario web:
Características Nombre del Formulario: ForEjemplo Nombre Usuario  - Email: Input Text Sexo: Radio Button (Hombre- Mujer) Interés: Checkbox (Informática - Programación) Ciudad: Select, cuyos valores son: -Seleccione-, Osorno, Puerto Montt, Purranque, Rio Bueno, Rio Negro, Ancud Boton Enviar Información : Submit

Html

  • 1.
    Fundamentos de ProgramaciónEntorno Web Mauricio Durán Torres [email_address] [email_address] www.netcode.cl
  • 2.
    Qué es InternetInternet es un conjunto descentralizado de redes de comunicación interconectadas que utilizan la familia de protocolos TCP/IP, garantizando que las redes físicas heterogéneas que la componen funcionen como una red lógica única, de alcance mundial.
  • 3.
    Servicios Web Un servicio web (en inglés, Web service ) es un conjunto de protocolos y estándares que sirven para intercambiar datos entre aplicaciones. El principal servicio web ocupado en el mundo es www. (World Wide Web). Soap: Simple Object Access Protocol XML: Extensible Markup Language Otros Lenguajes para Servicios WEB
  • 4.
    Página Web Esun conjunto de instrucciones escritas en Lenguaje básicamente HTML para ser visualizado en Internet por medio de un Browser o Navegador.
  • 5.
    HTML HTML ,siglas de HyperText Markup Language ( Lenguaje de Marcado de Hipertexto ), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. (Wikipedia)
  • 6.
    Estructura del HTML<HTML> <HEAD> <!-- Comentario de HTML --> <TITLE>TÍTULO PÁGINA WEB </TITLE> </HEAD> <BODY> <!-- ACÁ COMIENZA EL CUERPO DE LO QUE VISUALIZA EL USUARIO --> Mi primera página en HTML </BODY> </HTML>
  • 7.
    Características Se puedeescribir sobre cualquier editor de texto, ejemplo: notepad.exe (Windows) Vim (Linux) El HTML no es Case Sensitive, es decir no le afecta si su código está en mayúscula o minúscula. HTML es fácil de aprender Las etiquetas HTML se definen por corchetes trinagulaes “< >” El Final de cada Etiqueta se cierra con un Slach ( / ) <html> </html>
  • 8.
    Etiquetas Las Etiquetasen HTML son Definidas por el lenguaje y usadas por el desarrollador, dependiendo del uso y objetivo que quiere dar. Ejemplo: Texto en Negrita <b> Mi nombre es </b>
  • 9.
    Algunas Etiquetas Usadas<body>: El contenido de neustro sitio web <span>: Permite agrupar varios elementos en línea seguidos dentro de un mismo bloque (por ejemplo, varias palabras seguidas en un párrafo), para después darles formato con la hoja de estilo. <a>: Inserta vínculos o marcadores <address>: Provee información de contacto <applet>: Inserta un applet (scripts) <area />: Define sectores para mapas de imagen <bgsound />: Inserta musica de Fondo al sitio web <blockquote>: Citar párrafos <button>: Crea un botón <font>: Establece el estilo de fuente <form>: Permite crear formularios <frame />: Inserta un marco <iframe>: Inserta un marco dentro del documento <caption>: Establece un título para una tabla <div>: Define un bloque de contenido <img />: Permite insertar imagen <input />: Define un elemento de Formulario <p>: Define un párrafo <br>: Fuerza un quiebre de línea.
  • 10.
    Ejercicios Prácticos Crear1 pagina web con los siguientes elementos. Titulo página web: “Mi primera Página” Titulo Documento: “Hola, es mi primera web” (Verdana, 16px, bold, color: azul, centrado) Imagen en el centro de 2 pixeles de borde
  • 11.
    Ejercicios Prácticos Crearuna página web que contenga el siguiente formato de tablas. (3 filas y 3 columnas) (2 cubos o celdas de la primera columna fondo amarillo) En la celda central, colocar el texto: Hola En la última celda de la ultima columna colocar el texto. Esto es una Tabla Es una Tabla Hola
  • 12.
    Ejercicios Prácticos Creaciónde un formulario web:
  • 13.
    Características Nombre delFormulario: ForEjemplo Nombre Usuario - Email: Input Text Sexo: Radio Button (Hombre- Mujer) Interés: Checkbox (Informática - Programación) Ciudad: Select, cuyos valores son: -Seleccione-, Osorno, Puerto Montt, Purranque, Rio Bueno, Rio Negro, Ancud Boton Enviar Información : Submit