SlideShare a Scribd company logo
1 of 11
COMO HACER UNACOMO HACER UNA
PAGINA WEBPAGINA WEB
AYLLEN SANCHEZAYLLEN SANCHEZ
11°E11°E
ANALIDA CARVAJALANALIDA CARVAJAL
ESCUELA NORMAL SUPERIOR DEL DISTRITO DEESCUELA NORMAL SUPERIOR DEL DISTRITO DE
BARRANQUILLABARRANQUILLA
COMO CREAR UNA PAGINA WEBCOMO CREAR UNA PAGINA WEB
El primer paso para saber cómo hacer una página web consiste enEl primer paso para saber cómo hacer una página web consiste en
elegir una plantilla, o lo que es lo mismo, la imagen de tu páginaelegir una plantilla, o lo que es lo mismo, la imagen de tu página
web. Puedes elegir entre una gran variedad de plantillas conweb. Puedes elegir entre una gran variedad de plantillas con
diseños predefinidos que te permitirán empezar con una páginadiseños predefinidos que te permitirán empezar con una página
web ya casi lista, pues sólo tendrás que personalizarla y completarlaweb ya casi lista, pues sólo tendrás que personalizarla y completarla
con tu contenido para hacerla única. Además, en BaseKitcon tu contenido para hacerla única. Además, en BaseKit
encontrarás el diseño perfecto para tu web, ya que contamos conencontrarás el diseño perfecto para tu web, ya que contamos con
una gran galería de plantillas web para negocios de todo tipo,una gran galería de plantillas web para negocios de todo tipo,
plantillas para fotógrafos, plantillas para diseñadores... Elige la queplantillas para fotógrafos, plantillas para diseñadores... Elige la que
más te guste sin preocuparte por nada, ya que podrás modificar elmás te guste sin preocuparte por nada, ya que podrás modificar el
fondo, los colores, las formas, etc.fondo, los colores, las formas, etc.
NECESITAMOS PARA EMPEZAR:NECESITAMOS PARA EMPEZAR:
• Una computadora PC o Macintosh.Una computadora PC o Macintosh.
Preferiblemente una PC con Windows 98Preferiblemente una PC con Windows 98
• Un programa editor de paginas WEB.Un programa editor de paginas WEB.
Si su computadora tiene InternetSi su computadora tiene Internet
Explorer de Microsoft ustedes yaExplorer de Microsoft ustedes ya
tienen un editor en su máquina ,estetienen un editor en su máquina ,este
programa se llama Front Page Express,programa se llama Front Page Express,
Otros editores son Netscape ComposerOtros editores son Netscape Composer
incluido con la versión gratis deincluido con la versión gratis de
Netscape Communicator, programasNetscape Communicator, programas
mas avanzados son Front Page de MS,mas avanzados son Front Page de MS,
Dreamveaver, Homesite, Adobe PageDreamveaver, Homesite, Adobe Page
Mill, Net Objetcs Fusion etc., estos yMill, Net Objetcs Fusion etc., estos y
muchos otros se pueden bajar en estamuchos otros se pueden bajar en esta
dirección:dirección: httphttp://://
winfiles.cnet.com/apps/98/html-ag.htmlwinfiles.cnet.com/apps/98/html-ag.html,,
• Un servidor con una dirección para guardar susUn servidor con una dirección para guardar sus
páginas.páginas.
Su proveedor de servicio de Internet le proporcionaSu proveedor de servicio de Internet le proporciona
este espacio. Si su proveedor no le facilita esteeste espacio. Si su proveedor no le facilita este
espacio, usted puede encontrar en el Internetespacio, usted puede encontrar en el Internet
muchos sitios donde otorgan espacio para colocarmuchos sitios donde otorgan espacio para colocar
sus páginas WEB gratis. Por ejemplo aquí:sus páginas WEB gratis. Por ejemplo aquí:
http://espanol.geocities.yahoo.comhttp://espanol.geocities.yahoo.com//. Para sitios. Para sitios
profesionales se recomienda seleccionar unprofesionales se recomienda seleccionar un
proveedor de hospedaje de acuerdo a susproveedor de hospedaje de acuerdo a sus
necesidades, recuerda que lo barato en muchasnecesidades, recuerda que lo barato en muchas
ocasiones sale caro.ocasiones sale caro.
• Un programa editor de archivos gráficos.Un programa editor de archivos gráficos.
En caso que ustedes quieran utilizar fotos, graficasEn caso que ustedes quieran utilizar fotos, graficas
etc. Un programa fácil de usar el paint shop proetc. Un programa fácil de usar el paint shop pro
por ejemplo, este y otros están disponibles aquí:por ejemplo, este y otros están disponibles aquí:
http://http://
winfiles.cnet.com/apps/98/graph-editors.htmlwinfiles.cnet.com/apps/98/graph-editors.html..
AGREGAR CONTENIDO:AGREGAR CONTENIDO:
• Agregar Texto.Agregar Texto.
Con los mencionados WYSIWIG editors podemos agregar textos en la misma forma como en losCon los mencionados WYSIWIG editors podemos agregar textos en la misma forma como en los
procesadores de texto (word etc) sin preocuparnos mucho por el lenguaje HTML (Hyper textprocesadores de texto (word etc) sin preocuparnos mucho por el lenguaje HTML (Hyper text
markup language) Para una buena presentación gráfica de las páginas se usan en muchos casosmarkup language) Para una buena presentación gráfica de las páginas se usan en muchos casos
tablas para la mejor distribución de los textos y/o graficas, estas tablas pueden tener los bordestablas para la mejor distribución de los textos y/o graficas, estas tablas pueden tener los bordes
visibles o invisibles, entre otras características. Vea mas sobre esto aquí:visibles o invisibles, entre otras características. Vea mas sobre esto aquí: http://http://
htmlgoodies.earthweb.com/primers/primer_3.htmlhtmlgoodies.earthweb.com/primers/primer_3.html..
• Agregar Graficas.Agregar Graficas.
De la misma forma insertamos graficas y las archivamos en el mismo folder. Los formatos para lasDe la misma forma insertamos graficas y las archivamos en el mismo folder. Los formatos para las
graficas mas usados son .gif y .jpeg. Tratamos siempre de comprimir estos archivos al máximograficas mas usados son .gif y .jpeg. Tratamos siempre de comprimir estos archivos al máximo
para evitar demora en bajar las páginas. Por la misma razón, se recomienda usar un númeropara evitar demora en bajar las páginas. Por la misma razón, se recomienda usar un número
razonable de graficas. Mas aquí:razonable de graficas. Mas aquí: http://http://htmlgoodies.earthweb.com/primers/primer_3.htmlhtmlgoodies.earthweb.com/primers/primer_3.html..
• Hacer Links.Hacer Links.
Con la ayuda podemos enlazar (link) texto y graficas hacia otras partes del mismo documento, haciaCon la ayuda podemos enlazar (link) texto y graficas hacia otras partes del mismo documento, hacia
otras páginas y/o hacia páginas en otros sitios del internet. Vea mas sobre este tema aquí:otras páginas y/o hacia páginas en otros sitios del internet. Vea mas sobre este tema aquí: http://http://
htmlgoodies.earthweb.com/primers/primer_4.htmlhtmlgoodies.earthweb.com/primers/primer_4.html..
• Agregar Formularios.Agregar Formularios.
Estos editores nos permiten también integrarEstos editores nos permiten también integrar
formularios para coleccionar información yformularios para coleccionar información y
para hacer las páginas interactivas. Maspara hacer las páginas interactivas. Mas
detalles sobre este tema vea esta página:detalles sobre este tema vea esta página:
http://http://
htmlgoodies.earthweb.com/tutors/fm.htmlhtmlgoodies.earthweb.com/tutors/fm.html..
• Agregar efectos especiales.Agregar efectos especiales.
Existe un gran número de efectos especialesExiste un gran número de efectos especiales
que podemos agregar utilizando java applets,que podemos agregar utilizando java applets,
java scripts, flash, dhtml, entre otros. Veajava scripts, flash, dhtml, entre otros. Vea
algunos aquí:algunos aquí: http://www.dynamicdrive.comhttp://www.dynamicdrive.com//
..
Una vez hayas elegido tu plantilla deUna vez hayas elegido tu plantilla de
diseño predefinido, el siguiente pasodiseño predefinido, el siguiente paso
para crear tu web es completar tupara crear tu web es completar tu
página con tu contenido y hacerlapágina con tu contenido y hacerla
única. Podrás añadir o eliminar páginasúnica. Podrás añadir o eliminar páginas
en tu web, cambiar los textos de tuen tu web, cambiar los textos de tu
plantilla con sólo hacer clic sobre ellos,plantilla con sólo hacer clic sobre ellos,
añadir tus imágenes, añadir tus vídeosañadir tus imágenes, añadir tus vídeos
o incrustarlos directamente desdeo incrustarlos directamente desde
YouTube o Vimeo, incorporar iconos deYouTube o Vimeo, incorporar iconos de
redes sociales tipo Facebook, Twitter oredes sociales tipo Facebook, Twitter o
Flickr para que los usuarios de tu webFlickr para que los usuarios de tu web
puedan compartir tu contenido porpuedan compartir tu contenido por
internet, incluir mapas de Google Mapsinternet, incluir mapas de Google Maps
para poder localizar tu negociopara poder localizar tu negocio
fácilmente, crear formularios enfácilmente, crear formularios en
segundos y mucho más, simplementesegundos y mucho más, simplemente
con ‘arrastrar y soltar’ los elementoscon ‘arrastrar y soltar’ los elementos
que quieras en tu página.que quieras en tu página.
LA ESTRUCTURA DE UN SITIO WEB:LA ESTRUCTURA DE UN SITIO WEB:
• Ejemplo 1.Ejemplo 1.
• En este caso veamos un sitio con un total de 6 páginas, la primera página ( El HomeEn este caso veamos un sitio con un total de 6 páginas, la primera página ( El Home
Page) siempre se debe llamar index.html , de esta forma si nuestro sitio esta ubicado enPage) siempre se debe llamar index.html , de esta forma si nuestro sitio esta ubicado en
el la dirección (llamado también URL = Uniform resource locator) por ejemploel la dirección (llamado también URL = Uniform resource locator) por ejemplo
www.deloitte.com.pa el browser automáticamente busca awww.deloitte.com.pa el browser automáticamente busca a
www.deloitte.com.pa/index.htmwww.deloitte.com.pa/index.htm. o en un subdirectorio como. o en un subdirectorio como
http://www.deloitte.com.pa/spanish/index.htm.http://www.deloitte.com.pa/spanish/index.htm.
• Archivamos todas las páginas y graficas en un mismo folder si hay pocas o en variosArchivamos todas las páginas y graficas en un mismo folder si hay pocas o en varios
para ordenarlos mejor, si hay muchos archivos.para ordenarlos mejor, si hay muchos archivos.
• Preparamos antes de hacer el sitio un pequeño organigrama como en este ejemplo paraPreparamos antes de hacer el sitio un pequeño organigrama como en este ejemplo para
visualizar la estructura del sitio que construimos.visualizar la estructura del sitio que construimos.
• Navegación.Navegación. Tenemos que utilizar links de texto o graficas para enlazar las páginas yTenemos que utilizar links de texto o graficas para enlazar las páginas y
que sea fácil de navegar para que el visitante encuentre la información buscada. Veaque sea fácil de navegar para que el visitante encuentre la información buscada. Vea
mas sobre este tema aquí: http://www.htmltricks.com/navigation.htm.mas sobre este tema aquí: http://www.htmltricks.com/navigation.htm.
• Los Meta Tags.Los Meta Tags. El encabezado (head) de la página (visible solamente en html mode)El encabezado (head) de la página (visible solamente en html mode)
contiene varios componentes que podemos agregar; el mas importante es el título,contiene varios componentes que podemos agregar; el mas importante es el título,
luego la descripción y los keywords entre ortos. Estos son algunos de los elementosluego la descripción y los keywords entre ortos. Estos son algunos de los elementos
importantes para los search engines, vea mas sobre este tema aquí:importantes para los search engines, vea mas sobre este tema aquí:
http://www.htmltricks.com/setricks.htm.http://www.htmltricks.com/setricks.htm.
¿CÓMO PONGO MI PÁGINA EN INTERNET?¿CÓMO PONGO MI PÁGINA EN INTERNET?
No te preocupes, BaseKit se encarga de todo el proceso queNo te preocupes, BaseKit se encarga de todo el proceso que
conlleva colgar tu página para que se vea en internet y la genteconlleva colgar tu página para que se vea en internet y la gente
pueda entrar en ella. Tú sólo tienes que hacer click en el botónpueda entrar en ella. Tú sólo tienes que hacer click en el botón
‘publicar’ que encontrarás en tu editor web y ¡listo! Tu página estará‘publicar’ que encontrarás en tu editor web y ¡listo! Tu página estará
en internet inmediatamente y podrá verse genial en cualquieren internet inmediatamente y podrá verse genial en cualquier
ordenador, y también en móviles y tablets (incluidos iPhone yordenador, y también en móviles y tablets (incluidos iPhone y
iPads). Además, tu dominio y tu alojamiento estarán incluidos en eliPads). Además, tu dominio y tu alojamiento estarán incluidos en el
plan de BaseKit que elijas para hacer tu página web, para que así túplan de BaseKit que elijas para hacer tu página web, para que así tú
no tengas que preocuparte de nada. Además, ten en cuenta queno tengas que preocuparte de nada. Además, ten en cuenta que
siempre que quieras podrás acceder a tu editor web y modificar elsiempre que quieras podrás acceder a tu editor web y modificar el
diseño de tu página, cambiar textos, añadir imágenes y mucho más.diseño de tu página, cambiar textos, añadir imágenes y mucho más.
Como hacer una pagina web

More Related Content

What's hot

What's hot (19)

Crea tu web en wordpress 2015
Crea tu web en wordpress 2015Crea tu web en wordpress 2015
Crea tu web en wordpress 2015
 
Diseño web
Diseño webDiseño web
Diseño web
 
Wordpress como framework - DarioBF en WordCamp Barcelona
Wordpress como framework - DarioBF en WordCamp BarcelonaWordpress como framework - DarioBF en WordCamp Barcelona
Wordpress como framework - DarioBF en WordCamp Barcelona
 
Paginas web
Paginas webPaginas web
Paginas web
 
Montar un negocio de formación online con WordPress + Sensei
Montar un negocio de formación online con WordPress + SenseiMontar un negocio de formación online con WordPress + Sensei
Montar un negocio de formación online con WordPress + Sensei
 
Weebly videos
Weebly videosWeebly videos
Weebly videos
 
Weebly2
Weebly2Weebly2
Weebly2
 
¿Qué es WordPress?
¿Qué es WordPress?¿Qué es WordPress?
¿Qué es WordPress?
 
Elementos y recomendaciones generales
Elementos y recomendaciones generalesElementos y recomendaciones generales
Elementos y recomendaciones generales
 
¿Por qué defender la web abierta? 5 reflexiones para mejorar nuestro futuro
¿Por qué defender la web abierta? 5 reflexiones para mejorar nuestro futuro¿Por qué defender la web abierta? 5 reflexiones para mejorar nuestro futuro
¿Por qué defender la web abierta? 5 reflexiones para mejorar nuestro futuro
 
Presentación Profesional Ignacio Iglesias 04
Presentación Profesional Ignacio Iglesias 04Presentación Profesional Ignacio Iglesias 04
Presentación Profesional Ignacio Iglesias 04
 
Analisis SEO de Amazon
Analisis SEO de AmazonAnalisis SEO de Amazon
Analisis SEO de Amazon
 
Teoria blog parte 2
Teoria blog parte 2Teoria blog parte 2
Teoria blog parte 2
 
Diseño web
Diseño webDiseño web
Diseño web
 
WordPress para programadores
WordPress para programadoresWordPress para programadores
WordPress para programadores
 
Paginas web
Paginas webPaginas web
Paginas web
 
Yola
YolaYola
Yola
 
Yola- Información
Yola- Información Yola- Información
Yola- Información
 
Consulta wordpress
Consulta  wordpressConsulta  wordpress
Consulta wordpress
 

Viewers also liked

Cuadro comparativo
Cuadro comparativoCuadro comparativo
Cuadro comparativoRosanaCK16M
 
Tutorial Para Hacer Una Pagina Web
Tutorial Para Hacer Una Pagina WebTutorial Para Hacer Una Pagina Web
Tutorial Para Hacer Una Pagina Webisai220595
 
Adobe Muse otra gran opción de Adobe Creative Cloud
Adobe Muse otra gran opción de Adobe Creative CloudAdobe Muse otra gran opción de Adobe Creative Cloud
Adobe Muse otra gran opción de Adobe Creative CloudDiego Huillca
 
Como hacer una pagina web en wix
Como hacer una pagina web en wixComo hacer una pagina web en wix
Como hacer una pagina web en wixlina
 
Hacer pagina web para movil
Hacer pagina web para movilHacer pagina web para movil
Hacer pagina web para movilwasangareto
 
Manual x d como hacer una página web en word
Manual x d como hacer una página web en wordManual x d como hacer una página web en word
Manual x d como hacer una página web en wordjesus lopez castillo
 
Aproximación a un Libro estilo y Manual de identidad gráfica del IEDA
Aproximación a un Libro estilo y Manual de identidad gráfica del IEDAAproximación a un Libro estilo y Manual de identidad gráfica del IEDA
Aproximación a un Libro estilo y Manual de identidad gráfica del IEDAArte_Factory
 
Como hacer una pagina web en línea
Como hacer una pagina web en líneaComo hacer una pagina web en línea
Como hacer una pagina web en líneaAyllen Sanchez
 
Hacer una pagina web con HTML
Hacer una pagina web con HTMLHacer una pagina web con HTML
Hacer una pagina web con HTMLjimpansn
 
Manual de Identidad Gráfica (Ayuntamiento de Gijón)
Manual de Identidad Gráfica (Ayuntamiento de Gijón)Manual de Identidad Gráfica (Ayuntamiento de Gijón)
Manual de Identidad Gráfica (Ayuntamiento de Gijón)Paco Barranco
 
Como Crear una Página Web Efectiva
Como Crear una Página Web EfectivaComo Crear una Página Web Efectiva
Como Crear una Página Web EfectivaToni Padrell
 
Tutorial Hacer Una Pagina Web
Tutorial Hacer Una Pagina WebTutorial Hacer Una Pagina Web
Tutorial Hacer Una Pagina Webjorge9414
 
¡¡Ya hemos llegado!! @socialbrainsES, @BETA_permanente y @dygytalyaCOM han na...
¡¡Ya hemos llegado!! @socialbrainsES, @BETA_permanente y @dygytalyaCOM han na...¡¡Ya hemos llegado!! @socialbrainsES, @BETA_permanente y @dygytalyaCOM han na...
¡¡Ya hemos llegado!! @socialbrainsES, @BETA_permanente y @dygytalyaCOM han na...Paco Barranco
 
Realización de pagina web por medio de muse
Realización de pagina web por medio de museRealización de pagina web por medio de muse
Realización de pagina web por medio de museHector Torres
 
como hacer una pagina web con bloc de notas
como hacer una pagina web con bloc de notascomo hacer una pagina web con bloc de notas
como hacer una pagina web con bloc de notasjose_rock
 

Viewers also liked (20)

Mapa conceptual
Mapa conceptualMapa conceptual
Mapa conceptual
 
Cuadro comparativo
Cuadro comparativoCuadro comparativo
Cuadro comparativo
 
Las Grandes Divisiones del Derecho
Las Grandes Divisiones del DerechoLas Grandes Divisiones del Derecho
Las Grandes Divisiones del Derecho
 
Tutorial Para Hacer Una Pagina Web
Tutorial Para Hacer Una Pagina WebTutorial Para Hacer Una Pagina Web
Tutorial Para Hacer Una Pagina Web
 
Adobe Muse otra gran opción de Adobe Creative Cloud
Adobe Muse otra gran opción de Adobe Creative CloudAdobe Muse otra gran opción de Adobe Creative Cloud
Adobe Muse otra gran opción de Adobe Creative Cloud
 
Como hacer una pagina web en wix
Como hacer una pagina web en wixComo hacer una pagina web en wix
Como hacer una pagina web en wix
 
Hacer pagina web para movil
Hacer pagina web para movilHacer pagina web para movil
Hacer pagina web para movil
 
Manual x d como hacer una página web en word
Manual x d como hacer una página web en wordManual x d como hacer una página web en word
Manual x d como hacer una página web en word
 
Aproximación a un Libro estilo y Manual de identidad gráfica del IEDA
Aproximación a un Libro estilo y Manual de identidad gráfica del IEDAAproximación a un Libro estilo y Manual de identidad gráfica del IEDA
Aproximación a un Libro estilo y Manual de identidad gráfica del IEDA
 
La organización de la orma
La organización de la ormaLa organización de la orma
La organización de la orma
 
Como hacer una pagina web en línea
Como hacer una pagina web en líneaComo hacer una pagina web en línea
Como hacer una pagina web en línea
 
Hacer una pagina web con HTML
Hacer una pagina web con HTMLHacer una pagina web con HTML
Hacer una pagina web con HTML
 
Manual de Identidad Gráfica (Ayuntamiento de Gijón)
Manual de Identidad Gráfica (Ayuntamiento de Gijón)Manual de Identidad Gráfica (Ayuntamiento de Gijón)
Manual de Identidad Gráfica (Ayuntamiento de Gijón)
 
Adobe muse
Adobe museAdobe muse
Adobe muse
 
Adobe muse
Adobe museAdobe muse
Adobe muse
 
Como Crear una Página Web Efectiva
Como Crear una Página Web EfectivaComo Crear una Página Web Efectiva
Como Crear una Página Web Efectiva
 
Tutorial Hacer Una Pagina Web
Tutorial Hacer Una Pagina WebTutorial Hacer Una Pagina Web
Tutorial Hacer Una Pagina Web
 
¡¡Ya hemos llegado!! @socialbrainsES, @BETA_permanente y @dygytalyaCOM han na...
¡¡Ya hemos llegado!! @socialbrainsES, @BETA_permanente y @dygytalyaCOM han na...¡¡Ya hemos llegado!! @socialbrainsES, @BETA_permanente y @dygytalyaCOM han na...
¡¡Ya hemos llegado!! @socialbrainsES, @BETA_permanente y @dygytalyaCOM han na...
 
Realización de pagina web por medio de muse
Realización de pagina web por medio de museRealización de pagina web por medio de muse
Realización de pagina web por medio de muse
 
como hacer una pagina web con bloc de notas
como hacer una pagina web con bloc de notascomo hacer una pagina web con bloc de notas
como hacer una pagina web con bloc de notas
 

Similar to Como hacer una pagina web

Similar to Como hacer una pagina web (20)

Adoble dreanweare1
Adoble dreanweare1Adoble dreanweare1
Adoble dreanweare1
 
Jesus maria-fernanda
Jesus  maria-fernandaJesus  maria-fernanda
Jesus maria-fernanda
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Dreamwever
DreamweverDreamwever
Dreamwever
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Frontpage
FrontpageFrontpage
Frontpage
 
Dreamweaver cs5
Dreamweaver cs5Dreamweaver cs5
Dreamweaver cs5
 
Dreamweaver cs5
Dreamweaver cs5Dreamweaver cs5
Dreamweaver cs5
 
Tp 4 alvaro
Tp 4 alvaroTp 4 alvaro
Tp 4 alvaro
 
Dreamweaver Tutorial
Dreamweaver Tutorial Dreamweaver Tutorial
Dreamweaver Tutorial
 
Manual frontpage 2000
Manual frontpage 2000Manual frontpage 2000
Manual frontpage 2000
 
Manual frontpage 2000
Manual frontpage 2000Manual frontpage 2000
Manual frontpage 2000
 
Manual Dreamweaver
Manual DreamweaverManual Dreamweaver
Manual Dreamweaver
 
Dreamwaver2222222222222
Dreamwaver2222222222222Dreamwaver2222222222222
Dreamwaver2222222222222
 
Dreamwaver2222222222222
Dreamwaver2222222222222Dreamwaver2222222222222
Dreamwaver2222222222222
 
Guia de aprendizaje
Guia de aprendizajeGuia de aprendizaje
Guia de aprendizaje
 
1 introduccion a dreamweaver
1 introduccion a dreamweaver1 introduccion a dreamweaver
1 introduccion a dreamweaver
 
Presentación post
Presentación postPresentación post
Presentación post
 
Manual de front page
Manual de front pageManual de front page
Manual de front page
 
Cap 1 curso_dreamweaver 8
Cap 1 curso_dreamweaver 8Cap 1 curso_dreamweaver 8
Cap 1 curso_dreamweaver 8
 

Recently uploaded

c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptxc3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptxMartín Ramírez
 
PLANIFICACION ANUAL 2024 - INICIAL UNIDOCENTE.docx
PLANIFICACION ANUAL 2024 - INICIAL UNIDOCENTE.docxPLANIFICACION ANUAL 2024 - INICIAL UNIDOCENTE.docx
PLANIFICACION ANUAL 2024 - INICIAL UNIDOCENTE.docxJUANSIMONPACHIN
 
IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO YESSENIA 933623393 NUEV...
IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO  YESSENIA 933623393 NUEV...IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO  YESSENIA 933623393 NUEV...
IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO YESSENIA 933623393 NUEV...YobanaZevallosSantil1
 
PINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).ppt
PINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).pptPINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).ppt
PINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).pptAlberto Rubio
 
Fundamentos y Principios de Psicopedagogía..pdf
Fundamentos y Principios de Psicopedagogía..pdfFundamentos y Principios de Psicopedagogía..pdf
Fundamentos y Principios de Psicopedagogía..pdfsamyarrocha1
 
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdf
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdfFisiologia.Articular. 3 Kapandji.6a.Ed.pdf
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdfcoloncopias5
 
La Función tecnológica del tutor.pptx
La  Función  tecnológica  del tutor.pptxLa  Función  tecnológica  del tutor.pptx
La Función tecnológica del tutor.pptxJunkotantik
 
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptxLINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptxdanalikcruz2000
 
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
 
Metabolismo 3: Anabolismo y Fotosíntesis 2024
Metabolismo 3: Anabolismo y Fotosíntesis 2024Metabolismo 3: Anabolismo y Fotosíntesis 2024
Metabolismo 3: Anabolismo y Fotosíntesis 2024IES Vicent Andres Estelles
 
SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024
SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024
SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024gharce
 
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
 
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdf
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdfTema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdf
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdfDaniel Ángel Corral de la Mata, Ph.D.
 
DETALLES EN EL DISEÑO DE INTERIOR
DETALLES EN EL DISEÑO DE INTERIORDETALLES EN EL DISEÑO DE INTERIOR
DETALLES EN EL DISEÑO DE INTERIORGonella
 
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
 
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
 

Recently uploaded (20)

c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptxc3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
 
DIA INTERNACIONAL DAS FLORESTAS .
DIA INTERNACIONAL DAS FLORESTAS         .DIA INTERNACIONAL DAS FLORESTAS         .
DIA INTERNACIONAL DAS FLORESTAS .
 
PLANIFICACION ANUAL 2024 - INICIAL UNIDOCENTE.docx
PLANIFICACION ANUAL 2024 - INICIAL UNIDOCENTE.docxPLANIFICACION ANUAL 2024 - INICIAL UNIDOCENTE.docx
PLANIFICACION ANUAL 2024 - INICIAL UNIDOCENTE.docx
 
IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO YESSENIA 933623393 NUEV...
IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO  YESSENIA 933623393 NUEV...IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO  YESSENIA 933623393 NUEV...
IV SES LUN 15 TUTO CUIDO MI MENTE CUIDANDO MI CUERPO YESSENIA 933623393 NUEV...
 
PINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).ppt
PINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).pptPINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).ppt
PINTURA ITALIANA DEL CINQUECENTO (SIGLO XVI).ppt
 
Sesión La luz brilla en la oscuridad.pdf
Sesión  La luz brilla en la oscuridad.pdfSesión  La luz brilla en la oscuridad.pdf
Sesión La luz brilla en la oscuridad.pdf
 
Fundamentos y Principios de Psicopedagogía..pdf
Fundamentos y Principios de Psicopedagogía..pdfFundamentos y Principios de Psicopedagogía..pdf
Fundamentos y Principios de Psicopedagogía..pdf
 
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
 
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdf
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdfFisiologia.Articular. 3 Kapandji.6a.Ed.pdf
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdf
 
La Función tecnológica del tutor.pptx
La  Función  tecnológica  del tutor.pptxLa  Función  tecnológica  del tutor.pptx
La Función tecnológica del tutor.pptx
 
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptxLINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
 
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
 
Metabolismo 3: Anabolismo y Fotosíntesis 2024
Metabolismo 3: Anabolismo y Fotosíntesis 2024Metabolismo 3: Anabolismo y Fotosíntesis 2024
Metabolismo 3: Anabolismo y Fotosíntesis 2024
 
SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024
SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024
SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024
 
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
 
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdf
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdfTema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdf
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdf
 
DETALLES EN EL DISEÑO DE INTERIOR
DETALLES EN EL DISEÑO DE INTERIORDETALLES EN EL DISEÑO DE INTERIOR
DETALLES EN EL DISEÑO DE INTERIOR
 
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
 
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
 
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
 

Como hacer una pagina web

  • 1. COMO HACER UNACOMO HACER UNA PAGINA WEBPAGINA WEB AYLLEN SANCHEZAYLLEN SANCHEZ 11°E11°E ANALIDA CARVAJALANALIDA CARVAJAL ESCUELA NORMAL SUPERIOR DEL DISTRITO DEESCUELA NORMAL SUPERIOR DEL DISTRITO DE BARRANQUILLABARRANQUILLA
  • 2. COMO CREAR UNA PAGINA WEBCOMO CREAR UNA PAGINA WEB El primer paso para saber cómo hacer una página web consiste enEl primer paso para saber cómo hacer una página web consiste en elegir una plantilla, o lo que es lo mismo, la imagen de tu páginaelegir una plantilla, o lo que es lo mismo, la imagen de tu página web. Puedes elegir entre una gran variedad de plantillas conweb. Puedes elegir entre una gran variedad de plantillas con diseños predefinidos que te permitirán empezar con una páginadiseños predefinidos que te permitirán empezar con una página web ya casi lista, pues sólo tendrás que personalizarla y completarlaweb ya casi lista, pues sólo tendrás que personalizarla y completarla con tu contenido para hacerla única. Además, en BaseKitcon tu contenido para hacerla única. Además, en BaseKit encontrarás el diseño perfecto para tu web, ya que contamos conencontrarás el diseño perfecto para tu web, ya que contamos con una gran galería de plantillas web para negocios de todo tipo,una gran galería de plantillas web para negocios de todo tipo, plantillas para fotógrafos, plantillas para diseñadores... Elige la queplantillas para fotógrafos, plantillas para diseñadores... Elige la que más te guste sin preocuparte por nada, ya que podrás modificar elmás te guste sin preocuparte por nada, ya que podrás modificar el fondo, los colores, las formas, etc.fondo, los colores, las formas, etc.
  • 3. NECESITAMOS PARA EMPEZAR:NECESITAMOS PARA EMPEZAR: • Una computadora PC o Macintosh.Una computadora PC o Macintosh. Preferiblemente una PC con Windows 98Preferiblemente una PC con Windows 98 • Un programa editor de paginas WEB.Un programa editor de paginas WEB. Si su computadora tiene InternetSi su computadora tiene Internet Explorer de Microsoft ustedes yaExplorer de Microsoft ustedes ya tienen un editor en su máquina ,estetienen un editor en su máquina ,este programa se llama Front Page Express,programa se llama Front Page Express, Otros editores son Netscape ComposerOtros editores son Netscape Composer incluido con la versión gratis deincluido con la versión gratis de Netscape Communicator, programasNetscape Communicator, programas mas avanzados son Front Page de MS,mas avanzados son Front Page de MS, Dreamveaver, Homesite, Adobe PageDreamveaver, Homesite, Adobe Page Mill, Net Objetcs Fusion etc., estos yMill, Net Objetcs Fusion etc., estos y muchos otros se pueden bajar en estamuchos otros se pueden bajar en esta dirección:dirección: httphttp://:// winfiles.cnet.com/apps/98/html-ag.htmlwinfiles.cnet.com/apps/98/html-ag.html,, • Un servidor con una dirección para guardar susUn servidor con una dirección para guardar sus páginas.páginas. Su proveedor de servicio de Internet le proporcionaSu proveedor de servicio de Internet le proporciona este espacio. Si su proveedor no le facilita esteeste espacio. Si su proveedor no le facilita este espacio, usted puede encontrar en el Internetespacio, usted puede encontrar en el Internet muchos sitios donde otorgan espacio para colocarmuchos sitios donde otorgan espacio para colocar sus páginas WEB gratis. Por ejemplo aquí:sus páginas WEB gratis. Por ejemplo aquí: http://espanol.geocities.yahoo.comhttp://espanol.geocities.yahoo.com//. Para sitios. Para sitios profesionales se recomienda seleccionar unprofesionales se recomienda seleccionar un proveedor de hospedaje de acuerdo a susproveedor de hospedaje de acuerdo a sus necesidades, recuerda que lo barato en muchasnecesidades, recuerda que lo barato en muchas ocasiones sale caro.ocasiones sale caro. • Un programa editor de archivos gráficos.Un programa editor de archivos gráficos. En caso que ustedes quieran utilizar fotos, graficasEn caso que ustedes quieran utilizar fotos, graficas etc. Un programa fácil de usar el paint shop proetc. Un programa fácil de usar el paint shop pro por ejemplo, este y otros están disponibles aquí:por ejemplo, este y otros están disponibles aquí: http://http:// winfiles.cnet.com/apps/98/graph-editors.htmlwinfiles.cnet.com/apps/98/graph-editors.html..
  • 4.
  • 5. AGREGAR CONTENIDO:AGREGAR CONTENIDO: • Agregar Texto.Agregar Texto. Con los mencionados WYSIWIG editors podemos agregar textos en la misma forma como en losCon los mencionados WYSIWIG editors podemos agregar textos en la misma forma como en los procesadores de texto (word etc) sin preocuparnos mucho por el lenguaje HTML (Hyper textprocesadores de texto (word etc) sin preocuparnos mucho por el lenguaje HTML (Hyper text markup language) Para una buena presentación gráfica de las páginas se usan en muchos casosmarkup language) Para una buena presentación gráfica de las páginas se usan en muchos casos tablas para la mejor distribución de los textos y/o graficas, estas tablas pueden tener los bordestablas para la mejor distribución de los textos y/o graficas, estas tablas pueden tener los bordes visibles o invisibles, entre otras características. Vea mas sobre esto aquí:visibles o invisibles, entre otras características. Vea mas sobre esto aquí: http://http:// htmlgoodies.earthweb.com/primers/primer_3.htmlhtmlgoodies.earthweb.com/primers/primer_3.html.. • Agregar Graficas.Agregar Graficas. De la misma forma insertamos graficas y las archivamos en el mismo folder. Los formatos para lasDe la misma forma insertamos graficas y las archivamos en el mismo folder. Los formatos para las graficas mas usados son .gif y .jpeg. Tratamos siempre de comprimir estos archivos al máximograficas mas usados son .gif y .jpeg. Tratamos siempre de comprimir estos archivos al máximo para evitar demora en bajar las páginas. Por la misma razón, se recomienda usar un númeropara evitar demora en bajar las páginas. Por la misma razón, se recomienda usar un número razonable de graficas. Mas aquí:razonable de graficas. Mas aquí: http://http://htmlgoodies.earthweb.com/primers/primer_3.htmlhtmlgoodies.earthweb.com/primers/primer_3.html.. • Hacer Links.Hacer Links. Con la ayuda podemos enlazar (link) texto y graficas hacia otras partes del mismo documento, haciaCon la ayuda podemos enlazar (link) texto y graficas hacia otras partes del mismo documento, hacia otras páginas y/o hacia páginas en otros sitios del internet. Vea mas sobre este tema aquí:otras páginas y/o hacia páginas en otros sitios del internet. Vea mas sobre este tema aquí: http://http:// htmlgoodies.earthweb.com/primers/primer_4.htmlhtmlgoodies.earthweb.com/primers/primer_4.html..
  • 6. • Agregar Formularios.Agregar Formularios. Estos editores nos permiten también integrarEstos editores nos permiten también integrar formularios para coleccionar información yformularios para coleccionar información y para hacer las páginas interactivas. Maspara hacer las páginas interactivas. Mas detalles sobre este tema vea esta página:detalles sobre este tema vea esta página: http://http:// htmlgoodies.earthweb.com/tutors/fm.htmlhtmlgoodies.earthweb.com/tutors/fm.html.. • Agregar efectos especiales.Agregar efectos especiales. Existe un gran número de efectos especialesExiste un gran número de efectos especiales que podemos agregar utilizando java applets,que podemos agregar utilizando java applets, java scripts, flash, dhtml, entre otros. Veajava scripts, flash, dhtml, entre otros. Vea algunos aquí:algunos aquí: http://www.dynamicdrive.comhttp://www.dynamicdrive.com// ..
  • 7. Una vez hayas elegido tu plantilla deUna vez hayas elegido tu plantilla de diseño predefinido, el siguiente pasodiseño predefinido, el siguiente paso para crear tu web es completar tupara crear tu web es completar tu página con tu contenido y hacerlapágina con tu contenido y hacerla única. Podrás añadir o eliminar páginasúnica. Podrás añadir o eliminar páginas en tu web, cambiar los textos de tuen tu web, cambiar los textos de tu plantilla con sólo hacer clic sobre ellos,plantilla con sólo hacer clic sobre ellos, añadir tus imágenes, añadir tus vídeosañadir tus imágenes, añadir tus vídeos o incrustarlos directamente desdeo incrustarlos directamente desde YouTube o Vimeo, incorporar iconos deYouTube o Vimeo, incorporar iconos de redes sociales tipo Facebook, Twitter oredes sociales tipo Facebook, Twitter o Flickr para que los usuarios de tu webFlickr para que los usuarios de tu web puedan compartir tu contenido porpuedan compartir tu contenido por internet, incluir mapas de Google Mapsinternet, incluir mapas de Google Maps para poder localizar tu negociopara poder localizar tu negocio fácilmente, crear formularios enfácilmente, crear formularios en segundos y mucho más, simplementesegundos y mucho más, simplemente con ‘arrastrar y soltar’ los elementoscon ‘arrastrar y soltar’ los elementos que quieras en tu página.que quieras en tu página.
  • 8. LA ESTRUCTURA DE UN SITIO WEB:LA ESTRUCTURA DE UN SITIO WEB:
  • 9. • Ejemplo 1.Ejemplo 1. • En este caso veamos un sitio con un total de 6 páginas, la primera página ( El HomeEn este caso veamos un sitio con un total de 6 páginas, la primera página ( El Home Page) siempre se debe llamar index.html , de esta forma si nuestro sitio esta ubicado enPage) siempre se debe llamar index.html , de esta forma si nuestro sitio esta ubicado en el la dirección (llamado también URL = Uniform resource locator) por ejemploel la dirección (llamado también URL = Uniform resource locator) por ejemplo www.deloitte.com.pa el browser automáticamente busca awww.deloitte.com.pa el browser automáticamente busca a www.deloitte.com.pa/index.htmwww.deloitte.com.pa/index.htm. o en un subdirectorio como. o en un subdirectorio como http://www.deloitte.com.pa/spanish/index.htm.http://www.deloitte.com.pa/spanish/index.htm. • Archivamos todas las páginas y graficas en un mismo folder si hay pocas o en variosArchivamos todas las páginas y graficas en un mismo folder si hay pocas o en varios para ordenarlos mejor, si hay muchos archivos.para ordenarlos mejor, si hay muchos archivos. • Preparamos antes de hacer el sitio un pequeño organigrama como en este ejemplo paraPreparamos antes de hacer el sitio un pequeño organigrama como en este ejemplo para visualizar la estructura del sitio que construimos.visualizar la estructura del sitio que construimos. • Navegación.Navegación. Tenemos que utilizar links de texto o graficas para enlazar las páginas yTenemos que utilizar links de texto o graficas para enlazar las páginas y que sea fácil de navegar para que el visitante encuentre la información buscada. Veaque sea fácil de navegar para que el visitante encuentre la información buscada. Vea mas sobre este tema aquí: http://www.htmltricks.com/navigation.htm.mas sobre este tema aquí: http://www.htmltricks.com/navigation.htm. • Los Meta Tags.Los Meta Tags. El encabezado (head) de la página (visible solamente en html mode)El encabezado (head) de la página (visible solamente en html mode) contiene varios componentes que podemos agregar; el mas importante es el título,contiene varios componentes que podemos agregar; el mas importante es el título, luego la descripción y los keywords entre ortos. Estos son algunos de los elementosluego la descripción y los keywords entre ortos. Estos son algunos de los elementos importantes para los search engines, vea mas sobre este tema aquí:importantes para los search engines, vea mas sobre este tema aquí: http://www.htmltricks.com/setricks.htm.http://www.htmltricks.com/setricks.htm.
  • 10. ¿CÓMO PONGO MI PÁGINA EN INTERNET?¿CÓMO PONGO MI PÁGINA EN INTERNET? No te preocupes, BaseKit se encarga de todo el proceso queNo te preocupes, BaseKit se encarga de todo el proceso que conlleva colgar tu página para que se vea en internet y la genteconlleva colgar tu página para que se vea en internet y la gente pueda entrar en ella. Tú sólo tienes que hacer click en el botónpueda entrar en ella. Tú sólo tienes que hacer click en el botón ‘publicar’ que encontrarás en tu editor web y ¡listo! Tu página estará‘publicar’ que encontrarás en tu editor web y ¡listo! Tu página estará en internet inmediatamente y podrá verse genial en cualquieren internet inmediatamente y podrá verse genial en cualquier ordenador, y también en móviles y tablets (incluidos iPhone yordenador, y también en móviles y tablets (incluidos iPhone y iPads). Además, tu dominio y tu alojamiento estarán incluidos en eliPads). Además, tu dominio y tu alojamiento estarán incluidos en el plan de BaseKit que elijas para hacer tu página web, para que así túplan de BaseKit que elijas para hacer tu página web, para que así tú no tengas que preocuparte de nada. Además, ten en cuenta queno tengas que preocuparte de nada. Además, ten en cuenta que siempre que quieras podrás acceder a tu editor web y modificar elsiempre que quieras podrás acceder a tu editor web y modificar el diseño de tu página, cambiar textos, añadir imágenes y mucho más.diseño de tu página, cambiar textos, añadir imágenes y mucho más.