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

Html trabajo!
Html trabajo!Html trabajo!
Html trabajo!
D' Chong
 
Tags actividad 11 jmar 180112
Tags actividad 11 jmar 180112Tags actividad 11 jmar 180112
Tags actividad 11 jmar 180112
jumarri
 

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

2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
RigoTito
 
Proyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdfProyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdf
patriciaines1993
 
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
Fernando Solis
 
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptxRESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
pvtablets2023
 

Dernier (20)

Los avatares para el juego dramático en entornos virtuales
Los avatares para el juego dramático en entornos virtualesLos avatares para el juego dramático en entornos virtuales
Los avatares para el juego dramático en entornos virtuales
 
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIASISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
 
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...
 
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
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
 
Biografía de Charles Coulomb física .pdf
Biografía de Charles Coulomb física .pdfBiografía de Charles Coulomb física .pdf
Biografía de Charles Coulomb física .pdf
 
La Sostenibilidad Corporativa. Administración Ambiental
La Sostenibilidad Corporativa. Administración AmbientalLa Sostenibilidad Corporativa. Administración Ambiental
La Sostenibilidad Corporativa. Administración Ambiental
 
Power Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptxPower Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptx
 
EL HABITO DEL AHORRO en tu idea emprendedora22-04-24.pptx
EL HABITO DEL AHORRO en tu idea emprendedora22-04-24.pptxEL HABITO DEL AHORRO en tu idea emprendedora22-04-24.pptx
EL HABITO DEL AHORRO en tu idea emprendedora22-04-24.pptx
 
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
 
INSTRUCCION PREPARATORIA DE TIRO .pptx
INSTRUCCION PREPARATORIA DE TIRO   .pptxINSTRUCCION PREPARATORIA DE TIRO   .pptx
INSTRUCCION PREPARATORIA DE TIRO .pptx
 
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
 
Proyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdfProyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdf
 
Supuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docxSupuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docx
 
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
 
Tema 17. Biología de los microorganismos 2024
Tema 17. Biología de los microorganismos 2024Tema 17. Biología de los microorganismos 2024
Tema 17. Biología de los microorganismos 2024
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
 
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptxRESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
 
Infografía EE con pie del 2023 (3)-1.pdf
Infografía EE con pie del 2023 (3)-1.pdfInfografía EE con pie del 2023 (3)-1.pdf
Infografía EE con pie del 2023 (3)-1.pdf
 
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
 

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.