Tecnologia Web - HTML

578 views

Published on

Con esta presentación se pretende introducir al estudiante los conocimientos sobre html, css y javascritpt.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
578
On SlideShare
0
From Embeds
0
Number of Embeds
100
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Tecnologia Web - HTML

  1. 1. TECNOLOGIA W EB POR: ERW IN FLORES
  2. 2. CONTENIDO CURSO HTML CSS JAVASCRIPT DOM PHP JQUERY
  3. 3. ESQUEMA
  4. 4. HTM L
  5. 5. QUÉ ES HTML? HTML es el lenguaje para la publicación en WWW. HTML = HyperText Markup Language (lenguaje de marcas de hipertexto) Un documento HTML es un archivo de texto que contiene etiquetas HTML Las etiquetas le indican al visualizador cómo desplegar la página Un archivo HTML debe tener extensión htm o html
  6. 6. ETIQUETAS HTML Etiquetas HTML son palabras claves (nombre etiqueta) rodeadas por corchetes angulares como <html>. Etiquetas HTML generalemente vienen en pares como <b></b>. La etiqueta final se escribe igual que la etiqueta inicial , con una barra diagonal antes del nombre de la etiqueta. <nombreetiqueta>CONTENIDO</nombreetiqueta>
  7. 7. DOCUMENTO HTML DE EJEMPLO <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Herramientas de desarrollo web</title> </head> <body> <h1>Documento de ejemplo</h1> <p>Esto es un parrafo de texto con la palabra <b>negrita</b> más intensa.</p> </body> </html>
  8. 8. VERSIONES DE HTML Version Año HTML 1991 HTML+ 1993 HTML2.0 1995 HTML3.2 1997 HTML4.1 1999 XHTML1.0 2000 HTML5 2012 XHTML5 2013
  9. 9. <!DOCTYPE>DECLARACION El <!DOCTYPE> ayuda al navegador a mostrar una pagina HTML 100% correctamente si se conoce el tipo de HTML y version utilizada. El <! DOCTYPE>debe ser la primera cosa en el documento HTML, antes de la etiqueta<html>. XHTML1.0<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
  10. 10. HTML ATRIBUTOS Elementos HTML pueden tener atributos. Los atributos proporcionan informacion adicional acerca de un elemento HTML. Los atributos siempre se especifican en la etiqueta de apertura. Atributos vienen en pares nombre/valor como nombre:”valor”.
  11. 11. ATRIBUTOS COMUNES Atributos Descripcion class Especifica la clase de un elemento. Se utiliza para ser refereciada desde una hoja de estilo css. id Identificador unico para un elemento. style Especifica el estilo de un elemento. title Especifica informacion adicional de un elmento.
  12. 12. ETIQUETAS BASICAS <html> Define un documento HTML. <head> Define la cabecera dentro de esta etiqueta se definen script,css,metainformacion. <body> Define el cuerpo del documento aqui se definiran los elmentos que se van a visualizaran. <h1>a <h6> Define los titulos. <hr>Define una linea horizontal. <b> Negrita. <!-- --> Define un comentario <br>Define un salto de linea Practica1
  13. 13. IMAGENES Etiqueta <img> Atributo  src.- indica la URL de la imagen.  alt.- Descripcion de la imagen  id.- Identificador  height, width.- Altura y anchura <img src="feliz.gif" alt="HTML tutorial" width="32px" height="32px">
  14. 14. ENLACE Un enlace es una palabra o una imagen que puede hacer click para saltar a otro documento o recurso. <a href="http://www.w3schools.com/">W3Schools</a> <a href="#" title="Ver Multimedia"><img src="feliz.gif" alt="HTML tutorial" width="32" height="32"></a. <a href="mailto:eflores@axon.com.bo" title="Enlace a Correo">Correo</a>
  15. 15. ENLACE <a href="ftp://ftp.ejemplo.com/ruta/archivo.zip" title="Enlace Ftp">Ftp</a><br /> <a href="formato.pdf" title="Enlace a Pdf" target="_blank"> Pdf</a> Practica2
  16. 16. LISTAS Las listas es un conjunto de elementos que tienen un significado. Las más comunes son listas ordenadas y desordenadas. Generalmente utilizadas para realizar menús.  Lista no ordenada  La etiqueta <ul> encierra todos los elementos de la lista y la etiqueta <li> cada uno de los elementos  Lista ordenada  La etiqueta <ol> encierra todos los elementos de la lista y la etiqueta <li> cada uno de los elementos. Practica3
  17. 17. TABLAS Las tablas en HTML utilizan los mismos conceptos de filas, columnas y cabeceras. Se utiliza para mostrar informacion tabular . <table>.-Se emplea para definir tabla de datos. Atributos comunes border,style
  18. 18. TABLAS <tr>Se emplea para definir cada fila <td>Se emplea para definir cada celda que forman las filas.  Atributos  scope=‘col, row’ – Indica las celdas para las que esta celda sera su cabecera.  colspan=‘numero’ – Numero de columnas que ocupara esta celda.  rowspan=‘numero’-Numero de filas que ocupara esta celda. <th>Se emplea para definir las celdas que sera cabecera de una fila o columna  Atributos idem al anterior. <caption>Se emplea para definir la leyenda o titulo de una tabla.
  19. 19. TABLAS <thead>Agrupa varias fila para una cabecera. <tbody>Agrupa varias filas para un cuerpo. <tfoot>Agrupa varias filas para un pie. Practica 4 Practica 5
  20. 20. TABLAS Estructura:  <table>  <thead>  <tr>  <th>Titulo1</th>  <th>Titulo2</th>  </tr>  </thead>  <tbody>  <tr>  <td>Fila 1 Celda1</td>  <td>Fila 1 Celda2</td>  </tr>  <tr>  <td>Fila 2 Celda1</td>  <td>Fila 2 Celda2</td>  </tr>  </tbody>  </table>
  21. 21. TABLAS ATRIBUTOS cellpading.- Se utiliza para crear un espacio entre el contenido y el borde. cellspacing.- Se utiliza para crear un espacion entre las celdas(border-spacing). border-collapse.- Para colapsar los bordes empty-cells .- Se utiliza para mostrar un contenido en vacio caption-side.- Se utiliza para posicionar la leyenda border.- Atributo comun en estilos.
  22. 22. ESTRUCTURA Y LAYOUT div.- Se utiliza para agrupar elementos o zonas de division. div.- Se utiliza para estructurar una pagina web. Practico 7 y 8  <div id=‘formulario’>  <div id=‘cabecera’></div>  <div id=‘cuerpo’></div>  <div id=‘pie’></div>  </div>
  23. 23. FORMULARIOS <form>Encierra todos los contenidos del formulario como ser botones, cuadros de texto, listas desplegables. Atritutos.  action .- Indica la URL que se encarga de procesar los datos del formulario.  method.- POST o GET empleado para enviar la informacion del formulario.  GET.- Se utiliza para consultar informacion. Se muestra en la url.  POST.-Se utiliza para modificar informacion, no se muestra en la url.  enctype.-"application/x-www-form-urlencoded o multipart/form- data“.- Tipo de codificacion empleada al enviar el formulario.
  24. 24. FORMULARIO <input> Se crean varios controles de formulario. Atributo  type.- text, password, checkbox, radio, submit, reset, file, hidden, button, image.  name.- Asigna un nombre al control.  value.- Valor del control.  size.- Tamaño(pixeles) del control reemplazo por style="width:5px”.  maxlength.-’numero’ Maximo numero de caracteres para los controles de texto y password.
  25. 25. FORMULARIOS Atributo  checked.- ‘checked’ Para controles de checkbox y radio.  disabled.-’disabled’ El control aparece desabilitado y su valor no se envia al servidor.  readonly.-’readonly’ El control no se puede modificar.  src.-’url’ Para el control que permite crear botones con imagen.  alt.- tooltip, descripcion del control.
  26. 26. FORMULARIOS text.- Campo de Texto en el que el usuariio puede escribir un texto.  <input type="text" name="nombre" value="" /> password.- Campo texto en el que el contenido no se puede ver en pantalla.  <input type="password" name="contrasena" value="" /> checkbox.- casillas de verificacion que permiten seleccionar y deseleccionar opciones individualmente.  <input name=“vigente" type="checkbox" value=“2"/> Vigente  <input name=“castigado" type="checkbox" value=“7"/> Castigado
  27. 27. FORMULARIOS radio.- Son similares a los checkbox, pero son mutuamente excluyentes  <input type="radio" name="sexo" value="hombre" checked="checked" /> Hombre  <input type="radio" name="sexo" value="mujer" /> Mujer submit.- Boton para enviar los datos al servidor.  <input type="submit" name=“enviar" value=“Enviar" /> reset.- Boton de reseteo  input type="reset" name="limpiar" value="Borrar datos del formulario" /> file.- Para ajuntar archivos.  <input type="file" name="adjunto" />
  28. 28. FORMULARIOS hidden.- Campos de texto ocultos.  <input type="hidden" name=“oculto" value=“123" /> image.- Boton con imagen.  <input type="image" name="enviar" src="accept.png" /> button.- Boton generico  <input type="button" name="guardar" value="Guardar Cambios" />
  29. 29. FORMULARIOS textarea.- Se utiliza para incluir un area de texto  atributo.-rows(Numero de filas), cols(Numero de caracteres en cada fila)  <textarea id="descripcion" name="descripcion" cols="40" rows="5"></textarea> select.- Se utiliza para incluir una lista desplegable(dropdown).  size.- ‘numero’ Numero de fila que se muestra.  multiple.-’multiple’ Si se permite seleccionar mas de un elmento. option.- Define cada elemente de la lista select  selected .- ‘selected’ Indica si la opcion aparece seleccionado por defecto.  value ‘texto’ Indica el valor que se envia al servidor
  30. 30. FORMULARIO <select id="so" name="so">  <option value="" selected="selected“>Sel</option>  <option value="windows">Windows</option> <option value="mac">Mac</option>  <option value="linux">Linux</option> <option value="otro">Otro</option> </select> Practica
  31. 31. FORMULARIOS

×