Html
Upcoming SlideShare
Loading in...5
×
 

Html

on

  • 3,681 views

 

Statistics

Views

Total Views
3,681
Views on SlideShare
3,386
Embed Views
295

Actions

Likes
2
Downloads
105
Comments
0

11 Embeds 295

http://ens46.sfe.infd.edu.ar 119
http://aulavirtual2.educa.madrid.org 117
http://www.iesdionisioaguado.org 34
http://www.slideshare.net 10
http://pino-inforacin.blogspot.com 6
http://dubby66.blogspot.com 2
http://pensamientosdeunfilosofo.blogspot.com 2
http://variito.blogspot.com 2
http://www.pensamientosdeunfilosofo.blogspot.com 1
http://dubby66.blogspot.mx 1
http://mario-mario7.blogspot.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html Html Presentation Transcript

  • S3R4
  •  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
  •  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.
  • DOCTYPE <html> <head> <title> Aquí va el título</title> </head> <tag> <body> Contenido Resto de elementos de la página </tag> </body> </html>
  • 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>
  •  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>
  • 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 />
  • 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;>
  • 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
  • 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 -->
  • 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
  • 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 *
  • 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
  • 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.
  • 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>
  • 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>
  • 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
  • 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
  • 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>
  • 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>
  • 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
  • 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
  • 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>
  • 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).
  • 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.
  • 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>
  • 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>
  • 2008