UF1 Flashcards
1- PRINCIPALES CARACTERÍSTICAS DE LOS LENGUAJES DE MARCAS
1) TEXTO PLANO:
• Formados solo por caracteres de texto, no pueden contener imágenes, sonido, archivos comprimidos ni otros tipos.
• Los caracteres se codifican mediante la utilización de diferentes códigos: por ejemplo ASCII, UFT-8, ISO-8859-15, dependiendo del idioma o del alfabeto necesario.
• Los archivos de texto plano se pueden interpretar mediante un simple editor de texto. Sin embargo, los archivos binarios necesitan un software específico, por ejemplo, descompresores, visores multimedia, compiladores. Lo cual es una ventaja.
____________________
2) COMPACIDAD:
• Permite mezclar las instrucciones de marcado con el propio contenido.
• El código que aparece entre corchetes es lo que denominamos instrucciones de marcado o etiquetas. Ej: (>h2>Contenido>/h2>)
___________________
3) INDEPENDENCIA DEL DISPOSITIVO FINAL:
• Son las distintas interpretaciones que se pueden hacer de un mismo documento. Dependiendo del dispositivo final, podemos tener distintos resultados si utilizamos un dispositivo móvil o si utilizamos un ordenador.
___________________
4) ESPECIALIZACIÓN:
• Con la especialización nos referimos a que, con el paso de los años, han ido evolucionando, de tal manera que, podemos hacer uso de los lenguajes de marcas en un gran número de áreas (como pueden ser los gráficos vectoriales, notación científica, interfaces de usuario, etc).
___________________
5) FLEXIBILIDAD:
• Podemos combinar el mismo tipo de archivo con otros lenguajes diferentes, como pueden ser HTML con PHP y con JavaScript. Además, existen unas etiquetas que ya viene especificadas para tal fin, como son los .
2- CLASIFICACIÓN DE LOS LENGUAJES DE MARCAS DEPENDIENDO DEL TIPO DE MARCAS QUE UTILICEMOS:
Tendremos 3 tipos:
1) DE PRESENTACIÓN:
• Se refieren al formato del texto que, sin modificar su estructura, permite aumentar el tamaño de la fuente, añadir o eliminar la cursiva. Incorpora diferentes lenguajes de procedimiento que permiten combinar varias marcas de presentación para una macro determinada.
• El software encargado de representar el documento debe ser capaz de poder traducir el código, pero sin transformar el orden en que aparece. Las aplicaciones de edición y los procesadores de texto son algunos de los que utilizan este marcado.
• Algunos ejemplos pueden ser: TeX, Docbook
(derivados de SGML), nroff, troff, RTF.
___________________
2) DESCRIPTIVO, ESTRUCTURAL O SEMÁNTICO:
• Hacen referencia a las diferentes
partes en las que se puede dividir un documento sin ofrecer detalles de cómo se representan y en qué orden van a hacerlo.
• XML es un lenguaje diseñado específicamente para generar marcado descriptivo junto con los lenguajes que deriven de XML y tengan este propósito.
• Van a ir creando una serie de documentos que se van a almacenar en forma de árbol por lo que son bases de datos, pero en este caso, no se utilizan tablas, ni bases de datos estructuradas, por tanto, reciben el nombre de bases de datos semiestructuradas.
• Algunos ejemplos de este tipo pueden ser: ASN. 1, YAML, EBML, RDF, XFML, OWL, XTM.
___________________
3) HÍBRIDO:
• Se refieren a una un conjunto de lenguajes que permiten utilizar los dos tipos de marcas anteriores, como HTML, XHTML y WML.
3- CLASIFICACIÓN DE LOS LENGUAJES DE MARCAS SEGÚN SU FUNCIONALIDAD:
1) Para crear documentación electrónica:
• RTF, TeX, troff, nroff
• Wikitexto, DocBook, LinuxDoc
• ASN.1, EBML, YAML
2) Tecnologías de Internet:
• HTML, XHTML, WML (páginas web)
• XMPP (para mensajería instantánea)
• WSDL, SOAP, UDDI (servicios web)
• RSS, Atom (sindicación de contenidos)
• GladeXML, XForms, XAML (interfaces/formularios de usuario)
3) De propósito específico:
• MathML, CML (fórmulas matemáticas)
• MusicXML (lenguaje musical)
• SSML, SRGS, VoiceXML (síntesis de voz)
• SVG, VML, X3D (gráficos vectoriales)
• XLL (enlaces):
o XLINK (asociación de recursos)
o XML Base (URI básico)
o XPOINTER (localiza recursos)
• XSLT (transformación de documentos)
• XTM (mapas conceptuales)
• RDF, XFML, OWL, XMP (catalogación y clasificación de documentos)
• GML (información geográfica)
• OFX (intercambio de información financiera)
ebXML (comercio electrónico)
• XML Dsig, XML Enc, SAML, XACML, XKMS, XrML (seguridad)
• XInclude (inclusión de archivos)
4- HERRAMIENTAS DE EDICIÓN:
1) XMLSpy, de Altova:
• Un editor de XML junto con XLST, XPath, XQuery, etc. Cuenta con un gran número de herramientas diferentes, entre las que podemos diferenciar las de representación gráfica de diferentes documentos. Se trata de un programa de pago, pero que dispone de unaversión de prueba de 30 días.
2) (oXygen/) , de Syncro Soft:
• Utilizado para una serie de tecnologías entre las que destacamos: XSD, XSLT o XQuery. Es necesario descargarse el XML Editor.
3) XML Copy Editor:
• Herramienta de software libre con licencia
GNU GPL. También es editor de XML, XSD, XSLT, etc.
4) XMLPad Pro Edition, de WMHelp:
• Herramienta bastante sencilla de utilizar cuya función principal es comprobar si un documento XML está bien formado.
5) Otras aplicaciones: (Exchanger XML Editor, Liquid XML Editor, versión de pago, de la que también existe una versión de prueba.
6) Parser XML:
• Procesador que se encarga de leer un documento XML para, posteriormente, determinar la estructura y propiedades de aquellos datos que se encuentran
contenidos en dicho documento.
• Este procesador o analizador va a comprobar que se han seguido las reglas de forma correcta y, a continuación, puede validar el documento e informar, en caso de que existan, de los errores producidos.
5- XML: ESTRUCTURA, SINTAXIS Y ETIQUETAS:
- La información de un documento XML se organiza de forma jerárquica, de tal forma que los diferentes elementos del documento se van a relacionar entre sí mediante relaciones de padres, hijos, hermanos, ascendentes, etc.
- Las diferentes relaciones que se pueden dar entre los diferentes nodos son:
1) Original:
2) Descendentes (de padres a hijos)
3) Ascendentes (de hijos a padres)
4) Hermanos - A las partes del árbol que tienen hijos se les denomina nodos intermedios o ramas.
- Y a las partes que NO tienen hijos, las denominamos nodos finales u hojas.
6- ELABORACIÓN DE DOCUMENTOS XML BIEN FORMADOS:
- A la hora de especificar la sintaxis del lenguaje XML, definimos:
• Cómo delimitar los elementos con etiquetas.
• Qué formato podemos asignar a una etiqueta.
• Qué nombres son aceptables para los diferentes elementos.
• Dónde se pueden colocar los atributos.
7- UN DOCUMENTO XML BIEN FORMADO DEBE CUMPLIR CON UNA SERIE DE REGLAS ESTABLECIDAS POR W3C EN LAS ESPECIFICACIONES CORRESPONDIENTES PARA XML:
- Podemos comenzar un documento por una instrucción de procesamiento XML que indique cuál es la versión del XML que se está utilizando y, algunas
veces, indica también la codificación de caracteres (encoding), que por defecto es UTF-8 y si ya se encuentra preparado para procesarse o si necesita
una serie de archivos.
(xml version=”1.0” ?) - Solo debe haber un elemento raíz del que van a colgar los demás elementos.
- Los elementos se encuentran entre los símbolos de apertura < y cierre >.
- Existes diferencias entre mayúsculas y minúsculas.
- Dos atributos no pueden tener el mismo nombre.
- Los atributos pueden llevar el valor “simples” o “dobles”.
8- MODELO DE DATOS EN UN DOCUMENTO XML.
NODOS:
- Raíz. El nodo raíz es el primer elemento que encontramos en la estructura y lo designamos como “/”.
- ELEMENTOS. Unidad básica de los documentos XML. Tienen como función principal almacenar información, y los etiquetamos de la misma forma que los elementos de HTML, por ejemplo: (ejemplo)…(/ejemplo).
- Podemos diferenciar dos tipos de elementos especiales:
a) Elemento RAIZ. Debe formar parte de cualquier documento XML. Si el documento está bien formado, debe tener solo un elemento raíz
b) Elementos SIN CONTENIDO. Tenga atributos o no, debe abrirse y cerrarse con una sola instrucción.
(ejemplo /)
• Atributos. Permiten asignar un valor a un atributo haciendo uso del signo igual. Se van a tratar como tipo texto, de tal forma que el valor debe aparecer
entre comillas.
Ej: (persona DNI=”35427641M”)…(/persona)
- Texto. Puede aparecer de dos formas diferentes, como contenido de un elemento determinado o como valor correspondiente de un atributo.
- Comentarios. Se utilizan de la misma forma que en HTML.
- Espacio de nombres. Utilizado para diferenciar las distintas etiquetas cuando se están utilizando varios vocabularios.
• Instrucciones de procesamiento. Comienzan por Y finalizan con ¿>.
Engloban un conjunto de instrucciones que se envían al procesador.
• Entidades predefinidas. Utilizadas para poder representar caracteres especiales de marcado, aunque se interpreten por el procesador como si fuera un texto.
Entidad Carácter
-------------------------------
& &;
< <
> >
&apos ‘
&quot "
- Secciones CDATA. Grupo de varios caracteres que no necesitan ser analizados por el procesador.
- Definición Tipo de Documento (DTD). Se definen una serie de reglas que asignan una serie de restricciones sobre la estructura del documento XML.
9- UTILIZACIÓN DE ESPACIOS DE NOMBRES EN XML
a) Nombres XML:
− Los nombres en XML deben seguir una serie de reglas para conseguir utilizar nombres correctos. Estas reglas son las mismas para nombres que para los atributos:
• Tienen permitido empezar con una letra (puede tener tilde o no), que puede pertenecer al alfabeto no latino, subrayado o con dos puntos.
• Los caracteres que aparezcan a continuación pueden ser: letras, dígitos, guiones bajos, subrayados, comas o dos puntos.
• Aquellos nombres que empiecen por las letras XML (mayúscula o minúscula) están reservadas.
• No deben contener espacios en blanco.
____________________
b) Uso de elementos frente a uso de atributos:
• Elementos:
o Se pueden utilizar para representaciones jerárquicas.
o Pueden tener atributos.
o Puede que un elemento tenga distintas ocurrencias.
o Aparecen en orden representativo.
o Tienen posibilidad de poder extender con algunos elementos en su interior.
• Atributos:
o Deben asociar a los diferentes elementos.
o Permiten alterar la información.
o Aparecen en orden no representativo.
o Permiten realizar el registro de metadatos.
o No tienen posibilidad de poder extender con otros elementos en su interior.
o Un atributo no dispone de múltiples ocurrencias. \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ c) Espacios de nombres − Son una serie de mecanismos utilizados para que no se desarrollen conflictos sobre los nombres, de tal forma que, se puedan diferenciar los elementos que están dentro de un mismo documento XML y tengan el mismo nombre, pero pertenezcan a diferentes distribuciones.
− Declaración: (nombre_elemento xmlns:prefijo=”URI del espacio_de_nombres”)
* El URI correspondiente al espacio de nombres tiene que ser único, aunque no exista ninguna conexión que lo compruebe. El URI es un nombre lógico del espacio de nombres.
* Definimos el espacio de nombres como los diferentes lugares que pueden hacer referencia a un espacio de nombres en concreto. Todos los elementos llevan antepuesto el prefijo del espacio de nombres.
• Además, también podemos declarar un espacio de nombres distinto para un elemento que descienda de otro, que ya haya declarado otro espacio de nombres. \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ d) Espacio de nombres por defecto: − En estos espacios de nombres no tenemos la obligación de definir un prefijo. Su ámbito de aplicación correspondiente es el del elemento en el que se ha declarado junto con sus elementos descendientes. No a sus atributos.
• Para añadir un espacio de nombres a un documento XML que ya está creado, iremos insertando el prefijo a los elementos y atributos. Este proceso resulta un poco pesado y puede provocar una serie de errores. Así podemos evitar escribir prefijos.
• Uno de los mayores inconvenientes que se puede dar en el espacio de nombres por defecto es que el espacio de nombre al que nos referimos solo afecte al elemento que está declarado y a sus descendientes. No a sus atributos. \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ e) Atributos especiales:
• xml: space. Utilizado para indicar a la aplicación XML si debe tener en cuenta los espacios en blanco.
• xml: Lang. Ofrece la posibilidad de indicar el idioma en el que está escrito, diferenciando entre:
o Código que contiene solo dos letras
o Identificador para el idioma.
o Identificador que define el usuario
• xml: base. Puede definir una URI diferente a la existente en el documento.
10- UTILIZACIÓN DE LENGUAJES DE MARCAS EN ENTORNOS WEB: EVOLUCIÓN HISTÓRICA
− Cuando hablamos del origen de HTML nos remontamos al año 1980, que fue cuando el físico Tim Berners-Lee, que trabajaba para CERN (Organización Europea para la Investigación Nuclear), propone un nuevo sistema de “hipertexto” para que de pudieran compartir diferentes documentos.
− Estos sistemas de “hipertexto” ya se habían desarrollado con anterioridad, aunque en el ámbito de la informática; cuando se habla de “hipertexto” se refiere a que los usuarios puedan acceder a la información que esté relacionada con aquellos documentos electrónicos que están visibles. Así, los “hipertextos” iniciales, se asimilaban a los enlaces a las distintas páginas web.
− Años posteriores, Tim Bereners-Lee se une con el ingeniero de sistemas Robert Cailliau, con el que gana la propuesta WorldWideWeb (W3):
1) En 1991 se presenta el primer documento con descripción de HTML y bajo el nombre HTML Tags (Etiquetas HTML). 2) En 1993 se presenta la primera propuesta oficial para convertir HTML en un estándar. Aunque existieron avances muy significativos, porque se definieron las etiquetas de imágenes, las tablas y los formularios, no se llegó a conseguir ser el estándar oficial. 3) Ya en 1995, es el organismo IETF quien se encarga de poner en marcha un grupo para trabajar con HTML, y es cuando se consigue publicar, el 22 de septiembre de 1995, el estándar HTML 2.0, siendo este el primer estándar oficial de HTML. 4) A partir del año 1996, los diferentes estándares de HTML los publica otro organismo distinto denominado W3C (World Wide Web Consortium), llegando a publicar la versión HTML 3.2 el 14 de enero de 1997. Esta fue la primera recomendación de HTML que publicó W3C. 5) Con la versión HTML 4.0, publicada el 24 de abril de 1998, se consiguieron numerosos avances sobre las versiones anteriores, y aparecía la posibilidad de añadir pequeños programas (scripts) en las páginas web con lo que se conseguía mejorar la accesibilidad de las páginas que ya estaban diseñadas, trabajar mediante la utilización de tablas más complejas y mejora de los formularios. 6) La publicación de HTML 4.01 (publicada en 1999), basada, sobre todo, en revisar publicaciones anteriores, pero no añade avances significativos. Detuvo un poco el desarrollo de HTML para centrarse más en el estándar XHTML. 7) Sobre el año 2004 y debido a este parón que existió, algunas empresas como Appel, Mozilla y Opera empezaron a mostrar su preocupación por la falta de interés que estaba existiendo del W3C DE HTML, y fue entonces cuando empezaron a organizar una nueva asociación denominada WHATWG (Web Hypertext Application Technology Working Group). 8) El 22 de enero de 2008 se publica el primer borrador oficial del estándar HTML5. 9) En marzo del 2007 se publican distintos borradores de HTML5.0. 10) De forma paralela, se seguía avanzando sobre la estandarización de XHTML (versión avanzada de HTML basada en XML), publicando su primera versión en enero del 2000. 10) XHTML 1.0 está basado en la adaptación de HTML 4.01 al lenguaje XML por lo que utiliza sus mismas etiquetas y muchas de sus características, aunque añade algunas nuevas. 11) La versión XHTML 1.1 y XHTML 2.0 se publicaron en forma de borrador con la intención de poder modularizar XHTML.
11- CUADRO EVOLUCIÓN HISTÓRICA:
AÑO EVENTO 1991 Nacimiento. “HTML tags” 1993 HTML 1.2 1995 HTML 2.0 1994 Se funda W3C 1997 HTML 3.2 1998 HTML 4.0 y XML 1999 HTNK 4.01 2000 XHTML 1.0 2001 XHTML 1.1 2002 XHTML 2.0 2003 XFORMS 2004 Se funda WHATWG 2008 Borrador de HTML 5
12- Identificación de etiquetas y atributos de HTML
− HTML es un lenguaje de marcas que nos permite desarrollar diferentes páginas web.
− Para ello, necesitamos:
• Un editor de textos ASCII mediante el que vamos a poder añadir el
contenido que pretendemos mostrar.
• Un navegador web con el que podemos visualizar el contenido de la página.
− Todos aquellos ficheros que contengan documentos HTML van a tener como extensión .HTML o .htm.
− Otro editor HTML (aunque un poco más específico), puede ser WYSIWYG (What You See Is What You Get), que se traduce como “Lo que ves, es lo que obtienes”. De esta forma, podemos escribir diferentes documentos HTML y ver, de forma simultánea, cómo quedaría el resultado final de la página web, de la misma forma que se vería cuando la publicásemos en Internet.
− También existen otras herramientas de edición, que podemos utilizar para llevar a cabo la realización de diferentes páginas web de forma más profesional, como pueden ser, entre otras, Aptana, Amaya, Dreamweaver y Kompozer. Esta serie de editores:
• Algunas etiquetas (directivas) de HTML sin que las tengamos que teclear.
• Reglas estilo CSS.
• Diferentes funciones destinadas a la creación y mantenimiento de la página web.
− Cuando tengamos la página web lista para su posterior publicación en Internet, vamos a necesitar un servidor de páginas web en los que podamos almacenar las distintas páginas. El servidor web es un software que se encuentra en el propio ordenador y debe estar conectado siempre a Internet. Cuando pongamos las páginas en el servidor, ya serán accesibles a todos los usuarios que pertenezcan a la misma red.
13- ETIQUETAS Y ATRIBUTOS:
1- ETIQUETAS
− Las etiquetas, también conocidas como marcas, definen una serie de elementos que forman el léxico del lenguaje HTML. Se encuentran entre los signos de menor que < y >.
− Podemos diferenciar entre dos tipos de etiquetas: cerradas y abiertas.
a) Etiquetas cerradas: Consta de una etiqueta para la apertura que indica el comienzo de la etiqueta y otra de cierre que indica que hemos terminado de trabajar con la etiqueta en cuestión y lleva el símbolo “/” antes del nombre. Por ejemplo:
>p>
...
>/p>
b) Etiquetas abiertas: Cuentan con una única palabra reservada para indicar el inicio y fin de la etiqueta a la vez. Por ejemplo:
>hr>
>br>
>img> \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ 2- ATRIBUTOS − Los atributos, al igual que las etiquetas, se pueden definir tanto en mayúsculas como en minúsculas, aunque los valores que se asignen a los atributos sí son sensibles a mayúsculas o minúsculas. Por ello, es recomendable utilizar siempre minúsculas para etiquetas y para los atributos y, de esta forma, evitar confusiones.
− Las etiquetas pueden contener atributos si necesitan realizar alguna configuración sobre alguna característica determinada. Estos atributos se definen a continuación de la palabra reservada en la etiqueta de apertura separada por un espacio en blanco y antes del signo de cierre.
− Asignaremos el valor correspondiente al atributo a través del signo (“=”). Cada comando cuenta con una serie de atributos con sus correspondientes valores, como, por ejemplo:
>p>
Definición de un párrafo y alineación del texto a la izquierda.
− Es recomendable poner el valor entre dobles comillas para que sea más legible.()
- ESTRUCTURA BÁSICA
− Las etiquetas que utilicemos en HTML siempre van a ir entre los símbolos “”. Y cada vez que tengamos que cerrar una etiqueta, pondremos el nombre correspondiente comenzando con el símbolo “/”.
− Todas las etiquetas afectan al código que se encuentre delimitado entre la apertura y cierre de la etiqueta correspondiente.
− Estructura básica:
>html> Inicio del documento
>head> Comienzo de la cabecera
>title> Título del documento >/title)
>/head> Fin de cabecera
>body> Inicio del cuerpo
...
>/body> Fin de cuerpo
>/html> Fin documento
− HTML5, mediante unas etiquetas nuevas, añade una serie de características y elementos cuya función es facilitar la tarea a los autores de la aplicación web.
− HTML5 se basa principalmente en una estructuración avanzada que se encarga de definir los contenidos agrupándolos en distintas etiquetas que tengan un nombre asignado correspondiente con la tarea que se va a realizar.
− Etiquetas básicas HTML5
• >header> Encabezado de la página.
• >nav> Enlaces de navegación.
• >article> Algún artículo que se haya publicado.
• >section> Parte correspondiente a algún artículo.
• >aside> Barras laterales.
• >footer> Pie de página.
• >dialog> Distintos diálogos o comentarios.
− Además de estas etiquetas, HTML5 también cuenta con elementos como >div> y >span>, que utilizados para poder agrupar los diferentes elementos hijos haciendo
uso de atributos como: class, id o tittle. De esta manera, se pretende utilizar una misma semántica con un estilo común.>/span> >/div>
15- COMENTARIOS:
− Son unas líneas que definen, de cara al usuario, lo que vamos realizando en cada momento, aunque no se interpretan por el navegador.
− Van escritos entre los símbolos (!- - y - -).
− Por parte del desarrollador, es conveniente utilizar una serie de comentarios para explicar, con sus palabras, lo que se va realizando en cada momento.
- Ejemplo:
> !- - Esto es un comentario - - >
16- NORMAS EN XHTML:
− Para que un documento XHTML esté bien formado debe cumplir una serie de normas que detallamos a continuación:
1) Todas las etiquetas y atributos deben ir en minúsculas. 2) Todas las marcas deben cerrarse. 3) No se permiten errores de acoplamiento entre las marcas. 4) Los valores de los atributos deben ir entre comillas dobles.
17- ELEMENTOS DE UN HTML: CABECERA
− La cabecera del programa se encuentra siempre entre:
> head >
…
> /head >
− Y se encuentra dentro de un elemento superior como es >html>.
− Las marcas que se pueden utilizar dentro de las cabeceras son: >title>, >base>, >meta>, >link>, >object>, >script>, >style>. Todas son opcionales excepto la primera.
− Dentro de la cabecera es donde vamos a definir los elementos generales, como el:
a) título de la página: . Es el título que va a aparecer en el navegador web, en la barra superior.
b) . Encargada de indicar el contenido de nuestras palabras junto con las palabras clave. Esta directiva suele llevar dos atributos: name y content, que hacen referencia al nombre de la página y a sus principales contenidos.
Otro uso diferente de la etiqueta es el “refresco automático” que, transcurrido un tiempo estimado, pasa a actualizarse de nuevo la misma página. Es bastante recomendable para aquellas páginas en las que el contenido se modifica con mucha frecuencia.
Con esta instrucción estamos indicando que, pasados 10 segundos, se acceda a la página web de Google.
c) Otro elemento de mucha utilidad es el elemento , al que le podemos indicar una URL base de algún documento, sonidos, gráficos, etc. Que hagan referencia a una determinada página web.
d) . Define el formato del vínculo a la hora de indicar el comando href en el cuerpo.
e) . Lo utilizaremos para insertar, entre su apertura y cierre, un script implementado en otro lenguaje mediante el atributo type, indicamos el lenguaje de programación, y mediante el atributo src definimos la URL del script en el caso de que sea externo,
f) Marca que nos permite insertar una hoja de estilo en la cabecera. Mediante el atributo type, indicamos el lenguaje del estilo. En este caso, utilizaremos siempre el CSS.
>style type =”text/css”>
body{
margin-left:40px;
}
*Cuando creamos una página web, es conveniente que, al comienzo, realicemos una planificación de su diseño para, después, ordenar la información y recursos disponibles que se van a ofrecer. Para llevar a cabo esta tarea, es recomendable que hagamos uso de una estructura de directorios.
18- ELEMENTOS DE UN HTML: CUERPO DEL DOCUMENTO
− El cuerpo del programa se encuentra siempre entre:
>body>
…
>/body>
− Siempre situado detrás de la cabecera . Va a contener todo el cuerpo correspondiente a una determinada página web junto con los elementos propios de la página como pueden ser gráficos, textos, imágenes, etc.
− En el cuerpo de un programa también tenemos la posibilidad de definir una serie de acciones necesarias para eventos más concretos, entre los que podemos destacar:
1) onload. Cuando se descarga el contenido completo de una página. 2) onunload. Cuando un documento se va a descargar. 3) ononline. Cuando hay conexión a Internet. 4) onoffline. Cuando no hay conexión a Internet. 5) onafterprint. Cuando terminamos de imprimir un documento. 6) onbeforeprint. Cuando finalizamos la impresión de un documento.
− Además, existen un conjunto de atributos (opcionales) de que permiten realizar diferentes configuraciones sobre la apariencia de un documento. Hoy en día están obsoletos, ya que HTML5 no los soporta. Algunos de ellos son: bgcolor, text, link y vlink.
− Existen algunos atributos que sí son recomendables utilizar en la marca , como pueden ser:
a) id: para identificar el elemento para la hoja de estilo. b) class: para asignar un nombre de la clase de la hoja de estilo y, de esta forma, poder mejorar su rendimiento. c) title: para agregar un comentario y así lo puedan visualizar los navegadores. d) style: aplicamos un estilo a este elemento.
19- LOS ELEMENTOS DEL CUERPO SE PUEDEN DIVIDIR EN:
− Elementos de bloque, cuando en su interior contiene otros elementos de HTML y la propia información, formando así una gran estructura.
− Elementos de línea, estos elementos, solo pueden contener datos y otros elementos de línea.
20: CABECERAS:
− Existen seis tipos diferentes de cabeceras (elementos de encabezado).
− Las marcas de apertura y cierre son obligatorias, y el atributo que podemos utilizar es align para alinear este título.
− Los tipos de cabecera son: >h1> >/h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6>
− El texto que se escriba en h1 va a ser el del título de mayor tamaño hasta el de h6, que va a ser el menor.
21- PÁRRAFOS
− Es una de las marcas más utilizadas. No puede contener elementos de bloque en su interior. Todos los párrafos del documento web van a ser bloques delimitados por la marca p, dejando al navegador el ajuste al ancho de la página.
− A la hora de insertar un espacio es necesario insertarlo mediante el carácter  , ya que habrá navegadores que ignoren el espacio en blanco del teclado.
<p> Escribe un texto en forma de párrafo.</p> <blockquote> Permite visualizar una cita con el margen izquierdo mayor produciéndose un efecto de una sangría.</blockquote> <pre> Devuelve una copia exacta del texto respetando los espacios en blanco, tabulaciones y retorno de carro, es decir, tal y como se ha escrito.</pre>
22- SALTOS DE LÍNEA:
− <br></br>Representa un salto de línea entre párrafos, ya que el salto de línea del teclado lo ignora el navegador. No necesita marca de cierre.
− <hr>Existe una forma de separar cada párrafo, utilizando una línea horizontal visible. No necesita etiqueta de cierre y podemos utilizar los siguientes atributos: align, noshade, size, width.
23- SEMÁNTICA EN TEXTOS:
− Son una serie de elementos HTML que ofrecen un significado a una parte del contenido de un texto, haciendo uso del texto en negrita, subrayado o cursiva (<b></b>, <u> </u> y <i> </i>).
<b> Negrita
<i> Cursiva
<big> Agrandar el tamaño. Se puede introducir varios comandos para hacerlos más grande
<small> Pequeño. Funciona de la misma forma que big
o Tachado de texto
<u> Subrayado</u></small></big></i></b>
24- COLORES:
− Podemos representar los colores mediante el símbolo de “#” seguido de tres pares de dígitos hexadecimales.
− El rango de colores indica la intensidad de los colores
primarios (rojo, verde y azul), que en dígitos hexadecimales son (#RRVVAA).
− Los diferentes pares de cifras hexadecimal van a oscilar desde 00 hasta FF proporcionando un rango que va desde 0 hasta 255 valores diferentes.
− Otra forma de expresar colores en HTML es haciendo uso de una notación hexadecimal más corta, que utiliza un dígito para cada color (#JVA). En este caso, el rango de valores va a oscilar entre 0 y 15 o, si lo preferimos, podemos indicar el color de forma directa: red, green, blue.
25- HIPERVÍNCULOS:
− Son elementos del lenguaje HTML que permiten acceder a otro recurso; es decir, lo podemos definir como un enlace que apunta a otro sitio web, un
fichero, una imagen, etc.
− La sintaxis que debemos utilizar a la hora de incluir un hipervínculo es:
<a> </a>
de tal forma que el texto que se encuentre en esa directiva se puede convertir en un hipervínculo. Si hacemos clic con el ratón, nos debe llevar al sitio referenciado.
- En el caso en el que el sitio web esté referenciado por un texto, debe aparecer subrayado y de otro color.
- El atributo href es el que nos ofrece la posibilidad de crear un hiperenlace. Debemos indicar una URL que va a ser a la que queramos acceder al hacer clic en el hiperenlace. A continuación, si en el elemento <a> no indicamos el atributo href, entonces el elemento representa un marcador de posición que va a ser a la que referencie otro hipervínculo en su atributo href.</a>
- Disponemos de otro atributo target (opcional) que va a hacer referencia al destino en el que se va a mostrar la información disponible en esa dirección a la que nos lleva.</a>
26- ANCLAS Y VÍNCULOS INTERNOS:
- Permiten acceder a un sitio concreto dentro de una página web. Aunque, si queremos hacer uso de los vínculos internos, antes debemos establecer un ancla que es el punto fijo de posición al que accederemos tras un vínculo interno.
27- RUTAS RELATIVAS Y ABSOLUTAS:
1) Absolutas.
- Aquellas que enlazan con páginas, cuya dirección absoluta se indica en el atributo href del comando a.
- Suelen ser páginas web externas a nuestro proyecto.
>a href=”http://www.google.es”> - Las direcciones absolutas empiezan a direccionarse desde el comienzo de la ruta que indicamos.
2) Relativas.
- Aquellos enlaces cuya dirección relativa se indica en el atributo href del comando a.
- Suelen ser enlaces a páginas internas al mismo proyecto.
>/a»a href=”./pagina2/pagina2.html”> - Empiezan a direccionarse a partir del directorio actual.
28- IMÁGENES:
- Pueden estar en diferentes formatos como pueden ser los mapas de bits (archivos PNG, GIF, JPEG), documentos vectoriales de una página (archivos PDF,
XML), mapas de bits animados, gráficos de bits animados, etc. Aunque existen otros tipos de archivos que no se consideran imágenes, como pueden ser los archivos PDF de varias páginas, interactivos, documentos HTML, documentos sin formato, archivos SVG. - Gracias al elemento <img></img> podemos representar una determinada imagen ayudados por su atributo (obligatorio) src. En este caso, indicamos:
1) La dirección válida en la que está la imagen que queremos visualizar.
2) Una ruta relativa si es que la imagen está en alguna parte local.
3) Una URL si se refiere a una imagen externa que se encuentra almacenada en una página web diferente. - El atributo alt nos permite que indiquemos un texto alternativo que sea capaz de representar el contenido de una imagen. Podemos utilizar esta forma en el caso en el que el navegador no pueda visualizar o descargar las distintas imágenes.
- Las etiquetas y son novedosas para HTML5, y nos ofrece la posibilidad de agrupar una imagen junto con su información o leyenda.
29- INCORPORACIÓN DE IMÁGENES:
- Llegado el momento de añadir imágenes a las diferentes páginas web, debemos contar con que los navegadores permiten trabajar con ficheros que tengan formatos JPEG o GIF, ya que son los más recomendables.
- Si queremos que una imagen se muestre en una web, en primir lugar necesitamos declarar una etiqueta <img></img>, que no necesita etiqueta de cierre.
Por ejemplo: >img src=”imagen.jpg” alt=”Texto”> - Aparte de estos dos atributos, también contamos con algunos más que mostramos en la siguiente tabla.
src URL Indica la URL de la imagen.
alt Texto Define un texto alternativo
por si no se encontrara la
imagen deseada.
Align Top, middle, Alinea la imagen respecto al
bottom, Left, Right, texto, tanto en sentido
center horizontal como en sentido
vertical.
Border Número Pone un borde o marco a la
imagen. Se expresa en
píxeles.
Height Número % Especifica la altura que debe
tener la imagen. Se expresa
en píxeles o porcentaje.
Width Número % Especifica el ancho que debe
tener la imagen. Se expresa
en píxeles o porcentaje.
hspace Número Especifica en píxeles la
separación horizontal entre el
texto y la imagen.
vspace Número Especifica en píxeles la
separación vertical entre el
texto y la imagen.
30- USO DE MAPAS SENSIBLES:
- Nos permiten definir distintas zonas “pinchables” dentro de una imagen. De tal forma que el usuario puede hacer clic sobre las zonas definidas y, cada una de estas, puede apuntar a una URL distinta.
- Las diferentes zonas que se definen en una imagen se van creando mediante rectángulos, círculos y polígonos. A la hora de crear un mapa de imagen:
1) En primer lugar, insertamos la imagen original mediante la etiqueta <img></img>.
2) A continuación, utilizaremos la etiqueta (map) para definir las diferentes zonas o regiones de la imagen. Cada una de estas zonas, la definiremos con la etiqueta (area). - Estructura:
a) Mapa de imagen (map)
b) Atributos comunes Básicos, i18n y eventos.
> href = “url” –URL a la que se accede al pinchar sobre el área.
> nohref = “nohref” – Se emplea para las áreas que no son seleccionables.
> shape = “default | rect | circle | poly” – Indica el tipo de área que se define (toda la imagen, rectangular, circular o poligonal).
c) Atributos específicos (area)
> Name = “texto”. Nombre que identifica de forma única al mapa definido (es obligatorio indicar un nombre único).
> coords = “lista de números” – Se trata de una lista de números separados por comas que representan las coordenadas del área. Rectangular = X1, Y1, X2, Y2 (coordenadas X e Y del vértice superior izquierdo y coordeandas X e Y del vértice inferior derecho). Circular = X1, Y1, R (coordenadas X e Y del centro y radio del círculo). Polígonal = X1, Y1, X2, Y2, …, XnYn (coordenadas de los vértices del polígono. Si las últimas coordenadas no son iguales que las primeras, se cierra automáticamente el polígono uniendo ambos vértices).
d) Tipo de elemento Bloque y en línea.
e) Descripción Se emplea para definir mapas de imagen.
31- LISTAS:
A) Listas numeradas:
- Ofrece la posibilidad de poder representar los diferentes elementos de una lista enumerándolos a todos dependiendo del lugar que ocupen.
- En las listas numeradas, utilizan las directivas:
<ol>
<li>Apartado 1</li>
<li>Apartado 2</li>
...
</ol>
- La directiva <ol> tiene disponibles los siguientes parámetros:
> start = numero. Permite seleccionar el número que deseemos que sea el primero de la lista.
> Type = tipo. Nos permite seleccionar el tipo de numeración que deseemos. - En HTML5, podemos diferenciar entre los siguientes tipos:
- Expresa números desde 1, 2, 3, etc.
a. Expresa letras minúsculas a partir de a, b, c, etc.
A. Expresa letras mayúsculas a partir de A, B, C, etc.
i. Expresa números romanos desde i, ii, iii, etc.
I. Expresa números romanos en mayúscula desde I, II, III, etc.
__________________
B) Listas no numeradas:
- Expresa números desde 1, 2, 3, etc.
- Ofrece la posibilidad de poder representar los diferentes elementos de una lista sin enumerar independientemente del lugar en el que se vayan a almacenar. Lo que sí lleva es una especie de “viñeta” para marcar la lista.
- En las listas no numeradas, utilizan las directivas:
</ol><ul>
<li>Apartado 1</li>
<li>Apartado 2</li>
...
</ul>
- La directiva <ul> tiene disponibles los siguientes parámetros:> Type = tipo. Nos permite seleccionar el tipo viñetas que deseemos.
- En HTML5, podemos diferenciar entre los siguientes tipos:
> disk. Expresa una viñeta en forma de disco.
> circle. Expresa una viñeta en forma de círculo.
> square. Expresa una viñeta en forma de cuadrado.
__________________
C) Listas de definición o glosario: - Ofrece la posibilidad de poder representar los diferentes elementos de un diccionario formado por su término y su definición.
- En las listas de definición, se utilizan las directivas:
<dl>
<dt>Coche</dt>
<dd>Vehículo de cuatro ruedas</dd>
<dt>Moto</dt>
<dd>Vehículo de dos ruedas</dd>
...
</dl></ul>
32- AGRUPACIÓN DE CONTENIDOS:
<div></div>
- Esta marca sirve para agrupar varios elementos dentro de un bloque y permite asignarle un identificador.
33- TABLAS:
- Son elementos de HTML que nos ofrecen la posibilidad de representar datos de una o varias dimensiones (matriz) con la información distribuida en filas y columnas.
- Uno de los objetivos que pretende HTML5 es conseguir separar el contenido que se pretende mostrar de una página web, de la forma que lo ha presentado, mediante hojas de estilo CSS.
- A la hora de definir una tabla, debemos hacerlo con la siguiente directiva:
>table>
…
>/table> - Hasta el momento, y para versiones anteriores a HTML5, se han podido utilizar distintos atributos como: align y bgcolor. Sin embargo, desde la aparición de HTM5, soporta los siguientes atributos:
> summary, realiza el resumen y la estructura de la tabla para facilitar la tarea de los buscadores.
> width, indica el ancho total de la tabla en distintas unidades. Podemos hacerlo en píxel (px) o porcentaje (%).
> frame, indica el nombre del marco en el que se puede visualizar la tabla.
> rules, especifica las líneas de división que serán visibles.
> border, determina el ancho del borde anterior.
> cellspacing, especifica el espacio existente entre las distintas celdas.
> cellpadding, especifica el espacio existente entre el borde de las celdas y el contenido. - Si tenemos una tabla, el primer elemento que podemos representar es el que aparece dentro de la etiqueta: (caption)(/caption)
Representa el título de la tabla que lo contiene.
34- COMBINACIÓN DE CELDAS:
- Es posible combinar un conjunto de celdas de una determinada tabla por lo que van a afectar a su definición:
>colgroup> Representa las columnas de una tabla >/col> Indica el número de columnas que tiene una tabla
- Disponemos de un conjunto de elementos que nos permiten referirnos a las diferentes partes de una tabla en el lenguaje HTML:
>thead> Cabecera
>tbody> Bloques de filas
>tfoot> Pie
35- FILAS, COLUMNAS Y CELDAS:
- Las tablas se omponen de un número de filas y columnas que se pueden representar a través de la directiva: >tr> >/tr>
Que permiten definir una nueva fila. - Después, cada fila, cuenta con una serie de elementos: (td> >/td>
Nos permiten ir generando las diferentes columnas con su valor asignado dentro deuna determinada fila. - Realiza columnas de cabecera y contiene un texto centrado y en negrita. >th> >/th>
Cada dato de una fila y una columna determinada, contiene un dato que denominamos valor.
36- FORMULARIOS:
- Los utilizaremos cuando necesitamos recoger la información específica de un objetoen cuestión.
- Están compuestos, entre otros, por diferentes elementos como las cajas de texto (textBox), casillas de verificación (checkbox), casillas de opción (radio
button) , listas desplegables y subformularios. - Toda la información que recogen los formularios debe tratarse por archivos que se deben implementar por el propio desarrollador. De esta forma, lo almacenaremos
en bases de datos diseñadas previamente que, en este manual, no vamos a detallar ya que solo nos centraremos en la definición y diseño de los formularios. - Esta información también puede ser enviada o procesada mediante email o servidor
web a través de un botón de envío (submit).
37- PROPIEDADES DE LOS FORMULARIOS:
- Un formulario se define mediante el comando:
>form>
…
>/form> - Por tanto, dentro de este bloque, debemos implementar todos los elementos necesarios que hemos enumerado previamente.
- Esta marca form consta de varios atributos bastante importantes, como pueden ser los atributos:
1) action: indica el lugar al que se envían los datos.2) method: indica el método de transferencia de los datos en el servidor web. Los valores que puede tomar este atributo pueden ser:
2. 1) post. Para el envío de los datos al usuario de forma codificada.
2. 1) get. Para el envío de los datos a una dirección web.3) target: se utiliza para indicar o especificar dónde vamos a mostrar la respuesta del formulario. Los diferentes valores que puede tomar este atributo son:
»_space; “_blank”. Se muestra en una ventana nueva.
»_space; “_self”. Se muestra en la misma ventana del formulario.
»_space; “_parent”. Se muestra en la ventana padre, es decir, la que precede al formulario.> name: identifica al formulario mediante el nombre. De esta forma, podemos llamarlo desde otro archivo. Recomendamos que el nombre de formulario sea único para facilitar su tratamiento.
38- ELEMENTOS DE LOS FORMULARIOS:
- Dentro de un formulario podemos tener distintas directivas que van a componer todo el diseño. Para comenzar, podemos agrupar un conjunto de elementos bajo un nombre, utilizando el comando . (fieldset) (/fieldset).
- A continuación, y mediante las etiquetas: (input) (/input)
- Vamos a poder crear varios tipos de elementos dentro de un formulario, dependiendo del valor que asignemos al atributo type. Lo primero que recomendamos dentro de esta marca es especificar el valor del atributo name, ya que de esta forma, podemos identificar el elemento.
- Seguidamente, mediante el atributo type, elegiremos el tipo de elemento que deseamos tener en el formulario.
- En este caso, definiremos un campo de texto de grandes dimensiones para que el usuario tenga la posibilidad de escribir todo lo deseado sin ningún tipo de limitaciones. Este comando se utiliza en muchos formularios cuando escribimos en un campo de observaciones. (textarea) (/textarea)
- Los atributos de esta marca serían los siguientes:
1) name. Identifica el nombre del área de texto.
2) cols. Número de caracteres que puede contener cada línea.
3) rows. Número de líneas del área de texto.
4) readonly. Para impedir que el usuario pueda editar este campo. - > button> >/button> De esta forma insertamos un botón. Aunque también podemos hacerlo con el comando input. Podemos añadirle el atributo type, donde podemos indicar el tipo de botón que deseemos, (submit | reset | button).
- Este bloque de comandos se utiliza para definir una lista desplegable con opciones. Tendremos tantas marcas options como opciones deseemos tener en nuestra lista.
>select>
>options>
>/options>
>/select>
- Asignamos un título o etiqueta a un determinado campo del formulario.
>label> >/label> - Agrupa distintos elementos del formulario por distintas temáticas. >fieldset> >/fieldset>
