PDF de programación - Concepto Básicos de XHTML

Imágen de pdf Concepto Básicos de XHTML

Concepto Básicos de XHTMLgráfica de visualizaciones

Publicado el 2 de Marzo del 2021
108 visualizaciones desde el 2 de Marzo del 2021
103,6 KB
7 paginas
Creado hace 9a (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/
  • Links de descarga
http://lwp-l.com/pdf18940

Comentarios de: Concepto Básicos de XHTML (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad