SlideShare uma empresa Scribd logo
1 de 8
DISEÑO DE PÁGINAS WEB



HERRAMIENTAS:
   1. Microsoft Word

   2. Netscape

   3. Front page

   4. Editores profesionales




MICROSOFT WORD


El procesador de texto Microsoft Word tiene una opción que nos permite crear páginas HTML de forma
directa.

Pasos:

   1. Crear un documento de texto en M.W.

   2. Guardarlo como HTML. Menú Archivo, opción Guardar como HTML

Una vez guardado como HTML podemos trabajar con el editor HTML, que incorpora las herramientas
propias de un hipertexto:




                                                                                                     1
Estas herramientas nos van a permitir insertar los elementos característicos de una página web: colores
e imagen de fondo, maracadors, enlaces internos y externos, enlaces a páginas de internet, gráficos,
enlaces a correo electrónico...



TRABAJO PRÁCTICO:
Crear una página similar a ésta.




Elementos fundamentales:

    •   Fondo

    •   Título

    •   Texto

    •   Líneas

    •   Tablas

    •   Gráficos

    •   Enlaces

    •   Enlace a correo




Color del fondo


Se aconseja dar un color que facilite la lectura. Para ello en el menú Formato seleccionamos la opción
Fondo. Se nos abre una ventana como ésta


                                                                                                         2
Seleccionamos un color y aceptamos. Si elegimos Efectos de relleno tendremos fondos con gráficos.
Quedan más lúcidos pero dificultan la lectura.



Título y texto
Se seleccionan sus características con la opción Fuente de Formato




                                                                                                    3
Líneas:


Se insertan con el botón Línea horizontal de la barra de formato




Tablas
                     1º ESO                                        3º ESO
                                           CONTENIDOS
                     2º ESO                                        4º ESO




Se insertan con el botón Tablas de la barra estándar.



En la ventana que se abre se seleccionan el número de filas, columnas y características de la tabla,
como se hace en trabajando con el el procesador de textos.




                                                                                                       4
Gráficos


Se insertan con la opción Imagen del menú Insertar. La imagen la tenemos diseñada previamente y
guardada en la carpeta de trabajo del lugar en el que estamos trabajando. Si la traemos de otro sitio del
disco duro y luego queremos pasar nuestra página a un disquete o a un servidor el navegador no la
encontrará en el lugar especificado y nos dará un mensaje de error y no aparecerá.




Enlaces


Constituyen la diferencia sustancial entre un texto y un hipertexto. Nos permiten saltar a otro lugar de la
página, a otra página propia, a una página de Internet o a una aplicación o programa.




                       Para crear un enlace es preciso marcar un texto o una imagen. Una vez marcado
se pulsa el botón de Insertar hipervínculo de la barra estándar



Se nos abre una nueva ventana en cuya parte superior tenemos que incluir la dirección de internet o la
dirección local en la que se encuentra el fichero al que queremos llegar.

Por ejemplo este es un enlace a la página local sevillaweb.html




                                                                                                              5
Los enlaces también pueden dirigirse a una región concreta de la propia página o de otra página. Para

conseguirlo se utiliza la segunda ventana, la de ubicación dentro del archivo. Esto exige que previamente

se haya definido un marcador en la misma.




MARCADOR


Se inserta marcando un punto o un texto de la página y activando en el menú Insertar, la opción

Marcador.




Hay que asignarle un nombre, que habitualmente coincide con el texto seleccionado.


 A partir de aquí se pueden crear enlaces que vayan directamente a esta región de la página.


Se utilizan cuando la página es muy extensa y no aparece entera en pantalla, para evitar las búsquedas

con la barra de ascensor.




Enlaces a correo

                                                                                                         6
Se puede crear un enlace que nos abra el programa de correo electrónico y nos dirija un mensaje a una
dirección determinada

Para ello se opera como para crear un enlace norma, pero en lugar de una dirección se teclea:
mailto:nombre@direccion




Para practicar


       Intenta crear una página similar a esta:


       Educación Matemática e Internet.
                       Una introducción para profesores
                                Creación de páginas web
Antonio Pérez Sanz

                              Correo: aperez4@platea.pntic.mec.es

                         Página web: http://platea.pntic.mec.es/~aperez4

   Vídeo y Matemáticas                      Fibonacci                           Páginas web



Gimnasia mental
        Si quieres pasar un rato entretenido, intenta iluminar todas las casillas del tablero.
 Al pulsar sobre una casilla cambian de estado las que están en contacto mediante un lado con ella.
                                              Suerte


                                                                                                        7
Integrantes:
Jacobo Collaves Ruth Marilú
Otiniano Gutiérrez Gustavo Adolfo
Avalos Avalos William Guillermo




                                    8

Mais conteúdo relacionado

Mais procurados

Mais procurados (15)

Encabezados y pie de página
Encabezados y pie de páginaEncabezados y pie de página
Encabezados y pie de página
 
Eduardo espinoza cod-de-tablas-html
Eduardo espinoza cod-de-tablas-htmlEduardo espinoza cod-de-tablas-html
Eduardo espinoza cod-de-tablas-html
 
Actividades de clase documentos
Actividades de clase documentosActividades de clase documentos
Actividades de clase documentos
 
Jimdo tutorial 1
Jimdo tutorial 1Jimdo tutorial 1
Jimdo tutorial 1
 
CREACION DE PAGINA WEB JIMDO
CREACION DE PAGINA WEB JIMDOCREACION DE PAGINA WEB JIMDO
CREACION DE PAGINA WEB JIMDO
 
Macaaa
MacaaaMacaaa
Macaaa
 
Microsoft word
Microsoft wordMicrosoft word
Microsoft word
 
Vickyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy11
Vickyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy11Vickyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy11
Vickyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy11
 
Word 2010 diapositivas 3
Word 2010 diapositivas 3Word 2010 diapositivas 3
Word 2010 diapositivas 3
 
Tutorial mindomo
Tutorial mindomoTutorial mindomo
Tutorial mindomo
 
Cuadros de texto
Cuadros de textoCuadros de texto
Cuadros de texto
 
Formatos de páginas en word
Formatos de páginas en wordFormatos de páginas en word
Formatos de páginas en word
 
uso y manejo de word
uso y manejo de worduso y manejo de word
uso y manejo de word
 
Clase 9 formato de paginas en word 2010
Clase 9 formato de paginas en  word 2010Clase 9 formato de paginas en  word 2010
Clase 9 formato de paginas en word 2010
 
Autoinstruccional de informática a.montenegro
Autoinstruccional de informática a.montenegroAutoinstruccional de informática a.montenegro
Autoinstruccional de informática a.montenegro
 

Destaque (8)

Conde & Partners Consultoria
Conde & Partners ConsultoriaConde & Partners Consultoria
Conde & Partners Consultoria
 
Folha de pérola 8º edição
Folha de pérola 8º ediçãoFolha de pérola 8º edição
Folha de pérola 8º edição
 
Apresentação guilherme palestra gepit
Apresentação guilherme   palestra gepitApresentação guilherme   palestra gepit
Apresentação guilherme palestra gepit
 
Atrio Rio Informa ed02
Atrio Rio Informa ed02Atrio Rio Informa ed02
Atrio Rio Informa ed02
 
ωραίες φωτογραφίες
ωραίες φωτογραφίεςωραίες φωτογραφίες
ωραίες φωτογραφίες
 
Saude coletiva aula 1
Saude coletiva aula 1Saude coletiva aula 1
Saude coletiva aula 1
 
1º Va Grupo 07
1º Va   Grupo 071º Va   Grupo 07
1º Va Grupo 07
 
Cuidados com os lagos de jardim
Cuidados com os lagos de jardimCuidados com os lagos de jardim
Cuidados com os lagos de jardim
 

Semelhante a Diseño web

Tp 13 gonzalo
Tp 13 gonzaloTp 13 gonzalo
Tp 13 gonzalo
mochoneta
 
Trabajo prafctico n13 (1)
Trabajo prafctico n13 (1)Trabajo prafctico n13 (1)
Trabajo prafctico n13 (1)
JuanLYB
 
Trabajo practino N° 13
Trabajo practino N° 13Trabajo practino N° 13
Trabajo practino N° 13
ezeguti
 
Clase 10 ficha insertar en word 2010
Clase 10 ficha insertar en  word 2010Clase 10 ficha insertar en  word 2010
Clase 10 ficha insertar en word 2010
victorlopezzz
 

Semelhante a Diseño web (20)

G:\DiseñO Wed\Disenoweb
G:\DiseñO Wed\DisenowebG:\DiseñO Wed\Disenoweb
G:\DiseñO Wed\Disenoweb
 
DISEÑO
DISEÑODISEÑO
DISEÑO
 
Trabajo Practico n° 13
Trabajo Practico n° 13Trabajo Practico n° 13
Trabajo Practico n° 13
 
Tp 13 marcos
Tp 13 marcosTp 13 marcos
Tp 13 marcos
 
Como Crear Paginas Web
Como Crear Paginas WebComo Crear Paginas Web
Como Crear Paginas Web
 
Tp 13 gonzalo
Tp 13 gonzaloTp 13 gonzalo
Tp 13 gonzalo
 
13
1313
13
 
Trabajo prafctico n13 (1)
Trabajo prafctico n13 (1)Trabajo prafctico n13 (1)
Trabajo prafctico n13 (1)
 
Trabajo practino N° 13
Trabajo practino N° 13Trabajo practino N° 13
Trabajo practino N° 13
 
Hernández Méndez guillermo alfonso 3104
Hernández Méndez guillermo alfonso 3104Hernández Méndez guillermo alfonso 3104
Hernández Méndez guillermo alfonso 3104
 
U13 trabajo de investigacion
U13 trabajo de investigacionU13 trabajo de investigacion
U13 trabajo de investigacion
 
Clase 10 ficha insertar en word 2010
Clase 10 ficha insertar en  word 2010Clase 10 ficha insertar en  word 2010
Clase 10 ficha insertar en word 2010
 
Clase 10 ficha insertar en word 2010
Clase 10 ficha insertar en  word 2010Clase 10 ficha insertar en  word 2010
Clase 10 ficha insertar en word 2010
 
Ofimatica
OfimaticaOfimatica
Ofimatica
 
Guia de autoaprendizaje
Guia de autoaprendizajeGuia de autoaprendizaje
Guia de autoaprendizaje
 
Guia 1 prezi
Guia 1 preziGuia 1 prezi
Guia 1 prezi
 
Procesador de textos word
Procesador de textos wordProcesador de textos word
Procesador de textos word
 
word2010diapositivas.pptx
word2010diapositivas.pptxword2010diapositivas.pptx
word2010diapositivas.pptx
 
Uwutooooo (copy)
Uwutooooo (copy)Uwutooooo (copy)
Uwutooooo (copy)
 
Uwutooooo (copy)
Uwutooooo (copy)Uwutooooo (copy)
Uwutooooo (copy)
 

Último

5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
MiNeyi1
 
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdfNUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
UPTAIDELTACHIRA
 
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
 
PLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxPLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docx
lupitavic
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
El Fortí
 

Último (20)

BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICABIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativa
 
AFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA II
AFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA IIAFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA II
AFICHE EL MANIERISMO HISTORIA DE LA ARQUITECTURA II
 
Medición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptxMedición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptx
 
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
 
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
5.- Doerr-Mide-lo-que-importa-DESARROLLO PERSONAL
 
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdfNUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes d
 
Unidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la InvestigaciónUnidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la Investigación
 
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
 
Abril 2024 - Maestra Jardinera Ediba.pdf
Abril 2024 -  Maestra Jardinera Ediba.pdfAbril 2024 -  Maestra Jardinera Ediba.pdf
Abril 2024 - Maestra Jardinera Ediba.pdf
 
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
 
Estrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónEstrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcción
 
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptxLA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
 
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
 
PLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxPLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docx
 
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VSSEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
 
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
 
ACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJO
ACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJOACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJO
ACTIVIDAD DIA DE LA MADRE FICHA DE TRABAJO
 

Diseño web

  • 1. DISEÑO DE PÁGINAS WEB HERRAMIENTAS: 1. Microsoft Word 2. Netscape 3. Front page 4. Editores profesionales MICROSOFT WORD El procesador de texto Microsoft Word tiene una opción que nos permite crear páginas HTML de forma directa. Pasos: 1. Crear un documento de texto en M.W. 2. Guardarlo como HTML. Menú Archivo, opción Guardar como HTML Una vez guardado como HTML podemos trabajar con el editor HTML, que incorpora las herramientas propias de un hipertexto: 1
  • 2. Estas herramientas nos van a permitir insertar los elementos característicos de una página web: colores e imagen de fondo, maracadors, enlaces internos y externos, enlaces a páginas de internet, gráficos, enlaces a correo electrónico... TRABAJO PRÁCTICO: Crear una página similar a ésta. Elementos fundamentales: • Fondo • Título • Texto • Líneas • Tablas • Gráficos • Enlaces • Enlace a correo Color del fondo Se aconseja dar un color que facilite la lectura. Para ello en el menú Formato seleccionamos la opción Fondo. Se nos abre una ventana como ésta 2
  • 3. Seleccionamos un color y aceptamos. Si elegimos Efectos de relleno tendremos fondos con gráficos. Quedan más lúcidos pero dificultan la lectura. Título y texto Se seleccionan sus características con la opción Fuente de Formato 3
  • 4. Líneas: Se insertan con el botón Línea horizontal de la barra de formato Tablas 1º ESO 3º ESO CONTENIDOS 2º ESO 4º ESO Se insertan con el botón Tablas de la barra estándar. En la ventana que se abre se seleccionan el número de filas, columnas y características de la tabla, como se hace en trabajando con el el procesador de textos. 4
  • 5. Gráficos Se insertan con la opción Imagen del menú Insertar. La imagen la tenemos diseñada previamente y guardada en la carpeta de trabajo del lugar en el que estamos trabajando. Si la traemos de otro sitio del disco duro y luego queremos pasar nuestra página a un disquete o a un servidor el navegador no la encontrará en el lugar especificado y nos dará un mensaje de error y no aparecerá. Enlaces Constituyen la diferencia sustancial entre un texto y un hipertexto. Nos permiten saltar a otro lugar de la página, a otra página propia, a una página de Internet o a una aplicación o programa. Para crear un enlace es preciso marcar un texto o una imagen. Una vez marcado se pulsa el botón de Insertar hipervínculo de la barra estándar Se nos abre una nueva ventana en cuya parte superior tenemos que incluir la dirección de internet o la dirección local en la que se encuentra el fichero al que queremos llegar. Por ejemplo este es un enlace a la página local sevillaweb.html 5
  • 6. Los enlaces también pueden dirigirse a una región concreta de la propia página o de otra página. Para conseguirlo se utiliza la segunda ventana, la de ubicación dentro del archivo. Esto exige que previamente se haya definido un marcador en la misma. MARCADOR Se inserta marcando un punto o un texto de la página y activando en el menú Insertar, la opción Marcador. Hay que asignarle un nombre, que habitualmente coincide con el texto seleccionado. A partir de aquí se pueden crear enlaces que vayan directamente a esta región de la página. Se utilizan cuando la página es muy extensa y no aparece entera en pantalla, para evitar las búsquedas con la barra de ascensor. Enlaces a correo 6
  • 7. Se puede crear un enlace que nos abra el programa de correo electrónico y nos dirija un mensaje a una dirección determinada Para ello se opera como para crear un enlace norma, pero en lugar de una dirección se teclea: mailto:nombre@direccion Para practicar Intenta crear una página similar a esta: Educación Matemática e Internet. Una introducción para profesores Creación de páginas web Antonio Pérez Sanz Correo: aperez4@platea.pntic.mec.es Página web: http://platea.pntic.mec.es/~aperez4 Vídeo y Matemáticas Fibonacci Páginas web Gimnasia mental Si quieres pasar un rato entretenido, intenta iluminar todas las casillas del tablero. Al pulsar sobre una casilla cambian de estado las que están en contacto mediante un lado con ella. Suerte 7
  • 8. Integrantes: Jacobo Collaves Ruth Marilú Otiniano Gutiérrez Gustavo Adolfo Avalos Avalos William Guillermo 8