Publicado el 2 de Marzo del 2021
320 visualizaciones desde el 2 de Marzo del 2021
103,6 KB
7 paginas
Creado hace 12a (30/09/2011)
Concepto Básicos de XHTML - Vol 1
Jorge Alonso Toro Hoyos
26 de Septiembre del 2010
Puede encontrar la versión actualizada en
http://jolthgs.wordpress.com/
Copyright © 2010 Jorge Toro http://jolthgs.wordpress.com/
Conceptos Básicos de XHTML - Vol 1.
by Jolth
Copyright © 2010 Jorge Toro
Copyright © 2010 Jorge Toro http://jolthgs.wordpress.com/
Índice general
1 Esquema de un documento xhtml
2 Reglas de xhtml
3 Sintaxis de un elemento xhtml
4 Tipos de Atributos Comunes en xhtml
5 Elementos HTML
6 Código JavaScript
Copyright © 2010 Jorge Toro http://jolthgs.wordpress.com/
Conceptos Básicos de XHTML
1. Esquema de un documento xhtml:
a. CODIFCACIÓN: formato de caracteres para nuestro archivo unicode(utf-8).
<? xml version="1.0" encoding=" UTF-8" ? >
Esta línea debe estar al principio del documento, pero si usas PHP no debes usarla al
principio del documento sino dentro del <head>:
<meta http-equiv="Content-Type" content=" text/html; charset=utf-8" />
b. DOCTYPE(DTD): describe el tipo de normativas que contiene el documento.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Existe 3 tipos de doctype para xhtml. strict, logra la visualización idéntica en diferentes
navegadores. transitional, compatibilidad con navegadores antiguos. Frameset, páginas que
usan frame.
c. HTML: etiqueta de inicio del cuerpo html tradicional, donde debe estar nuestro documento.
Además debemos indicar nuestro tipo de documento, que en nuestro caso sería xhtml y el
idioma a usar en nuestra web.
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
d. HEAD: cabecera del documento html, es el lugar donde se definen los metadatos o
metainformación como: metadatos, title, link, CSS, scripts, información para buscadores etc.
Todo lo que afecte a nuestra página menos en su formato o contenido.
<title>Nombre de la página</title>
<meta >
<link >
<style >
<script >
<head>
</head>
<body>
<body>
e. BODY: es el lienzo de nuestra página web, el lugar donde se almacenarán todos los
elementos que le darán formato a nuestro documento.
Cuerpo del Documento
Entonces un documento xhtml tendría la siguiente estructura:
Copyright © 2010 Jorge Toro http://jolthgs.wordpress.com/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<title>Nombre de la página</title>
<meta >
<link >
<style >
<script >
Cuerpo del documento
</head>
<body>
</body>
</html>
2. Reglas de xhtml:
1. Las etiquetas y atributos son siempre en minúsculas.
2. Los valores de los atributos deben estar entre comillas y no deben comprimirse.
3. Las etiquetas deben cerrarse de acuerdo a como se abren.
4. Todas las etiquetas deben cerrarse.
5. Las etiquetas deben prescindir del atributo name para identificar un elemento y usar
en su lugar id.
3. Sintaxis de un elemento xhtml:
<etiqueta atributo=”valor”> </etiqueta_de_cierre>
ejemplo:
<h1>Este es un Titulo</h1>
Este ejemplo no aplica a todas las etiquetas ya que existen etiquetas que no admiten
contenido como <br>, para este caso especial xhtml presenta una sintaxis diferente para las
etiquetas que deben abrirse y cerrarse consecutivamente:
<br />
4. Tipos de Atributos Comunes en xhtml
Cada etiqueta en html cuenta con sus propios atributos, existen atributos comunes para
muchas etiquetas, para los cuales los dividiremos en cuatro grupos:
a. Básico, se pueden usar prácticamente en todas las etiquetas.
Copyright © 2010 Jorge Toro http://jolthgs.wordpress.com/
Atributo
id = "texto"
Establece un identificador único a cada elemento dentro de una página
HTML
Descripción
class = "texto" Establece la clase CSS que se aplica a los estilos del elemento
style = "texto"
Establece de forma directa los estilos CSS de un elemento
Establece el título a un elemento (mejora la accesibilidad y los
navegadores lo muestran cuando el usuario pasa el ratón por encima del
elemento)
title = "texto"
b. Atributos para internacionalización, para indicar el idioma explícitamente que usa la
página y si se tiene un sitio en varios idiomas.
Atributo
lang = "codigo de idioma"
xml:lang = "codigo de idioma"
dir
Descripción
Indica el idioma del elemento mediante un código
predefinido
Indica el idioma del elemento mediante un código
predefinido
Indica la dirección del texto (útil para los idiomas que
escriben de derecha a izquierda)
c. Atributos de eventos, sólo se usan en las páginas dinámicas creadas con JavaScript.
Atributo
Descripción
onclick, ondblclick, onmousedown, onmouseup,
onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup
Permiten controlar los eventos
producidos sobre cada
elemento de la página
Estos eventos son producidos por teclado, ratón, etc.
d. Atributos para los elementos que pueden obtener el foco, Los elementos de las
páginas web también pueden obtener el foco de la aplicación (en este caso, el foco del
navegador) y HTML define algunos atributos específicos para controlar cómo se seleccionan
los elementos.
Atributo
Descripción
accesskey = "letra" Establece una tecla de acceso rápido a un elemento HTML
tabindex = "numero" Establece la posición del elemento en el orden de tabulación de la
página. Su valor debe estar comprendido entre 0 y 32.767
Controlan los eventos JavaScript que se ejecutan cuando el elemento
obtiene o pierde el foco
onfocus, onblur
En el navegador Internet Explorer se pulsa la tecla ALT + la tecla definida; en el navegador
Firefox se pulsa Alt + Shift + la tecla definida; en el navegador Opera se pulsa Shift + Esc + la
tecla definida; en el navegador Safari se pulsa Ctrl + la tecla definida.
Copyright © 2010 Jorge Toro http://jolthgs.wordpress.com/
5. Elementos HTML
Se tiende a confundir elementos y etiquetas pero un elemento en realidad es más que una
etiqueta y está compuesto por:
• Una etiqueta de apertura.
• Cero o más atributos.
• Texto encerrado por la etiqueta.
• Una etiqueta de cierre.
Además HTML clasifica los elementos en dos grupos:
a. Elementos de Línea: sólo ocupan el espacio necesario para mostrar su contenido. Los
elementos de línea sólo pueden contener texto u otro elementos de línea. Los elementos de
línea son: a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input,
kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var.
b. Elementos de Bloque: inician en una nueva línea y ocupan todo el espacio hasta el final
de la línea, sin importar si su contenido llega hasta el final de la línea. La mayoría de
elementos de bloque pueden contener en su interior elementos de línea y otros elementos de
bloque. Los elementos de bloque son: address, blockquote, center, dir, div, dl, fieldset, form,
h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, nos-cript, ol, p, pre, table, ul.
También son considerados de bloque: dd, dt, frame-set, li, tbody, td, tfoot, th, thead, tr.
También existen algunos considerados como de línea y de bloque: button, del, iframe, ins,
map, object, script.
6. Código JavaScript
<![CDATA
Código JavaScript
]]>
Copyright © 2010 Jorge Toro http://jolthgs.wordpress.com/
Crear cuenta
Comentarios de: Concepto Básicos de XHTML (0)
No hay comentarios