UNIVERSIDAD MARIANO GÁLVEZ DE GUATEMALA FACULTAD CIENCIAS DE LA ADMINISTRACIÓN ADMINISTRACIÓN DE EMPRESAS ING. VIVIANA MERIDA INFORMATICA II
ETIQUETAS HTML Y XML
KEMBERLY LEONELA FELIPE VASQUEZ 2522-16-19597 QUINTO CICLO SECCIÓN “B” PLAN DOMINGO
ESCUINTLA 25 DE MARZO DEL 2018
¿Que son las etiquetas HTML? Definición: Las etiquetas HTML son fragmentos de texto rodeados por corchetes angulares < >, que tienen funciones y usos específicos y se utilizan para escribir código HTML. Las etiquetas o tags son la forma de escribir código HTML. En HTML existen etiquetas de apertura y etiquetas de cierre, tienen la forma: <etiqueta> </etiqueta>. Donde <etiqueta> es la etiqueta de apertura y </etiqueta> es la etiqueta de cierre indicada por la diagonal. HTML tiene definidas gran variedad de etiquetas para distintos usos. Aunque la mayoría de las etiquetas tienen su etiqueta de apertura y etiqueta de cierre, es importante aclarar que no todas las etiquetas tienen su correspondiente etiqueta de cierre. Algunos ejemplos de etiquetas son: Etiquetas con etiqueta de cierre Apertura Cierre <html> </html> <head> </head> <body> </body> <p> </p> La etiqueta de apertura y la de cierre son las misma con la única diferencia de la diagonal "/" , es necesario la etiqueta de cierre para limitar el campo de acción de la etiqueta, por ejemplo a etiqueta <p> nos indica el inicio de un párrafo de texto y una vez que se escribe la etiqueta de apertura el navegador tomará como párrafo todo el texto que se encuentre después de dicha etiqueta hasta toparse con la etiqueta de cierre </p>y así con las demás etiquetas según la función de cada una, la mayoría de las etiquetas de HTML son etiquetas de este tipo. Etiquetas sin etiqueta de cierre Etiqueta <br> <img> <hr> <input>
Este segundo grupo de etiquetas no requieren de una etiqueta de cierre debido a que su campo de acción está limitado al lugar en donde se incluye la etiqueta. En el primer ejemplo vemos la etiqueta <br> que sirve para indica un salto de linea, creo que es fácil deducir porque no necesita etiqueta de cierre, pues es un elemento muy simple y el navegador no necesita que le digamos hasta donde "limitar" el campo de acción de esta etiqueta pues los saltos de linea son solo eso "un cambio de renglón y ya", si queremos mas de un salto de linea simplemente escribimos varios <br> seguidos, la segunda etiqueta <img> sirve para insertar una imagen en la página tampoco necesita etiqueta de cierre, ya que la etiqueta se debe ubicar en el lugar en donde queramos insertar la imagen, pero hace falta algo mas para completar la etiqueta ya que un simple "img" no nos dice nada acerca de la imagen, para ello existen los atributos. Atributos de etiquetas. Las etiquetas tienen atributos que nos sirven para especificar ciertos detalles de esa etiqueta, por ejemplo, especificar un color de texto o de fondo, el ancho y alto de algún elemento, su alineación, la ubicación de un documento o imagen, etc. El segundo caso del ejemplo anterior vimos que <img> sirve para insertar una imagen, pero para que la etiqueta funcione necesita de sus atributos, por medio de estos le daremos uso a la etiqueta. Los atributos se escriben dentro de la etiqueta de la siguiente forma: <etiqueta atributo1="algo" atributo2="algo"> Ahora volviendo al ejemplo de la etiqueta <img> es necesario indicar en forma de un atributo la dirección y el nombre de la imagen que queremos que se muestre, esto de la siguiente manera: <img src="carpeta/mi_imagen.jpg"> Con lo anterior nuestra etiqueta <img> ya podrá mostrar la imagen deseada. Hay atributos específicos para cada etiqueta, en este ejemplo mostramos la etiqueta <img> con el mínimo requerido, pero puede llevar mas atributos, que no mencionaré aquí pues no es el tema a tratar, pero si hay que decir que a cualquier etiqueta de HTML se le puede agregar atributos, para algunas etiquetas como esta, será algo forzoso agregar el atributo, pero para otras podrá ser algo opcional, sin embargo, las etiquetas y sus atributos son la base del lenguaje HTML, y por medio de estas es como se construye una página web.
Elemento raíz Etiquet a
Descripción
Atributos principales
html
engloba todo el documento
lang
Elemento raíz Etiquet a
Descripción
Atributos principales
html
engloba todo el documento
lang
Metadatos Etiquet a
Descripción
head
delimita el encabezado del documento
title
título del documento (se muestra en la pestaña del navegador)
base /
URI base para direcciones relativas
Atributos principales
href, target
link /
enlace a otros archivos (hoja de estilo, etc.)
href, rel, media, type, title
meta /
meta información sobre el documento
name, content, charset
style
hoja de estilo incluida en el documento
type, title
Secciones Etiquet a
Descripción
body
delimita el cuerpo del documento
article
artículo
sectio n
sección
nav
navegación
aside
lateral
h1 a h6
encabezado (de nivel 1 a 6)
header
cabecera
footer
pie
addres s
dirección (información sobre el autor)
Atributos principales
Contenido (bloques) Etiquet a
Descripción
Atributos principales
p
párrafo
hr /
separador
div
división
blockq uote
cita larga (que incluye varios párrafos)
pre
texto preformateado
main
principal
figure
ilustración
figcapt ion
pie de ilustración
cite
Texto (en línea) Etiquet a
Descripción
br /
salto de línea
wbr
posible salto de línea
a
hiperenlace
span
contenedor de texto genérico
strong
importante
em
énfasis
sub
subíndice
sup
superíndice
Atributos principales
href, target, download, rel, type
abbr
abreviatura
b
atención
cite
obra
data
datos
value
dfn
definición
title
kbd
teclado
i
tecnicismo
mark
resaltado añadido posteriormente, no en el original
q
cita
s
incorrecto
small
comentario
time
fecha y hora
u
sonido inarticulado
code
código (de programa de ordenador)
samp
salida (de programa de ordenador)
var
variable (de programa de ordenador)
bdo
dirección de escritura
title
cite
datetime
dir
bdi
ignorar dirección de escritura
dir
Modificaciones Etiquet a
Descripción
Atributos principales
ins
texto insertado
cite, datetime
del
texto borrado
cite, datetime
Contenido incrustado Etiquet a
Descripción
Atributos principales
picture imagen múltiple (5.1) para diferentes resoluciones o densidades img /
imagen
alt, src, usemap, ismap, width, height
iframe
marco incrustado en el documento
src, srcdoc, name, sandbox, width, height
embed
src, type, width, height
object
objeto
data, type, width, height
param /
parametro para <objeto>
name, value
video
src, poster, preload, autoplay, loop, muted, controls, width, height
audio
src, preload, autoplay, loop, muted, controls
source
origen de <img>, <audio> o <video>
src, type
track
kind, src, srclang, label, default
map
mapa de imagen
name
area /
área en mapa de imagen
alt, coords, href, hreflang, rel, shape, target, type
Etiquet a
Descripción
Atributos principales
ol
lista ordenada
reversed, start, type
ul
lista no ordenada
li
elemento de lista (ordenada o no ordenada)
dl
lista de definición
dt
término en lista de definición
dd
definición en lista de definición
Listas
value
Tablas Etiquet a
Descripción
Atributos principales
table
tabla
border
captio n
leyenda de tabla
colgro up
grupo de columnas
tbody
cuerpo de tabla (grupo de filas)
span
thead
cabecera de tabla (grupo de filas)
tfoot
pie de tabla (grupo de filas)
tr
fila
td
celda
colspan, rowspan, headers
th
celda de cabecera
colspan, rowspan, headers, scope, abbr
col
columna
span
Formularios Etique ta
Descripci รณn
Atributos principales
form
formulario
accept-charset, action, autocomplete, enctype, method, target
label
etiqueta de un control
form, for
input / control (hay varios tipos)
type (submit, reset, button, text, password, number, search, tel, url, email, date , time, color, range, file, image, hidden, etc.), name, value, checked, selected, width, height, size, maxlength, ...
butto n
botรณn
name, type, value, form
select
caja de lista
name, multiple, size, ...
grupo de opciones en una
label
datali st optgr oup
caja de lista optio n
opción de caja de lista
label, selected, value
textar ea
área de texto
name, cols, rows, ...
outpu t
cálculo
name, for
progr ess
barra de progreso
value, max
meter
indicador
value, min, max, low, high, optimum
fields et
grupo de controles
name, disabled
legen d
leyenda de grupo de controles
Interactivos Etiqueta
Descripción Atributos principales
details (5.1)
desplegable
summary(5.1)
leyenda para <details>
dialog (5.2)
cuadro de diálogo de una aplicación
Scripts Etiqueta
Descripción
Atributos principales
script
script
noscript
contenido a mostrar en navegadores que no admiten <script>
template
plantillas utilizables por scripts
canvas
zona de dibujo utilizable por script
src, type, charset, async, defer
width, height
Notación Ruby Etiqueta
Descripción
ruby
notación ruby
rb
elemento de notación ruby (base)
rt
elemento de notación ruby (texto)
rtc
elemento de notación ruby (contenedor)
rp
elemento de notación ruby (paréntesis)
Atributos principales
Otros Etiqueta
Descripció n
Atributos principales
!DOCTYPE
tipo de documento (versión de html empleada)
<!-- ... -->
comentario (sólo visible en el código fuente)
Etiquetas eliminadas Etiqueta
Descripció n
Atributos principales
keygen
generador de pares de claves
Eliminada en HTML 5.2
menu (5.1)
menú de comandos
Añadida en HTML 5.1. Eliminada en HTML 5.2. Eliminada por el WHATWG en junio de 2017.
menuitem (5.1)
elemento de <menu>
Añadida en HTML 5.1. Eliminada en HTML 5.2. Eliminada por el WHATWG en junio de 2017
¿Que son las etiquetas XML? XML son las siglas de Extensible Markup Language, un lenguage de marcado para guardar y transportar datos legibles para ordenadores y humanos. A pesar de que su diseño está focalizado a documentos, se usa especialmente para la representación de estructuras de datos como en los web services. XML se usa frecuentemente para separar los datos de la presentación. XML no indica cómo presentar la información, un mismo documento XML puede presentarse de muchas formas. Es muy utilizado junto a aplicaciones HTML, donde XML guarda o transporta los datos, y HTML les da formato y los muestra. Cuando se muestran los datos en HTML, no es necesario tener que editar el archivo HTML cuando los datos cambian, XML guarda los datos en archivos separados. Con los lenguajes de programación web como PHP o Javascriptse pueden leer archivos XML y actualizar el contenido de cualquier página HTML. La sintaxis que se utiliza para iniciar un documento XML es la siguiente: <?xml version="1.0" encoding="UTF-8"?> Se define la versión XML y la codificación de caracteres. Los documentos XML forman una estructura de tipo árbol, comenzando desde la raíz (root), con ramas hacia las hojas (leaves). Vamos a ver el siguiente ejemplo de un archivo cine.xml:
Los documentos XML están formados por árboles de elementos. Cada árbol comienza con un elemento root, del cual surgen ramas (branches) a elementos hijo. Todos los elementos pueden tener elementos hijo. Se suelen emplear los términos parent, child y sibling para determinar el parentesco: padre, hijo y hermano. Todos los elementos pueden tener contenido textual ("Mad Max") y atributos (categoria="accion"). 2. Reglas básicas de sintaxis
Las reglas de sintaxis básicas de XML son muy simples:
Todos los elementos XML deben tener un elemento root que es padre de todos los demás ().
La primera línea del documento se llama prolog. <?xml version="1.0" encoding="UTF-8" ?> Es opcional, pero si se incluye ha de ir en la primera línea. UTF-8 es la codificación de caracteres por defecto y la recomendable.
Todos los elementos han de tener su etiqueta de cierre ().
Las etiquetas XML son sensibles a mayúsculas y minúsculas. es diferente a.
Las etiquetas han de ir correctamente anidadas. Esto es incorrecto: Mad Max.
Los atributos XML deben ir entre comillas.
XML tiene caracteres especiales que han de utilizarse de distinta forma para evitar conflicto, son 5:
Sólo < y & están estrictamente prohibidos en XML, pero es recomendable utilizar las demás también.
La sintaxis para escribir comentarios en XML es como en HTML: <!-- Esto es un comentario -->
XML no trunca múltiples espacios (HTML sí lo hace): XML: Hola que tal HTML: Hola que tal
XML interpreta las nuevas líneas como LF (al igual que UNIX y Mac OSX).
3. Elementos en XML Un elemento XML es cualquier cosa que esté incluida entre la etiqueta inicial y la final: <director>George Miller</director> Puede contener texto, atributos, otros elementos o una mezcla de los anteriores: Reglas para los elementos:
Son sensibles a mayúsculas y minúsculas
Deben empezar con una letra o barra baja
No pueden empezar con las letras xml
Pueden contener letras, dígitos, guiones, barras bajas y puntos
No pueden contener espacios
Lo ideal es mantener unos nombres sencillos, evitando caracteres como guiones y puntos. Si los documentos XML tienen una base de datos correspondiente, lo normal es usar los nombres de la base de datos para los elementos. No hay ningún problema, XML es muy flexible y se extiende y adapta a los nuevos elementos. 4. Atributos en XML Los elementos XML pueden tener atributos, como en HTML. Estan diseñados para contener datos relacionados con un elemento específico. Han de ir siempre encerrados en comillas, ya sean simples o dobles: Los atributos de alguna forma están limitados. Al contrario que los elementos, los atributos:
No pueden contener múltiples valores
No pueden contener estructuras en árbol
No se pueden expandir fácilmente (para futuros cambios)
A menudo los atributos se utilizan para asignar ID's a elementos, como si fuera el ID en HTML:
Lo ideal es guardar los metadatos (datos sobre datos) como atributos, y los datos en sí mismos como elementos.