Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download www.centroperiodismodigital.org
Document related concepts
no text concepts found
Transcript
HTML, XHTML, CSS y JavaScript
Centro de Periodismo Digital
Luis Fernando González Fernández
BÁSICOS DE HTML
INTRODUCCIÓN
“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-html40119991224/intro/intro.html#h-2.2
CONCEPTOS CLAVE
Internet
Browser
(Navegador)
CSS
(Cascading
Style
Sheets)
WWW
(World
Wide
Web)
W3C
(World Wide
Web
Consortium)
HTML
(Hypertext
Mark-Up
Language)
CONCEPTOS CLAVE
Internet
CONCEPTOS CLAVE
HTML – HyperText Markup Language
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
CONCEPTOS CLAVE
CSS – Cascading Style Sheets
body {
text-align:
background-c
width: 1024p
margin: 1px;
}
a:hover {
HTML
¡Código!
¡Muy
complicado!
¡No hay
tiempo!
HTML
TUTORIAL
ARCHIVOS HTML
Guardar como
Todos los
archivos
(*.*)
.htm o .html
HTML
HTML
head - Cabecera
title - título
body - Cuerpo
HTML
<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” />
<!-- Esto no se imprime -->
<h1>HTML 4.01 Specification</h1>
<h2>W3C Recommendation 24</h2>
</body>
</html>
TAGS COMUNES - 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.
TAGS COMUNES
Vínculos y esquematización
Tag
Descripción
Atributos
<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
TAGS COMUNES
Presentación
Tag
Descripción
Atributos
<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></cente
r>
No pertenece a la recomendación estricta. Centra los
contenidos en relación al elemento contenedor.
N/A
TAGS COMUNES
Tablas
Tag
Descripción
Atributos
<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>
<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.
• 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.
<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.
<td></td>
Table data. Finalmente, una celda; en donde va el dato
concreto. Deben ir dentro de <tr></tr> o <th></th>.
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.
TAGS COMUNES
Listas
Tag
Descripción
Atributos
<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
N/A
Usando <ol></ol> en vez de <ul></ul>, el resultado es:
1. elemento1
2. elemento2
3. elemento3.
TAG (“ETIQUETA”)
Comienzan con < y terminan con >.
Para cerrarlas se utiliza /.
<tag />
<tag></tag>
<tag>Cuerpo</tag>
•Tag vacía
•Tag con cuerpo vacío
•Tag completa
TAG
<tag atributo1=“valor1”
atributo2=“valor2” …
atributon=“valorn”>Cuerpo</tag>
<body bgcolor=“#FFFFFF”
alink=“#0000FF”
vlink=“#CC00AA”>Hola,
mundo!</body>
LA TAG OBJECT
<object></object>. Contenido de programas
externos. Antes se usaba <embed></embed>.
ustream
flickr
youtube
GoogleMaps
Objetos
Flash
XHTML
eXtensible HyperText Markup Language.
HTML
XHTML
XML
EJERCICIO
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.
SEGUIMIENTO
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/
CSS
Javascript
http://es.wikipedia.org/wiki/Javascript
http://www.webteacher.com/javascript/
http://www.webestilo.com/javascript/
XHTML
http://es.wikipedia.org/wiki/XHTML
http://www.w3.org/TR/xhtml1/
GRACIAS
