SlideShare una empresa de Scribd logo
1 de 28
Descargar para leer sin conexión
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

Más contenido relacionado

La actualidad más candente (19)

Curso HTML 5 & jQuery - Leccion 1
Curso HTML 5 & jQuery - Leccion 1 Curso HTML 5 & jQuery - Leccion 1
Curso HTML 5 & jQuery - Leccion 1
 
Producto 4
Producto 4Producto 4
Producto 4
 
Curso HTML 5 & jQuery - Leccion 2
Curso HTML 5 & jQuery - Leccion 2Curso HTML 5 & jQuery - Leccion 2
Curso HTML 5 & jQuery - Leccion 2
 
HTML
HTMLHTML
HTML
 
Curso HTML 5 & jQuery - Leccion 5
Curso HTML 5 & jQuery - Leccion 5Curso HTML 5 & jQuery - Leccion 5
Curso HTML 5 & jQuery - Leccion 5
 
HTML 2011
HTML 2011HTML 2011
HTML 2011
 
Html
HtmlHtml
Html
 
Páginas web con html
Páginas web con htmlPáginas web con html
Páginas web con html
 
Páginas html
Páginas htmlPáginas html
Páginas html
 
LENGUAJE HTML
LENGUAJE HTMLLENGUAJE HTML
LENGUAJE HTML
 
Tagshtml
TagshtmlTagshtml
Tagshtml
 
Curso html
Curso   htmlCurso   html
Curso html
 
Manual intencivo de htlm
Manual intencivo de htlmManual intencivo de htlm
Manual intencivo de htlm
 
Html
HtmlHtml
Html
 
Etiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje htmlEtiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje html
 
Etiquetas head y body
Etiquetas head y bodyEtiquetas head y body
Etiquetas head y body
 
DBER N° 2 blog blogger blogspot
DBER N° 2 blog blogger blogspotDBER N° 2 blog blogger blogspot
DBER N° 2 blog blogger blogspot
 
Programación avanzada etiquetas de html
Programación avanzada   etiquetas de htmlProgramación avanzada   etiquetas de html
Programación avanzada etiquetas de html
 
PresentacióN Html
PresentacióN HtmlPresentacióN Html
PresentacióN Html
 

Similar a Html

Introducción al Desarrollo Web
Introducción al Desarrollo WebIntroducción al Desarrollo Web
Introducción al Desarrollo WebJorge Pirela
 
Introducción a XML: Sintaxis y documentos bien formados
Introducción a XML: Sintaxis y documentos bien formadosIntroducción a XML: Sintaxis y documentos bien formados
Introducción a XML: Sintaxis y documentos bien formadosJose Emilio Labra Gayo
 
Informatica
InformaticaInformatica
Informaticajuani9
 
Informatica
InformaticaInformatica
Informaticajuani9
 
Informatica
InformaticaInformatica
Informaticajuani9
 
Informatica
InformaticaInformatica
Informaticajuani9
 
Lenguaje de marcas html
Lenguaje de marcas htmlLenguaje de marcas html
Lenguaje de marcas htmlrmonago
 
MEJORES - Curso-HTML-+-CSS.pdf
MEJORES - Curso-HTML-+-CSS.pdfMEJORES - Curso-HTML-+-CSS.pdf
MEJORES - Curso-HTML-+-CSS.pdfyanpier1
 
Deber de Programación Web / Etiquetas mas utilizadas del lenguaje html
Deber de Programación Web / Etiquetas mas utilizadas del lenguaje htmlDeber de Programación Web / Etiquetas mas utilizadas del lenguaje html
Deber de Programación Web / Etiquetas mas utilizadas del lenguaje htmlDoraliza Hugo Vera
 
Lenguaje de programación de páginas web
Lenguaje de programación de páginas webLenguaje de programación de páginas web
Lenguaje de programación de páginas webalbafa1995
 

Similar a Html (20)

Html
HtmlHtml
Html
 
Introducción al Desarrollo Web
Introducción al Desarrollo WebIntroducción al Desarrollo Web
Introducción al Desarrollo Web
 
Introducción a XML: Sintaxis y documentos bien formados
Introducción a XML: Sintaxis y documentos bien formadosIntroducción a XML: Sintaxis y documentos bien formados
Introducción a XML: Sintaxis y documentos bien formados
 
Estructura html
Estructura htmlEstructura html
Estructura html
 
C2 lenguaje html
C2 lenguaje htmlC2 lenguaje html
C2 lenguaje html
 
Html.pptx
Html.pptxHtml.pptx
Html.pptx
 
Informatica
InformaticaInformatica
Informatica
 
Informatica
InformaticaInformatica
Informatica
 
Informatica
InformaticaInformatica
Informatica
 
Informatica
InformaticaInformatica
Informatica
 
Lenguaje de marcas html
Lenguaje de marcas htmlLenguaje de marcas html
Lenguaje de marcas html
 
XHTML
XHTMLXHTML
XHTML
 
MEJORES - Curso-HTML-+-CSS.pdf
MEJORES - Curso-HTML-+-CSS.pdfMEJORES - Curso-HTML-+-CSS.pdf
MEJORES - Curso-HTML-+-CSS.pdf
 
Curso-HTML--CSS.pdf
Curso-HTML--CSS.pdfCurso-HTML--CSS.pdf
Curso-HTML--CSS.pdf
 
Deber de Programación Web / Etiquetas mas utilizadas del lenguaje html
Deber de Programación Web / Etiquetas mas utilizadas del lenguaje htmlDeber de Programación Web / Etiquetas mas utilizadas del lenguaje html
Deber de Programación Web / Etiquetas mas utilizadas del lenguaje html
 
Deber de Programacion Web
Deber de Programacion WebDeber de Programacion Web
Deber de Programacion Web
 
Codigo html
Codigo htmlCodigo html
Codigo html
 
Lenguaje de programación de páginas web
Lenguaje de programación de páginas webLenguaje de programación de páginas web
Lenguaje de programación de páginas web
 
Practicas html
Practicas htmlPracticas html
Practicas html
 
Etiqueta de hatml 1
Etiqueta de hatml 1Etiqueta de hatml 1
Etiqueta de hatml 1
 

Último

Guia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos BasicosGuia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos BasicosJhonJairoRodriguezCe
 
presentación del desensamble y ensamble del equipo de computo en base a las n...
presentación del desensamble y ensamble del equipo de computo en base a las n...presentación del desensamble y ensamble del equipo de computo en base a las n...
presentación del desensamble y ensamble del equipo de computo en base a las n...axelv9257
 
Tarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptx
Tarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptxTarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptx
Tarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptxVICTORMANUELBEASAGUI
 
presentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdf
presentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdfpresentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdf
presentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdfaxelv9257
 
2023 07 Casos prácticos para Realidad aumentada, metaverso y realidad extendida
2023 07 Casos prácticos para Realidad aumentada, metaverso y realidad extendida2023 07 Casos prácticos para Realidad aumentada, metaverso y realidad extendida
2023 07 Casos prácticos para Realidad aumentada, metaverso y realidad extendidaLuis Francisco Reyes Aceves
 
Editorial. Grupo de 12B. La Salle Margarita.pdf
Editorial. Grupo de 12B. La Salle Margarita.pdfEditorial. Grupo de 12B. La Salle Margarita.pdf
Editorial. Grupo de 12B. La Salle Margarita.pdfYanitza28
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxJorgeParada26
 
QUINTA SEXTA GENERACION de COMPUTADORAS
QUINTA  SEXTA GENERACION de COMPUTADORASQUINTA  SEXTA GENERACION de COMPUTADORAS
QUINTA SEXTA GENERACION de COMPUTADORASMarc Liust
 
herramientas web para estudiantes interesados en el tema
herramientas web para estudiantes interesados en el temaherramientas web para estudiantes interesados en el tema
herramientas web para estudiantes interesados en el temaJadeVilcscordova
 
10°8 - Avances tecnologicos del siglo XXI 10-8
10°8 - Avances tecnologicos del siglo XXI 10-810°8 - Avances tecnologicos del siglo XXI 10-8
10°8 - Avances tecnologicos del siglo XXI 10-8antoniopalmieriluna
 
Editorial. Grupo de 12B de La Salle Margarita.pdf
Editorial. Grupo de 12B de La Salle Margarita.pdfEditorial. Grupo de 12B de La Salle Margarita.pdf
Editorial. Grupo de 12B de La Salle Margarita.pdfYanitza28
 
AVANCES TECNOLOGICOS DEL SIGLO XXI. 10-08..pptx
AVANCES TECNOLOGICOS  DEL SIGLO XXI. 10-08..pptxAVANCES TECNOLOGICOS  DEL SIGLO XXI. 10-08..pptx
AVANCES TECNOLOGICOS DEL SIGLO XXI. 10-08..pptxdulcemonterroza
 
microsoft word manuales para todos tipos de estudiamte
microsoft word manuales para todos tipos de estudiamtemicrosoft word manuales para todos tipos de estudiamte
microsoft word manuales para todos tipos de estudiamte2024020140
 
infor expo AVANCES TECNOLOGICOS DEL SIGLO 21.pptx
infor expo AVANCES TECNOLOGICOS DEL SIGLO 21.pptxinfor expo AVANCES TECNOLOGICOS DEL SIGLO 21.pptx
infor expo AVANCES TECNOLOGICOS DEL SIGLO 21.pptxgustavovasquezv56
 
Función del analizador léxico.pdf presentacion
Función del analizador léxico.pdf presentacionFunción del analizador léxico.pdf presentacion
Función del analizador léxico.pdf presentacionEmanuelMuoz11
 
Redes Neuronales profundas convolucionales CNN ́s-1.pdf
Redes Neuronales profundas convolucionales CNN ́s-1.pdfRedes Neuronales profundas convolucionales CNN ́s-1.pdf
Redes Neuronales profundas convolucionales CNN ́s-1.pdfJosAndrRosarioVzquez
 

Último (16)

Guia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos BasicosGuia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos Basicos
 
presentación del desensamble y ensamble del equipo de computo en base a las n...
presentación del desensamble y ensamble del equipo de computo en base a las n...presentación del desensamble y ensamble del equipo de computo en base a las n...
presentación del desensamble y ensamble del equipo de computo en base a las n...
 
Tarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptx
Tarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptxTarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptx
Tarea_sesion_15_Reportes Maestro - Detalle con el uso de AJAX.pptx
 
presentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdf
presentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdfpresentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdf
presentacion_desamblado_de_una_computadora_base_a_las_normas_de_seguridad.pdf
 
2023 07 Casos prácticos para Realidad aumentada, metaverso y realidad extendida
2023 07 Casos prácticos para Realidad aumentada, metaverso y realidad extendida2023 07 Casos prácticos para Realidad aumentada, metaverso y realidad extendida
2023 07 Casos prácticos para Realidad aumentada, metaverso y realidad extendida
 
Editorial. Grupo de 12B. La Salle Margarita.pdf
Editorial. Grupo de 12B. La Salle Margarita.pdfEditorial. Grupo de 12B. La Salle Margarita.pdf
Editorial. Grupo de 12B. La Salle Margarita.pdf
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
QUINTA SEXTA GENERACION de COMPUTADORAS
QUINTA  SEXTA GENERACION de COMPUTADORASQUINTA  SEXTA GENERACION de COMPUTADORAS
QUINTA SEXTA GENERACION de COMPUTADORAS
 
herramientas web para estudiantes interesados en el tema
herramientas web para estudiantes interesados en el temaherramientas web para estudiantes interesados en el tema
herramientas web para estudiantes interesados en el tema
 
10°8 - Avances tecnologicos del siglo XXI 10-8
10°8 - Avances tecnologicos del siglo XXI 10-810°8 - Avances tecnologicos del siglo XXI 10-8
10°8 - Avances tecnologicos del siglo XXI 10-8
 
Editorial. Grupo de 12B de La Salle Margarita.pdf
Editorial. Grupo de 12B de La Salle Margarita.pdfEditorial. Grupo de 12B de La Salle Margarita.pdf
Editorial. Grupo de 12B de La Salle Margarita.pdf
 
AVANCES TECNOLOGICOS DEL SIGLO XXI. 10-08..pptx
AVANCES TECNOLOGICOS  DEL SIGLO XXI. 10-08..pptxAVANCES TECNOLOGICOS  DEL SIGLO XXI. 10-08..pptx
AVANCES TECNOLOGICOS DEL SIGLO XXI. 10-08..pptx
 
microsoft word manuales para todos tipos de estudiamte
microsoft word manuales para todos tipos de estudiamtemicrosoft word manuales para todos tipos de estudiamte
microsoft word manuales para todos tipos de estudiamte
 
infor expo AVANCES TECNOLOGICOS DEL SIGLO 21.pptx
infor expo AVANCES TECNOLOGICOS DEL SIGLO 21.pptxinfor expo AVANCES TECNOLOGICOS DEL SIGLO 21.pptx
infor expo AVANCES TECNOLOGICOS DEL SIGLO 21.pptx
 
Función del analizador léxico.pdf presentacion
Función del analizador léxico.pdf presentacionFunción del analizador léxico.pdf presentacion
Función del analizador léxico.pdf presentacion
 
Redes Neuronales profundas convolucionales CNN ́s-1.pdf
Redes Neuronales profundas convolucionales CNN ́s-1.pdfRedes Neuronales profundas convolucionales CNN ́s-1.pdf
Redes Neuronales profundas convolucionales CNN ́s-1.pdf
 

Html

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