HTML, XHTML, CSS y JavaScript Centro de Periodismo Digital Luis Fernando González Fernández.

Presentación del tema: "HTML, XHTML, CSS y JavaScript Centro de Periodismo Digital Luis Fernando González Fernández."— Transcripción de la presentación:

1 HTML, XHTML, CSS y JavaScript Centro de Periodismo Digital Luis Fernando González Fernández

2 To publish information for global distribution, one needs a universally understood language, a kind of publishing mother tongue that all computers may potentially understand. The publishing language used by the World Wide Web is HTML (from HyperText Markup Language). - World Wide Web Consortium (W3C) - HTML 4.01 Specification (W3C Recommendation 24 December 1999). http://www.w3.org/TR/1999/REC-html401- 19991224/intro/intro.html#h-2.2 http://www.w3.org/TR/1999/REC-html401- 19991224/intro/intro.html#h-2.2

3 WWW (World Wide Web) Internet W3C (World Wide Web Consortium) HTML (Hypertext Mark-Up Language) CSS (Cascading Style Sheets) Browser (Navegador)

4 Internet

5 HTML – HyperText Markup Language

6 CSS – Cascading Style Sheets body { text-align: background-c width: 1024p margin: 1px; } a:hover {

7 HTML ¡No hay tiempo! ¡Muy complicado! ¡Código!

8

9 Guardar como Todos los archivos (*.*).htm o.html

10 HTMLhead - Cabeceratitle - títulobody - Cuerpo

11 HTML 4.01 Specification next table of contents HTML 4.01 Specification W3C Recommendation 24

12 TagDescripciónAtributos El famoso DTD siempre es lo primero en el documento y le dice al navegador qué tipo de documento sigue. N/A Contenedor principal de la página. Toda la página debe estar dentro de esta tag. N/A Cabecera de la página. Dentro se especifican los css a usar, javascripts, e información para el navegador y SEO. N/A Estilos. Para especificar los estilos (CSS) a usar en la página web. type: El tipo de especificación de estilos (text/css). Enlaza otro archivo a la página web. Generalmente es para enlazar hojas de estilos (CSS). rel: la relación con el otro documento, href: la ruta al archivo. Especifica meta-información acerca de la página al navegador o cliente, como encabezados HTTP o información para SEO. http-equiv, name, content Definir elementos de script para la página. Pueden estar aquí o solo hacer referencia al archivo donde están los scripts. type: el tipo, language:el lenguaje, src: ruta al archivo. Comentario. Lo que halla dentro de estas marcas no será interpretado por el navegador: es útil para quien lee el código. N/A Cuerpo. Dentro va la página web en sí, lo que el cliente ve.bgcolor: color de fondo, font: tipografía.

13 TagDescripciónAtributos Hipervínculo. Puede usarse también para enlazar a correo electrónico, usando mailto:direccion@host.dominio href: URL (página) destino o correo usando mailto:correo Encabezado de 1er nivel. Si se quieren más encabezados, usar,,, o, siendo el 6 el más anidado (De menor nivel). N/A Salto de línea (Ej. Un enter o return).N/A Línea horizontal. Para dividir contenidos y organización.N/A Párrafo.N/A Elemento bloque de división. Generalmente se ve muy similar a un párrafo. N/A Elemento en línea de división. No incluye separaciones visibles entre elementos de este tipo. N/A Imagen. Si se quiere que la imagen sea un hipervínculo, encerrar dentro de. src: ruta a la imagen, o URL de la imagen, border: grosor del borde, 0 para ningún borde Vínculos y esquematización

14 TagDescripciónAtributos Negritas. Puede usarse (Los navegadores lo reconocen sin problemas) pero no es el estándar. N/A Enfatizar. Generalmente significa cursiva. Puede usarse, pero una vez más, no es el estándar. N/A Fuente. No es el estándar (Esto se debe hacer con css), pero es lo más sencillo de especificar. Un ejemplo sería, para fuente Arial, de color rojo: face: tipografía, size: tamaño (predeterminados del 1 al 7), color: color, o color RGB Formato predefinido, por el navegador. Formato para código. Generalmente usa fuentes monoespacio y estilo consolas, que pudiera recordar al MS-DOS o una consola de Linux/UNIX. N/A Bloque de citación. Se especifica la cita en un atributo. Es raro que la cita sea usada para algo por el navegador; el elemento más bien se usa – incorrectamente – para identar texto. cite: el documento o página que cita. No pertenece a la recomendación estricta. Centra los contenidos en relación al elemento contenedor. N/A Presentación

15 TagDescripciónAtributos Tablas. Para especificar filas, se usa, y para las columnas por fila,. Un ejemplo de una tabla de 3x2 es: 11 12 21 22 31 32 border: grosor de borde, en pixeles, 0 para ningún borde. height: altura, en pixeles estrictamente. width: ancho, en pixeles, o porcentaje relativo al elemento contenedor (##%). cellspacing: espaciado o margen entre celdas. cellpadding: padding o espaciado interno entre celdas. La cabecera de la tabla. No es mandatorio. El cuerpo de la tabla, el contenido. No es mandatorio. El pie de la tabla. No es mandatorio. Este elemento y los dos anteriores son divisores de filas. Table row. Las filas de la tabla. Deben ir dentro de, o un divisor de filas. Los atributos aplicados en afectan a toda la fila. Table header. Celda de encabezado. Análoga a, es una celda con representación especial. En esta misma tabla, por ejemplo, serían las celda de la primera fila. Los atributos aplicados en o afectan solo a la celda específica. rowspan: numero de filas a combinar. colspan: numero de columnas a combinar. Table data. Finalmente, una celda; en donde va el dato concreto. Deben ir dentro de o. Tablas

16 TagDescripciónAtributos Listas ordenadas, se imprimirán con números como viñetas. Cada elemento de la lista se específica con. N/A Listas no ordenadas, se imprimirán con puntos (bullets) como viñetas. Cada elemento de la lista se específica con. N/A Elemento de lista. Ejemplo, el siguiente marcado: elemento1 elemento2 elemento3, se imprime: elemento1 elemento2 elemento3 Usando en vez de, el resultado es: 1.elemento1 2.elemento2 3.elemento3. N/A Listas

17 Tag vacía Tag con cuerpo vacío Tag completa Cuerpo Comienzan con. Para cerrarlas se utiliza /.

18 Cuerpo Hola, mundo!

19 . Contenido de programas externos. Antes se usaba. Objetos youtubeflickrustreamGoogleMapsFlash

20 eXtensible HyperText Markup Language. HTMLXML XHTML

21 Generar una página web que muestre una noticia, a manera de entrada de blog rudimentaria. El título de la página (Visible en la barra de títulos del navegador) y el título de la nota deben ser el mismo. Utilizar un encabezado de primer nivel para el titulo, uno de segundo para el resumen o subtítulo, de haberlo; y párrafos para el contenido. Incluir hipervínculos a lo largo de la nota. Incluir una tabla o lista, a elegir. Incluir una imagen en la página web. Personalizar estilos en la nota utilizando una o varias de las siguientes tags:,,, y. Incrustar un objeto en la página. Puede ser un slideshow de flickr, un video de youtube, un GoogleMap, etc.

22 XHTML Javascript CSS http://es.wikipedia.org/wiki/XHTML http://www.w3.org/TR/xhtml1/ http://es.wikipedia.org/wiki/Javascript http://www.webteacher.com/javascript/ http://www.webestilo.com/javascript/ http://es.wikipedia.org/wiki/CSS http://www.webdesign.org/html-and-css/articles/css-for-dummies.5516.html http://www.webestilo.com/css/ http://www.w3.org/TR/CSS21/

23