SlideShare une entreprise Scribd logo
1  sur  36
TRABAJANDO CON KOMPOZER
 PROFESORA ALICIA BARBA
Antes de comenzar a utilizar Kompozer vamos a crear una carpeta en nuestra
 memoria externa, podes poner tu nombre y dentro de la misma crearemos
                               tres carpetas
                               denominadas:
Esta es la apariencia de Kompozer
   Lo primero que
    tenemos que hacer
    antes de comenzar a
    trabajar con el editor
    de html será
    establecer un título y
    unas propiedades
    para la pagina
Escribimos:
1-Un título: MICROEMPRENDIMIENTO
               2-Autor/a:
             3-Descripción:
Si nos fijamos en la parte superior observaremos que
aparece el título que le habíamos dado anteriormente
En la parte inferior del editor podremos ver que hay varias pestañas
   que serán los tipos de vistas que podemos utilizar, pinchando en
código fuente observaremos donde se ha insertado la información que
  habíamos escrito sobre el autor y la descripción de nuestra página
                                  HTML
Este es el código fuente que existe de momento de mi
                     página html:
    Un fichero html siempre comienza por <html> y termina en
   </html> ¿En qué partes se divide?
   <html>
   <head>
   Encabezamiento: mostrará el título, la descripción del fichero html,
    el autor y la información adicional que queremos insertar
   </head>
   <body>
   Cuerpo: aparecerá los contenidos de mi página web: texto, imagen,
    video, audio…
   </body>
   </html>
A continuación guardaremos los cambios y le daremos un
          nombre a nuestro fichero html: index
   Cualquier página web está formada por
    varios ficheros html y el principal se
    denominada “index”.
FONDOS Y COLORES
   ¿Cómo cambio el fondo y los colores de mi
    página html?
Vamos a personalizar los colores
Vamos a comenzar a escribir,
    elegimos Título 1:
Insertamos un segundo texto, para
       ello elegimos Título 2:
CAMBIO DE TEXTO
 ¿Cómo cambio el tamaño del texto o
  añado negrita, cursiva o subrayado?
 ¿Se puede alinear el texto?
IMAGENES
   ¿Cómo inserto una imagen?
Aparecerá la siguiente ventana
  Buscaremos la imagen escudo.png que
  tenemos en nuestra carpeta imagenes.
 El texto alternativo sirve por un lado por si
  falla nuestra imagen y por otro lado
  facilita información porque cuando
  situamos el puntero del ratón sobre la
  imagen aparece el nombre que le hemos
  dado.
 Y nos queda así:
o insertándola en una tabla
VISUALIZAR EL FICHERO
   Me gustaría previsualizar mi fichero index
    en el navegador ¿qué tengo que hacer?




              1. Requisito imprescindible: guardar
                    2. Pinchar en navegar
SEGUNDA PAGINA
 Vamos a crear una segundo fichero html
  denominado pagina2 y
 escribimos “Esta es mi segunda página”
  eligiendo título 2
Cuidado: No debemos poner acentos ni dejar espacios en blanco en los documentos que de una
página web
TABLAS
   ¿Cómo creo una tabla?
Las columnas y las filas se pueden desplazar,insertar y
eliminar
ENLACES
   ¿Cómo se crean los enlaces?
Enlace a una página web
Vamos a convertir Texto 2 en un
  enlace a un documento pdf
Aparecerá la misma ventana y tendremos que pinchar en el
 icono carpeta para buscar donde tenemos el fichero pdf
              denominado “documento.pdf




 Cuidado: Está predeterminado en el programa que solo aparezcan los archivos
     html así que tendremos que desplegar y pinchar en todos los archivos.
INSERTAR FLECHAS U OTRAS
              SIGNOS
   Insertamos una flecha izquierda
Y convertimos esa imagen en un
    enlace al fichero index:
Nos vamos de nuevo al fichero index y creamos un enlace
  en la flecha hacia la derecha que abra nuestro fichero
                       pagina2
VIDEOS
   ¿Puedo insertar un video de YouTube en
    mi página web?
   YA ESTA LA PAGINA QUE LA
    DISFRUTEN!!!

Contenu connexe

Tendances (18)

Manual de frontpage
Manual de frontpageManual de frontpage
Manual de frontpage
 
Manual front page
Manual front pageManual front page
Manual front page
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Tutorial Word 2007
Tutorial Word 2007Tutorial Word 2007
Tutorial Word 2007
 
Presentación unidad tres
Presentación unidad tresPresentación unidad tres
Presentación unidad tres
 
crear una web
crear una web crear una web
crear una web
 
Adobe dreamweaver
Adobe dreamweaverAdobe dreamweaver
Adobe dreamweaver
 
El entorno gráfico microsoft word 2013
El entorno gráfico  microsoft word 2013El entorno gráfico  microsoft word 2013
El entorno gráfico microsoft word 2013
 
Etiquetas head y body
Etiquetas head y bodyEtiquetas head y body
Etiquetas head y body
 
Dreamweaver interfaz
Dreamweaver interfazDreamweaver interfaz
Dreamweaver interfaz
 
Presentación2 wwwwwwwwwwwwww
Presentación2 wwwwwwwwwwwwwwPresentación2 wwwwwwwwwwwwww
Presentación2 wwwwwwwwwwwwww
 
Tutorial de microsoft word valentina alzate 10 c
Tutorial de microsoft word valentina alzate 10 cTutorial de microsoft word valentina alzate 10 c
Tutorial de microsoft word valentina alzate 10 c
 
LeccióN 1a Funciones Del Programa Word
LeccióN 1a   Funciones Del Programa WordLeccióN 1a   Funciones Del Programa Word
LeccióN 1a Funciones Del Programa Word
 
Presentación1 ide08217008
Presentación1 ide08217008Presentación1 ide08217008
Presentación1 ide08217008
 
Tutorial de MS Word
Tutorial de MS WordTutorial de MS Word
Tutorial de MS Word
 
Práctica Informática - Archivo PDF
Práctica Informática - Archivo PDF Práctica Informática - Archivo PDF
Práctica Informática - Archivo PDF
 
La interfaz de dreamweaver cs5
La interfaz de dreamweaver cs5La interfaz de dreamweaver cs5
La interfaz de dreamweaver cs5
 
Elabora una presentación donde se resuman las herramientas de la barra de men...
Elabora una presentación donde se resuman las herramientas de la barra de men...Elabora una presentación donde se resuman las herramientas de la barra de men...
Elabora una presentación donde se resuman las herramientas de la barra de men...
 

En vedette (10)

Impress
ImpressImpress
Impress
 
Curso Html
Curso HtmlCurso Html
Curso Html
 
Introcuccion pc hardware
Introcuccion pc hardwareIntrocuccion pc hardware
Introcuccion pc hardware
 
El ordenador
El ordenadorEl ordenador
El ordenador
 
Hardware
HardwareHardware
Hardware
 
Tutorial blogger
Tutorial bloggerTutorial blogger
Tutorial blogger
 
2 bach ud01 - hardware del ordenador
2 bach   ud01 - hardware del ordenador2 bach   ud01 - hardware del ordenador
2 bach ud01 - hardware del ordenador
 
Componentes del ordenador
Componentes del ordenadorComponentes del ordenador
Componentes del ordenador
 
Estructura pc tipos de memoria
Estructura pc tipos de memoriaEstructura pc tipos de memoria
Estructura pc tipos de memoria
 
Tutorial de Slideshare
Tutorial de SlideshareTutorial de Slideshare
Tutorial de Slideshare
 

Similaire à Trabajando con Kompozer

Similaire à Trabajando con Kompozer (20)

Escuela Abierta - Taller de Html
Escuela Abierta - Taller de HtmlEscuela Abierta - Taller de Html
Escuela Abierta - Taller de Html
 
Escuela Abierta - Taller de Html
Escuela Abierta - Taller de HtmlEscuela Abierta - Taller de Html
Escuela Abierta - Taller de Html
 
Curso html
Curso htmlCurso html
Curso html
 
Ejercicios
EjerciciosEjercicios
Ejercicios
 
Adjuntos fichero 143604
Adjuntos fichero 143604Adjuntos fichero 143604
Adjuntos fichero 143604
 
Practico html
Practico htmlPractico html
Practico html
 
Alexander y diego paginas de html
Alexander y diego paginas de htmlAlexander y diego paginas de html
Alexander y diego paginas de html
 
Tutorial ejercicio 1
Tutorial ejercicio 1Tutorial ejercicio 1
Tutorial ejercicio 1
 
Maquetación Web con Dreamweaver y Photoshop (1/2)
Maquetación Web con Dreamweaver y Photoshop (1/2)Maquetación Web con Dreamweaver y Photoshop (1/2)
Maquetación Web con Dreamweaver y Photoshop (1/2)
 
Dreamweaver mx-practicas
Dreamweaver mx-practicasDreamweaver mx-practicas
Dreamweaver mx-practicas
 
Dreamweaver mayo 2010
Dreamweaver mayo 2010Dreamweaver mayo 2010
Dreamweaver mayo 2010
 
Archivo Pdf
Archivo PdfArchivo Pdf
Archivo Pdf
 
Trabajo de informatica
Trabajo de informaticaTrabajo de informatica
Trabajo de informatica
 
Trabajo practico nº 4
Trabajo practico nº 4  Trabajo practico nº 4
Trabajo practico nº 4
 
MANUAL PARA CREAR PÁGINAS WEB CON HTML
MANUAL PARA CREAR PÁGINAS WEB CON HTMLMANUAL PARA CREAR PÁGINAS WEB CON HTML
MANUAL PARA CREAR PÁGINAS WEB CON HTML
 
Subir actividades lim y ardora en tu blog
Subir actividades lim y ardora en tu blogSubir actividades lim y ardora en tu blog
Subir actividades lim y ardora en tu blog
 
Dreamweaver gisselle noguera
Dreamweaver gisselle nogueraDreamweaver gisselle noguera
Dreamweaver gisselle noguera
 
Tutorial página web
Tutorial página webTutorial página web
Tutorial página web
 
u1
u1u1
u1
 
Trabajo practico 8 de informatica
Trabajo practico  8 de informaticaTrabajo practico  8 de informatica
Trabajo practico 8 de informatica
 

Plus de aliciabarba04 (16)

Equilibrio
EquilibrioEquilibrio
Equilibrio
 
Utilidad
UtilidadUtilidad
Utilidad
 
Elasticidad
ElasticidadElasticidad
Elasticidad
 
Demanda
DemandaDemanda
Demanda
 
Consumo
ConsumoConsumo
Consumo
 
D=c+i+g
D=c+i+gD=c+i+g
D=c+i+g
 
Prop.mg consumo
Prop.mg consumoProp.mg consumo
Prop.mg consumo
 
Friedman phillips
Friedman phillipsFriedman phillips
Friedman phillips
 
Recetas keynesianas
Recetas keynesianasRecetas keynesianas
Recetas keynesianas
 
La providencia9dejulio
La providencia9dejulioLa providencia9dejulio
La providencia9dejulio
 
Reciclaje
ReciclajeReciclaje
Reciclaje
 
Reciclaje
ReciclajeReciclaje
Reciclaje
 
Como subir presentacion
Como subir presentacionComo subir presentacion
Como subir presentacion
 
Redes sociales1
Redes sociales1Redes sociales1
Redes sociales1
 
REVOLUCION INDUSTRIAL
REVOLUCION INDUSTRIALREVOLUCION INDUSTRIAL
REVOLUCION INDUSTRIAL
 
Estructura Organizacional
Estructura OrganizacionalEstructura Organizacional
Estructura Organizacional
 

Trabajando con Kompozer

  • 1. TRABAJANDO CON KOMPOZER PROFESORA ALICIA BARBA
  • 2. Antes de comenzar a utilizar Kompozer vamos a crear una carpeta en nuestra memoria externa, podes poner tu nombre y dentro de la misma crearemos tres carpetas denominadas:
  • 3. Esta es la apariencia de Kompozer
  • 4. Lo primero que tenemos que hacer antes de comenzar a trabajar con el editor de html será establecer un título y unas propiedades para la pagina
  • 6. Si nos fijamos en la parte superior observaremos que aparece el título que le habíamos dado anteriormente
  • 7. En la parte inferior del editor podremos ver que hay varias pestañas que serán los tipos de vistas que podemos utilizar, pinchando en código fuente observaremos donde se ha insertado la información que habíamos escrito sobre el autor y la descripción de nuestra página HTML
  • 8. Este es el código fuente que existe de momento de mi página html:
  • 9. Un fichero html siempre comienza por <html> y termina en  </html> ¿En qué partes se divide?  <html>  <head>  Encabezamiento: mostrará el título, la descripción del fichero html, el autor y la información adicional que queremos insertar  </head>  <body>  Cuerpo: aparecerá los contenidos de mi página web: texto, imagen, video, audio…  </body>  </html>
  • 10. A continuación guardaremos los cambios y le daremos un nombre a nuestro fichero html: index
  • 11. Cualquier página web está formada por varios ficheros html y el principal se denominada “index”.
  • 12. FONDOS Y COLORES  ¿Cómo cambio el fondo y los colores de mi página html?
  • 13.
  • 14. Vamos a personalizar los colores
  • 15. Vamos a comenzar a escribir, elegimos Título 1:
  • 16. Insertamos un segundo texto, para ello elegimos Título 2:
  • 17. CAMBIO DE TEXTO  ¿Cómo cambio el tamaño del texto o añado negrita, cursiva o subrayado?  ¿Se puede alinear el texto?
  • 18. IMAGENES  ¿Cómo inserto una imagen?
  • 20.  Buscaremos la imagen escudo.png que tenemos en nuestra carpeta imagenes.  El texto alternativo sirve por un lado por si falla nuestra imagen y por otro lado facilita información porque cuando situamos el puntero del ratón sobre la imagen aparece el nombre que le hemos dado.  Y nos queda así:
  • 21. o insertándola en una tabla
  • 22. VISUALIZAR EL FICHERO  Me gustaría previsualizar mi fichero index en el navegador ¿qué tengo que hacer? 1. Requisito imprescindible: guardar 2. Pinchar en navegar
  • 23. SEGUNDA PAGINA  Vamos a crear una segundo fichero html denominado pagina2 y  escribimos “Esta es mi segunda página” eligiendo título 2
  • 24. Cuidado: No debemos poner acentos ni dejar espacios en blanco en los documentos que de una página web
  • 25.
  • 26. TABLAS  ¿Cómo creo una tabla?
  • 27. Las columnas y las filas se pueden desplazar,insertar y eliminar
  • 28. ENLACES  ¿Cómo se crean los enlaces?
  • 29. Enlace a una página web
  • 30. Vamos a convertir Texto 2 en un enlace a un documento pdf
  • 31. Aparecerá la misma ventana y tendremos que pinchar en el icono carpeta para buscar donde tenemos el fichero pdf denominado “documento.pdf Cuidado: Está predeterminado en el programa que solo aparezcan los archivos html así que tendremos que desplegar y pinchar en todos los archivos.
  • 32. INSERTAR FLECHAS U OTRAS SIGNOS  Insertamos una flecha izquierda
  • 33. Y convertimos esa imagen en un enlace al fichero index:
  • 34. Nos vamos de nuevo al fichero index y creamos un enlace en la flecha hacia la derecha que abra nuestro fichero pagina2
  • 35. VIDEOS  ¿Puedo insertar un video de YouTube en mi página web?
  • 36. YA ESTA LA PAGINA QUE LA DISFRUTEN!!!