Post on 02-Jun-2015
Introducción HTML
Ramón Ríos Sieiro
Cliente - Servidor
• Las páginas web existen en un entorno cliente/servidor.
• Lenguajes cliente: JavaScript, HTML, CSS…• Lenguajes servidor: Php, JSP, ASP
HTML y CSS
• HTML en realidad no es un verdadero lenguaje de programación, simplemente se usa para describir la estructura de las páginas web.
• Las llamadas hojas de estilo ó CSS ayudan a mejorar la presentación de una página.
Editores
• El más conocido es el Dreamweaver,pero es de pago.
• Utilizaremos en clase el Kompozer para la primera parte : HTML, CSS y JavaScript. Para depurar código JavaScript también utilizaremos también el complemento Firebug del Mozilla Firefox.
• Nos pasaremos al Pspad cuando empecemos con la parte de Php.
Páginas dinámicas
• Para que la página web no sea estática sino que tenga cierta interactividad con el usuario necesitaremos hacer uso de scripts de algún lenguaje de programación, el más utilizado es javascript .
• Se ayuda del DOM (Document Object Model) es esencialmente una interfaz de programación de aplicaciones (API).
• El DOM proporciona un conjunto estándar de objetos para representar documentos HTML y XML.• A través del DOM, los programas pueden acceder y
modificar el contenido.
XML
• Es un lenguaje de marcas que cumple dos funciones básicas:1. Estructurar documentos HTML XHTML2. Envío y almacenamiento de información entre
diferentes servicios WEB.• HTML es un lenguaje pensado para mostrar
datos mientras que XML está pensado para almacenar y compartir datos.
HTML
• Consta de dos elementos básicos: – Texto– Etiquetas
• Estructura de las etiquetas: <nombre atributos> …. </nombre>
• Hay dos tipos de etiquetas:– Abiertas o vacías– Contenedores o delimitadores( la mayoría).
ESTRUCTURA DE UN DOCUMENTO HTML:
• Todo el código debe ir dentro de la etiqueta <html> </html>• En su interior existen dos partes diferenciadas:
– <head> …</head>: Aquí van etiquetas como el título y enlaces a otros ficheros normalmente hojas de estilo o scripts.
– <body> …</body>: Aquí irán la mayoría de etiquetas que constiruirán el esqueleto de la página.
ORGANIZACIÓN DEL TEXTO.
• Comentarios:– Un comentario en HTML comienza con <!-- y
finaliza con -->• Saltos de línea:– <br>:• Abierta o unaria. No soporta hojas de estilo.
– <p>:• Contenedora. Soporta hojas de estilos.
ORGANIZACIÓN DEL TEXTO (II)
• Cabeceras:– Existen 6 cabeceras distintas, todas empiezan por
la letra H acompañadas de un número.
HTML 5 y el texto
• Con la aparición de HTML 5 y CSS 3 todo lo relativo al tipo de fuente, alineación, etc… queda para las hojas de estilo.
• Etiquetas como <font> ó <center> han sido eliminadas.
LISTAS (I):• Listas marcadas: También conocidas como “bulleted lists”.
– La etiqueta asociada a este tipo de lista es <ul>. – Cada uno de sus elementos es <li>.
• Listas numeradas u ordenadas:– La etiqueta de la lista es <ol> de “ordered list”.– Cada elemento va con la etiqueta <li> al igual que en las bulleted lists.
LISTAS (II):• Listas de definiciones: También conocidas como “glossary
list” .– Se trata de listas con dos niveles.– La lista está delimitada por la etiqueta <dl>, el título por la etiqueta
<dt> y la definición por <dd>
• Listas de varios niveles: Un elemento de una lista puede ser cualquier otro elemento HTML, por ejemplo otra lista:
LISTAS (III):
HIPERTEXTO(I)• Un enlace es una referencia a un documento HTML, o
a cualquier otro recurso de WWW.
• Existirán 3 tipos de enlaces:– Locales.– Internas.– Externas.
• Para entender la diferencia entre ellas, debemos tener claro la diferencia entre página web y sitio web.
HIPERTEXTO(II)
• Un sitio web es todo lo que contiene un dominio.
• Un sitio web contiene distintas páginas web que cuentan con diferentes url’s dentro del mismo dominio.
• REFERENCIAS LOCALES: Apuntan a documentos del mismo sitio web.
– Para los enlaces usamos la etiqueta <a> y su atributo href para indicar la URL:
– El navegador supone que ambos documentos están en el mismo directorio.
– Cuando un sitio web está formado por muchos documentos HTML lo normal es que los tengamos organizados en directorios y subdirectorios.
HIPERTEXTO(III)
• En todos los sitios web debe existir una página principal que se debe llamar “obligatoriamente”: index.html
• Imaginémonos la siguiente estructura:
• Dentro del directorio Coches, tenemos una página : “porsches.html”.• Si desde index queremos acceder a la página porsches.html
• Y si ahora quisiéramos volver desde la página de Porsche a la página principal:
HIPERTEXTO(IV):
• REFERENCIAS INTERNAS A UN DOCUMENTO: Se construyen en dos pasos:1. Poner una marca a una parte del documento:
2. Hacer referencia a esta marca desde otra zona del documento mediante el símbolo #
HIPERTEXTO(IV):
• REFERENCIAS A DOCUMENTOS HTML EXTERNOS:– Las referencias a documentos HTML externos se construyen siguiendo
la máscara siguiente:
• http://<dirección del servidor> [:<puerto>]/<directorio>/[<página>[<#marca>]]
– El puerto por defecto es 80.
– Para que nos abra una página en una nueva ventana debemos añadirle a la etiqueta el atributo @target y darle el valor _blank
HIPERTEXTO(V):
IMÁGENES (I)
• Para incluir imágenes en un documento HTML se utiliza la etiqueta <IMG>
• El atributo src indica dónde se encuentra la imagen.
• Es una etiqueta abierta que no necesita cierre.• Una imagen puede a su vez ser un vínculo:
IMÁGENES (II): Mapas interactivos
• Imágenes, por lo general grandes, que contienen zonas asociadas a una URL que actúan como enlaces:
TABLAS (I):• Básicas: La etiqueta es <table> que delimita el conjunto de la tabla.
Cada columna se delimita con <td> y cada fila con <tr> :
• Si queremos ponerle un título a la tabla podemos usar la etiqueta <caption> y si queremos ponerle una cabecera a las columnas lo pondremos entre la etiqueta <th>.
TABLAS (II):
• Avanzadas: Si queremos que una celda ocupe varias columnas (combinar celdas) o que ocupe varias filas debemos utilizar los atributos @colspan y @ rowspan de las etiquetas <td> y <th>
– @colspan: Indica cuantas columnas ocupará una celda.
– @rowspan: Indica cuántas filas ocupará una celda.
TABLAS (III):
• Las filas y las columnas podemos agruparlas utilizando las etiquetas <THEAD>, <TBODY> y <TFOOT> de esta forma podemos aplicar diferentes estilos a estas filas y columnas en función de si son de la cabecera del cuerpo o de la última fila (a veces nombrada como Pie)
• Una de las aplicaciones de las tablas es construir un menú o una barra de herramientas:
TABLAS (IV):
FORMULARIOS (I):• Son la forma más utilizada para recoger información del usuario de un
sitio web y enviarla a aplicaciones que se ejecuten en el servidor.
• HTML solo proporciona la forma para construir el formulario pero no su funcionalidad.
• Para crear un formulario utilizaremos la etiqueta <FORM> y su cierre </FORM>
• Dos parámetros que deben aparecer obligatoriamente:– action: normalmente es la url del programa encargado de interpretar estos datos .
– method: Especifica uno de los 4 métodos de transferencia de datos aceptado por el protocolo http. Normalmente tomará sólo dos valores: GET o SET.
• Más atributos:– name: Permite identificar a cada formulario del documento HTML (útil para javascript)– target: permite enviar el resultado de evaluar un formulario a otra ventana diferente.– Novalidate: Indica que no se van a validar los datos.
• Elementos de un formulario: Cada posible elemento de un formulario tiene una etiqueta asociada:
– <INPUT>: Sirve para cuadros de texto, botones, casillas de verificación, cuadros de contraseña etc… El tipo de elemento se define en el atributo @type
– <SELECT>: Sirve para crear una lista desplegable, cada uno de los elementos de la lista se construye con la etiqueta <OPTION>
– <TEXTAREA>: Permite crear un cuadro de texto en el que se puedan incluir muchas líneas.
FORMULARIOS (II):
• Es una etiqueta que no necesita cierre. Cuenta con varios atributos comunes:
– autocomplete:
– autofocus:
– formnovalidate:
– max: Valor máximo.
– min:
– placeholder: mensaje informativo al usuario referente normalmente al tipo de información que debe introducir.
– readonly:
FORMULARIOS : Input(I)
– type : Es el más importante e indica el tipo de elemento del que se trata, puede tomar los siguientes valores:• Text: Es el valor por defecto. Indica que se trata de un cuadro de texto de tan sólo
una línea. – El atributo name indica el nombre que recibe la variable en la que se almacenará el dato
introducido. – El atributo size indica el número de caracteres de la entrada y maxlength el valor
máximo.– El atributo value permite dar un valor inicial.
FORMULARIOS : Input (II)
• Checkbox: Se trata de una casilla de selección, sólo tiene dos valores: seleccionado o ignorado. @value recoge el valor cuando se le selecciona, sino se devuelve una cadena vacía. El atributo @checked señala la opción seleccionada:
• Radio: Botones de radio. Una misma variable asociada a varios elementos, cada uno de ellos con un valor diferente
FORMULARIOS : Input (III)
• Reset: Hace que todos los componentes del formulario vuelvan a su estado original. El atributo @value contiene la frase que se desea mostrar en lugar de “Reset”.
• Submit: Un botón especialmente importante ya que en este caso es el que desencadena la acción de enviar los datos al programa que los interpreta en el servidor.
FORMULARIOS : Input (III)
• Permite construir una lista de selección recogida en una ventana que puede tener barras de desplazamiento (scrollbar) y una lista desplegable.
• Dentro de la etiqueta select la etiqueta <option> es la responsable de presentar las diferentes opciones.
• <select> cuenta con los siguientes atributos:– name: Representa el nombre de la variable en la que será almacenado el valor
seleccionado.– value: Es el valor devuelto si se escoge la opción.– selected: Indica elemento seleccionado inicialmente.– multiple: Permite seleccionar varios elementos.– size: : Indica cuantos elementos se ven inicialmente
FORMULARIOS : Select (I)
• Ejemplo con size = 3:
FORMULARIOS : Select (II)
FORMULARIOS: Fieldset.• Permite agrupar campos por funcionalidad, delimitándolos con una caja
como muestra la siguiente figura:
MEJORANDO LA PRESENTACIÓN DE UN FORMULARIO• Fijémonos en el siguiente formulario:
• Vamos a intentar mejorarlo a través de la etiqueta <PRE>:
MEJORANDO LA PRESENTACIÓN DE UN FORMULARIO
• Otra técnica muy utilizada es presentar al formulario con ayuda de una tabla:
MEJORANDO LA PRESENTACIÓN DE UN FORMULARIO:
Iframes:• Se trata de un área rectangular dentro de una página web que ocupa un
lugar específico, en la que puede cargarse un documento. Se muestra siempre y su contenido puede gestionarse con HTML.
• La directiva encargada de los iframes es <IFRAME> , sus atributos son:– height: altura en px– name: nombre del iframe.– src: URL del documento que se colocará en el iframe.– srcdoc: Se especifica el código HTML.– seamless: Indica que el marco no debe diferenciarse de la página.– width: Anchura en px.
Bibliografía:
• HTML 5 Canvas: Fulton. O'Reilly• HTML 5: Alonso Álvarez García. Editorial
Anaya.• http://www.w3schools.com• Más información en:– https://sites.google.com/site/appswebmontecaste
lo/