Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Artculos
Lenguaje HTML Introduccin El cdigo Estructura de un documento HTML Formateo de texto Texto con estilo Listas Tablas Enlaces Imgenes Estilos CSS Comportamiento Propiedades de Fuentes y Texto Propiedades de color y fondo Marcos Formularios Pginas Dinmicas 1 2 4 6 8 12 15 18 21 22 24 27 28 29 30 31 33
Referencias
Fuentes y contribuyentes del artculo Fuentes de imagen, Licencias y contribuyentes 34 35
Licencias de artculos
Licencia 36
Lenguaje HTML
Lenguaje HTML
Este Wikilibro tratar de ser un curso de introduccin al lenguaje HTML 4.01 El tema es extenso, por lo cual lo dividiremos en dos libros: el 1 que haga una introduccin bsica a los temas, dejando para el 2 una descripcion detallada.
Convenciones
Tanto la terminologa como el orden de los temas, tratar de coincidir hasta donde sea posible con la especificacin de HTML 4.01 publicada por la W3C. todo esto realizado por el ing.Vladimir Mosquera
ndice
1. Introduccin 2. El cdigo 3. Estructura de un documento HTML 4. Formato de texto 5. Texto con estilo 6. Listas 7. Tablas 8. Enlaces 9. Imgenes 10. Estilos CSS 1. Comportamiento 2. Propiedades de Fuentes y Texto 3. Propiedades de color y fondo 11. Marcos 12. Formularios 13. Insertar audio/video 14. Scripts 15. Pginas Dinmicas 16. Usabilidad web
Lenguaje HTML
Bibliografa
W3C [1]
Enlaces externos
Escribiendo documentos HTML [2]
Referencias
[1] http:/ / www. w3c. org [2] http:/ / es. geocities. com/ oscarpalacios1/ index. htm
Introduccin
Breve resea sobre la World Wide Web
La World Wide Web, nace en 1989 por un investigador del Centro Europeo de Investigacin Nuclear (CERN), llamado Tim Berners-Lee quien invent un sistema de intercambio de informacin en la Red con posiblidades multimedia, que se conocera posteriormente como World Wide Web. Para ello dise un esquema basado en tres pilares: 1. URI (Universal Resource Identifier, Identificador Universal de Recursos) para que todos los documentos tengan un nombre nico. 2. HTTP (HyperText Transfer Protocol, Protocolo de Transferencia de HiperTexto) para la gestin de trfico documental. 3. HTML (HyperText Markup Language, Lenguaje para el Formato de Documentos de Hipertexto) para la creacin y edicin de los documentos web. Podra, este sistema, conceptuarse como una gran red de discos duros donde se alojaran los millones de documentos web enlazados entre s. Podemos pensar a Internet como un espacio de flujos incesantes en el cual permanentemente circulan representaciones simblicas en forma de arte, dinero, conocimiento, entretenimiento, luchas sociales y polticas, etc. Es decir, podemos pensar en la red como un espacio privilegiado por donde fluyen el lenguaje y el pensamiento, bajo una forma especfica de sociabilidad. Dado que actualmente existen varios protocolos que gestionan el trafico documental y de contenido en Internet se hace necesario estandarizar la normativa que haga posible su compatibilidad. Desde los comienzos, el Consorcio de la World Wide Web (W3C) presidida por su ideador, es la organizacin que elabora y publica los estndares que hacen posible la web.
Introduccin
Qu es el HTML?
Los elementos pueden ser representados por cabeceras, prrafos, enlaces de hipertexto, listas, archivos multimedia incrustados y una gran variedad de otras estructuras
El HTML, acrnimo ingls de HyperText Markup Language, es el cdigo que posibilita la creacin y edicin de documentos web. Es un metalenguaje heredado del SGML basado en etiquetas (tags) que tiene como virtud entre otras, la de poder ser implementado por cdigo de otros lenguajes como JavaScript o Visual Basic Script que amplan y mejoran su capacidad original. El cdigo HTML utiliza el cdigo ASCII puro que puede teclearse en cualquier editor bsico para posteriormente ser interpretado secuencialmente por un objeto cliente denominado navegador (browser) que visualiza el resultado en pantalla. La sintaxis de HTML est estructurada segn el siguiente protocolo o sintaxis: 1. 2. 3. 4. Una etiqueta inicial que seala el comienzo de un elemento Un nmero determinado de atributos (y sus valores asociados) Una cierta cantidad de contenido (caracteres y otros elementos) Una etiqueta que marca el final.
Muchos componentes o elementos de HTML incluyen atributos especficos en las etiquetas de comienzo, que definen el comportamiento, o indican propiedades adicionales de dichos elementos. La etiqueta que delimita el final es opcional para algunos elementos. En muy pocos casos, un elemento vaco puede no contener o requerir la etiqueta de final. Hay algunos elementos que no forman parte de las definiciones del tipo de documento (DTDs) oficiales. En la actualidad, muchas de stas son soportadas por algunos navegadores y se utilizan en algunas pginas. Dichos elementos pueden ser simplemente ignorados o, en el peor de los casos, puede que no se muestren con el resultado que se esperaba cuando se disearon, o provoquen errores en aquellos navegadores que no los soporten.
Introduccin
Historia
Internet naci gracias a ARPANET, un proyecto militar desarrollado con la finalidad de mantener una red de transmisin de paquetes entre ordenadores. ARPANET data de 1969 y sus desarrolladores pretendan que sirviera como arma defensiva en caso de una guerra nuclear. De esta forma, si se atacaba una ciudad de Estados Unidos, el resto de nodos (usuarios) de ARPANET se enterara de los acontecimientos y podra mantener el flujo de las comunicaciones. Los desarrolladores de ARPANET comenzaron a investigar protocolos para transmitir paquetes de informacin. Su primer logro fue el desarrollo del protocolo TCP, que todavia se utiliza a en la mayora de redes, y posteriormente inventaron otros como el protocolo para el correo electrnico, el FTP para la transferencia de archivos... En los aos 80 se crea una red paralela, la NSFNET, para cientficos y a la que algunas personas tenan acceso, sobre todo en universidades. Pero nadie se plante crear un protocolo para transmitir datos con formato. Era posible transmitir informacin y archivos pero no archivos con interactividad que se transmitieran y fueran mostrados. Lo que se hizo fue basarse en un lenguaje ya inventado denominado SGML, el cual se basaba en etiquetas tipo <etiqueta atributo="valor">, para crear un lenguaje que indicara cmo se ven la informacin en forma de hipertexto. Con esto naci el HTML, que tena etiquetas SGML, como <a href="http://www.google.es"> (algo as como <vnculo direccin="google.es">). En los aos 90 el protocolo sali a la luz junto a la INTERNET, cuando se abandonaron ARPANET y NSFNET y se us INTERNET nicamente para un pblico abierto de forma que todos pudieramos usarlo. Con ello, se utiliz el protocolo HTTP para que desde nuestras casas llamramos a otro ordenador y ste nos enviara el cdigo HTML de la pgina a nuestro ordenador. De esto se encarga un navegador, que nos permite contactar con el susodicho ordenador y cuando la pgina se enve mostrarla. El navegador interpreta el cdigo HTML y nos lo muestra.
El cdigo
Como su nombre indica el HTML es un lenguaje de "marcado". Si tenemos un texto y queremos convertirlo en una pgina web hemos de ir aadindole marcas que identifiquen que es cada cosa y como debe ser mostrada. Para esto el HTML nos proporciona tres conceptos: elemento, atributo y valor. Para representarlos usaremos las etiquetas.
El cdigo OJO! Elementos y etiquetas no son la misma cosa, las etiquetas son una plasmacin textual de los elementos. Por ejemplo: el elemento html siempre esta presente en un documento HTML, sin embargo sus etiquetas son opcionales, pueden omitirse, aunque no es recomendable hacerlo. Tambien es necesario tener una lista impresa cuando se inicia el trabajo con html
Explcito e implcito
El autor (t, por ejemplo) puede asignarle atributos a un elemento de manera explcita, o puede no hacerlo. Si no lo hace, esto no significa necesariamente que el elemento no tenga atributos asignados. Es decir, el elemento puede tener atributos implcitos obedeciendo a la especificacin del W3C, o ms comnmente, puede que la especificacin otorgue libertad a las aplicaciones de usuario (navegadores, por ejemplo) para que le asignen atributos a los elementos segn el criterio de la aplicacin, siempre y cuando el autor no lo haya hecho. Lo dicho tambin es de aplicacin a los valores: el autor puede asignar explcitamente valores a los atributos, si no lo hace... Por ejemplo: cuando escribimos un texto, puede que necesitemos resaltar alguna frase o palabra importante. Para ello, HTML nos proporciona el elemento em para enfatizar texto, pero la especificacin no indica la manera concreta de hacerlo; si el autor tampoco lo hace, la aplicacin de usuario es libre de actuar. La mayora de los navegadores muestran en cursiva el texto marcado con la etiqueta em, pero esto es slo una eleccin de los navegadores, no una caracterstica de em. Sucede lo mismo con la etiqueta strong, que normalmente se representa en negrita. HTML se ha constituido en un OPC [1]
Referencias
[1] http:/ / es. wikipedia. org/ wiki/ OPC
DOCTYPE
Define el tipo de documento. Este elemento, que muchos websmaster obvian (incorrectamente), le indica al navegador la versin y tipo de HTML empleado en el documento. De esta forma, el navegador usar el modelo de renderizacin adecuado al tipo de documento. Para HTML 4.01 existen 3 tipos de doctype: strict: este doctype es el que contiene la definicin de html recomendada por el W3C. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> transitional: este doctype es igual al strict, ms algunos elementos y atributos antiguos que han quedado desfasados, pero que se conservan por aqullo de la compatibilidad. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> frameset: este doctype es igual al transitional ms los elementos especficos para la creacin de marcos. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> De no poner el doctype, el navegador interpretar el cdigo html escrito tal y como le parezca mejor. Se obtendrn resultados muy variopintos y distintos de esta forma, incluso entre dos versiones de un mismo navegador. Por lo tanto, lo mejor es poner siempre el doctype correcto.
Elemento html
Delimita el documento HTML, indicando al navegador el comienzo y fin de la pgina html. Sus etiquetas son: <html> (Siempre al comienzo despues del doctype) y </html> (Siempre al terminar el documento); (ambas opcionales salas de todos modos!)
Elemento head
head viene del ingles cabeza y su funcin es delimitar cabecera del documento. Sus etiquetas son: <head> y </head>; (ambas opcionales salas de todos modos!) La cabecera es la seccin apropiada para incluir informacin sobre el documento, la mayora de la cual no ser mostrada a los lectores. Para incluir esta informacin tenemos diversos elementos, de momento solo comentaremos el ms importante:
Elemento title
Indica el ttulo del documento. En general, los navegadores modernos lo muestran en la barra de ttulo de la ventana. Sus etiquetas son: <title> y </title> (ambas obligatorias), por ejemplo: <html> <head> <title>Turismo en sudamrica</title> </head> </html>
Elemento body
Delimita el cuerpo del documento. Aqu van todos los contenidos de la pgina (texto, imgenes...) Todo lo que queremos mostrar a los lectores de nuestro documento. Sus etiquetas son: <body>, (Para delimitar el comienzo); y </body>, (al terminar, siempre antes de </html>) Continuando con el documento de arriba, ejemplo: ...<'''body'''> El Turismo en sudamerica... <'''/body'''> </html> La etiqueta <body> puede tener los siguientes atributos: text="..." color del texto link="..." color de enlaces no visitados vlink="..." color de enlaces visitados alink="..." color del link activo bgcolor="..." color del fondo background="..." Imagen de fondo
Ejemplo
Si queremos crear nuestra primera pgina Web en HTML 4.01 estricto, con un ttulo original "Mi primera pgina", y un texto igualmente original "Hola mundo". El cdigo sera el siguiente:
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset=utf-8"/> <title>Mi primera pgina</title> </head> <body> <p>Hola mundo</p> </body> </html>
Formateo de texto
Los documentos suelen tener un ttulo, el texto esta dividido en prrafos, pueden tener partes resaltadas. incluir citas... En esta seccin veremos los elementos HTML que nos permiten darle forma a un documento.
Encabezados
Una buena forma de estructurar un documento es dividirlo en secciones. El HTML permite hacerlo mediante encabezados, que son los ttulos de cada seccin. El elemento de encabezado es el carcter h seguido de un nmero del 1 al 6. As tenemos que los encabezados son: h1, h2, h3, h4, h5 y h6. El h1 es el encabezado de mayor tamao y el h6 es el encabezado de menor tamao. Se pueden utilizar los encabezados para anidar secciones, creando una estructura jerrquica. De este modo, el encabezado h1 ser la primer seccin sin anidar, y el sexto ser el mximo nivel de anidamiento.
Formateo de texto
Encabezado 1 - Seccin 1
Encabezado 2 - Seccin 1.1 Encabezado 2 - Seccin 1.2 Encabezado 2 - Seccin 1.3
Encabezado 3 - Seccin 1.3.1 Encabezado 3 - Seccin 1.3.2
Formateo de texto
10
Citas
Para incluir citas en nuestro texto tenemos tres elementos: Elemento blockquote (blockquote = cita-bloque) Es apropiado para citas extensas. Sus etiquetas son: <blockquote> y </blockquote> El efecto de blockquote es que el texto encerrado entre las etiquetas se muestre con sangra a ambos lados. Elemento q (quote = cita) Es apropiado para citas cortas. Sus etiquetas son: <q> y </q> (ambas obligatorias) Elemento cite (cite = cita) Es el elemento indicado para sealar la fuente o el autor de la cita. Sus etiquetas son: <cite> y </cite> (ambas obligatorias)
Ejemplo de nfasis em
Codificado as Se muestra as*
Sirve para darle <em>nfasis</em> al texto Sirve para darle nfasis al texto
Formateo de texto
11
Sirve para darle <strong> mucho nfasis </strong>al texto Sirve para darle mucho nfasis al texto
* El ejemplo muestra como se representan los elementos por defecto, la forma de ser representados varia entre navegadores y puede ser modificada mediante CSS.
12
13
Texto con estilo <h1>formularios</h1> <form action="mailto:unaprueba" method="post"> Texto: <input type="text" name="nombre"> <br /> Password: <input type="password" name="contra"> <br /> Sexo: <input type="radio" name="boton1" value="1"> Hombre <input type="radio" name="boton1" value="2"> Mujer <br /> Vehiculo: <input type="checkbox" name="Moto" value="Si"> Moto <input type="checkbox" name="Coche" value="" checked> Coche <br /> <br /> <input type="submit"> <input type="Reset"> </form>
14
Listas
15
Listas
En este captulo veremos los tres tipos de listas que podemos incluir en nuestros documentos y las herramientas que HTML nos proporciona.
Listas no ordenadas
Son listas en las que la informacin se muestra de forma no secuenciada. Para construirlas emplearemos los elementos: ul y li. Elemento ul (unordered list = lista desordenada) Es el que define y delimita la lista. Sus etiquetas son: <ul> y </ul> (ambas obligatorias) Sus principales atributos genricos son: style - (estilo) define estilos. Sus principales atributos de transicin son: type - (tipo) estilo de vieta. Valores posibles: 'disc' (disco), 'circle' (crculo) y 'square' (cuadrado) Elemento li (list item = item de la lista ) Es el que define y delimita cada uno de los puntos de la lista. Sus etiquetas son: <li> y </li> (la de cierre opcional sala de todos modos!) Sus principales atributos genricos son: style - define estilos. Sus principales atributos de transicin son: type - tipo de vieta. Valores posibles: Los mismos que en ul; 'disc', 'circle' y 'square'
Listas
16
Listas ordenadas
(Comnmente se les llama listas numeradas) Son listas en las que la informacin se muestra secuenciada numrica o alfabticamente. Para construirlas emplearemos los elementos: ol y li. Elemento ol (ordered list = lista ordenada) Es el que define y delimita la lista. Sus etiquetas son: <ol> y </ol> (ambas obligatorias) Sus principales atributos genricos son: style - define estilos. Valores posibles: text-decoration: underline; - Subraya las palabras de la lista, pero no subraya las vietas de la lista en s.
Ejemplo:
<ol style="text-decoration: underline"> <li>Empezamos</li> <li>Continuamos</li> <li>Terminamos</li> </ol>
El resultado ser este: 1. Empezamos 2. Continuamos 3. Terminamos Si aplicamos el valor solo a una de las etiquetas <li> el valor se aplicar solo a dicha parte. Ejemplo:
Ejemplo:
<ol> <li>Empezamos</li> <li style="text-decoration: underline">Continuamos</li> <li>Terminamos</li> </ol>
El resultado ser este: 1. Empezamos 2. Continuamos 3. Terminamos Sus principales atributos de transicin son: type - tipo de secuencia. Valores posibles: '1' - secuencia numrica. 'I' - secuencia numrica romana en mayscula. 'i' - secuencia numrica romana en minscula. 'A' - secuencia alfabtica en mayscula.
Listas 'a' - secuencia alfabtica en minscula. start - valor inicial de la secuencia. Valores posibles: un nmero. Elemento li. Es el que define y delimita cada uno de los puntos de la lista. Sus etiquetas son: <li> y </li> (la de cierre opcional sala de todos modos!) Sus principales atributos genricos son: style - define estilos. Sus principales atributos de transicin son: type - tipo de secuencia. Valores posibles:'1', 'I', 'i', 'A', 'a'. value - valor de reinicio de la secuencia. Valores posibles: un nmero.
17
El resultado ser este: i. Empezamos ii. Continuamos iii. Terminamos iv. Verificando
Listas
18
Tablas
Son una herramienta muy til y muy potente para mostrar informacin de una manera estructurada. Una aclaracin importante: Las tablas no son una herramienta para maquetar o dar formato a los documentos. Las tablas son para tabular datos. Los elementos de los que nos serviremos para crearlas son:
Elementos bsicos
table
(table = tabla) Es el elemento que define y delimita la tabla. Sus etiquetas son: <table></table> (ambas obligarorias) Sus atributos principales son: width - anchura de la tabla (valor en pixeles o en porcentaje) border - grosor del borde de la tabla (valor en pixeles) cellspacing - espacio entre celdas (valor en pixeles) cellpadding - espacio entre el contenido y los bordes de la celda (valor en pixeles)
Tablas
19
tr
(table row = fila de tabla, rengln de tabla) Es el elemento que define y delimita las filas de la tabla. Sus etiquetas son: <tr></tr>
td
(table data = datos de tabla) Es el elemento con el que crearemos las celdas de la tabla. Sus etiquetas son: <td></td> Sus atributos principales son: align --alineacin horizontal. valign --alineacin vertical. colspan-- nmero de columnas ocupados por la celda. rowspan-- nmero de filas ocupados por la celda.
Ejemplos
Una tabla bsica escrita as: <table border='1' cellspacing='1' cellpadding='2' width='50%'> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> <tr><td>5</td><td>6</td></tr> </table> Se ver as:
1 2 3 4 5 6
Elementos de encabezado
caption
Es el elemento con el que podemos darle un ttulo a la tabla. Debe ir inmediatamente despues de la etiqueta <table>. Sus etiquetas son: <caption></caption> (ambas obligatorias) Sus atributos principales son: align - DESAPROBADO!
th
Es el elemento con el que crearemos las celdas de encabezado Sus etiquetas son: <th></th> (la de cierre es opcional sala de todos modos!) Sus atributos principales son: align - alineacion horizontal valign - alineacion vertical colspan- nmero de columnas abarcado por la celda
20
Fusionando celdas
Paras las etiquetas anteriormente mencionadas,<td> y <th> existen atributos para la combinacin de celdas, que son: rowspan: especifica cuantas celdas dentro de una columna sern combinadas colspan: especifica cuantas columnas dentro una fila sern combinadas Para el atributo colspan: Por ejemplo, <table border=1> <tr> <td colspan="2">Combinacin de columnas</td> </tr> <tr> <td>Columna 1</td> <td>Columna 2</td> </tr> </table>
Combinacin de columnas Columna 1 Columna 2
Tendr como resultado que, en la primera fila, esten combinados las 2 primeras columnas. Tmese en cuenta que, al escribir este atributo(si slo existen 2 columnas), no se debe de aadir ms etiquetas de columnas, caso contrario, se deber tomar en cuenta la cantidad de celdas de columnas combinadas y las que se quieran agregar. Para el atributo rowspan: <table border=1> <tr> <td rowspan="2">Combinacin de celdas de filas en una columna</td> <td>Columna2, fila1</td> </tr> <tr> <td>Columna2, fila2</td> </tr> </table>
Combinacin de celdas de filas en una columna Columna2, fila1 Columna2, fila2
Tendr como resultado que, en la primera columna, esten combinados las 2 filas definidas. Tmese en cuenta que, al escribir este atributo(si slo existen 2 filas), no se debe de aadir ms etiquetas de columnas, caso contrario, se deber tomar en cuenta la cantidad de celdas de filas combinadas y las que se quieran agregar. </marque>
Enlaces
21
Enlaces
<html> <head> <title>Holaa</title> </head> <body> Un documento html es sobre todo un hipertexto, un documento en el que los contenidos pueden estar enlazados, a otros contenidos dentro del mismo documento o en otro distinto, que puede estar en el mismo ordenador, o en cualquier punto de la web. Desde este punto de vista, los enlaces pueden clasificarse de la siguiente manera:
Tipos de enlaces
Internos Dentro del mismo documento. Externos A otro documento, y dependiendo de donde se halle:
Elemento a
a (anchor = ancla) Sus etiquetas son: <a></a> (ambas obligatorias) Sus principales atributos son: href -(hipertexto-referencia) indica el recurso al que queremos acceder desde el ancla origen name - (nombre) asigna un nombre al elemento a para que pueda ser usado como ancla destino Su estructura bsica consiste en el tag <a href="pgina"> al principio del enlace y cerrando con el tag </a>. El trmino pgina hace referencia a una URL (Localizacin de Recurso Universal, por sus siglas en ingls) que puede indicar la referencia a un documento HTTP, FTP, MAIL y otros protocolos de Internet que permiten localizar informacin en la Red. Ejemplos: Referencia a una pgina local... <a href="index.html">Principal </a> Referencia a una pgina en un servidor HTTP... <a href="http://www.wikipedia.org/index.html"> Bienvenido a Wikipedia </a> Referencia a un archivo en un servidor FTP... <a href="ftp://ftp.debian.org/gcc.zip"> Archivo del compilador GCC </a>
Enlaces <a href='/home/yo/Desktop/enlaces/doc-0.html'>vnculos a doc-0.html</a> <a href='/home/yo/Desktop/enlaces/11/doc-11.html'>vnculos a doc-11.html</a> <a href='/home/yo/Desktop/enlaces/22/doc-22.html'>vnculos a doc-22.html</a> <a href='/home/yo/Desktop/enlaces/22/222/doc-222.html'>vnculos a doc-222.html</a> Si queremos que indice.html incluya vnculos locales relativos a los otros documentos: <a href='doc-0.html'>vnculos a doc-0.html</a> <a href='11/doc-11.html'>vnculos a doc-11.html</a> <a href='22/doc-22.html'>vnculos a doc-22.html</a> <a href='22/222/doc-222.html'>vnculos a doc-222.html</a> Si queremos que doc-11.html incluya vnculos locales relativos a los otros documentos: <a href='../doc-0.html'>vnculos a doc-0.html</a> <a href='../indice.html'>vnculos a indice.html</a> <a href='../22/doc-22.html'>vnculos a doc-22.html</a> <a href='../22/222/doc-222.html'>vnculos a doc-222.html</a> Si queremos que doc-222.html incluya vnculos locales relativos a los otros documentos: <a href='../../doc-0.html'>vnculos a doc-0.html</a> <a href='../../indice.html'>vnculos a indice.html</a> <a href='../doc-22.html'>vnculos a doc-22.html</a> <a href='../../11/doc-11.html'>vnculos a doc-11.html</a> </body> </html>
22
Imgenes
<img src="http://es.wikipedia.org/wiki/Archivo:Neptune.jpg"> En esta seccin veremos como aadir imgenes a nuestras pginas web. Las imgenes tienen dos funcionalidades: sirven para mejorar la esttica y ademas pueden ser un buen complemento al texto, ya sabes, una imagen vale mas que mil palabras.
insertando imgenes
Elemento img
Sus etiquetas son: <img> (sin etiqueta de cierre) Sus principales atributos son: src - indica la direccin de origen de la imagen - valores posibles: la URL de la imagen a insertar. Tambien podemos insertar imagenes que esten almacenados en nuestro equipo. Para lograr esto lo unico que tenemos que hacer sera lo siguiente: Primer caso: Suponiendo que queremos usar la imagen de alguna pgina web esto quedaria as: <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Gambling_chips.jpg/190px-Gambling_chips.jpg"> Segundo caso: Ahora si queremos que usar alguna imagen de nuestro equipo hariamos lo siguiente. <img src="file:///C|/20.jpg"> si nosotros tenemos en la imagen en la misma carpeta el documento html en la que estamos trabajando, o si estan dentro de esta, el codigo quedaria reducido de la siguente manera: suponiendo que hay una carpeta imagenes dentro de la carpeta mi web donde esta nuestro archivo seria <img src="imagenes/20.jpg">
Imgenes alt - permite poner un texto alternativo (Esta etiqueta por no estar en el estandar no sera entendida por todos lo navegadores web) - valores posibles: un texto descriptivo title - permite hacer que aparezca una descripcin - cuando se pasa el cursor la imagen. Atributos sobre el tamao: height - especificar nueva altura width - especificar nueva anchura
23
Mapa de bits
Ideales para logotipos, esquemas y dibujos sencillos PNG - (Portable Network Graphics) MNG - (Animaciones en PNG, es un formato en desarrollo; no usar, preferentemente) GIF - (Graphics Interchange Format) (usar slo para animaciones, para imgen esttica, es mejor PNG) Ideales para fotografas JPEG - (Joint Photographic Experts Group) BMP - (Bitmap) El formato BMP no debe ser usado bajo ningn concepto, pues ocupa demasiado espacio en disco; si lo que se desea es no perder calidad, una buena opcin es usar el formato PNG.
Estilos CSS
24
Estilos CSS
Las Hojas de Estilo en Cascada (Cascade Style Sheet) son una serie de instrucciones que nos permiten dar formato aprovechando las limitaciones que nos presenta el HTML y sus etiquetas de formato al momento de dar formato a una pgina.
En un fichero externo
Mediante la etiqueta <link> se puede incluir un fichero externo que incluya todas las reglas. Esta etiqueta permite incluir los siguientes atributos: HREF (obligatorio): indica la URL del fichero. REL: identifica el tipo de relacin del enlace con la pgina. TYPE: especifica el tipo MIME. TITLE: especifica el ttulo de la hoja de estilo. En caso de no existir, el enlace pasa a ser persistente MEDIA: indica el soporte al que va dirigida la hoja de estilo. Se pueden indicar varios medios separndolos por comas.
Algunos ejemplos: <LINK REL="StyleSheet" HREF="style.css" TYPE="text/css" MEDIA="screen" /> <LINK REL="StyleSheet" HREF="color-8b.css" TYPE="text/css" TITLE="8-bit Color Style" MEDIA="screen, print" /> <LINK REL="Alternate StyleSheet" HREF="color-24b.css" TYPE="text/css" TITLE="24-bit Color Style" MEDIA="screen, print" /> <LINK REL="StyleSheet" HREF="aural.css" TYPE="text/css" MEDIA="aural" />
Estilos CSS
25
Tabla de colores
Los colores se pueden especificar en pginas HTML de dos maneras una especificando el nombre del color y otra usando una numeracin para denotar un valor de color del sistema RGB. Un valor del color del RGB consiste en tres nmeros hexadecimales de dos dgitos que especifican la intensidad del color correspondiente. Por ejemplo, el valor #FF0000 del color se hace rojo porque el nmero rojo se fija a su valor ms alto, FF (o 255 en forma decimal).
aliceblue (#F0F8FF) azul (#F0FFFF) blanchedalmond (#FFEBCD) burlywood (#DEB887) coral (#FF7F50) cinico (#00FFFF) gris oscuro (#A9A9A9) antiquewhite (#FAEBD7) amarillento (#F5F5DC) azul (#0000FF) cadetblue (#5F9EA0) cornflowerblue (#6495ED) azul marino (#00008B) verde oscuro (#006400) aqua (#00FFFF) bisque (#FFE4C4) blueviolet (#8A2BE2) chartreuse (#7FFF00) cornsilk (#FFF8DC) darkcyan (#008B8B) darkkhaki (#BDB76B) aquamarine (#7FFFD4) negro (#000000) marrn (#A52A2A) chocolate (#D2691E) carmes (#DC143C) darkgoldenrod (#B8860B) darkmagenta (#8B008B)
Estilos CSS
26
darkolivegreen (#556B2F) darksalmon (#E9967A) darkturquoise (#00CED1) dimgray (#696969) forestgreen (#228B22) oro (#FFD700) greenyellow (#ADFF2F) ail (#4B0082) lavenderblush (#FFF0F5) lightcoral (#F08080) gris claro (#D3D3D3) lightskyblue (#87CEFA) cal (#00FF00) marrn (#800000) mediumpurple (#9370DB) mediumturquoise (#48D1CC) mistyrose (#FFE4E1) oldlace (#FDF5E6) naranja-rojo (#FF4500) paleturquoise (#AFEEEE) Per (#CD853F) prpura (#800080) saddlebrown (#8B4513) anaranjado oscuro (#FF8C00) darkseagreen (#8FBC8B) darkviolet (#9400D3) dodgerblue (#1E90FF) fuchsia (#FF00FF) vara de oro (#DAA520) ligamaza (#F0FFF0) marfil (#FFFFF0) lawngreen (#7CFC00) lightcyan (#E0FFFF) rosa claro (#FFB6C1) lightslategray (#778899) limegreen (#32CD32) mediumaquamarine (#66CDAA) mediumseagreen (#3CB371) mediumvioletred (#C71585) moccasin (#FFE4B5) aceituna (#808000) orqudea (#DA70D6) palevioletred (#DB7093) color de rosa (#FFC0CB) rojo (#FF0000) salmones (#FA8072) darkorchid (#9932CC) darkslateblue (#483D8B) de color rosa oscuro (#FF1493) firebrick (#B22222) gainsboro (#DCDCDC) gris (#808080) hotpink (#FF69B4) de color caqui (#F0E68C) lemonchiffon (#FFFACD) lightgoldenrodyellow (#FAFAD2) lightsalmon (#FFA07A) lightsteelblue (#B0C4DE) lino (#FAF0E6) mediumblue (#0000CD) mediumslateblue (#7B68EE) midnightblue (#191970) navajowhite (#FFDEAD) olivedrab (#6B8E23) palegoldenrod (#EEE8AA) papayawhip (#FFEFD5) ciruelo (#DDA0DD) rosybrown (#BC8F8F) sandybrown (#F4A460) rojo oscuro (#8B0000) darkslategray (#2F4F4F) deepskyblue (#00BFFF) floralwhite (#FFFAF0) ghostwhite (#F8F8FF) verde (#008000) indianred (#CD5C5C) lavanda (#E6E6FA) azul claro (#ADD8E6) verde claro (#90EE90) lightseagreen (#20B2AA) amarillo claro (#FFFFE0) magenta (#FF00FF) mediumorchid (#BA55D3) mediumspringgreen (#00FA9A) mintcream (#F5FFFA) marina de guerra (#000080) anaranjado (#FFA500) palegreen (#98FB98) peachpuff (#FFDAB9) powderblue (#B0E0E6) royalblue (#4169E1) verdemar (#2E8B57)
Estilos CSS
27
seashell (#FFF5EE) slateblue (#6A5ACD) steelblue (#4682B4) tomate (#FF6347) blanco (#FFFFFF) sienna (#A0522D) slategray (#708090) tan (#D2B48C) turquesa (#40E0D0) whitesmoke (#F5F5F5) plata (#C0C0C0) nieve (#FFFAFA) teal (#008080) violeta (#EE82EE) amarillo (#FFFF00) skyblue (#87CEEB) springgreen (#00FF7F) thistle (#D8BFD8) trigo (#F5DEB3) de color verde amarillo (#9ACD32)
Atributos
Son la cualidades que podemos afectar en un objeto; en las cascadas de estilos tenemos la posibilidad de dar atributos tan sencillos como la especificacin de una familia de fuente o el mismo tamao en si para un objeto hasta atributos y filtros ms complejos como transformaciones de texto, decoraciones, sombras, brillo, desenfoque entre otros.
Comportamiento
<body onload="startclock()"> <script language="JavaScript"> </script> <form name="clock" onsubmit="0"> <input type="button" name="face" value="hh:mm:ss am" onclick="reloj()"> </form> </body>
28
el tamao de la fuente
Wikilibros
Propiedades de Fuentes y Texto Habra que escribir: <font color="#0000FF" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a <b><u> <big>Wikilibros</big></u></b></font>
29
Colores Hexadecimales
Los colores en HTML se representan mediante un nmero hexadecimal. Un nmero hexadecimal se diferencia de un nmero decimal en que no slo puede tomar valores del 0 al 9, sino que puede tomar hasta diecisis valores distintos, que van del 0 al 9, y de la A a la F. Cada color estar representado por un grupo de seis dgitos en hexadecimal, precedidos por una almohadilla, como por ejemplo #FFFFFF. Existen 216 colores seguros para web. stos son los colores que se muestran de la misma forma en Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows como en Macintosh. Tambin podemos personalizar nuestros propios colores, modificando los valores de cada uno de los dgitos que forman parte del nmero hexadecimal. [1] Enlace a listado de colores
Referencias
[1] http:/ / pyme. net. uy/ imagenes/ colorlist. gif
Marcos
30
Marcos
Los marcos aportan un mtodo de dividir la ventana del navegador en secciones para poder visualizar varios documentos web al mismo tiempo. Las diferencias principales entre un documento con marcos y un documento HTML normal son dos: La declaracin del DOCTYPE Un documentos con marcos carece del elemento body, en su lugar usaremos el elemento frameset
Elemento frameset
Sus etiquetas son <frameset> </frameset> (ambas obligatorias) Sus principales atributos son: rows cols
Elemento frame
Sus etiquetas son <frame> </frame> (la de cierre opcional) Sus principales atributos son: name src noresize
Elemento noframes
Sus etiquetas son <noframes> </noframes> Esta marca indica a todo browser incapaz de gestionar los frames el texto que debe presentar al usuario en lugar de los paneles. Dicho texto ira entre las marcas <NOFRAMES> y </NOFRAMES>. En realidad dichos browsers ignoraran las marcas FRAMESET y NOFRAMES pero casualmente no el texto comprendido entre estas ltimas. Por el contrario un browser capaz de gestionar paneles interpretara las marcas <NOFRAMES> y </NOFRAMES> y sabra que debe ignorar el texto comprendido entre ellas. Esta etiqueta debe ser usada entre <FRAMESET> y </FRAMESET> de la siguiente manera: <FRAMESET ...> ...Codigo de definicion de frames... <NOFRAME> ...Codigo alternativo... </NOFRAME> </FRAMESET> Los navegadores que tengan soporte para frames simplemente ignoraran todo lo que haya entre la instruccion de inicio, <NOFRAME >, y la instruccion de fin, </NOFRAME> . Por su parte los navegadores que no entiendan frames, directamente ignoraran todas estas etiquetas (no las entienden) y pasaran a interpretar las etiquetas que siguen a <NOFRAME >. Entre ellas debe estar la etiqueta BODY, ya que esta etiqueta era imprescindible para las paginas sin frames, y para los navegadores que no las soporten todas las paginas son sin frames. En esta ocasion BODY no provocara problemas con FRAMESET porque, como hemos dicho, los navegadores que entiendan esta ultima ignoraran todo el codigo entre <NOFRAME> y < /NOFRAME>.
Marcos Un uso habitual de NOFRAME es: <FRAMESET COLS="200,*"> <FRAME SRC="f1.htm"> <FRAME SRC="f2.htm"> <NOFRAME> <BODY> Esta pagina usa frames y su navegador no los soporta, por favor vaya a <A HREF="sinframe.htm"> nuestras pginas sin frames </A> </BODY> </NOFRAME> </FRAMESET> Si no hubieramos usado la etiqueta NOFRAME el resultado de ver la pagina con este codigo con un navegador sin soporte para frames seria simplemente una pantalla en blanco.
31
Enlazando frames
El uso de marcos o tambin llamados frame es una herramienta muy til para crear pginas dinmicas ya que se hace el uso de no solo un archivo sino un nmero determinado de archivos. El nmero de archivos usados para hacer el uso de un frame es el nmero de frame mas uno que es el que controla todos los frame; en el ejemplo se mencionan Archivo1.html, Archivo2.html, y el Archivo3.html ms el frame.html. <html> <head> <title>Prueba con Frame</title> </head> <frameset rows="20%,*%"> <frame name="menu" src="archivo1.html" noresize framespacin=9 scrolling="no"></frame> <frameset cols="20%,*%"> <frame name="trabajo" src="archivo2.html" noresize framespacin=5 bordercolor="red"></frame> <frame name="trabajo" src="archivo3.html" noresize framespacin=5 bordercolor="red"></frame> </frameset> </frameset> </html>
Formularios
Mediante el envo de formularios se pueden enviar datos de un artculo, de una encuesta o normalmente para enviar un mensaje a un e-mail. Para hacer esto deberamos saber un poco sobre los lenguajes de tipo servidor, ASP o PHP, pero por el momento seguiremos con html. La etiqueta para un formulario, es <form>, y sus atributos son los siguientes: method: Indica el mtodo por el que se enviarn los datos. Existen 2: POST: Enva datos por la entrada estndar STDIO (utilizado normalmente). GET: Enva datos por medio de un URL (enlace). action: Indica el mail a donde se enviarn los datos o el nombre del archivo .php o .asp Ejemplo: <form action="mail@dominiio.com" method="post"></form> o <form action="form.php" method="post"></form> ELEMENTOS: Para enviar datos en un formulario se necesitan cuadros de texto. La etiqueta que se usa es <input> (no tiene etiqueta de cierre) y tiene varios atributos: type: Define el tipo de texto que se introduce en el cuadro, sus valores pueden ser: text: Cualquier tipo de texto como el nombre, e-mail, direccin... password: Se usa para ocultar las claves o datos confidenciales (al escribir en este, muestra *******. hidden: Datos escondidos, asunto, e-mail de destino... button: Crea un botn. image: Hace que una imagen sea el enlace (la imagen se muestra con el atributo src). submit: Enva el formulario. reset: Borra los campos del formulario. value: Indica el valor de un atributo o el nombre que se mostrar (en el cuadro). name: Nombre del campo. maxlength: Indica el nmero de caracteres mximo para escribir. size: Indica el tamao del cuadro de texto. Ejemplo: <form method="post"> Nombre <input type="text" name="nombre" maxlength="10" size="15"> Password <input type="password" name="contrasea" maxlength="10" size="15"> <input type="submit" name="enviar" value="Enviar"> <input type="reset" name="Borrar" value="Borrar Todo"> </form> Resultado: Si queremos que una persona enve algn comentario o sugerencia, ponemos un cuadro de texto grande, con la etiqueta <textarea>. Sus atributos son: rows: Filas que tendr el cuadro. cols: Columnas que tendr el cuadro. Ejemplo: <textarea cols="30" rows="4" name="comentario"></textarea> Resultado:
Formularios Lista de Opciones: Son listas en las que se pueden especificar una o varias opciones. Podramos poner pises, asuntos... y que el usuario seleccione la adecuada. La etiqueta para hacer esto es <select>, y cada opcin se define por la etiqueta <option>. Adems, deben contener los atributos value y name, ejemplo: <select name="pais"> <option value="Arg">Argentina</option> <option value="Br">Brasil</optiont> <option value="Ch">Chile</option> <option value="Eu">Estados Unidos</option> <option value="Mx">Mxico</option> <option value="Vz">Venezuela</option> </select> Resultado: Se puede seleccionar una opcin por defecto, con el atributo selected en la opcin que queramos. Podemos cambiar la lista de opciones, para que se pueda seleccionar ms de una opcin. Esto se hace con el atributo multiple y size (indica el nmero de valores a mostrar): <select name="pais" size="3" multiple> <option value="Arg">Argentina</option> <option value="Br">Brasil</optiont> <option value="Ch">Chile</option> <option value="Eu">Estados Unidos</option> <option value="Mx">Mxico</option> <option value="Vz">Venezuela</option> </select> Resultado: Nota: Manteniendo presionada la tecla Ctrl o Shift se puede seleccionar ms de una opcin de la lista. Botones de crculo: Si queremos que solo se pueda seleccionar una opcin, adems de las listas desplegables, tenemos los botones en forma de crculo. Se usa la etiqueta input, pero con el valor radio en el atributo type. Para seleccionar una opcin por defecto, es el atributo checked: <input type="radio" name="pais" value="Arg">Argentina <input type="radio" name="pais" value="Br">Brasil <input type="radio" name="pais" value="Ch">Chile <input type="radio" name="pais" value="Eu">E.U. <input type="radio" name="pais" value="Mx" checked>Mxico <input type="radio" name="pais" value="Vz">Venzuela Resultado: Cuadros de seleccin: Adems de poner el valor multiple en las listas desplegables para poder seleccionar ms de una opcin, podemos utilizar el valor checkbox en el atributo type, y con el atributo checked se selecciona una (o varias) opcin(es): <input type="checkbox" name="pais" value="Arg"> Argentina <input type="checkbox" name="pais" value="Br"> Brasil <input type="checkbox" name="pais" value="Ch"> Chile <input type="checkbox" name="pais" value="Eu"> E.U. <input type="checkbox" name="pais" value="Mx" checked> Mxico <input type="checkbox" name="pais" value="Vz"> Venezuela Resultado: Un ejemplo de un formulario: <form action="mail@dominio.com" method="post"> Nombre: <input type="text" name="nombre" size="15" maxlength="20"> E-Mail: <input type="text" name="email" size="15" maxlength="20"> Pas: <select name="pais"> <option value="Arg">Argentina</option> <option value="Br">Brasil</optiont> <option value="Ch">Chile</option> <option value="Eu">Estados Unidos</option> <option value="Mx">Mxico</option> <option value="Vz">Venezuela</option> </select> Sexo: <input type="radio" name="sexo" value="hombre"> Hombre <input type="radio" name="sexo" value="mujer"> Mujer Urgente: <input type="checkbox" name="prioridad" value="si"> S Comentario: <textarea rows="3" cols="40" name="comentario"></textarea> <input type="submit" value="Enviar"> <input type="reset" value="Borrar"> </form> Resultado: Y en nuestro e-mail recibiramos algo asi: nombre: Leo email: anonimo@dominio.com pais: Mx sexo: hombre prioridad=on comentario: hola, quiero informacin. Nota: Si est activada un cuadro de seleccin, el valor al recibir el mail ser on, si no se activ el valor ser off.
32
Formularios Consejo: Para alinear la descripcin de los campos y los campos, podras crear una tabla con dos columnas. Importante: En esta ocasin se abrir el programa de envos de mail por defecto de la computadora del usuario (suele ser Outlook Express). Si queremos que enve los datos a un mail sin tener que abrir el programa, debemos crear un archivo PHP y en el atributo action poner el valor del archivo (esto lo puedes ver en el manual de PHP).
33
Pginas Dinmicas
Las pginas dinmicas son pginas HTML generadas a partir de lenguajes de programacin (scripts) que son ejecutados en el propio servidor web. A diferencia de otros scripts, como el JavaScript, que se ejecutan en el propio navegador del usuario, los 'Server Side' scripts generan un cdigo HTML desde el propio servidor web. Este cdigo HTML puede ser modificado -por ejemplo- en funcin de una peticin realizada por el usuario en una Base de Datos. Dependiendo de los resultados de la consulta en la Base de Datos, se generar un cdigo HTML u otro, mostrando diferentes contenidos.
34
35
Licencia
36
Licencia
Creative Commons Attribution-Share Alike 3.0 Unported //creativecommons.org/licenses/by-sa/3.0/