S3R4
 URL: Uniform Resource Locator (localizador
  uniforme de recursos)
 HTML: Hyper-Text Markup Language.
  Lenguaje de hip...
 SGML quot;Standard Generalized Markup
  Languagequot; o quot;Lenguaje de Marcas
  Generalizadoquot;.
 XML, siglas de  e...
DOCTYPE
            <html>
             <head>
              <title> Aquí va el título</title>
             </head>
 <tag>...
Todos los documentos XHTML válidos deben llevar un elemento llamado DOCTYPE.
El DOCTYPE no es parte del documento en sí, s...
 Un Document Type Declaration - Definición
  de Tipo de Documento - o DOCTYPE asocia
  un documento SGML o XML particular...
ETIQUETAS de HEAD
 <title>Título de la página </title>

 <meta> </meta>
 ◦   Lenguaje de la página,
 ◦   Codificación
 ◦...
ETIQUETAS META
Ejemplos

1.Especificacion del autor. <meta name=quot;Autorquot; content=quot;seraquot;>

2.Descripcion bre...
ETIQUETAS META
El atributo name puede ser sustituido por el atributo http-equiv cuando queremos
incluir informacion relaci...
ETIQUETAS para Texto
 <p></p> Etiqueta para un párrafo. Nuestro
  texto se debe separar por párrafos.
 <br> es la etique...
ETIQUETAS para Texto
 Encabezados
     <hx>Encabezado con etiqueta hx</hx>
             (x va desde 1 a 6)
Encabezado con...
ETIQUETAS para Texto
 <strong>....... </strong> marca contenido al que se le quiere dar más fuerza
    o importancia que ...
ETIQUETAS para Texto
 <kbd> ... </kbd> Texto tecleado por el usuario.
    Ejemplo <kbd>Linux es mejor</kbd>


   <sup> ....
ETIQUETAS para imágenes
 <img src=”Lugar de la imagen” alt=”descriptor” >
Ejemplo:
 <img src=”mundo.jpg” alt=”mundo” >
 ...
ETIQUETAS listas
Listas ordenadas (numeradas)                     Ejemplo
Código
                                         ...
ETIQUETAS listas
Listas sin orden (no numeradas)
                                        Resultado
<ul>
  <li> uno </li>  ...
ETIQUETAS listas
Listas de definición.
Usadas para crear glosarios (o definiciones de términos). Cada línea tiene
tiene do...
ETIQUETAS de enlaces o links
Estructura de los enlaces

En general, los enlaces tienen la siguiente estructura:


        ...
ETIQUETAS de enlaces o links
1. Hiperenlaces dentro de la misma página

Usados en documentos html de gran extensión.

Para...
ETIQUETAS de enlaces o links
Enlaces con otra página dentro de nuestra web
Si quiero enlazar una palabra (o palabras) con ...
ETIQUETAS de enlaces o links
Enlaces con una página fuera de nuestra web:
Estableceremos el protocolo http y la URL de la ...
ETIQUETAS de enlaces o links
Enlaces con una dirección de email u otros protocolos

e-mail:

<a href=quot;mailto: direcció...
ETIQUETAS Tablas
Estructura de una tabla
La etiqueta general, que engloba a todas las demás es

<table> y </table>. Es dec...
ETIQUETAS Tablas
Atributos para tablas
• border: número que indica el tamaño de los bordes exteriores e
interiores de la t...
ETIQUETAS Tablas
Etiquetas para cada fila (row) de la tabla:

<tr> y </tr>.

<tr>--etiquetas de las celdas de la primera f...
ETIQUETAS Tablas
Etiquetas de celda
  <td> y </td>, entre estas está el contenido de cada celda
(texto, imágenes, etc.). o...
ETIQUETAS Tablas
Ejemplo tabla con rowspan
<table align=”center” width=”3oo” border=”l0”>
<tr>
<td rowspan=2>celda 1.1</td...
2008
Upcoming SlideShare
Loading in …5
×

Html

2,579
-1

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,579
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
107
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Html

  1. 1. S3R4
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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>
  27. 27. ETIQUETAS Tablas Ejemplo tabla con rowspan <table align=”center” width=”3oo” border=”l0”> <tr> <td rowspan=2>celda 1.1</td> <td>celda 1. 2</td> <td>celda 1. 3</td> </tr> <tr> <td>celda 2. 2</td> <td>celda 2.3</td> </tr> celda 1.1 celda 1. 2 celda 1. 3 <tr> <td>celda 3. 1</td> celda 2. 2 celda 2.3 <td>celda 3. 2</td> <td>celda 3. 3</td> celda 3. 1 celda 3. 2 celda 3. 3 </tr> </table>
  28. 28. 2008
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×