Archive | resume xhtml RSS feed for this section

resumen libro xhtml

25 Ene

2.- Caracteristicas básicas.

Codificacion de caracteres: el proceso de transformación de caracteres en secuencias de numeros.

Paginas de codigo: cada una de las tablas que se realizan para la transformacion.

Marcar: es el proceso de indicar las diferentes partes que componen la informacion.

Etiquetas: son cada una de las palabras que se utilizan para marcas el inicio y final de una seccion.

Aunque existen algunas excepciones en general las etiquetas se indican por pares y de forman:

  1. Etiqueta de apertura: caracter < seguido d enombre de la etiqueta(sin espacios en blanco) y terminado con el caracter>
  2. Etiqueta de cierre: caracter<seguido del caracter/seguido del nombre de la etiqueta(sin espaciosen blanco) y terminado el caracter>
  3. Ejemplo: <nombre_etiqueta>…..</nombre_etiqueta>

El Html es un lenguaje de etiquetas ( tambien llamado lenguaje de marcado) y las paginas web habituales estan foprmadas por cientos o miles de pares de etiquetas.Existen muchos otros lenguajes de etiquetas como Xml,Sgml,ocbook y Mathml.

El primer documento HTML

Las paginas html se dividen en dos partes:

  1. La cabecera: contiene todo lo que no se ve de la pagina( con excepcion del titulo)
  2. El cuerpo o body: contiene todo lo que el usuario ve en la pantalla
  3. Este es el codigo sencillo de inicio de cualquier pagina web.

<html>

<head>

<title> empezamos</title>

</head>

<body>

el lenguaje de html es <strong>sencillo </strong>

</body>

</html>

Ahora si quieres verlo y probar:

  1. Abre un editorde archivos de texto y crea un archivo.
  2. Copia el codigo html mostrado anteriormente y pegalo en el archivo creado.
  3. Guarda el archivo con el nombre que quieras , pero con la extension .html

Las tres etiquetas principales del documento son:

  1. <html> indica el comienzopy el final del documento html.
  2. <head> delimita la parte de la cabecera del documento. ejemplo: titulo y el idioma d ela pagina. Solo es visto por el usuario el titlelo demas no se ve.
  3. <body> delimita el cuerpo del documento html.

2.3 Etiquetas y atributos

En html se definen 91 etiquetas. A pesar de que es un numero grande no es suficiente para crear paginas complejas. Elementos como las imagenes y los enlaces requiren cierta informacion adicional para estar definidos. la etiqueta <a> se utliza para incluir un enlace en un pagina pero solo con la etiqueta <a> no es posible hacer el enlace y como no es viable crear una etiqueta por cada enlace diferente, la solucion consiste en personalizar las etiquetas HTML mediante cierta informacion adicional que llamamos atributos. No todos los atributos se pueden utilizar con todas las etiquetas , por ello cada etiqueta define su propia lista de atributos.

Los atributos comunes se dividen en cuatro grupos segun su funcionalidad:

  1. Atributos basicos: se pueden utilizar en casi todas las etiquetas html ( id=”texto” establece un identificador unico a cada elemento dentro de una pagina html class=”texto” establece la clase de css que se aplioca a los estilos  del elemento style=”texto” establece de forma directa los estilos css de un elemento title=” texto” establece el titulo a una elemento.
  2. Atributos de internacionalizacion: los utilizan las paginas que muestran sus contenidos. lang=”codigo de idioma” indica el idioma del elemento mediante un codigo definido xml:lang=” codigo de idioma” lo mismo. dir:indica la direccion del texto. Como la palabra internacionalizacion es muy larga se utiliza la abreviatura i18n.
  3. Atributos de eventos: solo se uitlizan en las paginas web dinamicas creadas con javascript.(onclick,ondblclick,onmuosedown,onmouseup,onemouseover,onmeousemove,onmouseout,onkeypress,onkeydown.onkeyup)
  4. Atributos para los elementos que pueden obtener el foco: accesskey=”letra” establece una tecla de acceso rapido a un elemento html tabindex=”numero” establece la posicion dle orden de tabulacion de la pagina. Su valor debe estar comprendido entre o y 32767 onfocus , onblur: controlan los eventos javascript que se ejecutan cuando el elemento obtiene o pierde el foco.

2.4 Elementos HTML

Ademas de la etiquetas y los atributos  html define el termino “elemento” para referirse a las partes que componen los  documentos html. ejmplo <p class=”normal”>esto es un parrafo</p>.por otra parte html clasifica a los elementos en dos partes elemetos en linea y elementos de bloque. la principal diferencia es la forma en la que ocupan el espacio disponible  en la pagina. ejemplo <p> los parrafos son elementos en bloque</p> y losenlaces aunque esten dentro de un parrafo son elementos en linea <p> en linea<aherf=”www.google.com”> en linea</a></p>.Un elemento  en bloque nunca puede estar dentro de un elemento en linea pero si viceversa.

Los elementos en linea definidos por html son:aabbr,acronym,b,basefont,bdo,big,br,cite,code,dfn,em,font,i,img,input,kdb,label,q,s,samp,select,small,span,strike,strong,sub,sup,textarea,tt,u,var.

los elemetos en bloque definidos por html son: addres, blockquote,center,dir,div,dl,fieldset,form,h1,h2,h3,h4,h5,h6,hr,isindex,menu,noframes,nos.cript,ol,p,pre,table,ul,dd.dt.frame-set,li,tbody,td,tfoot,th,thead,tr.

Pueden ser en liena o bloque segun: button,del,iframe,ins,map,object,script.

2.5 Sintaxis de las etiquetas

2.5 Sintaxis de las etiquetas

Hay cinco restricciones basicas que intrtoduce xhtml respecto a html en laisntaxis de sus etiquetas:

  1. Las etiquetas se tienen que cerrar de acuerdo a como se abren.
  2. Los nombres de las etiquetas y atributos de escriben en minisculas.
  3. El valor de los atributos siempre se encierra con comillas.
  4. Los atributos no se pueden comprimir.
  5. Todas las etiquetas deben cerrarse siempre.

Ademas de estas restricciones xhtml incluye otros cambios mas avanzados a html:

  1. Antes de acceder al valor de un atributo, se eliminan los espacios en blanco que se encuentran antes y despues del valor y los sobrantes dentro del valor del atributo.
  2. Al hablar de la etiqueta <scrpit> el codigo java script debe encerrarse entre etiquetas especiales<(![CDATA[ y ]]>) para que el navegador interprete de forma erronea cacracteres como & y <.
  3. Prescindir del atributo “name” en su lugar siempre debe utilizarse ela tributo “id” .

Capitulo 3 TEXTO.

La mayor parte del contenido de las paginas html habituales esta formado por texto, llegando a ser el 90% del codigo de la pagina. La tarea inicial del editor de contenidos html consiste en estructurar el texto original definiendo sus parrafos, titulares y titulos de seccion.

3.1 Estructurar

La forma mas sencilla de estructurar un texto consiste en separarlo con parrafos.

3.1.1 Parrafos

<p> Permite definir los parrafos que forman el texto de la pagina.

<p> parrafos Atributos especificos- ninguno- tipo de elemento – bloque- Descripcion-  Delimita el contenido de un parrafo.

3.1.2 Secciones

Los titulos de seccion se utilizan para delimitar el comienzo de cada seccion de la pagina html, permite crear secciones de hasta seis nievles de importancia, h1,h2,h3,h4,h5,h6.

h1 seccion de nival 1 Atributos comunes – basicos,i18n y eventos-Atributos especificos- Tipo d elemento- Bloque- define los titulos de las secciones de mayor importancia de la pagina.

3.2 Marcado basico de Texto

Una vez estructura el texto en parrafos y secciones, el siguiente paso es el marcado de los elementos que componen el texto.

<em> Enfasis- Atributos comunes- basicos,i18n y eventos- Atributos espacificos-no- Tipo de elemento en linea- en linea- Descripcion- Realza la importancia del texto que encierra.

<strong> enfasis mas acentuado-Atributos comunes- basicos,i18n y eventos-atributos especificos-no- Tipo d elemento – en linea- Descripcion- Realza con la maxima importancia el texto que encierra.

<ins> Insercion- Atributos comunes- basicos, i18n y eventos- Atributos especificos- cite=”url” indicca la url de la pagina dpnde se puede obtener las informacion datetime=”fecha” Espacifica la fecha y la hora en la que se realizo el cambio.-Tipo de elemento- Bloque y en linea- descripcion- Se emplea para marcar una modificacion en los contenidos originales consistente en la insercion de un nuevo contenido.

<del> Borrado Atributos comunes- basicos , i18n y eventos Atributos especificos- cite=” url” indica la URL de la pagina en la que se puede obtener mas informacion sobre el motivo por el que se realizo la modificacion. Tipo de elemento- Bloque y en linea- Descripcion- se emeplea para marcar una modificacion en los contenidos originales consistente en el borrado de cierto contenido.

<blockquote> Citas- Atributos comunes- basicos, i18n y eventos- Atributos espacificos- cite=”url”indica la direccion de la pagina web original de la que se extrae la cita-Tipo de elemento- bloque- Descripcion- Se empela para idicar que el texto que encierra es una cita textual de otro texto externo.

3.3 Marcado avanzado de Texto.

<abbr> Abreviaturas- Atributos comunes-basicos, i18n y eventos- Atributos especificos- title=”texto”- indica el significado completo de la abreviatura- Tipo de elemento- En linea-Descripcion- Se emplea para marcar las abreviaturas del texto y porporcionar el significado de esas abreviaturas.

<acronym> Acronimos o siglas Atributos comunes – basicos, i18n y eventos Atributos especificos- title=”texto” indica el significado completo del acronimo o sigla. Tipo de elemento- En linea-Descripcion- Se emplea para marcar las siglas oa cronimos del texto y proporcionar el significado de estas siglas.

<dfn> Definicion-A co. idem. Atributos espacificos- title=”texto” indica el significado completo del termino. Tipo de elemento- en linea.Descripcion- Se emplea para marcar las definicioes de ciertos terminos y proporcionar el significado de estos terminos.

<cite>Cita- A. co. idem. A. especi. no tiene. En linea. Definicion- Se emplea para marcar una cita o una referencia a otras fuentes.

3.4 Marcado generico de texto.

Xhtml no define ninguna etiqueta espacifica para marcar nuemero de telefono o direcciones de correos electronicos y tampoco definie etiquetas para otros posibles elementos que se pueden encontrar en los contenidos de texto. Por este motivop el estandar html/xhtml incluye una etiqueta llamada <span> no  spam y se utilia para marcar el telefono y la dureccionde correo web. Esta etiqueta para diferenciarla en el texto utiliza los atributos “id” y “class” para modificar posteriormente su aspecto en css.

3.5 Espacios en blanco y nuevas lineas

3.5.1 Nuevas lineas

<br> Nueva linea A. com. basicos. A. especi. no tiene- Tipo de elemento- En linea y etiqueta vacia- Descripcion- Fuerza al navegador a insertar una nueva linea.

3.5.2 Espacios en blanco

Para poder tenr espacios en blanco se utiliza poner un texto que de esa forma fuerza ala navegador a crear el espacio en blanco. es etexto es &nbsp.

3.5.3 Texto preformateado

<Pre> texto preformateado. A.comu. basicos, i18n y eventos A espec. no tiene. Tipo – bloque- Definicion- Muestra el texto que encierra tal cual esta escrito ( respetando los espacios en blanco)

<code> Codigo fuente. A. comun- basicos, i18n y eventos A. espec. no tiene-Tipo- En linea Descripcion- Delimita el texto considerado un fragmento de codigo fuente. Pero no respeta los espacios en blanco.

3.6 Codificacion de caracteres.

Son especificacion a la hora de utilizar los caracteres por que algunos d elos cuales nos e pueden incluir directamente en las paginas web. Ejemplo:

  1. &lt; = a <
  2. &gt ; = a >
  3. &amp; = a &
  4. &quot; = a “ comillas
  5. &nbsp; = esapcio  en blanco
  6. &apos; = a ´ apostrofes.

Tmabien otro tipo de caracteres pueden convertir en problematicos por ejemplo a la hora del idioma asi que tosdos estos caracteres potencialmente problamaticos deben ser sustituidos por su entidad html ejemplo:

  1. &ntilde; = a ñ  mayusculas &Ntilde; N
  2. &aacute= a á mayusculas &Aacute; A
  3. &euro = a €

Capitulo  4. ENLACES

4.1 URL

(uniform resourse locator) Hace referencia al identificador unico de cada recurso disponible en internet. Tiene dos objetivos principales:

  1. Identificar de forma unica a ese recurso.
  2. Permitir localizar de forma eficiente ese recurso.

Para poder permitir lalocalizacion eficiente de cada recurso de internet es necesario comprender las diferentes partes que forman una url.

  1. Protocolo: (http://) o las seguras como de losbancos es https://. es elmecanismo para acceder.
  2. Servidor: http://www.librosweb.org
  3. Ruta: ( /xtml/capitulo4.html) camino que se debe seguir una vez llegado para acceder al recurso.
  4. Consulta: (?page=5) informacion adicional.
  5. Seccion: (#42) permite que el navegadro de posicione automaticamente en una seccion d ela pagina web.

Si es necesario de utiliza la codificacion de caracteres y luego el codificador realiza el proceso inverso. ejemplo:

  1. / = a %2f
  2. @ = a %40
  3. & = a %26
  4. ñ = a %F1
  5. ú = a %FA

4.1 Enlaces absolutos y enlaces relativos

4.1 Enlaces absolutos y enlaces relativos

Los enlaces absolutos contienen todas las partes de la URL ( protocolo, servidor y ruta) por lo que no necesitan mas informacion para enlazar.

Los enlaces relativos precinden de algunas partes de las url para hacerlas mas breves mas faciles de escribir. Utilizan la inteligencia del navegador para crear url imcompleta que los navegadores pueden completar deduciendo la informacion que falta. ejemplo:

url absoluta: http://www,ejemplo.com/ruta1/ruta2/pagina2.html

url relativa: /ruta1/ruta2/pagina2.html.

4.3 Enlaces basicos

<a>  Enlaces Atribut. comun- basicos,i18n, eventos y foco Atribut. Espec.- name=”texto” Permite nombrar al enlace para que se pueda acceder desde otros enlaces. href=”url” indica la url del recurso que se quiere enlazar.Tipo de elemento- En linea Descrip.- Se emplea para enlazar todo tipo de recursos.

  1. Enlace a pagina <a href=” http://www.pepe.org”&gt; Pagina principal de pepeart</a>
  2. Enlace a imagen< a href=”www….”/fondo_escritorio.jpg”> imagen</a>
  3. Enlace a documentos <a href=”www…./informe.pdf o doc”> docu </a>
  4. Volver al inicio <a href=”/”> volver al inicio</a>
  5. Por secciones <a name =” primera seccion”></a> con el atributo name
  6. Enlaces vacios <a href=”www…/pagina1.html”> Enlace pagina 1</a>
  7. <a href=”www…./pagina1.html#segunda_seccion”> En lace seccion 2 </a>
  8. Enlaces en la misma pagina <a name=”inicio”></a> + <a href=”#inicio”> volver al ini…</a>
  9. Tambien con atributo “id” <h1 id=”inicio”> tiutlo de la pagina</h1> + <a href=”#inicio”> volver inicio….</a>

4.4 Enlaces avanzados

Vamos a describir los atributos espacificos de <a> a parte de los ya nombrados name y href:

  1. hreflang=”codigo_idioma” idioma del recurso enlazado ( en,en-us,es-Ar, ..)
  2. type =”tipo de contenido” permite avisar al navegador sobre el tipo de contenido que se enlaza(jpg, doc, pdf, imagen/gif, imagen/css, application/rss+xml” ( archivos rss)
  3. rel =”tipo de relacion” describe la relacion del documento actual con el recurso enlazado
  4. revb=” tipo de relacion” describe la relacion del recurso enlazado con el documento actual.
  5. charset=”tipo de charset” describe la codificacion del recurso enlazado.

4.5 Otros tipos de enlaces

Hay recursos que se cargan automaticamente no tiene que ser como los <a> que hay estar y pinchar sobre el recurso se activan automaticamente aunque se nesecita que las paginas cargen algunos archivos javascript para que funcionen.

<script> Codigo ejecutable Atributo com. no tiene A. espaci.

  1. src=”url” indica la direccion del archico que contiene el codigo
  2. type=”tipo de contenido” permite avisar al navegador sobre el tipo de codigo que se incluye ( normalmente javascript)
  3. defer=”defer” el codigo no va a modificar elcontenido de la pagina web.
  4. charset=” tipo de charset” describe la codificacion del codigo enlazado.

Tipo de elemento.- en bloque y en linea Descripcion.- se emplea para enlazar o definir un bloque de codigo.

<link> Enlazar recursos Atributos comunes.- basicos, i18n y eventos Atributos especificos.- losmismos que para la etiqueta <a> + media =”tipo de medio” indica el medio para el que debe aplicarse la relacion. Tipo d elemento.- etiqueta vacia Descripcion.- Se emplea para enlazar y establecer ralaciones entre el docuemnto y otros recursos.

A diferencia del script solo se puede poner en el head tantos como desees.

4.6 Ejemplo de enlazes habituales

  1. Enlace al inicio del sitio web <a href=”/”>inicio</a>
  2. Enlace a una email <a href=”mailto:nombre@gmail.er”title=direccion de email para solicitar mas informacion”> Solicita mas informacion</a> hay mas combinaciones. Aunque es mejor no poner el correo sino indicar de forma que los usuarios puedan entenderlo <strong< nombre(arroba)direccion.com<Strong>
  3. Enlace a una archivo ftp en ves de http:// cambia a ftp://
  4. Enlazar varias hojas de estilo css <link  rel=”stylesheet”type/css”href=”/css/comun.css”/>
  5. Enlazar hojas d estilo css para diferentes medios <link rel=”stylesheet”type=”text/css” href=”css/comun.css”media=”screen, porjection”/> o print/>
  6. Enlazar el favicon El favicon es un pequeño icono que s emuestra en varias partes del nagedador tam,bien depende del navegador saldra en duferentes sitios o no. aunque su formato sria en ICO para iconos algunos navegadores soportan otros como png. <link rel=”shortcut icon” href=”/favicon.ico” type=”image/ico”/>
  7. Enlazar un archico rss <link rel=”alternate”type=”application/rss+xml”title=”resumen de todos los articulos del blog”href=”/feed.xml/>
  8. Enlazar hojas de estilo, favicon y rss
  9. Indicar que existe una version de la pagina en otro idioma
  10. Indicar que existe una version de la pagina preparad para imprimir.
  11. Indicar que existe un pagina que es indice de la pagina actual

Realizado por jose garcia

Resumen del libro de xhtml http://www.librosweb.es/ creative comons