htm ltlalti
Post on 03-Aug-2015
86 Views
Preview:
TRANSCRIPT
CONTENIDO: HTML. Historia del HTML. HTML – CSS – Javascript. Elementos HTML.
Tipos Atributos Estructura Contenedores Tablas Hipervínculos Imágenes Formularios
Estilos CSS. Javascript. El Futuro. Conclusiones.
MTI. Daniel Gomez Tellez
HTML (Hypertext Markup Language)
HTML = Hypertext + MarkUp
Hypertext
Es texto ordinario al que se le incorporan funcionalidades
adicionales como de corte multimedia.
MarkUp
Es el proceso de tomar el texto ordinario e incorporarle símbolos
adicionales. Cada uno de estos símbolos identifica a un comando que le
indica al navegador como mostrar ese texto.
Trivialidades
MTI. Daniel Gomez Tellez
• En 1986 la organización internacional de Estándares publica el
SGML (Standard Generalized Markup Language)
• En 1990 Tim Berners-Lee crea la WWW y el HTML con base en
un subconjunto del SGML.
• En 1993 se crea el HTML 2.0 (o HTML+)
• En 1995 el W3C (World Wide Web Consortium) define el HTML.
• El HTML 3.2 abandona las sugerencias del HTML 3.0 y adopta
elementos desarrollados por Netscape. (Incorpora Tablas,
Applets, Texto alrededor de imágenes)
• En 1997 se define el estándar HTML 4.0
• En 1999 aparece el estándar actual HTML 4.01
• Más información en: http://www.w3.org/
Tim Berners-Lee
MTI. Daniel Gomez Tellez
• El W3C (World Wide Web Consortiun) es un consorcio internacional
donde Organizaciones miembro, Personal Full-time y el público en general trabajan
para desarrollar Estándares Web.
• La misión del W3C es la de maximizar el potencial de la WWW desarrollando
protocolos y guías que aseguren el crecimiento futuro de la Web.
• Algunas Organizaciones miembro del W3C
Adobe Ericsson Nokia
Apple Google, inc. Opera Software
AT&T HP Sun Microsystems
Cisco IBM Corporation Telefónica de España
Citigroup Microsoft Yahoo, inc.
Deutsche Telekom Mozilla Foundation VeriSign
…Y decenas de universidades de todo el mundo
MTI. Daniel Gomez Tellez
Página Web
Estructura
Contenido
Apariencia
Comportamiento
HTML
CSS
JavaScript
• Colores• Tipografías• Alineación
• Efectos• Validaciones• Automatización
• Párrafos• Encabezados• Listas
•Tablas• Capas• Etc.
• Textos• Imágenes• Enlaces
• Fondos• Tamaños • Etc.
MTI. Daniel Gomez Tellez
Los elementos son los componentes fundamentales del HTML Cuentan con 2 propiedades básicas:
Atributos Contenido
En general se conforman con una Etiqueta de Apertura y otra Cierre. Los atributos se colocan dentro la etiqueta de apertura, y el contenido se coloca
entre la etiqueta de apertura y la de cierre.
Elemento< APERTURA > </CIERRE>Contenido
<p class=“texto”>Curso HTML </p>
Nombre Valor
Atributo
MTI. Daniel Gomez Tellez
<HTML>
<HEAD></HEAD>
<BODY>
</BODY>
</HTML>
MTI. Daniel Gomez Tellez
Nota:Escribir en minúscula o mayúscula es indistintoGuarda el archivo con extensión .html ó .htm
Otros Elementos:
Nueva linea <BR>
Línea Horizontal <HR>
Comentarios <!- - xxxxx - ->
Los atributos de un elemento son pares de nombres y valores separados
por un ‘=‘ que se encuentran dentro de la etiqueta de apertura de algún
elemento. Los valores deben estar entre comillas.
Ejemplos:
<span id=‘iddeesteelemento' style='color:red;' title=‘Curso de HTML'>
Curso de HTML
</span>
<a href=“http://www.unid.edu.mx” class=“milink” target=“_blank”>
UNID
</a>
MTI. Daniel Gomez Tellez
Estructurales Describen el propósito del texto y no denotan ningún formato
específico. Por ejemplo:
<h1>Curso HTML</h1> De Presentacion
Describen la apariencia del texto, independientemente de su función. Por ejemplo:
<b>Curso HTML</b> Los elementos de presentación se encuentran obsoletos desde la
aparición del CSS. De HiperTexto
Relaciona una parte del documento a otros documentos. Por ejemplo:
<a href=“http://www.unid.edu.mx”>UNID</a>
MTI. Daniel Gomez Tellez
<HTML>… </HTML>
Delimita el Documento HTML
<HEAD> … </HEAD>
Delimita el encabezado del Documento HTML
En general incluye los metadatos del documentos y Scripts.
<BODY> … </BODY>
Delimita el Cuerpo del Documento HTML.
Es donde se incluyen los contenidos visibles del documento.
Ejemplo
<html>
<head> elementos del encabezado
</head> <body>
elementos contenedores o scripts</body>
</html>
MTI. Daniel Gomez Tellez
Alguno de los elementos factibles de incluir en el HEAD son:
<TITLE> … </TITLE>
Define el título del documento HTML
<SCRIPT> … </SCRIPT>
Se utiliza para incluir programas al documento. En general se tratan de
Javascripts.
<STYLE> … </STYLE>
Especifica un estilo CSS para ser utilizado en el documento.
<META> … </META>
Permite especificar información de interés como: autor, fecha de
publicación, descripción, palabras claves, etc.
MTI. Daniel Gomez Tellez
Parrafos
Es el contenedor mas común.
Su sintaxis es: <P> … </P>
Encabezados
Indican una jerarquía de secciones dentro del documento
Su sintáxis: <h1>…</h1>, <h2>…</h2>, <h3>…</h3>,.. <h6>…</h6>,
Listas
Listas de Definiciones (consistente de pares de términos y definiciones)
<dl>…</dl> Crea la lista
<dt>…</dt> Crea un nuevo término
<dd>…</dd> Crea una nueva definición
Lista Ordenada Enumerada
<ol> … </ol> Crea una nueva lista
<li> … </li> Crea un nuevo ítem en la lista
Lista Ordenada No Enumerada
<ul> … </ul> Crea una nueva lista
<li> … </li> Crea un nuevo ítem en la lista
Capas
Permiten agrupar y diagramar contenidos en los documentos.
Su sintaxis es: <DIV> … </DIV>
MTI. Daniel Gomez Tellez
<table> … </table> Crea la tabla <tr> … </tr> Crea una nueva fila <td> … </td> Crea una nueva celda dentro de la fila
Por ejemplo: Creación de una tabla de 2 x 2
<table>
<tr>
<td> … </td>
<td> … </td>
</tr>
<tr>
<td> … </td>
<td> … </td>
</tr>
</table>
MTI. Daniel Gomez Tellez
Qué son y para qué sirven.
Atributos de las Tablas
Atributos de las Celdas y Filas
Prioridades en los formatos
Tablas anidadas
Tablas Irregulares (Atributos colspan y rowspan)
Anchos (Pixels Vs. Porcentajes)
MTI. Daniel Gomez Tellez
¿Qué es un hipervínculo?
Ubicación y rutas de documentos.
Rutas Absolutas
Rutas Relativas
Rutas relativas a la raíz del sitio
Vínculos a otras páginas. Etiqueta <A>.
Uso del atributo target (Destino).
Anclaje de nombre. Atributo name.
Comportamientos del Navegador ante distintos tipos de archivos
enlazados.
MTI. Daniel Gomez Tellez
Elemento <IMG> ¿Qué imágenes se pueden usar? Ventajas y desventajas de cada formato. Imágenes e Hipervínculos
<img src=“Ruta Relativa”>
MTI. Daniel Gomez Tellez
¿Para qué sirven?
Elementos para Formularios Campos de Texto Casillas de Verificación Botones de opción Menús Botones Campos ocultos Campos de carga de archivos
¿Cómo se envía la información?
¿Se pueden validar los Campos?
MTI. Daniel Gomez Tellez
MTI. Daniel Gomez Tellez
Los formularios serán de gran utilidad cuando comencemos a trabajar con paginas dinámicas en lenguajes PHP, JSP, ASP. Por ello trataremos a detalle todas sus características.
Un formulario en HTML no puede hacer mucho por si solo, ya que simplemente se limita a enviar valores al servidor, pero allí no hay nada que los procese, a continuación trataremos los tags correspondientes a un formulario.
<FORM>
</FORM>
<FORM NAME="FORM1" METHOD=“post" ACTION="">
Con sus respectivos atributos:
La propiedad ACTION define a que pagina se enviaran los datos para procesarlos o que se hará con los datos una vez que se pulse en botón enviar.
También tenemos la propiedad METHOD que también define la forma en que se envíen los resultados; aquí tenemos dos posibilidades:
•get: Los datos se envían por la URL del navegador.
•post: Los datos son enviados a través de las cabecera HTTP y son invisibles para el usuario.
La propiedad NAME es con la que se sugiere el nombre para el formulario.
MTI. Daniel Gomez Tellez
EJEMPLO:
<FORM NAME=“FRMDATOS” ACTION=“datos.php” METHOD=“POST”>
<!– ELEMENTOS DE UN FORMULARIO-- > </FORM>
MTI. Daniel Gomez Tellez
CAMPOS DE TEXTO
<INPUT TYPE="TEXT" NAME=“TEXTO1“ VALUE=“Ingresa tu nombre aqui ”MAXLENGTH=“50” DISABLE>
Son los elementos que utilizaremos con mayor frecuencia. Los mismos permiten que el usuario ingrese datos de una línea como su Nombre, Dirección, correo electrónico, Telefono, Sexo, Edad, etc.
Para insertar estos elementos se utiliza la etiqueta <INPUT>, la cual no tiene etiqueta de cierre, con el atributo TYPE=“TEXT”, ademas tenemos otra propiedad muy importante que no puede faltar: NAME.
Ver el ejemplo:
<HTML><TITLE>TEXFIELD</TITLE><BODY><FORM>Nombre:<INPUT TYPE="TEXT" name=“txtnombre“ value="Ingresa tu nombre" size=25 maxlength=5><p>Apellidos:<INPUT TYPE="TEXT" name=“txtApellido“ value="Ingresa tus apellidos" size=40><p>Direccion:INPUT TYPE="TEXT" name=“txtdireccion“ value="Ingresa tu direccion" size=50><p>Teléfono:<INPUT TYPE="TEXT" name=“txttelefono“ value="Ingresa tu telefono" size=20><p>Mail:<INPUT TYPE="TEXT" name=“txtmail“ value=" @ " size=30><p></FORM></BODY></HTML>
CASILLAS DE VERIFICACION
Son los elementos que permiten que el usuario seleccione distintas opciones; esto puede ser una o más, se utiliza en la elección de productos a comprar, listas de correo de subscríbase, etc.
<INPUT TYPE=“CHECKBOX" name=“chkmusica“ value=“si" >Musica
< INPUT TYPE=“CHECKBOX" name=“chkliteratura“ value=“si" >Literatura
< INPUT TYPE=“CHECKBOX" name=“chkarte“ value=“si" >arte
< INPUT TYPE=“CHECKBOX" name=“chkliteratura“ value=“si" >Cultura
< INPUT TYPE=“CHECKBOX" name=“chktecno“ value=“si" CHECKED>Tecnologia
La propiedad CHECKED marca una casilla sin valor por defecto.
<HTML><TITLE>CHECK,S</TITLE><BODY><FORM>Ingrese datos:<p><INPUT type="checkbox" name="chkmusica" value="si" >Musica<p><INPUT type="checkbox" name="chkcultura" value="si" >Cultura<p><INPUT TYPE="checkbox" name="chkarte" value="si" >arte<p><INPUT TYPE="checkbox" name="chkliteratura" value="si" >Cultura<p><INPUT TYPE="checkbox" name="chktecno" value="si" CHECKED>Tecnologia<p></FORM></BODY></HTML>
Ejemplo:
MTI. Daniel Gomez Tellez
BOTONES DE OPCIÓN
Este elemento es conocido también como botón de radio, es similar al anterior, pero en este caso los elementos se agrupan, utilizando el mismo nombre, y solo esta permitido una única selección.
<INPUT TYPE=“radio" name=“preferencia“ value=“verano" >Verano
<INPUT TYPE=“radio" name=“preferencia“ value=“otono" >Otono
<INPUT TYPE=“radio" name=“preferencia“ value=“invierno" >Invierno
<INPUT TYPE=“radio" name=“preferencia“ value=“primavera" >Primavera
Nota: Solo se selecciona una opción.
MTI. Daniel Gomez Tellez
Ejemplo:
<HTML><TITLE>EJEMPLO</TITLE><BODY>
<FORM>
<INPUT TYPE="radio" name="preferencia" value="verano" >Verano<p>
<INPUT TYPE="radio" name="preferencia" value="otono" >Otono<p>
<INPUT TYPE="radio" name="preferencia" value="invierno" >Invierno<p>
<INPUT TYPE="radio" name="preferencia" value=“primavera" >Primavera<p>
</FORM>
</BODY></HTML>
MTI. Daniel Gomez Tellez
AREAS DE TEXTO
Si se desea que el usuario teclee un texto largo debemos ofrecerle un espacio mas cómodo para escribir, es común ver áreas de texto en los campos para redactar mensajes de las paginas Web que ofrecen un correo gratuito, como Yahoo, Hotmail, por ejemplo.
Las áreas de texto se definen como <TEXTAREA></TEXTAREA> y el texto que va en medio aparecerá en el campo por defecto, también se define su tamaño mediante los parámetros alto y ancho con los atributos rows(Filas) y cols(Columnas) respectivamente.
<TEXTAREA name=“Mensaje” rows=“15” cols=“15”></TEXTAREA>
MTI. Daniel Gomez Tellez
<HTML><TITLE>EJEMPLO</TITLE>
<BODY>
<FORM>
<TEXTAREA name=“Mensaje” rows=“15” cols=“15”>
Area de escritura
</TEXTAREA>
</FORM>
</BODY></HTML>
Ejemplo:
MTI. Daniel Gomez Tellez
BOTONES DE COMANDO
Existen 2 tipos de comandos muy utilizados en los formularios; estos son submit y reset .
El primero envía los datos del formulario para su procesamiento donde hayamos indicado en la propiedad ACTION de la etiqueta <FORM>, y el segundo limpia todo texto del formulario.
<INPUT TYPE=“submit" name=“enviar" value=“Enviar formulario" >
<INPUT TYPE=“reset" name=“limpiar" value=“Limpiar formulario" >
MTI. Daniel Gomez Tellez
<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function HolaMundo() { alert("¡Hola, mundo!"); } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="button" NAME="Boton" VALUE="Pulsame" onClick="HolaMundo()"> </FORM> </BODY> </HTML>
<INPUT TYPE="button" VALUE="Pulsame" onClick=“accion()">
Existen también botones genéricos que programaremos en javaScript o PHP.
MTI. Daniel Gomez Tellez
MENUS DE SELECCIÓN
Conocido como menú descogable del cual podrás elegir una opción, con este podrás crear menús sencillos o múltiples.
<SELECT name= “pais”>
<OPTION value=“Argentina”> Argentina < /OPTION>
<OPTION value=“Uruguay”> Uruguay< /OPTION>
<OPTION value=“Paraguay”> Paraguay < /OPTION>
<OPTION value=“Brasil”> Brasil< /OPTION>
<OPTION value=“Chile”> Chile< /OPTION >
</SELECT >
MTI. Daniel Gomez Tellez
Antes de la aparición de los estilos, la presentación se manejaba directamente dentro
de los elementos HTML por medio de atributos. Por ejemplo:
<h2 align="center">
<font color=“blue" size=“3" face=“Arial, Verdana">
<i>Seminario de HTML</i>
</font>
</h2> CSS permite separar el contenido de un documento de su presentación.
En el documento HTML:
<h2>Seminario de HTML </h2>
En el documento HTML:
<h2>Seminario de HTML </h2>En la hoja de estilos se define el formato de los
encabezados h2:
h2 {
text-align: center;
color: blue;
font: italic large “Arial",
“Verdana”;
}
En la hoja de estilos se define el formato de los
encabezados h2:
h2 {
text-align: center;
color: blue;
font: italic large “Arial",
“Verdana”;
}
MTI. Daniel Gomez TellezMTI. Daniel Gomez Tellez
Estandarizar la presentación de un sitio web completo. Haciendola fácil de mantener.
Diferentes usuarios pueden contar con diferentes estilos acordes a sus necesidades.
Ejemplos:
Estilos para personas con dificultades visuales,
Estilos para dispositivos móviles,
Estilos para dispositivos monocromos,
Estilos para impresión,
Etc.
Los documentos HTML se reducen en tamaño y complejidad.
MTI. Daniel Gomez TellezMTI. Daniel Gomez Tellez
Margin (Margen)
Border (Borde)
Propiedades de fuentes
Propiedades de color y fondo
Propiedades de texto
espaciado de palabras
alineación
Propiedades de caja
Margen
Borde
Relleno
Estilos de listas
Padding (Relleno)
Contenido
MTI. Daniel Gomez Tellez
H2 {
text-align: center;
color: blue;
font: italic large “Arial", serif; }
.textoresaltado {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold; /* Esto es un comentario */
color: #000000;
}
#logo {
background-image: url("/img/logo.gif");
background-position:center;
background-repeat:no-repeat;
height: 50px; width: 150px;
position: absolute; left: 0px; top: 0px;
}
Una hoja de estilos consiste en un conjunto de reglas.
Cada regla esta formada por:
El Selector (nombre del estilo)
La Declaración (define el estilo)
Propiedad
Valor
¿Qué podemos hacer con los estilos?
Redefinir estilos de Etiquetas HTML.
Crear Estilos Personalizados para
uso genérico (Clases)
Crear Estilos para un elemento
HTML específico (por Id)
MTI. Daniel Gomez Tellez
Inline Styles
Utilizando el atributo “style” se define el
estilo de un elemento HTML en forma
individual.
Embedded Style
Se define la regla CSS dentro de un
documento HTML. Se puede aplicar a
cualquier elemento de ese documento.
Hojas de Estilos externas
Un archivo CSS independiente que se
encuentra referenciado en cada uno de los
documentos HTML que desean utilizarlo.
<h2 style="color: blue; background: green;">Curso HTML
</h2>
<h2 style="color: blue; background: green;">Curso HTML
</h2>
<head> <style type="text/css">
h2 {font-style: italic;font-weight: bold; color: blue;
} </style>
</head><body>
<h2>Curso HTML </h2> </body>
<head> <style type="text/css">
h2 {font-style: italic;font-weight: bold; color: blue;
} </style>
</head><body>
<h2>Curso HTML </h2> </body>
<head>
<link rel=stylesheet type="text/css“
href=“estilos.css">
</head>
<head>
<link rel=stylesheet type="text/css“
href=“estilos.css">
</head>
MTI. Daniel Gomez TellezMTI. Daniel Gomez Tellez
Creado por Brendan Eich para Netscapa aparece en Netscape 2.0B3 en 1995.
Es un lenguaje de programación interpretado con base en la sintaxis del lenguaje C.
Está basado en objetos y guiado por eventos. No tiene nada que ver con Java Las funciones Javascript se incluyen en los
documentos HTML interactuando con el DOM (Document Object Model) de la página para realizar tareas no factibles de hacer con HTML sólo.
DOM: Es una interface (independiente del lenguaje) que permite a los scripts acceder dinámicamente y actualizar el contenido, la estructura y el estilo de los documentos.
Brendan EichCreador del Javascript
MTI. Daniel Gomez TellezMTI. Daniel Gomez Tellez
Algunas de las cosas que se pueden hacer con Javascript:
Abrir nuevas ventanas controlando su tamaño, look & feel, controles, etc.
Incorporar validaciones a los formularios.
Cambios de imágenes al colocar el mouse sobre algún objeto de la página web.
Generar respuestas ante distintos eventos
Efectos visuales en la página.
Crear, Eliminar o cambiar atributos de elementos de una página HTML en forma
dinámica.
Crear o Leer Cookies
Detectar la configuración del Browser.
MTI. Daniel Gomez TellezMTI. Daniel Gomez Tellez
En general se utiliza el elemento script
Las funciones Javascript pueden estar en archivos independientes. Por ejemplo:
<script language="JavaScript" src ="archivo.js"> </script>
También se pueden incluir las instrucciones dentro del elemento Script. Por ejemplo:
<script language="JavaScript" type="text/JavaScript">
<!--
function AbroVentana (URL,nombre,features) { //Esto es un comentario
window.open(URL,nombre,features);
}
//-->
</script>
El código Javascript también se puede incluir directamente en un evento asociado a
algún elemento del documento. Por ejemplo:
<input type=“button" onclick="alert(‘Gracias por su click');return false;"
value="Click">
MTI. Daniel Gomez TellezMTI. Daniel Gomez Tellez
XHTML (Extensive Hyper Text MarkUp Language)
Es la versión XML de HTML
Tiene las mismas funciones que el HTML pero con una sintáxis más
estricta (como el XML).
Surge para facilitar el acceso a la web de nuevos dispositivos
(Por ejemplo: dispositivos móviles).
La sintaxis más estricta obliga a un formato correcto, liberando a los
navegadores de “tratar de interpretar” documentos mal creados, lo que
hace más rápida la carga de documentos bien hechos.
MTI. Daniel Gomez TellezMTI. Daniel Gomez Tellez
Página Web
Estructura
Contenido
Apariencia
Comportamiento
HTML
CSS
Javascript
• Colores• Tipografías• Alineación
• Efectos• Validaciones• Automatización
• Párrafos• Encabezados• Listas
•Tablas• Capas• Etc.
• Textos• Imágenes• Enlaces
• Fondos• Tamaños • Etc.
MTI. Daniel Gomez Tellez
MTI. Daniel Gomez Tellez
top related