HTML: Una introducción.

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  XHTML
2. 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 
• 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 (III):
• Listas de varios niveles: Un elemento de una lista puede ser
cualquier otro elemento HTML, por ejemplo otra lista:

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.

HIPERTEXTO(III)
• 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(IV):
• 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(V):
• 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

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> :

TABLAS (II):
• 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 (III):
• 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 (IV):
• 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:

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.

FORMULARIOS (II):

• 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 : Input(I)
• 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 (II)
– 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 (III)
• 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 : Select (I)
• 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 (II)
• Ejemplo con size = 3:

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:

MEJORANDO LA PRESENTACIÓN DE UN 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:

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/

HTML: Una introducción.

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à HTML: Una introducción.

Similaire à HTML: Una introducción. (20)

Plus de Ramón RS

Plus de Ramón RS (6)

Dernier

Dernier (20)

HTML: Una introducción.