2. URL: Uniform Resource Locator (localizador
uniforme de recursos)
HTML: Hyper-Text Markup Language.
Lenguaje de hipertexto basado en marcas
DOCTYPE: Document Type Declaration
XHTML: Extensible Hyper-Text Markup
Language
CSS: Cascading Style Sheets. Hojas de estilo
en cascada
W3C: World Wide Web Consortium.
Organismo que emite los estándares html
entre otros
3. SGML quot;Standard Generalized Markup
Languagequot; o quot;Lenguaje de Marcas
Generalizadoquot;.
XML, siglas de eXtensible Markup Language
(«lenguaje de marcas extensible»), es un
metalenguaje extensible de etiquetas
desarrollado por el W3C.
4. DOCTYPE
<html>
<head>
<title> Aquí va el título</title>
</head>
<tag> <body>
Contenido Resto de elementos de la página
</tag> </body>
</html>
5. Todos los documentos XHTML válidos deben llevar un elemento llamado DOCTYPE.
El DOCTYPE no es parte del documento en sí, sino que define el tipo de DTD
(Document Type Definition o Definición de tipo de documento) a emplear en nuestros
documentos, es obligatorio.
Ejemplo :
<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01 Transitional//ENquot;
quot;http://www.w3.org/TR/html4/loose.dtdquot;>
<html>
<head>
<meta http-equiv=quot;content-typequot; content=quot;text/html;charset=iso-8859-1quot;>
<title>
Título
</title>
</head>
<body>
Texto del documento, menciones a gráficos, enlaces, etc.
</body>
</html>
6. Un Document Type Declaration - Definición
de Tipo de Documento - o DOCTYPE asocia
un documento SGML o XML particular con una
DTD(escripción de estructura y sintaxis de un
documento)
Versiones:
Strict: <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0
Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtdquot;>
Transitional: <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML
1.0 Transitional//ENquot;
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
7. ETIQUETAS de HEAD
<title>Título de la página </title>
<meta> </meta>
◦ Lenguaje de la página,
◦ Codificación
◦ Autor
◦ comportamiento...
<meta Contenido> </meta>
<meta Contenido />
8. ETIQUETAS META
Ejemplos
1.Especificacion del autor. <meta name=quot;Autorquot; content=quot;seraquot;>
2.Descripcion breve del documento:<meta name=quot;Descriptionquot; content=quot;pagina
de muestra para bachilleratoquot;>
3.Inclusion de palabras claves para agilizar busquedas de los indexadores o
buscadores .
<meta name=quot;Deywordsquot; content=quot;bachillerato,html,dhtml,css,webs,webmasterquot;>
4.Impedir la indexacion de la pagina por parte de los robots de los buscadores.
<meta name=quot;Robotsquot; CONTENT=quot;no index,no followquot;>
5.Identificacion de las herramientas utilizadas en la creacion del documento.
<meta name=quot;GENERATORquot; content=quot;Scintillaquot;>
9. ETIQUETAS META
El atributo name puede ser sustituido por el atributo http-equiv cuando queremos
incluir informacion relacionada con el protocolo HTTP.
Usos:
1.Recargas automaticas de pagina (Redireccionamientos).
<meta http-equiv=quot;Refreshquot; content=quot;12;URL=http://www.terra.es/index.htmlquot;>
(muestra la página de terra a los 12 segundos)
2.Evitar el almacenamiento en la cache.
<meta http-equiv=quot;Expiresquot; content=quot;0quot;>
<meta http-equiv=quot;Pragmaquot; content=quot;no-cachequot;>
3.Especificar el sistema de codificacion
<meta http-equiv=quot;Content-Typequot; content=quot;text/html;charset=iso-8859-1quot;>
4. Se pueden obtener efectos de transicion al entrar(page-enter) o salir de la
pagina o site(page-exit) mediante etiqueta meta
10. ETIQUETAS para Texto
<p></p> Etiqueta para un párrafo. Nuestro
texto se debe separar por párrafos.
<br> es la etiqueta para el retorno de carro.
<b></b> Etiqueta para negritas
Ejemplo:
<b>Esto está en negrita</b>
Resultado : Esto está en negrita
<i>Esto está en cursiva</i>
Resultado: Esto está en cursiva
<!--Este es un comentario y no sera tomado
en cuenta por el navegador -->
11. ETIQUETAS para Texto
Encabezados
<hx>Encabezado con etiqueta hx</hx>
(x va desde 1 a 6)
Encabezado con etiqueta h1
Encabezado con etiqueta h2
Encabezado con etiqueta h3
Encabezado con etiqueta h4
Encabezado con etiqueta h5
Encabezado con etiqueta h6
12. ETIQUETAS para Texto
<strong>....... </strong> marca contenido al que se le quiere dar más fuerza
o importancia que al resto. Es un elemento de línea.
Ejemplo Soy de un pueblo de <strong>Badajoz</strong>
Resultado:Soy de un pueblo de Badajoz
El elemento em agrega énfasis al contenido. Es un elemento de línea.
Ejemplo Soy de un pueblo de <em>Badajoz</em>
Resultado:Soy de un pueblo de Badajoz
<u> ... </u> Texto subrayado
Ejemplo Soy de un pueblo de <u>Badajoz</u>
Resultado:Soy de un pueblo de Badajoz
*
13. ETIQUETAS para Texto
<kbd> ... </kbd> Texto tecleado por el usuario.
Ejemplo <kbd>Linux es mejor</kbd>
<sup> ... </sup> Superíndice
Ejemplo: La ecuación de la teoría de la relatividad E=mc<sup>2</sup>
Resultado: La ecuación de la teoría de la relatividad E=mc2
<sub> ... </sub> Subíndice.
Ejemplo: La fórmula del agua: H<sub>2</sub>O
Resultado: La fórmula del agua: H2O
<address> ... </address> Para escribir direcciones
Ejemplo: <addres>IES Dionisio Aguado<br>C/Italia 14</address>
Resultado:
IES Dionisio Aguado
C/Italia 14
14. ETIQUETAS para imágenes
<img src=”Lugar de la imagen” alt=”descriptor” >
Ejemplo:
<img src=”mundo.jpg” alt=”mundo” >
◦ En este caso la imagen está en la carpeta del fichero html
<img src=”imagenes/mundo.jpg” alt=”mundo” >
◦ En este caso la imagen está en una carpeta diferente a la del fichero html
<img src=”http://sera.dd.es/fotos/mundo.jpg” alt=”mundo” >
◦ En este caso la imagen está en un servidor externo.
15. ETIQUETAS listas
Listas ordenadas (numeradas) Ejemplo
Código
1. uno
<ol>
<li> uno </li> 2. dos
<li> dos </li>
</ol>
Parámetro start=quot;12quot;. Empieza la lista en 12
Ejemplo:
<ol start=”12”> 12. doce
<li> doce</li>
<li> trece</li> 13. trece
</ol>
16. ETIQUETAS listas
Listas sin orden (no numeradas)
Resultado
<ul>
<li> uno </li> * uno
<li> dos </li> * dos
</ul>
Se puede anidar una lista dentro de otra. Por ejemplo:
<ul>
<li> item uno</li>
<li> item dos * item uno
<ul> * item dos
<li> item dos uno</li>
<li> item dos dos</li> * item dos uno
</ul> * item dos dos
</li>
<li> item tres</li> * item tres
</ul>
17. ETIQUETAS listas
Listas de definición.
Usadas para crear glosarios (o definiciones de términos). Cada línea tiene
tiene dos partes: 1) Palabra a definir : etiqueta <dt> (definition term) y 2) la
definición: etiqueta
<dd> (definition definition)
<dl>
<dt> Oso</dt>
<dd> Mamífero plantígrado</dd>
<dt> León</dt>
<dd> Mamífero carnívoro considerado el rey de la selva</dd>
</dl>
Su resultado es:
Oso
Mamífero plantígrado
León
Mamífero carnívoro considerado el rey de la selva
18. ETIQUETAS de enlaces o links
Estructura de los enlaces
En general, los enlaces tienen la siguiente estructura:
<a href=quot;xxxxxxquot;> yyyyyyy </a>
donde xxxxxx es el destino del enlace e yyyyyyy es el texto en pantalla del
enlace (con un color especial y generalmente subrayado)
Tipos de hiperenlaces
Vamos a distinguir cuatro tipos de hiperenlaces:
• * Hiperenlaces dentro de la misma página (anclas)
• * Hiperenlaces con otra página nuestra
• * Hiperenlaces con una página fuera de nuestra web
• * Hiperenlace de correo y otros protocolos
19. ETIQUETAS de enlaces o links
1. Hiperenlaces dentro de la misma página
Usados en documentos html de gran extensión.
Para crear este tipo de hiperenlace primero se debe crear un marcador o
ancla en el lugar de destino de la página mediante la etiqueta
<a name=quot;marcadorquot;> </a>
Entonces xxxxxx es decir, el destino del enlace, en este caso el sitio dentro
de la página a donde queremos saltar, se sustituye por #marcador (la palabra
marcador puede ser cualquier palabra que queramos). Lo que hemos llamado
antes YYYYYYY es la palabra (o palabras) que aparecerán en la pantalla en
color (en forma de hipertexto). Su estructura es, entonces:
<a href=quot;#marcadorquot;> YYYYYYY </a>
Por ejemplo, si quiero saltar desde aquí al princpio de la página:
<a href=quot;#fprincipioquot;> Pulsa para ir al principio</a>
20. ETIQUETAS de enlaces o links
Enlaces con otra página dentro de nuestra web
Si quiero enlazar una palabra (o palabras) con una página llamada
mipaginaenlace.html. :
<a href=quot;mipaginaenlace.htmquot;> Ejemplo </a>
Podemos usar también los marcadores dentro de la página destino
* En el caso de que la página esté en un subdirectorio de nuestra web por
ejemplo: carpeta usaremos :
<a href=quot;carpeta/mipaginaenlace.htmquot;> Ejemplo </a>
* En el caso de que la página esté en un subdirectorio padre de nuestra
web por ejemplo: carpetapadre usaremos :
<a href=quot;../mipaginaenlace.htmquot;> Ejemplo </a>
21. ETIQUETAS de enlaces o links
Enlaces con una página fuera de nuestra web:
Estableceremos el protocolo http y la URL de la página
<a href=quot;http://www.terra.es/index.htmlquot;> Página inicial de
Terra </a>
Que daría como resultado:Página inicial de Terra
Estableceremos el protocolo http y la URL de la página y el ancla
<a href=quot;http://www.terra.es#anclaquot;>ancla de página inicial de
href=quot;http://www.terra.es#anclaquot;>
Terra </a>
Que daría como resultado: Página inicial de Terra
22. ETIQUETAS de enlaces o links
Enlaces con una dirección de email u otros protocolos
e-mail:
<a href=quot;mailto: dirección_de_emailquot;> Texto del enlace </a>
Mi correo
Abre el lector de correo por defecto
ftp:
<a href=quot;ftp:// ftp.rediris.esquot;> Ftp de REDIRIS </a>
Ftp de REDIRIS
23. ETIQUETAS Tablas
Estructura de una tabla
La etiqueta general, que engloba a todas las demás es
<table> y </table>. Es decir:
<table>
---resto de las etiquetas--
</table>
<table border=quot;1quot;>-resto de las etiquetas--</table>
24. ETIQUETAS Tablas
Atributos para tablas
• border: número que indica el tamaño de los bordes exteriores e
interiores de la tabla expresados en píxeles.
• cellspacing: admite como valor un número que indica (en
píxeles) la distancia de separación entre los bordes de celdas
adyacentes.
•cellpadding: admite como valor un número que indica (en
píxeles) la distancia desde el borde de cada celda hasta su
contenido.
• bgcolor: su valor es el nombre del color (o su expresión
hexadecimal precedida del signo #) que se utilizará como fondo
de la tabla.
• width: indica la anchura de la tabla, que puede expresarse en
píxeles o como un valor porcentual (colocando el signo % a
continuación del valor).
• align: indica la alineación de la tabla respecto a la ventana del
navegador. admite los siguientes valores: left (izquierda), right
(derecha) o center (centro).
25. ETIQUETAS Tablas
Etiquetas para cada fila (row) de la tabla:
<tr> y </tr>.
<tr>--etiquetas de las celdas de la primera fila--</tr>
<tr>--etiquetas de las distintas celdas de la segunda fila--</tr>
Atributos:
• align: alineación horizontal del contenido de las celdas
respecto de los bordes laterales . Admite los valores left,
center o right.
•valign: alineación vertical del contenido de las celdas
respecto de los bordes superior e inferior . admite los valores
top, middle y bottom.
26. ETIQUETAS Tablas
Etiquetas de celda
<td> y </td>, entre estas está el contenido de cada celda
(texto, imágenes, etc.). o bien <th>...</th>Usado para las
celdas que son cabecera de tablas
Ejemplo: ej
<table border=quot;1quot;> Que resulta:
<tr>
<th>fila1-celda1</th>
<th>fila1-celda2</th>
<th>fila1-celda3</th>
</tr>
fila1-celda1 fila1-celda2 fila1-celda3
<tr>
<td>fila2-celda1</td>
<td>fila2-celda2</td> fila2-celda1 fila2-celda2 fila2-celda3
<td>fila2-celda3</td>
</tr>
</table>
