View
212
Download
0
Category
Preview:
DESCRIPTION
Introducción al XHTML y CSS
Citation preview
Diseo de sitios web
Diseo de sitios webXHTML, HTML y css
cul es la funcin del diseador en la web?En esencia, la misma de todos los diseadores grficos: comunicar el mensaje de sus clientes de las manera ms eficaz; facilitar al usuario la navegacin por el sitio web, hacer que las pginas sean distintivas, atractivas, seductoras y entretenidas. Internet es muy igualitaria: estudiantes y nuevos graduados disponen (casi) exactamente de las mismas herramientas que lo ms prestigiosos grupos de diseo que trabajan para las grandes multinacionales.Quiz la mayor diferencia entre el diseo para la imprenta y para internet sea que la disposicin de un libro o revista es, en trminos generales, lineal: se supone que el lector empezar por el principio y continuar hasta el final. En cambio, en medios interactivos como la web, el lector salta de un vnculo a otro, por lo que la organizacin de las pginas es muy importante. El lector puede llegar a cualquier pgina de un sitio web procedente de un vnculo externo, y por ello cada pgina debe contener los elementos de navegacin que le permitan continuar su periplo. Es esencial disponer de un plan conceptual, con diagramas de flujo, y quiz tambin de un storyboard. Los diseadores web tienen que ser adems buenos coordinadores: dado que las pginas tambin pueden incluir sonidos y animaciones, es posible que el diseador deba dirigir el trabajo de otros profesionales.
World wide web (www)La world wide web (red informtica mundial) es una enorme coleccin de pginas conectadas entre s. Muchos sitios web invitan o exigen al usuario que se registre (lo cual les proporciona informacin comercial). Los proveedores de internet (ISP, Internet Service Provider) y las escuelas u universidades facilitan espacio en sus servidores para albergar pginas personales, y muchos sitios web en todo el mundo ofrecen tambin espacio gratuito. Estos espacios pueden utilizarse como zonas de pruebas para desarrollar nuestras habilidades en el diseo de pginas web.Internet se basa en un modelo cliente-servidor en el que el cliente (nuestro navegador) se comunica con los servidores (que almacenan las pginas web) usando sobre todo HTTP (Hypertext Transport Protocol). El HTML (Hypertext Markup Language) se emplea para crear la pgina. La direccin o URL (Uniform Resource Locator) de una pgina suele tener la forma http://nuestroisp.com/nombredelusuario/index.html
XhTML Y HTMLEl lenguaje que utilizaremos es HTML (Hypertext Markup Language) o, para ser ms exactos, XHTML (Extensible Hypertext Markup Language), respaldado por el W3C (World Wide Web Consortium) en 2000. Se dice que es vlido un sitio web que cumple con las especificaciones del XHTML. Se puede validar cualquier documento en el W3C Markup Validation Service. Una de las diferencias entre HTML Y XHTML es que ste ltimo distingue maysculas y minsculas: las etiquetas en XHTML deben ir en minsculas. Otras diferencias, como el cierre de las etiquetas vacas. Para que el cdigo funcione hay que emplear los trminos y la sintaxis exactamente tal como estn definidos (los mismos para un ingls o un norteamericano que para un hispanohablante); la ortografa es la del ingls norteamericano en palabras como color (en ingls britnico colour) y center (britnico centre).Cdigo html y xhtmlLas etiquetas son palabras o abreviaturas sencillas en ingls, que se encuentran contenidas entre parntesis angulres (mayor que y menor que), e indican al navegador cmo debe verse lo que contienen las mismas, con ayuda de los atributos que modifican el contenido de las etiquetas y la visualizacin en pantalla. La mayora de las etiquetas tienen una apertura y un cierre que afectan al contenido que est en el interior de ellas, el inicio se declara con el nombre de la etiqueta dentro de los parntesis angulares, ms sus atributos, si los tiene. Despus va el contenido y el cierre que va precedido de una diagonal con el nombre de la etiqueta dentro de los parntesis angulares.
CSS (Cascading Style Sheets)La otra parte con la que trabaja HTML y XHTML con las hojas de estilo en cascada y sirven principalmente para controlar la apariencia visual de las pginas web.
Los estilos se componen por un selector, propiedad y valor principalmente. La declaracin del estilo se hace dentro de los smbolos de llaves, { }.
Iniciando1. rbol de navegacinhomeseccion1seccion2seccion3articulo12. Nuestro primer documento (html) se llamar index.html ya que ste nombre es el que nuestro servidor reconocer como el incial-principal de nuestro sitio web.
3. Nombrando archivos, reglas:Usar solo minsculas.Solo usar letras y nmeros, nunca smbolos o caracteres especiales.Nunca empezar el nombre de un archivo con un nmero (1nombre.html).No dejar espacios en blanco, como mucho guiones bajos _.Nunca poner acentos en los nombres de los archivos.Ponerle un nombre que refleje el contenido, seccin o subseccin de la web. Nunca cosas como pagina1.html sino nombres que tengan sentido.
ESTRUCTURA BSICA
CDIGO BASE
Untitled Document
Un documento XHTML se compone de 5 partes:Una lnea de cdigo que contiene informacin sobre el tipo de documento de XHTML.Etiqueta de inicio de documento html Una seccin de cabecera delimitada por la etiqueta Asimismo el elemento debe ser el primer elemento dentro de .Todo el contenido del documento se especifica dentro de la etiqueta .Etiqueta de cierre del documento Declaracin de cssLos estilos en un documento se pueden aplicar de manera interna o externa.De manera interna, se pueden declarar de dos formas:
Al inicio del documento dentro de la etiqueta , con la siguiente sintaxis:
.Estilo1 {color: #0099CC;font-weight: bold;}Texto
2. El estilo se declara dentro de las etiquetas, utilizando el atributo style, y entre comilla se indica el selector, propiedad y valor, como se muestra en el siguiente cdigo:
Texto en bold
Declaracin de cssDentro de la pgina o sitio web, los estilos hacen referencia a una hoja de estilo externa, que se declara y almacena afuera del sitio web. Y para vincularla al documento XHTML se puede hacer de las siguientes maneras:Utilizando la etiqueta en la seccin de , especificando el URL del lugar en el que se encuentra la hoja de estilo almacenada, como se muestra en el siguiente ejemplo:
2. Con importar se pueden combinar y aplicar en una misma pgina, estilos provenientes de distintos documentos. Si se importan varias hojas de estilo, stas se aplican en el orden en que son importadas. Para importar una hoja de estilo se utiliza la instruccin @import dentro de la etiqueta , como se muestra en el siguiente ejemplo:
@import url(estilo.css);
Vnculos inicio Los vnculos son una parte vital del HTML y todo el concepto de World Wide Web. Internet es considerada una red debido a cmo los vnculos conectan piezas separados de documentos, basndose en la idea de una simple referencia potenciada por la interactividad. Como resultado, un simple click te lleva del documento referente al mencionado en el vnculo.
Un vnculo en un documento HTML puede ser bsicamente considerado como una referencia a otro recurso. Esta referencia establece una relacin implcita entre el documento referente y el recurso vinculado. La etiqueta es .textoDonde destino es el documento con el que se enlaza y texto es la palabra o palabras que, al pulsar, nos llevan a ese destino (tambin puede ser una imagen).
ESTILOS A LOS VNCULOSLas pseudoclases son las diferentes clases o los diferentes estilos que podemos darle a un enlace. El navegador por defecto le otorga un estilo diferente a los enlaces con respecto al texto restante. Pero nosotros podemos definir ese estilo mediante las pseudoclases.Las diferentes posibilidades de las pseudoclases son las siguientes:
a:link Es el estilo de un enlace que no ha sido explorado por el usuario. a:visited Es el estilo de un enlace que ha sido visitado. a:active Estilo de un enlace seleccionado, mientras est siendo seleccionado. a:hover Es el estilo de un enlace que tiene el ratn encima, pero sin estar seleccionado.
La forma de escribir las pseudoclases es la siguiente:
a:link { color: #00FF00; text-decoration: none}a:active { color: #000000; text-decoration: none}a:visited { color: #000000; text-decoration: none}a:hover { color: #FF0000; text-decoration: underline}
Etiqueta atributo targetEl atributo de la etiqueta de se utiliza con mayor frecuencia cuando se trata de marcos. Especifica la ventana en la que debe ser el documento cargado. El atributo TARGET puede tomar uno de los seis valores a continuacin: (nota el guin bajo para los cuatro primeros)
* _blank: Indica una nueva ventana. * _parent: Especifica el marco matriz que contiene el vnculo de origen. * _self: El significado es muy evidente. El nuevo documento se carga en el mismo marco. * _top: Esto indica una nueva ventana de documento. Es una buena manera de romper con los marcos y cargar el documento en la misma ventana. * frame-name: Usted puede usar esto para especificar en qu marco el documento debe ser cargado. * Resource Window: Esto carga el documento en una nueva ventana del navegador. Este es el mismo que _blank.LISTAS
y su cierre.
Si no le indicamos nada a la etiqueta
, sta se generar de forma automtica. Pero si queremos definir nosotros mismo el smbolo del punto, podemos gracias al atributo type.
As podemos hacer que la lista est definida por puntos negros (li type="disc"), por puntos con el fondo blanco (li type="circle") o por cuadrados (li type="square"). Aunque esta apariencia depender del navegador. Hay algunos navegadores que dan otras apariencias a estos mismos atributos.
Vamos con un pequeo ejemplo en cdigo:
Las listas ordenadas van enmarcadas dentro de las etiquetas . Cada punto de la lista se escribe con la misma etiqueta que en las no numeradas:
. Pero al ser listas ordenadas los smbolos sern nmeros y stos se irn generando automticamente por orden, conforme escribamos nuevos puntos.
En las listas ordenadas podemos hacer que el primer punto comience con el nmero que nosotros queramos. Lo conseguiremos gracias al atributo value. Los siguientes puntos que escribamos se generarn automticamente por orden, partiendo de ese nmero.
Por ejemplo, si queremos que nuestra lista empiece por el nmero 20, slo deberemos escribir lo siguiente:
Vnculos de correo electrnicoVamos a ver los enlaces a una direccin de correo electrnico. Cuando el navegante pinche sobre el activador del vnculo, se abrir el programa de correo con la direccin del destinatario ya escrita en el mensaje.
La sintaxis es Mndame un mensaje
Dime lo que piensas de este curso
ETIQUETA La etiqueta no necesita etiqueta de cierre. Para cada etiqueta solo es posible indicar un tipo de informacin y su valor, pero es posible insertar varias etiquetas en un mismo documento.La etiqueta ha de estar entre las etiquetas y .Por ejemplo, el siguiente cdigo indica que el autor de la pgina es aulaclic, que la pgina trata sobre un curso de HTML gratuito, y especifica algunas palabras clave a ser consultadas por los buscadores:
...
Recommended