SlideShare una empresa de Scribd logo
1 de 24
Carrera de Informática
Edwin Patricio Cocha
• HTML, siglas de HyperText Markup
  Language («lenguaje de marcado de hipertexto»), hace
  referencia al lenguaje de marcado predominante para la
  elaboración de páginas web que se utiliza para describir
  y traducir la estructura y la información en forma de
  texto, así como para complementar el texto con objetos
  tales como imágenes.
• Un documento HTML comienza con la etiqueta <html>, y
  termina con </html>. Dentro del documento (entre las
  etiquetas de principio y fin de html), hay dos zonas bien
  diferenciadas: el encabezamiento, delimitado
  por<head> y </head>, que sirve para definir diversos
  valores válidos en todo el documento; y el cuerpo,
  delimitado por <body> y </body>, donde reside la
  información del documento.
• La única utilidad del encabezamiento en la que nos
  detendremos es la directiva <title>, que permite
  especificar el título de un documento HTML. Este título
  no forma parte del documento en sí: no aparece, por
  ejemplo, al principio del documento una vez que este se
  presenta con un programa adecuado, sino que suele
  servir como título de la ventana del programa que nos la
  muestra. Por ejemplo, en el encabezamiento de este
  manual se ha especificado:
• <title>Manual práctico de HTML</title>en minúsculas.
  Obsérverse que el título que encabeza este texto se ha
  escrito con mayúsculas, para distinguirlo del
  título global del documento.
• El cuerpo de un documento HTML contiene el texto que,
  con la presentación y los efectos que se decidan, se
  presentará ante el hiperlector. Dentro del cuerpo son
  aplicables todos los efectos que se van a mencionar en
  el resto de esta guía. Dichos efectos se especifican
  exclusivamente a través de directivas. Esto quiere decir
  que los espacios, tabulaciones y retornos de carro que
  se introduzcan en el fichero fuente no tienen ningún
  efecto a la hora de la presentación final del documento.
  Por ejemplo, escribiendo:
• Estas palabras forman una frase. producimos
  exactamente lo mismo que con:
• Estas       palabras      forman       una frase.
• A la hora de la verdad lo que se ve es: Estas palabras
  forman una frase.
• En resumen, la estructura básica de un documento
  HTML queda de la forma siguiente:
• <html>
•  <head>
•  <title>Título</title>
• </head> <body>
• Texto del documento, menciones a gráficos, enlaces, etc.
  </body>
• </html>
• Como ya hemos dicho, la estructura lógica del texto y los
  diferentes efectos que se le apliquen se especifican
  mediante directivas. En este punto vamos a repasar
  algunas de las más importantes. En cada uno de los
  casos que veremos, primero se presenta el texto original
  HTML, es decir, lo que nosotros editamos, con las
  directivas situadas en los lugares adecuados; y después
  se presenta el efecto que dicho texto fuente produce una
  vez que se interpreta y se representa con el programa
  adecuado.
• Mediante los títulos, en sus diferentes niveles de
  importancia, podemos definir el esqueleto del
  documento, su estructura básica.
• <h1>Mucha importancia</h1>
• Mucha importancia
• <h2>Menos importancia</h2>
• Menos importancia
• <h3>Mucha menos importancia</h3>
• Mucha menos importancia
• Mediante estos atributos determinamos el estilo y el tipo
  de letra que tendrá la presentación del documento final.
  El primero en el que nos deberíamos detener es el texto
  normal entendiendo como tal el que no tiene ninguna
  característica especial. Para definir un párrafo
  como normal no es necesario poner ninguna etiqueta. Lo
  único que hay que tener en cuenta, como ya se ha dicho
  antes, es que al presentar el documento se hace caso
  omiso de los espacios, tabulaciones y retornos de carro
  que se encuentren en el texto fuente. Por ello cuando se
  quiera forzar un final de línea es necesario utilizar dos
  directivas especiales:
• <p> para marcar un fin de párrafo, y <br> para un único
  retorno de carro. La diferencia entre ambas es que la
  separación de líneas que provoca<p> es algo mayor que
  la de <br>, para que los párrafos se distingan bien entre
  sí. Las dos directivas mencionadas se sitúan en el punto
  en que queremos poner la separación. Por ejemplo:
• Este será un texto normal (párrafo 1, línea 1).<br>
• El primer párrafo estará formado por 2 líneas (párrafo 1,
  línea. <p>
• Este ya es el segundo párrafo (párrafo 2, línea 1).<p>
• Este será un texto normal (párrafo 1, línea 1).
• El primer párrafo estará formado por 2 líneas (párrafo 1,
  línea 2).
• Este ya es el segundo párrafo (párrafo 2, línea 1).
• Por supuesto, estas dos etiquetas se puede aplicar
  donde queramos, no sólo en el texto normal.
• El texto preformateado (etiqueta <pre>) se aplica cuando
  queremos que en la presentación final del documento se
  respeten los espacios y retornos de carro que hayamos
  puesto en el texto fuente. Además se utilizará un tipo de
  letra de espaciado fijo, parecido al de una máquina de
  escribir, más pequeño que el del texto normal. Este estilo
  de texto puede ser adecuado, por ejemplo, para una
  tabla numérica sencilla:
•   <pre> Texto preformateado
•   ---------------------
•    |1|2|3|4|
•    |5|6|7|8|
•    | 9 | 10 | 11 | 12 |
•   ---------------------
•   </pre>Texto preformateado
•   ---------------------
•   |1|2|3|4|
•   |5|6|7|8|
•   | 9 | 10 | 11 | 12 |
•   ---------------------
• Esto en negrita y esto en cursiva Se puede utilizar un
  tipo de letra similar al de una máquina de escribir:
• <tt>Máquina de escribir</tt>
• Máquina de escribir Para centrar texto (o, en general,
  cualquier cosa: un gráfico, por ejemplo) se usa la
  directiva <center>:
• <center>Verde que te quiero verde</center>
                 • Verde que te quiero verde
• Las listas se definen de forma muy sencilla: se dice
  dónde empieza la lista, dónde empieza cada punto y
  dónde acaba la lista. Las etiquetas que se utilicen en
  cada caso deben aparecer al principio de línea, o al
  menos sin texto por delante (sólo espacios o
  tabulaciones).Podemos recurrir a tres tipos distintos de
  listas, cada una con una presentación diferente: no
  numeradas, numeradas y listas de definiciones
  (glosarios).
• Las listas se pueden anidar, es decir, en el lugar donde
  debería ir uno de los términos de la lista se pone una
  nueva lista, que por supuesto no tiene porqué ser del
  mismo tipo.
• Esto es una lista no numerada:
•   <ul>
•   <li>Tomates
•   <li>Zanahorias
•   <li>Puerros
•   </ul>

• Tomates
• Zanahorias
• Puerros
•   <ol>
•   <li>Miguel Induráin
•   <li>Tony Rominger
•   <li>Eugeni Berzin
•   </ol>

1. Miguel Induráin
2. Tony Rominger
3. Eugeni Berzin
• MARQUEE
• La etiqueta <MARQUEE></MARQUEE> crea una
  marquesina con un texto en su interior que se desplaza.
• Funciona unicamente con Ms-Explorer. Sus parámetros
  son los siguientes :
• align = top / middle / bottom Indica si el texto del interior
  de la marquesina se alinea en la zona alta (top), en la
  baja (bottom) o en el centro (middle) de la misma.
• bgcolor = "codigo de color" Indica el color del fondo de
  la marquesina.
• direction = left / right Indica hacia que lugar se desplaza
  el texto, hacia la izquierda (left) o hacia la derecha (right)

• height = num o % Indica la altura de la marquesina en
  puntos o porcentaje en función de la ventana del
  navegador.

• width = num o % Indica la anchura de la marquesina en
  puntos o porcentaje en función de la ventana del
  navegador.
• loop = num / infinite Indica el numero de veces que se
  desplazará el texto por la marquesina. Si se indica
  infinite, se desplazará indefinidamente.
• scrolldelay = num. Indica el número de milisegundos
  que tarda en reescribirse el texto por la marquesina, a
  mayor número mas lentamente se desplazará el texto.
• Veamos un ejemplo de esta etiqueta :

• <MARQUEE bgcolor = "#FFFFFF" width
  = 50% scrolldelay = 0 > Bienvenido a mi pagina
  personal en Internet.
  </MARQUEE>
Manual de html

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

HTML
HTMLHTML
HTML
 
Html apunte 2
Html apunte 2Html apunte 2
Html apunte 2
 
Etiquetas Diapositivas.
Etiquetas Diapositivas.Etiquetas Diapositivas.
Etiquetas Diapositivas.
 
Conceptos básicos Html
Conceptos básicos HtmlConceptos básicos Html
Conceptos básicos Html
 
Inicio al HTML
Inicio al HTMLInicio al HTML
Inicio al HTML
 
Conceptos básicos y etiquetas
Conceptos básicos y etiquetasConceptos básicos y etiquetas
Conceptos básicos y etiquetas
 
Etiquetas HTML
Etiquetas HTMLEtiquetas HTML
Etiquetas HTML
 
Curso HTML 5 & jQuery - Leccion 1
Curso HTML 5 & jQuery - Leccion 1 Curso HTML 5 & jQuery - Leccion 1
Curso HTML 5 & jQuery - Leccion 1
 
Lenguaje HTML
Lenguaje HTMLLenguaje HTML
Lenguaje HTML
 
2. html
2. html2. html
2. html
 
Lenguaje html para colegio
Lenguaje html para colegioLenguaje html para colegio
Lenguaje html para colegio
 
html
htmlhtml
html
 
Html Exposicion
Html ExposicionHtml Exposicion
Html Exposicion
 
Html
HtmlHtml
Html
 
HTML 2011
HTML 2011HTML 2011
HTML 2011
 
Portales ud4 - lenguaje html
Portales   ud4 - lenguaje htmlPortales   ud4 - lenguaje html
Portales ud4 - lenguaje html
 
Html Bas
Html BasHtml Bas
Html Bas
 
Html
HtmlHtml
Html
 
Html-CSS
Html-CSSHtml-CSS
Html-CSS
 

Destacado

Conferencia ASPM sobre La Entrevista de trabajo
Conferencia ASPM sobre La Entrevista de trabajoConferencia ASPM sobre La Entrevista de trabajo
Conferencia ASPM sobre La Entrevista de trabajoASPM
 
EL IV CONGRESO NACIONAL DEL SECRETARIADO - LA VISION DE DOS MIEMBROS DE ASPM
EL IV CONGRESO NACIONAL DEL SECRETARIADO - LA VISION DE DOS MIEMBROS DE ASPMEL IV CONGRESO NACIONAL DEL SECRETARIADO - LA VISION DE DOS MIEMBROS DE ASPM
EL IV CONGRESO NACIONAL DEL SECRETARIADO - LA VISION DE DOS MIEMBROS DE ASPMASPM
 
Blame 023
Blame 023Blame 023
Blame 023comicgo
 
Manual posicionamiento en buscadores SEO
Manual posicionamiento en buscadores SEO Manual posicionamiento en buscadores SEO
Manual posicionamiento en buscadores SEO Oreka IT
 
Contrato telexfree pt
Contrato telexfree ptContrato telexfree pt
Contrato telexfree ptmaurosimoes
 
Atividade 3.3 buscando pontes de cooperação com a comuniade
Atividade 3.3 buscando pontes de cooperação com a comuniadeAtividade 3.3 buscando pontes de cooperação com a comuniade
Atividade 3.3 buscando pontes de cooperação com a comuniadeJoão Francisca
 
Reportaje fotográfico de casi todo lo que hicimos en 2014
Reportaje fotográfico de casi todo lo que hicimos en 2014Reportaje fotográfico de casi todo lo que hicimos en 2014
Reportaje fotográfico de casi todo lo que hicimos en 2014ASPM
 
Servicios de la web 2.0
Servicios de la web 2.0Servicios de la web 2.0
Servicios de la web 2.0Karla Medina
 
BARCELO TORRE ARIAS / BARCELO CASTELLANA NORTE: PRESENTACION
BARCELO TORRE ARIAS / BARCELO CASTELLANA NORTE: PRESENTACIONBARCELO TORRE ARIAS / BARCELO CASTELLANA NORTE: PRESENTACION
BARCELO TORRE ARIAS / BARCELO CASTELLANA NORTE: PRESENTACIONASPM
 
Geologia: Zonas costeiras e de vertente
Geologia: Zonas costeiras e de vertenteGeologia: Zonas costeiras e de vertente
Geologia: Zonas costeiras e de vertenteCientistasMalucas
 
Ventajas de las tarjetas de créditos
Ventajas de las tarjetas de créditosVentajas de las tarjetas de créditos
Ventajas de las tarjetas de créditosyari0717
 
Cultura del periodo integración
Cultura del periodo integraciónCultura del periodo integración
Cultura del periodo integraciónshushuyoly
 
UN GRUPO DE ASOCIADAS DE ASPM VISITA EL PARADOR DE CHINCHON
UN GRUPO DE ASOCIADAS DE ASPM VISITA EL PARADOR DE CHINCHONUN GRUPO DE ASOCIADAS DE ASPM VISITA EL PARADOR DE CHINCHON
UN GRUPO DE ASOCIADAS DE ASPM VISITA EL PARADOR DE CHINCHONASPM
 

Destacado (20)

Conferencia ASPM sobre La Entrevista de trabajo
Conferencia ASPM sobre La Entrevista de trabajoConferencia ASPM sobre La Entrevista de trabajo
Conferencia ASPM sobre La Entrevista de trabajo
 
EL IV CONGRESO NACIONAL DEL SECRETARIADO - LA VISION DE DOS MIEMBROS DE ASPM
EL IV CONGRESO NACIONAL DEL SECRETARIADO - LA VISION DE DOS MIEMBROS DE ASPMEL IV CONGRESO NACIONAL DEL SECRETARIADO - LA VISION DE DOS MIEMBROS DE ASPM
EL IV CONGRESO NACIONAL DEL SECRETARIADO - LA VISION DE DOS MIEMBROS DE ASPM
 
Blame 023
Blame 023Blame 023
Blame 023
 
Cuestionario informe
Cuestionario informeCuestionario informe
Cuestionario informe
 
Asmall world
Asmall worldAsmall world
Asmall world
 
Manual posicionamiento en buscadores SEO
Manual posicionamiento en buscadores SEO Manual posicionamiento en buscadores SEO
Manual posicionamiento en buscadores SEO
 
Power de partits
Power de partitsPower de partits
Power de partits
 
Contrato telexfree pt
Contrato telexfree ptContrato telexfree pt
Contrato telexfree pt
 
O magusto 07
O magusto 07O magusto 07
O magusto 07
 
Cs fra 3 lleo - 21 x27
Cs fra 3   lleo  - 21 x27Cs fra 3   lleo  - 21 x27
Cs fra 3 lleo - 21 x27
 
Atividade 3.3 buscando pontes de cooperação com a comuniade
Atividade 3.3 buscando pontes de cooperação com a comuniadeAtividade 3.3 buscando pontes de cooperação com a comuniade
Atividade 3.3 buscando pontes de cooperação com a comuniade
 
Presentación semana2
Presentación semana2Presentación semana2
Presentación semana2
 
Reportaje fotográfico de casi todo lo que hicimos en 2014
Reportaje fotográfico de casi todo lo que hicimos en 2014Reportaje fotográfico de casi todo lo que hicimos en 2014
Reportaje fotográfico de casi todo lo que hicimos en 2014
 
Servicios de la web 2.0
Servicios de la web 2.0Servicios de la web 2.0
Servicios de la web 2.0
 
BARCELO TORRE ARIAS / BARCELO CASTELLANA NORTE: PRESENTACION
BARCELO TORRE ARIAS / BARCELO CASTELLANA NORTE: PRESENTACIONBARCELO TORRE ARIAS / BARCELO CASTELLANA NORTE: PRESENTACION
BARCELO TORRE ARIAS / BARCELO CASTELLANA NORTE: PRESENTACION
 
Geologia: Zonas costeiras e de vertente
Geologia: Zonas costeiras e de vertenteGeologia: Zonas costeiras e de vertente
Geologia: Zonas costeiras e de vertente
 
Ventajas de las tarjetas de créditos
Ventajas de las tarjetas de créditosVentajas de las tarjetas de créditos
Ventajas de las tarjetas de créditos
 
Cultura del periodo integración
Cultura del periodo integraciónCultura del periodo integración
Cultura del periodo integración
 
UN GRUPO DE ASOCIADAS DE ASPM VISITA EL PARADOR DE CHINCHON
UN GRUPO DE ASOCIADAS DE ASPM VISITA EL PARADOR DE CHINCHONUN GRUPO DE ASOCIADAS DE ASPM VISITA EL PARADOR DE CHINCHON
UN GRUPO DE ASOCIADAS DE ASPM VISITA EL PARADOR DE CHINCHON
 
Ejercicios inconvenientes
Ejercicios inconvenientesEjercicios inconvenientes
Ejercicios inconvenientes
 

Similar a Manual de html (20)

Programacion en html
Programacion en htmlProgramacion en html
Programacion en html
 
Introhtml
IntrohtmlIntrohtml
Introhtml
 
HTML
HTMLHTML
HTML
 
Unidad # 1
Unidad # 1Unidad # 1
Unidad # 1
 
Unidad # 1
Unidad # 1Unidad # 1
Unidad # 1
 
html
htmlhtml
html
 
Lenguaje HTML
  Lenguaje HTML  Lenguaje HTML
Lenguaje HTML
 
HTML
HTMLHTML
HTML
 
Conceptos Etiquetas de HTML
Conceptos Etiquetas de HTMLConceptos Etiquetas de HTML
Conceptos Etiquetas de HTML
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Practicas html
Practicas htmlPracticas html
Practicas html
 
Aprender el lenguaje html
Aprender el lenguaje htmlAprender el lenguaje html
Aprender el lenguaje html
 
Manual de-html
Manual de-htmlManual de-html
Manual de-html
 
HTML
HTMLHTML
HTML
 
emded/Retro2011brandon
emded/Retro2011brandonemded/Retro2011brandon
emded/Retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 

Último

Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdfTarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdfManuel Molina
 
Día de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundialDía de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundialpatriciaines1993
 
Mapa Mental de estrategias de articulación de las areas curriculares.pdf
Mapa Mental de estrategias de articulación de las areas curriculares.pdfMapa Mental de estrategias de articulación de las areas curriculares.pdf
Mapa Mental de estrategias de articulación de las areas curriculares.pdfvictorbeltuce
 
Informatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos BásicosInformatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos BásicosCesarFernandez937857
 
Factores ecosistemas: interacciones, energia y dinamica
Factores ecosistemas: interacciones, energia y dinamicaFactores ecosistemas: interacciones, energia y dinamica
Factores ecosistemas: interacciones, energia y dinamicaFlor Idalia Espinoza Ortega
 
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptxPPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptxOscarEduardoSanchezC
 
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADODECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADOJosé Luis Palma
 
codigos HTML para blogs y paginas web Karina
codigos HTML para blogs y paginas web Karinacodigos HTML para blogs y paginas web Karina
codigos HTML para blogs y paginas web Karinavergarakarina022
 
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARONARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFAROJosé Luis Palma
 
Movimientos Precursores de La Independencia en Venezuela
Movimientos Precursores de La Independencia en VenezuelaMovimientos Precursores de La Independencia en Venezuela
Movimientos Precursores de La Independencia en Venezuelacocuyelquemao
 
Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...
Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...
Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...fcastellanos3
 
FICHA DE MONITOREO Y ACOMPAÑAMIENTO 2024 MINEDU
FICHA DE MONITOREO Y ACOMPAÑAMIENTO  2024 MINEDUFICHA DE MONITOREO Y ACOMPAÑAMIENTO  2024 MINEDU
FICHA DE MONITOREO Y ACOMPAÑAMIENTO 2024 MINEDUgustavorojas179704
 
Análisis de la Implementación de los Servicios Locales de Educación Pública p...
Análisis de la Implementación de los Servicios Locales de Educación Pública p...Análisis de la Implementación de los Servicios Locales de Educación Pública p...
Análisis de la Implementación de los Servicios Locales de Educación Pública p...Baker Publishing Company
 
Metabolismo 3: Anabolismo y Fotosíntesis 2024
Metabolismo 3: Anabolismo y Fotosíntesis 2024Metabolismo 3: Anabolismo y Fotosíntesis 2024
Metabolismo 3: Anabolismo y Fotosíntesis 2024IES Vicent Andres Estelles
 
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptxPresentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptxYeseniaRivera50
 
Tarea 5-Selección de herramientas digitales-Carol Eraso.pdf
Tarea 5-Selección de herramientas digitales-Carol Eraso.pdfTarea 5-Selección de herramientas digitales-Carol Eraso.pdf
Tarea 5-Selección de herramientas digitales-Carol Eraso.pdfCarol Andrea Eraso Guerrero
 
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...JAVIER SOLIS NOYOLA
 

Último (20)

Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdfTarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
 
Power Point: "Defendamos la verdad".pptx
Power Point: "Defendamos la verdad".pptxPower Point: "Defendamos la verdad".pptx
Power Point: "Defendamos la verdad".pptx
 
Día de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundialDía de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundial
 
Mapa Mental de estrategias de articulación de las areas curriculares.pdf
Mapa Mental de estrategias de articulación de las areas curriculares.pdfMapa Mental de estrategias de articulación de las areas curriculares.pdf
Mapa Mental de estrategias de articulación de las areas curriculares.pdf
 
Informatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos BásicosInformatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos Básicos
 
Factores ecosistemas: interacciones, energia y dinamica
Factores ecosistemas: interacciones, energia y dinamicaFactores ecosistemas: interacciones, energia y dinamica
Factores ecosistemas: interacciones, energia y dinamica
 
Sesión de clase: Defendamos la verdad.pdf
Sesión de clase: Defendamos la verdad.pdfSesión de clase: Defendamos la verdad.pdf
Sesión de clase: Defendamos la verdad.pdf
 
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptxPPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
 
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADODECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
 
Unidad 3 | Teorías de la Comunicación | MCDI
Unidad 3 | Teorías de la Comunicación | MCDIUnidad 3 | Teorías de la Comunicación | MCDI
Unidad 3 | Teorías de la Comunicación | MCDI
 
codigos HTML para blogs y paginas web Karina
codigos HTML para blogs y paginas web Karinacodigos HTML para blogs y paginas web Karina
codigos HTML para blogs y paginas web Karina
 
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARONARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
 
Movimientos Precursores de La Independencia en Venezuela
Movimientos Precursores de La Independencia en VenezuelaMovimientos Precursores de La Independencia en Venezuela
Movimientos Precursores de La Independencia en Venezuela
 
Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...
Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...
Estas son las escuelas y colegios que tendrán modalidad no presencial este lu...
 
FICHA DE MONITOREO Y ACOMPAÑAMIENTO 2024 MINEDU
FICHA DE MONITOREO Y ACOMPAÑAMIENTO  2024 MINEDUFICHA DE MONITOREO Y ACOMPAÑAMIENTO  2024 MINEDU
FICHA DE MONITOREO Y ACOMPAÑAMIENTO 2024 MINEDU
 
Análisis de la Implementación de los Servicios Locales de Educación Pública p...
Análisis de la Implementación de los Servicios Locales de Educación Pública p...Análisis de la Implementación de los Servicios Locales de Educación Pública p...
Análisis de la Implementación de los Servicios Locales de Educación Pública p...
 
Metabolismo 3: Anabolismo y Fotosíntesis 2024
Metabolismo 3: Anabolismo y Fotosíntesis 2024Metabolismo 3: Anabolismo y Fotosíntesis 2024
Metabolismo 3: Anabolismo y Fotosíntesis 2024
 
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptxPresentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
 
Tarea 5-Selección de herramientas digitales-Carol Eraso.pdf
Tarea 5-Selección de herramientas digitales-Carol Eraso.pdfTarea 5-Selección de herramientas digitales-Carol Eraso.pdf
Tarea 5-Selección de herramientas digitales-Carol Eraso.pdf
 
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
 

Manual de html

  • 2.
  • 3. • HTML, siglas de HyperText Markup Language («lenguaje de marcado de hipertexto»), hace referencia al lenguaje de marcado predominante para la elaboración de páginas web que se utiliza para describir y traducir la estructura y la información en forma de texto, así como para complementar el texto con objetos tales como imágenes.
  • 4. • Un documento HTML comienza con la etiqueta <html>, y termina con </html>. Dentro del documento (entre las etiquetas de principio y fin de html), hay dos zonas bien diferenciadas: el encabezamiento, delimitado por<head> y </head>, que sirve para definir diversos valores válidos en todo el documento; y el cuerpo, delimitado por <body> y </body>, donde reside la información del documento.
  • 5. • La única utilidad del encabezamiento en la que nos detendremos es la directiva <title>, que permite especificar el título de un documento HTML. Este título no forma parte del documento en sí: no aparece, por ejemplo, al principio del documento una vez que este se presenta con un programa adecuado, sino que suele servir como título de la ventana del programa que nos la muestra. Por ejemplo, en el encabezamiento de este manual se ha especificado:
  • 6. • <title>Manual práctico de HTML</title>en minúsculas. Obsérverse que el título que encabeza este texto se ha escrito con mayúsculas, para distinguirlo del título global del documento.
  • 7. • El cuerpo de un documento HTML contiene el texto que, con la presentación y los efectos que se decidan, se presentará ante el hiperlector. Dentro del cuerpo son aplicables todos los efectos que se van a mencionar en el resto de esta guía. Dichos efectos se especifican exclusivamente a través de directivas. Esto quiere decir que los espacios, tabulaciones y retornos de carro que se introduzcan en el fichero fuente no tienen ningún efecto a la hora de la presentación final del documento. Por ejemplo, escribiendo:
  • 8. • Estas palabras forman una frase. producimos exactamente lo mismo que con: • Estas palabras forman una frase. • A la hora de la verdad lo que se ve es: Estas palabras forman una frase. • En resumen, la estructura básica de un documento HTML queda de la forma siguiente:
  • 9. • <html> • <head> • <title>Título</title> • </head> <body> • Texto del documento, menciones a gráficos, enlaces, etc. </body> • </html>
  • 10. • Como ya hemos dicho, la estructura lógica del texto y los diferentes efectos que se le apliquen se especifican mediante directivas. En este punto vamos a repasar algunas de las más importantes. En cada uno de los casos que veremos, primero se presenta el texto original HTML, es decir, lo que nosotros editamos, con las directivas situadas en los lugares adecuados; y después se presenta el efecto que dicho texto fuente produce una vez que se interpreta y se representa con el programa adecuado.
  • 11. • Mediante los títulos, en sus diferentes niveles de importancia, podemos definir el esqueleto del documento, su estructura básica. • <h1>Mucha importancia</h1> • Mucha importancia • <h2>Menos importancia</h2> • Menos importancia • <h3>Mucha menos importancia</h3> • Mucha menos importancia
  • 12. • Mediante estos atributos determinamos el estilo y el tipo de letra que tendrá la presentación del documento final. El primero en el que nos deberíamos detener es el texto normal entendiendo como tal el que no tiene ninguna característica especial. Para definir un párrafo como normal no es necesario poner ninguna etiqueta. Lo único que hay que tener en cuenta, como ya se ha dicho antes, es que al presentar el documento se hace caso omiso de los espacios, tabulaciones y retornos de carro que se encuentren en el texto fuente. Por ello cuando se quiera forzar un final de línea es necesario utilizar dos directivas especiales:
  • 13. • <p> para marcar un fin de párrafo, y <br> para un único retorno de carro. La diferencia entre ambas es que la separación de líneas que provoca<p> es algo mayor que la de <br>, para que los párrafos se distingan bien entre sí. Las dos directivas mencionadas se sitúan en el punto en que queremos poner la separación. Por ejemplo: • Este será un texto normal (párrafo 1, línea 1).<br> • El primer párrafo estará formado por 2 líneas (párrafo 1, línea. <p> • Este ya es el segundo párrafo (párrafo 2, línea 1).<p>
  • 14. • Este será un texto normal (párrafo 1, línea 1). • El primer párrafo estará formado por 2 líneas (párrafo 1, línea 2). • Este ya es el segundo párrafo (párrafo 2, línea 1). • Por supuesto, estas dos etiquetas se puede aplicar donde queramos, no sólo en el texto normal.
  • 15. • El texto preformateado (etiqueta <pre>) se aplica cuando queremos que en la presentación final del documento se respeten los espacios y retornos de carro que hayamos puesto en el texto fuente. Además se utilizará un tipo de letra de espaciado fijo, parecido al de una máquina de escribir, más pequeño que el del texto normal. Este estilo de texto puede ser adecuado, por ejemplo, para una tabla numérica sencilla:
  • 16. <pre> Texto preformateado • --------------------- • |1|2|3|4| • |5|6|7|8| • | 9 | 10 | 11 | 12 | • --------------------- • </pre>Texto preformateado • --------------------- • |1|2|3|4| • |5|6|7|8| • | 9 | 10 | 11 | 12 | • ---------------------
  • 17. • Esto en negrita y esto en cursiva Se puede utilizar un tipo de letra similar al de una máquina de escribir: • <tt>Máquina de escribir</tt> • Máquina de escribir Para centrar texto (o, en general, cualquier cosa: un gráfico, por ejemplo) se usa la directiva <center>: • <center>Verde que te quiero verde</center> • Verde que te quiero verde
  • 18. • Las listas se definen de forma muy sencilla: se dice dónde empieza la lista, dónde empieza cada punto y dónde acaba la lista. Las etiquetas que se utilicen en cada caso deben aparecer al principio de línea, o al menos sin texto por delante (sólo espacios o tabulaciones).Podemos recurrir a tres tipos distintos de listas, cada una con una presentación diferente: no numeradas, numeradas y listas de definiciones (glosarios). • Las listas se pueden anidar, es decir, en el lugar donde debería ir uno de los términos de la lista se pone una nueva lista, que por supuesto no tiene porqué ser del mismo tipo. • Esto es una lista no numerada:
  • 19. <ul> • <li>Tomates • <li>Zanahorias • <li>Puerros • </ul> • Tomates • Zanahorias • Puerros
  • 20. <ol> • <li>Miguel Induráin • <li>Tony Rominger • <li>Eugeni Berzin • </ol> 1. Miguel Induráin 2. Tony Rominger 3. Eugeni Berzin
  • 21. • MARQUEE • La etiqueta <MARQUEE></MARQUEE> crea una marquesina con un texto en su interior que se desplaza. • Funciona unicamente con Ms-Explorer. Sus parámetros son los siguientes : • align = top / middle / bottom Indica si el texto del interior de la marquesina se alinea en la zona alta (top), en la baja (bottom) o en el centro (middle) de la misma. • bgcolor = "codigo de color" Indica el color del fondo de la marquesina.
  • 22. • direction = left / right Indica hacia que lugar se desplaza el texto, hacia la izquierda (left) o hacia la derecha (right) • height = num o % Indica la altura de la marquesina en puntos o porcentaje en función de la ventana del navegador. • width = num o % Indica la anchura de la marquesina en puntos o porcentaje en función de la ventana del navegador.
  • 23. • loop = num / infinite Indica el numero de veces que se desplazará el texto por la marquesina. Si se indica infinite, se desplazará indefinidamente. • scrolldelay = num. Indica el número de milisegundos que tarda en reescribirse el texto por la marquesina, a mayor número mas lentamente se desplazará el texto. • Veamos un ejemplo de esta etiqueta : • <MARQUEE bgcolor = "#FFFFFF" width = 50% scrolldelay = 0 > Bienvenido a mi pagina personal en Internet. </MARQUEE>