SlideShare une entreprise Scribd logo
1  sur  46
Diseño de Páginas Web: HTML Autor: Javier V. Gallego
Contenidos I: ,[object Object],[object Object],[object Object],[object Object]
Contenidos II: ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Definición de términos: ,[object Object],[object Object],[object Object],[object Object],[object Object]
Definición de términos: ,[object Object],[object Object],[object Object]
Definición de términos: ,[object Object],[object Object],[object Object],[object Object],Índice I
Sintaxis de etiquetas: ,[object Object],[object Object],[object Object],[object Object],Etiqueta Atributo Valor
Estructura básica del documento: ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Todos los documentos HTML presenta esta estructura Documento Cabecera Cuerpo
Estructura básica del documento: ,[object Object],[object Object],[object Object],[object Object],[object Object],Índice I
Formato de texto: elementos. ,[object Object],[object Object],[object Object],[object Object],[object Object],Se utilizan para los títulos del documento Se utilizan para el cuerpo del documento
Formato de texto: elementos. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Formato de texto: estilo. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Formato de texto: estilo. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Formato de texto: alineación. ,[object Object],[object Object],[object Object],Ejemplos: <p   align= “center” > ………… </p> <h2   align= “right” > ………….. </h2> <div   align= “justify” > …………. </div>
Formato de texto: márgenes. ,[object Object],[object Object],[object Object],[object Object]
Formato de texto: fuente. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Formato: caracteres especiales. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Caracteres  especiales
Formato: barra horizontal. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Índice I Crea una barra horizontal
Cuerpo del documento: body. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Cuerpo del documento: body. ,[object Object],[object Object],[object Object],[object Object],[object Object],Ejemplo: <body background=“ imagen/pato.jpg ” bgcolor=“ #00FFCC ” text=“ #006666 ” link=“ #9966CC ” vlink=“ #FF6633 ” alink=“ #66CC33 ”> Índice II
Cabecera del documento: head. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Cabeza del documento: head. ,[object Object],[object Object],[object Object],[object Object],[object Object]
Cabeza del documento: head. ,[object Object],[object Object],[object Object],[object Object],Índice II
Listas de elementos. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Listas de elementos. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Índice II
Imágenes ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Imágenes: atributos. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Imágenes: atributos. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Índice II X en píxeles
Hipervínculos ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Hipervínculos II: Tipos ,[object Object],[object Object],[object Object]
Hipervínculos II: Tipos ,[object Object],[object Object],[object Object],[object Object]
Hipervínculos II: Tipos ,[object Object],[object Object],[object Object],[object Object],[object Object]
Hipervínculos II: Tipos ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Índice II
Tablas ,[object Object],[object Object],[object Object]
Tablas II ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Tablas II ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Tablas II ,[object Object],[object Object],[object Object],[object Object],[object Object],Índice II
Hojas de Estilo (CSS) ,[object Object],[object Object],[object Object],[object Object]
Hojas de Estilo (CSS) II ,[object Object],[object Object],[object Object],[object Object]
Hojas de Estilo (CSS) II ,[object Object],[object Object],[object Object],[object Object],[object Object]
Hojas de Estilo (CSS) II ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Hojas de Estilo (CSS) II ,[object Object],[object Object],[object Object],[object Object],[object Object]
Hojas de Estilo (CSS) II ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Hojas de Estilo (CSS) II ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Hojas de Estilo (CSS) II ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Índice II
Fin

Contenu connexe

Tendances (17)

Producto3 Ariana y irnesto
Producto3 Ariana y irnestoProducto3 Ariana y irnesto
Producto3 Ariana y irnesto
 
Julexi
JulexiJulexi
Julexi
 
Colegio nacional nicolas esguerra
Colegio  nacional   nicolas  esguerraColegio  nacional   nicolas  esguerra
Colegio nacional nicolas esguerra
 
Producto 3
Producto 3Producto 3
Producto 3
 
Presentación2 wwwwwwwwwwwwww
Presentación2 wwwwwwwwwwwwwwPresentación2 wwwwwwwwwwwwww
Presentación2 wwwwwwwwwwwwww
 
Código htlm
Código htlmCódigo htlm
Código htlm
 
Etiquetas básicas-en-html
Etiquetas básicas-en-htmlEtiquetas básicas-en-html
Etiquetas básicas-en-html
 
C2 lenguaje html
C2 lenguaje htmlC2 lenguaje html
C2 lenguaje html
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
El entorno de dreamweaver
El entorno de dreamweaverEl entorno de dreamweaver
El entorno de dreamweaver
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Etiquetas básicas de HTML
Etiquetas básicas de HTMLEtiquetas básicas de HTML
Etiquetas básicas de HTML
 
Informaticamelo1
Informaticamelo1Informaticamelo1
Informaticamelo1
 
Etiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje htmlEtiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje html
 
Manual html
Manual htmlManual html
Manual html
 
Colegio nacional nicolas esguerra (1)
Colegio nacional nicolas esguerra (1)Colegio nacional nicolas esguerra (1)
Colegio nacional nicolas esguerra (1)
 
Html
HtmlHtml
Html
 

Similaire à Diseño web

Similaire à Diseño web (20)

Diseño de páginas Web con HTML
Diseño de páginas Web con HTMLDiseño de páginas Web con HTML
Diseño de páginas Web con HTML
 
Curso FPE Diseño Web. Módulo 2. El HTML
Curso FPE Diseño Web. Módulo 2. El HTMLCurso FPE Diseño Web. Módulo 2. El HTML
Curso FPE Diseño Web. Módulo 2. El HTML
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Html trabajo!
Html trabajo!Html trabajo!
Html trabajo!
 
Slideshare
SlideshareSlideshare
Slideshare
 
Tags actividad 11 jmar 180112
Tags actividad 11 jmar 180112Tags actividad 11 jmar 180112
Tags actividad 11 jmar 180112
 
XHTML+Inicio en CSS
XHTML+Inicio en CSSXHTML+Inicio en CSS
XHTML+Inicio en CSS
 
HTML HyperText Markup Language
HTML HyperText Markup LanguageHTML HyperText Markup Language
HTML HyperText Markup Language
 
05introduccionhtml 100901142734-phpapp02
05introduccionhtml 100901142734-phpapp0205introduccionhtml 100901142734-phpapp02
05introduccionhtml 100901142734-phpapp02
 
Html1
Html1Html1
Html1
 
Html
HtmlHtml
Html
 
Etiquetas XHMTL
Etiquetas XHMTLEtiquetas XHMTL
Etiquetas XHMTL
 
Investigacion de html y xml
Investigacion de html y xmlInvestigacion de html y xml
Investigacion de html y xml
 
HTML
HTMLHTML
HTML
 
HTML
HTMLHTML
HTML
 
Introducción HTML
Introducción HTMLIntroducción HTML
Introducción HTML
 
05 Introduccion a HTML
05 Introduccion a HTML05 Introduccion a HTML
05 Introduccion a HTML
 
Html
HtmlHtml
Html
 
CSS
CSSCSS
CSS
 

Dernier

Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024Juan Martín Martín
 
semana 4 9NO Estudios sociales.pptxnnnn
semana 4  9NO Estudios sociales.pptxnnnnsemana 4  9NO Estudios sociales.pptxnnnn
semana 4 9NO Estudios sociales.pptxnnnnlitzyleovaldivieso
 
Revista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdfRevista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdfapunteshistoriamarmo
 
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxConcepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxFernando Solis
 
Plan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdf
Plan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdfPlan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdf
Plan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdfcarolinamartinezsev
 
Tema 19. Inmunología y el sistema inmunitario 2024
Tema 19. Inmunología y el sistema inmunitario 2024Tema 19. Inmunología y el sistema inmunitario 2024
Tema 19. Inmunología y el sistema inmunitario 2024IES Vicent Andres Estelles
 
INSTRUCCION PREPARATORIA DE TIRO .pptx
INSTRUCCION PREPARATORIA DE TIRO   .pptxINSTRUCCION PREPARATORIA DE TIRO   .pptx
INSTRUCCION PREPARATORIA DE TIRO .pptxdeimerhdz21
 
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIASISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIAFabiolaGarcia751855
 
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADOTIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADOPsicoterapia Holística
 
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docxTALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docxNadiaMartnez11
 
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.doc
SESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.docSESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.doc
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.docRodneyFrankCUADROSMI
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docxEliaHernndez7
 
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Katherine Concepcion Gonzalez
 
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxPLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxiemerc2024
 
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPCTRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPCCarlosEduardoSosa2
 
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfFeliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfMercedes Gonzalez
 
6°_GRADO_-_MAYO_06 para sexto grado de primaria
6°_GRADO_-_MAYO_06 para sexto grado de primaria6°_GRADO_-_MAYO_06 para sexto grado de primaria
6°_GRADO_-_MAYO_06 para sexto grado de primariaWilian24
 

Dernier (20)

Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024
 
semana 4 9NO Estudios sociales.pptxnnnn
semana 4  9NO Estudios sociales.pptxnnnnsemana 4  9NO Estudios sociales.pptxnnnn
semana 4 9NO Estudios sociales.pptxnnnn
 
Revista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdfRevista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdf
 
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxConcepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptx
 
Plan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdf
Plan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdfPlan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdf
Plan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdf
 
Tema 19. Inmunología y el sistema inmunitario 2024
Tema 19. Inmunología y el sistema inmunitario 2024Tema 19. Inmunología y el sistema inmunitario 2024
Tema 19. Inmunología y el sistema inmunitario 2024
 
Tema 11. Dinámica de la hidrosfera 2024
Tema 11.  Dinámica de la hidrosfera 2024Tema 11.  Dinámica de la hidrosfera 2024
Tema 11. Dinámica de la hidrosfera 2024
 
INSTRUCCION PREPARATORIA DE TIRO .pptx
INSTRUCCION PREPARATORIA DE TIRO   .pptxINSTRUCCION PREPARATORIA DE TIRO   .pptx
INSTRUCCION PREPARATORIA DE TIRO .pptx
 
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIASISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
 
Sesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronósticoSesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronóstico
 
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADOTIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
 
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docxTALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
 
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.doc
SESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.docSESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.doc
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.doc
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
 
Usos y desusos de la inteligencia artificial en revistas científicas
Usos y desusos de la inteligencia artificial en revistas científicasUsos y desusos de la inteligencia artificial en revistas científicas
Usos y desusos de la inteligencia artificial en revistas científicas
 
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
 
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxPLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
 
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPCTRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
 
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfFeliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
 
6°_GRADO_-_MAYO_06 para sexto grado de primaria
6°_GRADO_-_MAYO_06 para sexto grado de primaria6°_GRADO_-_MAYO_06 para sexto grado de primaria
6°_GRADO_-_MAYO_06 para sexto grado de primaria
 

Diseño web

  • 1. Diseño de Páginas Web: HTML Autor: Javier V. Gallego
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46. Fin

Notes de l'éditeur

  1. Ejercicio 0: Construir en el block de notas el esqueleto de una página web: Esqueleto.html
  2. Ejercicio 1: Las estrellas. Transforma el documento de texto en una página web. Utiliza cabezeras para los títulos y párrafos para el resto del documento. Utiliza br o pre donde convenga. Pon algunas palabras en negrita, otras en cursiva y algunas de mayor o menor tamaño que el normal. Alinea los títulos al centro y justifica el resto.
  3. Ejercicio 2: Samarcanda. Transforma el documento en una página web. Utiliza blockquote para crear márgenes. Alinea el texto según creas. Modifica el color(00cc66 y cc6699) el tamaño y la fuente para los títulos y el texto.
  4. Ver tabla de caracteres especiales. Ejercicio 3: La Luna. Transforma el documento de texto en una página web, ponle alineaciones y el tipo de letra que quieras. Modifica aquellos símbolos (acentos, etc) utilizando los caracteres especiales.
  5. Ejercicio 3: La Luna. Introduce una barra horizontal centrada de 300 pixeles de largo y 8 de ancho entre los títulos y el resto del documento. Elige como color 00cccc.
  6. Ver tabla de colores seguros
  7. Ejercicio 3 : La Luna. Modifica el ejercicio anterior añadiendo un color de fondo, y colores para el texto y los links. Añade posteriormente una imagen de fondo. Ejercicio 3bis:Transforma este documento de texto en una página web y añádele todos los atributos de body que conoces. Utiliza colores seguros basándote en la tabla anexa.
  8. Ejercicio 4:El café. Transforma el documento en una página web utilizando etiquetas de listas según requieras.
  9. Ejercicio 6: Inserta en el documento una imagen de la Tierra y una imagen de un cohete indicando en cada caso un texto alternativo. Crea con la primera imagen un vínculo a la página la Luna
  10. Ejercicio 5:Crea en la página índice un vínculo absoluto a www.geocities.com/CapeCanaveral/3840/. Vínculos relativos a la página de la Luna y de las estrellas.