Contenedores (Block-Level Elements)
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>
Contenedores (Tablas)
< 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>
Tablas
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)
Hipervínculos
¿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.
Imágenes
Elemento < IMG>
¿Qué imágenes se pueden usar?
Ventajas y desventajas de cada formato.
Imágenes e Hipervínculos
Formularios
¿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?
Formularios
Elemento < FORM>
Atributos: method, action
Elemento < INPUT> Atributo: type (text, checkbox, radio, button, hidden)
Elemento < SELECT>
Elemento < TEXTAREA>
Más Elementos
Otros Elementos
Nueva linea < BR>
Línea Horizontal < HR>
Comentarios. < !- – xxxxx – ->
Estilos CSS
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="Times New Roman, serif">
< i>Seminario de HTML UCEMA< /i>
< /font> < /h2>
CSS permite separar el contenido de un documento de su presentación.
En el documento HTML:
< h2>Seminario de HTML UCEMA< /h2>
En la hoja de estilos se define el formato de los
encabezados h2:
h2 {
text-align: center;
color: blue;
font: italic large "Times New Roman", serif;
}
Ventajas del uso de CSS
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.
Margin (Margen)
Border (Borde)
Formatos CSS
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
Estilos CSS
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)
h2 {
text-align: center;
color: blue;
font: italic large "Times New Roman", 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;
}
Como incluir estilos CSS
Inline Styles Utilizando el atributo “style” se define el estilo de un elemento HTML en forma individual.
Embedded StyleSe define la regla CSS dentro de un documento HTML. Se puede aplicar a cualquier elemento de ese documento.
Hojas de Estilos externasUn 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 UCEMA
< /h2>
< head>
< style type="text/css">
h2 {
font-style: italic; font-weight: bold;
color: blue;
}
< /style>
< /head>
< body>
< h2>Curso HTML UCEMA< /h2>
< /body>
< head>
< link rel=stylesheet type="text/css“ href=“estilos.css">
< /head>
Javascript
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 Eich
Creador del Javascript
Capacidades de Javascript
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.
Dónde incluir el Javascript
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">
El Futuro
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.
Página Web
Conclusiones
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.
 Página anterior | Volver al principio del trabajo | Página siguiente  |