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

HTML, XHTML, CSS y JavaScriptCentro de Periodismo DigitalLuis Fernando González Fernández

“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

Internet

HTML – HyperText Markup Language

<html><head><title></title></head><body>

</body></html>

CSS – Cascading Style Sheets

body { text-align: background-c width: 1024p margin: 1px;}

a:hover {

<html><head> <title>HTML 4.01 Specification</title></head><body bgcolor=“#FFFFFF” alink=“#0000FF” vlink=“#CC00AA” …> <a href=“#”>next</a> <a href=“#”>table of contents</a> <hr /> <img src=“image.png” />



<h1>HTML 4.01 Specification</h1> <h2>W3C Recommendation 24</h2>

</body></html>

Tag Descripción Atributos

<!DOCTYPE …>

El famoso DTD siempre es lo primero en el documento y le dice al navegador qué tipo de documento sigue.

N/A

<html></html>

Contenedor principal de la página. Toda la página debe estar dentro de esta tag.

N/A

<head></head>

Cabecera de la página. Dentro se especifican los css a usar, javascripts, e información para el navegador y SEO.

N/A

<style></style>

Estilos. Para especificar los estilos (CSS) a usar en la página web.

type: El tipo de especificación de estilos (text/css).

<link></link>

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.

<meta></meta>

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

<script></script>

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

<body></body>

Cuerpo. Dentro va la página web en sí, lo que el cliente ve.

bgcolor: color de fondo, font: tipografía.


<a></a> Hipervínculo. Puede usarse también para enlazar a correo electrónico, usando “mailto:[email protected]”

href: URL (página) destino o correo usando mailto:correo

<h1></h1> Encabezado de 1er nivel. Si se quieren más encabezados, usar <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5> o <h6></h6>, siendo el 6 el más anidado (De menor nivel).

N/A

<br /> Salto de línea (Ej. Un “enter” o “return”). N/A

<hr /> Línea horizontal. Para dividir contenidos y organización.

N/A

<p></p> Párrafo. N/A

<div></div> Elemento bloque de división. Generalmente se ve muy similar a un párrafo.

N/A

<span></span>

Elemento en línea de división. No incluye separaciones visibles entre elementos de este tipo.

N/A

<img /> Imagen. Si se quiere que la imagen sea un hipervínculo, encerrar </img> dentro de <a></a>.

src: ruta a la imagen, o URL de la imagen, border: grosor del borde, 0 para ningún borde

Vínculos y esquematización


<strong></strong>

Negritas. Puede usarse <b></b> (Los navegadores lo reconocen sin problemas) pero no es el estándar.

N/A

<em></em>

Enfatizar. Generalmente significa cursiva. Puede usarse <i></i>, pero una vez más, no es el estándar.

N/A

<font></font>

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: <font face=“Arial” color=“red”></font>

face: tipografía, size: tamaño (predeterminados del 1 al 7), color: color, o color RGB

<pre></pre>

Formato predefinido, por el navegador.

<code></code>

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

<blockquote></blockquote>

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.

<center></center>

No pertenece a la recomendación estricta. Centra los contenidos en relación al elemento contenedor.

N/A

Presentación


<table></table>

Tablas. Para especificar filas, se usa <tr></tr>, y para las columnas por fila, <td></td>. Un ejemplo de una tabla de 3x2 es: <table><tr><td>11</td><td>12</td></tr><tr><td>21</td><td>22</td></tr><tr><td>31</td><td>32</td></tr></table>

• 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.

<thead></thead>

La cabecera de la tabla. No es mandatorio.

<tbody></tbody>

El cuerpo de la tabla, el contenido. No es mandatorio.

<tfoot></tfoot>

El pie de la tabla. No es mandatorio. Este elemento y los dos anteriores son divisores de filas.

<tr></tr> Table row. Las filas de la tabla. Deben ir dentro de <table></table>, o un divisor de filas.

Los atributos aplicados en <tr></tr> afectan a toda la fila.

<th></th> Table header. Celda de encabezado. Análoga a <td></td>, 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 <th></th> o <td></td> afectan solo a la celda específica.• rowspan: numero de filas a combinar.• colspan: numero de columnas a combinar.

<td></td> Table data. Finalmente, una celda; en donde va el dato concreto. Deben ir dentro de <tr></tr> o <th></th>.

Tablas


<ol></ol> Listas ordenadas, se imprimirán con números como viñetas. Cada elemento de la lista se específica con <li></li>.

N/A

<ul></ul> Listas no ordenadas, se imprimirán con puntos (bullets) como viñetas. Cada elemento de la lista se específica con <li></li>.

N/A

<li></li> Elemento de lista. Ejemplo, el siguiente marcado:<ul> <li>elemento1</li> <li>elemento2</li> <li>elemento3</li></ul>,se imprime:•elemento1•elemento2•elemento3

Usando <ol></ol> en vez de <ul></ul>, el resultado es:1.elemento12.elemento23.elemento3.

N/A

Listas

Comienzan con < y terminan con >.

Para cerrarlas se utiliza /.

<tag atributo1=“valor1” atributo2=“valor2” … atributon=“valorn”>Cuerpo</tag>

<body bgcolor=“#FFFFFF” alink=“#0000FF” vlink=“#CC00AA”>Hola, mundo!</body>

eXtensible HyperText Markup Language.

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: <strong></strong>,<em></em>, <font></font>, <code></code> y <hr />.

Incrustar un objeto en la página. Puede ser un slideshow de flickr, un video de youtube, un GoogleMap, etc.

http://es.wikipedia.org/wiki/XHTMLhttp://www.w3.org/TR/xhtml1/

http://es.wikipedia.org/wiki/Javascripthttp://www.webteacher.com/javascript/http://www.webestilo.com/javascript/

http://es.wikipedia.org/wiki/CSShttp://www.webdesign.org/html-and-css/articles/css-for-dummies.5516.html

http://www.webestilo.com/css/http://www.w3.org/TR/CSS21/

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

Documents

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