Selecciona el Idioma

sábado, 8 de junio de 2013

XHTML (lenguaje de marcas)

el XHTML es un lenguaje similar al HTML. Se complementa con CSS. Es el lenguaje para la creación de páginas web , como esta (Blogs, contenido web, archivos xhtml). Hay varias versiones de DOCTYPE para crear en XHTML. Para ver el código XHTML, podemos hacerlo de varias formas, descargando el archivo web y abrirlo con un editor de texto (WordPAD, Notepad...), o también desde algunos navegadores como Mozzilla firefox , internet explorer ( botón derecho --> ver código fuente)o Google chorme ( haciendo clic con botón derecho sobre la página que queremos obtener el código y seleccionar "inspeccionar elemento" en google chrome)
La información que obtendremos sera similar a esta ( ver imagen)


Posteriormente, al haber creado el archivo XHTML, se ha de Validar para comprobar que hay 0 errores. sino nuestro archivo es incorrecto y débil. Para ello hacerlo desde: W3C
El archivo XHTML se divide en diferentes partes, veamos algunas de ellas:
HEADcontiene:

  • El título del documento
  • META, determinados datos auxiliares
  • Indicaciones sobre preguntas formales (Hojas de estilo)
  • Herramientas para dinamizar el documento, como por ejemplo un javascript





BODYcontiene:
  • Contenido del texto (cuerpo)
  • Elementos de estructura, como tablas, capas...
  • Imagenes,sonidos, applets de java, animaciones flash...
  • Enlaces(links)... todo lo que se desea crear para la vista de la web.

La creación de estos documentos se ha de realizar mediante un editor de texto (WordPad,Notepad++...) el cual podamos guardar al finalizar con extensión .xhtml o .html (.htm)
Titulo y Parágrafos:
Se introduce dentro del HEAD, justo después del META. Por ejemplo :(sin almohadillas para que se ejecute el código)
<#head>
<#meta http-equiv="Content-Type" content="text/html"; charset=ISO-8859-15" />
<#title> EJEMPLO <#/title>
<#/head>
Mientras que los parágrafos van dentro del BODY. Justo después de cerrar la etiqueta HEAD, como estructura del texto, para separarlo entre parágrafos. por ejemplo:(sin almohadillas para que se ejecute el código)
Después del HEAD <#/head>
<#body>
#<#p>Aquí el primer parágrafo <#/p>
#<#p> Aquí segundo parágrafo <#/p>
#<#p> y así tantos, como quieras <#/p>
<#/body>
ORGANIZACIÓN DE ELEMENTOS:
ELEMENTOS, ATRIBUTOS Y VALORES(quitar almohadillas para que se ejecute el código)
Hay etiquetas que contienen valores por ejemplo lo es el caso de los links 8hipervínculos):
  • <#a href="http://www.google.es"> google <#/a>

El valor del atributo a href es lo que va dentro de las comillas. Es decir, el contenido.
Lo mismo pasa con el atributo imagen ( ver foto de abajo)

DOCUMENTOS EXTERNOS
Los casos más típicos son:
  • Direcciones de otros documentos que nos enlaza el documentos actual.
  • Referencias a imagenes que se han de presentar conjuntamente con el texto.



Estructura Y Forma:
Crear espacios en blanco:(quitar almohadilla inicial para que se ejecute el código ( y el punto que hay en 160, pero no su almohadilla))
sin paréntesis ni almohadillas, para ejecutar código .
& # 1 6 .0;   o también podemos usar <#xsl:text> espacio <#/xsl /text>;
A,H1 Y BLOCKQUOTE
Con <#a href="nombre.htm"> nombre <#/a> creamos un link a este archivo.
Con las etiquetas <#blockquote> nombre <#/blockquote> hacemos que los parágrafos interiores tengan sangría a la izquierda.
las etiquetas <#h1> TITULO <#/h1>, obtenemos el encabezado de mayor tamaño, podemos usar tantos ocmo pequeño lo deseemos, cada número mayor a uno, reduce un poco el tamaño del encabezado. por ejemplo h2,h3,h4,... ( ver imagen de a bajo)

Para hacer los bordes de las capas div redondeados:
border-radius:10px; -moz-border-radius:10px;-webkit-border-radius:10px;
Para cambiar el color al puntero de una lista: (sin almohadillas excepto en el color.)
#li.li1:before{ content:". "; font-family:webdings;font-size:20px; color:#FFA500;}
Acuérdate de hacer un list-syle:none. para que se aplique bien la clase li1:before.

Para crear marquesina  de texto en movimiento de derecha a izquierda:
<MARQUEE>"Aquí el texto"</MARQUEE>


Ejemplo de texto en movimiento



No hay comentarios:

Publicar un comentario