SlideShare una empresa de Scribd logo
1 de 18
CREACION DE  PÁGINAS WEB BÁSICAS  Aprende como crear tu propia Página Web... ¿Sabias que puedes crear una página web sencilla con el Bloc de Notas? Aquí aprenderás como hacerlo, solo necesitas saber HTML...
CREACION DE  PÁGINAS WEB BÁSICAS  Aprende como crear tu propia Página Web... ¿Que es una página web? Es un documento electrónico que cuenta con imágenes, texto, video, audio y demás recursos multimediales para comunicar información a través de la web o internet. y...     ¿para que me sirve una página web?
CREACION DE  PÁGINAS WEB BÁSICAS  Aprende como crear tu propia Página Web... ¿Para que sirve una página web? Las páginas web, te permiten navegar de una página de documento a otra, compartir informacion con millones de personas en el mundo asi como también ellos pueden ver la información de tu página. Son creadas básicamente con código HTML. ahora... ¿conoce el  HTML?
CREACION DE  PÁGINAS WEB BÁSICAS  Aprende como crear tu propia Página Web... ¿Que es HTML? HTML (HyperText Markup Language ó Lenguaje de Marcado de Hipertexto). Es el lenguaje con que se definen las páginas web, contiene un conjunto de instrucciones que sirven para incluir el texto y otros elementos que contienen la página web. ¿Como utilizar el HTML?
CREACION DE  PÁGINAS WEB BÁSICAS  Aprende como crear tu propia Página Web... Estructura Lógica Toda página web empieza con la etiqueta <HTML> dentro de la cual se almacena todo el código de la página web. Recuerda que las instrucciones HTML deben abrirse con los operadores < > y cerrarse con </ >, asi como se muestra en la imagen. ¿Que es el Head?
CREACION DE  PÁGINAS WEB BÁSICAS  Aprende como crear tu propia Página Web... Estructura Lógica A continuación se ubica el <HEAD>, o cabecera, dentro de la cual se ubica el título de la página web, este es reconocido, en una de sus pestañas, por el navegador que permite visualizarla. Titulo de la pagina web ¿Que es el Body?
CREACION DE  PÁGINAS WEB BÁSICAS  Aprende como crear tu propia Página Web... Estructura Lógica El <Body> permite almacenar todo el código que necesitas para insertar tablas, párrafos, imágenes, colores, enlaces, y demás recursos que necesite tu página web, lo que se encuentre aquí se visualizará en pantalla. No olvides que todas las instrucciones que abras (<body>) necesitaran cerrarse (</body>). !Hagamos una página web!
CREACION DE  PÁGINAS WEB BÁSICAS  Aprende como crear tu propia Página Web... HAGAMOS UNA PÁGINA WEB A continuación crearemos una página web paso a paso, para que puedas comprender mejor. PASO 1. Abrir el editor de texto sin formato (bloc de notas). !Hagamos una página web!
CREACION DE  PÁGINAS WEB BÁSICAS  Aprende como crear tu propia Página Web... HAGAMOS UNA PÁGINA WEB		 PASO 2. Iniciar la estructura de la página web con el código HTML. Abre la instrucción <html> y no olvides cerrarla </html>. Dentro de ella se almacenara todo el código de la página HTML. !Hagamos una página web!
CREACION DE  PÁGINAS WEB BÁSICAS  Aprende como crear tu propia Página Web... HAGAMOS UNA PÁGINA WEB		 PASO 3. Ubicate dentro de las instrucciones <html> y abre una nueva instrucción: <head>, no olvides cerrarla </head>. Aquí ubicaremos el título de la página que aparecerá en una pestaña del navegador. !Hagamos una página web!
CREACION DE  PÁGINAS WEB BÁSICAS  Aprende como crear tu propia Página Web... HAGAMOS UNA PÁGINA WEB		 PASO 4. Dentro de las instrucciones <head> ubicamos una nueva: <title> la cual establecerá el título de la página, no olvides cerrarla </title>. Puedes escribir el título de tu página dentro de estas instrucciones. En este caso se llamará MIPAGINA, sin espacios. !Hagamos una página web!
CREACION DE  PÁGINAS WEB BÁSICAS  Aprende como crear tu propia Página Web... HAGAMOS UNA PÁGINA WEB		 PASO 5. Abre la instrucción <body> dentro de esta irá todo el cuerpo de la página web, solo lo que se enuentre aquí se pordra visualizar en pantalla, no olvides cerrarla </body>. !Hagamos una página web!
CREACION DE  PÁGINAS WEB BÁSICAS  Aprende como crear tu propia Página Web... HAGAMOS UNA PÁGINA WEB		 PASO 6. Ubícate dentro de la instrucción <body> para incluir un titulo a tu página, hazlo con la instrucción <h1> que sirve para agregar encabezados, no olvides cerrar la intruccion </h1>. Dentro de ellas puedes escribir un título. !Hagamos una página web!
CREACION DE  PÁGINAS WEB BÁSICAS  Aprende como crear tu propia Página Web... HAGAMOS UNA PÁGINA WEB		 PASO 7. Aun dentro de la instrucción <body> agrega párrafos con la instrucción <p>, no olvides cerrarla </p>. Escríbe un pequeño párrafo. !Hagamos una página web!
CREACION DE  PÁGINAS WEB BÁSICAS  Aprende como crear tu propia Página Web... HAGAMOS UNA PÁGINA WEB		 PASO 8. Le hace falta un color de fondo ¿verdad? Utiliza la instrucción Bgcolor, añade al <body> asi como se muestra en la imagen. El color debe escribirse en ingles o hexadecimal (es el color codificado en letras y números). !Hagamos una página web!
CREACION DE  PÁGINAS WEB BÁSICAS  Aprende como crear tu propia Página Web... GUARDAR LA PÁGINA WEB		 Haz clic en Archivo, Guardar Como: 	Index.html porque es una página de inicio, y escoges en Tipo de documento: 	Todos los archivos. Ubica el archivo en el escritorio para que sea de facil acceso. ¡Y a Guardar y ejecutar nuestra página web!
CREACION DE  PÁGINAS WEB BÁSICAS  Aprende como crear tu propia Página Web... ¡PROBEMOS!	 Si ubicaste el archivo en el escritorio de tu computador, solo debes ir allí y hacer doble clic en el archivo, el cual tendrá un icono con la imagen de tu navegador. Y a disfrutar de tu pequeña pagina web. Veamos como resultó la pagina web... por ahora
CREACION DE  PÁGINAS WEB BÁSICAS  Aprende como crear tu propia Página Web... ¡PROBEMOS!	 ¡MI PAGINA WEB! Vé y practica más diseños a tu gusto...

Más contenido relacionado

La actualidad más candente

La actualidad más candente (17)

Tarea sesion3
Tarea sesion3Tarea sesion3
Tarea sesion3
 
Tecnologia web 2.0
Tecnologia web 2.0Tecnologia web 2.0
Tecnologia web 2.0
 
Comparación
ComparaciónComparación
Comparación
 
Trabajo De Computacion
Trabajo De ComputacionTrabajo De Computacion
Trabajo De Computacion
 
Desarrolla aplicacionesweb
Desarrolla aplicacioneswebDesarrolla aplicacionesweb
Desarrolla aplicacionesweb
 
Diseño de páginas web
Diseño de páginas webDiseño de páginas web
Diseño de páginas web
 
Diapositivas
DiapositivasDiapositivas
Diapositivas
 
COMO CREAR UNA PAGINA WEB EN HTML SUS PRIMEROS PASOS
COMO CREAR UNA PAGINA WEB EN HTML SUS PRIMEROS PASOSCOMO CREAR UNA PAGINA WEB EN HTML SUS PRIMEROS PASOS
COMO CREAR UNA PAGINA WEB EN HTML SUS PRIMEROS PASOS
 
Tutorial de cómo crear paginas web
Tutorial de cómo crear paginas webTutorial de cómo crear paginas web
Tutorial de cómo crear paginas web
 
Blog
BlogBlog
Blog
 
Código HTML
Código HTMLCódigo HTML
Código HTML
 
Informatica presentacion
Informatica presentacionInformatica presentacion
Informatica presentacion
 
relatoria
relatoriarelatoria
relatoria
 
Pagina web con doctype
Pagina web con doctypePagina web con doctype
Pagina web con doctype
 
Adoble dreanweare1
Adoble dreanweare1Adoble dreanweare1
Adoble dreanweare1
 
2° pagina web html5
2° pagina web html52° pagina web html5
2° pagina web html5
 
Mayra poma 4b
Mayra poma 4bMayra poma 4b
Mayra poma 4b
 

Destacado

¿Como Hacer una página web? Diana Lopez
¿Como Hacer una página web?  Diana Lopez¿Como Hacer una página web?  Diana Lopez
¿Como Hacer una página web? Diana Lopezgrupoaac
 
Ofsted Grading criteria 2008-11
Ofsted Grading criteria 2008-11Ofsted Grading criteria 2008-11
Ofsted Grading criteria 2008-11LindseyMarsh
 
Estructura básica de una pagina web
Estructura básica de una pagina webEstructura básica de una pagina web
Estructura básica de una pagina web7homas
 
Proyecto creacion de la pagina web acti6
Proyecto creacion de la pagina web acti6Proyecto creacion de la pagina web acti6
Proyecto creacion de la pagina web acti6Adela Cueva
 
Funcionalidad e-govermet
Funcionalidad e-govermetFuncionalidad e-govermet
Funcionalidad e-govermetAdela Cueva
 
Estándares de creación de una página web
Estándares de creación de una página webEstándares de creación de una página web
Estándares de creación de una página webAna Sarai Rivera Carrera
 
Informe final sobre elaboración de pagina web
Informe final sobre elaboración de pagina webInforme final sobre elaboración de pagina web
Informe final sobre elaboración de pagina websaul huaman HUAMAN
 
Convergencia tecnologica 1
Convergencia tecnologica 1Convergencia tecnologica 1
Convergencia tecnologica 1angie612padilla
 
CREACIÓN DE PAGINA WEB EN ACTIWEB Y BLOG EN BLOGGER
CREACIÓN DE PAGINA WEB EN ACTIWEB Y BLOG EN BLOGGERCREACIÓN DE PAGINA WEB EN ACTIWEB Y BLOG EN BLOGGER
CREACIÓN DE PAGINA WEB EN ACTIWEB Y BLOG EN BLOGGERRicardo Cruz
 
Guía diseño y elaboración pagina web
Guía diseño y elaboración pagina webGuía diseño y elaboración pagina web
Guía diseño y elaboración pagina webBlack creativebox
 
Acta de constitucion del Proyecto
Acta de constitucion del ProyectoActa de constitucion del Proyecto
Acta de constitucion del ProyectoWidowmaker88
 
Ejemplo-proyecto-completo-pmbok
Ejemplo-proyecto-completo-pmbokEjemplo-proyecto-completo-pmbok
Ejemplo-proyecto-completo-pmbokGs Importations
 
¿Cómo hacer un informe escrito?
¿Cómo hacer un informe escrito?¿Cómo hacer un informe escrito?
¿Cómo hacer un informe escrito?Osvaldo Igor
 

Destacado (18)

¿Como Hacer una página web? Diana Lopez
¿Como Hacer una página web?  Diana Lopez¿Como Hacer una página web?  Diana Lopez
¿Como Hacer una página web? Diana Lopez
 
Creacion Pagina WEB
Creacion Pagina WEBCreacion Pagina WEB
Creacion Pagina WEB
 
Ofsted Grading criteria 2008-11
Ofsted Grading criteria 2008-11Ofsted Grading criteria 2008-11
Ofsted Grading criteria 2008-11
 
Estructura básica de una pagina web
Estructura básica de una pagina webEstructura básica de una pagina web
Estructura básica de una pagina web
 
Proyecto creacion de la pagina web acti6
Proyecto creacion de la pagina web acti6Proyecto creacion de la pagina web acti6
Proyecto creacion de la pagina web acti6
 
La Página Web
 La Página Web La Página Web
La Página Web
 
Funcionalidad e-govermet
Funcionalidad e-govermetFuncionalidad e-govermet
Funcionalidad e-govermet
 
Estándares de creación de una página web
Estándares de creación de una página webEstándares de creación de una página web
Estándares de creación de una página web
 
Informe Web Enero
Informe Web EneroInforme Web Enero
Informe Web Enero
 
Informe final sobre elaboración de pagina web
Informe final sobre elaboración de pagina webInforme final sobre elaboración de pagina web
Informe final sobre elaboración de pagina web
 
Convergencia tecnologica 1
Convergencia tecnologica 1Convergencia tecnologica 1
Convergencia tecnologica 1
 
CREACIÓN DE PAGINA WEB EN ACTIWEB Y BLOG EN BLOGGER
CREACIÓN DE PAGINA WEB EN ACTIWEB Y BLOG EN BLOGGERCREACIÓN DE PAGINA WEB EN ACTIWEB Y BLOG EN BLOGGER
CREACIÓN DE PAGINA WEB EN ACTIWEB Y BLOG EN BLOGGER
 
Informe pagina web
Informe pagina webInforme pagina web
Informe pagina web
 
Guía diseño y elaboración pagina web
Guía diseño y elaboración pagina webGuía diseño y elaboración pagina web
Guía diseño y elaboración pagina web
 
Informe pagina web
Informe pagina webInforme pagina web
Informe pagina web
 
Acta de constitucion del Proyecto
Acta de constitucion del ProyectoActa de constitucion del Proyecto
Acta de constitucion del Proyecto
 
Ejemplo-proyecto-completo-pmbok
Ejemplo-proyecto-completo-pmbokEjemplo-proyecto-completo-pmbok
Ejemplo-proyecto-completo-pmbok
 
¿Cómo hacer un informe escrito?
¿Cómo hacer un informe escrito?¿Cómo hacer un informe escrito?
¿Cómo hacer un informe escrito?
 

Similar a Creacion de paginas web con html (Diana Lopez)

Similar a Creacion de paginas web con html (Diana Lopez) (20)

html
htmlhtml
html
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Html
HtmlHtml
Html
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Crea una pagina web
Crea una  pagina webCrea una  pagina web
Crea una pagina web
 
Expo html alexandra
Expo html alexandraExpo html alexandra
Expo html alexandra
 
Expo html alexa
Expo html alexaExpo html alexa
Expo html alexa
 
Alexander y diego paginas de html
Alexander y diego paginas de htmlAlexander y diego paginas de html
Alexander y diego paginas de html
 
Html
HtmlHtml
Html
 
Como hacer una página web fácil
Como hacer una página web fácilComo hacer una página web fácil
Como hacer una página web fácil
 
Tp 4 alvaro
Tp 4 alvaroTp 4 alvaro
Tp 4 alvaro
 
Trabajo practico n° 2
Trabajo practico n° 2Trabajo practico n° 2
Trabajo practico n° 2
 
HTML
HTMLHTML
HTML
 
Diseño web
Diseño webDiseño web
Diseño web
 
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
 
Codigo html
Codigo htmlCodigo html
Codigo html
 
Diseño web
Diseño webDiseño web
Diseño web
 

Último

VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMALVOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMALEDUCCUniversidadCatl
 
CIENCIAS NATURALES 4 TO ambientes .docx
CIENCIAS NATURALES 4 TO  ambientes .docxCIENCIAS NATURALES 4 TO  ambientes .docx
CIENCIAS NATURALES 4 TO ambientes .docxAgustinaNuez21
 
libro para colorear de Peppa pig, ideal para educación inicial
libro para colorear de Peppa pig, ideal para educación iniciallibro para colorear de Peppa pig, ideal para educación inicial
libro para colorear de Peppa pig, ideal para educación inicialLorenaSanchez350426
 
3. Pedagogía de la Educación: Como objeto de la didáctica.ppsx
3. Pedagogía de la Educación: Como objeto de la didáctica.ppsx3. Pedagogía de la Educación: Como objeto de la didáctica.ppsx
3. Pedagogía de la Educación: Como objeto de la didáctica.ppsxJuanpm27
 
sesión de aprendizaje 4 E1 Exposición oral.pdf
sesión de aprendizaje 4 E1 Exposición oral.pdfsesión de aprendizaje 4 E1 Exposición oral.pdf
sesión de aprendizaje 4 E1 Exposición oral.pdfpatriciavsquezbecerr
 
PROGRAMACION ANUAL DE MATEMATICA 2024.docx
PROGRAMACION ANUAL DE MATEMATICA 2024.docxPROGRAMACION ANUAL DE MATEMATICA 2024.docx
PROGRAMACION ANUAL DE MATEMATICA 2024.docxEribertoPerezRamirez
 
Manejo del Dengue, generalidades, actualización marzo 2024 minsa
Manejo del Dengue, generalidades, actualización marzo 2024 minsaManejo del Dengue, generalidades, actualización marzo 2024 minsa
Manejo del Dengue, generalidades, actualización marzo 2024 minsaLuis Minaya
 
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
 
Actividad transversal 2-bloque 2. Actualización 2024
Actividad transversal 2-bloque 2. Actualización 2024Actividad transversal 2-bloque 2. Actualización 2024
Actividad transversal 2-bloque 2. Actualización 2024Rosabel UA
 
Técnicas de grabado y estampación : procesos y materiales
Técnicas de grabado y estampación : procesos y materialesTécnicas de grabado y estampación : procesos y materiales
Técnicas de grabado y estampación : procesos y materialesRaquel Martín Contreras
 
Secuencia didáctica.DOÑA CLEMENTINA.2024.docx
Secuencia didáctica.DOÑA CLEMENTINA.2024.docxSecuencia didáctica.DOÑA CLEMENTINA.2024.docx
Secuencia didáctica.DOÑA CLEMENTINA.2024.docxNataliaGonzalez619348
 
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
 
MODELO DE INFORME DE INDAGACION CIENTIFICA .docx
MODELO DE INFORME DE INDAGACION CIENTIFICA .docxMODELO DE INFORME DE INDAGACION CIENTIFICA .docx
MODELO DE INFORME DE INDAGACION CIENTIFICA .docxRAMON EUSTAQUIO CARO BAYONA
 
Monitoreo a los coordinadores de las IIEE JEC_28.02.2024.vf.pptx
Monitoreo a los coordinadores de las IIEE JEC_28.02.2024.vf.pptxMonitoreo a los coordinadores de las IIEE JEC_28.02.2024.vf.pptx
Monitoreo a los coordinadores de las IIEE JEC_28.02.2024.vf.pptxJUANCARLOSAPARCANARE
 

Último (20)

Tema 7.- E-COMMERCE SISTEMAS DE INFORMACION.pdf
Tema 7.- E-COMMERCE SISTEMAS DE INFORMACION.pdfTema 7.- E-COMMERCE SISTEMAS DE INFORMACION.pdf
Tema 7.- E-COMMERCE SISTEMAS DE INFORMACION.pdf
 
recursos naturales america cuarto basico
recursos naturales america cuarto basicorecursos naturales america cuarto basico
recursos naturales america cuarto basico
 
DIA INTERNACIONAL DAS FLORESTAS .
DIA INTERNACIONAL DAS FLORESTAS         .DIA INTERNACIONAL DAS FLORESTAS         .
DIA INTERNACIONAL DAS FLORESTAS .
 
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMALVOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
 
CIENCIAS NATURALES 4 TO ambientes .docx
CIENCIAS NATURALES 4 TO  ambientes .docxCIENCIAS NATURALES 4 TO  ambientes .docx
CIENCIAS NATURALES 4 TO ambientes .docx
 
libro para colorear de Peppa pig, ideal para educación inicial
libro para colorear de Peppa pig, ideal para educación iniciallibro para colorear de Peppa pig, ideal para educación inicial
libro para colorear de Peppa pig, ideal para educación inicial
 
3. Pedagogía de la Educación: Como objeto de la didáctica.ppsx
3. Pedagogía de la Educación: Como objeto de la didáctica.ppsx3. Pedagogía de la Educación: Como objeto de la didáctica.ppsx
3. Pedagogía de la Educación: Como objeto de la didáctica.ppsx
 
sesión de aprendizaje 4 E1 Exposición oral.pdf
sesión de aprendizaje 4 E1 Exposición oral.pdfsesión de aprendizaje 4 E1 Exposición oral.pdf
sesión de aprendizaje 4 E1 Exposición oral.pdf
 
PROGRAMACION ANUAL DE MATEMATICA 2024.docx
PROGRAMACION ANUAL DE MATEMATICA 2024.docxPROGRAMACION ANUAL DE MATEMATICA 2024.docx
PROGRAMACION ANUAL DE MATEMATICA 2024.docx
 
Manejo del Dengue, generalidades, actualización marzo 2024 minsa
Manejo del Dengue, generalidades, actualización marzo 2024 minsaManejo del Dengue, generalidades, actualización marzo 2024 minsa
Manejo del Dengue, generalidades, actualización marzo 2024 minsa
 
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
 
Actividad transversal 2-bloque 2. Actualización 2024
Actividad transversal 2-bloque 2. Actualización 2024Actividad transversal 2-bloque 2. Actualización 2024
Actividad transversal 2-bloque 2. Actualización 2024
 
Técnicas de grabado y estampación : procesos y materiales
Técnicas de grabado y estampación : procesos y materialesTécnicas de grabado y estampación : procesos y materiales
Técnicas de grabado y estampación : procesos y materiales
 
Secuencia didáctica.DOÑA CLEMENTINA.2024.docx
Secuencia didáctica.DOÑA CLEMENTINA.2024.docxSecuencia didáctica.DOÑA CLEMENTINA.2024.docx
Secuencia didáctica.DOÑA CLEMENTINA.2024.docx
 
Aedes aegypti + Intro to Coquies EE.pptx
Aedes aegypti + Intro to Coquies EE.pptxAedes aegypti + Intro to Coquies EE.pptx
Aedes aegypti + Intro to Coquies EE.pptx
 
VISITA À PROTEÇÃO CIVIL _
VISITA À PROTEÇÃO CIVIL                  _VISITA À PROTEÇÃO CIVIL                  _
VISITA À PROTEÇÃO CIVIL _
 
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
 
MODELO DE INFORME DE INDAGACION CIENTIFICA .docx
MODELO DE INFORME DE INDAGACION CIENTIFICA .docxMODELO DE INFORME DE INDAGACION CIENTIFICA .docx
MODELO DE INFORME DE INDAGACION CIENTIFICA .docx
 
Monitoreo a los coordinadores de las IIEE JEC_28.02.2024.vf.pptx
Monitoreo a los coordinadores de las IIEE JEC_28.02.2024.vf.pptxMonitoreo a los coordinadores de las IIEE JEC_28.02.2024.vf.pptx
Monitoreo a los coordinadores de las IIEE JEC_28.02.2024.vf.pptx
 
La luz brilla en la oscuridad. Necesitamos luz
La luz brilla en la oscuridad. Necesitamos luzLa luz brilla en la oscuridad. Necesitamos luz
La luz brilla en la oscuridad. Necesitamos luz
 

Creacion de paginas web con html (Diana Lopez)

  • 1. CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web... ¿Sabias que puedes crear una página web sencilla con el Bloc de Notas? Aquí aprenderás como hacerlo, solo necesitas saber HTML...
  • 2. CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web... ¿Que es una página web? Es un documento electrónico que cuenta con imágenes, texto, video, audio y demás recursos multimediales para comunicar información a través de la web o internet. y... ¿para que me sirve una página web?
  • 3. CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web... ¿Para que sirve una página web? Las páginas web, te permiten navegar de una página de documento a otra, compartir informacion con millones de personas en el mundo asi como también ellos pueden ver la información de tu página. Son creadas básicamente con código HTML. ahora... ¿conoce el HTML?
  • 4. CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web... ¿Que es HTML? HTML (HyperText Markup Language ó Lenguaje de Marcado de Hipertexto). Es el lenguaje con que se definen las páginas web, contiene un conjunto de instrucciones que sirven para incluir el texto y otros elementos que contienen la página web. ¿Como utilizar el HTML?
  • 5. CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web... Estructura Lógica Toda página web empieza con la etiqueta <HTML> dentro de la cual se almacena todo el código de la página web. Recuerda que las instrucciones HTML deben abrirse con los operadores < > y cerrarse con </ >, asi como se muestra en la imagen. ¿Que es el Head?
  • 6. CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web... Estructura Lógica A continuación se ubica el <HEAD>, o cabecera, dentro de la cual se ubica el título de la página web, este es reconocido, en una de sus pestañas, por el navegador que permite visualizarla. Titulo de la pagina web ¿Que es el Body?
  • 7. CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web... Estructura Lógica El <Body> permite almacenar todo el código que necesitas para insertar tablas, párrafos, imágenes, colores, enlaces, y demás recursos que necesite tu página web, lo que se encuentre aquí se visualizará en pantalla. No olvides que todas las instrucciones que abras (<body>) necesitaran cerrarse (</body>). !Hagamos una página web!
  • 8. CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web... HAGAMOS UNA PÁGINA WEB A continuación crearemos una página web paso a paso, para que puedas comprender mejor. PASO 1. Abrir el editor de texto sin formato (bloc de notas). !Hagamos una página web!
  • 9. CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web... HAGAMOS UNA PÁGINA WEB PASO 2. Iniciar la estructura de la página web con el código HTML. Abre la instrucción <html> y no olvides cerrarla </html>. Dentro de ella se almacenara todo el código de la página HTML. !Hagamos una página web!
  • 10. CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web... HAGAMOS UNA PÁGINA WEB PASO 3. Ubicate dentro de las instrucciones <html> y abre una nueva instrucción: <head>, no olvides cerrarla </head>. Aquí ubicaremos el título de la página que aparecerá en una pestaña del navegador. !Hagamos una página web!
  • 11. CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web... HAGAMOS UNA PÁGINA WEB PASO 4. Dentro de las instrucciones <head> ubicamos una nueva: <title> la cual establecerá el título de la página, no olvides cerrarla </title>. Puedes escribir el título de tu página dentro de estas instrucciones. En este caso se llamará MIPAGINA, sin espacios. !Hagamos una página web!
  • 12. CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web... HAGAMOS UNA PÁGINA WEB PASO 5. Abre la instrucción <body> dentro de esta irá todo el cuerpo de la página web, solo lo que se enuentre aquí se pordra visualizar en pantalla, no olvides cerrarla </body>. !Hagamos una página web!
  • 13. CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web... HAGAMOS UNA PÁGINA WEB PASO 6. Ubícate dentro de la instrucción <body> para incluir un titulo a tu página, hazlo con la instrucción <h1> que sirve para agregar encabezados, no olvides cerrar la intruccion </h1>. Dentro de ellas puedes escribir un título. !Hagamos una página web!
  • 14. CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web... HAGAMOS UNA PÁGINA WEB PASO 7. Aun dentro de la instrucción <body> agrega párrafos con la instrucción <p>, no olvides cerrarla </p>. Escríbe un pequeño párrafo. !Hagamos una página web!
  • 15. CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web... HAGAMOS UNA PÁGINA WEB PASO 8. Le hace falta un color de fondo ¿verdad? Utiliza la instrucción Bgcolor, añade al <body> asi como se muestra en la imagen. El color debe escribirse en ingles o hexadecimal (es el color codificado en letras y números). !Hagamos una página web!
  • 16. CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web... GUARDAR LA PÁGINA WEB Haz clic en Archivo, Guardar Como: Index.html porque es una página de inicio, y escoges en Tipo de documento: Todos los archivos. Ubica el archivo en el escritorio para que sea de facil acceso. ¡Y a Guardar y ejecutar nuestra página web!
  • 17. CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web... ¡PROBEMOS! Si ubicaste el archivo en el escritorio de tu computador, solo debes ir allí y hacer doble clic en el archivo, el cual tendrá un icono con la imagen de tu navegador. Y a disfrutar de tu pequeña pagina web. Veamos como resultó la pagina web... por ahora
  • 18. CREACION DE PÁGINAS WEB BÁSICAS Aprende como crear tu propia Página Web... ¡PROBEMOS! ¡MI PAGINA WEB! Vé y practica más diseños a tu gusto...